@antv/g6
Version:
graph visualization frame work
1 lines • 49.7 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-cb10aedb611ae91c5527740ba7096ca9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 3.1.4 版本中新增了 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":17,"offset":17}}},{"type":"raw","value":"<code class=\"language-text\">lock()</code>","position":{"start":{"line":2,"column":17,"offset":17},"end":{"line":2,"column":25,"offset":25}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":25,"offset":25},"end":{"line":2,"column":26,"offset":26}}},{"type":"raw","value":"<code class=\"language-text\">unlock()</code>","position":{"start":{"line":2,"column":26,"offset":26},"end":{"line":2,"column":36,"offset":36}}},{"type":"text","value":" 和 ","position":{"start":{"line":2,"column":36,"offset":36},"end":{"line":2,"column":39,"offset":39}}},{"type":"raw","value":"<code class=\"language-text\">hasLocked()</code>","position":{"start":{"line":2,"column":39,"offset":39},"end":{"line":2,"column":52,"offset":52}}},{"type":"text","value":" 三个 API，方便用户锁定某个节点。默认情况下，当锁定某个节点后，拖动节点时锁定的节点不会有任何反应，但拖动画布和缩放画布时，仍然会对锁定的节点有影响，如果不想让锁定的节点收到拖动画布和缩放画布的影响，可以通过","position":{"start":{"line":2,"column":52,"offset":52},"end":{"line":2,"column":158,"offset":158}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-behavior","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义 Behavior","position":{"start":{"line":2,"column":159,"offset":159},"end":{"line":2,"column":171,"offset":171}}}],"position":{"start":{"line":2,"column":158,"offset":158},"end":{"line":2,"column":217,"offset":217}}},{"type":"text","value":" 的方式来实现。","position":{"start":{"line":2,"column":217,"offset":217},"end":{"line":2,"column":225,"offset":225}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":225,"offset":225}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"拖动画布时候不处理锁定的节点"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%8B%96%E5%8A%A8%E7%94%BB%E5%B8%83%E6%97%B6%E5%80%99%E4%B8%8D%E5%A4%84%E7%90%86%E9%94%81%E5%AE%9A%E7%9A%84%E8%8A%82%E7%82%B9","aria-label":"拖动画布时候不处理锁定的节点 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"拖动画布时候不处理锁定的节点","position":{"start":{"line":5,"column":4,"offset":231},"end":{"line":5,"column":18,"offset":245}}}],"position":{"start":{"line":5,"column":1,"offset":228},"end":{"line":5,"column":18,"offset":245}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 内置的 ","position":{"start":{"line":6,"column":1,"offset":246},"end":{"line":6,"column":8,"offset":253}}},{"type":"raw","value":"<code class=\"language-text\">drag-canvas</code>","position":{"start":{"line":6,"column":8,"offset":253},"end":{"line":6,"column":21,"offset":266}}},{"type":"text","value":" 不区分节点是否锁定，全部一视同仁。绝大数情况下，这种行为是完全没问题的，但某些业务可能会要求锁定的节点，拖动画布时也不能移动，对于这种情况，可以通过重新定义拖动画布的 Behavior 来实现。","position":{"start":{"line":6,"column":21,"offset":266},"end":{"line":6,"column":119,"offset":364}}}],"position":{"start":{"line":6,"column":1,"offset":246},"end":{"line":6,"column":119,"offset":364}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> <span class=\"token constant\">G6</span> <span class=\"token keyword\">from</span> '@antv<span class=\"token operator\">/</span>g6<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> Util <span class=\"token operator\">=</span> <span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span>Util<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> abs <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span>abs<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token constant\">DRAG_OFFSET</span> <span class=\"token operator\">=</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> body <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span>body<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token constant\">ALLOW_EVENTS</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">16</span><span class=\"token punctuation\">,</span> <span class=\"token number\">17</span><span class=\"token punctuation\">,</span> <span class=\"token number\">18</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerBehavior</span><span class=\"token punctuation\">(</span><span class=\"token string\">'drag-canvas-exclude-lockedNode'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">getDefaultCfg</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n direction<span class=\"token punctuation\">:</span> <span class=\"token string\">'both'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">getEvents</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'canvas:mousedown'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseDown'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'canvas:mousemove'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseMove'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'canvas:mouseup'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseUp'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'canvas:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseUp'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'canvas:mouseleave'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onOutOfRange'</span><span class=\"token punctuation\">,</span>\n keyup<span class=\"token punctuation\">:</span> <span class=\"token string\">'onKeyUp'</span><span class=\"token punctuation\">,</span>\n keydown<span class=\"token punctuation\">:</span> <span class=\"token string\">'onKeyDown'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">updateViewport</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> origin <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> clientX <span class=\"token operator\">=</span> <span class=\"token operator\">+</span>e<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> clientY <span class=\"token operator\">=</span> <span class=\"token operator\">+</span>e<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token function\">isNaN</span><span class=\"token punctuation\">(</span>clientX<span class=\"token punctuation\">)</span> <span class=\"token operator\">||</span> <span class=\"token function\">isNaN</span><span class=\"token punctuation\">(</span>clientY<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">let</span> dx <span class=\"token operator\">=</span> clientX <span class=\"token operator\">-</span> origin<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">let</span> dy <span class=\"token operator\">=</span> clientY <span class=\"token operator\">-</span> origin<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'direction'</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">===</span> <span class=\"token string\">'x'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n dy <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'direction'</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">===</span> <span class=\"token string\">'y'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n dx <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> clientX<span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> clientY\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 和内置 drag-canvas 不同的地方是在这里</span>\n <span class=\"token keyword\">const</span> lockedNodes <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span><span class=\"token function\">hasLocked</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n lockedNodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">translate</span><span class=\"token punctuation\">(</span>dx<span class=\"token punctuation\">,</span> dy<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onMouseDown</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> e<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> e<span class=\"token punctuation\">.</span>clientY <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onMouseMove</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n e <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">cloneEvent</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span> <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin <span class=\"token operator\">&&</span> <span class=\"token operator\">!</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token function\">abs</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin<span class=\"token punctuation\">.</span>x <span class=\"token operator\">-</span> e<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token function\">abs</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin<span class=\"token punctuation\">.</span>y <span class=\"token operator\">-</span> e<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">)</span> <span class=\"token operator\"><</span> <span class=\"token constant\">DRAG_OFFSET</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">shouldBegin</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n e<span class=\"token punctuation\">.</span>type <span class=\"token operator\">=</span> <span class=\"token string\">'dragstart'</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">emit</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas:dragstart'</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n e<span class=\"token punctuation\">.</span>type <span class=\"token operator\">=</span> <span class=\"token string\">'drag'</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">emit</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas:drag'</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">shouldUpdate</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">updateViewport</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onMouseUp</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n e <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">cloneEvent</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">shouldEnd</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">updateViewport</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n e<span class=\"token punctuation\">.</span>type <span class=\"token operator\">=</span> <span class=\"token string\">'dragend'</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">emit</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas:dragend'</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">endDrag</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">endDrag</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>origin <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 终止时需要判断此时是否在监听画布外的 mouseup 事件，若有则解绑</span>\n <span class=\"token keyword\">const</span> fn <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>fn<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>fn<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n body<span class=\"token punctuation\">.</span><span class=\"token function\">removeEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> fn<span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>fn <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 若在拖拽时，鼠标移出画布区域，此时放开鼠标无法终止 drag 行为。在画布外监听 mouseup 事件，放开则终止</span>\n <span class=\"token function\">onOutOfRange</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>dragging<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> canvasElement <span class=\"token operator\">=</span> self<span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'el'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">fn</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>ev<span class=\"token punctuation\">.</span>target <span class=\"token operator\">!==</span> canvasElement<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n self<span class=\"token punctuation\">.</span><span class=\"token function\">onMouseUp</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>fn <span class=\"token operator\">=</span> fn<span class=\"token punctuation\">;</span>\n body<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'mouseup'</span><span class=\"token punctuation\">,</span> fn<span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onKeyDown</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> code <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>keyCode <span class=\"token operator\">||</span> e<span class=\"token punctuation\">.</span>which<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token constant\">ALLOW_EVENTS</span><span class=\"token punctuation\">.</span><span class=\"token function\">indexOf</span><span class=\"token punctuation\">(</span>code<span class=\"token punctuation\">)</span> <span class=\"token operator\">></span> <span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onKeyUp</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>keydown <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":8,"column":1,"offset":366},"end":{"line":149,"column":4,"offset":3665}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"缩放画布时不处理锁定的节点"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BC%A9%E6%94%BE%E7%94%BB%E5%B8%83%E6%97%B6%E4%B8%8D%E5%A4%84%E7%90%86%E9%94%81%E5%AE%9A%E7%9A%84%E8%8A%82%E7%82%B9","aria-label":"缩放画布时不处理锁定的节点 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"缩放画布时不处理锁定的节点","position":{"start":{"line":152,"column":4,"offset":3671},"end":{"line":152,"column":17,"offset":3684}}}],"position":{"start":{"line":152,"column":1,"offset":3668},"end":{"line":152,"column":17,"offset":3684}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"默认情况下，G6 内置的 ","position":{"start":{"line":153,"column":1,"offset":3685},"end":{"line":153,"column":14,"offset":3698}}},{"type":"raw","value":"<code class=\"language-text\">zoom-canvas</code>","position":{"start":{"line":153,"column":14,"offset":3698},"end":{"line":153,"column":27,"offset":3711}}},{"type":"text","value":" 在缩放画布时候也会对锁定的节点缩放，如果缩放过程中不需要操作锁定的节点，则可以通过下面的方式来实现。","position":{"start":{"line":153,"column":27,"offset":3711},"end":{"line":153,"column":78,"offset":3762}}}],"position":{"start":{"line":153,"column":1,"offset":3685},"end":{"line":153,"column":78,"offset":3762}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> <span class=\"token constant\">DELTA</span> <span class=\"token operator\">=</span> <span class=\"token number\">0.05</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerBehavior</span><span class=\"token punctuation\">(</span><span class=\"token string\">'zoom-canvas-exclude-lockedNode'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">getDefaultCfg</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n sensitivity<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n minZoom<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span><span class=\"token punctuation\">,</span>\n maxZoom<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">getEvents</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n wheel<span class=\"token punctuation\">:</span> <span class=\"token string\">'onWheel'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onWheel</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n e<span class=\"token punctuation\">.</span><span class=\"token function\">preventDefault</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">shouldUpdate</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> canvas <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> canvas<span class=\"token punctuation\">.</span><span class=\"token function\">getPointByClient</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> pixelRatio <span class=\"token operator\">=</span> canvas<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pixelRatio'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> sensitivity <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sensitivity'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">let</span> ratio <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 兼容IE、Firefox及Chrome</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>wheelDelta <span class=\"token operator\"><</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n ratio <span class=\"token operator\">=</span> <span class=\"token number\">1</span> <span class=\"token operator\">-</span> <span class=\"token constant\">DELTA</span> <span class=\"token operator\">*</span> sensitivity<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n ratio <span class=\"token operator\">=</span> <span class=\"token number\">1</span> <span class=\"token operator\">+</span> <span class=\"token constant\">DELTA</span> <span class=\"token operator\">*</span> sensitivity<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">const</span> zoom <span class=\"token operator\">=</span> ratio <span class=\"token operator\">*</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>zoom <span class=\"token operator\">></span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'maxZoom'</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">||</span> zoom <span class=\"token operator\"><</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'minZoom'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">zoom</span><span class=\"token punctuation\">(</span>ratio<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> point<span class=\"token punctuation\">.</span>x <span class=\"token operator\">/</span> pixelRatio<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> point<span class=\"token punctuation\">.</span>y <span class=\"token operator\">/</span> pixelRatio <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> lockedNodes <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span><span class=\"token function\">hasLocked</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n lockedNodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> matrix <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">clone</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getMatrix</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> center <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getModel</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n Util<span class=\"token punctuation\">.</span>mat3<span class=\"token punctuation\">.</span><span class=\"token function\">translate</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">,</span> matrix<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">-</span>center<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span>center<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n Util<span class=\"token punctuation\">.</span>mat3<span class=\"token punctuation\">.</span><span class=\"token function\">scale</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">,</span> matrix<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>ratio<span class=\"token punctuation\">,</span> ratio<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n Util<span class=\"token punctuation\">.</span>mat3<span class=\"token punctuation\">.</span><span class=\"token function\">translate</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">,</span> matrix<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>center<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> center<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">setMatrix</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">emit</span><span class=\"token punctuation\">(</span><span class=\"token string\">'wheelzoom'</span><span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":155,"column":1,"offset":3764},"end":{"line":207,"column":4,"offset":5274}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":209,"column":1,"offset":5276}}}}