@painekillers/tree-builder-viewer 0.0.0-stage → 1.0.1

package/index.js

@@ -0,0 +1,2 @@
+export { ThemeContainer } from "./theme.js"
+export { default as Viewer } from "./viewer.js"

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@painekillers/tree-builder-viewer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./themes/*": "./themes/*"
+  },
+  "dependencies": {
+    "@painekillers/tree-builder-core": "^1.0.0"
+  }
 }

package/search.js

@@ -0,0 +1,120 @@
+/**
+ * @typedef {Object} SearchEntry
+ * @property {string} name
+ * @property {*} value
+ */
+
+export default class SearchIndex {
+
+    /**
+     * @param {SearchEntry[]} entries
+     */
+
+    constructor(entries) {
+        this.entries = entries
+    }
+
+    add(entry) {
+        this.entries.push(entry)
+    }
+
+    #jaroWinkler(a, b) {
+        if(a === b) return 1
+
+        if(!a.length || !b.length) return 0
+
+        const distance = Math.floor(Math.max(a.length, b.length) / 2) - 1
+
+        const aMatches = new Array(a.length).fill(false)
+        const bMatches = new Array(b.length).fill(false)
+
+        let matches = 0
+
+        for(let i = 0; i < a.length; i++) {
+            const start = Math.max(0, i - distance)
+            const end = Math.min(i + distance + 1, b.length)
+
+            for(let j = start; j < end; j++) {
+                if(bMatches[j] || a[i] !== b[j]) continue
+
+                aMatches[i] = true
+                bMatches[j] = true
+                matches++
+
+                break
+            }
+        }
+
+        if(matches === 0) return 0
+
+        let k = 0
+        let transpositions = 0
+
+        for(let i = 0; i < a.length; i++) {
+            if(!aMatches[i]) continue
+
+            while(!bMatches[k]) {
+                k++
+            }
+
+            if(a[i] !== b[k]) {
+                transpositions++
+            }
+
+            k++
+        }
+
+        const jaro =
+            (
+                matches / a.length +
+                matches / b.length +
+                (matches - transpositions / 2) / matches
+            ) / 3
+
+        const prefixLength = Math.min(4, a.length, b.length)
+
+        let prefix = 0
+
+        while(prefix < prefixLength && a[prefix] === b[prefix]) {
+            prefix++
+        }
+
+        return jaro + prefix * 0.1 * (1 - jaro)
+    }
+
+    #score(entry, query) {
+        const a = query.toLowerCase()
+        const b = entry.name.toLowerCase()
+
+        if (a === b) return 1
+
+        let score = this.#jaroWinkler(a, b)
+
+        if (b.startsWith(a)) {
+            score += 0.15
+        }
+
+        if (b.length < a.length) {
+            const difference = a.length - b.length
+            score -= difference * 0.03
+        }
+
+        return Math.max(0, Math.min(score, 0.99))
+    }
+
+    search(query, limit = 10, minScore = 0.5) {
+        const results = []
+
+        for (const entry of this.entries) {
+            const score = this.#score(entry, query)
+
+            if (score < minScore) continue
+
+            results.push({ entry, score })
+        }
+
+        results.sort((a, b) => b.score - a.score)
+
+        return results.slice(0, limit)
+    }
+}

package/theme.js

