@haiyue/ui 0.1.0

package/dist/tree-model.js

@@ -0,0 +1,281 @@
+/** Mutable hierarchy model owned by ge-tree. It has no DOM dependency and is safe to unit test. */
+export class GETreeModel {
+    _data = [];
+    _expandedIds;
+    _nodeIndex = new Map();
+    _visibleNodes = [];
+    _visibleIds = [];
+    _visibleIndex = new Map();
+    _indexDirty = true;
+    _visibleDirty = true;
+    constructor(expandedIds) {
+        this._expandedIds = expandedIds;
+    }
+    get index() {
+        this._ensureIndex();
+        return this._nodeIndex;
+    }
+    get visibleIndex() {
+        this.getVisibleNodes();
+        return this._visibleIndex;
+    }
+    get isVisibilityDirty() {
+        return this._visibleDirty;
+    }
+    setData(data) {
+        this._data = data;
+        this._indexDirty = true;
+        this._visibleDirty = true;
+    }
+    invalidateVisibility() {
+        this._visibleDirty = true;
+    }
+    getVisibleNodes() {
+        if (!this._visibleDirty)
+            return this._visibleNodes;
+        this._ensureIndex();
+        this._visibleNodes.length = 0;
+        this._visibleIds.length = 0;
+        this._visibleIndex.clear();
+        const visit = (nodes, parent, depth) => {
+            for (const node of nodes) {
+                this._visibleIndex.set(node.id, this._visibleIds.length);
+                this._visibleNodes.push(this._nodeIndex.get(node.id) ?? { node, parent, depth });
+                this._visibleIds.push(node.id);
+                if (node.children?.length && this._expandedIds.has(node.id)) {
+                    visit(node.children, node, depth + 1);
+                }
+            }
+        };
+        visit(this._data, null, 0);
+        this._visibleDirty = false;
+        return this._visibleNodes;
+    }
+    getVisibleIds() {
+        this.getVisibleNodes();
+        return this._visibleIds;
+    }
+    getIndexedNode(id) {
+        this._ensureIndex();
+        return this._nodeIndex.get(id) ?? null;
+    }
+    findNode(id) {
+        const found = this.getIndexedNode(id);
+        return found ? { node: found.node, parent: found.parent } : null;
+    }
+    topLevelSelection(ids) {
+        this._ensureIndex();
+        const existing = [...new Set(ids)].filter(id => this._nodeIndex.has(id));
+        const selected = new Set(existing);
+        return existing.filter(id => {
+            const indexed = this._nodeIndex.get(id);
+            return indexed !== undefined && !indexed.ancestorIds.some(ancestorId => selected.has(ancestorId));
+        });
+    }
+    removeNode(id) {
+        const found = this.findNode(id);
+        if (!found)
+            return false;
+        const list = found.parent?.children ?? this._data;
+        const index = this._nodeIndex.get(id)?.index ?? -1;
+        if (index < 0)
+            return false;
+        list.splice(index, 1);
+        this.setData(this._data);
+        return true;
+    }
+    moveNode(sourceId, targetId, position) {
+        this._ensureIndex();
+        this.getVisibleNodes();
+        const source = this._nodeIndex.get(sourceId);
+        const target = this._nodeIndex.get(targetId);
+        if (!source || !target || sourceId === targetId)
+            return false;
+        if (target.ancestorIds.includes(sourceId))
+            return false;
+        const sourceList = source.parent?.children ?? this._data;
+        const sourceIndex = source.index;
+        if (sourceIndex < 0)
+            return false;
+        const previousDepth = source.depth;
+        const visibleStart = this._visibleIndex.get(sourceId) ?? -1;
+        let visibleCount = 0;
+        if (visibleStart >= 0) {
+            visibleCount = 1;
+            while (visibleStart + visibleCount < this._visibleNodes.length
+                && (this._visibleNodes[visibleStart + visibleCount]?.depth ?? -1) > previousDepth) {
+                visibleCount++;
+            }
+        }
+        sourceList.splice(sourceIndex, 1);
+        let nextParent;
+        let targetList;
+        let insertIndex;
+        let expandedNextParent = false;
+        if (position === 'inside') {
+            target.node.children ??= [];
+            nextParent = target.node;
+            targetList = target.node.children;
+            insertIndex = targetList.length;
+            expandedNextParent = !this._expandedIds.has(target.node.id);
+            this._expandedIds.add(target.node.id);
+        }
+        else {
+            nextParent = target.parent;
+            targetList = target.parent?.children ?? this._data;
+            let targetIndex = target.index;
+            if (sourceList === targetList && sourceIndex < targetIndex)
+                targetIndex--;
+            if (targetIndex < 0)
+                return false;
+            insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
+        }
+        targetList.splice(insertIndex, 0, source.node);
+        this._refreshSiblingIndexes(sourceList);
+        if (targetList !== sourceList)
+            this._refreshSiblingIndexes(targetList);
+        const parentIndex = nextParent ? this._nodeIndex.get(nextParent.id) : null;
+        const ancestorIds = parentIndex ? [...parentIndex.ancestorIds, nextParent.id] : [];
+        this._refreshSubtreeIndex(source.node, nextParent, parentIndex ? parentIndex.depth + 1 : 0, ancestorIds);
+        this._moveVisibleSubtree(source.node, visibleStart, visibleCount, nextParent, expandedNextParent);
+        return true;
+    }
+    _refreshSiblingIndexes(nodes) {
+        for (let index = 0; index < nodes.length; index++) {
+            const item = nodes[index];
+            const indexed = item ? this._nodeIndex.get(item.id) : null;
+            if (indexed)
+                indexed.index = index;
+        }
+    }
+    _refreshSubtreeIndex(node, parent, depth, ancestorIds) {
+        const indexed = this._nodeIndex.get(node.id);
+        if (!indexed)
+            return;
+        indexed.parent = parent;
+        indexed.depth = depth;
+        indexed.ancestorIds = ancestorIds;
+        const childAncestors = [...ancestorIds, node.id];
+        for (let index = 0; index < (node.children?.length ?? 0); index++) {
+            const child = node.children?.[index];
+            if (!child)
+                continue;
+            const childIndex = this._nodeIndex.get(child.id);
+            if (childIndex)
+                childIndex.index = index;
+            this._refreshSubtreeIndex(child, node, depth + 1, childAncestors);
+        }
+    }
+    _moveVisibleSubtree(source, previousStart, previousCount, nextParent, expandedNextParent) {
+        if (previousStart >= 0 && previousCount > 0) {
+            this._visibleNodes.splice(previousStart, previousCount);
+            this._visibleIds.splice(previousStart, previousCount);
+            this._refreshVisibleIndexes(previousStart);
+        }
+        if (expandedNextParent && nextParent) {
+            const parentVisible = this._visibleIndex.get(nextParent.id);
+            if (parentVisible === undefined)
+                return;
+            const expandedChildren = [];
+            for (const child of nextParent.children ?? []) {
+                this._collectVisibleSubtree(child, expandedChildren);
+            }
+            if (expandedChildren.length === 0)
+                return;
+            const insertAt = parentVisible + 1;
+            this._visibleNodes.splice(insertAt, 0, ...expandedChildren);
+            this._visibleIds.splice(insertAt, 0, ...expandedChildren.map(item => item.node.id));
+            this._refreshVisibleIndexes(insertAt);
+            return;
+        }
+        let insertAt = -1;
+        const sourceIndex = this._nodeIndex.get(source.id)?.index ?? -1;
+        const siblings = nextParent?.children ?? this._data;
+        if (sourceIndex >= 0) {
+            if (nextParent) {
+                const parentVisible = this._visibleIndex.get(nextParent.id);
+                if (parentVisible !== undefined && this._expandedIds.has(nextParent.id)) {
+                    insertAt = sourceIndex === 0
+                        ? parentVisible + 1
+                        : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+                }
+            }
+            else {
+                insertAt = sourceIndex === 0
+                    ? 0
+                    : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+            }
+        }
+        if (insertAt < 0)
+            return;
+        const moved = [];
+        this._collectVisibleSubtree(source, moved);
+        if (moved.length === 0)
+            return;
+        this._visibleNodes.splice(insertAt, 0, ...moved);
+        this._visibleIds.splice(insertAt, 0, ...moved.map(item => item.node.id));
+        this._refreshVisibleIndexes(insertAt);
+    }
+    _collectVisibleSubtree(node, result) {
+        const indexed = this._nodeIndex.get(node.id);
+        if (!indexed)
+            return;
+        result.push(indexed);
+        if (!this._expandedIds.has(node.id))
+            return;
+        for (const child of node.children ?? [])
+            this._collectVisibleSubtree(child, result);
+    }
+    _visibleSubtreeEnd(id) {
+        if (!id)
+            return -1;
+        const start = this._visibleIndex.get(id);
+        const depth = this._nodeIndex.get(id)?.depth;
+        if (start === undefined || depth === undefined)
+            return -1;
+        let end = start + 1;
+        while (end < this._visibleNodes.length
+            && (this._visibleNodes[end]?.depth ?? -1) > depth) {
+            end++;
+        }
+        return end;
+    }
+    _refreshVisibleIndexes(start) {
+        for (let index = Math.max(0, start); index < this._visibleIds.length; index++) {
+            const id = this._visibleIds[index];
+            if (id !== undefined)
+                this._visibleIndex.set(id, index);
+        }
+        for (const [id, index] of this._visibleIndex) {
+            if (index < this._visibleIds.length && this._visibleIds[index] === id)
+                continue;
+            this._visibleIndex.delete(id);
+        }
+    }
+    _ensureIndex() {
+        if (!this._indexDirty)
+            return;
+        this._nodeIndex.clear();
+        const ancestorIds = [];
+        const visit = (nodes, parent, depth) => {
+            for (let index = 0; index < nodes.length; index++) {
+                const node = nodes[index];
+                if (!node)
+                    continue;
+                this._nodeIndex.set(node.id, { node, parent, depth, ancestorIds: ancestorIds.slice(), index });
+                if (node.children?.length) {
+                    ancestorIds.push(node.id);
+                    visit(node.children, node, depth + 1);
+                    ancestorIds.pop();
+                }
+            }
+        };
+        visit(this._data, null, 0);
+        for (const id of this._expandedIds) {
+            if (!this._nodeIndex.has(id))
+                this._expandedIds.delete(id);
+        }
+        this._indexDirty = false;
+    }
+}
+//# sourceMappingURL=tree-model.js.map

