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

<template>
    <div class="edit-line">
        <div class="btn-list">
            <el-button :class="[cmdStatus=='choice' ? 'heightLight' : '']" size="small" @click="choice">选择</el-button>
            <el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">画线</el-button>
            <el-button :class="[cmdStatus=='edit' ? 'heightLight' : '']" size="small" @click="edit">编辑</el-button>
            <el-button :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']" size="small" @click="deleteItem">删除
            </el-button>
            <el-button :class="[cmdStatus=='undo' ? 'heightLight' : '']" size="small" @click="undo">undo</el-button>
            <el-button :class="[cmdStatus=='redo' ? 'heightLight' : '']" size="small" @click="redo">redo</el-button>
            <el-button :class="[cmdStatus=='eqDrawLine' ? 'heightLight' : '']" size="small" @click="eqDrawLine">垂直水平划线
            </el-button>
        </div>
        <div class="content">
            <div class="left">
                <canvas id="edit_line" width="700" height="460" tabindex="0"/>
            </div>
            <div class="line-property">
                <el-card shadow="always">
                    <div class="always-item">
                        <span>线宽:</span>
                        <input type="text"/>
                    </div>
                    <div class="always-item">
                        <span>线类型:</span>
                        <input type="text"/>
                    </div>
                    <div class="always-item">
                        <span>线颜色:</span>
                        <input type="text"/>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import { SGraphScene, SGraphView } from "@persagy-web/graph/";
    import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
    import { EditLineItem } from "./../../../../../guides/edit/items/src/EditLineItem";
    //注： 开发者引入 SWallItem 包为： import {SWallItem} from "@persagy-web/edit/";
    export default {
        name: "line",
        data() {
            return {
                scene: null,
                view: null,
                isCreated: false, //是否创建完成
                cmdStatus: 'choice'      //选中状态

            };
        },
        mounted() {
            this.view = new SGraphView("edit_line");
            this.scene = new SGraphScene();
            this.view.scene = this.scene;

        },
        methods: {
            create() {
                this.cmdStatus = 'create';
                // this.scene.root.children = [];
                const lineItem = new EditLineItem(null, []);
                lineItem.status = SItemStatus.Create;
                lineItem.connect("finishCreated", this, this.finishCreated);
                this.scene.addItem(lineItem);
                this.scene.grabItem = lineItem;
                this.scene.updated()
            },
            // 完成创建后的回调
            finishCreated() {
                this.cmdStatus = 'choice'
            }
        }
    };
</script>

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

        .content {
            display: flex;

            .left {
                flex: 1;
            }

            .line-property {
                width: 300px;

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

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