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

git clear cache

Browse Source
This commit is contained in:
Jaeyoung Lee 2024-11-05 14:45:08 +09:00
parent da26628f69
commit 3a94703a8f
11 changed files with 525 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,9 @@ export const QLine = fabric.util.createClass(fabric.Line, {
area: 0,
children: [],
initialize: function (points, options, length = 0) {
// 소수점 전부 제거
points = points.map((point) => Number(point.toFixed(1)))
this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
if (options.id) {
this.id = options.id
@ -20,8 +23,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
this.id = uuidv4()
}
this.line = this
// 소수점 전부 제거
points = points.map((point) => Math.round(point))
this.idx = options.idx ?? 0
this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })

6
src/hooks/option/useCanvasSetting.js
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
@ -9,8 +9,6 @@ import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { POLYGON_TYPE } from '@/common/common'
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
@ -244,7 +242,7 @@ export function useCanvasSetting() {
optionName = ['1']
break
case 'outlineDisplay': //외벽선 표시
optionName = ['outerLine', 'wallLine']
optionName = ['outerLine', POLYGON_TYPE.WALL]
break
case 'gridDisplay': //그리드 표시
optionName = ['lindGrid', 'dotGrid']

3
src/hooks/option/useFirstOption.js
View File

@ -2,6 +2,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useEffect } from 'react'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
export function useFirstOption() {
const canvas = useRecoilValue(canvasState)
@ -30,7 +31,7 @@ export function useFirstOption() {
optionName = ['1']
break
case 'outlineDisplay': //외벽선 표시
optionName = ['outerLine', 'wallLine']
optionName = ['outerLine', POLYGON_TYPE.WALL]
break
case 'gridDisplay': //그리드 표시
optionName = ['lineGrid', 'dotGrid', 'adsorptionPoint', 'tempGrid']

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

@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'
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'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { useLine } from '@/hooks/useLine'
import { useMode } from '@/hooks/useMode'
import { outerLineFixState } from '@/store/outerLineAtom'
@ -54,7 +54,7 @@ export function useEavesGableEdit(id) {
}, [])
useEffect(() => {
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
wallLines.forEach((wallLine) => {
convertPolygonToLines(wallLine)
})
@ -169,7 +169,7 @@ export function useEavesGableEdit(id) {
canvas.remove(roof)
})
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
removeTargets.forEach((obj) => {
canvas.remove(obj)

5
src/hooks/roofcover/useMovementSetting.js
View File

@ -4,6 +4,7 @@ import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useRef, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE } from '@/common/common'
//동선이동 형 올림 내림
export function useMovementSetting(id) {
@ -41,7 +42,7 @@ export function useMovementSetting(id) {
}, [type])
useEffect(() => {
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
wallLines.forEach((line) => {
line.set({ visible: false })
})
@ -55,7 +56,7 @@ export function useMovementSetting(id) {
addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
return () => {
initEvent()
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
wallLines.forEach((line) => {
line.set({ visible: true })
})

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

@ -1,6 +1,6 @@
import { useEffect, useRef } from 'react'
import { LINE_TYPE } from '@/common/common'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { useRecoilValue, useResetRecoilState } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
@ -135,7 +135,7 @@ export function usePropertiesSetting(id) {
hideLine(line)
})
const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
wall.lines = [...lines]

3
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -7,6 +7,7 @@ import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { roofDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'
import { POLYGON_TYPE } from '@/common/common'
// 지붕면 할당
export function useRoofAllocationSetting(id) {
@ -105,7 +106,7 @@ export function useRoofAllocationSetting(id) {
// 선택한 지붕재로 할당
const handleSave = () => {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
roofBases.forEach((roofBase) => {
try {
splitPolygonWithLines(roofBase)

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

@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { outerLineFixState } from '@/store/outerLineAtom'
@ -60,7 +60,7 @@ export function useRoofShapePassivitySetting(id) {
useEffect(() => {
if (!isLoading) return
addCanvasMouseEventListener('mouse:down', mouseDown)
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
canvas?.remove(...wallLines)
@ -199,10 +199,10 @@ export function useRoofShapePassivitySetting(id) {
let wall
if (isFix.current) {
wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
} else {
// 그냥 닫을 경우 처리
wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
wall = addPolygonByLines([...initLines.current], { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
lines.forEach((line, idx) => {
line.attributes = initLines.current[idx].attributes
})

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

@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { LINE_TYPE } from '@/common/common'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { usePolygon } from '@/hooks/usePolygon'
import { useMode } from '@/hooks/useMode'
import { useLine } from '@/hooks/useLine'
@ -129,7 +129,7 @@ export function useRoofShapeSetting(id) {
useEffect(() => {
if (shapeNum === 4) {
canvas?.remove(canvas.getObjects().find((obj) => obj.name === 'wallLine'))
canvas?.remove(canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL))
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
outerLines.forEach((line) => {
showLine(line)
@ -376,7 +376,7 @@ export function useRoofShapeSetting(id) {
// 기존 wallLine, roofBase 제거
canvas
.getObjects()
.filter((obj) => obj.name === 'wallLine')
.filter((obj) => obj.name === POLYGON_TYPE.WALL)
.forEach((line) => {
canvas.remove(line)
})
@ -389,7 +389,7 @@ export function useRoofShapeSetting(id) {
canvas.remove(obj)
})
const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL })
polygon.lines = [...outerLines]
addPitchTextsByOuterLines()

72
src/util/qpolygon-utils.js
View File

@ -4,6 +4,7 @@ import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDegr
import { QPolygon } from '@/components/fabric/QPolygon'
import * as turf from '@turf/turf'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
const TWO_PI = Math.PI * 2
@ -1259,9 +1260,9 @@ const drawRidge = (roof, canvas) => {
let xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)), //x가 같은 내부선
yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)) //y가 같은 내부선
let ridgeBaseLength = currentRoof.length / 2, // 지붕의 기반 길이
let ridgeBaseLength = Math.round((currentRoof.length / 2) * 10) / 10, // 지붕의 기반 길이
ridgeMaxLength = Math.min(prevRoof.length, nextRoof.length), // 지붕의 최대 길이. 이전, 다음 벽 중 짧은 길이
ridgeAcrossLength = Math.max(prevRoof.length, nextRoof.length) - currentRoof.length // 맞은편 벽까지의 길이 - 지붕의 기반 길이
ridgeAcrossLength = Math.round((ridgeMaxLength - currentRoof.length) * 10) / 10 // 맞은편 벽까지의 길이 - 지붕의 기반 길이
let acrossRoof = anotherRoof
.filter((roof) => {
@ -1339,12 +1340,12 @@ const drawRidge = (roof, canvas) => {
if (acrossRoof !== undefined) {
if (currentRoof.x1 === currentRoof.x2) {
if (ridgeAcrossLength < Math.abs(currentRoof.x1 - acrossRoof.x1)) {
ridgeAcrossLength = Math.abs(currentRoof.x1 - acrossRoof.x1) - currentRoof.length
ridgeAcrossLength = Math.round((Math.round(Math.abs(currentRoof.x1 - acrossRoof.x1) * 10) / 10 - currentRoof.length) * 10) / 10
}
}
if (currentRoof.y1 === currentRoof.y2) {
if (ridgeAcrossLength < Math.abs(currentRoof.y1 - acrossRoof.y1)) {
ridgeAcrossLength = Math.abs(currentRoof.y1 - acrossRoof.y1) - currentRoof.length
ridgeAcrossLength = Math.round((Math.round(Math.abs(currentRoof.y1 - acrossRoof.y1) * 10) / 10 - currentRoof.length) * 10) / 10
}
}
}
@ -1404,7 +1405,7 @@ const drawRidge = (roof, canvas) => {
Math.abs(currentRoof.y1 - yEqualInnerLines[0].y1) <= Math.abs(currentRoof.y1 - nextRoof.y1) &&
Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2) >= Math.abs(currentRoof.x1 - nextRoof.x2)
) {
ridgeMaxLength = Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2)
ridgeMaxLength = Math.round(Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2) * 10) / 10
}
ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
startXPoint = currentRoof.x1 + (nextRoof.direction === 'right' ? 1 : -1) * Math.abs(currentRoof.y1 - startYPoint)
@ -1465,7 +1466,7 @@ const drawRidge = (roof, canvas) => {
Math.abs(currentRoof.x1 - xEqualInnerLines[0].x1) <= Math.abs(currentRoof.x1 - nextRoof.x1) &&
Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2) >= Math.abs(currentRoof.y1 - nextRoof.y2)
) {
ridgeMaxLength = Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2)
ridgeMaxLength = Math.round(Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2) * 10) / 10
}
ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
startYPoint = currentRoof.y1 + (nextRoof.direction === 'bottom' ? 1 : -1) * Math.abs(currentRoof.x1 - startXPoint)
@ -1476,6 +1477,10 @@ const drawRidge = (roof, canvas) => {
// 마루 그리기
if (startXPoint !== undefined && startYPoint !== undefined && endXPoint !== undefined && endYPoint !== undefined) {
startXPoint = Math.round(startXPoint * 10) / 10
startYPoint = Math.round(startYPoint * 10) / 10
endXPoint = Math.round(endXPoint * 10) / 10
endYPoint = Math.round(endYPoint * 10) / 10
const ridge = new QLine(
[Math.min(startXPoint, endXPoint), Math.min(startYPoint, endYPoint), Math.max(startXPoint, endXPoint), Math.max(startYPoint, endYPoint)],
{
@ -1659,15 +1664,15 @@ const drawHips = (roof, canvas) => {
let ridgePoints = []
ridgeLines.forEach((ridge) => {
const deltaX1 = ridge.x1 - currentRoof.x1
const deltaY1 = ridge.y1 - currentRoof.y1
const deltaX2 = ridge.x2 - currentRoof.x1
const deltaY2 = ridge.y2 - currentRoof.y1
const deltaX1 = Math.round((ridge.x1 - currentRoof.x1) * 10) / 10
const deltaY1 = Math.round((ridge.y1 - currentRoof.y1) * 10) / 10
const deltaX2 = Math.round((ridge.x2 - currentRoof.x1) * 10) / 10
const deltaY2 = Math.round((ridge.y2 - currentRoof.y1) * 10) / 10
if (Math.abs(deltaY1 / deltaX1) === 1) {
if (Math.round(Math.abs(deltaY1 / deltaX1) * 10) / 10 === 1) {
ridgePoints.push({ x: ridge.x1, y: ridge.y1 })
}
if (Math.abs(deltaY2 / deltaX2) === 1) {
if (Math.round(Math.abs(deltaY2 / deltaX2) * 10) / 10 === 1) {
ridgePoints.push({ x: ridge.x2, y: ridge.y2 })
}
})
@ -2207,8 +2212,15 @@ const changeEavesRoof = (currentRoof, canvas) => {
object.x1 !== undefined &&
object.x2 !== undefined,
)
innerLines
.filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
.filter(
(line) =>
line.name !== LINE_TYPE.SUBLINE.RIDGE &&
line.name !== LINE_TYPE.SUBLINE.HIP &&
line.name !== LINE_TYPE.SUBLINE.VALLEY &&
line.name !== OUTER_LINE_TYPE.OUTER_LINE,
)
.forEach((line) => {
roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
canvas?.remove(line)
@ -2375,7 +2387,13 @@ const changeGableRoof = (currentRoof, canvas) => {
})
innerLines
.filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
.filter(
(line) =>
line.name !== LINE_TYPE.SUBLINE.RIDGE &&
line.name !== LINE_TYPE.SUBLINE.HIP &&
line.name !== LINE_TYPE.SUBLINE.VALLEY &&
line.name !== OUTER_LINE_TYPE.OUTER_LINE,
)
.forEach((line) => {
roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
canvas?.remove(line)
@ -2544,7 +2562,13 @@ const changeHipAndGableRoof = (currentRoof, canvas) => {
)
innerLines
.filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
.filter(
(line) =>
line.name !== LINE_TYPE.SUBLINE.RIDGE &&
line.name !== LINE_TYPE.SUBLINE.HIP &&
line.name !== LINE_TYPE.SUBLINE.VALLEY &&
line.name !== OUTER_LINE_TYPE.OUTER_LINE,
)
.forEach((line) => {
roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
canvas?.remove(line)
@ -2743,7 +2767,13 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
)
innerLines
.filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
.filter(
(line) =>
line.name !== LINE_TYPE.SUBLINE.RIDGE &&
line.name !== LINE_TYPE.SUBLINE.HIP &&
line.name !== LINE_TYPE.SUBLINE.VALLEY &&
line.name !== OUTER_LINE_TYPE.OUTER_LINE,
)
.forEach((line) => {
roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
canvas?.remove(line)
@ -2992,7 +3022,13 @@ const changeWallRoof = (currentRoof, canvas) => {
)
innerLines
.filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
.filter(
(line) =>
line.name !== LINE_TYPE.SUBLINE.RIDGE &&
line.name !== LINE_TYPE.SUBLINE.HIP &&
line.name !== LINE_TYPE.SUBLINE.VALLEY &&
line.name !== OUTER_LINE_TYPE.OUTER_LINE,
)
.forEach((line) => {
roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
canvas?.remove(line)
@ -3163,7 +3199,7 @@ export const changeCurrentRoof = (currentRoof, canvas) => {
canvas?.remove(originRoof)
innerLines.forEach((line) => canvas?.remove(line))
innerLines.filter((line) => line.name !== OUTER_LINE_TYPE.OUTER_LINE).forEach((line) => canvas?.remove(line))
const polygon = createPolygon(wall.points)
const originPolygon = new QPolygon(wall.points, { fontSize: 0 })

595
yarn.lock
View File

File diff suppressed because it is too large Load Diff