YaolongHan 4 лет назад
Родитель
Сommit
5bcea2dfaf
31 измененных файлов с 928 добавлено и 339 удалено
  1. 1 1
      docs/.vuepress/components/GitCode.vue
  2. 1 1
      docs/.vuepress/components/big/MapDemo.vue
  3. 1 1
      docs/.vuepress/components/big/items/space.vue
  4. 2 0
      docs/.vuepress/components/big/items/zone.vue
  5. 186 0
      docs/.vuepress/components/edit/undo/undo.vue
  6. 109 0
      docs/.vuepress/components/engine/clip.vue
  7. 21 21
      docs/.vuepress/components/engine/selectContainer.vue
  8. BIN
      docs/.vuepress/components/scene/items/1.jpg
  9. 31 38
      docs/.vuepress/components/scene/items/ImageItem.vue
  10. 2 0
      docs/.vuepress/components/scene/items/TextItem.vue
  11. 49 34
      docs/.vuepress/components/scene/items/area.vue
  12. 66 50
      docs/.vuepress/components/scene/items/polygon.vue
  13. 44 43
      docs/.vuepress/components/scene/items/rect.vue
  14. 3 3
      docs/.vuepress/config.js
  15. BIN
      docs/.vuepress/public/assets/img/2.jpg
  16. 29 2
      docs/guides/big/items/space.md
  17. 56 15
      docs/guides/big/items/zone.md
  18. 87 0
      docs/guides/edit/undo/src/SGraphAddCommand.ts
  19. 48 0
      docs/guides/edit/undo/src/SGraphCommand.ts
  20. 59 0
      docs/guides/edit/undo/undo.md
  21. 8 0
      docs/guides/engine/clip.md
  22. 16 16
      docs/guides/format/style.md
  23. 59 59
      docs/guides/format/systemJson.md
  24. 2 4
      docs/guides/index.js
  25. 6 2
      docs/guides/scene/items/area.md
  26. 0 8
      docs/guides/scene/items/areaGroup.md
  27. 10 1
      docs/guides/scene/items/polygon.md
  28. 0 8
      docs/guides/scene/items/polygonGroup.md
  29. 21 21
      docs/guides/scene/items/rect.md
  30. 4 4
      docs/guides/system-diagram/json-file.md
  31. 7 7
      package.json

+ 1 - 1
docs/.vuepress/components/GitCode.vue

@@ -34,7 +34,7 @@
             required: false,
             default: 'typescript'
         }) type !: string;
-        baseUrl: string = '/git';
+        baseUrl: string = '/gogs';
         code: string = '';
         created() {
             this.init()

+ 1 - 1
docs/.vuepress/components/big/MapDemo.vue

@@ -30,7 +30,7 @@
             this.view!!.scene = scene;
             let parser = new SFloorParser();
             // @ts-ignore
-            parser.parseData(this[`map${id}`].EntityList[0].Elements);
+            parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));
             parser.spaceList.forEach(t => scene.addItem(t));
             parser.wallList.forEach(t => scene.addItem(t));
             parser.virtualWallList.forEach(t => scene.addItem(t));

+ 1 - 1
docs/.vuepress/components/big/items/space.vue

@@ -28,7 +28,7 @@
             this.view.scene = scene;
             // 只模拟了轮廓数据
             // @ts-ignore
-            const item = new SSpaceItem(null,{OutLine:this.outline1});
+            const item = new SSpaceItem(null,{OutLine:this.outline1, Name:'测试',Location:{Points:[{X:65,Y:20}]}});
             scene.addItem(item);
             // 只模拟了轮廓数据
             // @ts-ignore

+ 2 - 0
docs/.vuepress/components/big/items/zone.vue

@@ -49,8 +49,10 @@
             // 只模拟了轮廓数据
             // @ts-ignore
             const item = new SZoneItem(null,{OutLine:this.outline});
+            item.selectable = true;
             scene.addItem(item);
             this.view.fitSceneToView();
+            console.log(this.view)
             this.view.scalable = false;
         }
     }

