chili3d 0.6.1

package/packages/chili-three/src/viewGizmo.ts

@@ -0,0 +1,305 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type IViewGizmo, XYZ } from "chili-core";
+import { Matrix4, Vector3 } from "three";
+import type { CameraController } from "./cameraController";
+import type { ThreeView } from "./threeView";
+
+const MOUSE_LEFT = 1;
+
+const options = {
+    size: 200,
+    padding: 16,
+    bubbleSizePrimary: 18,
+    bubbleSizeSeconday: 10,
+    showSecondary: true,
+    lineWidth: 2,
+    fontSize: "24px",
+    fontFamily: "arial",
+    fontColor: "#151515",
+    fontYAdjust: 0,
+    colors: {
+        x: ["#f73c3c", "#942424"],
+        y: ["#6ccb26", "#417a17"],
+        z: ["#178cf0", "#0e5490"],
+    },
+};
+
+export interface Axis {
+    axis: string;
+    direction: Vector3;
+    size: number;
+    position: Vector3;
+    color: string[];
+    lineWidth?: number;
+    label?: string;
+}
+
+export class ViewGizmo extends HTMLElement implements IViewGizmo {
+    private readonly _axes: Axis[];
+    private readonly _center: Vector3;
+    private readonly _canvas: HTMLCanvasElement;
+    private readonly _context: CanvasRenderingContext2D;
+    readonly cameraController: CameraController;
+    private _canClick: boolean = true;
+    private _selectedAxis?: Axis;
+    private _mouse?: Vector3;
+
+    constructor(readonly view: ThreeView) {
+        super();
+        this.cameraController = view.cameraController;
+        this._axes = this._initAxes();
+        this._center = new Vector3(options.size * 0.5, options.size * 0.5, 0);
+        this._canvas = this._initCanvas();
+        this._context = this._canvas.getContext("2d")!;
+        this._initStyle();
+    }
+    setDom(dom: HTMLElement): void {
+        this.remove();
+        dom.appendChild(this);
+    }
+
+    dispose(): void {
+        this.remove();
+    }
+
+    private _initStyle() {
+        this.style.zIndex = "999";
+        this.style.position = "absolute";
+        this.style.top = "20px";
+        this.style.right = "20px";
+        this.style.borderRadius = "100%";
+        this.style.cursor = "pointer";
+        this.style.userSelect = "none";
+        this.style.webkitUserSelect = "none";
+    }
+
+    private _initCanvas() {
+        const canvas = document.createElement("canvas");
+        canvas.width = options.size;
+        canvas.height = options.size;
+        canvas.style.width = `${options.size * 0.5}px`;
+        canvas.style.height = `${options.size * 0.5}px`;
+        this.append(canvas);
+        return canvas;
+    }
+
+    private _initAxes() {
+        return [
+            {
+                axis: "x",
+                direction: new Vector3(1, 0, 0),
+                position: new Vector3(),
+                size: options.bubbleSizePrimary,
+                color: options.colors.x,
+                lineWidth: options.lineWidth,
+                label: "X",
+            },
+            {
+                axis: "y",
+                direction: new Vector3(0, 1, 0),
+                position: new Vector3(),
+                size: options.bubbleSizePrimary,
+                color: options.colors.y,
+                lineWidth: options.lineWidth,
+                label: "Y",
+            },
+            {
+                axis: "z",
+                direction: new Vector3(0, 0, 1),
+                position: new Vector3(),
+                size: options.bubbleSizePrimary,
+                color: options.colors.z,
+                lineWidth: options.lineWidth,
+                label: "Z",
+            },
+            {
+                axis: "-x",
+                direction: new Vector3(-1, 0, 0),
+                position: new Vector3(),
+                size: options.bubbleSizeSeconday,
+                color: options.colors.x,
+            },
+            {
+                axis: "-y",
+                direction: new Vector3(0, -1, 0),
+                position: new Vector3(),
+                size: options.bubbleSizeSeconday,
+                color: options.colors.y,
+            },
+            {
+                axis: "-z",
+                direction: new Vector3(0, 0, -1),
+                position: new Vector3(),
+                size: options.bubbleSizeSeconday,
+                color: options.colors.z,
+            },
+        ];
+    }
+
+    connectedCallback() {
+        this._canvas.addEventListener("pointermove", this._onPointerMove);
+        this._canvas.addEventListener("pointerenter", this._onPointerEnter);
+        this._canvas.addEventListener("pointerout", this._onPointerOut);
+        this._canvas.addEventListener("click", this._onClick);
+        this._canvas.addEventListener("pointerdown", this._onPointerDown);
+        this._canvas.addEventListener("pointerup", this._onPointerUp);
+    }
+
+    disconnectedCallback() {
+        this._canvas.removeEventListener("pointermove", this._onPointerMove);
+        this._canvas.removeEventListener("pointerenter", this._onPointerEnter);
+        this._canvas.removeEventListener("pointerout", this._onPointerOut);
+        this._canvas.removeEventListener("click", this._onClick);
+        this._canvas.removeEventListener("pointerdown", this._onPointerDown);
+        this._canvas.removeEventListener("pointerup", this._onPointerUp);
+    }
+
+    private readonly _onPointerMove = (e: PointerEvent) => {
+        e.stopPropagation();
+        if (e.buttons === MOUSE_LEFT && !(e.movementX === 0 && e.movementY === 0)) {
+            this.cameraController.rotate(e.movementX * 4, e.movementY * 4);
+            this._canClick = false;
+        }
+        const rect = this._canvas.getBoundingClientRect();
+        this._mouse = new Vector3(e.clientX - rect.left, e.clientY - rect.top, 0).multiplyScalar(2);
+        this.view.update();
+    };
+
+    private readonly _onPointerDown = (e: PointerEvent) => {
+        e.stopPropagation();
+        this._canvas.setPointerCapture(e.pointerId);
+    };
+
+    private readonly _onPointerUp = (e: PointerEvent) => {
+        e.stopPropagation();
+        this._canvas.releasePointerCapture(e.pointerId);
+    };
+
+    private readonly _onPointerOut = (e: PointerEvent) => {
+        e.stopPropagation();
+        this._mouse = undefined;
+        this.style.backgroundColor = "transparent";
+    };
+
+    private readonly _onPointerEnter = (e: PointerEvent) => {
+        e.stopPropagation();
+        this.style.backgroundColor = "rgba(66, 66, 66, .9)";
+    };
+
+    private readonly _onClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        if (!this._canClick) {
+            this._canClick = true;
+            return;
+        }
+        if (this._selectedAxis) {
+            const distance = this.cameraController.camera.position.distanceTo(this.cameraController.target);
+            const position = this._selectedAxis.direction
+                .clone()
+                .multiplyScalar(distance)
+                .add(this.cameraController.target);
+            this.cameraController.camera.position.copy(position);
+            let up = new XYZ(0, 0, 1);
+            if (this._selectedAxis.axis === "z") up = new XYZ(0, 1, 0);
+            else if (this._selectedAxis.axis === "-z") up = new XYZ(0, -1, 0);
+            this.cameraController.lookAt(
+                this.cameraController.camera.position,
+                this.cameraController.target,
+                up,
+            );
+            this.view.update();
+        }
+    };
+
+    clear() {
+        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    }
+
+    update() {
+        this.clear();
+        const invRotMat = new Matrix4().makeRotationFromEuler(this.cameraController.camera.rotation).invert();
+        this._axes.forEach((axis) => {
+            axis.position = this.getBubblePosition(axis.direction.clone().applyMatrix4(invRotMat));
+        });
+        this._axes.sort((a, b) => a.position.z - b.position.z);
+        this.setSelectedAxis(this._axes);
+        this.drawAxes(this._axes);
+    }
+
+    private setSelectedAxis(axes: Axis[]) {
+        this._selectedAxis = undefined;
+        if (this._mouse && this._canClick) {
+            let closestDist = Infinity;
+            for (const axis of axes) {
+                const distance = this._mouse.distanceTo(axis.position);
+                if (distance < closestDist && distance < axis.size) {
+                    closestDist = distance;
+                    this._selectedAxis = axis;
+                }
+            }
+        }
+    }
+
+    drawAxes(axes: Axis[]) {
+        for (const axis of axes) {
+            const color = this.getAxisColor(axis);
+            this.drawCircle(axis.position, axis.size, color);
+            this.drawLine(this._center, axis.position, color, axis.lineWidth);
+            this.drawLabel(axis);
+        }
+    }
+
+    private getAxisColor(axis: Axis) {
+        let color;
+        if (this._selectedAxis === axis) {
+            color = "#FFFFFF";
+        } else if (axis.position.z >= -0.01) {
+            color = axis.color[0];
+        } else {
+            color = axis.color[1];
+        }
+        return color;
+    }
+
+    private drawCircle(p: Vector3, radius = 10, color = "#FF0000") {
+        this._context.beginPath();
+        this._context.arc(p.x, p.y, radius, 0, 2 * Math.PI, false);
+        this._context.fillStyle = color;
+        this._context.fill();
+        this._context.closePath();
+    }
+
+    private drawLine(p1: Vector3, p2: Vector3, color: string, width?: number) {
+        if (width) {
+            this._context.beginPath();
+            this._context.moveTo(p1.x, p1.y);
+            this._context.lineTo(p2.x, p2.y);
+            this._context.lineWidth = width;
+            this._context.strokeStyle = color;
+            this._context.stroke();
+            this._context.closePath();
+        }
+    }
+
+    private drawLabel(axis: Axis) {
+        if (axis.label) {
+            this._context.font = [options.fontSize, options.fontFamily].join(" ");
+            this._context.fillStyle = options.fontColor;
+            this._context.textBaseline = "middle";
+            this._context.textAlign = "center";
+            this._context.fillText(axis.label, axis.position.x, axis.position.y + options.fontYAdjust);
+        }
+    }
+
+    private getBubblePosition(vector: Vector3) {
+        return new Vector3(
+            vector.x * (this._center.x - options.bubbleSizePrimary / 2 - options.padding) + this._center.x,
+            this._center.y - vector.y * (this._center.y - options.bubbleSizePrimary / 2 - options.padding),
+            vector.z,
+        );
+    }
+}
+
+customElements.define("view-gizmo", ViewGizmo);

