haojianlong 4 éve
szülő
commit
17bab92118
2 módosított fájl, 295 hozzáadás és 84 törlés
  1. 294 84
      docs/.vuepress/components/scene/items/SImgTextItem.vue
  2. 1 0
      docs/guides/index.js

+ 294 - 84
docs/.vuepress/components/scene/items/SImgTextItem.vue

@@ -17,8 +17,9 @@ import {
     STextItem
 } from "@persagy-web/graph/lib";
 import { SItemStatus } from "@persagy-web/big/lib";
-import { SColor, SPainter, SRect, SSize } from "@persagy-web/draw/lib";
+import { SColor, SPainter, SRect, SSize, SPoint, SFont } from "@persagy-web/draw/lib";
 import { SMouseEvent } from "@persagy-web/base/lib";
+import { Anchor } from "@persagy-web/big/lib/types/topology/Anchor";
 
 /**
  * 图例item  icon
@@ -26,46 +27,101 @@ import { SMouseEvent } from "@persagy-web/base/lib";
  * @author 郝洁 <haojie@persagy.com>
  */
 class SImgTextItem extends SObjectItem {
-
-    /** item状态  */
+    /** item 状态 */
     _status: SItemStatus = SItemStatus.Normal;
     get status(): SItemStatus {
         return this._status;
-    }
-
+    } // Get status
     set status(v: SItemStatus) {
         this._status = v;
+        // 标准状态时
+        if (v == SItemStatus.Normal) {
+            this.moveable = true;
+            this.textItem.moveable = false;
+            this.img.moveable = false;
+        } else if (v == SItemStatus.Edit) {
+            // 编辑状态时
+            this.moveable = false;
+            this.textItem.moveable = true;
+            this.img.moveable = true;
+        } else if (v == SItemStatus.Create) {
+            // 创建状态时
+            this.moveable = true;
+            this.textItem.moveable = false;
+            this.img.moveable = false;
+        }
         this.update();
     }
 
-    /** 是否显示文字  */
+    /** 是否显示文字 */
     _showText: boolean = true;
     get showText(): boolean {
         return this._showText;
     }
-
     set showText(v: boolean) {
+        // 当文字是显示状态时
         if (v === this._showText) {
-            return
+            return;
         }
         this._showText = v;
-        this.textItem.visible = v;
+        // 是否显示文字
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
     }
 
