Browse Source

Merge remote-tracking branch 'origin/master'

jxing 4 years ago
parent
commit
092a17ce3d

+ 253 - 0
docs/.vuepress/components/example/web/graph/scene/SEditLine.vue

@@ -0,0 +1,253 @@
+<template>
+    <div>
+        <el-button @click="show">展示</el-button>
+        <el-button @click="create">创建</el-button>
+        <el-button @click="edit">编辑</el-button>
+        <canvas id="editLine" width="740" height="400"  tabindex="0" />
+    </div>
+</template>
+<script lang='ts'>
+    import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/";
+    import {SMouseEvent} from "@saga-web/base/";
+    import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw";
+    import {SRelationState} from "@saga-web/big/lib/enums/SRelationState";
+    import {SMathUtil} from "@saga-web/big/lib/utils/SMathUtil";
+
+    /**
+     * 直线item
+     *
+     * */
+
+    class SLineItem extends SGraphItem {
+        /** 线段   */
+        line: SPoint[] = [];
+        /** 是否完成绘制  */
+        _status: SRelationState = SRelationState.Create;
+        get status(): SRelationState {
+            return this._status;
+        }
+        set status(v: SRelationState) {
+            this._status = v;
+            this.update();
+        }
+        /** 线条颜色    */
+        _strokeColor: string = "#000000";
+        get strokeColor(): string {
+            return this._strokeColor;
+        }
+        set strokeColor(v: string) {
+            this._strokeColor = v;
+            this.update();
+        }
+        /** 填充色 */
+        _fillColor: string = "#2196f3";
+        get fillColor(): string {
+            return this._fillColor;
+        }
+        set fillColor(v: string) {
+            this._fillColor = v;
+            this.update();
+        }
+        /** 线条宽度    */
+        _lineWidth: number = 1;
+        get lineWidth(): number {
+            return this._lineWidth;
+        }
+        set lineWidth(v: number) {
+            this._lineWidth = v;
+            this.update();
+        }
+        /** 拖动灵敏度   */
+        dis: number = 10;
+        /** 拖动灵敏度   */
+        sceneDis: number = 10;
+
+        /**
+         * 构造函数
+         *
+         * @param   parent  父级
+         * @param   line    坐标集合
+         * */
+        constructor(parent: SGraphItem | null, line: SPoint[]);
+
+        /**
+         * 构造函数
+         *
+         * @param   parent  父级
+         * @param   point   第一个点坐标
+         * */
+        constructor(parent: SGraphItem | null, point: SPoint);
+
+        /**
+         * 构造函数
+         *
+         * @param   parent  父级
+         * @param   l       坐标集合|第一个点坐标
+         * */
+        constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
+            super(parent);
+            if (l instanceof SPoint) {
+                this.line.push(l);
+            } else {
+                this.line = l;
+            }
+        }
+
+        /**
+         * 鼠标按下事件
+         *
+         * @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) {
+            } else if (this.status == SRelationState.Create) {
+
+            }
+            this.$emit("mousedown");
+            return true;
+        } // Function onMouseDown()
+
+        /**
+         * 鼠标移动事件
+         *
+         * @param   event   鼠标事件
+         * @return  是否处理事件
+         * */
+        onMouseMove(event: SMouseEvent): boolean {
+            if (this.status == SRelationState.Create) {
+
+                return true;
+            } else {
+                return super.onMouseMove(event);
+            }
+        } // Function onMouseMove()
+
+        /**
+         * 鼠标移动事件
+         *
+         * @param   event   鼠标事件
+         * @return  是否处理事件
+         * */
+        onMouseUp(event: SMouseEvent): boolean {
+            // if (this.status == SRelationState.Create) {
+            //     this.status = SRelationState.Edit;
+            //     return true;
+            // } else {
+                return super.onMouseUp(event);
+            // }
+        } // Function onMouseUp()
+
+        /**
+         * 判断点是否在区域内
+         *
+         * @param   x
+         * @param   y
+         * @return  true-是
+         */
+        contains(x: number, y: number): boolean {
+            if (this.line.length == 2) {
+                let p = new SPoint(x, y);
+                if (
+                    SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
+                    this.dis
+                ) {
+                    return true;
+                }
+            }
+            return false;
+        } // Function contains()
+
+        /**
+         * 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();
+            }
+        } // Function boundingRect()
+
+        /**
+         * Item绘制操作
+         *
+         * @param   painter painter对象
+         */
+        onDraw(painter: SPainter): void {
+            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) {
+                // 绘制外轮廓
+                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 = new SColor(this.fillColor);
+
+                    painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));
+
+                    painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
+                }
+            }
+        } // Function onDraw()
+    } // Class SLineItem
+
+    export default {
+        data() {
+            return {
+                scene: null,
+                view: null
+            };
+        },
+        mounted(): void {
+            this.view = new SGraphView("editLine");
+        },
+        methods: {
+            show() {
+                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.Normal;
+                scene.addItem(lineItem);
+                this.view.fitSceneToView();
+            },
+            create() {
+                const scene = new SGraphScene();
+                this.view.scene = scene;
+                const lineItem = new SLineItem(null, [] );
+                lineItem.status = SRelationState.Create;
+                scene.addItem(lineItem);
+                scene.grabItem = lineItem;
+                this.view.fitSceneToView();
+            },
+            edit() {
+
+            }
+        }
+    };
+</script>