package/packages/chili-three/test/cameraControls.ts

@@ -0,0 +1,10 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export default class CameraControls {
+    static install() {}
+    static ACTION = {};
+    mouseButtons = {};
+    setPosition() {}
+    setTarget() {}
+}

package/packages/chili-three/test/testDocument.ts

@@ -0,0 +1,68 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type Act,
+    History,
+    type IApplication,
+    type IDocument,
+    type ISelection,
+    type ISerialize,
+    type IView,
+    ModelManager,
+    ObservableCollection,
+    type PropertyChangedHandler,
+    type Serialized,
+} from "chili-core";
+import { ThreeVisual } from "../src/threeVisual";
+
+export class TestDocument implements IDocument, ISerialize {
+    application: IApplication;
+    name: string;
+    id: string;
+    history: History;
+    selection: ISelection;
+    visual: ThreeVisual;
+    activeView: IView | undefined;
+    modelManager: ModelManager = new ModelManager(this);
+    acts: ObservableCollection<Act> = new ObservableCollection<Act>();
+    onPropertyChanged<K extends keyof this>(handler: PropertyChangedHandler<this, K>): void {
+        throw new Error("Method not implemented.");
+    }
+    removePropertyChanged<K extends keyof this>(handler: PropertyChangedHandler<this, K>): void {
+        throw new Error("Method not implemented.");
+    }
+    dispose() {
+        throw new Error("Method not implemented.");
+    }
+
+    importFiles(files: File[] | FileList): Promise<void> {
+        return Promise.resolve();
+    }
+
+    close(): Promise<void> {
+        return Promise.resolve();
+    }
+
+    serialize(): Serialized {
+        return {
+            classKey: "TestDocument",
+            properties: {},
+        };
+    }
+
+    constructor() {
+        this.name = "test";
+        this.id = "test";
+        this.visual = new ThreeVisual(this);
+        this.history = new History();
+        this.selection = {} as any;
+        this.application = { views: [] } as any;
+    }
+    clearPropertyChanged(): void {
+        throw new Error("Method not implemented.");
+    }
+    save(): Promise<void> {
+        return Promise.resolve();
+    }
+}

