Ant-x6 minimap 解决方法

用于解决 x6 minimap 插件位置错乱问题

bug 如下：

解决办法

import { CssLoader, Dom, View, Graph } from '@antv/x6'
import { content } from './style/raw'
const __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  const c = arguments.length; let r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc; let d
  if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') r = Reflect.decorate(decorators, target, key, desc)
  else for (let i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r
  return c > 3 && r && Object.defineProperty(target, key, r), r
}
export class MiniMap extends View {
  constructor (options) {
    super()
    this.name = 'minimap'
    this.options = Object.assign(Object.assign({}, Util.defaultOptions), options)
    CssLoader.ensure(this.name, content)
  }

  init (graph) {
    this.graph = graph
    this.container = document.createElement('div')
    Dom.addClass(this.container, this.prefixClassName(ClassName.root))
    const graphContainer = document.createElement('div')
    this.container.appendChild(graphContainer)
    Dom.css(this.container, {
      width: this.options.width,
      height: this.options.height,
      padding: this.options.padding
    })
    if (this.options.container) {
      this.options.container.appendChild(this.container)
    }
    this.sourceGraph = this.graph
    const targetGraphOptions = Object.assign(Object.assign({}, this.options.graphOptions), {
      container: graphContainer,
      model: this.sourceGraph.model,
      interacting: false,
      panning: false,
      mousewheel: false,
      grid: false,
      background: false,
      embedding: false
    })
    this.targetGraph = this.options.createGraph
      ? this.options.createGraph(targetGraphOptions)
      : new Graph(targetGraphOptions)
    this.updatePaper(this.sourceGraph.options.width, this.sourceGraph.options.height)
    this.startListening()
  }

  startListening () {
    this.sourceGraph.on('translate', this.onTransform, this)
    this.sourceGraph.on('scale', this.onTransform, this)
    this.sourceGraph.on('model:updated', this.onModelUpdated, this)
    this.sourceGraph.on('resize', this.updatePaper, this)
  }

  stopListening () {
    this.sourceGraph.off('translate', this.onTransform, this)
    this.sourceGraph.off('scale', this.onTransform, this)
    this.sourceGraph.off('model:updated', this.onModelUpdated, this)
    this.sourceGraph.off('resize', this.updatePaper, this)
  }

  onRemove () {
    this.stopListening()
    this.targetGraph.dispose(false)
  }

  onModelUpdated () {
    this.targetGraph.zoomTo(0.3, {
      center: {
        x: 0,
        y: 0
      }
    })
  }

  updatePaper (w, h) {
    let width
    let height
    if (typeof w === 'object') {
      width = w.width
      height = w.height
    } else {
      width = w
      height = h
    }
    const origin = this.sourceGraph.options
    const scale = this.targetGraph.scale()
    const maxWidth = this.options.width - 2 * this.options.padding
    const maxHeight = this.options.height - 2 * this.options.padding
    width /= scale.sx; // eslint-disable-line
    height /= scale.sy; // eslint-disable-line
    this.ratio = Math.min(maxWidth / width, maxHeight / height)
    const ratio = this.ratio
    const x = (origin.x * ratio) / scale.sx
    const y = (origin.y * ratio) / scale.sy
    width *= ratio; // eslint-disable-line
    height *= ratio; // eslint-disable-line
    this.targetGraph.resize(width, height)
    this.targetGraph.translate(x, y)
    return this
  }

  dispose () {
    this.remove()
    CssLoader.clean(this.name)
  }
}
__decorate([
  View.dispose()
], MiniMap.prototype, 'dispose', null)
let ClassName;
(function (ClassName) {
  ClassName.root = 'widget-minimap'
  ClassName.viewport = `${ClassName.root}-viewport`
  ClassName.zoom = `${ClassName.viewport}-zoom`
})(ClassName || (ClassName = {}))
let Util;
(function (Util) {
  Util.defaultOptions = {
    width: 300,
    height: 200,
    padding: 10,
    scalable: true,
    minScale: 0.01,
    maxScale: 16,
    graphOptions: {},
    createGraph: (options) => new Graph(options)
  }
})(Util || (Util = {}))
// # sourceMappingURL=index.js.map

将 node_modules 里面的 x6-plugin-minimap 复制出来，调整里面 index.js代码如上面例子所示

import { MiniMap } from '@/components/x6-plugin-minimap/index.js'

graphEditor.use(
  new MiniMap({
    container: document.querySelector('#editor-minimap-content'),
    width: graph.info.width * 0.3,
    height: graph.info.height * 0.3,
    padding: 0,
    graphOptions: {
      scaling: {
        min: 0.3,
        max: 0.3
      }
    }
  })
)

例子