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-10-18 18:09:48 +09:00
parent ee897ede4d
commit 7e6b8ffff3
4 changed files with 114 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -7,7 +7,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState
import { onlyNumberInputChange } from '@/util/input-utils'
import { fabric } from 'fabric'
import { gridColorState } from '@/store/gridAtom'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { gridDisplaySelector, settingModalGridOptionsState } from '@/store/settingAtom'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
@ -24,6 +24,7 @@ export default function DotLineGrid(props) {
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const gridColor = useRecoilValue(gridColorState)
const canvas = useRecoilValue(canvasState)
const isGridDisplay = useRecoilValue(gridDisplaySelector)
const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
@ -179,6 +180,7 @@ export default function DotLineGrid(props) {
fill: pattern,
selectable: false,
name: 'dotGrid',
visible: isGridDisplay,
},
)
@ -209,6 +211,7 @@ export default function DotLineGrid(props) {
strokeDashArray: [5, 2],
opacity: 0.3,
direction: 'horizontal',
visible: isGridDisplay,
},
)
canvas.add(horizontalLine)
@ -235,6 +238,7 @@ export default function DotLineGrid(props) {
strokeDashArray: [5, 2],
opacity: 0.3,
direction: 'vertical',
visible: isGridDisplay,
},
)
canvas.add(verticalLine)

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

@ -1,10 +1,9 @@
import { useRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
import { useFirstOption } from '@/hooks/option/useFirstOption'
export default function FirstOption() {

7
src/hooks/roofcover/useOuterLineWall.js
View File

@ -30,6 +30,7 @@ import {
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
import { QLine } from '@/components/fabric/QLine'
import { outlineDisplaySelector } from '@/store/settingAtom'
//외벽선 그리기
export function useOuterLineWall(setShowOutlineModal) {
@ -53,6 +54,8 @@ export function useOuterLineWall(setShowOutlineModal) {
const adsorptionRange = useRecoilValue(adsorptionRangeState)
const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
const isOutlineDisplay = useRecoilValue(outlineDisplaySelector)
const length1Ref = useRef(null)
const length2Ref = useRef(null)
const angle1Ref = useRef(null)
@ -253,6 +256,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
} else {
const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
@ -260,6 +264,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
@ -267,6 +272,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
}
}
@ -283,6 +289,7 @@ export function useOuterLineWall(setShowOutlineModal) {
y1: point1.y,
x2: point2.x,
y2: point2.y,
visible: isOutlineDisplay,
})
}

103
src/store/settingAtom.js
View File

@ -15,12 +15,12 @@ export const settingModalFirstOptionsState = atom({
{ id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
],
dimensionDisplay: [
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
{ id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
{ id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
],
option2: [
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true },
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
{ id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
],
@ -57,3 +57,102 @@ export const settingModalGridOptionsState = atom({
],
dangerouslyAllowMutability: true,
})
// 디스플레이 설정 - 할당 표시
export const allocDisplaySelector = selector({
key: 'allocDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'allocDisplay').selected
},
})
// 디스플레이 설정 - 외벽선 표시
export const outlineDisplaySelector = selector({
key: 'outlineDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'outlineDisplay').selected
},
})
// 디스플레이 설정 - 그리드 표시
export const gridDisplaySelector = selector({
key: 'gridDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'gridDisplay').selected
},
})
// 디스플레이 설정 - 지붕선 표시
export const roofLineDisplaySelector = selector({
key: 'lineDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'lineDisplay').selected
},
})
// 디스플레이 설정 - 문자 표시
export const wordDisplaySelector = selector({
key: 'wordDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'wordDisplay').selected
},
})
// 디스플레이 설정 - 회로번호 표시
export const circuitNumDisplaySelector = selector({
key: 'circuitNumDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'circuitNumDisplay').selected
},
})
// 디스플레이 설정 - 흐름 방향 표시
export const flowDisplaySelector = selector({
key: 'flowDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'flowDisplay').selected
},
})
// 디스플레이 설정 - 가대 표시
export const trestleDisplaySelector = selector({
key: 'trestleDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'trestleDisplay').selected
},
})
// 디스플레이 설정 - 집계표 표시
export const totalDisplaySelector = selector({
key: 'totalDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'totalDisplay').selected
},
})
// 디스플레이 설정 - 치수 표시
export const corridorDimensionSelector = selector({
key: 'corridorDimensionSelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
},
})
// 디스플레이 설정 - 화면 표시
export const realDimensionSelector = selector({
key: 'realDimensionSelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
},
})