Procházet zdrojové kódy

折线item修改;基本选择器添加

haojianlong před 5 roky
rodič
revize
3133534468

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

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/big",
-    "version": "1.0.11",
+    "version": "1.0.12",
     "description": "上格云建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 13 - 0
saga-web-big/src/enums/SItemStatus.ts

@@ -0,0 +1,13 @@
+/**
+ * item状态状态
+ *
+ * @author
+ */
+export enum SItemStatus {
+    /** 标准状态    */
+    Normal,
+    /** 编辑状态    */
+    Edit,
+    /** 创建态 */
+    Create
+} // Enum SItemStatus

+ 3 - 1
saga-web-big/src/index.ts

@@ -25,6 +25,7 @@ import { SIconTextItem } from "./items/SIconTextItem";
 import { SPolylineItem } from "./items/SPolylineItem";
 import { SLineItem } from "./items/SLineItem";
 import { SRelationState } from "./enums/SRelationState";
+import { SItemStatus } from "./enums/SItemStatus";
 
 export {
     SAnchorItem,
@@ -53,5 +54,6 @@ export {
     SEquipParser,
     SBigParser,
     SIconTextItem,
-    SRelationState
+    SRelationState,
+    SItemStatus
 };

+ 52 - 37
saga-web-big/src/items/SPolylineItem.ts

@@ -1,7 +1,6 @@
-
 import { SColor, SLine, SPainter, SPoint } from "@saga-web/draw/lib";
 import { SMouseEvent } from "@saga-web/base";
-import { SRelationState } from "..";
+import { SItemStatus } from "..";
 import { SMathUtil } from "../utils/SMathUtil";
 import { SGraphItem } from "@saga-web/graph/lib";
 
@@ -14,11 +13,11 @@ export class SPolylineItem extends SGraphItem {
     /** 折点信息    */
     pointList: SPoint[] = [];
     /** 是否绘制完成  */
-    _status: SRelationState = SRelationState.Create;
-    get status(): SRelationState {
+    _status: SItemStatus = SItemStatus.Create;
+    get status(): SItemStatus {
         return this._status;
     }
-    set status(v: SRelationState) {
+    set status(v: SItemStatus) {
         this._status = v;
         this.update();
     }
@@ -133,19 +132,24 @@ export class SPolylineItem extends SGraphItem {
      * @return  boolean 是否处理事件
      * */
     onMouseDown(event: SMouseEvent): boolean {
+        this.curIndex = -1;
         if (event.buttons == 1) {
-            if (this.status == SRelationState.Create) {
+            if (this.status == SItemStatus.Create) {
                 this.addPoint(new SPoint(event.x, event.y));
                 return true;
-            } else if (this.status == SRelationState.Edit) {
+            } else if (this.status == SItemStatus.Edit) {
+                // 查询鼠标最近的索引
                 this.findNearestPoint(new SPoint(event.x, event.y));
+                // 增加点
+                // 删除点
                 if (event.altKey && this.canHandle(this.curIndex)) {
                     this.pointList.splice(this.curIndex, 1);
                     this.curIndex = -1;
-                    this.update();
                 }
+                this.update();
                 return true;
             } else {
+                return super.onMouseDown(event);
             }
         }
         return super.onMouseDown(event);
@@ -158,7 +162,7 @@ export class SPolylineItem extends SGraphItem {
      * @return  boolean 是否处理事件
      * */
     onMouseMove(event: SMouseEvent): boolean {
-        if (this.status == SRelationState.Create) {
+        if (this.status == SItemStatus.Create) {
             if (this.lastPoint) {
                 this.lastPoint.x = event.x;
                 this.lastPoint.y = event.y;
@@ -167,7 +171,7 @@ export class SPolylineItem extends SGraphItem {
             }
             this.update();
             return true;
-        } else if (this.status == SRelationState.Edit) {
+        } else if (this.status == SItemStatus.Edit) {
             if (this.canHandle(this.curIndex)) {
                 this.pointList[this.curIndex].x = event.x;
                 this.pointList[this.curIndex].y = event.y;
@@ -197,30 +201,12 @@ export class SPolylineItem extends SGraphItem {
      * @return	boolean
      */
     onDoubleClick(event: SMouseEvent): boolean {
-        if (this.status == SRelationState.Create) {
-            this.status = SRelationState.Normal;
-        } else if (this.status == SRelationState.Edit) {
-            let len = SMathUtil.pointToLine(
-                    new SPoint(event.x, event.y),
-                    new SLine(this.pointList[0], this.pointList[1])
-                ),
-                index = 0;
-            if (this.pointList.length > 2) {
-                for (let i = 1; i < this.pointList.length - 1; i++) {
-                    let dis = SMathUtil.pointToLine(
-                        new SPoint(event.x, event.y),
-                        new SLine(this.pointList[i], this.pointList[i + 1])
-                    );
-                    if (dis.MinDis < len.MinDis) {
-                        len = dis;
-                        index = i;
-                    }
-                }
-            }
-            if (len.Point) {
-                this.pointList.splice(index + 1, 0, len.Point);
-                this.update();
-            }
+        if (this.status == SItemStatus.Normal) {
+            this.status = SItemStatus.Edit;
+        } else if (this.status == SItemStatus.Edit) {
+            this.status = SItemStatus.Normal;
+        } else if (this.status == SItemStatus.Create) {
+            this.status = SItemStatus.Edit;
         }
         this.$emit("onDoubleClick", event);
         return true;
@@ -233,7 +219,7 @@ export class SPolylineItem extends SGraphItem {
      */
     onKeyUp(event: KeyboardEvent): void {
         if (event.keyCode == 13) {
-            this.status = SRelationState.Normal;
+            this.status = SItemStatus.Edit;
         }
     } // Function onKeyUp()
 
@@ -259,6 +245,35 @@ export class SPolylineItem extends SGraphItem {
     } // Function findNearestPoint()
 
     /**
+     * 计算增加点的位置
+     *
+     * @param   p   鼠标点击点
+     * */
+    findAddPos(p: SPoint): void {
+        let len = {
+                MinDis: this.sceneDis
+            },
+            index = 0;
+        if (this.pointList.length > 2) {
+            for (let i = 0; i < this.pointList.length - 1; i++) {
+                let dis = SMathUtil.pointToLine(
+                    new SPoint(p.x, p.y),
+                    new SLine(this.pointList[i], this.pointList[i + 1])
+                );
+                if (dis.MinDis < len.MinDis) {
+                    len = dis;
+                    index = i;
+                }
+            }
+            // @ts-ignore
+            if (len.Point) {
+                // @ts-ignore
+                this.addPoint(new SPoint(len.Point.X, len.Point.Y), index);
+            }
+        }
+    } // Function findAddPos()
+
+    /**
      * 判断点是否在区域内
      *
      * @param   x
@@ -297,12 +312,12 @@ export class SPolylineItem extends SGraphItem {
         painter.pen.color = new SColor(this.strokeColor);
         painter.drawPolyline(this.pointList);
         // 创建状态
-        if (this.status == SRelationState.Create && this.lastPoint) {
+        if (this.status == SItemStatus.Create && this.lastPoint) {
             painter.drawLine(
                 this.pointList[this.pointList.length - 1],
                 this.lastPoint
             );
-        } else if (this.status == SRelationState.Edit) {
+        } else if (this.status == SItemStatus.Edit) {
             // 编辑状态
             this.pointList.forEach((t, i): void => {
                 painter.brush.color = SColor.White;

+ 1 - 1
saga-web-draw/src/SFont.ts

@@ -19,7 +19,7 @@ export class SFont {
     textAlign = STextAlign.Start;
 
     /** 文本基线对齐选项 */
-    textBaseLine = STextBaseLine.Alphabetic;
+    textBaseLine = STextBaseLine.Top;
 
     /** 文本方向 */
     textDirection = STextDirection.Inherit;

+ 9 - 6
saga-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -501,8 +501,9 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   value       对齐方式
      */
     private setTextAlign(value: STextAlign): void {
-        // TODO: 找原因,去下边一行
-        if (value == undefined) return;
+        if (value == undefined) {
+            return;
+        }
         if (value === STextAlign.Start) {
             this._canvas.textAlign = "start";
         } else if (value === STextAlign.End) {
@@ -522,8 +523,9 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   value       对齐方式
      */
     private setBaseLine(value: STextBaseLine): void {
-        // TODO: 找原因,去下边一行
-        if (value == undefined) return;
+        if (value == undefined) {
+            return;
+        }
         if (value == STextBaseLine.Alphabetic) {
             this._canvas.textBaseline = "alphabetic";
         } else if (value == STextBaseLine.Top) {
@@ -545,8 +547,9 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   value       文本方向
      */
     private setTextDirection(value: STextDirection): void {
-        // TODO: 找原因,去下边一行
-        if (value == undefined) return;
+        if (value == undefined) {
+            return;
+        }
         if (value == STextDirection.Inherit) {
             this._canvas.direction = "inherit";
         } else if (value == STextDirection.LTR) {

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

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/graph",
-    "version": "2.1.59",
+    "version": "2.1.60",
     "description": "上格云二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 12 - 7
saga-web-graph/src/SGraphItem.ts

@@ -367,9 +367,10 @@ export class SGraphItem extends SObject {
             }
         }
 
-        // if (this.selectable) {
-        //     this.clickSelect(event);
-        // }
+        if (this.selectable) {
+            this.clickSelect(event);
+        }
+
         if (this.moveable) {
             this._mouseDownPos = new SPoint(event.x, event.y);
             this._isMoving = true;
@@ -577,14 +578,18 @@ export class SGraphItem extends SObject {
      */
     private clickSelect(event: SMouseEvent): void {
         // 如果Item不可被选中,或没有按下鼠标左键,则直接返回
-        if (!this.selectable) {
+        if (!this.selectable && event.buttons != SMouseButton.LeftButton) {
+            return;
+        }
+        const scene = this.scene;
+        if (scene == null) {
             return;
         }
-
         // 如果按下Ctrl键,只改变当前item的选择标志
         if (event.ctrlKey) {
-            this.selected = !this.selected;
-            return;
+            scene.selectContainer.toggleItem(this);
+        } else {
+            scene.selectContainer.setItem(this);
         }
 
         this.selected = true;

+ 3 - 0
saga-web-graph/src/SGraphScene.ts

@@ -2,6 +2,7 @@ import { SMouseEvent } from "@saga-web/base/lib";
 import { SPainter, SRect } from "@saga-web/draw/lib";
 import { SGraphItem } from "./SGraphItem";
 import { SGraphView } from "./SGraphView";
+import { SGraphSelectContainer } from "./SGraphSelectContainer";
 
 /**
  * Graphy图形引擎场景类
@@ -17,6 +18,8 @@ export class SGraphScene {
     grabItem: SGraphItem | null = null;
     /** 鼠标所在Item */
     hoverItem: SGraphItem | null = null;
+    /** 选择器 */
+    selectContainer: SGraphSelectContainer = new SGraphSelectContainer();
 
     /**
      * 构造函数

+ 79 - 0
saga-web-graph/src/SGraphSelectContainer.ts

@@ -0,0 +1,79 @@
+import { SGraphItem } from "./SGraphItem";
+
+/**
+ * 基本选择器
+ *
+ * @author  郝建龙
+ */
+export class SGraphSelectContainer {
+    /** 选择对象list    */
+    private itemList: SGraphItem[] = [];
+
+    /**
+     * 构造函数
+     *
+     * */
+    constructor() {} // Constructor
+
+    /**
+     * 添加item到list
+     *
+     * @param   item    当前选中的item
+     * */
+    addItem(item: SGraphItem): void {
+        for (let i = 0; i < this.itemList.length - 1; i++) {
+            if (this.itemList[i] == item) {
+                return;
+            }
+        }
+        item.selected = true;
+        this.itemList.push(item);
+    } // Function addItem()
+
+    /**
+     * 清空再添加(事件+复制数组)
+     *
+     * @param   item    当前选中的item
+     * */
+    setItem(item: SGraphItem): void {
+        for (let i = 0; i < this.itemList.length - 1; i++) {
+            item.selected = false;
+        }
+        this.itemList.length = 0;
+        item.selected = true;
+        this.itemList.push(item);
+    } // Function setItem()
+
+    /**
+     * 清空选择对象
+     *
+     * */
+    clear(): void {
+        this.itemList.forEach((t: SGraphItem): void => {
+            t.selected = false;
+        });
+        this.itemList.length = 0;
+    } // Function clear()
+
+    /**
+     * 切换选择对象
+     *
+     * @param   item    当前选中的item
+     * */
+    toggleItem(item: SGraphItem): void {
+        let index = -1;
+        for (let i = 0; i < this.itemList.length - 1; i++) {
+            if (this.itemList[i] == item) {
+                index = i;
+                item.selected = false;
+                break;
+            }
+        }
+        if (index > -1) {
+            this.itemList.splice(index, 1);
+        } else {
+            item.selected = true;
+            this.itemList.push(item);
+        }
+    } // Function toggleItem()
+} // Class SGraphSelectContainer

+ 2 - 2
saga-web-graph/src/commands/SGraphCommand.ts

@@ -31,14 +31,14 @@ import { SGraphScene } from "../SGraphScene";
  */
 export abstract class SGraphCommand extends SUndoCommand {
     /** 命令所属的场景类 */
-    scene: SGraphScene;
+    scene: SGraphScene | null = null;
 
     /**
      * 构造函数
      *
      * @param   scene       命令所属的场景类
      */
-    protected constructor(scene: SGraphScene) {
+    protected constructor(scene: SGraphScene | null) {
         super();
         this.scene = scene;
     } // Constructor

+ 2 - 1
saga-web-graph/src/index.ts

@@ -30,5 +30,6 @@ export { SGraphClockItem, SGraphLineItem };
 import { SGraphItem } from "./SGraphItem";
 import { SGraphScene } from "./SGraphScene";
 import { SGraphView } from "./SGraphView";
+import { SGraphSelectContainer } from "./SGraphSelectContainer";
 
-export { SGraphItem, SGraphScene, SGraphView };
+export { SGraphItem, SGraphScene, SGraphView, SGraphSelectContainer };