persagy-web/persagy-web-big-edit/SBaseEditScene.ts

/*
 * *********************************************************************************************************************
 *
 *          !!
 *        .F88X
 *        X8888Y
 *      .}888888N;
 *        i888888N;        .:!              .I$WI:
 *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
 *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
 *            +888888N;  .8888888Y                                  "&&8Y.}8,
 *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
 *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
 *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
 *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
 *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
 *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
 *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
 *      .:R888888I
 *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
 *        ~8888'
 *        .!88~                                                                     All rights reserved.
 *
 * *********************************************************************************************************************
 */

import { SGraphEditScene, SGraphAddCommand } from "../edit"
import { SMouseEvent } from "@persagy-web/base/lib";
import { SPoint, SFont, SColor, SRect, SArrowStyleType } from '@persagy-web/draw/lib';
import { SRectSelectItem, SItemStatus } from '@persagy-web/big/lib';
import { SGraphItem, SGraphSelectContainer } from "@persagy-web/graph/";
import { uuid } from "./until";
import { SBaseExpainEdit, SBaseArrow, SBaseEquipment, SBasePipeUninTool } from "./"

/**
 * big-edit 场景
 *
 * @author 韩耀龙 <han_yao_long@163.com>
 */
export class SBaseEditScene extends SGraphEditScene {

    /**图例节点 */
    Nodes: any = [];  // 图例节点，所有与工程信息化相关的图例（图标类型与区域）
    /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
    Markers: any = [];
    /**  管线对象 */
    Relations: any = [];

    copyString: any[] = []

    constructor() {
        super()
    }

