변 속성변경 로직 수정

This commit is contained in:
김민식 2025-02-25 17:49:45 +09:00
parent 22b891dd7f
commit 2e49c8cf56
2 changed files with 90 additions and 30 deletions

View File

@ -10,7 +10,7 @@ export default function PlacementSurfaceLineProperty(props) {
const { id, pos = { x: 50, y: 230 }, roof, setIsHidden } = props
const { closePopup } = usePopup()
// const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix } = useRoofLinePropertySetting({
const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix, handleClosed } = useRoofLinePropertySetting({
id,
roof,
setIsHidden,
@ -33,6 +33,7 @@ export default function PlacementSurfaceLineProperty(props) {
}
closePopup(id)
handleClosed()
if (setIsHidden) {
setIsHidden(false)

View File

@ -25,16 +25,20 @@ export function useRoofLinePropertySetting(props) {
const { getMessage } = useMessage()
useEffect(() => {
if (currentObject && currentObject.name === 'roofLine') {
roof.lines.forEach((line) => {
const lineType = line.attributes?.type
if (!lineType) {
line.set({
stroke: '#000000',
strokeWidth: 4,
})
}
})
if (currentObject && currentObject.name === 'cloneRoofLine') {
// roof.lines.forEach((line) => {
canvas
.getObjects()
.filter((obj) => obj.name === 'cloneRoofLine')
.forEach((line) => {
const lineType = line.attributes?.type
if (!lineType) {
line.set({
stroke: '#000000',
strokeWidth: 4,
})
}
})
currentObject.set({
stroke: LINE_COLOR.ACTIVE,
strokeWidth: 4,
@ -44,15 +48,31 @@ export function useRoofLinePropertySetting(props) {
}, [currentObject])
const roofLinesInit = () => {
console.log('🚀 ~ roofLinesInit ~ roof:', roof)
roof.lines.forEach((line) => {
canvas.add(line)
line.set({
stroke: LINE_COLOR.DEFAULT,
strokeWidth: 4,
visible: true,
name: 'roofLine',
line.clone((cloned) => {
cloned.set({
...line,
stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
strokeWidth: 4,
visible: true,
name: 'cloneRoofLine',
selectable: true,
originLine: line.id,
})
line.set({
visible: false,
})
canvas.add(cloned)
cloned.bringToFront()
})
line.bringToFront()
// line.set({
// stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
// strokeWidth: 4,
// visible: true,
// name: 'roofLine',
// })
// line.bringToFront()
})
canvas.renderAll()
}
@ -121,22 +141,43 @@ export function useRoofLinePropertySetting(props) {
const handleFix = () => {
// const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
const notSettingLines = roof.lines.filter(
(line) =>
!line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
)
// const notSettingLines = roof.lines.filter(
console.log(canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine'))
const notSettingLines = canvas
.getObjects()
.filter((obj) => obj.name === 'cloneRoofLine')
.filter(
(line) =>
!line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
)
if (notSettingLines.length > 0) {
swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
return
}
roof.lines.forEach((line) => {
line.set({
stroke: LINE_COLOR.DEFAULT,
strokeWidth: 4,
visible: false,
canvas
.getObjects()
.filter((obj) => obj.name === 'cloneRoofLine')
.forEach((line) => {
const originLine = roof.lines.find((obj) => obj.id === line.originLine)
originLine.set({
attributes: {
...originLine.attributes,
type: line.attributes.type,
},
visible: true,
})
canvas.remove(line)
})
})
// roof.lines.forEach((line) => {
// line.set({
// stroke: LINE_COLOR.DEFAULT,
// strokeWidth: 4,
// visible: false,
// })
// })
canvas.renderAll()
closePopup(id)
@ -145,12 +186,15 @@ export function useRoofLinePropertySetting(props) {
const nextLineFocus = (selectedLine) => {
// const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
const lines = roof?.lines
// const lines = roof?.lines
const lines = canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine')
console.log('🚀 ~ nextLineFocus ~ lines:', lines)
if (!lines) return
const index = lines.findIndex((line) => line === selectedLine)
const nextLine = lines[index + 1] || lines[0]
if (!nextLine.attributes?.type) {
if (nextLine.attributes?.type === 'default') {
canvas.setActiveObject(nextLine)
} else {
//activeObject 해제
@ -158,6 +202,20 @@ export function useRoofLinePropertySetting(props) {
}
}
const handleClosed = () => {
canvas
.getObjects()
.filter((obj) => obj.name === 'cloneRoofLine')
.forEach((line) => {
roof.lines
.find((obj) => obj.id === line.originLine)
.set({
visible: true,
})
canvas.remove(line)
})
}
return {
roofLinesInit,
handleSetEaves,
@ -165,5 +223,6 @@ export function useRoofLinePropertySetting(props) {
handleSetRidge,
handleRollback,
handleFix,
handleClosed,
}
}