package/packages/chili-three/test/testEdge.ts

@@ -0,0 +1,171 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type EdgeMeshData,
+    type I18nKeys,
+    type ICurve,
+    type IDocument,
+    type IEdge,
+    type IEqualityComparer,
+    type IShape,
+    type IShapeMeshData,
+    type ITrimmedCurve,
+    type IWire,
+    type Line,
+    LineType,
+    Matrix4,
+    Orientation,
+    ParameterShapeNode,
+    type Plane,
+    Result,
+    type Serialized,
+    ShapeType,
+    type XYZ,
+    type XYZLike,
+} from "chili-core";
+
+export class TestEdge implements IEdge {
+    constructor(
+        readonly start: XYZ,
+        readonly end: XYZ,
+    ) {}
+    transformed(matrix: Matrix4): IShape {
+        throw new Error("Method not implemented.");
+    }
+    transformedMul(matrix: Matrix4): IShape {
+        throw new Error("Method not implemented.");
+    }
+    edgesMeshPosition(): EdgeMeshData {
+        throw new Error("Method not implemented.");
+    }
+    clone(): IShape {
+        throw new Error("Method not implemented.");
+    }
+
+    dispose(): void {
+        throw new Error("Method not implemented.");
+    }
+    update(curve: ICurve): void {
+        throw new Error("Method not implemented.");
+    }
+    trim(start: number, end: number): IEdge {
+        throw new Error("Method not implemented.");
+    }
+    isClosed(): boolean {
+        throw new Error("Method not implemented.");
+    }
+    isNull(): boolean {
+        throw new Error("Method not implemented.");
+    }
+    reserve(): void {
+        throw new Error("Method not implemented.");
+    }
+    section(shape: IShape | Plane): IShape {
+        throw new Error("Method not implemented.");
+    }
+    splitByWire(edges: (IEdge | IWire)[]): IShape {
+        throw new Error("Method not implemented.");
+    }
+    split(shapes: IShape[]): IShape {
+        throw new Error("Method not implemented.");
+    }
+
+    findAncestor(ancestorType: ShapeType, fromShape: IShape): IShape[] {
+        throw new Error("Method not implemented.");
+    }
+
+    findSubShapes(subshapeType: ShapeType): IShape[] {
+        throw new Error("Method not implemented.");
+    }
+    iterShape(): IShape[] {
+        throw new Error("Method not implemented.");
+    }
+    offset(distance: number, dir: XYZ): Result<IEdge> {
+        throw new Error("Method not implemented.");
+    }
+    hlr(position: XYZLike, direction: XYZLike, xDir: XYZLike): IShape {
+        throw new Error("Method not implemented.");
+    }
+
+    intersect(other: IEdge | Line) {
+        return [];
+    }
+    length(): number {
+        return this.start.distanceTo(this.end);
+    }
+    get curve(): ITrimmedCurve {
+        throw new Error("Method not implemented.");
+    }
+    get id(): string {
+        return "testEdge";
+    }
+    shapeType: ShapeType = ShapeType.Edge;
+    matrix: Matrix4 = Matrix4.identity();
+    get mesh(): IShapeMeshData {
+        return {
+            edges: {
+                position: new Float32Array([
+                    this.start.x,
+                    this.start.y,
+                    this.start.z,
+                    this.end.x,
+                    this.end.y,
+                    this.end.z,
+                ]),
+                color: 0xff0000,
+                lineType: LineType.Solid,
+                range: [],
+            },
+            faces: undefined,
+        };
+    }
+    serialize(): Serialized {
+        return {
+            classKey: "Shape",
+            properties: {},
+        };
+    }
+    orientation(): Orientation {
+        return Orientation.FORWARD;
+    }
+    isPartner(other: IShape): boolean {
+        return true;
+    }
+    isSame(other: IShape): boolean {
+        return true;
+    }
+    isEqual(other: IShape): boolean {
+        if (other instanceof TestEdge) {
+            return this.start.isEqualTo(other.start) && this.end.isEqualTo(other.end);
+        }
+        return false;
+    }
+}
+
+export class TestNode extends ParameterShapeNode {
+    override display(): I18nKeys {
+        return "body.line";
+    }
+    constructor(
+        document: IDocument,
+        readonly start: XYZ,
+        readonly end: XYZ,
+    ) {
+        super(document);
+    }
+
+    protected override setProperty<K extends keyof this>(
+        property: K,
+        newValue: this[K],
+        onPropertyChanged?: ((property: K, oldValue: this[K]) => void) | undefined,
+        equals?: IEqualityComparer<this[K]> | undefined,
+    ): boolean {
+        this.setPrivateValue(property, newValue);
+        return true;
+    }
+
+    generateShape(): Result<IShape> {
+        return Result.ok(new TestEdge(this.start, this.end));
+    }
+}

