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 2024-11-07 17:09:53 +09:00
parent c0bf5e8a2d
commit 8c1ded1126
5 changed files with 118 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/fabric/QPolygon.js
View File

@ -137,6 +137,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
})
})
//QPolygon 좌표 이동시 좌표 재계산
this.on('polygonMoved', () => {
//폴리곤일때만 사용
let matrix = this.calcTransformMatrix()
@ -148,8 +149,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
.map((p) => {
return fabric.util.transformPoint(p, matrix)
})
this.set('points', transformedPoints)
this.set('pathOffset', { x: this.left, y: this.top })
this.points = transformedPoints
const { left, top } = this.calcOriginCoords()
this.set('pathOffset', { x: left, y: top })
this.setCoords()
})
@ -773,4 +775,32 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
divideLine() {
// splitPolygonWithLines(this)
},
calcOriginCoords() {
const points = this.points
const minX = Math.min(...points.map((p) => p.x))
const maxX = Math.max(...points.map((p) => p.x))
const minY = Math.min(...points.map((p) => p.y))
const maxY = Math.max(...points.map((p) => p.y))
let left = 0
let top = 0
if (this.originX === 'center') {
left = (minX + maxX) / 2
} else if (this.originX === 'left') {
left = minX
} else if (this.originX === 'right') {
left = maxX
}
if (this.originY === 'center') {
top = (minY + maxY) / 2
} else if (this.originY === 'top') {
top = minY
} else if (this.originY === 'bottom') {
top = maxY
}
return { left, top }
},
})

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

@ -18,7 +18,7 @@ export default function SizeSetting(props) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { resizeObjectBatch } = useObjectBatch({})
const { reSizePolygon } = useSurfaceShapeBatch()
const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch()
const widthRef = useRef(null)
const heightRef = useRef(null)
@ -36,10 +36,11 @@ export default function SizeSetting(props) {
target.name === BATCH_TYPE.OPENING ||
target.name === BATCH_TYPE.SHADOW ||
target.name === BATCH_TYPE.TRIANGLE_DORMER ||
target.name === BATCH_TYPE.PENTAGON_DORMER ||
target.name === POLYGON_TYPE.ROOF
target.name === BATCH_TYPE.PENTAGON_DORMER
) {
resizeObjectBatch(settingTarget, target, width, height)
} else if (target.name === POLYGON_TYPE.ROOF) {
resizeSurfaceShapeBatch(settingTarget, target, width, height)
}
}

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

