init

.eslintrc.js

+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard',
+  ],
+  parserOptions: {
+    ecmaVersion: 11,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+    '@typescript-eslint',
+  ],
+  rules: {
+    'lines-between-class-members': 0,
+    'space-before-function-paren': ['error', 'never'],
+    'comma-dangle': ['error', 'always-multiline'],
+    'operator-linebreak': ['error', 'before'],
+    semi: ['error', 'never'],
+  },
+}

.gitignore

 .DS_Store
 node_modules
-/dist
-/docs/.vuepress/dist
+.npmrc
+dist
+coverage
 # local env files
 .env.local
 .env.*.local
@@ -10,7 +11,6 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 
 # Editor directories and files
 .idea

.npmignore

-# 忽略目录
-examples/
-packages/
-public/
-dist/
-common/
-docs/
-config/
-
-# 忽略指定文件
-vue.config.js
-babel.config.js
-*.map
\ No newline at end of file

.prettierrc

-{
-    "printWidth": 120,
-    "tabWidth": 4,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "semi": false,
-    "wrap_line_length": 120,
-    "wrap_attributes": "auto",
-    "proseWrap": "always",
-    "arrowParens": "avoid",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": true,
-    "useTabs": false,
-    "eslintIntegration": true,
-    "overrides": [
-        {
-            "files": ".prettierrc",
-            "options": {
-                "parser": "json"
-            }
-        }
-    ],
-    "endOfLine": "auto"
-}

LICENSE

-MIT License
-
-Copyright (c) 2021 Mr.Yan
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file

README.md

+<img src="./public/mindmap.jpg" width="300"/>
+
+# 思维导图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>
+
+<script>
+import mindmap from '@hellowuxin/mindmap'
+
+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+滚轮缩放、左键选中
+
+**触控板**：双指滚动移动、双指菜单、双指捏合缩放、单指选中
+
+## 待解决
+
+- [ ] 导出多种格式
+- [ ] 设置节点的宽高
+- [ ] 多个根节点
+- [ ] ...

babel.config.js

 module.exports = {
-    presets: [
-        '@vue/cli-plugin-babel/preset'
-    ]
-}
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+}
\ No newline at end of file

common/const.scss

-// 背景色
-$vd-default: #ffffff;
-$vd-success: #9ede73;
-$vd-warning: #e48900;
-$vd-danger: #be0000;
-$vd-info: #536162;
-$vd-primary: #214252;
-// 字体色
-$vd-font: #606266;
-$vd-light: #c0c4cc;
-// 边框色
-$vd-border: #dcdfe6;
-$vd-card-border: #ebeef5
\ No newline at end of file

config/config.build.js

-const fs = require('fs');
-const path = require('path');
-const join = path.join;
-const resolve = dir => path.join(__dirname, '../', dir);
-
-function getComponentEntries(path) {
-    let files = fs.readdirSync(resolve(path));
-    const componentEntries = files.reduce((fileObj, item) => {
-        const itemPath = join(path, item);
-        const isDir = fs.statSync(itemPath).isDirectory();
-        const [name, suffix] = item.split('.');
-        if (isDir) {
-            fileObj[item] = resolve(join(itemPath, 'index.js'));
-        }
-        else if (suffix === 'js') {
-            fileObj[name] = resolve(`${itemPath}`);
-        }
-        return fileObj;
-    }, {});
-
-    return componentEntries;
-}
-const buildConfig = {
-    outputDir: resolve('lib'),
-    productionSourceMap: false,
-    configureWebpack: {
-        entry: getComponentEntries('packages'),
-        output: {
-            filename: '[name]/index.js',
-            libraryExport: 'default',
-            library: 'bass-share',
-            libraryTarget: 'umd'
-        }
-    },
-    css: {
-        sourceMap: false,
-        extract: {
-            filename: '[name]/index.css'
-        }
-    },
-    chainWebpack: config => {
-        config.optimization.delete('splitChunks');
-        config.plugins.delete('copy');
-        config.plugins.delete('preload');
-        config.plugins.delete('prefetch');
-        config.plugins.delete('html');
-        config.plugins.delete('hmr');
-        config.entryPoints.delete('app');
-    }
-};
-module.exports = buildConfig;

config/config.dev.js

-module.exports = {
-    pages: {
-        index: {
-            entry: 'examples/main.js',
-            template: 'public/index.html',
-            filename: 'index.html'
-        }
-    },
-    chainWebpack: config => {
-        config.module
-            .rule('js')
-            .include
-            .add('/packages')
-            .end()
-            .use('babel')
-            .loader('babel-loader')
-            .tap(options => {
-                return options
-            })
-    }
-}

examples/App.vue

-<template>
-  <div id="app">
-    <bs-openapi/>
-  </div>
-</template>
-
-<script>
-export default {
-  data(){
-    return{}
-  },
-  methods:{
-  }
-}
-</script>

lib/demo.html

-<meta charset="utf-8">
-<title>bass-share demo</title>
-<script src="./bass-share.umd.js"></script>
-
-<link rel="stylesheet" href="./bass-share.css">
-
-
-<script>
-console.log(bass-share)
-</script>

