123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488 |
- 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, 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 { uuid } from "@/components/mapClass/until";
- import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
- /**
- * 在线绘图
- *
- * @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;
- }
- /**
- * 监听变化
- * @param obj 变化后的对象
- */
- listChange(obj: any) {
- let itemType: string = 'equipment'
- if (obj.itemList[0] instanceof STextMarkerItem) {
- itemType = 'text'
- } else if (obj.itemList[0] instanceof SImageMarkerItem) {
- 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 SZoneLegendItem) {
- 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));
- item.status = SItemStatus.Create;
- item.zOrder = ItemOrder.lineOrder;
- item.selectable = true;
- this.addItem(item);
- item.connect("finishCreated", this, this.finishCreated);
- 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 {
- const LegendData: Legend = {
- ID: uuid(),
- Name: this._legend.Name,
- GraphElementType: this._legend.Type,
- Num: 0,
- GraphElementId: this._legend.Id,
- AttachObjectIds: [],
- Pos: { x: 0, y: 0 },
- OutLine: [[new SPoint(event.x, event.y)]],
- Scale: { X: 1, Y: 1, Z: 1 }, // 缩放
- Rolate: { X: 0, Y: 0, Z: 0 },
- Size: { Width: 0, Height: 0 }, // 大小
- Properties: {
- strokeColor: this._legend.Color,
- fillColor: this._legend.FillColor,
- },
- }
- const Polylines = new SZoneLegendItem(null, LegendData);
- 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;
- this.Nodes.push(Polylines)
- }
- /**
- * 增加图片Item
- */
- addImgItem(event: SMouseEvent) {
- const data = {
- /** ID */
- ID:'123',
- /** 名称 */
- Name: '嗡嗡嗡',
- /** 图标(Image),线类型(Line) */
- Type: "Image",
- /** 位置 */
- Pos: {X: event.x, Y: event.y},
- /** 由应用自己定义 */
- Properties:{
- Url:require('./../../assets/logo.png'),
- Name: '嗡嗡嗡',
- }
- }
- 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:'456',
- /** 名称 */
- Name: '文本',
- /** 图标(Image),线类型(Line) */
- Type: "Text",
- /** 位置 */
- Pos: {X: event.x, Y: event.y},
- /** 由应用自己定义 */
- Properties:{
- Text: '请在右侧属性栏输入文字!'
- }
- }
- 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)
- }
- /**
- * 增加图标
- */
- addIconItem(event: SMouseEvent): void {
- const item = new SImageLegendItem(null, '请在右侧属性栏输入文字!');
- 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);
- }
- /**
- * 更改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
- */
- 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 {
- console.log(v);
- this.selectContainer.layout(v);
- }
- /**
- * 提取item
- */
- extractItem(): void {
- console.log(this)
- }
- /**
- * 保存数据
- */
- saveMsgItem(): any {
- const Nodes: any = []
- this.Nodes.forEach(e => {
- Nodes.push(e.toData())
- });
- let element = {
- Nodes
- }
- 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.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
- }
- }
|