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

<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 { SItemStatus, SPolylineItem } from "@persagy-web/big/lib";

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