모듈 일괄 정렬, 일괄 삭제 기능 추가
This commit is contained in:
yjnoh
parent
f34ae50507
commit
6dc9d0c717
@ -800,60 +800,65 @@ export function useModule() {
|
||||
}
|
||||
}
|
||||
|
||||
const alignModule = (type) => {
|
||||
const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
|
||||
const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
|
||||
const objects = getObjects()
|
||||
let [top, bottom, left, right] = [0, 0, 0, 0]
|
||||
const alignModule = (type, surfaceArray) => {
|
||||
surfaceArray.forEach((surface) => {
|
||||
const modules = canvas
|
||||
.getObjects()
|
||||
.filter((module) => module.name === POLYGON_TYPE.MODULE)
|
||||
.filter((module) => module.surfaceId === surface.id)
|
||||
|
||||
top = Math.min(...modules.map((module) => module.top))
|
||||
bottom = Math.max(...modules.map((module) => module.top + module.height))
|
||||
left = Math.min(...modules.map((module) => module.left))
|
||||
right = Math.max(...modules.map((module) => module.left + module.width))
|
||||
const moduleSurfacePos = {
|
||||
top: Math.min(...moduleSetupSurface.points.map((point) => point.y)),
|
||||
left: Math.min(...moduleSetupSurface.points.map((point) => point.x)),
|
||||
}
|
||||
const [height, width] = [bottom - top, right - left]
|
||||
const verticalCenterLength = moduleSurfacePos.top + moduleSetupSurface.height / 2 - (top + height / 2)
|
||||
const horizontalCenterLength = moduleSurfacePos.left + moduleSetupSurface.width / 2 - (left + width / 2)
|
||||
let isWarning = false
|
||||
const objects = getObjects()
|
||||
let [top, bottom, left, right] = [0, 0, 0, 0]
|
||||
|
||||
canvas.discardActiveObject()
|
||||
modules.forEach((module) => {
|
||||
module.originPos = {
|
||||
left: module.left,
|
||||
top: module.top,
|
||||
fill: module.fill,
|
||||
}
|
||||
if (type === MODULE_ALIGN_TYPE.VERTICAL) {
|
||||
module.set({ top: module.top + verticalCenterLength })
|
||||
} else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) {
|
||||
module.set({ left: module.left + horizontalCenterLength })
|
||||
top = Math.min(...modules.map((module) => module.top))
|
||||
bottom = Math.max(...modules.map((module) => module.top + module.height))
|
||||
left = Math.min(...modules.map((module) => module.left))
|
||||
right = Math.max(...modules.map((module) => module.left + module.width))
|
||||
const moduleSurfacePos = {
|
||||
top: Math.min(...surface.points.map((point) => point.y)),
|
||||
left: Math.min(...surface.points.map((point) => point.x)),
|
||||
}
|
||||
const [height, width] = [bottom - top, right - left]
|
||||
const verticalCenterLength = moduleSurfacePos.top + surface.height / 2 - (top + height / 2)
|
||||
const horizontalCenterLength = moduleSurfacePos.left + surface.width / 2 - (left + width / 2)
|
||||
let isWarning = false
|
||||
|
||||
canvas.discardActiveObject()
|
||||
modules.forEach((module) => {
|
||||
module.originPos = {
|
||||
left: module.left,
|
||||
top: module.top,
|
||||
fill: module.fill,
|
||||
}
|
||||
if (type === MODULE_ALIGN_TYPE.VERTICAL) {
|
||||
module.set({ top: module.top + verticalCenterLength })
|
||||
} else if (type === MODULE_ALIGN_TYPE.HORIZONTAL) {
|
||||
module.set({ left: module.left + horizontalCenterLength })
|
||||
}
|
||||
|
||||
canvas.renderAll()
|
||||
module.setCoords()
|
||||
if (isOverlapObjects(module, objects) || isOutsideSurface(module, surface)) {
|
||||
isWarning = true
|
||||
module.set({ fill: 'red' })
|
||||
}
|
||||
})
|
||||
canvas.renderAll()
|
||||
module.setCoords()
|
||||
if (isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
|
||||
isWarning = true
|
||||
module.set({ fill: 'red' })
|
||||
if (isWarning) {
|
||||
swalFire({
|
||||
title: getMessage('can.not.align.module'),
|
||||
icon: 'error',
|
||||
type: 'alert',
|
||||
confirmFn: () => {
|
||||
modules.forEach((module) => {
|
||||
module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
|
||||
module.setCoords()
|
||||
})
|
||||
canvas.renderAll()
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
canvas.renderAll()
|
||||
if (isWarning) {
|
||||
swalFire({
|
||||
title: getMessage('can.not.align.module'),
|
||||
icon: 'error',
|
||||
type: 'alert',
|
||||
confirmFn: () => {
|
||||
modules.forEach((module) => {
|
||||
module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
|
||||
module.setCoords()
|
||||
})
|
||||
canvas.renderAll()
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const modulesRemove = () => {
|
||||
@ -867,6 +872,19 @@ export function useModule() {
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const moduleRoofRemove = (surfaceArray) => {
|
||||
surfaceArray.forEach((surface) => {
|
||||
surface.modules = []
|
||||
canvas
|
||||
.getObjects()
|
||||
.filter((module) => module.name === POLYGON_TYPE.MODULE && module.surfaceId === surface.id)
|
||||
.forEach((module) => {
|
||||
canvas.remove(module)
|
||||
})
|
||||
})
|
||||
setModuleStatisticsData()
|
||||
}
|
||||
|
||||
const isOverlapOtherModules = (module, otherModules) => {
|
||||
return otherModules.some(
|
||||
(otherModule) =>
|
||||
@ -1031,6 +1049,7 @@ export function useModule() {
|
||||
moduleColumnInsert,
|
||||
muduleRowInsert,
|
||||
modulesRemove,
|
||||
moduleRoofRemove,
|
||||
alignModule,
|
||||
setModuleStatisticsData,
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import { canvasSettingState, canvasState, checkedModuleState, isManualModuleSetupState } from '@/store/canvasAtom'
|
||||
import { canvasSettingState, canvasState, checkedModuleState, currentObjectState, isManualModuleSetupState } from '@/store/canvasAtom'
|
||||
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
|
||||
import { addedRoofsState, basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
|
||||
import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
|
||||
@ -45,6 +45,8 @@ export function useModuleBasicSetting(tabNum) {
|
||||
const { getTrestleDetailList } = useMasterController()
|
||||
const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
|
||||
|
||||
const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('basicSetting', basicSetting)
|
||||
if (canvas) {
|
||||
@ -256,8 +258,6 @@ export function useModuleBasicSetting(tabNum) {
|
||||
|
||||
//설치 범위 지정 클릭 이벤트
|
||||
const toggleSelection = (setupSurface) => {
|
||||
console.log('setupSurface', setupSurface)
|
||||
|
||||
const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
|
||||
//최초 선택일때
|
||||
if (!isExist) {
|
||||
@ -279,6 +279,7 @@ export function useModuleBasicSetting(tabNum) {
|
||||
|
||||
canvas?.renderAll()
|
||||
selectedModuleInstSurfaceArray.push(setupSurface)
|
||||
setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
|
||||
} else {
|
||||
//선택후 재선택하면 선택안됨으로 변경
|
||||
setupSurface.set({
|
||||
@ -293,6 +294,7 @@ export function useModuleBasicSetting(tabNum) {
|
||||
const removeIndex = setupSurface.parentId
|
||||
const removeArrayIndex = selectedModuleInstSurfaceArray.findIndex((obj) => obj.parentId === removeIndex)
|
||||
selectedModuleInstSurfaceArray.splice(removeArrayIndex, 1)
|
||||
setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
|
||||
}
|
||||
|
||||
canvas?.renderAll()
|
||||
|
||||
@ -67,7 +67,7 @@ export function useContextMenu() {
|
||||
const commonTextFont = useRecoilValue(fontSelector('commonText'))
|
||||
const { settingsData, setSettingsDataSave } = useCanvasSetting()
|
||||
const { swalFire } = useSwal()
|
||||
const { alignModule, modulesRemove } = useModule()
|
||||
const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
|
||||
const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial } = useRoofFn()
|
||||
|
||||
const currentMenuSetting = () => {
|
||||
@ -332,8 +332,8 @@ export function useContextMenu() {
|
||||
}, [currentContextMenu])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('currentObject', currentObject)
|
||||
if (currentObject?.name) {
|
||||
console.log('object', currentObject)
|
||||
switch (currentObject.name) {
|
||||
case 'triangleDormer':
|
||||
case 'pentagonDormer':
|
||||
@ -725,21 +725,23 @@ export function useContextMenu() {
|
||||
{
|
||||
id: 'moduleVerticalCenterAlign',
|
||||
name: getMessage('contextmenu.module.vertical.align'),
|
||||
fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL),
|
||||
fn: () => alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData),
|
||||
},
|
||||
{
|
||||
id: 'moduleHorizonCenterAlign',
|
||||
name: getMessage('contextmenu.module.horizon.align'),
|
||||
fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL),
|
||||
fn: () => alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData),
|
||||
},
|
||||
{
|
||||
id: 'moduleRemove',
|
||||
name: getMessage('contextmenu.module.remove'),
|
||||
fn: () => {
|
||||
const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
|
||||
const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
|
||||
canvas.remove(...modules)
|
||||
canvas.renderAll()
|
||||
moduleRoofRemove(currentObject.arrayData)
|
||||
|
||||
// const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
|
||||
// const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
|
||||
// canvas.remove(...modules)
|
||||
// canvas.renderAll()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user