Procházet zdrojové kódy

feat:添加代码注释,优化代码格式

shaun-sheep před 4 roky
rodič
revize
116e7da6d3
45 změnil soubory, kde provedl 2847 přidání a 2536 odebrání
  1. 0 61
      docs/.vuepress/components/GitCode.vue
  2. 4 4
      docs/.vuepress/components/big/MapDemo.vue
  3. 9 7
      docs/.vuepress/components/big/items/column.vue
  4. 6 4
      docs/.vuepress/components/big/items/door.vue
  5. 1 1
      docs/.vuepress/components/big/items/space.vue
  6. 10 8
      docs/.vuepress/components/big/items/virtualWall.vue
  7. 10 8
      docs/.vuepress/components/big/items/wall.vue
  8. 1 1
      docs/.vuepress/components/big/items/window.vue
  9. 1 1
      docs/.vuepress/components/big/items/zone.vue
  10. 238 227
      docs/.vuepress/components/edit/items/editPolygon/editPolygon.vue
  11. 249 227
      docs/.vuepress/components/edit/items/editimage/editimage.vue
  12. 210 203
      docs/.vuepress/components/edit/items/editline/editline1.vue
  13. 96 90
      docs/.vuepress/components/edit/items/editline/editline1_copy.vue
  14. 236 225
      docs/.vuepress/components/edit/items/editpolyline/editpolyline.vue
  15. 289 286
      docs/.vuepress/components/edit/items/edittext/edittext.vue
  16. 248 192
      docs/.vuepress/components/edit/undo/undo.vue
  17. 45 28
      docs/.vuepress/components/engine/arrow.vue
  18. 32 14
      docs/.vuepress/components/engine/clip.vue
  19. 78 56
      docs/.vuepress/components/engine/composite.vue
  20. 91 15
      docs/.vuepress/components/engine/demo/elsfk.vue
  21. 57 15
      docs/.vuepress/components/engine/demo/elsfkDifficult.vue
  22. 8 7
      docs/.vuepress/components/engine/gradient/GradRect.ts
  23. 5 3
      docs/.vuepress/components/engine/gradient/gradient.vue
  24. 10 8
      docs/.vuepress/components/engine/selectContainer.vue
  25. 12 12
      docs/.vuepress/components/engine/shape/Circle1.vue
  26. 16 9
      docs/.vuepress/components/engine/shape/DrawLine1.vue
  27. 6 5
      docs/.vuepress/components/engine/shape/DrawLine2.vue
  28. 6 4
      docs/.vuepress/components/engine/shape/DrawPolyline1.vue
  29. 11 6
      docs/.vuepress/components/engine/shape/DrawRect1.vue
  30. 9 6
      docs/.vuepress/components/engine/shape/path.vue
  31. 44 19
      docs/.vuepress/components/engine/style/shadow.vue
  32. 5 4
      docs/.vuepress/components/format/style.vue
  33. 26 25
      docs/.vuepress/components/scene/Align.vue
  34. 6 5
      docs/.vuepress/components/scene/Undo1.vue
  35. 4 10
      docs/.vuepress/components/scene/items/ClockItem.vue
  36. 8 4
      docs/.vuepress/components/scene/items/ImageItem.vue
  37. 14 13
      docs/.vuepress/components/scene/items/PolylineItem.vue
  38. 6 6
      docs/.vuepress/components/scene/items/SEditLine.vue
  39. 548 551
      docs/.vuepress/components/scene/items/SEditPolygon.vue
  40. 32 17
      docs/.vuepress/components/scene/items/SImgTextItem.vue
  41. 120 120
      docs/.vuepress/components/scene/items/TextItem.vue
  42. 9 8
      docs/.vuepress/components/scene/items/area.vue
  43. 13 10
      docs/.vuepress/components/scene/items/polygon.vue
  44. 14 9
      docs/.vuepress/components/scene/items/rect.vue
  45. 4 2
      docs/.vuepress/components/scene/items/svg.vue

+ 0 - 61
docs/.vuepress/components/GitCode.vue

