chili3d 0.6.1

package/packages/chili/src/commands/index.ts

@@ -0,0 +1,17 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./application";
+export * from "./boolean";
+export * from "./create";
+export * from "./createActCommand";
+export * from "./createCommand";
+export * from "./delete";
+export * from "./folder";
+export * from "./importExport";
+export * from "./measure";
+export * from "./modify";
+export * from "./multistepCommand";
+export * from "./redo";
+export * from "./undo";
+export * from "./workingPlane";

package/packages/chili/src/commands/measure/angle.ts

@@ -0,0 +1,130 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { command, Precision, type ShapeMeshData, VisualConfig, type XYZ } from "chili-core";
+import { Dimension, type PointSnapData, type SnapResult } from "../../snap";
+import { type IStep, PointStep } from "../../step";
+import { MultistepCommand } from "../multistepCommand";
+
+const ARC_POSITION = 0.5;
+
+@command({
+    key: "measure.angle",
+    icon: "icon-measureAngle",
+})
+export class AngleMeasure extends MultistepCommand {
+    protected override getSteps(): IStep[] {
+        const firstStep = new PointStep("prompt.pickFistPoint");
+        const secondStep = new PointStep("prompt.pickNextPoint", this.getSecondPointData);
+        const thirdStep = new PointStep("prompt.pickNextPoint", this.getThirdPointData);
+        return [firstStep, secondStep, thirdStep];
+    }
+
+    private readonly getSecondPointData = (): PointSnapData => {
+        return {
+            refPoint: () => this.stepDatas[0].point!,
+            dimension: Dimension.D1D2D3,
+            validator: (point: XYZ) => {
+                return this.stepDatas[0].point!.distanceTo(point) > Precision.Distance;
+            },
+            preview: this.linePreview,
+        };
+    };
+
+    private readonly linePreview = (point: XYZ | undefined) => {
+        if (!point) {
+            return [this.meshPoint(this.stepDatas[0].point!)];
+        }
+        return [this.meshPoint(this.stepDatas[0].point!), this.meshLine(this.stepDatas[0].point!, point)];
+    };
+
+    private readonly getThirdPointData = (): PointSnapData => {
+        return {
+            refPoint: () => this.stepDatas[0].point!,
+            dimension: Dimension.D1D2D3,
+            prompt: (result: SnapResult) => this.anglePrompt(result.point!),
+            validator: (point: XYZ) => {
+                return (
+                    this.stepDatas[0].point!.distanceTo(point) > Precision.Distance &&
+                    this.stepDatas[1].point!.distanceTo(point) > Precision.Distance
+                );
+            },
+            preview: this.arcPreview,
+        };
+    };
+
+    private readonly anglePrompt = (point: XYZ) => {
+        const { rad } = this.arcInfo(point);
+        return ((rad * 180) / Math.PI).toFixed(2) + "°";
+    };
+
+    private readonly arcPreview = (point: XYZ | undefined) => {
+        const meshes: ShapeMeshData[] = [
+            this.meshPoint(this.stepDatas[0].point!),
+            this.meshPoint(this.stepDatas[1].point!),
+            this.meshLine(
+                this.stepDatas[0].point!,
+                this.stepDatas[1].point!,
+                VisualConfig.highlightEdgeColor,
+                3,
+            ),
+        ];
+        if (!point) return meshes;
+
+        const { v1, rad, normal } = this.arcInfo(point);
+        const angle = (rad * 180) / Math.PI;
+        if (angle < Precision.Angle) return meshes;
+
+        const line2 = this.meshLine(this.stepDatas[0].point!, point, VisualConfig.highlightEdgeColor, 3);
+        const arc = this.application.shapeFactory
+            .arc(
+                normal,
+                this.stepDatas[0].point!,
+                this.stepDatas[0].point!.add(v1.multiply(this.lineLength(point) * ARC_POSITION)),
+                angle,
+            )
+            .unchecked()?.mesh.edges!;
+        arc.lineWidth = 3;
+        arc.color = VisualConfig.highlightEdgeColor;
+        return [line2, arc, ...meshes];
+    };
+
+    private lineLength(point: XYZ | undefined) {
+        const d1 = this.stepDatas[0].point!.distanceTo(this.stepDatas[1].point!);
+        if (!point) {
+            return d1;
+        }
+        const d2 = this.stepDatas[0].point!.distanceTo(point);
+        return Math.min(d1, d2);
+    }
+
+    private arcInfo(point: XYZ) {
+        const v1 = this.stepDatas[1].point!.sub(this.stepDatas[0].point!).normalize()!;
+        const v2 = point.sub(this.stepDatas[0].point!).normalize()!;
+        const rad = v1.angleTo(v2)!;
+        const normal = v1.cross(v2).normalize()!;
+        return {
+            v1,
+            v2,
+            rad,
+            normal,
+        };
+    }
+
+    protected override executeMainTask(): void {
+        const { v1, rad, normal } = this.arcInfo(this.stepDatas[2].point!);
+        const arcMid = v1
+            .rotate(normal, rad * 0.5)!
+            .multiply(this.lineLength(this.stepDatas[2].point) * ARC_POSITION)
+            .add(this.stepDatas[0].point!);
+        const visualId = this.document.visual.context.displayMesh([
+            this.meshPoint(this.stepDatas[2].point!),
+            ...this.arcPreview(this.stepDatas[2].point),
+        ]);
+        this.application.activeView?.htmlText(((rad * 180) / Math.PI).toFixed(2) + "°", arcMid, {
+            onDispose: () => {
+                this.document.visual.context.removeMesh(visualId);
+            },
+        });
+    }
+}

