mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 14:04:47 +08:00
Doc: update
This commit is contained in:
wanglin2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.8.0-fix.1",
|
||||
"version": "0.9.0",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -1,5 +1,54 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.0
|
||||
|
||||
New:
|
||||
|
||||
1.Support adding summaries to some child nodes of the same node.
|
||||
|
||||
2.Moving the mouse into the summary will highlight its node.
|
||||
|
||||
3.Importing and exporting xmind files supports processing profiles.
|
||||
|
||||
## 0.8.1
|
||||
|
||||
Fix：
|
||||
|
||||
> 1.Fix the issue where the activation status of the summary node in the history data has not been deleted, which can cause data to be triggered when clicking on the summary node_ Change event.
|
||||
>
|
||||
> 2.Fix the issue of blank pages and exceptions thrown by the console when running in Safari browser.
|
||||
>
|
||||
> 3.Fixed the issue of icon floating layer and note floating layer detached from nodes when scaling the canvas.
|
||||
>
|
||||
> 4.Fixed the issue of selecting all nodes in read-only mode.
|
||||
>
|
||||
> 5.Fix the presence of node content has in rich text mode; Error exporting as image.
|
||||
>
|
||||
> 6.Fixed the issue of overlapping profiles when adding profiles to oneself first and then to subordinates; Fix the issue of overlapping profiles when adding profiles to nodes with hierarchical relationships at the same time.
|
||||
>
|
||||
> 7.Fix the issue of exporting PDF errors when there are many nodes.
|
||||
|
||||
|
||||
New：
|
||||
|
||||
> 1.Add a configuration option that prohibits dragging the canvas.
|
||||
>
|
||||
> 2.Add a configuration option to prohibit double finger scaling of the canvas.
|
||||
>
|
||||
> 3.Add compression parameters to the method of exporting PNG; Optimize the problem of excessive volume when exporting PDF from nodes with large amounts of data.
|
||||
>
|
||||
> 4.Rename the isParent method of the node instance to isAncestor and add the isParent method at the same time.
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Fixed the issue of being able to search for replacement and edit outlines in read-only mode.
|
||||
>
|
||||
> 2.Fix the issue where the outline cannot be displayed and edited when the node content is an HTML tag.
|
||||
>
|
||||
> 3.Fix the issue where when multiple nodes are selected and icons are added at the same time, all node icons will be unified as the icon of the first node.
|
||||
>
|
||||
> 4.Adding loading to the export operation.
|
||||
|
||||
## 0.8.0-fix.1
|
||||
|
||||
Fix: Fixed the issue of creating a new node using direct paste if the pasted content contains HTML label symbols such as <> and the newly created node content is empty.
|
||||
|
||||
@@ -1,6 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.0</h2>
|
||||
<p>New:</p>
|
||||
<p>1.Support adding summaries to some child nodes of the same node.</p>
|
||||
<p>2.Moving the mouse into the summary will highlight its node.</p>
|
||||
<p>3.Importing and exporting xmind files supports processing profiles.</p>
|
||||
<h2>0.8.1</h2>
|
||||
<p>Fix：</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue where the activation status of the summary node in the history data has not been deleted, which can cause data to be triggered when clicking on the summary node_ Change event.</p>
|
||||
<p>2.Fix the issue of blank pages and exceptions thrown by the console when running in Safari browser.</p>
|
||||
<p>3.Fixed the issue of icon floating layer and note floating layer detached from nodes when scaling the canvas.</p>
|
||||
<p>4.Fixed the issue of selecting all nodes in read-only mode.</p>
|
||||
<p>5.Fix the presence of node content has in rich text mode; Error exporting as image.</p>
|
||||
<p>6.Fixed the issue of overlapping profiles when adding profiles to oneself first and then to subordinates; Fix the issue of overlapping profiles when adding profiles to nodes with hierarchical relationships at the same time.</p>
|
||||
<p>7.Fix the issue of exporting PDF errors when there are many nodes.</p>
|
||||
</blockquote>
|
||||
<p>New：</p>
|
||||
<blockquote>
|
||||
<p>1.Add a configuration option that prohibits dragging the canvas.</p>
|
||||
<p>2.Add a configuration option to prohibit double finger scaling of the canvas.</p>
|
||||
<p>3.Add compression parameters to the method of exporting PNG; Optimize the problem of excessive volume when exporting PDF from nodes with large amounts of data.</p>
|
||||
<p>4.Rename the isParent method of the node instance to isAncestor and add the isParent method at the same time.</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Fixed the issue of being able to search for replacement and edit outlines in read-only mode.</p>
|
||||
<p>2.Fix the issue where the outline cannot be displayed and edited when the node content is an HTML tag.</p>
|
||||
<p>3.Fix the issue where when multiple nodes are selected and icons are added at the same time, all node icons will be unified as the icon of the first node.</p>
|
||||
<p>4.Adding loading to the export operation.</p>
|
||||
</blockquote>
|
||||
<h2>0.8.0-fix.1</h2>
|
||||
<p>Fix: Fixed the issue of creating a new node using direct paste if the pasted content contains HTML label symbols such as <> and the newly created node content is empty.</p>
|
||||
<h2>0.8.0</h2>
|
||||
|
||||
@@ -37,7 +37,7 @@ const mindMap = new MindMap({
|
||||
| textContentMargin | Number | 2 | The spacing between various text information in the node, such as the spacing between the icon and text | |
|
||||
| selectTranslateStep | Number | 3 | The canvas offset when mouse moves to the edge during multi-select node | |
|
||||
| selectTranslateLimit | Number | 20 | The distance from the edge when the canvas begins to offset during multi-select node | |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top, node) => {// your display node note logic. node is a new parameter added in v0.8.1+ version, representing node instances }, hide: () => {// your hide node note logic }} | |
|
||||
| readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) drag | |
|
||||
| watermarkConfig（v0.2.4+） | Object | | Watermark config, Please refer to the table 【Watermark config】 below for detailed configuration | |
|
||||
@@ -100,6 +100,9 @@ const mindMap = new MindMap({
|
||||
| defaultGeneralizationText（v0.8.0+） | String | 概要 | Insert default text for summary | |
|
||||
| handleIsSplitByWrapOnPasteCreateNewNode（v0.8.0+） | Function / null | null | When creating a new node by pasting text, control whether to automatically split the nodes based on line breaks. If there is a line break, multiple nodes will be created based on the line break. Otherwise, only one node will be created, and a function can be passed to return promise. resolve represents splitting based on line breaks, and reject represents ignoring line breaks | |
|
||||
| addHistoryTime（v0.8.0+） | Number | 100 | Only one historical record can be added within the specified time to avoid adding unnecessary intermediate states. Unit: ms | |
|
||||
| isDisableDrag（v0.8.1+） | Boolean | false | Is disable dragging the canvas | |
|
||||
| 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 | |
|
||||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | Highlight box style when the mouse moves into the summary to highlight the node it belongs to | |
|
||||
|
||||
### Data structure
|
||||
|
||||
@@ -408,6 +411,7 @@ Listen to an event. Event list:
|
||||
| view_theme_change（v0.6.12+） | Triggered after calling the setTheme method to set the theme | theme（theme name） |
|
||||
| set_data（v0.7.3+） | Triggered when the setData method is called to dynamically set mind map data | data（New Mind Map Data） |
|
||||
| resize（v0.8.0+） | Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called | |
|
||||
| beforeDestroy（v0.9.0+） | Triggered before destroying the mind map, i.e. triggered by calling the destroy method | |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
<td>customNoteContentShow（v0.1.6+）</td>
|
||||
<td>Object</td>
|
||||
<td>null</td>
|
||||
<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }}</td>
|
||||
<td>Custom node note content display, object type, structure: {show: (noteContent, left, top, node) => {// your display node note logic. node is a new parameter added in v0.8.1+ version, representing node instances }, hide: () => {// your hide node note logic }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -560,6 +560,27 @@
|
||||
<td>Only one historical record can be added within the specified time to avoid adding unnecessary intermediate states. Unit: ms</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isDisableDrag（v0.8.1+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>Is disable dragging the canvas</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disableTouchZoom（v0.8.1+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>Prohibit double finger scaling, you can still use the API for scaling, which takes effect on the TouchEvent plugin</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>highlightNodeBoxStyle（v0.9.0+）</td>
|
||||
<td>Object</td>
|
||||
<td>{ stroke: 'rgb(94, 200, 248)', fill: 'transparent' }</td>
|
||||
<td>Highlight box style when the mouse moves into the summary to highlight the node it belongs to</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Data structure</h3>
|
||||
@@ -1032,6 +1053,11 @@ poor performance and should be used sparingly.</p>
|
||||
<td>Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>beforeDestroy（v0.9.0+）</td>
|
||||
<td>Triggered before destroying the mind map, i.e. triggered by calling the destroy method</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
@@ -1347,4 +1373,4 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@@ -38,7 +38,7 @@ a.download = 'xxx'
|
||||
a.click()
|
||||
```
|
||||
|
||||
### png(name, transparent = false, checkRotate)
|
||||
### png(name, transparent = false, checkRotate, compress)
|
||||
|
||||
> Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)
|
||||
|
||||
@@ -48,7 +48,9 @@ a.click()
|
||||
|
||||
- `rotateWhenWidthLongerThenHeight`: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
|
||||
|
||||
- `checkRotate`: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.
|
||||
- `checkRotate`: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees
|
||||
|
||||
- `compress`：v0.8.1+，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally
|
||||
|
||||
Exports as `png`.
|
||||
|
||||
@@ -72,7 +74,7 @@ svg(
|
||||
|
||||
Exports as `svg`.
|
||||
|
||||
### pdf(name, useMultiPageExport)
|
||||
### pdf(name, useMultiPageExport, maxImageWidth)
|
||||
|
||||
> v0.2.1+
|
||||
|
||||
@@ -80,6 +82,8 @@ Exports as `svg`.
|
||||
|
||||
- `useMultiPageExport`: v0.6.15+, Boolean, false, Whether to export multiple pages, default to single page
|
||||
|
||||
- `maxImageWidth`：v0.8.1+，null | Number，The default is twice the width of A4 paper, which is a parameter for compressing images. In some cases, the length and width of the image may be very large, resulting in a very large PDF volume. Therefore, if you want to reduce the volume, you can use this parameter to control the maximum width of the image
|
||||
|
||||
Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download.
|
||||
|
||||
> After v0.6.0, an additional ExportPDF plugin needs to be registered
|
||||
|
||||
@@ -27,7 +27,7 @@ a.href = <span class="hljs-string">'xxx.png'</span><span class="hljs-c
|
||||
a.download = <span class="hljs-string">'xxx'</span>
|
||||
a.click()
|
||||
</code></pre>
|
||||
<h3>png(name, transparent = false, checkRotate)</h3>
|
||||
<h3>png(name, transparent = false, checkRotate, compress)</h3>
|
||||
<blockquote>
|
||||
<p>Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
|
||||
</blockquote>
|
||||
@@ -42,7 +42,10 @@ a.click()
|
||||
<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>checkRotate</code>: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.</p>
|
||||
<p><code>checkRotate</code>: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>compress</code>：v0.8.1+，null | { width, height }, The parameter for compressing images. In some cases, the length and width of the exported image may be very large. If you want to reduce it, you can use this parameter to control it. Only one width or height can be provided, and it will be scaled proportionally</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Exports as <code>png</code>.</p>
|
||||
@@ -66,7 +69,7 @@ a.click()
|
||||
)
|
||||
</code></pre>
|
||||
<p>Exports as <code>svg</code>.</p>
|
||||
<h3>pdf(name, useMultiPageExport)</h3>
|
||||
<h3>pdf(name, useMultiPageExport, maxImageWidth)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.1+</p>
|
||||
</blockquote>
|
||||
@@ -77,6 +80,9 @@ a.click()
|
||||
<li>
|
||||
<p><code>useMultiPageExport</code>: v0.6.15+, Boolean, false, Whether to export multiple pages, default to single page</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>maxImageWidth</code>：v0.8.1+，null | Number，The default is twice the width of A4 paper, which is a parameter for compressing images. In some cases, the length and width of the image may be very large, resulting in a very large PDF volume. Therefore, if you want to reduce the volume, you can use this parameter to control the maximum width of the image</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Export as <code>pdf</code>. Unlike other export methods, this method does not return data and directly triggers the download.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -67,6 +67,8 @@ The folder containing the packaged resources for the `web` folder.
|
||||
|
||||
[How does the dom-to-image library convert HTML into images](https://juejin.cn/post/7287913415803764747)
|
||||
|
||||
[Two days to achieve collaborative editing of mind maps? It's really possible to use Yjs](https://juejin.cn/post/7295669711533998117)
|
||||
|
||||
## Special Note
|
||||
|
||||
This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.
|
||||
|
||||
@@ -8,17 +8,17 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Support collaborative editing</label></li>
|
||||
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Support collaborative editing</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -28,16 +28,16 @@ frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
||||
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">Import and export functionality; data is saved in the browser's local</label>
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly</li>
|
||||
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map</li>
|
||||
</ul>
|
||||
@@ -52,6 +52,7 @@ full screen, support mini map</li>
|
||||
<p><a href="https://juejin.cn/post/7233012756314701884">My first Electron application</a></p>
|
||||
<p><a href="https://juejin.cn/post/7276712861514170409">Explore how to export HTML and SVG as images</a></p>
|
||||
<p><a href="https://juejin.cn/post/7287913415803764747">How does the dom-to-image library convert HTML into images</a></p>
|
||||
<p><a href="https://juejin.cn/post/7295669711533998117">Two days to achieve collaborative editing of mind maps? It's really possible to use Yjs</a></p>
|
||||
<h2>Special Note</h2>
|
||||
<p>This project can be used for learning and reference. Please deeply experience whether it can meet your needs when using it for actual projects.</p>
|
||||
<p>This project may not have fully tested every function point, so there may be bugs. In addition, when the number of nodes is very large, there may be some performance issues. Because everyone can accept different levels of congestion, you can test the maximum number of nodes yourself. Generally speaking, within 500 nodes, it is more smooth, while over 1000 nodes have more noticeable lag.</p>
|
||||
|
||||
@@ -56,6 +56,50 @@ Whether the node is currently being dragged
|
||||
|
||||
## Methods
|
||||
|
||||
### setGeneralizationOpacity(val)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
- `val`：Number, 0-1，Opacity
|
||||
|
||||
Set the transparency of summary nodes and curves.
|
||||
|
||||
### formatGetGeneralization()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
Obtain node summary data.
|
||||
|
||||
### getIndexInBrothers()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
Gets the index of the node in the sibling node list.
|
||||
|
||||
### getRectInSvg()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
Obtain the size and position information of the node. The width and height are the actual width and height after applying the scaling effect, and the position information is relative to the canvas.
|
||||
|
||||
### getRect()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
Obtain the size and position information of the node. The width and height are the actual width and height after applying the scaling effect, and the position is relative to the upper left corner of the browser window.
|
||||
|
||||
### ancestorHasGeneralization()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
Check if there are ancestor nodes with a summary.
|
||||
|
||||
### getNoteContentPosition()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
Obtain the display position of node comments. When a node has comments and is displaying a state, dragging or zooming will cause the comment floating layer to detach from the node. This method can be used to obtain a new position and update the comment floating layer.
|
||||
|
||||
### updateNodeByActive(active)
|
||||
|
||||
> v0.8.0+
|
||||
@@ -207,9 +251,15 @@ Show node and its sub-nodes
|
||||
|
||||
### isParent(node)
|
||||
|
||||
> v0.1.5+
|
||||
> v0.1.5+：Detect whether the current node is an ancestor node of a certain node
|
||||
|
||||
Check if the current node is an ancestor of a certain node
|
||||
> v0.8.1+：Detect whether the current node is the parent node of a certain node
|
||||
|
||||
### isAncestor(node)
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
Detect whether the current node is an ancestor node of a certain node
|
||||
|
||||
### isBrother(node)
|
||||
|
||||
@@ -223,6 +273,12 @@ Check if the current node is a sibling of a certain node
|
||||
|
||||
Check if there is a summary
|
||||
|
||||
### checkHasSelfGeneralization()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
Check if there is a summary of oneself, not a sub node interval summary
|
||||
|
||||
### hideGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
@@ -31,6 +31,44 @@
|
||||
</blockquote>
|
||||
<p>Whether the node is currently being dragged</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>setGeneralizationOpacity(val)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>val</code>：Number, 0-1，Opacity</li>
|
||||
</ul>
|
||||
<p>Set the transparency of summary nodes and curves.</p>
|
||||
<h3>formatGetGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>Obtain node summary data.</p>
|
||||
<h3>getIndexInBrothers()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>Gets the index of the node in the sibling node list.</p>
|
||||
<h3>getRectInSvg()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>Obtain the size and position information of the node. The width and height are the actual width and height after applying the scaling effect, and the position information is relative to the canvas.</p>
|
||||
<h3>getRect()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Obtain the size and position information of the node. The width and height are the actual width and height after applying the scaling effect, and the position is relative to the upper left corner of the browser window.</p>
|
||||
<h3>ancestorHasGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Check if there are ancestor nodes with a summary.</p>
|
||||
<h3>getNoteContentPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Obtain the display position of node comments. When a node has comments and is displaying a state, dragging or zooming will cause the comment floating layer to detach from the node. This method can be used to obtain a new position and update the comment floating layer.</p>
|
||||
<h3>updateNodeByActive(active)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
@@ -143,9 +181,16 @@ nodeData, <code>SET_NODE_DATA</code> command's shortcut method</p>
|
||||
<p>Show node and its sub-nodes</p>
|
||||
<h3>isParent(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
<p>v0.1.5+：Detect whether the current node is an ancestor node of a certain node</p>
|
||||
</blockquote>
|
||||
<p>Check if the current node is an ancestor of a certain node</p>
|
||||
<blockquote>
|
||||
<p>v0.8.1+：Detect whether the current node is the parent node of a certain node</p>
|
||||
</blockquote>
|
||||
<h3>isAncestor(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Detect whether the current node is an ancestor node of a certain node</p>
|
||||
<h3>isBrother(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
@@ -156,6 +201,11 @@ nodeData, <code>SET_NODE_DATA</code> command's shortcut method</p>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Check if there is a summary</p>
|
||||
<h3>checkHasSelfGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>Check if there is a summary of oneself, not a sub node interval summary</p>
|
||||
<h3>hideGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
|
||||
@@ -15,6 +15,24 @@ Gets the root node of the node tree.
|
||||
|
||||
## Methods
|
||||
|
||||
### highlightNode(node, range)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
- `node`：Target node instance to highlight
|
||||
|
||||
- `range`：Optional, Array, a range array, [0, 1]
|
||||
|
||||
Highlight a node or child node. If the 'range' parameter is not passed, the specified 'node' node is directly highlighted. If the 'range' passes a range of child nodes to be highlighted, the child nodes of that range will be highlighted.
|
||||
|
||||
The highlight effect is wrapped by a rectangular box, and the stroke and fill style of the rectangle can be configured through the 'highlightNodeBoxStyle' instantiation option.
|
||||
|
||||
### closeHighlightNode()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
隐藏节点高亮框。
|
||||
|
||||
### setRootNodeCenter()
|
||||
|
||||
> v0.8.0+
|
||||
|
||||
@@ -9,6 +9,25 @@ accessed through <code>mindMap.renderer</code>.</p>
|
||||
<h3>root</h3>
|
||||
<p>Gets the root node of the node tree.</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>highlightNode(node, range)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>node</code>：Target node instance to highlight</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>range</code>：Optional, Array, a range array, [0, 1]</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Highlight a node or child node. If the 'range' parameter is not passed, the specified 'node' node is directly highlighted. If the 'range' passes a range of child nodes to be highlighted, the child nodes of that range will be highlighted.</p>
|
||||
<p>The highlight effect is wrapped by a rectangular box, and the stroke and fill style of the rectangle can be configured through the 'highlightNodeBoxStyle' instantiation option.</p>
|
||||
<h3>closeHighlightNode()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>隐藏节点高亮框。</p>
|
||||
<h3>setRootNodeCenter()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
|
||||
@@ -402,6 +402,12 @@ Reading text and images from the user's clipboard returns:
|
||||
|
||||
Remove the data of a node from its parent node's `nodeData.children` list.
|
||||
|
||||
#### checkHasSupSubRelation()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
Determine whether there is a hierarchical relationship from the given node instance list.
|
||||
|
||||
## Simulate CSS background in Canvas
|
||||
|
||||
Import:
|
||||
|
||||
@@ -328,6 +328,11 @@ and copying the <code>data</code> of the data object, example:</p>
|
||||
<p>v0.8.0+</p>
|
||||
</blockquote>
|
||||
<p>Remove the data of a node from its parent node's <code>nodeData.children</code> list.</p>
|
||||
<h4>checkHasSupSubRelation()</h4>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>Determine whether there is a hierarchical relationship from the given node instance list.</p>
|
||||
<h2>Simulate CSS background in Canvas</h2>
|
||||
<p>Import:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
|
||||
@@ -1,5 +1,54 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.0
|
||||
|
||||
新增：
|
||||
|
||||
1.支持对同一个节点的部分子节点添加概要。
|
||||
|
||||
2.鼠标移入概要会高亮其所属节点。
|
||||
|
||||
3.导入和导出xmind文件支持处理概要。
|
||||
|
||||
## 0.8.1
|
||||
|
||||
修复：
|
||||
|
||||
> 1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发data_change事件。
|
||||
>
|
||||
> 2.修复在safari浏览器中运行时，页面空白且控制台抛出异常的问题。
|
||||
>
|
||||
> 3.修复缩放画布时图标浮层和备注浮层和节点脱离的问题。
|
||||
>
|
||||
> 4.修复只读模式下可以全选节点的问题。
|
||||
>
|
||||
> 5.修复富文本模式下节点内容存在 时导出为图片出错的问题。
|
||||
>
|
||||
> 6.修复先给自身添加概要，再给下级添加概要会出现概要重叠的问题；修复同时给存在上下级关系的节点添加概要时概要重叠的问题。
|
||||
>
|
||||
> 7.修复节点数量很多的情况下导出pdf报错的问题。
|
||||
|
||||
|
||||
新增：
|
||||
|
||||
> 1.新增禁止拖动画布的配置选项。
|
||||
>
|
||||
> 2.新增禁止双指缩放画布的配置选项。
|
||||
>
|
||||
> 3.导出png的方法新增压缩参数；优化大数据量节点导出pdf时体积过大的问题。
|
||||
>
|
||||
> 4.将节点实例的isParent方法改名为isAncestor，同时新增isParent方法。
|
||||
|
||||
Demo：
|
||||
|
||||
> 1.修复只读模式下仍旧可以搜索替换和编辑大纲的问题。
|
||||
>
|
||||
> 2.修复节点内容为html标签时大纲无法显示和编辑的问题。
|
||||
>
|
||||
> 3.修复同时选中多个节点添加图标时，所有节点图标都会统一为第一个节点的图标的问题。
|
||||
>
|
||||
> 4.导出操作增加loading。
|
||||
|
||||
## 0.8.0-fix.1
|
||||
|
||||
修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有<>等html标签符号时新创建的节点内容为空的问题。
|
||||
|
||||
@@ -1,6 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.0</h2>
|
||||
<p>新增：</p>
|
||||
<p>1.支持对同一个节点的部分子节点添加概要。</p>
|
||||
<p>2.鼠标移入概要会高亮其所属节点。</p>
|
||||
<p>3.导入和导出xmind文件支持处理概要。</p>
|
||||
<h2>0.8.1</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.修复历史记录数据中概要节点的激活状态未被删除的问题，会导致点击概要节点时触发data_change事件。</p>
|
||||
<p>2.修复在safari浏览器中运行时，页面空白且控制台抛出异常的问题。</p>
|
||||
<p>3.修复缩放画布时图标浮层和备注浮层和节点脱离的问题。</p>
|
||||
<p>4.修复只读模式下可以全选节点的问题。</p>
|
||||
<p>5.修复富文本模式下节点内容存在 时导出为图片出错的问题。</p>
|
||||
<p>6.修复先给自身添加概要，再给下级添加概要会出现概要重叠的问题；修复同时给存在上下级关系的节点添加概要时概要重叠的问题。</p>
|
||||
<p>7.修复节点数量很多的情况下导出pdf报错的问题。</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.新增禁止拖动画布的配置选项。</p>
|
||||
<p>2.新增禁止双指缩放画布的配置选项。</p>
|
||||
<p>3.导出png的方法新增压缩参数；优化大数据量节点导出pdf时体积过大的问题。</p>
|
||||
<p>4.将节点实例的isParent方法改名为isAncestor，同时新增isParent方法。</p>
|
||||
</blockquote>
|
||||
<p>Demo：</p>
|
||||
<blockquote>
|
||||
<p>1.修复只读模式下仍旧可以搜索替换和编辑大纲的问题。</p>
|
||||
<p>2.修复节点内容为html标签时大纲无法显示和编辑的问题。</p>
|
||||
<p>3.修复同时选中多个节点添加图标时，所有节点图标都会统一为第一个节点的图标的问题。</p>
|
||||
<p>4.导出操作增加loading。</p>
|
||||
</blockquote>
|
||||
<h2>0.8.0-fix.1</h2>
|
||||
<p>修复：修复直接粘贴的方式创建新节点时如果粘贴的内容带有<>等html标签符号时新创建的节点内容为空的问题。</p>
|
||||
<h2>0.8.0</h2>
|
||||
|
||||
@@ -37,7 +37,7 @@ const mindMap = new MindMap({
|
||||
| textContentMargin | Number | 2 | 节点里各种文字信息的间距，如图标和文字的间距 |
|
||||
| selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 |
|
||||
| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top, node) => {// 你的显示节点备注逻辑。node为v0.8.1+版本新增的回参，代表节点实例 }, hide: () => {// 你的隐藏节点备注逻辑 }} |
|
||||
| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 |
|
||||
| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） |
|
||||
| watermarkConfig（v0.2.4+） | Object | | 水印配置，详细配置请参考下方表格【水印配置】 |
|
||||
@@ -100,6 +100,9 @@ const mindMap = new MindMap({
|
||||
| defaultGeneralizationText（v0.8.0+） | String | 概要 | 插入概要的默认文本 |
|
||||
| handleIsSplitByWrapOnPasteCreateNewNode（v0.8.0+） | Function / null | null | 粘贴文本的方式创建新节点时，控制是否按换行自动分割节点，即如果存在换行，那么会根据换行创建多个节点，否则只会创建一个节点，可以传递一个函数，返回promise，resolve代表根据换行分割，reject代表忽略换行 |
|
||||
| addHistoryTime（v0.8.0+） | Number | 100 | 指定时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms |
|
||||
| isDisableDrag（v0.8.1+） | Boolean | false | 是否禁止拖动画布 |
|
||||
| disableTouchZoom（v0.8.1+） | Boolean | false | 禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效 |
|
||||
| highlightNodeBoxStyle（v0.9.0+） | Object | { stroke: 'rgb(94, 200, 248)', fill: 'transparent' } | 鼠标移入概要高亮所属节点时的高亮框样式 |
|
||||
|
||||
### 数据结构
|
||||
|
||||
@@ -405,6 +408,7 @@ mindMap.setTheme('主题名称')
|
||||
| view_theme_change（v0.6.12+） | 调用了setTheme方法设置主题后触发 | theme（设置的新主题名称） |
|
||||
| set_data（v0.7.3+） | 调用了setData方法动态设置思维导图数据时触发 | data（新的思维导图数据） |
|
||||
| resize（v0.8.0+） | 容器尺寸改变后触发，实际上是当思维导图实例的`resize`方法被调用后触发 | |
|
||||
| beforeDestroy（v0.9.0+） | 思维导图销毁前触发，即调用了destroy方法触发 | |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<td>customNoteContentShow（v0.1.6+）</td>
|
||||
<td>Object</td>
|
||||
<td>null</td>
|
||||
<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}</td>
|
||||
<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top, node) => {// 你的显示节点备注逻辑。node为v0.8.1+版本新增的回参，代表节点实例 }, hide: () => {// 你的隐藏节点备注逻辑 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly（v0.1.7+）</td>
|
||||
@@ -483,6 +483,24 @@
|
||||
<td>100</td>
|
||||
<td>指定时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isDisableDrag（v0.8.1+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>是否禁止拖动画布</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disableTouchZoom（v0.8.1+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>禁止双指缩放，你仍旧可以使用api进行缩放，对TouchEvent插件生效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>highlightNodeBoxStyle（v0.9.0+）</td>
|
||||
<td>Object</td>
|
||||
<td>{ stroke: 'rgb(94, 200, 248)', fill: 'transparent' }</td>
|
||||
<td>鼠标移入概要高亮所属节点时的高亮框样式</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>数据结构</h3>
|
||||
@@ -948,6 +966,11 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>容器尺寸改变后触发，实际上是当思维导图实例的<code>resize</code>方法被调用后触发</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>beforeDestroy（v0.9.0+）</td>
|
||||
<td>思维导图销毁前触发，即调用了destroy方法触发</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
@@ -1258,4 +1281,4 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,17 +1,17 @@
|
||||
# 关于概要
|
||||
|
||||
概要的功能非常的不完善，具体如下：
|
||||
`simple-mind-map`概要的功能非常的不完善，具体能力和限制如下：
|
||||
|
||||
1.选中单个节点添加单个概要。
|
||||
1.支持选中单个节点添加单个概要。
|
||||
|
||||
2.同时选中多个节点添加概要时，具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。
|
||||
2.支持同时选中多个节点添加概要，其中具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。
|
||||
|
||||
3.给子节点添加了区间概要时自身无法再添加单个概要。
|
||||
3.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。
|
||||
|
||||
4.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。
|
||||
4.概要节点后面无法再继续添加概要。
|
||||
|
||||
5.概要节点后面无法再继续添加概要。
|
||||
5.概要节点间、概要节点和普通节点间位置可能会产生冲突。
|
||||
|
||||
6.概要节点间、概要节点和普通节点可能会冲突重叠。
|
||||
6.鼠标移入概要时会高亮其所属的节点。
|
||||
|
||||
概要功能不会再完善，所以对概要功能要求高的项目请谨慎选择`simple-mind-map`。
|
||||
概要功能大概率不会再完善，冲突问题也没有能力解决，所以对概要功能要求高的项目请谨慎使用`simple-mind-map`。
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>关于概要</h1>
|
||||
<p>概要的功能非常的不完善，具体如下：</p>
|
||||
<p>1.选中单个节点添加单个概要。</p>
|
||||
<p>2.同时选中多个节点添加概要时，具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。</p>
|
||||
<p>3.给子节点添加了区间概要时自身无法再添加单个概要。</p>
|
||||
<p>4.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。</p>
|
||||
<p>5.概要节点后面无法再继续添加概要。</p>
|
||||
<p>6.概要节点间、概要节点和普通节点可能会冲突重叠。</p>
|
||||
<p>概要功能不会再完善，所以对概要功能要求高的项目请谨慎选择<code>simple-mind-map</code>。</p>
|
||||
<p><code>simple-mind-map</code>概要的功能非常的不完善，具体能力和限制如下：</p>
|
||||
<p>1.支持选中单个节点添加单个概要。</p>
|
||||
<p>2.支持同时选中多个节点添加概要，其中具有同一个父节点的子节点的概要会被合并成一个，称为区间概要，其他的仍旧作为单个概要。</p>
|
||||
<p>3.区间概要不会随着区间内的子节点变化而变化，只会在子节点数量无法满足区间时自动删除该区间概要。</p>
|
||||
<p>4.概要节点后面无法再继续添加概要。</p>
|
||||
<p>5.概要节点间、概要节点和普通节点间位置可能会产生冲突。</p>
|
||||
<p>6.鼠标移入概要时会高亮其所属的节点。</p>
|
||||
<p>概要功能大概率不会再完善，冲突问题也没有能力解决，所以对概要功能要求高的项目请谨慎使用<code>simple-mind-map</code>。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -38,7 +38,7 @@ a.download = 'xxx'
|
||||
a.click()
|
||||
```
|
||||
|
||||
### png(name, transparent = false, checkRotate)
|
||||
### png(name, transparent = false, checkRotate, compress)
|
||||
|
||||
> v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)
|
||||
|
||||
@@ -48,7 +48,9 @@ a.click()
|
||||
|
||||
- `rotateWhenWidthLongerThenHeight`: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度
|
||||
|
||||
- `checkRotate`：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。
|
||||
- `checkRotate`：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度
|
||||
|
||||
- `compress`：v0.8.1+，null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放
|
||||
|
||||
导出为`png`。
|
||||
|
||||
@@ -72,7 +74,7 @@ svg(
|
||||
|
||||
导出为`svg`。
|
||||
|
||||
### pdf(name, useMultiPageExport)
|
||||
### pdf(name, useMultiPageExport, maxImageWidth)
|
||||
|
||||
> v0.2.1+
|
||||
|
||||
@@ -80,6 +82,8 @@ svg(
|
||||
|
||||
- `useMultiPageExport`: v0.6.15+，Boolean, false, 是否多页导出，默认为单页
|
||||
|
||||
- `maxImageWidth`：v0.8.1+，null | Number，默认为a4纸的宽度的2倍, 压缩图片的参数，某些情况下图片的长宽可能非常大，导致pdf体积也非常大，所以如果希望减小体积，那么可以通过该参数来控制图片的最大宽度
|
||||
|
||||
导出为`pdf`，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
|
||||
|
||||
> v0.6.0版本以后，需要额外注册一个ExportPDF插件
|
||||
|
||||
@@ -27,7 +27,7 @@ a.href = <span class="hljs-string">'xxx.png'</span><span class="hljs-c
|
||||
a.download = <span class="hljs-string">'xxx'</span>
|
||||
a.click()
|
||||
</code></pre>
|
||||
<h3>png(name, transparent = false, checkRotate)</h3>
|
||||
<h3>png(name, transparent = false, checkRotate, compress)</h3>
|
||||
<blockquote>
|
||||
<p>v0.7.0以下版本为： png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
|
||||
</blockquote>
|
||||
@@ -42,7 +42,10 @@ a.click()
|
||||
<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，v0.7.0+已废弃，Boolean, false, 是否在图片宽比高长时自动旋转90度</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>checkRotate</code>：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度。</p>
|
||||
<p><code>checkRotate</code>：v0.7.0+，Function，可以传递一个函数，接收图片的宽度和高度两个参数，返回true或false，true代表图片需要旋转90度</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>compress</code>：v0.8.1+，null | { width, height }, 压缩图片的参数，某些情况下导出的图片长宽可能非常大，如果希望减小，那么可以通过该参数来控制，宽或高只提供一个即可，会按比例缩放</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>导出为<code>png</code>。</p>
|
||||
@@ -66,7 +69,7 @@ a.click()
|
||||
)
|
||||
</code></pre>
|
||||
<p>导出为<code>svg</code>。</p>
|
||||
<h3>pdf(name, useMultiPageExport)</h3>
|
||||
<h3>pdf(name, useMultiPageExport, maxImageWidth)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.1+</p>
|
||||
</blockquote>
|
||||
@@ -77,6 +80,9 @@ a.click()
|
||||
<li>
|
||||
<p><code>useMultiPageExport</code>: v0.6.15+，Boolean, false, 是否多页导出，默认为单页</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>maxImageWidth</code>：v0.8.1+，null | Number，默认为a4纸的宽度的2倍, 压缩图片的参数，某些情况下图片的长宽可能非常大，导致pdf体积也非常大，所以如果希望减小体积，那么可以通过该参数来控制图片的最大宽度</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>导出为<code>pdf</code>，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
|
||||
[dom-to-image库是如何将html转换成图片的](https://juejin.cn/post/7287913415803764747)
|
||||
|
||||
[两天实现思维导图的协同编辑？用Yjs真的可以](https://juejin.cn/post/7295669711533998117)
|
||||
|
||||
## 特别说明
|
||||
|
||||
本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
<p><a href="https://juejin.cn/post/7233012756314701884">我的第一个Electron应用</a></p>
|
||||
<p><a href="https://juejin.cn/post/7276712861514170409">探索如何将html和svg导出为图片</a></p>
|
||||
<p><a href="https://juejin.cn/post/7287913415803764747">dom-to-image库是如何将html转换成图片的</a></p>
|
||||
<p><a href="https://juejin.cn/post/7295669711533998117">两天实现思维导图的协同编辑？用Yjs真的可以</a></p>
|
||||
<h2>特别说明</h2>
|
||||
<p>本项目可用于学习和参考，用于实际项目时请先深度体验一下是否能满足您的需求。</p>
|
||||
<p>本项目可能没有完整测试到每一个功能点，所以可能存在bug，另外，当节点数量非常多的时候，性能也存在一些问题，因为每个人能接受的卡顿程度不一样，所以你可以自行测试节点数量上限。一般来说，500个节点以内比较流畅，1000个节点以上卡顿比较明显。</p>
|
||||
|
||||
@@ -56,6 +56,50 @@
|
||||
|
||||
## 方法
|
||||
|
||||
### setGeneralizationOpacity(val)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
- `val`：Number, 0-1，透明度
|
||||
|
||||
设置概要节点及曲线的透明度。
|
||||
|
||||
### formatGetGeneralization()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
获取节点概要数据。
|
||||
|
||||
### getIndexInBrothers()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
获取该节点在兄弟节点列表中的索引。
|
||||
|
||||
### getRectInSvg()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置信息相对于画布。
|
||||
|
||||
### getRect()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置是相对于浏览器窗口左上角的位置。
|
||||
|
||||
### ancestorHasGeneralization()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
检查是否存在有概要的祖先节点。
|
||||
|
||||
### getNoteContentPosition()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
获取节点备注显示位置。当节点存在备注且正在显示状态时，如果拖动或缩放会导致备注浮层和节点脱离，那么可以通过该方法获取新位置更新备注浮层。
|
||||
|
||||
### updateNodeByActive(active)
|
||||
|
||||
> v0.8.0+
|
||||
@@ -204,7 +248,13 @@
|
||||
|
||||
### isParent(node)
|
||||
|
||||
> v0.1.5+
|
||||
> v0.1.5+：检测当前节点是否是某个节点的祖先节点
|
||||
|
||||
> v0.8.1+：检测当前节点是否是某个节点的父节点
|
||||
|
||||
### isAncestor(node)
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
检测当前节点是否是某个节点的祖先节点
|
||||
|
||||
@@ -220,6 +270,12 @@
|
||||
|
||||
检查是否存在概要
|
||||
|
||||
### checkHasSelfGeneralization()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
检查是否存在自身的概要，非子节点区间概要
|
||||
|
||||
### hideGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
@@ -31,6 +31,44 @@
|
||||
</blockquote>
|
||||
<p>节点是否正在拖拽中</p>
|
||||
<h2>方法</h2>
|
||||
<h3>setGeneralizationOpacity(val)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>val</code>：Number, 0-1，透明度</li>
|
||||
</ul>
|
||||
<p>设置概要节点及曲线的透明度。</p>
|
||||
<h3>formatGetGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>获取节点概要数据。</p>
|
||||
<h3>getIndexInBrothers()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>获取该节点在兄弟节点列表中的索引。</p>
|
||||
<h3>getRectInSvg()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置信息相对于画布。</p>
|
||||
<h3>getRect()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置是相对于浏览器窗口左上角的位置。</p>
|
||||
<h3>ancestorHasGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>检查是否存在有概要的祖先节点。</p>
|
||||
<h3>getNoteContentPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>获取节点备注显示位置。当节点存在备注且正在显示状态时，如果拖动或缩放会导致备注浮层和节点脱离，那么可以通过该方法获取新位置更新备注浮层。</p>
|
||||
<h3>updateNodeByActive(active)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
@@ -136,7 +174,14 @@
|
||||
<p>显示节点及其下级节点</p>
|
||||
<h3>isParent(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
<p>v0.1.5+：检测当前节点是否是某个节点的祖先节点</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>v0.8.1+：检测当前节点是否是某个节点的父节点</p>
|
||||
</blockquote>
|
||||
<h3>isAncestor(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>检测当前节点是否是某个节点的祖先节点</p>
|
||||
<h3>isBrother(node)</h3>
|
||||
@@ -149,6 +194,11 @@
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>检查是否存在概要</p>
|
||||
<h3>checkHasSelfGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>检查是否存在自身的概要，非子节点区间概要</p>
|
||||
<h3>hideGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
|
||||
@@ -14,6 +14,24 @@
|
||||
|
||||
## 方法
|
||||
|
||||
### highlightNode(node, range)
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
- `node`：要高亮的目标节点实例
|
||||
|
||||
- `range`：可选，Array，一个范围数组，[0, 1]
|
||||
|
||||
高亮节点或子节点。如果`range`参数没有传递，那么直接高亮指定的`node`节点，如果`range`传递了一个要高亮的子节点的范围，那么会高亮该范围的子节点。
|
||||
|
||||
高亮效果为通过一个矩形框来包裹，矩形的描边和填充样式可以通过`highlightNodeBoxStyle`实例化选项进行配置。
|
||||
|
||||
### closeHighlightNode()
|
||||
|
||||
> v0.9.0+
|
||||
|
||||
隐藏节点高亮框。
|
||||
|
||||
### setRootNodeCenter()
|
||||
|
||||
> v0.8.0+
|
||||
|
||||
@@ -8,6 +8,25 @@
|
||||
<h3>root</h3>
|
||||
<p>获取节点树的根节点。</p>
|
||||
<h2>方法</h2>
|
||||
<h3>highlightNode(node, range)</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>node</code>：要高亮的目标节点实例</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>range</code>：可选，Array，一个范围数组，[0, 1]</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>高亮节点或子节点。如果<code>range</code>参数没有传递，那么直接高亮指定的<code>node</code>节点，如果<code>range</code>传递了一个要高亮的子节点的范围，那么会高亮该范围的子节点。</p>
|
||||
<p>高亮效果为通过一个矩形框来包裹，矩形的描边和填充样式可以通过<code>highlightNodeBoxStyle</code>实例化选项进行配置。</p>
|
||||
<h3>closeHighlightNode()</h3>
|
||||
<blockquote>
|
||||
<p>v0.9.0+</p>
|
||||
</blockquote>
|
||||
<p>隐藏节点高亮框。</p>
|
||||
<h3>setRootNodeCenter()</h3>
|
||||
<blockquote>
|
||||
<p>v0.8.0+</p>
|
||||
|
||||
@@ -397,6 +397,12 @@ copyNodeTree({}, node)
|
||||
|
||||
从节点的父节点的`nodeData.children`列表中移除该节点的数据。
|
||||
|
||||
#### checkHasSupSubRelation()
|
||||
|
||||
> v0.8.1+
|
||||
|
||||
从给定的节点实例列表里判断是否存在上下级关系。
|
||||
|
||||
## 在canvas中模拟css的背景属性
|
||||
|
||||
引入：
|
||||
|
||||
@@ -323,6 +323,11 @@
|
||||
<p>v0.8.0+</p>
|
||||
</blockquote>
|
||||
<p>从节点的父节点的<code>nodeData.children</code>列表中移除该节点的数据。</p>
|
||||
<h4>checkHasSupSubRelation()</h4>
|
||||
<blockquote>
|
||||
<p>v0.8.1+</p>
|
||||
</blockquote>
|
||||
<p>从给定的节点实例列表里判断是否存在上下级关系。</p>
|
||||
<h2>在canvas中模拟css的背景属性</h2>
|
||||
<p>引入：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
|
||||
Reference in New Issue
Block a user