feat(plugin): minimap #5603
feat(plugin): minimap #5603
Conversation
packages/g6/src/plugins/minimap.ts
Outdated
| options: { refresh, size, padding, mode, hideEdge }, | ||
| } = this; | ||
|
|
||
| await this.context.graph.render(); |
There was a problem hiding this comment.
不行 ,这个事件不会触发还是什么, minimap不会显示
packages/g6/src/plugins/minimap.ts
Outdated
| this.canvas.appendChild(group); | ||
| const minimapBBox = this.canvas.getRoot().getRenderBounds(); | ||
|
|
||
| const graphBBox = this.context.canvas.document.documentElement.getRenderBounds(); |
There was a problem hiding this comment.
context.canvas.getBounds 能够获取画布内元素的总体包围盒
packages/g6/src/plugins/minimap.ts
Outdated
| private cloneKeyShapes(shapes: (Node | Edge | Combo)[], group: Group = new Group()) { | ||
| // 建立 minimap shape 到 main shape 的映射关系到实例, 后面走入更新流程就不需要再clone了 | ||
| shapes.forEach((shape) => { | ||
| // graphItem 存的是引用? 原图上消失,这里就会是空? |
There was a problem hiding this comment.
理论上都是对象引用，但不应该回出现原图上消失，这里变为空的情况
packages/g6/src/plugins/minimap.ts
Outdated
| } | ||
|
|
||
| if (!minimapItem.destroyed) { | ||
| minimapItem.style = { ...minimapItem.style, ...graphItem.style }; |
There was a problem hiding this comment.
建议访问 .attributes 来获取样式，设置样式使用 .attr(...)
.style 是一个 proxy，通常用于获取/设置单个样式属性
There was a problem hiding this comment.
attr废弃了吧, 看描述还是使用style?
There was a problem hiding this comment.
废弃的只是 attr() 签名
通过 xxx.style = { ... } 的方式并不能正确的设置样式
packages/g6/src/plugins/minimap.ts
Outdated
| }); | ||
| } | ||
|
|
||
| public getEvents() { |
There was a problem hiding this comment.
这个方法没有用了，定义了也不会生效。更新的话需要显式监听
graph.on(GraphEvent.AFTER_ELEMENT_UPDATE, ...); // 在元素更新之后触发
packages/g6/src/plugins/minimap.ts
Outdated
| import { ID } from '@antv/graphlib'; | ||
| import { createDOM, debounce, uniqueId } from '@antv/util'; | ||
|
|
||
| import Moveable from 'moveable'; |
There was a problem hiding this comment.
如果只用到了简单的拖拽能力的话，建议内部实现逻辑就好了，这个包体积还是蛮大的
packages/g6/src/plugins/minimap.ts
Outdated
| import { ID } from '@antv/graphlib'; | ||
| import { createDOM, debounce, uniqueId } from '@antv/util'; | ||
|
|
||
| import Moveable from 'moveable'; |
packages/g6/src/plugins/minimap.ts
Outdated
| const controller_4 = new AbortController(); | ||
| const controller_5 = new AbortController(); | ||
|
|
||
| this.controllerList.push(controller_1, controller_2, controller_3, controller_4, controller_5); |
There was a problem hiding this comment.
这些 AbortController 没看到哪里在使用呢
packages/g6/src/plugins/minimap.ts
Outdated
| '<div class="g6-minimap-container" style="position: relative;height:100%" ></div>', | ||
| ); | ||
|
|
||
| // if (isSafari || isFireFox) { |
There was a problem hiding this comment.
内部实现的话使用原生 DragEvent 就好了，不用通过 mouse 事件模拟
There was a problem hiding this comment.
模拟不了吧, 拖动会复制一份出来,可以在整个屏幕拖动, 要实现鼠标跟随效果, 只能mouse模拟
moveable这个包, react-movable 支持treesharking, 原生js的不支持 有点蛋疼,
有没有其他的包推荐?
packages/g6/src/plugins/minimap.ts
Outdated
| const controller = new AbortController(); | ||
| const controller_2 = new AbortController(); | ||
| const controller_3 = new AbortController(); | ||
| this.controllerList.push(controller, controller_2, controller_3); |
packages/g6/src/plugins/minimap.ts
Outdated
| this.context.graph.on(GraphEvent.AFTER_RENDER, this.drawerCanvas.bind(this)); // 在元素更新之后触发 | ||
| this.context.graph.on(GraphEvent.AFTER_ELEMENT_STATE_CHANGE, this.handleUpdateCanvas.bind(this)); // 在元素更新之后触发 | ||
| this.context.graph.on(GraphEvent.AFTER_ELEMENT_VISIBILITY_CHANGE, this.handleVisibilityChange.bind(this)); // 在元素更新之后触发 | ||
| this.context.graph.on(GraphEvent.AFTER_ELEMENT_UPDATE, this.handleUpdateCanvas.bind(this)); // 在元素更新之后触发 |
There was a problem hiding this comment.
AFTER_ELEMENT_UPDATE 是针对单个元素的，这里建议监听一下事件：
- GraphEvent.AFTER_SIZE_CHANGE 画布尺寸变化
- GraphEvent.AFTER_DRAW 绘制完成（不包含布局）
- GraphEvent.AFTER_RENDER 渲染完成（包含布局）
建议将 drawCanvas 和 updateCanvas 合并成一个（例如 handleChange），这样 AFTER_DRAW 和 AFTER_RENDER 统一走这个事件回调就行了。不太建议监听元素事件，因为批量触发时会很频繁，还需要做防抖处理
packages/g6/src/plugins/minimap.ts
Outdated
| }; | ||
|
|
||
| public destroy(): void { | ||
| super.destroy(); |
No description provided.