瀏覽代碼

添加地图场景和item

haojianlong 5 年之前
父節點
當前提交
c4c4df82c8
共有 10 個文件被更改,包括 1662 次插入46 次删除
  1. 0 23
      jest.config.js
  2. 60 19
      package-lock.json
  3. 6 4
      package.json
  4. 200 0
      src/FloorScene.ts
  5. 204 0
      src/items/ColumnItem.ts
  6. 265 0
      src/items/DoorItem.ts
  7. 258 0
      src/items/SpaceItem.ts
  8. 202 0
      src/items/VirtualWall.ts
  9. 202 0
      src/items/WallItem.ts
  10. 265 0
      src/items/WindowItem.ts

+ 0 - 23
jest.config.js

@@ -1,26 +1,3 @@
-/*
- * ********************************************************************************************************************
- *
- *               iFHS7.
- *              ;BBMBMBMc                  rZMBMBR              BMB
- *              MBEr:;PBM,               7MBMMEOBB:             BBB                       RBW
- *     XK:      BO     SB.     :SZ       MBM.       c;;     ir  BBM :FFr       :SSF:    ;xBMB:r   iuGXv.    i:. iF2;
- *     DBBM0r.  :D     S7   ;XMBMB       GMBMu.     MBM:   BMB  MBMBBBMBMS   WMBMBMBBK  MBMBMBM  BMBRBMBW  .MBMBMBMBB
- *      :JMRMMD  ..    ,  1MMRM1;         ;MBMBBR:   MBM  ;MB:  BMB:   MBM. RMBr   sBMH   BM0         UMB,  BMB.  KMBv
- *     ;.   XOW  B1; :uM: 1RE,   i           .2BMBs  rMB. MBO   MBO    JMB; MBB     MBM   BBS    7MBMBOBM:  MBW   :BMc
- *     OBRJ.SEE  MRDOWOR, 3DE:7OBM       .     ;BMB   RMR7BM    BMB    MBB. BMB    ,BMR  .BBZ   MMB   rMB,  BMM   rMB7
- *     :FBRO0D0  RKXSXPR. JOKOOMPi       BMBSSWBMB;    BMBB:    MBMB0ZMBMS  .BMBOXRBMB    MBMDE RBM2;SMBM;  MBB   xBM2
- *         iZGE  O0SHSPO. uGZ7.          sBMBMBDL      :BMO     OZu:BMBK,     rRBMB0;     ,EBMB  xBMBr:ER.  RDU   :OO;
- *     ,BZ, 1D0  RPSFHXR. xWZ .SMr                  . .BBB
- *      :0BMRDG  RESSSKR. 2WOMBW;                   BMBMR
- *         i0BM: SWKHKGO  MBDv
- *           .UB  OOGDM. MK,                                          Copyright (c) 2015-2019.  斯伯坦机器人
- *              ,  XMW  ..
- *                  r                                                                     All rights reserved.
- *
- * ********************************************************************************************************************
- */
-
 module.exports = {
     preset: "ts-jest",
     moduleFileExtensions: ["js", "ts"],

+ 60 - 19
package-lock.json

@@ -25,32 +25,25 @@
             }
         },
         "@sybotan-web/base": {
-            "version": "2.0.44",
-            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/base/-/base-2.0.44.tgz",
-            "integrity": "sha512-Tx3owUp5vCv5nCkwoTxGv0txAo3a+oxtLNXTaj94q63Tcij5S3HKjHiwuw0+h492Vyy/kzxfkhOyAoARtvxlRw=="
+            "version": "2.0.53",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/base/-/base-2.0.53.tgz",
+            "integrity": "sha512-lRVvNIB6yv6cXONLDL2hR5TrephKQRylgXKH0SM1fokCPZiaLvsppY3V+8fkD9TGIJaP0Vg/U6ejBWa7wnDe5g=="
         },
         "@sybotan-web/draw": {
-            "version": "2.0.49",
-            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/draw/-/draw-2.0.49.tgz",
-            "integrity": "sha512-O8/Scqr8H6K888u5hZLeObxb0lBBD+PZNX8f+XLQDAPixl3dpZ3o3Rto6PRaH8/7bbnuaJMkVRVAz8kAnozBcg==",
+            "version": "2.0.109",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/draw/-/draw-2.0.109.tgz",
+            "integrity": "sha512-h7y81yrt4ZcOYqNED9wqvAdSD92SqwQDhA2vEsZ308A9W0y7gTCbrx5ZQp3SaHlwr0wP+LfHJebx4HY3bHvKuA==",
             "requires": {
-                "@sybotan-web/base": "2.0.42"
-            },
-            "dependencies": {
-                "@sybotan-web/base": {
-                    "version": "2.0.42",
-                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/base/-/base-2.0.42.tgz",
-                    "integrity": "sha512-Pnpc3n97YIrwyVqAIWUiT9OOcxKgC8ikBfqhVyG+x5FZkBP9/ZTehF0E5i0ipUARH1lqd3rNWu3Cm5T4H7+asw=="
-                }
+                "@sybotan-web/base": "^2.0.53"
             }
         },
         "@sybotan-web/graphy": {
-            "version": "2.0.59",
-            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/graphy/-/graphy-2.0.59.tgz",
-            "integrity": "sha512-Iuoyw8xftQoOhxbjba7CGB5BH7MHUgVFTNqpUaeyQ5zUxNfBVD0gqMv8+U6XCT6OUKkgzo0JsEfZSd5hpLWL4A==",
+            "version": "2.0.86",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/@sybotan-web/graphy/-/graphy-2.0.86.tgz",
+            "integrity": "sha512-nAe6CyPW/X/VffZ+ApL3nUJEX15/c0CGR3jg1jOQkF0P4f/LslQOsEscfBIpzNlf47DuyPV12U9G9YKWWMHIFA==",
             "requires": {
-                "@sybotan-web/base": "2.0.44",
-                "@sybotan-web/draw": "2.0.49"
+                "@sybotan-web/base": "^2.0.53",
+                "@sybotan-web/draw": "^2.0.109"
             }
         },
         "@types/eslint-visitor-keys": {
@@ -186,6 +179,16 @@
             "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
             "dev": true
         },
