fuse/src/views/draw-file/board/editCAD/Controls/UIControl.js

import { coordinate } from '../Coordinate.js'
import LayerEvents from '../enum/LayerEvents.js'
import UIEvents from '../enum/UIEvents.js'
import VectorType from '../enum/VectorType.js'
import { stateService } from '../Service/StateService.js'
import { floorplanService } from '../Service/FloorplanService.js'
import { historyService } from '../Service/HistoryService.js'
import { elementService } from '../Service/ElementService'
import { mathUtil } from '../MathUtil.js'
import { wallService } from '../Service/WallService.js'
import { tagService } from '../Service/TagService.js'
import { tableService } from '../Service/TableService.js'
import Constant from '../Constant'
import { addWall } from '../Controls/AddWall'
import { floorplanData } from '../FloorplanData.js'
import { signService } from '../Service/SignService.js'
import mitt from 'mitt'
import {history} from '../History/History.js'
import { iconService } from '../Service/IconService.js'

export default class UIControl{
    constructor(layer) {
        this.layer = layer
        this.bus = mitt()
        this.selectUI = null;

        // this.bus.emit('')
    }

    //点击左侧栏后，更新事件
    updateEventNameForSelectUI() {
        elementService.hideAll()
        //正在添加tag的时候，需要先删除
        const eventName = stateService.getEventName()
        // if (eventName == LayerEvents.AddTag) {
        //     let item = stateService.getDraggingItem()
        //     if (item && item.type == VectorType.Tag) {
        //         floorplanService.deleteTag(item.vectorId)
        //     }
        // }
        // stateService.clearItems()
        if (this.selectUI == UIEvents.Wall) 
        {
            stateService.setEventName(LayerEvents.AddWall)
        } 
        else if (this.selectUI == UIEvents.Table ) 
        {
            stateService.setEventName(LayerEvents.AddTable)
        } 
        else if (this.selectUI == UIEvents.Rectangle ) 
        {
            stateService.setEventName(LayerEvents.AddRectangle)
        } 
        else if (this.selectUI == UIEvents.Circle ) 
        {
            stateService.setEventName(LayerEvents.AddCircle)
        } 
        else if (this.selectUI == UIEvents.Arrow ) 
        {
            stateService.setEventName(LayerEvents.AddArrow)
        }
        else if (this.selectUI == UIEvents.Icon ) 
        {
            stateService.setEventName(LayerEvents.AddIcon)
        }  
        else if (this.selectUI == UIEvents.Tag) 
        {
            stateService.setEventName(LayerEvents.AddTag)
        } 
        else if (
            this.selectUI == UIEvents.Cigaret ||
            this.selectUI == UIEvents.FirePoint ||
            this.selectUI == UIEvents.LeftFootPrint ||
            this.selectUI == UIEvents.RightFootPrint ||
            this.selectUI == UIEvents.LeftShoePrint ||
            this.selectUI == UIEvents.RightShoePrint ||
            this.selectUI == UIEvents.FingerPrint ||
            this.selectUI == UIEvents.DeadBody ||
            this.selectUI == UIEvents.BloodStain 
        ) {
            stateService.setEventName(LayerEvents.AddSign)
        }
    }

    /**
     * @param {*} type 部件类型
     * @param {*} name 属性名称
     * @param {*} value 属性值
     */
    setAttributes(type, name, value) {
        let item = stateService.getFocusItem()
        switch (name) {
            case 'delete':
                this.deleteItem()
                break;
            case 'update':
                if(type == VectorType.Tag){
                    const tag = floorplanService.getTag(item.vectorId)
                    tag.setValue(value)
                }
                else if(type == VectorType.Table){
                    const table = floorplanService.getTable(item.vectorId)
                    table.setValue(value)
                }
                else if(type == VectorType.Title){
                    floorplanService.updateTitle(value);
                }
                else if(type == VectorType.BgImage){
                    floorplanService.updateBgImage(value,this.layer);
                }
                else if(type == VectorType.Compass){
                    floorplanService.updateCompass(value);
                }
                break;
        }
        history.save()
        stateService.clearFocusItem();
        this.bus.emit('hideAttribute')
        this.bus.emit('hideUI')
        this.layer.renderer.autoRedraw()
    }

