/* * ********************************************************************************************************************* * * !! * .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 } 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, SBasePolylineEdit, SBaseTextEdit, SBaseImageEdit, SBaseRectEdit, SBaseTriangleEdit } from './' /** * Graphy图形引擎编辑场景类 * * @author 韩耀龙(han_yao_long@126.com) */ 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 } set editCmd(val: string) { this._editCmd = val; } /**是否可编辑 */ _isEditStatus: Boolean = true; // 是否可编辑 set isEditStatus(bol: Boolean) { this._isEditStatus = bol; } get isEditStatus(): Boolean { return this._isEditStatus } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// //函数 constructor() { super() // // 选择绑定选额item事件 this.selectContainer.connect("selectChange", this, this.selectChange); } /** * 选中item触发方法 * * @param obj 变化后的对象 */ selectChange(obj: any) { } /** * 新增基础类直线 * * @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(); } } /** * 新增折线 * * @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.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 鼠标事件参数 */ 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); this.undoStack.push(new SGraphAddCommand(this, item)); this.finishCreated(item); } /** * 新增基础类文本 * * @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.undoStack.push(new SGraphAddCommand(this, item)); this.grabItem = null; item.connect("onContextMenu", this, this.getItem); this.finishCreated(item); } /** * 添加基本矩形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(); } } /** * 添加基本三角形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(); } } /** * 添加基本圆 * * @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(); } } /** * 添加基本多边形 * * @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(); } } /** * 添加基本箭头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(); } } /** * 对齐指定item * @param v */ changeAlignItem(v: any): void { this.selectContainer.layout(v); } /** * 保存数据 * * @return any 返回需要保存的数据 */ saveMsgItem(): any { } /** * 重做 * * @return any */ redo(): void { } /** * 撤销 * * @return any */ undo(): void { } /** * 完成创建的回调函数 * * @param item 完成创建的item */ finishCreated(item: SGraphItem) { } /** * 复制 * */ copy() { } /** * 粘贴 * */ paste() { } /** * 选中状态方法 * * @param item SGraphItem */ toggleItem(item: SGraphItem): void { this.selectContainer.clear() this.selectContainer.toggleItem(item) } /** * 框选 */ addRectSelect(event: SMouseEvent) { let point = new SPoint(event.x, event.y); let rect = new SRectSelectItem(null, point); this.addItem(rect); this.grabItem = rect; } /** * 获取item (常用与场景外的调用F) * @param event SMouseEvent 鼠标事件 * @param item SGraphEdit|null 返回item * */ getItem(item: SGraphEdit | null, event: SMouseEvent[]) { } }// Class GraphEditScene