Shape label: use the native-canvas text engine and editor session

AGENTS.md

@@ -119,3 +119,6 @@ npx skills@latest add InditexTech/docouture --all
 | sdk:api-reference/nodes/text-v2.adoc | `code/packages/sdk/src/nodes/text-v2/*` | updated for unreleased changes |
 | main:build/actions/text-tool.adoc | `code/packages/sdk/src/actions/text-tool/text-tool.ts` | updated for unreleased changes |
 | sdk:api-reference/actions/text-tool.adoc | `code/packages/sdk/src/actions/text-tool/text-tool.ts` | updated for unreleased changes |
+| sdk:api-reference/nodes/rectangle.adoc | `code/packages/sdk/src/nodes/rectangle/types.ts`, `code/packages/sdk/src/nodes/shared/shape-label*.ts` | updated for unreleased changes |
+| sdk:api-reference/nodes/ellipse.adoc | `code/packages/sdk/src/nodes/ellipse/types.ts`, `code/packages/sdk/src/nodes/shared/shape-label*.ts` | updated for unreleased changes |
+| sdk:api-reference/nodes/polygon.adoc | `code/packages/sdk/src/nodes/polygon/types.ts`, `code/packages/sdk/src/nodes/shared/shape-label*.ts` | updated for unreleased changes |

code/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [#1226](https://github.com/InditexTech/weavejs/issues/1226) Shape label: opt-in `native` label engine (`config.label.engine`) for rectangle, ellipse and polygon, using the native-canvas text engine and editor session with rich text (optional `labelBlocks` prop). The `legacy` engine stays the default
 - [#1225](https://github.com/InditexTech/weavejs/issues/1225) Text node: rich text formatting, enabled via node config
 
 ### Fixed

code/packages/sdk/src/nodes/ellipse/ellipse.ts

@@ -14,22 +14,24 @@
 import type { WeaveNodesSelectionPlugin } from '@/plugins/nodes-selection/nodes-selection';
 import type { WeaveEllipseNodeParams, WeaveEllipseProperties } from './types';
 import { mergeExceptArrays } from '@/utils/utils';
-import { WeaveShapeLabelEditor } from '@/nodes/shared/shape-label-editor';
+import { commitShapeLabel } from '@/nodes/shared/shape-label.edit-shared';
+import { createShapeLabelEngine } from '@/nodes/shared/shape-label.engine';
+import type { WeaveShapeLabelEngine } from '@/nodes/shared/shape-label.types';
 import {
   labelId,
   WEAVE_SHAPE_LABEL_DEFAULTS,
 } from '@/nodes/shared/shape-label.constants';
-import { computeEllipseLabelMinSize, spreadLabelProps, getShapeLabelSchemaFields } from '@/nodes/shared/shape-label.utils';
+import { computeEllipseLabelMinSize, spreadLabelProps, getShapeLabelSchemaFields, applyLabelBlocksState } from '@/nodes/shared/shape-label.utils';
 
 export class WeaveEllipseNode extends WeaveNode {
   private config: WeaveEllipseProperties;
   protected nodeType: string = WEAVE_ELLIPSE_NODE_TYPE;
   initialize = undefined;
-  private _shapeLabelEditor: WeaveShapeLabelEditor | undefined;
+  private _shapeLabelEditor: WeaveShapeLabelEngine | undefined;
   private _transforming = false;
 
-  private get shapeLabelEditor(): WeaveShapeLabelEditor {
-    return (this._shapeLabelEditor ??= new WeaveShapeLabelEditor(this.instance));
+  private get shapeLabelEditor(): WeaveShapeLabelEngine {
+    return (this._shapeLabelEditor ??= createShapeLabelEngine(this.instance, this.config.label));
   }
 
   constructor(params?: WeaveEllipseNodeParams) {
@@ -41,6 +43,7 @@
       transform: {
         ...config?.transform,
       },
+      label: { ...config?.label },
     };
   }
 
@@ -188,17 +191,17 @@
         return;
       }
 
-      const onCommit = (labelText: string) => {
-        const updatedGroup = this.instance
-          .getStage()
-          .findOne<Konva.Group>(`#${props.id}`);
-        if (!updatedGroup) {
-          return;
-        }
-        const serialized = this.serialize(updatedGroup);
-        serialized.props.labelText = labelText;
-        this.instance.updateNode(serialized);
-      };
+      const onCommit = (
+        labelText: string,
+        labelBlocks?: WeaveElementAttributes['labelBlocks']
+      ) =>
+        commitShapeLabel(
+          this.instance,
+          (g) => this.serialize(g),
+          `${props.id}`,
+          labelText,
+          labelBlocks
+        );
 
       // Re-derive bounds from live attrs so a resized ellipse uses the
       // correct dimensions when the edit overlay is shown.
@@ -452,7 +455,7 @@
     prevNodeState: WeaveStateElement,
     nextProps: WeaveElementAttributes
   ): WeaveStateElement {
-    return mergeExceptArrays(prevNodeState, {
+    const next = mergeExceptArrays(prevNodeState, {
       props: {
         x: nextProps.x,
         y: nextProps.y,
@@ -467,6 +470,7 @@
         ...spreadLabelProps(nextProps),
       },
     });
+    return applyLabelBlocksState(next, nextProps);
   }
 
   static getSchema() {

code/packages/sdk/src/nodes/ellipse/types.ts

@@ -6,10 +6,14 @@ import { type WeaveNodeTransformerProperties } from '@inditextech/weave-types';
 
 export type WeaveEllipseProperties = {
   transform: WeaveNodeTransformerProperties;
+  /** Label engine; defaults to `legacy`. */
+  label?: Partial<WeaveShapeLabelConfig>;
 };
 
 export type WeaveEllipseNodeParams = {
   config: Partial<WeaveEllipseProperties>;
 };
 
+import type { WeaveShapeLabelConfig } from '@/nodes/shared/shape-label.types';
+
 export type { WeaveShapeLabelProps } from '@/nodes/shared/shape-label.types';

code/packages/sdk/src/nodes/polygon/polygon.ts

@@ -14,7 +14,13 @@
 import type { WeaveNodesSelectionPlugin } from '@/plugins/nodes-selection/nodes-selection';
 import type { WeavePolygonNodeParams, WeavePolygonProperties, WeavePolygonPoint, WeavePolygonInnerRect } from './types';
 import { mergeExceptArrays } from '@/utils/utils';
-import { WeaveShapeLabelEditor } from '@/nodes/shared/shape-label-editor';
+import {
+  applyLabelBlocksState,
+  getShapeLabelSchemaFields,
+} from '@/nodes/shared/shape-label.utils';
+import { commitShapeLabel } from '@/nodes/shared/shape-label.edit-shared';
+import { createShapeLabelEngine } from '@/nodes/shared/shape-label.engine';
+import type { WeaveShapeLabelEngine } from '@/nodes/shared/shape-label.types';
 import {
   labelId,
   WEAVE_SHAPE_LABEL_DEFAULTS,
@@ -123,11 +129,11 @@
   private readonly config: WeavePolygonProperties;
   protected nodeType: string = WEAVE_POLYGON_NODE_TYPE;
   initialize = undefined;
-  private _shapeLabelEditor: WeaveShapeLabelEditor | undefined;
+  private _shapeLabelEditor: WeaveShapeLabelEngine | undefined;
   private _transforming = false;
 
-  private get shapeLabelEditor(): WeaveShapeLabelEditor {
-    this._shapeLabelEditor ??= new WeaveShapeLabelEditor(this.instance);
+  private get shapeLabelEditor(): WeaveShapeLabelEngine {
+    this._shapeLabelEditor ??= createShapeLabelEngine(this.instance, this.config.label);
     return this._shapeLabelEditor;
   }
 
@@ -138,6 +144,7 @@
 
     this.config = {
       transform: { ...config?.transform },
+      label: { ...config?.label },
     };
   }
 
@@ -248,15 +255,17 @@
     polygon: Konva.Group,
     props: WeaveElementAttributes
   ): void {
-    const onCommit = (labelText: string) => {
-      const updatedGroup = this.instance
-        .getStage()
-        .findOne<Konva.Group>(`#${props.id}`);
-      if (!updatedGroup) return;
-      const serialized = this.serialize(updatedGroup);
-      serialized.props.labelText = labelText;
-      this.instance.updateNode(serialized);
-    };
+    const onCommit = (
+      labelText: string,
+      labelBlocks?: WeaveElementAttributes['labelBlocks']
+    ) =>
+      commitShapeLabel(
+        this.instance,
+        (g) => this.serialize(g),
+        `${props.id}`,
+        labelText,
+        labelBlocks
+      );
 
     const currentLabelTextBounds = this.getLabelTextBounds(polygon);
 
@@ -605,6 +614,9 @@
           strokeWidth: props.strokeWidth,
         }),
         ...(props.labelText !== undefined && { labelText: props.labelText }),
+        ...(props.labelBlocks !== undefined && {
+          labelBlocks: props.labelBlocks,
+        }),
         ...(props.labelFontFamily !== undefined && {
           labelFontFamily: props.labelFontFamily,
         }),
@@ -638,11 +650,11 @@
     });
   }
 
   static updateNodeState(
     prevNodeState: WeaveStateElement,
     nextProps: WeaveElementAttributes
   ): WeaveStateElement {
-    return mergeExceptArrays(prevNodeState, {
+    const next = mergeExceptArrays(prevNodeState, {
       props: {
         x: nextProps.x,
         y: nextProps.y,
@@ -660,6 +672,9 @@
         ...(nextProps.labelText !== undefined && {
           labelText: nextProps.labelText,
         }),
+        ...(nextProps.labelBlocks !== undefined && {
+          labelBlocks: nextProps.labelBlocks,
+        }),
         ...(nextProps.labelFontFamily !== undefined && {
           labelFontFamily: nextProps.labelFontFamily,
         }),
@@ -695,6 +710,7 @@
         }),
       },
     });
+    return applyLabelBlocksState(next, nextProps);
   }
 
   static getSchema() {
@@ -768,6 +784,7 @@
             'Whether the polygon stroke width should scale when the node is scaled. Defaults to false.'
           ),
 