package/packages/chili-three/test/testView.ts

@@ -0,0 +1,78 @@
+// 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, Plane } from "chili-core";
+import * as THREE from "three";
+import { ThreeHighlighter } from "../src/threeHighlighter";
+import { ThreeView } from "../src/threeView";
+import type { ThreeVisualContext } from "../src/threeVisualContext";
+
+class TestWebGLRenderer {
+    constructor(readonly domElement = document.createElement("canvas")) {}
+
+    render(scene: THREE.Object3D, camera: THREE.Camera): void {}
+    setSize(width: number, height: number, updateStyle?: boolean): void {}
+
+    getPixelRatio() {
+        return 1;
+    }
+
+    getViewport() {
+        return new THREE.Vector4();
+    }
+    setViewport(v: THREE.Vector4) {}
+
+    setPixelRatio(value: number) {}
+
+    getSize(target: THREE.Vector2): THREE.Vector2 {
+        return new THREE.Vector2();
+    }
+
+    setAnimationLoop(fn: (x: number) => void) {}
+    getRenderTarget() {
+        return null;
+    }
+    setRenderTarget() {}
+    clear() {}
+    clearDepth() {}
+    getClearColor() {}
+    getClearAlpha() {}
+    getContext() {
+        return {
+            getExtension(str: string) {},
+        };
+    }
+}
+
+export const container = document.createElement("canvas");
+container.getBoundingClientRect = () => {
+    return { left: 0, top: 0, width: 100, height: 100 } as any;
+};
+Object.defineProperties(container, {
+    clientWidth: {
+        get() {
+            return 100;
+        },
+    },
+    clientHeight: {
+        get() {
+            return 100;
+        },
+    },
+});
+
+export class TestView extends ThreeView {
+    constructor(document: IDocument, content: ThreeVisualContext) {
+        super(document, "test", Plane.XY, new ThreeHighlighter(content), content);
+        this.setDom(container);
+        this.camera.position.set(0, 0, 100);
+        this.camera.lookAt(0, 0, 0);
+    }
+
+    protected override initRenderer() {
+        const render = new TestWebGLRenderer() as any;
+        render.setSize(container.clientWidth, container.clientHeight);
+        container.appendChild(render.domElement);
+        return render;
+    }
+}

