YaolongHan 4 years ago
parent
commit
a8ec7cf133
43 changed files with 794 additions and 1102 deletions
  1. 45 53
      docs/.vuepress/components/GitCode.vue
  2. 28 30
      docs/.vuepress/components/big/MapDemo.vue
  3. 26 32
      docs/.vuepress/components/big/items/column.vue
  4. 24 44
      docs/.vuepress/components/big/items/door.vue
  5. 28 32
      docs/.vuepress/components/big/items/space.vue
  6. 25 31
      docs/.vuepress/components/big/items/virtualWall.vue
  7. 25 31
      docs/.vuepress/components/big/items/wall.vue
  8. 18 24
      docs/.vuepress/components/big/items/window.vue
  9. 42 45
      docs/.vuepress/components/big/items/zone.vue
  10. 83 86
      docs/.vuepress/components/engine/arrow.vue
  11. 106 112
      docs/.vuepress/components/engine/composite.vue
  12. 1 1
      docs/.vuepress/components/engine/gradient/GradRect.ts
  13. 45 0
      docs/.vuepress/components/engine/gradient/gradient.vue
  14. 0 39
      docs/.vuepress/components/engine/gradient/lineGradient.vue
  15. 0 39
      docs/.vuepress/components/engine/gradient/lineGradient2.vue
  16. 0 39
      docs/.vuepress/components/engine/gradient/radialGradient.vue
  17. 0 46
      docs/.vuepress/components/engine/gradient/radialGradient2.vue
  18. 0 59
      docs/.vuepress/components/engine/gradient/radialGradient3.vue
  19. 0 47
      docs/.vuepress/components/engine/gradient/radialGradient4.vue
  20. 0 46
      docs/.vuepress/components/engine/gradient/radialGradient5.vue
  21. 0 73
      docs/.vuepress/components/engine/gradient/radialGradient6.vue
  22. 70 0
      docs/.vuepress/components/engine/selectContainer.vue
  23. 3 2
      docs/.vuepress/components/engine/shape/Circle1.vue
  24. 5 2
      docs/.vuepress/components/engine/shape/DrawLine1.vue
  25. 4 2
      docs/.vuepress/components/engine/shape/DrawLine2.vue
  26. 5 3
      docs/.vuepress/components/engine/shape/DrawPolyline1.vue
  27. 4 2
      docs/.vuepress/components/engine/shape/DrawRect1.vue
  28. 11 13
      docs/.vuepress/components/engine/shape/path.vue
  29. 43 48
      docs/.vuepress/components/engine/style/shadow.vue
  30. 23 26
      docs/.vuepress/components/format/style.vue
  31. 3 1
      docs/.vuepress/components/scene/items/ClockItem.vue
  32. 2 1
      docs/.vuepress/components/scene/items/rect.vue
  33. 30 33
      docs/.vuepress/components/scene/items/svg.vue
  34. 13 0
      docs/.vuepress/public/assets/img/1.svg
  35. 5 5
      docs/.vuepress/public/until/rgbaUtil.ts
  36. 0 3
      docs/.vuepress/styles/palette.styl
  37. 5 4
      docs/guides/big/items/window.md
  38. 2 0
      docs/guides/engine/clip.md
  39. 28 42
      docs/guides/engine/gradient.md
  40. 34 0
      docs/guides/engine/selectContainer.md
  41. 1 0
      docs/guides/index.js
  42. 2 2
      docs/setup/index.js
  43. 5 4
      package.json

+ 45 - 53
docs/.vuepress/components/GitCode.vue

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

+ 28 - 30
docs/.vuepress/components/big/MapDemo.vue

@@ -6,40 +6,38 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
     import { SFloorParser } from "@persagy-web/big/lib";
