<template>
    <div>
        <el-row>
            <el-button @click="undo">Undo</el-button>
            <el-button @click="redo">Redo</el-button>
            <el-button @click="reset">Reset</el-button>
        </el-row>
        <canvas id="imageItem1" width="740" height="400" tabindex="0"/>
    </div>
</template>

<script lang="ts">
    import { SUndoStack } from "@saga-web/base";
    import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
    import { SPoint, SPainter } from "@saga-web/draw/lib";
    import { SObjectItem } from "@saga-web/big/lib";

    /**
     * 图片item
     *
     * @author  张宇(taohuzy@163.com)
     */
    class SImageItem extends SObjectItem {

        /**
         * Item绘制操作
         *
         * @param   painter      绘画类
         */
        onDraw(painter: SPainter): void {
            console.log('draw');
        } // Function onDraw()
    }// Class SImageItem

    class SScene extends SGraphScene {
        undoStack = new SUndoStack();
        imageItem: SImageItem = new SImageItem(null);

        constructor() {
            super();
            this.addItem(this.imageItem);
            this.grabItem = this.imageItem;
            this.imageItem.connect("onMove", this, this.onItemMove.bind(this));
        }

        updateText(str: string): void {
            if (this.imageItem.text !== str) {
                let old = this.imageItem.text;
                this.imageItem.text = str;
                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "text", old, str));
            }
        }

        updateColor(color: string): void {
            if (this.imageItem.color !== color) {
                let old = this.imageItem.color;
                this.imageItem.color = color;
                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "color", old, color));
            }
        }

        updateSize(size: number): void {
            if (this.imageItem.font.size !== size) {
                let old = new SFont(this.imageItem.font);
                let font = new SFont(this.imageItem.font);
                font.size = size;
                this.imageItem.font = font;
                this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "font", old, font));
            }
        }

        onItemMove(item: SGraphItem, ...arg: any): void {
            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
        }

    }

    class ImageView extends SGraphView {
        constructor() {
            super("ImageItem1");
        }
    }

    export default {
        mounted(): void {
            let view = new ImageView();
            view.scene = this.scene;
        },
        data() {
            return {
                scene: new SScene(),
            }
        },
        methods: {
            undo() {},
            redo() {},
            reset() {},
        }
    }
</script>

<style scoped>

</style>