persagy-web-doc/docs/.vuepress/components/scene/items/SEditLine.vue

<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";

/**
 * 可编辑直线示例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
export default {
    data() {
        return {
            /** 命令所属的场景类 */
            scene: null,
            /** 实例化 view */
            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>