Add files via upload

overlayer.js

@@ -0,0 +1,103 @@
+const createSVGElement = tag =>
+    document.createElementNS('http://www.w3.org/2000/svg', tag)
+
+export class Overlayer {
+    #svg = createSVGElement('svg')
+    #map = new Map()
+    constructor() {
+        Object.assign(this.#svg.style, {
+            position: 'absolute', top: '0', left: '0',
+            width: '100%', height: '100%',
+            pointerEvents: 'none',
+        })
+        const darkMode = matchMedia('(prefers-color-scheme: dark)')
+        const setBlendMode = () => this.#svg.style.mixBlendMode =
+            darkMode.matches ? 'normal' : 'multiply'
+        darkMode.addEventListener('change', setBlendMode)
+        setBlendMode()
+    }
+    get element() {
+        return this.#svg
+    }
+    add(key, range, draw, options) {
+        if (this.#map.has(key)) this.remove(key)
+        if (typeof range === 'function') range = range(this.#svg.getRootNode())
+        const rects = range.getClientRects()
+        const element = draw(rects, options)
+        this.#svg.append(element)
+        this.#map.set(key, { range, draw, options, element, rects })
+    }
+    remove(key) {
+        if (!this.#map.has(key)) return
+        this.#svg.removeChild(this.#map.get(key).element)
+        this.#map.delete(key)
+    }
+    redraw() {
+        for (const obj of this.#map.values()) {
+            const { range, draw, options, element } = obj
+            this.#svg.removeChild(element)
+            const rects = range.getClientRects()
+            const el = draw(rects, options)
+            this.#svg.append(el)
+            obj.element = el
+            obj.rects = rects
+        }
+    }
+    hitTest({ x, y }) {
+        const arr = Array.from(this.#map.entries())
+        // loop in reverse to hit more recently added items first
+        for (let i = arr.length - 1; i >= 0; i--) {
+            const [key, obj] = arr[i]
+            for (const { left, top, right, bottom } of obj.rects)
+                if (top <= y && left <= x && bottom > y && right > x)
+                    return [key, obj.range]
+        }
+        return []
+    }
+    static underline(rects, options = {}) {
+        // TODO: in vertical-rl, the bōsen (sideline) should be on the right
+        const { color = 'red', width: strokeWidth = 2 } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', color)
+        for (const { left, bottom, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', bottom - strokeWidth)
+            el.setAttribute('height', strokeWidth)
+            el.setAttribute('width', width)
+            g.append(el)
+        }
+        return g
+    }
+    static highlight(rects, options = {}) {
+        const { color = 'red' } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', color)
+        g.setAttribute('fill-opacity', .3)
+        for (const { left, top, height, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', top)
+            el.setAttribute('height', height)
+            el.setAttribute('width', width)
+            g.append(el)
+        }
+        return g
+    }
+    // make an exact copy of an image in the overlay
+    // one can then apply filters to the entire element, without affecting them;
+    // it's a bit silly and probably better to just invert images twice
+    // (though the color will be off in that case if you do heu-rotate)
+    static copyImage([rect], options = {}) {
+        const { src } = options
+        const image = createSVGElement('image')
+        const { left, top, height, width } = rect
+        image.setAttribute('href', src)
+        image.setAttribute('x', left)
+        image.setAttribute('y', top)
+        image.setAttribute('height', height)
+        image.setAttribute('width', width)
+        return image
+    }
+}
+