    showAttributes(item) {
        let type = item.type;
        let value = null;
        switch (item.type) {
            case VectorType.Tag:
                const tag = floorplanService.getTag(item.vectorId)
                value = tag.value;
                break;
            case VectorType.Table:
                const table = floorplanService.getTable(item.vectorId)
                const cellIds = table.cells;
                value = [];
                for(let i=0;i<cellIds.length;++i){
                    for(let j=0;j<cellIds[i].length;++j){
                        const cell = floorplanService.getCell(cellIds[i][j])
                        value.push({
                            width:cell.width,
                            height:cell.height,
                            value:cell.value,
                            colIndex:cell.colIndex,
                            rowIndex:cell.rowIndex
                        })
                    }
                }
                break;
            case VectorType.Title:
                const title = floorplanService.getTitle()
                value = title.value;
                break;
            case VectorType.Compass:
                const compass = floorplanService.getCompass()
                value = compass.angle;
                break;
        }
        this.bus.emit('showAttribute',{
            type:type,
            value:value
        })
    }

    clearUI() {
        this.selectUI = null
        this.bus.emit('hideAttribute')
        this.bus.emit('hideUI')
    }

    deleteItem() {
        let item = stateService.getFocusItem()
        if (item) {
            if (item.type == VectorType.Wall) {
                floorplanService.deleteWall(item.vectorId)
            } else if (item.type == VectorType.Rectangle) {
                floorplanService.deleteRectangle(item.vectorId)
            } else if (item.type == VectorType.Circle) {
                floorplanService.deleteCircle(item.vectorId)
            } else if (item.type == VectorType.Arrow) {
                floorplanService.deleteArrow(item.vectorId)
            } else if (item.type == VectorType.Icon) {
                iconService.deleteIcon(item.vectorId)
            }  else if (item.type == VectorType.Tag) {
                floorplanService.deleteTag(item.vectorId)
            } else if (item.type == VectorType.Table) {
                floorplanService.deleteTable(item.vectorId)
            } else if (signService.isSign(item.type)) {
                floorplanService.deleteSign(item.vectorId)
            } else if (item.type == VectorType.WallCorner) {
                wallService.deleteWallCorner(item.vectorId)
            }
            history.save()
            this.layer.renderer.autoRedraw()
        }
    }

    getSignTypeForUI() {
        if (this.selectUI == UIEvents.Cigaret) {
            return VectorType.Cigaret
        } else if (this.selectUI == UIEvents.FirePoint) {
            return VectorType.FirePoint
        } else if (this.selectUI == UIEvents.LeftFootPrint) {
            return VectorType.LeftFootPrint
        } else if (this.selectUI == UIEvents.RightFootPrint) {
            return VectorType.RightFootPrint
        } else if (this.selectUI == UIEvents.LeftShoePrint) {
            return VectorType.LeftShoePrint
        } else if (this.selectUI == UIEvents.RightShoePrint) {
            return VectorType.RightShoePrint
        } else if (this.selectUI == UIEvents.FingerPrint) {
            return VectorType.FingerPrint
        } else if (this.selectUI == UIEvents.DeadBody) {
            return VectorType.DeadBody
        } else if (this.selectUI == UIEvents.BloodStain) {
            return VectorType.BloodStain
        }
    }

    exportJSON() {
        const json = {
            version: floorplanData.version,
            floors: floorplanData.floors,
            currentId: floorplanService.getCurrentId(),
        }
        return json
    }

    downloadCadImg(canvas, filename) {
        // 图片导出为 png 格式
        var type = 'png'
        var imgData = canvas.toDataURL(type, 1)

        let blobImg = this.base64ToBlob(imgData)
        return blobImg

        // 加工image data，替换mime type
        //imgData = imgData.replace(this._fixType(type), 'image/octet-stream')

        // download
        //this.saveFile(imgData, filename)
    }

    saveFile(data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        save_link.href = data
        save_link.download = filename

        var event = document.createEvent('MouseEvents')
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        save_link.dispatchEvent(event)
    }

    _fixType(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg')
        var r = type.match(/png|jpeg|bmp|gif/)[0]
        return 'image/' + r
    }

    base64ToBlob(base64) {
        let arr = base64.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }

    //截图
    menu_screenShot(fileName) {
        // this.menu_flex();
        // this.layer.stopAddVector()
        // setTimeout(function(){
        //     this.downloadCadImg(this.layer.canvas,fileName)
        // }.bind(this),100)

        this.layer.stopAddVector()
        return this.downloadCadImg(this.layer.canvas,fileName)
    }

    menu_flex() {
        coordinate.reSet()
        this.layer.renderer.autoRedraw()
    }

    initTopTable(value){
        let center = {
            x:770,
            y:200
        }
        center = coordinate.getXYFromScreen(center)
        let table = tableService.createTable(center)
        table.setValue(value)
        this.layer.renderer.autoRedraw()
    }

    initDownTable(value){
        let center = {
            x:770,
            y:520
        }
        center = coordinate.getXYFromScreen(center)
        let table = tableService.createTable(center)
        table.setValue(value)
        this.layer.renderer.autoRedraw()
    }
    /******************************************************************************************************************************************************************/
}