Provide a tool for erasing elements

code/CHANGELOG.md

@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- [#288](https://github.com/InditexTech/weavejs/issues/288) Provide a tool for erasing elements
+
 ## [0.18.0] - 2025-05-27
 
 ### Changed
@@ -326,77 +330,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#18](https://github.com/InditexTech/weavejs/issues/18) Fix awareness not working on store-azure-web-pubsub
 
 [Unreleased]: https://github.com/InditexTech/weavejs/compare/0.18.0...HEAD
-
 [0.18.0]: https://github.com/InditexTech/weavejs/compare/0.17.0...0.18.0
-
 [0.17.0]: https://github.com/InditexTech/weavejs/compare/0.16.2...0.17.0
-
 [0.16.2]: https://github.com/InditexTech/weavejs/compare/0.16.1...0.16.2
-
 [0.16.1]: https://github.com/InditexTech/weavejs/compare/0.16.0...0.16.1
-
 [0.16.0]: https://github.com/InditexTech/weavejs/compare/0.15.0...0.16.0
-
 [0.15.0]: https://github.com/InditexTech/weavejs/compare/0.14.3...0.15.0
-
 [0.14.3]: https://github.com/InditexTech/weavejs/compare/0.14.2...0.14.3
-
 [0.14.2]: https://github.com/InditexTech/weavejs/compare/0.14.1...0.14.2
-
 [0.14.1]: https://github.com/InditexTech/weavejs/compare/0.14.0...0.14.1
-
 [0.14.0]: https://github.com/InditexTech/weavejs/compare/0.13.1...0.14.0
-
 [0.13.1]: https://github.com/InditexTech/weavejs/compare/0.13.0...0.13.1
-
 [0.13.0]: https://github.com/InditexTech/weavejs/compare/0.12.1...0.13.0
-
 [0.12.1]: https://github.com/InditexTech/weavejs/compare/0.12.0...0.12.1
-
 [0.12.0]: https://github.com/InditexTech/weavejs/compare/0.11.0...0.12.0
-
 [0.11.0]: https://github.com/InditexTech/weavejs/compare/0.10.3...0.11.0
-
 [0.10.3]: https://github.com/InditexTech/weavejs/compare/0.10.2...0.10.3
-
 [0.10.2]: https://github.com/InditexTech/weavejs/compare/0.10.1...0.10.2
-
 [0.10.1]: https://github.com/InditexTech/weavejs/compare/0.10.0...0.10.1
-
 [0.10.0]: https://github.com/InditexTech/weavejs/compare/0.9.3...0.10.0
-
 [0.9.3]: https://github.com/InditexTech/weavejs/compare/0.9.2...0.9.3
-
 [0.9.2]: https://github.com/InditexTech/weavejs/compare/0.9.1...0.9.2
-
 [0.9.1]: https://github.com/InditexTech/weavejs/compare/0.9.0...0.9.1
-
 [0.9.0]: https://github.com/InditexTech/weavejs/compare/0.8.0...0.9.0
-
 [0.8.0]: https://github.com/InditexTech/weavejs/compare/0.7.1...0.8.0
-
 [0.7.1]: https://github.com/InditexTech/weavejs/compare/0.7.0...0.7.1
-
 [0.7.0]: https://github.com/InditexTech/weavejs/compare/0.6.0...0.7.0
-
 [0.6.0]: https://github.com/InditexTech/weavejs/compare/0.5.0...0.6.0
-
 [0.5.0]: https://github.com/InditexTech/weavejs/compare/0.4.0...0.5.0
-
 [0.4.0]: https://github.com/InditexTech/weavejs/compare/0.3.3...0.4.0
-
 [0.3.3]: https://github.com/InditexTech/weavejs/compare/0.3.2...0.3.3
-
 [0.3.2]: https://github.com/InditexTech/weavejs/compare/0.3.1...0.3.2
-
 [0.3.1]: https://github.com/InditexTech/weavejs/compare/0.3.0...0.3.1
-
 [0.3.0]: https://github.com/InditexTech/weavejs/compare/0.2.1...0.3.0
-
 [0.2.1]: https://github.com/InditexTech/weavejs/compare/0.2.0...0.2.1
-
 [0.2.0]: https://github.com/InditexTech/weavejs/compare/0.1.1...0.2.0
-
 [0.1.1]: https://github.com/InditexTech/weavejs/compare/0.1.0...0.1.1
-
 [0.1.0]: https://github.com/InditexTech/weavejs/releases/tag/0.1.0

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

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export const ERASER_TOOL_ACTION_NAME = 'eraserTool';
+
+export const ERASER_TOOL_STATE = {
+  ['IDLE']: 'idle',
+  ['ERASING']: 'erasing',
+} as const;

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

@@ -0,0 +1,121 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { WeaveAction } from '@/actions/action';
+import { type WeaveEraserToolActionState } from './types';
+import { ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE } from './constants';
+import type { WeaveNodesSelectionPlugin } from '@/plugins/nodes-selection/nodes-selection';
+import { SELECTION_TOOL_ACTION_NAME } from '../selection-tool/constants';
+import type { WeaveNode } from '@/nodes/node';
+import type { WeaveElementInstance } from '@inditextech/weave-types';
+
+export class WeaveEraserToolAction extends WeaveAction {
+  protected initialized: boolean = false;
+  protected state: WeaveEraserToolActionState;
+  protected erasing: boolean = false;
+  protected cancelAction!: () => void;
+  onPropsChange = undefined;
+  onInit = undefined;
+
+  constructor() {
+    super();
+
+    this.initialized = false;
+    this.erasing = false;
+    this.state = ERASER_TOOL_STATE.IDLE;
+  }
+
+  getName(): string {
+    return ERASER_TOOL_ACTION_NAME;
+  }
+
+  private setupEvents() {
+    const stage = this.instance.getStage();
+
+    stage.on('click touch', (e) => {
+      e.evt.preventDefault();
+
+      if (!this.erasing) {
+        return;
+      }
+
+      const nodeIntersected = this.instance.pointIntersectsElement();
+
+      if (nodeIntersected) {
+        const realNode = this.instance.resolveNode(nodeIntersected);
+
+        if (!realNode) {
+          return;
+        }
+
+        const nodeType = realNode.getAttrs().nodeType;
+        const nodeHandler = this.instance.getNodeHandler<WeaveNode>(nodeType);
+        const nodeSerialized = nodeHandler.serialize(
+          realNode as WeaveElementInstance
+        );
+        this.instance.removeNode(nodeSerialized);
+      }
+    });
+
+    stage.container().addEventListener('keydown', (e) => {
+      if (
+        e.key === 'Escape' &&
+        this.instance.getActiveAction() === ERASER_TOOL_ACTION_NAME
+      ) {
+        this.cancelAction();
+        return;
+      }
+    });
+
+    this.initialized = true;
+  }
+
+  private setState(state: WeaveEraserToolActionState) {
+    this.state = state;
+  }
+
+  private setEraser() {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'crosshair';
+    stage.container().focus();
+
+    this.erasing = true;
+
+    this.setState(ERASER_TOOL_STATE.ERASING);
+  }
+
+  trigger(cancelAction: () => void): void {
+    if (!this.instance) {
+      throw new Error('Instance not defined');
+    }
+
+    if (!this.initialized) {
+      this.setupEvents();
+    }
+    const stage = this.instance.getStage();
+
+    stage.container().tabIndex = 1;
+    stage.container().focus();
+
+    this.cancelAction = cancelAction;
+
+    this.setEraser();
+  }
+
+  cleanup(): void {
+    const stage = this.instance.getStage();
+
+    stage.container().style.cursor = 'default';
+    this.erasing = false;
+
+    const selectionPlugin =
+      this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+    if (selectionPlugin) {
+      this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+    }
+
+    this.setState(ERASER_TOOL_STATE.IDLE);
+  }
+}

code/packages/sdk/src/actions/eraser-tool/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
+
+import { ERASER_TOOL_STATE } from './constants';
+
+export type WeaveEraserToolActionStateKeys = keyof typeof ERASER_TOOL_STATE;
+export type WeaveEraserToolActionState =
+  (typeof ERASER_TOOL_STATE)[WeaveEraserToolActionStateKeys];

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

@@ -5,7 +5,8 @@
 import { WeaveAction } from '@/actions/action';
 import { type WeaveMoveToolActionState } from './types';
 import { MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE } from './constants';
-import { WeaveNodesSelectionPlugin } from '@/plugins/nodes-selection/nodes-selection';
+import type { WeaveNodesSelectionPlugin } from '@/plugins/nodes-selection/nodes-selection';
+import { SELECTION_TOOL_ACTION_NAME } from '../selection-tool/constants';
 
 export class WeaveMoveToolAction extends WeaveAction {
   protected initialized: boolean = false;
@@ -26,6 +27,18 @@ export class WeaveMoveToolAction extends WeaveAction {
   }
 
   private setupEvents() {
+    const stage = this.instance.getStage();
+
+    stage.container().addEventListener('keydown', (e) => {
+      if (
+        e.key === 'Escape' &&
+        this.instance.getActiveAction() === MOVE_TOOL_ACTION_NAME
+      ) {
+        this.cancelAction();
+        return;
+      }
+    });
+
     this.initialized = true;
   }
 
@@ -68,9 +81,7 @@ export class WeaveMoveToolAction extends WeaveAction {
     const selectionPlugin =
       this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
     if (selectionPlugin) {
-      const tr = selectionPlugin.getTransformer();
-      this.instance.disablePlugin('nodesSelection');
-      tr.hide();
+      this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
     }
 
     this.setState(MOVE_TOOL_STATE.IDLE);

code/packages/sdk/src/index.ts

@@ -39,6 +39,9 @@ export * from './actions/move-tool/types';
 export { WeaveSelectionToolAction } from './actions/selection-tool/selection-tool';
 export * from './actions/selection-tool/constants';
 export * from './actions/selection-tool/types';
+export { WeaveEraserToolAction } from './actions/eraser-tool/eraser-tool';
+export * from './actions/eraser-tool/constants';
+export * from './actions/eraser-tool/types';
 export { WeaveRectangleToolAction } from './actions/rectangle-tool/rectangle-tool';
 export * from './actions/rectangle-tool/constants';
 export * from './actions/rectangle-tool/types';

code/packages/sdk/src/managers/targeting.ts

@@ -22,6 +22,45 @@ export class WeaveTargetingManager {
     this.logger.debug('Targeting manager created');
   }
 
+  resolveNode(node: Konva.Node): Konva.Node | undefined {
+    const stage = this.instance.getStage();
+
+    const nodeAttrs = node.getAttrs();
+
+    // Is an internal node container, continue to its parent
+    if (nodeAttrs.nodeId) {
+      const parentNode = stage.findOne(`#${nodeAttrs.nodeId}`);
+
+      if (!parentNode) {
+        return undefined;
+      }
+
+      return this.resolveNode(parentNode);
+    }
+    // Is a node and not a layer
+    if (nodeAttrs.nodeType && nodeAttrs.nodeType !== 'layer') {
+      return node;
+    }
+    return undefined;
+  }
+
+  pointIntersectsElement(point?: Vector2d): Konva.Node | null {
+    const stage = this.instance.getStage();
+    const relativeMousePointer = point
+      ? point
+      : stage.getPointerPosition() ?? { x: 0, y: 0 };
+
+    const mainLayer = this.instance.getMainLayer();
+
+    if (!mainLayer) {
+      return null;
+    }
+
+    const intersectedNode = mainLayer.getIntersection(relativeMousePointer);
+
+    return intersectedNode;
+  }
+
   pointIntersectsContainerElement(
     actualLayer?: Konva.Layer | Konva.Group,
     point?: Vector2d
@@ -40,7 +79,17 @@ export class WeaveTargetingManager {
       for (const node of intersections) {
         if (node.getAttrs().nodeId) {
           const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
-          intersectedNode = parent;
+          if (!parent) {
+            continue;
+          }
+          const resolvedNode = this.resolveNode(parent);
+          if (
+            resolvedNode &&
+            resolvedNode.getAttrs().containerId &&
+            resolvedNode.getAttrs().id !== actualLayer?.getAttrs().id
+          ) {
+            intersectedNode = parent;
+          }
           continue;
         }
         if (

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

@@ -34,6 +34,7 @@ export class WeaveImageNode extends WeaveNode {
     const groupImageProps = {
       ...imageProps,
     };
+    delete groupImageProps.children;
     delete groupImageProps.imageProperties;
     delete groupImageProps.zIndex;
 
@@ -54,6 +55,7 @@ export class WeaveImageNode extends WeaveNode {
     const imagePlaceholder = new Konva.Rect({
       ...groupImageProps,
       id: `${id}-placeholder`,
+      nodeId: id,
       x: 0,
       y: 0,
       scaleX: 1,
@@ -73,6 +75,7 @@ export class WeaveImageNode extends WeaveNode {
       ...internalImageProps,
       ...imageProperties,
       id: `${id}-image`,
+      nodeId: id,
       x: 0,
       y: 0,
       scaleX: 1,
@@ -194,6 +197,7 @@ export class WeaveImageNode extends WeaveNode {
         ...(nodeAttrs.imageProperties ?? {}),
         name: undefined,
         id: `${id}-placeholder`,
+        nodeId: id,
         x: 0,
         y: 0,
         scaleX: 1,
@@ -210,6 +214,7 @@ export class WeaveImageNode extends WeaveNode {
         ...(nodeAttrs.imageProperties ?? {}),
         name: undefined,
         id: `${id}-image`,
+        nodeId: id,
         x: 0,
         y: 0,
         scaleX: 1,
@@ -226,6 +231,7 @@ export class WeaveImageNode extends WeaveNode {
         ...(nodeAttrs.imageProperties ?? {}),
         name: undefined,
         id: `${id}-image`,
+        nodeId: id,
         x: 0,
         y: 0,
         scaleX: 1,