package/packages/chili-three/test/three.test.ts

@@ -0,0 +1,44 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type IVisualGeometry, Material, type ShapeNode, ShapeType, XY, XYZ } from "chili-core";
+import { TestDocument } from "./testDocument";
+import { TestNode } from "./testEdge";
+import { TestView } from "./testView";
+
+(global as any).ResizeObserver = rs.fn().mockImplementation(() => ({
+    observe: rs.fn(),
+    unobserve: rs.fn(),
+    disconnect: rs.fn(),
+}));
+
+describe("three test", () => {
+    const doc = new TestDocument();
+    doc.modelManager.materials.push(new Material(doc, "test", 0x00ff00));
+    const view = new TestView(doc, doc.visual.context);
+
+    test("test view", () => {
+        expect(view.screenToCameraRect(0, 0)).toEqual(new XY(-1, 1));
+        expect(view.screenToCameraRect(100, 100)).toEqual(new XY(1, -1));
+        const world = view.screenToWorld(50, 50);
+        expect(view.worldToScreen(world)).toEqual(new XY(50, 50));
+    });
+
+    test("test context", () => {
+        const context = doc.visual.context;
+        const model = new TestNode(doc, XYZ.zero, new XYZ(100, 0, 0));
+        context.addNode([model]);
+        expect(context.getVisual(model)).not.toBeNull();
+        const mouse = view.worldToScreen(new XYZ(50, 0, 0));
+        const shapes = view.detectShapes(ShapeType.Shape, mouse.x, mouse.y);
+        expect(shapes.length).toEqual(1);
+        expect(shapes[0].shape.shapeType).toBe(ShapeType.Edge);
+
+        const shape = context.getVisual(model) as IVisualGeometry;
+        expect(shapes.at(0)?.shape).toEqual((shape?.geometryNode as ShapeNode).shape.value);
+        expect(context.getNode(shape)).toEqual(model);
+
+        context.removeNode([model]);
+        expect(view.detectShapes(ShapeType.Shape, mouse.x, mouse.y).length).toEqual(0);
+    });
+});

package/packages/chili-three/test/viewGizmo.ts

@@ -0,0 +1,12 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { IViewGizmo } from "chili-core";
+
+export class ViewGizmo extends HTMLElement implements IViewGizmo {
+    update(): void {}
+    dispose(): void {}
+    setDom(dom: HTMLElement) {}
+}
+
+customElements.define("view-gizmo", ViewGizmo);

package/packages/chili-ui/package.json

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