@canvus/core 0.1.1 → 0.1.2

package/dist/handlers/selection.handler.js

@@ -0,0 +1,259 @@
+// ─────────────────────────────────────────────────────────────
+// canvus/src/handlers/selection.handler.ts
+// Handles marquee selection (rubber band), single click, multi-select, and double-click scope drill-down.
+// ─────────────────────────────────────────────────────────────
+import { rectsIntersect, isPointInElement } from "../matrix.js";
+/**
+ * Fallback interaction handler managing marquee selection, click selections, and container drill-down scoping.
+ */
+export class SelectionHandler {
+    id = "selection";
+    ctx;
+    _isMarqueeSelecting = false;
+    _marqueeStartCanvas = null;
+    _marqueeCurrentCanvas = null;
+    _preMarqueeSelectedIds = new Set();
+    _marqueeEnteredContainerId = null;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    get isMarqueeSelecting() {
+        return this._isMarqueeSelecting;
+    }
+    getMarqueeRect() {
+        if (!this._isMarqueeSelecting || !this._marqueeStartCanvas || !this._marqueeCurrentCanvas) {
+            return null;
+        }
+        return {
+            x: Math.min(this._marqueeStartCanvas.x, this._marqueeCurrentCanvas.x),
+            y: Math.min(this._marqueeStartCanvas.y, this._marqueeCurrentCanvas.y),
+            width: Math.abs(this._marqueeStartCanvas.x - this._marqueeCurrentCanvas.x),
+            height: Math.abs(this._marqueeStartCanvas.y - this._marqueeCurrentCanvas.y),
+        };
+    }
+    // ── InteractionHandler Interface ────────────────
+    claim(e, canvasPos, hitNodeId, _containerRect) {
+        if (e.button !== 0 || this.ctx.previewMode)
+            return false;
+        const targetEl = e.composedPath()[0];
+        const now = Date.now();
+        const isSameTarget = targetEl !== null && this.ctx.lastPointerDownTarget !== null &&
+            (targetEl === this.ctx.lastPointerDownTarget || this.ctx.lastPointerDownTarget.contains(targetEl) || targetEl.contains(this.ctx.lastPointerDownTarget));
+        const isDoubleClick = (now - this.ctx.lastPointerDownTime < 350) && (hitNodeId !== null &&
+            this.ctx.lastPointerDownId !== null &&
+            (hitNodeId === this.ctx.lastPointerDownId || isSameTarget || this.ctx.tree.isAncestor(this.ctx.lastPointerDownId, hitNodeId)));
+        this.ctx.lastPointerDownTime = now;
+        this.ctx.lastPointerDownId = hitNodeId;
+        this.ctx.lastPointerDownTarget = targetEl;
+        // ── Node hit-test (select) ────────────────────
+        let targetSelectId = null;
+        let clickInsideSelection = false;
+        const hasModifier = e.shiftKey || e.metaKey || e.ctrlKey;
+        if (this.ctx.selectedIds.size > 0 && !hasModifier && !isDoubleClick) {
+            for (const selId of this.ctx.selectedIds) {
+                const selNode = this.ctx.tree.get(selId);
+                if (selNode?.currentRect && isPointInElement(canvasPos.x, canvasPos.y, selNode.currentRect)) {
+                    clickInsideSelection = true;
+                    targetSelectId = selId;
+                    break;
+                }
+            }
+        }
+        if (!clickInsideSelection) {
+            if (hitNodeId) {
+                // ── Layer lock guard ──────────────────────
+                if (this.ctx.isNodeLocked(hitNodeId)) {
+                    this.ctx.callbacks.onLockedNodeInteraction?.(hitNodeId);
+                    // Treat as click on empty space — fall through to deselect / marquee
+                }
+                else {
+                    const isCmdClick = e.metaKey || e.ctrlKey;
+                    if (isCmdClick) {
+                        // Cmd+Click: deep select the hit element directly
+                        targetSelectId = hitNodeId;
+                        this.ctx.enteredContainerId = this.ctx.tree.get(hitNodeId)?.parentId ?? null;
+                    }
+                    else if (isDoubleClick) {
+                        // Double click: Figma-like drill down
+                        const path = this.ctx.tree.getPath(hitNodeId);
+                        let foundSelectedIdx = -1;
+                        for (let i = 0; i < path.length; i++) {
+                            if (this.ctx.selectedIds.has(path[i].id)) {
+                                foundSelectedIdx = i;
+                                break;
+                            }
+                        }
+                        if (foundSelectedIdx !== -1 && foundSelectedIdx < path.length - 1) {
+                            // Drill down one level
+                            const nextParent = path[foundSelectedIdx];
+                            const nextSelect = path[foundSelectedIdx + 1];
+                            this.ctx.enteredContainerId = nextParent.id;
+                            targetSelectId = nextSelect.id;
+                        }
+                        else if (foundSelectedIdx === path.length - 1) {
+                            // Leaf is already selected: keep selection on leaf to trigger text editing
+                            targetSelectId = path[path.length - 1].id;
+                            this.ctx.enteredContainerId = path[path.length - 2]?.id ?? null;
+                        }
+                        else {
+                            // Nothing in the path is selected
+                            if (path.length > 0) {
+                                targetSelectId = path[0].id;
+                                this.ctx.enteredContainerId = null;
+                            }
+                            else {
+                                targetSelectId = hitNodeId;
+                            }
+                        }
+                    }
+                    else {
+                        // Single Click: resolve based on current entered scope
+                        const resolvedId = this.ctx.findSelectableNode(hitNodeId, this.ctx.enteredContainerId);
+                        if (resolvedId) {
+                            targetSelectId = resolvedId;
+                            const node = this.ctx.tree.get(resolvedId);
+                            this.ctx.enteredContainerId = node?.parentId ?? null;
+                        }
+                        else {
+                            // Clicked outside currently entered container: exit scope, select root ancestor
+                            this.ctx.enteredContainerId = null;
+                            targetSelectId = this.ctx.findSelectableNode(hitNodeId, null);
+                        }
+                    }
+                } // end of lock guard else-block
+            }
+            if (isDoubleClick && targetSelectId && this.ctx.selectedIds.has(targetSelectId)) {
+                this.ctx.editAllowedOnDblClick = true;
+            }
+            else {
+                this.ctx.editAllowedOnDblClick = false;
+            }
+        }
+        if (targetSelectId) {
+            if (!clickInsideSelection) {
+                const prevSelection = new Set(this.ctx.selectedIds);
+                const isShift = e.shiftKey;
+                if (isShift) {
+                    if (this.ctx.selectedIds.has(targetSelectId)) {
+                        this.ctx.selectedIds.delete(targetSelectId);
+                    }
+                    else {
+                        this.ctx.selectedIds.add(targetSelectId);
+                    }
+                }
+                else {
+                    this.ctx.selectedIds.clear();
+                    this.ctx.selectedIds.add(targetSelectId);
+                }
+                this.ctx.syncLazyChildren(prevSelection, this.ctx.selectedIds);
+                this.ctx.callbacks.onSelectionChange?.(this.ctx.selectedIds);
+                this.ctx.updateBreadcrumb();
+            }
+        }
+        else {
+            // Click on empty space — start marquee selection
+            const isShift = e.shiftKey;
+            if (!isShift) {
+                const prevSelection = new Set(this.ctx.selectedIds);
+                this.ctx.selectedIds.clear();
+                this.ctx.enteredContainerId = null;
+                this.ctx.guides = [];
+                this.ctx.syncLazyChildren(prevSelection, this.ctx.selectedIds);
+                this.ctx.callbacks.onSelectionChange?.(this.ctx.selectedIds);
+                this.ctx.updateBreadcrumb();
+            }
+            this._marqueeEnteredContainerId = this.ctx.enteredContainerId;
+            this._preMarqueeSelectedIds.clear();
+            for (const id of this.ctx.selectedIds) {
+                this._preMarqueeSelectedIds.add(id);
+            }
+            this._isMarqueeSelecting = true;
+            this._marqueeStartCanvas = canvasPos;
+            this._marqueeCurrentCanvas = canvasPos;
+            this.ctx.safeSetPointerCapture(e.pointerId);
+            this.ctx.emitInteraction("select-marquee");
+        }
+        this.ctx.render();
+        return true; // Fallback handler always claims the event
+    }
+    onPointerMove(e, canvasPos, _containerRect) {
+        if (this._isMarqueeSelecting && this._marqueeStartCanvas) {
+            this._marqueeCurrentCanvas = canvasPos;
+            const mRect = this.getMarqueeRect();
+            if (!mRect)
+                return;
+            // Find all selectable nodes inside or intersecting the marquee rect
+            const selectableNodes = this.ctx.getOrderedNodeList();
+            const currentMarqueeSelection = new Set();
+            const scopeId = this._marqueeEnteredContainerId;
+            for (const node of selectableNodes) {
+                if (!node.currentRect)
+                    continue;
+                const treeNode = this.ctx.tree.get(node.id);
+                if (!treeNode)
+                    continue;
+                // Skip locked nodes in marquee selection
+                if (this.ctx.isNodeLocked(node.id))
+                    continue;
+                // Scoping constraint
+                if (scopeId !== null) {
+                    if (treeNode.parentId !== scopeId)
+                        continue;
+                }
+                else {
+                    if (treeNode.parentId !== null)
+                        continue;
+                }
+                if (rectsIntersect(node.currentRect, mRect)) {
+                    currentMarqueeSelection.add(node.id);
+                }
+            }
+            // Compute new selection based on Shift modifier.
+            const isShift = e.shiftKey;
+            const prevSelection = new Set(this.ctx.selectedIds);
+            const selectedIds = this.ctx.selectedIds;
+            selectedIds.clear();
+            if (isShift) {
+                for (const id of this._preMarqueeSelectedIds) {
+                    selectedIds.add(id);
+                }
+            }
+            for (const id of currentMarqueeSelection) {
+                selectedIds.add(id);
+            }
+            this.ctx.syncLazyChildren(prevSelection, this.ctx.selectedIds);
+            this.ctx.callbacks.onSelectionChange?.(this.ctx.selectedIds);
+            this.ctx.updateBreadcrumb();
+            this.ctx.render();
+        }
+    }
+    onPointerUp(e, _canvasPos, _containerRect) {
+        if (this._isMarqueeSelecting) {
+            this._isMarqueeSelecting = false;
+            this._marqueeStartCanvas = null;
+            this._marqueeCurrentCanvas = null;
+            this._preMarqueeSelectedIds.clear();
+            // Restore entered container scope
+            this.ctx.enteredContainerId = this._marqueeEnteredContainerId;
+            this.ctx.updateBreadcrumb();
+        }
+        this.ctx.guides = [];
+        // Release pointer capture.
+        try {
+            this.ctx.container.releasePointerCapture(e.pointerId);
+        }
+        catch {
+            // Ignore if capture was already released or lost
+        }
+        this.ctx.emitInteraction(null);
+        this.ctx.render();
+    }
+    onCancel() {
+        this._isMarqueeSelecting = false;
+        this._marqueeStartCanvas = null;
+        this._marqueeCurrentCanvas = null;
+        this._preMarqueeSelectedIds.clear();
+        this._marqueeEnteredContainerId = null;
+    }
+}
+//# sourceMappingURL=selection.handler.js.map

