Skip to content

Commit

Permalink
Merge pull request #169 from ator-dev/class-normalise
Browse files Browse the repository at this point in the history 
Normalise several class bodies
  • Loading branch information
@ator-dev
ator-dev authored Aug 28, 2024
2 parents 7557a2f + 60225de commit 3107c5f
Show file tree
Hide file tree
Showing 11 changed files with 258 additions and 271 deletions.
12 changes: 6 additions & 6 deletions src/modules/highlight/engine-manager.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,9 @@ class EngineManager implements AbstractEngineManager {
);
return {
engine,
termCounter: new TermCounter(engine.elementFlowsMap),
termWalker: new TermWalker(engine.elementFlowsMap),
termMarker: new TermMarker(this.#termTokens, engine.elementFlowsMap),
termCounter: new TermCounter(engine.getElementFlowsMap()),
termWalker: new TermWalker(engine.getElementFlowsMap()),
termMarker: new TermMarker(this.#termTokens, engine.getElementFlowsMap()),
};
} case "HIGHLIGHT": {
const [ { HighlightEngine }, { TermCounter }, { TermWalker }, { TermMarker } ] = await Promise.all([
Expand All @@ -217,9 +217,9 @@ class EngineManager implements AbstractEngineManager {
const engine = new HighlightEngine(this.#termTokens, this.#termPatterns);
return {
engine,
termCounter: new TermCounter(engine.elementFlowsMap),
termWalker: new TermWalker(engine.elementFlowsMap),
termMarker: new TermMarker(this.#termTokens, engine.elementFlowsMap),
termCounter: new TermCounter(engine.getElementFlowsMap()),
termWalker: new TermWalker(engine.getElementFlowsMap()),
termMarker: new TermMarker(this.#termTokens, engine.getElementFlowsMap()),
};
}}
}
Expand Down
32 changes: 16 additions & 16 deletions src/modules/highlight/engines/element.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ class ElementEngine implements AbstractTreeEditEngine {
readonly class = "ELEMENT";
readonly model = "tree-edit";

readonly termTokens: TermTokens;
readonly termPatterns: TermPatterns;
readonly #termTokens: TermTokens;
readonly #termPatterns: TermPatterns;

readonly flowMutations: MutationObserverWrapper;
readonly #flowMutations: MutationObserverWrapper;

readonly terms = createContainer<ReadonlyArray<MatchTerm>>([]);
readonly hues = createContainer<ReadonlyArray<number>>([]);
Expand All @@ -114,10 +114,10 @@ class ElementEngine implements AbstractTreeEditEngine {
termTokens: TermTokens,
termPatterns: TermPatterns,
) {
this.termTokens = termTokens;
this.termPatterns = termPatterns;
this.#termTokens = termTokens;
this.#termPatterns = termPatterns;
const mutationObserver = this.getFlowMutationObserver();
this.flowMutations = {
this.#flowMutations = {
observeMutations: () => {
mutationObserver.observe(document.body, { subtree: true, childList: true, characterData: true });
},
Expand Down Expand Up @@ -146,8 +146,8 @@ ${HIGHLIGHT_TAG} {
const hue = hues[termIndex % hues.length];
const cycle = Math.floor(termIndex / hues.length);
return (`
#${EleID.BAR} ~ body .${EleClass.FOCUS_CONTAINER} ${HIGHLIGHT_TAG}.${getTermClass(term, this.termTokens)},
#${EleID.BAR}.${EleClass.HIGHLIGHTS_SHOWN} ~ body ${HIGHLIGHT_TAG}.${getTermClass(term, this.termTokens)} {
#${EleID.BAR} ~ body .${EleClass.FOCUS_CONTAINER} ${HIGHLIGHT_TAG}.${getTermClass(term, this.#termTokens)},
#${EleID.BAR}.${EleClass.HIGHLIGHTS_SHOWN} ~ body ${HIGHLIGHT_TAG}.${getTermClass(term, this.#termTokens)} {
background: ${this.getTermBackgroundStyle(`hsl(${hue} 100% 60% / 0.4)`, `hsl(${hue} 100% 88% / 0.4)`, cycle)};
box-shadow: 0 0 0 1px hsl(${hue} 100% 20% / 0.35);
}`
Expand All @@ -163,16 +163,16 @@ ${HIGHLIGHT_TAG} {
termsToPurge: ReadonlyArray<MatchTerm>,
hues: ReadonlyArray<number>,
) {
this.flowMutations.unobserveMutations();
this.#flowMutations.unobserveMutations();
this.undoHighlights(termsToPurge);
this.terms.assign(terms);
this.hues.assign(hues);
this.generateTermHighlightsUnderNode(termsToHighlight, document.body);
this.flowMutations.observeMutations();
this.#flowMutations.observeMutations();
}

endHighlighting () {
this.flowMutations.unobserveMutations();
this.#flowMutations.unobserveMutations();
this.undoHighlights();
}

Expand All @@ -186,7 +186,7 @@ ${HIGHLIGHT_TAG} {
if (terms && !terms.length) {
return; // Optimization for removing 0 terms
}
const classNames = terms?.map(term => getTermClass(term, this.termTokens));
const classNames = terms?.map(term => getTermClass(term, this.#termTokens));
const highlights = Array.from(root.querySelectorAll(
classNames ? `${HIGHLIGHT_TAG}.${classNames.join(`, ${HIGHLIGHT_TAG}.`)}` : HIGHLIGHT_TAG
)).reverse();
Expand All @@ -210,7 +210,7 @@ ${HIGHLIGHT_TAG} {

getHighlightedElementsForTerms (terms: ReadonlyArray<MatchTerm>): Iterable<HTMLElement> {
return terms.length === 0 ? [] : document.body.querySelectorAll(terms
.map(term => `${HIGHLIGHT_TAG}.${getTermClass(term, this.termTokens)}`)
.map(term => `${HIGHLIGHT_TAG}.${getTermClass(term, this.#termTokens)}`)
.join(", ")
);
}
Expand Down Expand Up @@ -264,7 +264,7 @@ ${HIGHLIGHT_TAG} {
// insert: Highlight Element
const textHighlightNode = document.createTextNode(text.substring(start, end));
const highlight = document.createElement(HIGHLIGHT_TAG);
highlight.classList.add(getTermClass(term, this.termTokens));
highlight.classList.add(getTermClass(term, this.#termTokens));
highlight.appendChild(textHighlightNode);
parent.insertBefore(highlight, node);
const textHighlightNodeItem = nodeItems.insertItemAfter(nodeItemPrevious, textHighlightNode);
Expand Down Expand Up @@ -294,7 +294,7 @@ ${HIGHLIGHT_TAG} {
const parent = textAfterNode.parentNode as Node;
const textEndNode = document.createTextNode(text.substring(start, end));
const highlight = document.createElement(HIGHLIGHT_TAG);
highlight.classList.add(getTermClass(term, this.termTokens));
highlight.classList.add(getTermClass(term, this.#termTokens));
highlight.appendChild(textEndNode);
textAfterNode.textContent = text.substring(end);
parent.insertBefore(highlight, textAfterNode);
Expand All @@ -320,7 +320,7 @@ ${HIGHLIGHT_TAG} {
let nodeItem = nodeItems.first!;
let textStart = 0;
let textEnd = nodeItem.value.length;
for (const match of textFlow.matchAll(this.termPatterns.get(term))) {
for (const match of textFlow.matchAll(this.#termPatterns.get(term))) {
let highlightStart = match.index!;
const highlightEnd = highlightStart + match[0].length;
while (textEnd <= highlightStart) {
Expand Down
61 changes: 29 additions & 32 deletions src/modules/highlight/engines/highlight.mts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import type { AbstractTreeCacheEngine } from "/dist/modules/highlight/models/tree-cache.mjs";
import type { AbstractFlowMonitor } from "/dist/modules/highlight/models/tree-cache/flow-monitor.mjs";
import type { AbstractFlowMonitor, Flow, Span } from "/dist/modules/highlight/models/tree-cache/flow-monitor.mjs";
import { FlowMonitor } from "/dist/modules/highlight/models/tree-cache/flow-monitors/flow-monitor.mjs";
import type { BaseFlow, BaseSpan } from "/dist/modules/highlight/matcher.mjs";
import * as TermCSS from "/dist/modules/highlight/term-css.mjs";
import type { MatchTerm, TermTokens, TermPatterns } from "/dist/modules/match-term.mjs";
import { EleID, EleClass, createContainer, type AllReadonly } from "/dist/modules/common.mjs";

type Flow = BaseFlow<true>

type Span = BaseSpan<true>

const getName = (termToken: string) => "markmysearch-" + termToken;

class ExtendedHighlight {
Expand Down Expand Up @@ -100,14 +95,15 @@ class HighlightEngine implements AbstractTreeCacheEngine {
readonly class = "HIGHLIGHT";
readonly model = "tree-cache";

readonly termTokens: TermTokens;
readonly termPatterns: TermPatterns;
readonly #termTokens: TermTokens;

readonly #flowMonitor: AbstractFlowMonitor;

readonly flowMonitor: AbstractFlowMonitor;
readonly #elementFlowsMap: AllReadonly<Map<HTMLElement, Array<Flow>>>;

readonly elementFlowsMap: AllReadonly<Map<HTMLElement, Array<Flow>>>;
readonly #highlights = new ExtendedHighlightRegistry();

readonly highlights = new ExtendedHighlightRegistry();
readonly #highlightingUpdatedListeners = new Set<Generator>();

readonly terms = createContainer<ReadonlyArray<MatchTerm>>([]);
readonly hues = createContainer<ReadonlyArray<number>>([]);
Expand All @@ -127,25 +123,24 @@ class HighlightEngine implements AbstractTreeCacheEngine {
termTokens: TermTokens,
termPatterns: TermPatterns,
) {
this.termTokens = termTokens;
this.termPatterns = termPatterns;
this.flowMonitor = new FlowMonitor(this.terms, termPatterns);
this.flowMonitor.setSpansCreatedListener((flowOwner, spansCreated) => {
this.#termTokens = termTokens;
this.#flowMonitor = new FlowMonitor(this.terms, termPatterns);
this.#flowMonitor.setSpansCreatedListener((flowOwner, spansCreated) => {
for (const span of spansCreated) {
this.highlights.get(this.termTokens.get(span.term))?.add(new StaticRange({
this.#highlights.get(this.#termTokens.get(span.term))?.add(new StaticRange({
startContainer: span.node,
startOffset: span.start,
endContainer: span.node,
endOffset: span.end,
}), span);
}
});
this.flowMonitor.setSpansRemovedListener((flowOwner, spansRemoved) => {
this.#flowMonitor.setSpansRemovedListener((flowOwner, spansRemoved) => {
for (const span of spansRemoved) {
this.highlights.get(this.termTokens.get(span.term))?.deleteBySpan(span);
this.#highlights.get(this.#termTokens.get(span.term))?.deleteBySpan(span);
}
});
this.elementFlowsMap = this.flowMonitor.getElementFlowsMap();
this.#elementFlowsMap = this.#flowMonitor.getElementFlowsMap();
}

readonly getCSS = {
Expand All @@ -162,7 +157,7 @@ class HighlightEngine implements AbstractTreeCacheEngine {
textColor,
} = HighlightEngine.hueCycleStyles[Math.min(cycle, HighlightEngine.hueCycleStyles.length - 1)];
return (`
#${EleID.BAR}.${EleClass.HIGHLIGHTS_SHOWN} ~ body ::highlight(${getName(this.termTokens.get(term))}) {
#${EleID.BAR}.${EleClass.HIGHLIGHTS_SHOWN} ~ body ::highlight(${getName(this.#termTokens.get(term))}) {
background-color: hsl(${hue} 70% 70% / ${opacity});
${textColor ? `color: ${textColor};` : ""}
${lineThickness ? `text-decoration: ${lineThickness}px hsl(${hue} 100% 35%) ${lineStyle} underline;` : ""}
Expand All @@ -181,42 +176,44 @@ class HighlightEngine implements AbstractTreeCacheEngine {
hues: ReadonlyArray<number>,
) {
// Clean up.
this.flowMonitor.unobserveMutations();
this.#flowMonitor.unobserveMutations();
this.undoHighlights(termsToPurge);
// MAIN
this.terms.assign(terms);
this.hues.assign(hues);
for (const term of terms) {
this.highlights.set(this.termTokens.get(term), new ExtendedHighlight());
this.#highlights.set(this.#termTokens.get(term), new ExtendedHighlight());
}
this.flowMonitor.generateHighlightSpansFor(terms, document.body);
this.flowMonitor.observeMutations();
this.#flowMonitor.generateHighlightSpansFor(terms, document.body);
this.#flowMonitor.observeMutations();
}

endHighlighting () {
this.flowMonitor.unobserveMutations();
this.#flowMonitor.unobserveMutations();
this.undoHighlights();
}

undoHighlights (terms?: ReadonlyArray<MatchTerm>) {
this.flowMonitor.removeHighlightSpansFor(terms);
this.#flowMonitor.removeHighlightSpansFor(terms);
if (terms) {
for (const term of terms) {
this.highlights.delete(this.termTokens.get(term));
this.#highlights.delete(this.#termTokens.get(term));
}
} else {
this.highlights.clear();
this.#highlights.clear();
}
}

getHighlightedElements (): Iterable<HTMLElement> {
return this.elementFlowsMap.keys();
getElementFlowsMap (): AllReadonly<Map<HTMLElement, Array<Flow>>> {
return this.#elementFlowsMap;
}

readonly highlightingUpdatedListeners = new Set<Generator>();
getHighlightedElements (): Iterable<HTMLElement> {
return this.#elementFlowsMap.keys();
}

addHighlightingUpdatedListener (listener: Generator) {
this.highlightingUpdatedListeners.add(listener);
this.#highlightingUpdatedListeners.add(listener);
}
}

Expand Down
Loading

0 comments on commit 3107c5f

Please sign in to comment.