[1142] : 【HANASYS DESIGN】方位選択時の+,-の表記が異なる
모듈/가대 선택 방위의 +, - 표기를 변경
This commit is contained in:
parent
69fa493428
commit
d0b75f27fb
@ -275,31 +275,31 @@ export const Orientation = forwardRef((props, ref) => {
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
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={() => {
|
||||
if (index === 0) {
|
||||
setInputCompasDeg(180)
|
||||
return
|
||||
}
|
||||
setInputCompasDeg(-1 * (-15 * index + 180))
|
||||
setInputCompasDeg(-15 * index + 180)
|
||||
}}
|
||||
>
|
||||
{index === 0 && <i>180°</i>}
|
||||
{index === 6 && <i>-90°</i>}
|
||||
{index === 6 && <i>90°</i>}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
|
||||
onClick={() => setInputCompasDeg(15 * index)}
|
||||
className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
|
||||
onClick={() => setInputCompasDeg(15 * index * -1)}
|
||||
>
|
||||
{index === 0 && <i>0°</i>}
|
||||
{index === 6 && <i>90°</i>}
|
||||
{index === 6 && <i>-90°</i>}
|
||||
</div>
|
||||
))}
|
||||
<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>
|
||||
|
||||
@ -32,15 +32,40 @@ export default function FlowDirectionSetting(props) {
|
||||
const [flowDirection, setFlowDirection] = useState(target.direction)
|
||||
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 = [
|
||||
{ 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 },
|
||||
{ name: `${getMessage('commons.east')}`, value: 270 },
|
||||
{ name: `${getMessage('commons.west')}`, value: 90 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
|
||||
{ name: `${getMessage('commons.none')}`, value: '' },
|
||||
{ name: `${getMessage('commons.south')}`, value: 0 },
|
||||
{ name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
|
||||
{ name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
|
||||
{ name: `${getMessage('commons.east')}`, value: 90 },
|
||||
{ name: `${getMessage('commons.west')}`, value: -90 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
|
||||
{ name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
|
||||
{ name: `${getMessage('commons.north')}`, value: 180 },
|
||||
]
|
||||
|
||||
@ -109,6 +134,11 @@ export default function FlowDirectionSetting(props) {
|
||||
value={selectedOrientation}
|
||||
options={orientations}
|
||||
onChange={(e) => {
|
||||
if (e.value === '') {
|
||||
setCompasDeg(null)
|
||||
setSelectedOrientation(e)
|
||||
return
|
||||
}
|
||||
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
||||
setSelectedOrientation(e)
|
||||
setCompasDeg(e.value)
|
||||
@ -137,31 +167,32 @@ export default function FlowDirectionSetting(props) {
|
||||
<div className="draw-flow-wrap">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
if (index === 0) {
|
||||
setCompasDeg(180)
|
||||
return
|
||||
}
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (12 + index))
|
||||
setCompasDeg(-15 * index + 180)
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (index + 1))
|
||||
setCompasDeg(15 * index * -1)
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div
|
||||
className="compas-arr"
|
||||
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
|
||||
></div>
|
||||
<div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -345,7 +345,7 @@ export const usePolygon = () => {
|
||||
|
||||
//arrow의 compass 값으로 방향 글자 설정 필요
|
||||
const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
|
||||
const { direction, surfaceCompass, moduleCompass, arrow } = polygon
|
||||
let { direction, surfaceCompass, moduleCompass, arrow } = polygon
|
||||
if (moduleCompass === null || moduleCompass === undefined) {
|
||||
const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
|
||||
fontFamily: flowFontOptions.fontFamily.value,
|
||||
@ -371,7 +371,9 @@ export const usePolygon = () => {
|
||||
|
||||
let text = ''
|
||||
|
||||
let compassType = (375 - getDegreeInOrientation(moduleCompass)) / 15
|
||||
let compassType = (375 + getDegreeInOrientation(moduleCompass)) / 15
|
||||
|
||||
moduleCompass = -1 * moduleCompass
|
||||
|
||||
if (moduleCompass === 0 || (moduleCompass < 0 && moduleCompass >= -6)) {
|
||||
compassType = 1
|
||||
@ -397,7 +399,7 @@ export const usePolygon = () => {
|
||||
compassType = 11
|
||||
} else if (moduleCompass < 0 && moduleCompass >= -171) {
|
||||
compassType = 12
|
||||
} else if (moduleCompass === 180) {
|
||||
} else if (Math.abs(moduleCompass) === 180) {
|
||||
compassType = 13
|
||||
}
|
||||
|
||||
@ -432,7 +434,7 @@ export const usePolygon = () => {
|
||||
? (text = '北北東')
|
||||
: (text = '南南西')
|
||||
} 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)) {
|
||||
direction === 'north'
|
||||
? (text = '南南東')
|
||||
@ -484,37 +486,37 @@ export const usePolygon = () => {
|
||||
}
|
||||
|
||||
// 東,西,南,北
|
||||
if ([360].includes(surfaceCompass)) {
|
||||
if ([0].includes(surfaceCompass)) {
|
||||
text = '南'
|
||||
} else if ([345, 330].includes(surfaceCompass)) {
|
||||
} else if ([15, 30].includes(surfaceCompass)) {
|
||||
text = '南南東'
|
||||
} else if ([315].includes(surfaceCompass)) {
|
||||
} else if ([45].includes(surfaceCompass)) {
|
||||
text = '南東'
|
||||
} else if ([300, 285].includes(surfaceCompass)) {
|
||||
} else if ([60, 75].includes(surfaceCompass)) {
|
||||
text = '東南東'
|
||||
} else if ([270].includes(surfaceCompass)) {
|
||||
} else if ([90].includes(surfaceCompass)) {
|
||||
text = '東'
|
||||
} else if ([255, 240].includes(surfaceCompass)) {
|
||||
} else if ([105, 120].includes(surfaceCompass)) {
|
||||
text = '東北東'
|
||||
} else if ([225].includes(surfaceCompass)) {
|
||||
} else if ([135].includes(surfaceCompass)) {
|
||||
text = '北東'
|
||||
} else if ([210, 195].includes(surfaceCompass)) {
|
||||
} else if ([150, 165].includes(surfaceCompass)) {
|
||||
text = '北北東'
|
||||
} else if ([180].includes(surfaceCompass)) {
|
||||
text = '北'
|
||||
} else if ([165, 150].includes(surfaceCompass)) {
|
||||
} else if ([-165, -150].includes(surfaceCompass)) {
|
||||
text = '北北西'
|
||||
} else if ([135].includes(surfaceCompass)) {
|
||||
} else if ([-135].includes(surfaceCompass)) {
|
||||
text = '北西'
|
||||
} else if ([120, 105].includes(surfaceCompass)) {
|
||||
} else if ([-120, -105].includes(surfaceCompass)) {
|
||||
text = '西北西'
|
||||
} else if ([90].includes(surfaceCompass)) {
|
||||
} else if ([-90].includes(surfaceCompass)) {
|
||||
text = '西'
|
||||
} else if ([75, 60].includes(surfaceCompass)) {
|
||||
} else if ([-75, -60].includes(surfaceCompass)) {
|
||||
text = '西南西'
|
||||
} else if ([45].includes(surfaceCompass)) {
|
||||
} else if ([-45].includes(surfaceCompass)) {
|
||||
text = '西南'
|
||||
} else if ([30, 15].includes(surfaceCompass)) {
|
||||
} else if ([-30, -15].includes(surfaceCompass)) {
|
||||
text = '西西南'
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user