qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모듈 contextmenu 기능 버그 수정 및 다국어 추가

Browse Source
This commit is contained in:
김민식 2025-01-03 14:39:03 +09:00
parent e0f830b33b
commit 63a8ba8505
3 changed files with 177 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
src/hooks/module/useModule.js
View File

@ -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) => {

6
src/locales/ja.json
View File

@ -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)"
}

6
src/locales/ko.json
View File

@ -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": "모듈을 삽입할 수 없습니다."
}