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

Merge branch 'qcast-pub' into dev

Browse Source
This commit is contained in:
minsik 2024-11-04 16:12:38 +09:00
commit 291109719a
13 changed files with 120 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/context-menu/QContextMenu.jsx
View File

@ -3,12 +3,14 @@ import { useEffect } from 'react'
import '@/styles/contents.scss'
import { useRecoilState } from 'recoil'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import { useTempGrid } from '@/hooks/useTempGrid'
export default function QContextMenu(props) {
const { contextRef, canvasProps, handleKeyup } = props
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
const { tempGridMode, setTempGridMode } = useTempGrid()
let contextType = ''
@ -32,6 +34,7 @@ export default function QContextMenu(props) {
const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고
if (tempGridMode) return
const position = {
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,

4
src/components/common/font/FontSetting.jsx
View File

@ -47,7 +47,7 @@ const fontColors = [
]
export default function FontSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, setIsShow, pos = contextPopupPosition, type } = props
const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@ -83,7 +83,7 @@ export default function FontSetting(props) {
className="modal-close"
onClick={() => {
if (setIsShow) setIsShow(false)
closePopup(id)
closePopup(id, isConfig)
}}
>
닫기

6
src/components/common/popupManager/PopupManager.jsx
View File

@ -5,5 +5,9 @@ import { Fragment } from 'react'
export default function PopupManager() {
const [popup, setPopup] = useRecoilState(popupState)
return popup.children?.map((child) => <Fragment key={child.id}>{child.component}</Fragment>)
return [
...popup?.config.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
...popup?.other.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
]
}

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

@ -51,7 +51,7 @@ export default function CanvasMenu(props) {
const sessionState = useRecoilValue(sessionStore)
const globalLocale = useRecoilValue(globalLocaleStore)
const canvas = useRecoilValue(canvasState)
const { handleZoomClear } = useCanvasEvent()
const { handleZoomClear, handleZoom } = useCanvasEvent()
const { handleMenu } = useMenu()
const { handleEstimateSubmit } = useEstimateController()
@ -132,7 +132,7 @@ export default function CanvasMenu(props) {
const handlePopup = () => {
const id = uuidv4()
addPopup(id, 0, <SettingModal01 id={id} />)
addPopup(id, 1, <SettingModal01 id={id} />, true)
}
useEffect(() => {
@ -204,14 +204,18 @@ export default function CanvasMenu(props) {
<button
className="control-btn minus"
onClick={() => {
canvas.setZoom(canvas.getZoom() - 0.1)
handleZoom(false)
}}
></button>
<span>{canvasZoom}%</span>
<button className="control-btn plus" onClick={handleZoomClear}></button>
<button
className="control-btn plus"
onClick={() => {
handleZoom(true)
}}
></button>
</div>
<div className="btn-from">
<button className="btn07" onClick={handleClear}></button>
<button className="btn08" onClick={handleSaveCanvas}></button>
<button className="btn09"></button>
</div>

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

@ -78,14 +78,14 @@ export default function GridOption() {
// 점 선 그리드 설정 모달
setShowDotLineGridModal(selectedOption.selected)
addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />)
addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />, true)
} else if (selectedOption.id === 3) {
// 흡착점 모드
setAdsorptionPointAddMode(selectedOption.selected)
} else if (selectedOption.id === 4) {
// 그리드 색 설정 모달
setShowColorPickerModal(selectedOption.selected)
addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />, true)
}
setGridOptions(newGridOptions)

21
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -1,4 +1,4 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@ -67,6 +67,7 @@ export default function SecondOption() {
id: fontId,
pos: { x: 745, y: 180 },
setIsShow: setShowFontSettingModal,
isConfig: true,
}
const planSizeProps = {
id: planSizeId,
@ -86,36 +87,41 @@ export default function SecondOption() {
case 'font1': {
//문자 글꼴변경
setShowFontSettingModal(true)
setShowDimensionLineSettingModal(false)
fontProps.type = 'commonText'
fontProps.id = fontId + 1
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
break
}
case 'font2': {
//흐름 방향 글꼴 변경
setShowFontSettingModal(true)
setShowDimensionLineSettingModal(false)
fontProps.type = 'flowText'
fontProps.id = fontId + 2
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />, true)
break
}
case 'font3': {
//치수 글꼴변경
setShowFontSettingModal(true)
setShowDimensionLineSettingModal(false)
fontProps.type = 'lengthText'
fontProps.id = fontId + 3
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />, true)
break
}
case 'font4': {
//회로번호 글꼴변경
setShowFontSettingModal(true)
setShowDimensionLineSettingModal(false)
fontProps.type = 'circuitNumberText'
fontProps.id = fontId
addPopup(fontId, 2, <FontSetting {...fontProps} />)
addPopup(fontId, 2, <FontSetting {...fontProps} />, true)
break
}
@ -123,7 +129,7 @@ export default function SecondOption() {
//치수선 설정
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
@ -134,7 +140,8 @@ export default function SecondOption() {
case 'planSize': {
//도면크기 설정
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
setShowDimensionLineSettingModal(false)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
break
}
}

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

@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil'
import { usePopup } from '@/hooks/usePopup'
export default function SettingModal01(props) {
const { setShowDotLineGridModal, setShowFontSettingModal, id } = props
const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props
console.log(props)
const [buttonAct, setButtonAct] = useState(1)
const { getMessage } = useMessage()
@ -27,7 +27,7 @@ export default function SettingModal01(props) {
<div className={`modal-pop-wrap sm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>
<button className="modal-close" onClick={() => closePopup(id, true)}>
닫기
</button>
</div>

7
src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
View File

@ -87,6 +87,7 @@ export default function DimensionLineSetting(props) {
setFontColor: setOriginFontColor,
fontSize: originFontSize,
setFontSize: setOriginFontSize,
isConfig: true,
id: fontModalId,
pos: {
x: 455,
@ -97,17 +98,17 @@ export default function DimensionLineSetting(props) {
const popupHandle = (type) => {
switch (type) {
case 'color':
addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />, true)
break
case 'font':
addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
addPopup(fontModalId, 3, <FontSetting {...fontProps} />, true)
break
}
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
<button

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

@ -15,14 +15,14 @@ export default function PlanSizeSetting(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xsm`}>
<div className={`modal-pop-wrap xsm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
<button
className="modal-close"
onClick={() => {
setIsShow(false)
closePopup(id)
closePopup(id, true)
}}
>
닫기

15
src/hooks/useCanvasEvent.js
View File

@ -1,4 +1,4 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
@ -18,6 +18,10 @@ export function useCanvasEvent() {
const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
useEffect(() => {
canvas?.setZoom(canvasZoom / 100)
}, [canvasZoom])
// 기본적인 이벤트 필요시 추가
const attachDefaultEventOnCanvas = () => {
removeEventOnCanvas()
@ -365,6 +369,14 @@ export function useCanvasEvent() {
})
}
const handleZoom = (isZoom) => {
if (isZoom) {
setCanvasZoom(canvasZoom + 10)
} else {
setCanvasZoom(canvasZoom - 10)
}
}
const handleZoomClear = () => {
setCanvasZoom(100)
canvas.set({ zoom: 1 })
@ -376,5 +388,6 @@ export function useCanvasEvent() {
setCanvasForEvent,
attachDefaultEventOnCanvas,
handleZoomClear,
handleZoom,
}
}

6
src/hooks/useContextMenu.js
View File

@ -244,7 +244,7 @@ export function useContextMenu() {
if (temp.length > 0) menu = temp
}
handleClick(null, menu)
if (menu) handleClick(null, menu)
}
useEffect(() => {
@ -256,8 +256,6 @@ export function useContextMenu() {
}, [currentContextMenu])
useEffect(() => {
console.log('currentObject', currentObject)
if (currentObject?.name) {
console.log(currentObject?.name)
switch (currentObject.name) {
@ -477,7 +475,7 @@ export function useContextMenu() {
{
id: 'dimensionLineDisplayEdit',
name: getMessage('contextmenu.display.edit'),
component: <DimensionLineSetting id={popupId} />,
component: <DimensionLineSetting id={popupId} isConfig={false} />,
},
],
])

75
src/hooks/usePopup.js
View File

@ -4,47 +4,90 @@ import { contextPopupState, popupState } from '@/store/popupAtom'
export function usePopup() {
const [popup, setPopup] = useRecoilState(popupState)
const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
const addPopup = (id, depth, component) => {
setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
const addPopup = (id, depth, component, isConfig = false) => {
setPopup({
config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],
})
}
const closePopup = (id) => {
const closePopup = (id, isConfig = false) => {
if (contextMenuPopup) setContextMenuPopup(null)
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
if (isConfig) {
setPopup({
config: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
other: popup.other,
})
} else {
setPopup({
config: popup.config,
other: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
})
}
}
const filterPopup = (depth) => {
setPopup({ children: [...filterDepth(depth)] })
setPopup({
config: [...filterDepth(depth)],
other: [],
})
}
const filterChildrenPopup = (id) => {
const target = popup.children.filter((child) => child.id === id)
if (target.length !== 0) {
return popup.children.filter((child) => child.depth <= target[0].depth)
const filterChildrenPopup = (id, isConfig) => {
let target = []
if (isConfig) {
target = popup?.config.filter((child) => child.id === id)
} else {
target = popup?.other.filter((child) => child.id === id)
}
return popup.children
if (target.length !== 0) {
if (isConfig) {
return popup?.config.filter((child) => child.depth <= target[0].depth)
} else {
return popup?.other.filter((child) => child.depth <= target[0].depth)
}
} else {
if (isConfig) {
return popup.config
} else {
return popup.other
}
}
}
const closePopups = (ids) => {
setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
setPopup({
config: [...popup?.config.filter((child) => !ids.includes(child.id))],
other: [...popup?.other.filter((child) => !ids.includes(child.id))],
})
}
const closeAll = () => {
setPopup({ children: [] })
setPopup({
other: [],
config: [],
})
}
const closePrevPopup = () => {
setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
setPopup({
config: [...popup?.slice(popup?.length - 1)],
other: [],
})
}
const filterDepth = (depth) => {
return [...popup.children.filter((child) => child.depth !== depth)]
const filterDepth = (depth, isConfig) => {
if (isConfig) {
return [...popup?.config.filter((child) => child.depth < depth)]
} else {
return [...popup?.other.filter((child) => child.depth < depth)]
}
}
return {
popup,
setPopup,
addPopup,
closePopup,
closePopups,

3
src/store/popupAtom.js
View File

@ -7,7 +7,8 @@ import { atom } from 'recoil'
export const popupState = atom({
key: 'popupState',
default: {
children: [],
config: [],
other: [],
},
dangerouslyAllowMutability: true,
})