Export Node Tool

Introduction

This action allows users to capture and download a node as an image file (jpeg, png or gif). It moves the node to a safe layer, preserving the visual state of the, styling, and layout.

Dependencies

This action needs registered on the Weave instance the following elements:

Nodes selection plugin

Usage

Import the Action

Start by importing the action:

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

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveExportNodeToolAction(), 
  ]
})

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("exportNodeTool", {
  node: aNodeInstance, // the node to export as image
  options: {
    padding: 20, // the exported image should have a 20px padding
    pixelRatio: 2, // the exported image should have 2x resolution
  },
});

For example on a button on React:

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

const MyExportNodeToolTriggerComponent = () => {
  const instance = useWeave((state) => state.instance);
  const selectedNodes = useWeave((state) => state.selection.nodes);

  const triggerTool = React.useCallback(() => {
    instance.triggerAction("exportNodeTool", {
      node: selectedNodes[0].instance,
      options: {
        padding: 20,
        pixelRatio: 2,
      },
    });
  }, [instance, selectedNodes]);

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

Trigger the action

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

When triggered the selected node is cloned on a special layer of the canvas, fit zoom to it and center on its and then proceed to generate an image from it. Allowing to download it.