    /**
     * 新增基础类注释
     *
     * @param   event   鼠标事件参数
     */
    addExplainItem(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            name: '基础注释文本',
            /** 图标 */
            type: "Text",
            /** 位置  */
            pos: { x: event.x, y: event.y },
            /** 由应用自己定义  */
            properties: {
                type: "BaseExplain",
            },
            style: {
                default: {
                    text: '请在右侧属性栏输入文字！',
                    color: "#646c73",
                    font: 14,
                    backgroundcolor: "#f7f9facc",
                }
            }
        }
        const item = new SBaseExpainEdit(null, data);
        item.moveTo(event.x, event.y);
        item.selectable = true;
        item.moveable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.grabItem = null;
        this.finishCreated(item);
    }

    /**
     * 新增基础箭头（折线）
     *
     * @param event 鼠标事件
     */
    addPolyLineArrow(event: SMouseEvent): void {
        const data = {
            name: '基础箭头',
            type: "Arrow",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BaseArrow",
            },
            style: {
                outLine: [{ x: event.x, y: event.y }],
                begin: SArrowStyleType.None,  //开端箭头样式
                end: SArrowStyleType.None,    //结尾箭头样式
                isMove: true,                 //是否可以移动
                default: {
                }
            }
        }
        const item = new SBaseArrow(null, data);
        item.status = SItemStatus.Create;
        item.selectable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.grabItem = item;
        item.connect("finishCreated", this, this.finishCreated);
        item.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加基本设备item
     *
     * @param event 鼠标事件
     * @param legendObj 图例样式
     */
    addEuqipment(event: SMouseEvent, legendObj: any): void {
        const data = {
            /** 名称  */
            name: '基础设备',
            num: 1,
            size: { width: 50, height: 50 },
            /** 图标（Image），线类型(Line) */
            type: "Image",
            /** 位置  */
            pos: { x: event.x, y: event.y },
            /** 由应用自己定义  */
            properties: {
                type: "baseEquipment",
            },
            style: {
                default: {
                    strokecolor: "#c0ccda",
                    url: require('./../../../assets/images/equip/' + legendObj.url),
                }
            }
        }
        const item = new SBaseEquipment(null, data);
        item.status = SItemStatus.Create;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        item.selectable = true;
        item.moveable = true;
        this.grabItem = item;
        item.connect("finishCreated", this, this.finishCreated);
        item.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    } // Function addEuqipment()

    /**
    * 新增管道
    *
    * @param event 鼠标事件
    */
    addBasePipe(event: SMouseEvent) {
        const data = {
            name: '管道',
            type: "line",
            pos: { x: 0, y: 0 },
            properties: {
                type: "BasePolyline",
            },
            style: {
                outLine: [{ x: event.x, y: event.y }],
                default: {
                }
            }
        }
        const item = new SBasePipe(null, data);
        item.status = SItemStatus.Create;
        item.selectable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.grabItem = item;
        item.connect("finishCreated", this, this.finishCreated);
        item.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加基本管道联通器
     *
     * @param event 鼠标事件
     * @param cmd 命令
     */
    addPipeUninTool(event: SMouseEvent, cmd: string): void {
        const cmdList = {
            'wantou': 2,
            'santong': 3,
            'sitong': 4,
        }
        const data = {
            /** 名称  */
            name: '基础管道接头',
            /** 图标（Image），线类型(Line) */
            type: "Image",
            /** 位置  */
            pos: { x: event.x, y: event.y },
            /** 由应用自己定义  */
            properties: {
                type: "BasePipeUninTool",
            },
            style: {
                uninToolType: cmdList[cmd] ? cmdList[cmd] : 2,  //2,3,4 分别分二头连接器、三头连接器、四头连接器
                default: {
                    strokecolor: "#c0ccda",
                }
            }
        }
        const item = new SBasePipeUninTool(null, data);
        item.status = SItemStatus.Create;
        item.selectable = true;
        item.moveable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.grabItem = item;
        item.connect("finishCreated", this, this.finishCreated);
        item.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 重做
     *
     * @return any
     */
    redo(): void {
        if (this.grabItem && this.grabItem.redo) {
            this.grabItem.redo()
        } else {
            this.undoStack.redo();
        }
    }

    /**
     * 撤销
     *
     * @return any
     */
    undo(): void {
        if (this.grabItem && this.grabItem.undo) {
            this.grabItem.undo()
        } else {
            this.undoStack.undo();
        }
    }

    /**
     * 删除
     *
     * @return item[]
     */
    deleteItem(): any {
        if (this.selectContainer.count == 0) {
            return []
        }
        let itemList = this.selectContainer.itemList;
        itemList.forEach((element: any) => {
            this.removeItem(element)
        });
        if (this.view) {
            this.view.update()
        }
        return itemList
    }

    /**
     * 框选
     *
     */
    addRectSelect(event: SMouseEvent): void {
        let point = new SPoint(event.x, event.y);
        let rect = new SRectSelectItem(null, point);
        this.addItem(rect);
        this.grabItem = rect;
    }

    /**
     * 计算框选交集
     */
    groupSelect(ctrl: boolean) {
        // if (!ctrl) {
        //     this.selectContainer.clear()
        // }
        if (this.grabItem instanceof SRectSelectItem) {
            const rect = this.grabItem.boundingRect();
            this.arrToSelect(this.root.children, rect)
        }
    }

    /**
     * 选中item:框选
     */
    private arrToSelect(arr: SGraphItem[], rect: SRect) {
        if (Array.isArray(arr) && arr.length) {
            arr.forEach(t => {
                if (!(t instanceof SGraphSelectContainer) && t.parent) {
                    let temp = t.boundingRect();
                    let lefttop = t.mapToScene(temp.left, temp.top)
                    let rightbottom = t.mapToScene(temp.right, temp.bottom)
                    let r = new SRect(lefttop, rightbottom)
                    if (rect.isIn(r)) {
                        this.selectContainer.toggleItem(t)
                    }
                }
            })
        }
    }

    /////////////////////////////////////////////////////////////////////
    // 鼠标事件

    /**
     * 鼠标左键按下
     *
     * @param   event   鼠标事件参数
     */
    onMouseDown(event: SMouseEvent): any {
        if (!super.onMouseDown(event) && 1 == event.buttons) {
            this.addRectSelect(event);
        }
    }

    /**
     * 鼠标抬起
     *
     * @param   event   鼠标事件参数
     */
    onMouseUp(event: SMouseEvent): boolean {
        if (this.grabItem) {
            // 鼠标抬起时，如果grabItem为框选则删除框选item
            if (this.grabItem instanceof SRectSelectItem) {
                this.removeItem(this.grabItem);
                this.groupSelect(false);
                this.grabItem = null;

                if (this.view) {
                    this.view.update()
                }
                return true;
            }
            return this.grabItem.onMouseUp(event);
        }
        return super.onMouseUp(event)
    }

    /**
     * 复制
     *
     */
    copy() {
        const itemList = this.selectContainer.itemList
        if (itemList.length) {
            itemList.forEach(t => {
                const data = JSON.parse(JSON.stringify(t.toData()))
                data.ID = uuid()
                this.copyString.push(data)

            })
            // 生成复制字符串
            console.log(this.copyString)
            // 获取input dom
            const input = document.createElement('input');
            input.setAttribute('id', 'COPYINPUT')
            input.value = JSON.stringify(this.copyString)
            sessionStorage.setItem("copyString", input.value);
            document.body.appendChild(input);
            input.select()
            document.execCommand('copy');
            input.style.display = 'none';
            console.log(input.value, Date.now());
            document.body.removeChild(input)
        }
    }

    /**
     * 粘贴
     *
     */
    paste() {
        const copyList = JSON.parse(JSON.stringify(this.copyString));
        copyList.forEach((t: any) => {
            if (this.view) {
                t.Pos.X += 10,
                    t.Pos.Y += 10
            }
            t.moveable = true;
            console.log('t', t)
            this.addItem(t)
        });
        this.view ? this.view.update() : ''
        console.log(this.view)
    }
}