소스 검색

Merge branch 'master' of http://39.106.8.246:3003/doc/persagy-web-doc

YaolongHan 4 년 전
부모
커밋
29573421c2

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

@@ -7,20 +7,27 @@
 </template>
 
 <script>
-    import {SGraphAreaGroupItem,SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import {SPath} from "@persagy-web/draw/lib";
+
+    class sga extends SGraphItem{
+        constructor(parent){
+            super(parent);
+            this.path = new SPath();
+            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}])
+        }
+        onDraw(painter) {
+            console.log(this.path);
+            painter.drawPath(this.path)
+        }
+    }
 
     export default {
         name: "areaCanvas",
         data(){
             return{
                 id: 'area'+Date.now(),
-                view: '',
-                outline: [
-                    [
-                        [{X: 0, Y:0},{X: 0, Y:-100},{X: 100, Y:-100}],
-                        // [{X: 800, Y:200},{X: 800, Y:800},{X: 200, Y:800},{X: 200, Y:200}]
-                    ]
-                ]
+                view: ''
             }
         },
         mounted() {
@@ -30,7 +37,7 @@
             init(){
                 this.view = new SGraphView(this.id);
                 const scene = new SGraphScene();
-                const item = new SGraphAreaGroupItem(null, {OutLine: this.outline});
+                const item = new sga(null);
                 scene.addItem(item);
                 this.view.scene = scene;
                 this.view.fitSceneToView();

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

@@ -18,7 +18,7 @@
                 time: Date.now(),
                 rectData: {
                     Outline: [
-                        [{X:0,Y:0},{X:0,Y:-1000},{X:700,Y:-1500},{X:500,Y:-1000},{X:200,Y:0}]
+                        [{X:0,Y:0},{X:0,Y:1000},{X:700,Y:1500},{X:500,Y:1000},{X:200,Y:0}]
                     ],
                     Style: {
                         "Default":{
@@ -48,7 +48,6 @@
         },
         methods:{
             init(){
-                console.log(this.time);
                 this.view = new SGraphView(`polygon${this.time}`);
                 const scene = new SGraphScene();
 

+ 87 - 88
docs/.vuepress/components/scene/items/rect.vue

@@ -2,106 +2,105 @@
     <div style="margin-top: 10px;">
         <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
         圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>
-        <canvas id="rect" width="740" height="400" />
+        <canvas :id="id" width="740" height="400" />
     </div>
 </template>
 
-<script>
+<script lang="ts">
 
     import {SGraphRectItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import { Component, Vue } from "vue-property-decorator";
 
-    export default {
-        name: "rect1",
-        data(){
-            return {
-                view: '',
-                item: '',
-                item2: '',
-                R: 0,
-                rectData: {
-                    X: 0,
-                    Y: 0,
-                    Width: 500,
-                    Height: 500,
-                    Radius: 0,
-                    Style: {
-                        "Default":{
-                            "Stroke": "#cccccc",
-                            "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
-                            "LineWidth": 2,
-                            "Effect": {}
-                        },
-                        "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 Rect 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,
+            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": {}
+                },
+            }
+        };
+        rectData2 = {
+            X: 1000,
+            Y: 0,
+            Width: 500,
+            Height: 500,
+            Radius: 0,
+            Style: {
+                "Default":{
+                    "Stroke": "#cccccc",
+                    "Fill": "#ffccee",
+                    "LineWidth": 2,
+                    "Effect": {}
+                },
+                "Selected": {
+                    "Stroke": "#66ff66",
+                    "Fill": "#ff33ee",
+                    "LineWidth": 3,
+                    "Effect": {}
+                },
+                "Disabled": {
+                    "Stroke": "#333333",
+                    "Fill": "#afafaf",
+                    "LineWidth": 1,
+                    "Effect": {}
                 },
-                rectData2: {
-                    X: 1000,
-                    Y: 0,
-                    Width: 500,
-                    Height: 500,
-                    Radius: 0,
-                    Style: {
-                        "Default":{
-                            "Stroke": "#cccccc",
-                            "Fill": "#ffccee",
-                            "LineWidth": 2,
-                            "Effect": {}
-                        },
-                        "Selected": {
-                            "Stroke": "#66ff66",
-                            "Fill": "#ff33ee",
-                            "LineWidth": 3,
-                            "Effect": {}
-                        },
-                        "Disabled": {
-                            "Stroke": "#333333",
-                            "Fill": "#afafaf",
-                            "LineWidth": 1,
-                            "Effect": {}
-                        },
-                    }
-                }
             }
-        },
-        mounted() {
+        };
+        private mounted (): void {
             this.init();
-        },
-        methods:{
-            init(){
-                this.view = new SGraphView('rect');
-                const scene = new SGraphScene();
-
-                this.item = new SGraphRectItem(null, this.rectData);
-                this.item.selectable = true;
-                scene.addItem(this.item);
+        }
+        init(): void {
+            this.view = new SGraphView(this.id);
+            const scene = new SGraphScene();
+            this.item = new SGraphRectItem(null, this.rectData);
+            this.item.selectable = true;
+            scene.addItem(this.item);
 
-                this.item2 = new SGraphRectItem(null, this.rectData2);
-                this.item2.selectable = true;
-                scene.addItem(this.item2);
+            this.item2 = new SGraphRectItem(null, this.rectData2);
+            this.item2.selectable = true;
+            scene.addItem(this.item2);
 
-                this.view.scene = scene;
-                this.view.fitSceneToView();
-                this.view.scalable = false;
-            },
-            changeEnable(){
-                if (this.item) {
-                    this.item.enabled = !this.item.enabled;
-                }
-            },
-            // 修改圆角半径
-            changeY(val) {
+            this.view.scene = scene;
+            this.view.fitSceneToView();
+            this.view.scalable = false;
+        }
+        changeEnable(): void{
+            if (this.item) {
+                this.item.enabled = !this.item.enabled;
+            }
+        }
+        // 修改圆角半径
+        changeY(val: number): void {
+            if (this.item){
                 this.item.radius = val;
+            }
+            if(this.item2) {
                 this.item2.radius = val;
             }
         }

+ 10 - 31
docs/.vuepress/components/scene/items/svg.vue

@@ -5,34 +5,7 @@
 </template>
 
 <script>
-    import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
-    import {SRect} from "@persagy-web/draw/lib";
-
-    class SGraphSvgItem extends SGraphShape{
-
-        constructor(parent, data) {
-            super(parent, data.Style);
-            this.img = new Image();
-            this.img.src = data.Url;
-            this.img.onload = e => {
-                console.log(e);
-                console.log('---------------');
-                // this.width =
-                this.update()
-            };
-            this.img.onerror = err => {
-                console.log(err)
-            };
-        }
-
-        boundingRect() {
-            return new SRect(0,0,100,100)
-        }
-
-        onDraw(painter) {
-            painter.drawImage(this.img, 0, 0, 100, 100)
-        }
-    }
+    import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
 
     export default {
         name: "svgCanvas",
@@ -40,6 +13,14 @@
             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() {
@@ -50,9 +31,7 @@
                 this.view = new SGraphView(this.id);
                 const scene = new SGraphScene();
                 this.view.scene = scene;
-                // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
-                // https://cdn-img.easyicon.net/image/2019/panda-search.svg
-                const item = new SGraphSvgItem(null, { Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg'});
+                const item = new SGraphSvgItem(null, this.svgData);
                 scene.addItem(item);
                 this.view.fitSceneToView();
             }

+ 2 - 3
docs/.vuepress/shims-vue.d.ts

@@ -1,5 +1,4 @@
-// .vuepress/shims-vue.d.ts
 declare module '*.vue' {
-    import Vue from 'vue'
-    export default Vue
+    import Vue from 'vue';
+    export default Vue;
 }

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

@@ -98,14 +98,14 @@
         {
             ID: '',                             // ID
             Name: '',                           // 名称
-            GraphElementId: '',                 // 对应的图ID
+            GraphElementId: '',                 // 对应的图ID
             Node1ID: '',                        // 关联节点1_id
             Node2ID: '',                        // 关联节点2_id
             Anchor1ID: '',                      // 关联锚点1_id
             Anchor2ID: '',                      // 关联锚点2_id
             Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
             LineType: '',                       // 直线(Line),水平垂直
-            PointList: [],                      // 线的顶点坐标
+            PointList: [{X:0,Y:0,Z:0},...],     // 线的顶点坐标
             Style: {}                           // 线的绘图样式
         },
         ...

+ 19 - 0
docs/guides/scene/items/svg.md

@@ -3,5 +3,24 @@
 ::: details 目录
 [[toc]]
 :::
+## item 实例
+
+<GitCode fileUrl="/persagy-web-graph/src/items/SGraphSvgItem.ts" />
 
 <scene-items-svg />
+
+
+::: details 查看代码使用
+<<< @/docs/.vuepress/components/scene/items/svg.vue
+:::
+
+示例中展示了传入``` SGraphSvgItem ```的数据格式
+```json5
+{
+    Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',    // svg 图片的路径
+    X: 100, // 该 item 的位置 x 坐标
+    Y: 100, // 该 item 的位置 y 坐标                                                                  
+    Width: 200, // 该 item 宽
+    Height: 200 // 该 item 高
+}
+```

+ 8 - 3
package.json

@@ -13,15 +13,20 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.5",
+    "@persagy-web/big": "2.2.6",
     "@persagy-web/draw": "2.2.4",
-    "@persagy-web/graph": "2.2.7",
+    "@persagy-web/graph": "2.2.8",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",
-    "vue-property-decorator": "^8.4.2"
+    "vue-property-decorator": "^8.4.2",
+    "vue-class-component": "^7.0.2"
   },
   "devDependencies": {
+    "@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",