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

    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,
                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>