package/dist/handlers/selection.handler.js.map

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

package/dist/handlers/spacing.handler.d.ts

@@ -0,0 +1,29 @@
+import type { Rect, Vec2 } from "../types.js";
+import type { SpacingAdjusterType } from "../renderer.js";
+import type { InteractionHandler, WorkspaceContext } from "./types.js";
+/**
+ * Manages margin, padding, and corner radius adjustment gestures.
+ */
+export declare class SpacingHandler implements InteractionHandler {
+    readonly id = "spacing";
+    private ctx;
+    hoveredAdjusterType: SpacingAdjusterType | null;
+    hoveredRadiusCorner: string | null;
+    private _activeAdjusterType;
+    private _adjusterStartValue;
+    private _adjusterStartValueStr;
+    private _isAdjustingRadius;
+    private _activeRadiusCorner;
+    private _radiusTargetNodeId;
+    private _radiusStartValues;
+    private _dragStartCanvas;
+    constructor(ctx: WorkspaceContext);
+    get activeAdjusterType(): SpacingAdjusterType | null;
+    get isAdjustingRadius(): boolean;
+    get activeRadiusCorner(): string | null;
+    claim(e: PointerEvent, canvasPos: Vec2, hitNodeId: string | null, containerRect: Rect): boolean;
+    onPointerMove(e: PointerEvent, canvasPos: Vec2, containerRect: Rect): void;
+    onPointerUp(_e: PointerEvent, _canvasPos: Vec2, _containerRect: Rect): void;
+    onCancel(): void;
+}
+//# sourceMappingURL=spacing.handler.d.ts.map

