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-11-11 15:37:10 +09:00
parent cecc8e3bfd
commit d985b587cf
5 changed files with 93 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -162,6 +162,7 @@ export const SAVE_KEY = [
'planeSize',
'actualSize',
'surfaceId',
'arrow',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

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

@ -139,7 +139,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.on('removed', () => {
// const children = getAllRelatedObjects(this.id, this.canvas)
const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id && obj.name === 'lengthText')
const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
children.forEach((child) => {
this.canvas.remove(child)
})
@ -167,6 +167,10 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
},
initLines() {
if (this.lines.length > 0) {
return
}
this.lines = []
this.points.forEach((point, i) => {

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

@ -6,17 +6,27 @@ import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { FLOW_DIRECTION_TYPE, useFlowDirectionSetting } from '@/hooks/popup/useFlowDirectionSetting'
import { canvasState } from '@/store/canvasAtom'
export default function FlowDirectionSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, target } = props
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [compasDeg, setCompasDeg] = useState(360)
useEffect(() => {
return () => {
canvas?.discardActiveObject()
}
}, [])
const [compasDeg, setCompasDeg] = useState(null)
const [flowDirection, setFlowDirection] = useState(target.direction)
const { changeSurfaceFlowDirection } = useSurfaceShapeBatch()
const { closePopup } = usePopup()
const { changeSurfaceFlowDirection, type, setType } = useFlowDirectionSetting(id)
const orientations = [
// { name: `${getMessage('commons.none')}`, value: 0 },
{ name: `${getMessage('commons.none')}`, value: 0 },
{ name: `${getMessage('commons.south')}`, value: 360 },
{ name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
{ name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
@ -27,41 +37,7 @@ export default function FlowDirectionSetting(props) {
{ name: `${getMessage('commons.north')}`, value: 180 },
]
const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
const [type, setType] = useState('0')
useEffect(() => {
if (target?.angle === 0) {
setCompasDeg(360)
} else {
setCompasDeg(target?.angle ?? 360)
}
}, [])
useEffect(() => {
if (type === '0') {
setCompasDeg(selectedOrientation.value)
}
}, [selectedOrientation])
useEffect(() => {
if (type === '1') {
if ([15, 345, 360].includes(compasDeg)) {
setSelectedOrientation(orientations[0])
} else if ([30, 45, 60].includes(compasDeg)) {
setSelectedOrientation(orientations[2])
} else if ([75, 90, 105].includes(compasDeg)) {
setSelectedOrientation(orientations[4])
} else if ([120, 135, 150].includes(compasDeg)) {
setSelectedOrientation(orientations[6])
} else if ([165, 180, 195].includes(compasDeg)) {
setSelectedOrientation(orientations[7])
} else if ([210, 225, 240].includes(compasDeg)) {
setSelectedOrientation(orientations[5])
} else if ([255, 270, 285].includes(compasDeg)) {
setSelectedOrientation(orientations[3])
} else if ([300, 315, 330].includes(compasDeg)) {
setSelectedOrientation(orientations[1])
}
}
}, [compasDeg])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml mount`}>
@ -94,16 +70,43 @@ export default function FlowDirectionSetting(props) {
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
<div className="mb-box">
<div className="d-check-radio pop mb15">
<input type="radio" name="radio01" id="ra01" value={0} checked={type === '0'} onChange={(e) => setType(e.target.value)} />
<input
type="radio"
name="radio01"
id="ra01"
checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
onChange={(e) => {
setCompasDeg(0)
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
}}
/>
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
</div>
<div className="grid-select ">
<QSelectBox title={''} options={orientations} value={selectedOrientation} onChange={(e) => setSelectedOrientation(e)} />
<QSelectBox
title={''}
options={orientations}
value={selectedOrientation}
onChange={(e) => {
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
setSelectedOrientation(e)
setCompasDeg(e.value)
}}
/>
</div>
</div>
<div className="mb-box">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" value={1} checked={type === '1'} onChange={(e) => setType(e.target.value)} />
<input
type="radio"
name="radio01"
id="ra02"
value={1}
checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
onChange={(e) => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
}}
/>
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
</div>
</div>
@ -114,18 +117,27 @@ export default function FlowDirectionSetting(props) {
<div
key={index}
className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
onClick={() => setCompasDeg(15 * (12 + index))}
onClick={() => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (12 + index))
}}
></div>
))}
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
<div
key={index}
className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
onClick={() => setCompasDeg(15 * (index + 1))}
onClick={() => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (index + 1))
}}
></div>
))}
<div className="compas">
<div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
<div
className="compas-arr"
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
></div>
</div>
</div>
</div>
@ -133,7 +145,7 @@ export default function FlowDirectionSetting(props) {
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, selectedOrientation)}>
<button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
{getMessage('modal.common.save')}
</button>
</div>

30
src/hooks/popup/useFlowDirectionSetting.js Normal file
View File

@ -0,0 +1,30 @@
import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { usePolygon } from '@/hooks/usePolygon'
import { useState } from 'react'
import { usePopup } from '@/hooks/usePopup'
export const FLOW_DIRECTION_TYPE = {
EIGHT_AZIMUTH: 'eightAzimuth',
TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
}
export function useFlowDirectionSetting(id) {
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
const { closePopup } = usePopup()
const [type, setType] = useState(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
roof.set({
direction: direction,
surfaceCompass: orientation,
})
// drawDirectionArrow(roof)
canvas?.renderAll()
closePopup(id)
}
return { changeSurfaceFlowDirection, type, setType }
}

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

@ -965,21 +965,12 @@ export function useSurfaceShapeBatch() {
}
}
const changeSurfaceFlowDirection = (roof, direction, orientation) => {
roof.set({
direction: direction,
})
drawDirectionArrow(roof)
canvas?.renderAll()
}
return {
applySurfaceShape,
deleteAllSurfacesAndObjects,
moveSurfaceShapeBatch,
resizeSurfaceShapeBatch,
surfaceShapeActualSize,
changeSurfaceFlowDirection,
changeSurfaceLinePropertyEvent,
changeSurfaceLineProperty,
}