Browse Source

修改组件为ts

haojianlong 4 years ago
parent
commit
3ac081202e

+ 79 - 82
docs/.vuepress/components/engine/arrow.vue

@@ -14,34 +14,36 @@
                 <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),
@@ -50,10 +52,10 @@
             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.None;
+        end:SArrowStyleType = SArrowStyleType.None;
+        mounted():void {
+            this.init()
+        };
+        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;
+        };
+        changeStart(val: SArrowStyleType):void{
+            this.item!!.begin = val
+        };
+        changeEnd(val: SArrowStyleType):void{
+            this.item!!.end = val
         }
     }
 </script>

+ 1 - 1
docs/.vuepress/components/engine/style/shadow.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";
+    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";

+ 2 - 2
docs/setup/index.js

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