package/dist/handlers/spacing.handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.handler.d.ts","sourceRoot":"","sources":["../../src/handlers/spacing.handler.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEvE;;GAEG;AACH,qBAAa,cAAe,YAAW,kBAAkB;IACvD,QAAQ,CAAC,EAAE,aAAa;IAExB,OAAO,CAAC,GAAG,CAAmB;IAI9B,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IACvD,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAI1C,OAAO,CAAC,mBAAmB,CAAoC;IAC/D,OAAO,CAAC,mBAAmB,CAAK;IAChC,OAAO,CAAC,sBAAsB,CAAuB;IAErD,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,mBAAmB,CAAuB;IAClD,OAAO,CAAC,mBAAmB,CAAuB;IAClD,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,OAAO,CAAC,gBAAgB,CAAqB;gBAEjC,GAAG,EAAE,gBAAgB;IAMjC,IAAI,kBAAkB,IAAI,mBAAmB,GAAG,IAAI,CAEnD;IAED,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAED,IAAI,kBAAkB,IAAI,MAAM,GAAG,IAAI,CAEtC;IAID,KAAK,CACH,CAAC,EAAE,YAAY,EACf,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,aAAa,EAAE,IAAI,GAClB,OAAO;IA+GV,aAAa,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,GAAG,IAAI;IAqH1E,WAAW,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,GAAG,IAAI;IAoF3E,QAAQ,IAAI,IAAI;CAWjB"}

