wenyuan / jtopo_topology Goto Github PK

View Code? Open in Web Editor NEW

303.0 16.0 121.0 43.28 MB

基于 jtopo 二次封装，拓扑图编辑器

Home Page: http://www.jtopo.com/

HTML 4.74% CSS 0.51% JavaScript 76.77% Less 8.93% SCSS 9.05%

jtopo jtopo-topology topology

jtopo_topology's Introduction

jTopo Topology

基于jtopo二次封装，修复了一些bug。便于直接使用，也可以稍作修改后应用到各前端框架中。
纯前端项目，所有ajax接口保留，采用模拟数据，实际开发过程中稍作修改即可对接后端。

预览

预览方式：
下载该项目代码，用webstorm打开即可预览（或用其他内置http服务器的IDE打开）

实现功能

拓扑图的加载
工具栏、鼠标右键菜单
多种类型节点、连线的添加/删除
节点的图片的缩放与调整
鼠标经过节点显示tooltip信息

项目依赖

jQuery
jTopo.js
layui 其中layui用于本项目的页面布局和组件，非必须。

项目结构

.
├── json                    // 模拟数据,实际使用中用ajax代替
├── screenshots             // 项目截图(无用)
├── static
|   ├── font-awesome-4.7.0
|   ├── jquery-3.3.1
|   ├── jtopo-0.4.8
|       ├── jtopo-0.4.8-dev.js                 // jtopo源码,已经过修改
|       └── jtopo-0.4.8-dev(带注释版报错).js    // 本项目优化了一部分源码,故不要使用这个包,仅辅助解读源码用
|   ├── layui-2.3.0
|   └── public             // 本项目的静态文件
|       ├── css                                // 样式文件,根据实际项目修改
|       ├── img                                // 拓扑图引用图片,根据实际项目修改
|       └── js                                 // jtopo-editor.js为二次封装代码,如需在vue等框架中使用,可适当进行修改
|
├── network_topology.html // demo页面
├── 其它
|

提交记录

2019.03.22
- 更新与修复demo页面的bug（本次提交未对jtopo源码做修改，仅是demo页面的更新）
2018.08.23
- 拓扑图连线(Link)属性编辑
- 修改源码, 做反序列化保护,防undefined(之前需要在调用方做保护)
- 修改源码, 新增以图片形式导出拓扑图
2018.08.02
- 修改源码, 使序列化的时候支持节点属性值为json对象
2018.07.04
- 拓扑图节点(Node)属性编辑
- 节点tooltip的触发与显示
- 编辑和非编辑模式切换
- 代码部分重构
2018.06.29
- 节点和连线的添加删除
- 拓扑图序列化
- 右键菜单和功能
- 前端页面部分组件化整理

Vue版本拓扑图

等有时间了从项目中剥离出来，将在本项目基础上另起一个分支

vue版本预览

官方API文档补充

参见官方API文档补充.txt

jtopo_topology's People

Contributors

Stargazers

Watchers

Forkers

rqx110 taquanjianimei vue-3020 hxl1987 junneyang jxp4531 skyroot dlzdy wdir common110 ripingit freeunion1possible songyanbo adam123206 zhanshaocong hukaixuan2017 roojay520 hack-link pspglb zfs990 zyj0021 wylbjia cindyzhu kafka-soda ohayowp tqbzysj junyan-zg dongleizi wuyu22222 zm-erick haipiyuan richer-91 ziyiwang szhorizon xiaoc94 lixieqing via123 zhangzewa maxtsang30 qinlue adwinsw bigmgreen miyawang tiger-liuhu hulao6 zhuxl13817468272 submorino kitter netbardj qinxiaoxiang luoying87 zxx520llc chenqian0824 amt945 yusihuu angryturf lizhx shfzhangjian cow-rong airqqqqq airttaryuzcf fatekao 17666054965 cyrix66 wantnocode bluestone029 chengxs11 wang120140 ygyang pingwangzixin libertyarow zjie-zheng kian-404 kgtone tcry601 jackeyaw north-city renjiangzhou2163 scai2013 kirahua 3cdota stevexk waterwatermelon august2016 wangscript007 odora yuecaiming yushan126 dizhaung hua790983977 lovezjj008 skyrain521 huimin001 zddu rosezh yzwsm woodstiger sunnylihy chenshaohui-java zhanliuliu

jtopo_topology's Issues

鼠标中键的上下滚动与放大缩小

建议修改为：
向上：放大
向下：缩小

jtopo-0.4.8-dev.js 1103行

null != this.wheelZoom && (b > 0 ? this.zoomOut(this.wheelZoom) : this.zoomIn(this.wheelZoom))

