Weave.js

WeaveStageMinimapPlugin

Provides a scaled-down preview of the stage content

Overview

The WeaveStageMinimapPlugin class represents a plugin that renders a scaled-down preview of the stage content on a specified DOM node, 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.

The class extends the WeavePlugin class

Name

This plugin name property value is stageMinimap.

Import

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

Instantiation

new WeaveStageMinimapPlugin(params: WeaveStageMinimapPluginParams);

TypeScript types

type WeaveStageMinimapPluginStyle = {
  viewportReference: Konva.RectConfig;
};

type WeaveStageMinimapPluginConfig = {
  getContainer: () => HTMLElement;
  id: string;
  width: number;
  fitToContentPadding: number;
  style: WeaveStageMinimapPluginStyle;
};

type WeaveStageMinimapPluginParams = {
  config: Pick<
    WeaveStageMinimapPluginConfig,
    "getContainer" | "id" | "width" | "fitToContentPadding"
  > &
    DeepPartial<Pick<WeaveStageMinimapPluginConfig, "style">>;
};

Parameters

For WeaveStageMinimapPluginParams:

Property Type Required Description

config

WeaveStageMinimapPluginConfig

Required

Config parameters for the plugin.

For WeaveStageMinimapPluginConfig:

Property Type Required Description

getContainer

() ⇒ HTMLElement

Required

A function that determines the DOM node where to render the minimap.

id

string

Required

The id of the Konva stage container for the minimap.

width

number

Required

The width of the minimap, by default, the height is calculated based on the aspect ratio of the window.

fitToContentPadding

number

Required

Padding to apply to the stage generated image in order to make a 1:1 if you fit to content when zooming.

style

WeaveStageMinimapPluginStyle

Style configuration for the minimap