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

dev #909

Merged
ysCha merged 2 commits from dev into prd-deploy 2026-06-10 13:15:24 +09:00
Conversation 0 Commits 2 Files Changed 4 +200 -15
4 changed files with 200 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/context-menu/QContextMenu.jsx
View File

@ -34,6 +34,10 @@ export default function QContextMenu(props) {
const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고
// [MODULE-MULTI-SELECT 2026-06-10] 복수선택(2개 이상) 시 컨텍스트 메뉴 노출 차단.
// 복수선택은 Del 키 삭제 + 마우스 드래그 이동만 지원.
if (canvas?.getActiveObjects && canvas.getActiveObjects().length > 1) return
if (currentObject) {
const isArray = currentObject.hasOwnProperty('arrayData')
if (isArray && currentObject.arrayData.length === 0) return

32
src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
View File

@ -49,7 +49,16 @@ export default function PassivityCircuitAllocation(props) {
obj.on('mousedown', (e) => handleTargetModules(obj))
})
// [CIRCUIT-BOX-SELECT 2026-06-10] 手動回路割り当て 에서만 드래그 박스 복수선택 활성화 (이 화면 한정)
const prevSelection = canvas.selection
canvas.selection = true
canvas.on('selection:created', handleBoxSelect)
canvas.on('selection:updated', handleBoxSelect)
return () => {
canvas.off('selection:created', handleBoxSelect)
canvas.off('selection:updated', handleBoxSelect)
canvas.selection = prevSelection
canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE)
@ -57,6 +66,7 @@ export default function PassivityCircuitAllocation(props) {
obj.set({ strokeWidth: 0.3 })
obj.off('mousedown')
})
canvas.discardActiveObject()
canvas.renderAll()
}
}, [])
@ -84,6 +94,28 @@ export default function PassivityCircuitAllocation(props) {
canvas.renderAll()
}
// [CIRCUIT-BOX-SELECT 2026-06-10] 드래그 박스(activeSelection) 로 잡힌 모듈을 targetModules 에 가산 병합 후 fabric 선택 해제
const handleBoxSelect = () => {
const active = canvas.getActiveObject()
if (!active || active.type !== 'activeSelection') return
const boxModules = active.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
if (boxModules.length === 0) return
setTargetModules((prev) => {
const next = Array.isArray(prev) ? [...prev] : []
boxModules.forEach((obj) => {
if (!next.includes(obj.id)) {
obj.set({ strokeWidth: 2 })
next.push(obj.id)
}
})
return next
})
canvas.discardActiveObject()
canvas.renderAll()
}
const handleCircuitNumberFix = () => {
const pcsTpCd = selectedPcs.pcsTpCd // 실내집중형, 옥외멀티형
let uniqueCircuitNumbers = [

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

@ -981,15 +981,11 @@ export function useModule() {
// 회로가 없을때만 삭제 가능
const modulesRemove = () => {
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
const modules = canvas
.getObjects()
.filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id)
const surface = canvas.getObjects().find((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (surface.isComplete) {
removeTrestleMaterials()
}
if (activeModule.circuit) {
// [MODULE-MULTI-SELECT 2026-06-10] 단일/복수 선택 모두 처리. 회로가 걸린 모듈이 하나라도 있으면 차단.
const activeModules = canvas.getActiveObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
if (activeModules.length === 0) return
if (activeModules.some((module) => module.circuit)) {
swalFire({
title: getMessage('can.not.remove.module'),
icon: 'error',
@ -998,11 +994,26 @@ export function useModule() {
return
}
surface.set({ modules: modules })
canvas.remove(activeModule)
const surfaceIds = [...new Set(activeModules.map((module) => module.surfaceId))]
const affectedSurfaces = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && surfaceIds.includes(obj.id))
if (affectedSurfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
}
activeModules.forEach((module) => canvas.remove(module))
affectedSurfaces.forEach((surface) => {
const remaining = canvas.getObjects().filter((obj) => obj.surfaceId === surface.id && obj.name === POLYGON_TYPE.MODULE)
surface.set({ modules: remaining })
})
canvas.discardActiveObject()
canvas.renderAll()
setModuleStatisticsData()
recalculateAllModulesCoords(activeModule.surfaceId)
surfaceIds.forEach((surfaceId) => recalculateAllModulesCoords(surfaceId))
}
const moduleRoofRemove = (surfaceArray) => {
@ -1130,6 +1141,55 @@ export function useModule() {
canvas.renderAll()
}
// [MODULE-MULTI-SELECT 2026-06-10] 드래그 완료 후 지붕면 이탈/겹침 검증 → 위반 시 startPos 복원, 정상이면 확정
const commitModuleDragMove = (target, startPos) => {
if (!canvas || !target) return
const isGroup = target.type === 'activeSelection'
const modules = isGroup
? target.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
: target.name === POLYGON_TYPE.MODULE
? [target]
: []
if (modules.length === 0) return
const movingIds = new Set(modules.map((module) => module.id))
const objects = getObjects()
const invalid = modules.some((module) => {
const surface = canvas.getObjects().find((obj) => obj.id === module.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (surface && isOutsideSurface(module, surface)) return true
const others = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.surfaceId === module.surfaceId && !movingIds.has(obj.id))
if (isOverlapOtherModules(module, others)) return true
if (isOverlapObjects(module, objects)) return true
return false
})
// 위반 시 드래그 시작 위치로 복원 (그룹/단일 공통 — 둘 다 left/top 평행이동)
if (invalid && startPos) {
target.set({ left: startPos.left, top: startPos.top })
target.setCoords()
}
// 그룹은 자식 좌표가 상대값이라 discard 로 절대좌표 베이킹. 단일은 이미 절대좌표라 선택 유지.
if (isGroup) {
canvas.discardActiveObject()
}
const surfaceIds = [...new Set(modules.map((module) => module.surfaceId))]
surfaceIds.forEach((surfaceId) => recalculateAllModulesCoords(surfaceId))
canvas.requestRenderAll()
if (invalid) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
}
}
/**
* [PLAN-CORRUPT-RESTORE 2026-05-18] 손상 module 좌표 복원.
*
@ -1269,6 +1329,7 @@ export function useModule() {
moduleRoofRemove,
alignModule,
recalculateAllModulesCoords,
commitModuleDragMove,
restoreCorruptedModules,
}
}

94
src/hooks/useCanvasEvent.js
View File

@ -1,12 +1,14 @@
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { fabric } from 'fabric'
import { useRecoilState, useRecoilValue } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasSizeState, canvasState, canvasZoomState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { canvasSizeState, canvasState, canvasZoomState, currentMenuState, currentObjectState, isManualModuleSetupState } from '@/store/canvasAtom'
import { QPolygon } from '@/components/fabric/QPolygon'
import { fontSelector } from '@/store/fontAtom'
import { MENU, POLYGON_TYPE } from '@/common/common'
import { useText } from '@/hooks/useText'
import { usePolygon } from '@/hooks/usePolygon'
import { useModule } from '@/hooks/module/useModule'
// 캔버스에 필요한 이벤트
export function useCanvasEvent() {
@ -18,8 +20,12 @@ export function useCanvasEvent() {
const [shouldCenter, setShouldCenter] = useState(false) // 중앙 정렬 플래그 추가
const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
const currentMenu = useRecoilValue(currentMenuState)
const isManualModuleSetup = useRecoilValue(isManualModuleSetupState)
const { changeCorridorDimensionText } = useText()
const { setPolygonLinesActualSize } = usePolygon()
const { commitModuleDragMove } = useModule()
// [MODULE-MULTI-SELECT 2026-06-10] 모듈 복수선택 refine 재진입 가드 (rebuild 중첩 방지)
const refiningRef = useRef(false)
useEffect(() => {
canvas?.setZoom(canvasZoom / 100)
@ -38,7 +44,16 @@ export function useCanvasEvent() {
useEffect(() => {
attachDefaultEventOnCanvas()
}, [currentMenu])
// [MODULE-MULTI-SELECT 2026-06-10] 모듈 기본설정 메뉴에서만 드래그 박스/복수선택 활성화.
// 그 외 메뉴는 selection:false 유지(지붕선·마루 등 다른 레이어가 드래그에 잡히는 부작용 방지).
// [MODULE-MULTI-SELECT 2026-06-10] 手動配置 활성 중에는 드래그 모드 중지(배치 클릭과 충돌 방지).
if (canvas) {
const isModuleMenu = currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING
const enableDrag = isModuleMenu && !isManualModuleSetup
canvas.selection = enableDrag
if (!enableDrag) canvas.discardActiveObject()
}
}, [currentMenu, isManualModuleSetup])
// 기본적인 이벤트 필요시 추가
const attachDefaultEventOnCanvas = () => {
@ -46,6 +61,7 @@ export function useCanvasEvent() {
canvas?.on('object:added', objectEvent.onChange)
canvas?.on('object:added', objectEvent.addEvent)
canvas?.on('object:modified', objectEvent.onChange)
canvas?.on('object:modified', handleModuleSelectionMoved)
canvas?.on('object:removed', objectEvent.onChange)
canvas?.on('selection:cleared', selectionEvent.cleared)
canvas?.on('selection:created', selectionEvent.created)
@ -207,6 +223,7 @@ export function useCanvasEvent() {
})
canvas.renderAll()
}
refineModuleSelection()
},
cleared: (e) => {
setCurrentObject(null)
@ -221,6 +238,10 @@ export function useCanvasEvent() {
if (obj.name === POLYGON_TYPE.MODULE && currentMenu === MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
obj.set({ strokeWidth: 0.3 })
}
// [MODULE-MULTI-SELECT 2026-06-10] 선택 해제 시 모듈 이동잠금 복원(다른 메뉴에서 드래그 방지)
if (obj.name === POLYGON_TYPE.MODULE) {
obj.set({ lockMovementX: true, lockMovementY: true })
}
}
})
}
@ -239,6 +260,10 @@ export function useCanvasEvent() {
//모듈 미선택시 라인 두께 변경
obj.set({ strokeWidth: 0.3 })
}
// [MODULE-MULTI-SELECT 2026-06-10] 선택 해제 시 모듈 이동잠금 복원(다른 메뉴에서 드래그 방지)
if (obj.name === POLYGON_TYPE.MODULE) {
obj.set({ lockMovementX: true, lockMovementY: true })
}
}
})
}
@ -256,9 +281,72 @@ export function useCanvasEvent() {
}
canvas.renderAll()
refineModuleSelection()
},
}
// [MODULE-MULTI-SELECT 2026-06-10] 선택을 모듈만으로 정제, 이동잠금 해제 (회전·스케일은 잠금 유지). refiningRef 로 재구성 중첩 차단.
const refineModuleSelection = () => {
if (!canvas) return
if (currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) return
if (refiningRef.current) return
const active = canvas.getActiveObject()
if (!active) return
// 단일 모듈 선택: 마우스 이동 가능하도록 이동잠금 해제 (회전·스케일은 잠금 유지).
if (active.type !== 'activeSelection') {
if (active.name === POLYGON_TYPE.MODULE) {
active.set({ lockMovementX: false, lockMovementY: false, lockRotation: true, lockScalingX: true, lockScalingY: true, hasControls: false })
canvas.requestRenderAll()
}
return
}
const objs = active.getObjects()
const modules = objs.filter((obj) => obj.name === POLYGON_TYPE.MODULE)
if (modules.length !== objs.length) {
refiningRef.current = true
canvas.discardActiveObject()
if (modules.length > 1) {
canvas.setActiveObject(new fabric.ActiveSelection(modules, { canvas }))
} else if (modules.length === 1) {
canvas.setActiveObject(modules[0])
}
refiningRef.current = false
}
const finalActive = canvas.getActiveObject()
if (finalActive?.type === 'activeSelection') {
finalActive.set({
lockMovementX: false,
lockMovementY: false,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: false,
})
}
canvas.requestRenderAll()
}
// [MODULE-MULTI-SELECT 2026-06-10] object:modified 시 지붕면 경계 검증 → 위반이면 드래그 시작 좌표로 복원
const handleModuleSelectionMoved = (e) => {
if (currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) return
const target = e?.target
if (!target) return
const isGroup = target.type === 'activeSelection'
const isSingleModule = target.name === POLYGON_TYPE.MODULE
if (!isGroup && !isSingleModule) return
if (isGroup && !target.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)) return
const original = e?.transform?.original
const startPos = original ? { left: original.left, top: original.top } : null
commitModuleDragMove(target, startPos)
}
const removeEventOnCanvas = () => {
canvas?.off('object:added')
canvas?.off('object:modified')