<template>
    <div>
        <el-button size="mini" @click="init">清空画布,并初始化折线item</el-button>
        <el-button size="mini" @click="undo">undo</el-button>
        <el-button size="mini" @click="redo">redo</el-button>
        <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script>
    import {SGraphScene, SGraphView} from "@persagy-web/graph/lib";
    import {SPolylineItem,SItemStatus} from "@persagy-web/big/lib";
    export default {
        name: "editPolyline",
        data() {
            return {
                scene: null,
                view: null,
                item: null,
            };
        },
        mounted() {
            this.view = new SGraphView("editPolyline");
            this.scene = new SGraphScene();
            this.view.scene = this.scene;
            this.init()
        },
        methods:{
            init(){
                this.scene.root.children = [];
                this.item = new SPolylineItem(null,[]);
                this.item.status = SItemStatus.Create;
                this.scene.addItem(this.item);
                this.scene.grabItem = this.item;
                this.view.update();
            },
            undo(){
                if(this.scene.grabItem) {
                    this.scene.grabItem.undo()
                }
            },
            redo(){
                if(this.scene.grabItem) {
                    this.scene.grabItem.redo()
                }
            }
        }
    }
</script>

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