瀏覽代碼

调整item

haojianlong 4 年之前
父節點
當前提交
58f5814975

+ 3 - 3
package.json

@@ -9,10 +9,10 @@
     },
     "dependencies": {
         "@saga-web/base": "2.1.22",
-        "@saga-web/big": "1.0.48",
-        "@saga-web/draw": "2.1.98",
+        "@saga-web/big": "1.0.49",
+        "@saga-web/draw": "2.1.100",
         "@saga-web/feng-map": "1.0.11",
-        "@saga-web/graph": "2.1.91",
+        "@saga-web/graph": "2.1.93",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",

+ 7 - 1
src/components/floorMap/index.vue

@@ -21,6 +21,7 @@ import { readGroup } from '@/api/public'
 import { STopologyParser } from '@/lib/parsers/STopologyParser'
 import { mapGetters, mapActions } from 'vuex'
 import { SImageItem } from '@saga-web/graph/lib'
+import bus from "@/utils/bus.js"
 // import { uuid } from "@/components/mapClass/until";
 let fengmap = null
 
@@ -202,7 +203,6 @@ export default {
                 return
             }
             let scale = this.view.scale
-            console.log(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
             this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
         },
         // 读取数据
@@ -224,6 +224,11 @@ export default {
                 this.canvasWidth = this.$refs.graphy.offsetWidth
                 this.canvasHeight = 900
             }
+        },
+        bindEvent(){
+          bus.$on("changeShow", res => {
+            console.log(res)
+          })
         }
     },
     watch: {
@@ -238,6 +243,7 @@ export default {
     },
     mounted() {
         this.mapSize()
+        this.bindEvent()
     },
     created() {
         this.urlMsg = {

+ 5 - 0
src/components/viewLengend.vue

@@ -73,6 +73,7 @@
     </div>
 </template>
 <script>
+import bus from "@/utils/bus.js"
 export default {
     props: ['viewTable', 'loading', 'remarksText', 'systemName'],
     data() {
@@ -84,6 +85,10 @@ export default {
     methods: {
         handleSelectionChange(val) {
             this.multipleSelection = val
+            const tempArr = val.map(t => {
+                return t.GraphElementId
+            })
+            bus.$emit('changeShow', tempArr)
         },
         handleSwich(val) {
             this.$emit('changeSwitch', val)

+ 30 - 1
src/lib/items/SFHFQZoneLegendItem.js

@@ -1,5 +1,5 @@
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until";
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -21,6 +21,8 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
         this.id = data.ID;
@@ -140,6 +142,16 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
@@ -157,4 +169,21 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         this.data.Properties.color = this.color;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 39 - 11
src/lib/items/SFHFQZoneLegendItem.ts

@@ -2,7 +2,7 @@
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -85,6 +85,18 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         }
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
 
     /**
      * 构造函数
@@ -130,27 +142,27 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont("sans-serif", data.Properties.font);
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -161,10 +173,26 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 Y: pos.y
             }
         });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color;
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 0 - 155
src/lib/items/SImgTextItem.js

@@ -1,155 +0,0 @@
-import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
-import { SColor } from '@saga-web/draw/lib';
-import { SObjectItem, SImageItem, STextItem, SAnchorItem } from '@saga-web/graph/lib';
-/**
-     * 图例item  icon
-     *
-     * */
-export class SImgTextItem extends SObjectItem {
-    /**
-     * 构造体
-     *
-     * */
-    constructor(parent) {
-        super(parent);
-        /** item状态  */
-        this._status = SItemStatus.Normal;
-        /** 是否显示文字  */
-        this._showText = true;
-        /** 是否显示锚点  */
-        this._showAnchor = false;
-        /** img Item    */
-        this.img = new SImageItem(this);
-        /** text item   */
-        this.textItem = new STextItem(this);
-        this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
-        this.img.width = 32;
-        this.img.height = 32;
-        let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
-        this.anchorList = anchorPoint.map(t => {
-            let item = new SAnchorItem(this);
-            item.moveTo(t.x, t.y);
-            return item;
-        });
-        this.update();
-        this.textItem.text = "请填写文本";
-        this.textItem.moveTo(16, -6);
-        this.moveable = true;
-        this.selectable = true;
-        this.isTransform = false;
-        this.textItem.enabled = false;
-        this.img.enabled = false;
-    }
-    get status() {
-        return this._status;
-    }
-    set status(v) {
-        this._status = v;
-        this.update();
-    }
-    get showText() {
-        return this._showText;
-    }
-    set showText(v) {
-        if (v === this._showText) {
-            return;
-        }
-        this._showText = v;
-        if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
-        }
-    }
-    /** X轴坐标 */
-    get x() {
-        return this.pos.x;
-    } // Get x
-    set x(v) {
-        this.pos.x = v;
-        this.$emit("changePos");
-        this.update();
-    } // Set x
-    /** Y轴坐标 */
-    get y() {
-        return this.pos.y;
-    } // Get y
-    set y(v) {
-        this.pos.y = v;
-        this.$emit("changePos");
-        this.update();
-    } // Set y
-    get showAnchor() {
-        return this._showAnchor;
-    }
-    set showAnchor(v) {
-        this._showAnchor = v;
-        this.anchorList.forEach(t => {
-            t.visible = v;
-        });
-    }
-    get text() {
-        return this.textItem.text;
-    }
-    set text(v) {
-        this.textItem.text = v;
-        this.update();
-    }
-    /**
-     * 鼠标按下事件
-     *
-     * */
-    onMouseDown(event) {
-        console.log(this);
-        if (this.status == SItemStatus.Normal) {
-            return super.onMouseDown(event);
-        }
-        else if (this.status == SItemStatus.Edit) {
-            return super.onMouseDown(event);
-        }
-        return true;
-    } // Function onMouseDown()
-    /**
-     * 宽高发发生变化
-     *
-     * @param   oldSize 改之前的大小
-     * @param   newSize 改之后大小
-     * */
-    onResize(oldSize, newSize) {
-        console.log(arguments);
-    } // Function onResize()
-    /**
-     * 鼠标双击事件
-     *
-     * @param   event   鼠标事件
-     * @return  是否处理事件
-     * */
-    onDoubleClick(event) {
-        this.status = SItemStatus.Edit;
-        return true;
-    } // Function onDoubleClick()
-    /**
-     * 宽高发生变化
-     *
-     * @return  SRect   所有子对象的并集
-     * */
-    boundingRect() {
-        let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
-        if (this.showText) {
-            rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0));
-        }
-        return rect;
-    } // Function boundingRect()
-    /**
-     * Item绘制操作
-     *
-     * @param   painter painter对象
-     */
-    onDraw(painter) {
-        painter.pen.lineWidth = painter.toPx(1);
-        painter.pen.color = new SColor("#00FF00");
-        painter.brush.color = SColor.Transparent;
-        painter.drawRect(this.boundingRect());
-    } // Function onDraw()
-}

+ 0 - 173
src/lib/items/SImgTextItem.ts

@@ -1,173 +0,0 @@
-import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
-import { SGraphItem } from '@saga-web/graph/lib/SGraphItem';
-import { STextBaseLine } from '@saga-web/draw/lib';
-import { SMouseEvent } from '@saga-web/base/lib/SMouseEvent';
-import { SSize } from '@saga-web/draw/lib';
-import { SPainter } from '@saga-web/draw/lib';
-import { SColor } from '@saga-web/draw/lib';
-import { SRect } from '@saga-web/draw/lib';
-import { SObjectItem, SImageItem, STextItem, SAnchorItem } from '@saga-web/graph/lib';
-
-/**
-     * 图例item  icon
-     *
-     * */
-export class SImgTextItem extends SObjectItem {
-
-  /** item状态  */
-  _status: SItemStatus = SItemStatus.Normal;
-  get status(): SItemStatus {
-    return this._status;
-  }
-  set status(v: SItemStatus) {
-    this._status = v;
-    this.update();
-  }
-
-  /** 是否显示文字  */
-  _showText: boolean = true;
-  get showText(): boolean {
-    return this._showText;
-  }
-  set showText(v: boolean) {
-    if (v === this._showText) {
-      return
-    }
-    this._showText = v;
-    if (v) {
-      this.textItem.show();
-    } else {
-      this.textItem.hide();
-    }
-  }
-
-  /** X轴坐标 */
-  get x(): number {
-    return this.pos.x;
-  } // Get x
-  set x(v: number) {
-    this.pos.x = v;
-    this.$emit("changePos");
-    this.update();
-  } // Set x
-  /** Y轴坐标 */
-  get y(): number {
-    return this.pos.y;
-  } // Get y
-  set y(v: number) {
-    this.pos.y = v;
-    this.$emit("changePos");
-    this.update();
-  } // Set y
-
-  /** 是否显示锚点  */
-  _showAnchor: boolean = false;
-  get showAnchor(): boolean {
-    return this._showAnchor;
-  }
-  set showAnchor(v: boolean) {
-    this._showAnchor = v;
-    this.anchorList.forEach(t => {
-      t.visible = v;
-    })
-  }
-
-  get text():string{
-    return this.textItem.text;
-  }
-  set text(v:string){
-    this.textItem.text = v;
-    this.update();
-  }
-
-  /** img Item    */
-  img: SImageItem = new SImageItem(this);
-
-  /** text item   */
-  textItem: STextItem = new STextItem(this);
-
-  /**
-   * 构造体
-   *
-   * */
-  constructor(parent: SGraphItem | null) {
-    super(parent);
-    this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
-    this.img.width = 32;
-    this.img.height = 32;
-    let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
-    this.anchorList = anchorPoint.map(t => {
-      let item = new SAnchorItem(this);
-      item.moveTo(t.x, t.y);
-      return item;
-    });
-    this.update();
-    this.textItem.text = "请填写文本";
-    this.textItem.moveTo(16, -6);
-    this.moveable = true;
-    this.selectable = true;
-    this.isTransform = false;
-    this.textItem.enabled = false;
-    this.img.enabled = false;
-  }
-
-  /**
-   * 鼠标按下事件
-   *
-   * */
-  onMouseDown(event: SMouseEvent): boolean {
-    console.log(this)
-    if (this.status == SItemStatus.Normal) {
-      return super.onMouseDown(event);
-    } else if (this.status == SItemStatus.Edit) {
-      return super.onMouseDown(event);
-    }
-    return true;
-  } // Function onMouseDown()
-
-  /**
-   * 宽高发发生变化
-   *
-   * @param   oldSize 改之前的大小
-   * @param   newSize 改之后大小
-   * */
-  onResize(oldSize: SSize, newSize: SSize) {
-    console.log(arguments);
-  } // Function onResize()
-
-  /**
-   * 鼠标双击事件
-   *
-   * @param   event   鼠标事件
-   * @return  是否处理事件
-   * */
-  onDoubleClick(event: SMouseEvent): boolean {
-    this.status = SItemStatus.Edit;
-    return true;
-  } // Function onDoubleClick()
-
-  /**
-   * 宽高发生变化
-   *
-   * @return  SRect   所有子对象的并集
-   * */
-  boundingRect(): SRect {
-    let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.pos.y,0,0);
-    if (this.showText) {
-        rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x,this.textItem.pos.y,0,0))
-    }
-    return rect;
-  } // Function boundingRect()
-
-  /**
-   * Item绘制操作
-   *
-   * @param   painter painter对象
-   */
-  onDraw(painter: SPainter): void {
-    painter.pen.lineWidth = painter.toPx(1);
-    painter.pen.color = new SColor("#00FF00");
-    painter.brush.color = SColor.Transparent;
-    painter.drawRect(this.boundingRect());
-  } // Function onDraw()
-}

+ 38 - 2
src/lib/items/SLineMarkerItem.js

@@ -1,5 +1,6 @@
-import { SPoint } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem } from '@saga-web/big/lib';
+import { SLineStyle } from "@saga-web/graph/lib";
+import { SPoint, SColor } from "@saga-web/draw/lib";
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
 /**
  * 标识对象Item(线类型)
  *
@@ -14,6 +15,8 @@ export class SLineMarkerItem extends SLineItem {
      */
     constructor(parent, data) {
         super(parent);
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.lineOrder;
         this.data = data;
         this.id = data.ID;
@@ -36,6 +39,16 @@ export class SLineMarkerItem extends SLineItem {
             this.strokeColor = data.Properties.StrokeColor;
         }
     } // Constructor
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Properties.Line = this.line.map(pos => {
@@ -49,4 +62,27 @@ export class SLineMarkerItem extends SLineItem {
         this.data.Properties.LineStyle = this.lineStyle;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = new SColor(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(this.lineWidth),
+                    painter.toPx(this.lineWidth)
+                ];
+            }
+            painter.drawLine(this.line[0], this.line[1]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SLineMarkerItem

+ 39 - 4
src/lib/items/SLineMarkerItem.ts

@@ -1,7 +1,7 @@
 
-import { SGraphItem } from "@saga-web/graph/lib";
-import { SPoint } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem } from '@saga-web/big/lib';
+import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
+import { SPoint, SPainter, SColor, SLineCapStyle } from "@saga-web/draw/lib";
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
 import { Marker } from '../types/Marker';
 
 /**
@@ -13,6 +13,19 @@ export class SLineMarkerItem extends SLineItem {
     /** 标识对象数据 */
     data: Marker;
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /**
      * 构造函数
      *
@@ -45,7 +58,7 @@ export class SLineMarkerItem extends SLineItem {
     } // Constructor
 
     toData(): Marker {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Properties.Line = this.line.map(pos => {
             return {
                 X: pos.x,
@@ -58,4 +71,26 @@ export class SLineMarkerItem extends SLineItem {
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = new SColor(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(this.lineWidth),
+                    painter.toPx(this.lineWidth)
+                ];
+            }
+            painter.drawLine(this.line[0], this.line[1]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SLineMarkerItem

+ 30 - 1
src/lib/items/SSCPZZoneLegendItem.js

@@ -1,5 +1,5 @@
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until";
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -21,6 +21,8 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
         this.id = data.ID;
@@ -140,6 +142,16 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     /** 图例说明  */
     set itemExplain(v) {
         this.data.Properties.ItemExplain = v;
@@ -164,4 +176,21 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         this.data.Properties.color = this.color;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 44 - 14
src/lib/items/SSCPZZoneLegendItem.ts

@@ -2,7 +2,7 @@
 import { SGraphItem } from "@saga-web/graph/lib";
 import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
 import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
@@ -84,11 +84,25 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
     /** 图例说明  */
-    set itemExplain(v:string){
-      this.data.Properties.ItemExplain = v
+    set itemExplain(v: string) {
+        this.data.Properties.ItemExplain = v
     }
-    get itemExplain():string{
+    get itemExplain(): string {
         return this.data.Properties.ItemExplain
     }
 
@@ -136,27 +150,27 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont("sans-serif", data.Properties.font);
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.text;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -167,10 +181,26 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 Y: pos.y
             }
         });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color;
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 5 - 60
src/lib/items/STextMarkerItem.js

@@ -1,4 +1,4 @@
-import { STextItem, SLineStyle } from "@saga-web/graph/lib";
+import { STextItem } from "@saga-web/graph/lib";
 import { SColor, SFont } from "@saga-web/draw";
 import { ItemOrder } from '@saga-web/big/lib';
 /**
@@ -15,10 +15,6 @@ export class STextMarkerItem extends STextItem {
      */
     constructor(parent, data) {
         super(parent);
-        /** 边框宽度 */
-        this._lineWidth = 1;
-        /** 边框样式    */
-        this._borderStyle = SLineStyle.None;
         this.zOrder = ItemOrder.textOrder;
         this.data = data;
         this.id = data.ID;
@@ -32,74 +28,23 @@ export class STextMarkerItem extends STextItem {
             this.text = data.Properties.Text;
         }
         if (data.Properties && data.Properties.Color) {
-            this.color = data.Properties.Color;
+            this.color = new SColor(data.Properties.Color);
         }
         if (data.Properties && data.Properties.Font) {
             this.font = new SFont("sans-serif", data.Properties.Font);
             ;
         }
         if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = data.Properties.BackgroundColor;
+            this.backgroundColor = new SColor(data.Properties.BackgroundColor);
         }
     } // Constructor
-    get lineWidth() {
-        return this._lineWidth;
-    }
-    set lineWidth(v) {
-        this._lineWidth = v;
-        this.update();
-    }
-    get borderStyle() {
-        return this._borderStyle;
-    }
-    set borderStyle(v) {
-        this._borderStyle = v;
-        this.update();
-    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };
         this.data.Properties.Text = this.text;
-        this.data.Properties.Color = this.color;
+        this.data.Properties.Color = this.color.value;
         this.data.Properties.Font = this.font.size;
-        this.data.Properties.BackgroundColor = this.backgroundColor;
+        this.data.Properties.BackgroundColor = this.backgroundColor.value;
         return this.data;
     }
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter) {
-        // 绘制文本
-        painter.brush.color = new SColor(this.color);
-        painter.font = this.font;
-        this.drawFormatText(painter);
-        if (this.selected) {
-            this.borderStyle = SLineStyle.Dashed;
-        }
-        else {
-            this.borderStyle = SLineStyle.None;
-        }
-        if (this.borderStyle == SLineStyle.Dashed) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth * 3),
-                painter.toPx(this.lineWidth * 7)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-        else if (this.borderStyle == SLineStyle.Dotted) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth),
-                painter.toPx(this.lineWidth)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-        else if (this.borderStyle == SLineStyle.Soild) {
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-    } // Function onDraw()
 } // Class STextMarkerItem

