import {SItemStatus} from "@saga-web/big/lib";
<template>
    <div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button @click="change">00000</el-button>
        <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script lang="ts">
    import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
    import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
    import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
    import {SMouseEvent} from "@saga-web/base/lib";

    /**
     * 图例item  icon
     *
     * */
    class SImgTextItem extends SObjectItem{

        /** item状态  */
        _status:SItemStatus = SItemStatus.Create;
        get status():SItemStatus{
            return this._status;
        }
        set status(v:SItemStatus){
            this._status = v;
            this.update();
        }

        /** 是否显示文字  */
        _showText:boolean = true;
        get showText():boolean{
            return this._showText;
        }
        set showText(v:boolean){
            if (v === this._showText) {
                return
            }
            this._showText = v;
            if (v) {
                this.textItem.show();
            } else {
                this.textItem.hide();
            }
        }

        /** img Item    */
        img: SImageItem = new SImageItem(this);

        /** text item   */
        textItem: STextItem = new STextItem(this);

        /**
         * 构造体
         *
         * */
        constructor(parent:SGraphItem|null){
            super(parent);
            this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
            setTimeout(() => {
                this.img.width = 28;
                this.img.height = 28;
                this.update();
            },1000);
            this.img.isTransform = true;
            this.textItem.text = `图例item示例`;
            this.textItem.moveTo(16,0);
            this.textItem.font.textBaseLine = STextBaseLine.Middle;
        }

        /**
         * 宽高发发生变化
         *
         * @param   oldSize 改之前的大小
         * @param   newSize 改之后大小
         * */
        onResize(oldSize: SSize, newSize: SSize) {
            console.log(arguments);
        } // Function onResize()

        /**
         * 鼠标双击事件
         *
         * @param   event   鼠标事件
         * @return  是否处理事件
         * */
        onDoubleClick(event: SMouseEvent): boolean {
            console.log('doubleclick');
            this.status = SItemStatus.Edit;
            return true;
        } // Function onDoubleClick()

        /**
         * 宽高发发生变化
         *
         * @return  SRect   所有子对象的并集
         * */
        boundingRect(): SRect {
            let rect = new SRect();
            this.children.forEach(t => {
                rect = rect.unioned(t.boundingRect());
            });
            return rect;
        } // Function boundingRect()

        /**
         * Item绘制操作
         *
         * @param   painter painter对象
         */
        onDraw(painter: SPainter): void {
            painter.pen.lineWidth = painter.toPx(1);
            painter.pen.color = new SColor("#00FF00");
            painter.brush.color = SColor.Transparent;
            painter.drawRect(this.boundingRect());
            super.onDraw(painter);

            if (this.status == SItemStatus.Edit) {
                this.anchorList.forEach(t => {

                })
            }
        } // Function onDraw()
    }


    export default {
        name: "ImgTextItem",
        data() {
            return {
                scene: null,
                view: null,
                input:'',
            };
        },
        mounted() {
            console.log(22222222222222222)
            this.view = new SGraphView("editPolygon");
            this.scene = new SGraphScene();
            this.view.scene = this.scene;
            this.init()
        },
        methods:{
            init(){
                const item = new SImgTextItem(null);
                item.moveable = true;

                this.scene.addItem(item);
                this.view.fitSceneToView();
            },
            change() {

            }
        }
    }
</script>

<style scoped>
    canvas{
        border:1px solid #ccc;
    }
    canvas:focus{
        outline: none;
    }
</style>
