kritzel-stencil 0.3.24 → 0.3.26

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var schema_constants = require('./schema.constants-D8JoUfNc.js');
+var schema_constants = require('./schema.constants-CPz_o--2.js');
 var Y = require('yjs');
 var yIndexeddb = require('y-indexeddb');
 var yWebsocket = require('y-websocket');

package/dist/cjs/kritzel-active-users_45.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-D8JoUfNc.js');
+var schema_constants = require('./schema.constants-CPz_o--2.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -21616,6 +21616,7 @@ const DEFAULT_ENGINE_CONFIG = {
     activeTool: null,
     objects: null,
     snapCandidate: null,
+    snapPreviewCandidate: null,
     resizeHandleType: null,
     lineHandleType: null,
     hasViewportChanged: false,
@@ -24157,6 +24158,7 @@ class KritzelClipboardManager {
      */
     regenerateIdsAndRemapAnchors(topLevel) {
         const all = [];
+        const hasOnlyTopLevelLines = topLevel.length > 0 && topLevel.every(object => schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine'));
         const collect = (objects) => {
             for (const object of objects) {
                 all.push(object);
@@ -24181,9 +24183,15 @@ class KritzelClipboardManager {
                 if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
                     object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.startAnchor = undefined;
+                }
                 if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
                     object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.endAnchor = undefined;
+                }
             }
         }
     }
@@ -29412,7 +29420,11 @@ const KritzelEngine = class {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    zIndex: object.zIndex.toString(),
+                    // The object wrapper establishes its own stacking context (transform + z-index),
+                    // so the selection-line handles inside it cannot escape above the snap/anchor
+                    // layers (z-index 9999/9998) rendered later at the origin level. Lift the
+                    // selected line's wrapper above those layers so its handles always paint on top.
+                    zIndex: this.core.displaySelectionLineUI(object) ? '10001' : object.zIndex.toString(),
                     pointerEvents: getObjectWrapperPointerEvents(object),
                 } }, schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
@@ -29616,10 +29628,21 @@ const KritzelEngine = class {
                     }
                     const selectionBorderColor = remoteUserColor ?? (schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
                     const selectionHandleStrokeColor = remoteUserColor ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const lineObject = object;
+                    const activeSnapCandidate = this.core.store.state.snapCandidate;
+                    const previewSnapCandidate = this.core.store.state.snapPreviewCandidate;
+                    const isStartHandleSnapped = lineObject.startAnchor != null;
+                    const isEndHandleSnapped = lineObject.endAnchor != null;
+                    const highlightedSnapCandidate = activeSnapCandidate ?? previewSnapCandidate;
+                    const isStartHandleSnapPreview = highlightedSnapCandidate?.endpoint === 'start';
+                    const isEndHandleSnapPreview = highlightedSnapCandidate?.endpoint === 'end';
+                    const isStartHandleHighlighted = isStartHandleSnapped || isStartHandleSnapPreview;
+                    const isEndHandleHighlighted = isEndHandleSnapped || isEndHandleSnapPreview;
+                    const selectionOverlayZIndex = this.core.displaySelectionLineUI(object) ? '10000' : (object.zIndex + 1).toString();
                     const handleScale = object.scale ?? 1;
                     const { canRenderResizeHandles, canRenderRotationHandle } = this.getSelectionHandleCapabilities(object);
                     return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                            zIndex: (object.zIndex + 1).toString(),
+                            zIndex: selectionOverlayZIndex,
                             height: object?.totalHeight.toString(),
                             width: object?.totalWidth.toString(),
                             left: '0',
@@ -29710,7 +29733,7 @@ const KritzelEngine = class {
                             strokeLinecap: 'round',
                             fill: 'none',
                         } })), !this.isSelecting && !isRemoteSelection && (index.h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, index.h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            fill: isStartHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -29734,7 +29757,7 @@ const KritzelEngine = class {
                             fill: 'transparent',
                             paintOrder: 'fill',
                         } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            fill: isEndHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -29744,6 +29767,36 @@ const KritzelEngine = class {
                         } })))))));
                 })()));
         }), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData() ?? this.core.anchorManager.getSnapPreviewRenderData();
+            if (!data)
+                return null;
+            const isActiveSnap = this.core.anchorManager.getSnapIndicatorRenderData() != null;
+            return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, index.h("g", null, data.snapLinePath ? (index.h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: isActiveSnap ? 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))' : 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.12))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined &&
+                data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: isActiveSnap ? 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))' : 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.12))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), index.h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: isActiveSnap ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))' : 'rgba(59, 130, 246, 0.18)',
+                    stroke: isActiveSnap ? 'var(--kritzel-snap-indicator-stroke, #007bff)' : 'rgba(59, 130, 246, 0.5)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })(), (() => {
             const data = this.core.anchorManager.getAnchorLinesRenderData();
             if (!data)
                 return null;
@@ -29768,7 +29821,7 @@ const KritzelEngine = class {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } })), index.h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))), data.endAnchorViz && (index.h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (index.h("path", { d: data.endAnchorViz.pathD, style: {
@@ -29787,35 +29840,6 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } })))));
-        })(), (() => {
-            const data = this.core.anchorManager.getSnapIndicatorRenderData();
-            if (!data)
-                return null;
-            return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
-                    position: 'absolute',
-                    left: '0',
-                    top: '0',
-                    width: '1px',
-                    height: '1px',
-                    pointerEvents: 'none',
-                    zIndex: '9999',
-                    overflow: 'visible',
-                } }, index.h("g", null, data.snapLinePath ? (index.h("path", { d: data.snapLinePath, fill: "none", style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } })) : (data.edgeX !== undefined &&
-                data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } }))), index.h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                    strokeWidth: data.indicatorStrokeWidth,
-                } }))));
         })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'absolute',
                 left: `${this.core.store.state.contextMenuX}px`,
@@ -31227,7 +31251,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.24';
+const KRITZEL_VERSION = '0.3.26';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;