diff --git a/README.md b/README.md index 802cb546..2e4752ea 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,13 @@ 本项目包含两部分: -1.一个js思维导图库,不依赖任何框架,你可以使用它来快速完成Web思维导图产品的开发。 +1.一个 js 思维导图库,不依赖任何框架,你可以使用它来快速完成 Web 思维导图产品的开发。 -开发文档:[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/) +开发文档:[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)。 -2.一个Web思维导图,基于思维导图库、Vue2.x、ElementUI开发,可以操作电脑本地文件,所以你可以直接把它当做一个在线版思维导图应用使用,如果觉得github的响应速度慢,你也可以部署到你的服务器上。 +2.一个 Web 思维导图,基于思维导图库、Vue2.x、ElementUI 开发,可以操作电脑本地文件,所以你可以直接把它当做一个在线版思维导图应用使用,如果觉得 github 的响应速度慢,你也可以部署到你的服务器上。 -在线地址:[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/) +在线地址:[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)。 另外也提供了客户端可供下载使用,支持`Windows`、`Mac`及`Linux`,下载地址: @@ -28,18 +28,15 @@ Github:[releases](https://github.com/wanglin2/mind-map/releases)。 # 特性 - [x] 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积 -- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构 +- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴(横向、竖向)、鱼骨图等结构 - [x] 内置多种主题,允许高度自定义样式,支持注册新主题 -- [x] 支持快捷键 -- [x] 节点内容支持图片、图标、超链接、备注、标签、概要 -- [x] 支持前进后退 -- [x] 支持拖动、缩放 -- [x] 支持右键和Ctrl+左键两种多选方式 -- [x] 支持节点自由拖拽、拖拽调整 -- [x] 支持多种节点形状 -- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`,支持从`json`、`xmind`、`markdown`导入 -- [x] 支持小地图、支持水印 -- [x] 支持关联线 +- [x] 节点内容支持文本(普通文本、富文本)、图片、图标、超链接、备注、标签、概要 +- [x] 节点支持拖拽(拖拽移动、自由调整)、多种节点形状,支持使用 DDM 完全自定义节点内容 +- [x] 支持画布拖动、缩放 +- [x] 支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式 +- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`、`xmind`,支持从`json`、`xmind`、`markdown`导入 +- [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印 +- [x] 提供丰富的配置,满足各种场景各种使用习惯 # 安装 diff --git a/index.html b/index.html index 162dbd5e..15d18095 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -思绪思维导图
\ No newline at end of file +思绪思维导图
\ No newline at end of file diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md index 70a287e7..8e2d7be8 100644 --- a/web/src/pages/Doc/en/introduction/index.md +++ b/web/src/pages/Doc/en/introduction/index.md @@ -8,21 +8,16 @@ ## Features -- [x] Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume -- [x] Supports six types of structures: logical structure diagrams, mind maps, - organizational structure diagrams, directory organization diagrams, timeline, and fishbone diagrams -- [x] Built-in multiple themes and allows for highly customized styles, and support register new themes -- [x] Supports shortcuts -- [x] Node content supports images, icons, hyperlinks, notes, tags, and - summaries -- [x] Supports forward and backward navigation -- [x] Supports dragging and scaling -- [x] Supports right-click and Ctrl + left-click to select multiple items -- [x] Supports free dragging and dragging to adjust nodes -- [x] Supports various node shapes -- [x] Supports export to json, png, svg, pdf markdown, and import from json, xmind, markdown -- [x] Supports mini map、support watermark -- [x] Supports associative lines +- [x] Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume +- [x] Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures +- [x] Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes +- [x] Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, and summaries +- [x] Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM +- [x] Support canvas dragging and scaling +- [x] Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection +- [x] Supoorts to export as `json`、`png`、`svg`、`pdf`、`markdown`、`xmind`, support import from `json`、`xmind`、`markdown` +- [x] Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, and watermarks +- [x] Provide rich configurations to meet various scenarios and usage habits ## Repository Catalog Introduction diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue index 9c04d3d7..d225cc43 100644 --- a/web/src/pages/Doc/en/introduction/index.vue +++ b/web/src/pages/Doc/en/introduction/index.vue @@ -8,21 +8,16 @@

Features

Repository Catalog Introduction

1.simple-mind-map

@@ -32,16 +27,16 @@ frameworks such as Vue and React, or without a framework.

This is an online mind map built using the simple-mind-map library and based on Vue2.x and ElementUI. Features include:

diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md index 1c42d08d..68ac2fc0 100644 --- a/web/src/pages/Doc/en/miniMap/index.md +++ b/web/src/pages/Doc/en/miniMap/index.md @@ -47,6 +47,15 @@ Small map idea: 1.Prepare a container element `container`, position is not `static` +If using rich text editing mode, it is best to remove the default style from the elements inside the 'container', otherwise there may be text offset issues within nodes: + +```css +.container * { + margin: 0; + padding: 0; +} +``` + 2.In `container`, create a small map container element `miniMapContainer`, absolute positioning diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue index c5946cb9..5591fbff 100644 --- a/web/src/pages/Doc/en/miniMap/index.vue +++ b/web/src/pages/Doc/en/miniMap/index.vue @@ -34,6 +34,12 @@ MindMap.usePlugin(MiniMap)

Small map idea:

1.Prepare a container element container, position is not static

+

If using rich text editing mode, it is best to remove the default style from the elements inside the 'container', otherwise there may be text offset issues within nodes:

+
.container * {
+  margin: 0;
+  padding: 0;
+}
+

2.In container, create a small map container element miniMapContainer, absolute positioning

3.In container, create a view box element viewBoxContainer, absolute diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md index fd33a531..ce12fcb1 100644 --- a/web/src/pages/Doc/zh/introduction/index.md +++ b/web/src/pages/Doc/zh/introduction/index.md @@ -8,19 +8,16 @@ ## 特性 -- [x] 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小整体体积 -- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴、鱼骨图六种结构 +- [x] 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积 +- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴(横向、竖向)、鱼骨图等结构 - [x] 内置多种主题,允许高度自定义样式,支持注册新主题 -- [x] 支持快捷键 -- [x] 节点内容支持图片、图标、超链接、备注、标签、概要 -- [x] 支持前进后退 -- [x] 支持拖动、缩放 -- [x] 支持右键和Ctrl+左键两种多选方式 -- [x] 支持节点自由拖拽、拖拽调整 -- [x] 支持多种节点形状 -- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`,支持从`json`、`xmind`、`markdown`导入 -- [x] 支持小地图、支持水印 -- [x] 支持关联线 +- [x] 节点内容支持文本(普通文本、富文本)、图片、图标、超链接、备注、标签、概要 +- [x] 节点支持拖拽(拖拽移动、自由调整)、多种节点形状,支持使用 DDM 完全自定义节点内容 +- [x] 支持画布拖动、缩放 +- [x] 支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式 +- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`、`xmind`,支持从`json`、`xmind`、`markdown`导入 +- [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印 +- [x] 提供丰富的配置,满足各种场景各种使用习惯 ## 仓库目录介绍 diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue index 7cd3ab6c..63379869 100644 --- a/web/src/pages/Doc/zh/introduction/index.vue +++ b/web/src/pages/Doc/zh/introduction/index.vue @@ -8,19 +8,16 @@

特性

仓库目录介绍

1.simple-mind-map

@@ -28,11 +25,11 @@

2.web

使用simple-mind-map库,基于vue2.xElementUI搭建的在线思维导图。特性:

提供文档页面服务。

3.dist

diff --git a/web/src/pages/Doc/zh/miniMap/index.md b/web/src/pages/Doc/zh/miniMap/index.md index ebd00303..441fdd71 100644 --- a/web/src/pages/Doc/zh/miniMap/index.md +++ b/web/src/pages/Doc/zh/miniMap/index.md @@ -42,6 +42,15 @@ MindMap.usePlugin(MiniMap) 1.准备一个容器元素`container`,定位不为`static` +如果使用的是富文本编辑模式,那么最好给`container`内部的元素去除一下默认样式,否则可能会出现节点内文本偏移的问题: + +```css +.container * { + margin: 0; + padding: 0; +} +``` + 2.在`container`内创建一个小地图容器元素`miniMapContainer`,绝对定位 3.在`container`内创建一个视口框元素`viewBoxContainer`,绝对定位,设置边框样式,过渡属性(可选) diff --git a/web/src/pages/Doc/zh/miniMap/index.vue b/web/src/pages/Doc/zh/miniMap/index.vue index a5ed0271..9b2f7fb3 100644 --- a/web/src/pages/Doc/zh/miniMap/index.vue +++ b/web/src/pages/Doc/zh/miniMap/index.vue @@ -29,6 +29,12 @@ MindMap.usePlugin(MiniMap)

小地图思路:

1.准备一个容器元素container,定位不为static

+

如果使用的是富文本编辑模式,那么最好给container内部的元素去除一下默认样式,否则可能会出现节点内文本偏移的问题:

+
.container * {
+  margin: 0;
+  padding: 0;
+}
+

2.在container内创建一个小地图容器元素miniMapContainer,绝对定位

3.在container内创建一个视口框元素viewBoxContainer,绝对定位,设置边框样式,过渡属性(可选)

4.监听data_changeview_data_change事件,在该事件内调用calculationMiniMap方法获取计算数据,然后将svgHTML渲染到miniMapContainer元素内,并且设置miniMapContainer元素的样式: