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

Merge branch 'dev' of https://git.hanasys.jp/qcast3/qcast-front into feature/ysCha

Browse Source 
# Conflicts:
#	src/locales/ja.json
This commit is contained in:
ysCha 2025-03-26 17:00:11 +09:00
commit cf9acde872
32 changed files with 684 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ecosystem.config.js
View File

@ -2,7 +2,7 @@ module.exports = {
apps: [
{
name: 'qcast-front-production',
script: 'npm run start',
script: 'npm run start:dev',
instance: 2,
exec_mode: 'cluster',
},

1
src/common/common.js
View File

@ -203,6 +203,7 @@ export const SAVE_KEY = [
'fontWeight',
'dormerAttributes',
'toFixed',
'isSortedPoints',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]

109
src/components/auth/AutoLogin.jsx
View File

@ -2,26 +2,111 @@
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { setSession, login } from '@/lib/authActions'
import { sessionStore } from '@/store/commonAtom'
import { useRecoilState } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRouter } from 'next/navigation'
import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
export default function AutoLoginPage() {
const [isLoading, setIsLoading] = useState(true)
export default function AutoLoginPage({ autoLoginParam }) {
const router = useRouter()
const [isLoading, setIsLoading] = useState(autoLoginParam === 'Y' ? false : true)
const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
const { promisePost } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
const [userId, setUserId] = useState('')
const [sessionState, setSessionState] = useRecoilState(sessionStore)
const [idFocus, setIdFocus] = useState(false)
const loginProcess = async () => {
setIsLoading(true)
await promisePost({ url: '/api/login/v1.0/user', data: { loginId: userId } }).then((response) => {
setIsLoading(false)
if (response.data) {
const res = response.data
const result = { ...res, storeLvl: res.groupId === '60000' ? '1' : '2', pwdInitYn: 'Y' }
setSession(result)
setSessionState(result)
login()
} else {
alert(getMessage('login.fail'))
router.push('/login?autoLoginParam1=Y')
}
})
}
return (
<>
{isLoading && <GlobalSpinner />}
<div className="login-input-frame">
<div className="login-frame-tit ">
<span>{getMessage('site.name')}</span>
{getMessage('site.sub_name')}
</div>
<div className="login-input-wrap">
<div className="login-area id" style={{ fontWeight: 'bolder' }}>
{getMessage('login.auto.page.text')}
{autoLoginParam !== 'Y' ? (
<>
<div className="login-input-frame">
<div className="login-frame-tit ">
<span>{getMessage('site.name')}</span>
{getMessage('site.sub_name')}
</div>
<div className="login-input-wrap">
<div className="login-area id" style={{ fontWeight: 'bolder' }}>
{getMessage('login.auto.page.text')}
</div>
</div>
</div>
</div>
</div>
</>
) : (
<>
<div className="login-input-frame">
<form
onSubmit={(e) => {
e.preventDefault()
loginProcess()
}}
className="space-y-6"
>
<div className="login-frame-tit">
<span>{getMessage('site.name')}</span>
{getMessage('site.sub_name')}
</div>
<div className="login-input-wrap">
<div className={`login-area id ${idFocus ? 'focus' : ''}`}>
<input
type="text"
className="login-input"
id="userId"
name="id"
required
value={userId}
placeholder={getMessage('login.id.placeholder')}
onChange={(e) => {
setUserId(e.target.value)
}}
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button
type="button"
className="id-delete"
onClick={(e) => {
setUserId('')
}}
></button>
</div>
<div className="login-btn-box">
<button type="submit" className="login-btn">
{getMessage('login')}
</button>
</div>
</div>
</form>
</div>
</>
)}
</>
)
}

6
src/components/auth/Login.jsx
View File

@ -25,7 +25,9 @@ export default function Login() {
useEffect(() => {
if (autoLoginParam) {
autoLoginProcess(autoLoginParam)
if (autoLoginParam !== 'Y') {
autoLoginProcess(autoLoginParam)
}
}
// console.log('🚀 ~ checkSession ~ checkSession():', checkSession())
@ -334,7 +336,7 @@ export default function Login() {
</div>
</>
)}
{autoLoginParam && <AutoLogin />}
{autoLoginParam && <AutoLogin autoLoginParam={autoLoginParam} />}
</div>
<div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
</div>

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

@ -6,29 +6,19 @@ import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import { useTempGrid } from '@/hooks/useTempGrid'
import { useContextMenu } from '@/hooks/useContextMenu'
import { useEvent } from '@/hooks/useEvent'
import { canvasState } from '@/store/canvasAtom'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
export default function QContextMenu(props) {
const canvas = useRecoilValue(canvasState)
const { contextRef, canvasProps } = props
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
const contextMenuList = useRecoilValue(contextMenuListState)
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
const currentObject = useRecoilValue(currentObjectState)
const { tempGridMode, setTempGridMode } = useTempGrid()
const { handleKeyup } = useContextMenu()
const { addDocumentEventListener, removeDocumentEvent } = useEvent()
// const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
let contextType = ''
if (activeObject) {
if (activeObject.initOptions && activeObject.initOptions.name) {
//이건 바뀔 가능성이 있음
if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
contextType = 'surface' //면형상
}
}
}
const getYPosition = (e) => {
const contextLength = contextMenuList.reduce((acc, cur, index) => {
return acc + cur.length
@ -36,11 +26,13 @@ export default function QContextMenu(props) {
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
}
useEffect(() => {
if (!contextRef.current) return
const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고
if (currentObject) {
const isArray = currentObject.hasOwnProperty('arrayData')
if (isArray && currentObject.arrayData.length === 0) return
const handleContextMenu = (e) => {
e.preventDefault() //기존 contextmenu 막고
if (tempGridMode) return
const position = {
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
@ -48,21 +40,24 @@ export default function QContextMenu(props) {
}
setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
addDocumentEventListener('keyup', document, handleKeyup)
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}
}
const handleClick = (e) => {
// e.preventDefault()
const handleClick = (e) => {
// e.preventDefault()
setContextMenu({ ...contextMenu, visible: false })
}
const handleOutsideClick = (e) => {
// e.preventDefault()
if (contextMenu.visible) {
setContextMenu({ ...contextMenu, visible: false })
removeDocumentEvent('keyup')
}
}
const handleOutsideClick = (e) => {
// e.preventDefault()
if (contextMenu.visible) {
setContextMenu({ ...contextMenu, visible: false })
removeDocumentEvent('keyup')
}
}
useEffect(() => {
if (!contextRef.current) return
canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
document.addEventListener('click', handleClick)
@ -72,43 +67,9 @@ export default function QContextMenu(props) {
removeDocumentEvent('keyup')
document.removeEventListener('click', handleClick)
document.removeEventListener('click', handleOutsideClick)
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}
}, [contextRef, contextMenuList])
const handleObjectMove = () => {
activeObject.set({
lockMovementX: false, // X 축 이동 잠금
lockMovementY: false, // Y 축 이동 잠금
})
canvasProps?.on('object:modified', function (e) {
activeObject.set({
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
})
})
}
const handleObjectDelete = () => {
if (confirm('삭제하실거?')) {
canvasProps.remove(activeObject)
}
}
const handleObjectCopy = () => {
activeObject.clone((cloned) => {
cloned.set({
left: activeObject.left + activeObject.width + 20,
initOptions: { ...activeObject.initOptions },
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
})
canvasProps?.add(cloned)
})
}
}, [contextRef, contextMenuList, currentObject])
return (
<>

39
src/components/estimate/Estimate.jsx
View File

@ -175,7 +175,10 @@ export default function Estimate({}) {
row.check = false
estimateOption.map((row2) => {
if (row.pkgYn === '0') {
if (row2 === row.code) {
// if (row2 === row.code) {
// row.check = true
// }
if (row.code.split('、').includes(row2)) {
row.check = true
}
} else {
@ -217,7 +220,10 @@ export default function Estimate({}) {
row.check = false
estimateOption.map((row2) => {
if (row.pkgYn === '0') {
if (row2 === row.code) {
// if (row2 === row.code) {
// row.check = true
// }
if (row.code.split('、').includes(row2)) {
row.check = true
}
} else {
@ -240,7 +246,6 @@ export default function Estimate({}) {
}
}
})
setSpecialNoteList(res)
setSpecialNoteFirstFlg(true)
@ -377,8 +382,8 @@ export default function Estimate({}) {
useEffect(() => {
if (estimateContextState.estimateType !== '') {
const param = {
saleStoreId: session.storeId,
sapSalesStoreCd: session.custCd,
saleStoreId: estimateContextState.sapSaleStoreId,
sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
docTpCd: estimateContextState?.estimateType,
}
@ -387,6 +392,8 @@ export default function Estimate({}) {
if (isNotEmptyArray(res?.data)) {
setStorePriceList(res.data)
}
setItemChangeYn(true)
})
if (estimateContextState.estimateType === 'YJSS') {
@ -416,8 +423,6 @@ export default function Estimate({}) {
handlePricing('UNIT_PRICE')
}
}
setItemChangeYn(true)
}
}, [estimateContextState?.estimateType])
@ -469,6 +474,21 @@ export default function Estimate({}) {
} else {
item.check = false
}
} else {
let codes = item.code.split('、')
let flg = '0'
if (codes.length > 1) {
for (let i = 0; i < pushData.length; i++) {
if (codes.indexOf(pushData[i]) > -1) {
flg = '1'
}
}
if (flg === '1') {
item.check = true
} else {
item.check = false
}
}
}
})
@ -481,8 +501,8 @@ export default function Estimate({}) {
//Pricing 버튼
const handlePricing = async (showPriceCd) => {
const param = {
saleStoreId: session.storeId,
sapSalesStoreCd: session.custCd,
saleStoreId: estimateContextState.sapSaleStoreId,
sapSalesStoreCd: estimateContextState.sapSalesStoreCd,
docTpCd: estimateContextState.estimateType,
priceCd: showPriceCd,
itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0' && item.paDispOrder === null),
@ -506,7 +526,6 @@ export default function Estimate({}) {
})
}
}
setIsGlobalLoading(true)
await promisePost({ url: '/api/estimate/price/item-price-list', data: param }).then((res) => {
let updateList = []

10
src/components/fabric/QPolygon.js
View File

@ -45,8 +45,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
options.sort = options.sort ?? true
options.parentId = options.parentId ?? null
this.isSortedPoints = false
if (!options.sort && points.length <= 8) {
points = sortedPointLessEightPoint(points)
this.isSortedPoints = true
} else {
let isDiagonal = false
points.forEach((point, i) => {
@ -62,6 +65,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
if (!isDiagonal) {
points = sortedPoints(points)
this.isSortedPoints = true
}
}
@ -119,10 +123,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.addLengthText()
this.on('moving', () => {
this.initLines()
this.addLengthText()
})
this.on('modified', (e) => {
this.initLines()
this.addLengthText()
})
@ -183,8 +189,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.lines = []
this.points.forEach((point, i) => {
const nextPoint = this.points[(i + 1) % this.points.length]
this.getCurrentPoints().forEach((point, i) => {
const nextPoint = this.getCurrentPoints()[(i + 1) % this.points.length]
const line = new QLine([point.x, point.y, nextPoint.x, nextPoint.y], {
stroke: this.stroke,
strokeWidth: this.strokeWidth,

37
src/components/floor-plan/CanvasFrame.jsx
View File

@ -30,11 +30,14 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useEvent } from '@/hooks/useEvent'
import { compasDegAtom } from '@/store/orientationAtom'
import { hotkeyStore } from '@/store/hotkeyAtom'
import { usePopup } from '@/hooks/usePopup'
export default function CanvasFrame() {
const canvasRef = useRef(null)
const { canvas } = useCanvas('canvas')
const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
const { closeAll } = usePopup()
const currentMenu = useRecoilValue(currentMenuState)
const { floorPlanState } = useContext(FloorPlanContext)
const { contextMenu, handleClick } = useContextMenu()
@ -92,6 +95,8 @@ export default function CanvasFrame() {
useEffect(() => {
setIsGlobalLoading(false)
// 혹시 모를 팝업이 떠있는 경우 닫고 시작한다.
closeAll()
return () => {
canvas?.clear()
@ -110,6 +115,38 @@ export default function CanvasFrame() {
resetPcsCheckState()
}
/**
* 캔버스가 있을 경우 핫키 이벤트 처리
* hotkeyStore에 핫키 이벤트 리스너 추가
*
* const hotkeys = [
{ key: 'c', fn: () => asdf() },
{ key: 'v', fn: () => qwer() },
]
setHotkeyStore(hotkeys)
*/
const hotkeyState = useRecoilValue(hotkeyStore)
const hotkeyHandlerRef = useRef(null)
useEffect(() => {
hotkeyHandlerRef.current = (e) => {
hotkeyState.forEach((hotkey) => {
if (e.key === hotkey.key) {
hotkey.fn()
}
})
}
document.addEventListener('keyup', hotkeyHandlerRef.current)
return () => {
if (hotkeyHandlerRef.current) {
document.removeEventListener('keyup', hotkeyHandlerRef.current)
}
}
}, [hotkeyState])
/** 핫키 이벤트 처리 끝 */
return (
<div className="canvas-frame">
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>

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

@ -634,7 +634,7 @@ export default function CanvasMenu(props) {
onClick={() => setEstimatePopupOpen(true)}
>
<span className="ico ico01"></span>
<span className="name">{getMessage('plan.menu.estimate.docDown')}</span>
<span className="name">{getMessage('plan.menu.estimate.docDownload')}</span>
</button>
<button type="button" style={{ display: saveButtonStyle }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
<span className="ico ico02"></span>

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

@ -479,7 +479,7 @@ export default function CircuitTrestleSetting({ id }) {
console.log(stepUpListData)
stepUpListData[0].pcsItemList.map((item, index) => {
return item.serQtyList
.filter((serQty) => serQty.selected)
.filter((serQty) => serQty.selected && serQty.paralQty > 0)
.forEach((serQty) => {
pcs.push({
pcsMkrCd: item.pcsMkrCd,

4
src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
View File

@ -573,7 +573,7 @@ export default function StepUp(props) {
value={seletedMainOption}
sourceKey="code"
targetKey="code"
showKey="name"
showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
onChange={(e) => setSeletedMainOption(e)}
/>
)}
@ -586,7 +586,7 @@ export default function StepUp(props) {
value={seletedSubOption}
sourceKey="code"
targetKey="code"
showKey="name"
showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
onChange={(e) => setSeletedSubOption(e)}
/>
)}

4
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -7,6 +7,7 @@ import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
const FLOW_DIRECTION_TYPE = {
EIGHT_AZIMUTH: 'eightAzimuth',
@ -19,6 +20,8 @@ export default function FlowDirectionSetting(props) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
useEffect(() => {
return () => {
canvas?.discardActiveObject()
@ -53,6 +56,7 @@ export default function FlowDirectionSetting(props) {
})
drawDirectionArrow(roof)
canvas?.renderAll()
changeSurfaceLineType(roof)
closePopup(id)
}

11
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -19,6 +19,7 @@ import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
import { usePolygon } from '@/hooks/usePolygon'
import { canvasState } from '@/store/canvasAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { usePlan } from '@/hooks/usePlan'
/**
* 지붕 레이아웃
@ -45,6 +46,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
const { setSurfaceShapePattern } = useRoofFn()
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
const { saveCanvas } = usePlan()
const roofRef = {
roofCd: useRef(null),
@ -205,7 +207,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
/**
* 배치면초기설정 저장 버튼 클릭
*/
const handleSaveBtn = () => {
const handleSaveBtn = async () => {
const roofInfo = {
...currentRoof,
planNo: basicSetting.planNo,
@ -254,6 +256,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
/* 저장 후 화면 닫기 */
closePopup(id)
await saveCanvas(false)
}
return (
@ -271,7 +274,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
<tbody>
<tr>
<th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
<td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
<td>
{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
{getMessage('modal.placement.initial.setting.plan.drawing.only.number')}
</td>
</tr>
<tr>
<th>

44
src/hooks/floorPlan/estimate/useEstimateController.js
View File

@ -136,7 +136,7 @@ export const useEstimateController = (planNo, flag) => {
}
useEffect(() => {
setEstimateData({ ...estimateContextState, userId: session.userId, sapSalesStoreCd: session.custCd })
setEstimateData({ ...estimateContextState, userId: session.userId })
}, [estimateContextState])
// 첨부파일 다운로드
@ -452,8 +452,6 @@ export const useEstimateController = (planNo, flag) => {
}
const params = {
saleStoreId: session.storeId,
sapSalesStoreCd: session.custCd,
objectNo: estimateData.objectNo,
planNo: sendPlanNo,
copySaleStoreId: otherSaleStoreId ? otherSaleStoreId : saleStoreId,
@ -462,24 +460,30 @@ export const useEstimateController = (planNo, flag) => {
}
setIsGlobalLoading(true)
await promisePost({ url: '/api/estimate/save-estimate-copy', data: params }).then((res) => {
setIsGlobalLoading(false)
if (res.status === 201) {
if (isObjectNotEmpty(res.data)) {
let newObjectNo = res.data.objectNo
swalFire({
text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
type: 'alert',
confirmFn: () => {
setEstimateCopyPopupOpen(false) //팝업닫고
router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
},
})
}
} else {
await promisePost({ url: '/api/estimate/save-estimate-copy', data: params })
.then((res) => {
setIsGlobalLoading(false)
}
})
if (res.status === 201) {
if (isObjectNotEmpty(res.data)) {
let newObjectNo = res.data.objectNo
swalFire({
text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
type: 'alert',
confirmFn: () => {
setEstimateCopyPopupOpen(false) //팝업닫고
router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
},
})
}
} else {
setIsGlobalLoading(false)
}
})
.catch((e) => {
console.error('캔버스 복사 중 오류 발생')
swalFire({ text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessageError'), type: 'alert', icon: 'error' })
setIsGlobalLoading(false)
})
}
const checkLength = (value) => {

35
src/hooks/module/useModulePlace.js
View File

@ -1,35 +0,0 @@
import { useEffect, useState } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { useMasterController } from '@/hooks/common/useMasterController'
import { canvasSettingState, canvasState, currentCanvasPlanState, moduleSetupSurfaceState } from '@/store/canvasAtom'
import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon from '@/util/qpolygon-utils'
import { v4 as uuidv4 } from 'uuid'
import { QPolygon } from '@/components/fabric/QPolygon'
import { useEvent } from '@/hooks/useEvent'
import { useSwal } from '@/hooks/useSwal'
import { useMessage } from '@/hooks/useMessage'
export function useModulePlace() {
const canvas = useRecoilValue(canvasState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
const [trestleDetailParams, setTrestleDetailParams] = useState([])
const [trestleDetailList, setTrestleDetailList] = useState([])
const selectedModules = useRecoilValue(selectedModuleState)
const { getTrestleDetailList } = useMasterController()
const canvasSetting = useRecoilValue(canvasSettingState)
const { setSurfaceShapePattern } = useRoofFn()
const roofDisplay = useRecoilValue(roofDisplaySelector)
const { addTargetMouseEventListener } = useEvent()
const setModuleSetupSurface = useSetRecoilState(moduleSetupSurfaceState)
const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
const { swalFire } = useSwal()
const { getMessage } = useMessage()
return {
selectedModules,
}
}

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

@ -10,6 +10,7 @@ import { useSwal } from '@/hooks/useSwal'
import { useContext } from 'react'
import { QcastContext } from '@/app/QcastProvider'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { useMessage } from '@/hooks/useMessage'
// 모듈간 같은 행, 열의 마진이 10 이하인 경우는 같은 행, 열로 간주
const MODULE_MARGIN = 10
@ -26,6 +27,7 @@ export const useTrestle = () => {
const { getSelectedPcsItemList } = useCircuitTrestle()
const { resetCircuits } = useCircuitTrestle()
const { getMessage } = useMessage()
const apply = () => {
const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
@ -58,7 +60,6 @@ export const useTrestle = () => {
}
const construction = moduleSelectionData?.roofConstructions?.find((construction) => construction.roofIndex === roofMaterialIndex).construction
if (!construction) {
swalFire({ text: 'construction 존재안함', icon: 'error' })
return
}
@ -131,9 +132,9 @@ export const useTrestle = () => {
surface.isChidory = isChidory
if (plvrYn === 'N' && isChidory) {
swalFire({ text: '치조불가공법입니다.', icon: 'error' })
swalFire({ text: getMessage('chidory.can.not.install'), icon: 'error' })
clear()
throw new Error('치조불가공법입니다.')
throw new Error(getMessage('chidory.can.not.install'))
}
surface.set({ isChidory: isChidory })

2
src/hooks/roofcover/useAuxiliaryDrawing.js
View File

@ -84,7 +84,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
// innerLines가 있을경우 삭제
const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
if (roofs.length === 0) {
swalFire({ text: '지붕형상이 없습니다.' })
swalFire({ text: getMessage('roof.line.not.found') })
closePopup(id)
return
}

2
src/hooks/roofcover/useEavesGableEdit.js
View File

@ -52,7 +52,7 @@ export function useEavesGableEdit(id) {
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
swalFire({ text: getMessage('wall.line.not.found') })
closePopup(id)
}
}, [])

54
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -27,6 +27,7 @@ import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { QcastContext } from '@/app/QcastProvider'
import { usePlan } from '@/hooks/usePlan'
export function useRoofAllocationSetting(id) {
const canvas = useRecoilValue(canvasState)
@ -52,6 +53,7 @@ export function useRoofAllocationSetting(id) {
const { swalFire } = useSwal()
const { setIsGlobalLoading } = useContext(QcastContext)
const { setSurfaceShapePattern } = useRoofFn()
const { saveCanvas } = usePlan()
const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
const resetPoints = useResetRecoilState(outerLinePointsState)
@ -225,6 +227,7 @@ export function useRoofAllocationSetting(id) {
await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
setIsGlobalLoading(false)
saveCanvas(false)
})
//Recoil 설정
@ -245,22 +248,37 @@ export function useRoofAllocationSetting(id) {
swalFire({ type: 'alert', icon: 'error', text: getMessage('roof.exceed.count') })
return
}
setCurrentRoofList([
...currentRoofList,
{
...currentRoofMaterial,
const originCurrentRoofList = currentRoofList.map((roof) => {
return {
...roof,
selected: false,
id: currentRoofMaterial.roofMatlCd,
name: currentRoofMaterial.roofMatlNm,
index: currentRoofList.length,
},
])
}
})
originCurrentRoofList.push({
...currentRoofMaterial,
selected: true,
id: currentRoofMaterial.roofMatlCd,
name: currentRoofMaterial.roofMatlNm,
index: currentRoofList.length,
})
setCurrentRoofList(originCurrentRoofList)
}
/**
* 지붕재 삭제
*/
const onDeleteRoofMaterial = (idx) => {
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
for (let i = 0; i < roofs.length; i++) {
if (roofs[i].roofMaterial?.index === idx) {
swalFire({ type: 'alert', icon: 'error', text: getMessage('roof.material.can.not.delete') })
return
}
}
const isSelected = currentRoofList[idx].selected
const newRoofList = JSON.parse(JSON.stringify(currentRoofList)).filter((_, index) => index !== idx)
if (isSelected) {
@ -300,6 +318,7 @@ export function useRoofAllocationSetting(id) {
})
setRoofList(newRoofList)
setRoofMaterials(newRoofList)
const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
drawDirectionArrow(currentObject)
@ -308,6 +327,21 @@ export function useRoofAllocationSetting(id) {
basicSettingSave()
}
/**
* 기존 세팅된 지붕에 지붕재 내용을 바뀐 내용으로 수정
* @param newRoofMaterials
*/
const setRoofMaterials = (newRoofMaterials) => {
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
newRoofMaterials.forEach((roofMaterial) => {
const index = roofMaterial.index
const tempRoofs = roofs.filter((roof) => roof.roofMaterial?.index === index)
tempRoofs.forEach((roof) => {
setSurfaceShapePattern(roof, roofDisplay.column, false, roofMaterial)
})
})
}
/**
* 지붕면 할당
*/
@ -411,6 +445,8 @@ export function useRoofAllocationSetting(id) {
drawDirectionArrow(roof)
})
setRoofMaterials(newRoofList)
/** 외곽선 삭제 */
const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine')
removeTargets.forEach((obj) => {

2
src/hooks/roofcover/useRoofShapePassivitySetting.js
View File

@ -51,7 +51,7 @@ export function useRoofShapePassivitySetting(id) {
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
swalFire({ text: getMessage('wall.line.not.found') })
closePopup(id)
return
}

2
src/hooks/roofcover/useRoofShapeSetting.js
View File

@ -191,7 +191,7 @@ export function useRoofShapeSetting(id) {
let direction
if (outerLines.length < 2) {
swalFire({ text: '외벽선이 없습니다.', icon: 'error' })
swalFire({ text: getMessage('wall.line.not.found') })
return
}

2
src/hooks/roofcover/useWallLineOffsetSetting.js
View File

@ -60,7 +60,7 @@ export function useWallLineOffsetSetting(id) {
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
swalFire({ text: getMessage('wall.line.not.found') })
closePopup(id)
return
}

16
src/hooks/surface/usePlacementShapeDrawing.js
View File

@ -32,6 +32,7 @@ import {
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'
import { roofDisplaySelector } from '@/store/settingAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
@ -50,6 +51,8 @@ export function usePlacementShapeDrawing(id) {
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
const { tempGridMode } = useTempGrid()
const { setSurfaceShapePattern } = useRoofFn()
const { changeSurfaceLineType } = useSurfaceShapeBatch({})
const canvasSetting = useRecoilValue(canvasSettingState)
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@ -253,11 +256,14 @@ export function usePlacementShapeDrawing(id) {
setPoints([])
canvas?.renderAll()
if (+canvasSetting?.roofSizeSet === 3) {
closePopup(id)
return
}
addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
// if (+canvasSetting?.roofSizeSet === 3) {
// closePopup(id)
// return
// }
// addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
changeSurfaceLineType(roof)
closePopup(id)
}
if (points.length < 3) {

404
src/hooks/surface/useSurfaceShapeBatch.js
View File

@ -3,7 +3,7 @@
import { useEffect } from 'react'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { canvasSettingState, canvasState, currentCanvasPlanState, globalPitchState } from '@/store/canvasAtom'
import { MENU, POLYGON_TYPE } from '@/common/common'
import { MENU, POLYGON_TYPE, LINE_TYPE } from '@/common/common'
import { getIntersectionPoint, toFixedWithoutRounding } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -111,7 +111,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
flipX: xInversion !== yInversion,
// flipX: xInversion !== yInversion,
// angle: xInversion && yInversion ? Math.abs((rotate + 180) % 360) : Math.abs(rotate),
// angle: rotate,
originX: 'center',
@ -120,6 +120,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
obj = new QPolygon(points, options)
let imageRotate = 0
if (xInversion && !yInversion) {
if (rotate % 180 === 0 || rotate < 0) {
@ -148,7 +149,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
} else {
imageRotate = (rotate + 360) % 360
}
obj.set({ angle: imageRotate })
obj.set({ angle: imageRotate, flipX: xInversion !== yInversion })
obj.setCoords() //좌표 변경 적용
canvas?.add(obj)
@ -158,6 +159,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
addCanvasMouseEventListener('mouse:down', (e) => {
isDrawing = false
const { xInversion, yInversion } = surfaceRefs
canvas?.remove(obj)
//각도 추가
@ -178,6 +180,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
//회전, flip등이 먹은 기준으로 새로생성
// const batchSurface = addPolygon(reorderedPoints, {
const batchSurface = addPolygon(obj.getCurrentPoints(), {
fill: 'transparent',
stroke: 'red',
@ -196,18 +199,25 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
pitch: globalPitch,
surfaceId: surfaceId,
direction: direction,
isXInversion: xInversion,
isYInversion: yInversion,
})
canvas.setActiveObject(batchSurface)
setSurfaceShapePattern(batchSurface, roofDisplay.column)
drawDirectionArrow(batchSurface)
// if (setIsHidden) setIsHidden(false)
// closePopup(id)
initEvent()
if (+canvasSetting?.roofSizeSet === 3) return
const popupId = uuidv4()
addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
// if (+canvasSetting?.roofSizeSet === 3) return
// const popupId = uuidv4()
// addPopup(popupId, 2, <PlacementSurfaceLineProperty roof={batchSurface} id={popupId} setIsHidden={setIsHidden} />)
// console.log('xInversion', xInversion) //상하반전
// console.log('yInversion', yInversion) //좌우반전
changeSurfaceLineType(batchSurface)
if (setIsHidden) setIsHidden(false)
})
} else {
if (setIsHidden) setIsHidden(false)
@ -488,18 +498,18 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
case 10: {
points = [
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
{
x: pointer.x + length1 / 2 - length1 + length2,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
{ x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
{
x: pointer.x + length1 / 2 - length1 + length2 + length3,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
{
x: pointer.x + length1 / 2 - length1 + length2,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
]
break
}
@ -613,27 +623,27 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
case 14: {
points = [
{ x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
{
x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2,
y: pointer.y + length4 / 2 - length4 + length5,
},
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
]
break
}
case 15: {
points = [
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
{ x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
{ x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
{ x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
{ x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
]
break
}
@ -641,28 +651,28 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
case 16: {
points = [
{
x: pointer.x - length1 / 2,
y: pointer.y + length3 / 2,
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
},
{
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
y: pointer.y + length3 / 2 - (length3 - length4),
},
{
x: pointer.x - length1 / 2 + (length1 - length2) / 2,
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
x: pointer.x - length1 / 2,
y: pointer.y + length3 / 2,
},
{
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
x: pointer.x - length1 / 2 + length1,
y: pointer.y + length3 / 2,
},
{
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
},
{
x: pointer.x - length1 / 2 + length1,
y: pointer.y + length3 / 2,
x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
y: pointer.y + length3 / 2 - (length3 - length4) - length4,
},
]
break
@ -673,25 +683,25 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
points = [
{
x: pointer.x - length1 / 2 + length1,
y: pointer.y + length3 / 2,
},
{
x: pointer.x - length1 / 2,
y: pointer.y + length3 / 2,
},
{
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
x: pointer.x - length1 / 2 + length1,
y: pointer.y + length3 / 2,
},
{
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
},
{
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
},
{
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
},
]
break
@ -1066,45 +1076,294 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
canvas?.renderAll()
}
const updateFlippedPoints = (polygon) => {
if (!(polygon instanceof fabric.Polygon)) {
console.error('The object is not a Polygon.')
return
}
/**
* 면형상 작도시 라인 속성 넣는 로직
* 폴리곤으로 보면 직선방향에 따라 아래쪽인지 윗쪽인지 판단이 가능하다고 생각하여
* south -> 밑면은 무조건 right direction이라 가정하고 작업함 좌우반전시 반대로 그려지는 경우도 생기지만 그럴땐 흐름방향에 따라 최대값(최소값)을 찾아
* 해당 하는 흐름에 맞게 변경함
* @param { } polygon
*/
const { flipX, flipY, width, height, points, left, top, scaleX, scaleY } = polygon
//폴리곤, 상하반전, 좌우반전
const changeSurfaceLineType = (polygon) => {
const { isXInversion, isYInversion } = polygon //상하반전, 좌우반전
// 현재 points의 사본 가져오기
const newPoints = points.map((point) => {
let x = point.x
let y = point.y
// flipX 적용
if (flipX) {
x = width - x
}
// flipY 적용
if (flipY) {
y = height - y
}
// 스케일 및 전역 좌표 고려
x = (x - width / 2) * scaleX + width / 2
y = (y - height / 2) * scaleY + height / 2
return { x, y }
polygon.lines.forEach((line) => {
line.attributes.type = LINE_TYPE.WALLLINE.GABLE
})
// flipX, flipY를 초기화
polygon.flipX = false
polygon.flipY = false
const directionConfig = {
south: { evaesDirection: 'right', ridgeDirection: 'left', coord1: 'y1', coord2: 'y2' },
north: { evaesDirection: 'left', ridgeDirection: 'right', coord1: 'y1', coord2: 'y2' },
east: { evaesDirection: 'top', ridgeDirection: 'bottom', coord1: 'x1', coord2: 'x2' },
west: { evaesDirection: 'bottom', ridgeDirection: 'top', coord1: 'x1', coord2: 'x2' },
}
// points 업데이트
polygon.set({ points: newPoints })
polygon.setCoords()
const { evaesDirection, ridgeDirection, coord1, coord2 } = directionConfig[polygon.direction] || directionConfig.west
return polygon
polygon.lines.forEach((line) => {
if (line[coord1] === line[coord2]) {
if (line.direction === evaesDirection) {
line.attributes.type = LINE_TYPE.WALLLINE.EAVES
} else if (line.direction === ridgeDirection) {
line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
}
}
})
/**
* 진짜 처마 라인인지 확인하는 로직 -> 특정 모양에 따라 처마가 없는 경우가 있는데 위에 로직으로는
* 용마루도 처마로 만들어서 재보정
*/
//직선 찾는 로직
const maxLine = polygon.lines.filter((line) => line[coord1] === line[coord2])
if (maxLine.length > 0) {
const maxLineSorted = maxLine.reduce((a, b) => {
return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
(polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
? b
: a
})
//정렬된 폴리곤이 아니면(대각선이 존재하는 폴리곤일때)
if (!polygon.isSortedPoints) {
//좌우 반전을 했으면 반대로 정의함
if (isYInversion || isXInversion) {
polygon.lines.forEach((line) => {
if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
} else if (line.attributes.type === LINE_TYPE.SUBLINE.RIDGE) {
line.attributes.type = LINE_TYPE.WALLLINE.EAVES
}
})
}
}
if (maxLine.length === 1) {
const maxLineCoord = polygon.lines.reduce((a, b) => {
return (polygon.direction === 'south' || polygon.direction === 'east' ? b : a)[coord1] >
(polygon.direction === 'south' || polygon.direction === 'east' ? a : b)[coord1]
? b
: a
})
const isRealEavesLine = polygon.lines.filter((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
if (isRealEavesLine.length > 0) {
isRealEavesLine.forEach((line) => {
if (polygon.direction === 'south' || polygon.direction === 'north') {
const targetCoord =
polygon.direction === 'south' ? Math.max(maxLineCoord.y1, maxLineCoord.y2) : Math.min(maxLineCoord.y1, maxLineCoord.y2)
const realLineCoord = polygon.direction === 'south' ? Math.max(line.y1, line.y2) : Math.min(line.y1, line.y2)
if (targetCoord !== realLineCoord) {
line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
}
} else if (polygon.direction === 'east' || polygon.direction === 'west') {
const targetCoord =
polygon.direction === 'east' ? Math.max(maxLineCoord.x1, maxLineCoord.x2) : Math.min(maxLineCoord.x1, maxLineCoord.x2)
const realLineCoord = polygon.direction === 'east' ? Math.max(line.x1, line.x2) : Math.min(line.x1, line.x2)
if (targetCoord !== realLineCoord) {
line.attributes.type = LINE_TYPE.SUBLINE.RIDGE
}
}
})
}
}
}
}
function findCentroid(points) {
let sumX = 0,
sumY = 0
for (let i = 0; i < points.length; i++) {
sumX += points[i].x
sumY += points[i].y
}
return { x: sumX / points.length, y: sumY / points.length }
}
// 도형의 포인트를 왼쪽부터 반시계 방향으로 정렬하는 함수
/**
* 다각형의 점들을 시계 반대 방향으로 정렬하는 함수
* @param {Array} points - {x, y} 좌표 객체 배열
* @param {Object} startPoint - 시작점 (제공되지 않으면 가장 왼쪽 아래 점을 사용)
* @returns {Array} 시계 반대 방향으로 정렬된 점들의 배열
*/
function orderPointsCounterClockwise(points, startPoint = null) {
if (points.length <= 3) {
return points // 점이 3개 이하면 이미 다각형의 모든 점이므로 그대로 반환
}
// 시작점이 제공되지 않았다면 가장 왼쪽 아래 점을 찾음
let start = startPoint
if (!start) {
start = points[0]
for (let i = 1; i < points.length; i++) {
if (points[i].x < start.x || (points[i].x === start.x && points[i].y < start.y)) {
start = points[i]
}
}
}
// 다각형의 중심점 계산
let centerX = 0,
centerY = 0
for (let i = 0; i < points.length; i++) {
centerX += points[i].x
centerY += points[i].y
}
centerX /= points.length
centerY /= points.length
// 시작점에서 시계 반대 방향으로 각도 계산
let angles = []
for (let i = 0; i < points.length; i++) {
// 시작점은 제외
if (points[i] === start) continue
// 시작점을 기준으로 각 점의 각도 계산
let angle = Math.atan2(points[i].y - start.y, points[i].x - start.x)
// 각도가 음수면 2π를 더해 0~2π 범위로 변환
if (angle < 0) angle += 2 * Math.PI
angles.push({
point: points[i],
angle: angle,
})
}
// 각도에 따라 정렬 (시계 반대 방향)
angles.sort((a, b) => a.angle - b.angle)
// 정렬된 배열 생성 (시작점을 첫 번째로)
let orderedPoints = [start]
for (let i = 0; i < angles.length; i++) {
orderedPoints.push(angles[i].point)
}
return orderedPoints
}
/**
* 특정 점에서 시작하여 시계 반대 방향으로 다음 점을 찾는 함수
* @param {Object} currentPoint - 현재 점 {x, y}
* @param {Array} points - 모든 점들의 배열
* @param {Array} visited - 방문한 점들의 인덱스 배열
* @param {Object} prevVector - 이전 벡터 방향 (첫 호출에서는 null)
* @returns {Object} 다음 점의 인덱스와 객체
*/
function findNextCounterClockwisePoint(currentPoint, points, visited, prevVector = null) {
let minAngle = Infinity
let nextIndex = -1
// 이전 벡터가 없으면 (첫 점인 경우) 아래쪽을 향하는 벡터 사용
if (!prevVector) {
prevVector = { x: 0, y: -1 }
}
for (let i = 0; i < points.length; i++) {
// 이미 방문했거나 현재 점이면 건너뜀
if (visited.includes(i) || (points[i].x === currentPoint.x && points[i].y === currentPoint.y)) {
continue
}
// 현재 점에서 다음 후보 점으로의 벡터
let vector = {
x: points[i].x - currentPoint.x,
y: points[i].y - currentPoint.y,
}
// 벡터의 크기
let magnitude = Math.sqrt(vector.x * vector.x + vector.y * vector.y)
// 단위 벡터로 정규화
vector.x /= magnitude
vector.y /= magnitude
// 이전 벡터와 현재 벡터 사이의 각도 계산 (내적 사용)
let dotProduct = prevVector.x * vector.x + prevVector.y * vector.y
let crossProduct = prevVector.x * vector.y - prevVector.y * vector.x
// 각도 계산 (atan2 사용)
let angle = Math.atan2(crossProduct, dotProduct)
// 시계 반대 방향으로 가장 작은 각도를 가진 점 찾기
// 각도가 음수면 2π를 더해 0~2π 범위로 변환
if (angle < 0) angle += 2 * Math.PI
if (angle < minAngle) {
minAngle = angle
nextIndex = i
}
}
return nextIndex !== -1 ? { index: nextIndex, point: points[nextIndex] } : null
}
/**
* 다각형의 점들을 시계 반대 방향으로 추적하는 함수
* @param {Array} points - {x, y} 좌표 객체 배열
* @param {Object} startPoint - 시작점 (제공되지 않으면 가장 왼쪽 아래 점을 사용)
* @returns {Array} 시계 반대 방향으로 정렬된 점들의 배열
*/
function tracePolygonCounterClockwise(points, startPoint = null) {
if (points.length <= 3) {
return orderPointsCounterClockwise(points, startPoint)
}
// 시작점이 제공되지 않았다면 가장 왼쪽 아래 점을 찾음
let startIndex = 0
if (!startPoint) {
for (let i = 1; i < points.length; i++) {
if (points[i].x < points[startIndex].x || (points[i].x === points[startIndex].x && points[i].y < points[startIndex].y)) {
startIndex = i
}
}
startPoint = points[startIndex]
} else {
// 시작점이 제공된 경우 해당 점의 인덱스 찾기
for (let i = 0; i < points.length; i++) {
if (points[i].x === startPoint.x && points[i].y === startPoint.y) {
startIndex = i
break
}
}
}
// 결과 배열 초기화
let orderedPoints = [startPoint]
let visited = [startIndex]
let currentPoint = startPoint
let prevVector = null
// 모든 점을 방문할 때까지 반복
while (visited.length < points.length) {
let next = findNextCounterClockwisePoint(currentPoint, points, visited, prevVector)
if (!next) break // 더 이상 찾을 점이 없으면 종료
orderedPoints.push(next.point)
visited.push(next.index)
// 이전 벡터 업데이트 (현재 점에서 다음 점으로의 벡터)
prevVector = {
x: next.point.x - currentPoint.x,
y: next.point.y - currentPoint.y,
}
// 벡터 정규화
let magnitude = Math.sqrt(prevVector.x * prevVector.x + prevVector.y * prevVector.y)
prevVector.x /= magnitude
prevVector.y /= magnitude
currentPoint = next.point
}
return orderedPoints
}
return {
@ -1115,5 +1374,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
changeSurfaceLinePropertyEvent,
changeSurfaceLineProperty,
changeSurfaceLinePropertyReset,
changeSurfaceLineType,
}
}

6
src/hooks/useContextMenu.js
View File

@ -81,9 +81,9 @@ export function useContextMenu() {
switch (selectedMenu) {
case 'outline':
break
default:
setContextMenu([])
break
// default:
// setContextMenu([])
// break
}
}

3
src/hooks/useEvent.js
View File

@ -79,6 +79,9 @@ export function useEvent() {
// 마우스 위치 기준으로 확대/축소
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom)
canvas.requestRenderAll()
canvas.calcOffset()
// 이벤트의 기본 동작 방지 (스크롤 방지)
opt.e.preventDefault()
opt.e.stopPropagation()

2
src/hooks/usePlan.js
View File

@ -414,7 +414,7 @@ export function usePlan(params = {}) {
useEffect(() => {
setSelectedPlan(currentCanvasPlan)
handleCurrentPlanUrl()
resetCurrentObject()
// resetCurrentObject()
resetModuleSetupSurface()
}, [currentCanvasPlan])

4
src/hooks/usePolygon.js
View File

@ -176,6 +176,10 @@ export const usePolygon = () => {
* @param showDirectionText
*/
const drawDirectionArrow = (polygon, showDirectionText = true) => {
if (!polygon) {
return
}
if (polygon.points.length < 3) {
return
}

17
src/locales/ja.json
View File

@ -37,7 +37,7 @@
"modal.roof.shape.setting.patten.a": "Aパターン",
"modal.roof.shape.setting.patten.b": "Bパターン",
"modal.roof.shape.setting.side": "別に設定",
"plan.menu.roof.cover": "屋根作図",
"plan.menu.roof.cover": "伏せ図入力",
"plan.menu.roof.cover.outline.drawing": "外壁線を描く",
"plan.menu.roof.cover.roof.shape.setting": "屋根形状の設定",
"plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状の手動設定",
@ -72,7 +72,7 @@
"common.setting.rollback": "前に戻る",
"modal.cover.outline.remove": "外壁の取り外し",
"modal.cover.outline.select.move": "外壁選択の移動",
"plan.menu.placement.surface": "配置面",
"plan.menu.placement.surface": "実測値入力",
"plan.menu.placement.surface.slope.setting": "傾斜設定",
"plan.menu.placement.surface.drawing": "配置面の描画",
"modal.placement.surface.drawing.straight.line": "直線",
@ -128,7 +128,7 @@
"modal.module.basic.setting.pitch.module.row.margin": "上下間隔",
"modal.module.basic.setting.pitch.module.column.amount": "列数",
"modal.module.basic.setting.pitch.module.column.margin": "左右間隔",
"modal.module.basic.setting.prev": "移転",
"modal.module.basic.setting.prev": "前に戻る",
"modal.module.basic.setting.passivity.placement": "手動配置",
"modal.module.basic.setting.auto.placement": "設定値に自動配置",
"plan.menu.module.circuit.setting.circuit.trestle.setting": "回路設定",
@ -178,7 +178,7 @@
"modal.roof.alloc.select.parallel": "筋配置",
"modal.roof.alloc.select.stairs": "千鳥配置",
"modal.roof.alloc.apply": "選択した屋根材として割り当て",
"plan.menu.estimate.docDown": "見積書出力",
"plan.menu.estimate.docDownload": "見積書出力",
"plan.menu.estimate.save": "保存",
"plan.menu.estimate.reset": "初期化",
"plan.menu.estimate.copy": "見積書のコピー",
@ -594,6 +594,7 @@
"myinfo.message.password.error": "パスワードが間違っています。",
"login": "ログイン",
"login.auto.page.text": "自動ログイン中です。",
"login.fail": "アカウントが存在しないか、パスワードが間違っています。",
"login.id.save": "ID保存",
"login.id.placeholder": "IDを入力してください。",
"login.password.placeholder": "パスワードを入力してください。",
@ -957,6 +958,7 @@
"estimate.detail.estimateCopyPopup.close": "閉じる",
"estimate.detail.estimateCopyPopup.copyBtn": "見積コピー",
"estimate.detail.estimateCopyPopup.copy.alertMessage": "見積書がコピーされました。コピーした見積情報に移動します。",
"estimate.detail.estimateCopyPopup.copy.alertMessageError": "キャンバスのコピー中にエラーが発生しました.",
"estimate.detail.productFeaturesPopup.title": "製品特異事項",
"estimate.detail.productFeaturesPopup.close": "閉じる",
"estimate.detail.productFeaturesPopup.requiredStoreId": "一次販売店は必須です。",
@ -1034,5 +1036,10 @@
"roof.exceed.count": "屋根材は4つまで選択可能です。",
"outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
"outerLine.property.close": "外壁線の属性設定 を終了しますか？",
"want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?"
"want.to.complete.auxiliary.creation": "補助線の作成を完了しますか?",
"modal.placement.initial.setting.plan.drawing.only.number": "(※数字は[半角]入力のみ可能です。)",
"wall.line.not.found": "外壁がありません",
"roof.line.not.found": "屋根形状がありません",
"roof.material.can.not.delete": "割り当てられた配置面があります。",
"chidory.can.not.install" : "千鳥配置できない工法です。"
}

11
src/locales/ko.json
View File

@ -178,7 +178,7 @@
"modal.roof.alloc.select.parallel": "병렬식",
"modal.roof.alloc.select.stairs": "계단식",
"modal.roof.alloc.apply": "선택한 지붕재로 할당",
"plan.menu.estimate.docDown": "문서 다운로드",
"plan.menu.estimate.docDownload": "문서 다운로드",
"plan.menu.estimate.save": "저장",
"plan.menu.estimate.reset": "초기화",
"plan.menu.estimate.copy": "견적서 복사",
@ -594,6 +594,7 @@
"myinfo.message.password.error": "비밀번호가 틀렸습니다.",
"login": "로그인",
"login.auto.page.text": "자동로그인 중 입니다.",
"login.fail": "계정이 없거나 비밀번호가 잘못되었습니다.",
"login.id.save": "ID Save",
"login.id.placeholder": "아이디를 입력해주세요.",
"login.password.placeholder": "비밀번호를 입력해주세요.",
@ -957,6 +958,7 @@
"estimate.detail.estimateCopyPopup.close": "닫기",
"estimate.detail.estimateCopyPopup.copyBtn": "견적복사",
"estimate.detail.estimateCopyPopup.copy.alertMessage": "견적서가 복사되었습니다. 복사된 물건정보로 이동합니다.",
"estimate.detail.estimateCopyPopup.copy.alertMessageError": "캔버스 복사 중 오류 발생.",
"estimate.detail.productFeaturesPopup.title": "제품특이사항",
"estimate.detail.productFeaturesPopup.close": "닫기",
"estimate.detail.productFeaturesPopup.requiredStoreId": "1차 판매점은 필수값 입니다.",
@ -1034,5 +1036,10 @@
"roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
"outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
"outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
"want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?"
"want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?",
"modal.placement.initial.setting.plan.drawing.only.number": "(※ 숫자는 [반각]입력만 가능합니다.)",
"wall.line.not.found": "외벽선이 없습니다.",
"roof.line.not.found": "지붕형상이 없습니다.",
"roof.material.can.not.delete": "할당된 배치면이 있습니다.",
"chidory.can.not.install" : "치조 불가 공법입니다."
}

6
src/store/hotkeyAtom.js Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil'
export const hotkeyStore = atom({
key: 'hotkeyState',
default: [],
})

16
src/util/canvas-util.js
View File

@ -348,15 +348,15 @@ export const calculateIntersection = (line1, line2) => {
}
// Determine the min and max for line1 and line2 for both x and y
const line1MinX = Math.min(line1.x1, line1.x2)
const line1MaxX = Math.max(line1.x1, line1.x2)
const line2MinX = Math.min(line2.x1, line2.x2)
const line2MaxX = Math.max(line2.x1, line2.x2)
const line1MinX = Math.min(line1.x1, line1.x2) - 5
const line1MaxX = Math.max(line1.x1, line1.x2) + 5
const line2MinX = Math.min(line2.x1, line2.x2) - 5
const line2MaxX = Math.max(line2.x1, line2.x2) + 5
const line1MinY = Math.min(line1.y1, line1.y2)
const line1MaxY = Math.max(line1.y1, line1.y2)
const line2MinY = Math.min(line2.y1, line2.y2)
const line2MaxY = Math.max(line2.y1, line2.y2)
const line1MinY = Math.min(line1.y1, line1.y2) - 5
const line1MaxY = Math.max(line1.y1, line1.y2) + 5
const line2MinY = Math.min(line2.y1, line2.y2) - 5
const line2MaxY = Math.max(line2.y1, line2.y2) + 5
// Check if the intersection X and Y are within the range of both lines
if (