chili3d 0.6.1

package/packages/chili-ui/src/okCancel.ts

@@ -0,0 +1,58 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, span, svg } from "chili-controls";
+import { type AsyncController, type I18nKeys, Localize } from "chili-core";
+import style from "./okCancel.module.css";
+
+export class OKCancel extends HTMLElement {
+    private control?: AsyncController;
+
+    constructor() {
+        super();
+        this.className = style.root;
+        this.append(this.container());
+    }
+
+    private container() {
+        return div(
+            { className: style.container },
+            span({ textContent: new Localize("ribbon.group.selection") }),
+            div({ className: style.spacer }),
+            this.buttons(),
+        );
+    }
+
+    private buttons() {
+        return div(
+            { className: style.panel },
+            this._createIcon("icon-confirm", "common.confirm", this._onConfirm),
+            this._createIcon("icon-cancel", "common.cancel", this._onCancel),
+        );
+    }
+
+    private _createIcon(icon: string, text: I18nKeys, onClick: () => void) {
+        return div(
+            {
+                className: style.icon,
+                onclick: onClick,
+            },
+            svg({ icon }),
+            span({ textContent: new Localize(text) }),
+        );
+    }
+
+    setControl(control: AsyncController | undefined) {
+        this.control = control;
+    }
+
+    private readonly _onConfirm = () => {
+        this.control?.success();
+    };
+
+    private readonly _onCancel = () => {
+        this.control?.cancel();
+    };
+}
+
+customElements.define("ok-cancel", OKCancel);

package/packages/chili-ui/src/permanent.module.css

@@ -0,0 +1,44 @@
+dialog {
+    border: none;
+    box-shadow: 0px 1px 2px var(--foreground-muted-color);
+    border-radius: 16px;
+    padding: 0px;
+}
+
+dialog::backdrop {
+    background-color: var(--backdrop-color);
+}
+
+.loading {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    border: 2px solid var(--foreground-color);
+    border-top-color: var(--loading-border-color);
+    border-right-color: var(--loading-border-color);
+    border-bottom-color: var(--loading-border-color);
+    border-radius: 100%;
+}
+
+@keyframes circle {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.container {
+    width: fit-content;
+    height: fit-content;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.message {
+    margin-top: 12px;
+}

package/packages/chili-ui/src/permanent.ts

@@ -0,0 +1,31 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, span } from "chili-controls";
+import { I18n, type I18nKeys } from "chili-core";
+import style from "./permanent.module.css";
+
+export class Permanent {
+    static async show(action: () => Promise<void>, message: I18nKeys, ...args: any[]) {
+        const dialog = document.createElement("dialog");
+        dialog.appendChild(
+            div(
+                { className: style.container },
+                div({
+                    className: style.loading,
+                    style: {
+                        animation: `${style.circle} infinite 0.75s linear`,
+                    },
+                }),
+                span({
+                    className: style.message,
+                    textContent: I18n.translate(message, ...args),
+                }),
+            ),
+        );
+        document.body.appendChild(dialog);
+        dialog.showModal();
+
+        action().finally(() => dialog.remove());
+    }
+}

package/packages/chili-ui/src/project/index.ts

@@ -0,0 +1,4 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./projectView";

package/packages/chili-ui/src/project/projectView.module.css

@@ -0,0 +1,37 @@
+.root {
+    display: flex;
+    flex-direction: column;
+}
+
+.headerPanel {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    flex: 0;
+    margin: 0px 12px;
+}
+
+.itemsPanel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow-y: auto;
+    border-top: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    background-color: var(--panel-background-color);
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    font-size: 1.15rem;
+    font-weight: bolder;
+    flex: 1;
+    margin: 2px 6px;
+}
+
+@media (max-width: 680px) {
+    .root {
+        display: none;
+    }
+}

package/packages/chili-ui/src/project/projectView.ts

