|
@@ -24,14 +24,15 @@
|
|
* *********************************************************************************************************************
|
|
* *********************************************************************************************************************
|
|
*/
|
|
*/
|
|
|
|
|
|
-import { SGraphAddCommand, SGraphEditScene, SGraphEdit } from "@persagy-web/edit/lib"
|
|
|
|
|
|
+import { SGraphDeleteListCommand, SGraphEditScene, SGraphEdit } from "@persagy-web/edit"
|
|
import { SMouseEvent } from "@persagy-web/base/lib";
|
|
import { SMouseEvent } from "@persagy-web/base/lib";
|
|
import { SArrowStyleType, SPoint, SRect } from '@persagy-web/draw';
|
|
import { SArrowStyleType, SPoint, SRect } from '@persagy-web/draw';
|
|
import { SItemStatus, SRectSelectItem } from '@persagy-web/big/lib';
|
|
import { SItemStatus, SRectSelectItem } from '@persagy-web/big/lib';
|
|
-import { SGraphItem, SGraphSelectContainer } from "@persagy-web/graph/lib/";
|
|
|
|
|
|
+import { SGraphItem, SGraphSelectContainer, SOrderSetType } from "@persagy-web/graph/lib/";
|
|
import { uuid } from "./until";
|
|
import { uuid } from "./until";
|
|
import { SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool, SBasePipe } from "./"
|
|
import { SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool, SBasePipe } from "./"
|
|
-
|
|
|
|
|
|
+import { SBaseArrowPolyEdit } from './items/SBaseArrowPolyEdit';
|
|
|
|
+import { SGraphAddListCommand } from '../edit/commands/SGraphAddListCommand';
|
|
|
|
|
|
/**
|
|
/**
|
|
* big-edit 场景
|
|
* big-edit 场景
|
|
@@ -47,7 +48,8 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
Relations: any = [];
|
|
Relations: any = [];
|
|
/** 复制的对象 */
|
|
/** 复制的对象 */
|
|
copyString: any[] = [];
|
|
copyString: any[] = [];
|
|
- grabItem: null | SGraphEdit | SGraphItem = null
|
|
|
|
|
|
+ /** 选中的对象 */
|
|
|
|
+ grabItem: null | SGraphEdit | SGraphItem = null;
|
|
|
|
|
|
/**
|
|
/**
|
|
* 构造函数
|
|
* 构造函数
|
|
@@ -55,7 +57,7 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
*/
|
|
*/
|
|
constructor() {
|
|
constructor() {
|
|
super()
|
|
super()
|
|
- }
|
|
|
|
|
|
+ } // Constructor
|
|
|
|
|
|
/**
|
|
/**
|
|
* 新增基础类注释
|
|
* 新增基础类注释
|
|
@@ -83,13 +85,14 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+
|
|
const item = new SBaseExpainEdit(null, data);
|
|
const item = new SBaseExpainEdit(null, data);
|
|
item.moveTo(event.x, event.y);
|
|
item.moveTo(event.x, event.y);
|
|
item.selectable = true;
|
|
item.selectable = true;
|
|
item.moveable = true;
|
|
item.moveable = true;
|
|
this.addItem(item);
|
|
this.addItem(item);
|
|
- this.undoStack.push(new SGraphAddCommand(this, item));
|
|
|
|
this.grabItem = null;
|
|
this.grabItem = null;
|
|
|
|
+ item.connect("onContextMenu", this, this.getItem);
|
|
this.finishCreated(item);
|
|
this.finishCreated(item);
|
|
}
|
|
}
|
|
|
|
|
|
@@ -114,11 +117,50 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
default: {}
|
|
default: {}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+
|
|
const item = new SBaseArrow(null, data);
|
|
const item = new SBaseArrow(null, data);
|
|
item.status = SItemStatus.Create;
|
|
item.status = SItemStatus.Create;
|
|
item.selectable = true;
|
|
item.selectable = true;
|
|
this.addItem(item);
|
|
this.addItem(item);
|
|
- this.undoStack.push(new SGraphAddCommand(this, item));
|
|
|
|
|
|
+ this.grabItem = item;
|
|
|
|
+ item.connect("finishCreated", this, this.finishCreated);
|
|
|
|
+ item.connect("onContextMenu", this, this.getItem);
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.update();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 新增基础箭头(多边形)
|
|
|
|
+ *
|
|
|
|
+ * @param event 鼠标事件
|
|
|
|
+ */
|
|
|
|
+ addPolygonArrow(event: SMouseEvent): void {
|
|
|
|
+ const data = {
|
|
|
|
+ /** 名称 */
|
|
|
|
+ name: '多边形箭头',
|
|
|
|
+ /** 图标(Image),线类型(Line) */
|
|
|
|
+ type: "ArrowPolygon",
|
|
|
|
+ /** 缩放比例(Image),线类型(Line) */
|
|
|
|
+ scale: { x: 1, y: 1, z: 1 },
|
|
|
|
+ /** 缩放比例(Image),线类型(Line) */
|
|
|
|
+ rolate: { x: 0, y: 0, z: 0 },
|
|
|
|
+ /** 位置 */
|
|
|
|
+ pos: { x: 0, y: 0 },
|
|
|
|
+ /** 由应用自己定义 */
|
|
|
|
+ properties: {
|
|
|
|
+ type: "BaseArrowPolygon" // 自定义类型用于区分mark与node
|
|
|
|
+ },
|
|
|
|
+ style: {
|
|
|
|
+ line: [{ x: event.x, y: event.y }],
|
|
|
|
+ default: {
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ const item = new SBaseArrowPolyEdit(null, data);
|
|
|
|
+ item.status = SItemStatus.Create;
|
|
|
|
+ item.selectable = true;
|
|
|
|
+ this.addItem(item);
|
|
this.grabItem = item;
|
|
this.grabItem = item;
|
|
item.connect("finishCreated", this, this.finishCreated);
|
|
item.connect("finishCreated", this, this.finishCreated);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
@@ -135,9 +177,11 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
*/
|
|
*/
|
|
addEuqipment(event: SMouseEvent, legendObj: any): void {
|
|
addEuqipment(event: SMouseEvent, legendObj: any): void {
|
|
const data = {
|
|
const data = {
|
|
|
|
+ nodeId: uuid(),
|
|
/** 名称 */
|
|
/** 名称 */
|
|
name: '基础设备',
|
|
name: '基础设备',
|
|
- num: 1,
|
|
|
|
|
|
+ /** 返回物理世界对象 ID 列表 */
|
|
|
|
+ attachObjectIds: [],
|
|
size: { width: 50, height: 50 },
|
|
size: { width: 50, height: 50 },
|
|
/** 图标 (Image),线类型 (Line) */
|
|
/** 图标 (Image),线类型 (Line) */
|
|
type: "Image",
|
|
type: "Image",
|
|
@@ -145,23 +189,25 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
pos: { x: event.x, y: event.y },
|
|
pos: { x: event.x, y: event.y },
|
|
/** 由应用自己定义 */
|
|
/** 由应用自己定义 */
|
|
properties: {
|
|
properties: {
|
|
- type: "baseEquipment",
|
|
|
|
|
|
+ type: "BaseEquipment",
|
|
|
|
+ infoMsgList: [{
|
|
|
|
+
|
|
|
|
+ }]
|
|
},
|
|
},
|
|
style: {
|
|
style: {
|
|
default: {
|
|
default: {
|
|
strokecolor: "#c0ccda",
|
|
strokecolor: "#c0ccda",
|
|
- // url: require('./../../../assets/images/equip/' + legendObj.url),
|
|
|
|
|
|
+ url: require('./../../../assets/images/equip/' + legendObj.url),
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const item = new SBaseEquipment(null, data);
|
|
const item = new SBaseEquipment(null, data);
|
|
item.status = SItemStatus.Create;
|
|
item.status = SItemStatus.Create;
|
|
this.addItem(item);
|
|
this.addItem(item);
|
|
- this.undoStack.push(new SGraphAddCommand(this, item));
|
|
|
|
item.selectable = true;
|
|
item.selectable = true;
|
|
item.moveable = true;
|
|
item.moveable = true;
|
|
this.grabItem = item;
|
|
this.grabItem = item;
|
|
- item.connect("finishCreated", this, this.finishCreated);
|
|
|
|
|
|
+ this.finishCreated(item)
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
if (this.view) {
|
|
if (this.view) {
|
|
this.view.update();
|
|
this.view.update();
|
|
@@ -173,17 +219,30 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
*
|
|
*
|
|
* @param event 鼠标事件
|
|
* @param event 鼠标事件
|
|
*/
|
|
*/
|
|
- addBasePipe(event: SMouseEvent) {
|
|
|
|
|
|
+ addBasePipe(event: SMouseEvent, legendObj: any) {
|
|
|
|
+ const anc = this.clickIsAnchor(event);
|
|
|
|
+ if (anc) {
|
|
|
|
+ const p = anc.mapToScene(0, 0)
|
|
|
|
+ anc.isConnected = true;
|
|
|
|
+ event.x = p.x;
|
|
|
|
+ event.y = p.y;
|
|
|
|
+ };
|
|
const data = {
|
|
const data = {
|
|
- name: '管道',
|
|
|
|
- type: "line",
|
|
|
|
- pos: { x: 0, y: 0 },
|
|
|
|
|
|
+ name: legendObj.name,
|
|
|
|
+ graphElementId: legendObj.id,
|
|
|
|
+ lineType: '',
|
|
|
|
+ node1Id: '',
|
|
|
|
+ node2Id: '',
|
|
|
|
+ anchor1Id: '',
|
|
|
|
+ anchor2Id: '',
|
|
|
|
+ pointList: [{ x: event.x, y: event.y }],
|
|
properties: {
|
|
properties: {
|
|
- type: "BasePolyline",
|
|
|
|
|
|
+ type: "BasePipe",
|
|
},
|
|
},
|
|
style: {
|
|
style: {
|
|
- outLine: [{ x: event.x, y: event.y }],
|
|
|
|
default: {
|
|
default: {
|
|
|
|
+ strokeColor: legendObj.color,
|
|
|
|
+ lineWidth: 4
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -191,8 +250,16 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
item.status = SItemStatus.Create;
|
|
item.status = SItemStatus.Create;
|
|
item.selectable = true;
|
|
item.selectable = true;
|
|
this.addItem(item);
|
|
this.addItem(item);
|
|
- this.undoStack.push(new SGraphAddCommand(this, item));
|
|
|
|
this.grabItem = item;
|
|
this.grabItem = item;
|
|
|
|
+ // 起始锚点
|
|
|
|
+ item.startAnchor = anc;
|
|
|
|
+ if (anc) {
|
|
|
|
+ anc.parent?.connect('changePos', item, item.changePos)
|
|
|
|
+ item.anchor1Id = anc.id;
|
|
|
|
+ item.node1Id = anc.parent ? anc.parent.nodeId : '';
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ console.log('anc', anc)
|
|
item.connect("finishCreated", this, this.finishCreated);
|
|
item.connect("finishCreated", this, this.finishCreated);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
if (this.view) {
|
|
if (this.view) {
|
|
@@ -212,6 +279,7 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
'santong': 3,
|
|
'santong': 3,
|
|
'sitong': 4,
|
|
'sitong': 4,
|
|
}
|
|
}
|
|
|
|
+
|
|
const data = {
|
|
const data = {
|
|
/** 名称 */
|
|
/** 名称 */
|
|
name: '基础管道接头',
|
|
name: '基础管道接头',
|
|
@@ -230,14 +298,14 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+
|
|
const item = new SBasePipeUninTool(null, data);
|
|
const item = new SBasePipeUninTool(null, data);
|
|
item.status = SItemStatus.Create;
|
|
item.status = SItemStatus.Create;
|
|
item.selectable = true;
|
|
item.selectable = true;
|
|
item.moveable = true;
|
|
item.moveable = true;
|
|
this.addItem(item);
|
|
this.addItem(item);
|
|
- this.undoStack.push(new SGraphAddCommand(this, item));
|
|
|
|
this.grabItem = item;
|
|
this.grabItem = item;
|
|
- item.connect("finishCreated", this, this.finishCreated);
|
|
|
|
|
|
+ this.finishCreated(item)
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
item.connect("onContextMenu", this, this.getItem);
|
|
if (this.view) {
|
|
if (this.view) {
|
|
this.view.update();
|
|
this.view.update();
|
|
@@ -271,11 +339,18 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
*
|
|
*
|
|
* @return 删除的图例
|
|
* @return 删除的图例
|
|
*/
|
|
*/
|
|
- deleteItem(): any {
|
|
|
|
- if (this.selectContainer.count == 0) {
|
|
|
|
- return []
|
|
|
|
|
|
+ deleteItem(itemArr: SGraphItem[] = []): any {
|
|
|
|
+ let itemList = null;
|
|
|
|
+ if (itemArr && itemArr.length && itemArr[0]) {
|
|
|
|
+ itemList = [...itemArr]
|
|
|
|
+ } else {
|
|
|
|
+ if (this.selectContainer.count == 0) {
|
|
|
|
+ return []
|
|
|
|
+ }
|
|
|
|
+ itemList = this.selectContainer.itemList;
|
|
|
|
+ this.undoStack.push(new SGraphDeleteListCommand(this, [...itemList]))
|
|
}
|
|
}
|
|
- let itemList = this.selectContainer.itemList;
|
|
|
|
|
|
+ // 推入 undo/redo 栈
|
|
itemList.forEach((element: any) => {
|
|
itemList.forEach((element: any) => {
|
|
this.removeItem(element)
|
|
this.removeItem(element)
|
|
});
|
|
});
|
|
@@ -301,9 +376,6 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
* @param ctrl 是否点击ctrl
|
|
* @param ctrl 是否点击ctrl
|
|
*/
|
|
*/
|
|
groupSelect(ctrl: boolean) {
|
|
groupSelect(ctrl: boolean) {
|
|
- // if (!ctrl) {
|
|
|
|
- // this.selectContainer.clear()
|
|
|
|
- // }
|
|
|
|
if (this.grabItem instanceof SRectSelectItem) {
|
|
if (this.grabItem instanceof SRectSelectItem) {
|
|
const rect = this.grabItem.boundingRect();
|
|
const rect = this.grabItem.boundingRect();
|
|
this.arrToSelect(this.root.children, rect)
|
|
this.arrToSelect(this.root.children, rect)
|
|
@@ -313,8 +385,8 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
/**
|
|
/**
|
|
* 选中item:框选
|
|
* 选中item:框选
|
|
*
|
|
*
|
|
- * @param arr 实例数组
|
|
|
|
- * @param rect 框选矩形区域
|
|
|
|
|
|
+ * @param arr 实例数组
|
|
|
|
+ * @param rect 框选矩形区域
|
|
*/
|
|
*/
|
|
private arrToSelect(arr: SGraphItem[], rect: SRect) {
|
|
private arrToSelect(arr: SGraphItem[], rect: SRect) {
|
|
if (Array.isArray(arr) && arr.length) {
|
|
if (Array.isArray(arr) && arr.length) {
|
|
@@ -334,7 +406,6 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
|
|
|
|
/////////////////////////////////////////////////////////////////////
|
|
/////////////////////////////////////////////////////////////////////
|
|
// 鼠标事件
|
|
// 鼠标事件
|
|
-
|
|
|
|
/**
|
|
/**
|
|
* 鼠标左键按下
|
|
* 鼠标左键按下
|
|
*
|
|
*
|
|
@@ -364,8 +435,10 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
}
|
|
}
|
|
return true;
|
|
return true;
|
|
}
|
|
}
|
|
|
|
+
|
|
return this.grabItem.onMouseUp(event);
|
|
return this.grabItem.onMouseUp(event);
|
|
}
|
|
}
|
|
|
|
+
|
|
return super.onMouseUp(event)
|
|
return super.onMouseUp(event)
|
|
}
|
|
}
|
|
|
|
|
|
@@ -373,16 +446,31 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
* 复制
|
|
* 复制
|
|
*/
|
|
*/
|
|
copy(): void {
|
|
copy(): void {
|
|
- const itemList = this.selectContainer.itemList
|
|
|
|
- if (itemList.length) {
|
|
|
|
- itemList.forEach(t => {
|
|
|
|
- const data = JSON.parse(JSON.stringify(t.toData()))
|
|
|
|
- data.ID = uuid()
|
|
|
|
- this.copyString.push(data)
|
|
|
|
|
|
+ const itemList = this.save(false);
|
|
|
|
+ if (itemList) {
|
|
|
|
+ // 删除对应得id
|
|
|
|
+ itemList.markers.map((item: any) => {
|
|
|
|
+ delete item.id;
|
|
|
|
+ delete item.graphId;
|
|
|
|
+ delete item.markerId;
|
|
|
|
+ return item
|
|
|
|
+ });
|
|
|
|
|
|
- })
|
|
|
|
- // 生成复制字符串
|
|
|
|
- console.log(this.copyString)
|
|
|
|
|
|
+ itemList.nodes.map((item: any) => {
|
|
|
|
+ delete item.id;
|
|
|
|
+ delete item.graphId;
|
|
|
|
+ delete item.markerId;
|
|
|
|
+ return item
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ itemList.relations.map((item: any) => {
|
|
|
|
+ delete item.id;
|
|
|
|
+ delete item.graphId;
|
|
|
|
+ delete item.markerId;
|
|
|
|
+ return item
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ this.copyString = itemList
|
|
// 获取input dom
|
|
// 获取input dom
|
|
const input = document.createElement('input');
|
|
const input = document.createElement('input');
|
|
input.setAttribute('id', 'COPYINPUT')
|
|
input.setAttribute('id', 'COPYINPUT')
|
|
@@ -397,22 +485,62 @@ export class SBaseEditScene extends SGraphEditScene {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
/**
|
|
/**
|
|
- * 粘贴
|
|
|
|
|
|
+ * 添加多个item命令
|
|
|
|
+ *
|
|
|
|
+ * @param itemList 鼠标事件对象
|
|
*/
|
|
*/
|
|
- paste(): void {
|
|
|
|
- const copyList = JSON.parse(JSON.stringify(this.copyString));
|
|
|
|
- copyList.forEach((t: any) => {
|
|
|
|
- if (this.view) {
|
|
|
|
- t.Pos.X += 10,
|
|
|
|
- t.Pos.Y += 10
|
|
|
|
|
|
+ addListCommand(itemList: SGraphEdit[]): void {
|
|
|
|
+ this.undoStack.push(new SGraphAddListCommand(this, itemList));
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 图例置顶、置底
|
|
|
|
+ *
|
|
|
|
+ * @parm type 设置类型
|
|
|
|
+ */
|
|
|
|
+ setOrder(type: string) {
|
|
|
|
+ this.selectContainer.setOrder(SOrderSetType.[type])
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 设置管线结束锚点
|
|
|
|
+ */
|
|
|
|
+ setTipeEndanchor(event: SMouseEvent): void {
|
|
|
|
+ if (this.grabItem instanceof SBasePipe) {
|
|
|
|
+ const anc = this.clickIsAnchor(event);
|
|
|
|
+ if (anc) {
|
|
|
|
+ const p = anc.mapToScene(0, 0)
|
|
|
|
+ anc.isConnected = true;
|
|
|
|
+ event.x = p.x;
|
|
|
|
+ event.y = p.y;
|
|
|
|
+ if (this.grabItem.status == SItemStatus.Create) {
|
|
|
|
+ if (this.grabItem.pointList.length) {
|
|
|
|
+ this.grabItem.endAnchor = anc;
|
|
|
|
+ anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.grabItem.anchor2Id = anc.id
|
|
|
|
+ this.grabItem.node2Id = anc.parent.nodeId
|
|
|
|
+ this.grabItem.onMouseDown(event)
|
|
|
|
+ this.grabItem.status = SItemStatus.Normal;
|
|
|
|
+ this.finishCreated(this.grabItem)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- t.moveable = true;
|
|
|
|
- console.log('t', t)
|
|
|
|
- this.addItem(t)
|
|
|
|
- });
|
|
|
|
- this.view ? this.view.update() : ''
|
|
|
|
- console.log(this.view)
|
|
|
|
|
|
+ this.grabItem.onMouseDown(event)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 获取item (常用与场景外的调用F)
|
|
|
|
+ *
|
|
|
|
+ * @params isAll 是否为全部item数据
|
|
|
|
+ * @return obj 返回保存的数据接口
|
|
|
|
+ */
|
|
|
|
+ save(isAll: boolean = true): any {
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+}
|