/* * ********************************************************************************************************************* * * !! * .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 {SGraphAddCommand, SGraphEditScene} from "../edit" import {SMouseEvent} from "@persagy-web/base/lib"; import {SArrowStyleType, SPoint, SRect} from '@persagy-web/draw/lib'; import {SItemStatus, SRectSelectItem} from '@persagy-web/big/lib'; import {SGraphItem, SGraphSelectContainer} from "@persagy-web/graph/"; import {uuid} from "./until"; import {SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool} from "./" /** * big-edit 场景 * * @author 韩耀龙 */ export class SBaseEditScene extends SGraphEditScene { /** 图例节点 */ Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域) /** 图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明) Markers: any = []; /** 管线对象 */ Relations: any = []; /** 复制的对象 */ copyString: any[] = []; /** * 构造函数 * */ constructor() { super() } // Constructor /** * 新增基础类注释 * * @param event 鼠标事件参数 */ addExplainItem(event: SMouseEvent): void { const data = { /** 名称 */ name: '基础注释文本', /** 图标 */ type: "Text", /** 位置 */ pos: { x: event.x, y: event.y }, /** 由应用自己定义 */ properties: { type: "BaseExplain", }, style: { default: { text: '请在右侧属性栏输入文字!', color: "#646c73", font: 14, backgroundcolor: "#f7f9facc", } } }; const item = new SBaseExpainEdit(null, data); item.moveTo(event.x, event.y); item.selectable = true; item.moveable = true; this.addItem(item); this.undoStack.push(new SGraphAddCommand(this, item)); this.grabItem = null; this.finishCreated(item); } // Function addExplainItem() /** * 新增基础箭头(折线) * * @param event 鼠标事件 */ addPolyLineArrow(event: SMouseEvent): void { const data = { name: '基础箭头', type: "Arrow", pos: { x: 0, y: 0 }, properties: { type: "BaseArrow", }, style: { outLine: [{x: event.x, y: event.y}], begin: SArrowStyleType.None, //开端箭头样式 end: SArrowStyleType.None, //结尾箭头样式 isMove: true, //是否可以移动 default: {} } }; const item = new SBaseArrow(null, data); item.status = SItemStatus.Create; item.selectable = true; 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(); } } // Function addPolyLineArrow() /** * 添加基本设备 item * * @param event 鼠标事件 * @param legendObj 图例样式 */ addEuqipment(event: SMouseEvent, legendObj: any): void { const data = { /** 名称 */ name: '基础设备', num: 1, size: { width: 50, height: 50 }, /** 图标 (Image),线类型 (Line) */ type: "Image", /** 位置 */ pos: { x: event.x, y: event.y }, /** 由应用自己定义 */ properties: { type: "baseEquipment", }, style: { default: { strokecolor: "#c0ccda", url: require('./../../../assets/images/equip/' + legendObj.url), } } } const item = new SBaseEquipment(null, data); item.status = SItemStatus.Create; this.addItem(item); this.undoStack.push(new SGraphAddCommand(this, item)); item.selectable = true; item.moveable = true; this.grabItem = item; item.connect("finishCreated", this, this.finishCreated); item.connect("onContextMenu", this, this.getItem); if (this.view) { this.view.update(); } } // Function addEuqipment() /** * 新增管道 * * @param event 鼠标事件 */ addBasePipe(event: SMouseEvent) { 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 SBasePipe(null, data); item.status = SItemStatus.Create; item.selectable = true; 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(); } } // Function addBasePipe() /** * 添加基本管道联通器 * * @param event 鼠标事件 * @param cmd 命令 */ addPipeUninTool(event: SMouseEvent, cmd: string): void { const cmdList = { 'wantou': 2, 'santong': 3, 'sitong': 4, } const data = { /** 名称 */ name: '基础管道接头', /** 图标 (Image),线类型 (Line) */ type: "Image", /** 位置 */ pos: { x: event.x, y: event.y }, /** 由应用自己定义 */ properties: { type: "BasePipeUninTool", }, style: { uninToolType: cmdList[cmd] ? cmdList[cmd] : 2, //2,3,4 分别分二头连接器、三头连接器、四头连接器 default: { strokecolor: "#c0ccda", } } }; const item = new SBasePipeUninTool(null, data); item.status = SItemStatus.Create; item.selectable = true; item.moveable = true; 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(); } } // Function addPipeUninTool() /** * 重做 */ redo(): void { if (this.grabItem && this.grabItem.redo) { this.grabItem.redo() } else { this.undoStack.redo(); } } // Function redo() /** * 撤销 */ undo(): void { if (this.grabItem && this.grabItem.undo) { this.grabItem.undo() } else { this.undoStack.undo(); } } // Function undo() /** * 删除 * * @return 删除的图例 */ deleteItem(): any { if (this.selectContainer.count == 0) { return [] } let itemList = this.selectContainer.itemList; itemList.forEach((element: any) => { this.removeItem(element) }); if (this.view) { this.view.update() } return itemList } // Function deleteItem() /** * 框选 */ addRectSelect(event: SMouseEvent): void { let point = new SPoint(event.x, event.y); let rect = new SRectSelectItem(null, point); this.addItem(rect); this.grabItem = rect; } // Function addRectSelect() /** * 计算框选交集 * * @param ctrl 是否点击ctrl */ groupSelect(ctrl: boolean) { // if (!ctrl) { // this.selectContainer.clear() // } if (this.grabItem instanceof SRectSelectItem) { const rect = this.grabItem.boundingRect(); this.arrToSelect(this.root.children, rect) } } // Function groupSelect() /** * 选中item:框选 * * @param arr 实例数组 * @param rect 框选矩形区域 */ private arrToSelect(arr: SGraphItem[], rect: SRect) { if (Array.isArray(arr) && arr.length) { arr.forEach(t => { if (!(t instanceof SGraphSelectContainer) && t.parent) { let temp = t.boundingRect(); let lefttop = t.mapToScene(temp.left, temp.top) let rightbottom = t.mapToScene(temp.right, temp.bottom) let r = new SRect(lefttop, rightbottom) if (rect.isIn(r)) { this.selectContainer.toggleItem(t) } } }) } } // Function arrToSelect() ///////////////////////////////////////////////////////////////////// // 鼠标事件 /** * 鼠标左键按下 * * @param event 鼠标事件参数 */ onMouseDown(event: SMouseEvent): any { if (!super.onMouseDown(event) && 1 == event.buttons) { this.addRectSelect(event); } } // Function onMouseDown() /** * 鼠标抬起 * * @param event 鼠标事件参数 */ onMouseUp(event: SMouseEvent): boolean { if (this.grabItem) { // 鼠标抬起时,如果grabItem为框选则删除框选item if (this.grabItem instanceof SRectSelectItem) { this.removeItem(this.grabItem); this.groupSelect(false); this.grabItem = null; if (this.view) { this.view.update() } return true; } return this.grabItem.onMouseUp(event); } return super.onMouseUp(event) } // Function onMouseUp() /** * 复制 */ 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) }) // 生成复制字符串 console.log(this.copyString) // 获取input dom const input = document.createElement('input'); input.setAttribute('id', 'COPYINPUT') input.value = JSON.stringify(this.copyString) sessionStorage.setItem("copyString", input.value); document.body.appendChild(input); input.select() document.execCommand('copy'); input.style.display = 'none'; console.log(input.value, Date.now()); document.body.removeChild(input) } } // Function copy() /** * 粘贴 */ 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 } t.moveable = true; console.log('t', t) this.addItem(t) }); this.view ? this.view.update() : '' console.log(this.view) } // Function paste() } // Class SBaseEditScene