348 lines
11 KiB
JavaScript
348 lines
11 KiB
JavaScript
import { useRecoilValue, useResetRecoilState } from 'recoil'
|
|
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
|
import { selectedRoofMaterialSelector } from '@/store/settingAtom'
|
|
import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { useLine } from '@/hooks/useLine'
|
|
import { outerLinePointsState } from '@/store/outerLineAtom'
|
|
|
|
const ROOF_COLOR = {
|
|
0: 'rgb(199,240,213)',
|
|
1: 'rgb(178,238,255)',
|
|
2: 'rgb(187,204,255)',
|
|
3: 'rgb(228,202,255)',
|
|
}
|
|
export function useRoofFn() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
|
|
const currentObject = useRecoilValue(currentObjectState)
|
|
const { addCanvasMouseEventListener, initEvent } = useEvent()
|
|
const resetPoints = useResetRecoilState(outerLinePointsState)
|
|
const { addPitchText } = useLine()
|
|
|
|
//면형상 선택 클릭시 지붕 패턴 입히기
|
|
function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial, isForceChange = false, isDisplay = false) {
|
|
debugger
|
|
if (!polygon) {
|
|
return
|
|
}
|
|
if (polygon.points.length < 3) {
|
|
return
|
|
}
|
|
if (isForceChange && !isDisplay) {
|
|
/*if (polygon.roofMaterial) {
|
|
polygon.roofMaterial = null
|
|
}*/
|
|
}
|
|
if (!roofMaterial) {
|
|
roofMaterial = polygon.roofMaterial ?? selectedRoofMaterial
|
|
}
|
|
|
|
const ratio = window.devicePixelRatio || 1
|
|
const layout = roofMaterial.layout
|
|
|
|
let width = (roofMaterial.width || 226) / 10
|
|
let height = (roofMaterial.length || 158) / 10
|
|
const index = roofMaterial.index ?? 0
|
|
let roofStyle = 2
|
|
const inputPatternSize = { width: width, height: height } //임시 사이즈
|
|
const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
|
|
|
|
if (polygon.direction === 'east' || polygon.direction === 'west') {
|
|
//세로형이면 width height를 바꿈
|
|
;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
|
|
}
|
|
|
|
// 패턴 소스를 위한 임시 캔버스 생성
|
|
const patternSourceCanvas = document.createElement('canvas')
|
|
patternSourceCanvas.width = polygon.width * ratio
|
|
patternSourceCanvas.height = polygon.height * ratio
|
|
const ctx = patternSourceCanvas.getContext('2d')
|
|
let offset = roofStyle === 1 ? 0 : patternSize.width / 2
|
|
|
|
const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
|
|
const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
|
|
|
|
ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index]
|
|
ctx.lineWidth = 2
|
|
ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
|
|
|
|
if (trestleMode) {
|
|
ctx.strokeStyle = 'black'
|
|
ctx.lineWidth = 0.2
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
|
|
} else {
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 1)'
|
|
}
|
|
|
|
if (polygon.direction === 'east' || polygon.direction === 'west') {
|
|
offset = roofStyle === 1 ? 0 : patternSize.height / 2
|
|
for (let col = 0; col <= cols; col++) {
|
|
const x = col * patternSize.width
|
|
const yStart = 0
|
|
const yEnd = patternSourceCanvas.height
|
|
ctx.beginPath()
|
|
ctx.moveTo(x, yStart) // 선 시작점
|
|
ctx.lineTo(x, yEnd) // 선 끝점
|
|
ctx.stroke()
|
|
if (mode === 'allPainted' || trestleMode) {
|
|
ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
|
|
}
|
|
|
|
for (let row = 0; row <= rows; row++) {
|
|
const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height
|
|
const xStart = col * patternSize.width
|
|
const xEnd = xStart + patternSize.width
|
|
ctx.beginPath()
|
|
ctx.moveTo(xStart, y) // 선 시작점
|
|
ctx.lineTo(xEnd, y) // 선 끝점
|
|
ctx.stroke()
|
|
if (mode === 'allPainted' || trestleMode) {
|
|
ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
for (let row = 0; row <= rows; row++) {
|
|
const y = row * patternSize.height
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, y) // 선 시작점
|
|
ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
|
|
ctx.stroke()
|
|
if (mode === 'allPainted' || trestleMode) {
|
|
ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
|
|
}
|
|
|
|
for (let col = 0; col <= cols; col++) {
|
|
const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width
|
|
const yStart = row * patternSize.height
|
|
const yEnd = yStart + patternSize.height
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(x, yStart) // 선 시작점
|
|
ctx.lineTo(x, yEnd) // 선 끝점
|
|
ctx.stroke()
|
|
if (mode === 'allPainted' || trestleMode) {
|
|
ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const hachingPatternSourceCanvas = document.createElement('canvas')
|
|
|
|
if (mode === 'lineHatch') {
|
|
hachingPatternSourceCanvas.width = polygon.width * ratio
|
|
hachingPatternSourceCanvas.height = polygon.height * ratio
|
|
|
|
const ctx1 = hachingPatternSourceCanvas.getContext('2d')
|
|
|
|
const gap = 10
|
|
|
|
ctx1.strokeStyle = 'green' // 선 색상
|
|
ctx1.lineWidth = 0.3 // 선 두께
|
|
|
|
for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
|
|
ctx1.beginPath()
|
|
ctx1.moveTo(x, 0) // 선 시작점
|
|
ctx1.lineTo(0, x) // 선 끝점
|
|
ctx1.stroke()
|
|
}
|
|
}
|
|
|
|
const combinedPatternCanvas = document.createElement('canvas')
|
|
combinedPatternCanvas.width = polygon.width * ratio
|
|
combinedPatternCanvas.height = polygon.height * ratio
|
|
const combinedCtx = combinedPatternCanvas.getContext('2d')
|
|
// 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
|
|
combinedCtx.drawImage(patternSourceCanvas, 0, 0)
|
|
combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)
|
|
|
|
// 패턴 생성
|
|
const pattern = new fabric.Pattern({
|
|
source: combinedPatternCanvas,
|
|
repeat: 'repeat',
|
|
})
|
|
|
|
polygon.set('fill', null)
|
|
polygon.set('fill', pattern)
|
|
polygon.roofMaterial = roofMaterial
|
|
polygon.canvas?.renderAll()
|
|
}
|
|
|
|
function removeRoofMaterial(roof = currentObject) {
|
|
if (roof === null || roof.name !== POLYGON_TYPE.ROOF) {
|
|
return
|
|
}
|
|
roof.set('fill', null)
|
|
roof.roofMaterial = null
|
|
canvas?.renderAll()
|
|
}
|
|
|
|
function removeAllRoofMaterial() {
|
|
const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
roofBases.forEach((roofBase) => {
|
|
removeRoofMaterial(roofBase)
|
|
})
|
|
}
|
|
|
|
function moveRoofMaterial(currentMousePos) {
|
|
const roofBase = canvas
|
|
.getObjects()
|
|
.filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
.filter((roof) => roof.inPolygon(currentMousePos))
|
|
|
|
if (roofBase.length === 0) {
|
|
return
|
|
}
|
|
|
|
const roof = roofBase[0]
|
|
const wall = roof.wall
|
|
|
|
const checkPolygon = new fabric.Polygon(roof.points, {
|
|
name: 'moveRoofPolygon',
|
|
stroke: '#ff0000',
|
|
strokeWidth: 5,
|
|
fill: 'transparent',
|
|
selectable: false,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
})
|
|
canvas.add(checkPolygon)
|
|
canvas.renderAll()
|
|
|
|
canvas.on('mouse:move', (event) => {
|
|
const mousePos = canvas.getPointer(event.e)
|
|
checkPolygon.left = mousePos.x
|
|
checkPolygon.top = mousePos.y
|
|
canvas.renderAll()
|
|
})
|
|
|
|
canvas.on('mouse:down', (event) => {
|
|
let mousePos = canvas.getPointer(event.e)
|
|
mousePos = { x: Math.round(mousePos.x), y: Math.round(mousePos.y) }
|
|
|
|
const texts = canvas.getObjects().filter((obj) => obj.type === 'text' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
|
|
texts.forEach((text) => canvas.remove(text))
|
|
|
|
const outerLines = canvas.getObjects().filter((obj) => obj.type === 'QLine' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
|
|
|
|
const allRoofObject = canvas
|
|
.getObjects()
|
|
.filter(
|
|
(obj) => obj !== roof && /*obj !== wall &&*/ (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id),
|
|
)
|
|
|
|
// // Calculate the movement delta
|
|
|
|
const originalRoofLeft = roof.left
|
|
const originalRoofTop = roof.top
|
|
|
|
roof.set({
|
|
left: mousePos.x,
|
|
top: mousePos.y,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
objectCaching: false,
|
|
})
|
|
roof.fire('polygonMoved')
|
|
roof.fire('modified')
|
|
|
|
// 기존 위치와 새로운 위치의 차이를 계산
|
|
const deltaX = roof.left - originalRoofLeft
|
|
const deltaY = roof.top - originalRoofTop
|
|
|
|
// Move all related objects by the delta
|
|
allRoofObject.forEach((obj) => {
|
|
if (obj.points !== undefined) {
|
|
obj.set({
|
|
left: obj.left + deltaX,
|
|
top: obj.top + deltaY,
|
|
originX: 'center',
|
|
originY: 'center',
|
|
objectCaching: false,
|
|
})
|
|
obj.fire('polygonMoved')
|
|
obj.fire('modified')
|
|
} else {
|
|
obj.set({
|
|
left: obj.left + deltaX,
|
|
top: obj.top + deltaY,
|
|
x1: obj.x1 + deltaX,
|
|
y1: obj.y1 + deltaY,
|
|
x2: obj.x2 + deltaX,
|
|
y2: obj.y2 + deltaY,
|
|
objectCaching: false,
|
|
})
|
|
if (obj.type === 'QLine') {
|
|
obj.set({
|
|
startPoint: { x: obj.startPoint.x + deltaX, y: obj.startPoint.y + deltaY },
|
|
endPoint: { x: obj.endPoint.x + deltaX, y: obj.endPoint.y + deltaY },
|
|
})
|
|
}
|
|
obj.setCoords()
|
|
}
|
|
|
|
if (obj.type === 'QLine') {
|
|
obj.addLengthText()
|
|
}
|
|
|
|
if (obj.name === 'outerLine') {
|
|
const { id } = obj
|
|
const pitchText = canvas.getObjects().filter((obj) => obj.name === 'pitchText' && obj.parentId === id)
|
|
canvas.remove(...pitchText)
|
|
addPitchText(obj)
|
|
}
|
|
})
|
|
|
|
canvas.off('mouse:move')
|
|
canvas.off('mouse:down')
|
|
canvas.remove(checkPolygon)
|
|
canvas.renderAll()
|
|
})
|
|
}
|
|
|
|
function convertAbsolutePoint(area) {
|
|
return area.points.map((p) => fabric.util.transformPoint({ x: p.x - area.pathOffset.x, y: p.y - area.pathOffset.y }, area.calcTransformMatrix()))
|
|
}
|
|
|
|
const removeOuterLines = (currentMousePos) => {
|
|
const roofBase = canvas
|
|
.getObjects()
|
|
.filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
.filter((roof) => roof.inPolygon(currentMousePos))
|
|
|
|
if (roofBase.length === 0) {
|
|
return
|
|
}
|
|
|
|
const roof = roofBase[0]
|
|
const wall = roof.wall
|
|
|
|
canvas.remove(roof)
|
|
canvas.remove(wall)
|
|
|
|
const allRoofObject = canvas
|
|
.getObjects()
|
|
.filter(
|
|
(obj) => /*obj !== roof && obj !== wall &&*/ obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall?.id,
|
|
)
|
|
|
|
const auxilaryObject = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isAuxiliaryFixed)
|
|
|
|
allRoofObject.forEach((obj) => {
|
|
canvas.remove(obj)
|
|
})
|
|
auxilaryObject.forEach((obj) => {
|
|
canvas.remove(obj)
|
|
})
|
|
|
|
canvas.renderAll()
|
|
resetPoints()
|
|
}
|
|
|
|
return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines }
|
|
}
|