+ 5 - 59
src/lib/items/STextMarkerItem.ts

@@ -12,25 +12,6 @@ export class STextMarkerItem extends STextItem {
     /** 标识对象数据 */
     data: Marker;
 
-    /** 边框宽度 */
-    private _lineWidth: number = 1;
-    get lineWidth(): number {
-        return this._lineWidth;
-    }
-    set lineWidth(v: number) {
-        this._lineWidth = v;
-        this.update();
-    }
-
-    /** 边框样式    */
-    private _borderStyle: SLineStyle = SLineStyle.None;
-    get borderStyle(): SLineStyle {
-        return this._borderStyle;
-    }
-    set borderStyle(v: SLineStyle) {
-        this._borderStyle = v;
-        this.update();
-    }
     /**
      * 构造函数
      *
@@ -52,13 +33,13 @@ export class STextMarkerItem extends STextItem {
             this.text = data.Properties.Text;
         }
         if (data.Properties && data.Properties.Color) {
-            this.color = data.Properties.Color
+            this.color = new SColor(data.Properties.Color);
         }
         if (data.Properties && data.Properties.Font) {
             this.font = new SFont("sans-serif", data.Properties.Font);;
         }
         if (data.Properties && data.Properties.BackgroundColor) {
-            this.backgroundColor = data.Properties.BackgroundColor
+            this.backgroundColor = new SColor(data.Properties.BackgroundColor);
         }
     } // Constructor
 
@@ -66,44 +47,9 @@ export class STextMarkerItem extends STextItem {
         this.data.Pos = {X: this.x, Y: this.y};
         this.data.Size = {Width: this.width, Height: this.height};
         this.data.Properties.Text = this.text;
-        this.data.Properties.Color = this.color;
-        this.data.Properties.Font = this.font.size
-        this.data.Properties.BackgroundColor = this.backgroundColor
+        this.data.Properties.Color = this.color.value;
+        this.data.Properties.Font = this.font.size;
+        this.data.Properties.BackgroundColor = this.backgroundColor.value;
         return this.data;
     }
-
-    /**
-     * Item绘制操作
-     *
-     * @param   painter      绘画类
-     */
-    onDraw(painter: SPainter): void {
-        // 绘制文本
-        painter.brush.color = new SColor(this.color);
-        painter.font = this.font;
-        this.drawFormatText(painter);
-        if (this.selected) {
-            this.borderStyle = SLineStyle.Dashed;
-        } else {
-            this.borderStyle = SLineStyle.None;
-        }
-        if (this.borderStyle == SLineStyle.Dashed) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth * 3),
-                painter.toPx(this.lineWidth * 7)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        } else if (this.borderStyle == SLineStyle.Dotted) {
-            painter.pen.lineDash = [
-                painter.toPx(this.lineWidth),
-                painter.toPx(this.lineWidth)
-            ];
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        } else if (this.borderStyle == SLineStyle.Soild) {
-            painter.brush.color = SColor.Transparent;
-            painter.drawRect(this.boundingRect());
-        }
-    } // Function onDraw()
 } // Class STextMarkerItem