+        "axios": {
+            "version": "0.18.1",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/axios/-/axios-0.18.1.tgz",
+            "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+            "dev": true,
+            "requires": {
+                "follow-redirects": "1.5.10",
+                "is-buffer": "^2.0.2"
+            }
+        },
         "balanced-match": {
             "version": "1.0.0",
             "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -548,6 +551,32 @@
             "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
             "dev": true
         },
+        "follow-redirects": {
+            "version": "1.5.10",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/follow-redirects/-/follow-redirects-1.5.10.tgz",
+            "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+            "dev": true,
+            "requires": {
+                "debug": "=3.1.0"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.1.0",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/debug/-/debug-3.1.0.tgz",
+                    "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+                    "dev": true,
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+                    "dev": true
+                }
+            }
+        },
         "fs.realpath": {
             "version": "1.0.0",
             "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -669,6 +698,12 @@
                 "through": "^2.3.6"
             }
         },
+        "is-buffer": {
+            "version": "2.0.3",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/is-buffer/-/is-buffer-2.0.3.tgz",
+            "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
+            "dev": true
+        },
         "is-extglob": {
             "version": "2.1.1",
             "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -867,6 +902,12 @@
             "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
             "dev": true
         },
+        "pako": {
+            "version": "1.0.10",
+            "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/pako/-/pako-1.0.10.tgz",
+            "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+            "dev": true
+        },
         "parent-module": {
             "version": "1.0.1",
             "resolved": "http://dev.dp.sagacloud.cn:8082/repository/npm-saga/parent-module/-/parent-module-1.0.1.tgz",

+ 6 - 4
package.json

@@ -27,11 +27,13 @@
         "prettier": "^1.18.2",
         "@types/jest": "^24.0.15",
         "ts-jest": "^24.0.2",
-        "typescript": "^3.5.3"
+        "typescript": "^3.5.3",
+        "axios": "^0.18.0",
+        "pako": "^1.0.10"
     },
     "dependencies": {
-        "@sybotan-web/base": "2.0.44",
-        "@sybotan-web/draw": "2.0.49",
-        "@sybotan-web/graphy": "2.0.59"
+        "@sybotan-web/base": "2.0.53",
+        "@sybotan-web/draw": "2.0.109",
+        "@sybotan-web/graphy": "2.0.86"
     }
 }

