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

배치면 초기설정, 지붕면할당 작업중

Browse Source
This commit is contained in:
hyojun.choi 2024-12-17 10:48:48 +09:00
parent bb467e3c8d
commit 7f01ca25d8
14 changed files with 198 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/floor-plan/CanvasMenu.jsx
View File

@ -82,7 +82,6 @@ export default function CanvasMenu(props) {
const commonUtils = useRecoilValue(commonUtilsState)
const { commonFunctions } = useCommonUtils()
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
const { restoreModuleInstArea } = useModuleBasicSetting()

15
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -65,6 +65,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
selected: true,
layout: roofLayout,
}
console.log('roofInfo', roofInfo)
const addedRoofs = []
addedRoofs.push(roofInfo)
@ -208,7 +209,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<div className="outline-form">
<span className="mr10">W</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" ref={roofRef.width} value={parseInt(currentRoofMaterial.width)} />
<input
type="text"
className="input-origin block"
ref={roofRef.width}
defaultValue={parseInt(currentRoofMaterial.width)}
/>
</div>
</div>
</div>
@ -218,7 +224,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<div className="outline-form">
<span className="mr10">L</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" ref={roofRef.length} value={parseInt(currentRoofMaterial.length)} />
<input
type="text"
className="input-origin block"
ref={roofRef.length}
defaultValue={parseInt(currentRoofMaterial.length)}
/>
</div>
</div>
</div>