package/packages/chili/src/commands/measure/index.ts

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

package/packages/chili/src/commands/measure/length.ts

@@ -0,0 +1,57 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { command, Precision, VisualConfig, type XYZ } from "chili-core";
+import { Dimension, type PointSnapData } from "../../snap";
+import { type IStep, PointStep } from "../../step";
+import { MultistepCommand } from "../multistepCommand";
+
+@command({
+    key: "measure.length",
+    icon: "icon-measureLength",
+})
+export class LengthMeasure extends MultistepCommand {
+    protected override getSteps(): IStep[] {
+        const firstStep = new PointStep("prompt.pickFistPoint");
+        const secondStep = new PointStep("prompt.pickNextPoint", this.getSecondPointData);
+        return [firstStep, secondStep];
+    }
+
+    private readonly getSecondPointData = (): PointSnapData => {
+        return {
+            refPoint: () => this.stepDatas[0].point!,
+            dimension: Dimension.D1D2D3,
+            validator: (point: XYZ) => {
+                return this.stepDatas[0].point!.distanceTo(point) > Precision.Distance;
+            },
+            preview: this.linePreview,
+        };
+    };
+
+    private readonly linePreview = (point: XYZ | undefined) => {
+        if (!point) {
+            return [this.meshPoint(this.stepDatas[0].point!)];
+        }
+        return [this.meshPoint(this.stepDatas[0].point!), this.meshLine(this.stepDatas[0].point!, point)];
+    };
+
+    protected override executeMainTask(): void {
+        const firstPoint = this.stepDatas[0].point!;
+        const secondPoint = this.stepDatas[1].point!;
+        const distance = firstPoint.distanceTo(secondPoint);
+        const visualId = this.document.visual.context.displayMesh([
+            this.meshPoint(firstPoint),
+            this.meshLine(firstPoint, secondPoint, VisualConfig.highlightEdgeColor, 3),
+            this.meshPoint(secondPoint),
+        ]);
+        this.application.activeView?.htmlText(
+            distance.toFixed(2),
+            firstPoint.add(secondPoint).multiply(0.5),
+            {
+                onDispose: () => {
+                    this.document.visual.context.removeMesh(visualId);
+                },
+            },
+        );
+    }
+}

package/packages/chili/src/commands/measure/select.module.css

