chili3d 0.6.1

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

@@ -0,0 +1,296 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { collection, div, input, label, span, svg } from "chili-controls";
+import {
+    type Act,
+    Binding,
+    type CameraType,
+    DialogResult,
+    type IConverter,
+    type IView,
+    Localize,
+    PubSub,
+    Result,
+} from "chili-core";
+import { Flyout } from "./flyout";
+import style from "./viewport.module.css";
+
+class CameraConverter implements IConverter<CameraType> {
+    constructor(readonly type: CameraType) {}
+
+    convert(value: CameraType): Result<string, string> {
+        if (value === this.type) {
+            return Result.ok(style.actived);
+        }
+        return Result.ok("");
+    }
+}
+
+export class Viewport extends HTMLElement {
+    private readonly _flyout: Flyout;
+    private readonly _eventCaches: [keyof HTMLElementEventMap, (e: any) => void][] = [];
+    private readonly _acts: HTMLElement;
+
+    constructor(
+        readonly view: IView,
+        readonly showViewControls: boolean,
+    ) {
+        super();
+        this.className = style.root;
+        this._flyout = new Flyout();
+        this._acts = this.createActs();
+        this.render();
+        view.setDom(this);
+    }
+
+    private readonly onActCollectionChanged = () => {
+        if (this.view.document.acts.length === 0) {
+            this._acts.style.display = "none";
+        } else {
+            this._acts.style.display = "flex";
+        }
+    };
+
+    private render() {
+        this.append(
+            this._acts,
+            this.showViewControls
+                ? div(
+                      {
+                          className: style.viewControls,
+                          onpointerdown: (ev) => ev.stopPropagation(),
+                          onclick: (e) => e.stopPropagation(),
+                      },
+                      this.createCameraControls(),
+                      this.createActionControls(),
+                  )
+                : "",
+        );
+    }
+
+    private createCameraControls() {
+        return div(
+            { className: style.border },
+            this.createCameraControl("orthographic", "icon-orthographic"),
+            this.createCameraControl("perspective", "icon-perspective"),
+        );
+    }
+
+    private createActionControls() {
+        return div(
+            { className: style.border },
+            svg({
+                icon: "icon-fitcontent",
+                title: new Localize("viewport.fitContent"),
+                onclick: async (e) => {
+                    e.stopPropagation();
+                    this.view.cameraController.fitContent();
+                    this.view.update();
+                },
+            }),
+            svg({
+                icon: "icon-zoomin",
+                title: new Localize("viewport.zoomIn"),
+                onclick: () => {
+                    this.view.cameraController.zoom(this.view.width / 2, this.view.height / 2, -5);
+                    this.view.update();
+                },
+            }),
+            svg({
+                icon: "icon-zoomout",
+                title: new Localize("viewport.zoomOut"),
+                onclick: () => {
+                    this.view.cameraController.zoom(this.view.width / 2, this.view.height / 2, 5);
+                    this.view.update();
+                },
+            }),
+        );
+    }
+
+    private createActs() {
+        return div(
+            { className: style.actsContainer },
+            div(
+                {
+                    className: style.border,
+                    onpointerdown: (ev) => ev.stopPropagation(),
+                    onclick: (e) => e.stopPropagation(),
+                },
+                collection({
+                    className: style.acts,
+                    sources: this.view.document.acts,
+                    template: (v) => {
+                        return div(
+                            {
+                                onclick: () => {
+                                    this.view.cameraController.lookAt(
+                                        v.cameraPosition,
+                                        v.cameraTarget,
+                                        v.cameraUp,
+                                    );
+                                    this.view.update();
+                                },
+                            },
+                            span({
+                                textContent: new Binding(v, "name"),
+                            }),
+                            div(
+                                {
+                                    className: style.tools,
+                                },
+                                svg({
+                                    icon: "icon-cog",
+                                    onclick: () => this.setActName(v),
+                                }),
+                                svg({
+                                    icon: "icon-times",
+                                    onclick: () => {
+                                        this.view.document.acts.remove(v);
+                                    },
+                                }),
+                            ),
+                        );
+                    },
+                    onwheel: (e) => {
+                        e.preventDefault();
+                        const container = e.currentTarget as HTMLElement;
+                        container.scrollLeft += e.deltaY;
+                    },
+                }),
+            ),
+        );
+    }
+
+    private readonly setActName = (act: Act) => {
+        const inputBox = input({
+            value: act.name,
+            onkeydown: (e) => {
+                e.stopPropagation();
+            },
+        });
+        PubSub.default.pub(
+            "showDialog",
+            "ribbon.group.act",
+            div(label({ textContent: new Localize("common.name") }), ": ", inputBox),
+            (result) => {
+                if (result === DialogResult.ok) {
+                    act.name = inputBox.value;
+                }
+            },
+        );
+    };
+
+    private createCameraControl(cameraType: CameraType, icon: string) {
+        return div(
+            {
+                className: new Binding(
+                    this.view.cameraController,
+                    "cameraType",
+                    new CameraConverter(cameraType),
+                ),
+            },
+            svg({
+                icon: icon,
+                title: new Localize(`viewport.${cameraType}`),
+                onclick: (e) => {
+                    e.stopPropagation();
+                    this.view.cameraController.cameraType = cameraType;
+                    this.view.update();
+                },
+            }),
+        );
+    }
+
+    connectedCallback() {
+        this.initEvent();
+        this.appendChild(this._flyout);
+        this.view.document.acts.onCollectionChanged(this.onActCollectionChanged);
+        this.onActCollectionChanged();
+    }
+
+    disconnectedCallback() {
+        this.removeEvents();
+        this._flyout.remove();
+        this.view.document.acts.removeCollectionChanged(this.onActCollectionChanged);
+    }
+
+    dispose() {
+        this.removeEvents();
+    }
+
+    private initEvent() {
+        const events: [keyof HTMLElementEventMap, (view: IView, e: any) => any][] = [
+            ["pointerdown", this.pointerDown],
+            ["pointermove", this.pointerMove],
+            ["pointerout", this.pointerOut],
+            ["pointerup", this.pointerUp],
+            ["wheel", this.mouseWheel],
+        ];
+        events.forEach((v) => {
+            this.addEventListenerHandler(v[0], v[1]);
+        });
+    }
+
+    private addEventListenerHandler(type: keyof HTMLElementEventMap, handler: (view: IView, e: any) => any) {
+        const listener = (e: any) => {
+            e.preventDefault();
+            handler(this.view, e);
+        };
+        this.addEventListener(type, listener);
+        this._eventCaches.push([type, listener]);
+    }
+
+    private removeEvents() {
+        this._eventCaches.forEach((x) => {
+            this.removeEventListener(x[0], x[1]);
+        });
+        this._eventCaches.length = 0;
+    }
+
+    private readonly pointerMove = (view: IView, event: PointerEvent) => {
+        if (this._flyout) {
+            this._flyout.style.top = event.offsetY + "px";
+            this._flyout.style.left = event.offsetX + "px";
+        }
+        if (view.document.visual.eventHandler.isEnabled)
+            view.document.visual.eventHandler.pointerMove(view, event);
+        if (view.document.visual.viewHandler.isEnabled)
+            view.document.visual.viewHandler.pointerMove(view, event);
+    };
+
+    private readonly pointerDown = (view: IView, event: PointerEvent) => {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+
+        view.document.application.activeView = view;
+        if (view.document.visual.eventHandler.isEnabled)
+            view.document.visual.eventHandler.pointerDown(view, event);
+        if (view.document.visual.viewHandler.isEnabled)
+            view.document.visual.viewHandler.pointerDown(view, event);
+    };
+
+    private readonly pointerUp = (view: IView, event: PointerEvent) => {
+        if (view.document.visual.eventHandler.isEnabled)
+            view.document.visual.eventHandler.pointerUp(view, event);
+        if (view.document.visual.viewHandler.isEnabled)
+            view.document.visual.viewHandler.pointerUp(view, event);
+    };
+
+    private readonly pointerOut = (view: IView, event: PointerEvent) => {
+        if (view.document.visual.eventHandler.isEnabled)
+            view.document.visual.eventHandler.pointerOut?.(view, event);
+        if (view.document.visual.viewHandler.isEnabled)
+            view.document.visual.viewHandler.pointerOut?.(view, event);
+    };
+
+    private readonly mouseWheel = (view: IView, event: WheelEvent) => {
+        if (view.document.visual.eventHandler.isEnabled)
+            view.document.visual.eventHandler.mouseWheel?.(view, event);
+        if (view.document.visual.viewHandler.isEnabled)
+            view.document.visual.viewHandler.mouseWheel?.(view, event);
+    };
+}
+
+customElements.define("chili-uiview", Viewport);