package.json

 {
-    "name": "bass-share",
-    "version": "0.3.5",
-    "private": false,
-    "main": "lib/index",
-    "description": "A Component Library for Vue.js.",
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lib": "vue-cli-service build --target lib --name bass-share --dest lib packages/index.js"
+  "name": "openapi",
+  "version": "0.0.1",
+  "description": "openapi Vue Component",
+  "author": "guxukai",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build-lib": "vue-cli-service build --target lib --name openapi ./src/components/openapi.vue",
+    "test": "jest"
+  },
+  "main": "./dist/openapi.umd.min.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.8.0",
+    "@typescript-eslint/parser": "^3.8.0",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-typescript": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^1.0.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.1.0",
+    "eslint": "^7.6.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "jest": "^26.1.0",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.2",
+    "typescript": "~3.9.7",
+    "vue": "^2.6.11",
+    "vue-jest": "^3.0.6",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "dependencies": {
-        "core-js": "^3.6.5",
-        "vue": "^2.6.11",
-        "vuepress-plugin-code-copy": "^1.0.6"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "~4.5.0",
-        "@vue/cli-service": "~4.5.0",
-        "node-sass": "^4.12.0",
-        "sass-loader": "^8.0.2",
-        "vue-template-compiler": "^2.6.11",
-        "vuepress": "^1.8.2"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not dead"
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/typescript"
     ],
-    "author": {
-        "name": "CrazyYan"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git@github.com:bass-share/bass-share.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/bass-share/bass-share/issues"
+    "rules": {},
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser"
     },
-    "homepage": "https://github.com/CrazyMrYan/bass-share",
-    "keywords": [
-        "vue",
-        "vue2",
-        "vue-ui",
-        "voter-dieu",
-        "voter-dieu",
-        "voter-dieu-component",
-        "vuecomponent"
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)",
+          "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        ],
+        "env": {
+          "mocha": true
+        }
+      }
     ]
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.{js,vue}",
+      "!**/node_modules/**"
+    ],
+    "coverageReporters": [
+      "html",
+      "text-summary"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/hellowuxin/mindmap/issues"
+  },
+  "homepage": "https://github.com/hellowuxin/mindmap#readme",
+  "keywords": [
+    "mindmap",
+    "vue",
+    "d3"
+  ],
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hellowuxin/mindmap.git"
+  }
 }

packages/bsOpenapi/index.js

-import bsOpenapi from './src'
-
-bsOpenapi.install = function (Vue) {
-  Vue.component(bsOpenapi.name, bsOpenapi)
-}
-
-export default bsOpenapi

packages/bsOpenapi/src/index.vue

-<template>
-  <div>111</div>
-</template>
-<script>
-export default {
-  name: 'bs-openapi',
-}
-</script>

packages/index.js

-import bsOpenapi from './bsOpenapi'
-
-const components = [
-    bsOpenapi,
-]
-
-// 全局注册
-const install = function( Vue, opt = {} ) {
-    components.forEach(item => {
-        register( Vue, item )
-    })
-}
-
-export default install
-
-if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
-}
-/**
- * 注册组件
- * @param { vue } _v
- * @param { component } com
- */
-function register ( _v, com ) {
-    if(typeof _v !== 'function' && typeof com !== 'object') return
-    _v.component( com.name, com)
-}
-// 按需暴露
-export {
-    install,
-    bsOpenapi,
-}

public/index.html

 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>openapi</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but  doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

+<template>
+  <div>
+    <openapi/>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Openapi from '@/components/openapi.vue'
+export default Vue.extend({
+  components: {
+    Openapi,
+  },
+})
+</script>

src/components/openapi.vue

+<template>
+  <div>11</div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  name: 'openapi',
+})
+</script>

src/index.d.ts

+// interface Data {
+//   name: string
+//   children?: Array<Data>
+//   _children?: Array<Data>
+//   left?: boolean
+// }
+//
+// interface Mdata {
+//   name: string
+//   id: string
+//   color: string
+//   gKey: number
+//   size: number[]
+//   children?: Array<Mdata>
+//   _children?: Array<Mdata>
+//   left: boolean
+// }
+//
+// interface FlexNode {
+//   children: FlexNode[]
+//   data: Mdata
+//   depth: number
+//   dx: number
+//   dy: number
+//   height: number
+//   length: number
+//   parent: FlexNode | null
+//   x: number
+//   y: number
+//   each: Function
+//   size: number[]
+//   px: number
+//   py: number
+// }

examples/main.js → src/main.ts

@@ -2,12 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
-// 导入组件库
-import BassShare from '../packages'
 
-console.log(BassShare)
-// 注册组件库
-Vue.use( BassShare )
 new Vue({
-  render: h => h(App)
+  render: h => h(App),
 }).$mount('#app')

src/plugins/vuetify.ts

+// import '@mdi/font/css/materialdesignicons.css'
+// import Vue from 'vue'
+// import Vuetify from 'vuetify/lib'
+//
+// Vue.use(Vuetify)
+//
+// export default new Vuetify({
+//   icons: {
+//     iconfont: 'mdi',
+//   },
+// })

src/shims-tsx.d.ts

+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/shims-vue.d.ts

+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "resolveJsonModule": true,
+    "emitDecoratorMetadata": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "vuetify",
+      "resize-observer-browser"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

vue.config.js

-const devConfig = require('./config/config.dev');
-const buildConfig = require('./config/config.build');
-module.exports = process.env.NODE_ENV === 'production' ? buildConfig : devConfig;
+module.exports = {
+  css: {
+    extract: false,
\ No newline at end of file
+  },
+  transpileDependencies: [
+    'vuetify',
+  ],
+}