minimap.md

缩略图(Minimap)

提供通用的Minimap服务和专属小蝴蝶的设置选项

小蝴蝶中使用

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

// 停止使用
canvas.setMinimap(false)

属性说明（options）

root <DOMNode>（必填）

  画布容器

height <Number> (选填)

  缩略图高度，默认值：200

width <Number> (选填)

  缩略图宽宽度，默认值：200

className <String> (选填)

  缩略图容器 class name，默认值：butterfly-minimap-container

containerStyle <Object> (选填)

  缩略图容器 css

viewportStyle <Object> (选填)

  视口 css

backgroudStyle <Object> (选填)

  背景 css

nodeColor <String> (选填)

  节点颜色，默认值：rgba(255, 103, 101, 1)

groupColor <String> (选填)

  节点组颜色，默认值：rgba(0, 193, 222, 1)

nodes <Array> (选填)

  节点数据，默认值：[ ]

interface Node {
  id: number | string;    // 节点ID
  group: number | string; // 节点组ID
  left: number;           // 横坐标
  top: number;            // 纵坐标
  width: number;          // 宽度
  height: number;         // 高度
  minimapActive: boolean; // 当前是否处于激活态
}

groups <Array> (选填)

  节点组数据，默认值：[ ]

interface Group {
  id: number | string;      // 节点组ID
  left: number;             // 横坐标
  top: number;              // 纵坐标
  width: number;            // 宽度  
  height: number;           // 高度
  options: {
    minimapActive: boolean; // 当前是否处于激活态
  }
}

offset <Array> (选填)

  画布偏移信息，默认值：[0, 0]

zoom <Number> (选填)

  画布当前缩放比，默认值：1

move <Function>（必填）

  缩略图互动函数, 用于移动画布, 参考小蝴蝶的move

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

terminal2canvas <Function> （必填）

  互动函数, 屏幕坐标到画布坐标的转换

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

canvas2terminal <Function>（必填）

  互动函数, 画布坐标转换到屏幕坐标

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

safeDistance <Number> (选填)

  安全距离，用于限制用户将视口拖出minimap，默认值：20

activeNodeColor <String> (选填)

  高亮的节点的颜色，默认值：rgba(255, 253, 76, 1)

activeGroupColor <String> (选填)

  高亮的节点组的颜色，默认值：rgba(255, 253, 76, 1)

events <Number> (选填)

  触发minimap重绘的事件，默认值：[ ]

其他系统中使用

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

// 新建一个 Minimap
minimap = new Minimap({
  root: HTMLElement,
  move: () => null,
  terminal2canvas: () => null,
  // 传入初始数据, 用于初始渲染
  nodes: [],
  groups: [],
  zoom: 1,
  offset: []
});

// 更新 Minimap 数据
minimap.update({
  nodes: this.nodes,
  groups: this.groups,
  zoom: this.getZoom(),
  offset: this.getOffset()
});

// 销毁
minimap.destroy();