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 { compassService } from '../Service/CompassService'
import { furnitureService } from '../Service/FurnitureService.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, styleType) {
        let start = floorplanService.getPoint(vector.start)
        let end = floorplanService.getPoint(vector.end)

        let points = []
        points.push(start)
        for (let i = 0; i < vector.children.length; ++i) {
            let symbol = floorplanService.getSymbol(vector.children[i])
            points.push(symbol.startPoint)
            points.push(symbol.endPoint)
        }
        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

        if (vector.out || vector.important) {
            this.context.lineWidth = Style.Wall.important.lineWidth * coordinate.ratio
            this.context.strokeStyle = Style.Wall.important.strokeStyle
        } else {
            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 (styleType) {
            if (styleType == 'style-1') {
                if (vector.out || vector.important) {
                    this.context.lineWidth = Style.DownLoad.style1.Wall.important.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style1.Wall.important.strokeStyle
                } else {
                    this.context.lineWidth = Style.DownLoad.style1.Wall.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style1.Wall.strokeStyle
                }
            } else if (styleType == 'style-2') {
                if (vector.out || vector.important) {
                    this.context.lineWidth = Style.DownLoad.style2.Wall.important.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style2.Wall.important.strokeStyle
                } else {
                    this.context.lineWidth = Style.DownLoad.style2.Wall.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style2.Wall.strokeStyle
                }
            } else if (styleType == 'style-3') {
                if (vector.out || vector.important) {
                    this.context.lineWidth = Style.DownLoad.style3.Wall.important.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style3.Wall.important.strokeStyle
                } else {
                    this.context.lineWidth = Style.DownLoad.style3.Wall.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style3.Wall.strokeStyle
                }
            } else if (styleType == 'style-4') {
                if (vector.out || vector.important) {
                    this.context.lineWidth = Style.DownLoad.style4.Wall.important.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style4.Wall.important.strokeStyle
                } else {
                    this.context.lineWidth = Style.DownLoad.style4.Wall.lineWidth * coordinate.ratio
                    this.context.strokeStyle = Style.DownLoad.style4.Wall.strokeStyle
                }
            }
        } else {
            if (selectItem && selectItem.type == VectorType.Wall) {
                if (vector.vectorId == selectItem.vectorId) {
                    if (vector.out || vector.important) {
                        this.context.strokeStyle = Style.Select.Wall_out.strokeStyle
                    } else {
                        this.context.strokeStyle = Style.Select.Wall.strokeStyle
                    }
                }
            } else if (draggingItem && draggingItem.type == VectorType.Wall) {
                if (vector.vectorId == draggingItem.vectorId) {
                    if (vector.out || vector.important) {
                        this.context.strokeStyle = Style.Select.Wall_out.strokeStyle
                    } else {
                        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()

        // const mid = {
        //     x: (start.x + end.x) / 2,
        //     y: (start.y + end.y) / 2,
        // }
        // this.drawText(mid, vector.vectorId)

        if (
            (selectItem && selectItem.type == VectorType.Wall && vector.vectorId == selectItem.vectorId) ||
            (draggingItem && draggingItem.type == VectorType.Wall && vector.vectorId == draggingItem.vectorId) ||
            (focusItem && focusItem.type == VectorType.Wall && vector.vectorId == focusItem.vectorId)
        ) {
            //添加测量值
            this.drawMeasureTxt(start, end)
        }
    }

    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()
    }

    drawSingleDoor(geometry, styleType, noEnter) {
        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 })
        }
        const distance = mathUtil.getDistance(points[0], points[1])
        this.context.save()

        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.lineCap = 'square'
        this.context.strokeStyle = Style.Symbol.strokeStyle

        let isFill = false

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

            if (selectItem && selectItem.type == VectorType.SingleDoor && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            } else if (draggingItem && draggingItem.type == VectorType.SingleDoor && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            }

            if (focusItem && focusItem.type == VectorType.SingleDoor) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Symbol.strokeStyle
                    this.context.fillStyle = Style.Focus.Symbol.fillStyle
                    isFill = true
                }
            }
        }

        this.context.beginPath()
        this.context.moveTo(points[0].x, points[0].y)
        this.context.lineTo(points[1].x, points[1].y)
        this.context.arcTo(points[2].x, points[2].y, points[3].x, points[3].y, distance) // 创建弧
        this.context.closePath()
        this.context.stroke()
        if (isFill) {
            this.context.fill()
        }

        this.context.restore()

        if (!noEnter && geometry.enter != null) {
            this.drawEntranceDoor(geometry)
        }
    }

    drawDoubleDoor(geometry, styleType, noEnter) {
        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 })
        }
        const distance = mathUtil.getDistance(points[0], points[1])
        this.context.save()

        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.lineCap = 'square'
        this.context.strokeStyle = Style.Symbol.strokeStyle

        let isFill = false

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

            if (selectItem && selectItem.type == VectorType.DoubleDoor && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            } else if (draggingItem && draggingItem.type == VectorType.DoubleDoor && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            }

            if (focusItem && focusItem.type == VectorType.DoubleDoor) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Symbol.strokeStyle
                    this.context.fillStyle = Style.Focus.Symbol.fillStyle
                    isFill = true
                }
            }
        }

        this.context.beginPath()
        this.context.moveTo(points[0].x, points[0].y)
        this.context.lineTo(points[1].x, points[1].y)
        this.context.arcTo(points[4].x, points[4].y, points[5].x, points[5].y, distance) // 创建弧
        this.context.closePath()
        this.context.stroke()
        if (isFill) {
            this.context.fill()
        }

        this.context.beginPath()
        this.context.moveTo(points[2].x, points[2].y)
        this.context.lineTo(points[1].x, points[1].y)
        this.context.arcTo(points[4].x, points[4].y, points[3].x, points[3].y, distance) // 创建弧
        this.context.closePath()
        this.context.stroke()
        if (isFill) {
            this.context.fill()
        }

        this.context.restore()

        if (!noEnter && geometry.enter != null) {
            this.drawEntranceDoor(geometry)
        }
    }

    drawSlideDoor(geometry, styleType, noEnter) {
        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.save()
        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Symbol.strokeStyle
        //this.context.fillStyle = Style.Symbol.fillStyle

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

            if (selectItem && selectItem.type == VectorType.SlideDoor && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            } else if (draggingItem && draggingItem.type == VectorType.SlideDoor && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            }

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

        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()

        this.context.beginPath()
        this.context.moveTo(points[4].x, points[4].y)
        this.context.lineTo(points[5].x, points[5].y)
        this.context.lineTo(points[6].x, points[6].y)
        this.context.lineTo(points[7].x, points[7].y)
        this.context.closePath()
        this.context.stroke()

        this.context.restore()

        if (!noEnter && geometry.enter != null) {
            this.drawEntranceDoor(geometry)
        }
    }

    drawSingleWindow(geometry, styleType) {
        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.save()
        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Symbol.strokeStyle
        if (styleType) {
            if (styleType == 'style-1') {
                this.context.lineWidth = Style.DownLoad.style1.Symbol.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style1.Symbol.strokeStyle
            } else if (styleType == 'style-2') {
                this.context.lineWidth = Style.DownLoad.style2.Symbol.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style2.Symbol.strokeStyle
            } else if (styleType == 'style-3') {
                this.context.lineWidth = Style.DownLoad.style3.Symbol.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style3.Symbol.strokeStyle
            } else if (styleType == 'style-4') {
                this.context.lineWidth = Style.DownLoad.style4.Symbol.lineWidth * coordinate.ratio
                this.context.strokeStyle = Style.DownLoad.style4.Symbol.strokeStyle
            }
        } else {
            const selectItem = stateService.getSelectItem()
            const draggingItem = stateService.getDraggingItem()
            const focusItem = stateService.getFocusItem()

            if (selectItem && selectItem.type == VectorType.SingleWindow && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            } else if (draggingItem && draggingItem.type == VectorType.SingleWindow && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            }

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

        this.context.beginPath()
        this.context.moveTo(points[0].x, points[0].y)
        this.context.lineTo(points[1].x, points[1].y)
        this.context.stroke()

        this.context.beginPath()
        this.context.moveTo(points[2].x, points[2].y)
        this.context.lineTo(points[3].x, points[3].y)
        this.context.lineTo(points[4].x, points[4].y)
        this.context.lineTo(points[5].x, points[5].y)
        this.context.closePath()
        this.context.stroke()
        this.context.restore()
    }

    drawBayWindow(geometry, styleType) {
        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.save()
        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Symbol.strokeStyle
        //this.context.fillStyle = Style.Symbol.fillStyle

        let isFill = false

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

            if (selectItem && selectItem.type == VectorType.BayWindow && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            } else if (draggingItem && draggingItem.type == VectorType.BayWindow && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                    this.context.fillStyle = Style.Select.Symbol.fillStyle
                    isFill = true
                }
            }

            if (focusItem && focusItem.type == VectorType.BayWindow) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Symbol.strokeStyle
                    this.context.fillStyle = Style.Focus.Symbol.fillStyle
                    isFill = true
                }
            }
        }

        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()
        if (isFill) {
            this.context.fill()
        }

        this.context.beginPath()
        this.context.moveTo(points[5].x, points[5].y)
        this.context.lineTo(points[6].x, points[6].y)
        this.context.lineTo(points[7].x, points[7].y)
        this.context.lineTo(points[4].x, points[4].y)
        //this.context.closePath()
        this.context.stroke()
        this.context.restore()
    }

    drawFrenchWindow(geometry, styleType) {
        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.save()
        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Symbol.strokeStyle

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

            if (selectItem && selectItem.type == VectorType.FrenchWindow && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            } else if (draggingItem && draggingItem.type == VectorType.FrenchWindow && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            }

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

        this.context.beginPath()
        this.context.moveTo(points[0].x, points[0].y)
        this.context.lineTo(points[1].x, points[1].y)

        this.context.moveTo(points[2].x, points[2].y)
        this.context.lineTo(points[3].x, points[3].y)

        this.context.moveTo(points[4].x, points[4].y)
        this.context.lineTo(points[5].x, points[5].y)

        this.context.moveTo(points[2].x, points[2].y)
        this.context.lineTo(points[4].x, points[4].y)

        this.context.moveTo(points[3].x, points[3].y)
        this.context.lineTo(points[5].x, points[5].y)

        this.context.moveTo(points[6].x, points[6].y)
        this.context.lineTo(points[7].x, points[7].y)
        this.context.stroke()

        this.context.restore()
    }

    drawPass(geometry, styleType) {
        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.save()
        this.context.lineWidth = Style.Symbol.lineWidth * coordinate.ratio
        this.context.strokeStyle = Style.Symbol.strokeStyle

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

            if (selectItem && selectItem.type == VectorType.Pass && selectItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == selectItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            } else if (draggingItem && draggingItem.type == VectorType.Pass && draggingItem.selectIndex == SelectState.All) {
                if (geometry.vectorId == draggingItem.vectorId) {
                    this.context.strokeStyle = Style.Select.Symbol.strokeStyle
                }
            }

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

        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()

        this.context.beginPath()
        this.context.moveTo(points[4].x, points[4].y)
        this.context.lineTo(points[5].x, points[5].y)
        this.context.setLineDash([3, 2, 2])
        //this.context.dashedLine(points[4].x, points[4].y, points[5].x, points[5].y, dashGapArray);
        this.context.stroke()

        this.context.beginPath()
        this.context.moveTo(points[6].x, points[6].y)
        this.context.lineTo(points[7].x, points[7].y)
        this.context.setLineDash([3, 2, 2])
        //this.context.dashedLine(points[6].x, points[6].y, points[7].x, points[7].y, dashGapArray);
        this.context.stroke()
        this.context.restore()
    }

    drawBeam(geometry, styleType) {
        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.save()

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

        let isFill = false

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

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

            if (focusItem && focusItem.type == VectorType.Beam) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Component.strokeStyle
                    this.context.fillStyle = Style.Focus.Component.fillStyle
                    isFill = true
                }
            }
        }

        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()
        if (isFill) {
            this.context.fill()
        }

        //this.context.beginPath()
        this.context.moveTo(points[0].x, points[0].y)
        this.context.lineTo(points[2].x, points[2].y)
        //this.context.stroke()

        //this.context.beginPath()
        this.context.moveTo(points[1].x, points[1].y)
        this.context.lineTo(points[3].x, points[3].y)
        this.context.stroke()
        this.context.restore()
    }

    drawFlue(geometry, styleType) {
        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.save()

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

        let isFill = false

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

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

            if (focusItem && focusItem.type == VectorType.Flue) {
                if (geometry.vectorId == focusItem.vectorId) {
                    this.context.strokeStyle = Style.Focus.Component.strokeStyle
                    this.context.fillStyle = Style.Focus.Component.fillStyle
                    isFill = true
                }
            }
        }

        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()
        if (isFill) {
            this.context.fill()
        }

        this.context.beginPath()
        this.context.moveTo(points[4].x, points[4].y)
        this.context.lineTo(points[5].x, points[5].y)
        this.context.lineTo(points[6].x, points[6].y)
        this.context.lineTo(points[7].x, points[7].y)
        this.context.closePath()
        this.context.stroke()

        this.context.moveTo(points[4].x, points[4].y)
        this.context.lineTo(points[8].x, points[8].y)
        this.context.lineTo(points[6].x, points[6].y)
        this.context.stroke()

        this.context.restore()
    }

    drawCorridor(geometry, styleType) {
        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.save()

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

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

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

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

        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()
        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/furnitures/${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,
    //     })
    //     // furnitureService.getFurniture(geometry.geoType).then(img => {
    //     //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
    //     // })
    //     let img = furnitureService.getFurniture(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
        } else if (element.name == ElementEvents.StartSymbolPoints) {
            radius = Style.Element.StartSymbolPoints.radius * coordinate.ratio
            this.context.strokeStyle = Style.Element.StartSymbolPoints.strokeStyle
            this.context.fillStyle = Style.Element.StartSymbolPoints.fillStyle
        } else if (element.name == ElementEvents.EndSymbolPoints) {
            radius = Style.Element.EndSymbolPoints.radius * coordinate.ratio
            this.context.strokeStyle = Style.Element.EndSymbolPoints.strokeStyle
            this.context.fillStyle = Style.Element.EndSymbolPoints.fillStyle
        } else if (element.name == 'pano') {
            radius = Style.Pano.radius * coordinate.ratio
            this.context.strokeStyle = Style.Pano.strokeStyle
            this.context.fillStyle = Style.Pano.fillStyle
            this.context.lineWidth = Style.Pano.lineWidth
        }

        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.state == 'normal-out') {
                this.context.strokeStyle = Style.Element.NewWall.strokeStyle_out
                this.context.lineWidth = Style.Element.NewWall.lineWidth_out * coordinate.ratio
            }
        } 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()

        if (element.name == ElementEvents.NewWall) {
            //添加测量值
            this.drawMeasureTxt(element.start, element.end)
        }

        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()
    }

    drawCompass(styleType) {
        const padTop = 160
        const padRight = 310

        let img = null
        if (styleType == 'style-1' || styleType == 'style-3') {
            img = compassService.getWhiteImg()
        } else {
            img = compassService.getBlackImg()
        }
        let angle = floorplanService.getCompass()

        this.context.save()

        this.context.translate((coordinate.width - padRight) * coordinate.ratio, padTop * coordinate.ratio)
        this.context.rotate((angle / 180) * Math.PI)
        this.context.scale(coordinate.ratio / 2, coordinate.ratio / 2)
        this.context.drawImage(img, -img.width / 2, -img.height / 2)

        this.context.restore()
    }

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

    /*************************************************************************************家具**********************************************************************************************/
    drawFurniture(geometry) {
        if (geometry.geoType == VectorType.TV) {
            this.drawTV(geometry)
        } else if (geometry.geoType == VectorType.CombinationSofa) {
            this.drawCombinationSofa(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()
    }

    drawCombinationSofa(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.CombinationSofa) {
            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.CombinationSofa) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.CombinationSofa) {
            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(4, 16)
        this.context.lineTo(19, 16)
        this.context.lineTo(19, 25)
        this.context.lineTo(4, 25)
        this.context.lineTo(4, 16)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(6, 18)
        this.context.lineTo(17, 18)
        this.context.lineTo(17, 23)
        this.context.lineTo(6, 23)
        this.context.lineTo(6, 18)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(21.5, 19.5)
        this.context.bezierCurveTo(21.5, 18.9477, 21.9477, 18.5, 22.5, 18.5)
        this.context.lineTo(30.5, 18.5)
        this.context.bezierCurveTo(31.0523, 18.5, 31.5, 18.9477, 31.5, 19.5)
        this.context.lineTo(31.5, 24.5)
        this.context.bezierCurveTo(31.5, 25.0523, 31.0523, 25.5, 30.5, 25.5)
        this.context.lineTo(22.5, 25.5)
        this.context.bezierCurveTo(21.9477, 25.5, 21.5, 25.0523, 21.5, 24.5)
        this.context.lineTo(21.5, 19.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 4.5)
        this.context.bezierCurveTo(3.5, 3.94772, 3.94772, 3.5, 4.5, 3.5)
        this.context.lineTo(17.5, 3.5)
        this.context.bezierCurveTo(18.0523, 3.5, 18.5, 3.94772, 18.5, 4.5)
        this.context.lineTo(18.5, 11.5)
        this.context.bezierCurveTo(18.5, 12.0523, 18.0523, 12.5, 17.5, 12.5)
        this.context.lineTo(4.5, 12.5)
        this.context.bezierCurveTo(3.94772, 12.5, 3.5, 12.0523, 3.5, 11.5)
        this.context.lineTo(3.5, 4.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 5.5)
        this.context.lineTo(1.5, 5.5)
        this.context.bezierCurveTo(0.947715, 5.5, 0.5, 5.94772, 0.5, 6.5)
        this.context.lineTo(0.5, 10.5)
        this.context.bezierCurveTo(0.5, 11.0523, 0.947715, 11.5, 1.5, 11.5)
        this.context.lineTo(3.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18.5, 5.5)
        this.context.lineTo(20.5, 5.5)
        this.context.bezierCurveTo(21.0523, 5.5, 21.5, 5.94772, 21.5, 6.5)
        this.context.lineTo(21.5, 10.5)
        this.context.bezierCurveTo(21.5, 11.0523, 21.0523, 11.5, 20.5, 11.5)
        this.context.lineTo(18.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(4, 6.5)
        this.context.lineTo(18, 6.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 25.5)
        this.context.lineTo(22.5, 27.5)
        this.context.bezierCurveTo(22.5, 28.0523, 22.9477, 28.5, 23.5, 28.5)
        this.context.lineTo(29.5, 28.5)
        this.context.bezierCurveTo(30.0523, 28.5, 30.5, 28.0523, 30.5, 27.5)
        this.context.lineTo(30.5, 25.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 18.5)
        this.context.lineTo(22.5, 16.5)
        this.context.bezierCurveTo(22.5, 15.9477, 22.9477, 15.5, 23.5, 15.5)
        this.context.lineTo(29.5, 15.5)
        this.context.bezierCurveTo(30.0523, 15.5, 30.5, 15.9477, 30.5, 16.5)
        this.context.lineTo(30.5, 18.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(28.5, 19)
        this.context.lineTo(28.5, 25)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(8.5, 4)
        this.context.lineTo(8.5, 12)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(13.5, 4)
        this.context.lineTo(13.5, 12)
        this.context.fill()
        this.context.stroke()

        this.context.restore()
    }

    drawSingleSofa(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.SingleSofa) {
            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.SingleSofa) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.SingleSofa) {
            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(23, 8.5)
        this.context.lineTo(27.5, 8.5)
        this.context.bezierCurveTo(28.0523, 8.5, 28.5, 8.94772, 28.5, 9.5)
        this.context.lineTo(28.5, 22.5)
        this.context.bezierCurveTo(28.5, 23.0523, 28.0523, 23.5, 27.5, 23.5)
        this.context.lineTo(23, 23.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(9, 8.5)
        this.context.lineTo(4.5, 8.5)
        this.context.bezierCurveTo(3.94772, 8.5, 3.5, 8.94772, 3.5, 9.5)
        this.context.lineTo(3.5, 22.5)
        this.context.bezierCurveTo(3.5, 23.0523, 3.94772, 23.5, 4.5, 23.5)
        this.context.lineTo(9, 23.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(9.5, 7.5)
        this.context.bezierCurveTo(9.5, 6.94771, 9.94772, 6.5, 10.5, 6.5)
        this.context.lineTo(21.5, 6.5)
        this.context.bezierCurveTo(22.0523, 6.5, 22.5, 6.94772, 22.5, 7.5)
        this.context.lineTo(22.5, 24.5)
        this.context.bezierCurveTo(22.5, 25.0523, 22.0523, 25.5, 21.5, 25.5)
        this.context.lineTo(10.5, 25.5)
        this.context.bezierCurveTo(9.94772, 25.5, 9.5, 25.0523, 9.5, 24.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(10, 12.5)
        this.context.lineTo(22, 12.5)
        this.context.fill()
        this.context.stroke()

        this.context.restore()
    }

    drawTeaTable(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.TeaTable) {
            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.TeaTable) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.TeaTable) {
            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(1.5, 8.5)
        this.context.lineTo(30.5, 8.5)
        this.context.lineTo(30.5, 23.5)
        this.context.lineTo(1.5, 23.5)
        this.context.lineTo(1.5, 8.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 10.5)
        this.context.lineTo(28.5, 10.5)
        this.context.lineTo(28.5, 21.5)
        this.context.lineTo(3.5, 21.5)
        this.context.lineTo(3.5, 10.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 21.5)
        this.context.lineTo(14.5, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(28.5, 13.5)
        this.context.lineTo(22.5, 19.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.5, 21.5)
        this.context.lineTo(23, 15)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(28.5, 17)
        this.context.lineTo(24, 21.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.5, 21.5)
        this.context.lineTo(23, 15)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7.5, 21.5)
        this.context.lineTo(18.5, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 15.5)
        this.context.lineTo(8.5, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawCarpet(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.Carpet) {
            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.Carpet) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Carpet) {
            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(31.5, 16)
        this.context.bezierCurveTo(31.5, 21.5228, 24.8366, 25.5, 16, 25.5)
        this.context.bezierCurveTo(7.16344, 25.5, 0.5, 21.5228, 0.5, 16)
        this.context.bezierCurveTo(0.5, 10.4772, 7.16344, 6.5, 16, 6.5)
        this.context.bezierCurveTo(24.8366, 6.5, 31.5, 10.4772, 31.5, 16)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(0.5, 16)
        this.context.lineTo(4.5, 16.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(5, 9.5)
        this.context.lineTo(6.5, 12.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(9, 7.5)
        this.context.lineTo(10, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16, 9.5)
        this.context.lineTo(18.5, 6.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(27.5, 16)
        this.context.bezierCurveTo(27.5, 20.0695, 22.2711, 22.5, 16, 22.5)
        this.context.bezierCurveTo(9.7289, 22.5, 4.5, 20.0695, 4.5, 16)
        this.context.bezierCurveTo(4.5, 11.9305, 9.7289, 9.5, 16, 9.5)
        this.context.bezierCurveTo(22.2711, 9.5, 27.5, 11.9305, 27.5, 16)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(27, 17.5)
        this.context.lineTo(30.5, 19.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(10, 21.5)
        this.context.lineTo(8.5, 24.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(21.5, 7)
        this.context.bezierCurveTo(21.5, 7, 20.5, 7.5, 20.5, 8.5)
        this.context.bezierCurveTo(20.5, 9.5, 21, 10, 21, 10)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(12.5, 22.5)
        this.context.lineTo(11.5, 25)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(20.5001, 22)
        this.context.bezierCurveTo(20.5001, 22, 19.3705, 22.759, 19, 23.5)
        this.context.bezierCurveTo(18.5, 24.5, 19.0001, 25.5, 19.0001, 25.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(24.5, 20.5)
        this.context.lineTo(25.5, 23.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(27.5, 15)
        this.context.lineTo(31, 14)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawPlant(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.Plant) {
            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.Plant) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Plant) {
            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(16.0702, 14.54)
        this.context.bezierCurveTo(15.9302, 14.31, 15.7701, 14.05, 15.6201, 13.76)
        this.context.bezierCurveTo(14.8408, 12.4391, 14.4298, 10.9336, 14.4298, 9.39999)
        this.context.bezierCurveTo(14.4298, 7.8664, 14.8408, 6.36081, 15.6201, 5.03998)
        this.context.bezierCurveTo(15.8611, 4.58601, 16.1317, 4.1484, 16.4302, 3.72998)
        this.context.bezierCurveTo(16.7286, 4.1484, 16.9992, 4.58601, 17.2401, 5.03998)
        this.context.bezierCurveTo(17.9803, 6.37702, 18.3885, 7.87232, 18.4302, 9.39999)
        this.context.bezierCurveTo(18.4354, 9.47657, 18.4354, 9.5534, 18.4302, 9.62997)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7.9801, 15.98)
        this.context.bezierCurveTo(6.6152, 15.993, 5.25947, 15.7557, 3.9801, 15.28)
        this.context.bezierCurveTo(3.60847, 15.1397, 3.24756, 14.9726, 2.90015, 14.78)
        this.context.bezierCurveTo(3.21211, 14.5116, 3.54669, 14.2707, 3.90015, 14.06)
        this.context.bezierCurveTo(5.22554, 13.2482, 6.73712, 12.7903, 8.29016, 12.73)
        this.context.bezierCurveTo(9.15355, 12.6749, 10.0202, 12.7525, 10.8601, 12.96)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(23.4602, 22.59)
        this.context.bezierCurveTo(23.9779, 23.4363, 24.3718, 24.3522, 24.6302, 25.31)
        this.context.bezierCurveTo(24.7381, 25.6898, 24.815, 26.0777, 24.8602, 26.47)
        this.context.bezierCurveTo(24.464, 26.3786, 24.0761, 26.2548, 23.7002, 26.1)
        this.context.bezierCurveTo(22.2631, 25.4958, 21.0035, 24.5356, 20.0402, 23.31)
        this.context.bezierCurveTo(19.0654, 22.1493, 18.4441, 20.7332, 18.2502, 19.23)
        this.context.bezierCurveTo(18.2452, 19.1935, 18.2452, 19.1565, 18.2502, 19.12)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18.0201, 18.79)
        this.context.bezierCurveTo(18.289, 19.8049, 18.4268, 20.8501, 18.4302, 21.9)
        this.context.bezierCurveTo(18.3982, 23.7828, 17.9865, 25.6399, 17.2201, 27.36)
        this.context.bezierCurveTo(16.9871, 27.9045, 16.7234, 28.4354, 16.4302, 28.95)
        this.context.bezierCurveTo(16.1369, 28.4354, 15.8731, 27.9045, 15.6401, 27.36)
        this.context.bezierCurveTo(14.8737, 25.6399, 14.4622, 23.7828, 14.4302, 21.9)
        this.context.lineTo(14.4302, 21.9)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(15.7802, 14.98)
        this.context.bezierCurveTo(15.7769, 14.9568, 15.7769, 14.9332, 15.7802, 14.91)
        this.context.lineTo(16.0302, 14.53)
        this.context.bezierCurveTo(16.1729, 14.3156, 16.3264, 14.1087, 16.4901, 13.91)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(17.2201, 17.35)
        this.context.bezierCurveTo(16.8106, 17.2814, 16.4063, 17.1845, 16.0101, 17.06)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(23.9001, 9.38)
        this.context.bezierCurveTo(24.8831, 9.14548, 25.8897, 9.02471, 26.9001, 9.02002)
        this.context.bezierCurveTo(27.5704, 9.02021, 28.2395, 9.07706, 28.9001, 9.19)
        this.context.lineTo(29.1702, 9.24002)
        this.context.bezierCurveTo(29.1702, 9.34002, 29.1701, 9.44, 29.0901, 9.56)
        this.context.bezierCurveTo(28.6759, 10.9776, 27.9845, 12.2989, 27.0558, 13.4473)
        this.context.bezierCurveTo(26.1271, 14.5957, 24.9797, 15.5483, 23.6802, 16.25)
        this.context.lineTo(23.5502, 16.31)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.2902, 15.19)
        this.context.bezierCurveTo(16.2902, 15.19, 16.2902, 15.12, 16.2902, 15.08)
        this.context.lineTo(16.2902, 14.94)
        this.context.bezierCurveTo(16.3291, 14.6435, 16.3859, 14.3496, 16.4602, 14.06)
        this.context.lineTo(16.4602, 13.93)
        this.context.bezierCurveTo(16.8635, 12.4153, 17.4975, 10.9717, 18.3401, 9.64999)
        this.context.bezierCurveTo(18.6001, 9.23999, 18.8802, 8.81, 19.2002, 8.37)
        this.context.bezierCurveTo(20.5088, 6.52287, 22.1501, 4.93576, 24.0402, 3.68997)
        this.context.bezierCurveTo(24.573, 3.35365, 25.1276, 3.053, 25.7002, 2.78998)
        this.context.bezierCurveTo(25.7076, 3.42365, 25.654, 4.05658, 25.5402, 4.67999)
        this.context.bezierCurveTo(25.2507, 6.33791, 24.6647, 7.93003, 23.8102, 9.37997)
        this.context.bezierCurveTo(23.5307, 9.86497, 23.227, 10.3356, 22.9001, 10.79)
        this.context.bezierCurveTo(21.6488, 12.5924, 19.9543, 14.0423, 17.9801, 15)
        this.context.bezierCurveTo(17.5625, 15.1915, 17.1314, 15.3519, 16.6902, 15.48)
        this.context.lineTo(16.3102, 15.59)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(12.9901, 14.58)
        this.context.bezierCurveTo(12.2143, 14.1057, 11.4845, 13.56, 10.8102, 12.95)
        this.context.bezierCurveTo(10.5402, 12.72, 10.2701, 12.47, 10.0001, 12.19)
        this.context.bezierCurveTo(8.5657, 10.7859, 7.41477, 9.11892, 6.61011, 7.28)
        this.context.bezierCurveTo(6.39455, 6.78774, 6.21745, 6.27957, 6.0802, 5.76001)
        this.context.bezierCurveTo(6.61731, 5.84803, 7.14586, 5.98184, 7.66016, 6.16)
        this.context.bezierCurveTo(9.55116, 6.80258, 11.2641, 7.88174, 12.6602, 9.31)
        this.context.bezierCurveTo(14.0736, 10.6511, 15.1084, 12.3413, 15.6602, 14.21)
        this.context.bezierCurveTo(15.7402, 14.49, 15.7901, 14.76, 15.8401, 14.99)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11.1301, 22.84)
        this.context.bezierCurveTo(9.47432, 23.8584, 7.59868, 24.4653, 5.66016, 24.61)
        this.context.bezierCurveTo(4.9583, 24.6744, 4.25203, 24.6744, 3.55017, 24.61)
        this.context.lineTo(3.16016, 24.61)
        this.context.bezierCurveTo(3.16016, 24.49, 3.16016, 24.33, 3.16016, 24.15)
        this.context.bezierCurveTo(3.22801, 23.4121, 3.36532, 22.6821, 3.57019, 21.97)
        this.context.bezierCurveTo(4.18103, 19.7501, 5.52348, 17.8015, 7.38013, 16.44)
        this.context.bezierCurveTo(7.56306, 16.303, 7.75341, 16.1761, 7.9502, 16.06)
        this.context.bezierCurveTo(9.44614, 15.1201, 11.1838, 14.637, 12.9502, 14.67)
        this.context.lineTo(13.2701, 14.67)
        this.context.lineTo(13.7201, 14.67)
        this.context.bezierCurveTo(14.3987, 14.7284, 15.0692, 14.8591, 15.7201, 15.06)
        this.context.lineTo(15.7201, 15.06)
        this.context.lineTo(15.8701, 15.06)
        this.context.lineTo(16.1902, 15.16)
        this.context.lineTo(16.3302, 15.21)
        this.context.bezierCurveTo(16.3302, 15.3, 16.3302, 15.41, 16.3302, 15.54)
        this.context.bezierCurveTo(16.2457, 16.0399, 16.1186, 16.5317, 15.9502, 17.01)
        this.context.bezierCurveTo(15.9502, 17.08, 15.9501, 17.16, 15.8701, 17.24)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(23.5802, 16.31)
        this.context.bezierCurveTo(23.6966, 16.364, 23.8101, 16.4241, 23.9202, 16.49)
        this.context.bezierCurveTo(25.4558, 17.4575, 26.6812, 18.8459, 27.4502, 20.49)
        this.context.bezierCurveTo(27.7426, 21.0659, 27.9965, 21.6605, 28.2102, 22.27)
        this.context.lineTo(28.2902, 22.51)
        this.context.lineTo(28.0402, 22.56)
        this.context.bezierCurveTo(27.4061, 22.6801, 26.7646, 22.757, 26.1201, 22.79)
        this.context.bezierCurveTo(25.2303, 22.8383, 24.3379, 22.7846, 23.4602, 22.63)
        this.context.bezierCurveTo(22.5677, 22.4742, 21.7086, 22.1664, 20.9202, 21.72)
        this.context.bezierCurveTo(19.8482, 21.0758, 18.9327, 20.2014, 18.2401, 19.16)
        this.context.lineTo(18.0201, 18.83)
        this.context.bezierCurveTo(17.7901, 18.47, 17.5801, 18.11, 17.4001, 17.76)
        this.context.lineTo(17.2201, 17.39)
        this.context.bezierCurveTo(16.9992, 16.9318, 16.8056, 16.461, 16.6401, 15.98)
        this.context.lineTo(16.5602, 15.74)
        this.context.lineTo(16.8102, 15.69)
        this.context.bezierCurveTo(17.4312, 15.5743, 18.0593, 15.5008, 18.6902, 15.47)
        this.context.bezierCurveTo(20.3653, 15.3236, 22.0499, 15.613, 23.5802, 16.31)
        this.context.lineTo(23.5802, 16.31)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11.1301, 22.84)
        this.context.bezierCurveTo(11.2192, 21.7269, 11.5001, 20.6375, 11.9602, 19.62)
        this.context.bezierCurveTo(12.5529, 18.2225, 13.5309, 17.0224, 14.7802, 16.16)
        this.context.bezierCurveTo(14.9538, 16.04, 15.1341, 15.9298, 15.3202, 15.83)
        this.context.lineTo(15.5302, 15.73)
        this.context.bezierCurveTo(15.636, 15.6714, 15.7463, 15.6213, 15.8601, 15.58)
        this.context.bezierCurveTo(15.8601, 15.66, 15.8601, 15.74, 15.8601, 15.84)
        this.context.bezierCurveTo(15.8723, 16.0832, 15.8723, 16.3268, 15.8601, 16.57)
        this.context.bezierCurveTo(15.8601, 16.72, 15.8601, 16.88, 15.8601, 17.05)
        this.context.bezierCurveTo(15.8601, 17.22, 15.8601, 17.21, 15.8601, 17.3)
        this.context.bezierCurveTo(15.7267, 18.5244, 15.3887, 19.7176, 14.8601, 20.83)
        this.context.bezierCurveTo(14.7044, 21.192, 14.5241, 21.5428, 14.3202, 21.88)
        this.context.bezierCurveTo(13.759, 22.908, 13.0288, 23.8343, 12.1602, 24.62)
        this.context.bezierCurveTo(11.8633, 24.887, 11.5493, 25.1341, 11.2201, 25.36)
        this.context.bezierCurveTo(11.1265, 24.962, 11.063, 24.5576, 11.0302, 24.15)
        this.context.bezierCurveTo(11.0324, 23.7115, 11.0658, 23.2737, 11.1301, 22.84)
        this.context.lineTo(11.1301, 22.84)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawDiningTable(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.DiningTable) {
            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.DiningTable) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.DiningTable) {
            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(2.5, 10.5)
        this.context.lineTo(29.5, 10.5)
        this.context.lineTo(29.5, 21.5)
        this.context.lineTo(2.5, 21.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(14.5, 10)
        this.context.lineTo(14.5, 3.5)
        this.context.lineTo(5.5, 3.5)
        this.context.lineTo(5.5, 10)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(14.5, 22)
        this.context.lineTo(14.5, 28.5)
        this.context.lineTo(5.5, 28.5)
        this.context.lineTo(5.5, 22)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(26.5, 10)
        this.context.lineTo(26.5, 3.5)
        this.context.lineTo(17.5, 3.5)
        this.context.lineTo(17.5, 10)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(26.5, 22)
        this.context.lineTo(26.5, 28.5)
        this.context.lineTo(17.5, 28.5)
        this.context.lineTo(17.5, 22)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(6, 5.5)
        this.context.lineTo(14, 5.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(6, 26.5)
        this.context.lineTo(14, 26.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18, 5.5)
        this.context.lineTo(26, 5.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18, 26.5)
        this.context.lineTo(26, 26.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawDoubleBed(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.DoubleBed) {
            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.DoubleBed) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.DoubleBed) {
            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.beginPath()
        this.context.moveTo(0.5, 3.5)
        this.context.lineTo(31.5, 3.5)
        this.context.lineTo(31.5, 28.5)
        this.context.lineTo(0.5, 28.5)
        this.context.lineTo(0.5, 3.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(1, 9.5)
        this.context.lineTo(31, 9.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(14.5, 9)
        this.context.lineTo(14.5, 7.5)
        this.context.bezierCurveTo(14.5, 6.39543, 13.6046, 5.5, 12.5, 5.5)
        this.context.lineTo(5.5, 5.5)
        this.context.bezierCurveTo(4.39543, 5.5, 3.5, 6.39543, 3.5, 7.5)
        this.context.lineTo(3.5, 9)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(28.5, 9)
        this.context.lineTo(28.5, 7.5)
        this.context.bezierCurveTo(28.5, 6.39543, 27.6046, 5.5, 26.5, 5.5)
        this.context.lineTo(19.5, 5.5)
        this.context.bezierCurveTo(18.3954, 5.5, 17.5, 6.39543, 17.5, 7.5)
        this.context.lineTo(17.5, 9)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(1, 12.5)
        this.context.lineTo(31, 12.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawSingleBed(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.SingleBed) {
            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.SingleBed) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.SingleBed) {
            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.beginPath()
        this.context.moveTo(6.5, 3.5)
        this.context.lineTo(25.5, 3.5)
        this.context.lineTo(25.5, 28.5)
        this.context.lineTo(6.5, 28.5)
        this.context.lineTo(6.5, 3.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7, 9.5)
        this.context.lineTo(25, 9.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7, 12.5)
        this.context.lineTo(25, 12.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 9)
        this.context.lineTo(22.5, 7.5)
        this.context.bezierCurveTo(22.5, 6.39543, 21.6046, 5.5, 20.5, 5.5)
        this.context.lineTo(11.5, 5.5)
        this.context.bezierCurveTo(10.3954, 5.5, 9.5, 6.39543, 9.5, 7.5)
        this.context.lineTo(9.5, 9)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawWardrobe(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.WallCorner) {
            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.WallCorner) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.WallCorner) {
            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(1.5, 7.5)
        this.context.lineTo(30.5, 7.5)
        this.context.lineTo(30.5, 23.5)
        this.context.lineTo(1.5, 23.5)
        this.context.lineTo(1.5, 7.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(3.5, 9.5)
        this.context.lineTo(28.5, 9.5)
        this.context.lineTo(28.5, 21.5)
        this.context.lineTo(3.5, 21.5)
        this.context.lineTo(3.5, 9.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(4, 15.5)
        this.context.lineTo(28, 15.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(6.5, 12)
        this.context.lineTo(7.5, 19)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(10.5, 12)
        this.context.lineTo(10.5, 19)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(15.5, 12)
        this.context.lineTo(15.5, 19)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(19.5, 12)
        this.context.lineTo(21.5, 19)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(25.5, 12)
        this.context.lineTo(25.5, 19)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawDresser(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.Dresser) {
            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.Dresser) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Dresser) {
            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(2.5, 4.5)
        this.context.lineTo(29.5, 4.5)
        this.context.lineTo(29.5, 16.5)
        this.context.bezierCurveTo(29.5, 17.6046, 28.6046, 18.5, 27.5, 18.5)
        this.context.lineTo(4.5, 18.5)
        this.context.bezierCurveTo(3.39543, 18.5, 2.5, 17.6046, 2.5, 16.5)
        this.context.lineTo(2.5, 4.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7.5, 6.5)
        this.context.lineTo(24.5, 6.5)
        this.context.lineTo(24.5, 8.5)
        this.context.lineTo(7.5, 8.5)
        this.context.lineTo(7.5, 6.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(9.5, 25)
        this.context.bezierCurveTo(9.5, 23.067, 11.067, 21.5, 13, 21.5)
        this.context.lineTo(19, 21.5)
        this.context.bezierCurveTo(20.933, 21.5, 22.5, 23.067, 22.5, 25)
        this.context.lineTo(22.5, 25)
        this.context.bezierCurveTo(22.5, 26.933, 20.933, 28.5, 19, 28.5)
        this.context.lineTo(13, 28.5)
        this.context.bezierCurveTo(11.067, 28.5, 9.5, 26.933, 9.5, 25)
        this.context.lineTo(9.5, 25)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawBedsideCupboard(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.BedsideCupboard) {
            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.BedsideCupboard) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.BedsideCupboard) {
            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(2.5, 3.5)
        this.context.lineTo(28.5, 3.5)
        this.context.lineTo(28.5, 29.5)
        this.context.lineTo(2.5, 29.5)
        this.context.lineTo(2.5, 3.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(4.5, 5.5)
        this.context.lineTo(26.5, 5.5)
        this.context.lineTo(26.5, 27.5)
        this.context.lineTo(4.5, 27.5)
        this.context.lineTo(4.5, 5.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(23.5, 16.5)
        this.context.bezierCurveTo(23.5, 20.9183, 19.9183, 24.5, 15.5, 24.5)
        this.context.bezierCurveTo(11.0817, 24.5, 7.5, 20.9183, 7.5, 16.5)
        this.context.bezierCurveTo(7.5, 12.0817, 11.0817, 8.5, 15.5, 8.5)
        this.context.bezierCurveTo(19.9183, 8.5, 23.5, 12.0817, 23.5, 16.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(20.5, 16.5)
        this.context.bezierCurveTo(20.5, 19.2614, 18.2614, 21.5, 15.5, 21.5)
        this.context.bezierCurveTo(12.7386, 21.5, 10.5, 19.2614, 10.5, 16.5)
        this.context.bezierCurveTo(10.5, 13.7386, 12.7386, 11.5, 15.5, 11.5)
        this.context.bezierCurveTo(18.2614, 11.5, 20.5, 13.7386, 20.5, 16.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(20.5, 16.5)
        this.context.bezierCurveTo(20.5, 19.2614, 18.2614, 21.5, 15.5, 21.5)
        this.context.bezierCurveTo(12.7386, 21.5, 10.5, 19.2614, 10.5, 16.5)
        this.context.bezierCurveTo(10.5, 13.7386, 12.7386, 11.5, 15.5, 11.5)
        this.context.bezierCurveTo(18.2614, 11.5, 20.5, 13.7386, 20.5, 16.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.5, 16.5)
        this.context.bezierCurveTo(16.5, 17.0523, 16.0523, 17.5, 15.5, 17.5)
        this.context.bezierCurveTo(14.9477, 17.5, 14.5, 17.0523, 14.5, 16.5)
        this.context.bezierCurveTo(14.5, 15.9477, 14.9477, 15.5, 15.5, 15.5)
        this.context.bezierCurveTo(16.0523, 15.5, 16.5, 15.9477, 16.5, 16.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11, 18.5)
        this.context.lineTo(14.5, 17)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.5, 17)
        this.context.lineTo(20, 18.5)
        this.context.moveTo(15.5, 11.5)
        this.context.lineTo(15.5, 15.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawPillow(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.Pillow) {
            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.Pillow) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Pillow) {
            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.beginPath()
        this.context.moveTo(18.0747, 9)
        this.context.bezierCurveTo(16.2223, 9.05191, 14.3762, 9.23862, 12.5513, 9.55861)
        this.context.bezierCurveTo(11.8131, 9.80487, 11.014, 9.80487, 10.2758, 9.55861)
        this.context.bezierCurveTo(8.86176, 9.28479, 8.69606, 10.8291, 9.17107, 11.7492)
        this.context.bezierCurveTo(9.01642, 12.3187, 8.78433, 13.2716, 8.65177, 13.8631)
        this.context.bezierCurveTo(7.54709, 17.9485, 8.14367, 21.3439, 8.98323, 25.3198)
        this.context.bezierCurveTo(9.16793, 25.9353, 9.14078, 26.5943, 8.90596, 27.1928)
        this.context.bezierCurveTo(8.62979, 28.6276, 10.2315, 28.7262, 11.1815, 28.2881)
        this.context.bezierCurveTo(15.52, 29.157, 19.9815, 29.2386, 24.3494, 28.529)
        this.context.bezierCurveTo(24.7471, 28.529, 25.454, 28.3538, 25.7964, 28.3428)
        this.context.bezierCurveTo(26.7354, 28.6057, 28.3593, 28.6824, 28.1826, 27.2475)
        this.context.bezierCurveTo(27.8733, 26.4132, 27.8733, 25.497, 28.1826, 24.6626)
        this.context.bezierCurveTo(28.4367, 23.414, 28.6686, 22.0449, 28.8343, 20.7744)
        this.context.bezierCurveTo(29.6297, 17.4885, 27.8512, 14.2026, 28.0611, 10.9168)
        this.context.bezierCurveTo(28.1106, 10.7308, 28.1099, 10.5352, 28.0589, 10.3496)
        this.context.bezierCurveTo(28.008, 10.164, 27.9086, 9.99502, 27.7709, 9.85957)
        this.context.bezierCurveTo(27.6332, 9.72413, 27.462, 9.62701, 27.2744, 9.57803)
        this.context.bezierCurveTo(27.0868, 9.52904, 26.8895, 9.5299, 26.7024, 9.5805)
        this.context.bezierCurveTo(26.3084, 9.74462, 25.8765, 9.7977, 25.4541, 9.73386)
        this.context.bezierCurveTo(23.013, 9.33025, 20.548, 9.0851, 18.0747, 9)
        this.context.lineTo(18.0747, 9)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(23.4453, 9.5)
        this.context.bezierCurveTo(23.2025, 8.27344, 22.9884, 7.04688, 23.067, 5.82031)
        this.context.bezierCurveTo(23.1141, 5.64371, 23.1134, 5.45793, 23.0649, 5.28169)
        this.context.bezierCurveTo(23.0164, 5.10544, 22.9217, 4.94495, 22.7905, 4.81632)
        this.context.bezierCurveTo(22.6593, 4.68769, 22.4961, 4.59547, 22.3174, 4.54894)
        this.context.bezierCurveTo(22.1387, 4.50242, 21.9507, 4.50323, 21.7724, 4.55129)
        this.context.bezierCurveTo(21.3971, 4.70716, 20.9855, 4.75756, 20.5831, 4.69693)
        this.context.bezierCurveTo(18.2573, 4.31363, 15.9087, 4.08082, 13.5522, 4)
        this.context.bezierCurveTo(11.7872, 4.0493, 10.0283, 4.22661, 8.28964, 4.5305)
        this.context.bezierCurveTo(7.58628, 4.76437, 6.82488, 4.76437, 6.12153, 4.5305)
        this.context.bezierCurveTo(4.77431, 4.27046, 4.61643, 5.73711, 5.06901, 6.61086)
        this.context.bezierCurveTo(4.92166, 7.15175, 4.70054, 8.0567, 4.57423, 8.6184)
        this.context.bezierCurveTo(3.52172, 12.4983, 4.09013, 15.7228, 4.89004, 19.4987)
        this.context.bezierCurveTo(5.06602, 20.0832, 5.04015, 20.709, 4.81642, 21.2774)
        this.context.bezierCurveTo(4.55329, 22.64, 6.07937, 22.7337, 6.98453, 22.3176)
        this.context.bezierCurveTo(7.41836, 22.4042, 7.85347, 22.4826, 8.28964, 22.5527)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawGasStove(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.GasStove) {
            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.GasStove) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.GasStove) {
            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.beginPath()
        this.context.moveTo(0.5, 8.5)
        this.context.bezierCurveTo(0.5, 7.94772, 0.947715, 7.5, 1.5, 7.5)
        this.context.lineTo(30.5, 7.5)
        this.context.bezierCurveTo(31.0523, 7.5, 31.5, 7.94772, 31.5, 8.5)
        this.context.lineTo(31.5, 24.5)
        this.context.bezierCurveTo(31.5, 25.0523, 31.0523, 25.5, 30.5, 25.5)
        this.context.lineTo(1.5, 25.5)
        this.context.bezierCurveTo(0.947716, 25.5, 0.5, 25.0523, 0.5, 24.5)
        this.context.lineTo(0.5, 8.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()

        this.context.beginPath()
        this.context.moveTo(1, 20.5)
        this.context.lineTo(31, 20.5)
        this.context.fill()
        this.context.stroke()

        this.context.beginPath()
        this.context.moveTo(13.5, 14)
        this.context.bezierCurveTo(13.5, 16.4853, 11.4853, 18.5, 9, 18.5)
        this.context.bezierCurveTo(6.51472, 18.5, 4.5, 16.4853, 4.5, 14)
        this.context.bezierCurveTo(4.5, 11.5147, 6.51472, 9.5, 9, 9.5)
        this.context.bezierCurveTo(11.4853, 9.5, 13.5, 11.5147, 13.5, 14)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()

        this.context.beginPath()
        this.context.moveTo(13.5, 23)
        this.context.bezierCurveTo(13.5, 23.2761, 13.2761, 23.5, 13, 23.5)
        this.context.bezierCurveTo(12.7239, 23.5, 12.5, 23.2761, 12.5, 23)
        this.context.bezierCurveTo(12.5, 22.7239, 12.7239, 22.5, 13, 22.5)
        this.context.bezierCurveTo(13.2761, 22.5, 13.5, 22.7239, 13.5, 23)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(19.5, 23)
        this.context.bezierCurveTo(19.5, 23.2761, 19.2761, 23.5, 19, 23.5)
        this.context.bezierCurveTo(18.7239, 23.5, 18.5, 23.2761, 18.5, 23)
        this.context.bezierCurveTo(18.5, 22.7239, 18.7239, 22.5, 19, 22.5)
        this.context.bezierCurveTo(19.2761, 22.5, 19.5, 22.7239, 19.5, 23)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(10.5, 14)
        this.context.bezierCurveTo(10.5, 14.8284, 9.82843, 15.5, 9, 15.5)
        this.context.bezierCurveTo(8.17157, 15.5, 7.5, 14.8284, 7.5, 14)
        this.context.bezierCurveTo(7.5, 13.1716, 8.17157, 12.5, 9, 12.5)
        this.context.bezierCurveTo(9.82843, 12.5, 10.5, 13.1716, 10.5, 14)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(4.5, 9.5)
        this.context.lineTo(6.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11.5, 16.5)
        this.context.lineTo(13.5, 18.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(6.5, 16.5)
        this.context.lineTo(4.5, 18.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(27.5, 14)
        this.context.bezierCurveTo(27.5, 16.4853, 25.4853, 18.5, 23, 18.5)
        this.context.bezierCurveTo(20.5147, 18.5, 18.5, 16.4853, 18.5, 14)
        this.context.bezierCurveTo(18.5, 11.5147, 20.5147, 9.5, 23, 9.5)
        this.context.bezierCurveTo(25.4853, 9.5, 27.5, 11.5147, 27.5, 14)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(24.5, 14)
        this.context.bezierCurveTo(24.5, 14.8284, 23.8284, 15.5, 23, 15.5)
        this.context.bezierCurveTo(22.1716, 15.5, 21.5, 14.8284, 21.5, 14)
        this.context.bezierCurveTo(21.5, 13.1716, 22.1716, 12.5, 23, 12.5)
        this.context.bezierCurveTo(23.8284, 12.5, 24.5, 13.1716, 24.5, 14)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18.5, 9.5)
        this.context.lineTo(20.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(25.5, 16.5)
        this.context.lineTo(27.5, 18.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(20.5, 16.5)
        this.context.lineTo(18.5, 18.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(13.5, 9.5)
        this.context.lineTo(11.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(27.5, 9.5)
        this.context.lineTo(25.5, 11.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawCupboard(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.Cupboard) {
            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.Cupboard) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Cupboard) {
            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.beginPath()
        this.context.moveTo(21, 7.5)
        this.context.bezierCurveTo(21.8284, 7.5, 22.5, 6.82843, 22.5, 6)
        this.context.bezierCurveTo(22.5, 5.17157, 21.8284, 4.5, 21, 4.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(21, 17.5)
        this.context.bezierCurveTo(21.8284, 17.5, 22.5, 16.8284, 22.5, 16)
        this.context.bezierCurveTo(22.5, 15.1716, 21.8284, 14.5, 21, 14.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(21, 27.5)
        this.context.bezierCurveTo(21.8284, 27.5, 22.5, 26.8284, 22.5, 26)
        this.context.bezierCurveTo(22.5, 25.1716, 21.8284, 24.5, 21, 24.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(12.5, 0.5)
        this.context.lineTo(20.5, 0.5)
        this.context.lineTo(20.5, 31.5)
        this.context.lineTo(12.5, 31.5)
        this.context.lineTo(12.5, 0.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18.5, 1)
        this.context.lineTo(18.5, 31)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(13, 21.5)
        this.context.lineTo(20, 21.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(13, 10.5)
        this.context.lineTo(20, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawBathtub(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.Bathtub) {
            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.Bathtub) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Bathtub) {
            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.beginPath()
        this.context.moveTo(0.5, 7.5)
        this.context.lineTo(31.5, 7.5)
        this.context.lineTo(31.5, 24.5)
        this.context.lineTo(0.5, 24.5)
        this.context.lineTo(0.5, 7.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(2.5, 16)
        this.context.bezierCurveTo(2.5, 12.4101, 5.41015, 9.5, 9, 9.5)
        this.context.lineTo(23, 9.5)
        this.context.bezierCurveTo(26.5899, 9.5, 29.5, 12.4101, 29.5, 16)
        this.context.lineTo(29.5, 16)
        this.context.bezierCurveTo(29.5, 19.5899, 26.5899, 22.5, 23, 22.5)
        this.context.lineTo(9, 22.5)
        this.context.bezierCurveTo(5.41015, 22.5, 2.5, 19.5899, 2.5, 16)
        this.context.lineTo(2.5, 16)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(1, 15.5)
        this.context.lineTo(5.5, 15.5)
        this.context.lineTo(5.5, 16.5)
        this.context.lineTo(1, 16.5)
        this.context.lineTo(1, 15.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(26.5, 16)
        this.context.bezierCurveTo(26.5, 16.2761, 26.2761, 16.5, 26, 16.5)
        this.context.bezierCurveTo(25.7239, 16.5, 25.5, 16.2761, 25.5, 16)
        this.context.bezierCurveTo(25.5, 15.7239, 25.7239, 15.5, 26, 15.5)
        this.context.bezierCurveTo(26.2761, 15.5, 26.5, 15.7239, 26.5, 16)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11.5, 20.5)
        this.context.lineTo(20.5, 20.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(13.5, 20.5)
        this.context.lineTo(13.5, 22.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(18.5, 20.5)
        this.context.lineTo(18.5, 22.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawClosestool(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.Closestool) {
            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.Closestool) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Closestool) {
            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.beginPath()
        this.context.moveTo(5.5, 3.5)
        this.context.bezierCurveTo(5.5, 2.94772, 5.94772, 2.5, 6.5, 2.5)
        this.context.lineTo(25.5, 2.5)
        this.context.bezierCurveTo(26.0523, 2.5, 26.5, 2.94772, 26.5, 3.5)
        this.context.lineTo(26.5, 9.5)
        this.context.bezierCurveTo(26.5, 10.0523, 26.0523, 10.5, 25.5, 10.5)
        this.context.lineTo(6.5, 10.5)
        this.context.bezierCurveTo(5.94772, 10.5, 5.5, 10.0523, 5.5, 9.5)
        this.context.lineTo(5.5, 3.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(9.5, 12.6485)
        this.context.bezierCurveTo(9.5, 12.5665, 9.56649, 12.5, 9.64851, 12.5)
        this.context.lineTo(22.3515, 12.5)
        this.context.bezierCurveTo(22.4335, 12.5, 22.5, 12.5665, 22.5, 12.6485)
        this.context.lineTo(22.5, 21)
        this.context.bezierCurveTo(22.5, 24.5899, 19.5899, 27.5, 16, 27.5)
        this.context.lineTo(16, 27.5)
        this.context.bezierCurveTo(12.4101, 27.5, 9.5, 24.5899, 9.5, 21)
        this.context.lineTo(9.5, 12.6485)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(7.5, 10.5)
        this.context.lineTo(7.5, 21)
        this.context.bezierCurveTo(7.5, 25.6944, 11.3056, 29.5, 16, 29.5)
        this.context.lineTo(16, 29.5)
        this.context.bezierCurveTo(20.6944, 29.5, 24.5, 25.6944, 24.5, 21)
        this.context.lineTo(24.5, 10.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(17.5, 6)
        this.context.bezierCurveTo(17.5, 6.82843, 16.8284, 7.5, 16, 7.5)
        this.context.bezierCurveTo(15.1716, 7.5, 14.5, 6.82843, 14.5, 6)
        this.context.bezierCurveTo(14.5, 5.17157, 15.1716, 4.5, 16, 4.5)
        this.context.bezierCurveTo(16.8284, 4.5, 17.5, 5.17157, 17.5, 6)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawWashstand(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.Washstand) {
            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.Washstand) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Washstand) {
            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(13.5, 9)
        this.context.bezierCurveTo(13.5, 9.27614, 13.2761, 9.5, 13, 9.5)
        this.context.bezierCurveTo(12.7239, 9.5, 12.5, 9.27614, 12.5, 9)
        this.context.bezierCurveTo(12.5, 8.72386, 12.7239, 8.5, 13, 8.5)
        this.context.bezierCurveTo(13.2761, 8.5, 13.5, 8.72386, 13.5, 9)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(19.5, 9)
        this.context.bezierCurveTo(19.5, 9.27614, 19.2761, 9.5, 19, 9.5)
        this.context.bezierCurveTo(18.7239, 9.5, 18.5, 9.27614, 18.5, 9)
        this.context.bezierCurveTo(18.5, 8.72386, 18.7239, 8.5, 19, 8.5)
        this.context.bezierCurveTo(19.2761, 8.5, 19.5, 8.72386, 19.5, 9)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(16.5, 17)
        this.context.bezierCurveTo(16.5, 17.2761, 16.2761, 17.5, 16, 17.5)
        this.context.bezierCurveTo(15.7239, 17.5, 15.5, 17.2761, 15.5, 17)
        this.context.bezierCurveTo(15.5, 16.7239, 15.7239, 16.5, 16, 16.5)
        this.context.bezierCurveTo(16.2761, 16.5, 16.5, 16.7239, 16.5, 17)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(26.5, 17)
        this.context.bezierCurveTo(26.5, 20.0376, 21.799, 22.5, 16, 22.5)
        this.context.bezierCurveTo(10.201, 22.5, 5.5, 20.0376, 5.5, 17)
        this.context.bezierCurveTo(5.5, 13.9624, 10.201, 11.5, 16, 11.5)
        this.context.bezierCurveTo(21.799, 11.5, 26.5, 13.9624, 26.5, 17)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(2.5, 6.5)
        this.context.lineTo(29.5, 6.5)
        this.context.lineTo(29.5, 25.5)
        this.context.lineTo(2.5, 25.5)
        this.context.lineTo(2.5, 6.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(15.5, 9)
        this.context.bezierCurveTo(15.5, 8.72386, 15.7239, 8.5, 16, 8.5)
        this.context.lineTo(16, 8.5)
        this.context.bezierCurveTo(16.2761, 8.5, 16.5, 8.72386, 16.5, 9)
        this.context.lineTo(16.5, 14)
        this.context.bezierCurveTo(16.5, 14.2761, 16.2761, 14.5, 16, 14.5)
        this.context.lineTo(16, 14.5)
        this.context.bezierCurveTo(15.7239, 14.5, 15.5, 14.2761, 15.5, 14)
        this.context.lineTo(15.5, 9)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawDesk(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.Desk) {
            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.Desk) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Desk) {
            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.beginPath()
        this.context.moveTo(3.5, 7.5)
        this.context.lineTo(28.5, 7.5)
        this.context.lineTo(28.5, 19.5)
        this.context.lineTo(3.5, 19.5)
        this.context.lineTo(3.5, 7.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11.5, 20)
        this.context.lineTo(11.5, 22)
        this.context.bezierCurveTo(11.5, 24.4853, 13.5147, 26.5, 16, 26.5)
        this.context.lineTo(16, 26.5)
        this.context.bezierCurveTo(18.4853, 26.5, 20.5, 24.4853, 20.5, 22)
        this.context.lineTo(20.5, 20)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(15.5, 10.5)
        this.context.lineTo(25.5, 10.5)
        this.context.lineTo(25.5, 16.5)
        this.context.lineTo(15.5, 16.5)
        this.context.lineTo(15.5, 10.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(20.5, 11)
        this.context.lineTo(20.5, 16)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(17.5, 12.5)
        this.context.lineTo(18.5, 12.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 12.5)
        this.context.lineTo(23.5, 12.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(17.5, 14.5)
        this.context.lineTo(18.5, 14.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 14.5)
        this.context.lineTo(23.5, 14.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawBalconyChair(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.BalconyChair) {
            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.BalconyChair) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.BalconyChair) {
            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.beginPath()
        this.context.arc(16, 16, 4.5, 0, 6.283185307179586, false)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(0.5, 12.3182)
        this.context.bezierCurveTo(0.5, 11.8663, 0.866313, 11.5, 1.31818, 11.5)
        this.context.lineTo(8.68182, 11.5)
        this.context.bezierCurveTo(9.13369, 11.5, 9.5, 11.8663, 9.5, 12.3182)
        this.context.lineTo(9.5, 16)
        this.context.bezierCurveTo(9.5, 18.4853, 7.48528, 20.5, 5, 20.5)
        this.context.lineTo(5, 20.5)
        this.context.bezierCurveTo(2.51472, 20.5, 0.5, 18.4853, 0.5, 16)
        this.context.lineTo(0.5, 12.3182)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 12.3182)
        this.context.bezierCurveTo(22.5, 11.8663, 22.8663, 11.5, 23.3182, 11.5)
        this.context.lineTo(30.6818, 11.5)
        this.context.bezierCurveTo(31.1337, 11.5, 31.5, 11.8663, 31.5, 12.3182)
        this.context.lineTo(31.5, 16)
        this.context.bezierCurveTo(31.5, 18.4853, 29.4853, 20.5, 27, 20.5)
        this.context.lineTo(27, 20.5)
        this.context.bezierCurveTo(24.5147, 20.5, 22.5, 18.4853, 22.5, 16)
        this.context.lineTo(22.5, 12.3182)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(0.5, 13.5)
        this.context.lineTo(0.5, 13.5)
        this.context.bezierCurveTo(0.5, 15.9853, 2.51472, 18, 5, 18)
        this.context.lineTo(5, 18)
        this.context.bezierCurveTo(7.48528, 18, 9.5, 15.9853, 9.5, 13.5)
        this.context.lineTo(9.5, 13.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(22.5, 13.5)
        this.context.lineTo(22.5, 13.5)
        this.context.bezierCurveTo(22.5, 15.9853, 24.5147, 18, 27, 18)
        this.context.lineTo(27, 18)
        this.context.bezierCurveTo(29.4853, 18, 31.5, 15.9853, 31.5, 13.5)
        this.context.lineTo(31.5, 13.5)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    drawElevator(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.Elevator) {
            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.Elevator) {
            if (geometry.vectorId == draggingItem.vectorId) {
                this.context.strokeStyle = Style.Select.Furniture.strokeStyle
                this.context.fillStyle = Style.Select.Furniture.fillStyle
            }
        }

        if (focusItem && focusItem.type == VectorType.Elevator) {
            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(2.5, 29.5)
        this.context.lineTo(10.5, 29.5)
        this.context.lineTo(10.5, 27.5)
        this.context.lineTo(4.5, 27.5)
        this.context.lineTo(4.5, 4.5)
        this.context.lineTo(27.5, 4.5)
        this.context.lineTo(27.5, 27.5)
        this.context.lineTo(20.5, 27.5)
        this.context.lineTo(20.5, 29.5)
        this.context.lineTo(29.5, 29.5)
        this.context.lineTo(29.5, 2.5)
        this.context.lineTo(2.5, 2.5)
        this.context.lineTo(2.5, 29.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(11, 28.5)
        this.context.lineTo(20, 28.5)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(8.5, 9.5)
        this.context.lineTo(8.5, 7.5)
        this.context.lineTo(23.5, 7.5)
        this.context.lineTo(23.5, 9.5)
        this.context.lineTo(8.5, 9.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(24.5, 12.5)
        this.context.lineTo(7.5, 12.5)
        this.context.lineTo(7.5, 24.5)
        this.context.lineTo(24.5, 24.5)
        this.context.lineTo(24.5, 12.5)
        this.context.closePath()
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(8, 13)
        this.context.lineTo(24, 24)
        this.context.fill()
        this.context.stroke()
        this.context.beginPath()
        this.context.moveTo(24, 13)
        this.context.lineTo(8, 24)
        this.context.fill()
        this.context.stroke()
        this.context.restore()
    }

    // drawDoubleBed(geometry){
    //     //开始画矢量
    //     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,
    //                                                     })
    //                                                     // furnitureService.getFurniture(geometry.geoType).then(img => {
    //                                                     //     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
    //                                                     // })
    //                                                     let img = furnitureService.getFurniture(geometry.geoType)
    //                                                     this.context.drawImage(img, pt.x, pt.y, imgWidth, imgHeight)
    //                                                     this.context.restore()
    //                                                     */
    //     const pt = coordinate.getScreenXY({
    //         x: geometry.center.x - geometry.sideLength / 2,
    //         y: geometry.center.y + geometry.sideLength / 2,
    //     })
    //     this.context.translate(pt.x, pt.y)
    //     this.context.rotate((geometry.angle / 180) * Math.PI)
    //     this.context.scale(geometry.sideLength, geometry.sideLength)

    //     this.context.restore()
    // }
    /***************************************************************************************************************************************************************************************/
}

const draw = new Draw()
export { draw }