minimap.md

Minimap

Provide public Minimap services and settings property for butterfly

Usage for butterfly

// in butterfly
canvas.setMinimap(true, {/* options */})

// close minimap
canvas.setMinimap(false)

Property（options）

root <DOMNode>（Require）

  root canvas dom

height <Number> (Optional)

  minimap height，default：200

width <Number> (Optional)

  minimap width，default：200

className <String> (Optional)

  minimap container class name，default：butterfly-minimap-container

containerStyle <Object> (Optional)

  minimap container css

viewportStyle <Object> (Optional)

  minimap view css

backgroudStyle <Object> (Optional)

  minimap backgroud css

nodeColor <String> (Optional)

  node color，default：rgba(255, 103, 101, 1)

groupColor <String> (Optional)

  group color，default：rgba(0, 193, 222, 1)

nodes <Array> (Optional)

  group data，default：[ ]

interface Node {
  id: number | string;    // Node ID
  group: number | string; // Node group ID
  left: number;           // Abscissa
  top: number;            // Y-axis
  width: number;          // width
  height: number;         // height
  minimapActive: boolean; // Is currently active
}

groups <Array> (Optional)

  group data，default：[ ]

interface Group {
  id: number | string;      // Node group ID
  left: number;             // Abscissa
  top: number;              // Y-axis
  width: number;            // width  
  height: number;           // height
  options: {
    minimapActive: boolean; // Is currently active
  }
}

offset <Array> (Optional)

  canvas offset，default：[0, 0]

zoom <Number> (Optional)

  canvas zoom，default：1

move <Function>（Require）

  minimap interaction function for moving the canvas, referring to butterfly's move function

interface MoveFn {
  ([x: number, y: number]): void
}

terminal2canvas <Function> （Require）

  interaction function for butterfly's convert coordinate the canvas

interface Term2CvsFn {
  ([x: number, y: number]): [x: number, y: number]
}

canvas2terminal <Function>（Require）

  interaction function for canvas's convert to coordinate of screen

interface Cvs2TermFn {
  ([x: number, y: number]): [x: number, y: number]
}

safeDistance <Number> (Optional)

  safe distance to protect user from moving viewport window outside of minimap，default：20

activeNodeColor <String> (Optional)

  active node color，default：rgba(255, 253, 76, 1)

activeGroupColor <String> (Optional)

  active group color，default：rgba(255, 253, 76, 1)

events <Number> (Optional)

  events to call minimap redraw，default：[ ]

Used in other systems

// in other system
const Minimap = require('butterfly-dag').Minimap;

// Create a Minimap
minimap = new Minimap({
  root: HTMLElement,
  move: () => null,
  terminal2canvas: () => null,
  // Incoming initial data for initial rendering
  nodes: [],
  groups: [],
  zoom: 1,
  offset: []
});

// Update Minimap data
minimap.update({
  nodes: this.nodes,
  groups: this.groups,
  zoom: this.getZoom(),
  offset: this.getOffset()
});

// destroy
minimap.destroy();