<template>
    <div style="margin-top: 10px;">
        <canvas :id="id" width="740" height="400" />
    </div>
</template>

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

    @Component
    export default class AreaCanvas extends Vue {
        id: string = uuid();
        view: SGraphView | undefined;
        areaData = {
            Outline: [
                [
                    [{X:0,Y:0},{X:0,Y:1000},{X:1000,Y:1000},{X:1000,Y:0}],
                    [{X:200,Y:200},{X:800,Y:200},{X:800,Y:800},{X:200,Y:800}]
                ],
                [
                    [{X:1000,Y:1000},{X:1200,Y:1000},{X:1200,Y:1200},{X:1000,Y:1200}]
                ]
            ],
            Style: {
                "Default":{
                    "Stroke": "#cccccc",
                    "Fill": "SLinearGradient{0,0;0,1200;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                    "LineWidth": 2,
                    "Effect": {}
                },
                "Selected": {
                    "Stroke": "#66ff66",
                    "Fill": "SRadialGradient{500,500,50;500,500,800;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
                    "LineWidth": 3,
                    "Effect": {}
                },
                "Disabled": {
                    "Stroke": "#333333",
                    "Fill": "#afafaf",
                    "LineWidth": 1,
                    "Effect": {}
                },
            }
        };

        mounted() {
            this.init();
        };
        init(){
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();
            const item = new SGraphAreaGroupItem(null, this.areaData);
            item.selectable = true;
            scene.addItem(item);
            this.view.scene = scene;
            this.view.fitSceneToView();
            this.view.scalable = false;
        }
    }
</script>

<style scoped>

</style>