+ 200 - 0
src/FloorScene.ts

@@ -0,0 +1,200 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyScene } from "@sybotan-web/graphy/lib";
+import Axios from "axios";
+// @ts-ignore
+import pako from "pako";
+
+// eslint-disable-next-line @typescript-eslint/class-name-casing
+class dataInterface {}
+
+/**
+ * 楼层场景
+ *
+ * @author  郝建龙
+ */
+export class FloorScene extends SGraphyScene {
+    /** item数据  */
+    data: dataInterface | null = null;
+    /** 是否显示空间  */
+    isShowSpace = true;
+    /** 是否展示墙体  */
+    isShowWallList = true;
+    /** 是否展示设备  */
+    isShowEquipmentList = true;
+    /** 是否展示虚拟墙  */
+    isShowVrtualWallList = true;
+
+    /**
+     *  @param  data    绘制空间地图得所有参数
+     */
+    constructor(data: dataInterface | null) {
+        super();
+        this.data = data;
+        if (this.data != null) {
+            this.addAllItemList(this.data);
+        }
+    }
+
+    /**
+     *  获取底图文件
+     *
+     *  @param  url     请求数据文件路径
+     */
+    urlGetData(url: string) {
+        let that = this;
+        return new Promise((relove, reject) => {
+            Axios({
+                method: "get",
+                url: url,
+                data: {},
+                responseType: "blob"
+                // contentType: "charset=utf-8"
+            })
+                .then((res: any) => {
+                    let blob = res.data;
+                    this.zipToJson(blob)
+                        .then((jsonData: any) => {
+                            that.addAllItemList(jsonData);
+                            relove();
+                        })
+                        .catch((error: any) => {
+                            console.log(error);
+                        });
+                    // console.log(reader)
+                })
+                .catch((res: any) => {
+                    console.log(res);
+                });
+        });
+    } // Function urlGetData
+
+    /**
+     *  解压数据
+     *
+     *  @param  blob     文件
+     */
+    zipToJson(blob: any): any {
+        let data = null;
+        let reader = new FileReader();
+        reader.readAsBinaryString(blob);
+        let _this = this;
+        return new Promise(resolve => {
+            reader.onload = (readerEvt: any) => {
+                let binaryString = readerEvt.target.result;
+                //解压数据
+                let base64Data = btoa(binaryString);
+                let unGzipData = pako.unzip(base64Data);
+                data = unGzipData;
+                if (data.WallList && data.WallList.length) {
+                    this.changeMap(data.WallList, -1, "PointList");
+                }
+                if (data.SpaceList && data.SpaceList.length) {
+                    this.changeMap(data.SpaceList, -1, "Paths");
+                }
+                if (data.ColumnList && data.ColumnList.length) {
+                    this.changeMap(data.ColumnList, -1, "Path");
+                }
+                if (data.VirtualWallList && data.VirtualWallList.length) {
+                    this.changeMap(data.VirtualWallList, -1, "PointList");
+                }
+                if (data.EquipmentList && data.EquipmentList.length) {
+                    this.changeMap(data.EquipmentList, -1, "PointList");
+                }
+                resolve(data);
+            };
+        });
+    } // Function zipToJson
+
+    /**
+     *  增添所有绘制item(地图);
+     *
+     *  @param  data    itemList对象
+     */
+    addAllItemList(data: dataInterface) {} // Function addAllItemList
+
+    /**
+     *  添加所有空间到scene 中
+     *
+     *  @param  space   空间list
+     */
+    addSpaceList(): void {} // Function addSpaceList
+
+    /**
+     *  添加所有设备到scene 中
+     *
+     *  @param  column   柱子list
+     */
+    addColumnListList(): void {} // Function addColumnListList
+
+    /**
+     *  添加所有设备到scene 中
+     *
+     *  @param  wall   墙list
+     */
+    addWallList(): void {} // Function addWallList
+
+    /**
+     *  添加所有虚拟墙到scene 中
+     *
+     *  @param  virtualWall   虚拟墙list
+     */
+    addVirtualWallList(): void {} // Function addVirtualWallList
+
+    /**
+     *  添加所有位置标签到scene 中
+     *
+     *  @param  doors   门list
+     */
+    addDoorList(): void {} // Function addDoorList
+
+    /**
+     *  添加所有位置标签到scene 中
+     *
+     *  @param  windows   窗户list
+     */
+    addWindowList(): void {} // Function addWindowList
+    /**
+     *  扩大数组中相应字段一定倍数
+     *
+     *  @param  arr     itemList
+     *  @param  k       倍数
+     *  @param  name    字段key值
+     */
+    changeMap(arr: any, k: any, name: any) {
+        let data = arr.map((items: any) => {
+            if (items[name] && items[name].length) {
+                items[name].map((children: any) => {
+                    if (Array.isArray(children)) {
+                        return children.map(res => {
+                            res.Y = res.Y * k;
+                            return res;
+                        });
+                    } else {
+                        children.Y = children.Y * k;
+                        return children;
+                    }
+                });
+            }
+        });
+        return data;
+    }
+} // Class FloorScene

