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..e38307e2 100644
--- a/src/hooks/module/useModule.js
+++ b/src/hooks/module/useModule.js
@@ -5,8 +5,8 @@ import { useRecoilValue } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import * as turf from '@turf/turf'
import { useSwal } from '../useSwal'
-import { QPolygon } from '@/components/fabric/QPolygon'
import { useModuleBasicSetting } from './useModuleBasicSetting'
+import { useMessage } from '../useMessage'
export const MODULE_REMOVE_TYPE = {
LEFT: 'left',
@@ -25,9 +25,14 @@ export const MODULE_INSERT_TYPE = {
BOTTOM: 'down',
}
+export const MODULE_ALIGN_TYPE = {
+ TOP: 'top',
+}
+
export function useModule() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
+ const { getMessage } = useMessage()
const { checkModuleDisjointObjects } = useModuleBasicSetting()
const moduleMove = (length, direction) => {
@@ -99,7 +104,7 @@ export function useModule() {
? '모듈이 오브젝트와 겹칩니다.'
: '영역 밖',
icon: 'error',
- type: 'confirm',
+ type: 'alert',
confirmFn: () => {
selectedModules.forEach((module) => {
module.set({ ...module, left: module.originCoords.left, top: module.originCoords.top })
@@ -123,47 +128,55 @@ 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 copyModules = []
+ let copyModule = null
canvas.discardActiveObject() //선택해제
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, length, true)
- const moduleOptions = { ...module, left, top, id: uuidv4() }
- const rect = new QPolygon(module.points, moduleOptions)
- canvas.add(rect)
- rect.setCoords()
- canvas.renderAll()
-
- isOverlapOtherModules.push(
- otherModules.some(
- (otherModule) =>
- turf.booleanOverlap(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)) ||
- turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)),
- ),
- )
-
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(rect, true), objects))
-
- isOutsideSurface.push(
- !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(rect, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
+ module.clone((obj) => {
+ obj.set({
+ parentId: module.parentId,
+ initOptions: module.initOptions,
+ direction: module.direction,
+ arrow: module.arrow,
+ name: module.name,
+ type: module.type,
+ length: module.length,
+ points: module.points,
+ surfaceId: module.surfaceId,
+ left,
+ top,
+ id: uuidv4(),
+ })
+ copyModules.push(obj)
+ copyModule = obj
+ canvas.add(obj)
+ canvas.renderAll()
+ })
if (
- isOverlapOtherModules.some((isOverlap) => isOverlap) ||
- isOutsideSurface.some((isOutside) => isOutside) ||
- isOverlapObjects.some((isOverlap) => isOverlap)
+ isOverlapOtherModules(copyModule, otherModules) ||
+ isOverlapObjects(copyModule, objects) ||
+ isOutsideSurface(copyModule, moduleSetupSurface)
) {
- swalFire({
- title: isOverlapOtherModules ? '겹치는 모듈이 있습니다.' : isOutsideSurface ? '모듈이 오브젝트와 겹칩니다.' : '영역 밖',
- icon: 'error',
- type: 'confirm',
- confirmFn: () => {
- canvas.remove(rect)
- canvas.renderAll()
- },
- })
+ isWarning = true
+ copyModule.set({ fill: 'red' })
+ canvas.renderAll()
}
})
+
+ if (isWarning) {
+ swalFire({
+ title: getMessage('can.not.copy.module'),
+ icon: 'error',
+ type: 'alert',
+ confirmFn: () => {
+ canvas.remove(...copyModules)
+ canvas.renderAll()
+ },
+ })
+ }
}
const moduleMultiMove = (type, length, direction) => {
@@ -181,18 +194,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 +212,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: getMessage('can.not.move.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
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()
@@ -258,11 +251,12 @@ export function useModule() {
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
const objects = getObjects()
- const copyRects = []
+ const copyModules = []
+ let copyModule = null
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)
@@ -272,52 +266,47 @@ 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)
- 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)),
- ),
- )
+ module.clone((obj) => {
+ obj.set({
+ parentId: module.parentId,
+ initOptions: module.initOptions,
+ direction: module.direction,
+ arrow: module.arrow,
+ name: module.name,
+ type: module.type,
+ length: module.length,
+ points: module.points,
+ surfaceId: module.surfaceId,
+ left,
+ top,
+ id: uuidv4(),
+ })
+ copyModule = obj
+ canvas.add(obj)
+ copyModules.push(obj)
+ obj.setCoords()
+ })
+ if (
+ isOverlapOtherModules(copyModule, otherModules) ||
+ isOverlapObjects(copyModule, 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(rect, true)) ||
- !turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(moduleSetupSurface, true)),
- )
+ 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: getMessage('can.not.copy.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
confirmFn: () => {
- canvas.remove(...copyRects)
+ canvas.remove(...copyModules)
canvas.renderAll()
},
})
- } else {
- canvas.renderAll()
}
}
@@ -333,7 +322,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 +332,36 @@ 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) || isOverlapObjects(module, 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) || isOverlapObjects(module, 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 +369,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 +381,46 @@ 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))
+ ) ||
+ isOverlapObjects(module, 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
- ) {
+ canvas.renderAll()
+ if (isWarning) {
swalFire({
- title: isOverlapOtherModules.some((isOverlap) => isOverlap)
- ? '겹치는 모듈이 있습니다.'
- : isOverlapObjects.some((isOverlap) => isOverlap)
- ? '모듈이 오브젝트와 겹칩니다.'
- : '영역 밖',
+ title: getMessage('can.not.remove.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
confirmFn: () => {
canvas.add(...columnModules)
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 moduleRowRemove = (type) => {
@@ -443,7 +435,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 +446,34 @@ 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 (isOverlapOtherModules(module, topModules) || isOverlapObjects(module, objects) || isOutsideSurface(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.set({ top: module.top + activeModule.height })
module.setCoords()
canvas.renderAll()
- isOverlapOtherModules.push(getIsOverlapOtherModules(module, bottomModules))
- isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
- isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+ if (isOverlapOtherModules(module, bottomModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
+ isWarning = true
+ module.set({ fill: 'red' })
+ }
})
targetModules = topModules
} else if (type === MODULE_REMOVE_TYPE.VERTICAL_SIDE) {
@@ -484,63 +481,60 @@ export function useModule() {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
- if (height === -1) height = activeModule.top - module.top
+ // if (height === -1) height = activeModule.top - module.top
+ if (height === -1) height = activeModule.height
module.set({ top: module.top + height / 2 })
module.setCoords()
- canvas.renderAll()
})
bottomModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
+ fill: module.fill,
}
- if (height === -1) height = module.top - activeModule.top
+ // if (height === -1) height = module.top - activeModule.top
+ if (height === -1) height = activeModule.height
module.set({ top: module.top - height / 2 })
module.setCoords()
- canvas.renderAll()
})
- const sideModules = [...topModules, ...bottomModules]
canvas.renderAll()
+ const sideModules = [...topModules, ...bottomModules]
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))
+ ) ||
+ isOverlapObjects(module, 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
- ) {
+ 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: getMessage('can.not.remove.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
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) => {
@@ -550,14 +544,14 @@ export function useModule() {
const targetModules =
type === MODULE_INSERT_TYPE.LEFT
? otherModules.filter((module) => module.left < activeModule.left).sort((a, b) => a.left - b.left)
- : otherModules.filter((module) => module.left > activeModule.left).sort((a, b) => b.left - a.left)
+ : otherModules.filter((module) => module.left > activeModule.left).sort((a, b) => a.left - b.left)
const objects = getObjects()
const copyModules = []
const moduleSetupSurface = canvas
.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: '마지막 모듈입니다.',
@@ -570,75 +564,68 @@ export function useModule() {
targetModules.forEach((module) => {
if (width === -1)
width = type === MODULE_INSERT_TYPE.LEFT ? Number(activeModule.left) - Number(module.left) : Number(module.left) - Number(activeModule.left)
- const { top, left } = getPosotion(module, type, width, false)
+ const { top, left } = getPosotion(module, type, module.width, false)
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 (isOverlapObjects(module, 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()
})
+ canvas.renderAll()
otherModules = getOtherModules(columnModules)
columnModules.forEach((module) => {
- const { top, left } = getPosotion(module, type, width, false)
- const moduleOptions = { ...module, left, top, id: uuidv4() }
- const copyModule = new QPolygon(module.points, moduleOptions)
- canvas.add(copyModule)
- copyModules.push(copyModule)
+ const { top, left } = getPosotion(module, type, module.width, false)
+ let copyModule = null
+ module.clone((obj) => {
+ obj.set({
+ parentId: module.parentId,
+ initOptions: module.initOptions,
+ direction: module.direction,
+ arrow: module.arrow,
+ name: module.name,
+ type: module.type,
+ length: module.length,
+ points: module.points,
+ surfaceId: module.surfaceId,
+ left,
+ top,
+ id: uuidv4(),
+ })
+ copyModule = obj
+ canvas.add(obj)
+ copyModules.push(obj)
+ obj.setCoords()
+ })
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
}
-
- 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()
})
-
- 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: getMessage('can.not.insert.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
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()
- copyModules.forEach((module) => {
- canvas.remove(module)
- })
+ canvas.remove(...copyModules)
canvas.renderAll()
},
})
@@ -646,16 +633,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)
: 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,86 +654,102 @@ 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)
height = type === MODULE_INSERT_TYPE.TOP ? Number(activeModule.top) - Number(module.top) : Number(module.top) - Number(activeModule.top)
- const { top, left } = getPosotion(module, type, height, false)
+ const { top, left } = getPosotion(module, type, activeModule.height, false)
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 (isOverlapObjects(module, 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()
})
+ canvas.renderAll()
otherModules = getOtherModules(rowModules)
rowModules.forEach((module) => {
- const { top, left } = getPosotion(module, type, height, false)
- const moduleOptions = { ...module, left, top, id: uuidv4() }
- const copyModule = new QPolygon(module.points, moduleOptions)
- canvas.add(copyModule)
- copyModules.push(copyModule)
+ const { top, left } = getPosotion(module, type, activeModule.height, false)
+ let copyModule = null
+ module.clone((obj) => {
+ obj.set({
+ parentId: module.parentId,
+ initOptions: module.initOptions,
+ direction: module.direction,
+ arrow: module.arrow,
+ name: module.name,
+ type: module.type,
+ length: module.length,
+ points: module.points,
+ surfaceId: module.surfaceId,
+ fill: module.fill,
+ left,
+ top,
+ id: uuidv4(),
+ })
+ copyModule = obj
+ canvas.add(obj)
+ copyModules.push(obj)
+ obj.setCoords()
+ })
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 (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: getMessage('can.not.insert.module'),
icon: 'error',
- type: 'confirm',
+ type: 'alert',
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()
- copyModules.forEach((module) => {
- canvas.remove(module)
- })
+ canvas.remove(...copyModules)
canvas.renderAll()
},
})
}
}
+ 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 !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects)
+ }
+
+ 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 +797,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 7f0ba147..02896cb3 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'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useContextMenu() {
@@ -58,7 +61,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 { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
@@ -80,7 +86,15 @@ export function useContextMenu() {
{
id: 'gridColorEdit',
name: getMessage('modal.grid.color.edit'),
- component: ,
+ component: (
+
+ ),
},
{
id: 'remove',
@@ -89,6 +103,10 @@ export function useContextMenu() {
{
id: 'removeAll',
name: getMessage('delete.all'),
+ fn: () => {
+ removeGrid()
+ removeAdsorptionPoint()
+ },
},
],
])
@@ -522,7 +540,15 @@ export function useContextMenu() {
{
id: 'gridColorEdit',
name: getMessage('contextmenu.grid.color.edit'),
- component: ,
+ component: (
+
+ ),
},
{
id: 'remove',
@@ -536,12 +562,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()
},
},
diff --git a/src/locales/ja.json b/src/locales/ja.json
index d57b8f18..382daaa5 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -933,5 +933,9 @@
"simulator.table.sub9": "予測発電量 (kWh)",
"simulator.notice.sub1": "Hanwha Japan 年間発電量",
"simulator.notice.sub2": "シミュレーション案内事項",
- "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요."
+ "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요.",
+ "can.not.move.module": "모듈을 이동할 수 없습니다.(JA)",
+ "can.not.copy.module": "모듈을 복사할 수 없습니다.(JA)",
+ "can.not.remove.module": "모듈을 삭제할 수 없습니다.(JA)",
+ "can.not.insert.module": "모듈을 삽입할 수 없습니다.(JA)"
}
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 1d288fdf..c772eebf 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -943,5 +943,9 @@
"simulator.table.sub9": "예측발전량 (kWh)",
"simulator.notice.sub1": "Hanwha Japan 연간 발전량",
"simulator.notice.sub2": "시뮬레이션 안내사항",
- "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요."
+ "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요.",
+ "can.not.move.module": "모듈을 이동할 수 없습니다.",
+ "can.not.copy.module": "모듈을 복사할 수 없습니다.",
+ "can.not.remove.module": "모듈을 삭제할 수 없습니다.",
+ "can.not.insert.module": "모듈을 삽입할 수 없습니다."
}