Преглед изворни кода

Merge remote-tracking branch 'origin/master'

jxing пре 4 година
родитељ
комит
4f4aaaa24b

+ 3 - 0
docs/.vuepress/components/example/web/graph/.idea/.gitignore

@@ -0,0 +1,3 @@
+
+# Default ignored files
+/workspace.xml

+ 6 - 0
docs/.vuepress/components/example/web/graph/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
docs/.vuepress/components/example/web/graph/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/graph.iml" filepath="$PROJECT_DIR$/.idea/graph.iml" />
+    </modules>
+  </component>
+</project>

+ 6 - 0
docs/.vuepress/components/example/web/graph/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../../../../../.." vcs="Git" />
+  </component>
+</project>

+ 53 - 0
docs/.vuepress/components/example/web/graph/MapDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <el-button @click="showMap(1)">查看地图1</el-button>
+        <el-button @click="showMap(2)">查看地图2</el-button>
+        <canvas id="mapDemo" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@saga-web/graph/lib";
+    import { SFloorParser } from "@saga-web/big/lib";
+    export default {
+        name: "mapDemo",
+        data(){
+            return{
+                view:null,
+                scene:null,
+                map1: require('../../../../public/assets/map/1.json'),
+                map2: require('../../../../public/assets/map/2.json'),
+            }
+        },
+        mounted(){
+            this.view = new SGraphView("mapDemo");
+            this.init()
+        },
+        methods:{
+            init(){
+                this.showMap(1);
+            },
+            showMap(id){
+                this.scene = new SGraphScene();
+                this.view.scene = this.scene;
+                let parser = new SFloorParser();
+                parser.parseData(this[`map${id}`].EntityList[0].Elements);
+                parser.spaceList.forEach(t => this.scene.addItem(t));
+                parser.wallList.forEach(t => this.scene.addItem(t));
+                parser.virtualWallList.forEach(t => this.scene.addItem(t));
+                parser.doorList.forEach(t => this.scene.addItem(t));
+                parser.columnList.forEach(t => this.scene.addItem(t));
+                parser.casementList.forEach(t => this.scene.addItem(t));
+                this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+
+<style scoped>
+    canvas{
+        border: 1px solid #eeeeee;
+        outline: none;
+    }
+</style>

+ 184 - 0
docs/.vuepress/components/example/web/graph/scene/Align.vue

@@ -0,0 +1,184 @@
+<template>
+    <div>
+        <el-button @click="addCircle">Circle</el-button>
+        <el-button @click="addRect">Rect</el-button>
+        <el-select placeholder="请选择" @change="changeAlign" v-model="value">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <canvas id="align" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import {SGraphItem, SGraphScene, SGraphView, SGraphLayoutType} from "@saga-web/graph/lib";
+    import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
+
+    class RectItem extends SGraphItem {
+        width = 200;
+        height = 100;
+        text = '';
+        constructor(parent) {
+            super(parent);
+            this.moveable = true;
+            this.selectable = true;
+            this.text = new Date().getMilliseconds().toString()
+        }
+
+        boundingRect() {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        onDraw(canvas) {
+            canvas.pen.color = SColor.Transparent;
+            canvas.pen.lineWidth = canvas.toPx(1);
+            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+            canvas.drawRect(0, 0, this.width, this.height);
+
+            canvas.pen.lineDash = [10,10];
+            canvas.pen.color = SColor.Yellow;
+            canvas.brush.color = SColor.Transparent;
+            canvas.drawRect(this.boundingRect());
+
+            canvas.brush.color = SColor.Black;
+            canvas.drawText(`${this.x},${this.y}`,0,0);
+
+        }
+    }
+
+    class CircleItem extends SGraphItem {
+        r = 75;
+        text = '';
+
+        constructor(parent) {
+            super(parent);
+            this.moveable = true;
+            this.selectable = true;
+            this.text = new Date().getMilliseconds().toString()
+        }
+
+        boundingRect() {
+            return new SRect(0, 0, this.r * 2, this.r * 2);
+        }
+
+        onDraw(canvas) {
+            canvas.pen.color = SColor.Transparent;
+            canvas.pen.lineWidth = canvas.toPx(1);
+            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+            canvas.drawCircle(this.r, this.r, this.r);
+
+            canvas.pen.color = SColor.Yellow;
+            canvas.brush.color = SColor.Transparent;
+            canvas.pen.lineDash = [10,10];
+            canvas.drawRect(this.boundingRect());
+
+            canvas.brush.color = SColor.Black;
+            canvas.drawText(`${this.x},${this.y}`,0,0);
+        }
+    }
+
+    class SScene extends SGraphScene {
+        /** 定义命令 */
+        cmd = 0;
+
+        constructor() {
+            super();
+        }
+
+
+        onMouseUp(event) {
+            switch(this.cmd) {
+                case 1:
+                    this.addCircle(event.x, event.y);
+                    break;
+                case 2:
+                    this.addRect(event.x, event.y);
+                    break;
+                default:
+                    super.onMouseUp(event);
+            }
+            this.cmd = 0;
+            return false
+        }
+
+        addCircle(x, y) {
+            let item = new CircleItem(null);
+            item.moveTo(x - 50, y - 50);
+            this.addItem(item);
+        }
+
+        addRect(x, y) {
+            let item = new RectItem(null);
+            item.moveTo(x - 50, y - 50);
+            this.addItem(item);
+        }
+    }
+
+    class TestView extends SGraphView {
+        constructor() {
+            super("align");
+        }
+    }
+
+    export default {
+        data() {
+            return {
+                scene: new SScene(),
+                value: -1,
+                options:[
+                    {
+                        value:SGraphLayoutType.Left,
+                        label:'左对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Right,
+                        label:'右对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Top,
+                        label:'顶对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Bottom,
+                        label:'底对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Center,
+                        label:'水平居中对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Middle,
+                        label:'垂直居中对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Vertical,
+                        label:'垂直分布'
+                    },
+                    {
+                        value:SGraphLayoutType.Horizontal,
+                        label:'水平分布'
+                    }
+                ]
+            }
+        },
+        mounted() {
+            let view = new TestView();
+            view.scene = this.scene;//new SScene(); //this.data.scene;
+        },
+        methods: {
+            addCircle() {
+                this.scene.cmd = 1;
+            },
+            addRect() {
+                this.scene.cmd = 2;
+            },
+            changeAlign(v){
+                this.scene.selectContainer.layout(v)
+                // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 6 - 4
docs/.vuepress/components/example/web/graph/scene/ImageItem.vue

@@ -10,9 +10,7 @@
 </template>
 
 <script lang="ts">
-    import { SGraphScene, SGraphView } from "@saga-web/graph";
-    import { SImageItem } from "@saga-web/big/lib";
-    import { SImageShowType } from "@saga-web/big/lib/enums/SImageShowType";
+    import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@saga-web/graph";
 
     class SScene extends SGraphScene {
         imageItem: SImageItem = new SImageItem(null);
@@ -35,6 +33,7 @@
     export default {
         mounted(): void {
             let view = new ImageView();
+            // @ts-ignore
             view.scene = this.scene;
             view.fitSceneToView();
         },
@@ -45,12 +44,15 @@
         },
         methods: {
             Full() {
+                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.Full;
             },
             Equivalency() {
+                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.Equivalency;
             },
             AutoFit() {
+                // @ts-ignore
                 this.scene.imageItem.showType = SImageShowType.AutoFit;
             },
         }
@@ -59,4 +61,4 @@
 
 <style scoped>
 
-</style>
+</style>

+ 22 - 368
docs/.vuepress/components/example/web/graph/scene/SEditLine.vue

@@ -1,353 +1,15 @@
 <template>
     <div>
-        <el-button @click="show">展示</el-button>
         <el-button @click="create">创建</el-button>
-        <el-button @click="edit">编辑</el-button>
+        <el-button @click="undo">undo</el-button>
+        <el-button @click="redo">redo</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
-     *
-     * @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[] = [];
-        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 {
-            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;
-
-        /** 当前点索引   */
-        curIndex: number = -1;
-
-        /**
-         * 构造函数
-         *
-         * @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   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 {
-            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   鼠标事件
-         * @return  是否处理事件
-         * */
-        onMouseMove(event: SMouseEvent): boolean {
-            if (this.status == SRelationState.Create) {
-                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   p   鼠标点击点
-         * */
-        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;
-                    }
-                });
-            }
-        }
-
-        /**
-         * 判断点是否在区域内
-         *
-         * @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事件
-         *
-         * */
-        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 {
-            return new SRect(
-                this.minX,
-                this.minY,
-                this.maxX - this.minX,
-                this.maxY - this.minY
-            );
-        } // 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.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.line[0], this.line[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));
-                    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()
-    } // Class SLineItem
+<script>
+    import { SGraphScene, SGraphView } from "@saga-web/graph/";
+    import { SItemStatus } from "@saga-web/big/lib/enums/SItemStatus";
+    import { SLineItem } from "@saga-web/big/lib";
 
     export default {
         data() {
@@ -356,37 +18,29 @@
                 view: null
             };
         },
-        mounted(): void {
+        mounted() {
             this.view = new SGraphView("editLine");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
         },
         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;
+                this.scene.root.children = [];
                 const lineItem = new SLineItem(null, [] );
-                lineItem.status = SRelationState.Create;
-                scene.addItem(lineItem);
-                scene.grabItem = lineItem;
+                lineItem.status = SItemStatus.Create;
+                this.scene.addItem(lineItem);
+                this.scene.grabItem = lineItem;
                 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();
+            undo(){
+                if(this.scene.grabItem) {
+                    this.scene.grabItem.undo();
+                }
+            },
+            redo(){
+                if(this.scene.grabItem) {
+                    this.scene.grabItem.redo();
+                }
             }
         }
     };

+ 21 - 18
docs/.vuepress/components/example/web/graph/scene/SImgTextItem.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-    import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
-    import {SAnchorItem, SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
-    import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
+    import {SGraphItem, SGraphScene, SGraphView, SObjectItem, STextItem, SImageItem, SAnchorItem} from "@saga-web/graph/lib";
+    import { SItemStatus }from "@saga-web/big/lib";
+    import {SColor, SPainter, SRect, SSize} from "@saga-web/draw/lib";
     import {SMouseEvent} from "@saga-web/base/lib";
 
     /**
@@ -94,10 +94,12 @@
                 return item;
             });
             this.update();
-            this.textItem.text = "请填写文本";
-            this.textItem.moveTo(16, -6);
+            this.textItem.text = "x2";
+            this.textItem.moveTo(18, -6);
             this.moveable = true;
             this.selectable = true;
+            this.textItem.enabled = false;
+            this.img.enabled = false;
         }
 
         onMouseEnter(event: SMouseEvent): boolean {
@@ -119,6 +121,7 @@
          *
          * */
         onMouseDown(event: SMouseEvent): boolean {
+            console.log(this.textItem)
             if (this.status == SItemStatus.Normal) {
                 return super.onMouseDown(event);
             } else if (this.status == SItemStatus.Edit) {
@@ -144,7 +147,6 @@
          * @return  是否处理事件
          * */
         onDoubleClick(event: SMouseEvent): boolean {
-            console.log('doubleclick');
             this.status = SItemStatus.Edit;
             return true;
         } // Function onDoubleClick()
@@ -155,14 +157,10 @@
          * @return  SRect   所有子对象的并集
          * */
         boundingRect(): SRect {
-            let rect :SRect = new SRect();
-            this.children.forEach(t => {
-                if (rect.isNull()) {
-                    rect = t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0);
-                } else {
-                    rect = rect.unioned(t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0));
-                }
-            });
+            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;
         } // Function boundingRect()
 
@@ -179,7 +177,6 @@
                 painter.brush.color = SColor.Gray
             }
             painter.drawRect(this.boundingRect());
-            // super.onDraw(painter);
         } // Function onDraw()
     }
 
@@ -195,26 +192,32 @@
         },
         mounted() {
             console.log(22222222222222222)
+            // @ts-ignore
             this.view = new SGraphView("editPolygon");
+            // @ts-ignore
             this.scene = new SGraphScene();
+            // @ts-ignore
             this.view.scene = this.scene;
+            // @ts-ignore
             this.init()
         },
         methods:{
             init(){
+                // @ts-ignore
                 this.item = new SImgTextItem(null);
+                // @ts-ignore
                 this.item.moveable = true;
 
+                // @ts-ignore
                 this.scene.addItem(this.item);
                 // this.view.fitSceneToView();
             },
-            change() {
-
-            },
             changemaodian(){
+                // @ts-ignore
                 this.item.showAnchor = !this.item.showAnchor;
             },
             changetext(){
+                // @ts-ignore
                 this.item.showText = !this.item.showText;
             }
         }

+ 25 - 27
docs/.vuepress/components/example/web/graph/scene/TextItem.vue

@@ -12,16 +12,14 @@
 	</div>
 </template>
 
-<script lang="ts">
-	import { SUndoStack } from "@saga-web/base";
-    import { SFont } from "@saga-web/draw";
-	import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
-	import { SPoint } from "@saga-web/draw/lib";
-	import {STextItem} from "@saga-web/big/lib";
+<script>
+	import { SUndoStack } from "@saga-web/base/lib";
+    import { SFont } from "@saga-web/draw/lib";
+	import { SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand, STextItem } from "@saga-web/graph/lib";
 
 	class SScene extends SGraphScene {
 		undoStack = new SUndoStack();
-		textItem: STextItem = new STextItem(null);
+		textItem = new STextItem(null);
 
 		constructor() {
 			super();
@@ -32,7 +30,7 @@
 			this.textItem.connect("onMove", this, this.onItemMove.bind(this));
 		}
 
-		updateText(str: string): void {
+		updateText(str) {
 			if (this.textItem.text !== str) {
 				let old = this.textItem.text;
 				this.textItem.text = str;
@@ -40,7 +38,7 @@
 			}
 		}
 
-		updateColor(color: string): void {
+		updateColor(color) {
 			if (this.textItem.color !== color) {
 				let old = this.textItem.color;
 				this.textItem.color = color;
@@ -48,7 +46,7 @@
 			}
 		}
 
-		updateSize(size: number): void {
+		updateSize(size) {
 			if (this.textItem.font.size !== size) {
 				let old = new SFont(this.textItem.font);
 				let font = new SFont(this.textItem.font);
@@ -58,8 +56,8 @@
 			}
 		}
 
-		onItemMove(item: SGraphItem, ...arg: any): void {
-            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
+		onItemMove(item, ...arg) {
+            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0], arg[0][1]));
         }
 
 	}
@@ -71,13 +69,6 @@
 	}
 
     export default {
-        mounted(): void {
-			let view = new TestView();
-			this.scene.updateText(this.text);
-			this.scene.updateColor(this.color);
-			this.scene.updateSize(this.size);
-			view.scene = this.scene;
-		},
 		data() {
 			return {
 				scene: new SScene(),
@@ -86,23 +77,30 @@
 				color: "#333333",
 			}
 		},
+        mounted() {
+			let view = new TestView();
+			this.scene.updateText(this.text);
+			this.scene.updateColor(this.color);
+			this.scene.updateSize(this.size);
+			view.scene = this.scene;
+		},
 		methods: {
-			handleChangeText(text): void {
-				this.scene.updateText(this.text);
+			handleChangeText(text) {
+				this.scene.updateText(text);
 			},
-			handleChangeColor(color): void {
+			handleChangeColor(color) {
 				this.scene.updateColor(color);
 			},
-			handleChangeSize(size): void {
+			handleChangeSize(size) {
 				this.scene.updateSize(size);
 			},
-			undo(): void {
+			undo() {
 				this.scene.undoStack.undo();
 			},
-			redo(): void {
+			redo() {
 				this.scene.undoStack.redo();
 			},
-			reset(): void {
+			reset() {
 				this.text = "测试文本";
 				this.size = 20;
 				this.color = "#333333";
@@ -116,4 +114,4 @@
 
 <style scoped>
 
-</style>
+</style>

+ 83 - 0
docs/.vuepress/components/example/web/graph/style/shadow.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        阴影扩散范围:<el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number>
+        x轴偏移量:<el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number>
+        y轴偏移量:<el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number>
+        <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
+        <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@saga-web/graph/lib";
+    import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
+
+    class shadowView extends SCanvasView {
+
+        constructor(id) {
+            super(id);
+            this.blurArr = [1,2,3,4,5,6,7,8,9,10];
+            this.shadowBlur = 10;
+            this.shadowColor = new SColor('#CCCCCC');
+            this.shadowOffsetX = 10;
+            this.shadowOffsetY = 10;
+        }
+
+        onDraw(canvas) {
+            canvas.clearRect(0,0,740,400);
+
+            canvas.pen.lineWidth = 1;
+            canvas.pen.color = SColor.Black;
+            canvas.brush.color = SColor.White;
+            canvas.shadow.shadowBlur = this.shadowBlur;
+            canvas.shadow.shadowColor = this.shadowColor;
+            canvas.shadow.shadowOffsetX = this.shadowOffsetX;
+            canvas.shadow.shadowOffsetY = this.shadowOffsetY;
+            canvas.drawRect(270,100,100,100);
+        }
+    }
+    export default {
+        name: "shadow",
+        data(){
+            return {
+                view: null,
+                blurl: 10,
+                X:10,
+                Y:10,
+                color:"#CCCCCC"
+            }
+        },
+        mounted() {
+            this.view = new shadowView('shadow');
+        },
+        methods:{
+            // 修改扩散距离
+            changeblur(v) {
+                this.view.shadowBlur = v;
+                this.view.update()
+            },
+            // x轴偏移量
+            changeX(v){
+                this.view.shadowOffsetX = v;
+                this.view.update()
+            },
+            // y轴偏移量
+            changeY(v){
+                this.view.shadowOffsetY = v;
+                this.view.update()
+            },
+            // 修改颜色
+            changeColor(v){
+                this.view.shadowColor = new SColor(v);
+                this.view.update()
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    canvas{
+        border: 1px solid #eeeeee;
+        outline: none;
+    }
+</style>

+ 1 - 1
docs/.vuepress/config.js

@@ -94,7 +94,7 @@ module.exports = {
                     {
                         text: "Web开发",
                         items: [
-                            { text: "图形引擎", link: "http://adm.sagacloud.cn:8080/api/web/graphy/" },
+                            { text: "图形引擎", link: "http://adm.sagacloud.cn:8080/api/web/graph/" },
                             { text: "建筑信息图", link: "http://adm.sagacloud.cn:8080/api/web/big/" }
                         ]
                     },

Разлика између датотеке није приказан због своје велике величине
+ 77122 - 0
docs/.vuepress/public/assets/map/1.json


BIN
docs/.vuepress/public/assets/map/1.jsonz


Разлика између датотеке није приказан због своје велике величине
+ 30621 - 0
docs/.vuepress/public/assets/map/2.json


BIN
docs/.vuepress/public/assets/map/2.jsonz


+ 14 - 0
docs/.vuepress/templates/dev.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title></title>
+</head>
+<body>
+<script>
+    const Image = window.Image;//定义global
+</script>
+<div id="app"></div>
+</body>
+</html>

+ 20 - 0
docs/.vuepress/templates/ssr.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ lang }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>{{ title }}</title>
+    <meta name="generator" content="VuePress {{ version }}">
+    {{{ userHeadTags }}}
+    {{{ pageMeta }}}
+    {{{ renderResourceHints() }}}
+    {{{ renderStyles() }}}
+    <script>
+        const Image = window.Image;//定义global变量
+    </script>
+</head>
+<body>
+<!--vue-ssr-outlet-->
+{{{ renderScripts() }}}
+</body>
+</html>

+ 10 - 0
docs/dev/saga-graphy/floor-map/mapDemo.md

@@ -0,0 +1,10 @@
+# 可编辑直线示例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-MapDemo/>
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/mapDemo.vue
+:::

+ 5 - 0
docs/dev/saga-graphy/graphy-engine/style.md

@@ -1,5 +1,10 @@
 # 颜色与样式
+
 ::: details 目录
 [[toc]]
 :::
 
+## 阴影
+
+<example-web-graph-style-shadow /> 
+

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

@@ -31,7 +31,8 @@ const content = [
                     ["/dev/saga-graphy/scene-manage/items/imgText", "图例item(图片文本组合)"]
                 ]
             },
-            ["/dev/saga-graphy/scene-manage/undo", "Undo示例"]
+            ["/dev/saga-graphy/scene-manage/undo", "Undo示例"],
+            ["/dev/saga-graphy/scene-manage/align", "对齐示例"],
         ]
     },
     {
@@ -42,6 +43,7 @@ const content = [
             ["/dev/saga-graphy/floor-map/downloadFile", "手工下载楼层底图文件"],
             ["/dev/saga-graphy/floor-map/jsonFile", "json数据格式"],
             ["/dev/saga-graphy/floor-map/divide", "划分"],
+            ["/dev/saga-graphy/floor-map/mapDemo", "楼层平面图范例"],
         ]
     },
     {

+ 16 - 0
docs/dev/saga-graphy/scene-manage/align.md

@@ -0,0 +1,16 @@
+# 对齐示例
+
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-Align />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/scene/Align.vue
+:::
+
+::: tip 注
+1、使用对齐时,至少选择2个item<br/>
+2、使用分散对齐时,至少选择3个item<br/>
+:::

+ 1 - 1
docs/dev/saga-graphy/scene-manage/items/image.md

@@ -7,4 +7,4 @@
 
 ::: details 查看代码
 <<< @/docs/.vuepress/components/example/web/graph/scene/ImageItem.vue
-:::
+:::

+ 3 - 3
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.16",
-    "@saga-web/big": "1.0.29",
-    "@saga-web/draw": "2.1.86",
-    "@saga-web/graph": "2.1.72",
+    "@saga-web/big": "1.0.35",
+    "@saga-web/draw": "2.1.90",
+    "@saga-web/graph": "2.1.78",
     "@saga-web/feng-map": "1.0.6",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",