393 lines
9.3 KiB
JavaScript
393 lines
9.3 KiB
JavaScript
import { atom, selector } from 'recoil'
|
|
import { MENU } from '@/common/common'
|
|
import { outerLineFixState, outerLinePointsState } from '@/store/outerLineAtom'
|
|
import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
|
|
import { basicSettingState } from '@/store/settingAtom'
|
|
|
|
export const canvasState = atom({
|
|
key: 'canvasState',
|
|
default: null,
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const textState = atom({
|
|
key: 'textState',
|
|
default: 'test text',
|
|
})
|
|
|
|
export const canvasZoomState = atom({
|
|
key: 'canvasZoomState',
|
|
default: 100,
|
|
})
|
|
|
|
export const modeState = atom({
|
|
key: 'modeState',
|
|
default: 'default',
|
|
})
|
|
|
|
export const guideModeLineState = atom({
|
|
key: 'guideLineModeState',
|
|
default: false,
|
|
})
|
|
|
|
export const fontFamilyState = atom({
|
|
key: 'fontFamilyState',
|
|
default: 'Noto Sans KR',
|
|
})
|
|
|
|
export const fontSizeState = atom({
|
|
key: 'fontSizeState',
|
|
default: 20,
|
|
})
|
|
|
|
export const canvasSizeState = atom({
|
|
key: 'canvasSize',
|
|
default: {
|
|
vertical: 1000,
|
|
horizontal: 1600,
|
|
},
|
|
})
|
|
|
|
export const sortedPolygonArray = atom({
|
|
key: 'sortedArray',
|
|
default: [],
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const roofState = atom({
|
|
key: 'roof',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const wallState = atom({
|
|
key: 'wall',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const roofPolygonPatternArrayState = atom({
|
|
key: 'roofPolygonPattern',
|
|
default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const roofPolygonArrayState = atom({
|
|
key: 'roofPolygonArray',
|
|
default: [],
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const templateTypeState = atom({
|
|
key: 'templateType',
|
|
default: 0, //1:모임지붕, 2:A타입, 3:B타입
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
//셀 그린 이후에 생성하는 state
|
|
export const drewRoofCellsState = atom({
|
|
key: 'drewRoofCells',
|
|
default: [],
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
// 지붕재 width, height, rafter(서까래), roofStyle을 갖고있고 roofStyle 1은 정방향, 2는 지그재그
|
|
export const roofMaterialState = atom({
|
|
key: 'roofMaterial',
|
|
default: { width: 20, height: 10, rafter: 0, roofStyle: 2 },
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const compassState = atom({
|
|
key: 'compass',
|
|
default: undefined,
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const guideLineState = atom({
|
|
key: 'guideLine',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const currentObjectState = atom({
|
|
key: 'currentObject',
|
|
default: null,
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const horiGuideLinesState = atom({
|
|
key: 'horiGuideLines',
|
|
default: [],
|
|
// dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const vertGuideLinesState = atom({
|
|
key: 'vertGuideLines',
|
|
default: [],
|
|
})
|
|
|
|
export const canvasSettingState = atom({
|
|
key: 'canvasSetting',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
// 현재 지붕 패턴
|
|
export const currentPatternState = atom({
|
|
key: 'currentPattern',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
// 설정
|
|
export const customSettingsState = atom({
|
|
key: 'customSettings',
|
|
default: {},
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
// cad 도면 파일 사용 여부
|
|
export const useCadFileState = atom({
|
|
key: 'useCadFile',
|
|
default: false,
|
|
})
|
|
|
|
// cad 도면 파일 이름
|
|
export const cadFileNameState = atom({
|
|
key: 'cadFileName',
|
|
default: '',
|
|
})
|
|
|
|
// cad 도면 파일 조정 완료
|
|
export const cadFileCompleteState = atom({
|
|
key: 'cadFileComplete',
|
|
default: false,
|
|
})
|
|
|
|
export const useGoogleMapFileState = atom({
|
|
key: 'useGoogleMapFile',
|
|
default: false,
|
|
})
|
|
|
|
// 구글맵 저장 이미지 파일 이름
|
|
export const googleMapFileNameState = atom({
|
|
key: 'googleMapFileName',
|
|
default: '',
|
|
})
|
|
|
|
export const globalCompassState = atom({
|
|
key: 'globalCompass',
|
|
default: 0,
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
// 면형상 배치 모드
|
|
export const surfacePlacementModeState = atom({
|
|
key: 'surfacePlacementMode',
|
|
default: { width: 0, height: 0, areaBoundary: true, inputType: 'free' },
|
|
})
|
|
|
|
// 오브젝트 배치 모드
|
|
export const objectPlacementModeState = atom({
|
|
key: 'objectPlacementMode',
|
|
default: { width: 0, height: 0, areaBoundary: false, inputType: 'free', batchType: 'opening' },
|
|
})
|
|
|
|
export const currentMenuState = atom({
|
|
key: 'currentMenu',
|
|
default: MENU.INITIAL_CANVAS_SETTING,
|
|
})
|
|
|
|
// 수직 수평 모드
|
|
export const verticalHorizontalModeState = atom({
|
|
key: 'verticalHorizontalMode',
|
|
default: true,
|
|
})
|
|
|
|
// 흡착점 모드
|
|
export const adsorptionPointModeState = atom({
|
|
key: 'adsorptionPointModeState',
|
|
default: true,
|
|
})
|
|
// 흡착점 추가모드
|
|
export const adsorptionPointAddModeState = atom({
|
|
key: 'adsorptionPointAddModeState',
|
|
default: false,
|
|
})
|
|
|
|
// 흡착점 범위
|
|
export const adsorptionRangeState = atom({
|
|
key: 'adsorptionRangeState',
|
|
default: 50,
|
|
})
|
|
|
|
// 도면크기 설정
|
|
export const planSizeSettingState = atom({
|
|
key: 'planSizeSettingMode',
|
|
default: { originHorizon: 1600, originVertical: 1600 },
|
|
})
|
|
|
|
// 점,선 그리드 설정
|
|
export const dotLineGridSettingState = atom({
|
|
key: 'gridSettingState',
|
|
default: {
|
|
INTERVAL: {
|
|
type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
|
|
ratioInterval: 910,
|
|
verticalInterval: 910,
|
|
horizontalInterval: 910,
|
|
dimension: 1, // 치수
|
|
},
|
|
DOT: false,
|
|
LINE: false,
|
|
},
|
|
})
|
|
|
|
export const dotLineIntervalSelector = selector({
|
|
key: 'dotLineIntervalSelector',
|
|
get: ({ get }) => {
|
|
const gridSetting = get(dotLineGridSettingState)
|
|
return gridSetting.INTERVAL.type === 1
|
|
? {
|
|
horizontalInterval: Math.round(gridSetting.INTERVAL.horizontalInterval / 10),
|
|
verticalInterval: Math.round(gridSetting.INTERVAL.verticalInterval / 10),
|
|
}
|
|
: {
|
|
horizontalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
|
|
verticalInterval: Math.round((gridSetting.INTERVAL.ratioInterval * gridSetting.INTERVAL.dimension) / 10),
|
|
}
|
|
},
|
|
})
|
|
|
|
// canvas plan 초기 목록
|
|
export const initCanvasPlansState = atom({
|
|
key: 'initCanvasPlans',
|
|
default: [],
|
|
})
|
|
|
|
// 현재 canvas plan
|
|
export const currentCanvasPlanState = atom({
|
|
key: 'currentCanvasPlan',
|
|
default: {},
|
|
})
|
|
|
|
// 전체 canvas plan
|
|
export const plansState = atom({
|
|
key: 'plan',
|
|
default: [],
|
|
})
|
|
|
|
// 변경된 canvas plan 목록
|
|
export const modifiedPlansState = atom({
|
|
key: 'modifiedPlansState',
|
|
default: [],
|
|
})
|
|
// 변경감지 flag
|
|
export const modifiedPlanFlagState = atom({
|
|
key: 'modifiedPlanFlagState',
|
|
default: false,
|
|
})
|
|
|
|
export const tempGridModeState = atom({
|
|
key: 'tempGridModeState',
|
|
default: false,
|
|
})
|
|
|
|
export const textModeState = atom({
|
|
key: 'textModeState',
|
|
default: false,
|
|
})
|
|
|
|
export const canGridOptionSeletor = selector({
|
|
key: 'canGridOptionSeletor',
|
|
get: ({ get }) => {
|
|
const points = get(outerLinePointsState)
|
|
const currentMenu = get(currentMenuState)
|
|
const outerLineFix = get(outerLineFixState)
|
|
return points.length === 0 || outerLineFix
|
|
},
|
|
})
|
|
|
|
export const globalPitchState = atom({
|
|
key: 'globalPitch',
|
|
default: 4,
|
|
})
|
|
|
|
export const pitchSelector = selector({
|
|
key: 'pitchSelector',
|
|
get: ({ get }) => {
|
|
const globalPitch = get(globalPitchState)
|
|
const basicSettingStateValue = get(basicSettingState)
|
|
const roofAngleSet = basicSettingStateValue.roofAngleSet
|
|
if (roofAngleSet === 'slope') {
|
|
return globalPitch
|
|
} else {
|
|
return getDegreeByChon(globalPitch)
|
|
}
|
|
},
|
|
set: ({ get, set }, newValue) => {
|
|
const basicSettingStateValue = get(basicSettingState)
|
|
const roofAngleSet = basicSettingStateValue.roofAngleSet
|
|
if (roofAngleSet === 'slope') {
|
|
set(globalPitchState, newValue)
|
|
} else {
|
|
set(globalPitchState, getChonByDegree(newValue))
|
|
}
|
|
},
|
|
})
|
|
|
|
export const ANGLE_TYPE = {
|
|
SLOPE: 'slope',
|
|
FLAT: 'flat',
|
|
}
|
|
|
|
export const currentAngleTypeSelector = selector({
|
|
key: 'currentAngleTypeSelector',
|
|
get: ({ get }) => {
|
|
const basicSettingStateValue = get(basicSettingState)
|
|
return basicSettingStateValue.roofAngleSet
|
|
},
|
|
})
|
|
|
|
export const pitchTextSelector = selector({
|
|
key: 'pitchTextSelector',
|
|
get: ({ get }) => {
|
|
const basicSettingStateValue = get(basicSettingState)
|
|
const roofAngleSet = basicSettingStateValue.roofAngleSet
|
|
return roofAngleSet === 'slope' ? '寸' : '度'
|
|
},
|
|
})
|
|
|
|
//각도 표시, offset 길이에서는 각도가 한자가 아닌 도형으로 표시되어야 한다.
|
|
export const showAngleUnitSelector = selector({
|
|
key: 'showAngleUnitSelector',
|
|
get: ({ get }) => {
|
|
const basicSettingStateValue = get(basicSettingState)
|
|
const roofAngleSet = basicSettingStateValue.roofAngleSet
|
|
|
|
return roofAngleSet === 'slope' ? '寸' : '°'
|
|
},
|
|
})
|
|
|
|
export const moduleSetupSurfaceState = atom({
|
|
key: 'moduleSetupSurfaceState',
|
|
default: [],
|
|
dangerouslyAllowMutability: true,
|
|
})
|
|
|
|
export const moduleInstSurfaceSelector = selector({
|
|
key: 'moduleInstSurfaceSelector',
|
|
get: ({ get, parentId }) => {
|
|
const moduleSetupSurfaceStateValue = get(moduleSetupSurfaceState)
|
|
return moduleSetupSurfaceStateValue.filter((obj) => obj.parentId === parentId)
|
|
},
|
|
})
|
|
|
|
//셀 그린 이후에 생성하는 state
|
|
export const moduleIsSetupState = atom({
|
|
key: 'moduleIsSetupState',
|
|
default: [],
|
|
dangerouslyAllowMutability: true,
|
|
})
|