Fit to Selection Tool

Introduction

This action automatically adjusts the zoom and position of the Stage to ensure all selected nodes fit neatly within the viewport. It’s perfect for focus the view on a selection.

Dependencies

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

Stage zoom plugin

Usage

Import the Action

Start by importing the action:

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

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveFitToSelectionToolAction(), (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("fitToSelectionTool");

For example on a button on React:

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

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

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

  return <button onClick={triggerTool}>Fit to Selection Tool</button>;
};

Trigger the action

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

When triggered finds the zoom level necessary to fit all the nodes of the canvas in the viewport and center on them, so they can be entirely visible.