Stage minimap

Introduction

This plugin renders a minimap from the main stage, provides a scaled-down preview of the stage content, useful for quick navigation and orientation. It renders the entire stage (including padding) into a miniature view and overlays a viewport rectangle that indicates the currently visible region.

Features:

• Displays the full stage content, always fitted and centered within the minimap.
• Overlays a live viewport rectangle that updates as the user pans or zooms the stage.

Use it to give users a bird’s-eye view of complex or zoomed-in canvases, making navigation more intuitive.

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

const instance = new Weave({
  ...
  plugins: [
    ...,
    new WeaveStageMinimapPlugin({ 
      config: { 
        getContainer: () => HTMLElement; // Function to define where to mount the minimap
        id: string; // Id to identify the container of the minimap
        width: number; // Width of the minimap
        fitToContentPadding: number; // Sets a padding to the stage image generated, useful if you're setting a padding when fit to stage zooming
      } 
    }), 
  ]
})