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

pitch 세팅 default 추가

Browse Source
This commit is contained in:
hyojun.choi 2024-10-28 11:34:25 +09:00
parent f89b249b98
commit 7d14f8da5a
5 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
@ -9,6 +9,7 @@ import { useMode } from '@/hooks/useMode'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
// 처마.케라바 변경
export function useEavesGableEdit(id) {
@ -107,13 +108,13 @@ export function useEavesGableEdit(id) {
if (radioTypeRef.current === '1') {
attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
pitch: pitchRef.current.value,
pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
offset: offsetRef.current.value / 10,
}
} else {
attributes = {
type: LINE_TYPE.WALLLINE.HIPANDGABLE,
pitch: pitchRef.current.value,
pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
offset: offsetRef.current.value / 10,
width: widthRef.current.value / 10,
}
@ -128,7 +129,7 @@ export function useEavesGableEdit(id) {
} else {
attributes = {
type: LINE_TYPE.WALLLINE.JERKINHEAD,
pitch: pitchRef.current.value,
pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
offset: offsetRef.current.value / 10,
width: widthRef.current.value / 10,
}

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

@ -1,4 +1,4 @@
import { canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
@ -10,6 +10,7 @@ import { usePolygon } from '@/hooks/usePolygon'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
//지붕형상 수동 설정
export function useRoofShapePassivitySetting(id) {
@ -137,12 +138,12 @@ export function useRoofShapePassivitySetting(id) {
attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
offset,
pitch: pitchRef.current.value,
pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
}
} else if (type === TYPES.GABLE) {
attributes = {
type: LINE_TYPE.WALLLINE.GABLE,
pitch: pitchRef.current.value,
pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
offset,
}
} else if (type === TYPES.SHED) {

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

@ -9,6 +9,7 @@ import { useLine } from '@/hooks/useLine'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
// 지붕형상 설정
export function useRoofShapeSetting(id) {
@ -37,9 +38,19 @@ export function useRoofShapeSetting(id) {
const setCurrentMenu = useSetRecoilState(currentMenuState)
const outerLineFix = useRecoilValue(outerLineFixState)
const pitchRef = useRef(null)
const jerkinHeadPitchRef = useRef(null)
const history = useRef([])
const { closePopup } = usePopup()
useEffect(() => {
pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
}, [pitch])
useEffect(() => {
jerkinHeadPitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? jerkinHeadPitch : getChonByDegree(jerkinHeadPitch)
}, [jerkinHeadPitch])
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
@ -71,8 +82,8 @@ export function useRoofShapeSetting(id) {
strokeWidth,
})
/*addPitchText(line)
line.setViewLengthText(false)*/
addPitchText(line)
line.setViewLengthText(false)
}
})
canvas.renderAll()
@ -182,7 +193,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'bottom') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -198,7 +209,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'top') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -206,7 +217,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'bottom') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -227,7 +238,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'top') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -235,7 +246,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'bottom') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -243,7 +254,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'bottom') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -251,7 +262,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'top') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -271,7 +282,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'right') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -279,7 +290,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'left') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -287,7 +298,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'left') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -295,7 +306,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'right') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -316,7 +327,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'left') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -324,7 +335,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'right') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -332,7 +343,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'right') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -340,7 +351,7 @@ export function useRoofShapeSetting(id) {
if (line.direction === 'left') {
line.attributes = {
offset: shedWidth / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.SHED,
}
}
@ -437,7 +448,7 @@ export function useRoofShapeSetting(id) {
outerLines.forEach((line) => {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
// hideLine(line)
@ -459,7 +470,7 @@ export function useRoofShapeSetting(id) {
} else if (line.direction === 'top' || line.direction === 'bottom') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -482,7 +493,7 @@ export function useRoofShapeSetting(id) {
} else if (line.direction === 'left' || line.direction === 'right') {
line.attributes = {
offset: eavesOffset / 10,
pitch: pitch,
pitch: pitchRef.current,
type: LINE_TYPE.WALLLINE.EAVES,
}
}
@ -505,7 +516,7 @@ export function useRoofShapeSetting(id) {
// 처마
attributes = {
type: LINE_TYPE.WALLLINE.EAVES,
pitch: pitch,
pitch: pitchRef.current,
offset: eavesOffset / 10,
}
addPitchText(currentObject)
@ -536,7 +547,7 @@ export function useRoofShapeSetting(id) {
// 팔작지붕
attributes = {
type: LINE_TYPE.WALLLINE.HIPANDGABLE,
pitch: pitch,
pitch: pitchRef.current,
offset: eavesOffset / 10,
width: hipAndGableWidth / 10,
}
@ -551,7 +562,7 @@ export function useRoofShapeSetting(id) {
type: LINE_TYPE.WALLLINE.JERKINHEAD,
offset: gableOffset / 10,
width: jerkinHeadWidth / 10,
pitch: jerkinHeadPitch,
pitch: jerkinHeadPitchRef.current,
}
addPitchText(currentObject)
selectedLine.set({ strokeWidth: 4 })

36
src/hooks/useLine.js
View File

@ -1,11 +1,13 @@
import { useRecoilValue } from 'recoil'
import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
export const useLine = () => {
const canvas = useRecoilValue(canvasState)
const fontSize = useRecoilValue(fontSizeState)
const fontFamily = useRecoilValue(fontFamilyState)
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
const addLine = (points = [], options) => {
const line = new QLine(points, {
@ -77,6 +79,11 @@ export const useLine = () => {
let left, top
const textStr =
currentAngleType === ANGLE_TYPE.SLOPE
? `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch : ''}`
: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + getDegreeByChon(attributes.pitch) : ''}`
if (direction === 'top') {
left = (startPoint.x + endPoint.x) / 2
top = (startPoint.y + endPoint.y) / 2 - 50
@ -91,19 +98,20 @@ export const useLine = () => {
top = (startPoint.y + endPoint.y) / 2 - 30
}
const text = new fabric.Text(
`${attributes.offset ? attributes.offset * 10 : attributes.width * 10}${attributes.pitch ? '-∠' + attributes.pitch : ''}`,
{
left,
top,
fontSize: 20,
originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`,
fill: 'black',
name: 'pitchText',
parentId: line.id,
pitch: attributes.pitch,
},
)
if (!attributes.pitch) {
return
}
const text = new fabric.Text(`${textStr}`, {
left,
top,
fontSize: 20,
originText: `${attributes.offset ? attributes.offset * 10 : attributes.width * 10}`,
fill: 'black',
name: 'pitchText',
parentId: line.id,
pitch: attributes.pitch,
})
canvas.add(text)
}

10
src/hooks/usePolygon.js
View File

@ -1,7 +1,7 @@
import { canvasState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { fabric } from 'fabric'
import { getDirectionByPoint } from '@/util/canvas-util'
import { getDegreeByChon, getDirectionByPoint } from '@/util/canvas-util'
import { QPolygon } from '@/components/fabric/QPolygon'
import { isSamePoint } from '@/util/qpolygon-utils'
import { flowDisplaySelector } from '@/store/settingAtom'
@ -12,6 +12,8 @@ export const usePolygon = () => {
const isFlowDisplay = useRecoilValue(flowDisplaySelector)
const flowFontOptions = useRecoilValue(fontSelector('flowText'))
const lengthTextFontOptions = useRecoilValue(fontSelector('lengthText'))
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
const pitchText = useRecoilValue(pitchTextSelector)
const addPolygon = (points, options) => {
const polygon = new QPolygon(points, {
@ -401,7 +403,9 @@ export const usePolygon = () => {
const addTextByArrows = (arrows, txt, canvas) => {
arrows.forEach((arrow, index) => {
const text = new fabric.Text(`${txt}${index + 1} (${arrow.pitch}寸)`, {
const textStr = `${txt}${index + 1} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
const text = new fabric.Text(`${textStr}`, {
fontSize: flowFontOptions.fontSize.value,
fill: flowFontOptions.fontColor.value,
fontFamily: flowFontOptions.fontFamily.value,