Merge pull request #206 from ator-dev/reduce-abstract-classes

Eliminate unnecessary abstract classes in modules
searchmarkers · Jan 27, 2025 · ee7a189 · ee7a189
2 parents 77c6414 + 911aeb3
commit ee7a189
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 70 deletions.
diff --git a/src/modules/highlight/common/term-background.mts b/src/modules/highlight/common/term-background.mts
@@ -0,0 +1,34 @@
+/*
+ * This file is part of Mark My Search.
+ * Copyright © 2021-present ‘ator-dev’, Mark My Search contributors.
+ * Licensed under the EUPL-1.2-or-later.
+ */
+
+const getFlatStyle = (color: string) => color;
+
+const getDiagonalStyle = (colorA: string, colorB: string, cycle: number) => {
+	const isAboveStyleLevel = (level: number) => cycle >= level;
+	return isAboveStyleLevel(1)
+		? `repeating-linear-gradient(${
+			isAboveStyleLevel(3) ? isAboveStyleLevel(4) ? 0 : 90 : isAboveStyleLevel(2) ? 45 : -45
+		}deg, ${colorA}, ${colorA} 2px, ${colorB} 2px, ${colorB} 8px)`
+		: colorA;
+};
+
+const getHorizontalStyle = (colorA: string, colorB: string, cycle: number) => {
+	const isAboveStyleLevel = (level: number) => cycle >= level;
+	return isAboveStyleLevel(1)
+		? `linear-gradient(${Array(Math.floor(cycle/2 + 1.5) * 2)
+			.fill("")
+			.map((v, i) => (
+				(Math.floor(i / 2) % 2 == cycle % 2 ? colorB : colorA)
+				+ (Math.floor((i + 1) / 2)/(Math.floor((cycle + 1) / 2) + 1) * 100) + "%"
+			))
+			.join(", ")
+		})`
+		: colorA;
+};
+
+export {
+	getFlatStyle, getDiagonalStyle, getHorizontalStyle,
+};
diff --git a/src/modules/highlight/common/term-css.mts b/src/modules/highlight/common/term-css.mts
diff --git a/src/modules/highlight/engines/element.mts b/src/modules/highlight/engines/element.mts
@@ -8,7 +8,7 @@ import type { AbstractTreeEditEngine } from "/dist/modules/highlight/models/tree
 import { HIGHLIGHT_TAG, HIGHLIGHT_TAG_UPPER } from "/dist/modules/highlight/models/tree-edit/tags.mjs";
 import type { FlowMutationObserver } from "/dist/modules/highlight/common/flow-mutations.d.mjs";
 import { highlightTags } from "/dist/modules/highlight/common/highlight-tags.mjs";
-import TermCSS from "/dist/modules/highlight/common/term-css.mjs";
+import * as TermBackground from "/dist/modules/highlight/common/term-background.mjs";
 import type { MatchTerm, TermTokens, TermPatterns } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";
 import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
@@ -127,7 +127,7 @@ ${HIGHLIGHT_TAG} {
 		this.endHighlighting();
 	}
 
