<template>
    <div style="margin-top: 10px;">
<!--        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
<!--        圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
        <canvas :id="id" width="740" height="400" />
    </div>
</template>

<script lang="ts">
    import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
    import {SPath, SPainter, SRect} from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";
    import { v1 as uuid } from "uuid";

    class sga extends SGraphItem{
        path: SPath;
        constructor(parent: SGraphItem | null){
            super(parent);
            this.path = new SPath();
            // @ts-ignore
            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:500,y:0}]);
            // @ts-ignore
            this.path.polygon([{x:0,y:0},{x:500,y:0},{x:300,y:500}]);
        }
        boundingRect(): SRect {
            return new SRect(0,0,700,1500)
        }

        onDraw(painter: SPainter) {
            painter.drawPath(this.path)
        }
    }

    @Component
    export default class AreaCanvas extends Vue {
        id: string = uuid();
        view: SGraphView | undefined;
        mounted() {
            this.init();
        };
        init(){
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();
            const item = new sga(null);
            scene.addItem(item);
            this.view.scene = scene;
            this.view.fitSceneToView();
            this.view.scalable = false;
        }
    }
</script>

<style scoped>

</style>