+ 186 - 0
docs/.vuepress/components/edit/undo/undo.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="edit-line">
+    <div class="btn-list">
+      <el-button
+        :class="[cmdStatus=='createLine' ? 'heightLight' : '']"
+        size="small"
+        @click="create('createLine')"
+      >画线</el-button>
+      <el-button
+        :class="[cmdStatus=='createText' ? 'heightLight' : '']"
+        size="small"
+        @click="create('createText')"
+      >文本</el-button>
+      <el-button
+        :class="[cmdStatus=='createImage' ? 'heightLight' : '']"
+        size="small"
+        @click="create('createImage')"
+      >图片</el-button>
+      <el-button size="small" @click="undo">undo</el-button>
+      <el-button size="small" @click="redo">redo</el-button>
+      <!-- <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start"> -->
+        <!-- <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> -->
+      <!-- </el-tooltip> -->
+      <!-- <el-button
+        :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+        size="small"
+        @click="deleteItem"
+      >删除</el-button> -->
+    </div>
+    <div class="content">
+      <div class="left">
+        <canvas id="edit_line" width="700" height="460" tabindex="0" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+import { SPoint } from "@persagy-web/draw/";
+import { SMouseEvent, SUndoStack } from "@persagy-web/base/lib";
+import { EditLineItem } from "./../../../../guides/edit/items/src/EditLineItem";
+import { EditImageItem } from "./../../../../guides/edit/items/src/EditImageItem";
+import { hexify } from "./../../../public/until/rgbaUtil";
+import { EditText } from "./../../../../guides/edit/items/src/EditText";
+import { SGraphAddCommand } from "./../../../../guides/edit/undo/src/SGraphAddCommand";
+class SScene extends SGraphScene {
+  undoStack = new SUndoStack();
+  editCmd = "";
+  constructor() {
+    super();
+    this.editCmd = "";
+  }
+  onMouseDown(event) {
+    if (this.editCmd == "createLine") {
+      this.addLine(event);
+      this.clearCmdStatus();
+    } else if (this.editCmd == "createText") {
+      this.addText(event);
+      this.clearCmdStatus();
+    } else if (this.editCmd == "createImage") {
+      this.addImage(event);
+      this.clearCmdStatus();
+    } else if (this.editCmd == "") {
+      super.onMouseDown(event);
+    }
+  }
+  //   清空命令
+  clearCmdStatus() {
+    this.editCmd = "";
+  }
+  //   新增线
+  addLine(event) {
+    const lineItem = new EditLineItem(null, []);
+    lineItem.status = SItemStatus.Create;
+    lineItem.x = event.x;
+    lineItem.y = event.y;
+    lineItem.connect("finishCreated", this, this.finishCreated);
+    this.addItem(lineItem);
+    this.undoStack.push(new SGraphAddCommand(this, lineItem));
+    this.grabItem = lineItem;
+  }
+  //   新增文本
+  addText(event) {
+    const textItem = new EditText(null);
+    textItem.text = "测试文本";
+
+    textItem.moveable = true;
+    textItem.x = event.x;
+    textItem.y = event.y;
+    this.addItem(textItem);
+    this.undoStack.push(new SGraphAddCommand(this, textItem));
+    this.grabItem = textItem;
+    textItem.connect("finishCreated", this, this.finishCreated);
+  }
+  //   新增图片
+  addImage(event) {
+    const imageItem = new EditImageItem(null);
+    imageItem.url =
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
+    imageItem.width = 100;
+    imageItem.height = 100;
+    imageItem.moveable = true;
+    imageItem.x = event.x;
+    imageItem.y = event.y;
+    this.addItem(imageItem);
+    this.undoStack.push(new SGraphAddCommand(this, imageItem));
+  }
+  //   完成item绘制
+  finishCreated() {
+    this.grabItem = null;
+  }
+  undo() {
+    this.undoStack.undo();
+    this.view.update();
+  }
+  redo() {
+    this.undoStack.redo();
+    this.view.update();
+  }
+}
+//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
+export default {
+  name: "editLine",
+  data() {
+    return {
+      scene: null,
+      view: null,
+      isCreated: false, //是否创建完成
+      cmdStatus: "", //选中状态
+    };
+  },
+  mounted() {
+    console.log(SGraphAddCommand);
+    this.view = new SGraphView("edit_line");
+    this.scene = new SScene();
+    this.view.scene = this.scene;
+  },
+  methods: {
+    create(val) {
+      this.scene.editCmd = val;
+    },
+    undo() {
+      this.scene.undo();
+    },
+    redo() {
+      this.scene.redo();
+    },
+  },
+  watch: {},
+  beforeCreate() {},
+};
+</script>
+
+<style scoped lang="less">
+.edit-line {
+  width: 100%;
+  height: 500px;
+  .content {
+    display: flex;
+    justify-content: flex-start;
+    .left {
+      margin-right: 20px;
+    }
+    .line-property {
+      width: 300px;
+      margin-top: 20px;
+      .always {
+        width: 100%;
+        height: 100%;
+      }
+      .always-item {
+        display: flex;
+        margin-top: 10px;
+        justify-content: space-between;
+      }
+    }
+  }
+  .heightLight {
+    color: #409eff;
+    border-color: #c6e2ff;
+    background-color: #ecf5ff;
+  }
+}
+</style>

+ 109 - 0
docs/.vuepress/components/engine/clip.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <canvas :id="id" width="800" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SCanvasView, SPainter, SPath, SColor} from "@persagy-web/draw/lib";
+
+    class ClipView extends SCanvasView{
+        img: CanvasImageSource;
+        _url: string = '';
+        arcX = 100;
+        arcY = 100;
+        stepX = 6;
+        stepY = 8;
+        timer: any;
+        set url(v:string){
+            if (this._url == v) {
+                return;
+            }
+            this._url = v;
+            // @ts-ignore
+            this.img.src = v;
+        }
+        get url():string{
+            return this._url;
+        }
+        isLoadOver: boolean = false;
+        constructor(id:string){
+            super(id);
+            this.img = new Image();
+            this.img.onload = (e) => {
+                this.isLoadOver = true;
+                this.update();
+            };
+            this.img.onerror = (e) => {
+                this.isLoadOver = false;
+                this.update();
+                console.log("加载图片错误!", e);
+            };
+        }
+        onDraw(painter: SPainter): void {
+            // @ts-ignore
+            painter.engine._canvas.save();
+            // painter.save();
+            painter.clearRect(0,0,800,400);
+            clearTimeout(this.timer);
+
+            painter.pen.color = SColor.Black;
+            painter.brush.color = SColor.Black;
+            painter.drawRect(0, 0, 800, 400);
+
+            painter.brush.color = SColor.Transparent;
+            let path = new SPath();
+            path.arc(this.arcX, this.arcY, 100, 0, Math.PI*2, 1);
+            painter.clip = path;
+
+            painter.drawPath(path);
+            // console.log('------->');
+            if (this.isLoadOver) {
+                painter.drawImage(this.img, 0, 0, 800, 400);
+            }
+            // painter.restore();
+            // @ts-ignore
+            painter.engine._canvas.restore();
+            this.timer = setTimeout(()=>{
+                if (this.arcX + 100 >= 800) {
+                    this.stepX *= -1;
+                }
+
+                if (this.arcX - 100 < 0) {
+                    this.stepX *= -1;
+                }
+
+                if (this.arcY + 100 >= 400) {
+                    this.stepY *= -1;
+                }
+
+                if (this.arcY - 100 < 0) {
+                    this.stepY *= -1;
+                }
+
+                this.arcX += this.stepX;
+                this.arcY += this.stepY;
+                this.update()
+            }, 17);
+        }
+    }
+
+    @Component
+    export default class SelectContainerCanvas extends Vue {
+        id: string = uuid();
+        view: ClipView | undefined;
+        img = require('../../public/assets/img/2.jpg');
+        mounted(): void {
+            this.init();
+        };
+        init():void{
+            this.view = new ClipView(this.id);
+            this.view.url= this.img;
+        };
+        beforeDestroy(): void {
+            clearTimeout(this.view!!.timer);
+        }
+    }
+</script>