package/packages/chili-vis/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "chili-vis",
+  "version": "0.6.1",
+  "description": "",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "chili-core": "*"
+  }
+}

package/packages/chili-vis/src/index.ts

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

package/packages/chili-vis/src/nodeSelectionEventHandler.ts

@@ -0,0 +1,122 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type AsyncController,
+    type IDocument,
+    type INode,
+    type INodeFilter,
+    type IView,
+    type IVisualObject,
+    ShapeType,
+    type VisualNode,
+    VisualState,
+} from "chili-core";
+import { SelectionHandler } from "./selectionEventHandler";
+
+export class NodeSelectionHandler extends SelectionHandler {
+    private _highlights: IVisualObject[] | undefined;
+    private _detectAtMouse: IVisualObject[] | undefined;
+    private _lockDetected: IVisualObject | undefined; // 用于切换捕获的对象
+    protected highlighState = VisualState.edgeHighlight;
+
+    nodes(): VisualNode[] {
+        return this.document.selection.getSelectedNodes() as VisualNode[];
+    }
+
+    constructor(
+        document: IDocument,
+        multiMode: boolean,
+        controller?: AsyncController,
+        readonly filter?: INodeFilter,
+    ) {
+        super(document, multiMode, controller);
+    }
+
+    protected override select(view: IView, event: PointerEvent): number {
+        if (!this._highlights?.length) {
+            this.clearSelected(this.document);
+            return 0;
+        }
+        const models = this._highlights
+            .map((x) => view.document.visual.context.getNode(x))
+            .filter((x): x is INode => x !== undefined);
+        this.document.selection.setSelection(models, this.toggleSelect(event));
+        return models.length;
+    }
+
+    protected toggleSelect(event: PointerEvent) {
+        return event.shiftKey;
+    }
+
+    getDetecteds(view: IView, event: PointerEvent) {
+        if (
+            this.rect &&
+            Math.abs(this.mouse.x - event.offsetX) > 3 &&
+            Math.abs(this.mouse.y - event.offsetY) > 3
+        ) {
+            return view.detectVisualRect(
+                this.mouse.x,
+                this.mouse.y,
+                event.offsetX,
+                event.offsetY,
+                this.filter,
+            );
+        }
+        this._detectAtMouse = view.detectVisual(event.offsetX, event.offsetY, this.filter);
+        const detected = this.getDetecting();
+        return detected ? [detected] : [];
+    }
+
+    private getDetecting() {
+        if (!this._detectAtMouse) return undefined;
+        const index = this._lockDetected ? this.getDetcedtingIndex() : 0;
+        return this._detectAtMouse[index] || undefined;
+    }
+
+    private getDetcedtingIndex() {
+        if (!this._detectAtMouse) return -1;
+        for (let i = 0; i < this._detectAtMouse.length; i++) {
+            if (this._lockDetected === this._detectAtMouse[i]) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    protected override setHighlight(view: IView, event: PointerEvent) {
+        const detecteds = this.getDetecteds(view, event);
+        this.highlightDetecteds(view, detecteds);
+    }
+
+    private highlightDetecteds(view: IView, detecteds: IVisualObject[]) {
+        this.cleanHighlights();
+        detecteds.forEach((x) => {
+            view.document.visual.highlighter.addState(x, this.highlighState, ShapeType.Shape);
+        });
+        this._highlights = detecteds;
+        view.update();
+    }
+
+    protected override cleanHighlights(): void {
+        this._highlights?.forEach((x) => {
+            this.document.visual.highlighter.removeState(x, this.highlighState, ShapeType.Shape);
+        });
+        this._highlights = undefined;
+    }
+
+    protected override highlightNext(view: IView): void {
+        if (this._detectAtMouse && this._detectAtMouse.length > 1) {
+            const index = this._lockDetected
+                ? (this.getDetcedtingIndex() + 1) % this._detectAtMouse.length
+                : 1;
+            this._lockDetected = this._detectAtMouse[index];
+            const detected = this.getDetecting();
+            if (detected) this.highlightDetecteds(view, [detected]);
+        }
+    }
+
+    override clearSelected(document: IDocument): void {
+        document.selection.clearSelection();
+    }
+}

package/packages/chili-vis/src/selectionEventHandler.ts

@@ -0,0 +1,145 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { AsyncController, IDocument, IEventHandler, IView } from "chili-core";
+
+const MOUSE_MIDDLE = 4;
+
+const SelectionRectStyle = `
+    border: 1px solid var(--primary-color);
+    background-color: rgba(74, 158, 255, 0.3);
+    position: absolute;
+    pointer-events: none;
+    display: none;
+    left: 0px;
+    right: 0px;
+    width: 0px;
+    height: 0px;
+`;
+
+interface SelectionRect {
+    element: HTMLElement;
+    clientX: number;
+    clientY: number;
+}
+
+export abstract class SelectionHandler implements IEventHandler {
+    protected rect?: SelectionRect;
+    protected showRect = true;
+    protected mouse = { isDown: false, x: 0, y: 0 };
+    protected readonly pointerEventMap: Map<number, PointerEvent> = new Map();
+
+    isEnabled = true;
+
+    constructor(
+        readonly document: IDocument,
+        readonly multiMode: boolean,
+        readonly controller?: AsyncController,
+    ) {
+        controller?.onCancelled((s) => {
+            this.clearSelected(document);
+            this.cleanHighlights();
+        });
+    }
+
+    #disposed = false;
+    readonly dispose = () => {
+        if (!this.#disposed) {
+            this.#disposed = true;
+
+            this.disposeInternal();
+        }
+    };
+
+    protected disposeInternal() {
+        this.pointerEventMap.clear();
+    }
+
+    pointerMove(view: IView, event: PointerEvent): void {
+        if (event.buttons === MOUSE_MIDDLE) return;
+        if (this.rect) this.updateRect(this.rect, event);
+
+        this.setHighlight(view, event);
+    }
+
+    protected abstract setHighlight(view: IView, event: PointerEvent): void;
+
+    protected abstract cleanHighlights(): void;
+
+    protected abstract clearSelected(document: IDocument): void;
+
+    protected abstract select(view: IView, event: PointerEvent): number;
+
+    protected abstract highlightNext(view: IView): void;
+
+    pointerDown(view: IView, event: PointerEvent): void {
+        event.preventDefault();
+        if (event.button === 0 && event.isPrimary) {
+            this.mouse = { isDown: true, x: event.offsetX, y: event.offsetY };
+            if (this.multiMode && this.showRect) {
+                this.rect = this.initRect(event);
+            }
+        }
+        this.pointerEventMap.set(event.pointerId, event);
+    }
+
+    private initRect(event: PointerEvent): SelectionRect {
+        const rect = document.createElement("div");
+        rect.style.cssText = SelectionRectStyle;
+        this.document.application.mainWindow?.appendChild(rect);
+        return { element: rect, clientX: event.clientX, clientY: event.clientY };
+    }
+
+    protected updateRect(rect: SelectionRect, event: PointerEvent) {
+        if (this.pointerEventMap.size !== 1) return;
+        rect.element.style.display = "block";
+        const [x1, y1] = [Math.min(rect.clientX, event.clientX), Math.min(rect.clientY, event.clientY)];
+        const [x2, y2] = [Math.max(rect.clientX, event.clientX), Math.max(rect.clientY, event.clientY)];
+        Object.assign(rect.element.style, {
+            left: `${x1}px`,
+            top: `${y1}px`,
+            width: `${x2 - x1}px`,
+            height: `${y2 - y1}px`,
+        });
+    }
+
+    pointerOut(view: IView, event: PointerEvent): void {
+        if (event.isPrimary) {
+            this.mouse.isDown = false;
+            this.removeRect(view);
+            this.cleanHighlights();
+        }
+        this.pointerEventMap.delete(event.pointerId);
+    }
+
+    pointerUp(view: IView, event: PointerEvent): void {
+        event.preventDefault();
+        if (this.mouse.isDown && event.button === 0 && event.isPrimary) {
+            this.mouse.isDown = false;
+            this.removeRect(view);
+            const count = this.select(view, event);
+            this.cleanHighlights();
+            view.update();
+            if (count > 0 && !this.multiMode) this.controller?.success();
+        }
+        this.pointerEventMap.delete(event.pointerId);
+    }
+
+    private removeRect(view: IView) {
+        this.rect?.element.remove();
+        this.rect = undefined;
+    }
+
+    keyDown(view: IView, event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.controller ? this.controller.cancel() : this.clearSelected(view.document.visual.document);
+            this.cleanHighlights();
+        } else if (event.key === "Enter") {
+            this.cleanHighlights();
+            this.controller?.success();
+        } else if (event.key === "Tab") {
+            event.preventDefault();
+            this.highlightNext(view);
+        }
+    }
+}