import { SMouseEvent, SUndoStack } from "@saga-web/base"; import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib'; import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big"; import { SGraphItem, SLineStyle, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib"; import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem"; import { SImageLegendItem } from "@/lib/items/SImageLegendItem"; import { TipelineItem } from "@/lib/items/TipelineItem"; import { SImgTextItem } from "@/lib/items/SImgTextItem"; import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem" import { SPoint, SFont } from '@saga-web/draw/lib'; import { Legend } from '@/lib/types/Legend'; import { Relation } from '@/lib/types/Legend'; import { uuid } from "@/components/mapClass/until"; import { STextMarkerItem } from '@/lib/items/STextMarkerItem'; import { SLineMarkerItem } from '@/lib/items/SLineMarkerItem'; /** * 在线绘图 * * @author 韩耀龙 */ export class EditScence extends SGraphScene { undoStack = new SUndoStack(); /** 命令 1 绘制直线 */ private cmd = 'choice'; /** 获取当前状态 */ get getCmd(): string { return this.cmd; } /** 编辑当前状态 */ set setCmd(cmd: string) { if (cmd == 'choice') { this.grabItem = null; } this.cmd = cmd; if (this.focusItem) { // 取消操作 this.focusItem.cancelOperate(); this.focusItem = null; // this.selectContainer. } if (this.view) { this.view.update(); } }; /** 当前选中焦点Item */ focusItem: SGraphItem | null = null; /**图例节点 */ Nodes: any = []; // 图例节点,所有与工程信息化相关的图例(图标类型与区域) /**图例节点 */ // 与工程信息无关的标识对象(增加文本注释,图上的图片说明) Markers: any = []; /** 管线对象 */ Relations: any = []; constructor() { super(); // // 选择绑定选额item事件 this.selectContainer.connect("listChange", this, this.listChange); } /** 绘制图例样式 */ _legend: any | null = null; get getlegend(): any { return this._legend; }; set setlegend(obj: any) { this._legend = obj; console.log('aaaaaa', obj) } /** * 监听变化 * @param obj 变化后的对象 */ listChange(obj: any) { let itemType: string = 'equipment'; if (obj.itemList[0] instanceof STextMarkerItem) { itemType = 'baseText' console.log('obj.itemList[0]', itemType, obj.itemList[0]) } else if (obj.itemList[0] instanceof SImageMarkerItem) { itemType = 'baseImage' } else if (obj.itemList[0] instanceof SLineMarkerItem) { itemType = 'baseLine' } else if (obj.itemList[0] instanceof SZoneLegendItem) { itemType = 'Zone' } else if (obj.itemList[0] instanceof SImageLegendItem) { itemType = 'Image' } else if (obj.itemList[0] instanceof TipelineItem) { itemType = 'Line' } else { itemType = '' }; if (obj.itemList.length == 1) { // 获取聚焦item this.focusItem = obj.itemList[0] } let msg = { itemList: obj.itemList, itemType, } this.emitChange(msg) } emitChange(msg: any) { } /** * 增加线段item */ addLine(event: SMouseEvent): boolean { const data = { /** ID */ ID: uuid(), /** 名称 */ Name: '直线', /** 图标(Image),线类型(Line) */ Type: "Line", /** 位置 */ Pos: { X: 0, Y: 0 }, /** 由应用自己定义 */ Properties: { Line: [{ X: event.x, Y: event.y }] } } const item = new SLineMarkerItem(null, data); item.status = SItemStatus.Create; item.zOrder = ItemOrder.lineOrder; item.selectable = true; this.addItem(item); item.connect("finishCreated", this, this.finishCreated); this.grabItem = item; this.Markers.push(item) // this.undoStack.push(new SGraphAddCommand(this, item)); // item.connect("onMove", this, this.onItemMove.bind(this)); return true } /** * 增加折线item */ addPolylineItem(event: SMouseEvent): boolean { const point = new SPoint(event.x, event.y) const item = new TipelineItem(null, [point]); //设置状态 item.selectable = true; item.status = SItemStatus.Create; item.zOrder = ItemOrder.polylineOrder this.addItem(item); item.connect("finishCreated", this, this.finishCreated); // this.undoStack.push(new SGraphAddCommand(this, item)); this.grabItem = item; this.focusItem = item; return true } /** * 增加管道 lenged */ addTipelineItem(event: SMouseEvent): boolean { const LegendData: Relation = { ID: uuid(), Name: this._legend.Name, GraphElementType: this._legend.Type, Num: 0, GraphElementId: this._legend.Id, AttachObjectIds: [], Type: "Line", PointList: [{ X: event.x, Y: event.y }], LineType: 0, Properties: { LineDash: this._legend.LineDash, LineWidth: this._legend.LineWidth, Color: this._legend.Color, }, } const item = new TipelineItem(null, LegendData); //设置状态 item.selectable = true; item.status = SItemStatus.Create; item.zOrder = ItemOrder.polylineOrder this.addItem(item); this.Relations.push(item); item.connect("finishCreated", this, this.finishCreated); // this.undoStack.push(new SGraphAddCommand(this, item)); this.grabItem = item; this.focusItem = item; return true } /** * 增加多边形item lenged */ addPolygonItem(event: SMouseEvent): void { const LegendData: Legend = { ID: uuid(), Name: this._legend.Name, GraphElementType: this._legend.Type, Num: 0, GraphElementId: this._legend.Id, AttachObjectIds: [], Type: "Zone", Pos: { X: event.x, Y: event.y }, OutLine:[{X:event.x, Y:event.y}], Properties: { StrokeColor: this._legend.Color, FillColor: this._legend.FillColor, LineDash: this._legend.LineDash, LineWidth: this._legend.LineWidth, }, } const Polylines = new SZoneLegendItem(null, LegendData); Polylines.selectable = true; //设置状态 Polylines.status = SItemStatus.Create; Polylines.zOrder = ItemOrder.polygonOrder; // Polylines.moveable = true; this.addItem(Polylines); Polylines.connect("finishCreated", this, this.finishCreated); this.grabItem = Polylines; this.focusItem = Polylines; this.Nodes.push(Polylines); } /** * 增加图片Item mark */ addImgItem(event: SMouseEvent) { const data = { /** ID */ ID: uuid(), /** 名称 */ Name: '图片', Num: 3, /** 图标(Image),线类型(Line) */ Type: "Image", /** 位置 */ Pos: { X: event.x, Y: event.y }, /** 由应用自己定义 */ Properties: { Url: '', } } const item = new SImageMarkerItem(null, data); item.zOrder = ItemOrder.imageOrder; item.selectable = true; item.moveable = true; this.addItem(item); this.grabItem == null; this.focusItem = item; this.cmd = 'choice'; this.Markers.push(item) } /** * 增加文字item */ addTextItem(event: SMouseEvent): void { const data = { /** ID */ ID: uuid(), /** 名称 */ Name: '文本', /** 图标 */ Type: "Text", /** 位置 */ Pos: { X: event.x, Y: event.y }, /** 由应用自己定义 */ Properties: { Text: '请在右侧属性栏输入文字!', Color: '', Font: 0, BackgroundColor: '' } } const item = new STextMarkerItem(null, data); item.moveTo(event.x, event.y); item.selectable = true; item.moveable = true; item.zOrder = ItemOrder.textOrder; this.addItem(item); this.grabItem == null this.cmd = 'choice'; this.Markers.push(item) } /** * 增加图标lenged图标 */ addIconItem(event: SMouseEvent): void { console.log('this._legend.url', this._legend) const LegendData: Legend = { ID: uuid(), Name: this._legend.Name, GraphElementType: this._legend.Type, Num: 0, GraphElementId: this._legend.Id, AttachObjectIds: [], Pos: { X: event.x, Y: event.y }, Scale: { X: 1, Y: 1, Z: 1 }, // 缩放 Rolate: { X: 0, Y: 0, Z: 0 }, Size: { Width: 0, Height: 0 }, // 大小 Properties: { Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url }, } const item = new SImageLegendItem(null, LegendData); this.grabItem == null this.cmd = 'choice'; item.selectable = true; item.moveable = true; item.zOrder = ItemOrder.markOrder; // item.moveTo(event.x, event.y); this.addItem(item); this.Nodes.push(item); } /** * 更改item对应属性 */ editItemStatus(): void { } /** * 更改文本对应属性 * @param str string 文字内容 */ updatedText(str: string): void { if (this.focusItem) { const old = this.focusItem.text; this.focusItem.text = str; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "text", old, str)); } } /** * 更改文本fontSize属性 * @param size number 文字大小 */ updatedFontSize(size: number): void { if (this.focusItem) { let old = new SFont(this.focusItem.font); let font = new SFont(this.focusItem.font); font.size = size; this.focusItem.font = font; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font)); } } /** * 更改线宽属性 * @param lineWidth number 线宽大小 */ updatedLineWidth(lineWidth: number): void { if (this.focusItem) { // let old = new SFont(this.focusItem.font); // let font = new SFont(this.focusItem.font); // font.size = size; this.focusItem.lineWidth = lineWidth; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "font", old, font)); } } /** * 更改文本颜色属性 * @param str string 颜色 */ updatedFontColor(color: string): void { if (this.focusItem) { let old = this.focusItem.color; this.focusItem.color = color; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color)); } } /** * 更改border颜色 * @param color string 颜色 */ updatedBorderColor(color: string): void { if (this.focusItem) { let old = this.focusItem.strokeColor; this.focusItem.strokeColor = color; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color)); } } /** * 更改item宽 * @param width number 颜色 */ updatedWidth(width: number): void { if (this.focusItem) { // let old = this.focusItem.width; this.focusItem.width = width; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color)); } } /** * 更改item高 * @param height number 颜色 */ updatedHeight(height: number): void { if (this.focusItem) { // let old = this.focusItem.width; this.focusItem.height = height; // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color)); } } /** * 更改item坐标 * @param x number x x坐标 * @param y number y y坐标 */ updatedPosition(x: number, y: number): void { if (this.focusItem) { let p = this.focusItem.mapFromScene(x, y) // newx - oldx = newleft - oldleft // 要求的值(新的x坐标) - 旧的x坐标 = 新的左边界(用户输入的值) - 旧的左边界 this.focusItem.x = p.x - this.focusItem.boundingRect().left + this.focusItem.x; this.focusItem.y = p.y - this.focusItem.boundingRect().top + this.focusItem.y; } } /** * 更改item 背景色坐标 * @param color string 颜色color */ updatedbackColor(color: string): void { if (this.focusItem) { this.focusItem.backgroundColor = color; } } /** * 更改item Url * @param url string 图片key */ upadataImageUrl(url: string): void { if (this.focusItem) { this.focusItem.url = '/serve/topology-wanda/Picture/query/' + url; } } /** * 更改item border * @param val string border类型 */ upadataBorder(val: string): void { if (this.focusItem) { let borderStyle = null if (val == 'dashed') { borderStyle = SLineStyle.Dashed } else if (val == 'dotted') { borderStyle = SLineStyle.Dotted } else if (val == 'solid') { borderStyle = SLineStyle.Soild } this.focusItem.lineStyle = borderStyle; } } /** * 更改item 名称 * @param val string border类型 */ upadataLengedName(val: string): void { console.log('xxxxxxx',val,this.focusItem) if (this.focusItem && this.focusItem.data) { this.focusItem.text= val } } /** * 删除指定item */ deleiteItem(): void { if (this.focusItem) { this.removeItem(this.focusItem); let a = -1 this.Nodes.forEach((item: any, index: number) => { if (item.id == this.focusItem.id) { a = index } }); this.Nodes.splice(a, 1); let b = -1; this.Markers.forEach((item: any, index: number) => { if (item.id == this.focusItem.id) { b = index } }); this.Markers.splice(b, 1); let c = -1; this.Relations.forEach((item: any, index: number) => { if (item.id == this.focusItem.id) { c = index } }); this.Relations.splice(c, 1); this.focusItem = null; } if (this.view) { this.view.update(); } } /** * 对齐指定item * @param v */ changeAlignItem(v: any): void { this.selectContainer.layout(v); } /** * 提取item */ extractItem(): void { console.log(this) } /** * 保存数据 */ saveMsgItem(): any { const Nodes: any = []; const Markers: any = []; const Relations: any = []; this.Nodes.forEach(e => { Nodes.push(e.toData()) }); this.Markers.forEach(e => { Markers.push(e.toData()) }); this.Relations.forEach(e => { Relations.push(e.toData()) }); let element = { Nodes, Markers, Relations } return element } /** * 锁住item */ lockItem(): void { } /** * 执行取消操作 */ redo(): void { this.undoStack.undo(); } /** * 执行重做操作执行 */ undo(): void { this.undoStack.redo(); } /** * 完成事件创建的回调函数 */ finishCreated(item: any) { this.setCmd = 'choice'; this.focusItem = item; this.selectContainer.toggleItem(item) } //////////////////////// // 以下为鼠标键盘操作事件 onMouseDown(event: SMouseEvent): any { if (this.grabItem) { return this.grabItem.onMouseDown(event); } switch (this.cmd) { case 'baseLine': this.addLine(event); break; case 'baseText': this.addTextItem(event); break; case 'baseImage': this.addImgItem(event) break; case 'Zone': this.addPolygonItem(event); break; case 'Image': this.addIconItem(event); break; case 'Line': this.addTipelineItem(event); break; default: return super.onMouseDown(event); } } /** * 键盘事件 * * @param event 事件参数 * @return boolean */ onKeyDown(event: KeyboardEvent): any { if (this.grabItem) { this.grabItem.onKeyDown(event); } // if (event.key == "Enter") { // this.cmd = 0 // } return false } }