All Projects → Mirror198829 → Vue Topo

Mirror198829 / Vue Topo

😳 vue + svg 拓扑编辑与展示

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Topo

Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-43.79%)
Mutual labels:  svg, vue2
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-67.32%)
Mutual labels:  svg, vue2
Svglite
A lightweight svg graphics device for R
Stars: ✭ 143 (-6.54%)
Mutual labels:  svg
Gpk admin
✨ GeekPark Content Management System
Stars: ✭ 150 (-1.96%)
Mutual labels:  vue2
Gantt
Gantt chart library using jsx support SVG, Canvas and SSR
Stars: ✭ 148 (-3.27%)
Mutual labels:  svg
Vue Wechat
🔥 基于Vue2.0高仿微信App的单页应用
Stars: ✭ 1,832 (+1097.39%)
Mutual labels:  vue2
Plutosvg
Tiny SVG rendering library in C
Stars: ✭ 149 (-2.61%)
Mutual labels:  svg
Coreui Icons
CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats
Stars: ✭ 1,813 (+1084.97%)
Mutual labels:  svg
Angular Svg Icon
Angular component for inlining SVGs allowing them to be easily styled with CSS.
Stars: ✭ 151 (-1.31%)
Mutual labels:  svg
Vivid
a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.
Stars: ✭ 1,797 (+1074.51%)
Mutual labels:  svg
Cax
HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
Stars: ✭ 1,864 (+1118.3%)
Mutual labels:  svg
Vuex Namespaced Module Structure
📈 A Vue.js project powered by Vuex namespaced modules in a simple structure based on Large-scale Vuex application structures
Stars: ✭ 146 (-4.58%)
Mutual labels:  vue2
Svg Banners
Styled banners for your Readme made with html/css in SVG !!
Stars: ✭ 145 (-5.23%)
Mutual labels:  svg
Vue Tree Chart
flexible tree chart using Canvas and Svg, powered by D3.js
Stars: ✭ 149 (-2.61%)
Mutual labels:  svg
Vue2 Frappe
A Vue 2 integration using Frappe Charts
Stars: ✭ 144 (-5.88%)
Mutual labels:  vue2
Widgetsplayground
前端组件管理系统
Stars: ✭ 150 (-1.96%)
Mutual labels:  vue2
Htmlrenderer
C# HTML Layout and HTML Rendering Engine
Stars: ✭ 143 (-6.54%)
Mutual labels:  svg
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+7790.2%)
Mutual labels:  vue2
Flow View
is a visual editor for Dataflow programming
Stars: ✭ 148 (-3.27%)
Mutual labels:  svg
Terminal In React
👨‍💻 A component that renders a terminal
Stars: ✭ 1,939 (+1167.32%)
Mutual labels:  svg

996.icu

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].