Allow to configure transformer configuration per node

code/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - [#305](https://github.com/InditexTech/weavejs/issues/305) Don't allow to transform when more than one element is selected
+- [#308](https://github.com/InditexTech/weavejs/issues/308) Allow to configure transformer configuration per node
 
 ### Fixed
 

code/packages/sdk/src/index.ts

@@ -4,7 +4,9 @@
 
 export { Weave } from './weave';
 export { WeaveStore } from './stores/store';
+export * from './stores/types';
 export { WeaveNode } from './nodes/node';
+export * from './nodes/constants';
 export { WeaveAction } from './actions/action';
 export * from './actions/types';
 export { WeavePlugin } from './plugins/plugin';

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

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export const DEFAULT_ANCHORS_ENABLED: string[] = [
+  'top-left',
+  'top-center',
+  'top-right',
+  'middle-right',
+  'middle-left',
+  'bottom-left',
+  'bottom-center',
+  'bottom-right',
+];

code/packages/sdk/src/nodes/frame/constants.ts

@@ -82,6 +82,11 @@ export const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
     borderColor: '#ff6863ff',
     fill: '#ffffffff',
   },
+  transform: {
+    rotateEnabled: false,
+    resizeEnabled: false,
+    enabledAnchors: [] as string[],
+  },
 };
 
 export const WEAVE_FRAME_NODE_DEFAULT_PROPS = {

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

@@ -102,6 +102,10 @@ export class WeaveFrameNode extends WeaveNode {
       name: 'node',
     });
 
+    frame.getTransformerProperties = () => {
+      return this.config.transform;
+    };
+
     const background = new Konva.Rect({
       id: `${id}-bg`,
       nodeId: id,

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

@@ -7,6 +7,7 @@ import type {
   WEAVE_FRAME_NODE_SIZES_ORIENTATION,
   WEAVE_FRAME_NODE_SIZES_TYPES,
 } from './constants';
+import type { WeaveNodeTransformerProperties } from '../types';
 
 export type WeaveFrameNodeSizesOrientationKeys =
   keyof typeof WEAVE_FRAME_NODE_SIZES_ORIENTATION;
@@ -40,6 +41,7 @@ export type WeaveFrameProperties = {
     borderColor: string;
     fill: string;
   };
+  transform: WeaveNodeTransformerProperties;
 };
 
 export type WeaveFrameAttributes = WeaveElementAttributes & {

code/packages/sdk/src/nodes/node-extensions.d.ts

@@ -0,0 +1,11 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import 'konva';
+
+declare module 'konva/lib/Node' {
+  interface Node {
+    getTransformerProperties(): WeaveNodeTransformerProperties;
+  }
+}

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

@@ -21,6 +21,16 @@ import {
   moveNodeToContainer,
 } from '@/utils';
 import type { WeaveNodesSnappingPlugin } from '@/plugins/nodes-snapping/nodes-snapping';
+import './node-extensions.d';
+import { DEFAULT_ANCHORS_ENABLED } from './constants';
+
+Konva.Node.prototype.getTransformerProperties = function () {
+  return {
+    rotateEnabled: true,
+    resizeEnabled: true,
+    enabledAnchors: DEFAULT_ANCHORS_ENABLED,
+  };
+};
 
 export abstract class WeaveNode implements WeaveNodeBase {
   protected instance!: Weave;

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

@@ -0,0 +1,9 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export type WeaveNodeTransformerProperties = {
+  rotateEnabled: boolean;
+  resizeEnabled: boolean;
+  enabledAnchors: string[];
+};

code/packages/sdk/src/plugins/nodes-selection/nodes-selection.ts

@@ -652,6 +652,12 @@ export class WeaveNodesSelectionPlugin extends WeavePlugin {
       ) {
         this.tr.enabledAnchors(this.defaultEnabledAnchors);
       }
+      if (nodesSelected === 1 && nodeTargeted.getTransformerProperties) {
+        this.tr.setAttrs({
+          ...nodeTargeted.getTransformerProperties(),
+        });
+        this.tr.forceUpdate();
+      }
 
       if (areNodesSelected) {
         stage.container().tabIndex = 1;

docs/content/docs/main/build/nodes/index.mdx

@@ -4,6 +4,7 @@ description: Nodes maintained by Weave.js team
 ---
 
 import { CpuIcon, Database } from "lucide-react";
+import { Separator } from "@/components/separator";
 
 ## Introduction
 
@@ -161,6 +162,31 @@ onRender(props: WeaveElementAttributes): WeaveElementInstance
 The `onRender` method is the one responsible for rendering the node on the canvas, It's a good place
 to initialize the nodes, events, etc.
 
+<Separator />
+
+We extend the `Konva.Node` class to define a function:
+
+```ts
+getTransformerProperties(): WeaveNodeTransformerProperties
+```
+
+That you can override, allowing to define when the node is selected if can: rotate, resize and if is resizable which anchors for resizing will be available.
+
+By default, all nodes can rotate, resize and the default anchors are:
+
+```ts
+const DEFAULT_ANCHORS_ENABLED: string[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "middle-right",
+  "middle-left",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+```
+
 #### onUpdate
 
 ```ts

docs/content/docs/main/changelog/prerelease/0.20.0.mdx

@@ -10,6 +10,7 @@ description: Selection & grouping bugfixes
 ### Added
 
 - [#305](https://github.com/InditexTech/weavejs/issues/305) Don't allow to transform when more than one element is selected
+- [#308](https://github.com/InditexTech/weavejs/issues/308) Allow to configure transformer configuration per node
 
 ### Fixed