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

<template>
    <div>
        <el-row>
            <el-input
                    v-model="text"
                    @change="handleChangeText"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 1}"
                    placeholder="请输入内容"
                    style="width:200px;"
            ></el-input>
            <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
            <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
            <el-button @click="undo">Undo</el-button>
            <el-button @click="redo">Redo</el-button>
            <el-button @click="reset">Reset</el-button>
        </el-row>
        <canvas id="TextItem1" width="740" height="400" tabindex="0"/>
    </div>
</template>

<script>
import { SUndoStack } from "@persagy-web/base/lib";
import { SFont } from "@persagy-web/draw/lib";
import { SGraphMoveCommand, SGraphPropertyCommand, SGraphScene, SGraphView, STextItem } from "@persagy-web/graph/lib";

/**
 * 文本实例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class SScene extends SGraphScene {
    undoStack = new SUndoStack();
    textItem = new STextItem(null);

    /**
     * 构造函数
     */
    constructor() {
        super();
        this.textItem.moveable = true;
        this.textItem.x = 100;
        this.textItem.y = 100;
        this.textItem.selectable = true

        this.addItem(this.textItem);
        this.textItem.connect("onMove", this, this.onItemMove.bind(this));
    }

    updateText(str) {
        if (this.textItem.text !== str) {
            let old = this.textItem.text;
            this.textItem.text = str;
            this.undoStack.push(
                new SGraphPropertyCommand(this, this.textItem, "text", old, str)
            );
        }
    }

    updateColor(color) {
        if (this.textItem.color !== color) {
            let old = this.textItem.color;
            this.textItem.color = color;
            this.undoStack.push(
                    new SGraphPropertyCommand(this, this.textItem, "color", old, color)
                );
            }
        }

        updateSize(size) {
            if (this.textItem.font.size !== size) {
                let old = new SFont(this.textItem.font);
                let font = new SFont(this.textItem.font);
                font.size = size;
                this.textItem.font = font;
                this.undoStack.push(
                    new SGraphPropertyCommand(this, this.textItem, "font", old, font)
                );
            }
        }

        onItemMove(item, ...arg) {
            this.undoStack.push(
                new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
            );
        }
    }

class TestView extends SGraphView {
    /**
     * 构造函数
     */
    constructor() {
        super("TextItem1");
    }
}

    export default {
        data() {
            return {
                /** 命令所属的场景类 */
                scene: new SScene(),
                text: "测试文本",
                size: 20,
                color: "#333333"
            };
        },
        /**
         * 页面挂载
         */
        mounted() {
            let view = new TestView();
            this.scene.updateText(this.text);
            this.scene.updateColor(this.color);
            this.scene.updateSize(this.size);
            view.scene = this.scene;
        },
        methods: {
            handleChangeText(text) {
                this.scene.updateText(text);
            },
            handleChangeColor(color) {
                this.scene.updateColor(color);
            },
            handleChangeSize(size) {
                this.scene.updateSize(size);
            },
            undo() {
                this.scene.undoStack.undo();
            },
            redo() {
                this.scene.undoStack.redo();
            },
            reset() {
                this.text = "测试文本";
                this.size = 20;
                this.color = "#333333";
                this.scene.updateText(this.text);
                this.scene.updateColor(this.color);
                this.scene.updateSize(this.size);
            }
        }
    };
</script>

<style scoped>
</style>