Browse Source

feat:添加约定规范
docs:添加注释

shaun-sheep 4 years ago
parent
commit
db88184cc6
46 changed files with 2122 additions and 1717 deletions
  1. 24 19
      docs/.vuepress/components/big/MapDemo.vue
  2. 25 22
      docs/.vuepress/components/big/items/column.vue
  3. 19 16
      docs/.vuepress/components/big/items/door.vue
  4. 28 23
      docs/.vuepress/components/big/items/space.vue
  5. 22 17
      docs/.vuepress/components/big/items/window.vue
  6. 5 5
      docs/.vuepress/components/edit/items/editline/editline1.vue
  7. 52 46
      docs/.vuepress/components/edit/items/edittext/edittext.vue
  8. 129 121
      docs/.vuepress/components/engine/arrow.vue
  9. 52 44
      docs/.vuepress/components/engine/clip.vue
  10. 147 144
      docs/.vuepress/components/engine/composite.vue
  11. 364 356
      docs/.vuepress/components/engine/demo/elsfk.vue
  12. 6 6
      docs/.vuepress/components/engine/demo/elsfkDifficult.vue
  13. 8 0
      docs/.vuepress/components/engine/gradient/GradRect.ts
  14. 41 33
      docs/.vuepress/components/engine/gradient/gradient.vue
  15. 63 55
      docs/.vuepress/components/engine/selectContainer.vue
  16. 65 51
      docs/.vuepress/components/engine/shape/Circle1.vue
  17. 62 54
      docs/.vuepress/components/engine/shape/DrawLine1.vue
  18. 47 38
      docs/.vuepress/components/engine/shape/DrawLine2.vue
  19. 31 16
      docs/.vuepress/components/engine/shape/DrawPolyline1.vue
  20. 60 46
      docs/.vuepress/components/engine/shape/DrawRect1.vue
  21. 34 23
      docs/.vuepress/components/engine/shape/path.vue
  22. 79 74
      docs/.vuepress/components/engine/style/shadow.vue
  23. 23 23
      docs/.vuepress/components/format/style.vue
  24. 101 80
      docs/.vuepress/components/scene/Align.vue
  25. 83 64
      docs/.vuepress/components/scene/Undo1.vue
  26. 62 51
      docs/.vuepress/components/scene/items/ClockItem.vue
  27. 11 7
      docs/.vuepress/components/scene/items/ImageItem.vue
  28. 8 4
      docs/.vuepress/components/scene/items/PolylineItem.vue
  29. 19 14
      docs/.vuepress/components/scene/items/SEditLine.vue
  30. 42 34
      docs/.vuepress/components/scene/items/SEditPolygon.vue
  31. 52 51
      docs/.vuepress/components/scene/items/SImgTextItem.vue
  32. 43 38
      docs/.vuepress/components/scene/items/TextItem.vue
  33. 9 5
      docs/.vuepress/components/scene/items/area.vue
  34. 10 6
      docs/.vuepress/components/scene/items/polygon.vue
  35. 28 21
      docs/.vuepress/components/scene/items/rect.vue
  36. 40 32
      docs/.vuepress/components/scene/items/svg.vue
  37. 4 3
      docs/.vuepress/config.js
  38. 8 8
      docs/guides/big/factory/src/SItemFactory.ts
  39. 12 12
      docs/guides/edit/items/src/EditLineItem.ts
  40. 3 11
      docs/guides/edit/items/src/EditPolygonItem.ts
  41. 17 17
      docs/guides/edit/items/src/EditPolylineItem.ts
  42. 1 1
      docs/guides/edit/items/src/EditText.ts
  43. 5 5
      docs/guides/edit/undo/src/SGraphAddCommand.ts
  44. 144 0
      docs/guides/standard/appoint.md
  45. 34 13
      docs/guides/standard/git.md
  46. 0 8
      docs/guides/standard/typescript.md

+ 24 - 19
docs/.vuepress/components/big/MapDemo.vue

@@ -7,27 +7,32 @@
 </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 {
-        view: SGraphView | undefined;
-        scene: SGraphScene | undefined;
-        map1 = require('../../../public/assets/map/1.json');
-        map2 = require('../../../public/assets/map/2.json');
+@Component
+export default class MapDemoCanvas extends Vue {
+    view: SGraphView | undefined;
+    scene: SGraphScene | undefined;
+    map1 = require('../../../public/assets/map/1.json');
+    map2 = require('../../../public/assets/map/2.json');
 
-        mounted(): void {
-            this.view = new SGraphView("mapDemo");
-            this.init()
-        };
-        init(){
-            this.showMap('1');
-        };
-        showMap(id:string){
-            const scene = new SGraphScene();
-            this.view!!.scene = scene;
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.view = new SGraphView("mapDemo");
+        this.init()
+    };
+
+    init() {
+        this.showMap('1');
+    };
+
+    showMap(id: string) {
+        const scene = new SGraphScene();
+        this.view!!.scene = scene;
             let parser = new SFloorParser();
             // @ts-ignore
             parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));

+ 25 - 22
docs/.vuepress/components/big/items/column.vue

@@ -5,31 +5,34 @@
 </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 { SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SColumnItem } from "@persagy-web/big/lib/items/floor/SColumnItem";
+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}]];
-        // 图中靠下位置的,绘制多个图形,会覆盖
-        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}]
-        ];
+@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}]];
+    // 图中靠下位置的,绘制多个图形,会覆盖
+    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}]
+    ];
 
-        mounted(): void {
-            this.init();
-        };
+    /**
+     * 页面挂载
+     */
+    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});
+    init(): void {
+        this.view = new SGraphView('wall');
+        const scene = new SGraphScene();
+        this.view.scene = scene;
+        // 只模拟了轮廓数据
+        const item = new SColumnItem(null, {OutLine: this.outline1});
             scene.addItem(item);
             // 只模拟了轮廓数据
             const item2 = new SColumnItem(null, {OutLine: this.outline2});

+ 19 - 16
docs/.vuepress/components/big/items/door.vue

@@ -5,25 +5,28 @@
 </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 { SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SDoorItem } from "@persagy-web/big/lib/items/floor/SDoorItem";
+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}]];
+@Component
+export default class WallCanvas extends Vue {
+    view: SGraphView | undefined;
+    outline1 = [[{X: 12000, Y: 10000}, {X: 12000, Y: 30000}]];
 
-        mounted(): void {
-            this.init();
-        };
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init();
+    };
 
-        init(): void {
-            this.view = new SGraphView('wall');
-            const scene = new SGraphScene();
-            this.view.scene = scene;
-            // 只模拟了轮廓数据
-            // @ts-ignore
+    init(): void {
+        this.view = new SGraphView('wall');
+        const scene = new SGraphScene();
+        this.view.scene = scene;
+        // 只模拟了轮廓数据
+        // @ts-ignore
             const item = new SDoorItem(null,
                 // @ts-ignore
                 {

+ 28 - 23
docs/.vuepress/components/big/items/space.vue

@@ -5,30 +5,35 @@
 </template>
 
 <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 { SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SSpaceItem } from "@persagy-web/big/lib/items/floor/SSpaceItem";
+import { Component, Vue } from "vue-property-decorator";
 
-    @Component
-    export default class SpaceCanvas extends Vue {
-        view: SGraphView | undefined;
-        // 图中靠上位置的黑色矩形轮廓
-        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}]
-        ];
-        mounted(): void {
-            this.init();
-        };
-        init(): void {
-            this.view = new SGraphView('wall');
-            const scene = new SGraphScene();
-            this.view.scene = scene;
-            // 只模拟了轮廓数据
-            // @ts-ignore
-            const item = new SSpaceItem(null,{OutLine:this.outline1, Name:'测试',Location:{Points:[{X:65,Y:20}]}});
+@Component
+export default class SpaceCanvas extends Vue {
+    view: SGraphView | undefined;
+    // 图中靠上位置的黑色矩形轮廓
+    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}]
+    ];
+
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init();
+    };
+
+    init(): void {
+        this.view = new SGraphView('wall');
+        const scene = new SGraphScene();
+        this.view.scene = scene;
+        // 只模拟了轮廓数据
+        // @ts-ignore
+        const item = new SSpaceItem(null, {OutLine: this.outline1, Name: '测试', Location: {Points: [{X: 65, Y: 20}]}});
             scene.addItem(item);
             // 只模拟了轮廓数据
             // @ts-ignore

+ 22 - 17
docs/.vuepress/components/big/items/window.vue

@@ -5,24 +5,29 @@
 </template>
 
 <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 { SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SWindowItem } from "@persagy-web/big/lib/items/floor/SWindowItem";
+import { Component, Vue } from "vue-property-decorator";
 
-    @Component
-    export default class WindowCanvas extends Vue {
-        view: SGraphView | undefined;
-        outline1 = [[{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}]];
-        mounted(): void {
-            this.init();
-        }
-        init(): void{
-            this.view = new SGraphView('wall');
-            const scene = new SGraphScene();
-            this.view.scene = scene;
-            // 只模拟了轮廓数据
-            // @ts-ignore
-            const item = new SWindowItem(null,{OutLine:this.outline1});
+@Component
+export default class WindowCanvas extends Vue {
+    view: SGraphView | undefined;
+    outline1 = [[{X: 120, Y: -30}, {X: 120, Y: -50}, {X: 10, Y: -50}, {X: 10, Y: -30}]];
+
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init();
+    }
+
+    init(): void {
+        this.view = new SGraphView('wall');
+        const scene = new SGraphScene();
+        this.view.scene = scene;
+        // 只模拟了轮廓数据
+        // @ts-ignore
+        const item = new SWindowItem(null, {OutLine: this.outline1});
             scene.addItem(item);
             this.view.fitSceneToView();
             this.view.scalable = false;

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

@@ -68,11 +68,11 @@
 </template>
 
 <script>
-    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/";
+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() {

+ 52 - 46
docs/.vuepress/components/edit/items/edittext/edittext.vue

@@ -40,55 +40,58 @@
 </template>
 
 <script>
-    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";
+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";
 
-    class SScene extends SGraphScene {
-        undoStack = new SUndoStack();
-        textItem = new EditText(null);
+class SScene extends SGraphScene {
+    undoStack = new SUndoStack();
+    textItem = new EditText(null);
 
-        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));
-        }
+    /**
+     * 构造函数
+     */
+    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));
+    }
 
-        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)
+            );
             }
         }
 
@@ -99,11 +102,14 @@
         }
     }
 
-    class TestView extends SGraphView {
-        constructor() {
-            super("edit_polygon");
-        }
+class TestView extends SGraphView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("edit_polygon");
     }
