persagy-web-doc/docs/.vuepress/components/edit/undo/undo.vue

<template>
    <div class="edit-line">
        <div class="btn-list">
            <el-button
                    :class="[cmdStatus=='createLine' ? 'heightLight' : '']"
                    size="small"
                    @click="create('createLine')"
            >画线
            </el-button>
            <el-button
                    :class="[cmdStatus=='createText' ? 'heightLight' : '']"
                    size="small"
                    @click="create('createText')"
            >文本
            </el-button>
            <el-button
                    :class="[cmdStatus=='createImage' ? 'heightLight' : '']"
                    size="small"
                    @click="create('createImage')"
            >图片
            </el-button>
            <el-button size="small" @click="undo">undo</el-button>
            <el-button size="small" @click="redo">redo</el-button>
            <!-- <el-tooltip class="item" effect="dark" content="双击 item 也可进入编辑状态" placement="top-start"> -->
            <!-- <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button> -->
            <!-- </el-tooltip> -->
            <el-button
                    :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
                    size="small"
                    @click="deleteItem"
            >删除
            </el-button>
        </div>
        <div class="content">
            <div class="left">
                <canvas id="edit_line" width="700" height="460" tabindex="0"/>
            </div>
        </div>
    </div>
</template>

<script>
import { SGraphScene, SGraphView } from "@persagy-web/graph/";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import { SUndoStack } from "@persagy-web/base/lib";
import { EditLineItem } from "./../../../../guides/edit/items/src/EditLineItem";
import { EditImageItem } from "./../../../../guides/edit/items/src/EditImageItem";
import { EditText } from "./../../../../guides/edit/items/src/EditText";
import { SGraphAddCommand } from "./../../../../guides/edit/undo/src/SGraphAddCommand";

/**
 * undo对象示例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class SScene extends SGraphScene {
    undoStack = new SUndoStack();
    editCmd = "";

    /**
     * 构造函数
     */
    constructor() {
        super();
        this.editCmd = "";
        this.selectContainer.connect("listChange", this, this.listChange);
    }

    /**
     * 鼠标按下事件
     * @param event 鼠标事件
     */
    onMouseDown(event) {
        if (this.editCmd == "createLine") {
            this.addLine(event);
            this.clearCmdStatus();
        } else if (this.editCmd == "createText") {
            this.addText(event);
            this.clearCmdStatus();
        } else if (this.editCmd == "createImage") {
            this.addImage(event);
            this.clearCmdStatus();
        } else if (this.editCmd == "") {
            super.onMouseDown(event);
        }
    }

    /**
     * 清空命令
     */
    clearCmdStatus() {
        this.editCmd = "";
    }

    /**
     *  新增线
     *
     * @param event   事件
     */
    addLine(event) {
        const lineItem = new EditLineItem(null, []);
        lineItem.status = SItemStatus.Create;
        lineItem.selectable = true;
        lineItem.x = event.x;
        lineItem.y = event.y;
        lineItem.connect("finishCreated", this, this.finishCreated);
        this.addItem(lineItem);
        this.undoStack.push(new SGraphAddCommand(this, lineItem));
        this.grabItem = lineItem;
    }

    /**
     * 新增文本
     *
     * @param event   事件
     */
    addText(event) {
        const textItem = new EditText(null);
        textItem.text = "测试文本";
        textItem.selectable = true;
        textItem.moveable = true;
        textItem.x = event.x;
        textItem.y = event.y;
        this.addItem(textItem);
        this.undoStack.push(new SGraphAddCommand(this, textItem));
        this.grabItem = textItem;
        textItem.connect("finishCreated", this, this.finishCreated);
    }

    /**
     * 新增图片
     *
     * @param event   事件
     */
    addImage(event) {
        const imageItem = new EditImageItem(null);
        imageItem.url =
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
        imageItem.width = 100;
        imageItem.height = 100;
        imageItem.selectable = true;
        imageItem.moveable = true;
        imageItem.x = event.x;
        imageItem.y = event.y;
        this.addItem(imageItem);
        this.undoStack.push(new SGraphAddCommand(this, imageItem));
    }

    /**
     * 完成item绘制
     */
    finishCreated() {
        this.grabItem = null;
    }

    /**
     * 还原操作
     */
    undo() {
        this.undoStack.undo();
        this.view.update();
    }

    /**
     * 重做
     */
    redo() {
        this.undoStack.redo();
        this.view.update();
    }

    listChange(list) {
        this.emitChoice(list);
    }

    /**
     * 删除
     *
     * @returns Item 类
     */
    delete() {
        let itemList = this.selectContainer.itemList;
        itemList.forEach((element) => {
            this.removeItem(element);
        });
        if (this.view) {
            this.view.update();
        }
        return itemList;
    }
}

    //注： 开发者引入 SWallItem 包为： import {SWallItem} from "@persagy-web/edit/";
    export default {
        name: "editLine",
        data() {
            return {
                /** 命令所属的场景类 */
                scene: null,
                view: null, // 实例化 view
                isCreated: false, // 是否创建完成
                cmdStatus: "", // 选中状态
            };
        },
        /**
         * 页面挂载
         */
        mounted() {
            console.log(SGraphAddCommand);
            this.view = new SGraphView("edit_line");
            this.scene = new SScene();
            this.view.scene = this.scene;
        },
        methods: {
            create(val) {
                this.scene.editCmd = val;
            },
            undo() {
                this.scene.undo();
            },
            redo() {
                this.scene.redo();
            },
            deleteItem() {
                this.scene.delete();
            },
        },
        watch: {},
        beforeCreate() {
        },
    };
</script>

<style scoped lang="less">
    .edit-line {
        width: 100%;
        height: 500px;

        .content {
            display: flex;
            justify-content: flex-start;

            .left {
                margin-right: 20px;
            }

            .line-property {
                width: 300px;
                margin-top: 20px;

                .always {
                    width: 100%;
                    height: 100%;
                }

                .always-item {
                    display: flex;
                    margin-top: 10px;
                    justify-content: space-between;
                }
            }
        }

        .heightLight {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }
</style>