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

지붕형상 수동 설정 추가

Browse Source
This commit is contained in:
hyojun.choi 2024-10-14 16:16:28 +09:00
parent f7bc8a2a73
commit d6f46b419a
11 changed files with 257 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -4,15 +4,26 @@ import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
import { useMessage } from '@/hooks/useMessage'
import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting()
const { getMessage } = useMessage()
const [buttonAct, setButtonAct] = useState(1)
const buttons = [
{ id: 1, name: getMessage('eaves') },
{ id: 2, name: getMessage('gable') },
{ id: 3, name: getMessage('windage') },
]
const eavesProps = {
offsetRef,
pitchRef,
}
const gableProps = {
offsetRef,
pitchRef,
}
const shedProps = {
offsetRef,
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap xxm`}>
@ -25,7 +36,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
<div className="modal-body">
<div className="modal-btn-wrap">
{buttons.map((button) => (
<button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
<button id={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
{button.name}
</button>
))}
@ -33,17 +44,23 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
<div className="modal-bottom-border-bx">
<div className="setting-tit">{getMessage('setting')}</div>
<div className="discrimination-box">
{buttonAct === 1 && <Eaves />}
{buttonAct === 2 && <Gable />}
{buttonAct === 3 && <Shed />}
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
{type === TYPES.GABLE && <Gable {...gableProps} />}
{type === TYPES.SHED && <Shed {...shedProps} />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame sub-tab mr5">{getMessage('common.setting.rollback')}</button>
<button className="btn-frame sub-tab act">{getMessage('apply')}</button>
<button className="btn-frame sub-tab mr5" onClick={handleRollback}>
{getMessage('common.setting.rollback')}
</button>
<button className="btn-frame sub-tab act" onClick={handleConfirm}>
{getMessage('apply')}
</button>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('common.setting.finish')}</button>
<button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapePassivitySettingModal)}>
{getMessage('common.setting.finish')}
</button>
</div>
</div>
</div>

6
src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
export default function Eaves() {
export default function Eaves({ offsetRef, pitchRef }) {
const { getMessage } = useMessage()
return (
<>
@ -9,7 +9,7 @@ export default function Eaves() {
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
</div>
<span className="thin">寸</span>
</div>
@ -18,7 +18,7 @@ export default function Eaves() {
{getMessage('eaves.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
</div>
<span className="thin">mm</span>
</div>

6
src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
export default function Gable() {
export default function Gable({ offsetRef, pitchRef }) {
const { getMessage } = useMessage()
return (
<>
@ -9,7 +9,7 @@ export default function Gable() {
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
</div>
<span className="thin">寸</span>
</div>
@ -18,7 +18,7 @@ export default function Gable() {
{getMessage('gable.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
</div>
<span className="thin">mm</span>
</div>

4
src/components/floor-plan/modal/roofShape/passivity/Shed.js
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
export default function Shed() {
export default function Shed({ offsetRef }) {
const { getMessage } = useMessage()
return (
<>
@ -9,7 +9,7 @@ export default function Shed() {
{getMessage('shed.width')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
</div>
<span className="thin">mm</span>
</div>

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

@ -27,6 +27,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
// 보조선 작성
export function useAuxiliaryDrawing() {
const canvas = useRecoilValue(canvasState)
const {

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

@ -7,6 +7,7 @@ import { LINE_TYPE } from '@/common/common'
import { useLine } from '@/hooks/useLine'
import { useMode } from '@/hooks/useMode'
// 처마.케라바 변경
export function useEavesGableEdit() {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()

1
src/hooks/roofcover/useOuterLineWall.js
View File

@ -30,6 +30,7 @@ import {
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
//외벽선 그리기
export function useOuterLineWall() {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =

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

@ -7,6 +7,7 @@ import { usePolygon } from '@/hooks/usePolygon'
import { useLine } from '@/hooks/useLine'
import { outerLinePointsState } from '@/store/outerLineAtom'
// 외벽선 속성 설정
export function usePropertiesSetting() {
const canvas = useRecoilValue(canvasState)
@ -19,17 +20,7 @@ export function usePropertiesSetting() {
const { removeLine, hideLine } = useLine()
useEffect(() => {
if (!currentObject) {
return
}
if (currentObject.name !== 'outerLine') {
return
}
const type = currentObject.attributes?.type
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
lines.forEach((line) => {
const lineType = line.attributes?.type
if (!lineType) {
@ -39,6 +30,14 @@ export function usePropertiesSetting() {
})
}
})
if (!currentObject) {
return
}
if (currentObject.name !== 'outerLine') {
return
}
const type = currentObject.attributes?.type
if (!type) {
currentObject.set({
@ -46,6 +45,8 @@ export function usePropertiesSetting() {
strokeWidth: 4,
})
}
canvas.renderAll()
}, [currentObject])
const history = useRef([])
@ -106,6 +107,7 @@ export function usePropertiesSetting() {
}
const lastLine = history.current.pop()
delete lastLine.attributes
lastLine.set({
stroke: '#000000',
strokeWidth: 4,
@ -131,7 +133,7 @@ export function usePropertiesSetting() {
hideLine(line)
})
const wall = addPolygonByLines(lines, { name: 'WallLine', fill: 'transparent', stroke: 'black' })
const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
wall.lines = [...lines]

175
src/hooks/roofcover/useRoofShapePassivitySetting.js Normal file
View File

@ -0,0 +1,175 @@
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
//지붕형상 수동 설정
export function useRoofShapePassivitySetting() {
const TYPES = {
EAVES: 'eaves',
GABLE: 'gable',
SHED: 'shed',
}
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { showLine, hideLine } = useLine()
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { drawRoofPolygon } = useMode()
const { addPolygonByLines } = usePolygon()
const currentObject = useRecoilValue(currentObjectState)
const offsetRef = useRef(null)
const pitchRef = useRef(null)
const currentLineRef = useRef(null)
const history = useRef([])
const [type, setType] = useState(TYPES.EAVES)
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
{ id: 2, name: getMessage('gable'), type: TYPES.GABLE },
{ id: 3, name: getMessage('windage'), type: TYPES.SHED },
]
useEffect(() => {
addCanvasMouseEventListener('mouse:down', mouseDown)
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
canvas.remove(wallLines)
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
outerLines.forEach((outerLine, idx) => {
if (idx === 0) {
currentLineRef.current = outerLine
}
outerLine.set({ selectable: true })
showLine(outerLine)
outerLine.bringToFront()
})
canvas?.renderAll()
return () => {
canvas?.discardActiveObject()
initEvent()
}
}, [])
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
lines.forEach((line) => {
line.set({
stroke: '#000000',
strokeWidth: 4,
})
})
if (!currentObject) {
return
}
if (currentObject.name !== 'outerLine') {
return
}
currentObject.set({
stroke: '#EA10AC',
strokeWidth: 4,
})
currentLineRef.current = currentObject
canvas.renderAll()
}, [currentObject])
const mouseDown = (e) => {
if (!e.target) {
currentLineRef.current = null
return
}
if (e.target && e.target.name === 'outerLine') {
currentLineRef.current = e.target
}
}
const nextLineFocus = (selectedLine) => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
const index = lines.findIndex((line) => line === selectedLine)
const nextLine = lines[index + 1] || lines[0]
canvas.setActiveObject(nextLine)
}
const handleConfirm = () => {
if (!currentLineRef.current) {
alert('선택된 외곽선이 없습니다.')
return
}
let attributes
const offset = Number(offsetRef.current.value) / 10
if (type === TYPES.EAVES) {
attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset,
pitch: pitchRef.current.value,
}
} else if (type === TYPES.GABLE) {
attributes = {
type: LINE_TYPE.WALLLINE.GABLE,
pitch: pitchRef.current.value,
offset,
}
} else if (type === TYPES.SHED) {
attributes = {
type: LINE_TYPE.WALLLINE.SHED,
offset,
}
}
currentLineRef.current.set({
attributes,
})
history.current.push(currentLineRef.current)
nextLineFocus(currentLineRef.current)
}
const handleRollback = () => {
if (history.current.length === 0) {
return
}
const lastLine = history.current.pop()
delete lastLine.attributes
lastLine.set({
stroke: '#000000',
strokeWidth: 4,
})
canvas.setActiveObject(lastLine)
canvas.renderAll()
}
const handleSave = (fn) => {
const exceptObjs = canvas.getObjects().filter((obj) => obj.name !== 'outerLine' && obj.parent?.name !== 'outerLine')
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
exceptObjs.forEach((obj) => {
canvas.remove(obj)
})
lines.forEach((line) => {
hideLine(line)
})
const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
wall.lines = [...lines]
const roof = drawRoofPolygon(wall)
canvas.renderAll()
fn(false)
}
return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
}

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

@ -7,6 +7,7 @@ import { usePolygon } from '@/hooks/usePolygon'
import { useMode } from '@/hooks/useMode'
import { useLine } from '@/hooks/useLine'
// 지붕형상 설정
export function useRoofShapeSetting() {
const [shapeNum, setShapeNum] = useState(1)
const [buttonAct, setButtonAct] = useState(1)

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

@ -5,6 +5,7 @@ import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { useLine } from '@/hooks/useLine'
// 외벽선 편집 및 오프셋
export function useWallLineOffsetSetting() {
const canvas = useRecoilValue(canvasState)
const { showLine, addLine } = useLine()
@ -29,6 +30,7 @@ export function useWallLineOffsetSetting() {
y1: point1.y,
x2: point2.x,
y2: point2.y,
direction: currentWallLineRef.current.direction,
})
line.attributes = { ...currentWallLineRef.current.attributes }
@ -191,26 +193,42 @@ export function useWallLineOffsetSetting() {
}
})[0]
const length = Number(length1Ref.current.value) / 10
let line1, line2
const currentIdx = currentWallLineRef.current.idx
let point1, point2, point3
if (radioTypeRef.current === '1') {
// 1지점 선택시 방향은 down, right만 가능
if (arrow1Ref.current === 'down') {
drawLine({ x: startPoint.x, y: startPoint.y }, { x: startPoint.x, y: startPoint.y + length }, currentWallLineRef.current.idx)
drawLine({ x: startPoint.x, y: startPoint.y + length }, { x: endPoint.x, y: endPoint.y }, currentWallLineRef.current.idx)
point1 = { x: startPoint.x, y: startPoint.y }
point2 = { x: startPoint.x, y: startPoint.y + length }
point3 = { x: endPoint.x, y: endPoint.y }
} else {
drawLine({ x: startPoint.x, y: startPoint.y }, { x: startPoint.x + length, y: startPoint.y }, currentWallLineRef.current.idx)
drawLine({ x: startPoint.x + length, y: startPoint.y }, { x: endPoint.x, y: endPoint.y }, currentWallLineRef.current.idx)
point1 = { x: startPoint.x, y: startPoint.y }
point2 = { x: startPoint.x + length, y: startPoint.y }
point3 = { x: endPoint.x, y: endPoint.y }
}
} else {
// 2지점일 경우 방향은 up, left만 가능
if (arrow2Ref.current === 'up') {
drawLine({ x: endPoint.x, y: endPoint.y }, { x: endPoint.x, y: endPoint.y - length }, currentWallLineRef.current.idx)
drawLine({ x: endPoint.x, y: endPoint.y - length }, { x: startPoint.x, y: startPoint.y }, currentWallLineRef.current.idx)
point1 = { x: startPoint.x, y: startPoint.y }
point2 = { x: startPoint.x, y: startPoint.y - length }
point3 = { x: endPoint.x, y: endPoint.y }
} else {
drawLine({ x: endPoint.x, y: endPoint.y }, { x: endPoint.x - length, y: endPoint.y }, currentWallLineRef.current.idx)
drawLine({ x: endPoint.x - length, y: endPoint.y }, { x: startPoint.x, y: startPoint.y }, currentWallLineRef.current.idx)
point1 = { x: startPoint.x, y: startPoint.y }
point2 = { x: startPoint.x - length, y: startPoint.y }
point3 = { x: endPoint.x, y: endPoint.y }
}
}
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
outerLines.forEach((outerLine) => {
if (outerLine.idx >= currentIdx + 1) {
outerLine.idx = outerLine.idx + 1
}
})
drawLine(point1, point2, currentIdx)
drawLine(point2, point3, currentIdx + 1)
removeOuterLineEditCircle()
canvas.remove(currentWallLineRef.current)
currentWallLineRef.current = null