/* * ********************************************************************************************************************* * * !! * .F88X * X8888Y * .}888888N; * i888888N; .:! .I$WI: * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8& * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I * +888888N; .8888888Y "&&8Y.}8, * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$* * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~ * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi' * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/ * .:R888888I * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司 * ~8888' * .!88~ All rights reserved. * * ********************************************************************************************************************* */ import { SGraphScene, SGraphItem, SAnchorItem, SImageItem } from "@persagy-web/graph"; import { SPoint } from "@persagy-web/draw"; import { SMouseEvent, SUndoStack, } from "@persagy-web/base"; import { SRectSelectItem, SItemStatus } from "@persagy-web/big"; import { SBaseArrowEdit, SBasePolygonEdit, SBaseCircleEdit, SBaseLineEdit, SGraphAddCommand, SGraphEdit, SBaseIconTextEdit, SBasePolylineEdit, SBaseTextEdit, SBaseImageEdit, SBaseRectEdit, SBaseTriangleEdit } from './' import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil" import { SBasePipe } from "./../big-edit" /** * Graph 图形引擎编辑场景类 * * @author 韩耀龙 */ export class SGraphEditScene extends SGraphScene { ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //属性 /** undo/redo 存储栈 */ protected undoStack = new SUndoStack(); // get undoStack(): SUndoStack { // return this._undoStack // } // // set undoStack(val: SUndoStack) { // // this._undoStack = val // // } /** 编辑命令 */ _editCmd: string = "" get editCmd(): string { return this._editCmd } // Get editCmd set editCmd(val: string) { this._editCmd = val; } // Set editCmd /** 是否可编辑 */ _isEditStatus: Boolean = true; set isEditStatus(bol: Boolean) { this._isEditStatus = bol; } // Get isEditStatus get isEditStatus(): Boolean { return this._isEditStatus; } // Set isEditStatus ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //函数 /** * 构造函数 */ constructor() { super() // // 选择绑定选额item事件 this.selectContainer.connect("selectChange", this, this.selectChange); } // Constructor /** * 选中 item 触发方法 * * @param obj 变化后的对象 */ selectChange(obj: any) { // do nothing } // Function selectChange /** * 新增基础类直线 * * @param event 鼠标事件参数 */ addLine(event: SMouseEvent): void { const data = { /** 名称 */ name: '基础直线', /** 图标(Image),线类型(Line) */ type: "Line", /** 缩放比例(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: "BaseLine" // 自定义类型用于区分mark与node }, style: { line: [{ x: event.x, y: event.y }], default: { } } } const lineItem = new SBaseLineEdit(null, data); lineItem.status = SItemStatus.Create; this.addItem(lineItem); // this.undoStack.push(new SGraphAddCommand(this, lineItem)); lineItem.selectable = true; this.grabItem = lineItem; lineItem.connect("finishCreated", this, this.finishCreated); lineItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addLine() /** * 新增折线 * * @param event 鼠标事件 */ addPolyLine(event: SMouseEvent): void { const data = { name: '基础折线', type: "line", pos: { x: 0, y: 0 }, properties: { type: "BasePolyline", }, style: { outLine: [{ x: event.x, y: event.y }], default: { } } } const item = new SBasePolylineEdit(null, data); item.status = SItemStatus.Create; item.selectable = true; this.addItem(item); this.grabItem = item; item.connect("finishCreated", this, this.finishCreated); item.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addPolyLine() /** * 新增基础类图片 * * @param event 鼠标事件参数 */ addImageItem(event: SMouseEvent): void { const data = { /** 名称 */ name: '基础图片', num: 1, /** 图标(Image),线类型(Line) */ type: "Image", /** 位置 */ pos: { x: event.x, y: event.y }, /** 由应用自己定义 */ properties: { type: "BaseImage", }, style: { default: { strokecolor: "#c0ccda", url: '', } } } const item = new SBaseImageEdit(null, data); item.selectable = true; item.moveable = true; this.addItem(item); item.connect("onContextMenu", this, this.getItem); this.finishCreated(item); } // Function addImageItem() /** * 新增基础类文本 * * @param event 鼠标事件参数 */ addTextItem(event: SMouseEvent): void { const data = { /** 名称 */ name: '基础文本', /** 图标 */ type: "Text", /** 位置 */ pos: { x: event.x, y: event.y }, size: { width: 0, height: 0 }, /** 由应用自己定义 */ properties: { type: "BaseText" // 自定义类型用于区分mark与node }, style: { default: { text: '请在右侧属性栏输入文字!', color: "#646c73", font: 14, backgroundcolor: "#f7f9facc", } } }; const item = new SBaseTextEdit(null, data); item.moveTo(event.x, event.y); item.moveable = true; this.addItem(item); this.grabItem = null; item.connect("onContextMenu", this, this.getItem); this.finishCreated(item); } // Function addTextItem() /** * 添加基本矩形 item * * @param event 鼠标事件 */ addRectItem(event: SMouseEvent): void { const data = { name: '基础矩形', /** 图标(Image),线类型(Line) */ type: "Zone", /** 位置 */ pos: { x: 0, y: 0 }, properties: { type: "BaseRect", }, style: { default: { line: [{ x: event.x, y: event.y }], } } } const rectItem = new SBaseRectEdit(null, data); rectItem.status = SItemStatus.Create; this.addItem(rectItem); // this.undoStack.push(new SGraphAddCommand(this, rectItem)); rectItem.selectable = true; rectItem.moveable = true; this.grabItem = rectItem; rectItem.isTransform = true rectItem.connect("finishCreated", this, this.finishCreated); rectItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addRectItem() /** * 添加基本三角形 item * * @param event 鼠标事件 */ addTriangleItem(event: SMouseEvent): void { const data = { name: '基础三角形', type: "Zone", pos: { x: 0, y: 0 }, properties: { type: "BaseTriangle", }, style: { default: { line: [{ x: event.x, y: event.y }], } } } const triangleItem = new SBaseTriangleEdit(null, data); triangleItem.status = SItemStatus.Create; this.addItem(triangleItem); // this.undoStack.push(new SGraphAddCommand(this, triangleItem)); triangleItem.selectable = true; triangleItem.moveable = true; this.grabItem = triangleItem; triangleItem.connect("finishCreated", this, this.finishCreated); triangleItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addTriangleItem() /** * 添加基本圆 * * @param event 鼠标事件 */ addCircleItem(event: SMouseEvent): void { const data = { name: '基础圆形', type: "Zone", pos: { x: 0, y: 0 }, properties: { type: "BaseCircle", }, style: { default: { }, line: [{ x: event.x, y: event.y }], } } const circleItem = new SBaseCircleEdit(null, data); circleItem.status = SItemStatus.Create; circleItem.selectable = true; this.grabItem = circleItem; this.addItem(circleItem); // this.undoStack.push(new SGraphAddCommand(this, circleItem)); circleItem.connect("finishCreated", this, this.finishCreated); circleItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addCircleItem() /** * 添加基本多边形 * * @param event 鼠标事件 */ addPolygonItem(event: SMouseEvent): void { const data = { name: '基础多边形', type: "Zone", pos: { x: 0, y: 0 }, properties: { type: "BasePolygon", }, style: { outLine: [{ x: event.x, y: event.y }], default: { } } }; const polygonItem = new SBasePolygonEdit(null, data); polygonItem.status = SItemStatus.Create; polygonItem.selectable = true; this.addItem(polygonItem); // this.undoStack.push(new SGraphAddCommand(this, polygonItem)); this.grabItem = polygonItem; polygonItem.connect("finishCreated", this, this.finishCreated); polygonItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); }; } // Function addPolygonItem() /** * 添加基本箭头 item (直线类) * * @param event 鼠标事件 */ addBaseArrowsItem(event: SMouseEvent): void { const data = { name: '基础箭头', type: "Zone", pos: { x: 0, y: 0 }, properties: { type: "BaseArrow", }, style: { default: { line: [{ x: event.x, y: event.y }], } } } const arrowItem = new SBaseArrowEdit(null, data); arrowItem.status = SItemStatus.Create; arrowItem.moveable = true; this.addItem(arrowItem); // this.undoStack.push(new SGraphAddCommand(this, arrowItem)); arrowItem.selectable = true; this.grabItem = arrowItem; arrowItem.connect("finishCreated", this, this.finishCreated); arrowItem.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addBaseArrowsItem() /** * 添加Icon类 item * * @param event 鼠标事件 */ addBaseIconTextItem(event: SMouseEvent): void { const data = { /** 名称 */ name: 'icon', /** 图标 */ type: "Text", /** 位置 */ pos: { x: event.x, y: event.y }, size: { width: 50, height: 50 }, /** 由应用自己定义 */ properties: { type: "BaseText" // 自定义类型用于区分mark与node }, style: { default: { textList: [{ text: '文本一', color: "#646c73", font: 14, pos: { x: 0, y: 0 } }, { text: '文本二', color: "#646c73", font: 14, pos: { x: 100, y: 100 } }, { text: '文本三', color: "#ccc", font: 18, pos: { x: 100, y: 500 } } ], url: "data:image/png;base64,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", } } }; const icon = new SBaseIconTextEdit(null, data); icon.status = SItemStatus.Create; icon.moveable = true; this.addItem(icon); icon.selectable = true; this.grabItem = icon; icon.connect("finishCreated", this, this.finishCreated); icon.connect("onContextMenu", this, this.getItem); icon.$emit('finishCreated'); if (this.view) { this.view.update(); } } // Function addBaseIconTextItem() /** * 划线时点击位置是否是锚点 * * @param event 事件 * @param len 限制距离 * @return 点击的锚点 */ clickIsAnchor(event: SMouseEvent): SAnchorItem | null { let minAnchor = null; let len: number = -1; this.root.children.forEach(item => { if (item instanceof SBaseIconTextEdit && item.anchorList && item.anchorList.length) { if (item.img && item.img instanceof SBaseImageEdit) { let scenePoint = item.img.mapFromScene(event.x, event.y); if (item.img.contains(scenePoint.x, scenePoint.y)) { let anchor = item.anchorList[0] let anchorPoint = anchor.mapToScene(0, 0); let dis = SMathUtil.pointDistance( event.x, event.y, anchorPoint.x, anchorPoint.y ); if (len < 0) { minAnchor = anchor; len = dis; } if (dis < len) { minAnchor = anchor; len = dis; } } } } }) console.log('-----------------------') console.log(minAnchor) console.log('-----------------------') return minAnchor; } // Function clickIsAnchor() /** * 设置管线结束锚点 */ 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.id this.grabItem.onMouseDown(event) this.grabItem.status = SItemStatus.Normal; this.finishCreated(this.grabItem) return } } this.grabItem.onMouseDown(event) } } /** * 对齐指定 item * * @param v 对齐类型 */ changeAlignItem(v: any): void { this.selectContainer.layout(v); } // Function changeAlignItem() /** * 保存数据 * * @return 返回需要保存的数据 */ saveMsgItem(): any { // do nothing } // Function saveMsgItem() /** * 重做 */ redo(): void { // do nothing } // Function redo() /** * 撤销 */ undo(): void { // do nothing } // Function undo() /** * 完成创建的回调函数 * * @param item 完成创建的item */ finishCreated(item: SGraphItem): void { // do nothing } // Function finishCreated() /** * 复制 */ copy(): void { // do nothing } // Function copy() /** * 粘贴 */ paste(): void { } // Function paste() /** * 选中状态方法 * * @param item 选中的 item */ toggleItem(item: SGraphItem): void { this.selectContainer.clear() this.selectContainer.toggleItem(item) } // Function toggleItem() /** * 框选 */ addRectSelect(event: SMouseEvent) { let point = new SPoint(event.x, event.y); let rect = new SRectSelectItem(null, point); this.addItem(rect); this.grabItem = rect; } // Function addRectSelect() /** * 获取 item (常用与场景外的调用) * * @param event SMouseEvent 鼠标事件 * @param item SGraphEdit|null 返回 item * */ getItem(item: SGraphEdit | null, event: SMouseEvent[]) { } // Function getItem() }// Class SGraphEditScene