merge

docs/.vuepress/components/example/web/graph/scene/SEditLine.vue

@@ -16,11 +16,30 @@
     /**
      * 直线item
      *
+     * @author  张宇(taohuzy@163.com)
      * */
 
     class SLineItem extends SGraphItem {
+        /** X坐标最小值  */
+        private minX = Number.MAX_SAFE_INTEGER;
+        /** X坐标最大值  */
+        private maxX = Number.MIN_SAFE_INTEGER;
+        /** Y坐标最小值  */
+        private minY = Number.MAX_SAFE_INTEGER;
+        /** Y坐标最大值  */
+        private maxY = Number.MIN_SAFE_INTEGER;
+
         /** 线段   */
-        line: SPoint[] = [];
+        _line: SPoint[] = [];
+        get line(): SPoint[] {
+            return this._line;
+        }
+        set line(arr: SPoint[]) {
+            this._line = arr;
+            this._xyzListToSPointList(arr);
+            this.update();
+        }
+
         /** 是否完成绘制  */
         _status: SRelationState = SRelationState.Create;
         get status(): SRelationState {
@@ -30,6 +49,7 @@
             this._status = v;
             this.update();
         }
+
         /** 线条颜色    */
         _strokeColor: string = "#000000";
         get strokeColor(): string {
@@ -39,6 +59,7 @@
             this._strokeColor = v;
             this.update();
         }
+
         /** 填充色 */
         _fillColor: string = "#2196f3";
         get fillColor(): string {
@@ -48,6 +69,7 @@
             this._fillColor = v;
             this.update();
         }
+
         /** 线条宽度    */
         _lineWidth: number = 1;
         get lineWidth(): number {
@@ -57,11 +79,16 @@
             this._lineWidth = v;
             this.update();
         }
+
         /** 拖动灵敏度   */
         dis: number = 10;
+
         /** 拖动灵敏度   */
         sceneDis: number = 10;
 
+        /** 当前点索引   */
+        curIndex: number = -1;
+
         /**
          * 构造函数
          *
@@ -94,24 +121,77 @@
         }
 
         /**
+         * 添加点至数组中
+         *
+         * @param   p       添加的点
+         * @param   index   添加到的索引
+         * */
+        private addPoint(p: SPoint): void {
+            if (this.line.length < 2) {
+                this.line.push(p);
+            } else {
+                this.line[1] = p;
+                this.status = SRelationState.Normal;
+            }
+            this._xyzListToSPointList(this.line);
+            this.update();
+        } // Function addPoint()
+
+        /**
+         * 鼠标双击事件
+         *
+         * @param	event         事件参数
+         * @return	boolean
+         */
+        onDoubleClick(event: SMouseEvent): boolean {
+            if (this.contains(event.x, event.y)) { // 判断是否点击到线上
+                if (this.status == SRelationState.Normal) {
+                    if (this.scene) {
+                        this.scene.grabItem = this;
+                    }
+                    this.status = SRelationState.Edit;
+                } else if (this.status = SRelationState.Edit) {
+                    this.status = SRelationState.Normal;
+                }
+                this.update();
+            }
+            return true;
+        } // Function onDoubleClick()
+
+        /**
          * 鼠标按下事件
          *
          * @param   event   鼠标事件
          * @return  是否处理事件
          * */
         onMouseDown(event: SMouseEvent): boolean {
-            console.log(this);
             if (this.status == SRelationState.Normal) {
                 return super.onMouseDown(event);
             } else if (this.status == SRelationState.Edit) {
+                // 判断是否点击到端点上(获取端点索引值)
+                this.findNearestPoint(new SPoint(event.x, event.y));
             } else if (this.status == SRelationState.Create) {
-
+                this.addPoint(new SPoint(event.x, event.y));
+                return true;
             }
             this.$emit("mousedown");
             return true;
         } // Function onMouseDown()
 
         /**
+         * 鼠标抬起事件
+         *
+         * @param	event         事件参数
+         * @return	boolean
+         */
+        onMouseUp(event: SMouseEvent): boolean {
+            if (this._status == SRelationState.Edit) {
+                this.curIndex = -1;
+            }
+            return true;
+        } // Function onMouseUp()
+
+        /**
          * 鼠标移动事件
          *
          * @param   event   鼠标事件
@@ -119,27 +199,72 @@
          * */
         onMouseMove(event: SMouseEvent): boolean {
             if (this.status == SRelationState.Create) {
-
-                return true;
+                if (this.line[0] instanceof SPoint) {
+                    this.line[1] = new SPoint(event.x, event.y);
+                }
+            } else if (this.status == SRelationState.Edit) {
+                if (-1 != this.curIndex) {
+                    this.line[this.curIndex].x = event.x;
+                    this.line[this.curIndex].y = event.y;
+                }
             } else {
                 return super.onMouseMove(event);
             }
+            this._xyzListToSPointList(this.line);
+            this.update();
+            return true;
         } // Function onMouseMove()
 
         /**
-         * 鼠标移动事件
+         * 获取点击点与Point[]中的点距离最近点
          *
-         * @param   event   鼠标事件
-         * @return  是否处理事件
+         * @param   p   鼠标点击点
          * */
-        onMouseUp(event: SMouseEvent): boolean {
-            // if (this.status == SRelationState.Create) {
-            //     this.status = SRelationState.Edit;
-            //     return true;
-            // } else {
-                return super.onMouseUp(event);
-            // }
-        } // Function onMouseUp()
+        findNearestPoint(p: SPoint): void {
+            let len = this.sceneDis;
+            for (let i = 0; i < 2; i++) {
+                let dis = SMathUtil.pointDistance(
+                    p.x,
+                    p.y,
+                    this.line[i].x,
+                    this.line[i].y
+                );
+                if (dis < len) {
+                    len = dis;
+                    this.curIndex = i;
+                }
+            }
+        } // Function findNearestPoint()
+
+        /**
+         * xyz数据转换为SPoint格式函数；获取外接矩阵参数
+         *
+         * @param arr    外层传入的数据PointList
+         */
+        protected _xyzListToSPointList(arr: SPoint[]): void {
+            if (arr.length) {
+                this.minX = Number.MAX_SAFE_INTEGER;
+                this.maxX = Number.MIN_SAFE_INTEGER;
+                this.minY = Number.MAX_SAFE_INTEGER;
+                this.maxY = Number.MIN_SAFE_INTEGER;
+                arr.forEach(it => {
+                    let x = it.x,
+                        y = it.y;
+                    if (x < this.minX) {
+                        this.minX = x;
+                    }
+                    if (y < this.minY) {
+                        this.minY = y;
+                    }
+                    if (x > this.maxX) {
+                        this.maxX = x;
+                    }
+                    if (y > this.maxY) {
+                        this.maxY = y;
+                    }
+                });
+            }
+        }
 
         /**
          * 判断点是否在区域内
@@ -162,25 +287,31 @@
         } // Function contains()
 
         /**
+         * 取消操作item事件
+         *
+         * */
+        cancelOperate(): void {
+            if (this.status == SRelationState.Create) {
+                this.parent = null;
+                this.releaseItem();
+            } else if (this.status == SRelationState.Edit) {
+                this.status = SRelationState.Normal;
+                this.releaseItem();
+            }
+        } // Function cancelOperate()
+
+        /**
          * Item对象边界区域
          *
          * @return	SRect
          */
         boundingRect(): SRect {
-            if (this.line.length == 2) {
-                let x: number = this.line[0].x > this.line[1].x ? this.line[1].x : this.line[0].x;
-                let y: number = this.line[0].x > this.line[1].x ? this.line[1].y : this.line[0].y;
-                let width: number = Math.abs(this.line[0].x - this.line[1].x);
-                let height: number = Math.abs(this.line[0].y - this.line[1].y);
-                return new SRect(
-                    x,
-                    y,
-                    width,
-                    height
-                );
-            } else {
-                return new SRect();
-            }
+            return new SRect(
+                this.minX,
+                this.minY,
+                this.maxX - this.minX,
+                this.maxY - this.minY
+            );
         } // Function boundingRect()
 
         /**
@@ -192,25 +323,27 @@
             this.sceneDis = painter.toPx(this.dis);
             painter.pen.lineWidth = painter.toPx(this.lineWidth);
             painter.pen.color = new SColor(this.strokeColor);
-            if (this.p1 instanceof SPoint && this.p2 instanceof SPoint) {
+            if (this.line.length == 2) {
                 // 绘制外轮廓
-                painter.brush.color = SColor.Transparent;
-                painter.pen.color = new SColor("#128eee");
-                painter.drawRect(this.boundingRect());
-
-                // 绘制基本图形
-                painter.pen.color = new SColor(this.strokeColor);// 需注释
-                painter.drawLine(this.p1, this.p2);
-
-                // 编辑态
-                if (this.status == SRelationState.Edit) {
-                    painter.brush.color = SColor.White;
+                // painter.brush.color = SColor.Transparent;
+                // painter.pen.color = new SColor("#128eee");
+                // painter.drawRect(this.boundingRect());
 
-                    // painter.brush.color = new SColor(this.fillColor);
+                // 绘制直线
+                painter.pen.color = new SColor(this.strokeColor);
+                painter.drawLine(this.line[0], this.line[1]);
 
-                    painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));
-
-                    painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
+                if (this.status == SRelationState.Edit || this.status == SRelationState.Create) {
+                    // 绘制端点
+                    painter.brush.color = new SColor(this.fillColor);
+                    painter.drawCircle(this.line[0].x, this.line[0].y, painter.toPx(5));
+                    painter.drawCircle(this.line[1].x, this.line[1].y, painter.toPx(5));
+                }
+            } else if (this.line.length == 1) {
+                if (this.status == SRelationState.Edit || this.status == SRelationState.Create) {
+                    // 绘制端点
+                    painter.brush.color = new SColor(this.fillColor);
+                    painter.drawCircle(this.line[0].x, this.line[0].y, painter.toPx(5));
                 }
             }
         } // Function onDraw()
@@ -246,7 +379,14 @@
                 this.view.fitSceneToView();
             },
             edit() {
-
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
+                const lineItem = new SLineItem(null, line);
+                lineItem.status = SRelationState.Edit;
+                scene.addItem(lineItem);
+                scene.grabItem = lineItem;
+                this.view.fitSceneToView();
             }
         }
     };