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

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0ae956"],{"0b4b":function(t,s,e){"use strict";e.r(s);var a=function(){var t=this;t._self._c;return t._m(0)},v=[function(){var t=this,s=t._self._c;return s("div",[s("h1",[t._v("OuterFrame 插件")]),s("blockquote",[s("p",[t._v("v0.10.2+")])]),s("p",[t._v("该插件用于实现外框功能。")]),s("h2",[t._v("注册")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" MindMap "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'simple-mind-map'")]),t._v("\n"),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" OuterFrame "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'simple-mind-map/src/plugins/OuterFrame.js'")]),t._v("\nMindMap.usePlugin(OuterFrame)\n")])]),s("p",[t._v("注册完且实例化"),s("code",[t._v("MindMap")]),t._v("后可通过"),s("code",[t._v("mindMap.outerFrame")]),t._v("获取到该实例。")]),s("p",[t._v("应用使用可参考Demo该部分的代码："),s("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/web/src/pages/Edit/components/NodeOuterFrame.vue"}},[t._v("NodeOuterFrame.vue")]),t._v("。")]),s("h2",[t._v("命令")]),s("p",[t._v("该插件会向思维导图注册"),s("code",[t._v("ADD_OUTER_FRAME")]),t._v("命令，用于给节点添加外框：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'ADD_OUTER_FRAME'")]),t._v(", appointNodes, config = {})\n")])]),s("ul",[s("li",[s("p",[s("code",[t._v("appointNodes")]),t._v("：指定要添加外框的节点实例节点，可以是单个节点实例，也可以是节点实例数组，如果传递"),s("code",[t._v("[]")]),t._v("或"),s("code",[t._v("null")]),t._v("，则会向画布当前激活的节点添加外框")])]),s("li",[s("p",[s("code",[t._v("config")]),t._v("：外框配置，对象格式，字段如下：")])])]),s("table",[s("thead",[s("tr",[s("th",[t._v("字段名称")]),s("th",[t._v("类型")]),s("th",[t._v("默认值")]),s("th",[t._v("描述")])])]),s("tbody",[s("tr",[s("td",[t._v("radius")]),s("td",[t._v("Number")]),s("td",[t._v("5")]),s("td",[t._v("外框圆角大小")])]),s("tr",[s("td",[t._v("strokeWidth")]),s("td",[t._v("Number")]),s("td",[t._v("2")]),s("td",[t._v("外框边框宽度")])]),s("tr",[s("td",[t._v("strokeColor")]),s("td",[t._v("String")]),s("td",[t._v("#0984e3")]),s("td",[t._v("外框边框颜色")])]),s("tr",[s("td",[t._v("strokeDasharray")]),s("td",[t._v("String")]),s("td",[t._v("5,5")]),s("td",[t._v("外框边框虚线")])]),s("tr",[s("td",[t._v("fill")]),s("td",[t._v("String")]),s("td",[t._v("rgba(9,132,227,0.05)")]),s("td",[t._v("外框填充颜色")])])])]),s("h2",[t._v("事件")]),s("h3",[t._v("outer_frame_active")]),s("p",[t._v("当点击激活某个外框时触发。回调函数接收三个参数：el（外框元素，@svgdotjs/svg.js库的rect元素）, node（该范围所属节点的父节点实例）, range（范围区间，相对于node）")]),s("p",[t._v("应用可以监听该事件来获取当前激活的外框，获取到其配置回显到页面，因为范围可能包含多个节点，所以通常取第一个节点实例，如果要获取外框在页面上的位置，可以调用"),s("code",[t._v("el.rbox")]),t._v("方法：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.on("),s("span",{staticClass:"hljs-string"},[t._v("'outer_frame_active'")]),t._v(", "),s("span",{staticClass:"hljs-function"},[t._v("("),s("span",{staticClass:"hljs-params"},[t._v("el, parentNode, range")]),t._v(") =>")]),t._v(" {\n    "),s("span",{staticClass:"hljs-comment"},[t._v("// 取范围内第一个节点的外框样式")]),t._v("\n    "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" firstNode = parentNode.children[range["),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("]]\n    "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" firstNodeOuterFrame = firstNode.getData("),s("span",{staticClass:"hljs-string"},[t._v("'outerFrame'")]),t._v(")\n    "),s("span",{staticClass:"hljs-comment"},[t._v("// 获取外框的位置大小信息，你可以在该位置渲染你的配置浮层")]),t._v("\n    "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" { x, y, width, height } = el.rbox()\n})\n")])]),s("h3",[t._v("outer_frame_delete")]),s("p",[t._v("删除画布当前激活的外框时触发。")]),s("h2",[t._v("方法")]),s("h3",[t._v("getActiveOuterFrame()")]),s("p",[t._v("获取当前激活的外框数据。返回一个对象，结构如下：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("{\n    el,\n    node,\n    range\n}\n")])]),s("h3",[t._v("updateActiveOuterFrame(config = {})")]),s("p",[t._v("更新当前激活的外框。执行了该方法后请立即隐藏你的样式面板，因为会清除当前激活的外框。")]),s("h3",[t._v("removeActiveOuterFrame()")]),s("p",[t._v("删除当前激活的外框。")]),s("h3",[t._v("getRangeNodeList(node, range)")]),s("p",[t._v("获取某个节点指定范围的带外框的子节点列表。")]),s("h3",[t._v("clearActiveOuterFrame()")]),s("p",[t._v("清除当前激活的外框。")])])}],_={},r=_,n=e("2877"),i=Object(n["a"])(r,a,v,!1,null,null,null);s["default"]=i.exports}}]);