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

<script>

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

    class Rect extends SGraphShape{
        constructor(parent, data) {
            super(parent, data.Style);
            this.leftTopX = data.X;
            this.leftTopyY= data.Y;
            this.width = data.Width;
            this.height = data.Height;
        }
        boundingRect() {
            return new SRect(this.leftTopX,this.leftTopyY,this.width,this.height);
        }
        onDraw(painter) {
            super.onDraw(painter);
            painter.drawRect(this.leftTopX,this.leftTopyY,this.width,this.height)
        }
    }
    export default {
        name: "rect1",
        data(){
            return {
                view: '',
                item: '',
                item2: '',
                rectData: {
                    X: 0,
                    Y: 0,
                    Width: 500,
                    Height: 500,
                    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,
                    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 Rect(null, this.rectData);
                this.item.selectable = true;
                scene.addItem(this.item);

                this.item2 = new Rect(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;
                }
            }
        }
    }
</script>

<style scoped>
</style>
