@edv4h/usketch-dom-renderer 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/dom-shape-layer.d.ts

@@ -0,0 +1,10 @@
+import type { LayerRenderContext, ShapeRegistry } from "@edv4h/usketch-shared";
+export declare function DomShapeLayer({ ctx, shapeRegistry, claimedIds, dropTargetId, }: {
+    ctx: LayerRenderContext;
+    shapeRegistry: ShapeRegistry;
+    /** Shape IDs already claimed by another renderer (e.g. GPU). These are skipped. */
+    claimedIds?: ReadonlySet<string>;
+    /** Frame/group ID that the dragged shapes are hovering over. */
+    dropTargetId?: string | null;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=dom-shape-layer.d.ts.map

package/dist/dom-shape-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-shape-layer.d.ts","sourceRoot":"","sources":["../src/dom-shape-layer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAa,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAsH1F,wBAAgB,aAAa,CAAC,EAC7B,GAAG,EACH,aAAa,EACb,UAAU,EACV,YAAY,GACZ,EAAE;IACF,GAAG,EAAE,kBAAkB,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,mFAAmF;IACnF,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,kDAiHA"}

package/dist/dom-shape-layer.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { safeRotation } from "@edv4h/usketch-shared";
+import { LodFallback } from "./lod-fallback.js";
+/**
+ * Reorder shapes so that each child appears immediately after its parent container,
+ * while preserving the relative order within each sibling group. The input must
+ * already be sorted by z-order (e.g. zIndex ascending).
+ *
+ * Rationale: DOM z-ordering is controlled by source order + zIndex; containers
+ * (frame/island/group) must render before their children so the child elements
+ * appear on top. Using a stable group-by-parent pass keeps the zIndex-based
+ * order within siblings intact.
+ */
+function stableParentSort(sorted, _containerTypes) {
+    // Group children by parentId (preserving order from `sorted`)
+    const childrenByParent = new Map();
+    const topLevel = [];
+    for (const shape of sorted) {
+        const parentId = typeof shape.parentId === "string" && shape.parentId.length > 0 ? shape.parentId : null;
+        if (parentId === null) {
+            topLevel.push(shape);
+        }
+        else {
+            let bucket = childrenByParent.get(parentId);
+            if (!bucket) {
+                bucket = [];
+                childrenByParent.set(parentId, bucket);
+            }
+            bucket.push(shape);
+        }
+    }
+    // Recursive emit: parent first, then its children (each child may also be a parent)
+    const result = [];
+    function emit(shape) {
+        result.push(shape);
+        const children = childrenByParent.get(shape.id);
+        if (children) {
+            for (const child of children)
+                emit(child);
+        }
+    }
+    for (const shape of topLevel)
+        emit(shape);
+    // Append orphaned children (whose parent is missing) in their original order
+    const emittedIds = new Set(result.map((s) => s.id));
+    for (const shape of sorted) {
+        if (!emittedIds.has(shape.id))
+            result.push(shape);
+    }
+    return result;
+}
+// When dragging shapes onto a frame (drop target detected), boost their
+// zIndex so they render above the frame's opaque background.
+// Only applied when a drop target is active, not during normal selection.
+const DROP_TARGET_Z_BOOST = 100_000;
+const CONTAINER_SHAPE_TYPES = new Set(["frame", "island", "group"]);
+function ShapeWrapper({ shape, index, selected, overDropTarget, def, }) {
+    const bounds = { x: shape.x, y: shape.y, width: shape.width, height: shape.height };
+    const rotation = safeRotation(shape.rotation);
+    const isHtml = def.renderTarget === "html";
+    // For SVG shapes with zero width or height, use a minimum viewBox size
+    // to avoid NaN from SVG coordinate scaling (e.g. horizontal/vertical lines,
+    // groups with no children, connectors between aligned shapes).
+    const svgW = Math.max(bounds.width, 1);
+    const svgH = Math.max(bounds.height, 1);
+    // Containers (island/frame/group) use pointerEvents: none to let children receive clicks
+    const isContainer = CONTAINER_SHAPE_TYPES.has(shape.type);
+    const boosted = selected && !isContainer && overDropTarget;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: bounds.x,
+            top: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            zIndex: boosted ? index + DROP_TARGET_Z_BOOST : index,
+            pointerEvents: isContainer ? "none" : "auto",
+            transform: rotation ? `rotate(${rotation}deg)` : undefined,
+            transformOrigin: "center center",
+        }, children: isHtml ? (def.render(shape)) : (_jsx("svg", { width: svgW, height: svgH, viewBox: `${bounds.x} ${bounds.y} ${svgW} ${svgH}`, style: { display: "block", overflow: "visible" }, children: def.render(shape) })) }));
+}
+export function DomShapeLayer({ ctx, shapeRegistry, claimedIds, dropTargetId, }) {
+    // `gpu-only` mode: hide the DOM layer entirely (reserved for future use).
+    if (ctx.renderMode === "gpu-only")
+        return null;
+    // In `interactive` mode the GPU layer does not render, so any lingering
+    // claimedIds from a previous `lod` pass must be ignored — otherwise a
+    // stale closure in the plugin layer can keep hiding shapes until the next
+    // store mutation. DOM owns the full shape set in interactive mode.
+    const isLod = ctx.renderMode === "lod";
+    const effectiveClaimedIds = isLod ? claimedIds : undefined;
+    // Use pre-sorted shapes (by zIndex ascending) from the layer render context,
+    // then reorder so that each child appears immediately after its parent container.
+    // This preserves user-controlled z-order within each sibling group while keeping
+    // the container-before-child invariant required by the DOM stacking context.
+    const CONTAINER_TYPES = new Set(["frame", "island", "group"]);
+    const shapes = stableParentSort(ctx.shapesSorted, CONTAINER_TYPES);
+    return (_jsx("div", { "data-layer": "shapes", children: shapes.map((shape, index) => {
+            // Skip invalid shapes (e.g. leaked Yjs internal objects)
+            if (!shape || typeof shape.id !== "string" || typeof shape.type !== "string") {
+                return null;
+            }
+            // Skip shapes claimed by another renderer (lod mode only)
+            if (effectiveClaimedIds?.has(shape.id)) {
+                return null;
+            }
+            const def = shapeRegistry.get(shape.type);
+            // LOD mode: render the shape's simplifiedComponent (or LodFallback)
+            // instead of its full component. The simplifiedComponent is
+            // responsible for its own positioning (it receives the full
+            // ShapeData and uses shape.x/y directly), so no wrapper div is
+            // needed — a wrapper without position:absolute would break
+            // zIndex stacking anyway.
+            //
+            // Additionally, skip shapes that the GPU renderer is capable of
+            // drawing (even if it has not yet claimed them on this frame).
+            // Without this, GPU-eligible shapes would briefly get a DOM
+            // LodFallback rendered on top until the next GPU claim arrives,
+            // producing a visible "double render" flash.
+            if (isLod) {
+                if (def?.gpuPrimitive)
+                    return null;
+                const Simplified = def?.simplifiedComponent ?? LodFallback;
+                return _jsx(Simplified, { shape: shape }, shape.id);
+            }
+            if (!def) {
+                const sx = shape.x || 0;
+                const sy = shape.y || 0;
+                const sw = shape.width || 0;
+                const sh = shape.height || 0;
+                const fbW = Math.max(sw, 1);
+                const fbH = Math.max(sh, 1);
+                const fbRotation = safeRotation(shape.rotation);
+                return (_jsx("div", { style: {
+                        position: "absolute",
+                        left: sx,
+                        top: sy,
+                        width: sw,
+                        height: sh,
+                        zIndex: index,
+                        pointerEvents: "auto",
+                        transform: fbRotation ? `rotate(${fbRotation}deg)` : undefined,
+                        transformOrigin: "center center",
+                    }, children: _jsxs("svg", { width: fbW, height: fbH, viewBox: `${sx} ${sy} ${fbW} ${fbH}`, style: { display: "block", overflow: "visible" }, children: [_jsx("rect", { x: sx, y: sy, width: sw, height: sh, fill: "rgba(200,200,200,0.3)", stroke: "#999", strokeWidth: 1, strokeDasharray: "4 2" }), _jsx("text", { x: sx + sw / 2, y: sy + sh / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: 11, fill: "#999", children: shape.type })] }) }, shape.id));
+            }
+            return (_jsx(ShapeWrapper, { shape: shape, index: index, selected: ctx.selection.has(shape.id), overDropTarget: !!dropTargetId, def: def }, shape.id));
+        }) }));
+}
+//# sourceMappingURL=dom-shape-layer.js.map

