qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

지붕형상 이동 기능 추가.

Browse Source
This commit is contained in:
Jaeyoung Lee 2025-02-03 10:26:16 +09:00
parent 7695c7c942
commit cc0b36a325
4 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/hooks/common/useRoofFn.js
View File

@ -4,6 +4,7 @@ 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'
const ROOF_COLOR = {
0: 'rgb(199,240,213)',
@ -16,6 +17,7 @@ export function useRoofFn() {
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
const currentObject = useRecoilValue(currentObjectState)
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addPitchText } = useLine()
//면형상 선택 클릭시 지붕 패턴 입히기
function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
@ -187,8 +189,6 @@ export function useRoofFn() {
const roof = roofBase[0]
const wall = roof.wall
console.log('roof.points', roof.points)
const checkPolygon = new fabric.Polygon(roof.points, {
name: 'moveRoofPolygon',
stroke: '#ff0000',
@ -209,34 +209,24 @@ export function useRoofFn() {
})
canvas.on('mouse:down', (event) => {
const mousePos = canvas.getPointer(event.e)
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))
.filter(
(obj) => obj !== roof && /*obj !== wall &&*/ (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id),
)
// // Calculate the movement delta
// const deltaX = mousePos.x - roof.left - roof.width / 2
// const deltaY = mousePos.y - roof.top - roof.height / 2
const originalRoofLeft = roof.left
const originalRoofTop = roof.top
const originalRoofWidth = roof.width
const originalRoofHeight = roof.height
console.log(
'originalRoofLeft',
originalRoofLeft,
'originalRoofTop',
originalRoofTop,
'originalRoofWidth',
originalRoofWidth,
'originalRoofHeight',
originalRoofHeight,
)
roof.set({
left: mousePos.x,
@ -248,46 +238,58 @@ export function useRoofFn() {
roof.fire('polygonMoved')
roof.fire('modified')
wall.set({
left: mousePos.x,
top: mousePos.y,
originX: 'center',
originY: 'center',
objectCaching: false,
})
wall.fire('polygonMoved')
wall.fire('modified')
const newRoofLeft = roof.left
const newRoofTop = roof.top
console.log('originalRoofLeft', originalRoofLeft, 'originalRoofTop', originalRoofTop, 'newRoofLeft', newRoofLeft, 'newRoofTop', newRoofTop)
const deltaX = newRoofLeft - originalRoofLeft - originalRoofWidth / 2
const deltaY = newRoofTop - originalRoofTop - originalRoofHeight / 2
// 기존 위치와 새로운 위치의 차이를 계산
const deltaX = roof.left - originalRoofLeft
const deltaY = roof.top - originalRoofTop
// Move all related objects by the delta
allRoofObject.forEach((obj) => {
// console.log('obj.type : ', obj.type, obj)
obj.set({
left: obj.left + deltaX,
top: obj.top + deltaY,
objectCaching: false,
})
// obj._calcDimensions()
obj.setCoords()
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 {
console.log('obj', obj.name, obj.type, obj.startPoint, obj.endPoint)
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') {
// const thisText = canvas.getObjects().find((o) => o.name === 'lengthText' && o.parentId === obj.id)
// canvas.remove(thisText)
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.requestRenderAll()
canvas.renderAll()
})
}

2
src/hooks/roofcover/useRoofShapeSetting.js
View File

@ -416,7 +416,7 @@ export function useRoofShapeSetting(id) {
canvas.remove(obj)
})
const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL, direction })
const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL, direction, originX: 'center', originY: 'center' })
polygon.lines = [...outerLines]
addPitchTextsByOuterLines()

2
src/hooks/useMode.js
View File

@ -1369,6 +1369,8 @@ export function useMode() {
fontSize: fontSize,
sort: sort,
selectable: false,
originX: 'center',
originY: 'center',
},
canvas,
)

2
src/util/qpolygon-utils.js
View File

@ -551,6 +551,8 @@ export const drawGabledRoof = (roofId, canvas) => {
degree: currentRoof.attributes.degree,
direction: currentRoof.direction,
},
originX: 'center',
originY: 'center',
})
const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
//지붕 각도에 따른 실측치 조정