@@ -0,0 +1,68 @@
+.selectSum {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    margin: 16px;
+    width: fit-content;
+    min-width: 130px;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    color: var(--foreground-color);
+    border-radius: 12px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+
+    h1 {
+        padding: 12px;
+        font-size: 18px;
+        margin: 0px;
+    }
+
+    ul {
+        position: relative;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding-left: 8px;
+        margin: 0px;
+        align-items: end;
+        overflow-y: auto;
+        max-height: 400px;
+        font-size: 14px;
+        background-color: var(--control-background-color);
+
+        li {
+            padding: 4px 16px;
+
+            &::before {
+                position: absolute;
+                left: 16px;
+                content: "+ ";
+            }
+        }
+    }
+
+    h2 {
+        font-size: 14px;
+        width: 100%;
+        padding: 0;
+        margin: 12px;
+
+        &::before {
+            position: absolute;
+            left: 12px;
+            content: "= ";
+        }
+
+        span {
+            text-align: right;
+            display: block;
+            padding: 0px;
+            margin-right: 12px;
+        }
+    }
+}

package/packages/chili/src/commands/measure/select.ts

@@ -0,0 +1,228 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, h1, h2, span, ul } from "chili-controls";
+import {
+    AsyncController,
+    BoundingBox,
+    CancelableCommand,
+    Combobox,
+    command,
+    type I18nKeys,
+    type IDisposable,
+    type IEdge,
+    type IFace,
+    type ISolid,
+    Localize,
+    type Matrix4,
+    Property,
+    ShapeType,
+    VisualConfig,
+    type VisualShapeData,
+    type XYZ,
+} from "chili-core";
+import { SelectShapeStep } from "../../step";
+import style from "./select.module.css";
+
+@command({
+    key: "measure.select",
+    icon: "icon-measureSelect",
+})
+export class SelectMeasure extends CancelableCommand {
+    #isChangedType = false;
+    #sum = 0;
+    #sumUI?: {
+        container: HTMLDivElement;
+        header: HTMLHeadingElement;
+        list: HTMLUListElement;
+        value: HTMLSpanElement;
+    };
+    readonly #disposeSet: Set<IDisposable> = new Set();
+
+    #category?: Combobox<I18nKeys>;
+    @Property.define("common.type")
+    public get category(): Combobox<I18nKeys> {
+        if (!this.#category) {
+            this.#category = this.initCombobox();
+        }
+        return this.#category;
+    }
+    public set category(value: Combobox<I18nKeys>) {
+        this.#category?.clearPropertyChanged();
+        this.#category = value;
+        this.#category.onPropertyChanged(this.onTypeChange);
+    }
+
+    private initCombobox() {
+        const box = new Combobox<I18nKeys>();
+        box.items.push("common.length", "common.area", "common.volume");
+        box.onPropertyChanged(this.onTypeChange);
+        return box;
+    }
+
+    private readonly onTypeChange = () => {
+        this.#isChangedType = true;
+        this.controller?.cancel();
+        this.#sumUI?.container.remove();
+        this.#sumUI = undefined;
+        this.#disposeSet.forEach((d) => d.dispose());
+        this.#disposeSet.clear();
+        this.#sum = 0;
+    };
+
+    private initSumUI() {
+        if (this.#sumUI) {
+            this.#sumUI.container.remove();
+        }
+        this.#sumUI = {
+            container: div({
+                className: style.selectSum,
+            }),
+            header: h1({ textContent: new Localize(this.#category!.selectedItem!) }),
+            list: ul(),
+            value: span({
+                textContent: "0.00",
+            }),
+        };
+        this.#sumUI.container.append(this.#sumUI.header, this.#sumUI.list, h2(this.#sumUI.value));
+
+        this.application.activeView?.dom?.append(this.#sumUI.container);
+    }
+
+    private addSumItem(item: number) {
+        this.#sum += item;
+        if (!this.#sumUI) {
+            this.initSumUI();
+        }
+
+        const li = document.createElement("li");
+        li.textContent = item.toFixed(2);
+        this.#sumUI!.list.append(li);
+        this.#sumUI!.value.textContent = this.#sum.toFixed(2);
+    }
+
+    protected override afterExecute(): void {
+        super.afterExecute();
+        this.category?.clearPropertyChanged();
+        this.#disposeSet.forEach((d) => d.dispose());
+        this.#disposeSet.clear();
+        this.#sumUI?.container.remove();
+    }
+
+    protected override async executeAsync(): Promise<void> {
+        while (true) {
+            this.controller = new AsyncController();
+            let type: [ShapeType, I18nKeys] = [ShapeType.Edge, "prompt.select.edges"];
+            if (this.category.selectedIndex === 1) {
+                type = [ShapeType.Face, "prompt.select.faces"];
+            } else if (this.category.selectedIndex === 2) {
+                type = [ShapeType.Solid, "prompt.select.solids"];
+            }
+
+            const step = new SelectShapeStep(type[0], type[1]);
+            const result = await step.execute(this.document, this.controller);
+            if (this.controller.result?.status !== "success") {
+                if (this.#isChangedType) {
+                    this.#isChangedType = false;
+                    continue;
+                } else {
+                    return;
+                }
+            }
+            this.createMeasure(result?.shapes[0]);
+        }
+    }
+
+    private readonly createMeasure = (shape: VisualShapeData | undefined) => {
+        if (!shape) return;
+        if (shape.shape.shapeType === ShapeType.Edge) {
+            this.edgeMeasure(shape.shape as IEdge, shape.transform);
+        } else if (shape.shape.shapeType === ShapeType.Face) {
+            this.faceMeasure(shape.shape as IFace, shape.transform);
+        } else if (shape.shape.shapeType === ShapeType.Solid) {
+            this.solidMeasure(
+                shape.shape as ISolid,
+                shape.transform,
+                BoundingBox.center(shape.owner.boundingBox()),
+            );
+        }
+    };
+
+    private edgeMeasure(edge: IEdge, transform: Matrix4) {
+        edge = edge.transformedMul(transform) as IEdge;
+        const start = edge.curve.startPoint();
+        const end = edge.curve.endPoint();
+        const length = edge.length();
+        this.addSumItem(length);
+        const mesh = edge.mesh.edges!;
+        edge.dispose();
+        mesh.lineWidth = 3;
+        mesh.color = VisualConfig.highlightEdgeColor;
+
+        const id = this.document.visual.context.displayMesh([mesh]);
+        this.#disposeSet.add(
+            this.application.activeView!.htmlText(length.toFixed(2), start.add(end).multiply(0.5), {
+                hideDelete: true,
+                onDispose: () => {
+                    this.document.visual.context.removeMesh(id);
+                },
+            }),
+        );
+    }
+
+    private faceMeasure(face: IFace, transform: Matrix4) {
+        const wire = face.outerWire();
+        const mesh = wire.mesh.edges!;
+        wire.dispose();
+        mesh.lineWidth = 3;
+        mesh.color = VisualConfig.highlightEdgeColor;
+        mesh.position = new Float32Array(transform.ofPoints(mesh.position));
+
+        const area = face.area();
+        this.addSumItem(area);
+        const center = this.wireCenter(mesh.position);
+        const id = this.document.visual.context.displayMesh([mesh]);
+        this.#disposeSet.add(
+            this.application.activeView!.htmlText(area.toFixed(2), center, {
+                hideDelete: true,
+                onDispose: () => {
+                    this.document.visual.context.removeMesh(id);
+                },
+            }),
+        );
+    }
+
+    private wireCenter(points: ArrayLike<number>) {
+        const center = { x: 0, y: 0, z: 0 };
+        for (let i = 0; i < points.length; i += 3) {
+            center.x += points[i];
+            center.y += points[i + 1];
+            center.z += points[i + 2];
+        }
+
+        const length = points.length / 3;
+        center.x /= length;
+        center.y /= length;
+        center.z /= length;
+        return center;
+    }
+
+    private solidMeasure(solid: ISolid, transform: Matrix4, center: XYZ) {
+        const mesh = solid.mesh.edges!;
+        mesh.lineWidth = 3;
+        mesh.color = VisualConfig.highlightEdgeColor;
+        mesh.position = new Float32Array(transform.ofPoints(mesh.position));
+
+        const volume = solid.volume();
+        this.addSumItem(volume);
+        const id = this.document.visual.context.displayMesh([mesh]);
+        this.#disposeSet.add(
+            this.application.activeView!.htmlText(volume.toFixed(2), transform.ofPoint(center), {
+                hideDelete: true,
+                onDispose: () => {
+                    this.document.visual.context.removeMesh(id);
+                },
+            }),
+        );
+    }
+}