@@ -1,61 +0,0 @@
-<template>
-    <details class="custom-block details custom-code">
-        <summary>查看源代码:{{ fileUrl }}</summary>
-        <div style="max-height: 800px;overflow: auto">
-        <pre class="line-numbers">
-    <code class="language-typescript" v-html="code"></code>
-        </pre>
-        </div>
-    </details>
-</template>
-
-<script lang="ts">
-    import axios from "axios"
-    import { Component, Prop, Vue } from "vue-property-decorator";
-    @Component
-    export default class GitCode extends Vue {
-        @Prop({
-            type: String,
-            required: false,
-            default: '/web/persagy-web'
-        }) project !: string;
-        @Prop({
-            type: String,
-            required: false,
-            default: '/raw/master'
-        }) raw !: string;
-        @Prop({
-            type: String,
-            required: false,
-            default: '/persagy-web-big/src/items/SIconTextItem.ts'
-        }) fileUrl !: string;
-        @Prop({
-            type: String,
-            required: false,
-            default: 'typescript'
-        }) type !: string;
-        baseUrl: string = '/gogs';
-        code: string = '';
-        created() {
-            this.init()
-        };
-        get requestUrl(){
-            return this.baseUrl + this.project + this.raw + this.fileUrl;
-        };
-        init(){
-            axios({
-                method: "get",
-                url: this.requestUrl
-            }).then(res => {
-                this.code = res.data;
-                this.$nextTick(()=>{
-                    // 此处选择器 只选择当前组件的pre code,否则影响组件外 代码区域 格式
-                    document.querySelectorAll(".custom-code pre code").forEach(block => {
-                        // @ts-ignore
-                        Prism.highlightElement(block)
-                    });
-                });
-            })
-        }
-    }
-</script>

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

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SFloorParser } from "@persagy-web/big/lib";
-    import { Component, Vue } from "vue-property-decorator";
+    import {SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import {SFloorParser} from "@persagy-web/big/lib";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class MapDemoCanvas extends Vue {
@@ -18,7 +18,7 @@
         map1 = require('../../../public/assets/map/1.json');
         map2 = require('../../../public/assets/map/2.json');
 
-        mounted():void{
+        mounted(): void {
             this.view = new SGraphView("mapDemo");
             this.init()
         };

+ 9 - 7
docs/.vuepress/components/big/items/column.vue

@@ -1,36 +1,38 @@
 <template>
     <div>
-        <canvas id="wall" width="800" height="400"  tabindex="0" />
+        <canvas id="wall" width="800" height="400" tabindex="0"/>
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SColumnItem} from "@persagy-web/big/lib/items/floor/SColumnItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class ColumnCanvas extends Vue {
         view: SGraphView | undefined;
         // 图中靠上位置的黑色矩形轮廓
-        outline1 = [[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]];
+        outline1 = [[{X: 120, Y: 10}, {X: 120, Y: 30}, {X: 10, Y: 30}, {X: 10, Y: 10}]];
         // 图中靠下位置的,绘制多个图形,会覆盖
         outline2 = [
-            [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
-            [{X:20,Y:-30},{X:20,Y:-85},{X:110,Y:-85},{X:110,Y:-40}]
+            [{X: 120, Y: -30}, {X: 120, Y: -50}, {X: 10, Y: -50}, {X: 10, Y: -30}],
+            [{X: 20, Y: -30}, {X: 20, Y: -85}, {X: 110, Y: -85}, {X: 110, Y: -40}]
         ];
+
         mounted(): void {
             this.init();
         };
+
         init(): void {
             this.view = new SGraphView('wall');
             const scene = new SGraphScene();
             this.view.scene = scene;
             // 只模拟了轮廓数据
-            const item = new SColumnItem(null,{OutLine:this.outline1});
+            const item = new SColumnItem(null, {OutLine: this.outline1});
             scene.addItem(item);
             // 只模拟了轮廓数据
-            const item2 = new SColumnItem(null,{OutLine:this.outline2});
+            const item2 = new SColumnItem(null, {OutLine: this.outline2});
             scene.addItem(item2);
             this.view.fitSceneToView();
             this.view.scalable = false;

+ 6 - 4
docs/.vuepress/components/big/items/door.vue

@@ -1,21 +1,23 @@
 <template>
     <div>
-        <canvas id="wall" width="800" height="400"  tabindex="0" />
+        <canvas id="wall" width="800" height="400" tabindex="0"/>
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SDoorItem} from "@persagy-web/big/lib/items/floor/SDoorItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class WallCanvas extends Vue {
         view: SGraphView | undefined;
-        outline1 = [[{X:12000,Y:10000},{X:12000,Y:30000}]];
+        outline1 = [[{X: 12000, Y: 10000}, {X: 12000, Y: 30000}]];
+
         mounted(): void {
             this.init();
         };
+
         init(): void {
             this.view = new SGraphView('wall');
             const scene = new SGraphScene();
@@ -25,7 +27,7 @@
             const item = new SDoorItem(null,
                 // @ts-ignore
                 {
-                    OutLine:this.outline1,
+                    OutLine: this.outline1,
                     FaceDirection: {X: 0, Y: -1, Z: 0},
                     HandDirection: {X: 1, Y: 0, Z: 0}
                 }

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

@@ -7,7 +7,7 @@
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SSpaceItem} from "@persagy-web/big/lib/items/floor/SSpaceItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class SpaceCanvas extends Vue {

+ 10 - 8
docs/.vuepress/components/big/items/virtualWall.vue

@@ -1,36 +1,38 @@
 <template>
     <div>
-        <canvas id="wall" width="800" height="400"  tabindex="0" />
+        <canvas id="wall" width="800" height="400" tabindex="0"/>
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SVirtualWallItem} from "@persagy-web/big/lib/items/floor/SVirtualWallItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class VirtualWallCanvas extends Vue {
         view: SGraphView | undefined;
         // 图中靠上位置的黑色矩形轮廓
-        outline1 = [[{X:12000,Y:1000},{X:12000,Y:3000},{X:1000,Y:3000},{X:1000,Y:1000}]];
+        outline1 = [[{X: 12000, Y: 1000}, {X: 12000, Y: 3000}, {X: 1000, Y: 3000}, {X: 1000, Y: 1000}]];
         // 图中靠下位置的,中间掏洞
         outline2 = [
-            [{X:12000,Y:-3000},{X:12000,Y:-5000},{X:1000,Y:-5000},{X:10,Y:-3000}],
-            [{X:2000,Y:-4000},{X:2000,Y:-4500},{X:10000,Y:-4500},{X:10000,Y:-4000}]
+            [{X: 12000, Y: -3000}, {X: 12000, Y: -5000}, {X: 1000, Y: -5000}, {X: 10, Y: -3000}],
+            [{X: 2000, Y: -4000}, {X: 2000, Y: -4500}, {X: 10000, Y: -4500}, {X: 10000, Y: -4000}]
         ];
+
         mounted() {
             this.init();
         };
-        init(){
+
+        init() {
             this.view = new SGraphView('wall');
             const scene = new SGraphScene();
             this.view.scene = scene;
             // 只模拟了轮廓数据
-            const item = new SVirtualWallItem(null,{OutLine:this.outline1});
+            const item = new SVirtualWallItem(null, {OutLine: this.outline1});
             scene.addItem(item);
             // 只模拟了轮廓数据
-            const item2 = new SVirtualWallItem(null,{OutLine:this.outline2});
+            const item2 = new SVirtualWallItem(null, {OutLine: this.outline2});
             scene.addItem(item2);
             this.view.fitSceneToView();
             this.view.scalable = false;

+ 10 - 8
docs/.vuepress/components/big/items/wall.vue

@@ -1,36 +1,38 @@
 <template>
     <div>
-        <canvas id="wall" width="800" height="400"  tabindex="0" />
+        <canvas id="wall" width="800" height="400" tabindex="0"/>
     </div>
 </template>
 
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SWallItem} from "@persagy-web/big/lib/items/floor/SWallItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class WallCanvas extends Vue {
         view: SGraphView | undefined;
         // 图中靠上位置的黑色矩形轮廓
-        outline1 = [[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]];
+        outline1 = [[{X: 120, Y: 10}, {X: 120, Y: 30}, {X: 10, Y: 30}, {X: 10, Y: 10}]];
         // 图中靠下位置的,中间掏洞
         outline2 = [
-            [{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}],
-            [{X:20,Y:-40},{X:20,Y:-45},{X:100,Y:-45},{X:100,Y:-40}]
+            [{X: 120, Y: -30}, {X: 120, Y: -50}, {X: 10, Y: -50}, {X: 10, Y: -30}],
+            [{X: 20, Y: -40}, {X: 20, Y: -45}, {X: 100, Y: -45}, {X: 100, Y: -40}]
         ];
+
         mounted() {
             this.init();
         };
-        init(){
+
+        init() {
             this.view = new SGraphView('wall');
             const scene = new SGraphScene();
             this.view.scene = scene;
             // 只模拟了轮廓数据
-            const item = new SWallItem(null,{OutLine:this.outline1});
+            const item = new SWallItem(null, {OutLine: this.outline1});
             scene.addItem(item);
             // 只模拟了轮廓数据
-            const item2 = new SWallItem(null,{OutLine:this.outline2});
+            const item2 = new SWallItem(null, {OutLine: this.outline2});
             scene.addItem(item2);
             this.view.fitSceneToView();
             this.view.scalable = false;

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

@@ -7,7 +7,7 @@
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SWindowItem} from "@persagy-web/big/lib/items/floor/SWindowItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class WindowCanvas extends Vue {

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

@@ -7,7 +7,7 @@
 <script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SZoneItem} from "@persagy-web/big/lib/items/floor/ZoneItem";
-    import { Component, Vue } from "vue-property-decorator";
+    import {Component, Vue} from "vue-property-decorator";
 
     @Component
     export default class ZoneCanvas extends Vue {

+ 238 - 227
docs/.vuepress/components/edit/items/editPolygon/editPolygon.vue

@@ -1,243 +1,254 @@
 <template>
-  <div class="edit-line">
-    <!-- 所有按钮 -->
-    <div class="btn-list">
-      <el-button
-        :class="[cmdStatus=='create' ? 'heightLight' : '']"
-        size="small"
-        @click="create"
-      >创建多边形</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>
+    <div class="edit-line">
+        <!-- 所有按钮 -->
+        <div class="btn-list">
+            <el-button
+                    :class="[cmdStatus=='create' ? 'heightLight' : '']"
+                    size="small"
+                    @click="create"
+            >创建多边形
+            </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>
-      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
-        <el-button
-          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
-          size="small"
-          @click="eqDrawLine"
-        >垂直水平绘制</el-button>
-      </el-tooltip>
+            <el-button
+                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+                    size="small"
+                    @click="deleteItem"
+            >删除
+            </el-button>
+            <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
+                <el-button
+                        :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
+                        size="small"
+                        @click="eqDrawLine"
+                >垂直水平绘制
+                </el-button>
+            </el-tooltip>
+        </div>
+        <div class="content">
+            <div class="left">
+                <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div slot="header" class="clearfix">
+                        <span>属性修改</span>
+                    </div>
+                    <div class="always-item">
+                        <span>边框宽:</span>
+                        <el-input-number
+                                size="small"
+                                v-model="lineWidth"
+                                @change="changeLineWidth"
+                                :min="1"
+                                :max="50"
+                        ></el-input-number>
+                    </div>
+                    <div class="always-item">
+                        <span>线类型:</span>
+                        <el-select
+                                style="width:130px"
+                                size="small"
+                                v-model="lineType"
+                                @change="changeType"
+                                placeholder="请选择"
+                        >
+                            <el-option
+                                    v-for="item in options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
+                    </div>
+                    <div class="always-item">
+                        <span>填充色:</span>
+                        <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
+                    </div>
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left">
-        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div slot="header" class="clearfix">
-            <span>属性修改</span>
-          </div>
-          <div class="always-item">
-            <span>边框宽:</span>
-            <el-input-number
-              size="small"
-              v-model="lineWidth"
-              @change="changeLineWidth"
-              :min="1"
-              :max="50"
-            ></el-input-number>
-          </div>
-          <div class="always-item">
-            <span>线类型:</span>
-            <el-select
-              style="width:130px"
-              size="small"
-              v-model="lineType"
-              @change="changeType"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
-          </div>
-          <div class="always-item">
-            <span>填充色:</span>
-            <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
-          </div>
-        </el-card>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
-import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import { SPoint ,SColor} from "@persagy-web/draw/";
-//注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
-import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
-import { hexify } from "./../../../../public/until/rgbaUtil";
-export default {
-  name: "editpolygon",
-  data() {
-    return {
-      scene: null,       //场景
-      view: null,        //view实例
-      isCreated: false,  //是否创建完成
-      cmdStatus: "",     //选中状态
-      polygonItem: null, //存放创建的Item
-      lineWidth: 1,      //border线宽
-      lineColor: "",     //border线颜色
-      fillColor:"",      //填充色
-      lineType: "",      //border线类型
-      options: [
-        {
-          value: "Solid",
-          label: "实线"
+    import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { SColor } from "@persagy-web/draw/";
+    //注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
+    import { EditPolygonItem } from "./../../../../../guides/edit/items/src/EditPolygonItem";
+    import { hexify } from "./../../../../public/until/rgbaUtil";
+
+    export default {
+        name: "editpolygon",
+        data() {
+            return {
+                scene: null,       //场景
+                view: null,        //view实例
+                isCreated: false,  //是否创建完成
+                cmdStatus: "",     //选中状态
+                polygonItem: null, //存放创建的Item
+                lineWidth: 1,      //border线宽
+                lineColor: "",     //border线颜色
+                fillColor: "",      //填充色
+                lineType: "",      //border线类型
+                options: [
+                    {
+                        value: "Solid",
+                        label: "实线"
+                    },
+                    {
+                        value: "Dashed",
+                        label: "虚线"
+                    },
+                    {
+                        value: "Dotted",
+                        label: "点"
+                    }
+                ]
+            };
         },
-        {
-          value: "Dashed",
-          label: "虚线"
+        mounted() {
+            this.view = new SGraphView("edit_polygon");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
         },
-        {
-          value: "Dotted",
-          label: "点"
+        methods: {
+            create() {
+                this.cmdStatus = "create";
+                this.scene.root.children = [];
+                this.polygonItem = new EditPolygonItem(null);
+                this.polygonItem.status = SItemStatus.Create;
+                this.polygonItem.connect("finishCreated", this, this.finishCreated);
+                this.scene.addItem(this.polygonItem);
+                this.scene.grabItem = this.polygonItem;
+                this.view.update();
+            },
+            deleteItem() {
+                this.cmdStatus = "";
+                this.scene.removeItem(this.polygonItem);
+                this.polygonItem = null;
+                this.view.update();
+            },
+            edit() {
+                if (this.polygonItem) {
+                    if (this.polygonItem.status == SItemStatus.Normal) {
+                        this.scene.grabItem = this.polygonItem;
+                        this.polygonItem.status = SItemStatus.Edit;
+                        // this.polygonItem.verAndLeve = false;
+                        this.cmdStatus = "edit";
+                    } else {
+                        this.polygonItem.status = SItemStatus.Normal;
+                        this.scene.grabItem = null;
+                        this.cmdStatus = "";
+                    }
+                }
+            },
+            eqDrawLine() {
+                this.cmdStatus = "eqDrawLine";
+                this.scene.root.children = [];
+                this.polygonItem = new EditPolygonItem(null, []);
+                this.polygonItem.verAndLeve = true;
+                this.polygonItem.status = SItemStatus.Create;
+                this.polygonItem.connect("finishCreated", this, this.finishCreated);
+                this.polygonItem.moveable = true;
+                this.scene.addItem(this.polygonItem);
+                this.scene.grabItem = this.polygonItem;
+                this.view.update();
+            },
+            // 改变线宽属性
+            changeLineWidth(val) {
+                if (this.polygonItem) {
+                    this.lineWidth = val;
+                    this.polygonItem.lineWidth = val;
+                }
+            },
+            // 改变颜色
+            changeColor(val) {
+                if (this.polygonItem) {
+                    this.lineColor = hexify(val);
+                    this.polygonItem.strokeColor = new SColor(this.lineColor);
+                }
+            },
+            // 改变填充颜色
+            changeFillColor(val) {
+                if (this.polygonItem) {
+                    this.fillColor = hexify(val);
+                    this.polygonItem.fillColor = new SColor(this.lineColor);
+                }
+            },
+            //改变线得类型
+            changeType(val) {
+                if (this.polygonItem) {
+                    this.polygonItem.lineStyle = SLineStyle[val];
+                }
+            },
+            // 完成创建后的回调
+            finishCreated() {
+                this.cmdStatus = "";
+            }
+        },
+        watch: {
+            polygonItem(val) {
+                if (val) {
+                    this.lineWidth = val.lineWidth; // 线宽
+                    this.lineStyle = val.lineStyle; // 线条样式
+                    this.lineColor = val.strokeColor.value; // 线条填充色
+                    this.fillColor = val.fillColor.value; // 线条填充色
+                    this.lineType = this.options[val.lineStyle].value;
+                } else {
+                    this.lineWidth = 0;
+                }
+            }
         }
-      ]
     };
-  },
-  mounted() {
-    this.view = new SGraphView("edit_polygon");
-    this.scene = new SGraphScene();
-    this.view.scene = this.scene;
-  },
-  methods: {
-    create() {
-      this.cmdStatus = "create";
-      this.scene.root.children = [];
-      this.polygonItem = new EditPolygonItem(null);
-      this.polygonItem.status = SItemStatus.Create;
-      this.polygonItem.connect("finishCreated", this, this.finishCreated);
-      this.scene.addItem(this.polygonItem);
-      this.scene.grabItem = this.polygonItem;
-      this.view.update();
-    },
-    deleteItem() {
-      this.cmdStatus = "";
-      this.scene.removeItem(this.polygonItem);
-      this.polygonItem = null;
-      this.view.update();
-    },
-    edit() {
-      if (this.polygonItem) {
-        if (this.polygonItem.status == SItemStatus.Normal) {
-          this.scene.grabItem = this.polygonItem;
-          this.polygonItem.status = SItemStatus.Edit;
-          // this.polygonItem.verAndLeve = false;
-          this.cmdStatus = "edit";
-        } else {
-          this.polygonItem.status = SItemStatus.Normal;
-          this.scene.grabItem = null;
-          this.cmdStatus = "";
-        }
-      }
-    },
-    eqDrawLine() {
-      this.cmdStatus = "eqDrawLine";
-      this.scene.root.children = [];
-      this.polygonItem = new EditPolygonItem(null, []);
-      this.polygonItem.verAndLeve = true;
-      this.polygonItem.status = SItemStatus.Create;
-      this.polygonItem.connect("finishCreated", this, this.finishCreated);
-      this.polygonItem.moveable = true;
-      this.scene.addItem(this.polygonItem);
-      this.scene.grabItem = this.polygonItem;
-      this.view.update();
-    },
-    // 改变线宽属性
-    changeLineWidth(val) {
-      if (this.polygonItem) {
-        this.lineWidth = val;
-        this.polygonItem.lineWidth = val;
-      }
-    },
-    // 改变颜色
-    changeColor(val) {
-      if (this.polygonItem) {
-        this.lineColor = hexify(val);
-        this.polygonItem.strokeColor = new SColor(this.lineColor);
-      }
-    },
-     // 改变填充颜色
-    changeFillColor(val) {
-      if (this.polygonItem) {
-        this.fillColor = hexify(val);
-        this.polygonItem.fillColor = new SColor(this.lineColor);
-      }
-    },
-    //改变线得类型
-    changeType(val) {
-      if (this.polygonItem) {
-        this.polygonItem.lineStyle = SLineStyle[val];
-      }
-    },
-    // 完成创建后的回调
-    finishCreated() {
-      this.cmdStatus = "";
-    }
-  },
-  watch: {
-    polygonItem(val) {
-      if (val) {
-        this.lineWidth = val.lineWidth; // 线宽
-        this.lineStyle = val.lineStyle; // 线条样式
-        this.lineColor = val.strokeColor.value; // 线条填充色
-        this.fillColor = val.fillColor.value; // 线条填充色
-        this.lineType = this.options[val.lineStyle].value;
-      } else {
-        this.lineWidth = 0;
-      }
-    }
-  }
-};
 </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 {
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 249 - 227
docs/.vuepress/components/edit/items/editimage/editimage.vue

@@ -1,243 +1,265 @@
 <template>
-  <div class="edit-line">
-    <!-- 所有按钮 -->
-    <div class="btn-list">
-      <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
-      <el-button
-        :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
-        size="small"
-        @click="deleteItem"
-      >删除</el-button>
+    <div class="edit-line">
+        <!-- 所有按钮 -->
+        <div class="btn-list">
+            <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
+            <el-button
+                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+                    size="small"
+                    @click="deleteItem"
+            >删除
+            </el-button>
+        </div>
+        <div class="content">
+            <div class="left">
+                <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div slot="header" class="clearfix">
+                        <span>属性修改</span>
+                    </div>
+                    <div class="always-item">
+                        <span>边框宽:</span>
+                        <el-input-number
+                                size="small"
+                                v-model="lineWidth"
+                                @change="changeLineWidth"
+                                :min="1"
+                                :max="50"
+                        ></el-input-number>
+                    </div>
+                    <div class="always-item">
+                        <span>图展示类型:</span>
+                        <el-select
+                                style="width:130px"
+                                size="small"
+                                v-model="showType"
+                                @change="changeType"
+                                placeholder="请选择"
+                        >
+                            <el-option
+                                    v-for="item in options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
+                    </div>
+                    <!-- <div class="always-item">
+                      <span>填充色:</span>
+                      <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
+                    </div>-->
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left">
-        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div slot="header" class="clearfix">
-            <span>属性修改</span>
-          </div>
-          <div class="always-item">
-            <span>边框宽:</span>
-            <el-input-number
-              size="small"
-              v-model="lineWidth"
-              @change="changeLineWidth"
-              :min="1"
-              :max="50"
-            ></el-input-number>
-          </div>
-          <div class="always-item">
-            <span>图展示类型:</span>
-            <el-select
-              style="width:130px"
-              size="small"
-              v-model="showType"
-              @change="changeType"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
-          </div>
-          <!-- <div class="always-item">
-            <span>填充色:</span>
-            <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
-          </div>-->
-        </el-card>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
-import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import { SPoint, SColor } from "@persagy-web/draw/";
-//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
-import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
-import { hexify } from "./../../../../public/until/rgbaUtil";
-class SScene extends SGraphScene {
-  cmdStatus = "";
-  imageItem = null;
-  constructor() {
-    super();
-  }
-  onMouseDown(event) {
-    if (this.cmdStatus == "create" && this.imageItem) {
-      this.imageItem.moveTo(event.x, event.y);
-      this.addItem(this.imageItem);
-      this.changeStatus("");
-    } else {
-      return super.onMouseDown(event);
+    import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { SColor } from "@persagy-web/draw/";
+    //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
+    import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
+    import { hexify } from "./../../../../public/until/rgbaUtil";
+
+    class SScene extends SGraphScene {
+        cmdStatus = "";
+        imageItem = null;
+
+      /**
+       * 构造函数
+       */
+        constructor() {
+            super();
+        }
+
+      /**
+       * 鼠标按下事件
+       *
+       * @param event   事件
+       * @returns 是否处理
+       */
+        onMouseDown(event) {
+            if (this.cmdStatus == "create" && this.imageItem) {
+                this.imageItem.moveTo(event.x, event.y);
+                this.addItem(this.imageItem);
+                this.changeStatus("");
+            } else {
+                return super.onMouseDown(event);
+            }
+        }
+
+        //   触发cmdStatus
+        changeStatus() {
+        }
     }
-  }
-  //   触发cmdStatus
-  changeStatus() {}
-}
-export default {
-  name: "EditPolylineItem",
-  data() {
-    return {
-      scene: null, //场景
-      view: null, //view实例
-      isCreated: false, //是否创建完成
-      cmdStatus: "", //选中状态
-      imageItem: null, //存放创建的Item
-      lineWidth: 1, //border线宽
-      lineColor: "", //border线颜色
-      fillColor: "", //填充色
-      showType: "", //图展示类型
-      options: [
-        {
-          value: "Full",
-          label: "铺满"
+
+    export default {
+        name: "EditPolylineItem",
+        data() {
+            return {
+                scene: null, //场景
+                view: null, //view实例
+                isCreated: false, //是否创建完成
+                cmdStatus: "", //选中状态
+                imageItem: null, //存放创建的Item
+                lineWidth: 1, //border线宽
+                lineColor: "", //border线颜色
+                fillColor: "", //填充色
+                showType: "", //图展示类型
+                options: [
+                    {
+                        value: "Full",
+                        label: "铺满"
+                    },
+                    {
+                        value: "AutoFit",
+                        label: "自适应"
+                    },
+                    {
+                        value: "Equivalency",
+                        label: "等比缩放"
+                    }
+                ]
+            };
         },
-        {
-          value: "AutoFit",
-          label: "自适应"
+        mounted() {
+            this.view = new SGraphView("edit_polygon");
+            this.scene = new SScene();
+            this.view.scene = this.scene;
+            this.scene.changeStatus = this.changeStatus
         },
-        {
-          value: "Equivalency",
-          label: "等比缩放"
+        methods: {
+            create() {
+                this.cmdStatus = "create";
+                this.scene.root.children = [];
+                this.imageItem = new EditImageItem(null);
+                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.imageItem.width = 100;
+                this.imageItem.height = 100;
+                this.imageItem.moveable = true;
+                this.scene.imageItem = this.imageItem;
+            },
+            deleteItem() {
+                this.cmdStatus = "";
+                this.scene.removeItem(this.imageItem);
+                this.imageItem = null;
+                this.view.update();
+            },
+            edit() {
+                if (this.imageItem) {
+                    if (this.imageItem.status == SItemStatus.Normal) {
+                        this.scene.grabItem = this.imageItem;
+                        this.imageItem.status = SItemStatus.Edit;
+                        // this.imageItem.verAndLeve = false;
+                        this.cmdStatus = "edit";
+                    } else {
+                        this.imageItem.status = SItemStatus.Normal;
+                        this.scene.grabItem = null;
+                        this.cmdStatus = "";
+                    }
+                }
+            },
+            eqDrawLine() {
+                this.cmdStatus = "eqDrawLine";
+                this.scene.root.children = [];
+                //   this.imageItem = new EditPolylineItem(null, []);
+                this.imageItem.verAndLeve = true;
+                this.imageItem.status = SItemStatus.Create;
+                this.imageItem.connect("finishCreated", this, this.finishCreated);
+                this.imageItem.moveable = true;
+                this.scene.addItem(this.imageItem);
+                this.view.update();
+            },
+            // 改变线宽属性
+            changeLineWidth(val) {
+                if (this.imageItem) {
+                    this.lineWidth = val;
+                    this.imageItem.lineWidth = val;
+                }
+            },
+            // 改变颜色
+            changeColor(val) {
+                if (this.imageItem) {
+                    this.lineColor = hexify(val);
+                    this.imageItem.strokeColor = new SColor(this.lineColor);
+                }
+            },
+            // 改变填充颜色
+            changeFillColor(val) {
+                if (this.imageItem) {
+                    this.fillColor = hexify(val);
+                    this.imageItem.fillColor = new SColor(this.lineColor);
+                }
+            },
+            //改变图的展示类型
+            changeType(val) {
+                if (this.imageItem) {
+                    this.imageItem.showType = SImageShowType[val];
+                }
+            },
+            // 完成创建后的回调
+            changeStatus() {
+                this.cmdStatus = "";
+            }
+        },
+        watch: {
+            imageItem(val) {
+                //   if (val) {
+                //     this.lineWidth = val.lineWidth; // 线宽
+                this.showType = this.options[val.showType].value;
+                //   } else {
+                //     this.lineWidth = 0;
+                //   }
+            },
+            cmdStatus(val) {
+                this.scene.cmdStatus = val;
+            }
         }
-      ]
     };
-  },
-  mounted() {
-    this.view = new SGraphView("edit_polygon");
-    this.scene = new SScene();
-    this.view.scene = this.scene;
-    this.scene.changeStatus = this.changeStatus
-  },
-  methods: {
-    create() {
-      this.cmdStatus = "create";
-      this.scene.root.children = [];
-      this.imageItem = new EditImageItem(null);
-      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.imageItem.width = 100;
-      this.imageItem.height = 100;
-      this.imageItem.moveable = true;
-      this.scene.imageItem = this.imageItem;
-    },
-    deleteItem() {
-      this.cmdStatus = "";
-      this.scene.removeItem(this.imageItem);
-      this.imageItem = null;
-      this.view.update();
-    },
-    edit() {
-      if (this.imageItem) {
-        if (this.imageItem.status == SItemStatus.Normal) {
-          this.scene.grabItem = this.imageItem;
-          this.imageItem.status = SItemStatus.Edit;
-          // this.imageItem.verAndLeve = false;
-          this.cmdStatus = "edit";
-        } else {
-          this.imageItem.status = SItemStatus.Normal;
-          this.scene.grabItem = null;
-          this.cmdStatus = "";
-        }
-      }
-    },
-    eqDrawLine() {
-      this.cmdStatus = "eqDrawLine";
-      this.scene.root.children = [];
-      //   this.imageItem = new EditPolylineItem(null, []);
-      this.imageItem.verAndLeve = true;
-      this.imageItem.status = SItemStatus.Create;
-      this.imageItem.connect("finishCreated", this, this.finishCreated);
-      this.imageItem.moveable = true;
-      this.scene.addItem(this.imageItem);
-      this.view.update();
-    },
-    // 改变线宽属性
-    changeLineWidth(val) {
-      if (this.imageItem) {
-        this.lineWidth = val;
-        this.imageItem.lineWidth = val;
-      }
-    },
-    // 改变颜色
-    changeColor(val) {
-      if (this.imageItem) {
-        this.lineColor = hexify(val);
-        this.imageItem.strokeColor = new SColor(this.lineColor);
-      }
-    },
-    // 改变填充颜色
-    changeFillColor(val) {
-      if (this.imageItem) {
-        this.fillColor = hexify(val);
-        this.imageItem.fillColor = new SColor(this.lineColor);
-      }
-    },
-    //改变图的展示类型
-    changeType(val) {
-      if (this.imageItem) {
-        this.imageItem.showType = SImageShowType[val];
-      }
-    },
-    // 完成创建后的回调
-    changeStatus() {
-      this.cmdStatus = "";
-    }
-  },
-  watch: {
-    imageItem(val) {
-      //   if (val) {
-      //     this.lineWidth = val.lineWidth; // 线宽
-          this.showType = this.options[val.showType].value;
-      //   } else {
-      //     this.lineWidth = 0;
-      //   }
-    },
-    cmdStatus(val) {
-      this.scene.cmdStatus = val;
-    }
-  }
-};
 </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 {
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 210 - 203
docs/.vuepress/components/edit/items/editline/editline1.vue

@@ -1,219 +1,226 @@
 <template>
-  <div class="edit-line">
-    <div class="btn-list">
-      <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</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>
+    <div class="edit-line">
+        <div class="btn-list">
+            <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</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>
-      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
-        <el-button
-          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
-          size="small"
-          @click="eqDrawLine"
-        >垂直水平划线</el-button>
-      </el-tooltip>
+            <el-button
+                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+                    size="small"
+                    @click="deleteItem"
+            >删除
+            </el-button>
+            <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
+                <el-button
+                        :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
+                        size="small"
+                        @click="eqDrawLine"
+                >垂直水平划线
+                </el-button>
+            </el-tooltip>
+        </div>
+        <div class="content">
+            <div class="left">
+                <canvas id="edit_line" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div slot="header" class="clearfix">
+                        <span>属性修改</span>
+                    </div>
+                    <div class="always-item">
+                        <span>线宽:</span>
+                        <el-input-number
+                                size="small"
+                                v-model="lineWidth"
+                                @change="changeLineWidth"
+                                :min="1"
+                                :max="50"
+                        ></el-input-number>
+                    </div>
+                    <div class="always-item">
+                        <span>线类型:</span>
+                        <el-select
+                                style="width:130px"
+                                size="small"
+                                v-model="lineType"
+                                @change="changeType"
+                                placeholder="请选择"
+                        >
+                            <el-option
+                                    v-for="item in options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
+                    </div>
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left">
-        <canvas id="edit_line" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div slot="header" class="clearfix">
-            <span>属性修改</span>
-          </div>
-          <div class="always-item">
-            <span>线宽:</span>
-            <el-input-number
-              size="small"
-              v-model="lineWidth"
-              @change="changeLineWidth"
-              :min="1"
-              :max="50"
-            ></el-input-number>
-          </div>
-          <div class="always-item">
-            <span>线类型:</span>
-            <el-select
-              style="width:130px"
-              size="small"
-              v-model="lineType"
-              @change="changeType"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
-          </div>
-        </el-card>
-      </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 { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
-import { hexify } from "./../../../../public/until/rgbaUtil";
-//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
-export default {
-  name: "editLine",
-  data() {
-    return {
-      scene: null,
-      view: null,
-      isCreated: false, //是否创建完成
-      cmdStatus: "", //选中状态
-      lineItem: null, //存放创建的Item
-      lineWidth: 1,
-      lineColor: "",
-      lineType: "",
-      options: [
-        {
-          value: "Solid",
-          label: "实线"
+    import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
+    import { hexify } from "./../../../../public/until/rgbaUtil";
+    //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
+    export default {
+        name: "editLine",
+        data() {
+            return {
+                scene: null,
+                view: null,
+                isCreated: false, //是否创建完成
+                cmdStatus: "", //选中状态
+                lineItem: null, //存放创建的Item
+                lineWidth: 1,
+                lineColor: "",
+                lineType: "",
+                options: [
+                    {
+                        value: "Solid",
+                        label: "实线"
+                    },
+                    {
+                        value: "Dashed",
+                        label: "虚线"
+                    },
+                    {
+                        value: "Dotted",
+                        label: "点"
+                    }
+                ]
+            };
+        },
+        mounted() {
+            this.view = new SGraphView("edit_line");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
         },
-        {
-          value: "Dashed",
-          label: "虚线"
+        methods: {
+            create() {
+                this.cmdStatus = "create";
+                this.scene.root.children = [];
+                this.lineItem = new EditLineItem(null, []);
+                this.lineItem.status = SItemStatus.Create;
+                this.lineItem.connect("finishCreated", this, this.finishCreated);
+                this.scene.addItem(this.lineItem);
+                this.scene.grabItem = this.lineItem;
+                this.view.update();
+            },
+            deleteItem() {
+                this.cmdStatus = "";
+                this.scene.removeItem(this.lineItem);
+                this.lineItem = null;
+                this.view.update();
+            },
+            edit() {
+                if (this.lineItem) {
+                    if (this.lineItem.status == SItemStatus.Normal) {
+                        this.scene.grabItem = this.lineItem;
+                        this.lineItem.status = SItemStatus.Edit;
+                        this.cmdStatus = "edit";
+                    } else {
+                        this.lineItem.status = SItemStatus.Normal;
+                        this.scene.grabItem = null;
+                        this.cmdStatus = "";
+                    }
+                }
+            },
+            eqDrawLine() {
+                this.cmdStatus = "eqDrawLine";
+                this.scene.root.children = [];
+                this.lineItem = new EditLineItem(null, []);
+                this.lineItem.verAndLeve = true;
+                this.lineItem.status = SItemStatus.Create;
+                this.lineItem.connect("finishCreated", this, this.finishCreated);
+                this.scene.addItem(this.lineItem);
+                this.scene.grabItem = this.lineItem;
+                this.view.update();
+            },
+            // 改变线宽属性
+            changeLineWidth(val) {
+                if (this.lineItem) {
+                    this.lineWidth = val;
+                    this.lineItem.lineWidth = val;
+                }
+            },
+            // 改变颜色
+            changeColor(val) {
+                if (this.lineItem) {
+                    this.lineColor = hexify(val);
+                    this.lineItem.strokeColor = this.lineColor;
+                }
+            },
+            //改变线得类型
+            changeType(val) {
+                if (this.lineItem) {
+                    this.lineItem.lineStyle = SLineStyle[val];
+                }
+            },
+            // 完成创建后的回调
+            finishCreated() {
+                this.cmdStatus = "";
+            }
         },
-        {
-          value: "Dotted",
-          label: "点"
+        watch: {
+            lineItem(val) {
+                if (val) {
+                    this.lineWidth = val.lineWidth; // 线宽
+                    this.lineStyle = val.lineStyle; // 线条样式
+                    this.lineColor = val.strokeColor.value; // 线条填充色
+                    this.lineType = this.options[val.lineStyle].value;
+                } else {
+                    this.lineWidth = 0;
+                }
+            }
         }
-      ]
     };
-  },
-  mounted() {
-    this.view = new SGraphView("edit_line");
-    this.scene = new SGraphScene();
-    this.view.scene = this.scene;
-  },
-  methods: {
-    create() {
-      this.cmdStatus = "create";
-      this.scene.root.children = [];
-      this.lineItem = new EditLineItem(null, []);
-      this.lineItem.status = SItemStatus.Create;
-      this.lineItem.connect("finishCreated", this, this.finishCreated);
-      this.scene.addItem(this.lineItem);
-      this.scene.grabItem = this.lineItem;
-      this.view.update();
-    },
-    deleteItem() {
-      this.cmdStatus = "";
-      this.scene.removeItem(this.lineItem);
-      this.lineItem = null;
-      this.view.update();
-    },
-    edit() {
-      if (this.lineItem) {
-        if (this.lineItem.status == SItemStatus.Normal) {
-          this.scene.grabItem = this.lineItem;
-          this.lineItem.status = SItemStatus.Edit;
-          this.cmdStatus = "edit";
-        } else {
-          this.lineItem.status = SItemStatus.Normal;
-          this.scene.grabItem = null;
-          this.cmdStatus = "";
-        }
-      }
-    },
-    eqDrawLine() {
-      this.cmdStatus = "eqDrawLine";
-      this.scene.root.children = [];
-      this.lineItem = new EditLineItem(null, []);
-      this.lineItem.verAndLeve = true;
-      this.lineItem.status = SItemStatus.Create;
-      this.lineItem.connect("finishCreated", this, this.finishCreated);
-      this.scene.addItem(this.lineItem);
-      this.scene.grabItem = this.lineItem;
-      this.view.update();
-    },
-    // 改变线宽属性
-    changeLineWidth(val) {
-      if (this.lineItem) {
-        this.lineWidth = val;
-        this.lineItem.lineWidth = val;
-      }
-    },
-    // 改变颜色
-    changeColor(val) {
-      if (this.lineItem) {
-        this.lineColor = hexify(val);
-        this.lineItem.strokeColor = this.lineColor;
-      }
-    },
-    //改变线得类型
-    changeType(val) {
-      if (this.lineItem) {
-        this.lineItem.lineStyle = SLineStyle[val];
-      }
-    },
-    // 完成创建后的回调
-    finishCreated() {
-      this.cmdStatus = "";
-    }
-  },
-  watch: {
-    lineItem(val) {
-      if (val) {
-        this.lineWidth = val.lineWidth; // 线宽
-        this.lineStyle = val.lineStyle; // 线条样式
-        this.lineColor = val.strokeColor.value; // 线条填充色
-        this.lineType = this.options[val.lineStyle].value;
-      } else {
-        this.lineWidth = 0;
-      }
-    }
-  }
-};
 </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{
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 96 - 90
docs/.vuepress/components/edit/items/editline/editline1_copy.vue

@@ -1,102 +1,108 @@
 <template>
-  <div class="edit-line">
-    <div class="btn-list">
-      <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button>
-      <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
-      <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
-      <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除</el-button>
-      <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button>
-      <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button>
-      <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线</el-button>
+    <div class="edit-line">
+        <div class="btn-list">
+            <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button>
+            <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
+            <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
+            <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除
+            </el-button>
+            <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button>
+            <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button>
+            <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线
+            </el-button>
+        </div>
+        <div class="content">
+            <div class="left">
+                <canvas id="edit_line" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div class="always-item">
+                        <span>线宽:</span>
+                        <input type="text"/>
+                    </div>
+                    <div class="always-item">
+                        <span>线类型:</span>
+                        <input type="text"/>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <input type="text"/>
+                    </div>
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left">
-        <canvas id="edit_line" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div class="always-item">
-            <span>线宽:</span>
-            <input type="text" />
-          </div>
-          <div class="always-item">
-            <span>线类型:</span>
-            <input type="text" />
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <input type="text" />
-          </div>
-        </el-card>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { SGraphScene, SGraphView } from "@persagy-web/graph/";
-import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import {  SPoint } from "@persagy-web/draw/";
-import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
-//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
-export default {
-  name: "line",
-  data() {
-    return {
-        scene: null,
-        view: null,
-        isCreated:false, //是否创建完成
-        cmdStatus: 'choice'      //选中状态
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
+    //注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
+    export default {
+        name: "line",
+        data() {
+            return {
+                scene: null,
+                view: null,
+                isCreated: false, //是否创建完成
+                cmdStatus: 'choice'      //选中状态
 
-    };
-  },
-  mounted() {
-    this.view = new SGraphView("edit_line");
-    this.scene = new SGraphScene();
-    this.view.scene = this.scene;
+            };
+        },
+        mounted() {
+            this.view = new SGraphView("edit_line");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
 
-  },
-  methods: {
-    create() {
-        this.cmdStatus = 'create';
-        // this.scene.root.children = [];
-        const lineItem = new EditLineItem(null, [] );
-        lineItem.status = SItemStatus.Create;
-           lineItem.connect("finishCreated", this, this.finishCreated);
-        this.scene.addItem(lineItem);
-        this.scene.grabItem = lineItem;
-        this.scene.updated()
-    },
-    // 完成创建后的回调
-    finishCreated(){
-        this.cmdStatus = 'choice'
-    }
-  }
-};
+        },
+        methods: {
+            create() {
+                this.cmdStatus = 'create';
+                // this.scene.root.children = [];
+                const lineItem = new EditLineItem(null, []);
+                lineItem.status = SItemStatus.Create;
+                lineItem.connect("finishCreated", this, this.finishCreated);
+                this.scene.addItem(lineItem);
+                this.scene.grabItem = lineItem;
+                this.scene.updated()
+            },
+            // 完成创建后的回调
+            finishCreated() {
+                this.cmdStatus = 'choice'
+            }
+        }
+    };
 </script>
 
 <style scoped lang="less">
-.edit-line {
-  width: 100%;
-  height: 500px;
-  .content {
-    display: flex;
-    .left {
-      flex: 1;
-    }
-    .line-property {
-      width: 300px;
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-around;
-      }
+    .edit-line {
+        width: 100%;
+        height: 500px;
+
+        .content {
+            display: flex;
+
+            .left {
+                flex: 1;
+            }
+
+            .line-property {
+                width: 300px;
+
+                .always-item {
+                    display: flex;
+                    margin-top: 10px;
+                    justify-content: space-around;
+                }
+            }
+        }
+
+        .heightLight {
+            color: #409EFF;
+            border-color: #c6e2ff;
+            background-color: #ecf5ff;
+        }
     }
-  }
-  .heightLight{
-    color: #409EFF;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 236 - 225
docs/.vuepress/components/edit/items/editpolyline/editpolyline.vue

@@ -1,241 +1,252 @@
 <template>
-  <div class="edit-line">
-    <!-- 所有按钮 -->
-    <div class="btn-list">
-      <el-button
-        :class="[cmdStatus=='create' ? 'heightLight' : '']"
-        size="small"
-        @click="create"
-      >创建多边形</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>
+    <div class="edit-line">
+        <!-- 所有按钮 -->
+        <div class="btn-list">
+            <el-button
+                    :class="[cmdStatus=='create' ? 'heightLight' : '']"
+                    size="small"
+                    @click="create"
+            >创建多边形
+            </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>
-      <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
-        <el-button
-          :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
-          size="small"
-          @click="eqDrawLine"
-        >垂直水平绘制</el-button>
-      </el-tooltip>
+            <el-button
+                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
+                    size="small"
+                    @click="deleteItem"
+            >删除
+            </el-button>
+            <el-tooltip class="item" effect="dark" content="长按 Shoft 配合左键也可触发该功能" placement="top-start">
+                <el-button
+                        :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']"
+                        size="small"
+                        @click="eqDrawLine"
+                >垂直水平绘制
+                </el-button>
+            </el-tooltip>
+        </div>
+        <div class="content">
+            <div class="left">
+                <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div slot="header" class="clearfix">
+                        <span>属性修改</span>
+                    </div>
+                    <div class="always-item">
+                        <span>边框宽:</span>
+                        <el-input-number
+                                size="small"
+                                v-model="lineWidth"
+                                @change="changeLineWidth"
+                                :min="1"
+                                :max="50"
+                        ></el-input-number>
+                    </div>
+                    <div class="always-item">
+                        <span>线类型:</span>
+                        <el-select
+                                style="width:130px"
+                                size="small"
+                                v-model="lineType"
+                                @change="changeType"
+                                placeholder="请选择"
+                        >
+                            <el-option
+                                    v-for="item in options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
+                    </div>
+                    <!-- <div class="always-item">
+                      <span>填充色:</span>
+                      <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
+                    </div> -->
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left">
-        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div slot="header" class="clearfix">
-            <span>属性修改</span>
-          </div>
-          <div class="always-item">
-            <span>边框宽:</span>
-            <el-input-number
-              size="small"
-              v-model="lineWidth"
-              @change="changeLineWidth"
-              :min="1"
-              :max="50"
-            ></el-input-number>
-          </div>
-          <div class="always-item">
-            <span>线类型:</span>
-            <el-select
-              style="width:130px"
-              size="small"
-              v-model="lineType"
-              @change="changeType"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <el-color-picker v-model="lineColor" @change="changeColor" show-alpha></el-color-picker>
-          </div>
-          <!-- <div class="always-item">
-            <span>填充色:</span>
-            <el-color-picker v-model="fillColor" @change="changeFillColor" show-alpha></el-color-picker>
-          </div> -->
-        </el-card>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
-import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-import { SPoint ,SColor} from "@persagy-web/draw/";
-//注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
-import { EditPolylineItem } from "./../../../../../guides/edit/items/src/EditPolylineItem";
-import { hexify } from "./../../../../public/until/rgbaUtil";
-export default {
-  name: "EditPolylineItem",
-  data() {
-    return {
-      scene: null,       //场景
-      view: null,        //view实例
-      isCreated: false,  //是否创建完成
-      cmdStatus: "",     //选中状态
-      polylineItem: null, //存放创建的Item
-      lineWidth: 1,      //border线宽
-      lineColor: "",     //border线颜色
-      fillColor:"",      //填充色
-      lineType: "",      //border线类型
-      options: [
-        {
-          value: "Solid",
-          label: "实线"
+    import { SGraphScene, SGraphView, SLineStyle } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { SColor } from "@persagy-web/draw/";
+    //注: 开发者引入 EditPolygonItem 包为: import {EditPolygonItem} from "@persagy-web/edit/";
+    import { EditPolylineItem } from "./../../../../../guides/edit/items/src/EditPolylineItem";
+    import { hexify } from "./../../../../public/until/rgbaUtil";
+
+    export default {
+        name: "EditPolylineItem",
+        data() {
+            return {
+                scene: null,       //场景
+                view: null,        //view实例
+                isCreated: false,  //是否创建完成
+                cmdStatus: "",     //选中状态
+                polylineItem: null, //存放创建的Item
+                lineWidth: 1,      //border线宽
+                lineColor: "",     //border线颜色
+                fillColor: "",      //填充色
+                lineType: "",      //border线类型
+                options: [
+                    {
+                        value: "Solid",
+                        label: "实线"
+                    },
+                    {
+                        value: "Dashed",
+                        label: "虚线"
+                    },
+                    {
+                        value: "Dotted",
+                        label: "点"
+                    }
+                ]
+            };
         },
-        {
-          value: "Dashed",
-          label: "虚线"
+        mounted() {
+            this.view = new SGraphView("edit_polygon");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
         },
-        {
-          value: "Dotted",
-          label: "点"
+        methods: {
+            create() {
+                this.cmdStatus = "create";
+                this.scene.root.children = [];
+                this.polylineItem = new EditPolylineItem(null, []);
+                this.polylineItem.status = SItemStatus.Create;
+                this.polylineItem.connect("finishCreated", this, this.finishCreated);
+                this.scene.addItem(this.polylineItem);
+                this.scene.grabItem = this.polylineItem;
+                this.view.update();
+            },
+            deleteItem() {
+                this.cmdStatus = "";
+                this.scene.removeItem(this.polylineItem);
+                this.polylineItem = null;
+                this.view.update();
+            },
+            edit() {
+                if (this.polylineItem) {
+                    if (this.polylineItem.status == SItemStatus.Normal) {
+                        this.scene.grabItem = this.polylineItem;
+                        this.polylineItem.status = SItemStatus.Edit;
+                        // this.polylineItem.verAndLeve = false;
+                        this.cmdStatus = "edit";
+                    } else {
+                        this.polylineItem.status = SItemStatus.Normal;
+                        this.scene.grabItem = null;
+                        this.cmdStatus = "";
+                    }
+                }
+            },
+            eqDrawLine() {
+                this.cmdStatus = "eqDrawLine";
+                this.scene.root.children = [];
+                this.polylineItem = new EditPolylineItem(null, []);
+                this.polylineItem.verAndLeve = true;
+                this.polylineItem.status = SItemStatus.Create;
+                this.polylineItem.connect("finishCreated", this, this.finishCreated);
+                this.polylineItem.moveable = true;
+                this.scene.addItem(this.polylineItem);
+                this.scene.grabItem = this.polylineItem;
+                this.view.update();
+            },
+            // 改变线宽属性
+            changeLineWidth(val) {
+                if (this.polylineItem) {
+                    this.lineWidth = val;
+                    this.polylineItem.lineWidth = val;
+                }
+            },
+            // 改变颜色
+            changeColor(val) {
+                if (this.polylineItem) {
+                    this.lineColor = hexify(val);
+                    this.polylineItem.strokeColor = new SColor(this.lineColor);
+                }
+            },
+            // 改变填充颜色
+            changeFillColor(val) {
+                if (this.polylineItem) {
+                    this.fillColor = hexify(val);
+                    this.polylineItem.fillColor = new SColor(this.lineColor);
+                }
+            },
+            //改变线得类型
+            changeType(val) {
+                if (this.polylineItem) {
+                    this.polylineItem.lineStyle = SLineStyle[val];
+                }
+            },
+            // 完成创建后的回调
+            finishCreated() {
+                this.cmdStatus = "";
+            }
+        },
+        watch: {
+            polylineItem(val) {
+                if (val) {
+                    this.lineWidth = val.lineWidth; // 线宽
+                    this.lineColor = val.strokeColor.value; // 线条填充色
+                    this.lineType = this.options[val.lineStyle].value;
+                } else {
+                    this.lineWidth = 0;
+                }
+            }
         }
-      ]
     };
-  },
-  mounted() {
-    this.view = new SGraphView("edit_polygon");
-    this.scene = new SGraphScene();
-    this.view.scene = this.scene;
-  },
-  methods: {
-    create() {
-      this.cmdStatus = "create";
-      this.scene.root.children = [];
-      this.polylineItem = new EditPolylineItem(null,[]);
-      this.polylineItem.status = SItemStatus.Create;
-      this.polylineItem.connect("finishCreated", this, this.finishCreated);
-      this.scene.addItem(this.polylineItem);
-      this.scene.grabItem = this.polylineItem;
-      this.view.update();
-    },
-    deleteItem() {
-      this.cmdStatus = "";
-      this.scene.removeItem(this.polylineItem);
-      this.polylineItem = null;
-      this.view.update();
-    },
-    edit() {
-      if (this.polylineItem) {
-        if (this.polylineItem.status == SItemStatus.Normal) {
-          this.scene.grabItem = this.polylineItem;
-          this.polylineItem.status = SItemStatus.Edit;
-          // this.polylineItem.verAndLeve = false;
-          this.cmdStatus = "edit";
-        } else {
-          this.polylineItem.status = SItemStatus.Normal;
-          this.scene.grabItem = null;
-          this.cmdStatus = "";
-        }
-      }
-    },
-    eqDrawLine() {
-      this.cmdStatus = "eqDrawLine";
-      this.scene.root.children = [];
-      this.polylineItem = new EditPolylineItem(null, []);
-      this.polylineItem.verAndLeve = true;
-      this.polylineItem.status = SItemStatus.Create;
-      this.polylineItem.connect("finishCreated", this, this.finishCreated);
-      this.polylineItem.moveable = true;
-      this.scene.addItem(this.polylineItem);
-      this.scene.grabItem = this.polylineItem;
-      this.view.update();
-    },
-    // 改变线宽属性
-    changeLineWidth(val) {
-      if (this.polylineItem) {
-        this.lineWidth = val;
-        this.polylineItem.lineWidth = val;
-      }
-    },
-    // 改变颜色
-    changeColor(val) {
-      if (this.polylineItem) {
-        this.lineColor = hexify(val);
-        this.polylineItem.strokeColor = new SColor(this.lineColor);
-      }
-    },
-     // 改变填充颜色
-    changeFillColor(val) {
-      if (this.polylineItem) {
-        this.fillColor = hexify(val);
-        this.polylineItem.fillColor = new SColor(this.lineColor);
-      }
-    },
-    //改变线得类型
-    changeType(val) {
-      if (this.polylineItem) {
-        this.polylineItem.lineStyle = SLineStyle[val];
-      }
-    },
-    // 完成创建后的回调
-    finishCreated() {
-      this.cmdStatus = "";
-    }
-  },
-  watch: {
-    polylineItem(val) {
-      if (val) {
-        this.lineWidth = val.lineWidth; // 线宽
-        this.lineColor = val.strokeColor.value; // 线条填充色
-        this.lineType = this.options[val.lineStyle].value;
-      } else {
-        this.lineWidth = 0;
-      }
-    }
-  }
-};
 </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 {
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 289 - 286
docs/.vuepress/components/edit/items/edittext/edittext.vue

@@ -1,307 +1,310 @@
 <template>
-  <div class="edit-line">
-    <!-- 所有按钮 -->
-    <div class="btn-list">
+    <div class="edit-line">
+        <!-- 所有按钮 -->
+        <div class="btn-list">
+        </div>
+        <div class="content">
+            <div class="left" id="left">
+                <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
+                <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
+            </div>
+            <div class="line-property">
+                <el-card shadow="always">
+                    <div slot="header" class="clearfix">
+                        <span>属性修改</span>
+                    </div>
+                    <div class="always-item">
+                        <span>字号:</span>
+                        <el-input-number size="small" v-model="size" @change="updateSize" :min="1"
+                                         :max="50"></el-input-number>
+                    </div>
+                    <div class="always-item">
+                        <span>文本框:</span>
+                        <el-input
+                                v-model="text"
+                                @change="handleChangeText"
+                                type="textarea"
+                                :autosize="{ minRows: 1, maxRows: 1}"
+                                placeholder="请输入内容"
+                                style="width:200px;"
+                        ></el-input>
+                    </div>
+                    <div class="always-item">
+                        <span>线颜色:</span>
+                        <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
+                    </div>
+                </el-card>
+            </div>
+        </div>
     </div>
-    <div class="content">
-      <div class="left" id="left">
-        <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
-        <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
-      </div>
-      <div class="line-property">
-        <el-card shadow="always">
-          <div slot="header" class="clearfix">
-            <span>属性修改</span>
-          </div>
-          <div class="always-item">
-            <span>字号:</span>
-            <el-input-number size="small" v-model="size" @change="updateSize" :min="1" :max="50"></el-input-number>
-          </div>
-          <div class="always-item">
-            <span>文本框:</span>
-            <el-input
-              v-model="text"
-              @change="handleChangeText"
-              type="textarea"
-              :autosize="{ minRows: 1, maxRows: 1}"
-              placeholder="请输入内容"
-              style="width:200px;"
-            ></el-input>
-          </div>
-          <div class="always-item">
-            <span>线颜色:</span>
-            <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
-          </div>
-        </el-card>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import {
-  SGraphScene,
-  SGraphView,
-  SGraphPropertyCommand,
-  SGraphMoveCommand
-} from "@persagy-web/graph/";
-import { SUndoStack } from "@persagy-web/base/lib";
-import { SFont } from "@persagy-web/draw/lib";
-import { SPoint, SColor } from "@persagy-web/draw/";
-//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
-import { EditText } from "./../../../../../guides/edit/items/src/EditText";
-import { hexify } from "./../../../../public/until/rgbaUtil";
-class SScene extends SGraphScene {
-  undoStack = new SUndoStack();
-  textItem = new EditText(null);
+    import { SGraphMoveCommand, SGraphPropertyCommand, SGraphScene, SGraphView } from "@persagy-web/graph/";
+    import { SUndoStack } from "@persagy-web/base/lib";
+    import { SFont } from "@persagy-web/draw/lib";
+    //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
+    import { EditText } from "./../../../../../guides/edit/items/src/EditText";
+    import { hexify } from "./../../../../public/until/rgbaUtil";
 
-  constructor() {
-    super();
-    this.textItem.moveable = true;
-    this.textItem.x = 100;
-    this.textItem.y = 100;
-    this.addItem(this.textItem);
-    this.textItem.connect("onMove", this, this.onItemMove.bind(this));
-  }
+    class SScene extends SGraphScene {
+        undoStack = new SUndoStack();
+        textItem = new EditText(null);
 
-  updateText(str) {
-    if (this.textItem.text !== str) {
-      let old = this.textItem.text;
-      this.textItem.text = str;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "text", old, str)
-      );
-    }
-  }
+        constructor() {
+            super();
+            this.textItem.moveable = true;
+            this.textItem.x = 100;
+            this.textItem.y = 100;
+            this.addItem(this.textItem);
+            this.textItem.connect("onMove", this, this.onItemMove.bind(this));
+        }
 
-  updateColor(color) {
-    if (this.textItem.color !== color) {
-      let old = this.textItem.color;
-      this.textItem.color = color;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "color", old, color)
-      );
-    }
-  }
+        updateText(str) {
+            if (this.textItem.text !== str) {
+                let old = this.textItem.text;
+                this.textItem.text = str;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "text", old, str)
+                );
+            }
+        }
 
-  updateSize(size) {
-    if (this.textItem.font.size !== size) {
-      let old = new SFont(this.textItem.font);
-      let font = new SFont(this.textItem.font);
-      font.size = size;
-      this.textItem.font = font;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "font", old, font)
-      );
-    }
-  }
+        updateColor(color) {
+            if (this.textItem.color !== color) {
+                let old = this.textItem.color;
+                this.textItem.color = color;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "color", old, color)
+                );
+            }
+        }
 
-  onItemMove(item, ...arg) {
-    this.undoStack.push(
-      new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
-    );
-  }
-}
+        updateSize(size) {
+            if (this.textItem.font.size !== size) {
+                let old = new SFont(this.textItem.font);
+                let font = new SFont(this.textItem.font);
+                font.size = size;
+                this.textItem.font = font;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "font", old, font)
+                );
+            }
+        }
 
-class TestView extends SGraphView {
-  constructor() {
-    super("edit_polygon");
-  }
-}
+        onItemMove(item, ...arg) {
+            this.undoStack.push(
+                new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
+            );
+        }
+    }
 
-export default {
-  name: "edittext",
-  data() {
-    return {
-      scene: new SScene(),
-      text: "测试文本",
-      size: 20,
-      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;
-    // this.scene.onMouseUp = this.onMouseUp;
-  },
-  methods: {
-    handleChangeText(text) {
-      this.scene.updateText(text);
-    },
-    handleChangeColor(color) {
-      this.scene.updateColor(color);
-    },
-    updateSize(size) {
-      this.scene.updateSize(size);
-    },
-    undo() {
-      this.scene.undoStack.undo();
-    },
-    redo() {
-      this.scene.undoStack.redo();
-    },
-    reset() {
-      this.text = "测试文本";
-      this.size = 20;
-      this.color = "#333333";
-      this.scene.updateText(this.text);
-      this.scene.updateColor(this.color);
-      this.scene.updateSize(this.size);
-    },
-    // 改变颜色
-    changeColor(val) {
-      this.scene.updateColor(hexify(val));
-    },
-    ///////////////////////////////////
-    //// 以下为测试代码,请忽略
-    // 设置tooltip位置
-    /**
-     * raduis 灵敏范围
-     * e 鼠标事件对象
-     * tipDom 浮动得dom
-     * boxDom 最外层盒子
-     * offset 偏移量
-     */
-    toolTipPosition(radius, e, tipDom, offset = 0) {
-      // 滚动高度
-      const screenTop =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      const screenLeft =
-        document.documentElement.scrollLeft || document.body.scrollLeft;
-      radius = radius + offset;
-      const mapBox = document.getElementById("edit_polygon");
-      // 测试边界mousePosition =  1(右下) 2 (右上)3 (左上) 4 (左下)
-      const mousePosition = this.Boxboundary(radius, e, mapBox);
-      const absPosition = this.offsetTL(mapBox);
-      const absPositionLeft = absPosition.left;
-      const absPositionTop = absPosition.top;
-      const mClientY = e.clientY + screenTop;
-      const mClientX = e.clientX + screenLeft;
-      const fuzzy_model_width = tipDom.offsetWidth;
-      const fuzzy_model_height = tipDom.offsetHeight;
-      // let  offsetTL
-      if (mousePosition == 2) {
-        tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
-        tipDom.style.top = `${mClientY -
-          fuzzy_model_height -
-          absPositionTop -
-          offset}px`;
-      } else if (mousePosition == 3) {
-        tipDom.style.left = `${mClientX -
-          fuzzy_model_width -
-          absPositionLeft -
-          offset}px`;
-        tipDom.style.top = `${mClientY -
-          fuzzy_model_height -
-          absPositionTop -
-          offset}px`;
-      } else if (mousePosition == 4) {
-        tipDom.style.left = `${mClientX -
-          fuzzy_model_width -
-          absPositionLeft -
-          offset}px`;
-        tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
-      } else {
-        tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
-        tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
-      }
-    },
-    Boxboundary(radius, event, box) {
-      const screenTop =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      const boxWidth = Number(box.style.width.slice(0, -2));
-      const boxHeight = Number(box.style.height.slice(0, -2));
-      const absPosition = this.offsetTL(box);
-      const boxClientX = absPosition.left;
-      const boxClientY = absPosition.top;
-      const mouseX = event.clientX;
-      const mouseY = event.clientY + screenTop;
-      if (mouseY >= boxClientY + boxHeight - radius) {
-        if (mouseX <= radius + boxClientX) {
-          return 2;
-        } else if (mouseX >= boxClientX + boxWidth - radius) {
-          return 3;
-        } else {
-          return 2;
+    class TestView extends SGraphView {
+        constructor() {
+            super("edit_polygon");
         }
-      } else if (mouseX >= boxClientX + boxWidth - radius) {
-        return 4;
-      } else {
-        return 1;
-      }
-    },
-    offsetTL(obj) {
-      //获取到body的offsetTop和offsetLeft
-      var t = 0,
-        l = 0;
-      while (obj) {
-        t = t + obj.offsetTop;
-        l = l + obj.offsetLeft;
-        obj = obj.offsetParent;
-      }
-      return {
-        top: t,
-        left: l
-      };
-    },
-    onMouseUp(event) {
-      const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
-      let parentDom = document.getElementById("left");
-      parentDom.innerHTML = parentDom.innerHTML + dom;
-      const textareaDom = this.$refs.textarea;
-      // console.log('textareaDom',parentDom.children[0])
-      this.toolTipPosition(1, event, textareaDom, 0);
     }
-  },
-  watch: {
-    // cmdStatus(val) {
-    //   this.scene.cmdStatus = val;
-    // }
-  }
-};
+
+    export default {
+        name: "edittext",
+        data() {
+            return {
+                scene: new SScene(),
+                text: "测试文本",
+                size: 20,
+                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;
+            // this.scene.onMouseUp = this.onMouseUp;
+        },
+        methods: {
+            handleChangeText(text) {
+                this.scene.updateText(text);
+            },
+            handleChangeColor(color) {
+                this.scene.updateColor(color);
+            },
+            updateSize(size) {
+                this.scene.updateSize(size);
+            },
+            undo() {
+                this.scene.undoStack.undo();
+            },
+            redo() {
+                this.scene.undoStack.redo();
+            },
+            reset() {
+                this.text = "测试文本";
+                this.size = 20;
+                this.color = "#333333";
+                this.scene.updateText(this.text);
+                this.scene.updateColor(this.color);
+                this.scene.updateSize(this.size);
+            },
+            // 改变颜色
+            changeColor(val) {
+                this.scene.updateColor(hexify(val));
+            },
+            ///////////////////////////////////
+            //// 以下为测试代码,请忽略
+            // 设置tooltip位置
+            /**
+             * raduis 灵敏范围
+             * e 鼠标事件对象
+             * tipDom 浮动得dom
+             * boxDom 最外层盒子
+             * offset 偏移量
+             */
+            toolTipPosition(radius, e, tipDom, offset = 0) {
+                // 滚动高度
+                const screenTop =
+                    document.documentElement.scrollTop || document.body.scrollTop;
+                const screenLeft =
+                    document.documentElement.scrollLeft || document.body.scrollLeft;
+                radius = radius + offset;
+                const mapBox = document.getElementById("edit_polygon");
+                // 测试边界mousePosition =  1(右下) 2 (右上)3 (左上) 4 (左下)
+                const mousePosition = this.Boxboundary(radius, e, mapBox);
+                const absPosition = this.offsetTL(mapBox);
+                const absPositionLeft = absPosition.left;
+                const absPositionTop = absPosition.top;
+                const mClientY = e.clientY + screenTop;
+                const mClientX = e.clientX + screenLeft;
+                const fuzzy_model_width = tipDom.offsetWidth;
+                const fuzzy_model_height = tipDom.offsetHeight;
+                // let  offsetTL
+                if (mousePosition == 2) {
+                    tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
+                    tipDom.style.top = `${mClientY -
+                    fuzzy_model_height -
+                    absPositionTop -
+                    offset}px`;
+                } else if (mousePosition == 3) {
+                    tipDom.style.left = `${mClientX -
+                    fuzzy_model_width -
+                    absPositionLeft -
+                    offset}px`;
+                    tipDom.style.top = `${mClientY -
+                    fuzzy_model_height -
+                    absPositionTop -
+                    offset}px`;
+                } else if (mousePosition == 4) {
+                    tipDom.style.left = `${mClientX -
+                    fuzzy_model_width -
+                    absPositionLeft -
+                    offset}px`;
+                    tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
+                } else {
+                    tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
+                    tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
+                }
+            },
+            Boxboundary(radius, event, box) {
+                const screenTop =
+                    document.documentElement.scrollTop || document.body.scrollTop;
+                const boxWidth = Number(box.style.width.slice(0, -2));
+                const boxHeight = Number(box.style.height.slice(0, -2));
+                const absPosition = this.offsetTL(box);
+                const boxClientX = absPosition.left;
+                const boxClientY = absPosition.top;
+                const mouseX = event.clientX;
+                const mouseY = event.clientY + screenTop;
+                if (mouseY >= boxClientY + boxHeight - radius) {
+                    if (mouseX <= radius + boxClientX) {
+                        return 2;
+                    } else if (mouseX >= boxClientX + boxWidth - radius) {
+                        return 3;
+                    } else {
+                        return 2;
+                    }
+                } else if (mouseX >= boxClientX + boxWidth - radius) {
+                    return 4;
+                } else {
+                    return 1;
+                }
+            },
+            offsetTL(obj) {
+                //获取到body的offsetTop和offsetLeft
+                var t = 0,
+                    l = 0;
+                while (obj) {
+                    t = t + obj.offsetTop;
+                    l = l + obj.offsetLeft;
+                    obj = obj.offsetParent;
+                }
+                return {
+                    top: t,
+                    left: l
+                };
+            },
+            onMouseUp(event) {
+                const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
+                let parentDom = document.getElementById("left");
+                parentDom.innerHTML = parentDom.innerHTML + dom;
+                const textareaDom = this.$refs.textarea;
+                // console.log('textareaDom',parentDom.children[0])
+                this.toolTipPosition(1, event, textareaDom, 0);
+            }
+        },
+        watch: {
+            // cmdStatus(val) {
+            //   this.scene.cmdStatus = val;
+            // }
+        }
+    };
 </script>
 
 <style scoped lang="less">
-.text {
-  overflow: auto;
-  word-break: break-all;
-  outline: none;
-  // background: #409eff;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-.edit-line {
-  width: 100%;
-  height: 500px;
-  position: relative;
-  .content {
-    display: flex;
-    justify-content: flex-start;
-    .left {
-      margin-right: 20px;
+    .text {
+        overflow: auto;
+        word-break: break-all;
+        outline: none;
+        // background: #409eff;
+        position: absolute;
+        left: 0;
+        top: 0;
     }
-    .line-property {
-      width: 300px;
-      margin-top: 20px;
-      .always {
+
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        height: 500px;
+        position: relative;
+
+        .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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 248 - 192
docs/.vuepress/components/edit/undo/undo.vue

@@ -1,205 +1,261 @@
 <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 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>
-    <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 = "";
-    this.selectContainer.connect("listChange", this, this.listChange);
-  }
-  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.selectable = true;
-    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.selectable = true;
-    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.selectable = true;
-    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();
-  }
-  listChange(list) {
-    this.emitChoice(list);
-  }
-  delete() {
-    let itemList = this.selectContainer.itemList;
-    itemList.forEach((element) => {
-      this.removeItem(element);
-    });
-    if (this.view) {
-      this.view.update();
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/";
+    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+    import { SUndoStack } from "@persagy-web/base/lib";
+    import { EditLineItem } from "./../../../../guides/edit/items/src/EditLineItem";
+    import { EditImageItem } from "./../../../../guides/edit/items/src/EditImageItem";
+    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 = "";
+            this.selectContainer.connect("listChange", this, this.listChange);
+        }
+
+        /**
+         * 鼠标按下事件
+         * @param event 鼠标事件
+         */
+        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 = "";
+        }
+
+        /**
+         *  新增线
+         *
+         * @param event   事件
+         */
+        addLine(event) {
+            const lineItem = new EditLineItem(null, []);
+            lineItem.status = SItemStatus.Create;
+            lineItem.selectable = true;
+            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;
+        }
+
+        /**
+         * 新增文本
+         *
+         * @param event   事件
+         */
+        addText(event) {
+            const textItem = new EditText(null);
+            textItem.text = "测试文本";
+            textItem.selectable = true;
+            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);
+        }
+
+        /**
+         * 新增图片
+         *
+         * @param event   事件
+         */
+        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.selectable = true;
+            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();
+        }
+
+        listChange(list) {
+            this.emitChoice(list);
+        }
+
+        /**
+         * 删除
+         *
+         * @returns Item 类
+         */
+        delete() {
+            let itemList = this.selectContainer.itemList;
+            itemList.forEach((element) => {
+                this.removeItem(element);
+            });
+            if (this.view) {
+                this.view.update();
+            }
+            return itemList;
+        }
     }
-    return itemList;
-  }
-}
-//注: 开发者引入 SWallItem 包为: import {SWallItem} from "@persagy-web/edit/";
-export default {
-  name: "editLine",
-  data() {
-    return {
-      scene: null,
-      view: null,
-      isCreated: false, //是否创建完成
-      cmdStatus: "", //选中状态
+
+    //注: 开发者引入 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();
+            },
+            deleteItem() {
+                this.scene.delete();
+            },
+        },
+        watch: {},
+        beforeCreate() {
+        },
     };
-  },
-  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();
-    },
-    deleteItem() {
-      this.scene.delete();
-    },
-  },
-  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 {
+    .edit-line {
         width: 100%;
-        height: 100%;
-      }
-      .always-item {
-        display: flex;
-        margin-top: 10px;
-        justify-content: space-between;
-      }
+        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;
+        }
     }
-  }
-  .heightLight {
-    color: #409eff;
-    border-color: #c6e2ff;
-    background-color: #ecf5ff;
-  }
-}
 </style>

+ 45 - 28
docs/.vuepress/components/engine/arrow.vue

@@ -7,11 +7,13 @@
         <div style="margin: 14px 0;">
             <span style="font-size: 14px;">选择起始点样式</span>
             <el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                           :value="item.value"></el-option>
             </el-select>
             <span style="font-size: 14px;">选择结束点样式</span>
             <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                           :value="item.value"></el-option>
             </el-select>
         </div>
         <canvas :id="id" width="740" height="400" tabindex="0"/>
@@ -19,30 +21,34 @@
 </template>
 
 <script lang="ts">
-    import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect, SArrowStyleType, SColor, SPoint, SPainter} from "@persagy-web/draw/lib"
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SArrowStyleType, SPainter, SPoint, SRect } from "@persagy-web/draw/lib"
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
 
-    class Polyline extends SGraphItem{
+    class Polyline extends SGraphItem {
         /** 起始点样式 */
         _begin = SArrowStyleType.Basic;
-        get begin():SArrowStyleType{
+        get begin(): SArrowStyleType {
             return this._begin;
         }
-        set begin(v:SArrowStyleType){
+
+        set begin(v: SArrowStyleType) {
             this._begin = v;
             this.update();
         }
+
         /** 结束点样式 */
         _end = SArrowStyleType.Basic;
-        get end():SArrowStyleType{
+        get end(): SArrowStyleType {
             return this._end;
         }
-        set end(v:SArrowStyleType){
+
+        set end(v: SArrowStyleType) {
             this._end = v;
             this.update();
         }
+
         pointList: SPoint[] = [
             new SPoint(0, 0),
             new SPoint(1000, 1000),
@@ -52,18 +58,25 @@
             // new SPoint(0, 0)
         ];
 
-        boundingRect():SRect {
-            return new SRect(0,0,2000,1800);
+        boundingRect(): SRect {
+            return new SRect(0, 0, 2000, 1800);
         }
-        onDraw(painter:SPainter) {
+
+        /**
+         * Item 绘制操作
+         * @param painter   绘制对象
+         */
+        onDraw(painter: SPainter) {
+            //线宽
             painter.pen.lineWidth = painter.toPx(1);
+            //箭头起点,终点样式
             const style = {
                 begin: this.begin,
                 end: this.end
             };
-            for(let i = 0; i < this.pointList.length - 1; i++){
-
-                painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
+            for (let i = 0; i < this.pointList.length - 1; i++) {
+                //绘制带箭头的线段
+                painter.drawArrowLine(this.pointList[i], this.pointList[i + 1], style)
             }
         }
     }
@@ -75,19 +88,19 @@
             {
                 value: SArrowStyleType.None,
                 label: 'None'
-            },{
+            }, {
                 value: SArrowStyleType.Basic,
                 label: 'Basic'
-            },{
+            }, {
                 value: SArrowStyleType.Triangle,
                 label: 'Triangle'
-            },{
+            }, {
                 value: SArrowStyleType.Diamond,
                 label: 'Diamond'
-            },{
+            }, {
                 value: SArrowStyleType.Square,
                 label: 'Square'
-            },{
+            }, {
                 value: SArrowStyleType.Circle,
                 label: 'Circle'
             }
@@ -98,7 +111,7 @@
             {
                 val: 'None',
                 desc: '无样式'
-            },{
+            }, {
                 val: 'Basic',
                 desc: '基本箭头'
             },
@@ -119,12 +132,14 @@
                 desc: '圆形箭头'
             },
         ];
-        begin:SArrowStyleType = SArrowStyleType.Basic;
-        end:SArrowStyleType = SArrowStyleType.Basic;
-        mounted():void {
+        begin: SArrowStyleType = SArrowStyleType.Basic;
+        end: SArrowStyleType = SArrowStyleType.Basic;
+
+        mounted(): void {
             this.init()
         };
-        init(){
+
+        init() {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
             this.item = new Polyline(null);
@@ -133,10 +148,12 @@
             this.view.fitSceneToView();
             this.view.scalable = false;
         };
-        changeStart(val: SArrowStyleType):void{
+
+        changeStart(val: SArrowStyleType): void {
             this.item!!.begin = val
         };
-        changeEnd(val: SArrowStyleType):void{
+
+        changeEnd(val: SArrowStyleType): void {
             this.item!!.end = val
         }
     }

+ 32 - 14
docs/.vuepress/components/engine/clip.vue

@@ -5,19 +5,20 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
-    import {SCanvasView, SPainter, SPath, SColor} from "@persagy-web/draw/lib";
+    import { SCanvasView, SColor, SPainter, SPath } from "@persagy-web/draw/lib";
 
-    class ClipView extends SCanvasView{
+    class ClipView extends SCanvasView {
         img: CanvasImageSource;
-        _url: string = '';
         arcX = 100;
         arcY = 100;
         stepX = 6;
         stepY = 8;
         timer: any;
-        set url(v:string){
+
+        _url: string = '';
+        set url(v: string) {
             if (this._url == v) {
                 return;
             }
@@ -25,11 +26,18 @@
             // @ts-ignore
             this.img.src = v;
         }
-        get url():string{
+
+        get url(): string {
             return this._url;
         }
+
         isLoadOver: boolean = false;
-        constructor(id:string){
+
+        /**
+         * 构造函数
+         * @param id
+         */
+        constructor(id: string) {
             super(id);
             this.img = new Image();
             this.img.onload = (e) => {
@@ -42,31 +50,38 @@
                 console.log("加载图片错误!", e);
             };
         }
+
+        /**
+         * Item 绘制操作
+         * @param painter   绘制对象
+         */
         onDraw(painter: SPainter): void {
             // @ts-ignore
             painter.engine._canvas.save();
             // painter.save();
-            painter.clearRect(0,0,800,400);
+            //清空画布
+            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);
+            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(()=>{
+            this.timer = setTimeout(() => {
                 if (this.arcX + 100 >= 800) {
                     this.stepX *= -1;
                 }
@@ -95,13 +110,16 @@
         id: string = uuid();
         view: ClipView | undefined;
         img = require('../../public/assets/img/2.jpg');
+
         mounted(): void {
             this.init();
         };
-        init():void{
+
+        init(): void {
             this.view = new ClipView(this.id);
-            this.view.url= this.img;
+            this.view.url = this.img;
         };
+
         beforeDestroy(): void {
             clearTimeout(this.view!!.timer);
         }

+ 78 - 56
docs/.vuepress/components/engine/composite.vue

@@ -7,7 +7,8 @@
         <div style="margin: 14px 0;">
             <span style="font-size: 14px;">选择融合方式</span>
             <el-select v-model="value" placeholder="请选择" @change="changeCom" size="small">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                           :value="item.value"></el-option>
             </el-select>
         </div>
         <canvas :id="id" width="740" height="400" tabindex="0"/>
@@ -15,87 +16,105 @@
 </template>
 
 <script lang="ts">
-    import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SColor, SRect, SCompositeType, SPainter} from "@persagy-web/draw/lib"
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SColor, SCompositeType, SPainter, SRect } from "@persagy-web/draw/lib"
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
 
-    class Circle extends SGraphItem{
+    class Circle extends SGraphItem {
+        /** 融合方式 默认。在目标图像上显示源图像。 */
         _composite = SCompositeType.SourceOver;
-        get composite():SCompositeType{
+        get composite(): SCompositeType {
             return this._composite;
         }
-        set composite(v:SCompositeType){
+
+        set composite(v: SCompositeType) {
             this._composite = v;
             this.update();
         }
-        constructor(parent: SGraphItem | null, com:SCompositeType){
+
+        /**
+         * 构造函数
+         *
+         * @param parent    Item 图像引擎
+         * @param com       融合方式
+         */
+        constructor(parent: SGraphItem | null, com: SCompositeType) {
             super(parent);
             this.composite = com ? SCompositeType.SourceOver : com;
         }
 
-
+        /**
+         * 矩形数据类型绘制
+         */
         boundingRect(): SRect {
-            return new SRect(-500,-500,1500,1500);
+            return new SRect(-500, -500, 1500, 1500);
         }
+
+        /**
+         * Item 绘制操作
+         *
+         * @param painter 绘制对象
+         */
         onDraw(painter: SPainter): void {
             painter.brush.color = SColor.Blue;
             painter.pen.color = SColor.Transparent;
-            painter.drawRect(0,0,1000,1000);
-
+            painter.drawRect(0, 0, 1000, 1000);
+            //融合属性
             painter.composite = this.composite;
-
             painter.brush.color = SColor.Red;
-            painter.drawCircle(0,0,500);
+            //绘制圆形
+            painter.drawCircle(0, 0, 500);
         }
     }
+
     @Component
     export default class CompositeCanvas extends Vue {
         view: SGraphView | undefined;
         id: string = uuid();
         value: SCompositeType = SCompositeType.SourceOver;
         options = [{
-                value: SCompositeType.DestinationAtop,
-                label: 'DestinationAtop'
-            },{
-                value: SCompositeType.DestinationIn,
-                label: 'DestinationIn'
-            },{
-                value: SCompositeType.DestinationOut,
-                label: 'DestinationOut'
-            },{
-                value: SCompositeType.DestinationOver,
-                label: 'DestinationOver'
-            },{
-                value: SCompositeType.SourceAtop,
-                label: 'SourceAtop'
-            },{
-                value: SCompositeType.SourceIn,
-                label: 'SourceIn'
-            },{
-                value: SCompositeType.SourceOver,
-                label: 'SourceOver'
-            },{
-                value: SCompositeType.SourceOut,
-                label: 'SourceOut'
-            },{
-                value: SCompositeType.Xor,
-                label: 'Xor'
-            },{
-                value: SCompositeType.Lighter,
-                label: 'Lighter'
-            },{
-                value: SCompositeType.Copy,
-                label: 'Copy'
-            }];
+            value: SCompositeType.DestinationAtop,
+            label: 'DestinationAtop'
+        }, {
+            value: SCompositeType.DestinationIn,
+            label: 'DestinationIn'
+        }, {
+            value: SCompositeType.DestinationOut,
+            label: 'DestinationOut'
+        }, {
+            value: SCompositeType.DestinationOver,
+            label: 'DestinationOver'
+        }, {
+            value: SCompositeType.SourceAtop,
+            label: 'SourceAtop'
+        }, {
+            value: SCompositeType.SourceIn,
+            label: 'SourceIn'
+        }, {
+            value: SCompositeType.SourceOver,
+            label: 'SourceOver'
+        }, {
+            value: SCompositeType.SourceOut,
+            label: 'SourceOut'
+        }, {
+            value: SCompositeType.Xor,
+            label: 'Xor'
+        }, {
+            value: SCompositeType.Lighter,
+            label: 'Lighter'
+        }, {
+            value: SCompositeType.Copy,
+            label: 'Copy'
+        }];
         circle: Circle | undefined;
         tableData = [{
-                val: 'source-over',
-                desc: '默认。在目标图像上显示源图像。'
-            },{
-                val: 'source-atop',
-                desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
-            },
+            val: 'source-over',
+            desc: '默认。在目标图像上显示源图像。'
+        }, {
+            val: 'source-atop',
+            desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
+        },
             {
                 val: 'source-in',
                 desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
@@ -133,10 +152,12 @@
                 desc: '使用异或操作对源图像与目标图像进行组合。'
             }
         ];
-        mounted():void {
+
+        mounted(): void {
             this.init()
         };
-        init():void{
+
+        init(): void {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
             this.circle = new Circle(null, SCompositeType.SourceOut);
@@ -145,7 +166,8 @@
             this.view.fitSceneToView();
             this.view.scalable = false;
         };
-        changeCom(val:SCompositeType):void{
+
+        changeCom(val: SCompositeType): void {
             if (this.circle) {
                 this.circle.composite = val;
             }

+ 91 - 15
docs/.vuepress/components/engine/demo/elsfk.vue

@@ -5,15 +5,19 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
-    import {SCanvasView, SColor, SPainter} from "@persagy-web/draw/lib";
+    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
 
     class TestView extends SCanvasView {
+        /** 背景表示数组 */
         map: number[][] = [];
-        fkType: number = Number((Math.random() * 6).toFixed());  // 0-6
-        dir: number = Number((Math.random() * 2).toFixed());  // 0-3
-        fk: number[][][]=[
+        /** 方块类型索引 */
+        fkType: number = Number(Math.floor(Math.random() * 7));  // 0-6
+        /** 方块变形索引 */
+        dir: number = Number(Math.floor((Math.random() * 4)));  // 0-3
+        /** 所有方块集合 */
+        fk: number[][][] = [
             [
                 [0, 0, 0, 0],
                 [0, 1, 1, 0],
@@ -183,31 +187,45 @@
                 [0, 0, 0, 0],
             ]
         ];
+        /** 方块初始位置x坐标 */
         x = 5;
+        /** 方块初始位置y坐标 */
         y = 0;
+        /** 记录上次刷新时间 */
         t = Date.now();
 
+        /**
+         * 构造函数
+         * @param id canvas DOM id
+         */
         constructor(id: string) {
             super(id);
             this.initMap();
         }
 
+        /**
+         * 键盘按下事件
+         * @param event 事件对象
+         */
         onKeyDown(event: KeyboardEvent): void {
-            console.log(event.code);
+            //按键判断
             if (event.code == "KeyW") {
+                //变形后是否碰撞
                 if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
                     this.dir = (this.dir + 1) % 4;
                 }
             } else if (event.code == "KeyA") {
+                //左移后是否碰撞
                 if (!this.isPz(this.x - 1, this.y, this.dir)) {
                     this.x--;
                 }
             } else if (event.code == "KeyD") {
+                //检查右移后是否碰撞
                 if (!this.isPz(this.x + 1, this.y, this.dir)) {
                     this.x++;
                 }
-            }
-            else if (event.code == "KeyS") {
+            } else if (event.code == "KeyS") {
+                //检查下移后是否碰撞
                 if (!this.isPz(this.x, this.y + 1, this.dir)) {
                     this.y++;
                 } else {
@@ -215,12 +233,19 @@
                     this.xc();
                 }
             }
+
             this.update();
         }
 
+        /**
+         * Item 绘制操作
+         *
+         * @param painter   绘制对象
+         */
         onDraw(painter: SPainter): void {
-            painter.clearRect(0,0,this.width, this.height);
-
+            //清除画布
+            painter.clearRect(0, 0, this.width, this.height);
+            //绘制操作相关命令
             painter.pen.color = SColor.Transparent;
             painter.brush.color = SColor.Red;
 
@@ -234,15 +259,19 @@
                     this.fullMap();
                     this.xc();
                 }
+
                 this.t = Date.now();
             }
             this.update();
         }
 
+        /**
+         *初始化背景
+         */
         private initMap(): void {
             this.map = [];
             for (let row = 0; row < 22; row++) {
-                const m1:number[] = []
+                const m1: number[] = []
                 for (let col = 0; col < 14; col++) {
                     if (row > 19 || col < 2 || col > 11) {
                         m1.push(2);
@@ -254,12 +283,22 @@
             }
         }
 
+        /**
+         * 绘制背景
+         *
+         * @param painter 绘制对象
+         */
         private drawMap(painter: SPainter): void {
             for (let row = 0; row < 22; row++) {
                 for (let col = 0; col < 14; col++) {
+                    const x = col * 30 + 11 - 60;
+                    const y = row * 30 + 11;
+                    //赋到背景
                     if (this.map[row][col] == 1) {
                         painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                     }
+
+                    //底加一行
                     if (this.map[row][col] == 2) {
                         painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                     }
@@ -267,7 +306,13 @@
             }
         }
 
+        /**
+         * 绘制实体图形
+         *
+         * @param painter   绘制对象
+         */
         private drawFk(painter: SPainter): void {
+
             for (let row = 0; row < 4; row++) {
                 for (let col = 0; col < 4; col++) {
                     if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
@@ -277,6 +322,14 @@
             }
         }
 
+        /**
+         * 是否碰撞
+         *
+         * @param x     x坐标
+         * @param y     y坐标
+         * @param dir   方块变形索引
+         * @return 是否碰撞
+         */
         private isPz(x: number, y: number, dir: number): boolean {
             for (let row = 0; row < 4; row++) {
                 for (let col = 0; col < 4; col++) {
@@ -288,6 +341,9 @@
             return false;
         }
 
+        /**
+         * 将方块合到背景中
+         */
         private fullMap() {
             for (let row = 0; row < 4; row++) {
                 for (let col = 0; col < 4; col++) {
@@ -303,7 +359,10 @@
             this.dir = Number((Math.random() * 2).toFixed());
         }
 
-        private xc(): void{
+        /**
+         * 消除满行
+         */
+        private xc(): void {
             for (let row = 0; row < 20; row++) {
                 let flag = true;
                 for (let col = 0; col < 14; col++) {
@@ -312,18 +371,35 @@
                         break;
                     }
                 }
-                if(flag){
-                    this.map.splice(row,1);
-                    this.map.unshift([2,2,0,0,0,0,0,0,0,0,0,0,2,2]);
+
+                if (flag) {
+                    this.map.splice(row, 1);
+                    this.map.unshift()
+                    this.map.unshift(this.randomRow(10, 0))
+                    // this.map.unshift([2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2]);
                     // row--;
                 }
             }
         }
+
+        /**
+         * 随机数组生成
+         *
+         * @return 数组
+         */
+        private randomRow(len: number = 10, num: number = 2): number[] {
+            let array = new Array(len + 4).fill(2);
+            for (let i = 2; i < array.length - 2; i++) {
+                array[i] = Math.floor(num * Math.random())
+            }
+            return array
+        }
     }
 
     @Component
     export default class ElsfkCanvas extends Vue {
         id: string = uuid();
+
         mounted(): void {
             new TestView(this.id);
         }

+ 57 - 15
docs/.vuepress/components/engine/demo/elsfkDifficult.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
-    import {SCanvasView, SColor, SPainter, STextAlign} from "@persagy-web/draw/lib";
+    import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
 
     /**
      * 俄罗斯方块视图
@@ -224,23 +224,28 @@
          * @param event 事件对象
          */
         onKeyDown(event: KeyboardEvent): void {
+            //游戏结束
             if (this.gameOver) {
                 return;
             }
 
             if (event.code == "KeyW") {
+                //检查变形后是否碰撞
                 if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {
                     this.dir = (this.dir + 1) % 4;
                 }
             } else if (event.code == "KeyA") {
+                //检查左移后是否碰撞
                 if (!this.checkKnocked(this.x - 1, this.y, this.dir)) {
                     this.x--;
                 }
             } else if (event.code == "KeyD") {
+                //检查右移后是否碰撞
                 if (!this.checkKnocked(this.x + 1, this.y, this.dir)) {
                     this.x++;
                 }
             } else if (event.code == "KeyS") {
+                //检查下移后是否碰撞
                 if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
                     this.y++;
                 } else {
@@ -252,11 +257,12 @@
         }
 
         /**
-         * 键盘按下事件
+         * Item 绘制操作
          *
          * @param painter 绘制对象
          */
         onDraw(painter: SPainter): void {
+            //游戏结束绘制文字
             if (this.gameOver) {
                 painter.brush.color = SColor.Blue;
                 painter.font.size = 20;
@@ -273,9 +279,11 @@
 
             painter.pen.color = this.boxColor;
             painter.brush.color = this.boxColor;
+            //绘制图形
             this.drawBox(painter);
-
+            //下落速度,下移一格
             if (Date.now() - this.t > 500) {
+                //下移是否碰撞
                 if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
                     this.y++;
                 } else {
@@ -292,10 +300,14 @@
         initMap(): void {
             this.gameOver = false;
             this.map = [];
+            //循环行数
             for (let row = 0; row < 22; row++) {
                 const m1: number[] = [];
+                //循环列数
                 for (let col = 0; col < 14; col++) {
+                    //左侧,右侧,底部补充两个格
                     if (row > 19 || col < 2 || col > 11) {
+                        //-1代表左右填充
                         m1.push(-1);
                     } else {
                         m1.push(0);
@@ -332,7 +344,9 @@
          * @param painter 绘制对象
          */
         private drawMap(painter: SPainter): void {
+            //行数
             for (let row = 0; row < 22; row++) {
+                //列数
                 for (let col = 0; col < 14; col++) {
                     this.drawShape(painter, row, col, this.map[row][col]);
                     // if (n == 0) {
@@ -341,18 +355,19 @@
                 }
             }
         }
-        
+
         /**
          * 绘制实体图形
-         * 
+         *
          * @param painter   绘制对象
          * @param row       行
-         * @param col       列  
+         * @param col       列
          * @param type      图类型
          */
         private drawShape(painter: SPainter, row: number, col: number, type: number): void {
             const x = col * 30 + 11 - 60;
             const y = row * 30 + 11;
+            //类型判断,0为空白,-1填充
             switch (type) {
                 case 0:
                     break;
@@ -371,7 +386,9 @@
          * @param painter 绘制对象
          */
         private drawBox(painter: SPainter): void {
+            //绘制图形行数
             for (let row = 0; row < 4; row++) {
+                //绘制图形列数
                 for (let col = 0; col < 4; col++) {
                     this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
                 }
@@ -387,8 +404,11 @@
          * @return 是否碰撞
          */
         private checkKnocked(x: number, y: number, dir: number): boolean {
+            //绘制图形行数
             for (let row = 0; row < 4; row++) {
+                //绘制图形列数
                 for (let col = 0; col < 4; col++) {
+                    //判断是否重合,每种图形四个一组,四种变形的某种变形,不为零表示绘制(确定方块),坐标转换,背景图中绘制
                     if (this.box[this.boxType * 4 + dir][row][col] != 0 && this.map[y + row][x + col] != 0) {
                         return true;
                     }
@@ -401,8 +421,11 @@
          * 将方块合到背景中
          */
         private fullMap(): void {
+            //遍历图形的行数
             for (let row = 0; row < 4; row++) {
+                //遍历图形的列数
                 for (let col = 0; col < 4; col++) {
+                    //判断图形绘制,填充至背景中
                     if (this.box[this.boxType * 4 + this.dir][row][col] == 1) {
                         this.map[this.y + row][this.x + col] = 1;
                     }
@@ -410,8 +433,9 @@
             }
 
             this.initBox();
-
+            //判断背景上的图形与初始化图形是否重合
             if (this.checkKnocked(this.x, this.y, this.dir)) {
+                //游戏结束
                 this.gameOver = true;
             }
 
@@ -422,10 +446,22 @@
          * 消除满行
          */
         private remove(): void {
-            let removeCount = 1;
+            //消除行数
+            let removeCount = 0;
+            //循环行数,不包含底部填充2行
             for (let row = 0; row < 20; row++) {
+                //消除标记,true 是
                 let flag = true;
-                for (let col = 0; col < 14; col++) {
+                //
+                // for (let col = 0; col < 14; col++) {
+                //     if (this.map[row][col] == 0) {
+                //         flag = false;
+                //         break;
+                //     }
+                // }
+
+                //若当前行有一个空格,则不消除
+                for (let col = 2; col < 12; col++) {
                     if (this.map[row][col] == 0) {
                         flag = false;
                         break;
@@ -434,14 +470,17 @@
 
                 if (flag) {
                     this.map.splice(row, 1);
+                    //顶部加一行空行
                     this.map.unshift(this.randomRow(10, 0));
                     removeCount++;
                 }
             }
-
-            if (removeCount > 1) {
+            //记录消除行数
+            if (removeCount > 0) {
                 this.$emit("score", removeCount);
+                //删除行
                 this.map.shift();
+                //底部随机产生一行
                 this.map.splice(19, 0, this.randomRow());
             }
         }
@@ -452,7 +491,8 @@
          * @return 数组
          */
         private randomRow(len: number = 10, num: number = 2): number[] {
-            let array = new Array(len + 4).fill(2);
+            let array = new Array(len + 4).fill(-1);
+            //生成随机数,循环不包含左右填充格
             for (let i = 2; i < array.length - 2; i++) {
                 array[i] = Math.floor(num * Math.random());
             }
@@ -467,6 +507,7 @@
         scoreList: number[] = [100, 300, 600, 1000];
         score: number = 0;
         view: TestView | undefined = undefined;
+
         mounted(): void {
             this.view = new TestView(this.id);
             this.view.connect("score", this, this.changeScore);
@@ -474,10 +515,11 @@
         }
 
         changeScore(v: SCanvasView, count: number[]) {
-            this.score+= this.scoreList[count[0] - 2];
+            //根据消除行数判断分值
+            this.score += this.scoreList[count[0] - 1];
         }
 
-        reset(){
+        reset() {
             this.view!!.initMap();
             this.view!!.initBox();
             this.score = 0;

+ 8 - 7
docs/.vuepress/components/engine/gradient/GradRect.ts

@@ -1,12 +1,13 @@
-import {SGraphItem} from "@persagy-web/graph/lib";
-import {SColor, SLinearGradient, SPainter, SRadialGradient, SRect} from "@persagy-web/draw/lib";
+import { SGraphItem } from "@persagy-web/graph/lib";
+import { SColor, SLinearGradient, SPainter, SRadialGradient, SRect } from "@persagy-web/draw/lib";
 
-export class GradRect extends SGraphItem{
+export class GradRect extends SGraphItem {
     minX = 0;
     minY = 0;
     maxY = 1000;
     maxX = 1000;
-    gradient: SRadialGradient | SLinearGradient |  null = null;
+    gradient: SRadialGradient | SLinearGradient | null = null;
+
     constructor(parent: SGraphItem | null, grad: SRadialGradient | SLinearGradient) {
         super(parent);
         this.gradient = grad;
@@ -24,11 +25,11 @@ export class GradRect extends SGraphItem{
         );
     }
 
-    onDraw(painter:SPainter) {
+    onDraw(painter: SPainter) {
         painter.pen.color = SColor.Black;
         painter.brush.gradient = this.gradient;
-        painter.drawRect(0,0,1000,1000);
-        if (this.gradient instanceof  SRadialGradient) {
+        painter.drawRect(0, 0, 1000, 1000);
+        if (this.gradient instanceof SRadialGradient) {
             painter.brush.color = SColor.Transparent;
             painter.drawCircle(this.gradient.x1, this.gradient.y1, this.gradient.r1);
             painter.drawCircle(this.gradient.x2, this.gradient.y2, this.gradient.r2);

+ 5 - 3
docs/.vuepress/components/engine/gradient/gradient.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
     import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SLinearGradient, SGradient, SRadialGradient } from "@persagy-web/draw/lib";
+    import { SGradient, SLinearGradient, SRadialGradient } from "@persagy-web/draw/lib";
     import { GradRect } from "./GradRect";
     import { v1 as uuid } from "uuid";
     import { Component, Prop, Vue } from "vue-property-decorator";
@@ -16,9 +16,11 @@
         @Prop() private arg!: string;
         id: string = uuid();
         view: SGraphView | undefined;
+
         mounted(): void {
             this.init();
         };
+
         init(): void {
             const arr = this.arg.split(',');
             this.view = new SGraphView(this.id);
@@ -28,12 +30,12 @@
                 if (arr.length > 4) {
                     // @ts-ignore
                     grad = new SRadialGradient(...arr);
-                } else{
+                } else {
                     // @ts-ignore
                     grad = new SLinearGradient(...arr);
                 }
             } catch (e) {
-                grad = new SLinearGradient(0,0,0,1000);
+                grad = new SLinearGradient(0, 0, 0, 1000);
             }
             const item = new GradRect(null, grad);
             scene.addItem(item);

+ 10 - 8
docs/.vuepress/components/engine/selectContainer.vue

@@ -5,13 +5,13 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
-    import {SGraphView, SGraphScene, SGraphRectItem} from "@persagy-web/graph/lib";
-    import {SRect} from "@persagy-web/draw/lib";
+    import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SRect } from "@persagy-web/draw/lib";
 
-    class ResizeRect extends SGraphRectItem{
-        resize(oldSize: SRect, newSize: SRect):void{
+    class ResizeRect extends SGraphRectItem {
+        resize(oldSize: SRect, newSize: SRect): void {
             this.width = newSize.width;
             this.height = newSize.height;
         }
@@ -28,7 +28,7 @@
             height: 500,
             radius: 0,
             style: {
-                "default":{
+                "default": {
                     "stroke": "#cccccc",
                     "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                     "lineWidth": 2,
@@ -48,10 +48,12 @@
                 },
             }
         };
-        mounted():void {
+
+        mounted(): void {
             this.init()
         };
-        init():void {
+
+        init(): void {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
             const item = new ResizeRect(null, this.rectData);

+ 12 - 12
docs/.vuepress/components/engine/shape/Circle1.vue

@@ -1,10 +1,10 @@
 <template>
-    <canvas id="circle" width="740" height="250" />
+    <canvas height="250" id="circle" width="740"/>
 </template>
 
 <script lang="ts">
-    import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SCanvasView, SColor, SLineCapStyle, SPainter, SRect } from "@persagy-web/draw/lib";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -13,28 +13,28 @@
         }
 
         onDraw(canvas: SPainter): void {
-            canvas.clearRect(new SRect(0,0,800,400));
+            canvas.clearRect(new SRect(0, 0, 800, 400));
 
             canvas.pen.color = SColor.Blue;
             canvas.brush.color = SColor.Red;
-            canvas.drawCircle(100,100,50);
+            canvas.drawCircle(100, 100, 50);
 
             canvas.pen.lineWidth = 10;
-            canvas.pen.lineDash = [10,11];
+            canvas.pen.lineDash = [10, 11];
             canvas.pen.lineCapStyle = SLineCapStyle.Butt;
             canvas.pen.color = new SColor("#585858");
             canvas.brush.color = new SColor("#585858");
 
-            canvas.pen.dashOffset = new Date().getTime()/50%60;
-            canvas.drawCircle(230,100,40);
+            canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
+            canvas.drawCircle(230, 100, 40);
 
-            canvas.pen.dashOffset = -new Date().getTime()/50%60;
-            canvas.drawCircle(315,100,40);
+            canvas.pen.dashOffset = -new Date().getTime() / 50 % 60;
+            canvas.drawCircle(315, 100, 40);
 
             canvas.pen.color = SColor.Transparent;
             canvas.brush.color = SColor.White;
-            canvas.drawCircle(230,100,15);
-            canvas.drawCircle(315,100,15);
+            canvas.drawCircle(230, 100, 15);
+            canvas.drawCircle(315, 100, 15);
 
             canvas.pen.color = SColor.Red;
             for (let i = 0; i < 360; i += 10) {

+ 16 - 9
docs/.vuepress/components/engine/shape/DrawLine1.vue

@@ -1,29 +1,35 @@
 <template>
-    <canvas id="drawLine1" width="800" height="100" />
+    <canvas id="drawLine1" width="800" height="100"/>
 </template>
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
-
+        /**
+         * 构造函数
+         */
         constructor() {
             super("drawLine1")
         }
 
+        /**
+         * Item 绘制操作
+         * @param canvas 绘制对象
+         */
         onDraw(canvas: SPainter): void {
             // 清除画布
-            canvas.clearRect(0,0,800,100);
+            canvas.clearRect(0, 0, 800, 100);
 
             // 在此编写绘制操作相关命令
-            canvas.drawLine(0,0, 100, 100);
-
+            canvas.drawLine(0, 0, 100, 100);
             canvas.pen.lineWidth = 1;
-
             canvas.pen.color = SColor.Blue;
+
             for (let i = 0; i < 360; i += 10) {
                 let q = i * Math.PI / 180;
+                // 绘制一条线段
                 canvas.drawLine(
                     200,
                     50,
@@ -32,6 +38,7 @@
             }
 
             canvas.pen.color = SColor.Red;
+
             for (let i = 0; i < 360; i += 10) {
                 let q1 = i * Math.PI / 180;
                 let q2 = (i + 120) * Math.PI / 180;
@@ -46,8 +53,8 @@
             canvas.pen.lineWidth = 5;
             canvas.drawLine(450, 50, 700, 50);
             canvas.pen.lineWidth = 3;
-            canvas.pen.dashOffset = new Date().getTime()/50%80;
-            canvas.pen.lineDash = [30,50];
+            canvas.pen.dashOffset = new Date().getTime() / 50 % 80;
+            canvas.pen.lineDash = [30, 50];
             canvas.pen.color = SColor.White;
             canvas.drawLine(450, 50, 700, 50);
             this.update();

+ 6 - 5
docs/.vuepress/components/engine/shape/DrawLine2.vue

@@ -1,10 +1,10 @@
 <template>
-    <canvas id="drawLine2" width="800" height="100" />
+    <canvas id="drawLine2" width="800" height="100"/>
 </template>
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -14,13 +14,13 @@
 
         onDraw(canvas: SPainter): void {
             // 在此编写绘制操作相关命令
-            canvas.drawLine(0,0, 100, 100);
-
+            canvas.drawLine(0, 0, 100, 100);
             canvas.pen.lineWidth = 1;
-
             canvas.pen.color = SColor.Blue;
+
             for (let i = 0; i < 360; i += 10) {
                 let q = i * Math.PI / 180;
+                // 绘制一条线段
                 canvas.drawLine(
                     200,
                     50,
@@ -29,6 +29,7 @@
             }
 
             canvas.pen.color = SColor.Red;
+
             for (let i = 0; i < 360; i += 10) {
                 let q1 = i * Math.PI / 180;
                 let q2 = (i + 120) * Math.PI / 180;

+ 6 - 4
docs/.vuepress/components/engine/shape/DrawPolyline1.vue

@@ -1,18 +1,20 @@
 <template>
-    <canvas id="drawPolyline1" width="800" height="100" />
+    <canvas height="100" id="drawPolyline1" width="800"/>
 </template>
 
 <script lang="ts">
-    import {SCanvasView, SColor, SPainter, SPoint} from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SCanvasView, SPainter, SPoint } from "@persagy-web/draw/lib";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
-        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)];
+        arr: SPoint[] = [new SPoint(10, 10), new SPoint(10, 40), new SPoint(30, 30)];
+
         constructor() {
             super("drawPolyline1")
         }
 
         onDraw(canvas: SPainter): void {
+            // 绘制折线
             canvas.drawPolyline(this.arr);
         }
     }

+ 11 - 6
docs/.vuepress/components/engine/shape/DrawRect1.vue

@@ -1,10 +1,10 @@
 <template>
-    <canvas id="drawRect1" width="800" height="180" />
+    <canvas id="drawRect1" width="800" height="180"/>
 </template>
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -13,32 +13,37 @@
         }
 
         onDraw(canvas: SPainter): void {
-            canvas.clearRect(0,0,800,200);
-
+            // 清除画布
+            canvas.clearRect(0, 0, 800, 200);
+            // 绘制操作相关命令
             canvas.pen.color = SColor.Blue;
             canvas.brush.color = SColor.Red;
+            // 绘制矩形
             canvas.drawRect(10, 10, 80, 80);
 
             canvas.pen.color = SColor.Transparent;
             canvas.brush.color = SColor.Red;
+            //绘制矩形
             canvas.drawRect(new SPoint(110, 10), new SSize(80, 80));
 
             canvas.pen.color = SColor.Blue;
             canvas.brush.color = SColor.Transparent;
+            // 绘制矩形
             canvas.drawRect(new SRect(210, 10, 80, 80));
 
             canvas.pen.lineWidth = 1;
             canvas.pen.color = SColor.Blue;
             canvas.brush.color = SColor.Transparent;
             for (let i = 1; i < 100; i += 10) {
+                //绘制矩形
                 canvas.drawRect(310 + i, i, 80, 80);
             }
 
             canvas.pen.lineWidth = 2;
             canvas.pen.color = SColor.Blue;
             canvas.brush.color = SColor.Red;
-            let k = new Date().getTime()/100%10;
-            for (let i = 1; i < k*10; i += 10) {
+            let k = new Date().getTime() / 100 % 10;
+            for (let i = 1; i < k * 10; i += 10) {
                 canvas.drawRect(510 + i, i, 80, 80);
             }
 

+ 9 - 6
docs/.vuepress/components/engine/shape/path.vue

@@ -1,28 +1,31 @@
 <template>
-    <canvas id="pathCanvas" width="740" height="250" />
+    <canvas id="pathCanvas" width="740" height="250"/>
 </template>
 
 <script lang="ts">
-    import {SCanvasView, SPainter, SPath} from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SCanvasView, SPainter, SPath } from "@persagy-web/draw/lib";
+    import { Component, Vue } from "vue-property-decorator";
 
     class TestView222 extends SCanvasView {
-        path:SPath;
+        path: SPath;
+
         constructor() {
             super('pathCanvas');
             this.path = new SPath();
             // @ts-ignore
-            this.path.polygon([{x:700,y:150},{x:0,y:150},{x:0,y:0}]);
+            this.path.polygon([{x: 700, y: 150}, {x: 0, y: 150}, {x: 0, y: 0}]);
             // @ts-ignore
-            this.path.polygon([{x:100,y:100},{x:100,y:200},{x:200,y:200}]);
+            this.path.polygon([{x: 100, y: 100}, {x: 100, y: 200}, {x: 200, y: 200}]);
             // this.path.polygon([{x:0,y:0},{x:0,y:150},{x:700,y:150}]);
             // this.path.polygon([{x:200,y:200},{x:100,y:200},{x:100,y:100}]);
         }
 
         onDraw(painter: SPainter) {
+            //绘制路径
             painter.drawPath(this.path)
         }
     }
+
     @Component
     export default class PathCanvas extends Vue {
         mounted(): void {

+ 44 - 19
docs/.vuepress/components/engine/style/shadow.vue

@@ -1,24 +1,38 @@
 <template>
     <div style="margin-top: 10px;">
-        阴影扩散范围 : <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
-        x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
-        y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
-        阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
+        阴影扩散范围 :
+        <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
+        x轴偏移量 :
+        <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
+        y轴偏移量 :
+        <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
+        阴影颜色 :
+        <el-color-picker @change="changeColor" v-model="color" size="mini"
+                         style="vertical-align: middle"></el-color-picker>
         <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
     </div>
 </template>
 
 <script lang="ts">
     import { SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
-    import {SGraphView} from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { SGraphView } from "@persagy-web/graph/lib";
     import { v1 as uuid } from "uuid";
 
     class shadowView extends SGraphView {
-        shadowBlur:number;
-        shadowColor:SColor;
-        shadowOffsetX:number;
-        shadowOffsetY:number;
+        /** 阴影扩散距离 */
+        shadowBlur: number;
+        /** 阴影颜色 */
+        shadowColor: SColor;
+        /** 阴影 x 轴偏移量 */
+        shadowOffsetX: number;
+        /** 阴影 y 轴偏移量 */
+        shadowOffsetY: number;
+
+        /**
+         * 构造函数
+         * @param id
+         */
         constructor(id: string) {
             super(id);
             this.shadowBlur = 10;
@@ -27,9 +41,14 @@
             this.shadowOffsetY = 10;
         }
 
-        onDraw(canvas:SPainter) {
-            canvas.clearRect(0,0,740,400);
-
+        /**
+         * Item 绘制操作
+         * @param canvas    绘制对象
+         */
+        onDraw(canvas: SPainter) {
+            // 清除画布
+            canvas.clearRect(0, 0, 740, 400);
+            // 绘制操作相关命令
             canvas.pen.lineWidth = 1;
             canvas.pen.color = SColor.Black;
             canvas.brush.color = SColor.White;
@@ -37,8 +56,9 @@
             canvas.shadow.shadowColor = this.shadowColor;
             canvas.shadow.shadowOffsetX = this.shadowOffsetX;
             canvas.shadow.shadowOffsetY = this.shadowOffsetY;
-            canvas.drawRect(300,50,100,100);
-            canvas.drawRect(270,100,100,100);
+            // 绘制矩形
+            canvas.drawRect(300, 50, 100, 100);
+            canvas.drawRect(270, 100, 100, 100);
         }
     }
 
@@ -50,26 +70,31 @@
         X: number = 10;
         Y: number = 10;
         color: string = "#cccccc";
+
         mounted() {
             this.view = new shadowView(this.id);
         }
+
         // 修改扩散距离
-        changeblur(v:number):void {
+        changeblur(v: number): void {
             this.view!!.shadowBlur = v;
             this.view!!.update()
         };
+
         // x轴偏移量
-        changeX(v:number){
+        changeX(v: number) {
             this.view!!.shadowOffsetX = v;
             this.view!!.update()
         };
+
         // y轴偏移量
-        changeY(v:number){
+        changeY(v: number) {
             this.view!!.shadowOffsetY = v;
             this.view!!.update()
         };
+
         // 修改颜色
-        changeColor(v:string){
+        changeColor(v: string) {
             this.view!!.shadowColor = new SColor(v);
             this.view!!.update()
         }

+ 5 - 4
docs/.vuepress/components/format/style.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
+
     @Component
     export default class StyleCanvas extends Vue {
         tableData = [
@@ -17,15 +18,15 @@
                 date: 'false',
                 name: 'false',
                 address: 'Disabled'
-            },{
+            }, {
                 date: 'false',
                 name: 'true',
                 address: 'Disabled'
-            },{
+            }, {
                 date: 'true',
                 name: 'false',
                 address: 'Default'
-            },{
+            }, {
                 date: 'true',
                 name: 'true',
                 address: 'Selected'

+ 26 - 25
docs/.vuepress/components/scene/Align.vue

@@ -10,13 +10,14 @@
 </template>
 
 <script>
-    import {SGraphItem, SGraphScene, SGraphView, SGraphLayoutType} from "@persagy-web/graph/lib";
-    import { SColor, SPainter, SRect } from "@persagy-web/draw/lib";
+    import { SGraphItem, SGraphLayoutType, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SColor, SRect } from "@persagy-web/draw/lib";
 
     class RectItem extends SGraphItem {
         width = 200;
         height = 100;
         text = '';
+
         constructor(parent) {
             super(parent);
             this.moveable = true;
@@ -34,13 +35,13 @@
             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.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);
+            canvas.drawText(`${this.x},${this.y}`, 0, 0);
 
         }
     }
@@ -68,11 +69,11 @@
 
             canvas.pen.color = SColor.Yellow;
             canvas.brush.color = SColor.Transparent;
-            canvas.pen.lineDash = [10,10];
+            canvas.pen.lineDash = [10, 10];
             canvas.drawRect(this.boundingRect());
 
             canvas.brush.color = SColor.Black;
-            canvas.drawText(`${this.x},${this.y}`,0,0);
+            canvas.drawText(`${this.x},${this.y}`, 0, 0);
         }
     }
 
@@ -86,7 +87,7 @@
 
 
         onMouseUp(event) {
-            switch(this.cmd) {
+            switch (this.cmd) {
                 case 1:
                     this.addCircle(event.x, event.y);
                     break;
@@ -124,38 +125,38 @@
             return {
                 scene: new SScene(),
                 value: -1,
-                options:[
+                options: [
                     {
-                        value:SGraphLayoutType.Left,
-                        label:'左对齐'
+                        value: SGraphLayoutType.Left,
+                        label: '左对齐'
                     },
                     {
-                        value:SGraphLayoutType.Right,
-                        label:'右对齐'
+                        value: SGraphLayoutType.Right,
+                        label: '右对齐'
                     },
                     {
-                        value:SGraphLayoutType.Top,
-                        label:'顶对齐'
+                        value: SGraphLayoutType.Top,
+                        label: '顶对齐'
                     },
                     {
-                        value:SGraphLayoutType.Bottom,
-                        label:'底对齐'
+                        value: SGraphLayoutType.Bottom,
+                        label: '底对齐'
                     },
                     {
-                        value:SGraphLayoutType.Center,
-                        label:'水平居中对齐'
+                        value: SGraphLayoutType.Center,
+                        label: '水平居中对齐'
                     },
                     {
-                        value:SGraphLayoutType.Middle,
-                        label:'垂直居中对齐'
+                        value: SGraphLayoutType.Middle,
+                        label: '垂直居中对齐'
                     },
                     {
-                        value:SGraphLayoutType.Vertical,
-                        label:'垂直分布'
+                        value: SGraphLayoutType.Vertical,
+                        label: '垂直分布'
                     },
                     {
-                        value:SGraphLayoutType.Horizontal,
-                        label:'水平分布'
+                        value: SGraphLayoutType.Horizontal,
+                        label: '水平分布'
                     }
                 ]
             }
@@ -171,7 +172,7 @@
             addRect() {
                 this.scene.cmd = 2;
             },
-            changeAlign(v){
+            changeAlign(v) {
                 this.scene.selectContainer.layout(v)
                 // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
             }

+ 6 - 5
docs/.vuepress/components/scene/Undo1.vue

@@ -6,20 +6,21 @@
         <el-button @click="undo">Undo</el-button>
         <el-button @click="redo">Redo</el-button>
         <el-button @click="log">日志</el-button>
-        <canvas id="undoFrame" width="800" height="400" />
+        <canvas id="undoFrame" width="800" height="400"/>
     </div>
 </template>
 
 <script lang="ts">
     import { SMouseEvent, SUndoStack } from "@persagy-web/base";
     import { SColor, SPainter, SRect } from "@persagy-web/draw";
-    import { SGraphItem, SGraphScene, SGraphView, SGraphAddCommand, SGraphMoveCommand } from "@persagy-web/graph";
-    import {SPoint} from "@persagy-web/draw/lib";
+    import { SGraphAddCommand, SGraphItem, SGraphMoveCommand, SGraphScene, SGraphView } from "@persagy-web/graph";
+    import { SPoint } from "@persagy-web/draw/lib";
 
     class RectItem extends SGraphItem {
         width = 100;
         height = 100;
         id = new Date().getTime() + '';
+
         constructor(parent: SGraphItem | null) {
             super(parent);
             this.moveable = true;
@@ -43,7 +44,7 @@
 
     class CircleItem extends SGraphItem {
         r = 50;
-        id = new Date().getTime()+""
+        id = new Date().getTime() + ""
 
         constructor(parent: SGraphItem | null) {
             super(parent);
@@ -75,7 +76,7 @@
 
 
         onMouseUp(event: SMouseEvent): boolean {
-            switch(this.cmd) {
+            switch (this.cmd) {
                 case 1:
                     this.addCircle(event.x, event.y);
                     break;

+ 4 - 10
docs/.vuepress/components/scene/items/ClockItem.vue

@@ -1,18 +1,12 @@
 <template>
-    <canvas id="clockItem1" width="400" height="400" />
+    <canvas id="clockItem1" width="400" height="400"/>
 </template>
 
 <script lang="ts">
     import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { Component, Vue } from "vue-property-decorator";
 
-    import {
-        SColor,
-        SLineCapStyle,
-        SPainter,
-        SRect,
-        SSize
-    } from "@persagy-web/draw";
+    import { SColor, SLineCapStyle, SPainter, SRect, SSize } from "@persagy-web/draw";
 
     class SGraphClockItem extends SGraphItem {
         /** 大小 */
@@ -86,7 +80,7 @@
         } // Function SRect()
 
         /**
-         * Item绘制操作
+         * Item 绘制操作
          *
          * @param   painter       painter对象
          */

+ 8 - 4
docs/.vuepress/components/scene/items/ImageItem.vue

@@ -11,13 +11,13 @@
 
 <script lang="ts">
     import { SGraphScene, SGraphView } from "@persagy-web/graph";
-    import { SGraphSvgItem} from "@persagy-web/graph/lib";
+    import { SGraphSvgItem } from "@persagy-web/graph/lib";
     import { Component, Vue } from "vue-property-decorator";
-    import { SSize} from "@persagy-web/draw/lib";
+    import { SSize } from "@persagy-web/draw/lib";
     import { v1 as uuid } from "uuid";
 
-    class Img extends SGraphSvgItem{
-        resize(oldSize:SSize, newSize: SSize) :void {
+    class Img extends SGraphSvgItem {
+        resize(oldSize: SSize, newSize: SSize): void {
             this.width = newSize.width;
             this.height = newSize.height;
         }
@@ -27,6 +27,7 @@
     export default class imageCanvas extends Vue {
         id: string = uuid();
         url: string = require('./1.jpg');
+
         mounted() {
             const view = new SGraphView(this.id);
             const scene = new SGraphScene();
@@ -36,12 +37,15 @@
             scene.addItem(item);
             view.fitSceneToView();
         };
+
         Full() {
             // this.scene.imageItem.showType = SImageShowType.Full;
         };
+
         Equivalency() {
             // this.scene.imageItem.showType = SImageShowType.Equivalency;
         };
+
         AutoFit() {
             // this.scene.imageItem.showType = SImageShowType.AutoFit;
         };

+ 14 - 13
docs/.vuepress/components/scene/items/PolylineItem.vue

@@ -8,8 +8,9 @@
 </template>
 
 <script>
-    import {SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SPolylineItem,SItemStatus} from "@persagy-web/big/lib";
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SItemStatus, SPolylineItem } from "@persagy-web/big/lib";
+
     export default {
         name: "editPolyline",
         data() {
@@ -25,22 +26,22 @@
             this.view.scene = this.scene;
             this.init()
         },
-        methods:{
-            init(){
+        methods: {
+            init() {
                 this.scene.root.children = [];
-                this.item = new SPolylineItem(null,[]);
+                this.item = new SPolylineItem(null, []);
                 this.item.status = SItemStatus.Create;
                 this.scene.addItem(this.item);
                 this.scene.grabItem = this.item;
                 this.view.update();
             },
-            undo(){
-                if(this.scene.grabItem) {
+            undo() {
+                if (this.scene.grabItem) {
                     this.scene.grabItem.undo()
                 }
             },
-            redo(){
-                if(this.scene.grabItem) {
+            redo() {
+                if (this.scene.grabItem) {
                     this.scene.grabItem.redo()
                 }
             }
@@ -49,8 +50,8 @@
 </script>
 
 <style scoped>
-canvas{
-    border: 1px solid #eeeeee;
-    outline: none;
-}
+    canvas {
+        border: 1px solid #eeeeee;
+        outline: none;
+    }
 </style>

+ 6 - 6
docs/.vuepress/components/scene/items/SEditLine.vue

@@ -3,7 +3,7 @@
         <el-button @click="create">创建</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" />
+        <canvas id="editLine" width="740" height="400" tabindex="0"/>
     </div>
 </template>
 <script>
@@ -26,19 +26,19 @@
         methods: {
             create() {
                 this.scene.root.children = [];
-                const lineItem = new SLineItem(null, [] );
+                const lineItem = new SLineItem(null, []);
                 lineItem.status = SItemStatus.Create;
                 this.scene.addItem(lineItem);
                 this.scene.grabItem = lineItem;
                 this.view.fitSceneToView();
             },
-            undo(){
-                if(this.scene.grabItem) {
+            undo() {
+                if (this.scene.grabItem) {
                     this.scene.grabItem.undo();
                 }
             },
-            redo(){
-                if(this.scene.grabItem) {
+            redo() {
+                if (this.scene.grabItem) {
                     this.scene.grabItem.redo();
                 }
             }

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 548 - 551
docs/.vuepress/components/scene/items/SEditPolygon.vue


+ 32 - 17
docs/.vuepress/components/scene/items/SImgTextItem.vue

@@ -7,10 +7,18 @@
 </template>
 
 <script lang="ts">
-    import {SGraphItem, SGraphScene, SGraphView, SObjectItem, STextItem, SImageItem, SAnchorItem} from "@persagy-web/graph/lib";
-    import { SItemStatus }from "@persagy-web/big/lib";
-    import {SColor, SPainter, SRect, SSize} from "@persagy-web/draw/lib";
-    import {SMouseEvent} from "@persagy-web/base/lib";
+    import {
+        SAnchorItem,
+        SGraphItem,
+        SGraphScene,
+        SGraphView,
+        SImageItem,
+        SObjectItem,
+        STextItem
+    } from "@persagy-web/graph/lib";
+    import { SItemStatus } from "@persagy-web/big/lib";
+    import { SColor, SPainter, SRect, SSize } from "@persagy-web/draw/lib";
+    import { SMouseEvent } from "@persagy-web/base/lib";
 
     /**
      * 图例item  icon
@@ -23,6 +31,7 @@
         get status(): SItemStatus {
             return this._status;
         }
+
         set status(v: SItemStatus) {
             this._status = v;
             this.update();
@@ -33,6 +42,7 @@
         get showText(): boolean {
             return this._showText;
         }
+
         set showText(v: boolean) {
             if (v === this._showText) {
                 return
@@ -43,10 +53,11 @@
 
         /** 是否显示锚点  */
         _showAnchor: boolean = false;
-        get showAnchor():boolean{
+        get showAnchor(): boolean {
             return this._showAnchor;
         }
-        set showAnchor(v:boolean){
+
+        set showAnchor(v: boolean) {
             this._showAnchor = v;
             this.anchorList.forEach(t => {
                 t.visible = v;
@@ -87,7 +98,10 @@
             this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
             this.img.width = 32;
             this.img.height = 32;
-            let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+            let anchorPoint = [{x: 0, y: this.img.height / 2}, {x: 0, y: -this.img.height / 2}, {
+                x: -this.img.width / 2,
+                y: 0
+            }, {x: this.img.width / 2, y: 0}];
             this.anchorList = anchorPoint.map(t => {
                 let item = new SAnchorItem(this);
                 item.moveTo(t.x, t.y);
@@ -157,9 +171,9 @@
          * @return  SRect   所有子对象的并集
          * */
         boundingRect(): SRect {
-            let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.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))
+                rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0))
             }
             return rect;
         } // Function boundingRect()
@@ -187,7 +201,7 @@
             return {
                 scene: null,
                 view: null,
-                input:'',
+                input: '',
             };
         },
         mounted() {
@@ -201,8 +215,8 @@
             // @ts-ignore
             this.init()
         },
-        methods:{
-            init(){
+        methods: {
+            init() {
                 // @ts-ignore
                 this.item = new SImgTextItem(null);
                 // @ts-ignore
@@ -212,11 +226,11 @@
                 this.scene.addItem(this.item);
                 // this.view.fitSceneToView();
             },
-            changemaodian(){
+            changemaodian() {
                 // @ts-ignore
                 this.item.showAnchor = !this.item.showAnchor;
             },
-            changetext(){
+            changetext() {
                 // @ts-ignore
                 this.item.showText = !this.item.showText;
             }
@@ -225,10 +239,11 @@
 </script>
 
 <style scoped>
-    canvas{
-        border:1px solid #ccc;
+    canvas {
+        border: 1px solid #ccc;
     }
-    canvas:focus{
+
+    canvas:focus {
         outline: none;
     }
 </style>

+ 120 - 120
docs/.vuepress/components/scene/items/TextItem.vue

@@ -1,137 +1,137 @@
 <template>
-  <div>
-    <el-row>
-      <el-input
-        v-model="text"
-        @change="handleChangeText"
-        type="textarea"
-        :autosize="{ minRows: 1, maxRows: 1}"
-        placeholder="请输入内容"
-        style="width:200px;"
-      ></el-input>
-      <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
-      <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
-      <el-button @click="undo">Undo</el-button>
-      <el-button @click="redo">Redo</el-button>
-      <el-button @click="reset">Reset</el-button>
-    </el-row>
-    <canvas id="TextItem1" width="740" height="400" tabindex="0" />
-  </div>
+    <div>
+        <el-row>
+            <el-input
+                    v-model="text"
+                    @change="handleChangeText"
+                    type="textarea"
+                    :autosize="{ minRows: 1, maxRows: 1}"
+                    placeholder="请输入内容"
+                    style="width:200px;"
+            ></el-input>
+            <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
+            <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
+            <el-button @click="undo">Undo</el-button>
+            <el-button @click="redo">Redo</el-button>
+            <el-button @click="reset">Reset</el-button>
+        </el-row>
+        <canvas id="TextItem1" width="740" height="400" tabindex="0"/>
+    </div>
 </template>
 
 <script>
-import { SUndoStack } from "@persagy-web/base/lib";
-import { SFont } from "@persagy-web/draw/lib";
-import {
-  SGraphScene,
-  SGraphView,
-  SGraphPropertyCommand,
-  SGraphMoveCommand,
-  STextItem
-} from "@persagy-web/graph/lib";
+    import { SUndoStack } from "@persagy-web/base/lib";
+    import { SFont } from "@persagy-web/draw/lib";
+    import {
+        SGraphMoveCommand,
+        SGraphPropertyCommand,
+        SGraphScene,
+        SGraphView,
+        STextItem
+    } from "@persagy-web/graph/lib";
 
-class SScene extends SGraphScene {
-  undoStack = new SUndoStack();
-  textItem = new STextItem(null);
+    class SScene extends SGraphScene {
+        undoStack = new SUndoStack();
+        textItem = new STextItem(null);
 
-  constructor() {
-    super();
-    this.textItem.moveable = true;
-    this.textItem.x = 100;
-    this.textItem.y = 100;
-      this.textItem.selectable = true
+        constructor() {
+            super();
+            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));
-  }
+            this.addItem(this.textItem);
+            this.textItem.connect("onMove", this, this.onItemMove.bind(this));
+        }
 
-  updateText(str) {
-    if (this.textItem.text !== str) {
-      let old = this.textItem.text;
-      this.textItem.text = str;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "text", old, str)
-      );
-    }
-  }
+        updateText(str) {
+            if (this.textItem.text !== str) {
+                let old = this.textItem.text;
+                this.textItem.text = str;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "text", old, str)
+                );
+            }
+        }
 
-  updateColor(color) {
-    if (this.textItem.color !== color) {
-      let old = this.textItem.color;
-      this.textItem.color = color;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "color", old, color)
-      );
-    }
-  }
+        updateColor(color) {
+            if (this.textItem.color !== color) {
+                let old = this.textItem.color;
+                this.textItem.color = color;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "color", old, color)
+                );
+            }
+        }
 
-  updateSize(size) {
-    if (this.textItem.font.size !== size) {
-      let old = new SFont(this.textItem.font);
-      let font = new SFont(this.textItem.font);
-      font.size = size;
-      this.textItem.font = font;
-      this.undoStack.push(
-        new SGraphPropertyCommand(this, this.textItem, "font", old, font)
-      );
-    }
-  }
+        updateSize(size) {
+            if (this.textItem.font.size !== size) {
+                let old = new SFont(this.textItem.font);
+                let font = new SFont(this.textItem.font);
+                font.size = size;
+                this.textItem.font = font;
+                this.undoStack.push(
+                    new SGraphPropertyCommand(this, this.textItem, "font", old, font)
+                );
+            }
+        }
 
-  onItemMove(item, ...arg) {
-    this.undoStack.push(
-      new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
-    );
-  }
-}
+        onItemMove(item, ...arg) {
+            this.undoStack.push(
+                new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
+            );
+        }
+    }
 
-class TestView extends SGraphView {
-  constructor() {
-    super("TextItem1");
-  }
-}
+    class TestView extends SGraphView {
+        constructor() {
+            super("TextItem1");
+        }
+    }
 
-export default {
-  data() {
-    return {
-      scene: new SScene(),
-      text: "测试文本",
-      size: 20,
-      color: "#333333"
+    export default {
+        data() {
+            return {
+                scene: new SScene(),
+                text: "测试文本",
+                size: 20,
+                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) {
+                this.scene.updateText(text);
+            },
+            handleChangeColor(color) {
+                this.scene.updateColor(color);
+            },
+            handleChangeSize(size) {
+                this.scene.updateSize(size);
+            },
+            undo() {
+                this.scene.undoStack.undo();
+            },
+            redo() {
+                this.scene.undoStack.redo();
+            },
+            reset() {
+                this.text = "测试文本";
+                this.size = 20;
+                this.color = "#333333";
+                this.scene.updateText(this.text);
+                this.scene.updateColor(this.color);
+                this.scene.updateSize(this.size);
+            }
+        }
     };
-  },
-  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) {
-      this.scene.updateText(text);
-    },
-    handleChangeColor(color) {
-      this.scene.updateColor(color);
-    },
-    handleChangeSize(size) {
-      this.scene.updateSize(size);
-    },
-    undo() {
-      this.scene.undoStack.undo();
-    },
-    redo() {
-      this.scene.undoStack.redo();
-    },
-    reset() {
-      this.text = "测试文本";
-      this.size = 20;
-      this.color = "#333333";
-      this.scene.updateText(this.text);
-      this.scene.updateColor(this.color);
-      this.scene.updateSize(this.size);
-    }
-  }
-};
 </script>
 
 <style scoped>

+ 9 - 8
docs/.vuepress/components/scene/items/area.vue

@@ -1,12 +1,12 @@
 <template>
     <div style="margin-top: 10px;">
-        <canvas :id="id" width="740" height="400" />
+        <canvas :id="id" width="740" height="400"/>
     </div>
 </template>
 
 <script lang="ts">
-    import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { SGraphAreaGroupItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
 
     @Component
@@ -16,15 +16,15 @@
         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: 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}]
+                    [{x: 1000, y: 1000}, {x: 1200, y: 1000}, {x: 1200, y: 1200}, {x: 1000, y: 1200}]
                 ]
             ],
             style: {
-                "default":{
+                "default": {
                     "stroke": "#cccccc",
                     "fill": "SLinearGradient{0,0;0,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                     "lineWidth": 2,
@@ -48,7 +48,8 @@
         mounted() {
             this.init();
         };
-        init(){
+
+        init() {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
             const item = new SGraphAreaGroupItem(null, this.areaData);

+ 13 - 10
docs/.vuepress/components/scene/items/polygon.vue

@@ -1,19 +1,19 @@
 <template>
     <div style="margin-top: 10px;">
         <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
-        <canvas :id="id" width="740" height="400" />
+        <canvas :id="id" width="740" height="400"/>
     </div>
 </template>
 
 <script lang="ts">
 
-    import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";
-    import {SSize} from "@persagy-web/draw/lib";
+    import { SGraphPolyGroupItem, SGraphScene, 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";
 
-    class Expolygon extends SGraphPolyGroupItem{
-        resize(old:SSize,newS:SSize):void{
+    class Expolygon extends SGraphPolyGroupItem {
+        resize(old: SSize, newS: SSize): void {
             const xs = newS.width / old.width;
             const ys = newS.height / old.height;
             // @ts-ignore
@@ -37,11 +37,11 @@
         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}]
+                [{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":{
+                "default": {
                     "stroke": "#cccccc",
                     "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                     "lineWidth": 2,
@@ -61,10 +61,12 @@
                 },
             }
         };
+
         mounted() {
             this.init();
         };
-        init(){
+
+        init() {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
 
@@ -76,7 +78,8 @@
             this.view.fitSceneToView();
             this.view.scalable = false;
         };
-        changeEnable(){
+
+        changeEnable() {
             if (this.item) {
                 this.item.enabled = !this.item.enabled;
             }

+ 14 - 9
docs/.vuepress/components/scene/items/rect.vue

@@ -1,14 +1,15 @@
 <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" />
+        圆角半径 :
+        <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 lang="ts">
 
-    import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
     import { Component, Vue } from "vue-property-decorator";
 
     @Component
@@ -25,7 +26,7 @@
             height: 500,
             radius: 0,
             style: {
-                "default":{
+                "default": {
                     "stroke": "#cccccc",
                     "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                     "lineWidth": 2,
@@ -52,7 +53,7 @@
             height: 500,
             radius: 0,
             style: {
-                "default":{
+                "default": {
                     "stroke": "#cccccc",
                     "fill": "#ffccee",
                     "lineWidth": 2,
@@ -72,9 +73,11 @@
                 },
             }
         };
-        private mounted (): void {
+
+        private mounted(): void {
             this.init();
         }
+
         init(): void {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();
@@ -92,17 +95,19 @@
             this.view.fitSceneToView();
             this.view.scalable = false;
         }
-        changeEnable(): void{
+
+        changeEnable(): void {
             if (this.item) {
                 this.item.enabled = !this.item.enabled;
             }
         }
+
         // 修改圆角半径
         changeY(val: number): void {
-            if (this.item){
+            if (this.item) {
                 this.item.radius = val;
             }
-            if(this.item2) {
+            if (this.item2) {
                 this.item2.radius = val;
             }
         }

+ 4 - 2
docs/.vuepress/components/scene/items/svg.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script lang="ts">
-    import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
+    import { SGraphScene, SGraphSvgItem, SGraphView } from "@persagy-web/graph/lib";
     import { Component, Vue } from "vue-property-decorator";
     import { v1 as uuid } from "uuid";
 
     @Component
-    export default class SvgCanvas extends Vue{
+    export default class SvgCanvas extends Vue {
         id: string = uuid();
         view: SGraphView | undefined;
         svgData = {
@@ -22,9 +22,11 @@
             width: 200,
             height: 200
         };
+
         private mounted(): void {
             this.init()
         };
+
         init(): void {
             this.view = new SGraphView(this.id);
             const scene = new SGraphScene();