Skip to content

S
smart
Commit b7bcd648 authored by wangqinghua's avatar wangqinghua
Browse files
Options

login

parent cb5f8692
Hide whitespace changes
Inline Side-by-side
Showing with 283 additions and 225 deletions
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.ts
View file @ b7bcd648
......@@ -20,16 +20,7 @@ export class FlowTrendComponent implements OnInit {
}
loadVisTree(treedata) {
const options = {
interaction: {
hover: true,
},
manipulation: {
enabled: true
}
};
const container = this.networkContainer.nativeElement;
this.network = new vis.Network(container, treedata, options);
}
getTreeData(){
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ b7bcd648
......@@ -28,20 +28,19 @@
</nz-select>
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button nzType="default"><i class="anticon anticon-plus"></i>添加
</button>
<button nz-button nzType="default"><i class="anticon anticon-pause-circle-o"></i>编辑</button>
<button nz-button nzType="default"><i class="anticon anticon-play-circle-o"></i>删除</button>
<button nz-button nzType="default"><i class="anticon anticon-close-circle"></i>暂停</button>
<button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus"></i>添加</button>
<button nz-button (click)="editTopo()" nzType="default"><i class="anticon anticon-pause-circle-o"></i>编辑</button>
<button nz-button (click)="deleteTopo()" nzType="default"><i class="anticon anticon-play-circle-o"></i>删除</button>
</div>
</div>
<div class="layui-layout layui-layout-admin">
<div class="layui-header layui-bg-gray">
<input style="width: 200px;" type="text" [(ngModel)]="name" nz-input placeholder="请输入拓扑图名称">
<!-- 顶部工具栏 -->
<div class="layui-nav layui-layout-right">
<span aria-hidden="true" title="编辑" onClick="editor.utils.editTopology()">编辑</span>
<div class="layui-nav layui-layout-right" style="line-height: 60px">
<!--<span aria-hidden="true" title="编辑" onClick="editor.utils.editTopology()">编辑</span>-->
<span aria-hidden="true" title="全屏查看"
onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">
全屏查看</span>
......@@ -49,7 +48,7 @@
onClick="editor.utils.showInCenter()">居中显示</span>
<span aria-hidden="true" title="预览"
onClick="editor.utils.showPic()">预览</span>
<span aria-hidden="true" title="保存" (click)="create()">保存</span>
<span aria-hidden="true" title="保存" (click)="save()">保存</span>
<span aria-hidden="true" title="复制"
onClick="editor.utils.cloneSelectedNodes()">复制</span>
<span aria-hidden="true" title="删除"
......@@ -560,6 +559,7 @@
style="height: 580px;width: 100%;">
您的浏览器不支持HTML5!
</canvas>
<span>{{topoType}}</span>
</div>
</div>
</div>
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ b7bcd648
import {AfterViewChecked, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService} from 'ng-zorro-antd';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {DomSanitizer} from '@angular/platform-browser';
import * as $ from 'jquery';
declare let editor:any;
declare let layui:any;
declare let editor: any;
declare let layui: any;
@Component({
selector: 'smart-ne-topology',
templateUrl: './ne-topology.component.html',
styles: [
`
.layui-side-scroll{
width: initial;
}
.layui-layout-right{
`
.layui-side-scroll {
width: initial;
}
.layui-layout-right {
color: #666666;
}
.layui-layout-right span{
.layui-layout-right span {
margin-right: 15px;
cursor: pointer;
}
......@@ -25,91 +28,46 @@ declare let layui:any;
]
})
export class NeTopologyComponent implements OnInit {
@ViewChild('topologyCanvas') topologyCanvas:ElementRef;
@ViewChild('topologyCanvas') topologyCanvas: ElementRef;
dataSet;
isVisible = false;
image;
topoId;
name;
topoType = '查看';
constructor(private topologySer: TopologyService, private message: NzMessageService,
private sanitizer:DomSanitizer) {
private sanitizer: DomSanitizer, private modalSer: NzModalService) {
}
ngOnInit() {
layui.use('element', ()=>{
layui.use('element', () => {
let element = layui.element;
});
this.loadCanvas();
this.getList();
}
loadCanvas(){
// 选择连线方式后的css样式
$("#link-line").click( ()=> {
$(this).css("background-color", "darkgray");
$("#link-foldline-h").css("background-color", "white");
$("#link-foldline-v").css("background-color", "white");
$("#link-flexline-h").css("background-color", "white");
$("#link-flexline-v").css("background-color", "white");
$("#link-curveline").css("background-color", "white");
});
$("#link-foldline-h").click(()=> {
$(this).css("background-color", "darkgray");
$("#link-line").css("background-color", "white");
$("#link-foldline-v").css("background-color", "white");
$("#link-flexline-h").css("background-color", "white");
$("#link-flexline-v").css("background-color", "white");
$("#link-curveline").css("background-color", "white");
});
$("#link-foldline-v").click(()=> {
$(this).css("background-color", "darkgray");
$("#link-line").css("background-color", "white");
$("#link-foldline-h").css("background-color", "white");
$("#link-flexline-h").css("background-color", "white");
$("#link-flexline-v").css("background-color", "white");
$("#link-curveline").css("background-color", "white");
});
$("#link-flexline-h").click(()=> {
$(this).css("background-color", "darkgray");
$("#link-line").css("background-color", "white");
$("#link-foldline-h").css("background-color", "white");
$("#link-foldline-v").css("background-color", "white");
$("#link-flexline-v").css("background-color", "white");
$("#link-curveline").css("background-color", "white");
});
$("#link-flexline-v").click(()=> {
$(this).css("background-color", "darkgray");
$("#link-line").css("background-color", "white");
$("#link-foldline-h").css("background-color", "white");
$("#link-foldline-v").css("background-color", "white");
$("#link-flexline-h").css("background-color", "white");
$("#link-curveline").css("background-color", "white");
});
$("#link-curveline").click(()=> {
$(this).css("background-color", "darkgray");
$("#link-line").css("background-color", "white");
$("#link-foldline-h").css("background-color", "white");
$("#link-foldline-v").css("background-color", "white");
$("#link-flexline-h").css("background-color", "white");
$("#link-flexline-v").css("background-color", "white");
});
//新增拓扑图
addTopo() {
this.topoType = '新增';
editor.utils.clearTopology();
}
// 节点树中每个节点的拖放动作定义给拓扑图编辑器
let nodes = $("[topo-div-type='topo-node']");
let nodeLength = nodes.length;
console.log(nodes);
for (let i = 0; i < nodeLength; i++) {
let text = $(nodes[i]).find("span").eq(0).text();
editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
//编辑拓扑图
editTopo() {
if(!this.topoId){
this.message.info("请选择需要编辑的拓扑图")
return false;
}
editor.loadTopology( '', "img/backimg1.png");
this.topoType = '编辑';
editor.utils.editTopology();
}
//获取列表
getList() {
this.topologySer.findAll({}).subscribe(
this.topologySer.findAll().subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data;
......@@ -120,29 +78,165 @@ export class NeTopologyComponent implements OnInit {
);
}
save() {
if (this.topoType == '新增') {
this.create();
} else {
this.update();
}
}
//创建
create(){
let data = editor.saveTopology();
console.log(data);
this.topologySer.create(data).subscribe(
(res)=>{
}
)
create() {
if (!this.name) {
this.message.info('请输入拓扑图名称');
return false;
}
let data = {
name: this.name,
json: editor.saveTopology()
};
this.topologySer.create(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('创建成功');
this.getList();
} else {
this.message.info(res.errMsg);
}
}
);
}
//编辑
update() {
if (!this.name) {
this.message.info('请输入拓扑图名称');
return false;
}
let data = {
id: this.topoId,
name: this.name,
json: editor.saveTopology()
};
this.topologySer.update(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('编辑成功');
this.getList();
} else {
this.message.info(res.errMsg);
}
}
);
}
//查询单个
getDetail(id){
getDetail(id) {
editor.utils.clearTopology();
this.topologySer.findItem(id).subscribe(
(res)=>{
(res) => {
if (res.errCode == 10000) {
let json = JSON.parse(res.data.json);
this.name = res.data.name;
this.topoId = res.data.id;
editor.loadTopologyByJson(json, 'img/backimg.png');
}
}
);
}
//删除拓扑图
deleteTopo() {
if(!this.topoId){
this.message.info("请选择需要删除的拓扑图")
return false;
}
this.modalSer.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该拓扑图吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
this.topologySer.delete(this.topoId).subscribe(
(res) => {
if (res.errCode == 10000) {
this.topoId = null;
this.message.info('删除成功');
this.getList();
} else {
this.message.info(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
}
)
);
}
//load
loadCanvas() {
// 选择连线方式后的css样式
$('#link-line').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-foldline-h').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-foldline-v').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-flexline-h').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-flexline-v').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-curveline').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
});
handleOk() {
this.isVisible = false;
this.image = null;
// 节点树中每个节点的拖放动作定义给拓扑图编辑器
let nodes = $('[topo-div-type=\'topo-node\']');
let nodeLength = nodes.length;
for (let i = 0; i < nodeLength; i++) {
let text = $(nodes[i]).find('span').eq(0).text();
editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
}
editor.loadTopology('', 'img/backimg.png');
}
}
src/main/webapp/app/netTopology/topology.service.ts
View file @ b7bcd648
......@@ -10,28 +10,28 @@ export class TopologyService {
}
//查询所有拓扑图
findAll(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmap/findAll',data);
findAll(): Observable<any> {
return this.http.get(SERVER_API_URL + '/sysmapJson/findAll');
}
//根据拓扑图ID查询背景图
//根据拓扑图ID查询
findItem(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/sysmap/find/' + params);
return this.http.get(SERVER_API_URL + '/sysmapJson/find/' + params);
}
//创建拓扑图
create(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmap/create' , data);
return this.http.post(SERVER_API_URL + '/sysmapJson/create' , data);
}
//修改拓扑图
update(data): Observable<any> {
return this.http.put(SERVER_API_URL + '/sysmap/update' , data);
return this.http.put(SERVER_API_URL + '/sysmapJson/update' , data);
}
//删除拓扑图
delete(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/sysmap/delete/' + params);
return this.http.get(SERVER_API_URL + '/sysmapJson/delete/' + params);
}
......
src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js
View file @ b7bcd648
......@@ -7,19 +7,21 @@
/**
* 提供拓扑图面板相关操作的函数集，编辑器继承其全部功能
*/
function TopologyPanel() {}
function TopologyPanel() {
}
/**
* 保存序列化的拓扑图JSON数据到服务器
*/
TopologyPanel.prototype.saveTopology = function (url) {
editor.mainMenu.hide()
let self = this
// 保存container状态
var containers = editor.utils.getContainers()
for (var c = 0; c < containers.length; c++) {
var temp = []
var nodes = containers[c].childs
for (var n = 0; n < nodes.length; n++) {
let containers = editor.utils.getContainers()
for (let c = 0; c < containers.length; c++) {
let temp = []
let nodes = containers[c].childs
for (let n = 0; n < nodes.length; n++) {
if (nodes[n] instanceof JTopo.Node) {
temp.push(nodes[n].nodeId)
}
......@@ -27,30 +29,10 @@ TopologyPanel.prototype.saveTopology = function (url) {
containers[c].childNodes = temp.join(',')
}
// 获取json
var topologyJSON = editor.stage.toJson();
let topologyJSON = editor.stage.toJson();
console.log(topologyJSON);
return topologyJSON;
// 保存拓扑图数据
// $.ajax({
// type: 'POST',
// url: url,
// async: false,
// data: JSON.stringify({'topology_json': topologyJSON}),
// contentType: 'application/json',
// dataType: 'json',
// error: function () {
// // alert('服务器异常，请稍后重试..')
// },
// success: function (response) {
// // 错误处理
// if (response.code !== 200) {
// console.error(response.msg)
// } else {
// editor.stageMode = 'normal'; // 只读模式
// self.replaceStage(url) // 重新加载
// }
// }
// })
}
/**
......@@ -66,23 +48,11 @@ TopologyPanel.prototype.resetTopology = function (url) {
* @param topologyGuid 拓扑 表记录ID
* @param backImg 拓扑图的背景图片
*/
TopologyPanel.prototype.loadTopology = function (url, topologyGuid, backImg) {
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: 'application/json',
dataType: 'json',
error: function () {
// alert('服务器异常，请稍后重试..')
},
success: function (response) {
TopologyPanel.prototype.loadTopology = function (response, topologyGuid, backImg) {
// 错误处理
if (response.code !== 200) {
console.error(response.msg)
} else if (response.code === 200 && $.isEmptyObject(response.data.topology_json)) {
if (!response) {
// 拓扑不存在,创建一个空白的拓扑图
var initTopologyJson = {
let initTopologyJson = {
'version': '0.4.8',
'wheelZoom': 0.95,
'width': 972,
......@@ -103,11 +73,8 @@ TopologyPanel.prototype.loadTopology = function (url, topologyGuid, backImg) {
editor.init(topologyGuid, backImg, initTopologyJson, '')
} else {
// 拓扑存在,渲染拓扑图
var topologyJson = response.data.topology_json
editor.init(topologyGuid, backImg, topologyJson, '')
editor.init(topologyGuid, backImg, response, '')
}
}
})
}
/**
......@@ -123,7 +90,7 @@ TopologyPanel.prototype.loadTopologyByJson = function (topologyJson, backImg) {
}
} catch (e) {
console.error(e)
var initTopologyJson = {
let initTopologyJson = {
'version': '0.4.8',
'wheelZoom': 0.95,
'width': 972,
......@@ -249,12 +216,12 @@ TopologyEditor.prototype = new TopologyPanel()
* 菜单初始化
*/
TopologyEditor.prototype.initMenus = function () {
var self = this
let self = this
// 右键菜单事件处理(右键一级菜单)
self.nodeMenu.on('click', function (event) {
// 菜单文字对应事件
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (text === '删除节点(Delete)') {
editor.utils.deleteSelectedNodes()
} else if (text === '复制节点(Shift+C)') {
......@@ -294,8 +261,8 @@ TopologyEditor.prototype.initMenus = function () {
self.nodeMenu.on('mouseover', function (event) {
// 菜单文字
var text = $.trim($(event.target).text())
var menuX = parseInt(this.style.left) + $(document.getElementById('change-node-text-pos')).width()
let text = $.trim($(event.target).text())
let menuX = parseInt(this.style.left) + $(document.getElementById('change-node-text-pos')).width()
// 边界判断
if (menuX + self.nodeTextPosMenu.width() * 2 >= self.stage.width) {
menuX -= (self.nodeTextPosMenu.width() + self.nodeMenu.width())
......@@ -321,7 +288,7 @@ TopologyEditor.prototype.initMenus = function () {
// 修改节点文字位置菜单
self.nodeTextPosMenu.on('click', function (event) {
// 菜单文字
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (self.currentNode && self.currentNode instanceof JTopo.Node) {
self.utils.saveNodeInitState()
switch (text) {
......@@ -370,7 +337,7 @@ TopologyEditor.prototype.initMenus = function () {
self.lineMenu.on('click', function (event) {
// 关闭菜单
$(this).hide()
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
switch (text) {
case '连线设置':
// alert('连线设置')
......@@ -391,18 +358,18 @@ TopologyEditor.prototype.initMenus = function () {
// 节点分组菜单
self.groupMangeMenu.on('click', function (event) {
$(this).hide()
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (text === '新建分组') {
self.utils.toMerge()
}
})
// 对齐
self.groupAlignMenu.on('click', function (event) {
var currNode = self.currentNode
var selectedNodes = self.utils.getSelectedNodes()
let currNode = self.currentNode
let selectedNodes = self.utils.getSelectedNodes()
if (!currNode || !selectedNodes || selectedNodes.length === 0) return
$(this).hide()
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
selectedNodes.forEach(function (n) {
if (n.nodeId === currNode.nodeId) return true
if (text === '水平对齐') {
......@@ -415,10 +382,10 @@ TopologyEditor.prototype.initMenus = function () {
})
})
self.groupMangeMenu.on('mouseover', function (event) {
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (text === '对齐方式') {
// 节点对齐
var menuX = parseInt(this.style.left) + $(document.getElementById('align-group')).width()
let menuX = parseInt(this.style.left) + $(document.getElementById('align-group')).width()
if (menuX + self.alignGroup.width() * 2 >= self.stage.width) {
menuX -= (self.alignGroup.width() + self.groupMangeMenu.width())
}
......@@ -432,12 +399,12 @@ TopologyEditor.prototype.initMenus = function () {
})
// 容器管理菜单
self.containerMangeMenu.on('click', function (event) {
var cNode = editor.currentNode
let cNode = editor.currentNode
if (!(cNode instanceof JTopo.Container)) {
return
}
$(this).hide()
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (text === '拆分') {
self.utils.toSplit()
self.utils.deleteNode(cNode)
......@@ -448,7 +415,7 @@ TopologyEditor.prototype.initMenus = function () {
self.layoutMenu.on('click', function (event) {
editor.currentNode.layout = {}
$('div[id$=\'-menu\']').hide()
var text = $.trim($(event.target).text())
let text = $.trim($(event.target).text())
if (text === '取消布局') {
editor.currentNode.layout.on = false
} else if (text === '分组布局') {
......@@ -489,7 +456,7 @@ TopologyEditor.prototype.replaceStage = function (url) {
if (response.code !== 200) {
console.error(response.msg)
} else {
var topologyJson = response.data.topology_json
let topologyJson = response.data.topology_json
JTopo.replaceStageWithJson(topologyJson)
if (editor.stage && editor.scene && editor.scene.childs && editor.scene.childs.length > 0) {
editor.stage.centerAndZoom()
......@@ -506,12 +473,13 @@ TopologyEditor.prototype.replaceStage = function (url) {
*/
TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
if (!topologyJson) {
alert('加载拓扑编辑器失败!')
// alert('加载拓扑编辑器失败!')
return
}
console.log(topologyJson);
this.topologyGuid = topologyGuid
// 创建jTopo舞台屏幕对象
var canvas = document.getElementById('topology-canvas')
let canvas = document.getElementById('topology-canvas')
canvas.width = $('#topology-body').width()
canvas.height = $('#topology-body').height()
// 加载空白的编辑器
......@@ -519,6 +487,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
this.stage = new JTopo.Stage(canvas) // 定义舞台对象
this.scene = new JTopo.Scene(this.stage) // 定义场景对象
} else {
console.log(topologyJson);
this.stage = JTopo.createStageFromJson(topologyJson, canvas) // 根据保存好的jsonStr(拓扑结构)创建舞台对象
this.scene = this.stage.childs[0] // 场景对象列表,childs是舞台的属性
}
......@@ -537,10 +506,12 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
this.tempNodeZ.setSize(1, 1)
this.beginNode = null
this.link = null
var self = this
let self = this
// 模拟告警
editor.utils.getAllNodes()[0].alarm = "告警";
if(editor.utils.getAllNodes().length > 0){
editor.utils.getAllNodes()[0].alarm = "告警";
}
// 初始化菜单
......@@ -553,8 +524,8 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
if (event.target != null && event.target instanceof JTopo.Node && event.target.nodeTooltip && editor.stageMode !== 'edit') {
$('.node-tooltip span').html(event.target.nodeTooltip)
// 记录鼠标触发位置在canvas中的相对位置
var menuY = event.layerY ? event.layerY : event.offsetY
var menuX = event.layerX ? event.layerX : event.offsetX
let menuY = event.layerY ? event.layerY : event.offsetY
let menuX = event.layerX ? event.layerX : event.offsetX
// 判断边界出是否能完整显示弹出菜单
if (menuX + $('.node-tooltip').width() >= self.stage.width) {
menuX -= $('.node-tooltip').width()
......@@ -573,8 +544,8 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
} else if (event.target != null && event.target instanceof JTopo.Link && event.target.linkTooltip && editor.stageMode !== 'edit') {
$('.link-tooltip span').html(event.target.linkTooltip)
// 记录鼠标触发位置在canvas中的相对位置
var menuY = event.layerY ? event.layerY : event.offsetY
var menuX = event.layerX ? event.layerX : event.offsetX
let menuY = event.layerY ? event.layerY : event.offsetY
let menuX = event.layerX ? event.layerX : event.offsetX
// 判断边界出是否能完整显示弹出菜单
if (menuX + $('.link-tooltip').width() >= self.stage.width) {
menuX -= $('.link-tooltip').width()
......@@ -596,7 +567,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
// 鼠标离开事件
this.scene.mouseout(function (event) {
var timeSpan = Timer.pause()
let timeSpan = Timer.pause()
// 消抖
if (timeSpan > 100) {
$('.node-tooltip').css('display', 'none')
......@@ -651,7 +622,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
content: $("#node-dialog"),
btn: ["应用", "删除", "取消"],
yes: function(index, layero){
var param = getParam("node-form");
let param = getParam("node-form");
self.currentNode.text = param.text;
self.currentNode.textPosition = param.textPosition;
self.currentNode.setLocation(param.x, param.y);
......@@ -668,7 +639,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
content: $("#link-dialog"),
btn: ["应用", "删除", "取消"],
yes: function(index, layero){
var param = getParam("link-form");
let param = getParam("link-form");
self.currentNode.text = param.text;
self.currentNode.textPosition = param.textPosition;
self.currentNode.setLocation(param.x, param.y);
......@@ -701,14 +672,14 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
}
if (event.button === 2) { // 右键菜单
$('div[id$=\'-menu\']').hide()
var menuY = event.layerY ? event.layerY : event.offsetY
var menuX = event.layerX ? event.layerX : event.offsetX
let menuY = event.layerY ? event.layerY : event.offsetY
let menuX = event.layerX ? event.layerX : event.offsetX
// 记录鼠标触发位置在canvas中的相对位置
self.xInCanvas = menuX
self.yInCanvas = menuY
if (event.target) {
if (event.target instanceof JTopo.Node) { // 处理节点右键菜单事件
var selectedNodes = self.utils.getSelectedNodes()
let selectedNodes = self.utils.getSelectedNodes()
// 如果是节点多选状态弹出分组菜单
if (selectedNodes && selectedNodes.length > 1) {
// 判断边界出是否能完整显示弹出菜单
......@@ -794,7 +765,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
self.tempNodeZ.setLocation(event.x, event.y)
} else if (event.target && event.target instanceof JTopo.Node && self.beginNode !== event.target) {
// 在终点节点处松开鼠标,则建立连线
var endNode = event.target
let endNode = event.target
// 判断两个节点是否有循环引用
/** ***************** 我这里允许循环引用 *************************
for (var el = 0; el < endNode.outLinks.length; el++) {
......@@ -819,7 +790,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
}
}
*****************************************************************/
var link
let link
if (self.lineType === 'line') {
link = new JTopo.Link(self.beginNode, endNode)
link.lineType = 'line'
......@@ -1003,49 +974,51 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
*/
TopologyEditor.prototype.drag = function (modeDiv, drawArea, text) {
if (!text) text = ''
var self = this
let self = this
// 拖拽开始,携带必要的参数
modeDiv.ondragstart = function (event) {
event = event || window.event
var dragSrc = this
console.log(dragSrc);
var backImg = $(dragSrc).find('img').eq(0).attr('data-src');
let dragSrc = this
let backImg = $(dragSrc).find('img').eq(0).attr('data-src')
backImg = backImg.substring(backImg.lastIndexOf('/') + 1)
var nodeType = $(this).attr('topo-nodetype')
let nodeType = $(this).attr('topo-nodetype')
try {
// IE只允许KEY为text和URL
event.dataTransfer.setData('text', backImg + ';' + text + ';' + nodeType)
} catch (ex) {
console.log(ex)
}
}
//
modeDiv.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
return false
}
//
// 阻止默认事件
drawArea.ondragover = function (event) {
event.preventDefault();
event.preventDefault()
// event.stopPropagation()
return false
}
// 创建节点
drawArea.ondrop = function (event) {
event.preventDefault()
// 只读模式
if (editor.stageMode === "normal") {
return;
}
event = event || window.event
var data = event.dataTransfer.getData('text')
var img, text, nodeType
let data = event.dataTransfer.getData('text')
let img, text, nodeType
if (data) {
var datas = data.split(';')
let datas = data.split(';')
if (datas && datas.length === 3) {
img = datas[0]
text = datas[1]
nodeType = datas[2]
var node = new JTopo.Node()
let node = new JTopo.Node()
node.fontColor = self.config.nodeFontColor
// 节点坐标
node.setBound((event.layerX ? event.layerX : event.offsetX) - self.scene.translateX - self.config.nodeDefaultWidth / 2, (event.layerY ? event.layerY : event.offsetY) - self.scene.translateY - self.config.nodeDefaultHeight / 2, self.config.nodeDefaultWidth, self.config.nodeDefaultHeight)
......@@ -1089,7 +1062,7 @@ editor.utils = {
if (!text) {
text = "图片"; // 默认标签
}
var node = new JTopo.Node()
let node = new JTopo.Node()
node.fontColor = editor.config.nodeFontColor
// 节点坐标
node.setBound(20, 20, 50, 50)
......@@ -1120,8 +1093,8 @@ editor.utils = {
},
// 获取所有选择的节点实例
getSelectedNodes: function () {
var selectedNodes = []
var nodes = editor.scene.selectedElements
let selectedNodes = []
let nodes = editor.scene.selectedElements
nodes.forEach(function (n) {
if (n.elementType === 'node') {
selectedNodes.push(n)
......@@ -1131,9 +1104,9 @@ editor.utils = {
},
// 节点分组合并
toMerge: function () {
var selectedNodes = this.getSelectedNodes()
let selectedNodes = this.getSelectedNodes()
// 不指定布局的时候,容器的布局为自动(容器边界随元素变化）
var container = new JTopo.Container()
let container = new JTopo.Container()
container.textPosition = 'Top_Center'
container.fontColor = editor.config.nodeFontColor
container.borderColor = editor.config.nodeBorderColor
......@@ -1178,10 +1151,10 @@ editor.utils = {
if (editor.stageMode !== 'edit') {
return false
}
var self = this
var nodes = editor.scene.selectedElements
let self = this
let nodes = editor.scene.selectedElements
if (nodes && nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
for (let i = 0; i < nodes.length; i++) {
self.deleteNode(nodes[i])
}
}
......@@ -1237,7 +1210,7 @@ editor.utils = {
// 复制节点
cloneNode: function (n) {
if (n instanceof JTopo.Node) {
var newNode = new JTopo.Node()
let newNode = new JTopo.Node()
n.serializedProperties.forEach(function (i) {
// 只复制虚拟机的模板属性
// if (i == "templateId" && n.dataType != "VM") return true;
......@@ -1264,8 +1237,8 @@ editor.utils = {
},
// 复制选择的节点
cloneSelectedNodes: function () {
var self = this
var nodes = editor.scene.selectedElements
let self = this
let nodes = editor.scene.selectedElements
nodes.forEach(function (n) {
if (n.elementType === 'node') {
self.cloneNode(n)
......@@ -1274,7 +1247,7 @@ editor.utils = {
},
// 全屏显示
showInFullScreen: function (element, method) {
var usablePrefixMethod;
let usablePrefixMethod;
['webkit', 'moz', 'ms', 'o', ''].forEach(function (prefix) {
if (usablePrefixMethod) {
return
......@@ -1283,7 +1256,7 @@ editor.utils = {
// 无前缀，方法首字母小写
// method = method.slice(0, 1).toLowerCase() + method.slice(1)
}
var typePrefixMethod = typeof element[prefix + method]
let typePrefixMethod = typeof element[prefix + method]
if (typePrefixMethod + '' !== 'undefined') {
if (typePrefixMethod === 'function') {
usablePrefixMethod = element[prefix + method]()
......@@ -1301,7 +1274,7 @@ editor.utils = {
},
// 获取所有的容器对象
getContainers: function () {
var containers = []
let containers = []
editor.stage.childs.forEach(function (s) {
s.childs.forEach(function (n) {
if (n.elementType === 'container') {
......@@ -1313,7 +1286,7 @@ editor.utils = {
},
// 根据指定的key返回节点实例
getNodeByKey: function (key, value) {
var node = null
let node = null
editor.stage.childs.forEach(function (s) {
s.childs.forEach(function (n) {
if (n.elementType === 'node' && n[key] === value) {
......@@ -1330,7 +1303,7 @@ editor.utils = {
return
}
--editor.currentNode.currStep
for (var p in editor.currentNode) {
for (let p in editor.currentNode) {
if (p !== 'currStep') {
editor.currentNode[p] = (editor.currentNode.historyStack[editor.currentNode.currStep])[p]
}
......@@ -1343,7 +1316,7 @@ editor.utils = {
return
}
editor.currentNode.currStep++
for (var q in editor.currentNode) {
for (let q in editor.currentNode) {
if (q !== 'currStep') {
editor.currentNode[q] = (editor.currentNode.historyStack[editor.currentNode.currStep])[q]
}
......@@ -1370,12 +1343,12 @@ editor.utils = {
if (!text) return
// var self = this
text = text.trim()
var nodes = editor.stage.find('node[text="' + text + '"]')
let nodes = editor.stage.find('node[text="' + text + '"]')
if (nodes.length > 0) {
var node = nodes[0]
let node = nodes[0]
this.unSelectAllNodeExcept(node)
node.selected = true
var location = node.getCenterLocation()
let location = node.getCenterLocation()
// 查询到的节点居中显示
editor.stage.setCenter(location.x, location.y)
......
src/main/webapp/content/javascript/jtopo/reference/jtopo-0.4.8-dev(带注释版报错).js deleted 100755 → 0
View file @ cb5f8692
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment