persagy-web-doc/docs/.vuepress/components/edit/items/edittext/edittext.vue

<template>
    <div class="edit-line">
        <!-- 所有按钮 -->
        <div class="btn-list">
        </div>
        <div class="content">
            <div class="left" id="left">
                <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
                <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
            </div>
            <div class="line-property">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>属性修改</span>
                    </div>
                    <div class="always-item">
                        <span>字号:</span>
                        <el-input-number size="small" v-model="size" @change="updateSize" :min="1"
                                         :max="50"></el-input-number>
                    </div>
                    <div class="always-item">
                        <span>文本框:</span>
                        <el-input
                                v-model="text"
                                @change="handleChangeText"
                                type="textarea"
                                :autosize="{ minRows: 1, maxRows: 1}"
                                placeholder="请输入内容"
                                style="width:200px;"
                        ></el-input>
                    </div>
                    <div class="always-item">
                        <span>线颜色:</span>
                        <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import { SGraphMoveCommand, SGraphPropertyCommand, SGraphScene, SGraphView } from "@persagy-web/graph/";
    import { SUndoStack } from "@persagy-web/base/lib";
    import { SFont } from "@persagy-web/draw/lib";
    //注： 开发者引入 SImageItem 包为： import {SImageItem} from "@persagy-web/edit/";
    import { EditText } from "./../../../../../guides/edit/items/src/EditText";
    import { hexify } from "./../../../../public/until/rgbaUtil";

    class SScene extends SGraphScene {
        undoStack = new SUndoStack();
        textItem = new EditText(null);

        constructor() {
            super();
            this.textItem.moveable = true;
            this.textItem.x = 100;
            this.textItem.y = 100;
            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("edit_polygon");
        }
    }

    export default {
        name: "edittext",
        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;
            // this.scene.onMouseUp = this.onMouseUp;
        },
        methods: {
            handleChangeText(text) {
                this.scene.updateText(text);
            },
            handleChangeColor(color) {
                this.scene.updateColor(color);
            },
            updateSize(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);
            },
            // 改变颜色
            changeColor(val) {
                this.scene.updateColor(hexify(val));
            },
            ///////////////////////////////////
            //// 以下为测试代码，请忽略
            // 设置tooltip位置
            /**
             * raduis 灵敏范围
             * e 鼠标事件对象
             * tipDom 浮动得dom
             * boxDom 最外层盒子
             * offset 偏移量
             */
            toolTipPosition(radius, e, tipDom, offset = 0) {
                // 滚动高度
                const screenTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                const screenLeft =
                    document.documentElement.scrollLeft || document.body.scrollLeft;
                radius = radius + offset;
                const mapBox = document.getElementById("edit_polygon");
                // 测试边界mousePosition =  1(右下) 2 （右上）3 （左上） 4 （左下）
                const mousePosition = this.Boxboundary(radius, e, mapBox);
                const absPosition = this.offsetTL(mapBox);
                const absPositionLeft = absPosition.left;
                const absPositionTop = absPosition.top;
                const mClientY = e.clientY + screenTop;
                const mClientX = e.clientX + screenLeft;
                const fuzzy_model_width = tipDom.offsetWidth;
                const fuzzy_model_height = tipDom.offsetHeight;
                // let  offsetTL
                if (mousePosition == 2) {
                    tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
                    tipDom.style.top = `${mClientY -
                    fuzzy_model_height -
                    absPositionTop -
                    offset}px`;
                } else if (mousePosition == 3) {
                    tipDom.style.left = `${mClientX -
                    fuzzy_model_width -
                    absPositionLeft -
                    offset}px`;
                    tipDom.style.top = `${mClientY -
                    fuzzy_model_height -
                    absPositionTop -
                    offset}px`;
                } else if (mousePosition == 4) {
                    tipDom.style.left = `${mClientX -
                    fuzzy_model_width -
                    absPositionLeft -
                    offset}px`;
                    tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
                } else {
                    tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
                    tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
                }
            },
            Boxboundary(radius, event, box) {
                const screenTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                const boxWidth = Number(box.style.width.slice(0, -2));
                const boxHeight = Number(box.style.height.slice(0, -2));
                const absPosition = this.offsetTL(box);
                const boxClientX = absPosition.left;
                const boxClientY = absPosition.top;
                const mouseX = event.clientX;
                const mouseY = event.clientY + screenTop;
                if (mouseY >= boxClientY + boxHeight - radius) {
                    if (mouseX <= radius + boxClientX) {
                        return 2;
                    } else if (mouseX >= boxClientX + boxWidth - radius) {
                        return 3;
                    } else {
                        return 2;
                    }
                } else if (mouseX >= boxClientX + boxWidth - radius) {
                    return 4;
                } else {
                    return 1;
                }
            },
            offsetTL(obj) {
                //获取到body的offsetTop和offsetLeft
                var t = 0,
                    l = 0;
                while (obj) {
                    t = t + obj.offsetTop;
                    l = l + obj.offsetLeft;
                    obj = obj.offsetParent;
                }
                return {
                    top: t,
                    left: l
                };
            },
            onMouseUp(event) {
                const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
                let parentDom = document.getElementById("left");
                parentDom.innerHTML = parentDom.innerHTML + dom;
                const textareaDom = this.$refs.textarea;
                // console.log('textareaDom',parentDom.children[0])
                this.toolTipPosition(1, event, textareaDom, 0);
            }
        },
        watch: {
            // cmdStatus(val) {
            //   this.scene.cmdStatus = val;
            // }
        }
    };
</script>

<style scoped lang="less">
    .text {
        overflow: auto;
        word-break: break-all;
        outline: none;
        // background: #409eff;
        position: absolute;
        left: 0;
        top: 0;
    }

    .edit-line {
        width: 100%;
        height: 500px;
        position: relative;

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