mirror198829 / vue-topo Goto Github PK

View Code? Open in Web Editor NEW

193.0 12.0 51.0 6.34 MB

😳 vue + svg 拓扑编辑与展示

Home Page: https://mirror198829.github.io/vue-topo/dist/index.html

JavaScript 58.76% HTML 0.18% Vue 40.38% CSS 0.66% Less 0.03%

vue vue2 svg topo

vue-topo's Introduction

vue2.0拓扑组件

demo演示地址

https://mirror198829.github.io/vue-topo/dist/index.html

序

2016年9月接到html5替换flash的拓扑图任务，历时3月整，使用jquery+SVG技术完成第一款拓扑图组件，涵盖拖拽、缩放、删除、选中区域、连线、导入、保存图片、多种布局显示等功能，但当node数高达百位时，因dom的操作，出现了非常可怕的性能问题。
2017年10月20日，因新公司项目需要，果断决定结合当下流行的VUE2.0框架 + SVG技术重写拓扑组件，并将此开源，希望大家多提意见

技术选型

VUE2.0
SVG
Element-UI

功能分析及技术点

功能	技术点
toolbar拖拽	记录鼠标位置；拖拽物体的显示隐藏；
连接关系：创建连线	绘制时：使用svg的 `<line>`，需正确获取起始和终止点；结束绘制：使用`<path>`路径绘制连线形态，根据两者节点位置不同，共计4种连线形态展示；
包含关系：单层嵌套	依据最终的位置判断是否为包含关系（这里的算法有待优化）; 重新计算父节点宽高：父结点宽高为子节点宽高+边距重新计算子节点的位置信息：父节点位置信息 - 边距
包含关系：多层嵌套	通过递归的方式完成嵌套布局
包含关系：并列嵌套	父节点宽高：内部子节点宽度之和 + 边距，父节点高度：最高子节点高度 + 边距；每个子节点位置：当前节点位置 = 前一个节点位置 + 前一个节点宽度 + 间隔边距
删除：单结点	删除节点同时删除关联连线（source&target
删除：包含关系	删除包含关系同时恢复父节点的宽高同时刷新并列节点位置
删除：连线	刷新原本有连线的连接点样式
删除：多节点	使用for循环，注意i--
框选	使用`<reat>`,根据鼠标移动位移的正负数，选择不同的x和y值
svg的viewbox的移动功能	记录鼠标移动的位移，修改viewbox的视图位置

Usage

NPM

npm i vue-topo -save

import vTopo from 'vue-topo'
import 'vue-topo/dist/vue-topo.min.css'
Vue.use(vTopo)

github源码使用

npm install

npm run dev  //启动服务

引入组件

// xxx.vue
 <v-topo 
  :editable="true"
  :topo-data="topoData1">
 </v-topo>

Attributes

参数	说明	类型	可选值	默认值	必填
editable	是否可编辑	boolean	true/false	true	—
topo-data	topo初始值	object	—	{nodes:[],connectors:[]}	是

说明

代码开源，欢迎码农们提出宝贵意见，bug请提issues，本人将及时修改。最后著作权归一步工程师，请大家注明代码来源：https://github.com/Mirror198829/vue-topo

vue-topo's People

Contributors

Stargazers

Watchers

Forkers

stablexia yingxiongtang cshsh wangbokun zhenglincheng hxl1987 veketcao listenbehind zhang-ning bobqiu maxianbin vsppm waynejohny lixianglong3210 emiyayang itlily marvis chybcool hqxluoyang hyphantom xiaoyao1114 zwwang2005 szmufo kitter maxshen29 xshrim jingqiu2180 realpdai luxuriantworld gavinwang-au mofeng1123 keyzf wzc570738205 ashur816 nollyhi naturewind19 hucheng626 rain20199 skyroot shuangyue521 meinan cydysm guoyanyong yuhaibobobo pugbabu lmyun winkay zmframe ghplvh hhy5277 pspglb

vue-topo's Issues

我这边利用图标做各种思维导图，因为没有保存，导入、导出已经保存好的存档，每次都得重新再画一遍。

请问目前是不是暂未支持双向箭头？比如说显示两节点的同步关系

del keycode在mack pro下无反应

感谢sougou Kevin.XU及团队发现此bug 并定位到问题原因。
经测，在mac pro 下 del keycode==46 无反应。因为mac pro下del的keycode为8.
解决：增加keycode == 8 ，因此win下点击backspace也会删除节点

大佬 vue-element-admin中无法使用

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我在main.js中加入了
import vTopo from 'vue-topo'
import 'vue-topo/dist/vue-topo.min.css'
Vue.use(vTopo)

但是在实际页面使用时出现了上面的warn 当然，没有任何显示

用这个做的基础 https://panjiachen.gitee.io/vue-element-admin-site/zh

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'locahost', // can be overwritten by process.env.HOST
    
    ……

host设置为了localhost。

解决方法：讲localhost修改为0.0.0.0

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST