@@ -13,7 +13,7 @@ export default function Pattern(props) {
onlyNumberWithDotInputChange(e, setPitch)} />
-
{getMessage('size')}
+
{pitchText}
diff --git a/src/components/floor-plan/modal/roofShape/type/Ridge.jsx b/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
index 13dab6f3..538cda3d 100644
--- a/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Ridge.jsx
@@ -4,7 +4,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu
export default function Ridge(props) {
const { getMessage } = useMessage()
- const { pitch, setPitch, eavesOffset, setEavesOffset } = props
+ const { pitch, setPitch, eavesOffset, setEavesOffset, pitchText } = props
return (
@@ -15,7 +15,7 @@ export default function Ridge(props) {
onlyNumberWithDotInputChange(e, setPitch)} />
-
{getMessage('size')}
+
{pitchText}
diff --git a/src/components/floor-plan/modal/roofShape/type/Side.jsx b/src/components/floor-plan/modal/roofShape/type/Side.jsx
index b2f032ba..487ccd43 100644
--- a/src/components/floor-plan/modal/roofShape/type/Side.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/Side.jsx
@@ -32,13 +32,14 @@ export default function Side(props) {
buttonMenu,
handleConfirm,
handleRollBack,
+ pitchText,
} = props
- const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset }
+ const eavesProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
const gableProps = { gableOffset, setGableOffset }
const wallProps = { sleeveOffset, setSleeveOffset, hasSleeve, setHasSleeve }
- const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }
- const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }
+ const hipAndGableProps = { pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }
+ const jerkinheadProps = { gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch, pitchText }
const shedProps = { shedWidth, setShedWidth }
const { getMessage } = useMessage()
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx b/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
index 8d061a7b..cd39a439 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
@@ -1,7 +1,7 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
-export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset }) {
+export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset, pitchText }) {
const { getMessage } = useMessage()
return (
<>
@@ -12,7 +12,7 @@ export default function Eaves({ pitch, setPitch, eavesOffset, setEavesOffset })
onlyNumberWithDotInputChange(e, setPitch)} />
- {getMessage('size')}
+ {pitchText}
diff --git a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
index ce4a57cc..a59e94b1 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
@@ -1,7 +1,7 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
-export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth }) {
+export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffset, hipAndGableWidth, setHipAndGableWidth, pitchText }) {
const { getMessage } = useMessage()
return (
<>
@@ -12,7 +12,7 @@ export default function HipAndGable({ pitch, setPitch, eavesOffset, setEavesOffs
onlyNumberWithDotInputChange(e, setPitch)} />
- {getMessage('size')}
+ {pitchText}
diff --git a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
index be846e94..e1b822e7 100644
--- a/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
+++ b/src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
@@ -1,7 +1,15 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
-export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidth, setJerkinHeadWidth, jerkinHeadPitch, setJerkinHeadPitch }) {
+export default function Jerkinhead({
+ gableOffset,
+ setGableOffset,
+ jerkinHeadWidth,
+ setJerkinHeadWidth,
+ jerkinHeadPitch,
+ setJerkinHeadPitch,
+ pitchText,
+}) {
const { getMessage } = useMessage()
return (
<>
@@ -35,7 +43,7 @@ export default function Jerkinhead({ gableOffset, setGableOffset, jerkinHeadWidt
onChange={(e) => onlyNumberWithDotInputChange(e, setJerkinHeadPitch)}
/>
- {getMessage('size')}
+ {pitchText}
)
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index c2775376..2b31bbda 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -1,8 +1,8 @@
import { useEffect } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-import { canvasState, dotLineGridSettingState } from '@/store/canvasAtom'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
+import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
+import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector } from '@/store/canvasAtom'
+import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util'
import { useFont } from '@/hooks/common/useFont'
import { useGrid } from '@/hooks/common/useGrid'
import { globalFontAtom } from '@/store/fontAtom'
@@ -11,9 +11,11 @@ import { useRoof } from '@/hooks/common/useRoof'
export function useCanvasConfigInitialize() {
const canvas = useRecoilValue(canvasState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+ const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
const setGlobalFonts = useSetRecoilState(globalFontAtom)
const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
+ const pitchText = useRecoilValue(pitchTextSelector)
const {} = useFont()
const {} = useGrid()
const {} = useRoof()
@@ -29,6 +31,24 @@ export function useCanvasConfigInitialize() {
canvas.renderAll()
}, [roofDisplay])
+ useEffect(() => {
+ if (!canvas) return
+ const texts = canvas.getObjects().filter((obj) => obj.name === 'pitchText' || obj.name === 'flowText')
+ if (basicSetting.roofAngleSet === 'slope') {
+ texts.forEach((obj) => {
+ obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` })
+ })
+ }
+
+ if (basicSetting.roofAngleSet === 'flat') {
+ texts.forEach((obj) => {
+ obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` })
+ })
+ }
+
+ canvas.renderAll()
+ }, [basicSetting])
+
const canvasLoadInit = () => {
roofInit() //화면표시 초기화
}
diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index e062a77a..92c9b324 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
@@ -28,6 +28,8 @@ export function useEavesGableEdit(id) {
const { swalFire } = useSwal()
const { drawRoofPolygon } = useMode()
+ const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+ const pitchText = useRecoilValue(pitchTextSelector)
const pitchRef = useRef(null)
const offsetRef = useRef(null)
@@ -217,5 +219,5 @@ export function useEavesGableEdit(id) {
canvas?.renderAll()
}
- return { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef }
+ return { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }
}
diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js
index 0f51c900..e8d8dbd9 100644
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@@ -1,4 +1,4 @@
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
@@ -19,6 +19,8 @@ export function useRoofShapePassivitySetting(id) {
SHED: 'shed',
}
const canvas = useRecoilValue(canvasState)
+ const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+ const pitchText = useRecoilValue(pitchTextSelector)
const { getMessage } = useMessage()
const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
const { swalFire } = useSwal()
@@ -34,6 +36,7 @@ export function useRoofShapePassivitySetting(id) {
const isFix = useRef(false)
const initLines = useRef([])
const [isLoading, setIsLoading] = useState(false)
+
const { closePopup } = usePopup()
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
@@ -216,5 +219,5 @@ export function useRoofShapePassivitySetting(id) {
canvas.renderAll()
}
- return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
+ return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback, pitchText }
}
diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js
index 13dfef8b..4899888e 100644
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { LINE_TYPE } from '@/common/common'
import { usePolygon } from '@/hooks/usePolygon'
import { useMode } from '@/hooks/useMode'
@@ -17,13 +17,16 @@ export function useRoofShapeSetting(id) {
const { swalFire } = useSwal()
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
+ const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+ const pitchText = useRecoilValue(pitchTextSelector)
const { addPolygonByLines } = usePolygon()
- const [pitch, setPitch] = useState(4)
+
+ const [pitch, setPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8) // 경사
const [eavesOffset, setEavesOffset] = useState(500) // 처마출폭
const [gableOffset, setGableOffset] = useState(300) // 케라바출폭
const [sleeveOffset, setSleeveOffset] = useState(300) // 소매출폭
const [jerkinHeadWidth, setJerkinHeadWidth] = useState(800) // 반절처 폭
- const [jerkinHeadPitch, setJerkinHeadPitch] = useState(4.5) // 반절처 경사
+ const [jerkinHeadPitch, setJerkinHeadPitch] = useState(currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20) // 반절처 경사
const [hipAndGableWidth, setHipAndGableWidth] = useState(800) // 팔작지붕 폭
const [shedWidth, setShedWidth] = useState(300) // 한쪽흐름 폭
const [hasSleeve, setHasSleeve] = useState('0')
@@ -68,8 +71,8 @@ export function useRoofShapeSetting(id) {
strokeWidth,
})
- addPitchText(line)
- line.setViewLengthText(false)
+ /*addPitchText(line)
+ line.setViewLengthText(false)*/
}
})
canvas.renderAll()
@@ -114,12 +117,10 @@ export function useRoofShapeSetting(id) {
canvas?.renderAll()
}
- setPitch(4)
setEavesOffset(500)
setGableOffset(300)
setSleeveOffset(300)
setJerkinHeadWidth(800)
- setJerkinHeadPitch(4.5)
setHipAndGableWidth(800)
setShedWidth(300)
}, [shapeNum])
@@ -629,5 +630,6 @@ export function useRoofShapeSetting(id) {
setButtonAct,
handleConfirm,
handleRollBack,
+ pitchText,
}
}
diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js
index 210c1ac6..5cffa26f 100644
--- a/src/hooks/useLine.js
+++ b/src/hooks/useLine.js
@@ -97,9 +97,11 @@ export const useLine = () => {
left,
top,
fontSize: 20,
+ originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`,
fill: 'black',
name: 'pitchText',
parentId: line.id,
+ pitch: attributes.pitch,
},
)
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 71ec1549..03b864db 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -406,9 +406,11 @@ export const usePolygon = () => {
fill: flowFontOptions.fontColor.value,
fontFamily: flowFontOptions.fontFamily.value,
fontWeight: flowFontOptions.fontWeight.value,
+ pitch: arrow.pitch,
originX: 'center',
originY: 'center',
name: 'flowText',
+ originText: `${txt}${index + 1}`,
selectable: false,
left: arrow.stickeyPoint.x,
top: arrow.stickeyPoint.y,
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 0f2428ee..2eade854 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -1,6 +1,8 @@
import { atom, selector } from 'recoil'
import { MENU } from '@/common/common'
import { outerLineFixState, outerLinePointsState } from '@/store/outerLineAtom'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
+import { basicSettingState } from '@/store/settingAtom'
export const canvasState = atom({
key: 'canvasState',
@@ -305,3 +307,49 @@ export const globalPitchState = atom({
key: 'globalPitch',
default: 4,
})
+
+export const pitchSelector = selector({
+ key: 'pitchSelector',
+ get: ({ get }) => {
+ const globalPitch = get(globalPitchState)
+ const basicSettingStateValue = get(basicSettingState)
+ const roofAngleSet = basicSettingStateValue.roofAngleSet
+ if (roofAngleSet === 'slope') {
+ return globalPitch
+ } else {
+ return getDegreeByChon(globalPitch)
+ }
+ },
+ set: ({ get, set }, newValue) => {
+ const basicSettingStateValue = get(basicSettingState)
+ const roofAngleSet = basicSettingStateValue.roofAngleSet
+ console.log(newValue)
+ if (roofAngleSet === 'slope') {
+ set(globalPitchState, newValue)
+ } else {
+ set(globalPitchState, getChonByDegree(newValue))
+ }
+ },
+})
+
+export const ANGLE_TYPE = {
+ SLOPE: 'slope',
+ FLAT: 'flat',
+}
+
+export const currentAngleTypeSelector = selector({
+ key: 'currentAngleTypeSelector',
+ get: ({ get }) => {
+ const basicSettingStateValue = get(basicSettingState)
+ return basicSettingStateValue.roofAngleSet
+ },
+})
+
+export const pitchTextSelector = selector({
+ key: 'pitchTextSelector',
+ get: ({ get }) => {
+ const basicSettingStateValue = get(basicSettingState)
+ const roofAngleSet = basicSettingStateValue.roofAngleSet
+ return roofAngleSet === 'slope' ? '寸' : '度'
+ },
+})
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index c6e94029..2432d884 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -157,3 +157,23 @@ export const roofDisplaySelector = selector({
},
dangerouslyAllowMutability: true,
})
+
+export const basicSettingState = atom({
+ key: 'basicSettingState',
+ default: {
+ roofSizeSet: 1,
+ roofAngleSet: 'slope',
+ roofs: [
+ {
+ roofApply: true,
+ roofSeq: 1,
+ roofType: 1,
+ roofWidth: 200,
+ roofHeight: 200,
+ roofHajebichi: 200,
+ roofGap: 0,
+ roofLayout: 'parallel',
+ },
+ ],
+ },
+})
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 8ed918ca..9f8b9469 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -262,6 +262,15 @@ export const getDegreeByChon = (chon) => {
return Number((radians * (180 / Math.PI)).toFixed(2))
}
+/**
+ *
+ */
+export const getChonByDegree = (degree) => {
+ // tan(theta) = height / base
+ const radians = (degree * Math.PI) / 180
+ return Number(Number(Math.tan(radians) * 10).toFixed(1))
+}
+
/**
* 두 점 사이의 방향을 반환합니다.
* @param a {fabric.Object}