-    export default {
-        name: "mapDemo",
-        data(){
-            return{
-                view:null,
-                scene:null,
-                map1: require('../../../public/assets/map/1.json'),
-                map2: require('../../../public/assets/map/2.json'),
-            }
-        },
-        mounted(){
+    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');
+
+        mounted():void{
             this.view = new SGraphView("mapDemo");
             this.init()
-        },
-        methods:{
-            init(){
-                this.showMap(1);
-            },
-            showMap(id){
-                this.scene = new SGraphScene();
-                this.view.scene = this.scene;
-                let parser = new SFloorParser();
-                parser.parseData(this[`map${id}`].EntityList[0].Elements);
-                parser.spaceList.forEach(t => this.scene.addItem(t));
-                parser.wallList.forEach(t => this.scene.addItem(t));
-                parser.virtualWallList.forEach(t => this.scene.addItem(t));
-                parser.doorList.forEach(t => this.scene.addItem(t));
-                parser.columnList.forEach(t => this.scene.addItem(t));
-                parser.casementList.forEach(t => this.scene.addItem(t));
-                this.view.fitSceneToView();
-            }
+        };
+        init(){
+            this.showMap('1');
+        };
+        showMap(id:string){
+            const scene = new SGraphScene();
+            this.view!!.scene = scene;
+            let parser = new SFloorParser();
+            // @ts-ignore
+            parser.parseData(this[`map${id}`].EntityList[0].Elements);
+            parser.spaceList.forEach(t => scene.addItem(t));
+            parser.wallList.forEach(t => scene.addItem(t));
+            parser.virtualWallList.forEach(t => scene.addItem(t));
+            parser.doorList.forEach(t => scene.addItem(t));
+            parser.columnList.forEach(t => scene.addItem(t));
+            parser.casementList.forEach(t => scene.addItem(t));
+            this.view!!.fitSceneToView();
         }
     }
 </script>

+ 26 - 32
docs/.vuepress/components/big/items/column.vue

@@ -4,42 +4,36 @@
     </div>
 </template>
 
-<script>
+<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";
 
-
-    export default {
-        name: "wall",
-        data(){
-            return {
-                view: null,
-                // 图中靠上位置的黑色矩形轮廓
-                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() {
+    @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();
-        },
-        methods:{
-            init(){
-                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});
-                scene.addItem(item2);
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
+        };
+        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});
+            scene.addItem(item2);
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 24 - 44
docs/.vuepress/components/big/items/door.vue

@@ -4,54 +4,34 @@
     </div>
 </template>
 
-<script>
+<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";
 
-
-    export default {
-        name: "wall",
-        data(){
-            return {
-                view: null,
-                // 图中靠上位置的黑色矩形轮廓
-                outline1:[[{X:12000,Y:10000},{X:12000,Y:30000}]],
-                // 图中靠下位置的,绘制多个图形,会覆盖
-                // 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() {
+    @Component
+    export default class WallCanvas extends Vue {
+        view: SGraphView | undefined;
+        outline1 = [[{X:12000,Y:10000},{X:12000,Y:30000}]];
+        mounted(): void {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('wall');
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                // 只模拟了轮廓数据
-                const item = new SDoorItem(null,
-                        {
-                            OutLine:this.outline1,
-                            FaceDirection: {X: 0, Y: -1, Z: 0},
-                            HandDirection: {X: 1, Y: 0, Z: 0}
-                        }
-                );
-                scene.addItem(item);
-                // 只模拟了轮廓数据
-                // const item2 = new SDoorItem(null,
-                //     {
-                //         OutLine:this.outline2,
-                //         FaceDirection: {X: -1, Y: 1, Z: 0},
-                //         HandDirection: {X: 1, Y: 1, Z: 0}
-                //     }
-                // );
-                // scene.addItem(item2);
-                this.view.fitSceneToView();
-                // this.view.scalable = false;
-            }
+        };
+        init(): void {
+            this.view = new SGraphView('wall');
+            const scene = new SGraphScene();
+            this.view.scene = scene;
+            // 只模拟了轮廓数据
+            // @ts-ignore
+            const item = new SDoorItem(null,
+                // @ts-ignore
+                {
+                    OutLine:this.outline1,
+                    FaceDirection: {X: 0, Y: -1, Z: 0},
+                    HandDirection: {X: 1, Y: 0, Z: 0}
+                }
+            );
+            scene.addItem(item);
+            this.view.fitSceneToView();
         }
     }
 </script>

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

@@ -4,42 +4,38 @@
     </div>
 </template>
 
-<script>
+<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";
 
-
-    export default {
-        name: "space",
-        data(){
-            return {
-                view: null,
-                // 图中靠上位置的黑色矩形轮廓
-                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() {
+    @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();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('wall');
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                // 只模拟了轮廓数据
-                const item = new SSpaceItem(null,{OutLine:this.outline1});
-                scene.addItem(item);
-                // 只模拟了轮廓数据
-                const item2 = new SSpaceItem(null,{OutLine:this.outline2});
-                scene.addItem(item2);
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
+        };
+        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});
+            scene.addItem(item);
+            // 只模拟了轮廓数据
+            // @ts-ignore
+            const item2 = new SSpaceItem(null,{OutLine:this.outline2});
+            scene.addItem(item2);
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 25 - 31
docs/.vuepress/components/big/items/virtualWall.vue

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

+ 25 - 31
docs/.vuepress/components/big/items/wall.vue

@@ -4,42 +4,36 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SWallItem} from "@persagy-web/big/lib/items/floor/SWallItem";
+    import { Component, Vue } from "vue-property-decorator";
 
-
-    export default {
-        name: "wall",
-        data(){
-            return {
-                view: null,
-                // 图中靠上位置的黑色矩形轮廓
-                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}]
-                ]
-            }
-        },
+    @Component
+    export default class WallCanvas extends Vue {
+        view: SGraphView | undefined;
+        // 图中靠上位置的黑色矩形轮廓
+        outline1 = [[{X:120,Y:10},{X:120,Y:30},{X:10,Y:30},{X:10,Y:10}]];
+        // 图中靠下位置的,中间掏洞
+        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() {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('wall');
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                // 只模拟了轮廓数据
-                const item = new SWallItem(null,{OutLine:this.outline1});
-                scene.addItem(item);
-                // 只模拟了轮廓数据
-                const item2 = new SWallItem(null,{OutLine:this.outline2});
-                scene.addItem(item2);
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
+        };
+        init(){
+            this.view = new SGraphView('wall');
+            const scene = new SGraphScene();
+            this.view.scene = scene;
+            // 只模拟了轮廓数据
+            const item = new SWallItem(null,{OutLine:this.outline1});
+            scene.addItem(item);
+            // 只模拟了轮廓数据
+            const item2 = new SWallItem(null,{OutLine:this.outline2});
+            scene.addItem(item2);
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 18 - 24
docs/.vuepress/components/big/items/window.vue

@@ -4,34 +4,28 @@
     </div>
 </template>
 
-<script>
+<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";
 
-
-    export default {
-        name: "wall",
-        data(){
-            return {
-                view: null,
-                // 图中靠上位置的黑色矩形轮廓
-                outline1:[[{X:120,Y:-30},{X:120,Y:-50},{X:10,Y:-50},{X:10,Y:-30}]],
-            }
-        },
-        mounted() {
+    @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();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('wall');
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                // 只模拟了轮廓数据
-                const item = new SWindowItem(null,{OutLine:this.outline1});
-                scene.addItem(item);
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
+        }
+        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;
         }
     }
 </script>

+ 42 - 45
docs/.vuepress/components/big/items/zone.vue

@@ -4,57 +4,54 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphScene, SGraphView} from "@persagy-web/graph/";
     import {SZoneItem} from "@persagy-web/big/lib/items/floor/ZoneItem";
+    import { Component, Vue } from "vue-property-decorator";
 
-    export default {
-        name: "zone",
-        data(){
-            return {
-                outline:[
-                    [
-                        // 未掏洞的空间
-                        [
-                            {"X":30150.15,"Y":82300.04,"Z":59400.0},
-                            {"X":30150.15,"Y":81400.04,"Z":59400.0},
-                            {"X":33400.15,"Y":82300.04,"Z":59400.0},
-                            {"X":30150.15,"Y":82300.04,"Z":59400.0}
-                        ],
-                    ],
-                    [
-                        // 掏洞的空间
-                        [
-                            {"X":25500.15,"Y":77100.04,"Z":59400.0},
-                            {"X":28200.15,"Y":77100.04,"Z":59400.0},
-                            {"X":28200.15,"Y":82300.04,"Z":59400.0},
-                            {"X":25500.15,"Y":82300.04,"Z":59400.0},
-                            {"X":25500.15,"Y":77100.04,"Z":59400.0}
-                        ],
-                        [
-                            {"X":25900.15,"Y":80300.04,"Z":59400.0},
-                            {"X":27200.15,"Y":80300.04,"Z":59400.0},
-                            {"X":27200.15,"Y":77900.04,"Z":59400.0},
-                            {"X":25900.15,"Y":77900.04,"Z":59400.0},
-                        ]
-                    ]
+    @Component
+    export default class ZoneCanvas extends Vue {
+        outline = [
+            [
+                // 未掏洞的空间
+                [
+                    {"X":30150.15,"Y":82300.04,"Z":59400.0},
+                    {"X":30150.15,"Y":81400.04,"Z":59400.0},
+                    {"X":33400.15,"Y":82300.04,"Z":59400.0},
+                    {"X":30150.15,"Y":82300.04,"Z":59400.0}
+                ],
+            ],
+            [
+                // 掏洞的空间
+                [
+                    {"X":25500.15,"Y":77100.04,"Z":59400.0},
+                    {"X":28200.15,"Y":77100.04,"Z":59400.0},
+                    {"X":28200.15,"Y":82300.04,"Z":59400.0},
+                    {"X":25500.15,"Y":82300.04,"Z":59400.0},
+                    {"X":25500.15,"Y":77100.04,"Z":59400.0}
+                ],
+                [
+                    {"X":25900.15,"Y":80300.04,"Z":59400.0},
+                    {"X":27200.15,"Y":80300.04,"Z":59400.0},
+                    {"X":27200.15,"Y":77900.04,"Z":59400.0},
+                    {"X":25900.15,"Y":77900.04,"Z":59400.0},
                 ]
-            }
-        },
+            ]
+        ];
+        view: SGraphView | undefined;
         mounted() {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('wall');
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                // 只模拟了轮廓数据
-                const item = new SZoneItem(null,{OutLine:this.outline});
-                scene.addItem(item);
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
+        };
+        init(){
+            this.view = new SGraphView('wall');
+            const scene = new SGraphScene();
+            this.view.scene = scene;
+            // 只模拟了轮廓数据
+            // @ts-ignore
+            const item = new SZoneItem(null,{OutLine:this.outline});
+            scene.addItem(item);
+            this.view.fitSceneToView();
+            this.view.scalable = false;
         }
     }
 </script>

+ 83 - 86
docs/.vuepress/components/engine/arrow.vue

@@ -14,46 +14,48 @@
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
         </div>
-        <canvas id="arrow" width="740" height="400" tabindex="0"/>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect, SArrowStyleType, SColor, SPoint} from "@persagy-web/draw/lib"
+    import {SRect, SArrowStyleType, SColor, SPoint, SPainter} from "@persagy-web/draw/lib"
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
     class Polyline extends SGraphItem{
         /** 起始点样式 */
         _begin = SArrowStyleType.Basic;
-        get begin(){
+        get begin():SArrowStyleType{
             return this._begin;
         }
-        set begin(v){
+        set begin(v:SArrowStyleType){
             this._begin = v;
             this.update();
         }
         /** 结束点样式 */
         _end = SArrowStyleType.Basic;
-        get end(){
+        get end():SArrowStyleType{
             return this._end;
         }
-        set end(v){
+        set end(v:SArrowStyleType){
             this._end = v;
             this.update();
         }
-        pointList = [
+        pointList: SPoint[] = [
             new SPoint(0, 0),
-            new SPoint(2000, 100),
-            new SPoint(1800, 1800),
-            new SPoint(1200, 1800),
             new SPoint(1000, 1000),
-            new SPoint(0, 0)
+            new SPoint(1200, 1800),
+            new SPoint(1800, 1800),
+            new SPoint(2000, 100),
+            // new SPoint(0, 0)
         ];
 
-        boundingRect() {
+        boundingRect():SRect {
             return new SRect(0,0,2000,1800);
         }
-        onDraw(painter) {
+        onDraw(painter:SPainter) {
             painter.pen.lineWidth = painter.toPx(1);
             const style = {
                 begin: this.begin,
@@ -66,81 +68,76 @@
         }
     }
 
-    export default {
-        name: "arrow",
-        data(){
-            return {
-                view:'',
-                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'
-                    }
-                ],
-                item: null,
-                tableData: [
-                    {
-                        val: 'None',
-                        desc: '无样式'
-                    },{
-                        val: 'Basic',
-                        desc: '基本箭头'
-                    },
-                    {
-                        val: 'Triangle',
-                        desc: '三角形箭头'
-                    },
-                    {
-                        val: 'Diamond',
-                        desc: '菱形箭头'
-                    },
-                    {
-                        val: 'Square',
-                        desc: '方形箭头'
-                    },
-                    {
-                        val: 'Circle',
-                        desc: '圆形箭头'
-                    },
-                ],
-                begin: SArrowStyleType.None,
-                end: SArrowStyleType.None
+    @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'
             }
-        },
-        mounted() {
-            this.init()
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('arrow');
-                const scene = new SGraphScene();
-                this.item = new Polyline(null);
-                scene.addItem(this.item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
+        ];
+        view: SGraphView | undefined;
+        item: Polyline | undefined;
+        tableData = [
+            {
+                val: 'None',
+                desc: '无样式'
+            },{
+                val: 'Basic',
+                desc: '基本箭头'
             },
-            changeStart(val){
-                this.item.begin = val
+            {
+                val: 'Triangle',
+                desc: '三角形箭头'
             },
-            changeEnd(val){
-                this.item.end = val
-            }
+            {
+                val: 'Diamond',
+                desc: '菱形箭头'
+            },
+            {
+                val: 'Square',
+                desc: '方形箭头'
+            },
+            {
+                val: 'Circle',
+                desc: '圆形箭头'
+            },
+        ];
+        begin:SArrowStyleType = SArrowStyleType.Basic;
+        end:SArrowStyleType = SArrowStyleType.Basic;
+        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;
+        };
+        changeStart(val: SArrowStyleType):void{
+            this.item!!.begin = val
+        };
+        changeEnd(val: SArrowStyleType):void{
+            this.item!!.end = val
         }
     }
 </script>

+ 106 - 112
docs/.vuepress/components/engine/composite.vue

@@ -10,33 +10,35 @@
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
         </div>
-        <canvas id="sourceOver" width="740" height="400" tabindex="0"/>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
-    import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
+    import {SColor, SRect, SCompositeType, SPainter} from "@persagy-web/draw/lib"
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
     class Circle extends SGraphItem{
         _composite = SCompositeType.SourceOver;
-        get composite(){
+        get composite():SCompositeType{
             return this._composite;
         }
-        set composite(v){
+        set composite(v:SCompositeType){
             this._composite = v;
             this.update();
         }
-        constructor(parent, com){
+        constructor(parent: SGraphItem | null, com:SCompositeType){
             super(parent);
             this.composite = com ? SCompositeType.SourceOver : com;
         }
 
 
-        boundingRect() {
+        boundingRect(): SRect {
             return new SRect(-500,-500,1500,1500);
         }
-        onDraw(painter) {
+        onDraw(painter: SPainter): void {
             painter.brush.color = SColor.Blue;
             painter.pen.color = SColor.Transparent;
             painter.drawRect(0,0,1000,1000);
@@ -47,113 +49,105 @@
             painter.drawCircle(0,0,500);
         }
     }
-
-    export default {
-        name: "sourceOver",
-        data(){
-            return {
-                view:'',
+    @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,
-                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: null,
-                tableData: [
-                    {
-                        val: 'source-over',
-                        desc: '默认。在目标图像上显示源图像。'
-                    },{
-                        val: 'source-atop',
-                        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: '使用异或操作对源图像与目标图像进行组合。'
-                    }
-                ]
+                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-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() {
+        ];
+        mounted():void {
             this.init()
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('sourceOver');
-                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){
-                if (this.circle) {
-                    this.circle.composite = val;
-                }
+        };
+        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;
             }
         }
     }

+ 1 - 1
docs/.vuepress/components/engine/gradient/GradRect.ts

@@ -7,7 +7,7 @@ export class GradRect extends SGraphItem{
     maxY = 1000;
     maxX = 1000;
     gradient: SRadialGradient | SLinearGradient |  null = null;
-    constructor(parent: SGraphItem, grad: SRadialGradient) {
+    constructor(parent: SGraphItem | null, grad: SRadialGradient | SLinearGradient) {
         super(parent);
         this.gradient = grad;
         this.gradient.addColorStop(0, new SColor('#ff483b'));

+ 45 - 0
docs/.vuepress/components/engine/gradient/gradient.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
+    import { SLinearGradient, SGradient, 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;
+        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);
+            }
+            const item = new GradRect(null, grad);
+            scene.addItem(item);
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        }
+    }
+</script>

+ 0 - 39
docs/.vuepress/components/engine/gradient/lineGradient.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="lineGradient1" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SLinearGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "lineGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('lineGradient1');
-                const scene = new SGraphScene();
-                const 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>
-
-<style scoped>
-
-</style>

+ 0 - 39
docs/.vuepress/components/engine/gradient/lineGradient2.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="lineGradient2" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SLinearGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "lineGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('lineGradient2');
-                const scene = new SGraphScene();
-                const grad = new SLinearGradient(0,0,1000,0);
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 39
docs/.vuepress/components/engine/gradient/radialGradient.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient1" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient1');
-                const scene = new SGraphScene();
-                const grad = new SRadialGradient(500,500,50,500,500,500);
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 46
docs/.vuepress/components/engine/gradient/radialGradient2.vue

@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient2" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient1",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient2');
-                const scene = new SGraphScene();
-                const grad = new SRadialGradient(
-                    250,
-                    250,
-                    50, //圆1半径
-                    500,
-                    500,
-                    500 //圆2半径
-                );
-                const item = new GradRect(null, grad);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 59
docs/.vuepress/components/engine/gradient/radialGradient3.vue

@@ -1,59 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient3" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import {SColor, SRadialGradient, SRect} from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient3",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient3');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    100,
-                    100,
-                    50, //圆1半径
-                    800,
-                    800,
-                    500 //圆2半径
-                );
-                // 渐变2
-                const grad2 = new SRadialGradient(
-                    200,
-                    200,
-                    300, //圆1半径
-                    800,
-                    800,
-                    50 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                const item2 = new GradRect(null,grad2);
-                item2.moveTo(1300,0);
-                scene.addItem(item2);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 47
docs/.vuepress/components/engine/gradient/radialGradient4.vue

@@ -1,47 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient4" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient4",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient4');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    200,
-                    200,
-                    200, //圆1半径
-                    800,
-                    800,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 46
docs/.vuepress/components/engine/gradient/radialGradient5.vue

@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <canvas id="radialGradient5" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-    export default {
-        name: "radialGradient5",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient5');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    400,
-                    400,
-                    200, //圆1半径
-                    600,
-                    600,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 0 - 73
docs/.vuepress/components/engine/gradient/radialGradient6.vue

@@ -1,73 +0,0 @@
-<!--
-  - **********************************************************************************************************************
-  -
-  -          !!
-  -        .F88X
-  -        X8888Y
-  -      .}888888N;
-  -        i888888N;        .:!              .I$WI:
-  -          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
-  -          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
-  -            +888888N;  .8888888Y                                  "&&8Y.}8,
-  -            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
-  -              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
-  -              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
-  -            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
-  -            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
-  -          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
-  -        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
-  -      .:R888888I
-  -      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
-  -        ~8888'
-  -        .!88~                                                                     All rights reserved.
-  -
-  - **********************************************************************************************************************
-  -->
-
-<template>
-    <div>
-        <canvas id="radialGradient6" width="740" height="400" tabindex="0"/>
-    </div>
-</template>
-
-<script>
-    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
-    import { SRadialGradient } from "@persagy-web/draw/lib";
-    import {GradRect} from "./GradRect";
-
-    export default {
-        name: "radialGradient6",
-        data(){
-            return {
-                view: ''
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('radialGradient6');
-                const scene = new SGraphScene();
-                // 渐变1
-                const grad1 = new SRadialGradient(
-                    500,
-                    500,
-                    200, //圆1半径
-                    500,
-                    500,
-                    200 //圆2半径
-                );
-                const item = new GradRect(null, grad1);
-                scene.addItem(item);
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

+ 70 - 0
docs/.vuepress/components/engine/selectContainer.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <canvas :id="id" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SGraphView, SGraphScene, SGraphRectItem} from "@persagy-web/graph/lib";
+    import {SRect} from "@persagy-web/draw/lib";
+
+    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": {}
+                },
+            }
+        };
+        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;
+        };
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 3 - 2
docs/.vuepress/components/engine/shape/Circle1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -60,8 +61,8 @@
         }
     }
 
-    export default {
-        name: "Circle1",
+    @Component
+    export default class Circle1 extends Vue {
         mounted(): void {
             new TestView();
         }

+ 5 - 2
docs/.vuepress/components/engine/shape/DrawLine1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -53,8 +54,10 @@
         }
     }
 
-    export default {
-        mounted() {
+
+    @Component
+    export default class DrawLine1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 4 - 2
docs/.vuepress/components/engine/shape/DrawLine2.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -40,8 +41,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawLine2 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 5 - 3
docs/.vuepress/components/engine/shape/DrawPolyline1.vue

@@ -4,9 +4,10 @@
 
 <script lang="ts">
     import {SCanvasView, SColor, SPainter, SPoint} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
-        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)]
+        arr:SPoint[]=[new SPoint(10,10),new SPoint(10,40),new SPoint(30,30)];
         constructor() {
             super("drawPolyline1")
         }
@@ -16,8 +17,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawPolyline1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 4 - 2
docs/.vuepress/components/engine/shape/DrawRect1.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SCanvasView, SColor, SPainter, SPoint, SRect, SSize } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     class TestView extends SCanvasView {
 
@@ -45,8 +46,9 @@
         }
     }
 
-    export default {
-        mounted() {
+    @Component
+    export default class DrawRect1 extends Vue {
+        mounted(): void {
             new TestView();
         }
     }

+ 11 - 13
docs/.vuepress/components/engine/shape/path.vue

@@ -2,33 +2,31 @@
     <canvas id="pathCanvas" width="740" height="250" />
 </template>
 
-<script>
-    import {SCanvasView, SPath} from "@persagy-web/draw/lib";
+<script lang="ts">
+    import {SCanvasView, SPainter, SPath} from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     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}]);
         }
 
-        onDraw(painter) {
-            console.log(this.path)
+        onDraw(painter: SPainter) {
             painter.drawPath(this.path)
         }
     }
-    export default {
-        name: 'pathCanvas',
-        data(){
-            return{
-                view: ''
-            }
-        },
-        mounted() {
-            new TestView222()
+    @Component
+    export default class PathCanvas extends Vue {
+        mounted(): void {
+            new TestView222();
         }
     }
 </script>

+ 43 - 48
docs/.vuepress/components/engine/style/shadow.vue

@@ -4,16 +4,22 @@
         x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
         y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
         阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
-        <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
+        <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
     </div>
 </template>
 
-<script>
-    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+<script lang="ts">
+    import { SColor, SPainter } from "@persagy-web/draw/lib";
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import {SGraphView} from "@persagy-web/graph/lib";
+    import { v1 as uuid } from "uuid";
 
-    class shadowView extends SCanvasView {
-
-        constructor(id) {
+    class shadowView extends SGraphView {
+        shadowBlur:number;
+        shadowColor:SColor;
+        shadowOffsetX:number;
+        shadowOffsetY:number;
+        constructor(id: string) {
             super(id);
             this.shadowBlur = 10;
             this.shadowColor = new SColor('#00000060');
@@ -21,7 +27,7 @@
             this.shadowOffsetY = 10;
         }
 
-        onDraw(canvas) {
+        onDraw(canvas:SPainter) {
             canvas.clearRect(0,0,740,400);
 
             canvas.pen.lineWidth = 1;
@@ -35,48 +41,37 @@
             canvas.drawRect(270,100,100,100);
         }
     }
-    export default {
-        name: "shadow",
-        data(){
-            return {
-                view: null,
-                blurl: 10,
-                X:10,
-                Y:10,
-                color:"#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('shadow');
-        },
-        methods:{
-            // 修改扩散距离
-            changeblur(v) {
-                this.view.shadowBlur = v;
-                this.view.update()
-            },
-            // x轴偏移量
-            changeX(v){
-                this.view.shadowOffsetX = v;
-                this.view.update()
-            },
-            // y轴偏移量
-            changeY(v){
-                this.view.shadowOffsetY = v;
-                this.view.update()
-            },
-            // 修改颜色
-            changeColor(v){
-                this.view.shadowColor = new SColor(v);
-                this.view.update()
-            }
+            this.view = new shadowView(this.id);
+        }
+        // 修改扩散距离
+        changeblur(v:number):void {
+            this.view!!.shadowBlur = 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()
+        };
+        // 修改颜色
+        changeColor(v:string){
+            this.view!!.shadowColor = new SColor(v);
+            this.view!!.update()
         }
     }
 </script>
-
-<style scoped>
-    canvas{
-        border: 1px solid #eeeeee;
-        outline: none;
-    }
-</style>

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

@@ -8,32 +8,29 @@
     </div>
 </template>
 
-<script>
-    export default {
-        name: "style",
-        data() {
-            return {
-                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 lang="ts">
+    import { Component, Prop, 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'
+            },
+        ];
     }
 </script>
 

+ 3 - 1
docs/.vuepress/components/scene/items/ClockItem.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
     import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
+    import { Component, Prop, Vue } from "vue-property-decorator";
 
     import {
         SColor,
@@ -218,7 +219,8 @@
         }
     }
 
-    export default {
+    @Component
+    export default class ClockCanvas extends Vue {
         mounted(): void {
             new TestView();
         }

+ 2 - 1
docs/.vuepress/components/scene/items/rect.vue

@@ -12,7 +12,7 @@
     import { Component, Vue } from "vue-property-decorator";
 
     @Component
-    export default class Rect extends Vue {
+    export default class RectCanvas extends Vue {
         id: string = 'rect' + Date.now();
         view: SGraphView | undefined;
         item: SGraphRectItem | undefined;
@@ -73,6 +73,7 @@
             }
         };
         private mounted (): void {
+            console.log(9999999999999)
             this.init();
         }
         init(): void {

+ 30 - 33
docs/.vuepress/components/scene/items/svg.vue

@@ -4,41 +4,38 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
 
-    export default {
-        name: "svgCanvas",
-        data(){
-            return{
-                id: 'svg' + Date.now(),
-                view: '',
-                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',
-                    X: 100,
-                    Y: 100,
-                    Width: 200,
-                    Height: 200
-                }
-            }
-        },
-        mounted() {
+    @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()
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView(this.id);
-                const scene = new SGraphScene();
-                this.view.scene = scene;
-                const item = new SGraphSvgItem(null, this.svgData);
-                scene.addItem(item);
-                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>
-
-<style scoped>
-
-</style>

+ 13 - 0
docs/.vuepress/public/assets/img/1.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="10" cy="10" r="8.5"/>
+	<path d="M10,2c4.41,0,8,3.59,8,8s-3.59,8-8,8s-8-3.59-8-8S5.59,2,10,2 M10,1c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9
+		S14.97,1,10,1L10,1z"/>
+</g>
+</svg>

+ 5 - 5
docs/.vuepress/public/until/rgbaUtil.ts

@@ -1,4 +1,5 @@
 import transparency from './transparency'
+
 //rgba转成16进制
 export function hexify(color: string) {
   if (color) {
@@ -13,12 +14,11 @@ export function hexify(color: string) {
           if (index == a) {
               opacity = i
           }
-      })
+      });
 
-      var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
-      
-      return hex
+      return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
   } else {
       return
   }
-}
+}
+

+ 0 - 3
docs/.vuepress/styles/palette.styl

@@ -19,6 +19,3 @@ canvas:focus{
 .el-table__body, .el-table__footer, .el-table__header{
   margin:0;
 }
-pre {
-  max-height: 800px;
-}

+ 5 - 4
docs/guides/big/items/window.md

@@ -11,9 +11,8 @@
     
 ### 数据说明
 ``` json5
-Walls:[
+Windows:[
     {
-        LevelId: '',                        // 层id
         Location: {X:0,Y:0,Z:0},            // 位置
         ModelId: '',                        // 模型id
         Name: '',                           // 名称
@@ -21,9 +20,11 @@ Walls:[
             [{X:0,Y:0,Z:0},...],            // 外轮廓 
             ...                             // 内轮廓
         ],                                  // 轮廓线
+        Owner: '',                          // 拥有者的RevitId
         SourceId: '',                       // 对应Revit模型id
-        Tag: '',                            // 补充信息
-        Width: 200,                         // 厚度
+        WallId: '',                         // 所属墙
+        Width: 200,                         // 宽度
+        Thick: 200,                         // 厚度
     },
     ...
 ]

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

@@ -2,3 +2,5 @@
 ::: details 目录
 [[toc]]
 :::
+
+裁剪方法从原始画布中剪切任意形状和尺寸。

+ 28 - 42
docs/guides/engine/gradient.md

@@ -18,75 +18,61 @@
 
 ## 线性渐变
 
-定义从上到下的渐变,作为矩形的填充样式:
+定义从上到下的渐变,作为矩形的填充样式: ``` arg="0,0,0,1000" ```
 
-<engine-gradient-lineGradient /> 
+<engine-gradient-gradient arg="0,0,0,1000" />
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/lineGradient.vue
-:::
-
-定义从左到右的渐变,作为矩形的填充样式:
+定义从左到右的渐变,作为矩形的填充样式:``` arg="0,0,1000,0" ```
 
-<engine-gradient-lineGradient2 /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/lineGradient2.vue
-:::
+<engine-gradient-gradient arg="0,0,1000,0" />
 
 ## 放射渐变
 
 绘制一个矩形,并用放射状/圆形渐变进行填充:
 
-情况1:圆心重合,圆1半径小于圆2半径
+情况1:圆心重合,圆1半径小于圆2半径 ``` arg="500,500,50,500,500,500" ```
 
-<engine-gradient-radialGradient /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient.vue
-:::
+<engine-gradient-gradient arg="500,500,50,500,500,500" />
 
 还有其他更多情况,实现更多图案,均可以调整参数来实现,一下列举几种情况
 
-情况2:圆1在圆2内部,圆1半径小于圆2半径
+情况2:圆1在圆2内部,圆1半径小于圆2半径  ``` arg="250,250,50,500,500,500" ```
 
-<engine-gradient-radialGradient2 /> 
-
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient2.vue
-:::
+<engine-gradient-gradient arg="250,250,50,500,500,500" />
 
 情况3:圆1和圆2相离时,并且大小不相同
 
-<engine-gradient-radialGradient3 /> 
+圆1半径小于圆2半径 ``` arg="100,100,50,800,800,500" ```
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient3.vue
-:::
+<engine-gradient-gradient arg="100,100,50,800,800,500" />
 
-情况4:当圆1和圆2相离时,并且大小相同
+圆1半径大于圆2半径 ``` arg="200,200,300,800,800,50" ```
 
-<engine-gradient-radialGradient4 /> 
+<engine-gradient-gradient arg="200,200,300,800,800,50" />
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient4.vue
-:::
+情况4:当圆1和圆2相离时,并且大小相同 ``` arg="200,200,200,800,800,200" ```
 
-情况5:当圆1和圆2相交时,并且大小相同
+<engine-gradient-gradient arg="200,200,200,800,800,200" />
 
-<engine-gradient-radialGradient5 /> 
+情况5:当圆1和圆2相交时,并且大小相同 ``` arg="400,400,200,800,800,200" ```
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient5.vue
-:::
+<engine-gradient-gradient arg="400,400,200,800,800,200" />
 
+情况6:当圆1和圆2相交时,圆心相同,并且大小相同 ``` arg="500,500,200,500,500,200" ```
 
-情况6:当圆1和圆2相交时,圆心相同,并且大小相同
+<engine-gradient-gradient arg="500,500,200,500,500,200" />
 
-<engine-gradient-radialGradient6 /> 
+::: tip 以上示例均基于 GradRect.vue 组件绘制
+
+::: details 查看组件使用代码
+<<< @/docs/.vuepress/components/engine/gradient/gradient.vue
+
+组件中需传入``` arg ```, 组件中解析此参数作为传入渐变类的参数
+
+如:传入 ``` arg="0,0,0,1000" ```, 组件中解析为线性渐变, 并将 4 个参数传入 ``` SLinearGradient ```;
+
+如:传入 ``` arg="500,500,50,500,500,500" ```, 组件中解析为放射性渐变, 并将 6 个参数传入 ``` SRadialGradient ```;
 
-::: details 查看代码
-<<< @/docs/.vuepress/components/engine/gradient/radialGradient6.vue
 :::
 
 ## 渐变属性

+ 34 - 0
docs/guides/engine/selectContainer.md

@@ -0,0 +1,34 @@
+# 选择容器
+
+::: details 目录
+[[toc]]
+:::
+
+1.选择
+
+2.对齐
+
+3.置顶
+
+4.单个对象调整大小,多个不可以
+
+5.不支持旋转
+
+6.移动多个选中的对象
+
+7.支持8个点的调整
+
+8.鼠标移动到8个点的时候变化,点也跟随变换
+
+9.始终处于最顶层
+
+10.根据背景调整自身颜色
+
+11.点击选择器以外取消选择
+
+<engine-selectContainer />
+
+
+::: details 查看实例代码
+<<< @/docs/.vuepress/components/engine/selectContainer.vue
+:::

+ 1 - 0
docs/guides/index.js

@@ -22,6 +22,7 @@ const content = [
             ["/guides/engine/transform", "变型"],
             ["/guides/engine/clip", "裁剪"],
             ["/guides/engine/arrow", "绘制带有箭头的线段"],
+            ["/guides/engine/selectContainer", "选择容器"],
         ]
     },
     {

+ 2 - 2
docs/setup/index.js

@@ -5,7 +5,7 @@ const content = [
             ["/setup/ide/nodejs", "Node.js"],
             ["/setup/ide/idea", "IDEA"],
             ["/setup/ide/vscode", "VS Code"],
-            ["/setup/ide/nodejs", "vue-cli"]
+            ["/setup/ide/nodejs", "vue-cli"],
         ]
     },
     {
@@ -17,4 +17,4 @@ const content = [
     },
 ];
 
-module.exports = content;
+module.exports = content;

+ 5 - 4
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.6",
-    "@persagy-web/draw": "2.2.4",
-    "@persagy-web/graph": "2.2.8",
+    "@persagy-web/big": "2.2.7",
+    "@persagy-web/draw": "2.2.5",
+    "@persagy-web/graph": "2.2.9",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",
@@ -23,10 +23,10 @@
     "vue-class-component": "^7.0.2"
   },
   "devDependencies": {
+    "@types/uuid": "^8.0.0",
     "@vue/cli-plugin-babel": "^3.9.0",
     "@vue/cli-plugin-typescript": "^3.9.0",
     "@vue/cli-service": "^3.9.0",
-    "vue-template-compiler": "^2.6.10",
     "@vuepress/plugin-back-to-top": "^1.2.0",
     "less": "^3.12.2",
     "less-loader": "^6.2.0",
@@ -34,6 +34,7 @@
     "polybooljs": "^1.2.0",
     "ts-loader": "^7.0.4",
     "typescript": "^3.9.2",
+    "vue-template-compiler": "^2.6.10",
     "vuepress": "^1.2.0",
     "vuepress-plugin-mathjax": "^1.2.8",
     "vuepress-plugin-typescript": "^0.2.0",