diff --git a/src/components/floor-plan/modal/basic/step/Trestle.jsx b/src/components/floor-plan/modal/basic/step/Trestle.jsx index b184670e..6a1ef3e2 100644 --- a/src/components/floor-plan/modal/basic/step/Trestle.jsx +++ b/src/components/floor-plan/modal/basic/step/Trestle.jsx @@ -124,7 +124,6 @@ const Trestle = forwardRef((props, ref) => { useEffect(() => { if (constructionList.length > 0) { - console.log(constructionList) setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null) } else { setSelectedConstruction(null) @@ -144,6 +143,19 @@ const Trestle = forwardRef((props, ref) => { return 'no-click' } + const onChangeLength = (e) => { + setLengthBase(e) + dispatch({ + type: 'SET_LENGTH', + roof: { + length: e, + moduleTpCd: selectedModules.itemTp ?? '', + roofMatlCd: selectedRoof?.roofMatlCd ?? '', + raftBaseCd: selectedRaftBase?.clCode, + }, + }) + } + const onChangeRaftBase = (e) => { setSelectedRaftBase(e) dispatch({ @@ -225,7 +237,8 @@ const Trestle = forwardRef((props, ref) => { snowGdPossYn: constructionList[index].snowGdPossYn, cvrYn: constructionList[index].cvrYn, mixMatlNo: selectedModules.mixMatlNo, - workingWidth: selectedRoof?.length?.toString() ?? '', + // workingWidth: selectedRoof?.length?.toString() ?? '', + workingWidth: lengthBase, }, }) @@ -242,7 +255,7 @@ const Trestle = forwardRef((props, ref) => { return { ...selectedRoof, hajebichi, - lenBase: lengthBase, + length: lengthBase, eavesMargin, ridgeMargin, kerabaMargin, @@ -518,7 +531,7 @@ const Trestle = forwardRef((props, ref) => { type="text" className="input-origin block" value={lengthBase} - onChange={(e) => setLengthBase(e.target.value)} + onChange={(e) => onChangeLength(e.target.value)} disabled={selectedRoof.lenAuth === 'R'} /> diff --git a/src/hooks/module/useModuleTrestle.js b/src/hooks/module/useModuleTrestle.js index 361ad541..e89d6089 100644 --- a/src/hooks/module/useModuleTrestle.js +++ b/src/hooks/module/useModuleTrestle.js @@ -10,6 +10,7 @@ const RAFT_BASE_CODE = '203800' const trestleReducer = (state, action) => { switch (action.type) { + case 'SET_LENGTH': case 'SET_RAFT_BASE': case 'SET_TRESTLE_MAKER': case 'SET_CONST_MTHD': @@ -96,11 +97,15 @@ export function useModuleTrestle(props) { useEffect(() => { if (trestleState) { handleSetTrestleList() + if (!trestleState?.trestleMkrCd) { setConstMthdList([]) setRoofBaseList([]) setConstructionList([]) setTrestleDetail(null) + setEavesMargin(0) + setRidgeMargin(0) + setKerabaMargin(0) return } @@ -109,6 +114,9 @@ export function useModuleTrestle(props) { setRoofBaseList([]) setConstructionList([]) setTrestleDetail(null) + setEavesMargin(0) + setRidgeMargin(0) + setKerabaMargin(0) return } @@ -116,12 +124,18 @@ export function useModuleTrestle(props) { if (!trestleState?.roofBaseCd) { setConstructionList([]) setTrestleDetail(null) + setEavesMargin(0) + setRidgeMargin(0) + setKerabaMargin(0) return } handleSetConstructionList() if (!trestleState?.constTp) { setTrestleDetail(null) + setEavesMargin(0) + setRidgeMargin(0) + setKerabaMargin(0) return } @@ -224,7 +238,8 @@ export function useModuleTrestle(props) { constTp: trestleState.constTp ?? '', mixMatlNo: trestleState.mixMatlNo ?? '', roofPitch: trestleState.roofPitch ?? '', - workingWidth: trestleState.workingWidth ?? '', + // workingWidth: trestleState.length ?? '', + workingWidth: lengthBase ?? '', }, ]) .then((res) => { diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js index db0859cf..d53faa39 100644 --- a/src/hooks/surface/usePlacementShapeDrawing.js +++ b/src/hooks/surface/usePlacementShapeDrawing.js @@ -14,7 +14,7 @@ import { useMouse } from '@/hooks/useMouse' import { useLine } from '@/hooks/useLine' import { useTempGrid } from '@/hooks/useTempGrid' import { useEffect, useRef } from 'react' -import { distanceBetweenPoints } from '@/util/canvas-util' +import { calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util' import { fabric } from 'fabric' import { calculateAngle } from '@/util/qpolygon-utils' import { @@ -37,12 +37,13 @@ import { useSurfaceShapeBatch } from './useSurfaceShapeBatch' import { roofDisplaySelector } from '@/store/settingAtom' import { useRoofFn } from '@/hooks/common/useRoofFn' import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty' +import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' // 배치면 그리기 export function usePlacementShapeDrawing(id) { const canvas = useRecoilValue(canvasState) const roofDisplay = useRecoilValue(roofDisplaySelector) - const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } = + const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseLine } = useEvent() // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } = // useContext(EventContext) @@ -118,6 +119,7 @@ export function usePlacementShapeDrawing(id) { }, [type]) const clear = () => { + addCanvasMouseEventListener('mouse:move', mouseMove) setLength1(0) setLength2(0) @@ -173,6 +175,80 @@ export function usePlacementShapeDrawing(id) { } } +/* +mouseMove + */ + const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) + const roofAdsorptionPoints = useRef([]) + const intersectionPoints = useRef([]) + const { getAdsorptionPoints } = useAdsorptionPoint() + + const mouseMove = (e) => { + removeMouseLine(); + const pointer = canvas.getPointer(e.e) + const roofsPoints = roofs.map((roof) => roof.points).flat() + roofAdsorptionPoints.current = [...roofsPoints] + + const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed) + const otherAdsorptionPoints = [] + + auxiliaryLines.forEach((line1) => { + auxiliaryLines.forEach((line2) => { + if (line1 === line2) { + return + } + + const intersectionPoint = calculateIntersection(line1, line2) + if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) { + return + } + otherAdsorptionPoints.push(intersectionPoint) + }) + }) + + let innerLinePoints = [] + canvas + .getObjects() + .filter((obj) => obj.innerLines) + .forEach((polygon) => { + polygon.innerLines.forEach((line) => { + innerLinePoints.push({ x: line.x1, y: line.y1 }) + innerLinePoints.push({ x: line.x2, y: line.y2 }) + }) + }) + + const adsorptionPoints = [ + ...getAdsorptionPoints(), + ...roofAdsorptionPoints.current, + ...otherAdsorptionPoints, + ...intersectionPoints.current, + ...innerLinePoints, + ] + + let arrivalPoint = { x: pointer.x, y: pointer.y } + let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints) + + if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) { + arrivalPoint = { ...adsorptionPoint } + } + const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], { + stroke: 'red', + strokeWidth: 1, + selectable: false, + name: 'mouseLine', + }) + + const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], { + stroke: 'red', + strokeWidth: 1, + selectable: false, + name: 'mouseLine', + }) + canvas?.add(horizontalLine, verticalLine) + canvas?.renderAll() + + } + useEffect(() => { canvas ?.getObjects() diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 4204dc71..4a601ed8 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -206,6 +206,7 @@ export function useCanvasEvent() { selected.forEach((obj) => { if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { obj.set({ stroke: 'red' }) + obj.bringToFront() } }) canvas.renderAll() @@ -243,6 +244,7 @@ export function useCanvasEvent() { selected.forEach((obj) => { if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { obj.set({ stroke: 'red' }) + obj.bringToFront() } }) } diff --git a/src/locales/ja.json b/src/locales/ja.json index 796eea85..df10f1d0 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -3,7 +3,7 @@ "welcome": "ようこそ。 {0}さん", "header.menus.home": "ホーム", "header.menus.management": "見積書管理画面", - "header.menus.management.newStuff": "新規見積登録", + "header.menus.management.newStuff": "新規物件登録", "header.menus.management.detail": "物件詳細", "header.menus.management.stuffList": "物件検索", "header.menus.community": "コミュニティ", @@ -187,7 +187,7 @@ "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.validation.error02": "シリーズを選択してください。", "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定", "modal.circuit.trestle.setting.step.up.allocation": "昇圧設定", - "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "シリアル枚数", + "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "直列枚数", "modal.circuit.trestle.setting.step.up.allocation.total.amount": "総回路数", "modal.circuit.trestle.setting.step.up.allocation.connected": "接続する", "modal.circuit.trestle.setting.step.up.allocation.circuit.amount": "昇圧回路数",