+ 204 - 0
src/items/ColumnItem.ts

@@ -0,0 +1,204 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class ColumnItemInterface {
+    parent: SGraphyItem | undefined;
+    space: any;
+}
+
+/**
+ * 柱子item
+ *
+ * @author  郝建龙
+ */
+export class ColumnItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 空间id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 空间名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param PolygonItemData
+     */
+    constructor(PolygonItemData: ColumnItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+
+    /**
+     *
+     * @param text 修改的文字
+     * @param centerOfGravityPoint 文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+} // Class ColumnItem

+ 265 - 0
src/items/DoorItem.ts

@@ -0,0 +1,265 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class PolygonItemInterface {
+    parent: SGraphyItem | undefined;
+    space: any;
+}
+
+/**
+ * 窗户item
+ *
+ * @author  郝建龙
+ */
+export class WindowItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 空间id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 空间名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param pointArr                  点坐标list
+     * @param width                     边框的宽度
+     * @param color                     边框的颜色
+     * @param fillColor                 多边形填充的颜色
+     * @param businessId                空间id
+     * @param businessName              空间名称
+     * @param centerOfGravityPoint      中心点
+     * @param isBusiness                状态
+     * @param parent
+     */
+    constructor(PolygonItemData: PolygonItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+    /**
+     *
+     * @param text 修改的文字
+     * @param centerOfGravityPoint 文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("click", event);
+        return true;
+    } // Function onClick()
+
+    /**
+     * 鼠标双击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onDoubleClick(event: SMouseEvent): boolean {
+        this.$emit("doubleClick", event);
+        return true;
+    } // Function onDoubleClick()
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        this.$emit("mouseDown", event);
+        return true;
+    } // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseMove(event: SMouseEvent): boolean {
+        this.$emit("mouseMove", event);
+        return true;
+    } // Function onMouseMove()
+
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseUp(event: SMouseEvent): boolean {
+        this.$emit("mouseUp", event);
+        return true;
+    } // Function onMouseUp()
+} // Class WindowItem

+ 258 - 0
src/items/SpaceItem.ts

@@ -0,0 +1,258 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class PolygonItemInterface {
+    parent: SGraphyItem | null | undefined;
+    space: any;
+}
+
+/**
+ * 空间item
+ *
+ * @author  郝建龙
+ */
+export class SpaceItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 空间id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 空间名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param PolygonItemData
+     */
+    constructor(PolygonItemData: PolygonItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+    /**
+     * 添加文本
+     *
+     * @param   text                    修改的文字
+     * @param   centerOfGravityPoint    文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("click", event);
+        return true;
+    } // Function onClick()
+
+    /**
+     * 鼠标双击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onDoubleClick(event: SMouseEvent): boolean {
+        this.$emit("doubleClick", event);
+        return true;
+    } // Function onDoubleClick()
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        this.$emit("mouseDown", event);
+        return true;
+    } // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseMove(event: SMouseEvent): boolean {
+        this.$emit("mouseMove", event);
+        return true;
+    } // Function onMouseMove()
+
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseUp(event: SMouseEvent): boolean {
+        this.$emit("mouseUp", event);
+        return true;
+    } // Function onMouseUp()
+} // Class SpaceItem

+ 202 - 0
src/items/VirtualWall.ts

@@ -0,0 +1,202 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class PolygonItemInterface {
+    space: any;
+    parent: SGraphyItem | undefined;
+}
+
+/**
+ * 墙item
+ *
+ * @author  郝建龙
+ */
+export class WallItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 墙id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 墙名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param PolygonItemData
+     */
+    constructor(PolygonItemData: PolygonItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+    /**
+     *
+     * @param text                  修改的文字
+     * @param centerOfGravityPoint  文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+} // Class WallItem

+ 202 - 0
src/items/WallItem.ts

@@ -0,0 +1,202 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class PolygonItemInterface {
+    space: any;
+    parent: SGraphyItem | undefined;
+}
+
+/**
+ * 墙item
+ *
+ * @author  郝建龙
+ */
+export class WallItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 墙id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 墙名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param PolygonItemData
+     */
+    constructor(PolygonItemData: PolygonItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+    /**
+     *
+     * @param text                  修改的文字
+     * @param centerOfGravityPoint  文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+} // Class WallItem

+ 265 - 0
src/items/WindowItem.ts

@@ -0,0 +1,265 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
+import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
+
+class PolygonItemInterface {
+    parent: SGraphyItem | undefined;
+    space: any;
+}
+
+/**
+ * 窗户item
+ *
+ * @author  郝建龙
+ */
+export class WindowItem extends SGraphyItem {
+    /** 点坐标list */
+    pointArr: SPoint[];
+    /** 填充色 */
+    fillColor: SColor = new SColor("#F2F6FC");
+    /** 边框色 */
+    color: SColor = SColor.Black;
+    /** 边框宽度    */
+    width: number = 200;
+    /** 空间id  */
+    id: string;
+    /** 中心坐标    */
+    centerOfGravityPoint: { x: number; y: number };
+    /** 空间名称    */
+    initName: null | string | undefined;
+    /** 绘制文案    */
+    viewText: string = "";
+    /** 需要缓存的边框颜色   */
+    cacheColor: SColor = SColor.Black;
+    /** 需要缓存的填充色   */
+    cacheFillColor: SColor = new SColor("#F2F6FC");
+    /** 需要缓存的边框宽度   */
+    cacheWidth: number = 100;
+    /** 是否激活    */
+    actived: boolean = false;
+
+    /**
+     * 构造函数
+     *
+     * @param pointArr                  点坐标list
+     * @param width                     边框的宽度
+     * @param color                     边框的颜色
+     * @param fillColor                 多边形填充的颜色
+     * @param businessId                空间id
+     * @param businessName              空间名称
+     * @param centerOfGravityPoint      中心点
+     * @param isBusiness                状态
+     * @param parent
+     */
+    constructor(PolygonItemData: PolygonItemInterface) {
+        super(PolygonItemData.parent);
+        // 修改绘制路径格式
+        let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
+            (item: SPoint) => {
+                return new SPoint(item.x, item.y);
+            }
+        );
+        this.pointArr = newSpacePaths;
+        // 填充色
+        this.fillColor = PolygonItemData.space.fillColor
+            ? PolygonItemData.space.fillColor
+            : new SColor("#F2F6FC");
+        // 边框色
+        this.color = PolygonItemData.space.color
+            ? PolygonItemData.space.color
+            : SColor.Black;
+        //边框宽度
+        this.width = PolygonItemData.space.width
+            ? PolygonItemData.space.width
+            : 100;
+        //中心点
+        this.centerOfGravityPoint = {
+            x: PolygonItemData.space.LocationPoint.X,
+            y: -PolygonItemData.space.LocationPoint.Y
+        };
+        this.initName = PolygonItemData.space.Name;
+        this.id = PolygonItemData.space.id;
+        this.viewText = PolygonItemData.space.Name;
+    }
+
+    /**
+     * Item对象边界区域
+     *
+     * @return SRect
+     */
+    boundingRect(): SRect {
+        let minX = this.pointArr[0].x;
+        let maxX = minX;
+        let minY = this.pointArr[0].y;
+        let maxY = minY;
+        for (let i = 1; i < this.pointArr.length; i++) {
+            if (this.pointArr[i].x < minX) {
+                minX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y < minY) {
+                minY = this.pointArr[i].y;
+            }
+            if (this.pointArr[i].x > maxX) {
+                maxX = this.pointArr[i].x;
+            }
+            if (this.pointArr[i].y > maxY) {
+                maxY = this.pointArr[i].y;
+            }
+        }
+
+        return new SRect(minX, minY, maxX - minX, maxY - minY);
+    } // Function boundingRect()
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x
+     * @param y
+     */
+    contains(x: number, y: number): boolean {
+        let nCross = 0,
+            point = [x, y],
+            APoints = this.pointArr,
+            length = APoints.length,
+            p1,
+            p2,
+            i,
+            xinters;
+        p1 = APoints[0];
+        for (i = 1; i <= length; i++) {
+            p2 = APoints[i % length];
+            if (
+                point[0] > Math.min(p1.x, p2.x) &&
+                point[0] <= Math.max(p1.x, p2.x)
+            ) {
+                if (point[1] <= Math.max(p1.y, p2.y)) {
+                    if (p1.x != p2.x) {
+                        //计算位置信息
+                        xinters =
+                            ((point[0] - p1.x) * (p2.y - p1.y)) /
+                                (p2.x - p1.x) +
+                            p1.y;
+                        if (p1.y == p2.y || point[1] <= xinters) {
+                            nCross++;
+                        }
+                    }
+                }
+            }
+            p1 = p2;
+        }
+        return nCross % 2 === 1;
+    }
+    /**
+     *
+     * @param text 修改的文字
+     * @param centerOfGravityPoint 文字的坐标
+     */
+    addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
+        this.viewText = text;
+        if (centerOfGravityPoint) {
+            this.centerOfGravityPoint = centerOfGravityPoint;
+        }
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter       painter对象
+     * @param   rect          绘制区域
+     */
+    onDraw(painter: SPainter, rect?: SRect): void {
+        if (this.pointArr.length) {
+            painter.pen.color = this.color;
+            painter.brush.color = this.fillColor;
+            painter.pen.lineWidth = this.width;
+            painter.drawPolygon(this.pointArr);
+            // let text = ''
+            // if (this.businessName || this.businessId) {
+            // 	text = '👇   ' + this.businessName
+            // } else {
+            // 	text = '⬇️   ' + this.initName
+            // }
+            painter.font.size = this.scale * 200;
+            painter.brush.color = SColor.Black;
+            // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+            painter.drawText(
+                this.viewText,
+                this.centerOfGravityPoint.x,
+                this.centerOfGravityPoint.y
+            );
+        }
+    }
+
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("click", event);
+        return true;
+    } // Function onClick()
+
+    /**
+     * 鼠标双击事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onDoubleClick(event: SMouseEvent): boolean {
+        this.$emit("doubleClick", event);
+        return true;
+    } // Function onDoubleClick()
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        this.$emit("mouseDown", event);
+        return true;
+    } // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseMove(event: SMouseEvent): boolean {
+        this.$emit("mouseMove", event);
+        return true;
+    } // Function onMouseMove()
+
+    /**
+     * 释放鼠标事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseUp(event: SMouseEvent): boolean {
+        this.$emit("mouseUp", event);
+        return true;
+    } // Function onMouseUp()
+} // Class WindowItem