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(), (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("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>;
};