# 选择容器

<template>
    <div>
        <canvas :id="id" width="740" height="400" tabindex="0"/>
    </div>
</template>

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

    class ResizeRect extends SGraphRectItem{
        resize(oldSize: SRect, newSize: SRect):void{
            this.width = newSize.width;
            this.height = newSize.height;
        }
    }

    @Component
    export default class SelectContainerCanvas extends Vue {
        id: string = uuid();
        view: SGraphView | undefined;
        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": {}
                },
            }
        };
        mounted():void {
            this.init()
        };
        init():void {
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();
            const item = new ResizeRect(null, this.rectData);
            scene.addItem(item);
            item.selectable = true;
            item.moveable = true;
            this.view.scene = scene;
            this.view.fitSceneToView();
            this.view.scalable = false;
        };
    }
</script>

<style scoped>

</style>