Преглед изворни кода

1. 完成生成通用元素, 保存通用元素, 刷新后绘制通用元素 通用元素的zOrder逻辑开发
2. zOrder设置 通用元素9800, 设备9700, 管线9600, 空间9500, 背景图片3000

yunxing пре 4 година
родитељ
комит
679630ef40
4 измењених фајлова са 72 додато и 43 уклоњено
  1. 22 13
      src/lib/SPlanParser.ts
  2. 48 28
      src/lib/SPlanScene.ts
  3. 1 1
      src/lib/item/SPlanEquipment.ts
  4. 1 1
      src/lib/item/SPlanZone.ts

+ 22 - 13
src/lib/SPlanParser.ts

@@ -73,43 +73,52 @@ export class SPlanParser extends SParser {
 
     /**
      * 添加生成 mark 实例
-     *
+     * 添加时,将通用元素的 zOrde 设置成保存的 style.default.zOrder 或者默认值
+     * style.default.zOrder 在 SPlanScene.vue 中的 save 方法保存
      * @param data Marker   图例类型数据
      */
     addMarker(data: Marker) {
-        if (data.properties && data.properties.type) {
+        if (data.properties && data.properties?.type) {
+            let item: any = null;
+            let dict = {
+                BaseLine: "createBaseLineEdit",
+            };
+            // item = this.factory[dict[data.properties.type](data)]
             switch (data.properties.type) {
                 case "BaseLine":
-                    this.markers.push(this.factory.createBaseLineEdit(data));
+                    item = this.factory.createBaseLineEdit(data);
                     break;
                 case "BaseText":
-                    this.markers.push(this.factory.createBaseTextEdit(data));
+                    item = this.factory.createBaseTextEdit(data);
                     break;
                 case "BaseImage":
-                    this.markers.push(this.factory.createBaseImageEdit(data));
-                    // this.markers.push(new SPlanBackgroundImage(null, data));
+                    item = this.factory.createBaseImageEdit(data);
                     break;
                 case "BgImage":
-                    // this.markers.push(this.factory.createBaseImageEdit(data));
                     this.markers.push(new SPlanBackgroundImage(null, data));
                     break;
                 case "BaseExplain":
-                    this.markers.push(this.factory.createBaseExpainEdit(data));
+                    item = this.factory.createBaseExpainEdit(data);
                     break;
                 case "BaseCircle":
-                    this.markers.push(this.factory.createBaseCircleEdit(data));
+                    item = this.factory.createBaseCircleEdit(data);
                     break;
                 case "BaseArrow":
-                    this.markers.push(this.factory.createBaseArrow(data));
+                    item = this.factory.createBaseArrow(data);
                     break;
                 case "BaseRect":
-                    this.markers.push(this.factory.createBaseRectEdit(data));
+                    item = this.factory.createBaseRectEdit(data);
                     break;
                 case "BasePolygon":
-                    this.markers.push(this.factory.createBasePolygonEdit(data));
+                    item = this.factory.createBasePolygonEdit(data);
                     break;
                 case "BaseArrowPolygon":
-                    this.markers.push(this.factory.createBasePolygonArrowEdit(data));
+                    item = this.factory.createBasePolygonArrowEdit(data);
+            }
+            // 添加的通用元素不是BgImage,是其他元素,设置 zOrder
+            if (item) {
+                item.zOrder = data?.style?.default?.zOrder || 9800;
+                this.markers.push(item);
             }
         }
     }

+ 48 - 28
src/lib/SPlanScene.ts

@@ -101,56 +101,75 @@ export class SPlanScene extends SBaseEditScene {
 
             return this.grabItem.onMouseDown(event);
         }
-
+        let item: any = null;
+        // 线条
         if (this.editCmd == "EditBaseLine") {
-            this.addPolyLineArrow(event);
+            item = this.addPolyLineArrow(event);
             this.clearCmdStatus();
         } else if (this.editCmd == "EditBasePolyLine") {
-            this.addPolyLine(event);
+            item = this.addPolyLine(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBasetext") {
-            this.addTextItem(event);
+        } else if (this.editCmd == "EditBasetext") { // 文字
+            item = this.addTextItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "BaseExplain") {
-            this.addExplainItem(event);
+        } else if (this.editCmd == "BaseExplain") { // 批注
+            item = this.addExplainItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseImage") {
-            this.addImageItem(event);
+        } else if (this.editCmd == "EditBaseImage") { // 图片
+            item = this.addImageItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBgImage") {
-            this.addBgImageItem(event);
+        } else if (this.editCmd == "EditBgImage") { // 背景图片
+            item = this.addBgImageItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBasePolygon") {
-            this.addPolygonItem(event);
+        } else if (this.editCmd == "EditBasePolygon") { // 多边形
+            item = this.addPolygonItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseRect") {
-            this.addRectItem(event);
+        } else if (this.editCmd == "EditBaseRect") { // 矩形
+            item = this.addRectItem(event);
             this.clearCmdStatus();
         } else if (this.editCmd == "EditBaseTriangle") {
-            this.addTriangleItem(event);
+            item = this.addTriangleItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseCircle") {
-            this.addCircleItem(event);
+        } else if (this.editCmd == "EditBaseCircle") { // 圆
+            item = this.addCircleItem(event);
             this.clearCmdStatus();
-        } else if (this.editCmd == "EditBaseArrows") {
-            this.addPolygonArrow(event);
+        } else if (this.editCmd == "EditBaseArrows") { // 箭头
+            item = this.addPolygonArrow(event);
             this.clearCmdStatus();
         } else if (this.editCmd == "wantou" || this.editCmd == "santong" || this.editCmd == "sitong") {
-            this.addPipeUninTool(event, this.editCmd);
+            item = this.addPipeUninTool(event, this.editCmd);
             this.clearCmdStatus();
         } else if (this.editCmd == "EditBasePipe") {
-            this.addBasePipe(event, this.legendObj);
+            item = this.addBasePipe(event, this.legendObj);
+            item.zOrder = 9600;
             this.clearCmdStatus();
         } else if (this.editCmd == "") {
             super.onMouseDown(event);
         }
+        // 创建通用元素时,层级设置为 9800 (设备 9700 ,设备关系 9600 ,空间 9500,背景图片3000 )
+        if (this.editCmd &&
+            [
+                "EditBaseLine",
+                "EditBasetext",
+                "EditBaseImage",
+                "BaseExplain",
+                "EditBaseRect",
+                "EditBaseArrows",
+                "EditBasePolyLine",
+                "EditBasePolygon",
+                "EditBaseCircle",
+                "EditBaseTriangle",
+            ].includes(this.editCmd)
+        ) {
+            item.zOrder = 9800;
+        }
     }
 
     /**
      * 重载添加图片-可以根据底图缩放的图片
      * @param event
      */
-    addImageItem(event: SMouseEvent): void {
+    addImageItem(event: SMouseEvent): SBaseImageEdit {
         const data = {
             name: "基础图片",
             num: 1,
@@ -172,8 +191,10 @@ export class SPlanScene extends SBaseEditScene {
         item.selectable = true;
         item.moveable = true;
         this.addItem(item);
+        this.grabItem = item;
         item.connect("onContextMenu", this, this.getItem);
         this.finishCreated(item);
+        return item;
     }
 
     /**
@@ -378,8 +399,10 @@ export class SPlanScene extends SBaseEditScene {
             if (item instanceof SGraphEdit && !(item instanceof SGraphSelectContainer)) {
                 // 添加节点数据
                 if (item.data && Marktype.includes(item.data.properties.type)) {
-                    console.log(item.toData());
-                    markers.push(item.toData());
+                    const itemData = item.toData()
+                    // 保存通用元素的 层级
+                    itemData.style.default.zOrder = item.zOrder
+                    markers.push(itemData);
                 }
 
                 if (item.legendData && ObjExtInfoType.includes(item.legendData.properties.type)) {
@@ -405,8 +428,6 @@ export class SPlanScene extends SBaseEditScene {
      * @return	boolean
      */
     onKeyDown(event: KeyboardEvent): any {
-        console.log("onKeyDown:", event);
-        console.log(this);
         // if (!this.isEditStatus) {
         //     return true;
         // }
@@ -511,7 +532,6 @@ export class SPlanScene extends SBaseEditScene {
      * 粘贴
      */
     paste(): void {
-        debugger;
         const copyList = JSON.parse(JSON.stringify(this.copyString));
         const parserData = new SPlanParser();
         const graphItemList: SGraphEdit[] = [];

+ 1 - 1
src/lib/item/SPlanEquipment.ts

@@ -139,7 +139,7 @@ export class SPlanEquipment extends SBaseIconTextEdit {
      */
     constructor(parent: SGraphItem | null, data: Example) {
         super(parent);
-        this.zOrder = 9800;
+        this.zOrder = 9700;
         this.isTransform = false;
         this.sWidth = 32;
         this.sHeight = 32;

+ 1 - 1
src/lib/item/SPlanZone.ts

@@ -230,7 +230,7 @@ export class SPlanZone extends SGraphEdit {
      */
     constructor(parent: SGraphItem | null, data: Example) {
         super(parent);
-        this.zOrder = 9700;
+        this.zOrder = 9500;
         this.selectable = true;
         this.showSelect = false;
         this.legendData = data;