设备文字item添加 场景更新

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/cad-engine",
-    "version": "2.0.569",
+    "version": "2.0.570",
     "description": "上格云 CAD图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -31,9 +31,7 @@
         "typescript": "^3.9.7"
     },
     "dependencies": {
-        "@saga-web/base": "2.1.27",
-        "@saga-web/draw": "2.1.109",
-        "@saga-web/graph": "2.1.128",
+        "@saga-web/graph": "2.1.129",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "poly-decomp": "^0.3.0",

src/FloorScene.ts

@@ -18,7 +18,7 @@
  * ********************************************************************************************************************
  */
 
-import { SGraphScene } from "@saga-web/graph/lib";
+import { SGraphScene, SImageItem } from "@saga-web/graph/lib";
 // @ts-ignore
 import pako from "pako";
 import { FloorData } from "./types/FloorData";
@@ -35,7 +35,6 @@ import { ColumnItem } from "./items/ColumnItem";
 import { VirtualWallItem } from "./items/VirtualWallItem";
 import { DoorItem } from "./items/DoorItem";
 import { WindowItem } from "./items/WindowItem";
-import { SImageItem } from "./items/SImageItem";
 import { SImageShowType } from "./enums/SImageShowType";
 
 /**

src/LocationPointScene.ts

@@ -21,6 +21,7 @@
 import { FloorScene } from "./FloorScene";
 import { MarkerItem } from "./items/MarkItem";
 import { Marker } from "./types/Marker";
+import { IconTextItem } from "./items/IconTextItem";
 
 /**
  * 位置标签绘制标志
@@ -46,9 +47,26 @@ export class LocationPointScene extends FloorScene {
         });
     } // Set isMarkSelectable
 
+    /** 标志list    */
+    iconList: IconTextItem[] = [];
+    /** 标志是否可选  */
+    _isIconSelectable: boolean = true;
+    get isIconSelectable(): boolean {
+        return this._isIconSelectable;
+    } // Get isMarkSelectable
+    set isIconSelectable(v: boolean) {
+        if (this._isIconSelectable === v) {
+            return;
+        }
+        this._isIconSelectable = v;
+        this.iconList.map((t: IconTextItem) => {
+            t.selectable = this._isIconSelectable;
+            return t;
+        });
+    } // Set isMarkSelectable
+
     /**
      * 构造函数
-     *
      */
     constructor() {
         super();
@@ -79,6 +97,31 @@ export class LocationPointScene extends FloorScene {
     } // Function addMarker()
 
     /**
+     * 添加设备带文字item
+     *
+     * @param iconTextList  item列表
+     */
+    addIconTextList(iconTextList: IconTextItem[]): void {
+        iconTextList.map(t => {
+            this.addIconText(t);
+        });
+    }
+
+    /**
+     * 添加单个设备
+     *
+     * @param iconText  item 数据
+     */
+    addIconText(iconText: any): void {
+        const icon = new IconTextItem(null, iconText);
+        if (iconText.X && iconText.Y) {
+            icon.moveTo(iconText.X, iconText.Y);
+        }
+        this.iconList.push(icon);
+        this.addItem(icon);
+    }
+
+    /**
      * 标志的点击事件
      *
      * @param   _this    接收者
@@ -96,7 +139,7 @@ export class LocationPointScene extends FloorScene {
      * @param   _this    接收者
      * @param   fn       处理函数
      */
-    spaceClick(_this: any, fn: Function) {
+    spaceClick(_this: any, fn: Function): void {
         this.spaceList.map(m => {
             m.connect("click", _this, fn);
         });
@@ -104,4 +147,32 @@ export class LocationPointScene extends FloorScene {
             m.connect("click", _this, fn);
         });
     } // Function spaceClick()
+
+    /**
+     * 清空所有设备 icon
+     */
+    clearIcon(): void {
+        this.iconList.forEach(t => {
+            this.removeItem(t);
+        });
+        this.iconList = [];
+    }
+
+    /**
+     * 设备 icon 绑定点击事件
+     */
+    iconClick(_this: any, fn: Function): void {
+        this.iconList.forEach(t => {
+            t.connect("onMouseDown", _this, fn);
+        });
+    }
+
+    /**
+     * 设备 icon 绑定移动事件
+     */
+    iconMove(_this: any, fn: Function): void {
+        this.iconList.forEach(t => {
+            t.connect("onMove", _this, fn);
+        });
+    }
 } // Class LocationPointScene

src/enums/STextOrigin.ts

@@ -4,8 +4,8 @@
  * @author  张宇
  */
 export enum STextOrigin {
-  /** 左上点    */
-  LeftTop,
-  /** 中心点    */
-  Centrum,
+    /** 左上点    */
+    LeftTop,
+    /** 中心点    */
+    Center
 } // Enum STextOrigin

src/index.ts

@@ -19,9 +19,9 @@ import { RelationScene } from "./RelationScene";
 import { ZoneScene } from "./ZoneScene";
 import { Opt } from "./types/Opt";
 import { SImageShowType } from "./enums/SImageShowType";
-import { STextOrigin } from "./enums/STextOrigin";
 import { EditLineItem } from "./items/EditLineItem";
 import { SItemStatus } from "./enums/SItemStatus";
+import { IconTextItem } from "./items/IconTextItem";
 
 export {
     FloorScene,
@@ -48,7 +48,7 @@ export {
     RectSelectItem,
     LikeSpaceItem,
     SImageShowType,
-    STextOrigin,
     EditLineItem,
-    SItemStatus
+    SItemStatus,
+    IconTextItem
 };

src/items/MarkItem.ts

@@ -1,23 +1,3 @@
-/*
- * ********************************************************************************************************************
- *
- *                      :*$@@%$*:                         ;:                ;;    ;;
- *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
- *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
- *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
- *                   =@*                                  %!              @ $= % %@=   =%@!      %=
- *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
- *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
- *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
- *          $@*   ;@@@%=!:                *@*
- *          =@$    ;;;!=%@@@@=!           =@!
- *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
- *            ;%@@$=$@@%*       *@@@$=%@@%;
- *               ::;::             ::;::                                              All rights reserved.
- *
- * ********************************************************************************************************************
- */
-
 import { Marker } from "../types/Marker";
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPainter, SRect } from "@saga-web/draw/lib";

src/items/SImageItem.ts

@@ -1,241 +0,0 @@
-import { SPainter, SRect, SSize, SColor, SPoint } from "@saga-web/draw/lib";
-import { SImageShowType, STextOrigin } from "..";
-import { SObjectItem } from "./SObjectItem";
-import { SGraphItem } from "@saga-web/graph/lib";
-import { SMouseEvent } from "@saga-web/base/lib";
-
-/**
- * 图片item
- *
- * @author  张宇(taohuzy@163.com)
- */
-export class SImageItem extends SObjectItem {
-    /** 图片dom */
-    img: CanvasImageSource | undefined;
-
-    /** 展示模式 */
-    private _showType: SImageShowType = SImageShowType.Full;
-    get showType(): SImageShowType {
-        return this._showType;
-    }
-    set showType(v: SImageShowType) {
-        this._showType = v;
-        this.computeImgSize();
-        this.update();
-    }
-
-    /** 边框色 */
-    private _strokeColor: SColor = SColor.Transparent;
-    get strokeColor(): SColor {
-        return this._strokeColor;
-    }
-    set strokeColor(v: SColor) {
-        this._strokeColor = v;
-        this.update();
-    }
-
-    /** 边框宽度 */
-    private _lineWidth: number = 1;
-    get lineWidth(): number {
-        return this._lineWidth;
-    }
-    set lineWidth(v: number) {
-        this._lineWidth = v;
-        this.update();
-    }
-
-    /** 原点位置    */
-    private _originPosition: STextOrigin = STextOrigin.LeftTop;
-    get originPosition(): STextOrigin {
-        return this._originPosition;
-    }
-    set originPosition(v: STextOrigin) {
-        this._originPosition = v;
-        this.update();
-    }
-
-    /** 图片加载是否完成 */
-    isLoadOver: boolean = false;
-
-    /** 图片的宽度 */
-    private imgWidth: number = this.width;
-
-    /** 图片的高度 */
-    private imgHeight: number = this.height;
-
-    /** 图片地址 */
-    private _url: string = "";
-    get url(): string {
-        return this._url;
-    }
-    set url(v: string) {
-        this._url = v;
-        this.img = new Image();
-        this.img.onload = (e): void => {
-            // @ts-ignore
-            const imgSrc = e.path[0].src;
-            if (this.isUrlIdentical(imgSrc)) {
-                this.isLoadOver = true;
-                this.computeImgSize();
-                this.$emit("imgLoadOver");
-                this.update();
-            }
-        };
-        this.img.onerror = (e): void => {
-            // @ts-ignore
-            const imgSrc = e.path[0].src;
-            if (this.isUrlIdentical(imgSrc)) {
-                this.isLoadOver = false;
-                this.$emit("imgLoadOver");
-                this.update();
-                console.log("加载图片错误！", e);
-            }
-        };
-        this.img.src = v;
-    }
-
-    /**
-     * 构造函数
-     *
-     * @param   parent      指向父Item
-     * @param   url         图片地址
-     */
-    constructor(parent: SGraphItem | null, url?: string) {
-        super(parent);
-        if (url) this.url = url;
-    } // Constructor
-
-    /**
-     * 根据显示模式计算图片的宽高
-     */
-    computeImgSize(): void {
-        if (this.isLoadOver) {
-            // 要绘制图片的宽度
-            let width = 0;
-            // 要绘制图片的宽度
-            let height = 0;
-            // 图片item的宽高比
-            let itemAspectRatio: number = this.width / this.height;
-            // 原始图片的宽高比
-            let imgAspectRatio: number =
-                // @ts-ignore
-                (this.img.width as number) / (this.img.height as number);
-            // 原始图片的高宽比
-            let imgHwRatio: number =
-                // @ts-ignore
-                (this.img.height as number) / (this.img.width as number);
-            if (this.showType == SImageShowType.Full) {
-                width = this.width;
-                height = this.height;
-            } else if (this.showType == SImageShowType.Equivalency) {
-                if (itemAspectRatio > imgAspectRatio) {
-                    height = this.height;
-                    width = imgAspectRatio * height;
-                } else if (itemAspectRatio < imgAspectRatio) {
-                    width = this.width;
-                    height = width * imgHwRatio;
-                } else {
-                    width = this.width;
-                    height = this.height;
-                }
-            } else if (this.showType == SImageShowType.AutoFit) {
-                // @ts-ignore
-                this.width = this.img.width as number;
-                // @ts-ignore
-                this.height = this.img.height as number;
-                width = this.width;
-                height = this.height;
-            }
-            this.imgWidth = width;
-            this.imgHeight = height;
-            // 设置原点位置(默认左上角)
-            if (this.originPosition == STextOrigin.Centrum) {
-                this.origin = new SPoint(this.width / 2, this.height / 2);
-            }
-        }
-    } // Function computeImgSize()
-
-    /**
-     * 鼠标事件
-     * */
-    onMouseDown(event: SMouseEvent): boolean {
-        this.$emit("click", event);
-        return true;
-    } // onMouseDown()
-
-    /**
-     * 判断当前地址和回调地址是否相同
-     * @param   imgUrl      图片回调地址
-     *
-     */
-    private isUrlIdentical(imgUrl: string): boolean {
-        if (this.url.indexOf("://") == -1) {
-            // eslint-disable-next-line max-len
-            const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
-            if (reg.test(this.url)) {
-                // url是base64地址
-                return this.url == imgUrl;
-            } else {
-                // url是相对地址
-                return this.url == this.GetUrlRelativePath(imgUrl);
-            }
-        } else {
-            // url是绝对地址
-            return this.url == imgUrl;
-        }
-    } // Function isUrlIdentical()
-
-    /**
-     * 截取绝对路径中的相对路径
-     * @param   url      绝对路径
-     *
-     */
-    private GetUrlRelativePath(url: string): string {
-        var arrUrl = url.split("//");
-        var start = arrUrl[1].indexOf("/");
-        var relUrl = arrUrl[1].substring(start);
-        return relUrl;
-    } // Function GetUrlRelativePath()
-
-    /**
-     * Item对象边界区域
-     *
-     * @return	SRect
-     */
-    boundingRect(): SRect {
-        return new SRect(
-            -this.origin.x,
-            -this.origin.y,
-            this.width,
-            this.height
-        );
-    } // Function boundingRect()
-
-    /**
-     * 宽高发发生变化
-     *
-     * @param   oldSize 改之前的大小
-     * @param   newSize 改之后大小
-     * */
-    protected onResize(oldSize: SSize, newSize: SSize): void {
-        this.computeImgSize();
-        this.update();
-    } // Function onResize()
-
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter: SPainter): void {
-        painter.translate(-this.origin.x, -this.origin.y);
-        if (this.isLoadOver) {
-            // @ts-ignore
-            painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
-        }
-        // painter.pen.lineWidth = this.lineWidth;
-        // painter.pen.color = this.strokeColor;
-        // painter.brush.color = SColor.Transparent;
-        // painter.drawRect(0, 0, this.width, this.height);
-    } // Function onDraw()
-} // Class SImageItem