package/dist/handlers/spacing.handler.js

@@ -0,0 +1,326 @@
+// ─────────────────────────────────────────────────────────────
+// canvus/src/handlers/spacing.handler.ts
+// Handles hit-testing and dragging for spacing adjusters and corner radius handles.
+// ─────────────────────────────────────────────────────────────
+import { isContainerNode } from "../renderer.js";
+/**
+ * Manages margin, padding, and corner radius adjustment gestures.
+ */
+export class SpacingHandler {
+    id = "spacing";
+    ctx;
+    // ── Hover State ──────────────────────────────────
+    hoveredAdjusterType = null;
+    hoveredRadiusCorner = null;
+    // ── Active Drag State ────────────────────────────
+    _activeAdjusterType = null;
+    _adjusterStartValue = 0;
+    _adjusterStartValueStr = null;
+    _isAdjustingRadius = false;
+    _activeRadiusCorner = null;
+    _radiusTargetNodeId = null;
+    _radiusStartValues = new Map();
+    _dragStartCanvas = null;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    // ── Getters for Workspace Integration ────────────
+    get activeAdjusterType() {
+        return this._activeAdjusterType;
+    }
+    get isAdjustingRadius() {
+        return this._isAdjustingRadius;
+    }
+    get activeRadiusCorner() {
+        return this._activeRadiusCorner;
+    }
+    // ── InteractionHandler Interface ────────────────
+    claim(e, canvasPos, hitNodeId, containerRect) {
+        if (e.button !== 0 || this.ctx.previewMode)
+            return false;
+        // Calculate isDoubleClick early to prevent handles/adjusters from intercepting double-clicks on small/nested nodes
+        const now = Date.now();
+        const targetEl = e.composedPath()[0];
+        const isSameTarget = targetEl !== null && this.ctx.lastPointerDownTarget !== null &&
+            (targetEl === this.ctx.lastPointerDownTarget || this.ctx.lastPointerDownTarget.contains(targetEl) || targetEl.contains(this.ctx.lastPointerDownTarget));
+        const isDoubleClick = (now - this.ctx.lastPointerDownTime < 350) && (hitNodeId !== null &&
+            this.ctx.lastPointerDownId !== null &&
+            (hitNodeId === this.ctx.lastPointerDownId || isSameTarget || this.ctx.tree.isAncestor(this.ctx.lastPointerDownId, hitNodeId)));
+        if (isDoubleClick)
+            return false;
+        // ── Corner Radius handles hit-test ────────────
+        if (this.ctx.selectedIds.size > 0) {
+            const localX = e.clientX - containerRect.x;
+            const localY = e.clientY - containerRect.y;
+            let hitRadiusCorner = null;
+            let targetNodeId = null;
+            for (const selId of this.ctx.selectedIds) {
+                const selNode = this.ctx.tree.get(selId);
+                if (selNode && isContainerNode(selNode) && selNode.currentRect) {
+                    const hit = this.ctx.hitTestRadiusHandle(localX, localY, selNode.currentRect, this.ctx.viewport);
+                    if (hit) {
+                        hitRadiusCorner = hit;
+                        targetNodeId = selId;
+                        break;
+                    }
+                }
+            }
+            if (hitRadiusCorner && targetNodeId) {
+                // Property lock check for corner-radius (multi-node)
+                let radiusBlocked = false;
+                for (const selId of this.ctx.selectedIds) {
+                    const selNode = this.ctx.tree.get(selId);
+                    if (selNode && isContainerNode(selNode)) {
+                        if (this.ctx.isNodeLocked(selId) || this.ctx.isPropertyLocked(selId, "border-radius")) {
+                            this.ctx.notifyPropertyLockInteraction(selId, "border-radius");
+                            radiusBlocked = true;
+                        }
+                    }
+                }
+                if (radiusBlocked) {
+                    return true; // Claim and block
+                }
+                this._isAdjustingRadius = true;
+                this._activeRadiusCorner = hitRadiusCorner;
+                this._radiusTargetNodeId = targetNodeId;
+                this._radiusStartValues.clear();
+                for (const selId of this.ctx.selectedIds) {
+                    const selNode = this.ctx.tree.get(selId);
+                    if (selNode && isContainerNode(selNode)) {
+                        const contentRoot = this.ctx.mount.getContentRoot(selId);
+                        let initialRadiusStr = "0px";
+                        if (contentRoot) {
+                            initialRadiusStr = contentRoot.style.borderRadius || window.getComputedStyle(contentRoot).borderRadius || "0px";
+                        }
+                        this._radiusStartValues.set(selId, initialRadiusStr);
+                    }
+                }
+                this._dragStartCanvas = canvasPos;
+                this.ctx.safeSetPointerCapture(e.pointerId);
+                this.ctx.emitInteraction("resize-radius", { handler: this.id });
+                this.ctx.render();
+                return true;
+            }
+        }
+        // ── Spacing Adjusters hit-test ────────────────
+        if (this.ctx.selectedIds.size === 1) {
+            const selId = this.ctx.selectedIds.values().next().value;
+            const adjusters = this.ctx.computeSpacingAdjusters(selId);
+            const hitAdjuster = adjusters.find(adj => canvasPos.x >= adj.rect.x &&
+                canvasPos.x <= adj.rect.x + adj.rect.width &&
+                canvasPos.y >= adj.rect.y &&
+                canvasPos.y <= adj.rect.y + adj.rect.height);
+            if (hitAdjuster) {
+                // Property lock check for spacing adjuster
+                if (this.ctx.isNodeLocked(selId) || this.ctx.isPropertyLocked(selId, hitAdjuster.type)) {
+                    this.ctx.notifyPropertyLockInteraction(selId, hitAdjuster.type);
+                    return true; // Claim and block
+                }
+                this._activeAdjusterType = hitAdjuster.type;
+                this._adjusterStartValue = hitAdjuster.value;
+                const contentRoot = this.ctx.mount.getContentRoot(selId);
+                this._adjusterStartValueStr = contentRoot ? (contentRoot.style.getPropertyValue(hitAdjuster.type) || null) : null;
+                this._dragStartCanvas = canvasPos;
+                this.ctx.safeSetPointerCapture(e.pointerId);
+                this.ctx.emitInteraction("adjust-spacing", { handler: this.id });
+                this.ctx.render();
+                return true;
+            }
+        }
+        return false;
+    }
+    onPointerMove(e, canvasPos, containerRect) {
+        // ── Corner Radius Adjusting ───────────────────
+        if (this._isAdjustingRadius && this._dragStartCanvas && this._radiusTargetNodeId) {
+            const targetNode = this.ctx.tree.get(this._radiusTargetNodeId);
+            if (targetNode && targetNode.currentRect) {
+                this.ctx.safeSetPointerCapture(e.pointerId);
+                this.ctx.container.style.cursor = "pointer";
+                this.ctx.canvas.style.pointerEvents = "auto";
+                this.ctx.emitInteraction("resize-radius", { handler: this.id });
+                const bounds = targetNode.currentRect;
+                const s = this.ctx.viewport.scale;
+                const ox = this.ctx.viewport.offsetX;
+                const oy = this.ctx.viewport.offsetY;
+                const left = bounds.x * s + ox;
+                const top = bounds.y * s + oy;
+                const right = (bounds.x + bounds.width) * s + ox;
+                const bottom = (bounds.y + bounds.height) * s + oy;
+                let dragX = 0;
+                let dragY = 0;
+                if (this._activeRadiusCorner === "tl") {
+                    dragX = e.clientX - containerRect.x - left;
+                    dragY = e.clientY - containerRect.y - top;
+                }
+                else if (this._activeRadiusCorner === "tr") {
+                    dragX = right - (e.clientX - containerRect.x);
+                    dragY = e.clientY - containerRect.y - top;
+                }
+                else if (this._activeRadiusCorner === "bl") {
+                    dragX = e.clientX - containerRect.x - left;
+                    dragY = bottom - (e.clientY - containerRect.y);
+                }
+                else if (this._activeRadiusCorner === "br") {
+                    dragX = right - (e.clientX - containerRect.x);
+                    dragY = bottom - (e.clientY - containerRect.y);
+                }
+                const dragDistScreen = (dragX + dragY) / 2;
+                const dragDistCanvas = dragDistScreen / s;
+                // Apply to all selected containers
+                for (const selId of this.ctx.selectedIds) {
+                    const selNode = this.ctx.tree.get(selId);
+                    if (selNode && isContainerNode(selNode) && selNode.currentRect) {
+                        const maxRadius = Math.min(selNode.currentRect.width, selNode.currentRect.height) / 2;
+                        const newRadius = Math.max(0, Math.min(maxRadius, Math.round(dragDistCanvas)));
+                        this.ctx.mount.setNodeStyle(selId, "border-radius", `${newRadius}px`);
+                        this.ctx.remeasureSubtree(selId);
+                    }
+                }
+                this.ctx.render();
+            }
+            return;
+        }
+        // ── Spacing Adjusters Dragging ────────────────
+        if (this._activeAdjusterType && this._dragStartCanvas) {
+            const selId = this.ctx.selectedIds.values().next().value;
+            const node = this.ctx.tree.get(selId);
+            if (!node)
+                return;
+            this.ctx.safeSetPointerCapture(e.pointerId);
+            this.ctx.canvas.style.pointerEvents = "auto";
+            this.ctx.emitInteraction("adjust-spacing", { handler: this.id });
+            const isVertical = this._activeAdjusterType.includes("top") || this._activeAdjusterType.includes("bottom");
+            this.ctx.container.style.cursor = isVertical ? "ns-resize" : "ew-resize";
+            const dx = canvasPos.x - this._dragStartCanvas.x;
+            const dy = canvasPos.y - this._dragStartCanvas.y;
+            let delta = 0;
+            switch (this._activeAdjusterType) {
+                case "padding-top":
+                    delta = dy;
+                    break;
+                case "padding-bottom":
+                    delta = -dy;
+                    break;
+                case "padding-left":
+                    delta = dx;
+                    break;
+                case "padding-right":
+                    delta = -dx;
+                    break;
+                case "margin-top":
+                    delta = -dy;
+                    break;
+                case "margin-bottom":
+                    delta = -dy;
+                    break;
+                case "margin-left":
+                    delta = -dx;
+                    break;
+                case "margin-right":
+                    delta = -dx;
+                    break;
+            }
+            const contentRoot = this.ctx.mount.getContentRoot(selId);
+            const internalScale = contentRoot ? this.ctx.mount.getElementScale(contentRoot) : 1;
+            const safeScale = internalScale && !isNaN(internalScale) ? internalScale : 1;
+            const newValue = Math.max(0, Math.round(this._adjusterStartValue + delta / safeScale));
+            // Style surgery - direct DOM mutation
+            this.ctx.mount.setNodeStyle(selId, this._activeAdjusterType, `${newValue}px`);
+            // Synchronous reflow + measurement
+            this.ctx.remeasureSubtree(selId);
+            if (node.parentId) {
+                this.ctx.remeasureSubtree(node.parentId);
+            }
+            this.ctx.render();
+        }
+    }
+    onPointerUp(_e, _canvasPos, _containerRect) {
+        const operations = [];
+        if (this._activeAdjusterType) {
+            if (this.ctx.selectedIds.size === 1) {
+                const selId = this.ctx.selectedIds.values().next().value;
+                const contentRoot = this.ctx.mount.getContentRoot(selId);
+                if (contentRoot && this._activeAdjusterType) {
+                    const finalValueStr = contentRoot.style.getPropertyValue(this._activeAdjusterType) || null;
+                    if (finalValueStr !== this._adjusterStartValueStr) {
+                        operations.push({
+                            type: "update-style",
+                            nodeId: selId,
+                            payload: { [this._activeAdjusterType]: finalValueStr },
+                            undoPayload: { [this._activeAdjusterType]: this._adjusterStartValueStr }
+                        });
+                    }
+                }
+                const node = this.ctx.tree.get(selId);
+                const commitId = (node && node.parentId !== null) ? node.parentId : selId;
+                if (operations.length > 0) {
+                    this.ctx.callbacks.onOperationsGenerated?.(operations);
+                    const html = this.ctx.mount.extractHTML(commitId);
+                    if (html) {
+                        this.ctx.callbacks.onHTMLCommit?.(commitId, html);
+                    }
+                }
+            }
+            this._activeAdjusterType = null;
+            this._dragStartCanvas = null;
+            this.ctx.container.style.cursor = "default";
+            this._adjusterStartValueStr = null;
+        }
+        if (this._isAdjustingRadius) {
+            const parentsToCommit = new Set();
+            for (const selId of this.ctx.selectedIds) {
+                const selNode = this.ctx.tree.get(selId);
+                if (selNode && isContainerNode(selNode)) {
+                    const contentRoot = this.ctx.mount.getContentRoot(selId);
+                    if (contentRoot) {
+                        const finalRadiusStr = contentRoot.style.borderRadius || "";
+                        const initialRadiusStr = this._radiusStartValues.get(selId) || "0px";
+                        if (finalRadiusStr !== initialRadiusStr) {
+                            operations.push({
+                                type: "update-style",
+                                nodeId: selId,
+                                payload: { "border-radius": finalRadiusStr },
+                                undoPayload: { "border-radius": initialRadiusStr }
+                            });
+                            if (selNode.parentId) {
+                                parentsToCommit.add(selNode.parentId);
+                            }
+                            else {
+                                parentsToCommit.add(selId);
+                            }
+                        }
+                    }
+                }
+            }
+            for (const commitId of parentsToCommit) {
+                const html = this.ctx.mount.extractHTML(commitId);
+                if (html) {
+                    this.ctx.callbacks.onHTMLCommit?.(commitId, html);
+                }
+            }
+            if (operations.length > 0) {
+                this.ctx.callbacks.onOperationsGenerated?.(operations);
+            }
+            this._isAdjustingRadius = false;
+            this._activeRadiusCorner = null;
+            this._radiusTargetNodeId = null;
+            this._radiusStartValues.clear();
+            this._dragStartCanvas = null;
+            this.ctx.container.style.cursor = "default";
+        }
+        this.ctx.emitInteraction(null);
+        this.ctx.render();
+    }
+    onCancel() {
+        this._activeAdjusterType = null;
+        this._isAdjustingRadius = false;
+        this._activeRadiusCorner = null;
+        this._radiusTargetNodeId = null;
+        this._radiusStartValues.clear();
+        this._dragStartCanvas = null;
+        this.ctx.container.style.cursor = "default";
+        this.ctx.emitInteraction(null);
+        this.ctx.render();
+    }
+}
+//# sourceMappingURL=spacing.handler.js.map