diff --git a/src/hooks/common/useGrid.js b/src/hooks/common/useGrid.js
index 5565ef54..2b6e9ba9 100644
--- a/src/hooks/common/useGrid.js
+++ b/src/hooks/common/useGrid.js
@@ -28,11 +28,7 @@ export function useGrid() {
// 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
canvas
?.getObjects()
- .filter((obj) => obj.name === 'lineGrid')
- .forEach((obj) => canvas?.remove(obj))
- canvas
- ?.getObjects()
- .filter((obj) => obj.name === 'dotGrid')
+ .filter((obj) => ['lineGrid', 'dotGrid'].includes(obj.name))
.forEach((obj) => canvas?.remove(obj))
//const horizontalInterval = interval.horizontalInterval
@@ -181,8 +177,17 @@ export function useGrid() {
canvas.renderAll()
}
+ const removeGrid = () => {
+ canvas
+ .getObjects()
+ .filter((obj) => ['lineGrid', 'dotGrid', 'tempGrid'].includes(obj.name))
+ .forEach((obj) => canvas.remove(obj))
+ canvas.renderAll()
+ }
+
return {
move,
copy,
+ removeGrid,
}
}
diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js
index 5e494412..453d4924 100644
--- a/src/hooks/module/useModule.js
+++ b/src/hooks/module/useModule.js
@@ -25,6 +25,10 @@ export const MODULE_INSERT_TYPE = {
BOTTOM: 'down',
}
+export const MODULE_ALIGN_TYPE = {
+ TOP: 'top',
+}
+
export function useModule() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
@@ -181,18 +185,17 @@ export function useModule() {
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = getOtherModules(modules)
const objects = getObjects()
- console.log('🚀 ~ moduleMultiMove ~ objects:', objects)
-
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, length, false)
module.originPos = {
top: module.top,
left: module.left,
+ fill: module.fill,
}
module.set({ top, left })
@@ -200,41 +203,22 @@ export function useModule() {
canvas.renderAll()
if (otherModules.length > 0) {
- isOverlapOtherModules.push(
- otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
- ),
- )
+ if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
}
-
- if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- }
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
})
- if (
- isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)
- ) {
+ canvas.renderAll()
+ if (isWarning) {
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: '삭제할 수 없습니다.',
icon: 'error',
type: 'confirm',
confirmFn: () => {
modules.forEach((module) => {
- module.set({ top: module.originPos.top, left: module.originPos.left })
+ module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
module.setCoords()
})
canvas.renderAll()
@@ -262,7 +246,7 @@ export function useModule() {
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)[0]
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
let moduleLength = 0
if (['up', 'down'].includes(direction)) {
moduleLength = Number(modules[modules.length - 1].top) + Number(modules[modules.length - 1].height) - Number(modules[0].top)
@@ -273,42 +257,22 @@ export function useModule() {
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), false)
const moduleOptions = { ...module, left, top, id: uuidv4() }
- const rect = new QPolygon(module.getCurrentPoints(), moduleOptions)
+ const rect = new QPolygon(module.points, moduleOptions)
canvas.add(rect)
copyRects.push(rect)
module.setCoords()
if (otherModules.length > 0) {
- isOverlapOtherModules.push(
- otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)),
- ),
- )
+ if (isOverlapOtherModules(rect, otherModules) || isOverlapObjects(rect, objects) || isOutsideSurface(rect, moduleSetupSurface)) {
+ isWarning = true
+ rect.set({ fill: 'red' })
+ }
}
-
- if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- }
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(rect, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
})
-
- if (
- isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)
- ) {
+ canvas.renderAll()
+ if (isWarning) {
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: '복사할 수 없습니다.',
icon: 'error',
type: 'confirm',
confirmFn: () => {
@@ -333,7 +297,7 @@ export function useModule() {
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
canvas.discardActiveObject()
canvas.remove(...columnModules)
canvas.renderAll()
@@ -343,30 +307,44 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (width === -1) width = module.left - activeModule.left
module.set({ left: module.left - width })
module.setCoords()
canvas.renderAll()
- isOverlapOtherModules.push(getIsOverlapOtherModules(module, leftModules))
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ if (
+ isOverlapOtherModules(module, leftModules) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ isOutsideSurface(module, moduleSetupSurface)
+ ) {
+ module.set({ fill: 'red' })
+ isWarning = true
+ }
})
+ canvas.renderAll()
targetModules = rightModules
} else if (type === MODULE_REMOVE_TYPE.RIGHT) {
leftModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (width === -1) width = activeModule.left - module.left
module.set({ left: module.left + width })
module.setCoords()
canvas.renderAll()
- isOverlapOtherModules.push(getIsOverlapOtherModules(module, rightModules))
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ if (
+ isOverlapOtherModules(module, rightModules) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ isOutsideSurface(module, moduleSetupSurface)
+ ) {
+ module.set({ fill: 'red' })
+ isWarning = true
+ }
})
+ canvas.renderAll()
targetModules = leftModules
} else if (type === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE) {
const sideModules = [...leftModules, ...rightModules]
@@ -374,6 +352,7 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (width === -1) width = activeModule.left - module.left
module.set({ left: module.left + width / 2 })
@@ -385,50 +364,45 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (width === -1) width = module.left - activeModule.left
module.set({ left: module.left - width / 2 })
module.setCoords()
canvas.renderAll()
})
- canvas.renderAll()
+
sideModules.forEach((module) => {
- isOverlapOtherModules.push(
- getIsOverlapOtherModules(
+ if (
+ isOverlapOtherModules(
module,
sideModules.filter((m) => m.id !== module.id),
- ),
- )
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ ) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ isOutsideSurface(module, moduleSetupSurface)
+ ) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
})
targetModules = sideModules
}
- if (
- (isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)) &&
- type !== MODULE_REMOVE_TYPE.NONE
- ) {
- swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
- icon: 'error',
- type: 'confirm',
- confirmFn: () => {
- canvas.add(...columnModules)
- targetModules.forEach((module) => {
- module.set({ top: module.originPos.top, left: module.originPos.left })
- module.setCoords()
- })
- },
- })
- }
canvas.renderAll()
+ if (isWarning) {
+ swalFire({
+ title: '삭제할 수 없습니다.',
+ icon: 'error',
+ type: 'alert',
+ confirmFn: () => {},
+ })
+ canvas.add(...columnModules)
+ targetModules.forEach((module) => {
+ module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
+ module.setCoords()
+ })
+ canvas.renderAll()
+ }
}
const moduleRowRemove = (type) => {
@@ -443,7 +417,7 @@ export function useModule() {
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
canvas.discardActiveObject()
canvas.remove(...rowModules)
@@ -454,29 +428,42 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (height === -1) height = module.top - activeModule.top
module.set({ top: module.top - height })
module.setCoords()
canvas.renderAll()
- isOverlapOtherModules.push(getIsOverlapOtherModules(module, topModules))
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ if (
+ getIsOverlapOtherModules(module, topModules) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ getIsOutsideSurface(module, moduleSetupSurface)
+ ) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
})
+ canvas.renderAll()
targetModules = bottomModules
} else if (type === MODULE_REMOVE_TYPE.BOTTOM) {
topModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (height === -1) height = activeModule.top - module.top
module.set({ top: module.top + height })
module.setCoords()
canvas.renderAll()
- isOverlapOtherModules.push(getIsOverlapOtherModules(module, bottomModules))
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ if (
+ getIsOverlapOtherModules(module, bottomModules) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ getIsOutsideSurface(module, moduleSetupSurface)
+ ) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
})
targetModules = topModules
} else if (type === MODULE_REMOVE_TYPE.VERTICAL_SIDE) {
@@ -484,6 +471,7 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (height === -1) height = activeModule.top - module.top
module.set({ top: module.top + height / 2 })
@@ -495,6 +483,7 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
if (height === -1) height = module.top - activeModule.top
module.set({ top: module.top - height / 2 })
@@ -505,42 +494,37 @@ export function useModule() {
const sideModules = [...topModules, ...bottomModules]
canvas.renderAll()
sideModules.forEach((module) => {
- isOverlapOtherModules.push(
+ if (
getIsOverlapOtherModules(
module,
sideModules.filter((m) => m.id !== module.id),
- ),
- )
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ ) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ getIsOutsideSurface(module, moduleSetupSurface)
+ ) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
})
targetModules = sideModules
}
-
- if (
- (isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)) &&
- type !== MODULE_REMOVE_TYPE.NONE
- ) {
+ canvas.renderAll()
+ if (isWarning && type !== MODULE_REMOVE_TYPE.NONE) {
+ targetModules.forEach((rect) => rect.set({ fill: 'red' }))
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: '삭제할 수 없습니다.',
icon: 'error',
type: 'confirm',
confirmFn: () => {
canvas.add(...rowModules)
targetModules.forEach((module) => {
- module.set({ top: module.originPos.top, left: module.originPos.left })
+ module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
module.setCoords()
})
+ canvas.renderAll()
},
})
}
- canvas.renderAll()
}
const moduleColumnInsert = (type) => {
@@ -557,7 +541,7 @@ export function useModule() {
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let width = -1
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
if (targetModules.length === 0) {
swalFire({
title: '마지막 모듈입니다.',
@@ -574,17 +558,14 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
module.set({ left, top })
canvas.renderAll()
- if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+ if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) {
+ isWarning = true
+ module.set({ fill: 'red' })
}
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
module.setCoords()
})
otherModules = getOtherModules(columnModules)
@@ -596,43 +577,44 @@ export function useModule() {
copyModules.push(copyModule)
canvas.renderAll()
- if (otherModules.length > 0) {
- isOverlapOtherModules.push(
- otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
- ),
- )
+ if (
+ isOverlapOtherModules(copyModule, otherModules) ||
+ isOverlapObjects(copyModule, objects) ||
+ isOutsideSurface(copyModule, moduleSetupSurface)
+ ) {
+ isWarning = true
+ copyModule.set({ fill: 'red' })
}
+ // if (otherModules.length > 0) {
+ // isOverlapOtherModules.push(
+ // otherModules.some(
+ // (otherModule) =>
+ // turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
+ // turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
+ // ),
+ // )
+ // }
- if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- }
+ // if (objects.length > 0) {
+ // isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+ // }
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
+ // isOutsideSurface.push(
+ // !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
+ // !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
+ // )
module.setCoords()
})
-
- if (
- isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)
- ) {
+ canvas.renderAll()
+ if (isWarning) {
+ targetModules.forEach((rect) => rect.set({ fill: 'red' }))
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: '삽입할 수 없습니다.',
icon: 'error',
type: 'confirm',
confirmFn: () => {
targetModules.forEach((module) => {
- module.set({ top: module.originPos.top, left: module.originPos.left })
+ module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
module.setCoords()
})
canvas.renderAll()
@@ -646,16 +628,13 @@ export function useModule() {
}
const muduleRowInsert = (type) => {
- console.log('🚀 ~ muduleRowInsert ~ type:', type)
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const rowModules = getRowModules(activeModule)
- console.log('🚀 ~ muduleRowInsert ~ rowModules:', rowModules)
let otherModules = getOtherModules(rowModules)
const targetModules =
type === MODULE_INSERT_TYPE.TOP
? otherModules.filter((module) => module.top < activeModule.top).sort((a, b) => b.top - a.top)
: otherModules.filter((module) => module.top > activeModule.top).sort((a, b) => a.top - b.top)
- console.log('🚀 ~ muduleRowInsert ~ targetModules:', targetModules)
if (targetModules.length === 0) {
swalFire({
title: '마지막 모듈입니다.',
@@ -670,7 +649,7 @@ export function useModule() {
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let height = -1
- let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+ let isWarning = false
canvas.discardActiveObject()
targetModules.forEach((module) => {
if (height === -1)
@@ -679,67 +658,57 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
module.set({ left, top })
canvas.renderAll()
if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+ if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) {
+ isWarning = true
+ module.set({ fill: red })
+ }
+ // isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
}
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
module.setCoords()
})
+ canvas.renderAll()
otherModules = getOtherModules(rowModules)
rowModules.forEach((module) => {
const { top, left } = getPosotion(module, type, height, false)
- const moduleOptions = { ...module, left, top, id: uuidv4() }
+ const moduleOptions = { ...module, left, top, id: uuidv4(), fill: module.fill }
const copyModule = new QPolygon(module.points, moduleOptions)
+ copyModule.originPos = {
+ fill: copyModule.fill,
+ }
canvas.add(copyModule)
copyModules.push(copyModule)
canvas.renderAll()
- if (otherModules.length > 0) {
- isOverlapOtherModules.push(
- otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
- ),
- )
+ if (
+ isOverlapOtherModules(copyModule, otherModules) ||
+ !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+ isOutsideSurface(copyModule, moduleSetupSurface)
+ ) {
+ isWarning = true
+ copyModule.set({ fill: 'red' })
}
-
- if (objects.length > 0) {
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- }
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
module.setCoords()
})
+ canvas.renderAll()
- if (
- isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOverlapObjects.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside)
- ) {
+ if (isWarning) {
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: '삽입할 수 없습니다.',
icon: 'error',
type: 'confirm',
confirmFn: () => {
targetModules.forEach((module) => {
- module.set({ top: module.originPos.top, left: module.originPos.left })
+ module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
module.setCoords()
})
+ copyModules.forEach((module) => {
+ module.set({ fill: module.originPos.fill })
+ })
canvas.renderAll()
copyModules.forEach((module) => {
canvas.remove(module)
@@ -750,6 +719,31 @@ export function useModule() {
}
}
+ const alignModule = (type) => {}
+
+ const isOverlapOtherModules = (module, otherModules) => {
+ return otherModules.some(
+ (otherModule) =>
+ turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
+ turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
+ )
+ }
+
+ const isOverlapObjects = (module, objects) => {
+ return !objects.some(
+ (object) =>
+ turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) ||
+ turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)),
+ )
+ }
+
+ const isOutsideSurface = (module, moduleSetupSurface) => {
+ return (
+ !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
+ !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
+ )
+ }
+
const getRowModules = (target) => {
return canvas
.getObjects()
@@ -797,29 +791,6 @@ export function useModule() {
.filter((obj) => [BATCH_TYPE.OPENING, BATCH_TYPE.TRIANGLE_DORMER, BATCH_TYPE.PENTAGON_DORMER, BATCH_TYPE.SHADOW].includes(obj.name))
}
- const getIsOverlapOtherModules = (module, otherModules) => {
- return otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
- )
- }
-
- const getIsOverlapObjects = (module, objects) => {
- return !objects.some(
- (object) =>
- turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)),
- )
- }
-
- const getIsOutsideSurface = (module, moduleSetupSurface) => {
- return (
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
- )
- }
-
return {
moduleMove,
moduleMultiMove,
diff --git a/src/hooks/useAdsorptionPoint.js b/src/hooks/useAdsorptionPoint.js
index 4bdef964..12510dcf 100644
--- a/src/hooks/useAdsorptionPoint.js
+++ b/src/hooks/useAdsorptionPoint.js
@@ -36,11 +36,20 @@ export function useAdsorptionPoint() {
canvas.renderAll()
}
+ const removeAdsorptionPoint = () => {
+ const adsorptionPoints = getAdsorptionPoints()
+ adsorptionPoints.forEach((adsorptionPoint) => {
+ canvas.remove(adsorptionPoint)
+ })
+ canvas.renderAll()
+ }
+
return {
adsorptionPointAddMode,
adsorptionPointMode,
adsorptionRange,
getAdsorptionPoints,
adsorptionPointAddModeStateEvent,
+ removeAdsorptionPoint,
}
}
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index ad662534..a66c2c11 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -36,6 +36,9 @@ import { fontSelector, globalFontAtom } from '@/store/fontAtom'
import { useLine } from '@/hooks/useLine'
import { useSwal } from '@/hooks/useSwal'
import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting'
+import { useCanvasSetting } from './option/useCanvasSetting'
+import { useGrid } from './common/useGrid'
+import { useAdsorptionPoint } from './useAdsorptionPoint'
export function useContextMenu() {
const canvas = useRecoilValue(canvasState)
@@ -57,7 +60,10 @@ export function useContextMenu() {
const { moveSurfaceShapeBatch } = useSurfaceShapeBatch()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const { addLine, removeLine } = useLine()
+ const { removeGrid } = useGrid()
+ const { removeAdsorptionPoint } = useAdsorptionPoint()
const commonTextFont = useRecoilValue(fontSelector('commonText'))
+ const { settingsData, setSettingsDataSave } = useCanvasSetting()
const { swalFire } = useSwal()
const currentMenuSetting = () => {
@@ -78,7 +84,15 @@ export function useContextMenu() {
{
id: 'gridColorEdit',
name: getMessage('modal.grid.color.edit'),
- component: ,
+ component: (
+
+ ),
},
{
id: 'remove',
@@ -87,6 +101,10 @@ export function useContextMenu() {
{
id: 'removeAll',
name: getMessage('delete.all'),
+ fn: () => {
+ removeGrid()
+ removeAdsorptionPoint()
+ },
},
],
])
@@ -517,7 +535,15 @@ export function useContextMenu() {
{
id: 'gridColorEdit',
name: getMessage('contextmenu.grid.color.edit'),
- component: ,
+ component: (
+
+ ),
},
{
id: 'remove',
@@ -531,12 +557,8 @@ export function useContextMenu() {
id: 'removeAll',
name: getMessage('contextmenu.remove.all'),
fn: () => {
- canvas
- .getObjects()
- .filter((obj) => ['tempGrid', 'lineGrid', 'dotGrid'].includes(obj.name))
- .forEach((grid) => {
- canvas.remove(grid)
- })
+ removeGrid()
+ removeAdsorptionPoint()
canvas.discardActiveObject()
},
},