@@ -0,0 +1,77 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, span } from "chili-controls";
+import { type IDocument, type IView, Localize, PubSub } from "chili-core";
+import style from "./projectView.module.css";
+import { ToolBar } from "./toolBar";
+import { Tree } from "./tree";
+
+export class ProjectView extends HTMLElement {
+    private readonly _documentTreeMap = new Map<IDocument, Tree>();
+
+    private _activeDocument: IDocument | undefined;
+    get activeDocument() {
+        return this._activeDocument;
+    }
+
+    private readonly panel: HTMLDivElement;
+
+    constructor(props: { className: string }) {
+        super();
+        this.classList.add(style.root, props.className);
+        this.panel = div({
+            className: style.itemsPanel,
+        });
+        PubSub.default.sub("activeViewChanged", this.handleActiveViewChanged);
+        PubSub.default.sub("documentClosed", this.handleDocumentClosed);
+
+        this.render();
+    }
+
+    private render() {
+        this.append(
+            div(
+                { className: style.headerPanel },
+                span({
+                    className: style.header,
+                    textContent: new Localize("items.header"),
+                }),
+                new ToolBar(this),
+            ),
+            this.panel,
+        );
+    }
+
+    activeTree() {
+        if (!this._activeDocument) return undefined;
+        return this._documentTreeMap.get(this._activeDocument);
+    }
+
+    private readonly handleDocumentClosed = (document: IDocument) => {
+        const tree = this._documentTreeMap.get(document);
+        if (tree) {
+            tree.remove();
+            tree.dispose();
+            this._documentTreeMap.delete(document);
+        }
+    };
+
+    private readonly handleActiveViewChanged = (view: IView | undefined) => {
+        if (this._activeDocument === view?.document) return;
+
+        this._documentTreeMap.get(this._activeDocument!)?.remove();
+        this._activeDocument = view?.document;
+
+        if (view) {
+            let tree = this._documentTreeMap.get(view.document);
+            if (!tree) {
+                tree = new Tree(view.document);
+                this._documentTreeMap.set(view.document, tree);
+            }
+            this.panel.append(tree);
+        }
+    };
+}
+
+customElements.define("chili-project-view", ProjectView);

package/packages/chili-ui/src/project/toolBar.module.css

@@ -0,0 +1,16 @@
+.panel {
+    display: flex;
+    flex-direction: row;
+    flex: 0;
+}
+
+.svg {
+    width: 16px;
+    height: 16px;
+    margin-left: 12px;
+    padding: 6px;
+}
+
+.svg:hover {
+    background-color: var(--hover-background-color);
+}

package/packages/chili-ui/src/project/toolBar.ts

@@ -0,0 +1,73 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { a, svg } from "chili-controls";
+import { I18n, type I18nKeys, INode, PubSub } from "chili-core";
+import type { ProjectView } from "./projectView";
+import style from "./toolBar.module.css";
+import type { Tree } from "./tree";
+import { TreeGroup } from "./tree/treeItemGroup";
+
+export class ToolBar extends HTMLElement {
+    constructor(readonly projectView: ProjectView) {
+        super();
+        this.className = style.panel;
+        this.render();
+    }
+
+    private render() {
+        const buttons = [
+            { icon: "icon-folder-plus", tip: "items.tool.newFolder", command: this.newGroup },
+            { icon: "icon-unexpand", tip: "items.tool.unexpandAll", command: this.unExpandAll },
+            { icon: "icon-expand", tip: "items.tool.expandAll", command: this.expandAll },
+        ];
+        buttons.forEach(({ icon, tip, command }) => this.button(icon, tip as I18nKeys, command));
+    }
+
+    private button(icon: string, tip: I18nKeys, command: () => void) {
+        this.append(
+            a(
+                { title: I18n.translate(tip) },
+                svg({
+                    icon,
+                    className: style.svg,
+                    onclick: command,
+                }),
+            ),
+        );
+    }
+
+    private readonly newGroup = () => {
+        PubSub.default.pub("executeCommand", "create.folder");
+    };
+
+    private readonly expandAll = () => {
+        this.setExpand(true);
+    };
+
+    private readonly unExpandAll = () => {
+        this.setExpand(false);
+    };
+
+    private setExpand(expand: boolean) {
+        const tree = this.projectView.activeTree();
+        if (!tree) return;
+        const first = this.projectView.activeDocument?.modelManager.rootNode.firstChild;
+        if (first) this.setNodeExpand(tree, first, expand);
+    }
+
+    private setNodeExpand(tree: Tree, list: INode, expand: boolean) {
+        const item = tree.treeItem(list);
+        if (item instanceof TreeGroup) {
+            item.isExpanded = expand;
+        }
+        if (INode.isLinkedListNode(list) && list.firstChild) {
+            this.setNodeExpand(tree, list.firstChild, expand);
+        }
+        if (list.nextSibling) {
+            this.setNodeExpand(tree, list.nextSibling, expand);
+        }
+    }
+}
+
+customElements.define("chili-toolbar", ToolBar);

package/packages/chili-ui/src/project/tree/index.ts

@@ -0,0 +1,5 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./tree";
+export * from "./treeModel";

package/packages/chili-ui/src/project/tree/tree.module.css

@@ -0,0 +1,16 @@
+.panel {
+    margin: 4px;
+}
+
+.selected {
+    background-color: var(--hover-background-color);
+}
+
+.current {
+    outline: 2px solid var(--primary-color);
+}
+
+.dragging {
+    opacity: 0.56;
+    pointer-events: none;
+}

package/packages/chili-ui/src/project/tree/tree.ts