+        labelBlocks: getShapeLabelSchemaFields().labelBlocks,
         labelText: z
           .string()
           .optional()

code/packages/sdk/src/nodes/polygon/types.ts

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { WeaveNodeTransformerProperties } from '@inditextech/weave-types';
+import type { WeaveShapeLabelConfig } from '@/nodes/shared/shape-label.types';
 
 export type { WeaveShapeLabelProps } from '@/nodes/shared/shape-label.types';
 
@@ -17,6 +18,8 @@ export type WeavePolygonInnerRect = {
 
 export type WeavePolygonProperties = {
   transform: WeaveNodeTransformerProperties;
+  /** Label engine; defaults to `legacy`. */
+  label?: Partial<WeaveShapeLabelConfig>;
 };
 
 export type WeavePolygonNodeParams = {

code/packages/sdk/src/nodes/rectangle/rectangle.ts

@@ -17,22 +17,24 @@
   WeaveRectangleProperties,
 } from './types';
 import { mergeExceptArrays } from '@/index';
-import { WeaveShapeLabelEditor } from '@/nodes/shared/shape-label-editor';
+import { commitShapeLabel } from '@/nodes/shared/shape-label.edit-shared';
+import { createShapeLabelEngine } from '@/nodes/shared/shape-label.engine';
+import type { WeaveShapeLabelEngine } from '@/nodes/shared/shape-label.types';
 import {
   labelId,
   WEAVE_SHAPE_LABEL_DEFAULTS,
 } from '@/nodes/shared/shape-label.constants';
-import { computeRectangleLabelMinSize, spreadLabelProps, getShapeLabelSchemaFields } from '@/nodes/shared/shape-label.utils';
+import { computeRectangleLabelMinSize, spreadLabelProps, getShapeLabelSchemaFields, applyLabelBlocksState } from '@/nodes/shared/shape-label.utils';
 
 export class WeaveRectangleNode extends WeaveNode {
   private config: WeaveRectangleProperties;
   protected nodeType: string = WEAVE_RECTANGLE_NODE_TYPE;
   initialize = undefined;
-  private _shapeLabelEditor: WeaveShapeLabelEditor | undefined;
+  private _shapeLabelEditor: WeaveShapeLabelEngine | undefined;
   private _transforming = false;
 
-  private get shapeLabelEditor(): WeaveShapeLabelEditor {
-    return (this._shapeLabelEditor ??= new WeaveShapeLabelEditor(this.instance));
+  private get shapeLabelEditor(): WeaveShapeLabelEngine {
+    return (this._shapeLabelEditor ??= createShapeLabelEngine(this.instance, this.config.label));
   }
 
   constructor(params?: WeaveRectangleNodeParams) {
@@ -44,6 +46,7 @@
       transform: {
         ...config?.transform,
       },
+      label: { ...config?.label },
     };
   }
 
@@ -142,17 +145,17 @@
         return;
       }
 
-      const onCommit = (labelText: string) => {
-        const updatedGroup = this.instance
-          .getStage()
-          .findOne<Konva.Group>(`#${props.id}`);
-        if (!updatedGroup) {
-          return;
-        }
-        const serialized = this.serialize(updatedGroup);
-        serialized.props.labelText = labelText;
-        this.instance.updateNode(serialized);
-      };
+      const onCommit = (
+        labelText: string,
+        labelBlocks?: WeaveElementAttributes['labelBlocks']
+      ) =>
+        commitShapeLabel(
+          this.instance,
+          (g) => this.serialize(g),
+          `${props.id}`,
+          labelText,
+          labelBlocks
+        );
 
       // Re-derive bounds from live attrs so a resized rectangle uses the
       // correct dimensions when the edit overlay is shown.
@@ -348,7 +351,7 @@
     prevNodeState: WeaveStateElement,
     nextProps: WeaveElementAttributes
   ): WeaveStateElement {
-    return mergeExceptArrays(prevNodeState, {
+    const next = mergeExceptArrays(prevNodeState, {
       props: {
         x: nextProps.x,
         y: nextProps.y,
@@ -363,6 +366,7 @@
         ...spreadLabelProps(nextProps),
       },
     });
+    return applyLabelBlocksState(next, nextProps);
   }
 
   static getSchema() {

code/packages/sdk/src/nodes/rectangle/types.ts

@@ -6,10 +6,14 @@ import { type WeaveNodeTransformerProperties } from '@inditextech/weave-types';
 
 export type WeaveRectangleProperties = {
   transform: WeaveNodeTransformerProperties;
+  /** Label engine; defaults to `legacy`. */
+  label?: Partial<WeaveShapeLabelConfig>;
 };
 
 export type WeaveRectangleNodeParams = {
   config: Partial<WeaveRectangleProperties>;
 };
 
+import type { WeaveShapeLabelConfig } from '@/nodes/shared/shape-label.types';
+
 export type { WeaveShapeLabelProps } from '@/nodes/shared/shape-label.types';