4
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -1,9 +1,8 @@
import React, { useEffect, useState } from 'react'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useMessage } from '@/hooks/useMessage'
import { POLYGON_TYPE } from '@/common/common'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { useEvent } from '@/hooks/useEvent'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export default function FirstOption(props) {
const { getMessage } = useMessage()
@ -11,6 +10,7 @@ export default function FirstOption(props) {
let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { initEvent } = useEvent()
const { setSurfaceShapePattern } = useRoofFn()
// 데이터를 최초 한 번만 조회
useEffect(() => {

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

@ -2,12 +2,13 @@ import { useEffect } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom'
import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util'
import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
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'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useCanvasConfigInitialize() {
const canvas = useRecoilValue(canvasState)
@ -18,6 +19,7 @@ export function useCanvasConfigInitialize() {
const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
const pitchText = useRecoilValue(pitchTextSelector)
const angleUnit = useRecoilValue(showAngleUnitSelector)
const { setSurfaceShapePattern } = useRoofFn()
const {} = useFont()
const {} = useGrid()
const {} = useRoof()

7
src/hooks/common/useRoof.js
View File

@ -2,12 +2,13 @@ import { canvasState } from '@/store/canvasAtom'
import { allocDisplaySelector, roofDisplaySelector } from '@/store/settingAtom'
import { useRecoilValue } from 'recoil'
import { useEffect } from 'react'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useRoof() {
const canvas = useRecoilValue(canvasState)
const allocDisplay = useRecoilValue(allocDisplaySelector)
const roofDisplay = useRecoilValue(roofDisplaySelector)
const { setSurfaceShapePattern } = useRoofFn()
useEffect(() => {
if (!canvas) return
canvas
@ -23,7 +24,7 @@ export function useRoof() {
canvas.renderAll()
}, [allocDisplay])
const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
/*const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
const ratio = window.devicePixelRatio || 1
let width = 265 / 10
@ -145,7 +146,7 @@ export function useRoof() {
polygon.set('fill', null)
polygon.set('fill', pattern)
polygon.canvas?.renderAll()
}
}*/
return {}
}

143
src/hooks/common/useRoofFn.js Normal file
View File

@ -0,0 +1,143 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { selectedRoofMaterialSelector } from '@/store/settingAtom'
export function useRoofFn() {
const canvas = useRecoilValue(canvasState)
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
//면형상 선택 클릭시 지붕 패턴 입히기
function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
debugger
const ratio = window.devicePixelRatio || 1
let width = selectedRoofMaterial.width / 10
let height = selectedRoofMaterial.length / 10
let roofStyle = 2
const inputPatternSize = { width: width, height: height } //임시 사이즈
const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
if (polygon.direction === 'east' || polygon.direction === 'west') {
//세로형이면 width height를 바꿈
;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
}
// 패턴 소스를 위한 임시 캔버스 생성
const patternSourceCanvas = document.createElement('canvas')
patternSourceCanvas.width = polygon.width * ratio
patternSourceCanvas.height = polygon.height * ratio
const ctx = patternSourceCanvas.getContext('2d')
let offset = roofStyle === 1 ? 0 : patternSize.width / 2
const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
if (trestleMode) {
ctx.strokeStyle = 'black'
ctx.lineWidth = 0.2
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
} else {
ctx.fillStyle = 'rgba(255, 255, 255, 1)'
}
if (polygon.direction === 'east' || polygon.direction === 'west') {
offset = roofStyle === 1 ? 0 : patternSize.height / 2
for (let col = 0; col <= cols; col++) {
const x = col * patternSize.width
const yStart = 0
const yEnd = patternSourceCanvas.height
ctx.beginPath()
ctx.moveTo(x, yStart) // 선 시작점
ctx.lineTo(x, yEnd) // 선 끝점
ctx.stroke()
if (mode === 'allPainted' || trestleMode) {
ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
}
for (let row = 0; row <= rows; row++) {
const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
const xStart = col * patternSize.width
const xEnd = xStart + patternSize.width
ctx.beginPath()
ctx.moveTo(xStart, y) // 선 시작점
ctx.lineTo(xEnd, y) // 선 끝점
ctx.stroke()
if (mode === 'allPainted' || trestleMode) {
ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
}
}
}
} else {
for (let row = 0; row <= rows; row++) {
const y = row * patternSize.height
ctx.beginPath()
ctx.moveTo(0, y) // 선 시작점
ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
ctx.stroke()
if (mode === 'allPainted' || trestleMode) {
ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
}
for (let col = 0; col <= cols; col++) {
const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
const yStart = row * patternSize.height
const yEnd = yStart + patternSize.height
ctx.beginPath()
ctx.moveTo(x, yStart) // 선 시작점
ctx.lineTo(x, yEnd) // 선 끝점
ctx.stroke()
if (mode === 'allPainted' || trestleMode) {
ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
}
}
}
}
const hachingPatternSourceCanvas = document.createElement('canvas')
if (mode === 'lineHatch') {
hachingPatternSourceCanvas.width = polygon.width * ratio
hachingPatternSourceCanvas.height = polygon.height * ratio
const ctx1 = hachingPatternSourceCanvas.getContext('2d')
const gap = 10
ctx1.strokeStyle = 'green' // 선 색상
ctx1.lineWidth = 0.3 // 선 두께
for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
ctx1.beginPath()
ctx1.moveTo(x, 0) // 선 시작점
ctx1.lineTo(0, x) // 선 끝점
ctx1.stroke()
}
}
const combinedPatternCanvas = document.createElement('canvas')
combinedPatternCanvas.width = polygon.width * ratio
combinedPatternCanvas.height = polygon.height * ratio
const combinedCtx = combinedPatternCanvas.getContext('2d')
// 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
combinedCtx.drawImage(patternSourceCanvas, 0, 0)
combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)
// 패턴 생성
const pattern = new fabric.Pattern({
source: combinedPatternCanvas,
repeat: 'repeat',
})
polygon.set('fill', null)
polygon.set('fill', pattern)
polygon.canvas?.renderAll()
}
return { setSurfaceShapePattern }
}

4
src/hooks/module/useModuleBasicSetting.js
View File

@ -1,6 +1,6 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { rectToPolygon } from '@/util/canvas-util'
import { roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -13,6 +13,7 @@ import { useSwal } from '@/hooks/useSwal'
import { canvasSettingState } from '@/store/canvasAtom'
import { compasDegAtom } from '@/store/orientationAtom'
import { QLine } from '@/components/fabric/QLine'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState)
@ -23,6 +24,7 @@ export function useModuleBasicSetting() {
const { swalFire } = useSwal()
const canvasSetting = useRecoilValue(canvasSettingState)
const compasDeg = useRecoilValue(compasDegAtom)
const { setSurfaceShapePattern } = useRoofFn()
// const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
let selectedModuleInstSurfaceArray = []

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

@ -5,13 +5,14 @@ import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, setSurfaceShapePattern, triangleToPolygon } from '@/util/canvas-util'
import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon } from '@/util/canvas-util'
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'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
@ -20,6 +21,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
// const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const { setSurfaceShapePattern } = useRoofFn()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
useEffect(() => {

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

@ -21,6 +21,7 @@ import {
basicSettingState,
settingsState,
roofMaterialsAtom,
selectedRoofMaterialSelector,
} from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { globalFontAtom } from '@/store/fontAtom'
@ -28,6 +29,7 @@ import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { gridColorState } from '@/store/gridAtom'
import { useColor } from 'react-color-palette'
import { useMasterController } from '@/hooks/common/useMasterController'
import { isObjectNotEmpty } from '@/util/common-utils'
const defaultDotLineGridSetting = {
INTERVAL: {
@ -92,7 +94,7 @@ export function useCanvasSetting() {
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
const { getRoofMaterialList } = useMasterController()
const { getRoofMaterialList, getModuleTypeItemList } = useMasterController()
const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
const SelectOptions = [
@ -102,18 +104,29 @@ export function useCanvasSetting() {
{ id: 4, name: '1/10', value: 1 / 10 },
]
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
useEffect(() => {
addRoofMaterials()
}, [])
useEffect(() => {
if (!selectedRoofMaterial || !isObjectNotEmpty(selectedRoofMaterial)) {
return
}
const { id } = selectedRoofMaterial
console.log(getModuleTypeItemList(id))
}, [selectedRoofMaterial])
//지붕재 초기세팅
const addRoofMaterials = async () => {
const { data } = await getRoofMaterialList()
const roofLists = data.map((item) => ({
const roofLists = data.map((item, idx) => ({
...item,
id: item.roofMatlCd,
name: item.roofMatlNm,
selected: false,
selected: idx === 0,
nameJp: item.roofMatlNmJp,
length: item.lenBase && parseInt(item.lenBase),
width: item.widBase && parseInt(item.widBase),

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

@ -1,7 +1,6 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
@ -13,6 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
import useMenu from '@/hooks/common/useMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { menuTypeState } from '@/store/menuAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
// 지붕면 할당
export function useRoofAllocationSetting(id) {
@ -33,6 +33,8 @@ export function useRoofAllocationSetting(id) {
const [roofList, setRoofList] = useState([])
const [editingLines, setEditingLines] = useState([])
const { setSurfaceShapePattern } = useRoofFn()
useEffect(() => {
setRoofList(basicSetting.roofs)
}, [basicSetting])

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

@ -13,7 +13,7 @@ import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
import { useEffect, useRef } from 'react'
import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
import { distanceBetweenPoints } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { calculateAngle } from '@/util/qpolygon-utils'
import {
@ -33,6 +33,7 @@ import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
import { roofDisplaySelector } from '@/store/settingAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
// 면형상 배치
export function usePlacementShapeDrawing(id) {
@ -46,6 +47,7 @@ export function usePlacementShapeDrawing(id) {
const { addLine, removeLine } = useLine()
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
const { tempGridMode } = useTempGrid()
const { setSurfaceShapePattern } = useRoofFn()
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)

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

@ -3,7 +3,7 @@
import { useRecoilValue } from 'recoil'
import { canvasState, globalPitchState } from '@/store/canvasAtom'
import { MENU, POLYGON_TYPE } from '@/common/common'
import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
import { getIntersectionPoint } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
import { useSwal } from '@/hooks/useSwal'
@ -15,6 +15,7 @@ import { usePolygon } from '@/hooks/usePolygon'
import { fontSelector } from '@/store/fontAtom'
import { slopeSelector } from '@/store/commonAtom'
import { QLine } from '@/components/fabric/QLine'
import { useRoofFn } from '@/hooks/common/useRoofFn'
export function useSurfaceShapeBatch() {
const { getMessage } = useMessage()
@ -29,6 +30,7 @@ export function useSurfaceShapeBatch() {
const { addCanvasMouseEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { closePopup } = usePopup()
const { setSurfaceShapePattern } = useRoofFn()
const applySurfaceShape = (surfaceRefs, selectedType, id) => {
let length1, length2, length3, length4, length5

3
src/store/settingAtom.js
View File

@ -220,8 +220,7 @@ export const selectedRoofMaterialSelector = selector({
key: 'selectedRoofMaterialSelector',
get: ({ get }) => {
const basicSetting = get(basicSettingState)
const roofMaterials = get(roofMaterialsAtom)
return basicSetting.selectedRoofMaterial ?? roofMaterials[0]
return basicSetting.selectedRoofMaterial
},
})

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

@ -792,7 +792,7 @@ export const rectToPolygon = (rect) => {
}
//면형상 선택 클릭시 지붕 패턴 입히기
export function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
const ratio = window.devicePixelRatio || 1
let width = 265 / 10