@@ -0,0 +1,175 @@
+const loadTheme = async path =>
+    (await import(path)).default
+
+const merge = (base, theme) => {
+    const result = {...base}
+
+    for (const [key, value] of Object.entries(theme)) {
+        if (
+            value &&
+            typeof value === "object" &&
+            !Array.isArray(value) &&
+            value.constructor === Object &&
+            base[key]?.constructor === Object
+        ) {
+            result[key] = merge(
+                base[key],
+                value
+            )
+        } else {
+            result[key] = value
+        }
+    }
+
+    return result
+}
+
+const loadBuiltInTheme = async name => {
+    const path = new URL(
+        `./themes/${name.toLowerCase()}.css`,
+        import.meta.url
+    )
+
+    return {
+        theme: await loadTheme(
+            `@painekillers/tree-builder-core/themes/${name.toLowerCase()}.js`
+        ),
+        css: path.href
+    }
+}
+
+const defaultTheme =
+    await loadBuiltInTheme("Default")
+
+export class ThemeContainer {
+    #themes = {
+        Default: defaultTheme
+    }
+
+    async load(name, jsPath, cssPath) {
+        if (
+            jsPath === undefined &&
+            cssPath === undefined
+        ) {
+            const builtIn =
+                await loadBuiltInTheme(name)
+
+            this.#themes[name] = {
+                theme: merge(
+                    defaultTheme.theme,
+                    builtIn.theme
+                ),
+                css: builtIn.css
+            }
+
+            return
+        }
+
+        if (
+            jsPath === undefined ||
+            cssPath === undefined
+        ) {
+            console.warn(
+                `Theme ${name} requires both a JS path and a CSS path`
+            )
+
+            return
+        }
+
+        this.#themes[name] = {
+            theme: merge(
+                defaultTheme.theme,
+                await loadTheme(jsPath)
+            ),
+            css: cssPath
+        }
+    }
+
+    get(name) {
+        return this.#themes[name]
+    }
+
+    get themes() {
+        return Object.fromEntries(
+            Object.entries(this.#themes)
+                .map(([name, value]) => [
+                    name,
+                    value.theme
+                ])
+        )
+    }
+}
+
+export class ThemeApplier {
+    #container
+    #shadow
+
+    #current
+
+    #defaultCSS
+    #css
+
+    #subscription = []
+
+    constructor(container, shadow) {
+        this.#container = container
+        this.#shadow = shadow
+
+        const defaultTheme =
+            this.#container.get("Default")
+
+        this.#defaultCSS =
+            document.createElement("link")
+
+        this.#defaultCSS.rel = "stylesheet"
+        this.#defaultCSS.href =
+            defaultTheme.css
+
+        this.#css =
+            document.createElement("link")
+
+        this.#css.rel = "stylesheet"
+        this.#css.href =
+            defaultTheme.css
+
+        this.#shadow.append(
+            this.#defaultCSS,
+            this.#css
+        )
+
+        this.#current =
+            defaultTheme.theme
+    }
+
+    async apply(name) {
+        const theme =
+            this.#container.get(name)
+
+        if (!theme) {
+            console.warn(
+                `Could not find theme with name ${name}`
+            )
+
+            return
+        }
+
+        this.#current = theme.theme
+        this.#css.href = theme.css
+
+        for (const func of this.#subscription) {
+            func()
+        }
+    }
+
+    get current() {
+        return this.#current
+    }
+
+    get container() {
+        return this.#container
+    }
+
+    subscribe(func) {
+        this.#subscription.push(func)
+    }
+}

package/themes/dark.css

@@ -0,0 +1,144 @@
+body {
+    color: #e4e5e7;
+}
+
+#search-button {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+    color: #e4e5e7;
+
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+#search-button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+#search-menu {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.35);
+}
+
+.menu-header button {
+    color: #e4e5e7;
+}
+
+.menu-header button:hover {
+    background: rgba(255, 255, 255, 0.06);
+}
+
+#search-input {
+    border-color: #3a3b3e;
+    background: #242528;
+    color: #e4e5e7;
+}
+
+#search-input::placeholder {
+    color: #77797d;
+}
+
+.search-entry {
+    border-color: #3a3b3e;
+    background: #242528;
+
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.search-entry:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.search-entry-actions button {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+    color: #e4e5e7;
+
+    box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.search-entry-actions button:hover:not(:disabled) {
+    background: #343539;
+
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.search-entry-alias {
+    color: #888a8e;
+}
+
+#tooltip {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+    color: #e4e5e7;
+
+    box-shadow:
+        0 4px 14px rgba(0, 0, 0, 0.3);
+}
+
+#tooltip::after {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+}
+
+#theme-button {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+    color: #e4e5e7;
+
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+#theme-button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+#theme-menu {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.35);
+}
+
+.theme-entry {
+    border-color: #3a3b3e;
+    color: #e4e5e7;
+}
+
+.theme-entry:hover {
+    border-color: #5a5c62;
+
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.theme-entry.selected {
+    border-color: #6a6c72;
+
+    box-shadow:
+        0 0 0 2px rgba(255, 255, 255, 0.08);
+}
+
+.theme-name {
+    background: #242528;
+    color: #e4e5e7;
+}
+
+#node-menu {
+    border-color: #3a3b3e;
+    background: #2d2e31;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.35);
+}