+ 协成
+ 
峰
+
+
+ 协成
+
+
+ 
+ 木木
+
+
+ 
+ 好名字
+
+
+ 
+ Kyle
+
diff --git a/web/src/assets/avatar/Kyle.jpg b/web/src/assets/avatar/Kyle.jpg
new file mode 100644
index 00000000..5d7e507a
Binary files /dev/null and b/web/src/assets/avatar/Kyle.jpg differ
diff --git a/web/src/assets/avatar/好名字.jpg b/web/src/assets/avatar/好名字.jpg
new file mode 100644
index 00000000..9bed8adc
Binary files /dev/null and b/web/src/assets/avatar/好名字.jpg differ
diff --git a/web/src/assets/avatar/木木.jpg b/web/src/assets/avatar/木木.jpg
new file mode 100644
index 00000000..479cb04d
Binary files /dev/null and b/web/src/assets/avatar/木木.jpg differ
diff --git a/web/src/assets/img/docs/标记.jpg b/web/src/assets/img/docs/标记.jpg
new file mode 100644
index 00000000..c7146635
Binary files /dev/null and b/web/src/assets/img/docs/标记.jpg differ
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index fe876283..33f8b46d 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -41,6 +41,7 @@ let APIList = [
'rainbowLines',
'handDrawnLikeStyle',
'demonstrate',
+ 'notation',
'xmind',
'markdown',
'utils'
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index 16ac9ad3..9293c834 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -1,5 +1,35 @@
# Changelog
+## 0.10.1
+
+Fix:
+
+> 1.Fix the issue where the TouchEvent plugin triggers node input when clicking twice at different positions;
+>
+> 2.Fix / shortcut the issue of being able to retrieve child nodes of the root node;
+
+New:
+
+> 1.Add instantiation options for handling SVG objects before export;
+>
+> 2.Add instantiation options for cloned nodes when modifying drag and drop nodes;
+>
+> 3.Add a content layout completion event for distributing individual nodes;
+>
+> 4.Add instantiation options for intercepting node drag and drop;
+>
+> 5.Add instantiation options to restrict the maximum and minimum values of TouchEvent plugin's double finger scaling;
+>
+> 6.Add a node editing plugin;
+
+Demo:
+
+> 1.Add node marking function;
+>
+> 2.Fix the issue where the input box in the bottom right corner cannot be entered in demonstration mode;
+>
+> 3.Do not display directory, new, or open buttons when opening on the mobile end;
+
## 0.10.0
Major updates: Upgrade the interaction effect when dragging nodes;
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index 01f0a4cd..3e335f33 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -1,6 +1,27 @@
Fix:
+++1.Fix the issue where the TouchEvent plugin triggers node input when clicking twice at different positions;
+2.Fix / shortcut the issue of being able to retrieve child nodes of the root node;
+
New:
+++1.Add instantiation options for handling SVG objects before export;
+2.Add instantiation options for cloned nodes when modifying drag and drop nodes;
+3.Add a content layout completion event for distributing individual nodes;
+4.Add instantiation options for intercepting node drag and drop;
+5.Add instantiation options to restrict the maximum and minimum values of TouchEvent plugin's double finger scaling;
+6.Add a node editing plugin;
+
Demo:
++1.Add node marking function;
+2.Fix the issue where the input box in the bottom right corner cannot be entered in demonstration mode;
+3.Do not display directory, new, or open buttons when opening on the mobile end;
+
Major updates: Upgrade the interaction effect when dragging nodes;
Fix:
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 181f1fc1..3398c122 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -93,7 +93,7 @@ const mindMap = new MindMap({ | handleNodePasteImg（v0.9.2+） | null or Function | null | The processing method for pasting images from the clipboard on a node is to convert them into data:URL data and insert them into the node by default. You can use this method to upload image data to the server and save the URL of the image. An asynchronous method can be passed to receive image data of Blob type, and the specified structure needs to be returned: { url, size: {width, height} } | | | isLimitMindMapInCanvas（v0.9.2+） | Boolean | false | Whether to limit the mind map within the canvas. For example, when dragging to the right, the leftmost part of the mind map graphic will not be able to continue dragging to the right when it reaches the center of the canvas, and the same applies to other things | | | beforeShortcutRun（v0.9.9+） | Function、null | null | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） | | -| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（The underlying impact is on the moveNodeToCenter method of the render class） | | +| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | Whether to reset the scaling level to 100% when moving nodes to the canvas center, returning to the root node, and other operations（This option actually affects the render. moveNodeToCenter method, and the moveNodeToCenter method itself also has a second parameter, resetScale, to set whether to reset. If the resetScale parameter is not passed, then use resetScaleOnMoveNodeToCenter configuration; otherwise, use resetScale configuration） | | | createNodePrefixContent（v0.9.12+） | Function、null | null | Add additional node pre content.Pre content refers to the pre content in the area of the same line as the text, excluding the node image section.You can pass a function that takes the parameters of a node instance, Can return objects in {el, width, height} format, el is a DOM node object, width and height represent the width, height, and numerical type of the content. If custom content is not required, null can also be returned | | | createNodePostfixContent（v0.9.12+） | Function、null | null | Add additional node post content.Post content refers to the post content in the area of the same line as the text, excluding the node image section. The usage is the same as createNodePrefixContent | | @@ -159,6 +159,7 @@ If you want to add custom fields, you can add them to the same level as 'data' a | minExportImgCanvasScale（v0.7.0+） | Number | 2 | The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity | | | addContentToHeader（v0.9.9+） | Function、null | null | Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below | | | addContentToFooter（v0.9.9+） | Function、null | null | The basic definition is the same as addContentToHeader, adding custom content at the end | | +| handleBeingExportSvg（v0.10.1+） | Function、null | null | When exporting PNG, SVG, and PDF, the SVG data on the canvas will be obtained for cloning, and then exported through the cloned elements. If you want to do some processing on the cloned elements, such as adding, replacing, or modifying some of them, you can pass a processing function through this parameter to receive the SVG element object. After processing, you need to return the original SVG element object.（It should be noted that the node object refers to the element object of the @ svgdotjs/svg. js library, so you need to read the documentation of the library to operate this object） | | #### 2.1How to add custom content when exporting @@ -213,6 +214,8 @@ new MindMap({ | dragPlaceholderRectFill（v0.7.2+） | String | rgb(94, 200, 248) | The filling color of the schematic rectangle for the new position when dragging nodes. | | | dragPlaceholderLineConfig（v0.10.0+） | Object | { color: 'rgb(94, 200, 248)', width: 2 } | Style configuration of schematic lines for new positions when dragging nodes | | | dragOpacityConfig（v0.7.2+） | Object | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node | | +| beforeDragEnd（v0.10.1+） | null、Function | null | This function is called just before the drag is completed. The function receives an object as a parameter: {overlapNodeUid,prevNodeUid,nextNodeUid}, represents drag and drop information. If you want to prevent this drag and drop, you can return true. At this time, the node.drag event will not be triggered again. Functions can be asynchronous and return Promise instances | | +| handleDragCloneNode（v0.10.1+） | null、Function | null | When dragging a single node, the dragged node will be cloned. If you want to modify the cloned node, you can provide a processing function through this option, which receives the cloned node object.（It should be noted that the node object refers to the element object of the @svgdotjs/svg.js library, so you need to read the documentation of the library to operate this object） | | ### 5.Watermark plugin @@ -256,6 +259,8 @@ new MindMap({ | Field Name | Type | Default Value | Description | Required | | -------------------------------- | ------- | ---------------- | ------------------------------------------- | -------- | | disableTouchZoom（v0.8.1+） | Boolean | false | Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin | | +| minTouchZoomScale（v0.10.1+） | Number | 20 | Allow maximum and minimum scaling values, percentage, pass -1 to indicate no restrictions | | +| maxTouchZoomScale（v0.10.1+） | Number | -1 | Same as minTouchZoomScale | | ### 9.Scrollbar plugin @@ -579,6 +584,7 @@ Listen to an event. Event list: | exit_demonstrate（v0.9.11+） | Triggered when exiting demonstration mode | | | demonstrate_jump（v0.9.11+） | Trigger when switching steps in demonstration mode | currentStepIndex（The index of the steps currently played, counting from 0）、stepLength（Total number of playback steps） | | node_tag_click（v0.9.12+） | Click events on node labels | this(Current node instance)、item（Content of clicked tags） | +| node_layout_end（v0.10.1+） | Event where the content layout of a single node is completed | this(Current node instance) | ### emit(event, ...args) diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index d572773e..5b090b64 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -502,7 +502,7 @@
峰
+ 协成
+
+ 木木
+
+ 好名字
+
+ Kyle
+json、png、svg、pdf、markdown、xmind、txt, support import from json、xmind、markdownjson、png、svg、pdf、markdown、xmind、txt, support import from json、xmind、markdownThe official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:
-RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[收费]
+RichText（Node Rich Text Plugin）、Select（Mouse Multiple Selection Node Plugin）、Drag（Node drag plugin）、AssociativeLine（Associate Line Plugin）、Export（Export plugin）、KeyboardNavigation（Keyboard navigation plugin）、MiniMap（Mini Map Plugin）、Watermark（Watermark plugin）、TouchEvent（Mobile touch event support plugin）、NodeImgAdjust（Drag and adjust node image size plugin）、Search（Search plugin）、Painter（Node Format Brush Plugin）、Scrollbar（Scroll bar plugin）、Formula（Mathematical Formula Plugin）、Cooperate（Collaborative editing plugin）、RainbowLines（Rainbow Line Plugin）、Demonstrate（Demonstration mode plugin）、HandDrawnLikeStyle（Hand drawn style plugin）[charge]、Notation（Node marker plugin）[charge]
Features that will not be implemented in this project:
@@ -39,16 +39,16 @@ frameworks such as Vue and React, or without a framework.diff --git a/web/src/pages/Doc/en/render/index.md b/web/src/pages/Doc/en/render/index.md index 7e037d95..d5b80778 100644 --- a/web/src/pages/Doc/en/render/index.md +++ b/web/src/pages/Doc/en/render/index.md @@ -148,13 +148,13 @@ Move a node in front of another node. Move a node behind another node. -### moveNodeToCenter(node) +### moveNodeToCenter(node, resetScale) > v0.2.17+ -Move a node to the center of the canvas. +- `resetScale`: v0.10.1+, Specify whether to reset the canvas scaling value to 100%. When you do not explicitly pass it, the default value is undefined, because the resetScaleOnMoveNodeToCenter configuration of the instantiation option also determines whether to reset scaling. Therefore, use the resetScaleOnMoveNodeToCenter configuration when you do not explicitly pass it, otherwise use the resetScale configuration -Currently, if there is zoom, returning to the center will reset the zoom. +Move a node to the center of the canvas. ### expandToNodeUid(uid, callback) diff --git a/web/src/pages/Doc/en/render/index.vue b/web/src/pages/Doc/en/render/index.vue index baac675f..31ec72af 100644 --- a/web/src/pages/Doc/en/render/index.vue +++ b/web/src/pages/Doc/en/render/index.vue @@ -121,12 +121,14 @@ is an object, e.g.This is an online mind map built using the
simple-mind-maplibrary and based onVue2.xandElementUI. Features include:-
@@ -365,6 +365,25 @@ full screen, support mini map- +
- images, icons, hyperlinks, notes, tags, and summaries
-- +
- outline, theme selection, and structure selection
-- +
- storage by default, but it also supports creating, opening, and editing local files on the computer directly
-- +
- and organizing layout
-- +
- between edit and read-only modes, zooming in and out, and switching to full screen, support mini map
峰
+++++协成
+++木木
+++好名字
+++Kyle
+
{text: 'I am new text'}.
v0.1.5+
Move a node behind another node.
-+v0.2.17+
resetScale: v0.10.1+, Specify whether to reset the canvas scaling value to 100%. When you do not explicitly pass it, the default value is undefined, because the resetScaleOnMoveNodeToCenter configuration of the instantiation option also determines whether to reset scaling. Therefore, use the resetScaleOnMoveNodeToCenter configuration when you do not explicitly pass it, otherwise use the resetScale configurationMove a node to the center of the canvas.
-Currently, if there is zoom, returning to the center will reset the zoom.
v0.6.7+
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js index 6cd69cf4..ae445be2 100644 --- a/web/src/pages/Doc/routerList.js +++ b/web/src/pages/Doc/routerList.js @@ -66,6 +66,7 @@ export default [ { path: 'rainbowLines', title: 'RainbowLines插件' }, { path: 'demonstrate', title: 'Demonstrate插件' }, { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' }, + { path: 'notation', title: 'Notation收费插件' }, { path: 'help1', title: '概要/关联线' }, { path: 'help2', title: '客户端' }, { path: 'help3', title: '打开预览在线文件' }, @@ -114,6 +115,7 @@ export default [ path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle chargeable plugin' }, + { path: 'notation', title: 'Notation chargeable plugin' }, { path: 'client', title: 'Client' } ] } diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index e0ca685b..0fc1052b 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -1,5 +1,35 @@ # Changelog +## 0.10.1 + +修复： + +> 1.修复TouchEvent插件两次点击位置不同时也会触发节点输入的问题； +> +> 2.修复/快捷键能收起根节点的子节点的问题； + +新增： + +> 1.新增处理导出前的svg对象的实例化选项； +> +> 2.新增修改拖拽节点时克隆的节点的实例化选项； +> +> 3.新增派发单个节点的内容布局完成事件； +> +> 4.新增拦截节点拖拽的实例化选项； +> +> 5.新增限制TouchEvent插件双指缩放的最大值和最小值的实例化选项； +> +> 6.新增节点编辑插件； + +Demo： + +> 1.新增节点标记功能； +> +> 2.修复演示模式中右下角输入框无法输入的问题； +> +> 3.移动端打开时不显示目录、新建、打开按钮； + ## 0.10.0 较大更新：升级节点拖拽时的交互效果； diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index 5558bd26..c67be98a 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -1,6 +1,27 @@- \ No newline at end of file + +Changelog
+0.10.1
+修复：
+++1.修复TouchEvent插件两次点击位置不同时也会触发节点输入的问题；
+2.修复/快捷键能收起根节点的子节点的问题；
+新增：
+++1.新增处理导出前的svg对象的实例化选项；
+2.新增修改拖拽节点时克隆的节点的实例化选项；
+3.新增派发单个节点的内容布局完成事件；
+4.新增拦截节点拖拽的实例化选项；
+5.新增限制TouchEvent插件双指缩放的最大值和最小值的实例化选项；
+6.新增节点编辑插件；
+Demo：
++1.新增节点标记功能；
+2.修复演示模式中右下角输入框无法输入的问题；
+3.移动端打开时不显示目录、新建、打开按钮；
+0.10.0
较大更新：升级节点拖拽时的交互效果；
修复：
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 1770535e..6b24337a 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -93,7 +93,7 @@ const mindMap = new MindMap({ | handleNodePasteImg（v0.9.2+） | null 或 Function | null | 在节点上粘贴剪贴板中的图片的处理方法，默认是转换为data:url数据插入到节点中，你可以通过该方法来将图片数据上传到服务器，实现保存图片的url。可以传递一个异步方法，接收Blob类型的图片数据，需要返回指定结构：{ url, size: {width, height} } | | isLimitMindMapInCanvas（v0.9.2+） | Boolean | false | 是否将思维导图限制在画布内。比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理 | | beforeShortcutRun（v0.9.9+） | Function、null | null | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） | -| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（底层影响的是render类的moveNodeToCenter方法） | +| resetScaleOnMoveNodeToCenter（v0.9.12+） | Boolean | false | 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（该选项实际影响的是render.moveNodeToCenter方法，moveNodeToCenter方法本身也存在第二个参数resetScale来设置是否复位，如果resetScale参数没有传递，那么使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置）。 | | createNodePrefixContent（v0.9.12+） | Function、null | null | 添加附加的节点前置内容。前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。可以传递一个函数，这个函数接收一个节点实例的参数，可以返回{el, width, height}格式的对象，el为DOM节点对象，width和height代表内容的宽高，数字类型，如果不需要自定义内容，也可以返回null | | createNodePostfixContent（v0.9.12+） | Function、null | null | 添加附加的节点后置内容。后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。用法同createNodePrefixContent | @@ -162,6 +162,7 @@ const mindMap = new MindMap({ | minExportImgCanvasScale（v0.7.0+） | Number | 2 | 导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 | | addContentToHeader（v0.9.9+） | Function、null | null | 导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 | | addContentToFooter（v0.9.9+） | Function、null | null | 基本释义同addContentToHeader，在尾部添加自定义内容 | +| handleBeingExportSvg（v0.10.1+） | Function、null | null | 导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。（需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） | #### 2.1导出时如何添加自定义内容 @@ -216,6 +217,8 @@ new MindMap({ | dragPlaceholderRectFill（v0.7.2+） | String | rgb(94, 200, 248) | 节点拖拽时新位置的示意矩形的填充颜色 | | dragPlaceholderLineConfig（v0.10.0+） | Object | { color: 'rgb(94, 200, 248)', width: 2 } | 节点拖拽时新位置的示意连线的样式配置 | | dragOpacityConfig（v0.7.2+） | Object | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | 节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 | +| beforeDragEnd（v0.10.1+） | null、Function | null | 即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例 | +| handleDragCloneNode（v0.10.1+） | null、Function | null | 拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） | ### 5.Watermark插件 @@ -258,6 +261,8 @@ new MindMap({ | 字段名称 | 类型 | 默认值 | 描述 | | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | | disableTouchZoom（v0.8.1+） | Boolean | false | 禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 | +| minTouchZoomScale（v0.10.1+） | Number | 20 | 允许最大和最小的缩放值，百分数，传-1代表不限制 | +| maxTouchZoomScale（v0.10.1+） | Number | -1 | 同minTouchZoomScale | ### 9.Scrollbar插件 @@ -578,6 +583,7 @@ mindMap.setTheme('主题名称') | exit_demonstrate（v0.9.11+） | 退出演示模式时触发 | | | demonstrate_jump（v0.9.11+） | 演示模式中，切换步骤时触发 | currentStepIndex（当前播放到的步骤索引，从0开始计数）、stepLength（总的播放步骤数量） | | node_tag_click（v0.9.12+） | 节点标签的点击事件 | this(当前节点实例)、item（点击的标签内容） | +| node_layout_end（v0.10.1+） | 单个节点内容布局完成的事件 | this(当前节点实例) | ### emit(event, ...args) diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index 80c97c06..fbb410cc 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -434,7 +434,7 @@resetScaleOnMoveNodeToCenter（v0.9.12+） Boolean false -移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（底层影响的是render类的moveNodeToCenter方法） +移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%（该选项实际影响的是render.moveNodeToCenter方法，moveNodeToCenter方法本身也存在第二个参数resetScale来设置是否复位，如果resetScale参数没有传递，那么使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置）。 + createNodePrefixContent（v0.9.12+） @@ -574,6 +574,12 @@null 基本释义同addContentToHeader，在尾部添加自定义内容 + handleBeingExportSvg（v0.10.1+） +Function、null +null +导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。（需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） +2.1导出时如何添加自定义内容
@@ -682,6 +688,18 @@{ cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } 节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 ++ +beforeDragEnd（v0.10.1+） +null、Function +null +即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例 ++ handleDragCloneNode（v0.10.1+） +null、Function +null +拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象。（需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象） +5.Watermark插件
@@ -849,6 +867,18 @@false 禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 ++ +minTouchZoomScale（v0.10.1+） +Number +20 +允许最大和最小的缩放值，百分数，传-1代表不限制 ++ maxTouchZoomScale（v0.10.1+） +Number +-1 +同minTouchZoomScale +9.Scrollbar插件
@@ -1440,6 +1470,11 @@ mindMap.setTheme('主题名称')节点标签的点击事件 this(当前节点实例)、item（点击的标签内容） ++ node_layout_end（v0.10.1+） +单个节点内容布局完成的事件 +this(当前节点实例) +emit(event, ...args)
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index bd893b36..9f6fe83d 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -24,7 +24,7 @@ 官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档： -> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费] +> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费] 本项目不会实现的特性： @@ -406,4 +406,22 @@峰
+diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index 49e292ef..a25f78c7 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -8,22 +8,22 @@++协成
+++木木
+++好名字
+++Kyle
+
json、png、svg、pdf、markdown、xmind、txt，支持从json、xmind、markdown导入json、png、svg、pdf、markdown、xmind、txt，支持从json、xmind、markdown导入官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：
-RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]
+RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]
本项目不会实现的特性：
@@ -37,11 +37,11 @@2.
web使用
simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：- - - - - + + + + +
提供文档页面服务。
3.
@@ -358,6 +358,25 @@dist峰
+++ diff --git a/web/src/pages/Doc/zh/notation/index.md b/web/src/pages/Doc/zh/notation/index.md new file mode 100644 index 00000000..3fa0a7c6 --- /dev/null +++ b/web/src/pages/Doc/zh/notation/index.md @@ -0,0 +1,111 @@ +# Notation 收费插件 + +> 关于收费 +> +> mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。 +> +> 最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。 + +Notation 是第二个收费插件，功能是提供单个节点的标记功能，也就是可以在单个节点上加个手绘风格的圈、背景、删除线等等，支持动画效果，就像下面这样： + +++协成
+++木木
+++好名字
+++Kyle
++ +你也可以在在线版中进行体验，先激活节点，然后点击上方【标记】按钮添加标记。 + +内部实现是通过[rough-notation](https://github.com/rough-stuff/rough-notation)库，所以如果你有精力，也可以自己基于这个库来实现这个插件。 + +## 收费 + +现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。 + +价格： + +1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。 + +2.￥ 29.9，包含未打包的源码和打包后的文件。 + +
+ +
+ +## 注册 + +1.引用打包后的文件： + +```js +import MindMap from 'simple-mind-map' +import Notation from 'notation.cjs.min.js' +// 或 import Notation from 'notation.esm.min.js' + +MindMap.usePlugin(Notation) +``` + +2.引用未打包的源码 + +可以先进入到插件目录执行： + +```bash +npm link +``` + +然后进入到你的项目根目录执行： + +```bash +npm link simple-mind-map-plugin-notation +``` + +然后就可以直接导入进行使用： + +```js +import MindMap from 'simple-mind-map' +import Notation from 'simple-mind-map-plugin-notation' + +MindMap.usePlugin(Notation) +``` + +注册完且实例化`MindMap`后可通过`mindMap.notation`获取到该实例。 + +注册该插件后，无需执行其他方法，手绘风格即可生效。 + +如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法： + +```js +mindMap.addPlugin(Notation) +mindMap.reRender() +``` + +## 命令 + +注册了本插件后会在思维导图实例上新增`SET_NOTATION`命令，给节点添加标记使用该命令： + +```js +mindMap.execCommand('SET_NOTATION', appointNodes, show, config) +``` + +该命令可以传递三个参数： + +- `appointNodes`：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记； + +- `show`：Boolean，必传，是否显示编辑； + +- `config`：Object，可选，标记配置，对象格式，对象的详细字段如下： + +| 字段名称 | 类型 | 默认值 | 描述 | +| ------- | ----- | ----- | ---- | +| type | String | circle | 标记类型，可选值：underline（下划线）、box（边框）、circle（圆）、highlight（高亮）、strike-through（删除线）、crossed-off（叉） | +| color | String | 思维导图实例化选项中的hoverRectColor配置 | 颜色 | +| strokeWidth | Number | 1 | 线宽 | +| padding | Number | 20 | 内边距 | +| animate | Boolean | true | 是否开启动画 | + +示例： + +```js +// 给当前激活的节点添加一个圆类型的标记 +mindMap.execCommand('SET_NOTATION', [], true, { + type: 'circle', + color: 'red' +}) +``` + +添加标记后数据会以`notation`为名称保存到节点的`data`数据中。 \ No newline at end of file diff --git a/web/src/pages/Doc/zh/notation/index.vue b/web/src/pages/Doc/zh/notation/index.vue new file mode 100644 index 00000000..23f6a48a --- /dev/null +++ b/web/src/pages/Doc/zh/notation/index.vue @@ -0,0 +1,125 @@ + +
++ + + + + \ No newline at end of file diff --git a/web/src/pages/Doc/zh/render/index.md b/web/src/pages/Doc/zh/render/index.md index 6a6673fc..fc631483 100644 --- a/web/src/pages/Doc/zh/render/index.md +++ b/web/src/pages/Doc/zh/render/index.md @@ -146,13 +146,13 @@ 将节点移动到另一个节点的后面。 -### moveNodeToCenter(node) +### moveNodeToCenter(node, resetScale) > v0.2.17+ -移动节点到画布中心。 +- `resetScale`：v0.10.1+， 指定是否要将画布缩放值复位为100%，当你没有显式传递时，默认值为undefined，因为实例化选项的resetScaleOnMoveNodeToCenter配置也会决定是否复位缩放，所以当你没有显式传递时使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置 -目前如果是存在缩放的情况下回到中心会重置缩放。 +移动节点到画布中心。 ### expandToNodeUid(uid, callback) diff --git a/web/src/pages/Doc/zh/render/index.vue b/web/src/pages/Doc/zh/render/index.vue index 492de363..3584c295 100644 --- a/web/src/pages/Doc/zh/render/index.vue +++ b/web/src/pages/Doc/zh/render/index.vue @@ -118,12 +118,14 @@Notation 收费插件
+++关于收费
+mind-map 是一个 MIT 协议的开源项目，理论上只要保留 mind-map 的版权声明，无论是否商用都不收费，这个协议以后也不会改变。另外无论是在线版，还是客户端都不会考虑收费。但是为了项目的可持续发展，会通过一些方式来获取收益，比如现有的赞助方式。而收费插件是第二个方式，基本原则是基本功能、核心功能、必要功能不收费，而可有可无的附加功能可能会做成收费的。
+最后，收费仅针对开发者，如果仅是在线版或者客户端的思维导图用户是无需付费的，所有功能均可免费使用。
+Notation 是第二个收费插件，功能是提供单个节点的标记功能，也就是可以在单个节点上加个手绘风格的圈、背景、删除线等等，支持动画效果，就像下面这样：
+你也可以在在线版中进行体验，先激活节点，然后点击上方【标记】按钮添加标记。
+内部实现是通过rough-notation库，所以如果你有精力，也可以自己基于这个库来实现这个插件。
+收费
+现阶段收费方式比较原始，通过扫码转账备注你要购买的插件，以及你的邮箱地址，然后会将插件文件发送到你的邮箱。购买请在充分的使用和考虑后进行，如果你对前端开发不太熟悉，不知道如何使用插件，那么请谨慎考虑购买，没有特殊原因不会退费。如果你发现了 bug，或者有需求，可以提交相关的 issue。
+价格：
+1.￥ 19.9，仅包含打包后的文件，即.cjs.min.js、.esm.min.js 两种格式的文件。
+2.￥ 29.9，包含未打包的源码和打包后的文件。
+注册
+1.引用打包后的文件：
++import MindMap from 'simple-mind-map' +import Notation from 'notation.cjs.min.js' +// 或 import Notation from 'notation.esm.min.js' + +MindMap.usePlugin(Notation) +2.引用未打包的源码
+可以先进入到插件目录执行：
++npm link +然后进入到你的项目根目录执行：
++npm link simple-mind-map-plugin-notation +然后就可以直接导入进行使用：
++import MindMap from 'simple-mind-map' +import Notation from 'simple-mind-map-plugin-notation' + +MindMap.usePlugin(Notation) +注册完且实例化
+MindMap后可通过mindMap.notation获取到该实例。注册该插件后，无需执行其他方法，手绘风格即可生效。
+如果你是使用 mindMap.addPlugin 方法来动态注册的组件，那么需要调用一次重新渲染的方法：
++mindMap.addPlugin(Notation) +mindMap.reRender() +命令
+注册了本插件后会在思维导图实例上新增
+SET_NOTATION命令，给节点添加标记使用该命令：+mindMap.execCommand('SET_NOTATION', appointNodes, show, config) +该命令可以传递三个参数：
++
+- +
++
appointNodes：给指定的节点实例添加标记，可以传单个节点实例，也可以传递一个节点实例数组，如果传空数组，则会给当前激活的节点添加标记；- +
++
show：Boolean，必传，是否显示编辑；- +
++
config：Object，可选，标记配置，对象格式，对象的详细字段如下：+ +
++ + + +字段名称 +类型 +默认值 +描述 ++ +type +String +circle +标记类型，可选值：underline（下划线）、box（边框）、circle（圆）、highlight（高亮）、strike-through（删除线）、crossed-off（叉） ++ +color +String +思维导图实例化选项中的hoverRectColor配置 +颜色 ++ +strokeWidth +Number +1 +线宽 ++ +padding +Number +20 +内边距 ++ + +animate +Boolean +true +是否开启动画 +示例：
++// 给当前激活的节点添加一个圆类型的标记 +mindMap.execCommand('SET_NOTATION', [], true, { + type: 'circle', + color: 'red' +}) +添加标记后数据会以
+ +notation为名称保存到节点的data数据中。v0.1.5+
将节点移动到另一个节点的后面。
-+v0.2.17+
resetScale：v0.10.1+， 指定是否要将画布缩放值复位为100%，当你没有显式传递时，默认值为undefined，因为实例化选项的resetScaleOnMoveNodeToCenter配置也会决定是否复位缩放，所以当你没有显式传递时使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置移动节点到画布中心。
-目前如果是存在缩放的情况下回到中心会重置缩放。
v0.6.7+