@edv4h/usketch-plugin-shape-frame 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 EdV4H
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { framePlugin } from "./plugin.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { framePlugin } from "./plugin.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { UsketchPlugin } from "@edv4h/usketch-shared";
+export declare const framePlugin: UsketchPlugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKX,aAAa,EACb,MAAM,uBAAuB,CAAC;AA+D/B,eAAO,MAAM,WAAW,EAAE,aAoJzB,CAAC"}

package/dist/plugin.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { generateId } from "@edv4h/usketch-shared";
+import { containsAABB, createAddShapeCommand, createReparentCommand } from "@edv4h/usketch-store";
+import { createDefaultFrame, getBoundsFrame, hitTestFrame, renderFrame, resizeFrame, } from "./shapes/frame.js";
+/**
+ * LOD component: labeled empty frame — dashed border + top-left title.
+ * Frames are containers, so they mostly need to show where they are.
+ */
+function SimplifiedFrame({ shape }) {
+    const label = shape.name || "Frame";
+    const rotation = typeof shape.rotation === "number" ? shape.rotation : 0;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: shape.x,
+            top: shape.y,
+            width: shape.width,
+            height: shape.height,
+            border: "1px dashed #999",
+            background: "rgba(255,255,255,0.3)",
+            pointerEvents: "none",
+            overflow: "hidden",
+            transform: rotation ? `rotate(${rotation}deg)` : undefined,
+            transformOrigin: "center center",
+        }, children: _jsx("div", { style: {
+                position: "absolute",
+                top: 4,
+                left: 6,
+                fontSize: 11,
+                color: "#666",
+                fontWeight: 500,
+                whiteSpace: "nowrap",
+            }, children: label }) }));
+}
+function FrameIcon() {
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: [_jsx("line", { x1: "7", y1: "2", x2: "7", y2: "18", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "13", y1: "2", x2: "13", y2: "18", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "2", y1: "7", x2: "18", y2: "7", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "2", y1: "13", x2: "18", y2: "13", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+export const framePlugin = {
+    id: "usketch-plugin-shape-frame",
+    name: "フレーム",
+    setup(ctx) {
+        // Register the "frame" shape type
+        ctx.shapes.register("frame", {
+            render: renderFrame,
+            getBounds: getBoundsFrame,
+            hitTest: hitTestFrame,
+            resize: resizeFrame,
+            createDefault: createDefaultFrame,
+            renderTarget: "html",
+            minSize: { width: 50, height: 50 },
+            simplifiedComponent: SimplifiedFrame,
+        });
+        // Drawing tool state
+        let drawState = null;
+        function onPointerDown(toolCtx, event) {
+            const id = generateId();
+            drawState = { startX: event.worldPoint.x, startY: event.worldPoint.y, shapeId: id };
+            const shape = createDefaultFrame({ id, x: event.worldPoint.x, y: event.worldPoint.y });
+            shape.width = 0;
+            shape.height = 0;
+            shape.style = {
+                ...shape.style,
+                stroke: toolCtx.store.getStyleSettings().stroke,
+            };
+            toolCtx.store.addShape(shape);
+        }
+        function onPointerMove(toolCtx, event) {
+            if (!drawState)
+                return;
+            const x = Math.min(drawState.startX, event.worldPoint.x);
+            const y = Math.min(drawState.startY, event.worldPoint.y);
+            const width = Math.abs(event.worldPoint.x - drawState.startX);
+            const height = Math.abs(event.worldPoint.y - drawState.startY);
+            toolCtx.store.updateShape(drawState.shapeId, { x, y, width, height });
+        }
+        function onPointerUp(toolCtx) {
+            if (!drawState)
+                return;
+            const shape = toolCtx.store.getShape(drawState.shapeId);
+            if (shape && shape.width > 10 && shape.height > 10) {
+                toolCtx.store.deleteShape(drawState.shapeId);
+                toolCtx.commands.execute(createAddShapeCommand(toolCtx.store, shape));
+            }
+            else {
+                toolCtx.store.deleteShape(drawState.shapeId);
+            }
+            drawState = null;
+            toolCtx.store.setActiveToolId("select");
+        }
+        ctx.tools.register("frame-draw", {
+            icon: FrameIcon,
+            cursor: "crosshair",
+            shortcut: "f",
+            order: 11,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onDeactivate() {
+                if (drawState) {
+                    ctx.store.deleteShape(drawState.shapeId);
+                    drawState = null;
+                }
+            },
+        });
+        // ── Auto-parenting ──
+        // On move-end: reparent moved shapes (emitted by select tool after move command commits).
+        // Use setTimeout to defer reparent until after React finishes the current render cycle,
+        // since the emit happens inside a queueMicrotask from the select tool.
+        const unsubMoveEnd = ctx.events.on("shapes:move-end", (data) => {
+            if (!data?.shapeIds)
+                return;
+            setTimeout(() => {
+                for (const shapeId of data.shapeIds) {
+                    autoReparent(shapeId);
+                }
+            }, 0);
+        });
+        // On shape:added (e.g. drawing inside a frame)
+        const unsubAdded = ctx.store.onMutation((event) => {
+            if (event.type !== "shape:added")
+                return;
+            const payload = event.payload;
+            if (!payload?.id)
+                return;
+            const shape = ctx.store.getShape(payload.id);
+            if (!shape || shape.type === "frame" || shape.type === "connector")
+                return;
+            autoReparent(payload.id);
+        });
+        function autoReparent(shapeId) {
+            const shape = ctx.store.getShape(shapeId);
+            if (!shape || shape.type === "frame" || shape.type === "connector")
+                return;
+            const shapeBounds = { x: shape.x, y: shape.y, width: shape.width, height: shape.height };
+            // Find the smallest frame that fully contains this shape
+            let bestFrame = null;
+            for (const [id, candidate] of ctx.store.getShapes()) {
+                if (id === shapeId || candidate.type !== "frame")
+                    continue;
+                const frameBounds = {
+                    x: candidate.x,
+                    y: candidate.y,
+                    width: candidate.width,
+                    height: candidate.height,
+                };
+                if (containsAABB(frameBounds, shapeBounds)) {
+                    if (!bestFrame ||
+                        candidate.width * candidate.height < bestFrame.width * bestFrame.height) {
+                        bestFrame = candidate;
+                    }
+                }
+            }
+            const currentParentId = shape.parentId;
+            const newParentId = bestFrame?.id;
+            if (currentParentId !== newParentId) {
+                ctx.commands.execute(createReparentCommand(ctx.store, [shapeId], newParentId ?? undefined));
+            }
+        }
+        // ── Frame move: move all children along with the frame ──
+        const unsubMove = ctx.store.onMutation((event) => {
+            if (event.type !== "shape:updated")
+                return;
+            const payload = event.payload;
+            if (!payload?.id)
+                return;
+            const shape = ctx.store.getShape(payload.id);
+            if (!shape || shape.type !== "frame")
+                return;
+            // This is handled by the select tool which includes children in snapshots
+            // when moving a frame. No additional logic needed here.
+        });
+        this.teardown = () => {
+            unsubMoveEnd();
+            unsubAdded();
+            unsubMove();
+        };
+    },
+};
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":"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"}

package/dist/shapes/frame.d.ts

@@ -0,0 +1,11 @@
+import type { BoundingBox, Point, ShapeData } from "@edv4h/usketch-shared";
+export declare function renderFrame(data: ShapeData): import("react/jsx-runtime").JSX.Element;
+export declare function getBoundsFrame(data: ShapeData): BoundingBox;
+export declare function hitTestFrame(data: ShapeData, point: Point): boolean;
+export declare function resizeFrame(data: ShapeData, handle: string, delta: Point): ShapeData;
+export declare function createDefaultFrame(params: {
+    id: string;
+    x: number;
+    y: number;
+}): ShapeData;
+//# sourceMappingURL=frame.d.ts.map

package/dist/shapes/frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../src/shapes/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAI3E,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,2CA0C1C;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,CAE3D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,OAAO,CAiBnE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,CAuBpF;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAW1F"}

package/dist/shapes/frame.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const TITLE_HEIGHT = 24;
+export function renderFrame(data) {
+    const title = data.frameTitle ?? "Frame";
+    const bgColor = data.style.fill === "transparent" ? "#f8f8f8" : data.style.fill;
+    // Position/size is handled by ShapeWrapper (position: absolute; left/top/width/height).
+    // Render content at (0,0) within the wrapper — no position styling needed.
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    marginTop: -TITLE_HEIGHT,
+                    height: TITLE_HEIGHT,
+                    display: "flex",
+                    alignItems: "center",
+                    paddingLeft: 6,
+                    fontSize: 12,
+                    fontFamily: "system-ui, sans-serif",
+                    color: "#666",
+                    userSelect: "none",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    pointerEvents: "none",
+                }, children: title }), _jsx("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: bgColor,
+                    opacity: data.style.opacity,
+                    border: `${data.style.strokeWidth}px solid ${data.style.stroke}`,
+                    borderRadius: 4,
+                    boxSizing: "border-box",
+                    pointerEvents: "none",
+                } })] }));
+}
+export function getBoundsFrame(data) {
+    return { x: data.x, y: data.y, width: data.width, height: data.height };
+}
+export function hitTestFrame(data, point) {
+    // Frame body
+    if (point.x >= data.x &&
+        point.x <= data.x + data.width &&
+        point.y >= data.y &&
+        point.y <= data.y + data.height) {
+        return true;
+    }
+    // Title label above the frame
+    return (point.x >= data.x &&
+        point.x <= data.x + data.width &&
+        point.y >= data.y - TITLE_HEIGHT &&
+        point.y < data.y);
+}
+export function resizeFrame(data, handle, delta) {
+    const result = { ...data };
+    const minW = 50;
+    const minH = 50;
+    if (handle.includes("e")) {
+        result.width = Math.max(minW, data.width + delta.x);
+    }
+    if (handle.includes("w")) {
+        const newWidth = Math.max(minW, data.width - delta.x);
+        result.x = data.x + data.width - newWidth;
+        result.width = newWidth;
+    }
+    if (handle.includes("s")) {
+        result.height = Math.max(minH, data.height + delta.y);
+    }
+    if (handle.includes("n")) {
+        const newHeight = Math.max(minH, data.height - delta.y);
+        result.y = data.y + data.height - newHeight;
+        result.height = newHeight;
+    }
+    return result;
+}
+export function createDefaultFrame(params) {
+    return {
+        id: params.id,
+        type: "frame",
+        x: params.x,
+        y: params.y,
+        width: 300,
+        height: 200,
+        style: { fill: "#f8f8f8", stroke: "#cccccc", strokeWidth: 1, opacity: 1 },
+        frameTitle: "Frame",
+    };
+}
+//# sourceMappingURL=frame.js.map

package/dist/shapes/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","sourceRoot":"","sources":["../../src/shapes/frame.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@edv4h/usketch-plugin-shape-frame",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@edv4h/usketch-core": "1.0.0",
+    "@edv4h/usketch-shared": "1.0.0",
+    "@edv4h/usketch-store": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.14",
+    "typescript": "5.9.3",
+    "vitest": "3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EdV4H/usketch.git",
+    "directory": "plugins/usketch-plugin-shape-frame"
+  },
+  "homepage": "https://github.com/EdV4H/usketch#readme",
+  "bugs": {
+    "url": "https://github.com/EdV4H/usketch/issues"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "clean": "rm -rf dist"
+  }
+}