@@ -0,0 +1,265 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type IDocument,
+    INode,
+    type INodeLinkedList,
+    type NodeRecord,
+    PubSub,
+    ShapeType,
+    Transaction,
+    VisualNode,
+} from "chili-core";
+import { NodeSelectionHandler, ShapeSelectionHandler } from "chili-vis";
+import style from "./tree.module.css";
+import { TreeItem } from "./treeItem";
+import { TreeGroup } from "./treeItemGroup";
+import { TreeModel } from "./treeModel";
+
+export class Tree extends HTMLElement {
+    private readonly nodeMap = new Map<INode, TreeItem>();
+    private lastClicked: INode | undefined;
+    private readonly selectedNodes: Set<INode> = new Set();
+    private dragging: INode[] | undefined;
+
+    constructor(private document: IDocument) {
+        super();
+        this.className = style.panel;
+        this.initializeTree(document);
+    }
+
+    private initializeTree(document: IDocument) {
+        this.addAllNodes(document, this, document.modelManager.rootNode);
+        this.addEvents(this);
+    }
+
+    connectedCallback() {
+        this.document.modelManager.addNodeObserver(this.handleNodeChanged);
+        PubSub.default.sub("selectionChanged", this.handleSelectionChanged);
+    }
+
+    disconnectedCallback() {
+        this.document.modelManager.removeNodeObserver(this.handleNodeChanged);
+        PubSub.default.remove("selectionChanged", this.handleSelectionChanged);
+    }
+
+    treeItem(node: INode): TreeItem | undefined {
+        return this.nodeMap.get(node);
+    }
+
+    dispose(): void {
+        this.lastClicked = undefined;
+        this.dragging = undefined;
+        this.nodeMap.forEach((x) => x.dispose());
+        this.nodeMap.clear();
+        this.selectedNodes.clear();
+        this.removeEvents(this);
+        this.document.modelManager.removeNodeObserver(this.handleNodeChanged);
+        PubSub.default.remove("selectionChanged", this.handleSelectionChanged);
+        this.document = null as any;
+    }
+
+    readonly handleNodeChanged = (records: NodeRecord[]) => {
+        this.ensureHasHTML(records);
+        records.forEach((record) => {
+            const ele = this.nodeMap.get(record.node);
+            ele?.remove();
+            if (!ele || !record.newParent) return;
+
+            const parent = this.nodeMap.get(record.newParent) || this.createAndMapParent(record.newParent);
+            if (parent instanceof TreeGroup) {
+                const pre = record.newPrevious ? this.nodeMap.get(record.newPrevious) : null;
+                parent.insertAfter(ele, pre ?? null);
+            }
+        });
+    };
+
+    private createAndMapParent(newParent: INode) {
+        const parent = this.createHTMLElement(this.document, newParent);
+        this.nodeMap.set(newParent, parent);
+        return parent;
+    }
+
+    private readonly handleSelectionChanged = (
+        document: IDocument,
+        selected: INode[],
+        unselected: INode[],
+    ) => {
+        unselected.forEach((x) => {
+            this.nodeMap.get(x)?.removeSelectedStyle(style.selected);
+            this.selectedNodes.delete(x);
+        });
+        this.setLastClickItem(undefined);
+        selected.forEach((model) => {
+            this.selectedNodes.add(model);
+            this.nodeMap.get(model)?.addSelectedStyle(style.selected);
+        });
+        this.scrollToNode(selected);
+    };
+
+    private ensureHasHTML(records: NodeRecord[]) {
+        records.forEach((record) => {
+            if (!this.nodeMap.has(record.node)) {
+                this.nodeMap.set(record.node, this.createHTMLElement(this.document, record.node));
+            }
+        });
+    }
+
+    private scrollToNode(selected: INode[]) {
+        const node = selected.at(0);
+        if (node) {
+            this.expandParents(node);
+            this.nodeMap.get(node)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }
+
+    private expandParents(node: INode) {
+        let parent = node.parent;
+        while (parent) {
+            const group = this.nodeMap.get(parent) as TreeGroup;
+            if (group && !group.isExpanded) {
+                group.isExpanded = true;
+            }
+            parent = parent.parent;
+        }
+    }
+
+    private addAllNodes(document: IDocument, parent: HTMLElement, node: INode) {
+        const element = this.createHTMLElement(document, node);
+        this.nodeMap.set(node, element);
+        parent.appendChild(element);
+
+        const firstChild = (node as INodeLinkedList).firstChild;
+        if (firstChild) this.addAllNodes(document, element, firstChild);
+        if (node.nextSibling) this.addAllNodes(document, parent, node.nextSibling);
+    }
+
+    private createHTMLElement(document: IDocument, node: INode): TreeItem {
+        let result: TreeItem;
+        if (INode.isLinkedListNode(node)) result = new TreeGroup(document, node);
+        else if (node instanceof VisualNode) result = new TreeModel(document, node);
+        else throw new Error("unknown node");
+        return result;
+    }
+
+    private addEvents(item: HTMLElement) {
+        item.addEventListener("dragstart", this.onDragStart);
+        item.addEventListener("dragover", this.onDragOver);
+        item.addEventListener("dragleave", this.onDragLeave);
+        item.addEventListener("drop", this.onDrop);
+        item.addEventListener("click", this.onClick);
+    }
+
+    private removeEvents(item: HTMLElement) {
+        item.removeEventListener("dragstart", this.onDragStart);
+        item.removeEventListener("dragover", this.onDragOver);
+        item.removeEventListener("dragleave", this.onDragLeave);
+        item.removeEventListener("drop", this.onDrop);
+        item.removeEventListener("click", this.onClick);
+    }
+
+    private getTreeItem(item: HTMLElement | null): TreeItem | undefined {
+        if (item === null) return undefined;
+        if (item instanceof TreeItem) return item;
+        return this.getTreeItem(item.parentElement);
+    }
+
+    private readonly onClick = (event: MouseEvent) => {
+        if (!this.canSelect()) return;
+
+        const item = this.getTreeItem(event.target as HTMLElement)?.node;
+        if (!item) return;
+        event.stopPropagation();
+
+        if (event.shiftKey) {
+            this.handleShiftClick(item);
+        } else {
+            this.document.selection.setSelection([item], event.ctrlKey);
+        }
+
+        this.setLastClickItem(item);
+    };
+
+    private handleShiftClick(item: INode) {
+        if (this.lastClicked) {
+            const nodes = INode.getNodesBetween(this.lastClicked, item);
+            this.document.selection.setSelection(nodes, false);
+        }
+    }
+
+    private readonly onDragLeave = (event: DragEvent) => {
+        if (!this.canDrop(event)) return;
+    };
+
+    private readonly onDragOver = (event: DragEvent) => {
+        if (!this.canDrop(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer!.dropEffect = "move";
+    };
+
+    private canSelect() {
+        if (this.document.visual.eventHandler instanceof NodeSelectionHandler) {
+            return true;
+        }
+
+        if (this.document.visual.eventHandler instanceof ShapeSelectionHandler) {
+            return this.document.visual.eventHandler.shapeType === ShapeType.Shape;
+        }
+
+        return false;
+    }
+
+    private setLastClickItem(item: INode | undefined) {
+        if (this.lastClicked !== undefined) {
+            this.nodeMap.get(this.lastClicked)?.removeSelectedStyle(style.current);
+        }
+        this.lastClicked = item;
+        if (item !== undefined) {
+            this.nodeMap.get(item)?.addSelectedStyle(style.current);
+            this.document.modelManager.currentNode = INode.isLinkedListNode(item) ? item : item.parent;
+        }
+    }
+
+    private canDrop(event: DragEvent) {
+        const node = this.getTreeItem(event.target as HTMLElement)?.node;
+        if (node === undefined) return false;
+        if (this.dragging?.includes(node)) return false;
+        let parent = node.parent;
+        while (parent !== undefined) {
+            if (this.dragging?.includes(parent)) return false;
+            parent = parent.parent;
+        }
+        return true;
+    }
+
+    protected onDrop = (event: DragEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const node = this.getTreeItem(event.target as HTMLElement)?.node;
+        if (node === undefined) return;
+        Transaction.execute(this.document, "move node", () => {
+            const isLinkList = INode.isLinkedListNode(node);
+            const newParent = isLinkList ? (node as INodeLinkedList) : node.parent;
+            const target = isLinkList ? undefined : node;
+            this.dragging?.forEach((x) => {
+                x.parent?.move(x, newParent!, target);
+            });
+            this.dragging = undefined;
+        });
+    };
+
+    private readonly onDragStart = (event: DragEvent) => {
+        event.stopPropagation();
+        const item = this.getTreeItem(event.target as HTMLElement)?.node;
+        this.dragging = INode.findTopLevelNodes(this.selectedNodes);
+        if (item && !INode.containsDescendant(this.selectedNodes, item)) {
+            this.dragging.push(item);
+        }
+    };
+}
+
+customElements.define("ui-tree", Tree);

package/packages/chili-ui/src/project/tree/treeItem.module.css

@@ -0,0 +1,21 @@
+.name {
+    flex: 1 1 auto;
+    font-size: 12px;
+    user-select: none;
+    text-wrap: nowrap;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    overflow: hidden;
+}
+
+.icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    padding: 0px 8px;
+}
+
+.parent-hidden {
+    opacity: 0.56;
+}