text: (window.webpackJsonp=window.webpackJsonp||[]).push([[23],{374:function(t,e,s){"use strict";s.r(e);var a=s(25),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"multi-selection"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#multi-selection"}},[t._v("#")]),t._v(" Multi Selection")]),t._v(" "),s("p",[t._v('By default, clicking a node will deselect all other other nodes. You can, however, select multiple nodes in the graph by toggling the multi selection mode on and off. This is typically implemented together with keydown and keyup listeners, where the mode is toggled on if the user holds down a key such as "ctrl", and then toggled off when they let go of said key.')]),t._v(" "),s("h2",{attrs:{id:"selection-lasso"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selection-lasso"}},[t._v("#")]),t._v(" Selection Lasso")]),t._v(" "),s("p",[t._v("You can also use the selection lasso to select an entire area of the graph. This is, similarly, done by toggling the lasso mode on and off. When the mode is on and you click/drag your mouse over the canvas the lasso will appear, and all nodes/edge labels that are completely covered by the lasso will have their selection be toggled.")]),t._v(" "),s("h2",{attrs:{id:"dragging-pinning-multiple-nodes-simultaneously"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dragging-pinning-multiple-nodes-simultaneously"}},[t._v("#")]),t._v(" Dragging/pinning multiple nodes simultaneously")]),t._v(" "),s("p",[t._v("You can drag multiple nodes on the canvas simultaneously by toggling the selection drag mode on and off. Toggling it on means that if a selected node is dragged then all other selected nodes will be moved an identical amount of pixels.")]),t._v(" "),s("p",[t._v("Consider the following example:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("graph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMultiSelectMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngraph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMultiSelectMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngraph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMultiSelectDragMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngraph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMultiSelectDragMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngraph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLassoMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\ngraph"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLassoMode")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])])}),[],!1,null,null,null);e.default=n.exports}}]);