import { SMouseEvent, SUndoStack } from "@saga-web/base"; import { SGraphScene,SGraphLayoutType } from '@saga-web/graph/lib'; import { SPoint, SFont } from '@saga-web/draw/lib'; import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big"; import { SGraphItem, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib"; import { SPolygonItem } from "./SPolygonItem"; import { TipelineItem } from "@/lib/TipelineItem"; import { SImgTextItem } from "@/lib/SImgTextItem" /** * 在线绘图 * * @author 韩耀龙 */ export class EditScence extends SGraphScene { undoStack = new SUndoStack(); /** 命令 1 绘制直线 */ private cmd = 0; /** 获取当前状态 */ get getCmd(): number { return this.cmd; } /** 编辑当前状态 */ set setCmd(cmd: number) { if (cmd == 0) { 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; constructor() { super(); // // 选择绑定选额item事件 this.selectContainer.connect("listChange", this, this.listChange); } /** * 监听变化 * @param obj 变化后的对象 */ listChange(obj: any) { let itemType: string = 'equipment' if (obj.itemList[0] instanceof STextItem) { itemType = 'text' } else if (obj.itemList[0] instanceof SImageItem) { itemType = 'images' } else if (obj.itemList[0] instanceof SLineItem) { itemType = 'line' } else if (obj.itemList[0] instanceof SPolylineItem) { itemType = 'pipeline' } else if (obj.itemList[0] instanceof SPolygonItem) { itemType = 'position' } else if (obj.itemList[0] instanceof SImgTextItem) { itemType = 'equipment' } 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 item = new SLineItem(null, new SPoint(event.x, event.y)); this.addItem(item); item.connect("finishCreated", this, this.finishCreated); item.zOrder = ItemOrder.lineOrder; item.selectable = true; this.grabItem = 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 } /** * 增加多边形item */ addPolygonItem(event: SMouseEvent): void { //创建item const Polylines = new SPolygonItem(null); Polylines.selectable = true; //设置状态 Polylines.setStatus = SItemStatus.Create; const point = new SPoint(event.x, event.y); Polylines.zOrder = ItemOrder.polygonOrder; Polylines.setPointList = [point]; Polylines.moveable = true; this.addItem(Polylines); Polylines.connect("finishCreated", this, this.finishCreated); this.grabItem = Polylines; this.focusItem = Polylines; } /** * 增加图片Item */ addImgItem(event: SMouseEvent) { const url = require('./../../assets/logo.png') const item = new SImageItem(null); item.url = url; item.zOrder = ItemOrder.imageOrder; item.selectable = true; item.moveable = true; item.moveTo(event.x, event.y); this.addItem(item); this.grabItem == null; this.focusItem = item; this.cmd = 0; } /** * 增加文字item */ addTextItem(event: SMouseEvent): void { const item = new STextItem(null, '请在右侧属性栏输入文字!'); item.moveTo(event.x, event.y); item.selectable = true; item.moveable = true; item.zOrder = ItemOrder.textOrder; this.addItem(item); this.grabItem == null this.cmd = 0; } /** * 增加图标 */ addIconItem(): void { } /** * 更改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) { this.focusItem.x = x; this.focusItem.y = y; } } /** * 更改item 背景色坐标 * @param color string 颜色color */ updatedbackColor(color: string): void { if (this.focusItem) { this.focusItem.backgroundColor = color; } } /** * 删除指定item */ deleiteItem(): void { if (this.focusItem) { this.removeItem(this.focusItem); this.focusItem = null; } if (this.view) { this.view.update(); } } /** * 对齐指定item * @param v */ changeAlignItem(v: any): void { this.selectContainer.layout(SGraphLayoutType.v); } /** * 提取item */ extractItem(): void { } /** * 锁住item */ lockItem(): void { } /** * 执行取消操作 */ redo(): void { this.undoStack.undo(); } /** * 执行重做操作执行 */ undo(): void { this.undoStack.redo(); } /** * 完成事件创建的回调函数 */ finishCreated(item: any) { this.setCmd = 0; this.focusItem = item; this.selectContainer.toggleItem(item) } //////////////////////// // 以下为鼠标键盘操作事件 onMouseDown(event: SMouseEvent): any { if (this.grabItem) { return this.grabItem.onMouseDown(event); } switch (this.cmd) { case 1: this.addLine(event); break; case 2: this.addTextItem(event); break; case 3: this.addImgItem(event) break; case 4: this.addPolygonItem(event); break; case 5: this.addPolylineItem(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 } }