Custom guides support and refactor of snapping and distance guides plugins

code/packages/react/src/components/store.tsx

@@ -79,7 +79,7 @@ interface WeaveStore extends WeaveRuntimeState, WeaveRuntimeActions {}
 
 const defaultAppState: WeaveRuntimeState = {
   instance: null,
-  appState: { weave: {} },
+  appState: { weave: {}, weaveMetadata: {} },
   status: WEAVE_INSTANCE_STATUS.IDLE,
   room: {
     id: null,

code/packages/renderer-konva-base/src/renderer.ts

@@ -27,6 +27,7 @@ export class WeaveKonvaBaseRenderer extends WeaveRenderer {
   init(): void {
     this.actualState = {
       weave: {},
+      weaveMetadata: {},
     };
   }
 
@@ -236,7 +237,8 @@ export class WeaveKonvaBaseRenderer extends WeaveRenderer {
     );
 
     if (!nodeInstance) {
-      throw new Error(`No handler found for node type ${element.type}`);
+      console.warn(`No handler found for node type ${element.type}`);
+      return;
     }
 
     if (!parentInstance && nodeInstance) {

code/packages/sdk/package.json

@@ -76,6 +76,7 @@
     "fontfaceobserver": "2.3.0",
     "globals": "15.14.0",
     "hammerjs": "^2.0.8",
+    "hookable": "^5.5.3",
     "lodash": "4.18.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "tsdown": "^0.10.2",

code/packages/sdk/src/actions/ellipse-tool/ellipse-tool.ts

@@ -183,11 +183,10 @@ export class WeaveEllipseToolAction extends WeaveAction {
     if (nodeHandler) {
       const node = nodeHandler.create(this.ellipseId, {
         ...this.props,
-        strokeScaleEnabled: true,
         x: this.clickPoint?.x ?? 0 + this.props.radiusX,
         y: this.clickPoint?.y ?? 0 + this.props.radiusY,
-        radiusX: 0,
-        radiusY: 0,
+        radiusX: 1,
+        radiusY: 1,
       });
 
       this.instance.addNode(node, this.container?.getAttrs().id);
@@ -222,10 +221,10 @@ export class WeaveEllipseToolAction extends WeaveAction {
 
       ellipse.setAttrs({
         ...this.props,
-        x: ellipsePos.x + ellipseRadiusX,
-        y: ellipsePos.y + ellipseRadiusY,
-        radiusX: ellipseRadiusX,
-        radiusY: ellipseRadiusY,
+        x: ellipsePos.x,
+        y: ellipsePos.y,
+        radiusX: ellipseRadiusX / 2,
+        radiusY: ellipseRadiusY / 2,
       });
 
       if (nodeHandler) {
@@ -266,12 +265,17 @@ export class WeaveEllipseToolAction extends WeaveAction {
         ellipsePos.y = Math.min(this.clickPoint.y, mousePoint.y);
       }
 
-      ellipse.setAttrs({
-        x: ellipsePos.x + deltaX,
-        y: ellipsePos.y + deltaY,
-        radiusX: deltaX,
-        radiusY: deltaY,
-      });
+      const nodeHandler =
+        this.instance.getNodeHandler<WeaveEllipseNode>('ellipse');
+
+      if (nodeHandler) {
+        nodeHandler.onUpdate(ellipse as WeaveElementInstance, {
+          ...this.props,
+          id: this.ellipseId,
+          radiusX: deltaX / 2,
+          radiusY: deltaY / 2,
+        });
+      }
     }
   }
 

code/packages/sdk/src/actions/guide-tool/constants.ts

@@ -0,0 +1,55 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import type { GuideToolActionConfig } from './types';
+
+export const GUIDE_TOOL_ACTION_NAME = 'guideTool';
+
+export const GUIDE_TOOL_STATE = {
+  ['IDLE']: 'idle',
+  ['ADDING']: 'adding',
+  ['NOT_ADDED']: 'not-added',
+  ['ADDED']: 'added',
+} as const;
+
+export const DEFAULT_GUIDE_TOOL_ACTION_CONFIG: GuideToolActionConfig = {
+  style: {
+    guide: {
+      stroke: '#FF3B30',
+      strokeWidth: 0.5,
+      dash: [],
+      opacity: 0.9,
+    },
+    targetDistance: {
+      target: {
+        stroke: '#FF3B30',
+        strokeWidth: 1,
+        dash: [],
+        opacity: 1,
+      },
+      distance: {
+        opacity: 1,
+        line: {
+          stroke: '#FF3B30',
+          strokeWidth: 1,
+          dash: [],
+          opacity: 1,
+        },
+        text: {
+          fill: '#ffffff',
+          fontSize: 10,
+          fontFamily: 'Roboto Mono, monospace',
+          opacity: 1,
+        },
+        background: {
+          fill: '#FF3B30',
+          cornerRadius: 4,
+          stroke: '#FF3B30',
+          strokeWidth: 0,
+          opacity: 1,
+        },
+      },
+    },
+  },
+};