+}
 
     export default {
         name: "edittext",

+ 129 - 121
docs/.vuepress/components/engine/arrow.vue

@@ -21,140 +21,148 @@
 </template>
 
 <script lang="ts">
-    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";
+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 {
-        /** 起始点样式 */
-        _begin = SArrowStyleType.Basic;
-        get begin(): SArrowStyleType {
-            return this._begin;
-        }
+/**
+ * 绘制带有末端样式的线段
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class Polyline extends SGraphItem {
+    /** 起始点样式 */
+    _begin = SArrowStyleType.Basic;
+    get begin(): SArrowStyleType {
+        return this._begin;
+    }
 
-        set begin(v: SArrowStyleType) {
-            this._begin = v;
-            this.update();
-        }
+    set begin(v: SArrowStyleType) {
+        this._begin = v;
+        this.update();
+    }
 
-        /** 结束点样式 */
-        _end = SArrowStyleType.Basic;
-        get end(): SArrowStyleType {
-            return this._end;
-        }
+    /** 结束点样式 */
+    _end = SArrowStyleType.Basic;
+    get end(): SArrowStyleType {
+        return this._end;
+    }
 
-        set end(v: SArrowStyleType) {
-            this._end = v;
-            this.update();
-        }
+    set end(v: SArrowStyleType) {
+        this._end = v;
+        this.update();
+    }
 
-        pointList: SPoint[] = [
-            new SPoint(0, 0),
-            new SPoint(1000, 1000),
-            new SPoint(1200, 1800),
-            new SPoint(1800, 1800),
-            new SPoint(2000, 100),
-            // new SPoint(0, 0)
-        ];
+    pointList: SPoint[] = [
+        new SPoint(0, 0),
+        new SPoint(1000, 1000),
+        new SPoint(1200, 1800),
+        new SPoint(1800, 1800),
+        new SPoint(2000, 100),
+        // new SPoint(0, 0)
+    ];
 
-        boundingRect(): SRect {
-            return new SRect(0, 0, 2000, 1800);
-        }
+    boundingRect(): SRect {
+        return new SRect(0, 0, 2000, 1800);
+    }
 
-        /**
-         * 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)
-            }
+    /**
+     * 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)
         }
     }
+}
 
-    @Component
-    export default class ShadowCanvas extends Vue {
-        id: string = uuid();
-        options = [
-            {
-                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'
-            }
-        ];
-        view: SGraphView | undefined;
-        item: Polyline | undefined;
-        tableData = [
-            {
-                val: 'None',
-                desc: '无样式'
-            }, {
-                val: 'Basic',
-                desc: '基本箭头'
-            },
-            {
-                val: 'Triangle',
-                desc: '三角形箭头'
-            },
-            {
-                val: 'Diamond',
-                desc: '菱形箭头'
-            },
-            {
-                val: 'Square',
-                desc: '方形箭头'
-            },
-            {
-                val: 'Circle',
-                desc: '圆形箭头'
-            },
-        ];
-        begin: SArrowStyleType = SArrowStyleType.Basic;
-        end: SArrowStyleType = SArrowStyleType.Basic;
+@Component
+export default class ShadowCanvas extends Vue {
+    id: string = uuid();
+    options = [
+        {
+            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'
+        }
+    ];
+    view: SGraphView | undefined;
+    item: Polyline | undefined;
+    tableData = [
+        {
+            val: 'None',
+            desc: '无样式'
+        }, {
+            val: 'Basic',
+            desc: '基本箭头'
+        },
+        {
+            val: 'Triangle',
+            desc: '三角形箭头'
+        },
+        {
+            val: 'Diamond',
+            desc: '菱形箭头'
+        },
+        {
+            val: 'Square',
+            desc: '方形箭头'
+        },
+        {
+            val: 'Circle',
+            desc: '圆形箭头'
+        },
+    ];
+    begin: SArrowStyleType = SArrowStyleType.Basic;
+    end: SArrowStyleType = SArrowStyleType.Basic;
 
-        mounted(): void {
-            this.init()
-        };
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init()
+    };
 
-        init() {
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            this.item = new Polyline(null);
-            scene.addItem(this.item);
-            this.view.scene = scene;
-            this.view.fitSceneToView();
-            this.view.scalable = false;
-        };
+    init() {
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        this.item = new Polyline(null);
+        scene.addItem(this.item);
+        this.view.scene = scene;
+        this.view.fitSceneToView();
+        this.view.scalable = false;
+    };
 
-        changeStart(val: SArrowStyleType): void {
-            this.item!!.begin = val
-        };
+    changeStart(val: SArrowStyleType): void {
+        this.item!!.begin = val
+    };
 
-        changeEnd(val: SArrowStyleType): void {
-            this.item!!.end = val
-        }
+    changeEnd(val: SArrowStyleType): void {
+        this.item!!.end = val
     }
+}
 </script>

+ 52 - 44
docs/.vuepress/components/engine/clip.vue

@@ -5,51 +5,56 @@
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
-    import { SCanvasView, SColor, SPainter, SPath } from "@persagy-web/draw/lib";
-
-    class ClipView extends SCanvasView {
-        img: CanvasImageSource;
-        arcX = 100;
-        arcY = 100;
-        stepX = 6;
-        stepY = 8;
-        timer: any;
-
-        _url: string = '';
-        set url(v: string) {
-            if (this._url == v) {
-                return;
-            }
-            this._url = v;
-            // @ts-ignore
-            this.img.src = v;
-        }
-
-        get url(): string {
-            return this._url;
-        }
-
-        isLoadOver: boolean = false;
-
-        /**
-         * 构造函数
-         * @param id
-         */
-        constructor(id: string) {
-            super(id);
-            this.img = new Image();
-            this.img.onload = (e) => {
-                this.isLoadOver = true;
-                this.update();
-            };
-            this.img.onerror = (e) => {
-                this.isLoadOver = false;
-                this.update();
-                console.log("加载图片错误!", e);
-            };
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+import { SCanvasView, SColor, SPainter, SPath } from "@persagy-web/draw/lib";
+
+/**
+ * 裁剪
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class ClipView extends SCanvasView {
+    img: CanvasImageSource;
+    arcX = 100;
+    arcY = 100;
+    stepX = 6;
+    stepY = 8;
+    timer: any;
+
+    _url: string = '';
+    set url(v: string) {
+        if (this._url == v) {
+            return;
         }
+        this._url = v;
+        // @ts-ignore
+        this.img.src = v;
+    } // Set url
+
+    get url(): string {
+        return this._url;
+    } // Get url
+
+    isLoadOver: boolean = false;
+
+    /**
+     * 构造函数
+     * @param id
+     */
+    constructor(id: string) {
+        super(id);
+        this.img = new Image();
+        this.img.onload = (e) => {
+            this.isLoadOver = true;
+            this.update();
+        };
+        this.img.onerror = (e) => {
+            this.isLoadOver = false;
+            this.update();
+            console.log("加载图片错误!", e);
+        };
+    }
 
         /**
          * Item 绘制操作
@@ -111,6 +116,9 @@
         view: ClipView | undefined;
         img = require('../../public/assets/img/2.jpg');
 
+        /**
+         * 页面挂载
+         */
         mounted(): void {
             this.init();
         };

+ 147 - 144
docs/.vuepress/components/engine/composite.vue

@@ -16,161 +16,164 @@
 </template>
 
 <script lang="ts">
-    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";
+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 {
-        /** 融合方式 默认。在目标图像上显示源图像。 */
-        _composite = SCompositeType.SourceOver;
-        get composite(): SCompositeType {
-            return this._composite;
-        }
+class Circle extends SGraphItem {
+    /** 融合方式 默认。在目标图像上显示源图像。 */
+    _composite = SCompositeType.SourceOver;
+    get composite(): SCompositeType {
+        return this._composite;
+    }
 
-        set composite(v: SCompositeType) {
-            this._composite = v;
-            this.update();
-        }
+    set composite(v: SCompositeType) {
+        this._composite = v;
+        this.update();
+    }
 
-        /**
-         * 构造函数
-         *
-         * @param parent    Item 图像引擎
-         * @param com       融合方式
-         */
-        constructor(parent: SGraphItem | null, com: SCompositeType) {
-            super(parent);
-            this.composite = com ? SCompositeType.SourceOver : com;
-        }
+    /**
+     * 构造函数
+     *
+     * @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);
-        }
+    /**
+     * 矩形数据类型绘制
+     */
+    boundingRect(): SRect {
+        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.composite = this.composite;
-            painter.brush.color = SColor.Red;
-            //绘制圆形
-            painter.drawCircle(0, 0, 500);
-        }
+    /**
+     * Item 绘制操作
+     *
+     * @param painter 绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        painter.brush.color = SColor.Blue;
+        painter.pen.color = SColor.Transparent;
+        painter.drawRect(0, 0, 1000, 1000);
+        //融合属性
+        painter.composite = this.composite;
+        painter.brush.color = SColor.Red;
+        //绘制圆形
+        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'
-        }];
-        circle: Circle | undefined;
-        tableData = [{
-            val: 'source-over',
-            desc: '默认。在目标图像上显示源图像。'
-        }, {
-            val: 'source-atop',
-            desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
+@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'
+    }];
+    circle: Circle | undefined;
+    tableData = [{
+        val: 'source-over',
+        desc: '默认。在目标图像上显示源图像。'
+    }, {
+        val: 'source-atop',
+        desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
+    },
+        {
+            val: 'source-in',
+            desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
         },
-            {
-                val: 'source-in',
-                desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的。'
-            },
-            {
-                val: 'source-out',
-                desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
-            },
-            {
-                val: 'destination-over',
-                desc: '在源图像上显示目标图像。'
-            },
-            {
-                val: 'destination-atop',
-                desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
-            },
-            {
-                val: 'destination-in',
-                desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
-            },
-            {
-                val: 'destination-out',
-                desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
-            },
-            {
-                val: 'lighter',
-                desc: '显示源图像 + 目标图像。'
-            },
-            {
-                val: 'copy',
-                desc: '显示源图像。忽略目标图像。'
-            },
-            {
-                val: 'xor',
-                desc: '使用异或操作对源图像与目标图像进行组合。'
-            }
-        ];
+        {
+            val: 'source-out',
+            desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的。'
+        },
+        {
+            val: 'destination-over',
+            desc: '在源图像上显示目标图像。'
+        },
+        {
+            val: 'destination-atop',
+            desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
+        },
+        {
+            val: 'destination-in',
+            desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的。'
+        },
+        {
+            val: 'destination-out',
+            desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的。'
+        },
+        {
+            val: 'lighter',
+            desc: '显示源图像 + 目标图像。'
+        },
+        {
+            val: 'copy',
+            desc: '显示源图像。忽略目标图像。'
+        },
+        {
+            val: 'xor',
+            desc: '使用异或操作对源图像与目标图像进行组合。'
+        }
+    ];
 
-        mounted(): void {
-            this.init()
-        };
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init()
+    };
 
-        init(): void {
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            this.circle = new Circle(null, SCompositeType.SourceOut);
-            scene.addItem(this.circle);
-            this.view.scene = scene;
-            this.view.fitSceneToView();
-            this.view.scalable = false;
-        };
+    init(): void {
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        this.circle = new Circle(null, SCompositeType.SourceOut);
+        scene.addItem(this.circle);
+        this.view.scene = scene;
+        this.view.fitSceneToView();
+        this.view.scalable = false;
+    };
 
-        changeCom(val: SCompositeType): void {
-            if (this.circle) {
-                this.circle.composite = val;
-            }
+    changeCom(val: SCompositeType): void {
+        if (this.circle) {
+            this.circle.composite = val;
         }
     }
+}
 </script>

+ 364 - 356
docs/.vuepress/components/engine/demo/elsfk.vue

@@ -5,403 +5,411 @@
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
-    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
 
-    class TestView extends SCanvasView {
-        /** 背景表示数组 */
-        map: 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],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 1],
-                [0, 0, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 0, 0],
-                [1, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [1, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 1],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [1, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 1],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 0, 1, 0],
-                [0, 1, 1, 1],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [0, 1, 0, 0],
-                [0, 1, 1, 0],
-                [0, 1, 0, 0],
-            ],
-            [
-                [0, 0, 0, 0],
-                [1, 1, 1, 0],
-                [0, 1, 0, 0],
-                [0, 0, 0, 0],
-            ],
-            [
-                [0, 0, 1, 0],
-                [0, 1, 1, 0],
-                [0, 0, 1, 0],
-                [0, 0, 0, 0],
-            ]
-        ];
-        /** 方块初始位置x坐标 */
-        x = 5;
-        /** 方块初始位置y坐标 */
-        y = 0;
-        /** 记录上次刷新时间 */
-        t = Date.now();
+/**
+ * 俄罗斯方块视图
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView extends SCanvasView {
+    /** 背景表示数组 */
+    map: 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],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 1],
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 0, 0],
+            [1, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [1, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 1],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [1, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 1],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 0],
+            [0, 0, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 0, 1, 0],
+            [0, 1, 1, 1],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [0, 1, 0, 0],
+            [0, 1, 1, 0],
+            [0, 1, 0, 0],
+        ],
+        [
+            [0, 0, 0, 0],
+            [1, 1, 1, 0],
+            [0, 1, 0, 0],
+            [0, 0, 0, 0],
+        ],
+        [
+            [0, 0, 1, 0],
+            [0, 1, 1, 0],
+            [0, 0, 1, 0],
+            [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 id canvas DOM id
+     */
+    constructor(id: string) {
+        super(id);
+        this.initMap();
+    }
 
-        /**
-         * 键盘按下事件
-         * @param event 事件对象
-         */
-        onKeyDown(event: KeyboardEvent): void {
-            //按键判断
-            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") {
-                //检查下移后是否碰撞
-                if (!this.isPz(this.x, this.y + 1, this.dir)) {
-                    this.y++;
-                } else {
-                    this.fullMap();
-                    this.xc();
-                }
+    /**
+     * 键盘按下事件
+     * @param event 事件对象
+     */
+    onKeyDown(event: KeyboardEvent): void {
+        if (event.code == "KeyW") { // 按键 w
+            if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) { // 检查变形后是否碰撞
+                this.dir = (this.dir + 1) % 4;
+            }
+        } else if (event.code == "KeyA") {  // 按键 a
+            if (!this.isPz(this.x - 1, this.y, this.dir)) { // 检查左移后是否碰撞
+                this.x--;
+            }
+        } else if (event.code == "KeyD") { // 按键 d
+            if (!this.isPz(this.x + 1, this.y, this.dir)) { // 检查右移后是否碰撞
+                this.x++;
+            }
+        } else if (event.code == "KeyS") { // 按键 s
+            if (!this.isPz(this.x, this.y + 1, this.dir)) { // 检查下移后是否碰撞
+                this.y++;
+            } else {
+                this.fullMap();
+                this.xc();
             }
-
-            this.update();
         }
 
-        /**
-         * Item 绘制操作
-         *
-         * @param painter   绘制对象
-         */
-        onDraw(painter: SPainter): void {
-            //清除画布
-            painter.clearRect(0, 0, this.width, this.height);
-            //绘制操作相关命令
-            painter.pen.color = SColor.Transparent;
-            painter.brush.color = SColor.Red;
+        this.update();
+    }
 
-            this.drawMap(painter);
-            this.drawFk(painter);
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        //清除画布
+        painter.clearRect(0, 0, this.width, this.height);
+        //绘制操作相关命令
+        painter.pen.color = SColor.Transparent;
+        painter.brush.color = SColor.Red;
 
-            if (Date.now() - this.t > 500) {
-                if (!this.isPz(this.x, this.y + 1, this.dir)) {
-                    this.y++;
-                } else {
-                    this.fullMap();
-                    this.xc();
-                }
+        this.drawMap(painter);
+        this.drawFk(painter);
 
-                this.t = Date.now();
+        if (Date.now() - this.t > 500) {  // 下落速度,下移一格
+            if (!this.isPz(this.x, this.y + 1, this.dir)) {  // 下移是否碰撞
+                this.y++;
+            } else {
+                this.fullMap();
+                this.xc();
             }
-            this.update();
+
+            this.t = Date.now();
         }
+        this.update();
+    }
 
-        /**
-         *初始化背景
-         */
-        private initMap(): void {
-            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) {
-                        m1.push(2);
-                    } else {
-                        m1.push(0);
-                    }
+    /**
+     *初始化背景
+     */
+    private initMap(): void {
+        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(2);
+                } else {
+                    m1.push(0);
                 }
-                this.map.push(m1);
             }
+            this.map.push(m1);
         }
+    }
 
