currentObject별 context메뉴에 선택 menu 분기 처리
This commit is contained in:
김민식
parent
ff7eb36762
commit
fad86d4585
@ -118,145 +118,8 @@ export function useContextMenu() {
|
|||||||
])
|
])
|
||||||
break
|
break
|
||||||
case 'outline':
|
case 'outline':
|
||||||
setContextMenu([
|
if (['roof', 'auxiliaryLine'].includes(currentObject?.name)) {
|
||||||
[
|
}
|
||||||
{
|
|
||||||
id: 'roofMaterialPlacement',
|
|
||||||
name: getMessage('contextmenu.roof.material.placement'),
|
|
||||||
component: <RoofAllocationSetting id={popupId} />,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
id: 'roofMaterialRemoveAll',
|
|
||||||
name: getMessage('contextmenu.roof.material.remove.all'),
|
|
||||||
fn: () => removeAllRoofMaterial(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'selectMove',
|
|
||||||
name: getMessage('contextmenu.select.move'),
|
|
||||||
fn: (currentMousePos) => {
|
|
||||||
moveRoofMaterial(currentMousePos)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'wallLineRemove',
|
|
||||||
name: getMessage('contextmenu.wallline.remove'),
|
|
||||||
fn: (currentMousePos) => {
|
|
||||||
removeOuterLines(currentMousePos)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
id: 'sizeEdit',
|
|
||||||
name: getMessage('contextmenu.size.edit'),
|
|
||||||
component: <AuxiliarySize id={popupId} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auxiliaryMove',
|
|
||||||
name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
|
|
||||||
shortcut: ['m', 'M'],
|
|
||||||
component: <AuxiliaryEdit id={popupId} type={'move'} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auxiliaryCopy',
|
|
||||||
name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
|
|
||||||
shortcut: ['c', 'C'],
|
|
||||||
component: <AuxiliaryEdit id={popupId} type={'copy'} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auxiliaryRemove',
|
|
||||||
shortcut: ['d', 'D'],
|
|
||||||
name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
|
|
||||||
fn: () => {
|
|
||||||
if (!currentObject) return
|
|
||||||
const roof = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]
|
|
||||||
if (!roof) {
|
|
||||||
// 아직 innerLines로 세팅이 안되어있는 line인 경우 제거
|
|
||||||
canvas.remove(currentObject)
|
|
||||||
canvas.discardActiveObject()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const innerLines = roof.innerLines?.filter((line) => currentObject.id !== line.id)
|
|
||||||
roof.innerLines = [...innerLines]
|
|
||||||
canvas.remove(currentObject)
|
|
||||||
canvas.discardActiveObject()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auxiliaryVerticalBisector',
|
|
||||||
name: getMessage('contextmenu.auxiliary.vertical.bisector'),
|
|
||||||
fn: () => {
|
|
||||||
if (!currentObject) return
|
|
||||||
const slope = (currentObject.y2 - currentObject.y1) / (currentObject.x2 - currentObject.x1)
|
|
||||||
const length = currentObject.length
|
|
||||||
|
|
||||||
let startX, startY, endX, endY
|
|
||||||
if (slope === 0) {
|
|
||||||
startX = endX = (currentObject.x1 + currentObject.x2) / 2
|
|
||||||
startY = currentObject.y2 - length / 2
|
|
||||||
endY = currentObject.y2 + length / 2
|
|
||||||
} else if (slope === Infinity) {
|
|
||||||
startX = currentObject.x1 - length / 2
|
|
||||||
startY = endY = (currentObject.y1 + currentObject.y2) / 2
|
|
||||||
endX = currentObject.x1 + length / 2
|
|
||||||
} else {
|
|
||||||
const bisectorSlope = -1 / slope
|
|
||||||
const dx = length / 2 / Math.sqrt(1 + bisectorSlope * bisectorSlope)
|
|
||||||
const dy = bisectorSlope * dx
|
|
||||||
|
|
||||||
startX = (currentObject.x1 + currentObject.x2) / 2 + dx
|
|
||||||
startY = (currentObject.y1 + currentObject.y2) / 2 + dy
|
|
||||||
endX = (currentObject.x1 + currentObject.x2) / 2 - dx
|
|
||||||
endY = (currentObject.y1 + currentObject.y2) / 2 - dy
|
|
||||||
}
|
|
||||||
|
|
||||||
const line = addLine([startX, startY, endX, endY], {
|
|
||||||
stroke: 'red',
|
|
||||||
strokeWidth: 1,
|
|
||||||
selectable: true,
|
|
||||||
name: 'auxiliaryLine',
|
|
||||||
attributes: { ...currentObject.attributes },
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!currentObject.attributes.roofId) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas
|
|
||||||
.getObjects()
|
|
||||||
.filter((obj) => obj.id === currentObject.attributes.roofId)[0]
|
|
||||||
.innerLines.push(line)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'auxiliaryRemoveAll',
|
|
||||||
name: getMessage('contextmenu.auxiliary.remove.all'),
|
|
||||||
fn: () => {
|
|
||||||
if (!currentObject) {
|
|
||||||
swalFire({ text: getMessage('roof.is.not.selected') })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const innerLines = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]?.innerLines
|
|
||||||
if (innerLines) {
|
|
||||||
innerLines.forEach((line) => {
|
|
||||||
canvas.remove(line)
|
|
||||||
})
|
|
||||||
innerLines.length = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 확정되지 않은 보조선
|
|
||||||
const notFixedAuxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isAuxiliaryFixed)
|
|
||||||
|
|
||||||
notFixedAuxiliaryLines.forEach((line) => {
|
|
||||||
canvas.remove(line)
|
|
||||||
})
|
|
||||||
|
|
||||||
canvas.renderAll()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
])
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
setContextMenu([])
|
setContextMenu([])
|
||||||
@ -305,96 +168,244 @@ export function useContextMenu() {
|
|||||||
switch (currentObject.name) {
|
switch (currentObject.name) {
|
||||||
case 'triangleDormer':
|
case 'triangleDormer':
|
||||||
case 'pentagonDormer':
|
case 'pentagonDormer':
|
||||||
setContextMenu([
|
if (selectedMenu === 'surface') {
|
||||||
[
|
setContextMenu([
|
||||||
{
|
[
|
||||||
id: 'sizeEdit',
|
{
|
||||||
name: getMessage('contextmenu.size.edit'),
|
id: 'sizeEdit',
|
||||||
component: <SizeSetting id={popupId} target={currentObject} />,
|
name: getMessage('contextmenu.size.edit'),
|
||||||
},
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
||||||
{
|
},
|
||||||
id: 'dormerRemove',
|
{
|
||||||
shortcut: ['d', 'D'],
|
id: 'dormerRemove',
|
||||||
name: `${getMessage('contextmenu.remove')}(D)`,
|
shortcut: ['d', 'D'],
|
||||||
fn: () => deleteObject(),
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
||||||
},
|
fn: () => deleteObject(),
|
||||||
{
|
},
|
||||||
id: 'dormerMove',
|
{
|
||||||
shortcut: ['m', 'M'],
|
id: 'dormerMove',
|
||||||
name: `${getMessage('contextmenu.move')}(M)`,
|
shortcut: ['m', 'M'],
|
||||||
fn: () => moveObjectBatch(),
|
name: `${getMessage('contextmenu.move')}(M)`,
|
||||||
},
|
fn: () => moveObjectBatch(),
|
||||||
{
|
},
|
||||||
id: 'dormerCopy',
|
{
|
||||||
shortcut: ['c', 'C'],
|
id: 'dormerCopy',
|
||||||
name: `${getMessage('contextmenu.copy')}(C)`,
|
shortcut: ['c', 'C'],
|
||||||
fn: () => copyObject(),
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
||||||
},
|
fn: () => copyObject(),
|
||||||
{
|
},
|
||||||
id: 'roofMaterialEdit',
|
{
|
||||||
name: getMessage('contextmenu.roof.material.edit'),
|
id: 'roofMaterialEdit',
|
||||||
component: <RoofMaterialSetting id={popupId} />,
|
name: getMessage('contextmenu.roof.material.edit'),
|
||||||
},
|
component: <RoofMaterialSetting id={popupId} />,
|
||||||
{
|
},
|
||||||
id: 'dormerOffset',
|
{
|
||||||
name: getMessage('contextmenu.dormer.offset'),
|
id: 'dormerOffset',
|
||||||
component: <DormerOffset id={popupId} title={getMessage('contextmenu.dormer.offset')} />,
|
name: getMessage('contextmenu.dormer.offset'),
|
||||||
},
|
component: <DormerOffset id={popupId} title={getMessage('contextmenu.dormer.offset')} />,
|
||||||
],
|
},
|
||||||
])
|
],
|
||||||
|
])
|
||||||
|
}
|
||||||
break
|
break
|
||||||
case 'roof':
|
case 'roof':
|
||||||
setContextMenu([
|
case 'auxiliaryLine':
|
||||||
[
|
case 'hip':
|
||||||
{
|
case 'ridge':
|
||||||
id: 'sizeEdit',
|
if (selectedMenu === 'surface') {
|
||||||
name: getMessage('contextmenu.size.edit'),
|
setContextMenu([
|
||||||
component: <SizeSetting id={popupId} target={currentObject} />,
|
[
|
||||||
},
|
{
|
||||||
{
|
id: 'sizeEdit',
|
||||||
id: 'roofMaterialRemove',
|
name: getMessage('contextmenu.size.edit'),
|
||||||
shortcut: ['d', 'D'],
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
||||||
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
||||||
fn: () => deleteObject(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'roofMaterialMove',
|
|
||||||
shortcut: ['m', 'M'],
|
|
||||||
name: `${getMessage('contextmenu.move')}(M)`,
|
|
||||||
fn: () => moveSurfaceShapeBatch(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'roofMaterialCopy',
|
|
||||||
shortcut: ['c', 'C'],
|
|
||||||
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
||||||
fn: () => copyObject(),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
id: 'roofMaterialEdit',
|
|
||||||
name: getMessage('contextmenu.roof.material.edit'),
|
|
||||||
component: <ContextRoofAllocationSetting id={popupId} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'linePropertyEdit',
|
|
||||||
name: getMessage('contextmenu.line.property.edit'),
|
|
||||||
fn: () => {
|
|
||||||
if (+canvasSetting.roofSizeSet === 3) {
|
|
||||||
swalFire({ text: getMessage('contextmenu.line.property.edit.roof.size.3') })
|
|
||||||
} else {
|
|
||||||
addPopup(popupId, 1, <PlacementSurfaceLineProperty id={popupId} roof={currentObject} />)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// component: <LinePropertySetting id={popupId} target={currentObject} />,
|
{
|
||||||
},
|
id: 'roofMaterialRemove',
|
||||||
{
|
shortcut: ['d', 'D'],
|
||||||
id: 'flowDirectionEdit',
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
||||||
name: getMessage('contextmenu.flow.direction.edit'),
|
fn: () => deleteObject(),
|
||||||
component: <FlowDirectionSetting id={popupId} target={currentObject} />,
|
},
|
||||||
},
|
{
|
||||||
],
|
id: 'roofMaterialMove',
|
||||||
])
|
shortcut: ['m', 'M'],
|
||||||
|
name: `${getMessage('contextmenu.move')}(M)`,
|
||||||
|
fn: () => moveSurfaceShapeBatch(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'roofMaterialCopy',
|
||||||
|
shortcut: ['c', 'C'],
|
||||||
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
||||||
|
fn: () => copyObject(),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'roofMaterialEdit',
|
||||||
|
name: getMessage('contextmenu.roof.material.edit'),
|
||||||
|
component: <ContextRoofAllocationSetting id={popupId} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'linePropertyEdit',
|
||||||
|
name: getMessage('contextmenu.line.property.edit'),
|
||||||
|
fn: () => {
|
||||||
|
if (+canvasSetting.roofSizeSet === 3) {
|
||||||
|
swalFire({ text: getMessage('contextmenu.line.property.edit.roof.size.3') })
|
||||||
|
} else {
|
||||||
|
addPopup(popupId, 1, <PlacementSurfaceLineProperty id={popupId} roof={currentObject} />)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// component: <LinePropertySetting id={popupId} target={currentObject} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'flowDirectionEdit',
|
||||||
|
name: getMessage('contextmenu.flow.direction.edit'),
|
||||||
|
component: <FlowDirectionSetting id={popupId} target={currentObject} />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])
|
||||||
|
} else if (selectedMenu === 'outline') {
|
||||||
|
setContextMenu([
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'roofMaterialPlacement',
|
||||||
|
name: getMessage('contextmenu.roof.material.placement'),
|
||||||
|
component: <RoofAllocationSetting id={popupId} />,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: 'roofMaterialRemoveAll',
|
||||||
|
name: getMessage('contextmenu.roof.material.remove.all'),
|
||||||
|
fn: () => removeAllRoofMaterial(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'selectMove',
|
||||||
|
name: getMessage('contextmenu.select.move'),
|
||||||
|
fn: (currentMousePos) => {
|
||||||
|
moveRoofMaterial(currentMousePos)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'wallLineRemove',
|
||||||
|
name: getMessage('contextmenu.wallline.remove'),
|
||||||
|
fn: (currentMousePos) => {
|
||||||
|
removeOuterLines(currentMousePos)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'sizeEdit',
|
||||||
|
name: getMessage('contextmenu.size.edit'),
|
||||||
|
component: <AuxiliarySize id={popupId} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'auxiliaryMove',
|
||||||
|
name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
|
||||||
|
shortcut: ['m', 'M'],
|
||||||
|
component: <AuxiliaryEdit id={popupId} type={'move'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'auxiliaryCopy',
|
||||||
|
name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
|
||||||
|
shortcut: ['c', 'C'],
|
||||||
|
component: <AuxiliaryEdit id={popupId} type={'copy'} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'auxiliaryRemove',
|
||||||
|
shortcut: ['d', 'D'],
|
||||||
|
name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
|
||||||
|
fn: () => {
|
||||||
|
if (!currentObject) return
|
||||||
|
const roof = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]
|
||||||
|
if (!roof) {
|
||||||
|
// 아직 innerLines로 세팅이 안되어있는 line인 경우 제거
|
||||||
|
canvas.remove(currentObject)
|
||||||
|
canvas.discardActiveObject()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const innerLines = roof.innerLines?.filter((line) => currentObject.id !== line.id)
|
||||||
|
roof.innerLines = [...innerLines]
|
||||||
|
canvas.remove(currentObject)
|
||||||
|
canvas.discardActiveObject()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'auxiliaryVerticalBisector',
|
||||||
|
name: getMessage('contextmenu.auxiliary.vertical.bisector'),
|
||||||
|
fn: () => {
|
||||||
|
if (!currentObject) return
|
||||||
|
const slope = (currentObject.y2 - currentObject.y1) / (currentObject.x2 - currentObject.x1)
|
||||||
|
const length = currentObject.length
|
||||||
|
|
||||||
|
let startX, startY, endX, endY
|
||||||
|
if (slope === 0) {
|
||||||
|
startX = endX = (currentObject.x1 + currentObject.x2) / 2
|
||||||
|
startY = currentObject.y2 - length / 2
|
||||||
|
endY = currentObject.y2 + length / 2
|
||||||
|
} else if (slope === Infinity) {
|
||||||
|
startX = currentObject.x1 - length / 2
|
||||||
|
startY = endY = (currentObject.y1 + currentObject.y2) / 2
|
||||||
|
endX = currentObject.x1 + length / 2
|
||||||
|
} else {
|
||||||
|
const bisectorSlope = -1 / slope
|
||||||
|
const dx = length / 2 / Math.sqrt(1 + bisectorSlope * bisectorSlope)
|
||||||
|
const dy = bisectorSlope * dx
|
||||||
|
|
||||||
|
startX = (currentObject.x1 + currentObject.x2) / 2 + dx
|
||||||
|
startY = (currentObject.y1 + currentObject.y2) / 2 + dy
|
||||||
|
endX = (currentObject.x1 + currentObject.x2) / 2 - dx
|
||||||
|
endY = (currentObject.y1 + currentObject.y2) / 2 - dy
|
||||||
|
}
|
||||||
|
|
||||||
|
const line = addLine([startX, startY, endX, endY], {
|
||||||
|
stroke: 'red',
|
||||||
|
strokeWidth: 1,
|
||||||
|
selectable: true,
|
||||||
|
name: 'auxiliaryLine',
|
||||||
|
attributes: { ...currentObject.attributes },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!currentObject.attributes.roofId) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas
|
||||||
|
.getObjects()
|
||||||
|
.filter((obj) => obj.id === currentObject.attributes.roofId)[0]
|
||||||
|
.innerLines.push(line)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'auxiliaryRemoveAll',
|
||||||
|
name: getMessage('contextmenu.auxiliary.remove.all'),
|
||||||
|
fn: () => {
|
||||||
|
if (!currentObject) {
|
||||||
|
swalFire({ text: getMessage('roof.is.not.selected') })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const innerLines = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]?.innerLines
|
||||||
|
if (innerLines) {
|
||||||
|
innerLines.forEach((line) => {
|
||||||
|
canvas.remove(line)
|
||||||
|
})
|
||||||
|
innerLines.length = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// 확정되지 않은 보조선
|
||||||
|
const notFixedAuxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isAuxiliaryFixed)
|
||||||
|
|
||||||
|
notFixedAuxiliaryLines.forEach((line) => {
|
||||||
|
canvas.remove(line)
|
||||||
|
})
|
||||||
|
|
||||||
|
canvas.renderAll()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
break
|
break
|
||||||
case 'opening':
|
case 'opening':
|
||||||
setContextMenu([
|
setContextMenu([
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user