<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="rect" width="740" height="400" />
    </div>
</template>

<script>

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

    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": {}
                        },
                    }
                },
                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() {
            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);

                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.item.radius = val;
                this.item2.radius = val;
            }
        }
    }
</script>

<style scoped>
</style>