+ 1 - 0
docs/dev/saga-graphy/index.js

@@ -25,6 +25,7 @@ const content = [
                     ["/dev/saga-graphy/scene-manage/items/clock", "时钟"],
                     ["/dev/saga-graphy/scene-manage/items/text", "文本"],
                     ["/dev/saga-graphy/scene-manage/items/image", "图片"],
+                    ["/dev/saga-graphy/scene-manage/items/editLine", "可编辑直线"],
                     ["/dev/saga-graphy/scene-manage/items/edit-polygon", "可编辑多边形示例"],
                     ["/dev/saga-graphy/scene-manage/items/imgText", "图例item(图片文本组合)"]
                 ]

+ 17 - 0
docs/dev/saga-graphy/scene-manage/items/editLine.md

@@ -0,0 +1,17 @@
+# 可编辑直线示例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-SEditLine/>
+
+::: tip 注
+1、可以通过双击table在编辑状态和展示状态来回切换,<br/>
+2、创建状态时;enter + 左键闭合多边形 <br/>
+3、编辑状态时:鼠标点击在边上可加点,可拖动点;<br/>
+4、编辑状态时:通过ALT键 + 鼠标左键 删除顶点
+:::
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/scene/SEditLine.vue
+:::

+ 18 - 11
docs/dev/saga-graphy/system-diagram/json-file.md

@@ -6,8 +6,10 @@
 ## 整体数据格式
 
 ```
-    {
-        EntityList:[
+{
+    Data:[
+        {
+            EntityList:[],
             Elements:{                          // 系统图展示所需数据
                 Nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
                 Markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
@@ -19,21 +21,26 @@
             ProjectID: '',                      // 项目ID
             BuildingID: '',                     // 建筑ID
             FloorID: '',                        // 楼层id
-            Note: '',                           // 图说明
-        ]
-    }
+            Note: ''                           // 图说明
+            
+        }
+    ],
+    Message: '',
+    Result: ''
+}
 ```
 
 ## 图例节点
 
 ```
     Nodes:[
-        {
+        {   
             ID: '',                             // ID
             Name: '',                           // 名称
             AttachObjectIds:[],                 // 返回工程信息化对象 ID 列表
-            GraphElementType: '',               // 图标,区域类型
+            GraphElementType: '',               // 图例类型 None/Line/Zone/Image:非图例/线条/区域类型/图标
             GraphElementId: '',                 // 对应的图元ID
+            Num: 1                              //图例数量
             Pos: {X: 0, Y: 0},                  // 位置
             Scale: {X: 1, Y: 1, Z: 1},          // 缩放
             Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
@@ -62,7 +69,7 @@
         {
             ID: '',                             // ID
             Name: '',                           // 名称
-            Type: '',                           // 图标(Image),线类型(Line)
+            Type: '',                           // 图标(Image),线类型(Line),文本(Text)
             Pos: {X: 0, y: 0},                  // 位置
             Scale: {X: 1, Y: 1, Z: 1},          // 缩放
             Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
@@ -81,12 +88,12 @@
             ID: '',                             // ID
             Name: '',                           // 名称
             GraphElementId: '',                 // 对应的图例ID
-            NodeID1: '',                        // 关联节点1_id
-            NodeID2: '',                        // 关联节点2_id
+            Node1ID: '',                        // 关联节点1_id
+            Node2ID: '',                        // 关联节点2_id
             Anchor1ID: '',                      // 关联锚点1_id
             Anchor2ID: '',                      // 关联锚点2_id
             Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
-            LineType: '',                       // 直线,水平垂直
+            LineType: '',                       // 直线(Line),水平垂直
             PointList: [],                      // 线的顶点坐标
             Style: ''                           // 线的绘图样式
         },