@ -7,6 +7,7 @@ import { useFont } from '@/hooks/common/useFont'
import { useGrid } from '@/hooks/common/useGrid'
import { globalFontAtom } from '@/store/fontAtom'
import { useRoof } from '@/hooks/common/useRoof'
import { usePolygon } from '@/hooks/usePolygon'
export function useCanvasConfigInitialize() {
const canvas = useRecoilValue(canvasState)
@ -20,6 +21,7 @@ export function useCanvasConfigInitialize() {
const {} = useFont()
const {} = useGrid()
const {} = useRoof()
const { drawDirectionArrow } = usePolygon()
useEffect(() => {
if (!canvas) return
@ -173,6 +175,7 @@ export function useCanvasConfigInitialize() {
//그룹 객체로 다시 만든다 (좌표때문에)
const group = new fabric.Group(objectArray, {
...objectArray,
groupId: id,
name: objectsName,
selectable: true,

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

@ -374,6 +374,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
console.log('trianglePolygon', trianglePolygon)
console.log('selectedSurfacePolygon', selectedSurfacePolygon)
//지붕 밖으로 그렸을때
if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
@ -496,6 +499,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
canvas?.add(objectGroup)
objectGroup.getObjects().forEach((obj, index) => {
console.log(`최초 pathOffset ${index}`, obj.get('pathOffset'))
})
isDown = false
initEvent()
dbClickEvent()
@ -917,20 +924,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
originY: 'center',
left: changedCoords.x,
top: changedCoords.y,
width: width / 10,
height: height / 10,
})
if (target.name === 'roof') {
//얘는 일단 도머에 적용함
if (target.type === 'group') {
target._objects.forEach((obj) => setSurfaceShapePattern(obj))
} else {
setSurfaceShapePattern(target)
target.fire('modified')
}
//얘는 일단 도머에 적용함
if (target.type === 'group') {
target._objects.forEach((obj) => setSurfaceShapePattern(obj))
}
// target.setCoords()
canvas.renderAll()
if (target.type === 'group') reGroupObject(target)
}

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

@ -657,7 +657,7 @@ export function useSurfaceShapeBatch() {
}
function getAllRelatedObjects(id) {
const result = []
const ult = []
const map = new Map()
// Create a map of objects by their id
@ -688,52 +688,8 @@ export function useSurfaceShapeBatch() {
const roof = canvas.getActiveObject()
if (roof) {
let isDragging = false
const childrenObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id)
console.log('childrenObjects', childrenObjects)
// const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id && obj.type === 'group')
// const ungroupObjects = [] // 그룹 해제된 객체들
// const groupChildObjects = []
// groupObjects.forEach((obj) => {
// obj._restoreObjectsState()
// obj.getObjects().forEach((o) => {
// o.set({
// ungroupYn: true,
// })
// canvas.add(o)
// ungroupObjects.push(o)
// })
// canvas.remove(obj)
// })
// const childObjects = findAllChildren(roof.id)
// groupObjects.forEach((obj) => {
// groupChildObjects.push(...obj.getObjects())
// })
// console.log('ungroupObjects', ungroupObjects)
// console.log('childObjects', childObjects)
// console.log('groupChildObjects', groupChildObjects)
// const children = canvas.getObjects().filter((obj) => obj.parentId === roof.id)
// let grandChildren = []
// children.forEach((child) => {
// if (child.type === 'group') {
// child.getObjects().forEach((grandChild) => {
// const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === grandChild.id)
// grandChildren.push(...groupObjects)
// })
// } else {
// grandChildren.push(...canvas.getObjects().filter((obj) => obj.parentId === child.id))
// }
// })
const selectionArray = [roof, ...childrenObjects]
const selection = new fabric.ActiveSelection(selectionArray, {
@ -748,7 +704,6 @@ export function useSurfaceShapeBatch() {
canvas.setActiveObject(selection)
addCanvasMouseEventListener('mouse:up', (e) => {
isDragging = false
canvas.selection = true
canvas.discardActiveObject() // 모든 선택 해제
@ -768,7 +723,6 @@ export function useSurfaceShapeBatch() {
canvas.renderAll()
roof.fire('polygonMoved')
if (roof.type === 'group') reGroupObject(obj)
drawDirectionArrow(roof)
initEvent()
})
@ -805,9 +759,74 @@ export function useSurfaceShapeBatch() {
canvas?.remove(groupObj)
}
const resizeSurfaceShapeBatch = (side, target, width, height) => {
const objectWidth = target.width
const objectHeight = target.height
const changeWidth = width / 10 / objectWidth
const changeHeight = height / 10 / objectHeight
let sideX = 'left'
let sideY = 'top'
//그룹 중심점 변경
if (side === 2) {
sideX = 'right'
sideY = 'top'
} else if (side === 3) {
sideX = 'left'
sideY = 'bottom'
} else if (side === 4) {
sideX = 'right'
sideY = 'bottom'
}
//변경 전 좌표
const newCoords = target.getPointByOrigin(sideX, sideY)
target.set({
originX: sideX,
originY: sideY,
left: newCoords.x,
top: newCoords.y,
})
target.scaleX = changeWidth
target.scaleY = changeHeight
const currentPoints = target.getCurrentPoints()
target.set({
scaleX: 1,
scaleY: 1,
width: parseInt((width / 10).toFixed(0)),
height: parseInt((height / 10).toFixed(0)),
})
//크기 변경후 좌표를 재 적용
const changedCoords = target.getPointByOrigin('center', 'center')
target.set({
originX: 'center',
originY: 'center',
left: changedCoords.x,
top: changedCoords.y,
})
//면형상 리사이즈시에만
target.fire('polygonMoved')
target.points = currentPoints
target.fire('modified')
setSurfaceShapePattern(target, roofDisplay.column)
if (target.direction) {
drawDirectionArrow(target)
}
target.setCoords()
canvas.renderAll()
}
return {
applySurfaceShape,
deleteAllSurfacesAndObjects,
moveSurfaceShapeBatch,
resizeSurfaceShapeBatch,
}
}