+ 40 - 5
src/lib/items/SZoneLegendItem.js

@@ -1,4 +1,4 @@
-import { SColor, SFont, SPoint } from "@saga-web/draw";
+import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until";
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
@@ -20,6 +20,8 @@ export class SZoneLegendItem extends SPolygonItem {
         this.textItem = new STextItem(this);
         /** 是否显示文字  */
         this._showText = true;
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
         this.id = data.ID;
@@ -30,10 +32,16 @@ export class SZoneLegendItem extends SPolygonItem {
             this.setPointList = [];
             let setPointList;
             if (data.OutLine) {
-                setPointList = data.OutLine.map(i => {
-                    return (new SPoint(i.X, i.Y));
-                });
-                this.setPointList = setPointList;
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                }
+                else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y));
+                    });
+                    this.setPointList = setPointList;
+                }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -134,6 +142,16 @@ export class SZoneLegendItem extends SPolygonItem {
             this.textItem.hide();
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     toData() {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;
@@ -151,4 +169,21 @@ export class SZoneLegendItem extends SPolygonItem {
         this.data.Properties.color = this.color;
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor);
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 48 - 15
src/lib/items/SZoneLegendItem.ts

@@ -1,7 +1,7 @@
 
 import { SGraphItem } from "@saga-web/graph/lib";
 import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from "@/components/mapClass/until"
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
@@ -84,6 +84,18 @@ export class SZoneLegendItem extends SPolygonItem {
         }
     }
 
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
 
     /**
      * 构造函数
@@ -103,10 +115,15 @@ export class SZoneLegendItem extends SPolygonItem {
             this.setPointList = [];
             let setPointList: SPoint[];
             if (data.OutLine) {
-                setPointList = data.OutLine.map(i => {
-                    return (new SPoint(i.X, i.Y))
-                })
-                this.setPointList = setPointList;
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
@@ -125,27 +142,27 @@ export class SZoneLegendItem extends SPolygonItem {
                 this.color = data.Properties.color
             }
             if (data.Properties.font) {
-                this.font =new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont("sans-serif", data.Properties.font);
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated",this, () => {
+        this.connect("finishCreated", this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.x / arr.length)
-                            }, 0),
+                return pre + (cur.x / arr.length)
+            }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                                return pre + (cur.y / arr.length)
-                            }, 0);
+                    return pre + (cur.y / arr.length)
+                }, 0);
             this.textItem.moveTo(x, y);
         })
     }
 
     toData(): any {
-        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;
         this.data.Properties.FillColor = this.fillColor.value;
         this.data.Properties.StrokeColor = this.strokeColor.value;
@@ -156,10 +173,26 @@ export class SZoneLegendItem extends SPolygonItem {
                 Y: pos.y
             }
         });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color;
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
+        this.data.Properties.font = this.font.size;
+        this.data.Properties.color = this.color;
         return this.data;
     }
 
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = 100;
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = 100;
+            painter.pen.color = color;
+            painter.pen.lineCapStyle = SLineCapStyle.Square;
+            painter.pen.lineWidth = painter.toPx(this._lineWidth);
+            painter.brush.color = brushcolor;
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
 } // Class SZoneLegendItem

+ 26 - 1
src/lib/items/TipelineItem.js

@@ -1,4 +1,5 @@
-import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
+import { SColor } from '@saga-web/draw';
 import { SPoint } from "@saga-web/draw/lib";
 /**
  * 管道item
@@ -21,6 +22,8 @@ export class TipelineItem extends SPolylineItem {
         this._anchor1ID = "";
         /** 关联锚点2ID  */
         this._anchor2ID = "";
+        /** 是否蒙版遮罩  */
+        this._maskFlag = false;
         /** 数据存储  */
         this.data = null;
         this.zOrder = ItemOrder.polylineOrder;
@@ -28,6 +31,7 @@ export class TipelineItem extends SPolylineItem {
             return new SPoint(item.X, item.Y);
         });
         this.data = data;