-    /** 是否显示锚点  */
-    _showAnchor: boolean = false;
-    get showAnchor(): boolean {
-        return this._showAnchor;
+    /** 是否被选中 */
+    get selected(): boolean {
+        return this._selected && this.selectable && this.enabled;
+    }
+    set selected(value: boolean) {
+        // 如果选择状态未变更
+        if (this.selected == value) {
+            return;
+        }
+        this._selected = value;
+        // 选中时
+        if (value) {
+            this.img.scale = 1.25;
+        } else {
+            this.img.scale = 1;
+        }
+        this.update();
     }
 
-    set showAnchor(v: boolean) {
-        this._showAnchor = v;
-        this.anchorList.forEach(t => {
-            t.visible = v;
-        })
+    /** 是否激活 */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    }
+    set isActive(v: boolean) {
+        this._isActive = v;
+        // 激活状态
+        if (v) {
+            this.cursor = "pointer";
+            this.textItem.cursor = "pointer";
+            this.img.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+            this.textItem.cursor = "auto";
+            this.img.cursor = "auto";
+        }
+        this.update();
     }
 
-    /** X轴坐标 */
+    /** 激活显示颜色 */
+    _activeColor: SColor = new SColor("#00000033");
+    get activeColor(): SColor {
+        return this._activeColor;
+    }
+    set activeColor(v: SColor) {
+        this._activeColor = v;
+        this.update();
+    }
+
+    /** X 轴坐标 */
     get x(): number {
         return this.pos.x;
     }
@@ -74,75 +130,187 @@ class SImgTextItem extends SObjectItem {
         this.$emit("changePos");
         this.update();
     }
-    /** Y轴坐标 */
+
+    /** Y 轴坐标 */
     get y(): number {
         return this.pos.y;
     }
-
     set y(v: number) {
         this.pos.y = v;
         this.$emit("changePos");
         this.update();
     }
-    /** img Item    */
-    img: SImageItem = new SImageItem(this);
 
-    /** text item   */
+    /** icon宽 */
+    get sWidth(): number {
+        return this.img.width;
+    }
+    set sWidth(v: number) {
+        this.img.width = v;
+        this.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
+        this.changeAnchorPoint();
+        this.update();
+    }
+
+    /** icon高 */
+    get sHeight(): number {
+        return this.img.height;
+    }
+    set sHeight(v: number) {
+        this.img.height = v;
+        this.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
+        this.changeAnchorPoint();
+        this.update();
+    }
+
+    /** 是否显示锚点 */
+    private _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();
+    }
+
+    /** 文本颜色 */
+    get color(): SColor {
+        return this.textItem.color;
+    }
+    set color(v: SColor) {
+        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, 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2134829550,3120755721&fm=26&gp=0.jpg');
+
+    /** text Item */
     textItem: STextItem = new STextItem(this);
 
     /**
      * 构造体
      *
+     * @param parent  父类
+     * @param data    锚点数据
      */
-
-    constructor(parent: SGraphItem | null) {
+    constructor(parent: SGraphItem | null, data?: Anchor[]) {
         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.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
+        this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
+        let anchorPoint;
+        // 锚点数据存在时
+        if (data && data.length) {
+            anchorPoint = data.map(t => {
+                return {
+                    x: t.pos.x,
+                    y: t.pos.y,
+                    id: t.id
+                };
+            });
+        } else {
+            anchorPoint = [
+                { x: this.img.x, y: this.img.y, id: "" },
+                { x: this.img.x, y: this.img.y, id: "" },
+                { x: this.img.x, y: this.img.y, id: "" },
+                { x: this.img.x, y: this.img.y, id: "" }
+                // { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
+                // { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
+                // { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
+                // { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" }
+            ];
+        }
         this.anchorList = anchorPoint.map(t => {
             let item = new SAnchorItem(this);
+            if (t.id) {
+                item.id = t.id;
+            }
             item.moveTo(t.x, t.y);
             return item;
         });
-        this.update();
-        this.textItem.text = "x2";
-        this.textItem.moveTo(18, -6);
+        this.showAnchor = false;
+        this.textItem.text = "测试文本";
+        this.textItem.font.size = 12;
+        // 偏移二分之一文本高度
+        this.textItem.moveTo(
+            this.img.width * 0.5,
+            -(this.font.size * 1.25 * 0.5)
+        );
+        this.showSelect = false;
         this.moveable = true;
         this.selectable = true;
-        this.textItem.enabled = false;
-        this.img.enabled = false;
     }
 
-    onMouseEnter(event: SMouseEvent): boolean {
-        this.showAnchor = true;
-        return true;
-    }
-
-    onMouseLeave(event: SMouseEvent): boolean {
-        this.showAnchor = false;
-        return true;
-    }
-
-    onMouseMove(event: SMouseEvent): boolean {
-        return super.onMouseMove(event);
+    /**
+     * 计算并移动锚点的位置
+     */
+    private changeAnchorPoint(): void {
+        // 判断是否有锚点
+        if (this.anchorList.length) {
+            let anchorPoint = [
+                { x: this.img.x, y: this.img.y },
+                { x: this.img.x, y: this.img.y },
+                { x: this.img.x, y: this.img.y },
+                { x: this.img.x, y: this.img.y }
+                // { x: this.img.x, y: this.img.y + this.img.height / 2 },
+                // { x: this.img.x, y: this.img.y - this.img.height / 2 },
+                // { x: this.img.x - this.img.width / 2, y: this.img.y },
+                // { x: this.img.x + this.img.width / 2, y: this.img.y }
+            ];
+            this.anchorList.forEach((item, index) => {
+                item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
+            });
+        }
     }
 
     /**
      * 鼠标按下事件
      *
+     * @param event   事件对象
+     * @return 是否处理事件
      */
     onMouseDown(event: SMouseEvent): boolean {
-        console.log(this.textItem)
+        console.log(123123123)
+        // console.log(super.onMouseDown(event));
+        // 如果为show状态 双击改对象则需改为编辑状态
         if (this.status == SItemStatus.Normal) {
             return super.onMouseDown(event);
         } else if (this.status == SItemStatus.Edit) {
+            // 编辑状态时
             return super.onMouseDown(event);
         }
+        console.log('----------------')
         return true;
     }
 
@@ -152,7 +320,7 @@ class SImgTextItem extends SObjectItem {
      * @param oldSize 改之前的大小
      * @param newSize 改之后大小
      */
-    onResize(oldSize: SSize, newSize: SSize) {
+    onResize(oldSize: SSize, newSize: SSize): void {
         console.log(arguments);
     }
 
@@ -163,38 +331,91 @@ class SImgTextItem extends SObjectItem {
      * @return 是否处理事件
      */
     onDoubleClick(event: SMouseEvent): boolean {
-        this.status = SItemStatus.Edit;
-        return true;
+        // 如果为show状态 双击改对象则需改为编辑状态,处于编辑状态时
+        if (SItemStatus.Normal == this.status) {
+            this.status = SItemStatus.Edit;
+            this.grabItem(this);
+        } else if (SItemStatus.Edit == this.status) {
+            // 处于编辑状态时
+            this.status = SItemStatus.Normal;
+            this.releaseItem();
         }
+        this.update();
+        return true;
+    }
 
-        /**
-         * 宽高发发生变化
-         *
-         * @return 所有子对象的并集
-         */
-        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;
+    /**
+     * Item 对象边界区域
+     *
+     * @return 边界矩阵
+     */
+    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)
+            );
         }
 
-        /**
-         * Item绘制操作
-         *
-         * @param painter painter对象
-         */
-        onDraw(painter: SPainter): void {
+        return rect.adjusted(-5, -5, 10, 10);
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        // 编辑状态时
+        if (this.status == SItemStatus.Edit) {
             painter.pen.lineWidth = painter.toPx(1);
-            painter.pen.color = new SColor("#00FF00");
+            painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
+            painter.pen.color = SColor.Black;
             painter.brush.color = SColor.Transparent;
-            if (this.showAnchor) {
-                painter.brush.color = SColor.Gray
-            }
             painter.drawRect(this.boundingRect());
         }
+
+        // 处于激活状态时
+        if (this.isActive) {
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = this.activeColor;
+            // 是否选中
+            if (this.selected) {
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = this.activeColor;
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+                painter.drawCircle(
+                    this.img.x,
+                    this.img.y,
+                    (this.sWidth / 2.0 + 3) * 1.25
+                );
+            } else {
+                painter.drawCircle(
+                    this.img.x,
+                    this.img.y,
+                    this.sWidth / 2.0 + 3
+                );
+            }
+        } else {
+            // 是否选中
+            if (this.selected) {
+                painter.pen.color = SColor.Transparent;
+                painter.brush.color = SColor.Transparent;
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0);
+            }
+        }
     }
+}
 
 
     export default {
@@ -212,7 +433,6 @@ class SImgTextItem extends SObjectItem {
          * 页面挂载
          */
         mounted() {
-            console.log(22222222222222222)
             // @ts-ignore
             this.view = new SGraphView("editPolygon");
             // @ts-ignore
@@ -247,13 +467,3 @@ class SImgTextItem extends SObjectItem {
         }
     }
 </script>
-
-<style scoped>
-    canvas {
-        border: 1px solid #ccc;
-    }
-
-    canvas:focus {
-        outline: none;
-    }
-</style>

+ 1 - 0
docs/guides/index.js

@@ -46,6 +46,7 @@ const content = [
                     ["/guides/scene/items/text", "文字"],
                     ["/guides/scene/items/image", "图片"],
                     ["/guides/scene/items/svg", "SVG 图"],
+                    ["/guides/scene/items/imgText", "图例 item"],
                 ]
             },
             {