Переглянути джерело

'图标item添加选中样式'

zhangyu 5 роки тому
батько
коміт
8e829011e6
2 змінених файлів з 119 додано та 90 видалено
  1. 1 1
      saga-web-big/package.json
  2. 118 89
      saga-web-big/src/items/SIconTextItem.ts

+ 1 - 1
saga-web-big/package.json

@@ -42,6 +42,6 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@saga-web/graph": "2.1.82"
+        "@saga-web/graph": "2.1.84"
     }
 }

+ 118 - 89
saga-web-big/src/items/SIconTextItem.ts

@@ -7,129 +7,158 @@ import {
 } from "@saga-web/graph/lib";
 import { SItemStatus } from "..";
 import { SMouseEvent } from "@saga-web/base";
-import { SSize, SRect, SPainter, SColor } from "@saga-web/draw";
+import { SSize, SRect, SPainter, SColor, SFont } from "@saga-web/draw";
 
 /**
  * 图例item  icon
  *
  * */
-export class SIconTextItem extends SObjectItem {
+export class SImgTextItem extends SObjectItem {
+
     /** item状态  */
     _status: SItemStatus = SItemStatus.Normal;
     get status(): SItemStatus {
-        return this._status;
+      return this._status;
     }
     set status(v: SItemStatus) {
-        this._status = v;
-        this.update();
+      this._status = v;
+      this.update();
     }
-
+  
     /** 是否显示文字  */
     _showText: boolean = true;
     get showText(): boolean {
-        return this._showText;
+      return this._showText;
     }
     set showText(v: boolean) {
-        if (v === this._showText) {
-            return;
-        }
-        this._showText = v;
-        if (v) {
-            this.textItem.show();
-        } else {
-            this.textItem.hide();
-        }
+      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;
+      return this.pos.x;
     } // Get x
     set x(v: number) {
-        this.pos.x = v;
-        this.$emit("changePos");
-        this.update();
+      this.pos.x = v;
+      this.$emit("changePos");
+      this.update();
     } // Set x
     /** Y轴坐标 */
     get y(): number {
-        return this.pos.y;
+      return this.pos.y;
     } // Get y
     set y(v: number) {
-        this.pos.y = v;
-        this.$emit("changePos");
-        this.update();
+      this.pos.y = v;
+      this.$emit("changePos");
+      this.update();
     } // Set y
-
+  
+    /** icon宽 */
+    get sWidth(): number {
+      return this.img.width;
+    }
+    set sWidth(v: number) {
+      this.img.width = v
+      this.update();
+    }
+  
+    /** icon宽 */
+    get sHeight(): number {
+      return this.img.height;
+    }
+    set sHeight(v: number) {
+      this.img.height = v
+      this.update();
+    }
+  
     /** 是否显示锚点  */
     _showAnchor: boolean = false;
     get showAnchor(): boolean {
-        return this._showAnchor;
+      return this._showAnchor;
     }
     set showAnchor(v: boolean) {
-        this._showAnchor = v;
-        this.anchorList.forEach(t => {
-            t.visible = v;
-        });
+      this._showAnchor = v;
+      this.anchorList.forEach(t => {
+        t.visible = v;
+      })
     }
-
+  
     get text(): string {
-        return this.textItem.text;
+      return this.textItem.text;
     }
     set text(v: string) {
-        this.textItem.text = v;
-        this.update();
+      this.textItem.text = v;
+      this.update();
+    }
+    get color(): string {
+      return this.textItem.color;
+    }
+    set color(v: string) {
+      this.textItem.color = v;
+      this.update();
+    }
+    get font(): SFont {
+      return this.textItem.font;
+    }
+    set font(v: SFont) {
+      this.textItem.font = 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;
+      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.backgroundColor = SColor.White;
+      this.textItem.font.size = 24;
+      this.textItem.moveTo(26, -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;
+      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()
-
+  
     /**
      * 宽高发发生变化
      *
@@ -137,9 +166,9 @@ export class SIconTextItem extends SObjectItem {
      * @param   newSize 改之后大小
      * */
     onResize(oldSize: SSize, newSize: SSize) {
-        console.log(arguments);
+      console.log(arguments);
     } // Function onResize()
-
+  
     /**
      * 鼠标双击事件
      *
@@ -147,38 +176,38 @@ export class SIconTextItem extends SObjectItem {
      * @return  是否处理事件
      * */
     onDoubleClick(event: SMouseEvent): boolean {
-        this.status = SItemStatus.Edit;
-        return true;
+      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;
+      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.adjusted(-5, -5, 10, 10);
     } // Function boundingRect()
-
+  
     /**
      * Item绘制操作
      *
      * @param   painter painter对象
      */
     onDraw(painter: SPainter): void {
+      if (this.selected) {
         painter.pen.lineWidth = painter.toPx(1);
-        painter.pen.color = new SColor("#00FF00");
+        painter.pen.lineDash = [
+          painter.toPx(3),
+          painter.toPx(7)
+        ];
+        painter.pen.color = new SColor("#000000");
         painter.brush.color = SColor.Transparent;
         painter.drawRect(this.boundingRect());
+      }
     } // Function onDraw()
-}
+  }