+ 21 - 21
docs/.vuepress/components/engine/selectContainer.vue

@@ -22,29 +22,29 @@
         id: string = uuid();
         view: SGraphView | undefined;
         rectData = {
-            X: 0,
-            Y: 0,
-            Width: 500,
-            Height: 500,
-            Radius: 0,
-            Style: {
-                "Default":{
-                    "Stroke": "#cccccc",
-                    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "LineWidth": 2,
-                    "Effect": {}
+            x: 0,
+            y: 0,
+            width: 500,
+            height: 500,
+            radius: 0,
+            style: {
+                "default":{
+                    "stroke": "#cccccc",
+                    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 2,
+                    "effect": {}
                 },
-                "Selected": {
-                    "Stroke": "#66ff66",
-                    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "LineWidth": 3,
-                    "Effect": {}
+                "selected": {
+                    "stroke": "#66ff66",
+                    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 3,
+                    "effect": {}
                 },
-                "Disabled": {
-                    "Stroke": "#333333",
-                    "Fill": "#afafaf",
-                    "LineWidth": 1,
-                    "Effect": {}
+                "disabled": {
+                    "stroke": "#333333",
+                    "fill": "#afafaf",
+                    "lineWidth": 1,
+                    "effect": {}
                 },
             }
         };

BIN
docs/.vuepress/components/scene/items/1.jpg


+ 31 - 38
docs/.vuepress/components/scene/items/ImageItem.vue

@@ -5,53 +5,46 @@
             <el-button @click="Equivalency">等比缩放</el-button>
             <el-button @click="AutoFit">自适应</el-button>
         </el-row>
-        <canvas id="ImageItem1" width="740" height="400"/>
+        <canvas :id="id" width="740" height="400"/>
     </div>
 </template>
 
-<script>
-    import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";
+<script lang="ts">
+    import { SGraphScene, SGraphView } from "@persagy-web/graph";
+    import { SGraphSvgItem} from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { SSize} from "@persagy-web/draw/lib";
+    import { v1 as uuid } from "uuid";
 
-    class SScene extends SGraphScene {
-        imageItem = new SImageItem(null);
-        constructor() {
-            super();
-            this.imageItem.moveable = true;
-            this.imageItem.width = 400;
-            this.imageItem.height = 300;
-            this.imageItem.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
-            this.addItem(this.imageItem);
+    class Img extends SGraphSvgItem{
+        resize(oldSize:SSize, newSize: SSize) :void {
+            this.width = newSize.width;
+            this.height = newSize.height;
         }
     }
 
-    class ImageView extends SGraphView {
-        constructor() {
-            super("ImageItem1");
-        }
-    }
-
-    export default {
+    @Component
+    export default class imageCanvas extends Vue {
+        id: string = uuid();
+        url: string = require('./1.jpg');
         mounted() {
-            let view = new ImageView();
-            view.scene = this.scene;
+            const view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            const item = new Img(null, {Url: this.url, X: 0, Y: 0, Width: 100, Height: 100});
+            item.selectable = true;
+            view.scene = scene;
+            scene.addItem(item);
             view.fitSceneToView();
-        },
-        data() {
-            return {
-                scene: new SScene(),
-            }
-        },
-        methods: {
-            Full() {
-                this.scene.imageItem.showType = SImageShowType.Full;
-            },
-            Equivalency() {
-                this.scene.imageItem.showType = SImageShowType.Equivalency;
-            },
-            AutoFit() {
-                this.scene.imageItem.showType = SImageShowType.AutoFit;
-            },
-        }
+        };
+        Full() {
+            // this.scene.imageItem.showType = SImageShowType.Full;
+        };
+        Equivalency() {
+            // this.scene.imageItem.showType = SImageShowType.Equivalency;
+        };
+        AutoFit() {
+            // this.scene.imageItem.showType = SImageShowType.AutoFit;
+        };
     }
 </script>
 

+ 2 - 0
docs/.vuepress/components/scene/items/TextItem.vue

@@ -39,6 +39,8 @@ class SScene extends SGraphScene {
     this.textItem.moveable = true;
     this.textItem.x = 100;
     this.textItem.y = 100;
+      this.textItem.selectable = true
+
     this.addItem(this.textItem);
     this.textItem.connect("onMove", this, this.onItemMove.bind(this));
   }

+ 49 - 34
docs/.vuepress/components/scene/items/area.vue

@@ -1,48 +1,63 @@
 <template>
     <div style="margin-top: 10px;">
-<!--        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
-<!--        圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
         <canvas :id="id" width="740" height="400" />
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SPath} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
-    class sga extends SGraphItem{
-        constructor(parent){
-            super(parent);
-            this.path = new SPath();
-            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}])
-        }
-        onDraw(painter) {
-            console.log(this.path);
-            painter.drawPath(this.path)
-        }
-    }
-
-    export default {
-        name: "areaCanvas",
-        data(){
-            return{
-                id: 'area'+Date.now(),
-                view: ''
+    @Component
+    export default class AreaCanvas extends Vue {
+        id: string = uuid();
+        view: SGraphView | undefined;
+        areaData = {
+            outline: [
+                [
+                    [{x:0,y:0},{x:0,y:1000},{x:1000,y:1000},{x:1000,y:0}],
+                    [{x:200,y:200},{x:800,y:200},{x:800,y:800},{x:200,y:800}]
+                ],
+                [
+                    [{x:1000,y:1000},{x:1200,y:1000},{x:1200,y:1200},{x:1000,y:1200}]
+                ]
+            ],
+            style: {
+                "default":{
+                    "stroke": "#cccccc",
+                    "fill": "SLinearGradient{0,0;0,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 2,
+                    "effect": {}
+                },
+                "selected": {
+                    "stroke": "#66ff66",
+                    "fill": "SRadialGradient{500,500,50;500,500,800;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 3,
+                    "effect": {}
+                },
+                "disabled": {
+                    "stroke": "#333333",
+                    "fill": "#afafaf",
+                    "lineWidth": 1,
+                    "effect": {}
+                },
             }
-        },
+        };
+
         mounted() {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView(this.id);
-                const scene = new SGraphScene();
-                const item = new sga(null);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                console.log(item)
-            }
+        };
+        init(){
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            const item = new SGraphAreaGroupItem(null, this.areaData);
+            item.selectable = true;
+            item._resizeable = false;
+            scene.addItem(item);
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 66 - 50
docs/.vuepress/components/scene/items/polygon.vue

@@ -1,68 +1,84 @@
 <template>
     <div style="margin-top: 10px;">
         <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
-        <canvas :id="'polygon'+time" width="740" height="400" />
+        <canvas :id="id" width="740" height="400" />
     </div>
 </template>
 
-<script>
+<script lang="ts">
 
     import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
+    import {SSize} from "@persagy-web/draw/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
-    export default {
-        name: "rect1",
-        data(){
-            return {
-                view: '',
-                item: '',
-                time: Date.now(),
-                rectData: {
-                    Outline: [
-                        [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}]
-                    ],
-                    Style: {
-                        "Default":{
-                            "Stroke": "#cccccc",
-                            "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                            "LineWidth": 2,
-                            "Effect": {}
-                        },
-                        "Selected": {
-                            "Stroke": "#66ff66",
-                            "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                            "LineWidth": 3,
-                            "Effect": {}
-                        },
-                        "Disabled": {
-                            "Stroke": "#333333",
-                            "Fill": "#afafaf",
-                            "LineWidth": 1,
-                            "Effect": {}
-                        },
-                    }
+    class Expolygon extends SGraphPolyGroupItem{
+        resize(old:SSize,newS:SSize):void{
+            const xs = newS.width / old.width;
+            const ys = newS.height / old.height;
+            // @ts-ignore
+            this.pointList = this.pointList.map(t => {
+                // @ts-ignore
+                return t.map(item => {
+                    item.x = item.x * xs;
+                    item.y = item.y * ys;
+                    return item
+                })
+            });
+            // console.log(this.pointList)
+        }
+    }
+
+
+    @Component
+    export default class ZoneCanvas extends Vue {
+        view: SGraphView | undefined;
+        item: Expolygon | undefined;
+        id: string = uuid();
+        rectData = {
+            outline: [
+                [{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}],
+                [{x:1000,y:1000},{x:1200,y:1000},{x:1200,y:1200},{x:1000,y:1200}]
+            ],
+            style: {
+                "default":{
+                    "stroke": "#cccccc",
+                    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 2,
+                    "effect": {}
+                },
+                "selected": {
+                    "stroke": "#66ff66",
+                    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 3,
+                    "effect": {}
+                },
+                "disabled": {
+                    "stroke": "#333333",
+                    "fill": "#afafaf",
+                    "lineWidth": 1,
+                    "effect": {}
                 },
             }
-        },
+        };
         mounted() {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView(`polygon${this.time}`);
-                const scene = new SGraphScene();
+        };
+        init(){
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
 
-                this.item = new SGraphPolyGroupItem(null, this.rectData);
-                this.item.selectable = true;
-                scene.addItem(this.item);
+            this.item = new Expolygon(null, this.rectData);
+            this.item.selectable = true;
+            scene.addItem(this.item);
 
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            },
-            changeEnable(){
-                if (this.item) {
-                    this.item.enabled = !this.item.enabled;
-                }
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        };
+        changeEnable(){
+            if (this.item) {
+                this.item.enabled = !this.item.enabled;
             }
         }
     }

+ 44 - 43
docs/.vuepress/components/scene/items/rect.vue

@@ -19,61 +19,60 @@
         item2: SGraphRectItem | undefined;
         R: number = 0;
         rectData = {
-            X: 0,
-            Y: 0,
-            Width: 500,
-            Height: 500,
-            Radius: 0,
-            Style: {
-                "Default":{
-                    "Stroke": "#cccccc",
-                    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "LineWidth": 2,
-                    "Effect": {}
+            x: 0,
+            y: 0,
+            width: 500,
+            height: 500,
+            radius: 0,
+            style: {
+                "default":{
+                    "stroke": "#cccccc",
+                    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 2,
+                    "effect": {}
                 },
-                "Selected": {
-                    "Stroke": "#66ff66",
-                    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "LineWidth": 3,
-                    "Effect": {}
+                "selected": {
+                    "stroke": "#66ff66",
+                    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                    "lineWidth": 3,
+                    "effect": {}
                 },
-                "Disabled": {
-                    "Stroke": "#333333",
-                    "Fill": "#afafaf",
-                    "LineWidth": 1,
-                    "Effect": {}
+                "disabled": {
+                    "stroke": "#333333",
+                    "fill": "#afafaf",
+                    "lineWidth": 1,
+                    "effect": {}
                 },
             }
         };
         rectData2 = {
-            X: 1000,
-            Y: 0,
-            Width: 500,
-            Height: 500,
-            Radius: 0,
-            Style: {
-                "Default":{
-                    "Stroke": "#cccccc",
-                    "Fill": "#ffccee",
-                    "LineWidth": 2,
-                    "Effect": {}
+            x: 1000,
+            y: 0,
+            width: 500,
+            height: 500,
+            radius: 0,
+            style: {
+                "default":{
+                    "stroke": "#cccccc",
+                    "fill": "#ffccee",
+                    "lineWidth": 2,
+                    "effect": {}
                 },
-                "Selected": {
-                    "Stroke": "#66ff66",
-                    "Fill": "#ff33ee",
-                    "LineWidth": 3,
-                    "Effect": {}
+                "selected": {
+                    "stroke": "#66ff66",
+                    "fill": "#ff33ee",
+                    "lineWidth": 3,
+                    "effect": {}
                 },
-                "Disabled": {
-                    "Stroke": "#333333",
-                    "Fill": "#afafaf",
-                    "LineWidth": 1,
-                    "Effect": {}
+                "disabled": {
+                    "stroke": "#333333",
+                    "fill": "#afafaf",
+                    "lineWidth": 1,
+                    "effect": {}
                 },
             }
         };
         private mounted (): void {
-            console.log(9999999999999)
             this.init();
         }
         init(): void {
@@ -81,10 +80,12 @@
             const scene = new SGraphScene();
             this.item = new SGraphRectItem(null, this.rectData);
             this.item.selectable = true;
+            this.item._resizeable = false;
             scene.addItem(this.item);
 
             this.item2 = new SGraphRectItem(null, this.rectData2);
             this.item2.selectable = true;
+            this.item2._resizeable = false;
             scene.addItem(this.item2);
 
             this.view.scene = scene;

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

@@ -4,7 +4,7 @@ const graphContent = require("../guides/index");
 module.exports = {
     title: "博锐尚格 Web 组件开发文档",
     description: "博锐尚格 Web 组件开发文档",
-    base: "/doc/web/",
+    base: "/web/",
     plugins: [
         "@vuepress/last-updated",
         "plugin-back-to-top",
@@ -118,12 +118,12 @@ module.exports = {
     },
     devServer :{
         proxy: {
-            '/git': {
+            '/gogs': {
                 target: 'http://39.106.8.246:3003',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
-                    '^/git': '',
+                    '^/gogs': '',
                 },
                 bypass: function(req, res, proxyOptions) {
                     req.headers["Authorization"] = "Basic bGJzbDoyMDIwMDgyOQ=="

BIN
docs/.vuepress/public/assets/img/2.jpg


+ 29 - 2
docs/guides/big/items/space.md

@@ -48,9 +48,36 @@ Spaces:[
 <big-items-space />
 
 ::: details 查看代码
-
 <<< @/docs/.vuepress/components/big/items/space.vue
-
 :::
 
+空间默认传入样式
+``` json5
+Style: {
+    Default: {
+        Stroke: "#2b2b2b",
+        Fill: "#f1fffd80",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Selected: {
+        Stroke: "#2b2b2b",
+        Fill: "#1abc9c",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Disabled: {
+        Stroke: "#2b2b2b",
+        Fill: "#afafaf",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Highlight: {
+        Stroke: "#2b2b2b",
+        Fill: "#fbb029",
+        LineWidth: 1,
+        Effect: {}
+    }
+}
+```
 

+ 56 - 15
docs/guides/big/items/zone.md

@@ -10,21 +10,29 @@
 ## 代码说明
     
 ### 数据说明
+此数据并非后台返回,需要将接口返回数据处理此格式
+
 ``` json5
 Zone: {
-        xxx: xxx,                           // 等业务空间属性
-        OutLine: [
-            [
-                [{X:0,Y:0,Z:0},...],        // 第一个空间的外轮廓
-                ...                         // 第一个空间的内轮廓
-            ],
-            [
-                [{X:0,Y:0,Z:0},...],        // 第二个空间的外轮廓
-                ...                         // 第二个空间的内轮廓
-            ],
-            ...                             // ...
-        ],                                  // 轮廓线
-    }
+    RoomLocalName: 'string',            // 名称
+    RoomID: 'string',                   // Id
+    Color: 'string',                    // 默认颜色
+    Height: 'number',                   // 高度-非必须
+    HighLightFlag: 'boolean',           // 是否高亮-非必须
+    Transparency: 'number',             // 默认状态透明度-非必须
+    Infected: 'boolean',                // 是否受影响-非必须
+    OutLine: [
+        [
+            [{X:0,Y:0,Z:0},...],        // 第一个空间的外轮廓
+            ...                         // 第一个空间的内轮廓
+        ],
+        [
+            [{X:0,Y:0,Z:0},...],        // 第二个空间的外轮廓
+            ...                         // 第二个空间的内轮廓
+        ],
+        ...                             // ...
+    ],                                  // 轮廓线
+}
 ```
 ::: tip 注
 1、业务空间由多个空间组成 <br/>
@@ -47,9 +55,42 @@ Zone: {
 <big-items-zone />
 
 ::: details 查看代码
-
 <<< @/docs/.vuepress/components/big/items/zone.vue
-
 :::
 
+业务空间默认传入样式
+``` json5
+Style: {
+    Default: {
+        Stroke: "#00000000",
+        Fill: "#ffee2280",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Selected: {
+        Stroke: "#00000000",
+        Fill: "#1abc9c",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Highlight: {
+        Stroke: "#00000000",
+        Fill: data.Color || "#fbb029",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Unselect: {
+        Stroke: "#00000000",
+        Fill: "#cecece",
+        LineWidth: 1,
+        Effect: {}
+    },
+    Infected: {
+        Stroke: "#00000000",
+        Fill: "#ff0000",
+        LineWidth: 1,
+        Effect: {}
+    }
+}
+```
 

+ 87 - 0
docs/guides/edit/undo/src/SGraphAddCommand.ts

@@ -0,0 +1,87 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphCommand } from "./SGraphCommand";
+import { SGraphItem, SGraphScene } from "@persagy-web/graph/";
+import { SUndoCommand } from "@persagy-web/base";
+
+
+/**
+ * 添加item命令
+ *
+ * @author  panglixiang
+ * */
+export class SGraphAddCommand extends SGraphCommand {
+    /** 命令名称    */
+    readonly command: string;
+    /** 命令item对象    */
+    item: SGraphItem;
+    /** 命令item的父类   */
+    parent: SGraphItem | null;
+
+    /**
+     * 构造函数
+     *
+     * @param   scene   item所在场景
+     * @param   item    命令item对象
+     * */
+    constructor(scene: SGraphScene, item: SGraphItem) {
+        super(scene);
+        this.item = item;
+        this.parent = item.parent;
+        this.command = "SGraphAddCommand";
+        // this.desc = `添加对象=${item.id}`;
+    } // Constructor
+
+    /**
+     * 合并命令
+     *
+     * @return  boolean 是否已执行合并
+     * */
+    mergeWith(command: SUndoCommand): boolean {
+        return false;
+    } // Function mergeWith()
+
+    /**
+     * 重做
+     *
+     * */
+    redo(): void {
+        this.item.parent = this.parent;
+        // @ts-ignore
+        this.parent.update();
+    } // Function redo()
+
+    /**
+     * 撤销
+     *
+     * */
+    undo(): void {
+        this.item.parent = null;
+        // @ts-ignore
+        this.parent.update();
+    } // Function undo()
+} // Class SGraphAddCommand

+ 48 - 0
docs/guides/edit/undo/src/SGraphCommand.ts

@@ -0,0 +1,48 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SUndoCommand } from "@persagy-web/base";
+import { SGraphScene } from "@persagy-web/graph/";
+
+/**
+ * Graph命令基类
+ *
+ * @author  庞利祥(sybotan@126.com)
+ */
+export abstract class SGraphCommand extends SUndoCommand {
+    /** 命令所属的场景类 */
+    scene: SGraphScene | null = null;
+
+    /**
+     * 构造函数
+     *
+     * @param   scene       命令所属的场景类
+     */
+    protected constructor(scene: SGraphScene | null) {
+        super();
+        this.scene = scene;
+    } // Constructor
+} // Class SGraphCommand

+ 59 - 0
docs/guides/edit/undo/undo.md

@@ -0,0 +1,59 @@
+
+# Undo/Redo(撤销/重做) 示例
+::: details 目录
+[[toc]]
+:::
+
+## 绘制示例
+
+<edit-undo-undo />
+
+::: details 示例代码
+
+<<< @/docs/.vuepress/components/edit/undo/undo.vue
+
+:::
+
+## 源代码
+
+::: details 查看代码
+
+<<< @/docs/guides/edit/items/src/EditLineItem.ts
+
+:::
+
+## 代码说明
+### 1 当 LineEditItem 为编辑状态时,需要将 LineEditItem 赋给 grabItem
+``` js {4}
+ // 编辑状态时的 LineItem
+ this.lineItem = new EditLineItem(null, []);
+ this.lineItem.status = SItemStatus.Create;
+ this.scene.grabItem = this.lineItem;
+```
+### 2 当 LineEditItem 为正常状态时,需要将 grabItem 置为 null
+``` js {4}
+ // 正常状态时的 LineItem
+ this.lineItem = new EditLineItem(null, []);
+ this.lineItem.status = SItemStatus.Normal;
+ this.scene.grabItem = null;
+```
+### 3 当 LineEditItem 为试图垂直水平绘制时需要修改 verAndLeve 属性
+``` js {3}
+ // 编辑状态时的 LineItem
+ this.lineItem = new EditLineItem(null, []);
+ this.lineItem.status = SItemStatus.Create;
+ this.lineItem.verAndLeve = true;
+ this.scene.grabItem = this.lineItem;
+```
+### 4 当 LineEditItem 修改属性但是画板尚未变化时需要刷新
+``` js {4}
+ // 编辑状态时的 LineItem
+  this.lineItem = new EditLineItem(null, []);
+ this.lineItem.status = SItemStatus.Create;
+ this.view.update();
+```
+
+## 交互要求
+* 点击item 选中态时出现选择控制点(增加是否可操作控制点状态);
+* 选中态时出现选择控制点;通过拖动选择控制点对图例进行放大缩小得操作(有最大最小的宽高);
+* 当拖动连接线的定点连接该item锚点时;接近item会显示锚点;

+ 8 - 0
docs/guides/engine/clip.md

@@ -4,3 +4,11 @@
 :::
 
 裁剪方法从原始画布中剪切任意形状和尺寸。
+
+clip() 执行前必须 ```beginPath()```,<font color=red> beginPath </font> 意为开始新的路径; 而 <font color=red> closePath </font>意为闭合路径 
+
+<engine-clip />
+
+::: details 查看实例代码
+<<< @/docs/.vuepress/components/engine/clip.vue
+:::

+ 16 - 16
docs/guides/format/style.md

@@ -9,22 +9,22 @@
 ``` json
 {
     "default":{
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
+        "stroke": "SColor",
+        "fill": "SColor | Gradient",
+        "lineWidth": "number",
+        "effect": {}
     },
-    "Selected": {
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
+    "selected": {
+        "stroke": "SColor",
+        "fill": "SColor | Gradient",
+        "lineWidth": "number",
+        "effect": {}
     },
-    "Disabled": {
-        "Stroke": "SColor",
-        "Fill": "SColor | Gradient",
-        "LineWidth": "number",
-        "Effect": {}
+    "disabled": {
+        "stroke": "SColor",
+        "fill": "SColor | Gradient",
+        "lineWidth": "number",
+        "effect": {}
     },
 }
 ```
@@ -34,7 +34,7 @@
 
 2.如果需要其他状态的风格, 则需要在 item 中添加对应状态, 并在绘制时确定 item 当前处于何种状态, 同时风格数据中增加对应的状态及风格
 
-3.<font color="red"> Stroke </font> 为线条颜色, 其值为16进制的颜色字符串, 目前只支持6位和8位颜色字符串, 该字符串的生成方式,
+3.<font color="red"> stroke </font> 为线条颜色, 其值为16进制的颜色字符串, 目前只支持6位和8位颜色字符串, 该字符串的生成方式,
   调用引擎中``` SColor ```类型中``` toVal() ```方法可生成6位16进制颜色; 调用<font color="red"> value </font>属性可得到8位16进制颜色
   
 4.<font face="黑体" color="red"> Fill </font> 为渐变时, 其值为描述渐变的字符串,如
@@ -42,7 +42,7 @@
     ```'SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}' ```该字符串生成方式, 调用``` SGradient ```类型的``` value() ```方法即可生成;格式严格遵循示例,尽量不要手动拼接;
   <br /><font face="黑体" color="red"> Fill </font> 为普通颜色时, 其值与 <font face="黑体" color="red"> Stroke </font> 一致
   
-5.<font face="黑体" color="red"> LineWidth </font> 为线条宽度, 数字类型
+5.<font face="黑体" color="red"> lineWidth </font> 为线条宽度, 数字类型
 
 6.详情使用方式,参阅 [场景管理- item 示例-矩形](../scene/items/rect.md)
 

+ 59 - 59
docs/guides/format/systemJson.md

@@ -8,66 +8,66 @@
 
 ``` json5
 {
-    Data:[
+    data:[
         {
           
-            Elements:{                          // 系统图展示所需数据
-                Nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
-                Markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
-                Relations:[],                   // 管线对象
+            elements:{                          // 系统图展示所需数据
+                nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+                markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+                relations:[],                   // 管线对象
             },
-            ID: '',                             // 图ID
-            Name: '',                           // 名称
-            CategoryID: '',                     // 图分类ID
-            ProjectID: '',                      // 项目ID
-            BuildingID: '',                     // 建筑ID
-            FloorID: '',                        // 楼层id
-            Note: '',                           // 图说明
-            Log: {                              // 图操作日志
-                  Mark:'',                      // 图的存盘标记
-                  CommandList:[
+            id: '',                             // 图ID
+            name: '',                           // 名称
+            categoryID: '',                     // 图分类ID
+            projectID: '',                      // 项目ID
+            buildingID: '',                     // 建筑ID
+            floorID: '',                        // 楼层id
+            note: '',                           // 图说明
+            log: {                              // 图操作日志
+                  mark:'',                      // 图的存盘标记
+                  commandList:[
                    {
-                        Command: '',            // 命令
-                        Desc: '',               // 描述
-                        Detail: ''              // 详情
+                        command: '',            // 命令
+                        desc: '',               // 描述
+                        detail: ''              // 详情
                     }
                 ]
             }
         }
     ],
-    Message: '',
-    Result: ''
+    message: '',
+    result: ''
 }
 ```
 
 ## 图例节点
 
 ``` json5
-    Nodes:[
+    nodes:[
         {   
-            ID: '',                             // ID
-            Name: '',                           // 名称
-            AttachObjectIds:[],                 // 返回工程信息化对象 ID 列表
-            GraphElementType: '',               // 图例类型 None/Line/Zone/Image:非图例/线条/区域类型/图标
-            GraphElementId: '',                 // 对应的图元ID
-            Num: 1                              // 图例数量
-            Type: '',                           // 节点类型(image / zone)
-            Pos: {X: 0, Y: 0},                  // 位置
-            Scale: {X: 1, Y: 1, Z: 1},          // 缩放
-            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
-            Size: {Width:0, Height: 0},         // 大小
-            AnchorList:[
+            id: '',                             // ID
+            name: '',                           // 名称
+            attachObjectIds:[],                 // 返回工程信息化对象 ID 列表
+            graphElementType: '',               // 图例类型 None/Line/Zone/Image:非图例/线条/区域类型/图标
+            graphElementId: '',                 // 对应的图元ID
+            num: 1                              // 图例数量
+            type: '',                           // 节点类型(image / zone)
+            pos: {x: 0, y: 0},                  // 位置
+            scale: {x: 1, y: 1, Z: 1},          // 缩放
+            rotate: {x: 0, y: 0, Z: 0},         // 旋转
+            size: {width:0, height: 0},         // 大小
+            anchorList:[
                     {
-                        ID: '',                 // 锚点ID
-                        Pos: {X: 0, Y: 0},      // 锚点的坐标
+                        id: '',                 // 锚点ID
+                        pos: {x: 0, y: 0},      // 锚点的坐标
                     },
                     ...
                 ],
-            OutLine: [
-                [{X:0,Y:0,Z:0},...],            // 外轮廓 
+            outline: [
+                [{x:0,y:0,z:0},...],            // 外轮廓 
                 ...                             // 内轮廓
             ],                                  // 轮廓线
-            Properties: {}                      // 由应用自己定义
+            properties: {}                      // 由应用自己定义
         },
         ...
     ]
@@ -76,16 +76,16 @@
 ## 标识对象
 
 ``` json5
-    Markers:[
+    markers:[
         {
-            ID: '',                             // ID
-            Name: '',                           // 名称
-            Type: '',                           // 图标(Image),线类型(Line),文本(Text)
-            Pos: {X: 0, y: 0},                  // 位置
-            Scale: {X: 1, Y: 1, Z: 1},          // 缩放
-            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
-            Size: {Width: 0, Height: 0},        // 大小
-            Properties: {}                      // 由应用自己定义
+            id: '',                             // ID
+            name: '',                           // 名称
+            type: '',                           // 图标(Image),线类型(Line),文本(Text)
+            pos: {x: 0, y: 0},                  // 位置
+            scale: {x: 1, y: 1, z: 1},          // 缩放
+            rotate: {x: 0, y: 0, z: 0},         // 旋转
+            size: {width: 0, height: 0},        // 大小
+            properties: {}                      // 由应用自己定义
         },
         ...
     ]
@@ -94,19 +94,19 @@
 ## 对象关系
 
 ``` json5
-    Relations: [
+    relations: [
         {
-            ID: '',                             // ID
-            Name: '',                           // 名称
-            GraphElementId: '',                 // 对应的图元ID
-            Node1ID: '',                        // 关联节点1_id
-            Node2ID: '',                        // 关联节点2_id
-            Anchor1ID: '',                      // 关联锚点1_id
-            Anchor2ID: '',                      // 关联锚点2_id
-            Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
-            LineType: '',                       // 直线(Line),水平垂直
-            PointList: [{X:0,Y:0,Z:0},...],     // 线的顶点坐标
-            Style: {}                           // 线的绘图样式
+            id: '',                             // ID
+            name: '',                           // 名称
+            graphElementId: '',                 // 对应的图元ID
+            node1Id: '',                        // 关联节点1_id
+            node2Id: '',                        // 关联节点2_id
+            anchor1Id: '',                      // 关联锚点1_id
+            anchor2Id: '',                      // 关联锚点2_id
+            dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
+            lineType: '',                       // 直线(Line),水平垂直
+            pointList: [{x:0,y:0,z:0},...],     // 线的顶点坐标
+            style: {}                           // 线的绘图样式
         },
         ...
     ]

+ 2 - 4
docs/guides/index.js

@@ -33,10 +33,8 @@ const content = [
                 title: "Item 示例",
                 children: [
                     ["/guides/scene/items/rect", "矩形"],
-                    ["/guides/scene/items/polygon", "多边形"],
-                    ["/guides/scene/items/polygonGroup", "多边形组"],
-                    ["/guides/scene/items/area", "区域类型"],
-                    ["/guides/scene/items/areaGroup", "区域类型组"],
+                    ["/guides/scene/items/polygon", "多边形组"],
+                    ["/guides/scene/items/area", "区域类型组"],
                     ["/guides/scene/items/text", "文字"],
                     ["/guides/scene/items/image", "图片"],
                     ["/guides/scene/items/svg", "SVG 图"],

+ 6 - 2
docs/guides/scene/items/area.md

@@ -1,9 +1,13 @@
-# 区域
+# 区域
 
 ::: details 目录
 [[toc]]
 :::
 
-二维点数组
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphAreaGroupItem.ts" />
 
 <scene-items-area />
+
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/area.vue
+:::

+ 0 - 8
docs/guides/scene/items/areaGroup.md

@@ -1,8 +0,0 @@
-# 区域组
-
-::: details 目录
-[[toc]]
-:::
-
-
-二维点数组

+ 10 - 1
docs/guides/scene/items/polygon.md

@@ -1,4 +1,4 @@
-# 多边形
+# 多边形
 
 ::: details 目录
 [[toc]]
@@ -6,5 +6,14 @@
 
 ## item 实例
 
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphPolyGroupItem.ts" />
+
 <scene-items-polygon />
 
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/polygon.vue
+:::
+
+::: tip 注意
+选中时, 会出现对应的选中框, 如果想要多边形支持可编辑, 需要增加``` resize ```方法, 并添加响应的大小改变需要作出的改变
+:::

+ 0 - 8
docs/guides/scene/items/polygonGroup.md

@@ -1,8 +0,0 @@
-# 多边形组
-
-::: details 目录
-[[toc]]
-:::
-
-
-二维数组

+ 21 - 21
docs/guides/scene/items/rect.md

@@ -14,34 +14,34 @@
 示例中展示了 一种渐变风格的 json 传参
 
 ``` json
-"Default":{
-    "Stroke": "#cccccc",
-    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-    "LineWidth": 2,
-    "Effect": {}
+"default":{
+    "stroke": "#cccccc",
+    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "lineWidth": 2,
+    "effect": {}
 },
-"Selected": {
-    "Stroke": "#66ff66",
-    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-    "LineWidth": 3,
-    "Effect": {}
+"selected": {
+    "stroke": "#66ff66",
+    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "lineWidth": 3,
+    "effect": {}
 },
 ```
 
 一种普通纯色风格的 json 传参
 
 ``` json
-"Default":{
-    "Stroke": "#cccccc",
-    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-    "LineWidth": 2,
-    "Effect": {}
+"default":{
+    "stroke": "#cccccc",
+    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "lineWidth": 2,
+    "effect": {}
 },
-"Selected": {
-    "Stroke": "#66ff66",
-    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-    "LineWidth": 3,
-    "Effect": {}
+"selected": {
+    "stroke": "#66ff66",
+    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "lineWidth": 3,
+    "effect": {}
 },
 ```
 
@@ -53,4 +53,4 @@
 item 传入的圆角的半径默认是 0,即不绘制圆角; 如果传入的值是数字类型且不为0则绘制圆角; <br />
 item 传入的数据 data 大写跟随数据字典; <br />
 保存item的时候,保存类型为<font color=red> String </font>,调用渐变类的``` value() ```方法即可返回当前渐变类的字符串; <br />
-item 状态切换及<font color=red> Style </font>内容详情参考 [建筑信息图-底图风格](../../format/style.md)
+item 状态切换及<font color=red> style </font>内容详情参考 [建筑信息图-底图风格](../../format/style.md)

+ 4 - 4
docs/guides/system-diagram/json-file.md

@@ -49,10 +49,10 @@
             AttachObjectIds:[],                 // 返回工程信息化对象 ID 列表
             GraphElementType: '',               // 图例类型 None/Line/Zone/Image:非图例/线条/区域类型/图标
             GraphElementId: '',                 // 对应的图元ID
-            Num: 1                              //图例数量
+            Num: 1                              // 图例数量
             Pos: {X: 0, Y: 0},                  // 位置
             Scale: {X: 1, Y: 1, Z: 1},          // 缩放
-            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Rotate: {X: 0, Y: 0, Z: 0},         // 旋转
             Size: {Width:0, Height: 0},         // 大小
             AnchorList:[
                     {
@@ -81,7 +81,7 @@
             Type: '',                           // 图标(Image),线类型(Line),文本(Text)
             Pos: {X: 0, y: 0},                  // 位置
             Scale: {X: 1, Y: 1, Z: 1},          // 缩放
-            Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Rotate: {X: 0, Y: 0, Z: 0},         // 旋转
             Size: {Width:0, Height: 0},         // 大小
             Properties: {}                      // 由应用自己定义
         },
@@ -109,4 +109,4 @@
         ...
     ]
 ```
-```
+```

+ 7 - 7
package.json

@@ -1,9 +1,9 @@
 {
   "remote": {
-    "host": "47.94.89.44",
-    "path": "/opt/nginx/doc/web",
-    "user": "user1",
-    "password": "@)!^sagacloud",
+    "host": "47.93.22.124",
+    "path": "/opt/web/doc/web",
+    "user": "doc",
+    "password": "saga2020(^cloud==",
     "local": "docs/.vuepress/dist"
   },
   "scripts": {
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.7",
-    "@persagy-web/draw": "2.2.5",
-    "@persagy-web/graph": "2.2.9",
+    "@persagy-web/big": "2.2.9",
+    "@persagy-web/draw": "2.2.6",
+    "@persagy-web/graph": "2.2.13",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",