用HBuilder和idea打开项目，拖拽之后图片都显示为蓝色小方块儿，如下图

is:issue is:open node节点的zIndex设置了显示不会变化，这是为啥

您好：

我是这么写的
zIndexAdd: function () {
if (editor.currentNode instanceof JTopo.Node) {
console.log(editor.currentNode.zIndex)
editor.currentNode.zIndex =+ 10;//node的层级属性zIndex的值发生了变化。但是图形却没有移动到上层。初始化整个图形zIndex还是有效的。就是动态改变图形不会变层级。
}
}
，其他的比如角度之类的已修改就变了。
还发现只要设置的zIndex再做其他操作都不生效，比如先设置zIndex，再删除这个节点也不行。
editor.currentNode.zIndex =+ 10;
editor.scene.remove(editor.currentNode.zIndex) //结果节点删除不了
但是先设置其他的再操作不会这样。
比如
editor.currentNode.rotate =+ 10;
editor.scene.remove(editor.currentNode.zIndex)//结果节点可删除

求解。

在火狐上面拖动图片的话，会打开一个新窗口

只要拖动图片就会新增一个窗口，解决方法是增加一个全局的取消默认事件
document.body.ondrop = (event)=> { event.preventDefault(); event.stopPropagation(); }

demo问题，希望作者看到有空回复一下子哈

// 加载网络拓扑图
editor.loadTopology(rootPath + '/json/network.json', "img/backimg.png");

TopologyPanel.prototype.loadTopology = function (url, topologyGuid, backImg) {

集成到angular问题

画布上，点击右键不起作用

大神，vue 的版本可否刚一下效果

鼠标拖动节点后，容易误连线。建议取消自动连线，增加连线控制按钮

请问可以增加一个定点缩放吗

类似于WEB地图，鼠标指在哪儿就在哪儿，谢谢大佬，也可以给一个实现思路，可以吗？

Vue的远版本上的10秒刷新具体是做了什么代码操作啊

Stage.width = 1000 不能设置

上代码
let canvas: any = document.getElementById('learn-canvas'); this.stage = new JTopo.Stage(canvas); this.stage.width = 1000; this.stage.height = 200;

错误信息：
ProductListComponent.html:3 ERROR TypeError: Cannot set property width of [object Object] which has only a getter at JTopoComponent.push../src/app/jTopo/jTopo.component.ts.JTopoComponent.ngOnInit (jTopo.component.ts:26) at checkAndUpdateDirectiveInline (core.js:21764) at checkAndUpdateNodeInline (core.js:29983) at checkAndUpdateNode (core.js:29945) at debugCheckAndUpdateNode (core.js:30579) at debugCheckDirectivesFn (core.js:30539) at Object.eval [as updateDirectives] (ProductListComponent.html:30) at Object.debugUpdateDirectives [as updateDirectives] (core.js:30531) at checkAndUpdateView (core.js:29927) at callViewAction (core.js:30168)
希望有人能帮忙解答一下

topoImgPath is not defined

bellow is not defined:

topoImgPath
https://github.com/xwenyuan/jtopo_topology/blob/c2040bf879f8836d41310ab2acfd9dba0b50d2fb/static/public/js/jtopo-editor.js#L997

Timer
https://github.com/xwenyuan/jtopo_topology/blob/c2040bf879f8836d41310ab2acfd9dba0b50d2fb/static/public/js/jtopo-editor.js#L545

rootPath
https://github.com/xwenyuan/jtopo_topology/blob/c2040bf879f8836d41310ab2acfd9dba0b50d2fb/network_topology.html#L644

and the loadTopology function has 3 parameters,
https://github.com/xwenyuan/jtopo_topology/blob/c2040bf879f8836d41310ab2acfd9dba0b50d2fb/static/public/js/jtopo-editor.js#L67

and also missing util.js in static/public/js/

please fix these errors, I clone this project, it can't run very well.

线的拖拽是怎么实现的

请教一下，我打开页面，在实例化的时候，将线也作为可以拖拽部分，
var nodes_line = $("[topo-div-type='topo-link']");
var nodes_line = nodes_line.length;
for (var i = 0; i < nodes_line; i++) {
var text = $(nodes_line[i]).find("span").eq(0).text();
editor.drag(nodes_line[i], document.getElementById('topology-canvas'), text);
}
但是拖在在舞台区，就成了一个图片，请教一下这个怎么处理才能连线

场景放大后添加分组显示不出

当场景放大到一定程度后添加分组显示不出来，缩小后又能正常显示了。