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

삼각도머

Browse Source
This commit is contained in:
yjnoh 2025-03-05 17:14:03 +09:00
parent 652516146b
commit 8fb523cf3d
3 changed files with 242 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/hooks/object/useObjectBatch.js
View File

@ -5,7 +5,14 @@ import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { BATCH_TYPE, INPUT_TYPE, POLYGON_TYPE } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon, getDegreeByChon } from '@/util/canvas-util'
import {
pointsToTurfPolygon,
polygonToTurfPolygon,
rectToPolygon,
triangleToPolygon,
getDegreeByChon,
toFixedWithoutRounding,
} from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import * as turf from '@turf/turf'
import { usePolygon } from '@/hooks/usePolygon'
@ -13,6 +20,7 @@ import { QPolygon } from '@/components/fabric/QPolygon'
import { v4 as uuidv4 } from 'uuid'
import { fontSelector } from '@/store/fontAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { roofDisplaySelector } from '@/store/settingAtom'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
@ -23,6 +31,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const { drawDirectionArrow } = usePolygon()
const { setSurfaceShapePattern } = useRoofFn()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
const roofDisplay = useRecoilValue(roofDisplaySelector)
const { addPolygon } = usePolygon()
useEffect(() => {
if (canvas) {
@ -293,6 +304,15 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
if (buttonAct === 3) {
let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용
let bottomLength = 0,
bottomOffsetLength = 0,
planeHypotenuse = 0,
planeOffsetHypotenuse = 0,
actualBottomLength = 0,
actualBottomOffsetLength = 0,
actualHypotenuse = 0,
actualOffsetHypotenuse = 0
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
if (!isDown) return
@ -306,14 +326,31 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
})
console.log('selectedSurface', selectedSurface)
if (selectedSurface) {
const roofAngle = selectedSurface.roofMaterial.angle
theta = Math.atan(Math.tan((roofAngle * Math.PI) / 180) / Math.tan((dormerAngle * Math.PI) / 180))
const bottomLength = Number((Math.tan(theta) * height).toFixed())
const bottomOffsetLength = Number((Math.tan(theta) * (height + offsetRef)).toFixed())
//센터 삼각형용
bottomLength = Number((Math.tan(theta) * height).toFixed())
//좌우 삼각형용
bottomOffsetLength = Number((Math.tan(theta) * (height + offsetRef)).toFixed())
planeHypotenuse = Math.sqrt(Math.pow(height, 2) + Math.pow(bottomLength, 2))
actualBottomLength = Math.sqrt(
Math.pow(Math.tan(theta) * height, 2) + Math.pow(Math.tan(theta) * height * Math.tan((dormerAngle * Math.PI) / 180), 2),
)
actualHypotenuse = Math.sqrt(Math.pow(height, 2) + Math.pow(actualBottomLength, 2))
actualBottomOffsetLength = Math.sqrt(
Math.pow(Math.tan(theta) * (height + offsetRef), 2) +
Math.pow(Math.tan(theta) * (height + offsetRef) * Math.tan((dormerAngle * Math.PI) / 180), 2),
)
planeOffsetHypotenuse = Math.sqrt(Math.pow(height + offsetRef, 2) + Math.pow(bottomOffsetLength, 2))
actualOffsetHypotenuse = Math.sqrt(Math.pow(height + offsetRef, 2) + Math.pow(actualBottomOffsetLength, 2))
let angle = 0
if (directionRef === 'left') {
@ -373,6 +410,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
canvas?.add(dormerOffset)
}
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
@ -418,7 +456,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
strokeDashArray: [0],
}) //오프셋이 있을땐 같이 도머로 만든다
const leftTriangle = new QPolygon(leftPoints, {
const leftTriangle = addPolygon(
leftPoints,
{
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@ -444,9 +484,37 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
offsetWidthRef: offsetWidthRef,
directionRef: directionRef,
},
lines: [
{
attributes: {
planeSize: toFixedWithoutRounding(planeOffsetHypotenuse, 1) * 10,
actualSize: toFixedWithoutRounding(actualOffsetHypotenuse, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(bottomOffsetLength, 1) * 10,
actualSize: toFixedWithoutRounding(actualBottomOffsetLength, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(height + offsetRef, 1) * 10,
actualSize: toFixedWithoutRounding(height + offsetRef, 1) * 10,
},
},
],
},
false,
)
leftTriangle.texts.forEach((text) => {
text.bringToFront()
})
const rightTriangle = new QPolygon(rightPoints, {
const rightTriangle = addPolygon(
rightPoints,
{
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@ -472,14 +540,36 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
offsetWidthRef: offsetWidthRef,
directionRef: directionRef,
},
})
lines: [
{
attributes: {
planeSize: toFixedWithoutRounding(height + offsetRef, 1) * 10,
actualSize: toFixedWithoutRounding(height + offsetRef, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(bottomOffsetLength, 1) * 10,
actualSize: toFixedWithoutRounding(actualBottomOffsetLength, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(planeOffsetHypotenuse, 1) * 10,
actualSize: toFixedWithoutRounding(actualOffsetHypotenuse, 1) * 10,
},
},
],
},
false,
)
// canvas?.add(leftTriangle)
// canvas?.add(rightTriangle)
//패턴
setSurfaceShapePattern(leftTriangle)
setSurfaceShapePattern(rightTriangle)
setSurfaceShapePattern(leftTriangle, roofDisplay.column, false, selectedSurface.roofMaterial, true)
setSurfaceShapePattern(rightTriangle, roofDisplay.column, false, selectedSurface.roofMaterial, true)
//방향
// drawDirectionArrow(leftTriangle)
@ -492,7 +582,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
if (offsetRef > 0) {
canvas?.remove(dormer)
offsetPolygon = new QPolygon(triangleToPolygon(dormer), {
offsetPolygon = addPolygon(
triangleToPolygon(dormer),
{
selectable: true,
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
@ -518,7 +610,29 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
offsetWidthRef: offsetWidthRef,
directionRef: directionRef,
},
})
lines: [
{
attributes: {
planeSize: toFixedWithoutRounding(planeHypotenuse, 1) * 10,
actualSize: toFixedWithoutRounding(actualHypotenuse, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(bottomLength * 2, 1) * 10,
actualSize: toFixedWithoutRounding(bottomLength * 2, 1) * 10,
},
},
{
attributes: {
planeSize: toFixedWithoutRounding(planeHypotenuse, 1) * 10,
actualSize: toFixedWithoutRounding(actualHypotenuse, 1) * 10,
},
},
],
},
false,
)
}
const groupPolygon = offsetPolygon ? [leftTriangle, rightTriangle, offsetPolygon] : [leftTriangle, rightTriangle]
@ -534,10 +648,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
canvas?.add(objectGroup)
objectGroup.getObjects().forEach((obj, index) => {
console.log(`최초 pathOffset ${index}`, obj.get('pathOffset'))
})
objectGroup._objects.forEach((obj) => {
if (obj.hasOwnProperty('texts')) {
obj.texts.forEach((text) => {
@ -548,7 +658,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
isDown = false
initEvent()
dbClickEvent()
// dbClickEvent()
if (setIsHidden) setIsHidden(false)
}
})
@ -805,7 +915,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
isDown = false
initEvent()
dbClickEvent()
// dbClickEvent()
}
})
}

4
src/hooks/surface/useSurfaceShapeBatch.js
View File

@ -26,7 +26,7 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
const { drawDirectionArrow } = usePolygon()
const { drawDirectionArrow, addPolygon } = usePolygon()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState)
@ -178,7 +178,7 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
}
//회전, flip등이 먹은 기준으로 새로생성
const batchSurface = new QPolygon(obj.getCurrentPoints(), {
const batchSurface = addPolygon(obj.getCurrentPoints(), {
fill: 'transparent',
stroke: 'red',
strokeWidth: 3,

6
src/hooks/usePolygon.js
View File

@ -17,16 +17,16 @@ export const usePolygon = () => {
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
const pitchText = useRecoilValue(pitchTextSelector)
const addPolygon = (points, options) => {
const addPolygon = (points, options, isAddCanvas = true) => {
const polygon = new QPolygon(points, {
...options,
fontSize: lengthTextFontOptions.fontSize.value,
fill: options.fill || 'transparent',
stroke: options.stroke || '#000000',
selectable: true,
// selectable: true,
})
canvas?.add(polygon)
if (isAddCanvas) canvas?.add(polygon)
addLengthText(polygon)
return polygon