mind-map/dist/js/chunk-2d21e7f1.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d21e7f1"],{d68a:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this;e._self._c;return e._m(0)},i=[function(){var e=this,t=e._self._c;return t("div",[t("h1",[e._v("OuterFrame plugin")]),t("blockquote",[t("p",[e._v("v0.10.2+")])]),t("p",[e._v("This plugin is used to implement bounding box functionality.")]),t("h2",[e._v("Register")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[e._v("import")]),e._v(" MindMap "),t("span",{staticClass:"hljs-keyword"},[e._v("from")]),e._v(" "),t("span",{staticClass:"hljs-string"},[e._v("'simple-mind-map'")]),e._v("\n"),t("span",{staticClass:"hljs-keyword"},[e._v("import")]),e._v(" OuterFrame "),t("span",{staticClass:"hljs-keyword"},[e._v("from")]),e._v(" "),t("span",{staticClass:"hljs-string"},[e._v("'simple-mind-map/src/plugins/OuterFrame.js'")]),e._v("\nMindMap.usePlugin(OuterFrame)\n")])]),t("p",[e._v("After registration and instantiation of "),t("code",[e._v("MindMap")]),e._v(", the instance can be obtained through "),t("code",[e._v("mindMap.outerFrame")]),e._v(".")]),t("p",[e._v("The application can refer to the code in this section of the demo: "),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue"}},[e._v("NodeOuterFrame.vue")]),e._v("。")]),t("h2",[e._v("Command")]),t("p",[e._v("This plugin will register the 'ADD_OUTER_FRAME' command with the mind map to add bounding boxes to nodes:")]),t("pre",{staticClass:"hljs"},[t("code",[e._v("mindMap.execCommand("),t("span",{staticClass:"hljs-string"},[e._v("'ADD_OUTER_FRAME'")]),e._v(", appointNodes, config = {})\n")])]),t("ul",[t("li",[t("p",[t("code",[e._v("appointNodes")]),e._v("：Specify the node instance node to add the bounding box to, which can be a single node instance or an array of node instances. If passing '[]' or 'null', the bounding box will be added to the currently active node on the canvas")])]),t("li",[t("p",[t("code",[e._v("config")]),e._v("：Outline configuration, object format, and fields are as follows:")])])]),t("table",[t("thead",[t("tr",[t("th",[e._v("Field")]),t("th",[e._v("Type")]),t("th",[e._v("Default")]),t("th",[e._v("Desc")])])]),t("tbody",[t("tr",[t("td",[e._v("radius")]),t("td",[e._v("Number")]),t("td",[e._v("5")]),t("td",[e._v("Size of rounded corners on the outer frame")])]),t("tr",[t("td",[e._v("strokeWidth")]),t("td",[e._v("Number")]),t("td",[e._v("2")]),t("td",[e._v("Outer border width")])]),t("tr",[t("td",[e._v("strokeColor")]),t("td",[e._v("String")]),t("td",[e._v("#0984e3")]),t("td",[e._v("Outer border color")])]),t("tr",[t("td",[e._v("strokeDasharray")]),t("td",[e._v("String")]),t("td",[e._v("5,5")]),t("td",[e._v("Outer border dashed line")])]),t("tr",[t("td",[e._v("fill")]),t("td",[e._v("String")]),t("td",[e._v("rgba(9,132,227,0.05)")]),t("td",[e._v("Outer frame fill color")])])])]),t("h2",[e._v("Event")]),t("h3",[e._v("outer_frame_active")]),t("p",[e._v("Triggered when clicking to activate a certain bounding box. The callback function takes three parameters: el（Outer frame elements,The rect element of library @svgdotjs/svg.js）, node（The parent node instance of the node to which this scope belongs）, range（Range interval, relative to node）")]),t("p",[e._v("The application can listen to this event to retrieve the currently activated bounding box, retrieve its configuration, and echo it to the page. Since the scope may contain multiple nodes, the first node instance is usually taken. If you want to retrieve the position of the bounding box on the page, you can call the 'el.rbox' method:")]),t("pre",{staticClass:"hljs"},[t("code",[e._v("mindMap.on("),t("span",{staticClass:"hljs-string"},[e._v("'outer_frame_active'")]),e._v(", "),t("span",{staticClass:"hljs-function"},[e._v("("),t("span",{staticClass:"hljs-params"},[e._v("el, parentNode, range")]),e._v(") =>")]),e._v(" {\n    "),t("span",{staticClass:"hljs-comment"},[e._v("// Take the bounding box style of the first node within the range")]),e._v("\n    "),t("span",{staticClass:"hljs-keyword"},[e._v("const")]),e._v(" firstNode = parentNode.children[range["),t("span",{staticClass:"hljs-number"},[e._v("0")]),e._v("]]\n    "),t("span",{staticClass:"hljs-keyword"},[e._v("const")]),e._v(" firstNodeOuterFrame = firstNode.getData("),t("span",{staticClass:"hljs-string"},[e._v("'outerFrame'")]),e._v(")\n    "),t("span",{staticClass:"hljs-comment"},[e._v("// Obtain the position and size information of the bounding box, where you can render your configuration float layer")]),e._v("\n    "),t("span",{staticClass:"hljs-keyword"},[e._v("const")]),e._v(" { x, y, width, height } = el.rbox()\n})\n")])]),t("h3",[e._v("outer_frame_delete")]),t("p",[e._v("Triggered when deleting the currently active bounding box on the canvas.")]),t("h2",[e._v("Methods")]),t("h3",[e._v("getActiveOuterFrame()")]),t("p",[e._v("Get the currently activated bounding box data. Return an object with the following structure:")]),t("pre",{staticClass:"hljs"},[t("code",[e._v("{\n    el,\n    node,\n    range\n}\n")])]),t("h3",[e._v("updateActiveOuterFrame(config = {})")]),t("p",[e._v("Update the currently active bounding box. After executing this method, please immediately hide your style panel as it will clear the currently active bounding box.")]),t("h3",[e._v("removeActiveOuterFrame()")]),t("p",[e._v("Delete the currently active bounding box.")]),t("h3",[e._v("getRangeNodeList(node, range)")]),t("p",[e._v("Get a list of boxed child nodes within a specified range of a node.")]),t("h3",[e._v("clearActiveOuterFrame()")]),t("p",[e._v("Clear the currently active bounding box.")])])}],o={},s=o,r=n("2877"),d=Object(r["a"])(s,a,i,!1,null,null,null);t["default"]=d.exports}}]);