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

package/themes/default.css

@@ -0,0 +1,488 @@
+:host {
+    display: block;
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+}
+
+#ui {
+    position: absolute;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
+
+    pointer-events: none;
+}
+
+#ui > * {
+    pointer-events: auto;
+}
+
+#search-button {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+
+    width: 44px;
+    height: 44px;
+
+    padding: 10px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.14);
+
+    cursor: pointer;
+
+    transition:
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+}
+
+#search-button:hover {
+    transform: scale(1.04);
+
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.14);
+}
+
+#search-button svg {
+    width: 100%;
+    height: 100%;
+
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+#search-menu {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    width: min(700px, calc(100% - 32px));
+    height: min(600px, calc(100% - 32px));
+    padding: 16px;
+
+    transform: translate(-50%, -50%);
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 14px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.14);
+
+    display: none;
+    box-sizing: border-box;
+}
+
+.menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 32px;
+}
+
+.menu-header span {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.menu-header button {
+    width: 32px;
+    height: 32px;
+
+    padding: 0;
+
+    border: none;
+    border-radius: 8px;
+
+    background: transparent;
+    color: #333;
+
+    font-size: 22px;
+
+    cursor: pointer;
+}
+
+.menu-header button:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+#search-input {
+    width: 100%;
+    box-sizing: border-box;
+
+    margin-top: 12px;
+
+    padding: 12px 14px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+
+    outline: none;
+
+    background: white;
+
+    font-size: 16px;
+}
+
+#search-results {
+    height: calc(100% - 96px);
+    margin-top: 12px;
+
+    overflow-y: auto;
+}
+
+.search-entry {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 12px 14px;
+    margin-bottom: 8px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+
+    background: white;
+
+    box-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.08);
+
+    transition:
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+}
+
+.search-entry:hover {
+    transform: scale(1.01);
+
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.search-entry-name {
+    font-size: 15px;
+}
+
+.search-entry-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.search-entry-alias {
+    margin-top: 2px;
+
+    color: #888;
+    font-size: 13px;
+}
+
+.search-entry-actions button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 34px;
+    height: 34px;
+
+    padding: 7px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.08);
+
+    cursor: pointer;
+
+    transition:
+        transform 0.12s,
+        box-shadow 0.12s;
+}
+
+.search-entry-actions button svg {
+    width: 100%;
+    height: 100%;
+
+    fill: none;
+
+    stroke: currentColor;
+    stroke-width: 2;
+
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.search-entry-actions button:hover:not(:disabled) {
+    transform: scale(1.05);
+
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.14);
+}
+
+.search-entry-actions button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+#theme-button {
+    position: absolute;
+    left: 76px;
+    bottom: 20px;
+
+    width: 44px;
+    height: 44px;
+
+    padding: 10px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.14);
+
+    cursor: pointer;
+
+    transition:
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+}
+
+#theme-button:hover {
+    transform: scale(1.04);
+
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.14);
+}
+
+#theme-button svg {
+    width: 100%;
+    height: 100%;
+
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+#theme-menu {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    width: min(650px, calc(100% - 32px));
+    height: min(520px, calc(100% - 32px));
+    padding: 16px;
+
+    transform: translate(-50%, -50%);
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 14px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.14);
+
+    display: none;
+    box-sizing: border-box;
+
+    overflow-y: auto;
+}
+
+#theme-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 150px);
+    gap: 16px;
+
+    width: 100%;
+    padding: 4px;
+
+    box-sizing: border-box;
+
+    margin-top: 12px;
+}
+
+.theme-entry {
+    width: 150px;
+    height: 130px;
+
+    padding: 0;
+
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 12px;
+
+    background: transparent;
+
+    overflow: hidden;
+
+    cursor: pointer;
+
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+
+    transition:
+        transform 0.12s,
+        box-shadow 0.12s,
+        border-color 0.12s;
+}
+
+.theme-entry:hover {
+    transform: scale(1.02);
+
+    border-color: rgba(0, 0, 0, 0.2);
+
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.theme-entry.selected {
+    border-color: #707070;
+
+    box-shadow:
+        0 0 0 2px rgba(0, 0, 0, 0.12);
+}
+
+.theme-preview {
+    width: 100%;
+    height: 90px;
+
+    flex-shrink: 0;
+
+    margin: 0;
+
+    border: none;
+
+    background: transparent;
+}
+
+.theme-name {
+    width: 100%;
+    height: 40px;
+
+    flex-shrink: 0;
+
+    padding: 0 14px;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+
+    background: white;
+
+    color: #333;
+
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.2px;
+}
+
+#node-menu {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    width: min(700px, calc(100% - 32px));
+    height: min(600px, calc(100% - 32px));
+    padding: 16px;
+
+    transform: translate(-50%, -50%);
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 14px;
+
+    background: #f8f8f8;
+
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.14);
+
+    display: none;
+    box-sizing: border-box;
+}
+
+#node-menu-content {
+    height: calc(100% - 44px);
+    margin-top: 12px;
+
+    overflow-y: auto;
+}
+
+#tooltip {
+    position: absolute;
+
+    padding: 7px 11px;
+
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 9px;
+
+    background: #f8f8f8;
+    color: #333;
+
+    font-size: 13px;
+
+    box-shadow:
+        0 4px 14px rgba(0, 0, 0, 0.12);
+
+    pointer-events: none;
+
+    opacity: 0;
+
+    transform: translate(-50%, -100%);
+
+    transition:
+        opacity 0.12s,
+        transform 0.12s;
+
+    z-index: 1000;
+}
+
+#tooltip::after {
+    content: "";
+
+    position: absolute;
+
+    left: 50%;
+    bottom: -5px;
+
+    width: 9px;
+    height: 9px;
+
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+    background: #f8f8f8;
+
+    transform:
+        translateX(-50%)
+        rotate(45deg);
+}
+
+#tooltip.visible {
+    opacity: 1;
+}

package/tooltip.js

@@ -0,0 +1,78 @@
+export default class Tooltip {
+    #target = null
+    #duration
+
+    constructor(
+        container,
+        {
+            offset = 8,
+            duration = 120
+        } = {}
+    ) {
+        this.offset = offset
+        this.#duration = duration
+
+        this.element = document.createElement("div")
+        this.element.id = "tooltip"
+
+        this.element.style.transitionDuration =
+            `${duration}ms`
+
+        document.body.append(this.element)
+
+        container.addEventListener("mouseover", e => {
+            const target = e.target.closest("[data-tooltip]")
+
+            if(!target) return
+
+            this.show(target.dataset.tooltip, target)
+        })
+
+        container.addEventListener("mouseout", e => {
+            const target = e.target.closest("[data-tooltip]")
+
+            if(target !== this.#target) return
+
+            this.hide()
+        })
+
+        new MutationObserver(() => {
+            if(
+                this.#target &&
+                !container.contains(this.#target)
+            ) {
+                this.hide()
+            }
+        }).observe(container, {
+            childList: true,
+            subtree: true
+        })
+    }
+
+    set duration(value) {
+        this.#duration = value
+        this.element.style.transitionDuration =
+            `${value}ms`
+    }
+
+    show(text, target) {
+        this.#target = target
+
+        this.element.textContent = text
+
+        const rect = target.getBoundingClientRect()
+
+        this.element.style.left =
+            rect.left + rect.width / 2 + "px"
+
+        this.element.style.top =
+            rect.top - this.offset + "px"
+
+        this.element.classList.add("visible")
+    }
+
+    hide() {
+        this.#target = null
+        this.element.classList.remove("visible")
+    }
+}