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

[1142] : 【HANASYS DESIGN】方位選択時の+,-の表記が異なる #178

Merged
ysCha merged 1 commits from dev into prd-deploy 2025-07-04 14:18:12 +09:00
Conversation 0 Commits 1 Files Changed 3 +77 -44
3 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/floor-plan/modal/basic/step/Orientation.jsx
View File

@ -275,31 +275,31 @@ export const Orientation = forwardRef((props, ref) => {
{Array.from({ length: 180 / 15 }).map((dot, index) => ( {Array.from({ length: 180 / 15 }).map((dot, index) => (
<div <div
key={index} key={index}
className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`} className={`circle ${getDegreeInOrientation(inputCompasDeg) === -15 * index + 180 || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
onClick={() => { onClick={() => {
if (index === 0) { if (index === 0) {
setInputCompasDeg(180) setInputCompasDeg(180)
return return
} }
setInputCompasDeg(-1 * (-15 * index + 180)) setInputCompasDeg(-15 * index + 180)
}} }}
> >
{index === 0 && <i>180°</i>} {index === 0 && <i>180°</i>}
{index === 6 && <i>-90°</i>} {index === 6 && <i>90°</i>}
</div> </div>
))} ))}
{Array.from({ length: 180 / 15 }).map((dot, index) => ( {Array.from({ length: 180 / 15 }).map((dot, index) => (
<div <div
key={index} key={index}
className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`} className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
onClick={() => setInputCompasDeg(15 * index)} onClick={() => setInputCompasDeg(15 * index * -1)}
> >
{index === 0 && <i>0°</i>} {index === 0 && <i>0°</i>}
{index === 6 && <i>90°</i>} {index === 6 && <i>-90°</i>}
</div> </div>
))} ))}
<div className="compas"> <div className="compas">
<div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(inputCompasDeg)}deg)` }}></div> <div className="compas-arr" style={{ transform: `rotate(${-1 * getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -32,15 +32,40 @@ export default function FlowDirectionSetting(props) {
const [flowDirection, setFlowDirection] = useState(target.direction) const [flowDirection, setFlowDirection] = useState(target.direction)
const { closePopup } = usePopup() const { closePopup } = usePopup()
useEffect(() => {
let newCompassDeg = 0
if ([-15, 0, 15].includes(compasDeg)) {
newCompassDeg = 0
} else if ([30, 45, 60].includes(compasDeg)) {
newCompassDeg = 45
} else if ([75, 90, 105].includes(compasDeg)) {
newCompassDeg = 90
} else if ([120, 135, 150].includes(compasDeg)) {
newCompassDeg = 135
} else if ([165, 180, -165].includes(compasDeg)) {
newCompassDeg = 180
} else if ([-120, -135, -150].includes(compasDeg)) {
newCompassDeg = -135
} else if ([-105, -90, -75].includes(compasDeg)) {
newCompassDeg = -90
} else if ([-60, -45, -30].includes(compasDeg)) {
newCompassDeg = -45
} else {
newCompassDeg = ''
}
const newOrientation = orientations.find((item) => item.value === newCompassDeg)
setSelectedOrientation(newOrientation)
}, [compasDeg])
const orientations = [ const orientations = [
{ name: `${getMessage('commons.none')}`, value: 0 }, { name: `${getMessage('commons.none')}`, value: '' },
{ name: `${getMessage('commons.south')}`, value: 360 }, { name: `${getMessage('commons.south')}`, value: 0 },
{ name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 }, { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
{ name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 }, { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
{ name: `${getMessage('commons.east')}`, value: 270 }, { name: `${getMessage('commons.east')}`, value: 90 },
{ name: `${getMessage('commons.west')}`, value: 90 }, { name: `${getMessage('commons.west')}`, value: -90 },
{ name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 }, { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 }, { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
{ name: `${getMessage('commons.north')}`, value: 180 }, { name: `${getMessage('commons.north')}`, value: 180 },
] ]
@ -109,6 +134,11 @@ export default function FlowDirectionSetting(props) {
value={selectedOrientation} value={selectedOrientation}
options={orientations} options={orientations}
onChange={(e) => { onChange={(e) => {
if (e.value === '') {
setCompasDeg(null)
setSelectedOrientation(e)
return
}
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
setSelectedOrientation(e) setSelectedOrientation(e)
setCompasDeg(e.value) setCompasDeg(e.value)
@ -137,31 +167,32 @@ export default function FlowDirectionSetting(props) {
<div className="draw-flow-wrap"> <div className="draw-flow-wrap">
<div className="compas-box"> <div className="compas-box">
<div className="compas-box-inner"> <div className="compas-box-inner">
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => ( {Array.from({ length: 180 / 15 }).map((dot, index) => (
<div <div
key={index} key={index}
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`} className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
onClick={() => { onClick={() => {
if (index === 0) {
setCompasDeg(180)
return
}
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (12 + index)) setCompasDeg(-15 * index + 180)
}} }}
></div> ></div>
))} ))}
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => ( {Array.from({ length: 180 / 15 }).map((dot, index) => (
<div <div
key={index} key={index}
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`} className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
onClick={() => { onClick={() => {
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
setCompasDeg(15 * (index + 1)) setCompasDeg(15 * index * -1)
}} }}
></div> ></div>
))} ))}
<div className="compas"> <div className="compas">
<div <div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
className="compas-arr"
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
></div>
</div> </div>
</div> </div>
</div> </div>

40
src/hooks/usePolygon.js
View File

@ -345,7 +345,7 @@ export const usePolygon = () => {
//arrow의 compass 값으로 방향 글자 설정 필요 //arrow의 compass 값으로 방향 글자 설정 필요
const drawDirectionStringToArrow2 = (polygon, showDirectionText) => { const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
const { direction, surfaceCompass, moduleCompass, arrow } = polygon let { direction, surfaceCompass, moduleCompass, arrow } = polygon
if (moduleCompass === null || moduleCompass === undefined) { if (moduleCompass === null || moduleCompass === undefined) {
const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, { const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
fontFamily: flowFontOptions.fontFamily.value, fontFamily: flowFontOptions.fontFamily.value,
@ -371,7 +371,9 @@ export const usePolygon = () => {
let text = '' let text = ''
let compassType = (375 - getDegreeInOrientation(moduleCompass)) / 15 let compassType = (375 + getDegreeInOrientation(moduleCompass)) / 15
moduleCompass = -1 * moduleCompass
if (moduleCompass === 0 || (moduleCompass < 0 && moduleCompass >= -6)) { if (moduleCompass === 0 || (moduleCompass < 0 && moduleCompass >= -6)) {
compassType = 1 compassType = 1
@ -397,7 +399,7 @@ export const usePolygon = () => {
compassType = 11 compassType = 11
} else if (moduleCompass < 0 && moduleCompass >= -171) { } else if (moduleCompass < 0 && moduleCompass >= -171) {
compassType = 12 compassType = 12
} else if (moduleCompass === 180) { } else if (Math.abs(moduleCompass) === 180) {
compassType = 13 compassType = 13
} }
@ -432,7 +434,7 @@ export const usePolygon = () => {
? (text = '北北東') ? (text = '北北東')
: (text = '南南西') : (text = '南南西')
} else if ([10].includes(compassType)) { } else if ([10].includes(compassType)) {
direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '南西') : (text = '北東') direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '北東') : (text = '南西')
} else if ([11, 12].includes(compassType)) { } else if ([11, 12].includes(compassType)) {
direction === 'north' direction === 'north'
? (text = '南南東') ? (text = '南南東')
@ -484,37 +486,37 @@ export const usePolygon = () => {
} }
// 東,西,南,北 // 東,西,南,北
if ([360].includes(surfaceCompass)) { if ([0].includes(surfaceCompass)) {
text = '南' text = '南'
} else if ([345, 330].includes(surfaceCompass)) { } else if ([15, 30].includes(surfaceCompass)) {
text = '南南東' text = '南南東'
} else if ([315].includes(surfaceCompass)) { } else if ([45].includes(surfaceCompass)) {
text = '南東' text = '南東'
} else if ([300, 285].includes(surfaceCompass)) { } else if ([60, 75].includes(surfaceCompass)) {
text = '東南東' text = '東南東'
} else if ([270].includes(surfaceCompass)) { } else if ([90].includes(surfaceCompass)) {
text = '東' text = '東'
} else if ([255, 240].includes(surfaceCompass)) { } else if ([105, 120].includes(surfaceCompass)) {
text = '東北東' text = '東北東'
} else if ([225].includes(surfaceCompass)) { } else if ([135].includes(surfaceCompass)) {
text = '北東' text = '北東'
} else if ([210, 195].includes(surfaceCompass)) { } else if ([150, 165].includes(surfaceCompass)) {
text = '北北東' text = '北北東'
} else if ([180].includes(surfaceCompass)) { } else if ([180].includes(surfaceCompass)) {
text = '北' text = '北'
} else if ([165, 150].includes(surfaceCompass)) { } else if ([-165, -150].includes(surfaceCompass)) {
text = '北北西' text = '北北西'
} else if ([135].includes(surfaceCompass)) { } else if ([-135].includes(surfaceCompass)) {
text = '北西' text = '北西'
} else if ([120, 105].includes(surfaceCompass)) { } else if ([-120, -105].includes(surfaceCompass)) {
text = '西北西' text = '西北西'
} else if ([90].includes(surfaceCompass)) { } else if ([-90].includes(surfaceCompass)) {
text = '西' text = '西'
} else if ([75, 60].includes(surfaceCompass)) { } else if ([-75, -60].includes(surfaceCompass)) {
text = '西南西' text = '西南西'
} else if ([45].includes(surfaceCompass)) { } else if ([-45].includes(surfaceCompass)) {
text = '西南' text = '西南'
} else if ([30, 15].includes(surfaceCompass)) { } else if ([-30, -15].includes(surfaceCompass)) {
text = '西西南' text = '西西南'
} }