-	readonly getTermBackgroundStyle = TermCSS.getDiagonalStyle;
+	readonly getTermBackgroundStyle = TermBackground.getDiagonalStyle;
 
 	startHighlighting (terms: ReadonlyArray<MatchTerm>, hues: ReadonlyArray<number>) {
 		const termsToHighlight = terms.filter(a => this.terms.current.every(b => JSON.stringify(a) !== JSON.stringify(b)));

diff --git a/src/modules/highlight/engines/highlight.mts b/src/modules/highlight/engines/highlight.mts
@@ -7,7 +7,7 @@
 import type { AbstractTreeCacheEngine } from "/dist/modules/highlight/models/tree-cache.d.mjs";
 import type { AbstractFlowTracker, Flow, Span } from "/dist/modules/highlight/models/tree-cache/flow-tracker.d.mjs";
 import { FlowTracker } from "/dist/modules/highlight/models/tree-cache/flow-tracker.mjs";
-import TermCSS from "/dist/modules/highlight/common/term-css.mjs";
+import * as TermBackground from "/dist/modules/highlight/common/term-background.mjs";
 import type { MatchTerm, TermTokens, TermPatterns } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";
 import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
@@ -76,7 +76,7 @@ class HighlightEngine implements AbstractTreeCacheEngine {
 		this.endHighlighting();
 	}
 
-	readonly getTermBackgroundStyle = TermCSS.getFlatStyle;
+	readonly getTermBackgroundStyle = TermBackground.getFlatStyle;
 
 	startHighlighting (terms: ReadonlyArray<MatchTerm>, hues: ReadonlyArray<number>) {
 		const termsToPurge = this.terms.current.filter(a => terms.every(b => JSON.stringify(a) !== JSON.stringify(b)));

diff --git a/src/modules/highlight/engines/paint.mts b/src/modules/highlight/engines/paint.mts
@@ -11,7 +11,7 @@ import type { AbstractTreeCacheEngine } from "/dist/modules/highlight/models/tre
 import type { AbstractFlowTracker, Flow, Span } from "/dist/modules/highlight/models/tree-cache/flow-tracker.d.mjs";
 import { FlowTracker } from "/dist/modules/highlight/models/tree-cache/flow-tracker.mjs";
 import { highlightTags } from "/dist/modules/highlight/common/highlight-tags.mjs";
-import TermCSS from "/dist/modules/highlight/common/term-css.mjs";
+import * as TermBackground from "/dist/modules/highlight/common/term-background.mjs";
 import type { MatchTerm, TermTokens, TermPatterns } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";
 import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
@@ -230,7 +230,7 @@ class PaintEngine implements AbstractTreeCacheEngine {
 		this.#styleManager.deactivate();
 	}
 
-	readonly getTermBackgroundStyle = TermCSS.getHorizontalStyle;
+	readonly getTermBackgroundStyle = TermBackground.getHorizontalStyle;
 
 	startHighlighting (terms: ReadonlyArray<MatchTerm>, hues: ReadonlyArray<number>) {
 		const termsToHighlight = terms.filter(a => this.terms.current.every(b => JSON.stringify(a) !== JSON.stringify(b)));

diff --git a/src/modules/highlight/engines/paint/methods/element-image.mts b/src/modules/highlight/engines/paint/methods/element-image.mts
@@ -8,7 +8,7 @@ import type { AbstractMethod } from "/dist/modules/highlight/engines/paint/metho
 import { getBoxesOwned } from "/dist/modules/highlight/engines/paint/boxes.mjs";
 import { highlightingIdAttr } from "/dist/modules/highlight/engines/paint/common.mjs";
 import type { HighlightingStyleObservable, Flow, Span, Box } from "/dist/modules/highlight/engines/paint.mjs";
-import TermCSS from "/dist/modules/highlight/common/term-css.mjs";
+import * as TermBackground from "/dist/modules/highlight/common/term-background.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";
 import { HTMLStylesheet } from "/dist/modules/stylesheets/html.mjs";
@@ -130,7 +130,7 @@ class ElementImageMethod implements AbstractMethod {
 		const selector = `#${ EleID.BAR }.${ EleClass.HIGHLIGHTS_SHOWN } ~ #${ EleID.DRAW_CONTAINER } .${
 			getTermClass(term, this.#termTokens)
 		}`;
-		const backgroundStyle = TermCSS.getHorizontalStyle(
+		const backgroundStyle = TermBackground.getHorizontalStyle(
 			`hsl(${ hue } 100% 60% / 0.4)`,
 			`hsl(${ hue } 100% 88% / 0.4)`,
 			cycle,

diff --git a/src/modules/highlight/tools/term-marker/common.mts b/src/modules/highlight/tools/term-marker/common.mts
@@ -7,8 +7,7 @@
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { Z_INDEX_MAX, EleID, EleClass, AtRuleID, getTermClass } from "/dist/modules/common.mjs";
 
-abstract class Styles {
-	static readonly mainCSS = (`
+const mainCSS = `
 #${EleID.MARKER_GUTTER} {
 	& {
 		display: block;
@@ -37,23 +36,21 @@ abstract class Styles {
 @keyframes ${AtRuleID.MARKER_OFF} {
 	from { padding-right: 16px; } to { padding-right: 0; };
 }
-`
-	);
+`;
 
-	static getTermCSS (
-		term: MatchTerm,
-		termIndex: number,
-		hues: ReadonlyArray<number>,
-		termTokens: TermTokens,
-	): string {
-		const hue = hues[termIndex % hues.length];
-		return `
+const getTermCSS = (
+	term: MatchTerm,
+	termIndex: number,
+	hues: ReadonlyArray<number>,
+	termTokens: TermTokens,
+): string => {
+	const hue = hues[termIndex % hues.length];
+	return `
 #${EleID.MARKER_GUTTER} .${getTermClass(term, termTokens)} {
 	background: hsl(${hue} 100% 44%);
 }
 `
-		;
-	}
-}
+	;
+};
 
-export { Styles };
+export { mainCSS, getTermCSS };
diff --git a/src/modules/highlight/tools/term-markers/tree-cache.mts b/src/modules/highlight/tools/term-markers/tree-cache.mts
@@ -5,7 +5,7 @@
  */
 
 import type { AbstractTermMarker } from "/dist/modules/highlight/tools/term-marker.d.mjs";
-import { Styles } from "/dist/modules/highlight/tools/term-marker/common.mjs";
+import * as Styles from "/dist/modules/highlight/tools/term-marker/common.mjs";
 import type { BaseFlow } from "/dist/modules/highlight/common/matching.d.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";

diff --git a/src/modules/highlight/tools/term-markers/tree-edit.mts b/src/modules/highlight/tools/term-markers/tree-edit.mts
@@ -5,7 +5,7 @@
  */
 
 import type { AbstractTermMarker } from "/dist/modules/highlight/tools/term-marker.d.mjs";
-import { Styles } from "/dist/modules/highlight/tools/term-marker/common.mjs";
+import * as Styles from "/dist/modules/highlight/tools/term-marker/common.mjs";
 import { getContainerBlock } from "/dist/modules/highlight/common/container-blocks.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";

diff --git a/src/modules/highlight/tools/term-walker/common.mts b/src/modules/highlight/tools/term-walker/common.mts
@@ -6,17 +6,14 @@
 
 import { EleClass, AtRuleID } from "/dist/modules/common.mjs";
 
-abstract class Styles {
-	static readonly mainCSS = (`
+const mainCSS = `
 .${EleClass.FOCUS_CONTAINER} {
 	animation: ${AtRuleID.FLASH} 1s;
 }
 
 @keyframes ${AtRuleID.FLASH} {
 	from { background-color: hsl(0 0% 65% / 0.8); } to {};
 }
-`
-	);
-}
+`;
 
-export { Styles };
+export { mainCSS };
diff --git a/src/modules/highlight/tools/term-walkers/tree-cache.mts b/src/modules/highlight/tools/term-walkers/tree-cache.mts
@@ -5,7 +5,7 @@
  */
 
 import type { AbstractTermWalker } from "/dist/modules/highlight/tools/term-walker.d.mjs";
-import { Styles } from "/dist/modules/highlight/tools/term-walker/common.mjs";
+import * as Styles from "/dist/modules/highlight/tools/term-walker/common.mjs";
 import type { BaseFlow } from "/dist/modules/highlight/common/matching.d.mjs";
 import type { MatchTerm } from "/dist/modules/match-term.mjs";
 import { StyleManager } from "/dist/modules/style-manager.mjs";

diff --git a/src/modules/highlight/tools/term-walkers/tree-edit.mts b/src/modules/highlight/tools/term-walkers/tree-edit.mts
@@ -5,7 +5,7 @@
  */
 
 import type { AbstractTermWalker } from "/dist/modules/highlight/tools/term-walker.d.mjs";
-import { Styles } from "/dist/modules/highlight/tools/term-walker/common.mjs";
+import * as Styles from "/dist/modules/highlight/tools/term-walker/common.mjs";
 import { getContainerBlock } from "/dist/modules/highlight/common/container-blocks.mjs";
 import { HIGHLIGHT_TAG, HIGHLIGHT_TAG_UPPER } from "/dist/modules/highlight/models/tree-edit/tags.mjs";
 import type { MatchTerm, TermTokens } from "/dist/modules/match-term.mjs";