<template>
    <div>
        <el-button @click="create">创建</el-button>
        <el-button @click="undo">undo</el-button>
        <el-button @click="redo">redo</el-button>
        <canvas id="editLine" width="740" height="400" tabindex="0"/>
    </div>
</template>
<script>
    import { SGraphScene, SGraphView } from "@persagy-web/graph/";
    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
    import { SLineItem } from "@persagy-web/big/lib";

    export default {
        data() {
            return {
                scene: null,
                view: null
            };
        },
        mounted() {
            this.view = new SGraphView("editLine");
            this.scene = new SGraphScene();
            this.view.scene = this.scene;
        },
        methods: {
            create() {
                this.scene.root.children = [];
                const lineItem = new SLineItem(null, []);
                lineItem.status = SItemStatus.Create;
                this.scene.addItem(lineItem);
                this.scene.grabItem = lineItem;
                this.view.fitSceneToView();
            },
            undo() {
                if (this.scene.grabItem) {
                    this.scene.grabItem.undo();
                }
            },
            redo() {
                if (this.scene.grabItem) {
                    this.scene.grabItem.redo();
                }
            }
        }
    };
</script>