فهرست منبع

big-edit:<feat>完善 big-edit 模块

YaolongHan 4 سال پیش
والد
کامیت
3bf8b932ee

+ 2 - 1
persagy-web-big-edit/package.json

@@ -6,7 +6,7 @@
     "types": "lib/index.d.js",
     "remote": {
         "host": "47.93.22.124",
-        "path": "/opt/web/doc/api/web/bigedit",
+        "path": "/opt/web/doc/api/web/big-edit",
         "user": "doc",
         "password": "saga2020(^cloud==",
         "local": "api"
@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@persagy-web/graph": "2.2.22",
+        "@persagy-web/edit": "2.2.2",
         "@types/uuid": "^8.0.0"
     }
 }

+ 40 - 11
persagy-web-big-edit/src/BigEditFactory.ts

@@ -31,9 +31,9 @@ import {
     SBasePolygonEdit,
     SBaseRectEdit,
     SBaseTextEdit
-} from "@persagy-web/edit/lib/";
-import {Marker, SBaseArrow, SBaseExpainEdit} from "./"
-import {SItemFactory} from "@persagy-web/big"
+} from "@persagy-web/edit";
+import { Marker, SBaseArrow, SBaseExpainEdit, SBaseArrowPolyEdit, SBaseEquipment, SBasePipe, Legend, Relation } from "./"
+import { SItemFactory } from "@persagy-web/big"
 
 /**
  * item 创建工厂
@@ -52,7 +52,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础直线
      *
      * @param data  数据
-     * @return  线
+     * @return 线
      */
     createBaseLineEdit(data: Marker): SBaseLineEdit {
         return new SBaseLineEdit(null, data);
@@ -62,7 +62,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础文本
      *
      * @param data  数据
-     * @return  文本
+     * @return 文本
      */
     createBaseTextEdit(data: Marker): SBaseTextEdit {
         return new SBaseTextEdit(null, data);
@@ -72,7 +72,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础图片
      *
      * @param data  数据
-     * @return  图片
+     * @return 图片
      */
     createBaseImageEdit(data: Marker): SBaseImageEdit {
         return new SBaseImageEdit(null, data);
@@ -82,7 +82,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础矩形
      *
      * @param data  数据
-     * @return  矩形
+     * @return 矩形
      */
     createBaseRectEdit(data: Marker): SBaseRectEdit {
         return new SBaseRectEdit(null, data);
@@ -92,7 +92,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础圆
      *
      * @param data  数据
-     * @return  
+     * @return 圆
      */
     createBaseCircleEdit(data: Marker): SBaseCircleEdit {
         return new SBaseCircleEdit(null, data);
@@ -102,7 +102,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础注释
      *
      * @param data     数据
-     * @return  注释
+     * @return 注释
      */
     createBaseExpainEdit(data: Marker): SBaseExpainEdit {
         return new SBaseExpainEdit(null, data);
@@ -112,7 +112,7 @@ export class BigEditFactory extends SItemFactory {
      * 创建基础多边形
      *
      * @param data     数据
-     * @return  注释
+     * @return 注释
      */
     createBasePolygonEdit(data: Marker): SBasePolygonEdit {
         return new SBasePolygonEdit(null, data);
@@ -128,4 +128,33 @@ export class BigEditFactory extends SItemFactory {
         return new SBaseArrow(null, data);
     }
 
-}
+    /**
+     * 创建基础基础箭头(折线)
+     *
+     * @param data     数据
+     * @return  注释
+     */
+    createBasePolygonArrowEdit(data: Marker): SBaseArrowPolyEdit {
+        return new SBaseArrowPolyEdit(null, data);
+    }
+
+    /*
+    * 创建基础设备
+    *
+    * @param data     数据
+    * @return 注释
+    */
+    createBaseEquipment(data: Legend): SBaseEquipment {
+        return new SBaseEquipment(null, data);
+    }
+
+    /*
+     * 创建基础管道
+     *
+     * @param data     数据
+     * @return 注释
+     */
+    createBasePipe(data: Relation): SBasePipe {
+        return new SBasePipe(null, data);
+    }
+}

+ 182 - 54
persagy-web-big-edit/src/SBaseEditScene.ts

@@ -24,14 +24,15 @@
  * *********************************************************************************************************************
  */
 
-import { SGraphAddCommand, SGraphEditScene, SGraphEdit } from "@persagy-web/edit/lib"
+import { SGraphDeleteListCommand, SGraphEditScene, SGraphEdit } from "@persagy-web/edit"
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { SArrowStyleType, SPoint, SRect } from '@persagy-web/draw';
 import { SItemStatus, SRectSelectItem } from '@persagy-web/big/lib';
-import { SGraphItem, SGraphSelectContainer } from "@persagy-web/graph/lib/";
+import { SGraphItem, SGraphSelectContainer, SOrderSetType } from "@persagy-web/graph/lib/";
 import { uuid } from "./until";
 import { SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool, SBasePipe } from "./"
-
+import { SBaseArrowPolyEdit } from './items/SBaseArrowPolyEdit';
+import { SGraphAddListCommand } from '../edit/commands/SGraphAddListCommand';
 
 /**
  * big-edit 场景
@@ -47,7 +48,8 @@ export class SBaseEditScene extends SGraphEditScene {
     Relations: any = [];
     /** 复制的对象 */
     copyString: any[] = [];
-    grabItem: null | SGraphEdit | SGraphItem  = null
+    /** 选中的对象 */
+    grabItem: null | SGraphEdit | SGraphItem = null;
 
     /**
      * 构造函数
@@ -55,7 +57,7 @@ export class SBaseEditScene extends SGraphEditScene {
      */
     constructor() {
         super()
-    }
+    } // Constructor
 
     /**
      * 新增基础类注释
@@ -83,13 +85,14 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
             }
         };
+
         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;
+        item.connect("onContextMenu", this, this.getItem);
         this.finishCreated(item);
     }
 
@@ -114,11 +117,50 @@ export class SBaseEditScene extends SGraphEditScene {
                 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();
+        }
+    }
+
+    /**
+     * 新增基础箭头(多边形)
+     *
+     * @param event 鼠标事件
+     */
+    addPolygonArrow(event: SMouseEvent): void {
+        const data = {
+            /** 名称 */
+            name: '多边形箭头',
+            /** 图标(Image),线类型(Line) */
+            type: "ArrowPolygon",
+            /** 缩放比例(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: "BaseArrowPolygon"           // 自定义类型用于区分mark与node
+            },
+            style: {
+                line: [{ x: event.x, y: event.y }],
+                default: {
+                }
+            }
+        };
+        const item = new SBaseArrowPolyEdit(null, data);
+        item.status = SItemStatus.Create;
+        item.selectable = true;
+        this.addItem(item);
         this.grabItem = item;
         item.connect("finishCreated", this, this.finishCreated);
         item.connect("onContextMenu", this, this.getItem);
@@ -135,9 +177,11 @@ export class SBaseEditScene extends SGraphEditScene {
      */
     addEuqipment(event: SMouseEvent, legendObj: any): void {
         const data = {
+            nodeId: uuid(),
             /** 名称 */
             name: '基础设备',
-            num: 1,
+            /** 返回物理世界对象 ID 列表 */
+            attachObjectIds: [],
             size: { width: 50, height: 50 },
             /** 图标 (Image),线类型 (Line) */
             type: "Image",
@@ -145,23 +189,25 @@ export class SBaseEditScene extends SGraphEditScene {
             pos: { x: event.x, y: event.y },
             /** 由应用自己定义 */
             properties: {
-                type: "baseEquipment",
+                type: "BaseEquipment",
+                infoMsgList: [{
+
+                }]
             },
             style: {
                 default: {
                     strokecolor: "#c0ccda",
-                    // url: require('./../../../assets/images/equip/' + legendObj.url),
+                    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);
+        this.finishCreated(item)
         item.connect("onContextMenu", this, this.getItem);
         if (this.view) {
             this.view.update();
@@ -173,17 +219,30 @@ export class SBaseEditScene extends SGraphEditScene {
      *
      * @param event 鼠标事件
      */
-    addBasePipe(event: SMouseEvent) {
+    addBasePipe(event: SMouseEvent, legendObj: any) {
+        const anc = this.clickIsAnchor(event);
+        if (anc) {
+            const p = anc.mapToScene(0, 0)
+            anc.isConnected = true;
+            event.x = p.x;
+            event.y = p.y;
+        };
         const data = {
-            name: '管道',
-            type: "line",
-            pos: { x: 0, y: 0 },
+            name: legendObj.name,
+            graphElementId: legendObj.id,
+            lineType: '',
+            node1Id: '',
+            node2Id: '',
+            anchor1Id: '',
+            anchor2Id: '',
+            pointList: [{ x: event.x, y: event.y }],
             properties: {
-                type: "BasePolyline",
+                type: "BasePipe",
             },
             style: {
-                outLine: [{ x: event.x, y: event.y }],
                 default: {
+                    strokeColor: legendObj.color,
+                    lineWidth: 4
                 }
             }
         };
@@ -191,8 +250,16 @@ export class SBaseEditScene extends SGraphEditScene {
         item.status = SItemStatus.Create;
         item.selectable = true;
         this.addItem(item);
-        this.undoStack.push(new SGraphAddCommand(this, item));
         this.grabItem = item;
+        // 起始锚点
+        item.startAnchor = anc;
+        if (anc) {
+            anc.parent?.connect('changePos', item, item.changePos)
+            item.anchor1Id = anc.id;
+            item.node1Id = anc.parent ? anc.parent.nodeId : '';
+        }
+
+        console.log('anc', anc)
         item.connect("finishCreated", this, this.finishCreated);
         item.connect("onContextMenu", this, this.getItem);
         if (this.view) {
@@ -212,6 +279,7 @@ export class SBaseEditScene extends SGraphEditScene {
             'santong': 3,
             'sitong': 4,
         }
+
         const data = {
             /** 名称 */
             name: '基础管道接头',
@@ -230,14 +298,14 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
             }
         };
+
         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);
+        this.finishCreated(item)
         item.connect("onContextMenu", this, this.getItem);
         if (this.view) {
             this.view.update();
@@ -271,11 +339,18 @@ export class SBaseEditScene extends SGraphEditScene {
      *
      * @return 删除的图例
      */
-    deleteItem(): any {
-        if (this.selectContainer.count == 0) {
-            return []
+    deleteItem(itemArr: SGraphItem[] = []): any {
+        let itemList = null;
+        if (itemArr && itemArr.length && itemArr[0]) {
+            itemList = [...itemArr]
+        } else {
+            if (this.selectContainer.count == 0) {
+                return []
+            }
+            itemList = this.selectContainer.itemList;
+            this.undoStack.push(new SGraphDeleteListCommand(this, [...itemList]))
         }
-        let itemList = this.selectContainer.itemList;
+        // 推入 undo/redo 栈
         itemList.forEach((element: any) => {
             this.removeItem(element)
         });
@@ -301,9 +376,6 @@ export class SBaseEditScene extends SGraphEditScene {
      * @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)
@@ -313,8 +385,8 @@ export class SBaseEditScene extends SGraphEditScene {
     /**
      * 选中item:框选
      *
-     * @param arr   实例数组
-     * @param rect  框选矩形区域
+     * @param arr       实例数组
+     * @param rect      框选矩形区域
      */
     private arrToSelect(arr: SGraphItem[], rect: SRect) {
         if (Array.isArray(arr) && arr.length) {
@@ -334,7 +406,6 @@ export class SBaseEditScene extends SGraphEditScene {
 
     /////////////////////////////////////////////////////////////////////
     // 鼠标事件
-
     /**
      * 鼠标左键按下
      *
@@ -364,8 +435,10 @@ export class SBaseEditScene extends SGraphEditScene {
                 }
                 return true;
             }
+
             return this.grabItem.onMouseUp(event);
         }
+
         return super.onMouseUp(event)
     }
 
@@ -373,16 +446,31 @@ export class SBaseEditScene extends SGraphEditScene {
      * 复制
      */
     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)
+        const itemList = this.save(false);
+        if (itemList) {
+            // 删除对应得id
+            itemList.markers.map((item: any) => {
+                delete item.id;
+                delete item.graphId;
+                delete item.markerId;
+                return item
+            });
 
-            })
-            // 生成复制字符串
-            console.log(this.copyString)
+            itemList.nodes.map((item: any) => {
+                delete item.id;
+                delete item.graphId;
+                delete item.markerId;
+                return item
+            });
+
+            itemList.relations.map((item: any) => {
+                delete item.id;
+                delete item.graphId;
+                delete item.markerId;
+                return item
+            });
+
+            this.copyString = itemList
             // 获取input dom
             const input = document.createElement('input');
             input.setAttribute('id', 'COPYINPUT')
@@ -397,22 +485,62 @@ export class SBaseEditScene extends SGraphEditScene {
         }
     }
 
+
+
     /**
-     * 粘贴
+     * 添加多个item命令
+     *
+     *  @param itemList    鼠标事件对象
      */
-    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
+    addListCommand(itemList: SGraphEdit[]): void {
+        this.undoStack.push(new SGraphAddListCommand(this, itemList));
+    }
+
+    /**
+     * 图例置顶、置底
+     *
+     * @parm type   设置类型
+     */
+    setOrder(type: string) {
+        this.selectContainer.setOrder(SOrderSetType.[type])
+    }
+
+    /**
+   * 设置管线结束锚点
+   */
+    setTipeEndanchor(event: SMouseEvent): void {
+        if (this.grabItem instanceof SBasePipe) {
+            const anc = this.clickIsAnchor(event);
+            if (anc) {
+                const p = anc.mapToScene(0, 0)
+                anc.isConnected = true;
+                event.x = p.x;
+                event.y = p.y;
+                if (this.grabItem.status == SItemStatus.Create) {
+                    if (this.grabItem.pointList.length) {
+                        this.grabItem.endAnchor = anc;
+                        anc.parent?.connect('changePos', this.grabItem, this.grabItem.changePos)
+                    }
+
+                    this.grabItem.anchor2Id = anc.id
+                    this.grabItem.node2Id = anc.parent.nodeId
+                    this.grabItem.onMouseDown(event)
+                    this.grabItem.status = SItemStatus.Normal;
+                    this.finishCreated(this.grabItem)
+                    return
+                }
             }
 
-            t.moveable = true;
-            console.log('t', t)
-            this.addItem(t)
-        });
-        this.view ? this.view.update() : ''
-        console.log(this.view)
+            this.grabItem.onMouseDown(event)
+        }
+    }
+
+    /**
+     * 获取item (常用与场景外的调用F)
+     *
+     * @params isAll    是否为全部item数据
+     * @return obj      返回保存的数据接口
+     */
+    save(isAll: boolean = true): any {
     }
-} 
+}

+ 2 - 1
persagy-web-big-edit/src/index.ts

@@ -10,4 +10,5 @@ import { Marker } from "./types/Marker"
 import { Relation } from "./types/Relation"
 import { BigEditFactory } from "./BigEditFactory"
 import { SBaseEquipment } from "./items/SBaseEquipment"
-export { SBaseArrow, SBasePipe, SBasePipeUninTool, SBaseEquipment, BigEditFactory, Anchor, Legend, Marker, Relation, ElementData, SBaseEditScene, SBaseExpainEdit }
+import { SBaseArrowPolyEdit } from './items/SBaseArrowPolyEdit'
+export { SBaseArrow, SBasePipe, SBasePipeUninTool, SBaseEquipment, BigEditFactory, Anchor, Legend, Marker, Relation, ElementData, SBaseEditScene, SBaseExpainEdit, SBaseArrowPolyEdit }

+ 10 - 9
persagy-web-big-edit/src/items/SBaseArrow.ts

@@ -24,12 +24,12 @@
  * *********************************************************************************************************************
  */
 
-import { SColor, SFont, SPainter, SArrowStyleType } from "@persagy-web/draw/";
-import { SBasePolylineEdit } from '@persagy-web/edit/lib';
+import { SPainter, SArrowStyleType } from "@persagy-web/draw/";
+import { SBasePolylineEdit } from "@persagy-web/edit";
 import { SGraphItem, SLineStyle } from "@persagy-web/graph/lib";
 import { Marker } from "./../types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
+
 
 /**
  * 编辑箭头(折线)
@@ -43,21 +43,21 @@ export class SBaseArrow extends SBasePolylineEdit {
     _begin = SArrowStyleType.None;
     get begin(): SArrowStyleType {
         return this._begin;
-    }
+    } // Get begin
     set begin(v: SArrowStyleType) {
         this._begin = v;
         this.update();
-    }
+    } // Set begin
 
     /** 结束点样式 */
     _end = SArrowStyleType.None;
     get end(): SArrowStyleType {
         return this._end;
-    }
+    } // Get end
     set end(v: SArrowStyleType) {
         this._end = v;
         this.update();
-    }
+    } // Set end
 
     /**
      * 构造函数
@@ -79,7 +79,7 @@ export class SBaseArrow extends SBasePolylineEdit {
      * 鼠标按下事件
      *
      * @param event   保存事件参数
-     * @return  事件是否处理
+     * @return 事件是否处理
      */
     onMouseDown(event: SMouseEvent): boolean {
         super.onMouseDown(event)
@@ -127,8 +127,9 @@ export class SBaseArrow extends SBasePolylineEdit {
      * @return 对象储存的相关数据
      */
     toData(): any {
+        if (!this.data) return;
         this.data.style.begin = this.begin;
         this.data.style.end = this.end;
         return super.toData();
     }
-}
+}

+ 158 - 0
persagy-web-big-edit/src/items/SBaseArrowPolyEdit.ts

@@ -0,0 +1,158 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
+import { SColor, SLine, SPainter, SPoint } from '@persagy-web/draw/lib';
+import { SBaseLineEdit } from "@persagy-web/edit";
+import { SItemStatus } from '@persagy-web/big/lib';
+import { Marker } from '..';
+import { SGraphItem } from '@persagy-web/graph/lib';
+
+/**
+ * 箭头编辑(多边形)
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class SBaseArrowPolyEdit extends SBaseLineEdit {
+	/** 多边形数组 */
+	pointList: SPoint[] = [];
+	/** 绘制时需要旋转的角度 */
+	private _ang: number = 0;
+	/** 箭头中间粗细 */
+	arrowWidth: number = 8;
+
+	/** 是否为单向箭头 是-只绘制末端箭头 */
+	_isSingle: boolean = true;
+	get isSingle(): boolean {
+		return this._isSingle;
+	} // Get isSingle
+	set isSingle(v: boolean) {
+		this._isSingle = v;
+		this.update();
+	} // Set isSingle
+
+	/**
+	 * 构造函数
+	 *
+	 * @param parent    父级
+	 * @param data      坐标集合|第一个点坐标
+	 */
+	constructor(parent: SGraphItem | null, data: Marker): void {
+		super(parent, data);
+		this.pointChange();
+	}
+
+	/**
+	 * 根据两个顶点生成多边形数组
+	 */
+	pointChange(): void {
+		if (this.line.length > 1) {
+			const line = new SLine(this.line[0], this.line[1]);
+			const dis = SMathUtil.pointDistance(
+				this.line[0].x,
+				this.line[0].y,
+				this.line[1].x,
+				this.line[1].y
+			);
+			if (line.dx != 0) {
+				const tempFo = Math.atan(line.dy / line.dx);
+				this._ang = line.dx > 0 ? tempFo : tempFo + Math.PI;
+			} else {
+				this._ang = line.dy > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
+			}
+
+			if (this.isSingle) {
+				this.pointList = [
+					new SPoint(0, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth),
+					new SPoint(dis, 0),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(0, -this.arrowWidth / 2)
+				];
+			} else {
+				this.pointList = [
+					new SPoint(0, 0),
+					new SPoint(this.arrowWidth, this.arrowWidth),
+					new SPoint(this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
+					new SPoint(dis - this.arrowWidth, this.arrowWidth),
+					new SPoint(dis, 0),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth),
+					new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(this.arrowWidth, -this.arrowWidth / 2),
+					new SPoint(this.arrowWidth, -this.arrowWidth)
+				];
+			}
+		}
+	}
+
+	/**
+	 * 绘制
+	 *
+	 * @param painter   绘制对象
+	 */
+	onDraw(painter: SPainter): void {
+		if (this.line.length) {
+			painter.save();
+
+			const lw = painter.toPx(this.lineWidth);
+			painter.pen.lineWidth = lw;
+			this.sceneDis = painter.toPx(this.dis);
+
+			painter.translate(this.line[0].x, this.line[0].y);
+			painter.rotate((this._ang * 180) / Math.PI);
+			painter.pen.color = this.strokeColor;
+			painter.brush.color = this.fillColor;
+
+			if (this.selected && this.status == SItemStatus.Normal) {
+				painter.pen.lineWidth = 2 * lw;
+				painter.shadow.shadowBlur = 10;
+				painter.shadow.shadowColor = new SColor(`#00000033`);
+				painter.shadow.shadowOffsetX = 5;
+				painter.shadow.shadowOffsetY = 5;
+			}
+
+			painter.drawPolygon(this.pointList);
+			painter.restore();
+
+			if (
+				this.status == SItemStatus.Edit ||
+				this.status == SItemStatus.Create
+			) {
+				this.line.forEach((p, i) => {
+					painter.brush.color = this.fillColor;
+					if (i == this.curIndex) {
+						painter.brush.color = this.activeFillColor;
+					}
+
+					painter.drawCircle(p.x, p.y, painter.toPx(5));
+				});
+			}
+		}
+	}
+}

+ 210 - 8
persagy-web-big-edit/src/items/SBaseEquipment.ts

@@ -24,16 +24,50 @@
  * *********************************************************************************************************************
  */
 
-import { SGraphItem } from "@persagy-web/graph/lib";
-import { Marker } from "./../types/Marker";
-import { SBaseImageEdit } from '@persagy-web/edit/lib';
-
+import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib";
+import { Legend } from "./../types/Legend";
+import { SBaseIconTextEdit, SBaseTextEdit } from "@persagy-web/edit";
+import { SColor } from '@persagy-web/draw/lib';
+import { svgTobase64, uuid } from "./../until"
 /**
  * 编辑基础设备类
  *
  * @author 韩耀龙 <han_yao_long@163.com>
  */
-export class SBaseEquipment extends SBaseImageEdit {
+export class SBaseEquipment extends SBaseIconTextEdit {
+    /** 图例节点 id */
+    nodeId: string | null = null;
+    /** 设备图例 */
+    _legendData: Legend | null = null;
+    set legendData(val) {
+        this._legendData = val;
+        this.initData()
+    } // set legendData()
+    get legendData(): Legend | null {
+        return this._legendData
+    } // get legendData()
+
+    /** 信息点存储 */
+    _infoPointList: any[] = []
+    set infoPointList(val) {
+        this._infoPointList = val;
+    } // set infoPointList()
+    get infoPointList(): any[] {
+        return this._infoPointList
+    } // get infoPointList()
+
+    /** 图得url */
+    _url: string = '';
+    set url(val) {
+        this._url = val;
+        this.initUrl()
+    } // set infoPointList()
+    get url(): string {
+        return this._url
+    } // get infoPointList()
+
+    //  设备附加数据
+    anotherMsg: string = ''
 
     /**
      * 构造函数
@@ -41,8 +75,131 @@ export class SBaseEquipment extends SBaseImageEdit {
      * @param parent    指向父对象
      * @param data      数据
      */
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent, data);
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.legendData = data;
+    } // Constructor
+
+    /**
+     * 设置 legendData 时对 item 做设置
+     */
+    initData() {
+        if (!this.legendData) return;
+
+        this.nodeId = this.legendData?.nodeId
+        if (this.legendData.size) {
+            this.sWidth = this.legendData.size.width;
+            this.sHeight = this.legendData.size.height;
+        }
+
+        this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
+        if (this.legendData.anchorList && this.legendData.anchorList.length) {
+            this.anchorList = this.legendData.anchorList.map(t => {
+                let item = new SAnchorItem(this);
+                if (t.anchorId) {
+                    item.id = t.anchorId;
+                }
+                item.moveTo(t.pos.x, t.pos.y);
+                return item;
+            });
+        } else {
+            const anchorPoint = [
+                { x: this.img.x, y: this.img.y, anchorId: uuid() },
+            ];
+            this.anchorList = anchorPoint.map(t => {
+                let item = new SAnchorItem(this);
+                if (t.anchorId) {
+                    item.id = t.anchorId;
+                }
+                item.moveTo(t.x, t.y);
+                return item;
+            });
+        }
+
+        // 存储信息点
+        if (this.legendData.properties && this.legendData.properties.infoPointList) {
+            const infoPointList = this.legendData.properties.infoPointList;
+            if (infoPointList.length) {
+                this.infoPointList = infoPointList;
+                this.infoPointList.forEach((obj, i) => {
+                    this.setTextItem(obj, i)
+                })
+            } else {
+                this.infoPointList = []
+            }
+        } else {
+            this.infoPointList = []
+        }
+
+        this.showAnchor = false;
+        this.url = this.legendData.style.default.base64Url ? this.legendData.style.default.base64Url : this.legendData.style.default.url
+        this.anotherMsg = this.legendData.properties.anotherMsg ? this.legendData.properties.anotherMsg : '';
+        this.x = this.legendData.pos.x;
+        this.y = this.legendData.pos.y;
+        this.moveable = true;
+        this.selectable = true;
+    }
+
+    initUrl() {
+        svgTobase64(this.url).then((res) => {
+            this.img.url = res ? res : '';
+        }).catch((res) => {
+            this.img.url = res;
+        })
+    }
+
+    /**
+     * 设置信息点
+     *
+     * @params	obj 设置的信息点
+     */
+    setMsgPoint(val: any) {
+        // 根据是否勾选来判断是够增加或删除
+        if (val.checked) {
+            this._infoPointList.push(val);
+            this.setTextItem(val, (this._infoPointList.length - 1))
+        } else {
+            let deleteItemIndex: number = -1;
+            this._infoPointList.forEach((item, index) => {
+                if (val.id == item.id) {
+                    deleteItemIndex = index;
+                }
+            });
+            this._infoPointList.splice(deleteItemIndex, 1);
+            this.setTextItem(val, deleteItemIndex)
+        }
+    }
+
+    /**
+     * 根据选中状态增加 textItem
+     *
+     * @params obj	textItem 文本信息
+     * @params index 文本索引
+     */
+    setTextItem(val: any, index: number): void {
+        if (val.checked) {
+            let item = new SBaseTextEdit(this, null);
+            item.propertyData = val;
+            item.text = val.name;
+            if (val.pos) {
+                item.moveTo(val.pos.x, val.pos.x)
+            } else {
+                item.moveTo(
+                    this.img.width * 0.5,
+                    -(this.font.size * 1.25 * 0.5) + (index) * 10
+                );
+            }
+
+            item.font.size = val.font ? val.font : 12;
+            item.isTransform = false;
+            item.showSelect = false;
+            item.color = val.color ? new SColor(val.color) : new SColor('#000000');
+            item.connect('textSelect', this, this.textSelectChange)
+            this.textItemList.push(item)
+        } else {
+            this.textItemList.splice(index, 1)
+            this.scene?.removeItem(this.textItemList[index]);
+        }
     }
 
     /**
@@ -51,6 +208,51 @@ export class SBaseEquipment extends SBaseImageEdit {
      * @return	对象储存的相关数据
      */
     toData(): any {
-        return super.toData()
+        if (this.legendData) {
+            const list = this.anchorList.map((item) => {
+                return {
+                    anchorId: item.id,
+                    pos: {
+                        x: item.x,
+                        y: item.y
+                    }
+                }
+            })
+            this.legendData.anchorList = list;
+            // 反馈大小
+            if (this.legendData.size) {
+                this.legendData.size.width = this.sWidth;
+                this.legendData.size.height = this.sHeight
+            } else {
+                this.legendData.size = {
+                    width: this.sWidth,
+                    height: this.sHeight
+                }
+            }
+
+            // 位置
+            this.legendData.pos = {
+                x: this.x,
+                y: this.y
+            };
+            // 存储信息点
+            const infoPoinList: any[] = []
+            this.textItemList.forEach(item => {
+                let obj = Object.assign(item.propertyData, {
+                    pos: { x: item.x, y: item.y },
+                    font: item.font.size,
+                    color: item.color.value
+                })
+                delete obj.currentEquipMsg
+                infoPoinList.push(obj)
+            });
+
+            this.legendData.properties.infoPointList = infoPoinList;
+            this.legendData.properties.anotherMsg = this.anotherMsg;
+            this.legendData.style.default.base64Url = "";
+            this.legendData.style.default.url = this.url;
+            return this.legendData
+        }
     }
+
 }

+ 2 - 2
persagy-web-big-edit/src/items/SBaseExpainEdit.ts

@@ -24,7 +24,7 @@
 * *********************************************************************************************************************
 */
 
-import {SBaseTextEdit} from '@persagy-web/edit/lib';
+import {SBaseTextEdit} from "@persagy-web/edit";
 import {SGraphItem} from "@persagy-web/graph/lib";
 import {Marker} from "./../types/Marker";
 import {SMouseEvent} from "@persagy-web/base/lib";
@@ -66,4 +66,4 @@ import {SMouseEvent} from "@persagy-web/base/lib";
      toData(): any {
          return super.toData()
      }
- }
+ }

+ 96 - 0
persagy-web-big-edit/src/items/SBaseObjectRelation.ts

@@ -0,0 +1,96 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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 { SColor, SPainter, SPoint } from '@persagy-web/draw/lib';
+import { SGraphItem } from '@persagy-web/graph/lib';
+import { SLineStyle } from '@persagy-web/edit/lib/enums/SLineStyle';
+
+/**
+ * 对象关系 虚线 item
+ *
+ * @author  韩耀龙 <han_yao_long@163.com>
+ */
+export class SBaseObjectRelation extends SGraphItem {
+  /** 线起始点 */
+  startPoint: SPoint | null = null;
+  /** 结束始点 */
+  endPoint: SPoint | null = null;
+
+  /** 线条颜色 */
+  private _strokeColor: SColor = SColor.Black;
+  get strokeColor(): SColor {
+    return this._strokeColor;
+  } // Get strokeColor
+  set strokeColor(v: SColor) {
+    this._strokeColor = v;
+    this.update();
+  }// Get strokeColor
+
+  /** 线条样式 */
+  private _lineStyle: SLineStyle = SLineStyle.Solid;
+  get lineStyle(): SLineStyle {
+    return this._lineStyle;
+  } // Get lineStyle
+  set lineStyle(v: SLineStyle) {
+    this._lineStyle = v;
+    this.update();
+  } // Set lineStyle
+
+  /** 线条宽度 */
+  private _lineWidth: number = 1;
+  get lineWidth(): number {
+    return this._lineWidth;
+  } //Get lineWidth
+  set lineWidth(v: number) {
+    this._lineWidth = v;
+    this.update();
+  } //Set lineWidth
+
+  /**
+    * 绘制
+    *
+    * @param painter   绘制对象
+    */
+  onDraw(painter: SPainter): void {
+    if (this.startPoint && this.endPoint) {
+      painter.pen.lineWidth = painter.toPx(this.lineWidth);
+      painter.pen.color = this.strokeColor;
+      if (this.lineStyle == SLineStyle.Dashed) {
+        painter.pen.lineDash = [
+          painter.toPx(this.lineWidth * 3),
+          painter.toPx(this.lineWidth * 7)
+        ];
+      } else if (this.lineStyle == SLineStyle.Dotted) {
+        painter.pen.lineDash = [
+          painter.toPx(2 * this.lineWidth),
+          painter.toPx(2 * this.lineWidth)
+        ];
+      }
+
+      painter.drawLine(this.startPoint, this.endPoint);
+    }
+  }
+}

+ 164 - 8
persagy-web-big-edit/src/items/SBasePipe.ts

@@ -24,10 +24,12 @@
  * *********************************************************************************************************************
  */
 
-import {SBasePolylineEdit} from '@persagy-web/edit/lib';
-import {SGraphItem} from "@persagy-web/graph/lib/";
-import {Marker} from "./../types/Marker";
-import {SMouseEvent} from "@persagy-web/base/lib";
+import { SBasePolylineEdit } from "@persagy-web/edit";
+import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib/";
+import { Relation } from "./../types/Relation";
+import { SMouseEvent, } from "@persagy-web/base/lib";
+import { SPoint, SColor } from "@persagy-web/draw";
+import { SLineStyle } from "@persagy-web/graph/";
 
 /**
  * 编辑基础管道
@@ -37,16 +39,131 @@ import {SMouseEvent} from "@persagy-web/base/lib";
 export class SBasePipe extends SBasePolylineEdit {
     ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     //属性
+    /** 关系型数据 */
+    _relationData: Relation | null = null;
+    set relationData(val) {
+        this._relationData = val;
+        this.initData()
+    } // set legendData()
+    get relationData(): Relation | null {
+        return this._relationData
+    } // get legendData()
+
+    /** 起始锚点  */
+    startAnchor: SAnchorItem | null = null;
+    /** 结束锚点  */
+    endAnchor: SAnchorItem | null = null;
+    /** 关联锚点1ID  */
+    _anchor1Id: string = "";
+    get anchor1Id(): string {
+        return this._anchor1Id;
+    }// get anchor1Id()
+    set anchor1Id(v: string) {
+        this._anchor1Id = v;
+        if (this.relationData) {
+            this.relationData.anchor1Id = this._anchor1Id;
+        }
+    }// set anchor1Id()
+
+    /** 关联锚点2ID  */
+    _anchor2Id: string = "";
+    get anchor2Id(): string {
+        return this._anchor2Id;
+    }// get anchor2Id()
+    set anchor2Id(v: string) {
+        this._anchor2Id = v;
+        if (this.relationData) {
+            this.relationData.anchor2Id = this._anchor2Id;
+        }
+    }// set anchor2Id()
+
+    /** 关联节点1ID */
+    _node1Id: string = "";
+    get node1Id(): string {
+        return this._node1Id;
+    }// get node1Id()
+    set node1Id(v: string) {
+        this._node1Id = v;
+        if (this.relationData) {
+            this.relationData.node1Id = this._node1Id;
+        }
+    }// set node1Id()
+
+    /** 关联节点2ID */
+    _node2Id: string = "";
+    get node2Id(): string {
+        return this._node2Id;
+    }// get node2Id()
+    set node2Id(v: string) {
+        this._node2Id = v;
+        if (this.relationData) {
+            this.relationData.node2Id = this._node2Id;
+        }
+    }// set node2Id()
+
     /**
      * 构造函数
      *
      * @param parent    指向父对象
      * @param data      数据
      */
-    constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent, data);
+    constructor(parent: SGraphItem | null, data: Relation) {
+        super(parent);
+        this.relationData = data;
+    }
+
+    /**
+     * 设置relationData 时 对 item 做设置
+     */
+    initData() {
+        const data = this.relationData;
+        if (!data) return;
+        // 名称
+        this.name = data.name;
+        // 线样式
+        this.lineStyle = SLineStyle[data.lineType] ? SLineStyle[data.lineType] : SLineStyle.Solid;
+        // 折线点
+        if (data.pointList) {
+            let setPointList: SPoint[];
+            setPointList = data.pointList.map(i => {
+                return new SPoint(i.x, i.y)
+            });
+            this.pointList = setPointList;
+        }
+
+        //锚点
+        if (data.node1Id) {
+            this._node1Id = data.node1Id
+        }
+
+        if (data.node2Id) {
+            this._node2Id = data.node2Id
+        }
+
+        if (data.anchor1Id) {
+            this._anchor1Id = data.anchor1Id
+        }
+
+        if (data.anchor2Id) {
+            this._anchor2Id = data.anchor2Id
+        }
+
+        // 样式
+        if (data.style && data.style.default) {
+            // 颜色
+            if (data.style.default.strokeColor) {
+                this.strokeColor = new SColor(data.style.default.strokeColor)
+            }
+
+            // 线宽
+            if (data.style.default.lineWidth) {
+                this.lineWidth = data.style.default.lineWidth
+            }
+        };
+
     }
 
+
     /**
      * 鼠标按下事件
      *
@@ -59,11 +176,50 @@ export class SBasePipe extends SBasePolylineEdit {
     }
 
     /**
+     * 接收事件作出修改
+     */
+    changePos() {
+        if (this.startAnchor) {
+            // 判断删除equip后,不移动
+            if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+                let p = this.startAnchor.mapToScene(0, 0);
+                this.pointList[0] = new SPoint(p.x - this.x, p.y - this.y)
+            }
+        }
+
+        if (this.endAnchor) {
+            // 删除equip后
+            if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+                let p = this.endAnchor.mapToScene(0, 0);
+                this.pointList[
+                    this.pointList.length - 1
+                ] = new SPoint(p.x - this.x, p.y - this.y)
+            }
+        }
+    }
+
+    /**
      * 返回对象储存的相关数据
      *
      * @return 相关数据
      */
     toData(): any {
-        return super.toData()
+        this.moveToOrigin();
+        const data = this.relationData;
+        if (!data) return;
+
+        if (this.pointList.length) {
+            const Line = this.pointList.map(pos => {
+                return {
+                    x: pos.x,
+                    y: pos.y
+                }
+            });
+            data.pointList = Line;
+        }
+
+        data.style.default.strokeColor = this.strokeColor.value;
+        data.style.default.lineWidth = this.lineWidth;
+        return data
     }
-}
+}

+ 15 - 15
persagy-web-big-edit/src/items/SBasePipeUninTool.ts

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 
-import {SBaseImageEdit} from '@persagy-web/edit/lib';
+import {SBaseImageEdit} from "@persagy-web/edit";
 import {SGraphItem} from "@persagy-web/graph/lib";
 import {Marker} from "./../types/Marker";
 import {SMouseEvent} from "@persagy-web/base/lib";
@@ -47,21 +47,21 @@ export class SBasePipeUninTool extends SBaseImageEdit {
         super(parent, data);
         if (data && data.style) {
             switch (data.style.uninToolType) {
-                // case 2:
-                //     this.url = require('./../../../../assets/images/leftImgs/wantou.png');
-                //     break;
-                // case 3:
-                //     this.url = require('./../../../../assets/images/leftImgs/santong.png');
-                //     break;
-                // case 4:
-                //     this.url = require('./../../../../assets/images/leftImgs/sitong.png');
-                //     break;
-                // default:
-                //     this.url = require('./../../../../assets/images/leftImgs/wantou.png');
-                //     break;
+                case 2:
+                    this.url = require('./../../../../assets/images/leftImgs/wantou.png');
+                    break;
+                case 3:
+                    this.url = require('./../../../../assets/images/leftImgs/santong.png');
+                    break;
+                case 4:
+                    this.url = require('./../../../../assets/images/leftImgs/sitong.png');
+                    break;
+                default:
+                    this.url = require('./../../../../assets/images/leftImgs/wantou.png');
+                    break;
             }
         }
-    }
+    } // Constructor
 
     /**
      * 鼠标按下事件
@@ -82,4 +82,4 @@ export class SBasePipeUninTool extends SBaseImageEdit {
     toData(): any {
         return super.toData()
     }
-}
+}

+ 2 - 2
persagy-web-big-edit/src/types/Anchor.ts

@@ -33,7 +33,7 @@ import { Point } from "@persagy-web/edit/lib/type/Point";
  */
 export interface Anchor {
     /** 锚点 ID */
-    ID: string;
+    anchorId: string;
     /** 锚点的坐标 */
-    Pos: Point;
+    pos: Point;
 }

+ 3 - 3
persagy-web-big-edit/src/types/ElementData.ts

@@ -35,9 +35,9 @@ import { Relation } from "./Relation";
  */
 export interface ElementData {
     /** 在数据中台有数据的节点 */
-    Nodes: Legend[];
+    nodes: Legend[];
     /** 说明型节点 */
-s: Marker[];
+    markers: Marker[];
     /** 关系类节点 */
-    Relations: Relation[];
+    relations: Relation[];
 }

+ 20 - 20
persagy-web-big-edit/src/types/Legend.ts

@@ -36,33 +36,33 @@ import { SPoint } from '@persagy-web/draw/';
  */
 export interface Legend {
     /** ID */
-    ID: string;
+    id?: string;
+    /** 图 id */
+    graphId?: string;
+    /** 图例实例 id */
+    nodeId?: string;
     /** 名称 */
-    Name: string;
-    /** 返回工程信息化对象 ID 列表 */
-    AttachObjectIds?: any[];
-    /** 图标,区域类型 */
-    GraphElementType: string;
-    /** 对应的图例 ID */
-    GraphElementId: string;
-    /** 图例数量 */
-    Num?: number;
+    name: string;
+    /** 返回物理世界对象 ID 列表 */
+    attachObjectIds?: any[];
+    /** 对应的图元 ID */
+    graphElementId?: string;
     /** 位置 */
-    Pos: Point;
+    pos: Point;
     /** item 类型 */
-    Type: string
+    type: string
     /** 缩放 */
-    Scale?: Point;
+    scale?: Point;
     /** 旋转 */
-    Rolate?: Point;
+    rolate?: Point;
     /** 大小 */
-    Size?: Size;
+    size?: Size;
     /** 锚点 List */
-    AnchorList?: Anchor[];
+    anchorList?: Anchor[];
     /** 轮廓线 */
-    OutLine?: Point[] | SPoint[];
+    outLine?: Point[] | SPoint[];
     /** 由应用自己定义 */
-    Properties?: any;
-     /** zone 区分防火分区和石材铺装 */
-    SubType?:string
+    properties?: any;
+    /** 样式 */
+    style?: any
 }

+ 5 - 1
persagy-web-big-edit/src/types/Marker.ts

@@ -34,7 +34,11 @@ import { Size } from "@persagy-web/big/lib/types/Size";
  */
 export interface Marker {
     /** ID */
-    iD?: string;
+    id?: string;
+    /** 图 id */
+    graphId?: string;
+    /** 图例实例 id */
+    markerId?: string;
     /** 名称 */
     name: string;
     /** 图标 (Image),线类型 (Line) */

+ 18 - 12
persagy-web-big-edit/src/types/Relation.ts

@@ -33,26 +33,32 @@ import { Point } from "@persagy-web/edit/lib/type/Point";
  * @author 韩耀龙 <han_yao_long@163.com>
  */
 export interface Relation {
-    /** ID */
-    ID: string;
+    /** 图 id */
+    id?: string;
+    /** 图 id */
+    graphId?: string;
+    /** 图例实例 id */
+    relationId?: string;
     /** 名称 */
-    Name: string;
+    name: string;
     /** 对应的图例 ID */
-    GraphElementId: string;
+    GraphElementId?: string;
     /** 关联节点 1_id */
-    Node1ID?: string;
+    node1Id?: string;
     /** 关联节点 2_id */
-    Node2ID?: string;
+    node2Id?: string;
     /** 关联锚点 1_id */
-    Anchor1ID?: string;
+    anchor1Id?: string;
     /** 关联锚点 2_id */
-    Anchor2ID?: string;
+    anchor2Id?: string;
     /** 方向(0:无向,1:节点 1 到节点2,2:节点 2 到节点 1) */
-    Dir?: SRelationDir;
+    dir?: SRelationDir;
     /** 线类型(0:直线,1:水平/垂直线,2:曲线) */
-    LineType: string;
+    lineType: string;
     /** 线的顶点坐标 */
-    PointList: Point[];
+    pointList: Point[];
     /** 线的绘图样式 */
-    Properties?: any;
+    properties: any;
+    /** 线性样式 */
+    style: any
 }

+ 53 - 4
persagy-web-big-edit/src/until.ts

@@ -1,9 +1,58 @@
-//  生成uuid
+
+import axios from "axios";
+import crypto from "crypto-js";
+
+/*
+ *  生成 uuid 字符串
+ */
 export function uuid() {
-  // do nothing
+  var s: any[] = [];
+  var hexDigits = "0123456789abcdef";
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = "4";
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+  s[8] = s[13] = s[18] = s[23] = "-";
+
+  var uuid = s.join("");
+  return `${uuid}-${new Date().getTime()}`;
 }
 
+/**
+ * 生成 rgba 数字
+ * @param rgba rgba 字符串
+ */
 export function rgbaNum(rgba: string) {
-    let val = rgba.match(/(\d(\.\d+)?)+/g);
-    return val;
+  let val = rgba.match(/(\d(\.\d+)?)+/g);
+  return val;
+}
+
+/**
+ * svg流转换为base64字符串
+ *
+ * @param url 获取base的路径
+ */
+export function svgTobase64(url: string) {
+  let baseUrl: string = ''
+  return new Promise((relve, res) => {
+    if (url.includes(".svg")) {
+      axios.get(url).then((res) => {
+        if (res.data) {
+          const index = res.data.indexOf('"UTF-8"?>');
+          const str = res.data.substr(index + 9);
+          const a = crypto.enc.Utf8.parse(str);
+          baseUrl =
+            "data:image/svg+xml;base64," + crypto.enc.Base64.stringify(a);
+        }
+        relve(baseUrl)
+      }).catch((err) => {
+        res(err)
+      });
+    } else {
+      baseUrl = url;
+      relve(baseUrl)
+    }
+  })
+
 }