+        this.name = data.Name;
         this.id = data.ID;
         if (data.GraphElementId) {
             this._graphElementId = data.GraphElementId;
@@ -99,6 +103,16 @@ export class TipelineItem extends SPolylineItem {
             this.data.Anchor2ID = this._anchor2ID;
         }
     }
+    get maskFlag() {
+        return this._maskFlag;
+    }
+    set maskFlag(v) {
+        if (v === this._maskFlag) {
+            return;
+        }
+        this._maskFlag = v;
+        this.update();
+    }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startAnchor) {
@@ -130,4 +144,15 @@ export class TipelineItem extends SPolylineItem {
         }
         return this.data;
     }
+    onDraw(painter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor);
+            color.alpha = 100;
+            painter.pen.color = color;
+            painter.drawPolyline(this.pointList);
+        }
+        else {
+            super.onDraw(painter);
+        }
+    }
 }

+ 27 - 1
src/lib/items/TipelineItem.ts

@@ -1,4 +1,4 @@
-import { SPolylineItem, ItemOrder } from '@saga-web/big/lib';
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SPainter, SColor } from '@saga-web/draw';
 import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
 import { Relation } from '../types/Relation';
@@ -69,6 +69,20 @@ export class TipelineItem extends SPolylineItem {
       this.data.Anchor2ID = this._anchor2ID;
     }
   }
+
+  /** 是否蒙版遮罩  */
+  _maskFlag: boolean = false;
+  get maskFlag(): boolean {
+    return this._maskFlag;
+  }
+  set maskFlag(v: boolean) {
+    if (v === this._maskFlag) {
+      return
+    }
+    this._maskFlag = v;
+    this.update()
+  }
+
   /** 数据存储  */
   data: Relation | null = null;
   /** 接收事件作出修改  */
@@ -96,6 +110,7 @@ export class TipelineItem extends SPolylineItem {
       return new SPoint(item.X, item.Y);
     });
     this.data = data;
+    this.name = data.Name;
     this.id = data.ID;
     if (data.GraphElementId) {
       this._graphElementId = data.GraphElementId
@@ -141,4 +156,15 @@ export class TipelineItem extends SPolylineItem {
 
     return this.data
   }
+
+  onDraw(painter: SPainter) {
+    if (this.maskFlag && this.status == SItemStatus.Normal) {
+      let color = new SColor(this.strokeColor)
+      color.alpha = 100;
+      painter.pen.color = color;
+      painter.drawPolyline(this.pointList);
+    } else {
+      super.onDraw(painter);
+    }
+  }
 }

+ 3 - 0
src/utils/bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+const bus = new Vue()
+export default bus