package/dist/dom-shape-layer.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DomShapeLayer } from "./dom-shape-layer.js";
+export { createDomRendererPlugin } 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,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { DomShapeLayer } from "./dom-shape-layer.js";
+export { createDomRendererPlugin } 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,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}

package/dist/lod-fallback.d.ts

@@ -0,0 +1,11 @@
+import type { ShapeData } from "@edv4h/usketch-shared";
+/**
+ * Default lightweight component used when a shape has no `simplifiedComponent`
+ * defined. Renders a solid-fill rectangle matching the shape's bounds and fill
+ * color. Pointer events are disabled because LOD mode is for read-only zoomed
+ * out viewing.
+ */
+export declare function LodFallback({ shape }: {
+    shape: ShapeData;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lod-fallback.d.ts.map

package/dist/lod-fallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lod-fallback.d.ts","sourceRoot":"","sources":["../src/lod-fallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,2CAkB1D"}

package/dist/lod-fallback.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { safeRotation } from "@edv4h/usketch-shared";
+/**
+ * Default lightweight component used when a shape has no `simplifiedComponent`
+ * defined. Renders a solid-fill rectangle matching the shape's bounds and fill
+ * color. Pointer events are disabled because LOD mode is for read-only zoomed
+ * out viewing.
+ */
+export function LodFallback({ shape }) {
+    const style = (shape.style ?? {});
+    const rotation = safeRotation(shape.rotation);
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: shape.x,
+            top: shape.y,
+            width: shape.width,
+            height: shape.height,
+            backgroundColor: style.fill || "#cccccc",
+            pointerEvents: "none",
+            transform: rotation ? `rotate(${rotation}deg)` : undefined,
+            transformOrigin: "center center",
+        } }));
+}
+//# sourceMappingURL=lod-fallback.js.map

