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-28 10:37:53 +09:00
parent c6fe1f22b2
commit f89b249b98
26 changed files with 201 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/fabric/QLine.js
View File

@ -12,7 +12,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
idx: 0,
area: 0,
children: [],
initialize: function (points, options, canvas) {
initialize: function (points, options, length = 0) {
this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
if (options.id) {
this.id = options.id
@ -27,7 +27,11 @@ export const QLine = fabric.util.createClass(fabric.Line, {
this.idx = options.idx ?? 0
this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
this.setLength()
if (length !== 0) {
this.length = length
} else {
this.setLength()
}
this.startPoint = { x: this.x1, y: this.y1 }
this.endPoint = { x: this.x2, y: this.y2 }

7
src/components/floor-plan/modal/Slope.jsx
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { globalPitchState } from '@/store/canvasAtom'
import { globalPitchState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilState } from 'recoil'
import { useRef } from 'react'
import { usePopup } from '@/hooks/usePopup'
@ -8,7 +8,8 @@ import { usePopup } from '@/hooks/usePopup'
export default function Slope({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
const [globalPitch, setGlobalPitch] = useRecoilState(pitchSelector)
const pitchText = useRecoilState(pitchTextSelector)
const inputRef = useRef()
return (
@ -29,7 +30,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
</div>
<span className="thin">{getMessage('size.angle')}</span>
<span className="thin">{pitchText}</span>
</div>
</div>
<div className="grid-btn-wrap">

4
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -11,12 +11,13 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(id)
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef, pitchText } = useEavesGableEdit(id)
const eavesProps = {
pitchRef,
offsetRef,
widthRef,
radioTypeRef,
pitchText,
}
const gableProps = {
@ -24,6 +25,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
offsetRef,
widthRef,
radioTypeRef,
pitchText,
}
const wallMergeProps = {

9
src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
View File

@ -1,14 +1,17 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
const { getMessage } = useMessage()
const [type, setType] = useState('1')
const onChange = (e) => {
setType(e.target.value)
radioTypeRef.current = e.target.value
}
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return (
<>
<div className="outline-wrap">
@ -17,9 +20,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="number" className="input-origin block" defaultValue={4} ref={pitchRef} />
<input type="number" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
</div>
<span className="thin">寸</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>

16
src/components/floor-plan/modal/eavesGable/type/Gable.jsx
View File

@ -1,14 +1,18 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pitchText }) {
const { getMessage } = useMessage()
const [type, setType] = useState('1')
const onChange = (e) => {
setType(e.target.value)
radioTypeRef.current = e.target.value
}
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return (
<>
<div className="outline-wrap">
@ -57,9 +61,15 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef }) {
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={4.5} ref={pitchRef} readOnly={type === '1'} />
<input
type="text"
className="input-origin block"
defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4.5 : 20}
ref={pitchRef}
readOnly={type === '1'}
/>
</div>
<span className="thin">寸</span>
<span className="thin">{pitchText}</span>
</div>
</div>
<div className="eaves-keraba-td">

18
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -8,6 +8,7 @@ import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { basicSettingState } from '@/store/settingAtom'
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
@ -16,22 +17,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const { closePopup } = usePopup()
const [basicSetting, setBasicSettings] = useState({
roofSizeSet: 1,
roofAngleSet: 'slope',
roofs: [
{
roofApply: true,
roofSeq: 1,
roofType: 1,
roofWidth: 200,
roofHeight: 200,
roofHajebichi: 200,
roofGap: 0,
roofLayout: 'parallel',
},
],
})
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
const { getMessage } = useMessage()
const { get, post } = useAxios()

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

@ -7,18 +7,21 @@ import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePass
import { usePopup } from '@/hooks/usePopup'
export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting(id)
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef, pitchText } =
useRoofShapePassivitySetting(id)
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const eavesProps = {
offsetRef,
pitchRef,
pitchText,
}
const gableProps = {
offsetRef,
pitchRef,
pitchText,
}
const shedProps = {

7
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -38,11 +38,12 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
buttonMenu,
handleConfirm,
handleRollBack,
pitchText,
} = useRoofShapeSetting(id)
const { closePopup } = usePopup()
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset, pitchText }
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText }
const sideProps = {
pitch,
setPitch,
@ -67,6 +68,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
buttonMenu,
handleConfirm,
handleRollBack,
pitchText,
}
const directionProps = {
@ -78,6 +80,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
setGableOffset,
shedWidth,
setShedWidth,
pitchText,
}
return (

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

@ -1,7 +1,10 @@
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
export default function Eaves({ offsetRef, pitchRef }) {
export default function Eaves({ offsetRef, pitchRef, pitchText }) {
const { getMessage } = useMessage()
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return (
<>
<div className="outline-form mb10">
@ -9,9 +12,9 @@ export default function Eaves({ offsetRef, pitchRef }) {
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
</div>
<span className="thin">寸</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>

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

@ -1,7 +1,10 @@
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
export default function Gable({ offsetRef, pitchRef }) {
export default function Gable({ offsetRef, pitchRef, pitchText }) {
const { getMessage } = useMessage()
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return (
<>
<div className="outline-form mb10">
@ -9,9 +12,9 @@ export default function Gable({ offsetRef, pitchRef }) {
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
</div>
<span className="thin">寸</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>

4
src/components/floor-plan/modal/roofShape/type/Direction.jsx
View File

@ -1,7 +1,7 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }) {
export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth, pitchText }) {
const { getMessage } = useMessage()
return (
<div className="setting-box">
@ -12,7 +12,7 @@ export default function Direction({ pitch, setPitch, eavesOffset, setEavesOffset
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
</div>
<span className="thin">{getMessage('size')}</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '60px' }}>

4
src/components/floor-plan/modal/roofShape/type/Pattern.jsx
View File

@ -3,7 +3,7 @@ import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/inpu
export default function Pattern(props) {
const { getMessage } = useMessage()
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset } = props
const { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, pitchText } = props
return (
<div className="setting-box">
<div className="outline-form mb10">
@ -13,7 +13,7 @@ export default function Pattern(props) {
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
</div>
<span className="thin"> {getMessage('size')}</span>
<span className="thin"> {pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '60px' }}>

4
src/components/floor-plan/modal/roofShape/type/Ridge.jsx
View File

@ -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 (
<div className="setting-box">
@ -15,7 +15,7 @@ export default function Ridge(props) {
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
</div>
<span className="thin">{getMessage('size')}</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>

7
src/components/floor-plan/modal/roofShape/type/Side.jsx
View File

@ -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()

4
src/components/floor-plan/modal/roofShape/type/option/Eaves.jsx
View File

@ -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 })
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
</div>
<span className="thin">{getMessage('size')}</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>

4
src/components/floor-plan/modal/roofShape/type/option/HipAndGable.jsx
View File

@ -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
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" value={pitch} onChange={(e) => onlyNumberWithDotInputChange(e, setPitch)} />
</div>
<span className="thin">{getMessage('size')}</span>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '60px' }}>

12
src/components/floor-plan/modal/roofShape/type/option/Jerkinhead.jsx
View File

@ -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)}
/>
</div>
<span className="thin">{getMessage('size')}</span>
<span className="thin">{pitchText}</span>
</div>
</>
)

26
src/hooks/common/useCanvasConfigInitialize.js
View File

@ -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() //화면표시 초기화
}

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

@ -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 }
}

7
src/hooks/roofcover/useRoofShapePassivitySetting.js
View File

@ -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 }
}

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

@ -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,
}
}

2
src/hooks/useLine.js
View File

@ -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,
},
)

2
src/hooks/usePolygon.js
View File

@ -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,

48
src/store/canvasAtom.js
View File

@ -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' ? '寸' : '度'
},
})

20
src/store/settingAtom.js
View File

@ -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',
},
],
},
})

9
src/util/canvas-util.js
View File

@ -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}