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-30 10:53:25 +09:00
parent 9a5ac095ff
commit 34af06eef4
5 changed files with 153 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/common.js
View File

@ -155,10 +155,4 @@ export const SAVE_KEY = [
'originText',
]
export const OBJECT_PROTOTYPE = [
fabric.Line.prototype,
fabric.Polygon.prototype,
// fabric.Text.prototype,
// fabric.IText.prototype,
fabric.Triangle.prototype,
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

27
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -4,15 +4,18 @@ import { useState } from 'react'
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
import { usePopup } from '@/hooks/usePopup'
import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [buttonAct, setButtonAct] = useState(1)
const buttonMenu = [
{ id: 1, name: getMessage('modal.movement.flow.line.move') },
{ id: 2, name: getMessage('modal.movement.flow.line.updown') },
]
const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)
const flowLineProps = {
FLOW_LINE_REF,
}
const updownProps = {
UP_DOWN_REF,
}
return (
<WithDraggable isShow={true} pos={pos}>
@ -25,19 +28,21 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
{buttonType.map((item) => (
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{buttonAct === 1 && <FlowLine />}
{buttonAct === 2 && <Updown />}
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
{type === TYPE.UP_DOWN && <Updown {...updownProps} />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
<button className="btn-frame modal act" onClick={handleSave}>
{getMessage('modal.common.save')}
</button>
</div>
</div>
</div>

54
src/components/floor-plan/modal/movement/type/FlowLine.jsx
View File

@ -1,7 +1,24 @@
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
export default function FlowLine({}) {
const FLOW_LINE_TYPE = {
DOWN_LEFT: 'downLeft',
UP_RIGHT: 'upRight',
}
export default function FlowLine({ FLOW_LINE_REF }) {
const { getMessage } = useMessage()
const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
useEffect(() => {
if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
} else {
FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
}
}, [type])
return (
<>
@ -11,14 +28,28 @@ export default function FlowLine({}) {
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<input
type="radio"
name="radio01"
id="ra01"
defaultChecked={true}
ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
onChange={() => {
setType(FLOW_LINE_TYPE.DOWN_LEFT)
}}
/>
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
<input
type="text"
className="input-origin block"
readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
/>
</div>
</div>
</div>
@ -26,14 +57,27 @@ export default function FlowLine({}) {
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<input
type="radio"
name="radio01"
id="ra02"
ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
onChange={() => {
setType(FLOW_LINE_TYPE.UP_RIGHT)
}}
/>
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
<input
type="text"
className="input-origin block"
readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
/>
</div>
<span className="thin">mm</span>
</div>

44
src/components/floor-plan/modal/movement/type/Updown.jsx
View File

@ -1,7 +1,24 @@
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
export default function Updown({}) {
const UP_DOWN_TYPE = {
UP: 'up',
DOWN: 'down',
}
export default function Updown({ UP_DOWN_REF }) {
const { getMessage } = useMessage()
const [type, setType] = useState(UP_DOWN_TYPE.UP)
useEffect(() => {
if (type === UP_DOWN_TYPE.UP) {
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
UP_DOWN_REF.UP_INPUT_REF.current.focus()
} else {
UP_DOWN_REF.UP_INPUT_REF.current.value = ''
UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
}
}, [type])
return (
<>
@ -11,14 +28,23 @@ export default function Updown({}) {
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<input
type="radio"
name="radio01"
id="ra01"
ref={UP_DOWN_REF.UP_RADIO_REF}
defaultChecked={true}
onChange={() => {
setType(UP_DOWN_TYPE.UP)
}}
/>
<label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
</div>
</div>
</div>
@ -26,14 +52,22 @@ export default function Updown({}) {
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<input
type="radio"
name="radio01"
id="ra02"
ref={UP_DOWN_REF.DOWN_RADIO_REF}
onChange={() => {
setType(UP_DOWN_TYPE.DOWN)
}}
/>
<label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
<input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
</div>
<span className="thin">mm</span>
</div>

48
src/hooks/roofcover/useMovementSetting.js Normal file
View File

@ -0,0 +1,48 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useRef, useState } from 'react'
//동선이동 형 올림 내림
export function useMovementSetting(id) {
const TYPE = {
FLOW_LINE: 'flowLine', // 동선이동
UP_DOWN: 'updown', //형 올림내림
}
const canvas = useRecoilValue(canvasState)
const { closePopup } = usePopup()
const { getMessage } = useMessage()
const buttonType = [
{ id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
{ id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
]
const [type, setType] = useState(TYPE.FLOW_LINE)
const FLOW_LINE_REF = {
DOWN_LEFT_INPUT_REF: useRef(null),
UP_RIGHT_INPUT_REF: useRef(null),
DOWN_LEFT_RADIO_REF: useRef(null),
UP_RIGHT_RADIO_REF: useRef(null),
}
const UP_DOWN_REF = {
UP_INPUT_REF: useRef(null),
DOWN_INPUT_REF: useRef(null),
UP_RADIO_REF: useRef(null),
DOWN_RADIO_REF: useRef(null),
}
const handleSave = () => {}
return {
TYPE,
closePopup,
buttonType,
type,
setType,
FLOW_LINE_REF,
UP_DOWN_REF,
handleSave,
}
}