Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

Eraser Tool

Activate the deletion of nodes from the canvas

Eraser Tool action on use on the Weave.js showcase

Introduction

This action allows users to erase (delete) elements from the Stage canvas.

Usage

Import the Action

Start by importing the action:

import { WeaveEraserToolAction } from "@inditextech/weave-sdk";

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveEraserToolAction(), (1)
  ]
})
1 Added in this step.

Setup the action trigger

Setup on a button or any element on the UI the user can interact with on the action event:

instance.triggerAction("eraserTool");

For example on a button on React:

import React from "react";
import { useWeave } from "@inditextech/weave-react";

const MyEraserToolTriggerComponent = () => {
  const instance = useWeave((state) => state.instance);

  const triggerTool = React.useCallback(() => {
    instance.triggerAction("eraserTool");
  }, [instance]);

  return <button onClick={triggerTool}>Eraser Tool</button>;
};

Trigger the action

Finally a final user trigger the UI element that launches the action.

When enabled the user can click / touch on an element and it will deleted.