@jolly-pixel/ui 1.0.1

package/dist/data/Tree.js

@@ -0,0 +1,662 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+// Import Internal Dependencies
+import { canDrop, resolveDepthDropTarget } from "./resolveReparent.js";
+import { resolveRename } from "./resolveRename.js";
+import { resolveRowDropZone } from "./dropZone.js";
+import { beginRowDrag } from "./rowDragSession.js";
+import { resolveSelection } from "./selection.js";
+import { findNode, flattenVisible, hasChildren } from "./treeNodes.js";
+import { emitDataEvent } from "./events.js";
+import { treeStyles } from "./Tree.styles.js";
+// Registers the chevron, eye, lock and drag glyphs.
+import "../icon/Icon.js";
+import { isButtonElement } from "../dom.js";
+// CONSTANTS
+const kRowDragThreshold = 4;
+const kDefaultIndent = 16;
+/**
+ * A generic tree of `{ id, label, children }` rows, with drag and drop
+ * reparenting, keyboard navigation and optional visibility/lock toggles.
+ * Knows nothing about what a row represents.
+ *
+ * Fully controlled: `nodes`, `selected` and `expanded` are consumer owned,
+ * the same as `value` on a field. A drop, a toggle or a selection change
+ * emits an intent event; the element repaints only once the consumer writes
+ * the new value back. See `docs/api/data/tree.md`.
+ */
+let Tree = class Tree extends LitElement {
+    static styles = treeStyles;
+    #suppressClick = false;
+    constructor() {
+        super();
+        this.nodes = [];
+        this.selected = [];
+        this.expanded = [];
+        this.multiple = false;
+        this.reorderable = false;
+        this.rowDrag = false;
+        this.renamable = false;
+        this.indentGuides = false;
+        this.acceptDrop = null;
+        this._renamingId = null;
+        this._anchorId = null;
+        this._dragPreview = null;
+        this._dragMovedIds = null;
+        this._moveState = null;
+    }
+    render() {
+        const rows = this.#visibleRows();
+        const activeId = this.#activeId(rows);
+        return html `
+      <div
+        class="rows"
+        role="tree"
+        aria-multiselectable=${this.multiple ? "true" : "false"}
+        @keydown=${this.#onKeyDown}
+      >${rows.map((row) => this.#renderRow(row, row.node.id === activeId))}</div>
+    `;
+    }
+    #renderRow(row, active) {
+        const { node, depth } = row;
+        const isBranch = hasChildren(node);
+        const isExpanded = this.expanded.includes(node.id);
+        const isSelected = this.selected.includes(node.id);
+        const isDragSource = this._dragMovedIds?.includes(node.id) ?? false;
+        const drop = this._dragPreview?.targetId === node.id ? this._dragPreview.where : null;
+        const isMoveCursor = this._moveState?.cursorId === node.id;
+        const expandedState = isBranch ? String(isExpanded) : nothing;
+        const isHidden = node.visible === false;
+        // Exposed as a custom property, not just inline padding, so the
+        // `inside` drop indicator can start its border at the same offset.
+        const rowIndent = `calc(${depth} * var(--jolly-tree-indent, 16px))`;
+        return html `
+      <div
+        class="row"
+        role="treeitem"
+        data-id=${node.id}
+        tabindex=${active ? "0" : "-1"}
+        aria-selected=${isSelected ? "true" : "false"}
+        aria-expanded=${expandedState}
+        data-dragging=${isDragSource ? "true" : nothing}
+        data-drop=${drop ?? nothing}
+        data-move-cursor=${isMoveCursor ? "true" : nothing}
+        data-hidden=${isHidden ? "true" : nothing}
+        style="--jolly-tree-row-indent: ${rowIndent}; padding-inline-start: var(--jolly-tree-row-indent)"
+        @click=${(event) => this.#onRowClick(event, node.id)}
+        @dblclick=${(event) => this.#onRowDoubleClick(event, node.id)}
+        @pointerdown=${(event) => this.#onRowPointerDown(event, node.id)}
+      >
+        ${isBranch ? html `
+          <button
+            class="toggle"
+            type="button"
+            tabindex="-1"
+            aria-label=${isExpanded ? "Collapse" : "Expand"}
+            @click=${(event) => this.#onToggleExpand(event, node.id)}
+          ><jolly-icon name="chevron" aria-hidden="true"></jolly-icon></button>
+        ` : html `<span class="toggle-spacer"></span>`}
+        ${node.icon === undefined ? nothing : html `
+          <jolly-icon class="node-icon" name=${node.icon} aria-hidden="true"></jolly-icon>
+        `}
+        ${this.#renderLabel(node)}
+        ${this.#renderBadges(node)}
+        ${node.visible === undefined ? nothing : html `
+          <button
+            class="visible-toggle"
+            type="button"
+            tabindex="-1"
+            data-active=${node.visible ? "true" : "false"}
+            aria-label=${node.visible ? "Hide" : "Show"}
+            aria-pressed=${node.visible ? "true" : "false"}
+            @click=${(event) => this.#onToggleVisible(event, node.id)}
+          ><jolly-icon name="eye" aria-hidden="true"></jolly-icon></button>
+        `}
+        ${node.locked === undefined ? nothing : html `
+          <button
+            class="lock-toggle"
+            type="button"
+            tabindex="-1"
+            data-active=${node.locked ? "true" : "false"}
+            aria-label=${node.locked ? "Unlock" : "Lock"}
+            aria-pressed=${node.locked ? "true" : "false"}
+            @click=${(event) => this.#onToggleLock(event, node.id)}
+          ><jolly-icon name="lock" aria-hidden="true"></jolly-icon></button>
+        `}
+        ${this.reorderable ? html `
+          <button
+            class="grip"
+            type="button"
+            tabindex="-1"
+            aria-hidden="true"
+            @pointerdown=${(event) => this.#onGripPointerDown(event, node.id)}
+          ><jolly-icon name="drag" aria-hidden="true"></jolly-icon></button>
+        ` : nothing}
+      </div>
+    `;
+    }
+    #visibleRows() {
+        return flattenVisible(this.nodes, new Set(this.expanded));
+    }
+    /**
+     * Row the roving tabindex sits on: the first selected row when one is
+     * visible, otherwise the first visible row.
+     */
+    #activeId(rows) {
+        if (rows.length === 0) {
+            return null;
+        }
+        const selectedAnchor = this.selected[0];
+        if (selectedAnchor !== undefined && rows.some((row) => row.node.id === selectedAnchor)) {
+            return selectedAnchor;
+        }
+        return rows[0].node.id;
+    }
+    #onRowClick(event, id) {
+        if (this.#suppressClick) {
+            this.#suppressClick = false;
+            return;
+        }
+        if (isButtonElement(event.target)) {
+            return;
+        }
+        const result = resolveSelection({
+            rows: this.#visibleRows(),
+            clickedId: id,
+            current: this.selected,
+            anchorId: this._anchorId,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey || event.metaKey,
+            multiple: this.multiple
+        });
+        this._anchorId = result.anchorId;
+        emitDataEvent(this, "jolly-select", { selected: result.selected });
+    }
+    updated(changed) {
+        if (changed.has("_renamingId") &&
+            this._renamingId !== null) {
+            this.renderRoot.querySelector(".rename")?.focus();
+        }
+    }
+    #renderBadges(node) {
+        const badges = node.badges;
+        if (badges === undefined || badges.length === 0) {
+            return nothing;
+        }
+        return html `
+      <span class="badges">${badges.map((badge) => html `
+        <span
+          class="badge"
+          role="img"
+          aria-label=${badge.title ?? "Badge"}
+          title=${badge.title ?? nothing}
+          style="background: ${badge.color}"
+        ></span>
+      `)}</span>
+    `;
+    }
+    #renderLabel(node) {
+        if (this._renamingId !== node.id) {
+            return html `<span class="label">${node.label}</span>`;
+        }
+        return html `
+      <input
+        class="label rename"
+        type="text"
+        .value=${node.label}
+        aria-label="Rename"
+        @keydown=${this.#onRenameKeyDown}
+        @blur=${(event) => this.#commitRename(event.target, node)}
+        @focus=${this.#onRenameFocus}
+      >
+    `;
+    }
+    #isRenamable(id) {
+        return this.renamable &&
+            findNode(this.nodes, id)?.renamable === true;
+    }
+    #startRename(id) {
+        if (this.#isRenamable(id)) {
+            this._renamingId = id;
+        }
+    }
+    #onRenameFocus = (event) => {
+        const input = event.target;
+        if (input instanceof HTMLInputElement) {
+            input.select();
+        }
+    };
+    #onRenameKeyDown = (event) => {
+        // The tree's own navigation must not read the keys typed into the field.
+        event.stopPropagation();
+        if (event.key === "Escape") {
+            event.preventDefault();
+            this.#cancelRename();
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            // Blur commits, so the two paths cannot double-emit.
+            event.target.blur();
+        }
+    };
+    #cancelRename() {
+        const id = this._renamingId;
+        this._renamingId = null;
+        if (id !== null) {
+            this.#focusRow(id);
+        }
+    }
+    /**
+     * Emits the edit unless it was cancelled, left blank, or left unchanged.
+     * The label is not written here: `nodes` stays consumer owned.
+     */
+    #commitRename(target, node) {
+        if (this._renamingId !== node.id) {
+            return;
+        }
+        this._renamingId = null;
+        const name = resolveRename(node.label, target instanceof HTMLInputElement ? target.value : "");
+        if (name !== null) {
+            emitDataEvent(this, "jolly-rename", { id: node.id, name });
+        }
+        this.#focusRow(node.id);
+    }
+    #focusRow(id) {
+        this.updateComplete.then(() => {
+            const row = this.renderRoot.querySelector(`.row[data-id="${CSS.escape(id)}"]`);
+            row?.focus();
+        });
+    }
+    #onRowDoubleClick(event, id) {
+        if (isButtonElement(event.target)) {
+            return;
+        }
+        if (this.#isRenamable(id)) {
+            event.preventDefault();
+            this.#startRename(id);
+            return;
+        }
+        emitDataEvent(this, "jolly-activate", { id });
+    }
+    #onToggleExpand(event, id) {
+        event.stopPropagation();
+        emitDataEvent(this, "jolly-toggle-expand", {
+            id,
+            expanded: !this.expanded.includes(id)
+        });
+    }
+    #onToggleVisible(event, id) {
+        event.stopPropagation();
+        const node = findNode(this.nodes, id);
+        if (node === null || node.visible === undefined) {
+            return;
+        }
+        emitDataEvent(this, "jolly-toggle-visible", { id, visible: !node.visible });
+    }
+    #onToggleLock(event, id) {
+        event.stopPropagation();
+        const node = findNode(this.nodes, id);
+        if (node === null || node.locked === undefined) {
+            return;
+        }
+        emitDataEvent(this, "jolly-toggle-lock", { id, locked: !node.locked });
+    }
+    #selectSingle(id) {
+        this._anchorId = id;
+        emitDataEvent(this, "jolly-select", { selected: [id] });
+    }
+    /**
+     * Keyboard half of navigation, selection and reparenting.
+     *
+     * The drag handle is pointer-only; a row's own roving tabindex is the
+     * keyboard entry point for reordering (Space arms it), which scales to a
+     * tree of many rows better than a separately focusable grip per row would.
+     */
+    #onKeyDown = (event) => {
+        const rows = this.#visibleRows();
+        if (rows.length === 0) {
+            return;
+        }
+        if (this._moveState !== null) {
+            this.#onMoveKeyDown(event, rows);
+            return;
+        }
+        const activeId = this.#activeId(rows);
+        const activeIndex = rows.findIndex((row) => row.node.id === activeId);
+        if (activeIndex === -1) {
+            return;
+        }
+        const activeRow = rows[activeIndex];
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                const next = rows[Math.min(activeIndex + 1, rows.length - 1)];
+                this.#selectSingle(next.node.id);
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                const previous = rows[Math.max(activeIndex - 1, 0)];
+                this.#selectSingle(previous.node.id);
+                break;
+            }
+            case "ArrowRight": {
+                if (!hasChildren(activeRow.node)) {
+                    break;
+                }
+                event.preventDefault();
+                if (this.expanded.includes(activeRow.node.id)) {
+                    const next = rows[activeIndex + 1];
+                    if (next !== undefined && next.parentId === activeRow.node.id) {
+                        this.#selectSingle(next.node.id);
+                    }
+                }
+                else {
+                    emitDataEvent(this, "jolly-toggle-expand", { id: activeRow.node.id, expanded: true });
+                }
+                break;
+            }
+            case "ArrowLeft": {
+                event.preventDefault();
+                if (hasChildren(activeRow.node) && this.expanded.includes(activeRow.node.id)) {
+                    emitDataEvent(this, "jolly-toggle-expand", { id: activeRow.node.id, expanded: false });
+                }
+                else if (activeRow.parentId !== null) {
+                    this.#selectSingle(activeRow.parentId);
+                }
+                break;
+            }
+            case "F2":
+                if (!this.#isRenamable(activeRow.node.id)) {
+                    break;
+                }
+                event.preventDefault();
+                this.#startRename(activeRow.node.id);
+                break;
+            case "Enter":
+                event.preventDefault();
+                emitDataEvent(this, "jolly-activate", { id: activeRow.node.id });
+                break;
+            case " ":
+                if (!this.reorderable) {
+                    break;
+                }
+                event.preventDefault();
+                this.#armMoveState(rows, activeRow);
+                break;
+            default:
+                break;
+        }
+    };
+    #armMoveState(rows, activeRow) {
+        const movedIds = this.selected.includes(activeRow.node.id) ? this.selected : [activeRow.node.id];
+        const cursor = rows.find((row) => !movedIds.includes(row.node.id));
+        if (cursor === undefined) {
+            return;
+        }
+        this._moveState = { movedIds, cursorId: cursor.node.id, where: "below" };
+    }
+    #onMoveKeyDown(event, rows) {
+        const moveState = this._moveState;
+        if (moveState === null) {
+            return;
+        }
+        const cursorIndex = rows.findIndex((row) => row.node.id === moveState.cursorId);
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                const next = rows.slice(cursorIndex + 1).find((row) => !moveState.movedIds.includes(row.node.id));
+                if (next !== undefined) {
+                    this._moveState = { ...moveState, cursorId: next.node.id };
+                }
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                const before = rows.slice(0, cursorIndex).reverse();
+                const previous = before.find((row) => !moveState.movedIds.includes(row.node.id));
+                if (previous !== undefined) {
+                    this._moveState = { ...moveState, cursorId: previous.node.id };
+                }
+                break;
+            }
+            case "ArrowLeft":
+            case "ArrowRight": {
+                event.preventDefault();
+                const order = ["above", "inside", "below"];
+                const position = order.indexOf(moveState.where);
+                const delta = event.key === "ArrowRight" ? 1 : -1;
+                const nextPosition = (position + delta + order.length) % order.length;
+                this._moveState = { ...moveState, where: order[nextPosition] };
+                break;
+            }
+            case "Enter":
+                event.preventDefault();
+                this.#commitMove();
+                break;
+            case "Escape":
+                event.preventDefault();
+                this._moveState = null;
+                break;
+            default:
+                break;
+        }
+    }
+    #commitMove() {
+        const moveState = this._moveState;
+        this._moveState = null;
+        if (moveState === null) {
+            return;
+        }
+        const { movedIds, cursorId, where } = moveState;
+        if (canDrop({
+            nodes: this.nodes,
+            movedIds,
+            targetId: cursorId,
+            where,
+            accept: this.acceptDrop
+        })) {
+            emitDataEvent(this, "jolly-reparent", { movedIds, targetId: cursorId, where });
+        }
+    }
+    #onGripPointerDown(event, id) {
+        if (!isButtonElement(event.currentTarget) ||
+            event.button !== 0 ||
+            !this.reorderable) {
+            return;
+        }
+        event.preventDefault();
+        const movedIds = this.selected.includes(id) ? this.selected : [id];
+        this.#beginPointerDrag(event, movedIds, {
+            element: event.currentTarget,
+            // The grip's only purpose is to start a drag, so it arms immediately.
+            threshold: 0
+        });
+    }
+    /**
+     * Whole-row drag, gated by `rowDrag`: the row itself is also a valid drag
+     * origin, not only its grip — the interaction `arbor` had.
+     *
+     * A plain click must keep working, so this only arms past a movement
+     * threshold; `#onRowClick` checks `#suppressClick` to swallow the `click`
+     * that still follows `pointerup` once it has.
+     */
+    #onRowPointerDown(event, id) {
+        if (!this.reorderable ||
+            !this.rowDrag ||
+            event.button !== 0 ||
+            isButtonElement(event.target)) {
+            return;
+        }
+        const movedIds = this.selected.includes(id) ? this.selected : [id];
+        this.#beginPointerDrag(event, movedIds, {
+            element: event.currentTarget,
+            threshold: kRowDragThreshold
+        });
+    }
+    #beginPointerDrag(event, movedIds, options) {
+        beginRowDrag(event, options, {
+            onArm: () => {
+                this.#suppressClick = true;
+                this._dragMovedIds = movedIds;
+            },
+            onMove: (clientX, clientY) => this.#previewDrop(clientX, clientY, movedIds),
+            onFinish: (commit) => {
+                const preview = this._dragPreview;
+                this._dragPreview = null;
+                this._dragMovedIds = null;
+                if (commit && preview !== null) {
+                    emitDataEvent(this, "jolly-reparent", {
+                        movedIds,
+                        targetId: preview.targetId,
+                        where: preview.where
+                    });
+                }
+            }
+        });
+    }
+    #previewDrop(clientX, clientY, movedIds) {
+        const rows = this.#visibleRows();
+        const firstRow = rows[0];
+        const lastRow = rows[rows.length - 1];
+        const target = this.shadowRoot?.elementFromPoint(clientX, clientY) ?? null;
+        const rowElement = target instanceof Element ? target.closest(".row") : null;
+        if (rowElement === null) {
+            this._dragPreview = this.#resolveEdgeDrop(firstRow, lastRow, clientX, clientY, movedIds);
+            return;
+        }
+        const targetId = rowElement.dataset.id;
+        if (targetId === undefined) {
+            this._dragPreview = null;
+            return;
+        }
+        const rect = rowElement.getBoundingClientRect();
+        const where = resolveRowDropZone(clientY - rect.top, rect.height);
+        // On the outer edge of the last or first row: same depth gesture, so
+        // promoting past a childless edge row reads the same as the dead zone
+        // beyond it.
+        if (lastRow !== undefined && targetId === lastRow.node.id && where === "below") {
+            this._dragPreview = this.#resolveDepthDrop(lastRow, clientX, movedIds, "below");
+            return;
+        }
+        if (firstRow !== undefined && targetId === firstRow.node.id && where === "above") {
+            this._dragPreview = this.#resolveDepthDrop(firstRow, clientX, movedIds, "above");
+            return;
+        }
+        this._dragPreview = canDrop({
+            nodes: this.nodes,
+            movedIds,
+            targetId,
+            where,
+            accept: this.acceptDrop
+        }) ?
+            { targetId, where } :
+            null;
+    }
+    #resolveEdgeDrop(firstRow, lastRow, clientX, clientY, movedIds) {
+        if (firstRow === undefined || lastRow === undefined) {
+            return null;
+        }
+        const containerTop = this.renderRoot.querySelector(".rows")?.getBoundingClientRect().top;
+        const isAboveEverything = containerTop !== undefined && clientY < containerTop;
+        return isAboveEverything ?
+            this.#resolveDepthDrop(firstRow, clientX, movedIds, "above") :
+            this.#resolveDepthDrop(lastRow, clientX, movedIds, "below");
+    }
+    #resolveDepthDrop(row, clientX, movedIds, where) {
+        const containerLeft = this.renderRoot.querySelector(".rows")?.getBoundingClientRect().left;
+        if (containerLeft === undefined) {
+            return null;
+        }
+        return resolveDepthDropTarget({
+            nodes: this.nodes,
+            movedIds,
+            rowId: row.node.id,
+            clientX,
+            containerLeft,
+            indentUnit: parseFloat(getComputedStyle(this).getPropertyValue("--jolly-tree-indent")) || kDefaultIndent,
+            where,
+            accept: this.acceptDrop
+        });
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], Tree.prototype, "nodes", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], Tree.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], Tree.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tree.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tree.prototype, "reorderable", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: "row-drag"
+    }),
+    __metadata("design:type", Boolean)
+], Tree.prototype, "rowDrag", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tree.prototype, "renamable", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: "indent-guides"
+    }),
+    __metadata("design:type", Boolean)
+], Tree.prototype, "indentGuides", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], Tree.prototype, "acceptDrop", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Tree.prototype, "_renamingId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Tree.prototype, "_anchorId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Tree.prototype, "_dragPreview", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Tree.prototype, "_dragMovedIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Tree.prototype, "_moveState", void 0);
+Tree = __decorate([
+    customElement("jolly-tree"),
+    __metadata("design:paramtypes", [])
+], Tree);
+export { Tree };
+//# sourceMappingURL=Tree.js.map