package/dist/lod-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lod-fallback.js","sourceRoot":"","sources":["../src/lod-fallback.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAwB;IAC1D,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAsB,CAAC;IACvD,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,CACN,cACC,KAAK,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK,CAAC,CAAC;YACb,GAAG,EAAE,KAAK,CAAC,CAAC;YACZ,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,eAAe,EAAE,KAAK,CAAC,IAAI,IAAI,SAAS;YACxC,aAAa,EAAE,MAAM;YACrB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,QAAQ,MAAM,CAAC,CAAC,CAAC,SAAS;YAC1D,eAAe,EAAE,eAAe;SAChC,GACA,CACF,CAAC;AACH,CAAC"}

package/dist/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { UsketchPlugin } from "@edv4h/usketch-shared";
+export declare function createDomRendererPlugin(): 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,EAAiB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG1E,wBAAgB,uBAAuB,IAAI,aAAa,CAyEvD"}

package/dist/plugin.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DomShapeLayer } from "./dom-shape-layer.js";
+export function createDomRendererPlugin() {
+    let cleanup;
+    return {
+        id: "usketch-dom-renderer",
+        name: "DOM Renderer",
+        setup(ctx) {
+            // Track shape IDs claimed by other renderers (e.g. GPU)
+            let claimedIds = new Set();
+            // Track drop target frame (set by select tool during drag)
+            let dropTargetId = null;
+            const unsubClaim = ctx.events.on("renderer:claim-shapes", (data) => {
+                // Only nudge the canvas to re-render if the claim set
+                // actually changed — otherwise we'd loop with GpuShapeLayer's
+                // post-commit emit.
+                const next = data.ids;
+                let changed = next.size !== claimedIds.size;
+                if (!changed) {
+                    for (const id of next) {
+                        if (!claimedIds.has(id)) {
+                            changed = true;
+                            break;
+                        }
+                    }
+                }
+                claimedIds = next;
+                if (changed) {
+                    // Re-trigger the canvas layer render so DomShapeLayer
+                    // picks up the new claimedIds value. Closure state
+                    // alone would not cause React to re-render.
+                    ctx.events.emit("layers:changed", {});
+                }
+            });
+            const unsubDropTarget = ctx.events.on("drop-target:changed", (data) => {
+                if (dropTargetId !== data.id) {
+                    dropTargetId = data.id;
+                    ctx.events.emit("layers:changed", {});
+                }
+            });
+            ctx.layers.register({
+                id: "dom-shapes",
+                order: 50,
+                render: (renderCtx) => (_jsx(DomShapeLayer, { ctx: renderCtx, shapeRegistry: ctx.shapes, claimedIds: claimedIds.size > 0 ? claimedIds : undefined, dropTargetId: dropTargetId })),
+            });
+            cleanup = () => {
+                unsubClaim();
+                unsubDropTarget();
+                ctx.layers.unregister("dom-shapes");
+            };
+        },
+        teardown() {
+            cleanup?.();
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/dist/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,UAAU,uBAAuB;IACtC,IAAI,OAAiC,CAAC;IAEtC,OAAO;QACN,EAAE,EAAE,sBAAsB;QAC1B,IAAI,EAAE,cAAc;QAEpB,KAAK,CAAC,GAAkB;YACvB,wDAAwD;YACxD,IAAI,UAAU,GAAwB,IAAI,GAAG,EAAE,CAAC;YAChD,2DAA2D;YAC3D,IAAI,YAAY,GAAkB,IAAI,CAAC;YAEvC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,EAAE,CAC/B,uBAAuB,EACvB,CAAC,IAAI,EAAE,EAAE;gBACR,sDAAsD;gBACtD,8DAA8D;gBAC9D,oBAAoB;gBACpB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;gBACtB,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC;gBAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;oBACd,KAAK,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC;wBACvB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;4BACzB,OAAO,GAAG,IAAI,CAAC;4BACf,MAAM;wBACP,CAAC;oBACF,CAAC;gBACF,CAAC;gBACD,UAAU,GAAG,IAAI,CAAC;gBAClB,IAAI,OAAO,EAAE,CAAC;oBACb,sDAAsD;oBACtD,mDAAmD;oBACnD,4CAA4C;oBAC5C,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;gBACvC,CAAC;YACF,CAAC,CACD,CAAC;YAEF,MAAM,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC,EAAE,CACpC,qBAAqB,EACrB,CAAC,IAAI,EAAE,EAAE;gBACR,IAAI,YAAY,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;oBAC9B,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC;oBACvB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;gBACvC,CAAC;YACF,CAAC,CACD,CAAC;YAEF,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACnB,EAAE,EAAE,YAAY;gBAChB,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CACtB,KAAC,aAAa,IACb,GAAG,EAAE,SAAS,EACd,aAAa,EAAE,GAAG,CAAC,MAAM,EACzB,UAAU,EAAE,UAAU,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACxD,YAAY,EAAE,YAAY,GACzB,CACF;aACD,CAAC,CAAC;YAEH,OAAO,GAAG,GAAG,EAAE;gBACd,UAAU,EAAE,CAAC;gBACb,eAAe,EAAE,CAAC;gBAClB,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;YACrC,CAAC,CAAC;QACH,CAAC;QAED,QAAQ;YACP,OAAO,EAAE,EAAE,CAAC;QACb,CAAC;KACD,CAAC;AACH,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@edv4h/usketch-dom-renderer",
+  "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-shared": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "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": "packages/dom-renderer"
+  },
+  "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"
+  }
+}