@antv/g6
Version:
graph visualization frame work
1 lines • 45.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-cb10aedb611ae91c5527740ba7096ca9-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 3.1.4 版本中新增了 <code class=\"language-text\">lock()</code>、<code class=\"language-text\">unlock()</code> 和 <code class=\"language-text\">hasLocked()</code> 三个 API，方便用户锁定某个节点。默认情况下，当锁定某个节点后，拖动节点时锁定的节点不会有任何反应，但拖动画布和缩放画布时，仍然会对锁定的节点有影响，如果不想让锁定的节点收到拖动画布和缩放画布的影响，可以通过<a href=\"https://www.yuque.com/antv/g6/self-behavior\" target=\"_self\" rel=\"nofollow\">自定义 Behavior</a> 的方式来实现。</p>\n<h2 id=\"拖动画布时候不处理锁定的节点\"><a 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\"><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></a>拖动画布时候不处理锁定的节点</h2>\n<p>G6 内置的 <code class=\"language-text\">drag-canvas</code> 不区分节点是否锁定，全部一视同仁。绝大数情况下，这种行为是完全没问题的，但某些业务可能会要求锁定的节点，拖动画布时也不能移动，对于这种情况，可以通过重新定义拖动画布的 Behavior 来实现。</p>\n<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>\n<h2 id=\"缩放画布时不处理锁定的节点\"><a 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\"><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></a>缩放画布时不处理锁定的节点</h2>\n<p>默认情况下，G6 内置的 <code class=\"language-text\">zoom-canvas</code> 在缩放画布时候也会对锁定的节点缩放，如果缩放过程中不需要操作锁定的节点，则可以通过下面的方式来实现。</p>\n<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>"}