-        /**
-         * 绘制背景
-         *
-         * @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);
-                    }
+    /**
+     * 绘制背景
+     *
+     * @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);
-                    }
+                if (this.map[row][col] == 2) { //底加一行
+                    painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                 }
             }
         }
+    }
 
-        /**
-         * 绘制实体图形
-         *
-         * @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) {
-                        painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
-                    }
+    /**
+     * 绘制实体图形
+     *
+     * @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) {
+                    painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
                 }
             }
         }
+    }
 
-        /**
-         * 是否碰撞
-         *
-         * @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++) {
-                    if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
-                        return true;
-                    }
+    /**
+     * 是否碰撞
+     *
+     * @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++) {  // 绘制图形列数
+                // 判断是否重合,每种图形四个一组,四种变形的某种变形,不为零表示绘制(确定方块),坐标转换,背景图中绘制
+                if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
+                    return true;
                 }
             }
-            return false;
         }
+        return false;
+    }
 
-        /**
-         * 将方块合到背景中
-         */
-        private fullMap() {
-            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) {
-                        this.map[this.y + row][this.x + col] = 1;
-                    }
+    /**
+     * 将方块合到背景中
+     */
+    private fullMap() {
+        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) {
+                    this.map[this.y + row][this.x + col] = 1;
                 }
             }
-
-            this.x = 5;
-            this.y = 0;
-            this.fkType = Number((Math.random() * 6).toFixed());
-            this.dir = Number((Math.random() * 2).toFixed());
         }
 
-        /**
-         * 消除满行
-         */
-        private xc(): void {
-            for (let row = 0; row < 20; row++) {
-                let flag = true;
-                for (let col = 0; col < 14; col++) {
-                    if (this.map[row][col] == 0) {
-                        flag = false;
-                        break;
-                    }
-                }
+        this.x = 5;
+        this.y = 0;
+        this.fkType = Number((Math.random() * 6).toFixed());
+        this.dir = Number((Math.random() * 2).toFixed());
+    }
 
-                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--;
+    /**
+     * 消除满行
+     */
+    private xc(): void {
+        // 循环行数,不包含底部填充2行
+        for (let row = 0; row < 20; row++) {
+            // 消除标记,true 是
+            let flag = true;
+            // 若当前行有一个空格,则不消除
+            for (let col = 2; col < 12; col++) {
+                if (this.map[row][col] == 0) {  // 存在空格
+                    flag = false;
+                    break;
                 }
             }
-        }
 
-        /**
-         * 随机数组生成
-         *
-         * @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())
+            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 array
         }
     }
 
-    @Component
-    export default class ElsfkCanvas extends Vue {
-        id: string = uuid();
-
-        mounted(): void {
-            new TestView(this.id);
+    /**
+     * 随机数组生成
+     *
+     * @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 */
+    id: string = uuid();
+
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView(this.id);
     }
+}
 </script>

+ 6 - 6
docs/.vuepress/components/engine/demo/elsfkDifficult.vue

