陈嘉名/mindmap

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 0

陈嘉名/mindmap

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。

项目仓库所选许可证以仓库主分支所使用许可证为准

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件新建 Diagram 文件

新建子模块

上传文件

分支 8

标签 0

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

dependabot[bot] Bump ws from 6.2.1 to 6.2.2 4b872da

378 次提交

public

src

.eslintrc.js

.gitignore

README.md

babel.config.js

package-lock.json

package.json

tsconfig.json

vue.config.js

README

# 思维导图Vue2组件 ![npm](https://img.shields.io/npm/v/@hellowuxin/mindmap) ![npm](https://img.shields.io/npm/dm/@hellowuxin/mindmap)

> 一个由[MindNode](https://mindnode.com)启发的思维导图Vue组件,基于d3.js实现 
> 目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠...

## 近期更新

> 该项目基本不会再维护 
> 目前正在开发Vue3、d3v6版本的[思维导图组件](https://github.com/hellowuxin/vue3-mindmap),欢迎支持

## 安装

```sh
npm install @hellowuxin/mindmap
```

## PROPS

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| v-model | Array | undefined | 设置思维导图数据 |
| width | Number | 100% | 设置组件宽度 |
| height | Number | undefined | 设置组件高度 |
| xSpacing | Number | 80 | 设置节点横向间隔 |
| ySpacing | Number | 20 | 设置节点纵向间隔 |
| strokeWidth | Number | 4 | 设置连线的宽度 |
| draggable | Boolean| true | 设置节点是否可拖拽 |
| gps | Boolean| true | 是否显示居中按钮 |
| fitView | Boolean| true | 是否显示缩放按钮 |
| showNodeAdd | Boolean| true | 是否显示添加节点按钮 |
| keyboard | Boolean| true | 是否响应键盘事件 |
| contextMenu | Boolean| true | 是否响应右键菜单 |
| zoomable | Boolean| true | 是否可缩放、拖移 |
| showUndo | Boolean| true | 是否显示撤销重做按钮 |
| download | Boolean| true | 是否显示下载按钮 |

## EVENTS

| Name | arguments | Description |
| --- | --- | --- |
| updateNodeName | data, id | 更新节点名称时,传入节点数据和节点id |
| click | data, id | 点击节点时,传入节点数据和节点id |

## 样例

```html
<template>
 <mindmap v-model="data"></mindmap>
</template>

export default {
 components: { mindmap },
 data: () => ({
 data: [{
 "name":"如何学习D3",
 "children": [
 {
 "name":"预备知识",
 "children": [
 { "name":"HTML & CSS" },
 { "name":"JavaScript" },
 ...
 ]
 },
 {
 "name":"安装",
 "_children": [
 { "name": "折叠节点" }
 ]
 },
 {
 "name":"进阶",
 "left": true
 },
 ...
 ]
 }]
 })
}
</script>
```

## 键盘事件

<kbd>⇥ tab</kbd>、<kbd>⏎ enter</kbd>、<kbd>⌫ backspace</kbd>、<kbd>⌘ cmd</kbd>+<kbd>z</kbd>、<kbd>⌘ cmd</kbd>+<kbd>y</kbd>

## 交互逻辑

**鼠标**:space+左键移动、右键菜单、ctrl+滚轮缩放、左键选中

**触控板**:双指滚动移动、双指菜单、双指捏合缩放、单指选中

## 待解决

- [ ] 导出多种格式
- [ ] 设置节点的宽高
- [ ] 多个根节点
- [ ] ...