<template>
    <div style="margin-top: 10px;">
        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
        <canvas :id="'polygon'+time" width="740" height="400" />
    </div>
</template>

<script>

    import {SGraphScene, SGraphPolyGroupItem, SGraphView} from "@persagy-web/graph/lib";

    export default {
        name: "rect1",
        data(){
            return {
                view: '',
                item: '',
                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}]
                    ],
                    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() {
            this.init();
        },
        methods:{
            init(){
                this.view = new SGraphView(`polygon${this.time}`);
                const scene = new SGraphScene();

                this.item = new SGraphPolyGroupItem(null, this.rectData);
                this.item.selectable = true;
                scene.addItem(this.item);

                this.view.scene = scene;
                this.view.fitSceneToView();
                this.view.scalable = false;
            },
            changeEnable(){
                if (this.item) {
                    this.item.enabled = !this.item.enabled;
                }
            }
        }
    }
</script>

<style scoped>
</style>