@@ -417,7 +417,7 @@ class TestView extends SCanvasView {
 
         this.initBox();
         if (this.checkKnocked(this.x, this.y, this.dir)) {  // 判断背景上的图形与初始化图形是否重合
-            //游戏结束
+            // 游戏结束
             this.gameOver = true;
         }
 
@@ -428,13 +428,13 @@ class TestView extends SCanvasView {
      * 消除满行
      */
     private remove(): void {
-        //消除行数
+        // 消除行数
         let removeCount = 0;
-        //循环行数,不包含底部填充2行
+        // 循环行数,不包含底部填充2行
         for (let row = 0; row < 20; row++) {
-            //消除标记,true 是
+            // 消除标记,true 是
             let flag = true;
-            //若当前行有一个空格,则不消除
+            // 若当前行有一个空格,则不消除
             for (let col = 2; col < 12; col++) {
                 if (this.map[row][col] == 0) {  // 存在空格
                     flag = false;
@@ -444,7 +444,7 @@ class TestView extends SCanvasView {
 
             if (flag) { // 标记删除
                 this.map.splice(row, 1);
-                //顶部加一行空行
+                // 顶部加一行空行
                 this.map.unshift(this.randomRow(10, 0));
                 removeCount++;
             }

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

@@ -1,6 +1,11 @@
 import { SGraphItem } from "@persagy-web/graph/lib";
 import { SColor, SLinearGradient, SPainter, SRadialGradient, SRect } from "@persagy-web/draw/lib";
 
+/**
+ * 渐变
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
 export class GradRect extends SGraphItem {
     minX = 0;
     minY = 0;
@@ -16,6 +21,9 @@ export class GradRect extends SGraphItem {
         this.gradient.addColorStop(1, new SColor('#3d4eff'));
     }
 
+    /**
+     * 矩形数据类型绘制
+     */
     boundingRect() {
         return new SRect(
             this.minX,

+ 41 - 33
docs/.vuepress/components/engine/gradient/gradient.vue

@@ -5,43 +5,51 @@
 </template>
 
 <script lang="ts">
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/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";
+import { SGraphScene, SGraphView } from "@persagy-web/graph/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";
 
-    @Component
-    export default class GradientCanvas extends Vue {
-        @Prop() private arg!: string;
-        id: string = uuid();
-        view: SGraphView | undefined;
+/**
+ * 渐变
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+@Component
+export default class GradientCanvas extends Vue {
+    @Prop() private arg!: string;
+    id: string = uuid();
+    view: SGraphView | undefined;
 
-        mounted(): void {
-            this.init();
-        };
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init();
+    };
 
-        init(): void {
-            const arr = this.arg.split(',');
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            let grad: SGradient;
-            try {
-                if (arr.length > 4) {
-                    // @ts-ignore
-                    grad = new SRadialGradient(...arr);
-                } else {
-                    // @ts-ignore
-                    grad = new SLinearGradient(...arr);
-                }
-            } catch (e) {
-                grad = new SLinearGradient(0, 0, 0, 1000);
+    init(): void {
+        const arr = this.arg.split(',');
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        let grad: SGradient;
+        try {
+            if (arr.length > 4) {
+                // @ts-ignore
+                grad = new SRadialGradient(...arr);
+            } else {
+                // @ts-ignore
+                grad = new SLinearGradient(...arr);
             }
-            const item = new GradRect(null, grad);
-            scene.addItem(item);
-            this.view.scene = scene;
-            this.view.fitSceneToView();
-            this.view.scalable = false;
+        } catch (e) {
+            grad = new SLinearGradient(0, 0, 0, 1000);
         }
+        const item = new GradRect(null, grad);
+        scene.addItem(item);
+        this.view.scene = scene;
+        this.view.fitSceneToView();
+        this.view.scalable = false;
     }
+}
 </script>

+ 63 - 55
docs/.vuepress/components/engine/selectContainer.vue

@@ -5,66 +5,74 @@
 </template>
 
 <script lang="ts">
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
-    import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRect } from "@persagy-web/draw/lib";
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+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 {
-            this.width = newSize.width;
-            this.height = newSize.height;
-        }
+/**
+ * 选择容器
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class ResizeRect extends SGraphRectItem {
+    resize(oldSize: SRect, newSize: SRect): void {
+        this.width = newSize.width;
+        this.height = newSize.height;
     }
+}
 
-    @Component
-    export default class SelectContainerCanvas extends Vue {
-        id: string = uuid();
-        view: SGraphView | undefined;
-        rectData = {
-            x: 0,
-            y: 0,
-            width: 500,
-            height: 500,
-            radius: 0,
-            style: {
-                "default": {
-                    "stroke": "#cccccc",
-                    "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "lineWidth": 2,
-                    "effect": {}
-                },
-                "selected": {
-                    "stroke": "#66ff66",
-                    "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                    "lineWidth": 3,
-                    "effect": {}
-                },
-                "disabled": {
-                    "stroke": "#333333",
-                    "fill": "#afafaf",
-                    "lineWidth": 1,
-                    "effect": {}
-                },
-            }
-        };
+@Component
+export default class SelectContainerCanvas extends Vue {
+    id: string = uuid();
+    view: SGraphView | undefined;
+    rectData = {
+        x: 0,
+        y: 0,
+        width: 500,
+        height: 500,
+        radius: 0,
+        style: {
+            "default": {
+                "stroke": "#cccccc",
+                "fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                "lineWidth": 2,
+                "effect": {}
+            },
+            "selected": {
+                "stroke": "#66ff66",
+                "fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+                "lineWidth": 3,
+                "effect": {}
+            },
+            "disabled": {
+                "stroke": "#333333",
+                "fill": "#afafaf",
+                "lineWidth": 1,
+                "effect": {}
+            },
+        }
+    };
 
-        mounted(): void {
-            this.init()
-        };
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.init()
+    };
 
-        init(): void {
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            const item = new ResizeRect(null, this.rectData);
-            scene.addItem(item);
-            item.selectable = true;
-            item.moveable = true;
-            this.view.scene = scene;
-            this.view.fitSceneToView();
-            this.view.scalable = false;
-        };
-    }
+    init(): void {
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        const item = new ResizeRect(null, this.rectData);
+        scene.addItem(item);
+        item.selectable = true;
+        item.moveable = true;
+        this.view.scene = scene;
+        this.view.fitSceneToView();
+        this.view.scalable = false;
+    };
+}
 </script>
 
 <style scoped>

+ 65 - 51
docs/.vuepress/components/engine/shape/Circle1.vue

@@ -3,70 +3,84 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SLineCapStyle, SPainter, SRect } from "@persagy-web/draw/lib";
-    import { Component, 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 {
-
-        constructor() {
-            super("circle")
-        }
-
-        onDraw(canvas: SPainter): void {
-            canvas.clearRect(new SRect(0, 0, 800, 400));
+/**
+ * 绘制圆形
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView extends SCanvasView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("circle")
+    }
 
-            canvas.pen.color = SColor.Blue;
-            canvas.brush.color = SColor.Red;
-            canvas.drawCircle(100, 100, 50);
+    /**
+     * Item 绘制操作
+     * @param painter   绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        canvas.clearRect(new SRect(0, 0, 800, 400));
 
-            canvas.pen.lineWidth = 10;
-            canvas.pen.lineDash = [10, 11];
-            canvas.pen.lineCapStyle = SLineCapStyle.Butt;
-            canvas.pen.color = new SColor("#585858");
-            canvas.brush.color = new SColor("#585858");
+        canvas.pen.color = SColor.Blue;
+        canvas.brush.color = SColor.Red;
+        canvas.drawCircle(100, 100, 50);
 
-            canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
-            canvas.drawCircle(230, 100, 40);
+        canvas.pen.lineWidth = 10;
+        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(315, 100, 40);
+        canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
+        canvas.drawCircle(230, 100, 40);
 
-            canvas.pen.color = SColor.Transparent;
-            canvas.brush.color = SColor.White;
-            canvas.drawCircle(230, 100, 15);
-            canvas.drawCircle(315, 100, 15);
+        canvas.pen.dashOffset = -new Date().getTime() / 50 % 60;
+        canvas.drawCircle(315, 100, 40);
 
-            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;
-                canvas.drawLine(
-                    450 + 50 * Math.cos(q1),
-                    100 + 50 * Math.sin(q1),
-                    450 + 50 * Math.cos(q2),
-                    100 + 50 * Math.sin(q2));
-            }
+        canvas.pen.color = SColor.Transparent;
+        canvas.brush.color = SColor.White;
+        canvas.drawCircle(230, 100, 15);
+        canvas.drawCircle(315, 100, 15);
 
-            canvas.pen.color = SColor.Blue;
-            for (let i = 0; i < 360; i += 10) {
-                let q = i * Math.PI / 180;
-                canvas.drawLine(
-                    650,
-                    100,
-                    650 + 50 * Math.cos(q),
-                    100 + 50 * Math.sin(q));
-            }
+        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;
+            canvas.drawLine(
+                450 + 50 * Math.cos(q1),
+                100 + 50 * Math.sin(q1),
+                450 + 50 * Math.cos(q2),
+                100 + 50 * Math.sin(q2));
+        }
 
-            this.update();
+        canvas.pen.color = SColor.Blue;
+        for (let i = 0; i < 360; i += 10) {
+            let q = i * Math.PI / 180;
+            canvas.drawLine(
+                650,
+                100,
+                650 + 50 * Math.cos(q),
+                100 + 50 * Math.sin(q));
         }
+
+        this.update();
     }
+}
 
-    @Component
-    export default class Circle1 extends Vue {
-        mounted(): void {
-            new TestView();
-        }
+@Component
+export default class Circle1 extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView();
     }
+}
 </script>
 
 <style scoped>

+ 62 - 54
docs/.vuepress/components/engine/shape/DrawLine1.vue

@@ -3,69 +3,77 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Vue } from "vue-property-decorator";
+import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+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);
+/**
+ * 绘制直线
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView extends SCanvasView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("drawLine1")
+    }
 
-            // 在此编写绘制操作相关命令
-            canvas.drawLine(0, 0, 100, 100);
-            canvas.pen.lineWidth = 1;
-            canvas.pen.color = SColor.Blue;
+    /**
+     * Item 绘制操作
+     * @param canvas 绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        // 清除画布
+        canvas.clearRect(0, 0, 800, 100);
 
-            for (let i = 0; i < 360; i += 10) {
-                let q = i * Math.PI / 180;
-                // 绘制一条线段
-                canvas.drawLine(
-                    200,
-                    50,
-                    200 + 50 * Math.cos(q),
-                    50 + 50 * Math.sin(q));
-            }
+        // 在此编写绘制操作相关命令
+        canvas.drawLine(0, 0, 100, 100);
+        canvas.pen.lineWidth = 1;
+        canvas.pen.color = SColor.Blue;
 
-            canvas.pen.color = SColor.Red;
+        for (let i = 0; i < 360; i += 10) {
+            let q = i * Math.PI / 180;
+            // 绘制一条线段
+            canvas.drawLine(
+                200,
+                50,
+                200 + 50 * Math.cos(q),
+                50 + 50 * Math.sin(q));
+        }
 
-            for (let i = 0; i < 360; i += 10) {
-                let q1 = i * Math.PI / 180;
-                let q2 = (i + 120) * Math.PI / 180;
-                canvas.drawLine(
-                    350 + 50 * Math.cos(q1),
-                    50 + 50 * Math.sin(q1),
-                    350 + 50 * Math.cos(q2),
-                    50 + 50 * Math.sin(q2));
-            }
+        canvas.pen.color = SColor.Red;
 
-            canvas.pen.color = new SColor('#03a9f4');
-            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.color = SColor.White;
-            canvas.drawLine(450, 50, 700, 50);
-            this.update();
+        for (let i = 0; i < 360; i += 10) {
+            let q1 = i * Math.PI / 180;
+            let q2 = (i + 120) * Math.PI / 180;
+            canvas.drawLine(
+                350 + 50 * Math.cos(q1),
+                50 + 50 * Math.sin(q1),
+                350 + 50 * Math.cos(q2),
+                50 + 50 * Math.sin(q2));
         }
+
+        canvas.pen.color = new SColor('#03a9f4');
+        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.color = SColor.White;
+        canvas.drawLine(450, 50, 700, 50);
+        this.update();
     }
+}
 
 
-    @Component
-    export default class DrawLine1 extends Vue {
-        mounted(): void {
-            new TestView();
-        }
+@Component
+export default class DrawLine1 extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView();
     }
+}
 </script>

+ 47 - 38
docs/.vuepress/components/engine/shape/DrawLine2.vue

@@ -3,49 +3,58 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Vue } from "vue-property-decorator";
-
-    class TestView extends SCanvasView {
+import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+import { Component, Vue } from "vue-property-decorator";
+
+class TestView extends SCanvasView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("drawLine2")
+    }
 
-        constructor() {
-            super("drawLine2")
+    /**
+     * Item 绘制操作
+     * @param painter   绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        // 在此编写绘制操作相关命令
+        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,
+                200 + 50 * Math.cos(q),
+                50 + 50 * Math.sin(q));
         }
 
-        onDraw(canvas: SPainter): void {
-            // 在此编写绘制操作相关命令
-            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,
-                    200 + 50 * Math.cos(q),
-                    50 + 50 * Math.sin(q));
-            }
+        canvas.pen.color = SColor.Red;
 
-            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;
-                canvas.drawLine(
-                    350 + 50 * Math.cos(q1),
-                    50 + 50 * Math.sin(q1),
-                    350 + 50 * Math.cos(q2),
-                    50 + 50 * Math.sin(q2));
-            }
+        for (let i = 0; i < 360; i += 10) {
+            let q1 = i * Math.PI / 180;
+            let q2 = (i + 120) * Math.PI / 180;
+            canvas.drawLine(
+                350 + 50 * Math.cos(q1),
+                50 + 50 * Math.sin(q1),
+                350 + 50 * Math.cos(q2),
+                50 + 50 * Math.sin(q2));
         }
     }
-
-    @Component
-    export default class DrawLine2 extends Vue {
-        mounted(): void {
-            new TestView();
-        }
+}
+
+@Component
+export default class DrawLine2 extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView();
     }
+}
 </script>

+ 31 - 16
docs/.vuepress/components/engine/shape/DrawPolyline1.vue

@@ -3,26 +3,41 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SPainter, SPoint } from "@persagy-web/draw/lib";
-    import { Component, 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)];
+/**
+ * 绘制折线
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView extends SCanvasView {
+    arr: SPoint[] = [new SPoint(10, 10), new SPoint(10, 40), new SPoint(30, 30)];
 
-        constructor() {
-            super("drawPolyline1")
-        }
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("drawPolyline1")
+    }
 
-        onDraw(canvas: SPainter): void {
-            // 绘制折线
-            canvas.drawPolyline(this.arr);
-        }
+    /**
+     * Item 绘制操作
+     * @param painter   绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        // 绘制折线
+        canvas.drawPolyline(this.arr);
     }
+}
 
-    @Component
-    export default class DrawPolyline1 extends Vue {
-        mounted(): void {
-            new TestView();
-        }
+@Component
+export default class DrawPolyline1 extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView();
     }
+}
 </script>

+ 60 - 46
docs/.vuepress/components/engine/shape/DrawRect1.vue

@@ -3,58 +3,72 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
-    import { Component, Vue } from "vue-property-decorator";
+import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
+import { Component, Vue } from "vue-property-decorator";
 
-    class TestView extends SCanvasView {
+/**
+ * 绘制矩形
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView extends SCanvasView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("drawRect1")
+    }
 
-        constructor() {
-            super("drawRect1")
-        }
+    /**
+     * Item 绘制操作
+     * @param canvas   绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        // 清除画布
+        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));
 
-        onDraw(canvas: SPainter): void {
-            // 清除画布
-            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.pen.lineWidth = 1;
+        canvas.pen.color = SColor.Blue;
+        canvas.brush.color = SColor.Transparent;
+        for (let i = 1; i < 100; i += 10) {
             //绘制矩形
-            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) {
-                canvas.drawRect(510 + i, i, 80, 80);
-            }
-
-            this.update();
+            canvas.drawRect(310 + i, i, 80, 80);
         }
-    }
 
-    @Component
-    export default class DrawRect1 extends Vue {
-        mounted(): void {
-            new TestView();
+        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) {
+            canvas.drawRect(510 + i, i, 80, 80);
         }
+
+        this.update();
+    }
+}
+
+@Component
+export default class DrawRect1 extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView();
     }
+}
 </script>

+ 34 - 23
docs/.vuepress/components/engine/shape/path.vue

@@ -3,35 +3,46 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SPainter, SPath } from "@persagy-web/draw/lib";
-    import { Component, 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;
+/**
+ * 绘制路径
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class TestView222 extends SCanvasView {
+    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}]);
-            // @ts-ignore
-            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}]);
-        }
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super('pathCanvas');
+        this.path = new SPath();
+        // @ts-ignore
+        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: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)
-        }
+    onDraw(painter: SPainter) {
+        //绘制路径
+        painter.drawPath(this.path)
     }
+}
 
-    @Component
-    export default class PathCanvas extends Vue {
-        mounted(): void {
-            new TestView222();
-        }
+@Component
+export default class PathCanvas extends Vue {
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        new TestView222();
     }
+}
 </script>
 
 <style scoped>

+ 79 - 74
docs/.vuepress/components/engine/style/shadow.vue

@@ -14,89 +14,94 @@
 </template>
 
 <script lang="ts">
-    import { SColor, SPainter } from "@persagy-web/draw/lib";
-    import { Component, Vue } from "vue-property-decorator";
-    import { SGraphView } from "@persagy-web/graph/lib";
-    import { v1 as uuid } from "uuid";
+import { SColor, SPainter } from "@persagy-web/draw/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;
-        /** 阴影 x 轴偏移量 */
-        shadowOffsetX: number;
-        /** 阴影 y 轴偏移量 */
-        shadowOffsetY: number;
+/**
+ * 绘制阴影
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class shadowView extends SGraphView {
+    /** 阴影扩散距离 */
+    shadowBlur: number;
+    /** 阴影颜色 */
+    shadowColor: SColor;
+    /** 阴影 x 轴偏移量 */
+    shadowOffsetX: number;
+    /** 阴影 y 轴偏移量 */
+    shadowOffsetY: number;
 
-        /**
-         * 构造函数
-         * @param id
-         */
-        constructor(id: string) {
-            super(id);
-            this.shadowBlur = 10;
-            this.shadowColor = new SColor('#00000060');
-            this.shadowOffsetX = 10;
-            this.shadowOffsetY = 10;
-        }
+    /**
+     * 构造函数
+     * @param id
+     */
+    constructor(id: string) {
+        super(id);
+        this.shadowBlur = 10;
+        this.shadowColor = new SColor('#00000060');
+        this.shadowOffsetX = 10;
+        this.shadowOffsetY = 10;
+    }
 
-        /**
-         * 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;
-            canvas.shadow.shadowBlur = this.shadowBlur;
-            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);
-        }
+    /**
+     * 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;
+        canvas.shadow.shadowBlur = this.shadowBlur;
+        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);
     }
+}
 
-    @Component
-    export default class ShadowCanvas extends Vue {
-        id: string = uuid();
-        view: shadowView | undefined;
-        blurl: number = 10;
-        X: number = 10;
-        Y: number = 10;
-        color: string = "#cccccc";
+@Component
+export default class ShadowCanvas extends Vue {
+    id: string = uuid();
+    view: shadowView | undefined;
+    blurl: number = 10;
+    X: number = 10;
+    Y: number = 10;
+    color: string = "#cccccc";
 
-        mounted() {
-            this.view = new shadowView(this.id);
-        }
+    mounted() {
+        this.view = new shadowView(this.id);
+    }
 
-        // 修改扩散距离
-        changeblur(v: number): void {
-            this.view!!.shadowBlur = v;
-            this.view!!.update()
-        };
+    // 修改扩散距离
+    changeblur(v: number): void {
+        this.view!!.shadowBlur = v;
+        this.view!!.update()
+    };
 
-        // x轴偏移量
-        changeX(v: number) {
-            this.view!!.shadowOffsetX = v;
-            this.view!!.update()
-        };
+    // x轴偏移量
+    changeX(v: number) {
+        this.view!!.shadowOffsetX = v;
+        this.view!!.update()
+    };
 
-        // y轴偏移量
-        changeY(v: number) {
-            this.view!!.shadowOffsetY = v;
-            this.view!!.update()
-        };
+    // y轴偏移量
+    changeY(v: number) {
+        this.view!!.shadowOffsetY = v;
+        this.view!!.update()
+    };
 
-        // 修改颜色
-        changeColor(v: string) {
-            this.view!!.shadowColor = new SColor(v);
-            this.view!!.update()
-        }
+    // 修改颜色
+    changeColor(v: string) {
+        this.view!!.shadowColor = new SColor(v);
+        this.view!!.update()
     }
+}
 </script>

+ 23 - 23
docs/.vuepress/components/format/style.vue

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

+ 101 - 80
docs/.vuepress/components/scene/Align.vue

@@ -10,62 +10,77 @@
 </template>
 
 <script>
-    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;
-            this.selectable = true;
-            this.text = new Date().getMilliseconds().toString()
-        }
+import { SGraphItem, SGraphLayoutType, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+import { SColor, SRect } from "@persagy-web/draw/lib";
+
+/**
+ * 对其
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class RectItem extends SGraphItem {
+    width = 200;
+    height = 100;
+    text = '';
+
+    constructor(parent) {
+        super(parent);
+        this.moveable = true;
+        this.selectable = true;
+        this.text = new Date().getMilliseconds().toString()
+    }
 
-        boundingRect() {
-            return new SRect(0, 0, this.width, this.height);
-        }
+    /**
+     * 矩形数据类型绘制
+     */
+    boundingRect() {
+        return new SRect(0, 0, this.width, this.height);
+    }
 
-        onDraw(canvas) {
-            canvas.pen.color = SColor.Transparent;
-            canvas.pen.lineWidth = canvas.toPx(1);
-            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
-            canvas.drawRect(0, 0, this.width, this.height);
+    /**
+     * Item 绘制操作
+     * @param canvas    绘制对象
+     */
+    onDraw(canvas) {
+        canvas.pen.color = SColor.Transparent;
+        canvas.pen.lineWidth = canvas.toPx(1);
+        canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+        canvas.drawRect(0, 0, this.width, this.height);
 
-            canvas.pen.lineDash = [10, 10];
-            canvas.pen.color = SColor.Yellow;
-            canvas.brush.color = SColor.Transparent;
-            canvas.drawRect(this.boundingRect());
+        canvas.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.brush.color = SColor.Black;
+        canvas.drawText(`${this.x},${this.y}`, 0, 0);
 
-        }
+    }
     }
 
-    class CircleItem extends SGraphItem {
-        r = 75;
-        text = '';
+class CircleItem extends SGraphItem {
+    r = 75;
+    text = '';
 
-        constructor(parent) {
-            super(parent);
-            this.moveable = true;
-            this.selectable = true;
-            this.text = new Date().getMilliseconds().toString()
-        }
+    constructor(parent) {
+        super(parent);
+        this.moveable = true;
+        this.selectable = true;
+        this.text = new Date().getMilliseconds().toString()
+    }
 
-        boundingRect() {
-            return new SRect(0, 0, this.r * 2, this.r * 2);
-        }
+    /**
+     * 矩形数据类型绘制
+     */
+    boundingRect() {
+        return new SRect(0, 0, this.r * 2, this.r * 2);
+    }
 
-        onDraw(canvas) {
-            canvas.pen.color = SColor.Transparent;
-            canvas.pen.lineWidth = canvas.toPx(1);
-            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
-            canvas.drawCircle(this.r, this.r, this.r);
+    onDraw(canvas) {
+        canvas.pen.color = SColor.Transparent;
+        canvas.pen.lineWidth = canvas.toPx(1);
+        canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+        canvas.drawCircle(this.r, this.r, this.r);
 
             canvas.pen.color = SColor.Yellow;
             canvas.brush.color = SColor.Transparent;
@@ -77,48 +92,54 @@
         }
     }
 
-    class SScene extends SGraphScene {
-        /** 定义命令 */
-        cmd = 0;
-
-        constructor() {
-            super();
-        }
+class SScene extends SGraphScene {
+    /** 定义命令 */
+    cmd = 0;
 
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super();
+    }
 
-        onMouseUp(event) {
-            switch (this.cmd) {
-                case 1:
-                    this.addCircle(event.x, event.y);
-                    break;
-                case 2:
-                    this.addRect(event.x, event.y);
-                    break;
-                default:
-                    super.onMouseUp(event);
-            }
-            this.cmd = 0;
-            return false
-        }
 
-        addCircle(x, y) {
-            let item = new CircleItem(null);
-            item.moveTo(x - 50, y - 50);
-            this.addItem(item);
+    onMouseUp(event) {
+        switch (this.cmd) {
+            case 1:
+                this.addCircle(event.x, event.y);
+                break;
+            case 2:
+                this.addRect(event.x, event.y);
+                break;
+            default:
+                super.onMouseUp(event);
         }
+        this.cmd = 0;
+        return false
+    }
 
-        addRect(x, y) {
-            let item = new RectItem(null);
-            item.moveTo(x - 50, y - 50);
-            this.addItem(item);
-        }
+    addCircle(x, y) {
+        let item = new CircleItem(null);
+        item.moveTo(x - 50, y - 50);
+        this.addItem(item);
     }
 
-    class TestView extends SGraphView {
-        constructor() {
-            super("align");
-        }
+    addRect(x, y) {
+        let item = new RectItem(null);
+        item.moveTo(x - 50, y - 50);
+        this.addItem(item);
+    }
+}
+
+class TestView extends SGraphView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("align");
     }
+}
 
     export default {
         data() {

+ 83 - 64
docs/.vuepress/components/scene/Undo1.vue

@@ -11,36 +11,45 @@
 </template>
 
 <script lang="ts">
-    import { SMouseEvent, SUndoStack } from "@persagy-web/base";
-    import { SColor, SPainter, SRect } from "@persagy-web/draw";
-    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;
-            this.selectable = true;
-            this.selected = true;
-            this.isTransform = true;
-            this.rotate = 60;
-        }
+import { SMouseEvent, SUndoStack } from "@persagy-web/base";
+import { SColor, SPainter, SRect } from "@persagy-web/draw";
+import { SGraphAddCommand, SGraphItem, SGraphMoveCommand, SGraphScene, SGraphView } from "@persagy-web/graph";
+import { SPoint } from "@persagy-web/draw/lib";
+
+/**
+ * Undo/Redo
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class RectItem extends SGraphItem {
+    width = 100;
+    height = 100;
+    id = new Date().getTime() + '';
+
+    constructor(parent: SGraphItem | null) {
+        super(parent);
+        this.moveable = true;
+        this.selectable = true;
+        this.selected = true;
+        this.isTransform = true;
+        this.rotate = 60;
+    }
 
-        boundingRect(): SRect {
-            return new SRect(0, 0, this.width, this.height);
-        }
+    boundingRect(): SRect {
+        return new SRect(0, 0, this.width, this.height);
+    }
 
-        onDraw(canvas: SPainter): void {
-            canvas.pen.color = SColor.Blue;
-            canvas.pen.lineWidth = 5;
-            canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
-            canvas.drawRect(0, 0, this.width, this.height)
-        }
+    /**
+     * Item 绘制操作
+     * @param canvas    绘制对象
+     */
+    onDraw(canvas: SPainter): void {
+        canvas.pen.color = SColor.Blue;
+        canvas.pen.lineWidth = 5;
+        canvas.brush.color = this.selected ? SColor.Red : SColor.Green;
+        canvas.drawRect(0, 0, this.width, this.height)
     }
+}
 
     class CircleItem extends SGraphItem {
         r = 50;
@@ -57,6 +66,10 @@
             return new SRect(0, 0, this.r * 2, this.r * 2);
         }
 
+        /**
+         * Item 绘制操作
+         * @param canvas    绘制对象
+         */
         onDraw(canvas: SPainter): void {
             canvas.pen.color = SColor.Blue;
             canvas.pen.lineWidth = 5;
@@ -65,51 +78,54 @@
         }
     }
 
-    class SScene extends SGraphScene {
-        undoStack = new SUndoStack();
-        /** 定义命令 */
-        cmd = 0;
+class SScene extends SGraphScene {
+    undoStack = new SUndoStack();
+    /** 定义命令 */
+    cmd = 0;
 
-        constructor() {
-            super();
-        }
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super();
+    }
 
 
-        onMouseUp(event: SMouseEvent): boolean {
-            switch (this.cmd) {
-                case 1:
-                    this.addCircle(event.x, event.y);
-                    break;
-                case 2:
-                    this.addRect(event.x, event.y);
-                    break;
-                default:
-                    super.onMouseUp(event);
-            }
-            this.cmd = 0;
-            return false
+    onMouseUp(event: SMouseEvent): boolean {
+        switch (this.cmd) {
+            case 1:
+                this.addCircle(event.x, event.y);
+                break;
+            case 2:
+                this.addRect(event.x, event.y);
+                break;
+            default:
+                super.onMouseUp(event);
         }
+        this.cmd = 0;
+        return false
+    }
 
-        private addCircle(x: number, y: number): void {
-            let item = new CircleItem(null);
-            item.moveTo(x - 50, y - 50);
-            this.addItem(item);
-            this.undoStack.push(new SGraphAddCommand(this, item));
-            item.connect("onMove", this, this.onItemMove.bind(this));
-        }
+    private addCircle(x: number, y: number): void {
+        let item = new CircleItem(null);
+        item.moveTo(x - 50, y - 50);
+        this.addItem(item);
+        this.undoStack.push(new SGraphAddCommand(this, item));
+        item.connect("onMove", this, this.onItemMove.bind(this));
+    }
 
-        private addRect(x: number, y: number): void {
-            let item = new RectItem(null);
-            item.moveTo(x - 50, y - 50);
-            this.addItem(item);
-            this.undoStack.push(new SGraphAddCommand(this, item));
-            item.connect("onMove", this, this.onItemMove.bind(this));
-        }
+    private addRect(x: number, y: number): void {
+        let item = new RectItem(null);
+        item.moveTo(x - 50, y - 50);
+        this.addItem(item);
+        this.undoStack.push(new SGraphAddCommand(this, item));
+        item.connect("onMove", this, this.onItemMove.bind(this));
+    }
 
-        onItemMove(item: SGraphItem, ...arg: any): void {
-            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
-        }
+    onItemMove(item: SGraphItem, ...arg: any): void {
+        this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
     }
+}
 
     class TestView extends SGraphView {
         constructor(undoFrame) {
@@ -123,6 +139,9 @@
                 scene: new SScene(),
             }
         },
+        /**
+         * 页面挂载
+         */
         mounted(): void {
             let view = new TestView('undoFrame');
             view.scene = this.scene;//new SScene(); //this.data.scene;

+ 62 - 51
docs/.vuepress/components/scene/items/ClockItem.vue

@@ -3,50 +3,55 @@
 </template>
 
 <script lang="ts">
-    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
-    import { Component, Vue } from "vue-property-decorator";
-
-    import { SColor, SLineCapStyle, SPainter, SRect, SSize } from "@persagy-web/draw";
-
-    class SGraphClockItem extends SGraphItem {
-        /** 大小 */
-        size: SSize;
-
-        /** 宽度 */
-        get width() {
-            return this.size.width;
-        } // Get width
-        set width(v: number) {
-            this.size.width = v;
-        } // Set width
-
-        /** 高度 */
-        get height() {
-            return this.size.height;
-        } // Get width
-        set height(v: number) {
-            this.size.height = v;
-        } // Set width
-
-        /** 半径 */
-        get radius() {
-            return Math.min(this.width, this.height) / 2.0;
-        } // Get radius
-
-        /**
-         * 构造函数
-         *
-         * @param   parent      指向父Item
-         * @param   size        大小
-         */
-        constructor(parent: SGraphItem | null, size: SSize);
-
-        /**
-         * 构造函数
-         *
-         * @param   parent      指向父Item
-         * @param   width       宽度
-         * @param   height      高度
+import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
+import { Component, Vue } from "vue-property-decorator";
+
+import { SColor, SLineCapStyle, SPainter, SRect, SSize } from "@persagy-web/draw";
+
+/**
+ * 时钟
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class SGraphClockItem extends SGraphItem {
+    /** 大小 */
+    size: SSize;
+
+    /** 宽度 */
+    get width() {
+        return this.size.width;
+    } // Get width
+    set width(v: number) {
+        this.size.width = v;
+    } // Set width
+
+    /** 高度 */
+    get height() {
+        return this.size.height;
+    } // Get width
+    set height(v: number) {
+        this.size.height = v;
+    } // Set width
+
+    /** 半径 */
+    get radius() {
+        return Math.min(this.width, this.height) / 2.0;
+    } // Get radius
+
+    /**
+     * 构造函数
+     *
+     * @param   parent      指向父Item
+     * @param   size        大小
+     */
+    constructor(parent: SGraphItem | null, size: SSize);
+
+    /**
+     * 构造函数
+     *
+     * @param   parent      指向父Item
+     * @param   width       宽度
+     * @param   height      高度
          */
         constructor(parent: SGraphItem | null, width: number, height: number);
 
@@ -203,18 +208,24 @@
         } // Function drawSecond()
     } // Class SGraphClockItem
 
-    class TestView extends SGraphView {
-        clock1 = new SGraphClockItem(null, 300, 300);
+class TestView extends SGraphView {
+    clock1 = new SGraphClockItem(null, 300, 300);
 
-        constructor() {
-            super("clockItem1");
-            this.scene = new SGraphScene();
-            this.scene.addItem(this.clock1);
-        }
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("clockItem1");
+        this.scene = new SGraphScene();
+        this.scene.addItem(this.clock1);
     }
+}
 
     @Component
     export default class ClockCanvas extends Vue {
+        /**
+         * 页面挂载
+         */
         mounted(): void {
             new TestView();
         }

+ 11 - 7
docs/.vuepress/components/scene/items/ImageItem.vue

@@ -10,13 +10,17 @@
 </template>
 
 <script lang="ts">
-    import { SGraphScene, SGraphView } from "@persagy-web/graph";
-    import { SGraphSvgItem } from "@persagy-web/graph/lib";
-    import { Component, Vue } from "vue-property-decorator";
-    import { SSize } from "@persagy-web/draw/lib";
-    import { v1 as uuid } from "uuid";
-
-    class Img extends SGraphSvgItem {
+import { SGraphScene, SGraphView } from "@persagy-web/graph";
+import { SGraphSvgItem } from "@persagy-web/graph/lib";
+import { Component, Vue } from "vue-property-decorator";
+import { SSize } from "@persagy-web/draw/lib";
+import { v1 as uuid } from "uuid";
+/**
+ * 图片实例
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class Img extends SGraphSvgItem {
         resize(oldSize: SSize, newSize: SSize): void {
             this.width = newSize.width;
             this.height = newSize.height;

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

@@ -8,10 +8,14 @@
 </template>
 
 <script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SItemStatus, SPolylineItem } from "@persagy-web/big/lib";
-
-    export default {
+import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+import { SItemStatus, SPolylineItem } from "@persagy-web/big/lib";
+/**
+ * 可编辑折线示例
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+export default {
         name: "editPolyline",
         data() {
             return {

+ 19 - 14
docs/.vuepress/components/scene/items/SEditLine.vue

@@ -7,21 +7,26 @@
     </div>
 </template>
 <script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/";
-    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
-    import { SLineItem } from "@persagy-web/big/lib";
+import { SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
+import { SLineItem } from "@persagy-web/big/lib";
 
-    export default {
-        data() {
-            return {
-                scene: null,
-                view: null
-            };
-        },
-        mounted() {
-            this.view = new SGraphView("editLine");
-            this.scene = new SGraphScene();
-            this.view.scene = this.scene;
+/**
+ * 可编辑直线示例
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+export default {
+    data() {
+        return {
+            scene: null,
+            view: null
+        };
+    },
+    mounted() {
+        this.view = new SGraphView("editLine");
+        this.scene = new SGraphScene();
+        this.view.scene = this.scene;
         },
         methods: {
             create() {

+ 42 - 34
docs/.vuepress/components/scene/items/SEditPolygon.vue

@@ -7,39 +7,47 @@
     </div>
 </template>
 <script lang='ts'>
-    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/";
-    import { SMouseEvent } from "@persagy-web/base/";
-    import { SColor, SLine, SLineCapStyle, SPainter, SPoint, SRect } from "@persagy-web/draw";
-    import { SRelationState } from "@persagy-web/big/lib/enums/SRelationState";
-    import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
-
-    export default {
-        data() {
-            return {
-                scene: null,
-                view: null
-            };
-        },
-        mounted(): void {
-            this.view = new SGraphView("editPolygon");
+import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/";
+import { SMouseEvent } from "@persagy-web/base/";
+import { SColor, SLine, SLineCapStyle, SPainter, SPoint, SRect } from "@persagy-web/draw";
+import { SRelationState } from "@persagy-web/big/lib/enums/SRelationState";
+import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
+
+/**
+ * 可编辑多边形示例
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+export default {
+    data() {
+        return {
+            scene: null,
+            view: null
+        };
+    },
+    /**
+     * 页面挂载
+     */
+    mounted(): void {
+        this.view = new SGraphView("editPolygon");
+    },
+    methods: {
+        show() {
+            const scene = new SGraphScene();
+            this.view.scene = scene;
+            const spolygonItem = new SPolygonItem(null);
+            spolygonItem.setStatus = SRelationState.Normal;
+            const PointList: SPoint[] = [
+                new SPoint(0, 0),
+                new SPoint(50, 0),
+                new SPoint(50, 50),
+                new SPoint(0, 50)
+            ];
+            spolygonItem.setPointList = PointList;
+            scene.addItem(spolygonItem);
+            this.view.fitSceneToView();
         },
-        methods: {
-            show() {
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                const spolygonItem = new SPolygonItem(null);
-                spolygonItem.setStatus = SRelationState.Normal;
-                const PointList: SPoint[] = [
-                    new SPoint(0, 0),
-                    new SPoint(50, 0),
-                    new SPoint(50, 50),
-                    new SPoint(0, 50)
-                ];
-                spolygonItem.setPointList = PointList;
-                scene.addItem(spolygonItem);
-                this.view.fitSceneToView();
-            },
-            create() {
+        create() {
                 const scene = new SGraphScene();
                 this.view.scene = scene;
                 const spolygonItem = new SPolygonItem(null);
@@ -288,7 +296,7 @@
          * @param painter    绘制类
          * @param pointList    绘制多边形数组
          *
-         * */
+         */
 
         protected drawEditPolygon(painter: SPainter, pointList: SPoint[]): void {
             // 展示多边形
@@ -307,7 +315,7 @@
          * @param event    鼠标事件
          *
          *
-         * */
+         */
 
         protected editPolygonPoint(event: SMouseEvent): void {
             //  判断是否为删除状态 isAlt = true为删除状态

+ 52 - 51
docs/.vuepress/components/scene/items/SImgTextItem.vue

@@ -7,58 +7,59 @@
 </template>
 
 <script lang="ts">
-    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
-     *
-     * */
-    class SImgTextItem extends SObjectItem {
-
-        /** item状态  */
-        _status: SItemStatus = SItemStatus.Normal;
-        get status(): SItemStatus {
-            return this._status;
-        }
+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
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class SImgTextItem extends SObjectItem {
+
+    /** item状态  */
+    _status: SItemStatus = SItemStatus.Normal;
+    get status(): SItemStatus {
+        return this._status;
+    }
 
-        set status(v: SItemStatus) {
-            this._status = v;
-            this.update();
-        }
+    set status(v: SItemStatus) {
+        this._status = v;
+        this.update();
+    }
 
-        /** 是否显示文字  */
-        _showText: boolean = true;
-        get showText(): boolean {
-            return this._showText;
-        }
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
 
-        set showText(v: boolean) {
-            if (v === this._showText) {
-                return
-            }
-            this._showText = v;
-            this.textItem.visible = v;
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
         }
+        this._showText = v;
+        this.textItem.visible = v;
+    }
 
-        /** 是否显示锚点  */
-        _showAnchor: boolean = false;
-        get showAnchor(): boolean {
-            return this._showAnchor;
-        }
+    /** 是否显示锚点  */
+    _showAnchor: boolean = false;
+    get showAnchor(): boolean {
+        return this._showAnchor;
+    }
 
-        set showAnchor(v: boolean) {
-            this._showAnchor = v;
+    set showAnchor(v: boolean) {
+        this._showAnchor = v;
             this.anchorList.forEach(t => {
                 t.visible = v;
             })
@@ -92,7 +93,7 @@
         /**
          * 构造体
          *
-         * */
+         */
         constructor(parent: SGraphItem | null) {
             super(parent);
             this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
@@ -133,7 +134,7 @@
         /**
          * 鼠标按下事件
          *
-         * */
+         */
         onMouseDown(event: SMouseEvent): boolean {
             console.log(this.textItem)
             if (this.status == SItemStatus.Normal) {
@@ -149,7 +150,7 @@
          *
          * @param   oldSize 改之前的大小
          * @param   newSize 改之后大小
-         * */
+         */
         onResize(oldSize: SSize, newSize: SSize) {
             console.log(arguments);
         } // Function onResize()
@@ -159,7 +160,7 @@
          *
          * @param   event   鼠标事件
          * @return  是否处理事件
-         * */
+         */
         onDoubleClick(event: SMouseEvent): boolean {
             this.status = SItemStatus.Edit;
             return true;
@@ -169,7 +170,7 @@
          * 宽高发发生变化
          *
          * @return  SRect   所有子对象的并集
-         * */
+         */
         boundingRect(): SRect {
             let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
             if (this.showText) {

+ 43 - 38
docs/.vuepress/components/scene/items/TextItem.vue

@@ -20,46 +20,48 @@
 </template>
 
 <script>
-    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";
+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);
+/**
+ * 文本实例
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+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(
+    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)
                 );
             }
@@ -84,11 +86,14 @@
         }
     }
 
-    class TestView extends SGraphView {
-        constructor() {
-            super("TextItem1");
-        }
+class TestView extends SGraphView {
+    /**
+     * 构造函数
+     */
+    constructor() {
+        super("TextItem1");
     }
+}
 
     export default {
         data() {

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

@@ -5,11 +5,15 @@
 </template>
 
 <script lang="ts">
-    import { SGraphAreaGroupItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
-
-    @Component
+import { SGraphAreaGroupItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+/**
+ * 区域组
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+@Component
     export default class AreaCanvas extends Vue {
         id: string = uuid();
         view: SGraphView | undefined;

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

@@ -7,12 +7,16 @@
 
 <script lang="ts">
 
-    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 {
+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";
+/**
+ * 多边形组
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+class Expolygon extends SGraphPolyGroupItem {
         resize(old: SSize, newS: SSize): void {
             const xs = newS.width / old.width;
             const ys = newS.height / old.height;

+ 28 - 21
docs/.vuepress/components/scene/items/rect.vue

@@ -9,18 +9,22 @@
 
 <script lang="ts">
 
-    import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { Component, Vue } from "vue-property-decorator";
-
-    @Component
-    export default class RectCanvas extends Vue {
-        id: string = 'rect' + Date.now();
-        view: SGraphView | undefined;
-        item: SGraphRectItem | undefined;
-        item2: SGraphRectItem | undefined;
-        R: number = 0;
-        rectData = {
-            x: 0,
+import { SGraphRectItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+import { Component, Vue } from "vue-property-decorator";
+/**
+ * 矩形&圆角矩形
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+@Component
+export default class RectCanvas extends Vue {
+    id: string = 'rect' + Date.now();
+    view: SGraphView | undefined;
+    item: SGraphRectItem | undefined;
+    item2: SGraphRectItem | undefined;
+    R: number = 0;
+    rectData = {
+        x: 0,
             y: 0,
             width: 500,
             height: 500,
@@ -74,16 +78,19 @@
             }
         };
 
-        private mounted(): void {
-            this.init();
-        }
+    /**
+     * 页面挂载
+     */
+    private mounted(): void {
+        this.init();
+    }
 
-        init(): void {
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            this.item = new SGraphRectItem(null, this.rectData);
-            this.item.selectable = true;
-            this.item._resizeable = false;
+    init(): void {
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        this.item = new SGraphRectItem(null, this.rectData);
+        this.item.selectable = true;
+        this.item._resizeable = false;
             scene.addItem(this.item);
 
             this.item2 = new SGraphRectItem(null, this.rectData2);

+ 40 - 32
docs/.vuepress/components/scene/items/svg.vue

@@ -5,39 +5,47 @@
 </template>
 
 <script lang="ts">
-    import { SGraphScene, SGraphSvgItem, SGraphView } from "@persagy-web/graph/lib";
-    import { Component, Vue } from "vue-property-decorator";
-    import { v1 as uuid } from "uuid";
+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 {
-        id: string = uuid();
-        view: SGraphView | undefined;
-        svgData = {
-            // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
-            // Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
-            url: require('../../../public/assets/img/1.svg'),
-            x: 100,
-            y: 100,
-            width: 200,
-            height: 200
-        };
+/**
+ *  SVG 图
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+@Component
+export default class SvgCanvas extends Vue {
+    id: string = uuid();
+    view: SGraphView | undefined;
+    svgData = {
+        // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
+        // Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
+        url: require('../../../public/assets/img/1.svg'),
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 200
+    };
 
-        private mounted(): void {
-            this.init()
-        };
+    /**
+     * 页面挂载
+     */
+    private mounted(): void {
+        this.init()
+    };
 
-        init(): void {
-            this.view = new SGraphView(this.id);
-            const scene = new SGraphScene();
-            this.view.scene = scene;
-            const item = new SGraphSvgItem(null, this.svgData);
-            scene.addItem(item);
-            // setInterval(() => {
-            //     item.width+=10;
-            //     item.height+=10;
-            // },500)
-            // this.view.fitSceneToView();
-        };
-    }
+    init(): void {
+        this.view = new SGraphView(this.id);
+        const scene = new SGraphScene();
+        this.view.scene = scene;
+        const item = new SGraphSvgItem(null, this.svgData);
+        scene.addItem(item);
+        // setInterval(() => {
+        //     item.width+=10;
+        //     item.height+=10;
+        // },500)
+        // this.view.fitSceneToView();
+    };
+}
 </script>

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

@@ -91,9 +91,10 @@ module.exports = {
             {
                 text:"开发规范",
                 items: [
-                    {text: "javascript", link: "/guides/standard/javascript.md"},
-                    {text: "typescript", link: "/guides/standard/typescript.md"},
-                    {text: "git", link: "/guides/standard/git.md"},
+                    // {text: "javascript", link: "/guides/standard/javascript.md"},
+                    // {text: "typescript", link: "/guides/standard/typescript.md"},
+                    {text: "约定", link: "/guides/standard/appoint.md"},
+                    {text: "git", link: "/guides/standard/git.md"}
                 ]
             },
             {

+ 8 - 8
docs/guides/big/factory/src/SItemFactory.ts

@@ -48,7 +48,7 @@ export class SItemFactory {
     /**
      * 构造函数
      *
-     * */
+     */
     constructor() {} // Constructor
 
     /**
@@ -56,7 +56,7 @@ export class SItemFactory {
      *
      * @param   data    柱子数据
      * @return  柱子item
-     * */
+     */
     createColumn(data: Column): SColumnItem {
         return new SColumnItem(null, data);
     } // Function createColumn()
@@ -66,7 +66,7 @@ export class SItemFactory {
      *
      * @param   data    墙数据
      * @return  墙item
-     * */
+     */
     createWall(data: Wall): SWallItem {
         return new SWallItem(null, data);
     } // Function createWall()
@@ -76,7 +76,7 @@ export class SItemFactory {
      *
      * @param   data    虚拟墙数据
      * @return  虚拟墙item
-     * */
+     */
     createVirtualWall(data: VirtualWall): SVirtualWallItem {
         return new SVirtualWallItem(null, data);
     } // Function createVirtualWall()
@@ -86,7 +86,7 @@ export class SItemFactory {
      *
      * @param   data    空间数据
      * @return  空间item
-     * */
+     */
     createSpace(data: Space): SSpaceItem {
         return new SSpaceItem(null, data);
     } // Function createSpace()
@@ -96,7 +96,7 @@ export class SItemFactory {
      *
      * @param   data    门数据
      * @return  门item
-     * */
+     */
     createDoor(data: Door): SDoorItem {
         return new SDoorItem(null, data);
     } // Function createDoor()
@@ -106,7 +106,7 @@ export class SItemFactory {
      *
      * @param   data    窗户数据
      * @return  窗户item
-     * */
+     */
     createWindow(data: Casement): SWindowItem {
         return new SWindowItem(null, data);
     } // Function createWindow()
@@ -116,7 +116,7 @@ export class SItemFactory {
      *
      * @param   data    业务空间数据
      * @return  业务空间item
-     * */
+     */
     createZone(data: Zone): SZoneItem {
         return new SZoneItem(null, data);
     } // Function createZone()

+ 12 - 12
docs/guides/edit/items/src/EditLineItem.ts

@@ -13,7 +13,7 @@ import {
  * 编辑类直线 item
  *
  * @author  韩耀龙(han_yao_long@163.com)
- * */
+ */
 
 export class EditLineItem extends SGraphItem {
     /** X坐标最小值  */
@@ -125,7 +125,7 @@ export class EditLineItem extends SGraphItem {
      * 构造函数
      *
      * @param   parent  父级
-     * */
+     */
     constructor(parent: SGraphItem | null);
 
     /**
@@ -133,7 +133,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   line    坐标集合
-     * */
+     */
     constructor(parent: SGraphItem | null, line: SPoint[]);
 
     /**
@@ -141,7 +141,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   point   第一个点坐标
-     * */
+     */
     constructor(parent: SGraphItem | null, point: SPoint);
 
     /**
@@ -149,7 +149,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   l       坐标集合|第一个点坐标
-     * */
+     */
     constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
         super(parent);
         if (l) {
@@ -167,7 +167,7 @@ export class EditLineItem extends SGraphItem {
      * 添加点至数组中
      *
      * @param   p       添加的点
-     * */
+     */
     private addPoint(p: SPoint): void {
         if (this.line.length < 2) {
             this.line.push(p);
@@ -205,7 +205,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   event   鼠标事件
      * @return  是否处理事件
-     * */
+     */
     onMouseDown(event: SMouseEvent): boolean {
         this.curIndex = -1;
         this.curPoint = null;
@@ -260,7 +260,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   event   鼠标事件
      * @return  是否处理事件
-     * */
+     */
     onMouseMove(event: SMouseEvent): boolean {
         if (event.shiftKey || this._verAndLeve) {
             event = this.compare(event);
@@ -285,7 +285,7 @@ export class EditLineItem extends SGraphItem {
      * 获取点击点与Point[]中的点距离最近点
      *
      * @param   p   鼠标点击点
-     * */
+     */
     findNearestPoint(p: SPoint): void {
         let len = this.sceneDis;
         for (let i = 0; i < this.line.length; i++) {
@@ -320,7 +320,7 @@ export class EditLineItem extends SGraphItem {
      *
      * @param   x   x坐标
      * @param   y   y坐标
-     * */
+     */
     moveToOrigin(x: number, y: number): void {
         super.moveToOrigin(x, y);
         this.line = this.line.map(t => {
@@ -336,7 +336,7 @@ export class EditLineItem extends SGraphItem {
      * shift垂直水平创建或编辑
      *
      * @param   event   事件
-     * */
+     */
     compare(event: SMouseEvent): SMouseEvent {
         if (this.line.length) {
             let last = new SPoint(event.x, event.y);
@@ -403,7 +403,7 @@ export class EditLineItem extends SGraphItem {
     /**
      * 取消操作item事件
      *
-     * */
+     */
     cancelOperate(): void {
         if (this.status == SItemStatus.Create) {
             this.parent = null;

+ 3 - 11
docs/guides/edit/items/src/EditPolygonItem.ts

@@ -6,15 +6,7 @@ import {
     SLineStyle
 } from "@persagy-web/graph/lib";
 import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base/";
-import {
-    SColor,
-    SLine,
-    SLineCapStyle,
-    SPainter,
-    SPoint,
-    SPolygonUtil,
-    SRect
-} from "@persagy-web/draw";
+import { SColor, SLine, SLineCapStyle, SPainter, SPoint, SPolygonUtil, SRect } from "@persagy-web/draw";
 import { SItemStatus } from "@persagy-web/big";
 import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
 
@@ -652,7 +644,7 @@ export class EditPolygonItem extends SGraphItem {
      * shift垂直水平创建或编辑
      *
      * @param   event   事件
-     * */
+     */
     compare(event: SMouseEvent): SMouseEvent {
         if (this.pointList.length) {
             let last = new SPoint(event.x, event.y);
@@ -706,7 +698,7 @@ export class EditPolygonItem extends SGraphItem {
      *
      * @param   x   x坐标
      * @param   y   y坐标
-     * */
+     */
     moveToOrigin(x: number, y: number): void {
         super.moveToOrigin(x, y);
         this.pointList = this.pointList.map(t => {

+ 17 - 17
docs/guides/edit/items/src/EditPolylineItem.ts

@@ -13,7 +13,7 @@ import {
 /**
  * 直线item
  *
- * */
+ */
 
 export class EditPolylineItem extends SGraphItem {
     /** X坐标最小值  */
@@ -99,7 +99,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   list    坐标集合
-     * */
+     */
     constructor(parent: null | SGraphItem, list: SPoint[]);
 
     /**
@@ -107,7 +107,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   list    第一个坐标
-     * */
+     */
     constructor(parent: null | SGraphItem, list: SPoint);
 
     /**
@@ -115,7 +115,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   parent  父级
      * @param   list    第一个坐标|坐标集合
-     * */
+     */
     constructor(parent: null | SGraphItem, list: SPoint | SPoint[]) {
         super(parent);
         if (list instanceof SPoint) {
@@ -130,7 +130,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   p       添加的点
      * @param   index   添加到的索引
-     * */
+     */
     private addPoint(p: SPoint, index?: number): void {
         if (index && this.canHandle(index)) {
             this.pointList.splice(index, 0, p);
@@ -151,7 +151,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   index   要添加到的索引
      * @return  boolean 是否可添加
-     * */
+     */
     private canHandle(index: number): boolean {
         return index >= 0 && index <= this.pointList.length;
     } // Function canHandle()
@@ -160,7 +160,7 @@ export class EditPolylineItem extends SGraphItem {
      * 根据索引删除点
      *
      * @param   index   删除点
-     * */
+     */
     deletePoint(index: number): void {
         if (this.canHandle(index) && this.pointList.length > 2) {
             const p = new SPoint(
@@ -184,7 +184,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   event   鼠标事件
      * @return  boolean 是否处理事件
-     * */
+     */
     onMouseDown(event: SMouseEvent): boolean {
         this.curIndex = -1;
         this.curPoint = null;
@@ -220,7 +220,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   event   鼠标事件
      * @return  boolean 是否处理事件
-     * */
+     */
     onMouseMove(event: SMouseEvent): boolean {
         if (event.shiftKey || this.verAndLeve) {
             event = this.compare(event);
@@ -253,7 +253,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   event   鼠标事件
      * @return  boolean 是否处理事件
-     * */
+     */
     onMouseUp(event: SMouseEvent): boolean {
         if (this.status == SItemStatus.Edit) {
             if (this.curIndex > -1) {
@@ -328,7 +328,7 @@ export class EditPolylineItem extends SGraphItem {
      *
      * @param   x   x坐标
      * @param   y   y坐标
-     * */
+     */
     moveToOrigin(x: number, y: number): void {
         super.moveToOrigin(x, y);
         this.pointList = this.pointList.map(t => {
@@ -344,7 +344,7 @@ export class EditPolylineItem extends SGraphItem {
      * 获取点击点与点集中距离最近点
      *
      * @param   p   鼠标点击点
-     * */
+     */
     findNearestPoint(p: SPoint): void {
         let len = this.sceneDis;
         for (let i = 0; i < this.pointList.length; i++) {
@@ -369,7 +369,7 @@ export class EditPolylineItem extends SGraphItem {
      * 计算增加点的位置
      *
      * @param   p   鼠标点击点
-     * */
+     */
     findAddPos(p: SPoint): void {
         let len = SMathUtil.pointToLine(
             p,
@@ -399,7 +399,7 @@ export class EditPolylineItem extends SGraphItem {
      * shift垂直水平创建或编辑
      *
      * @param   event   事件
-     * */
+     */
     compare(event: SMouseEvent): SMouseEvent {
         if (this.pointList.length) {
             let last = new SPoint(event.x, event.y);
@@ -437,7 +437,7 @@ export class EditPolylineItem extends SGraphItem {
      * Item对象边界区域
      *
      * @return  SRect   外接矩阵
-     * */
+     */
     boundingRect(): SRect {
         if (this.pointList.length) {
             this.minX = this.pointList[0].x;
@@ -518,7 +518,7 @@ export class EditPolylineItem extends SGraphItem {
     /**
      * 取消操作执行
      *
-     * */
+     */
     cancelOperate(): void {
         if (this.status == SItemStatus.Create) {
             this.parent = null;
@@ -531,7 +531,7 @@ export class EditPolylineItem extends SGraphItem {
 
     /**
      * 绘制基本图形
-     * */
+     */
     drawBaseLine(painter: SPainter): void {
         // 绘制基本图形
         painter.pen.color = this.strokeColor;

+ 1 - 1
docs/guides/edit/items/src/EditText.ts

@@ -134,7 +134,7 @@ export class EditText extends SObjectItem {
      *
      * @param   x   x坐标
      * @param   y   y坐标
-     * */
+     */
     moveToOrigin(x: number, y: number): void {
         this.moveTo(this.x + x, this.y + y);
     } // Function moveToOrigin()

+ 5 - 5
docs/guides/edit/undo/src/SGraphAddCommand.ts

@@ -33,7 +33,7 @@ import { SUndoCommand } from "@persagy-web/base";
  * 添加item命令
  *
  * @author  panglixiang
- * */
+ */
 export class SGraphAddCommand extends SGraphCommand {
     /** 命令名称    */
     readonly command: string;
@@ -47,7 +47,7 @@ export class SGraphAddCommand extends SGraphCommand {
      *
      * @param   scene   item所在场景
      * @param   item    命令item对象
-     * */
+     */
     constructor(scene: SGraphScene, item: SGraphItem) {
         super(scene);
         this.item = item;
@@ -60,7 +60,7 @@ export class SGraphAddCommand extends SGraphCommand {
      * 合并命令
      *
      * @return  boolean 是否已执行合并
-     * */
+     */
     mergeWith(command: SUndoCommand): boolean {
         return false;
     } // Function mergeWith()
@@ -68,7 +68,7 @@ export class SGraphAddCommand extends SGraphCommand {
     /**
      * 重做
      *
-     * */
+     */
     redo(): void {
         this.item.parent = this.parent;
         // @ts-ignore
@@ -78,7 +78,7 @@ export class SGraphAddCommand extends SGraphCommand {
     /**
      * 撤销
      *
-     * */
+     */
     undo(): void {
         this.item.parent = null;
         // @ts-ignore

+ 144 - 0
docs/guides/standard/appoint.md

@@ -0,0 +1,144 @@
+# 代码格式约定
+
+::: details 目录
+[[toc]]
+:::
+
+## 格式约定
+
+### 要求
+
+启动`ESLint`,不可存在语法报错问题。特殊情况,无法解决的,提出,共同探讨。
+
+### 缩进
+缩进统一为4格
+
+### 注释
+
+单行注释符后留一个空格
+```typescript
+// this is comment
+```
+
+如果某段代码有功能未实现,或者有待完善,必须添加`TODO`标记,`TODO`前后应留一个空格
+```typescript
+  private drawBox(painter: SPainter): void {
+        // TODO 未实现绘制方块
+    }
+```
+
+属性注释格式
+```typescript
+/** ... */
+```
+功能函数注释:注释将会以预定格式出现在API文档中。它以“/**”开头,以“*/”结束,其间的每一行均以“*”开头(均与开始符的第一个“*”对齐),且注释内容与“*”间留一个空格
+```typescript
+/**
+ * 功能说明
+ *
+ * @param 参数名    参数说明
+ * @param 参数名    参数说明
+ * @param 参数名    参数说明
+ * @return 返回值说明
+ */
+```
+
+### 语法
+
+私有变量以下划线_开头
+
+```typescript
+private _index = -1;
+```
+
+`import`导入时,需顶格,使用`{}`引用模块时,`{}`中前后需空一格
+```typescript
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { v1 as uuid } from "uuid";
+import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
+</script>
+```
+
+类添加类的注释头 姓名 + 邮箱,如果多个,用逗号分割。
+```javascript
+/**
+ * 俄罗斯方块视图
+ *
+ * @author 郝洁 <haojie@persagy.com>
+ */
+
+/**
+ * 俄罗斯方块视图
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.com>,郝洁 <haojie@persagy.com>
+ */
+```
+
+类中的属性,方法函数添加注释,if语句,for循环需添加注释,括号前后加空格,语句结束需空一行
+```typescript {23,24,26}
+class TestView extends SCanvasView {
+    /** 背景表示数组 */
+    map: number[][] = [];
+    /**
+     * 构造函数
+     *
+     * @param id canvas DOM id
+     */
+    constructor(id: string) {
+        super(id);
+    }
+}
+
+   /**
+    * 是否碰撞
+    *
+    * @param x     x 坐标
+    * @param y     y 坐标
+    * @param dir   方块变形索引
+    * @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;
+                }
+            }
+        }
+        return false;
+    }
+```
+```typescript {4,8}
+    switch (type) { // 类型判断
+            case 0:     // 空白
+                break;
+
+            case -1:    // 边界
+                painter.drawRoundRect(x, y, 28, 28, 6);
+                break;
+
+            default:    // 填充
+                painter.drawRoundRect(x, y, 28, 28, 6);
+                break;
+        }
+```
+
+```typescript {7,12}
+  private remove(): void {
+        // 循环行数,不包含底部填充2行
+        for (let row = 0; row < 20; row++) {
+            for (let col = 2; col < 12; col++) {
+             // ...
+            }
+
+            if (flag) { // 标记删除
+                // ...
+            }
+        }
+
+        if (removeCount > 0) {   // 记录消除行数
+           // ...
+    }
+```

+ 34 - 13
docs/guides/standard/git.md

@@ -4,17 +4,38 @@
 [[toc]]
 :::
 
+## 提交格式
 
-- `feat` 增加新功能
-- `fix` 修复问题/BUG
-- `style` 代码风格相关无影响运行结果的
-- `perf` 优化/性能提升
-- `refactor` 重构
-- `revert` 撤销修改
-- `test` 测试相关
-- `docs` 文档/注释
-- `chore` 依赖更新/脚手架配置修改等
-- `workflow` 工作流改进
-- `ci` 持续集成
-- `types` 类型定义文件更改
-- `wip` 开发中
+```shell script
+<type>(<scope>): <subject>
+```
+`subject` 是对变更的简要描述。
+
+`scope` 改动涉及的区域范围,范围可以是指定提交更改位置的任何东西。例如$location, $browser, $compile, $rootScope, ngHref, ngClick, ngView等等。
+
+`type` 则定义了此次变更的类型,只能使用下面几种类型:
+
+* `feat` 增加新功能
+* `fix` 修复问题/BUG(该bug若有编号,eg:#3055,带入当前编号)
+* `style` 代码风格相关无影响运行结果的
+* `perf` 优化/性能提升
+* `refactor` 重构
+* `revert` 撤销修改
+* `test` 测试相关
+* `docs` 文档/注释
+* `chore` 依赖更新/脚手架配置修改等
+* `workflow` 工作流改进
+* `ci` 持续集成
+* `types` 类型定义文件更改
+* `wip` 开发中
+
+```shell script
+feat(compiler): 添加平面图编辑器的绘制和点选
+
+fix(v-model): 处理失焦事件
+
+fix(v-model): close #3055 ,平面图编辑器备注
+
+perf(core): 通过删除'foo'改善虚拟dom存在的差异
+
+```

+ 0 - 8
docs/guides/standard/typescript.md

@@ -72,13 +72,5 @@
    (比如 使用var x = 1; var y = 2;而不是var x = 1, y = 2;)。
 8. <font color=red> else </font>要在结束的}后另起一行。
 
-类添加类的注释头 姓名 + 邮箱,如果多个,用逗号分割。
-```javascript
-/**
- * 俄罗斯方块视图
- *
- * @author 郝建龙 <haojianlong@sagacloud.com>,郝洁 <haojie@persagy.com>
- */
-```