package/dist/tree-node.d.ts

@@ -0,0 +1,11 @@
+import type { GETreeNodeData } from './tree-types.js';
+export declare class GETreeNode extends HTMLElement {
+    private readonly _icon;
+    private readonly _label;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    set node(value: GETreeNodeData);
+    private _sync;
+}

package/dist/tree-node.js

@@ -0,0 +1,63 @@
+export class GETreeNode extends HTMLElement {
+    _icon = document.createElement('span');
+    _label = document.createElement('span');
+    static get observedAttributes() {
+        return ['label', 'icon', 'selected'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        gap: 6px;
+        color: inherit;
+        font: inherit;
+      }
+      .icon {
+        width: 16px;
+        flex: 0 0 16px;
+        display: inline-grid;
+        place-items: center;
+        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        font-size: 12px;
+      }
+      .label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      :host([selected]) .label {
+        color: var(--ge-selected-text-color, #ffffff);
+      }
+    `;
+        this._icon.className = 'icon';
+        this._label.className = 'label';
+        root.append(style, this._icon, this._label);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'treeitem');
+        this._sync();
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    set node(value) {
+        this.setAttribute('label', String(value.label ?? value.id));
+        if (value.icon)
+            this.setAttribute('icon', String(value.icon));
+        else
+            this.removeAttribute('icon');
+    }
+    _sync() {
+        this._icon.textContent = this.getAttribute('icon') ?? '';
+        this._label.textContent = this.getAttribute('label') ?? '';
+        this.setAttribute('aria-selected', this.hasAttribute('selected') ? 'true' : 'false');
+    }
+}
+//# sourceMappingURL=tree-node.js.map

package/dist/tree-types.d.ts

@@ -0,0 +1,41 @@
+export interface GETreeNodeData {
+    id: string;
+    label?: string;
+    icon?: string;
+    expanded?: boolean;
+    renderer?: string;
+    children?: GETreeNodeData[];
+    [key: string]: unknown;
+}
+export type GETreeDropPosition = 'before' | 'after' | 'inside';
+export interface GETreeSelectionChangeDetail {
+    selectedId: string | null;
+    node: GETreeNodeData | null;
+    selectedIds: string[];
+    nodes: GETreeNodeData[];
+}
+export interface GETreeDataChangeDetail {
+    data: GETreeNodeData[];
+    action?: 'copy' | 'paste' | 'delete' | 'drop';
+    sourceId?: string;
+    targetId?: string | null;
+    dropPosition?: GETreeDropPosition;
+    pastedNodes?: GETreeNodeData[];
+    deletedIds?: string[];
+}
+export interface GETreeNodeContextMenuDetail {
+    id: string;
+    node: GETreeNodeData;
+    selectedIds: string[];
+    clientX: number;
+    clientY: number;
+}
+export interface FlatTreeNode {
+    node: GETreeNodeData;
+    parent: GETreeNodeData | null;
+    depth: number;
+}
+export interface IndexedTreeNode extends FlatTreeNode {
+    ancestorIds: readonly string[];
+    index: number;
+}

package/dist/tree-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tree-types.js.map

package/dist/tree.d.ts

@@ -0,0 +1,102 @@
+import type { GETreeNodeData } from './tree-types.js';
+export { GETreeNode } from './tree-node.js';
+export type { GETreeDataChangeDetail, GETreeDropPosition, GETreeNodeContextMenuDetail, GETreeNodeData, GETreeSelectionChangeDetail, } from './tree-types.js';
+export declare class GETree extends HTMLElement {
+    private static readonly VIRTUALIZATION_THRESHOLD;
+    private static readonly ROW_HEIGHT;
+    private static readonly OVERSCAN_ROWS;
+    private readonly _root;
+    private readonly _style;
+    private readonly _list;
+    private readonly _rowCache;
+    private _clipboard;
+    private _data;
+    private _selectedId;
+    private _selectedIds;
+    private _selectionAnchorId;
+    private _activeId;
+    private _expandedIds;
+    private readonly _model;
+    private _dragNodeId;
+    private _syncingSelectionAttributes;
+    private _resizeObserver;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get data(): GETreeNodeData[];
+    set data(value: GETreeNodeData[]);
+    get selectedId(): string | null;
+    set selectedId(value: string | null);
+    get selectedIds(): string[];
+    set selectedIds(value: string[]);
+    get allowDrag(): boolean;
+    set allowDrag(value: boolean);
+    updateData(value: GETreeNodeData[]): void;
+    expand(id: string): void;
+    collapse(id: string): void;
+    toggle(id: string): void;
+    reveal(id: string): boolean;
+    copySelection(): boolean;
+    pasteClipboard(): boolean;
+    deleteSelection(): boolean;
+    cutSelection(): boolean;
+    private _syncFromAttributes;
+    private _readDataAttribute;
+    private _seedExpanded;
+    private _render;
+    private _getRenderWindow;
+    private _createVirtualSpacer;
+    private _getVisibleFlatNodes;
+    private _getVisibleIds;
+    private _getOrCreateRow;
+    private _syncRow;
+    private _getRendererTag;
+    private _syncRenderer;
+    private _syncRenderedSelection;
+    private _syncRenderedActive;
+    private _select;
+    private _setSelection;
+    private _syncSelectionAttributes;
+    private _setSelectionFromSelectedIdAttribute;
+    private _setSelectionFromSelectedIdsAttribute;
+    private _getRangeSelection;
+    private _getEventRow;
+    private _getRowNode;
+    private _onListClick;
+    private _onListContextMenu;
+    private _onListDragStart;
+    private _onListDragOver;
+    private _onListDragLeave;
+    private _onListDrop;
+    private _onListDragEnd;
+    private _onDragStart;
+    private _onDragOver;
+    private _onDrop;
+    private _onKeyDown;
+    private _handleNavigationKey;
+    private _moveActiveRight;
+    private _moveActiveLeft;
+    private _getActiveVisibleId;
+    private _ensureActiveVisible;
+    private _setActiveId;
+    private _syncActiveDescendant;
+    private _getTreeItemElementId;
+    private _scrollActiveIntoView;
+    private _onScroll;
+    private _isEditableTarget;
+    private _copySelection;
+    private _pasteClipboard;
+    private _deleteSelection;
+    private _cloneNode;
+    private _cloneNodeWithUniqueIds;
+    private _makeUniqueId;
+    private _getSelectedTopLevelNodes;
+    private _getTopLevelSelectedIds;
+    private _getDropPosition;
+    private _getDropClass;
+    private _clearDropClass;
+    private _clearAllDropClasses;
+}
+export declare function defineTreeComponents(): void;