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

Merge branch 'dev' into dev-yj

Browse Source
This commit is contained in:
yjnoh 2025-03-07 16:08:06 +09:00
commit 9d3288f98a
17 changed files with 344 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,4 +1,4 @@
NEXT_PUBLIC_API_SERVER_PATH="https://dev-api.hanasys.jp"
NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
NEXT_PUBLIC_HOST_URL="http://1.248.227.176:4000"

1
package.json
View File

@ -11,7 +11,6 @@
"serve": "node server.js"
},
"dependencies": {
"@nextui-org/react": "^2.4.2",
"ag-grid-react": "^32.0.2",
"axios": "^1.7.8",
"big.js": "^6.2.2",

5
src/app/UIProvider.js
View File

@ -1,5 +0,0 @@
import { NextUIProvider } from '@nextui-org/react'
export default function UIProvider({ children }) {
return <NextUIProvider>{children}</NextUIProvider>
}

2
src/components/floor-plan/FloorPlan.jsx
View File

@ -18,7 +18,7 @@ export default function FloorPlan({ children }) {
const { closeAll } = usePopup()
const { selectedMenu, setSelectedMenu } = useCanvasMenu()
const { fetchSettings } = useCanvasSetting(false)
const { fetchSettings } = useCanvasSetting()
const resetCurrentMenu = useResetRecoilState(currentMenuState)
useEffect(() => {
return () => {

13
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -52,7 +52,7 @@ export default function CircuitTrestleSetting({ id }) {
// const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
const [stepUpListData, setStepUpListData] = useState([])
const [seletedOption, setSeletedOption] = useState(null)
const { setModuleStatisticsData } = useCircuitTrestle()
const { setModuleStatisticsData, resetCircuits } = useCircuitTrestle()
const { handleCanvasToPng } = useImgLoader()
const passivityCircuitAllocationRef = useRef()
@ -92,6 +92,17 @@ export default function CircuitTrestleSetting({ id }) {
// selectedModels,
// pcsCheck,
// })
return () => {
if (
canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
.some((surface) => !surface.isComplete)
) {
resetCircuits()
}
}
}, [])
// 수동할당 시 모듈 삭제

2
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -9,7 +9,6 @@ import { deepCopyArray } from '@/util/common-utils'
import { canvasState } from '@/store/canvasAtom'
import * as turf from '@turf/turf'
import { POLYGON_TYPE } from '@/common/common'
import { useModal } from '@nextui-org/react'
import { useModule } from '@/hooks/module/useModule'
import { useSwal } from '@/hooks/useSwal'
@ -34,7 +33,6 @@ export default function PanelEdit(props) {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
const { moduleMove, moduleCopy, moduleMultiMove, moduleMultiCopy, moduleMoveAll, moduleCopyAll } = useModule()
useEffect(() => {
if (!canvas) {
const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링

25
src/components/ui/ObjectPlacement.jsx
View File

@ -1,5 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Button, Input } from '@nextui-org/react'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
import { fabric } from 'fabric'
@ -19,7 +18,7 @@ const ObjectPlacement = ({ canvas }) => {
const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)
// free or dimension 프리 / 치수
const [inputType, setInputType] = useState(INPUT_TYPE.FREE)
const [inputType, setinputType] = useState(INPUT_TYPE.FREE)
const handleSave = () => {
setMode(batchType)
@ -38,7 +37,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-4">
<div className="flex">
<Button
<button
className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.OPENING ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
onClick={() => {
setBatchType(BATCH_TYPE.OPENING)
@ -46,8 +45,8 @@ const ObjectPlacement = ({ canvas }) => {
}}
>
개구 배치
</Button>
<Button
</button>
<button
className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.SHADOW ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
onClick={() => {
setBatchType(BATCH_TYPE.SHADOW)
@ -55,7 +54,7 @@ const ObjectPlacement = ({ canvas }) => {
}}
>
그림자 배치
</Button>
</button>
</div>
</div>
@ -64,7 +63,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-2">
<label className="inline-flex items-center">
<Input
<input
type="radio"
name="inputType"
checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
@ -79,7 +78,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-2">
<label className="inline-flex items-center">
<Input
<input
type="radio"
name="inputType"
checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
@ -95,7 +94,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="flex mb-2">
<div className="mr-2">
<label className="block text-gray-700 text-sm mb-1">가로길이</label>
<Input
<input
type="text"
className="w-full px-3 py-2 border rounded"
placeholder="mm"
@ -108,7 +107,7 @@ const ObjectPlacement = ({ canvas }) => {
<div>
<label className="block text-gray-700 text-sm mb-1">세로길이</label>
<Input
<input
type="text"
className="w-full px-3 py-2 border rounded"
placeholder="mm"
@ -122,7 +121,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-4">
<label className="inline-flex items-center">
<Input
<input
type="checkbox"
name={`areaBoundary`}
checked={objectPlacementMode.areaBoundary}
@ -134,9 +133,9 @@ const ObjectPlacement = ({ canvas }) => {
</div>
<div className="text-center">
<Button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
<button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
저장
</Button>
</button>
</div>
</div>
</div>

63
src/components/ui/SurfaceShape.jsx
View File

@ -1,4 +1,3 @@
import { Button, Input } from '@nextui-org/react'
import { useState } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
@ -780,9 +779,9 @@ export const SurfaceShapeModal = ({ canvas }) => {
const buttons = []
for (let i = 1; i <= 29; i++) {
buttons.push(
<Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
<button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
{i}번 추가
</Button>,
</button>,
)
}
@ -798,97 +797,97 @@ export const SurfaceShapeModal = ({ canvas }) => {
{type === 1 ? (
<div>
길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
<input type="text" name={'length1'} value={length1} onChange={setLength} />
{length3 === 0 && (
<>
길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
<input type="text" name={'length2'} value={length2} onChange={setLength} />
</>
)}
대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
대각선 <input type="text" name={'length3'} value={length3} onChange={setLength} />
</div>
) : [2, 4, 5].includes(type) ? (
<div>
길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
<input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
<input type="text" name={'length2'} value={length2} onChange={setLength} />
</div>
) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
<>
길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
<input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
<input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
<input type="text" name={'length3'} value={length3} onChange={setLength} />
</>
) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
<>
길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
<input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
<input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
<input type="text" name={'length3'} value={length3} onChange={setLength} />
길이4
<Input type="text" name={'length4'} value={length4} onChange={setLength} />
<input type="text" name={'length4'} value={length4} onChange={setLength} />
</>
) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
<>
길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
<input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
<input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
<input type="text" name={'length3'} value={length3} onChange={setLength} />
길이4
<Input type="text" name={'length4'} value={length4} onChange={setLength} />
<input type="text" name={'length4'} value={length4} onChange={setLength} />
길이5
<Input type="text" name={'length5'} value={length5} onChange={setLength} />
<input type="text" name={'length5'} value={length5} onChange={setLength} />
</>
) : (
<></>
)}
<div className="flex flex-col items-center">
<div className="flex">
<Button
<button
className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('north')}
>
북
</Button>
</button>
</div>
<div className="flex space-x-4">
<Button
<button
className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('west')}
>
서
</Button>
<Button
</button>
<button
className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('east')}
>
동
</Button>
</button>
</div>
<div className="mt-4">
<Button
<button
className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('south')}
>
남
</Button>
</button>
</div>
</div>
<div>
<Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
<button className="m-1 p-2" color={'primary'} onClick={closeModal}>
닫기
</Button>
<Button className="m-1 p-2" color={'primary'} onClick={onSave}>
</button>
<button className="m-1 p-2" color={'primary'} onClick={onSave}>
저장
</Button>
</button>
</div>
</>
)

38
src/components/ui/ThumbnailLIst.jsx
View File

@ -1,38 +0,0 @@
'use client'
import { memo } from 'react'
import { Card, Image } from '@nextui-org/react'
function ThumbnailList(props) {
const { thumbnails, canvas } = props
const handleSelectThumb = (canvasStatus) => {
console.log('canvasStatus', canvasStatus.length)
canvas?.clear() // 캔버스를 초기화합니다.
canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
canvas?.renderAll() // 캔버스를 다시 그립니다.
})
}
return (
<>
<div className="flex justify-center m-4 w-full">
{thumbnails.length > 0 &&
thumbnails.map((thumbnail, index) => (
<Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
<Image
alt="Woman listing to music"
className="object-cover"
height={200}
src={thumbnail.imageName}
width={200}
onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
/>
</Card>
))}
</div>
</>
)
}
export default memo(ThumbnailList)

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

@ -108,13 +108,18 @@ export function useModule() {
return
}
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (activeModule.circuit) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
if (surfaces.some((surface) => surface.isComplete)) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
removeTrestleMaterials()
}
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = getOtherModules(modules)
@ -224,7 +229,7 @@ export function useModule() {
}
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength) * 10, false)
module.clone((obj) => {
obj.set({
parentId: module.parentId,
@ -263,8 +268,12 @@ export function useModule() {
canvas.renderAll()
},
})
} else {
surface.set({ modules: [...surface.modules, ...copyModules] })
}
})
setModuleStatisticsData()
}
const moduleCopy = (length, direction) => {
@ -342,12 +351,17 @@ export function useModule() {
}
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
if (activeModule.circuit) {
swalFire({
title: getMessage('can.not.copy.module'),
icon: 'error',
type: 'alert',
})
return
const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (surfaces.some((surface) => surface.isComplete)) {
swalFire({
title: getMessage('can.not.copy.module'),
icon: 'error',
type: 'alert',
})
return
}
removeTrestleMaterials()
}
const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
const otherModules = canvas.getObjects().filter((obj) => obj.surfaceId === modules[0].surfaceId && obj.name === POLYGON_TYPE.MODULE)
@ -364,7 +378,7 @@ export function useModule() {
}
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), true)
const { top, left } = getPosotion(module, direction, Number(length), true)
module.clone((obj) => {
obj.set({
parentId: module.parentId,
@ -385,6 +399,7 @@ export function useModule() {
canvas.add(obj)
copyModules.push(obj)
obj.setCoords()
console.log(obj)
})
if (
isOverlapOtherModules(copyModule, otherModules) ||
@ -430,6 +445,10 @@ export function useModule() {
if (moduleSetupSurface.isComplete) {
resetSurface()
}
const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (surfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
}
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
canvas.remove(...columnModules)
@ -520,6 +539,7 @@ export function useModule() {
icon: 'error',
type: 'alert',
confirmFn: () => {
moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...columnModules]
canvas.add(...columnModules)
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
@ -528,14 +548,15 @@ export function useModule() {
canvas.renderAll()
},
})
} else {
moduleSetupSurface.modules = moduleSetupSurface.modules.filter(
(module) => !columnModules.map((copyModule) => copyModule.id).includes(module.id),
)
}
setModuleStatisticsData()
}
const moduleRowRemove = (type) => {
// if (isFixedModule()) {
// return
// }
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
const rowModules = getRowModules(activeModule)
const otherModules = getOtherModules(rowModules)
@ -546,8 +567,9 @@ export function useModule() {
let height = -1
const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
let isWarning = false
if (moduleSetupSurface.isComplete) {
resetSurface()
const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
if (surfaces.some((surface) => surface.isComplete)) {
removeTrestleMaterials()
}
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
@ -639,6 +661,7 @@ export function useModule() {
icon: 'error',
type: 'alert',
confirmFn: () => {
moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...rowModules]
canvas.add(...rowModules)
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
@ -652,9 +675,6 @@ export function useModule() {
}
const moduleColumnInsert = (type) => {
if (isFixedModule()) {
return
}
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
const columnModules = getColumnModules(activeModule)
let otherModules = getOtherModules(columnModules)
@ -665,25 +685,11 @@ export function useModule() {
const objects = getObjects()
const copyModules = []
const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
if (moduleSetupSurface.isComplete) {
resetSurface()
}
let width = -1
let isWarning = false
const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
if (targetModules.length === 0) {
swalFire({
title: '마지막 모듈입니다.',
icon: 'error',
type: 'alert',
})
return
}
canvas.discardActiveObject()
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, module.width, true)
const { top, left } = getPosotion(module, type, moduleIntvlHor, true)
module.originPos = {
left: module.left,
top: module.top,
@ -700,7 +706,7 @@ export function useModule() {
canvas.renderAll()
otherModules = getOtherModules(columnModules)
columnModules.forEach((module) => {
const { top, left } = getPosotion(module, type, module.width + moduleIntvlHor, true)
const { top, left } = getPosotion(module, type, moduleIntvlHor, true)
let copyModule = null
module.clone((obj) => {
obj.set({
@ -731,6 +737,7 @@ export function useModule() {
isOutsideSurface(copyModule, moduleSetupSurface)
) {
isWarning = true
copyModule.set({ fill: 'red' })
}
module.setCoords()
})
@ -749,6 +756,8 @@ export function useModule() {
canvas.renderAll()
},
})
} else {
moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules]
}
setModuleStatisticsData()
}
@ -779,29 +788,14 @@ export function useModule() {
type === MODULE_INSERT_TYPE.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({
title: '마지막 모듈입니다.',
icon: 'error',
type: 'alert',
})
return
}
const objects = getObjects()
const copyModules = []
const moduleSetupSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)
let height = -1
let isWarning = false
const { moduleIntvlHor, moduleIntvlVer } = moduleSetupSurface.trestleDetail
if (surface.isComplete) {
resetSurface()
}
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, activeModule.height + moduleIntvlVer, true)
const { top, left } = getPosotion(module, type, moduleIntvlVer, true)
module.originPos = {
left: module.left,
top: module.top,
@ -817,7 +811,7 @@ export function useModule() {
canvas.renderAll()
otherModules = getOtherModules(rowModules)
rowModules.forEach((module) => {
const { top, left } = getPosotion(module, type, activeModule.height + moduleIntvlVer, true)
const { top, left } = getPosotion(module, type, moduleIntvlVer, true)
let copyModule = null
module.clone((obj) => {
obj.set({
@ -869,6 +863,8 @@ export function useModule() {
canvas.renderAll()
},
})
} else {
moduleSetupSurface.modules = [...moduleSetupSurface.modules, ...copyModules]
}
setModuleStatisticsData()
}
@ -931,6 +927,7 @@ export function useModule() {
})
}
// 회로가 없을때만 삭제 가능
const modulesRemove = () => {
const activeModule = canvas.getObjects().find((obj) => canvas.getActiveObjects()[0].id === obj.id)
const modules = canvas
@ -938,7 +935,15 @@ export function useModule() {
.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) {
resetSurface()
removeTrestleMaterials()
}
if (activeModule.circuit) {
swalFire({
title: getMessage('can.not.remove.module'),
icon: 'error',
type: 'alert',
})
return
}
surface.set({ modules: modules })

8
src/hooks/module/useTrestle.js
View File

@ -2799,5 +2799,11 @@ export const useTrestle = () => {
})
}
return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete }
// 배치면 전체에 가대 설치 여부
const isAllComplete = () => {
const surfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
return surfaces.every((surface) => surface.isComplete)
}
return { apply, getTrestleParams, clear, setViewCircuitNumberTexts, getEstimateData, setAllModuleSurfaceIsComplete, isAllComplete }
}

75
src/hooks/roofcover/usePropertiesSetting.js
View File

@ -11,6 +11,8 @@ import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/Pr
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { useSwal } from '@/hooks/useSwal'
import { useMessage } from '@/hooks/useMessage'
// 외벽선 속성 설정
export function usePropertiesSetting(id) {
@ -25,6 +27,8 @@ export function usePropertiesSetting(id) {
const { addPolygonByLines } = usePolygon()
const { removeLine, hideLine } = useLine()
const { addPopup, closePopup } = usePopup()
const { swalFire } = useSwal()
const { getMessage } = useMessage()
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@ -125,47 +129,52 @@ export function usePropertiesSetting(id) {
}
const handleFix = () => {
const isClose = confirm('외벽선 속성 설정을 완료하시겠습니까?')
if (isClose) {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
swalFire({
text: getMessage('outerLine.property.fix'),
type: 'confirm',
confirmFn: async () => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
const notSetAttributes = lines.filter((line) => !line.attributes?.type)
if (notSetAttributes.length > 0) {
// 세팅이 하나라도 안되어있으면 초기화
lines.forEach((line) => {
line.set({
stroke: '#000000',
strokeWidth: 4,
})
})
canvas.discardActiveObject()
// closePopup(id)
addPopup(id, 1, <RoofShapeSetting id={id} pos={{ x: 50, y: 230 }} />)
return
}
const notSetAttributes = lines.filter((line) => !line.attributes?.type)
if (notSetAttributes.length > 0) {
// 세팅이 하나라도 안되어있으면 초기화
lines.forEach((line) => {
line.set({
attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
stroke: '#000000',
strokeWidth: 4,
})
hideLine(line)
})
canvas.discardActiveObject()
// closePopup(id)
addPopup(id, 1, <RoofShapeSetting id={id} pos={{ x: 50, y: 230 }} />)
const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
wall.lines = [...lines]
const roof = drawRoofPolygon(wall)
setPoints([])
canvas.renderAll()
roof.drawHelpLine(settingModalFirstOptions)
addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
},
denyFn: async () => {
return
}
lines.forEach((line) => {
line.set({
attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
stroke: '#000000',
strokeWidth: 4,
})
hideLine(line)
})
const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
wall.lines = [...lines]
const roof = drawRoofPolygon(wall)
setPoints([])
canvas.renderAll()
roof.drawHelpLine(settingModalFirstOptions)
addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
return
}
},
})
}
const closeModal = (fn) => {

10
src/hooks/useCirCuitTrestle.js
View File

@ -176,8 +176,6 @@ export function useCircuitTrestle() {
canvas.renderAll()
}
const setPowerConditionerData = () => {}
const setModuleStatisticsData = () => {
console.log('selectedModules', selectedModules)
if (!selectedModules || !selectedModules?.itemList || selectedModules?.itemList?.length === 0) return
@ -302,6 +300,13 @@ export function useCircuitTrestle() {
})
if (circuitTexts.length > 0) canvas.remove(...circuitTexts)
canvas.renderAll()
setModuleStatisticsData()
}
const isExistCircuit = () => {
const circuits = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit)
return circuits.length > 0
}
return {
@ -326,5 +331,6 @@ export function useCircuitTrestle() {
removeNotAllocationModules,
setModuleStatisticsData,
resetCircuits,
isExistCircuit,
}
}

229
src/hooks/useContextMenu.js
View File

@ -43,6 +43,8 @@ import { useRoofFn } from '@/hooks/common/useRoofFn'
import { MODULE_ALIGN_TYPE, useModule } from './module/useModule'
import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
import { selectedMenuState } from '@/store/menuAtom'
import { useTrestle } from './module/useTrestle'
import { useCircuitTrestle } from './useCirCuitTrestle'
export function useContextMenu() {
const canvas = useRecoilValue(canvasState)
@ -73,7 +75,8 @@ export function useContextMenu() {
const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines } = useRoofFn()
const selectedMenu = useRecoilValue(selectedMenuState)
const { isAllComplete, clear: resetModule } = useTrestle()
const { isExistCircuit } = useCircuitTrestle()
const currentMenuSetting = () => {
switch (selectedMenu) {
case 'outline':
@ -128,11 +131,6 @@ export function useContextMenu() {
if (selectedMenu === 'surface') {
setContextMenu([
[
{
id: 'sizeEdit',
name: getMessage('contextmenu.size.edit'),
component: <SizeSetting id={popupId} target={currentObject} />,
},
{
id: 'dormerRemove',
shortcut: ['d', 'D'],
@ -602,56 +600,154 @@ export function useContextMenu() {
{
id: 'move',
name: getMessage('contextmenu.move'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
fn: () => {
if (currentObject.circuit) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
},
{
id: 'copy',
name: getMessage('contextmenu.copy'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />,
fn: () => {
if (currentObject.circuit) {
swalFire({
title: getMessage('can.not.copy.module'),
icon: 'error',
type: 'alert',
})
return
}
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />)
},
},
],
[
{
id: 'columnMove',
name: getMessage('contextmenu.column.move'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />)
},
},
{
id: 'columnCopy',
name: getMessage('contextmenu.column.copy'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.copy.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
},
{
id: 'columnRemove',
name: getMessage('contextmenu.column.remove'),
component: <ColumnRemove id={popupId} />,
fn: () => {
if (isExistCircuit()) {
resetModule()
}
addPopup(popupId, 1, <ColumnRemove id={popupId} />)
},
// component: <ColumnRemove id={popupId} />,
},
{
id: 'columnInsert',
name: getMessage('contextmenu.column.insert'),
component: <ColumnInsert id={popupId} />,
fn: () => {
if (isExistCircuit()) {
resetModule()
}
addPopup(popupId, 1, <ColumnInsert id={popupId} />)
},
// component: <ColumnInsert id={popupId} />,
},
],
[
{
id: 'rowMove',
name: getMessage('contextmenu.row.move'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
},
{
id: 'rowCopy',
name: getMessage('contextmenu.row.copy'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.copy.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
},
{
id: 'rowRemove',
name: getMessage('contextmenu.row.remove'),
component: <RowRemove id={popupId} />,
fn: () => {
if (isExistCircuit()) {
resetModule()
}
addPopup(popupId, 1, <RowRemove id={popupId} />)
},
// component: <RowRemove id={popupId} />,
},
{
id: 'rowInsert',
name: getMessage('contextmenu.row.insert'),
component: <RowInsert id={popupId} />,
fn: () => {
if (isExistCircuit()) {
resetModule()
}
addPopup(popupId, 1, <RowInsert id={popupId} />)
},
// component: <RowInsert id={popupId} />,
},
],
])
@ -663,32 +759,16 @@ export function useContextMenu() {
id: 'moduleVerticalCenterAlign',
name: getMessage('contextmenu.module.vertical.align'),
fn: () => {
if (currentObject.arrayData) {
let existCircuit = false
currentObject.arrayData.forEach((surface) => {
surface.modules.forEach((module) => {
if (module.circuit) existCircuit = true
})
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
if (existCircuit) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
} else {
const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null)
if (allocatedModules.length > 0) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
return
}
resetModule()
alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData ?? [currentObject])
},
},
@ -696,32 +776,16 @@ export function useContextMenu() {
id: 'moduleHorizonCenterAlign',
name: getMessage('contextmenu.module.horizon.align'),
fn: () => {
if (currentObject.arrayData) {
let existCircuit = false
currentObject.arrayData.forEach((surface) => {
surface.modules.forEach((module) => {
if (module.circuit) existCircuit = true
})
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
if (existCircuit) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
} else {
const allocatedModules = currentObject.modules.filter((module) => module.circuit !== null)
if (allocatedModules.length > 0) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
return
}
resetModule()
alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData ?? [currentObject])
},
},
@ -740,12 +804,45 @@ export function useContextMenu() {
{
id: 'moduleMove',
name: getMessage('contextmenu.module.move'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(
popupId,
1,
<PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
},
{
id: 'moduleCopy',
name: getMessage('contextmenu.module.copy'),
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
fn: () => {
if (isAllComplete()) {
swalFire({
title: getMessage('can.not.move.module'),
icon: 'error',
type: 'alert',
})
return
}
resetModule()
addPopup(
popupId,
1,
<PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
)
},
// component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
},
// {
// id: 'moduleCircuitNumberEdit',

3
src/locales/ja.json
View File

@ -1030,5 +1030,6 @@
"roof.is.not.selected": "屋根の選択をお願いします。",
"length.direction.is.required": "長さと方向を入力します。",
"canvas.infomation.text": "数字は [半角] 入力のみ可能です。",
"roof.exceed.count": "屋根材は4つまで選択可能です。"
"roof.exceed.count": "屋根材は4つまで選択可能です。",
"outerLine.property.fix": "外壁線の属性設定 を完了しますか？"
}

3
src/locales/ko.json
View File

@ -1030,5 +1030,6 @@
"roof.is.not.selected": "지붕을 선택해주세요.",
"length.direction.is.required": "길이와 방향을 입력하세요.",
"canvas.infomation.text": "숫자는 [반각] 입력만 가능합니다.",
"roof.exceed.count": "지붕재는 4개까지 선택 가능합니다."
"roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
"outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?"
}

7
tailwind.config.js
View File

@ -1,5 +1,3 @@
const { nextui } = require('@nextui-org/react')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
@ -12,11 +10,10 @@ module.exports = {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
darkMode: 'class',
plugins: [nextui()],
plugins: [],
}