fuse/src/views/draw-file/board/editCAD/Renderer/Draw.js

import { floorplanService } from '../Service/FloorplanService.js'
import { stateService } from '../Service/StateService.js'
import { coordinate } from '../Coordinate.js'
import Style from '../Style.js'
import VectorType from '../enum/VectorType.js'
import SelectState from '../enum/SelectState.js'
import { mathUtil } from '../MathUtil.js'
import ElementEvents from '../enum/ElementEvents.js'
import Constant from '../Constant.js'
import { signService } from '../Service/SignService.js'
export default class Draw {
    constructor() {
        this.context = null
    }

    initContext(canvas) {
        if (canvas) {
            this.context = canvas.getContext('2d')
        } else {
            this.context = null
        }
    }

    clear() {
        this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
    }

    drawBackGround(color) {
        this.context.save()
        this.context.fillStyle = color
        this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height)
        this.context.restore()
    }

    // setSVGAttr(svgId,width,height){

    // }

    drawWall(vector) {
        let start = floorplanService.getPoint(vector.start)
        let end = floorplanService.getPoint(vector.end)

        let points = []
        points.push(start)
        points.push(end)

        points = points.sort(sortNumber.bind(this))
        function sortNumber(a, b) {
            return mathUtil.getDistance(start, a) - mathUtil.getDistance(start, b)
        }

        this.context.save()
        this.context.beginPath()
        this.context.lineCap = 'round' //线段端点的样式
        //this.context.lineJoin= 'miter';
        this.context.strokeStyle = Style.Wall.strokeStyle

        this.context.lineWidth = Style.Wall.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Wall.strokeStyle

        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        if (selectItem && selectItem.type == VectorType.Wall) {
            if (vector.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Wall.strokeStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.Wall) {
            if (vector.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Wall.strokeStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Wall) {
            if (vector.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Wall.strokeStyle
            }
        }

        for (let i = 0; i < points.length - 1; i += 2) {
            let point1 = coordinate.getScreenXY(points[i])
            let point2 = coordinate.getScreenXY(points[i + 1])
            this.context.moveTo(point1.x, point1.y)
            this.context.lineTo(point2.x, point2.y)
        }
        this.context.stroke()
        this.context.restore()
    }

    drawSpecialPoint() {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()
        let point = null

        this.context.save()
        if (selectItem) {
            point = floorplanService.getPoint(selectItem.vectorId)
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
        }
        if (draggingItem) {
            point = floorplanService.getPoint(draggingItem.vectorId)
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
        }
        if (focusItem) {
            point = floorplanService.getPoint(focusItem.vectorId)
            this.context.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Focus.Point.strokeStyle
            this.context.fillStyle = Style.Focus.Point.fillStyle
        }
        if (point == null) {
            this.context.restore()
            return
        }
        const pt = coordinate.getScreenXY({ x: point.x, y: point.y })
        let radius = Style.Point.radius

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    drawPoint(vector) {
        const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y })
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        // this.context.save()
        // this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio
        // this.context.strokeStyle = Style.Point.strokeStyle
        // this.context.fillStyle = Style.Point.fillStyle
        let radius = Style.Point.radius
        if (
            (draggingItem && draggingItem.type == VectorType.WallCorner && vector.vectorId == draggingItem.vectorId) ||
            (selectItem && selectItem.type == VectorType.WallCorner && vector.vectorId == selectItem.vectorId)
        ) {
            this.context.save()
            this.context.lineWidth = Style.Select.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Select.Point.strokeStyle
            this.context.fillStyle = Style.Select.Point.fillStyle
            radius = Style.Select.Point.radius
        } else if (focusItem && focusItem.type == VectorType.WallCorner && vector.vectorId == focusItem.vectorId) {
            this.context.save()
            this.context.lineWidth = Style.Focus.Point.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Focus.Point.strokeStyle
            this.context.fillStyle = Style.Focus.Point.fillStyle
            radius = Style.Focus.Point.radius
        } else {
            return
        }

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()

        // this.drawText({ x: vector.x, y: vector.y }, vector.vectorId)
    }

    // 文字
    drawText(position, txt, screenCoord, angle) {
        this.context.save()
        this.setCanvasStyle(Style.Font)
        if (coordinate.ratio == Constant.ratio) {
            this.context.font = '36px Microsoft YaHei'
        } else {
            this.context.font = '12px Microsoft YaHei'
        }

        let pt = { x: position.x, y: position.y }
        if (!screenCoord) {
            pt = coordinate.getScreenXY({ x: position.x, y: position.y })
        }

        if (angle) {
            this.context.translate(pt.x, pt.y)
            this.context.rotate(angle)
            //this.context.strokeText(txt, 0, 0)
            this.context.fillText(txt, 0, 0)
        } else {
            //this.context.strokeText(txt, pt.x, pt.y)
            this.context.fillText(txt, pt.x, pt.y)
        }

        this.context.restore()
    }

    drawTag(geometry, styleType, hide) {
        this.context.save()

        this.context.lineWidth = Style.Tag.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Tag.strokeStyle
        this.context.fillStyle = Style.Tag.fillStyle

        if (styleType) {
            if (styleType == 'style-1') {
                this.context.lineWidth = Style.DownLoad.style1.Tag.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style1.Tag.strokeStyle
                this.context.fillStyle = Style.DownLoad.style1.Tag.fillStyle
            } else if (styleType == 'style-2') {
                this.context.lineWidth = Style.DownLoad.style2.Tag.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style2.Tag.strokeStyle
                this.context.fillStyle = Style.DownLoad.style2.Tag.fillStyle
            } else if (styleType == 'style-3') {
                this.context.lineWidth = Style.DownLoad.style3.Tag.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style3.Tag.strokeStyle
                this.context.fillStyle = Style.DownLoad.style3.Tag.fillStyle
            } else if (styleType == 'style-4') {
                this.context.lineWidth = Style.DownLoad.style4.Tag.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style4.Tag.strokeStyle
                this.context.fillStyle = Style.DownLoad.style4.Tag.fillStyle
            }
        } else {
            const selectItem = stateService.getSelectItem()
            const draggingItem = stateService.getDraggingItem()
            const focusItem = stateService.getFocusItem()

            if (selectItem && selectItem.type == VectorType.Tag) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
                    this.context.fillStyle = Style.Select.Tag.fillStyle
                }
            } else if (draggingItem && draggingItem.type == VectorType.Tag) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Tag.strokeStyle
                    this.context.fillStyle = Style.Select.Tag.fillStyle
                }
            }

            if (focusItem && focusItem.type == VectorType.Tag) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Tag.strokeStyle
                    this.context.fillStyle = Style.Focus.Tag.fillStyle
                }
            }
        }

        //正在添加
        if (geometry.adding) {
            let points2d = geometry.points2d
            let points = []
            for (let i = 0; i < points2d.length; ++i) {
                points[i] = coordinate.getScreenXY({ x: points2d[i].x, y: points2d[i].y })
            }

            this.context.strokeStyle = Style.Tag.strokeStyle_adding
            this.context.fillStyle = Style.Tag.fillStyle_adding
            this.context.beginPath()
            this.context.moveTo(points[0].x, points[0].y)
            this.context.lineTo(points[1].x, points[1].y)
            this.context.lineTo(points[2].x, points[2].y)
            this.context.lineTo(points[3].x, points[3].y)
            this.context.closePath()
            this.context.stroke()

            for (let i = 4; i < points.length - 1; i += 2) {
                this.context.moveTo(points[i].x, points[i].y)
                this.context.lineTo(points[i + 1].x, points[i + 1].y)
            }
            this.context.stroke()
        } else {
            const fontSize = coordinate.ratio == Constant.ratio ? 36 : 12
            this.context.font = `400 ${fontSize}px Microsoft YaHei`

            //根据文字的长度，更新标注范围
            let title = geometry.title
            if (!hide && (title == null || title.trim() == '')) {
                console.log(floorplanService.$app.config)
                // title = '请输入名称'
                title = floorplanService.$app.config.i18n('cad.input')
            }
            geometry.des += ''
            if (geometry.des != '') {
                geometry.sideWidth = Math.max(this.context.measureText(title).width, this.context.measureText(parseFloat(geometry.des.replace(',', '')).toFixed(2)).width)
                geometry.setPoints2d()
            }

            let points2d = geometry.points2d
            let points = []
            for (let i = 0; i < points2d.length; ++i) {
                points[i] = coordinate.getScreenXY({ x: points2d[i].x, y: points2d[i].y })
            }

            let pt = { x: geometry.center.x, y: geometry.center.y }
            pt = coordinate.getScreenXY({ x: geometry.center.x, y: geometry.center.y })
            const fontWidth1 = this.context.measureText(title).width
            const line1 = mathUtil.createLine1({ x: (points[0].x + points[3].x) / 2, y: (points[0].y + points[3].y) / 2 }, { x: (points[2].x + points[1].x) / 2, y: (points[2].y + points[1].y) / 2 })

            let fontWidth2 = this.context.measureText(geometry.des + 'm²').width
            if (geometry.des != '' && geometry.unit == 'ft') {
                fontWidth2 = this.context.measureText(parseFloat(geometry.des.replace(',', '')).toFixed(2) + 'ft²').width
            }
            const line2 = mathUtil.createLine1(points[2], points[3])

            const fontStart1 = mathUtil.getDisPointsLine(line1, pt, fontWidth1 / 2, fontWidth1 / 2)
            const fontStart2 = mathUtil.getDisPointsLine(line2, { x: (points[2].x + points[3].x) / 2, y: (points[2].y + points[3].y) / 2 }, fontWidth2 / 2, fontWidth2 / 2)

            if (fontStart1.newpoint1.x < fontStart1.newpoint2.x) {
                this.context.fillText(title, fontStart1.newpoint1.x, fontStart1.newpoint1.y)
            } else {
                this.context.fillText(title, fontStart1.newpoint2.x, fontStart1.newpoint2.y)
            }
        }

        this.context.restore()
    }

    // drawFurniture2(geometry) {
    //     // //this.app.store.getAppImage(`images/cad/signs/${this.uiControl.selectUI}.svg`).then(img => {})
    //     // var img = new Image()
    //     // // img.src = 'chart.svg';
    //     // // if(geometry.geoType == ''){
    //     // //     img.src = '';
    //     // // }
    //     // document.body.appendChild(img)
    //     // img.onload = function () {
    //     //     var width = img.clientWidth * 1.5
    //     //     var height = img.clientHeight * 1.5
    //     //     var x = 2
    //     //     var y = 2
    //     //     this.context.drawImage(img, x, y, width, height)
    //     // }
    //     this.context.save()

    //     let imgWidth = geometry.sideLength * coordinate.res*50
    //     let imgHeight = geometry.sideLength * coordinate.res*50
    //     const pt = coordinate.getScreenXY({
    //         x: geometry.center.x - geometry.sideLength *50/ 2,
    //         y: geometry.center.y + geometry.sideLength *50/ 2,
    //     })
    //     // signService.getSign(geometry.geoType).then(img => {
    //     //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
    //     // })
    //     let img = signService.getSign(geometry.geoType)
    //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
    //     this.context.restore()
    // }

    drawCircle(element) {
        let radius = null
        const twoPi = Math.PI * 2
        const pt = coordinate.getScreenXY(element)

        this.context.save()
        if (element.name == ElementEvents.StartAddWall) {
            radius = Style.Element.StartAddWall.radius * coordinate.ratio
            this.context.strokeStyle = Style.Element.StartAddWall.strokeStyle
            this.context.fillStyle = Style.Element.StartAddWall.fillStyle
        }

        this.context.beginPath()
        this.context.arc(pt.x, pt.y, radius, 0, twoPi, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    drawLine(element) {
        let start = coordinate.getScreenXY(element.start)
        let end = coordinate.getScreenXY(element.end)

        this.context.save()
        if (element.name == ElementEvents.VCheckLinesX) {
            this.context.lineWidth = Style.Element.VCheckLinesX.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.VCheckLinesX.strokeStyle
            this.context.setLineDash([3, 2, 2])
            start.y = 0
            end.y = this.context.canvas.clientHeight
        } else if (element.name == ElementEvents.VCheckLinesY) {
            this.context.lineWidth = Style.Element.VCheckLinesY.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.VCheckLinesY.strokeStyle
            this.context.setLineDash([3, 2, 2])
            start.x = 0
            end.x = this.context.canvas.clientWidth
        } else if (element.name == ElementEvents.NewWall) {
            this.context.lineWidth = Style.Element.NewWall.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.NewWall.strokeStyle
            if (element.state == 'error') {
                this.context.strokeStyle = Style.Element.NewWall.errorStrokeStyle
            }
        } else if (element.name == ElementEvents.CheckLinesX) {
            this.context.lineWidth = Style.Element.CheckLinesX.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.CheckLinesX.strokeStyle
            this.context.setLineDash([3, 2, 2])
        } else if (element.name == ElementEvents.CheckLinesY) {
            this.context.lineWidth = Style.Element.CheckLinesY.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Element.CheckLinesY.strokeStyle
            this.context.setLineDash([3, 2, 2])
        }

        this.context.beginPath()
        this.context.moveTo(start.x, start.y)
        this.context.lineTo(end.x, end.y)
        this.context.stroke()
        this.context.restore()

        this.context.save()
        this.context.lineWidth = Style.Point.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Point.strokeStyle
        this.context.fillStyle = Style.Point.fillStyle
        let radius = Style.Point.radius
        this.context.beginPath()
        this.context.arc(start.x, start.y, radius * coordinate.ratio, 0, Math.PI * 2, true)
        this.context.stroke()
        this.context.fill()
        this.context.restore()
    }

    setCanvasStyle(style) {
        for (const key in style) {
            if (key != 'isFill' && key != 'isStroke') {
                this.context[key] = style[key]
            }
        }
    }

    /*************************************************************************************家具**********************************************************************************************/
    drawSign(geometry) {
        // if (geometry.geoType == VectorType.Cigaret) {
        //     this.drawCigaret(geometry)
        // } else if (geometry.geoType == VectorType.FirePoint) {
        //     this.drawFirePoint(geometry)
        // } else if (geometry.geoType == VectorType.SingleSofa) {
        //     this.drawSingleSofa(geometry)
        // } else if (geometry.geoType == VectorType.TeaTable) {
        //     this.drawTeaTable(geometry)
        // } else if (geometry.geoType == VectorType.Carpet) {
        //     this.drawCarpet(geometry)
        // } else if (geometry.geoType == VectorType.Plant) {
        //     this.drawPlant(geometry)
        // } else if (geometry.geoType == VectorType.DiningTable) {
        //     this.drawDiningTable(geometry)
        // } else if (geometry.geoType == VectorType.DoubleBed) {
        //     this.drawDoubleBed(geometry)
        // } else if (geometry.geoType == VectorType.SingleBed) {
        //     this.drawSingleBed(geometry)
        // } else if (geometry.geoType == VectorType.Wardrobe) {
        //     this.drawWardrobe(geometry)
        // } else if (geometry.geoType == VectorType.Dresser) {
        //     this.drawDresser(geometry)
        // } else if (geometry.geoType == VectorType.BedsideCupboard) {
        //     this.drawBedsideCupboard(geometry)
        // } else if (geometry.geoType == VectorType.Pillow) {
        //     this.drawPillow(geometry)
        // } else if (geometry.geoType == VectorType.GasStove) {
        //     this.drawGasStove(geometry)
        // } else if (geometry.geoType == VectorType.Cupboard) {
        //     this.drawCupboard(geometry)
        // } else if (geometry.geoType == VectorType.Bathtub) {
        //     this.drawBathtub(geometry)
        // } else if (geometry.geoType == VectorType.Closestool) {
        //     this.drawClosestool(geometry)
        // } else if (geometry.geoType == VectorType.Washstand) {
        //     this.drawWashstand(geometry)
        // } else if (geometry.geoType == VectorType.Desk) {
        //     this.drawDesk(geometry)
        // } else if (geometry.geoType == VectorType.BalconyChair) {
        //     this.drawBalconyChair(geometry)
        // } else if (geometry.geoType == VectorType.Elevator) {
        //     this.drawElevator(geometry)
        // }
    }

    /*
    drawTV(geometry) {
        const selectItem = stateService.getSelectItem()
        const draggingItem = stateService.getDraggingItem()
        const focusItem = stateService.getFocusItem()

        this.context.save()
        this.context.strokeStyle = Style.Furniture.strokeStyle
        this.context.fillStyle = Style.Furniture.fillStyle

        if (selectItem && selectItem.type == VectorType.TV) {
            if (geometry.vectorId == selectItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        } else if (draggingItem && draggingItem.type == VectorType.TV) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.TV) {
            if (geometry.vectorId == focusItem.vectorId) {
                this.context.strokeStyle = Style.Focus.Furniture.strokeStyle
                this.context.fillStyle = Style.Focus.Furniture.fillStyle
            }
        }

        const center = coordinate.getScreenXY({
            x: geometry.center.x,
            y: geometry.center.y,
        })
        const pt = coordinate.getScreenXY({
            x: geometry.center.x - (geometry.getLen() * geometry.scale) / 2,
            y: geometry.center.y + (geometry.getLen() * geometry.scale) / 2,
        })

        this.context.translate(center.x, center.y)
        this.context.rotate((geometry.angle / 180) * Math.PI)
        this.context.translate(pt.x - center.x, pt.y - center.y)
        this.context.scale((geometry.getLen() * geometry.scale * coordinate.res) / 32, (geometry.getLen() * geometry.scale * coordinate.res) / 32)
        this.context.lineWidth = 1 / ((geometry.getLen() * geometry.scale * coordinate.res) / 32)

        this.context.miterLimit = 4
        this.context.font = "15px ''"
        this.context.beginPath()
        this.context.moveTo(0.5, 12.5)
        this.context.lineTo(31.5, 12.5)
        this.context.lineTo(31.5, 20.5)
        this.context.lineTo(0.5, 20.5)
        this.context.lineTo(0.5, 12.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7.5, 16.5)
        this.context.lineTo(24.5, 16.5)
        this.context.lineTo(24.5, 18.5)
        this.context.lineTo(7.5, 18.5)
        this.context.lineTo(7.5, 16.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22, 16.5)
        this.context.lineTo(21, 14.5)
        this.context.lineTo(11, 14.5)
        this.context.lineTo(10, 16.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }
    */
    /***************************************************************************************************************************************************************************************/
}

const draw = new Draw()
export { draw }