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-10-31 12:49:08 +09:00
parent 4c23de12b4
commit 5637f93d05
7 changed files with 206 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -156,6 +156,7 @@ export const SAVE_KEY = [
'groupYn',
'groupName',
'lineDirection',
'groupId',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

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

@ -59,7 +59,8 @@ export function useCanvasConfigInitialize() {
const canvasLoadInit = () => {
roofInit() //화면표시 초기화
groupInit()
groupDimensionInit()
reGroupInit() //그룹 객체 재그룹
}
const gridInit = () => {
@ -95,10 +96,12 @@ export function useCanvasConfigInitialize() {
})
}
const groupInit = () => {
const groups = canvas.getObjects().filter((obj) => obj.groupYn)
const groupDimensionInit = () => {
const groups = canvas.getObjects().filter((obj) => obj.groupYn && obj.name === 'dimensionGroup')
const groupIds = []
console.log('groupDimensionInit', groups)
groups.forEach((group) => {
if (!groupIds.includes(group.id)) {
groupIds.push(group.id)
@ -138,5 +141,50 @@ export function useCanvasConfigInitialize() {
})
}
const reGroupInit = () => {
const excludeObjects = ['dimensionGroup', 'dimensionLineText']
const groups = canvas.getObjects().filter((obj) => obj.groupYn && !obj.name.includes(excludeObjects))
const groupIds = []
groups.forEach((group) => {
if (!groupIds.includes(group.groupId)) {
groupIds.push(group.groupId)
}
})
groupIds.forEach((id) => {
//그룹아이디로 캔버스의 객체를 조회함
const groupObjects = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)
const objectsName = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)[0].groupName
let objectArray = []
//그룹객체가 있으면 배열에 추가함
if (groupObjects) {
groupObjects.forEach((obj) => {
objectArray.push(obj)
})
}
//그룹객체를 캔버스에서 제거함
objectArray.forEach((obj) => {
canvas?.remove(obj)
})
//그룹 객체로 다시 만든다 (좌표때문에)
const group = new fabric.Group(objectArray, {
groupId: id,
name: objectsName,
selectable: true,
lockMovementX: true,
lockMovementY: true,
originX: 'center',
originY: 'center',
})
canvas.add(group)
})
}
return { canvasLoadInit, gridInit }
}

97
src/hooks/common/useCommonUtils.js
View File

@ -278,7 +278,7 @@ export function useCommonUtils() {
groupObjects.push(distanceText)
const group = new fabric.Group(groupObjects, {
name: 'dimensionLine',
name: 'dimensionGroup',
selectable: true,
originX: 'center',
originY: 'center',
@ -522,10 +522,10 @@ export function useCommonUtils() {
if (object) {
canvas?.remove(object)
if (object.id) {
const group = canvas.getObjects().filter((obj) => obj.id === object.id)
group.forEach((obj) => canvas?.remove(obj))
}
// if (object.id) {
// const group = canvas.getObjects().filter((obj) => obj.id === object.id)
// group.forEach((obj) => canvas?.remove(obj))
// }
}
}
@ -720,43 +720,72 @@ export function useCommonUtils() {
}
// 그룹 이동 시 라인 및 각 객체의 좌표를 절대 좌표로 업데이트하는 함수
function updateGroupObjectCoords(group, originLeft, originTop) {
const diffrenceLeft = group.left - originLeft
const diffrenceTop = group.top - originTop
function updateGroupObjectCoords(targetObj, originLeft, originTop) {
const diffrenceLeft = targetObj.left - originLeft
const diffrenceTop = targetObj.top - originTop
group.getObjects().forEach((obj) => {
// 그룹 내 객체의 절대 좌표를 계산
if (targetObj.type === 'group') {
targetObj.getObjects().forEach((obj) => {
// 그룹 내 객체의 절대 좌표를 계산
const originObjLeft = obj.left
const originObjTop = obj.top
const originObjLeft = obj.left
const originObjTop = obj.top
if (obj.type === 'line') {
// Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
if (obj.type === 'line') {
// Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
obj.set({
x1: obj.x1 + diffrenceLeft,
y1: obj.y1 + diffrenceTop,
x2: obj.x2 + diffrenceLeft,
y2: obj.y2 + diffrenceTop,
})
obj.set({
x1: obj.x1 + diffrenceLeft,
y1: obj.y1 + diffrenceTop,
x2: obj.x2 + diffrenceLeft,
y2: obj.y2 + diffrenceTop,
})
obj.set({
left: originObjLeft,
top: originObjTop,
})
} else {
// 다른 객체의 경우 left, top 절대 좌표 설정
obj.set({
...obj,
left: obj.left,
top: obj.top,
})
obj.set({
left: originObjLeft,
top: originObjTop,
})
} else {
// 다른 객체의 경우 left, top 절대 좌표 설정
obj.set({
...obj,
left: obj.left,
top: obj.top,
})
}
obj.setCoords() // 좌표 반영
})
} else {
if (targetObj.type === 'line') {
const originObjLeft = obj.left
const originObjTop = obj.top
if (obj.type === 'line') {
// Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
obj.set({
x1: obj.x1 + diffrenceLeft,
y1: obj.y1 + diffrenceTop,
x2: obj.x2 + diffrenceLeft,
y2: obj.y2 + diffrenceTop,
})
obj.set({
left: originObjLeft,
top: originObjTop,
})
} else {
targetObj.set({
...targetObj,
left: targetObj.left,
top: targetObj.top,
})
}
targetObj.setCoords()
}
obj.setCoords() // 좌표 반영
canvas?.renderAll()
})
}
}
return {
commonFunctions,
dimensionSettings,

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

@ -1,4 +1,5 @@
'use client'
import { useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
@ -9,6 +10,8 @@ import { useSwal } from '@/hooks/useSwal'
import * as turf from '@turf/turf'
import { usePolygon } from '@/hooks/usePolygon'
import { QPolygon } from '@/components/fabric/QPolygon'
import { v4 as uuidv4 } from 'uuid'
import { fontSelector } from '@/store/fontAtom'
export function useObjectBatch() {
const { getMessage } = useMessage()
@ -16,6 +19,46 @@ export function useObjectBatch() {
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
useEffect(() => {
if (canvas) {
dbClickEvent()
}
return () => {
initEvent()
if (canvas) canvas.off('mouse:dblclick')
}
}, [])
const dbClickEvent = () => {
const dormerObject = canvas.getObjects().filter((obj) => obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER)
if (dormerObject) {
canvas.on('mouse:dblclick', (e) => {
if (e.target && e.target instanceof fabric.Group) {
const pointer = canvas.getPointer(e.e)
const objects = e.target._objects
// 클릭한 위치에 있는 객체 찾기
const clickedObject = objects.find((obj) => {
if (obj.type === 'QPolygon') {
return obj.inPolygon({ x: pointer.x, y: pointer.y })
} else {
return obj.containsPoint(pointer)
}
})
if (clickedObject) {
// 클릭된 객체 선택
canvas.setActiveObject(clickedObject)
canvas.renderAll()
}
}
})
}
}
const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
@ -228,6 +271,7 @@ export function useObjectBatch() {
: 0
const directionRef = dormerPlacement.directionRef.current
let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints
const id = uuidv4()
if (height === '' || pitch === '' || height <= 0 || pitch <= 0) {
swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
@ -306,6 +350,7 @@ export function useObjectBatch() {
originX: 'center',
originY: 'top',
angle: angle,
objectId: id,
})
canvas?.add(dormerOffset)
}
@ -318,7 +363,7 @@ export function useObjectBatch() {
//지붕 밖으로 그렸을때
if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
//일단 지워
deleteTempObjects()
return
@ -362,12 +407,14 @@ export function useObjectBatch() {
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
viewLengthText: true,
fontSize: 14,
direction: direction,
originX: 'center',
originY: 'center',
name: dormerName,
pitch: pitch,
fontSize: lengthTextFont.fontSize.value,
fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: lengthTextFont.fontWeight.value,
})
const rightTriangle = new QPolygon(splitedTriangle[1], {
@ -379,16 +426,18 @@ export function useObjectBatch() {
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
viewLengthText: true,
fontSize: 14,
direction: direction,
originX: 'center',
originY: 'center',
name: dormerName,
pitch: pitch,
fontSize: lengthTextFont.fontSize.value,
fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: lengthTextFont.fontWeight.value,
})
canvas?.add(leftTriangle)
canvas?.add(rightTriangle)
// canvas?.add(leftTriangle)
// canvas?.add(rightTriangle)
//패턴
setSurfaceShapePattern(leftTriangle)
@ -397,8 +446,16 @@ export function useObjectBatch() {
drawDirectionArrow(leftTriangle)
drawDirectionArrow(rightTriangle)
const objectGroup = new fabric.Group([leftTriangle, rightTriangle], {
subTargetCheck: true,
name: dormerName,
id: id,
})
canvas?.add(objectGroup)
isDown = false
initEvent()
dbClickEvent()
}
})
} else if (buttonAct === 4) {
@ -493,7 +550,7 @@ export function useObjectBatch() {
//지붕 밖으로 그렸을때
if (!turf.booleanWithin(pentagonPolygon, selectedSurfacePolygon)) {
swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
//일단 지워
deleteTempObjects()
return
@ -574,6 +631,7 @@ export function useObjectBatch() {
isDown = false
initEvent()
dbClickEvent()
}
})
}
@ -648,7 +706,6 @@ export function useObjectBatch() {
{ x: triangle.left + triangle.height, y: triangle.top - triangle.height },
]
}
return [leftPoints, rightPoints]
}

13
src/hooks/useContextMenu.js
View File

@ -21,6 +21,7 @@ import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/Line
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
import { useCommonUtils } from './common/useCommonUtils'
import { useObjectBatch } from './object/useObjectBatch'
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuState } from '@/store/contextMenu'
@ -43,12 +44,14 @@ export function useContextMenu() {
const { addPopup } = usePopup()
const [popupId, setPopupId] = useState(uuidv4())
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
const [cell, setCell] = useState(null)
const [column, setColumn] = useState(null)
const { handleZoomClear } = useCanvasEvent()
const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
const { deleteObjectBatch } = useObjectBatch()
const currentMenuSetting = () => {
switch (currentMenu) {
case MENU.PLAN_DRAWING:
@ -252,6 +255,8 @@ export function useContextMenu() {
}, [currentContextMenu])
useEffect(() => {
console.log('currentObject', currentObject)
if (currentObject?.name) {
console.log(currentObject?.name)
switch (currentObject.name) {
@ -346,16 +351,19 @@ export function useContextMenu() {
id: 'openingRemove',
shortcut: ['d', 'D'],
name: `${getMessage('contextmenu.remove')}(D)`,
fn: () => deleteObject(),
},
{
id: 'openingMove',
shortcut: ['m', 'M'],
name: `${getMessage('contextmenu.move')}(M)`,
fn: () => moveObject(),
},
{
id: 'openingCopy',
shortcut: ['c', 'C'],
name: `${getMessage('contextmenu.copy')}(C)`,
fn: () => copyObject(),
},
{
id: 'openingOffset',
@ -481,16 +489,19 @@ export function useContextMenu() {
id: 'remove',
shortcut: ['d', 'D'],
name: `${getMessage('contextmenu.remove')}(D)`,
fn: () => deleteObject(),
},
{
id: 'move',
shortcut: ['m', 'M'],
name: `${getMessage('contextmenu.move')}(M)`,
fn: () => moveObject(),
},
{
id: 'copy',
shortcut: ['c', 'C'],
name: `${getMessage('contextmenu.copy')}(C)`,
fn: () => copyObject(),
},
],
])

15
src/hooks/usePlan.js
View File

@ -60,23 +60,32 @@ export function usePlan() {
const groups = canvas.getObjects().filter((obj) => obj.type === 'group')
console.log('groups', groups)
if (groups.length > 0) {
groups.forEach((group) => {
canvas?.remove(group)
canvas?.renderAll()
const restore = group._restoreObjectsState()
const restore = group._restoreObjectsState() //그룹 좌표 복구
//그룹시 좌표가 틀어지는 이슈
restore._objects.forEach((obj) => {
obj.set({
...obj,
groupYn: true,
groupName: group.name,
lineDirection: group.lineDirection,
groupId: group.id,
})
//디렉션이 있는 경우에만
if (group.lineDirection) {
obj.set({
lineDirection: group.lineDirection,
})
}
canvas?.add(obj)
obj.setCoords()
canvas?.requestRenderAll()
canvas?.renderAll()
})
})

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

@ -766,9 +766,9 @@ export const triangleToPolygon = (triangle) => {
const halfWidth = triangle.width / 2
const height = triangle.height
points.push({ x: triangle.left + halfWidth, y: triangle.top })
points.push({ x: triangle.left, y: triangle.top + height })
points.push({ x: triangle.left + triangle.width, y: triangle.top + height })
points.push({ x: triangle.left, y: triangle.top })
points.push({ x: triangle.left - halfWidth, y: triangle.top + height })
points.push({ x: triangle.left + halfWidth, y: triangle.top + height })
return points
}