From 63a8ba850523bb461fbe8931cd38b513f2bf3014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Fri, 3 Jan 2025 14:39:03 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=93=88=20contextmenu=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EB=8B=A4=EA=B5=AD=EC=96=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModule.js | 328 +++++++++++++++++----------------- src/locales/ja.json | 6 +- src/locales/ko.json | 6 +- 3 files changed, 177 insertions(+), 163 deletions(-) diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index 453d4924..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', @@ -32,6 +32,7 @@ export const MODULE_ALIGN_TYPE = { export function useModule() { const canvas = useRecoilValue(canvasState) const { swalFire } = useSwal() + const { getMessage } = useMessage() const { checkModuleDisjointObjects } = useModuleBasicSetting() const moduleMove = (length, direction) => { @@ -103,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 }) @@ -127,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) => { @@ -213,9 +222,9 @@ export function useModule() { canvas.renderAll() if (isWarning) { swalFire({ - title: '삭제할 수 없습니다.', + 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, fill: module.originPos.fill }) @@ -242,7 +251,8 @@ 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] @@ -256,32 +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.points, moduleOptions) - canvas.add(rect) - copyRects.push(rect) - module.setCoords() - - if (otherModules.length > 0) { - if (isOverlapOtherModules(rect, otherModules) || isOverlapObjects(rect, objects) || isOutsideSurface(rect, moduleSetupSurface)) { - isWarning = true - rect.set({ fill: 'red' }) - } + 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' }) } + canvas.renderAll() }) - canvas.renderAll() + if (isWarning) { swalFire({ - title: '복사할 수 없습니다.', + title: getMessage('can.not.copy.module'), icon: 'error', - type: 'confirm', + type: 'alert', confirmFn: () => { - canvas.remove(...copyRects) + canvas.remove(...copyModules) canvas.renderAll() }, }) - } else { - canvas.renderAll() } } @@ -313,11 +338,7 @@ export function useModule() { module.set({ left: module.left - width }) module.setCoords() canvas.renderAll() - if ( - isOverlapOtherModules(module, leftModules) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || - isOutsideSurface(module, moduleSetupSurface) - ) { + if (isOverlapOtherModules(module, leftModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { module.set({ fill: 'red' }) isWarning = true } @@ -335,11 +356,7 @@ export function useModule() { module.set({ left: module.left + width }) module.setCoords() canvas.renderAll() - if ( - isOverlapOtherModules(module, rightModules) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || - isOutsideSurface(module, moduleSetupSurface) - ) { + if (isOverlapOtherModules(module, rightModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { module.set({ fill: 'red' }) isWarning = true } @@ -378,7 +395,7 @@ export function useModule() { module, sideModules.filter((m) => m.id !== module.id), ) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || + isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface) ) { isWarning = true @@ -391,17 +408,18 @@ export function useModule() { canvas.renderAll() if (isWarning) { swalFire({ - title: '삭제할 수 없습니다.', + title: getMessage('can.not.remove.module'), icon: 'error', type: 'alert', - confirmFn: () => {}, + 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() + }, }) - canvas.add(...columnModules) - targetModules.forEach((module) => { - module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill }) - module.setCoords() - }) - canvas.renderAll() } } @@ -434,11 +452,7 @@ export function useModule() { module.set({ top: module.top - height }) module.setCoords() canvas.renderAll() - if ( - getIsOverlapOtherModules(module, topModules) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || - getIsOutsideSurface(module, moduleSetupSurface) - ) { + if (isOverlapOtherModules(module, topModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { isWarning = true module.set({ fill: 'red' }) } @@ -453,14 +467,10 @@ export function useModule() { 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() - if ( - getIsOverlapOtherModules(module, bottomModules) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || - getIsOutsideSurface(module, moduleSetupSurface) - ) { + if (isOverlapOtherModules(module, bottomModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { isWarning = true module.set({ fill: 'red' }) } @@ -473,10 +483,10 @@ export function useModule() { 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) => { @@ -485,22 +495,22 @@ export function useModule() { 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) => { if ( - getIsOverlapOtherModules( + isOverlapOtherModules( module, sideModules.filter((m) => m.id !== module.id), ) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || - getIsOutsideSurface(module, moduleSetupSurface) + isOverlapObjects(module, objects) || + isOutsideSurface(module, moduleSetupSurface) ) { isWarning = true module.set({ fill: 'red' }) @@ -512,9 +522,9 @@ export function useModule() { if (isWarning && type !== MODULE_REMOVE_TYPE.NONE) { targetModules.forEach((rect) => rect.set({ fill: 'red' })) swalFire({ - title: '삭제할 수 없습니다.', + title: getMessage('can.not.remove.module'), icon: 'error', - type: 'confirm', + type: 'alert', confirmFn: () => { canvas.add(...rowModules) targetModules.forEach((module) => { @@ -534,7 +544,7 @@ 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 @@ -554,7 +564,7 @@ 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, @@ -562,19 +572,37 @@ export function useModule() { } module.set({ left, top }) canvas.renderAll() - if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) { + if (isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { isWarning = true module.set({ fill: 'red' }) } 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 ( @@ -583,44 +611,21 @@ export function useModule() { 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)) - // } - - // isOutsideSurface.push( - // !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) || - // !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)), - // ) module.setCoords() }) canvas.renderAll() if (isWarning) { - targetModules.forEach((rect) => rect.set({ fill: 'red' })) swalFire({ - title: '삽입할 수 없습니다.', + 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, fill: module.originPos.fill }) module.setCoords() }) - canvas.renderAll() - copyModules.forEach((module) => { - canvas.remove(module) - }) + canvas.remove(...copyModules) canvas.renderAll() }, }) @@ -633,7 +638,7 @@ export function useModule() { 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) if (targetModules.length === 0) { swalFire({ @@ -654,39 +659,50 @@ export function useModule() { 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) { - if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) { - isWarning = true - module.set({ fill: red }) - } - // isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects)) + if (isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) { + isWarning = true + module.set({ fill: 'red' }) } 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(), fill: module.fill } - const copyModule = new QPolygon(module.points, moduleOptions) - copyModule.originPos = { - fill: copyModule.fill, - } - 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 ( isOverlapOtherModules(copyModule, otherModules) || - !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || + isOverlapObjects(copyModule, objects) || isOutsideSurface(copyModule, moduleSetupSurface) ) { isWarning = true @@ -698,21 +714,15 @@ export function useModule() { if (isWarning) { swalFire({ - title: '삽입할 수 없습니다.', + 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, fill: module.originPos.fill }) module.setCoords() }) - copyModules.forEach((module) => { - module.set({ fill: module.originPos.fill }) - }) - canvas.renderAll() - copyModules.forEach((module) => { - canvas.remove(module) - }) + canvas.remove(...copyModules) canvas.renderAll() }, }) @@ -730,11 +740,7 @@ export function useModule() { } const isOverlapObjects = (module, objects) => { - return !objects.some( - (object) => - turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) || - turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)), - ) + return !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) } const isOutsideSurface = (module, moduleSetupSurface) => { 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": "모듈을 삽입할 수 없습니다." }