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

Merge branch 'dev' into feature/test-jy

Browse Source
This commit is contained in:
Jaeyoung Lee 2024-10-02 11:13:17 +09:00
commit b1c4338a73
30 changed files with 2625 additions and 1252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/common/common.js
View File

@ -53,8 +53,9 @@ export const Mode = {
export const LINE_TYPE = {
WALLLINE: {
/**
* 처마 / 캐라바 / 벽 / 팔작지붕 / 반절처 / 한쪽흐름
* 없음 / 처마 / 캐라바 / 벽 / 팔작지붕 / 반절처 / 한쪽흐름
*/
DEFAULT: 'default',
EAVES: 'eaves',
GABLE: 'gable',
WALL: 'wall',

0
src/components/common/draggable/withDraggable.jsx → src/components/common/draggable/WithDraggable.jsx
View File

57
src/components/floor-plan/CanvasLayout.jsx
View File

@ -3,9 +3,12 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import CanvasFrame from './CanvasFrame'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom'
import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
import { sessionStore } from '@/store/commonAtom'
export default function CanvasLayout() {
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
@ -14,8 +17,11 @@ export default function CanvasLayout() {
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const sessionState = useRecoilValue(sessionStore)
const { getCanvasByObjectNo } = usePlan()
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { getCanvasByObjectNo, delCanvasById } = usePlan()
const handleCurrentPlan = (newCurrentId) => {
if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
@ -38,21 +44,29 @@ export default function CanvasLayout() {
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
// 삭제할 아이디와 다른 아이템만 남김
const filterInitPlans = initCanvasPlans.filter((plan) => plan.id !== id)
setInitCanvasPlans(filterInitPlans)
const filterAddPlans = addCanvasPlans.filter((plan) => plan.id !== id)
setAddCanvasPlans(filterAddPlans)
const combinedPlans = [...filterInitPlans, ...filterAddPlans]
if (combinedPlans.length === 0) {
// 모든 데이터가 삭제된 경우
setPlanNum(0)
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('common.message.delete') })
console.log('[DELETE] canvas-statuses res :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
})
} else {
const lastPlanId = combinedPlans.at(-1).id
if (id !== lastPlanId) {
handleCurrentPlan(lastPlanId)
setAddCanvasPlans(addCanvasPlans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('common.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = [...initCanvasPlans, ...addCanvasPlans].filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) {
handleCurrentPlan(lastPlan.id)
}
}
@ -63,7 +77,7 @@ export default function CanvasLayout() {
}
useEffect(() => {
getCanvasByObjectNo(objectNo).then((res) => {
getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
@ -82,7 +96,18 @@ export default function CanvasLayout() {
{[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
<button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
<span>{plan.name}</span>
<i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
<i
className="close"
onClick={(e) =>
swalFire({
html: getMessage('common.message.confirm.delete') + `</br>${plan.name}`,
type: 'confirm',
confirmFn: () => {
handleDeletePlan(e, plan.id)
},
})
}
></i>
</button>
))}
</div>

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

@ -9,7 +9,8 @@ import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { usePlan } from '@/hooks/usePlan'
import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { useSwal } from '@/hooks/useSwal'
import { canvasState, canvasZoomState, currentMenuState, currentCanvasPlanState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { sessionStore } from '@/store/commonAtom'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
@ -40,6 +41,7 @@ export default function CanvasMenu(props) {
const setCurrentMenu = useSetRecoilState(currentMenuState)
const setPoints = useSetRecoilState(outerLinePointsState)
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const globalLocale = useRecoilValue(globalLocaleStore)
const canvas = useRecoilValue(canvasState)
@ -47,6 +49,7 @@ export default function CanvasMenu(props) {
const { getMessage } = useMessage()
const { saveCanvas } = usePlan()
const { swalFire } = useSwal()
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
const onClickNav = (menu) => {
@ -78,7 +81,13 @@ export default function CanvasMenu(props) {
// 저장버튼(btn08) 클릭 시 호출되는 함수
const handleSaveCanvas = () => {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: () => {
saveCanvas(sessionState.userId)
},
})
}
const handleClear = () => {

8
src/components/floor-plan/FloorPlan.jsx
View File

@ -11,10 +11,12 @@ import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
const [showOutlineModal, setShowOutlineModal] = useState(false)
const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
@ -32,6 +34,7 @@ export default function FloorPlan() {
const outlineProps = {
setShowOutlineModal,
setShowPropertiesSettingModal,
}
const modalProps = {
@ -75,6 +78,10 @@ export default function FloorPlan() {
setShowDotLineGridModal,
}
const propertiesSettingProps = {
setShowPropertiesSettingModal,
}
useEffect(() => {}, [showOutlineModal])
return (
@ -87,6 +94,7 @@ export default function FloorPlan() {
{/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
{showOutlineModal && <WallLineSetting {...outlineProps} />}
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
</div>
</div>
</>

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

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'

2
src/components/floor-plan/modal/grid/GridCopy.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
export default function GridCopy(props) {

2
src/components/floor-plan/modal/grid/GridMove.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
export default function GridMove(props) {

39
src/components/floor-plan/modal/outerlinesetting/Angle.jsx
View File

@ -1,8 +1,11 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
export default function Angle() {
export default function Angle({ props }) {
const { getMessage } = useMessage()
const { angle1, setAngle1, angle1Ref, length1, setLength1, length1Ref } = props
return (
<>
<div className="outline-wrap">
@ -11,16 +14,40 @@ export default function Angle() {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={4} />
<input
type="text"
className="input-origin block"
value={angle1}
ref={angle1Ref}
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
placeholder="45"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={(e) => {
setAngle1(0)
}}
></button>
</div>
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.arrow')}</span>
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={5000} />
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(e) => onlyNumberInputChange(e, setLength1)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength1(0)
}}
></button>
</div>
</div>
<div className="cul-box">

128
src/components/floor-plan/modal/outerlinesetting/Diagonal.jsx
View File

@ -1,7 +1,24 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange } from '@/util/input-utils'
export default function Diagonal() {
export default function Diagonal({ props }) {
const { getMessage } = useMessage()
const {
length1,
setLength1,
length1Ref,
length2,
setLength2,
length2Ref,
outerLineDiagonalLength,
setOuterLineDiagonalLength,
outerLineDiagonalLengthRef,
arrow1,
setArrow1,
arrow2,
setArrow2,
} = props
return (
<>
<div className="outline-wrap">
@ -13,26 +30,77 @@ export default function Diagonal() {
{getMessage('modal.cover.outline.length')}
</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={1000} />
<input
type="text"
className="input-origin block"
value={outerLineDiagonalLength}
ref={outerLineDiagonalLengthRef}
onChange={(e) => onlyNumberInputChange(e, setOuterLineDiagonalLength)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setOuterLineDiagonalLength(0)
}}
></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={5000} />
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(e) => onlyNumberInputChange(e, setLength1)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength1(0)
setLength2(0)
setArrow1('')
setArrow2('')
}}
></button>
</div>
<div className="outline-form">
<span> {getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow1('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow1('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>
@ -40,16 +108,48 @@ export default function Diagonal() {
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '98px' }}>
<input type="text" className="input-origin block" defaultValue={8000} />
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(e) => onlyNumberInputChange(e, setLength2)}
readOnly={true}
placeholder="3000"
/>
</div>
</div>
<div className="outline-form">
<span> {getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow2('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow2('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow2('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow2('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>

173
src/components/floor-plan/modal/outerlinesetting/DoublePitch.jsx
View File

@ -1,7 +1,48 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
import { getDegreeByChon } from '@/util/canvas-util'
export default function DoublePitch() {
export default function DoublePitch({ props }) {
const { getMessage } = useMessage()
const {
angle1,
setAngle1,
angle1Ref,
angle2,
setAngle2,
angle2Ref,
length1,
setLength1,
length1Ref,
length2,
setLength2,
length2Ref,
arrow1,
setArrow1,
arrow2,
setArrow2,
arrow1Ref,
arrow2Ref,
} = props
const getLength2 = () => {
const angle1Value = angle1Ref.current.value
const angle2Value = angle2Ref.current.value
const length1Value = length1Ref.current.value
const arrow1Value = arrow1Ref.current
const arrow2Value = arrow2Ref.current
if (angle1Value !== 0 && length1Value !== 0 && angle2Value !== 0 && arrow1Value !== '') {
const radian1 = (getDegreeByChon(angle1Value) * Math.PI) / 180
const radian2 = (getDegreeByChon(angle2Value) * Math.PI) / 180
return Math.floor((Math.tan(radian1) * length1Value) / Math.tan(radian2))
}
return 0
}
return (
<>
<div className="outline-wrap">
@ -9,26 +50,70 @@ export default function DoublePitch() {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={4} />
<input
type="text"
className="input-origin block"
value={angle1}
ref={angle1Ref}
onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
placeholder="45"
/>
</div>
<button className="reset-btn"></button>
<button className="reset-btn" onClick={() => setAngle1(0)}></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={5000} />
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(e) => onlyNumberInputChange(e, setLength1)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength1(0)
setArrow1('')
}}
></button>
</div>
<div className="outline-form">
<span>{getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow1('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow1('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>
@ -38,26 +123,80 @@ export default function DoublePitch() {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={6} />
<input
type="text"
className="input-origin block"
value={angle2}
ref={angle2Ref}
onChange={(e) => {
onlyNumberWithDotInputChange(e, setAngle2)
console.log(getLength2())
setLength2(getLength2())
}}
placeholder="45"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setAngle2(0)
}}
></button>
</div>
</div>
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={3000} />
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(e) => onlyNumberInputChange(e, setLength2)}
readOnly={true}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength2(0)
setArrow2('')
}}
></button>
</div>
<div className="outline-form">
<span>{getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow2('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow2('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow2('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow2('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>

40
src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
View File

@ -1,12 +1,12 @@
'use client'
import { useMessage } from '@/hooks/useMessage'
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
import { onlyNumberInputChange } from '@/util/input-utils'
export default function OuterLineWall(props) {
export default function OuterLineWall({ props }) {
const { getMessage } = useMessage()
const { length1, setLength1, length1Ref, arrow1, setArrow1 } = useOuterLineWall()
const { length1, setLength1, length1Ref, arrow1, setArrow1 } = props
return (
<div className="outline-wrap">
<div className="outline-inner">
@ -22,15 +22,39 @@ export default function OuterLineWall(props) {
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button className="reset-btn" onClick={() => setLength1(0)}></button>
</div>
<div className="outline-form">
<span>{getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className={`direction up ${arrow1 === '↑' ? 'act' : ''}`} onClick={() => setArrow1('↑')}></button>
<button className={`direction down ${arrow1 === '↓' ? 'act' : ''}`} onClick={() => setArrow1('↓')}></button>
<button className={`direction left ${arrow1 === '←' ? 'act' : ''}`} onClick={() => setArrow1('←')}></button>
<button className={`direction right ${arrow1 === '→' ? 'act' : ''}`} onClick={() => setArrow1('→')}></button>
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow1('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow1('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>

56
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx Normal file
View File

@ -0,0 +1,56 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { usePropertiesSetting } from '@/hooks/roofcover/usePropertiesSetting'
export default function PropertiesSetting(props) {
const { getMessage } = useMessage()
const { setShowPropertiesSettingModal } = props
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting()
return (
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
<button
className="modal-close"
onClick={() => {
closeModal(setShowPropertiesSettingModal)
}}
>
닫기
</button>
</div>
<div className="modal-body">
<div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
<div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('setting')}</div>
<div className="setting-btn-wrap">
<button className="setting-btn green mr5" onClick={handleSetEaves}>
{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
</button>
<button className="setting-btn blue" onClick={handleSetGable}>
{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
</button>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>
<button
className="btn-frame modal act"
onClick={() => {
handleFix()
setShowPropertiesSettingModal(false)
}}
>
{getMessage('modal.cover.outline.finish')}
</button>
</div>
</div>
</div>
</WithDraggable>
)
}

101
src/components/floor-plan/modal/outerlinesetting/RightAngle.jsx
View File

@ -1,24 +1,63 @@
import { useMessage } from '@/hooks/useMessage'
import { onlyNumberInputChange } from '@/util/input-utils'
export default function RightAngle() {
export default function RightAngle({ props }) {
const { getMessage } = useMessage()
const { length1, setLength1, length1Ref, length2, setLength2, length2Ref, arrow1, setArrow1, arrow2, setArrow2 } = props
return (
<div className="outline-wrap">
<div className="outline-inner">
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={1000} />
<input
type="text"
className="input-origin block"
value={length1}
ref={length1Ref}
onChange={(e) => onlyNumberInputChange(e, setLength1)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength1(0)
setArrow1('')
}}
></button>
</div>
<div className="outline-form">
<span>{getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow1('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow1('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>
@ -26,17 +65,53 @@ export default function RightAngle() {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input type="text" className="input-origin block" defaultValue={1000} />
<input
type="text"
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(e) => onlyNumberInputChange(e, setLength2)}
placeholder="3000"
/>
</div>
<button className="reset-btn"></button>
<button
className="reset-btn"
onClick={() => {
setLength2(0)
}}
></button>
</div>
<div className="outline-form">
<span>{getMessage('modal.cover.outline.arrow')}</span>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
<button
className={`direction up ${arrow2 === '↑' ? 'act' : ''}`}
onClick={() => {
setArrow2('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
}}
></button>
<button
className={`direction down ${arrow2 === '↓' ? 'act' : ''}`}
onClick={() => {
setArrow2('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
}}
></button>
<button
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
onClick={() => {
setArrow2('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
}}
></button>
<button
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
onClick={() => {
setArrow2('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
}}
></button>
</div>
</div>
</div>

120
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -1,6 +1,6 @@
'use client'
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
@ -11,9 +11,102 @@ import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePi
import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
export default function WallLineSetting(props) {
const { setShowOutlineModal } = props
const { setShowOutlineModal, setShowPropertiesSettingModal } = props
const { getMessage } = useMessage()
const { type, setType, handleFix, handleRollback } = useOuterLineWall()
const {
length1,
setLength1,
length2,
setLength2,
length1Ref,
length2Ref,
arrow1,
setArrow1,
arrow2,
setArrow2,
angle1,
setAngle1,
angle1Ref,
angle2,
setAngle2,
angle2Ref,
type,
setType,
arrow1Ref,
arrow2Ref,
outerLineDiagonalLength,
setOuterLineDiagonalLength,
outerLineDiagonalLengthRef,
handleRollback,
handleFix,
} = useOuterLineWall()
const outerLineProps = {
length1,
setLength1,
length1Ref,
arrow1,
setArrow1,
}
const rightAngleProps = {
length1,
setLength1,
length1Ref,
length2,
setLength2,
length2Ref,
arrow1,
setArrow1,
arrow2,
setArrow2,
}
const doublePitchProps = {
angle1,
setAngle1,
angle1Ref,
angle2,
setAngle2,
angle2Ref,
length1,
setLength1,
length1Ref,
length2,
setLength2,
length2Ref,
arrow1,
setArrow1,
arrow2,
setArrow2,
arrow1Ref,
arrow2Ref,
}
const angleProps = {
angle1,
setAngle1,
angle1Ref,
length1,
setLength1,
length1Ref,
}
const diagonalLineProps = {
length1,
setLength1,
length1Ref,
length2,
setLength2,
length2Ref,
outerLineDiagonalLength,
setOuterLineDiagonalLength,
outerLineDiagonalLengthRef,
arrow1,
setArrow1,
arrow2,
setArrow2,
}
return (
<WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
@ -55,24 +148,33 @@ export default function WallLineSetting(props) {
{getMessage('modal.cover.outline.diagonal')}
</button>
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.cover.outline.setting')}</div>
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
<OuterLineWall />
<OuterLineWall props={outerLineProps} />
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
<RightAngle />
<RightAngle props={rightAngleProps} />
) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
<DoublePitch />
<DoublePitch props={doublePitchProps} />
) : type === OUTER_LINE_TYPE.ANGLE ? (
<Angle />
<Angle props={angleProps} />
) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
<Diagonal />
<Diagonal props={diagonalLineProps} />
) : (
<></>
)}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>
<button className="btn-frame modal act" onClick={handleFix}>
<button
className="btn-frame modal act"
onClick={() => {
handleFix(setShowOutlineModal)
setShowPropertiesSettingModal(true)
}}
>
{getMessage('modal.cover.outline.fix')}
</button>
</div>

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

@ -2,7 +2,7 @@
import { useState } from 'react'
import FirstOption from './FirstOption'
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
import { useMessage } from '@/hooks/useMessage'
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'

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

@ -1,5 +1,5 @@
import { useEffect, useRef } from 'react'
import { distanceBetweenPoints } from '@/util/canvas-util'
import { distanceBetweenPoints, getDegreeByChon } from '@/util/canvas-util'
import { useRecoilState, useRecoilValue } from 'recoil'
import {
adsorptionPointAddModeState,
@ -16,14 +16,17 @@ import { useTempGrid } from '@/hooks/useTempGrid'
import { usePolygon } from '@/hooks/usePolygon'
import {
outerLineAngle1State,
outerLineAngle2State,
outerLineArrow1State,
outerLineArrow2State,
outerLineDiagonalState,
outerLineLength1State,
outerLineLength2State,
outerLinePointsState,
outerLineTypeState,
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
export function useOuterLineWall() {
const canvas = useRecoilValue(canvasState)
@ -33,6 +36,7 @@ export function useOuterLineWall() {
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()
const { addPolygonByLines } = usePolygon()
const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
@ -42,28 +46,31 @@ export function useOuterLineWall() {
const length1Ref = useRef(null)
const length2Ref = useRef(null)
const angle1Ref = useRef(null)
const angle2Ref = useRef(null)
const [length1, setLength1] = useRecoilState(outerLineLength1State)
const [length2, setLength2] = useRecoilState(outerLineLength2State)
const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
const [points, setPoints] = useRecoilState(outerLinePointsState)
const [type, setType] = useRecoilState(outerLineTypeState)
const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
const [angle2, setAngle2] = useRecoilState(outerLineAngle2State)
const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
const arrow1Ref = useRef(arrow1)
const arrow2Ref = useRef(arrow2)
const outerLineDiagonalLengthRef = useRef(null)
const isFix = useRef(false)
const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
const closeModalFn = useRef(null)
useEffect(() => {
if (adsorptionPointAddMode || tempGridMode) {
return
}
removeMouseEvent('mouse:down', mouseDown)
addCanvasMouseEventListener('mouse:down', mouseDown)
clear()
return () => {
removeAllMouseEventListeners()
}
}, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
useEffect(() => {
@ -75,9 +82,8 @@ export function useOuterLineWall() {
}, [arrow2])
useEffect(() => {
removeAllDocumentEventListeners()
addDocumentEventListener('keydown', document, keydown[type])
clear()
addDocumentEventListener('keydown', document, keydown[type])
}, [type])
const clear = () => {
@ -88,6 +94,9 @@ export function useOuterLineWall() {
setArrow2('')
setAngle1(0)
setAngle2(0)
setOuterLineDiagonalLength(0)
}
const mouseDown = (e) => {
@ -143,14 +152,13 @@ export function useOuterLineWall() {
canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'startPoint'))
// point가 변경 될때마다 이벤트 리스너를 제거하고 다시 등록
removeAllDocumentEventListeners()
addDocumentEventListener('keydown', document, keydown[type])
if (points.length === 0) {
removeAllDocumentEventListeners()
return
}
addDocumentEventListener('keydown', document, keydown[type])
if (points.length === 1) {
const point = new fabric.Circle({
radius: 5,
@ -174,6 +182,13 @@ export function useOuterLineWall() {
const lastPoint = points[points.length - 1]
const firstPoint = points[0]
if (isFix.current) {
canvas?.renderAll()
closeModalFn.current(false)
removeAllMouseEventListeners()
removeAllDocumentEventListeners()
}
if (points.length < 3) {
return
}
@ -241,7 +256,7 @@ export function useOuterLineWall() {
stroke: 'black',
strokeWidth: 3,
idx: idx,
selectable: false,
selectable: true,
name: 'outerLine',
})
}
@ -261,7 +276,26 @@ export function useOuterLineWall() {
}
// 직각 완료될 경우 확인
const checkRightAngle = () => {
const checkRightAngle = (direction) => {
const activeElem = document.activeElement
const canDirection =
direction === '↓' || direction === '↑'
? arrow1Ref.current === '←' || arrow1Ref.current === '→'
: arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
setArrow1(direction)
arrow1Ref.current = direction
length2Ref.current.focus()
} else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
if (!canDirection) {
return
}
setArrow2(direction)
arrow2Ref.current = direction
}
const length1Num = Number(length1Ref.current.value) / 10
const length2Num = Number(length2Ref.current.value) / 10
@ -332,6 +366,191 @@ export function useOuterLineWall() {
}
}
//이구배 완료될 경우 확인 ↓, ↑, ←, →
const checkDoublePitch = (direction) => {
const activeElem = document.activeElement
const canDirection =
direction === '↓' || direction === '↑'
? arrow1Ref.current === '←' || arrow1Ref.current === '→'
: arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
setArrow1(direction)
arrow1Ref.current = direction
angle2Ref.current.focus()
} else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
if (!canDirection) {
return
}
setArrow2(direction)
arrow2Ref.current = direction
}
const angle1Value = angle1Ref.current.value
const angle2Value = angle2Ref.current.value
const length1Value = length1Ref.current.value
const length2Value = length2Ref.current.value
const arrow1Value = arrow1Ref.current
const arrow2Value = arrow2Ref.current
if (angle1Value !== 0 && length1Value !== 0 && angle2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
if (arrow1Value === '↓' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
})
} else if (arrow1Value === '←' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
})
} else if (arrow1Value === '←' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
})
}
angle1Ref.current.focus()
}
}
//대각선 완료될 경우 확인
const checkDiagonal = (direction) => {
const activeElem = document.activeElement
const canDirection =
direction === '↓' || direction === '↑'
? arrow1Ref.current === '←' || arrow1Ref.current === '→'
: arrow1Ref.current === '↓' || arrow1Ref.current === '↑'
if (activeElem === length1Ref.current) {
setArrow1(direction)
arrow1Ref.current = direction
} else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
if (!canDirection) {
return
}
setArrow2(direction)
arrow2Ref.current = direction
}
const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이
const length1Value = length1Ref.current.value
const arrow1Value = arrow1Ref.current
const arrow2Value = arrow2Ref.current
const getLength2 = () => {
return Math.floor(Math.sqrt(diagonalLength ** 2 - length1Value ** 2))
}
const length2Value = getLength2()
console.log(length2Value)
if (diagonalLength !== 0 && length1Value !== 0 && arrow1Value !== '') {
setLength2(getLength2())
length2Ref.current.focus()
}
if (length1Value !== 0 && length2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
if (arrow1Value === '↓' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y - length2Value / 10,
},
]
})
}
}
}
const keydown = {
outerLine: (e) => {
if (points.length === 0) {
@ -411,75 +630,52 @@ export function useOuterLineWall() {
switch (key) {
case 'Down': // IE/Edge에서 사용되는 값
case 'ArrowDown': {
if (activeElem === length1Ref.current) {
setArrow1('↓')
arrow1Ref.current = '↓'
length2Ref.current.focus()
} else if (activeElem === length2Ref.current) {
if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
break
}
setArrow2('↓')
arrow2Ref.current = '↓'
checkRightAngle()
}
checkRightAngle('↓')
break
}
case 'Up': // IE/Edge에서 사용되는 값
case 'ArrowUp':
if (activeElem === length1Ref.current) {
setArrow1('↑')
arrow1Ref.current = '↑'
length2Ref.current.focus()
} else if (activeElem === length2Ref.current) {
if (arrow1Ref.current === '↓' || arrow1Ref.current === '↑') {
break
}
setArrow2('↑')
arrow2Ref.current = '↑'
checkRightAngle()
}
checkRightAngle('↑')
break
case 'Left': // IE/Edge에서 사용되는 값
case 'ArrowLeft':
if (activeElem === length1Ref.current) {
setArrow1('←')
arrow1Ref.current = '←'
length2Ref.current.focus()
} else if (activeElem === length2Ref.current) {
if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
break
}
setArrow2('←')
arrow2Ref.current = '←'
checkRightAngle()
}
checkRightAngle('←')
break
case 'Right': // IE/Edge에서 사용되는 값
case 'ArrowRight':
if (activeElem === length1Ref.current) {
setArrow1('→')
arrow1Ref.current = '→'
length2Ref.current.focus()
} else if (activeElem === length2Ref.current) {
if (arrow1Ref.current === '←' || arrow1Ref.current === '→') {
break
}
setArrow2('→')
arrow2Ref.current = '→'
checkRightAngle()
}
checkRightAngle('→')
break
}
},
leeGubae: (e) => {
console.log('leegubae')
doublePitch: (e) => {
if (points.length === 0) {
return
}
const key = e.key
switch (key) {
case 'Down': // IE/Edge에서 사용되는 값
case 'ArrowDown': {
checkDoublePitch('↓')
break
}
case 'Up': // IE/Edge에서 사용되는 값
case 'ArrowUp':
checkDoublePitch('↑')
break
case 'Left': // IE/Edge에서 사용되는 값
case 'ArrowLeft':
checkDoublePitch('←')
break
case 'Right': // IE/Edge에서 사용되는 값
case 'ArrowRight':
checkDoublePitch('→')
break
}
},
angle: (e) => {
if (points.length === 0) {
return
}
const key = e.key
switch (key) {
case 'Enter': {
@ -501,7 +697,30 @@ export function useOuterLineWall() {
}
},
diagonalLine: (e) => {
console.log('diagonalLine')
if (points.length === 0) {
return
}
const key = e.key
switch (key) {
case 'Down': // IE/Edge에서 사용되는 값
case 'ArrowDown': {
checkDiagonal('↓')
break
}
case 'Up': // IE/Edge에서 사용되는 값
case 'ArrowUp':
checkDiagonal('↑')
break
case 'Left': // IE/Edge에서 사용되는 값
case 'ArrowLeft':
checkDiagonal('←')
break
case 'Right': // IE/Edge에서 사용되는 값
case 'ArrowRight':
checkDiagonal('→')
break
}
},
}
@ -513,7 +732,7 @@ export function useOuterLineWall() {
setPoints((prev) => prev.slice(0, prev.length - 1))
}
const handleFix = () => {
const handleFix = (fn) => {
if (points.length < 3) {
return
}
@ -541,6 +760,9 @@ export function useOuterLineWall() {
setPoints((prev) => {
return [...prev, { x: prev[0].x, y: prev[0].y }]
})
isFix.current = true
closeModalFn.current = fn
}
return {
@ -558,6 +780,15 @@ export function useOuterLineWall() {
setArrow2,
arrow1Ref,
arrow2Ref,
angle1,
setAngle1,
angle1Ref,
angle2,
setAngle2,
angle2Ref,
outerLineDiagonalLength,
setOuterLineDiagonalLength,
outerLineDiagonalLengthRef,
type,
setType,
handleFix,

129
src/hooks/roofcover/usePropertiesSetting.js Normal file
View File

@ -0,0 +1,129 @@
import { useEffect, useRef } from 'react'
import { LINE_TYPE } from '@/common/common'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
export function usePropertiesSetting() {
const currentLine = useRef(null)
const currentIdx = useRef(-1)
const canvas = useRecoilValue(canvasState)
useEffect(() => {
selectNextLine()
}, [])
const handleSetEaves = () => {
currentLine.current.set({
stroke: '#45CD7D',
strokeWidth: 4,
attributes: {
offset: 500,
type: LINE_TYPE.WALLLINE.EAVES,
pitch: 4,
},
})
canvas.renderAll()
selectNextLine()
}
const handleSetGable = () => {
currentLine.current.set({
stroke: '#3FBAE6',
strokeWidth: 4,
attributes: {
offset: 300,
type: LINE_TYPE.WALLLINE.GABLE,
},
})
canvas.renderAll()
selectNextLine()
}
const selectNextLine = () => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
currentIdx.current++
if (currentIdx.current >= lines.length) {
currentIdx.current = lines.length
currentLine.current = lines[currentIdx.current - 1]
return
}
currentLine.current = lines[currentIdx.current]
currentLine.current.set({
stroke: '#EA10AC',
strokeWidth: 4,
})
canvas.renderAll()
}
const selectPrevLine = () => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
currentIdx.current--
if (currentIdx.current <= -1) {
currentIdx.current = -1
selectNextLine()
return
} else {
lines.forEach((line, index) => {
if (index >= currentIdx.current) {
delete line.attributes
line.set({
stroke: '#000000',
strokeWidth: 4,
})
}
currentIdx.current--
canvas.renderAll()
selectNextLine()
})
}
}
const handleRollback = () => {
selectPrevLine()
}
const handleFix = () => {
if (!confirm('외벽선 속성 설정을 완료하시겠습니까?')) {
return
}
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
lines.forEach((line) => {
line.set({
attributes: line.attributes ? line.attributes : { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
stroke: '#000000',
strokeWidth: 4,
})
})
canvas.renderAll()
}
const closeModal = (fn) => {
if (!confirm('외벽선 속성 설정을 종료 하시겠습니까?')) {
return
}
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
lines.forEach((line) => {
line.set({
attributes: { offset: 0, type: LINE_TYPE.WALLLINE.WALL },
stroke: '#000000',
strokeWidth: 4,
})
})
canvas.renderAll()
fn(false)
}
return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }
}

2
src/hooks/useAdsorptionPoint.js
View File

@ -26,7 +26,7 @@ export function useAdsorptionPoint() {
top: pointer.y - 3,
x: pointer.x,
y: pointer.y,
selectable: false,
selectable: true,
name: 'adsorptionPoint',
})

6
src/hooks/useAxios.js
View File

@ -79,5 +79,9 @@ export function useAxios(lang = '') {
.catch(console.error)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, del }
const promiseDel = async ({ url }) => {
return await getInstances(url).delete(url)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, del, promiseDel }
}

9
src/hooks/useCanvas.js
View File

@ -36,6 +36,7 @@ export function useCanvas(id) {
setCanvas(c)
setCanvasForEvent(c)
attachDefaultEventOnCanvas()
return () => {
// c.dispose()
@ -45,7 +46,6 @@ export function useCanvas(id) {
useEffect(() => {
// canvas 사이즈가 변경되면 다시
attachDefaultEventOnCanvas()
}, [canvasSize])
useEffect(() => {
@ -91,6 +91,13 @@ export function useCanvas(id) {
// settings for all canvas in the app
fabric.Object.prototype.transparentCorners = false
fabric.Object.prototype.id = uuidv4()
fabric.Object.prototype.selectable = true
fabric.Object.prototype.lockMovementX = true
fabric.Object.prototype.lockMovementY = true
fabric.Object.prototype.lockRotation = true
fabric.Object.prototype.lockScalingX = true
fabric.Object.prototype.lockScalingY = true
fabric.Object.prototype.cornerColor = '#2BEBC8'
fabric.Object.prototype.cornerStyle = 'rect'
fabric.Object.prototype.cornerStrokeColor = '#2BEBC8'

1
src/hooks/useDotLineGrid.js
View File

@ -6,6 +6,7 @@ import { gridColorState } from '@/store/gridAtom'
export function useDotLineGrid() {
const canvas = useRecoilValue(canvasState)
const gridColor = useRecoilValue(gridColorState)
const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격

44
src/hooks/useEvent.js
View File

@ -1,24 +1,16 @@
import { useEffect, useRef } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import {
adsorptionPointAddModeState,
adsorptionPointModeState,
adsorptionRangeState,
canvasState,
canvasZoomState,
currentMenuState,
} from '@/store/canvasAtom'
import { canvasState, canvasZoomState, currentMenuState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
import { calculateDistance, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useMouse } from '@/hooks/useMouse'
import { useDotLineGrid } from '@/hooks/useDotLineGrid'
import { useTempGrid } from '@/hooks/useTempGrid'
export function useEvent() {
const canvas = useRecoilValue(canvasState)
const currentMenu = useRecoilValue(currentMenuState)
const keyboardEventListeners = useRef([])
const documentEventListeners = useRef([])
const mouseEventListeners = useRef([])
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
@ -30,9 +22,8 @@ export function useEvent() {
if (!canvas) {
return
}
removeAllMouseEventListeners()
removeAllDocumentEventListeners()
removeAllMouseEventListeners()
/**
* wheelEvent
*/
@ -193,13 +184,14 @@ export function useEvent() {
}
const addCanvasMouseEventListener = (eventType, handler) => {
canvas.off(eventType)
canvas.on(eventType, handler)
mouseEventListeners.current.push({ eventType, handler })
}
const removeAllMouseEventListeners = () => {
mouseEventListeners.current.forEach(({ eventType, handler }) => {
canvas.off(eventType, handler)
canvas.off(eventType)
})
mouseEventListeners.current.length = 0 // 배열 초기화
}
@ -211,24 +203,36 @@ export function useEvent() {
* @param handler
*/
const addDocumentEventListener = (eventType, element, handler) => {
removeDocumentEvent(eventType)
element.addEventListener(eventType, handler)
keyboardEventListeners.current.push({ eventType, element, handler })
documentEventListeners.current.push({ eventType, element, handler })
}
/**
* document에 등록되는 event 제거
*/
const removeAllDocumentEventListeners = () => {
keyboardEventListeners.current.forEach(({ eventType, element, handler }) => {
documentEventListeners.current.forEach(({ eventType, element, handler }) => {
element.removeEventListener(eventType, handler)
})
keyboardEventListeners.current.length = 0 // 배열 초기화
documentEventListeners.current.length = 0 // 배열 초기화
}
const removeMouseEvent = (type, handler) => {
const removeMouseEvent = (type) => {
mouseEventListeners.current = mouseEventListeners.current.filter((event) => {
if (event.type === type && event.handler === handler) {
canvas.off(type, handler)
if (event.eventType === type) {
canvas.off(type, event.handler)
return false
}
return true
})
}
const removeDocumentEvent = (type) => {
documentEventListeners.current = documentEventListeners.current.filter((event) => {
if (event.eventType === type) {
console.log(type)
event.element.removeEventListener(type, event.handler)
return false
}
return true

1
src/hooks/useLine.js
View File

@ -38,6 +38,7 @@ export const useLine = () => {
const removeLine = (line) => {
removeLineText(line)
canvas?.remove(line)
canvas?.renderAll()
}
const removeLineText = (line) => {

161
src/hooks/useMode.js
View File

@ -39,6 +39,7 @@ import * as turf from '@turf/turf'
import { INPUT_TYPE, Mode } from '@/common/common'
import { m } from 'framer-motion'
import { set } from 'react-hook-form'
import { FaWineGlassEmpty } from 'react-icons/fa6'
export function useMode() {
const [mode, setMode] = useRecoilState(modeState)
@ -4851,6 +4852,12 @@ export function useMode() {
)
}
const coordToTurfPolygon = (points) => {
const coordinates = points.map((point) => [point.x, point.y])
coordinates.push(coordinates[0])
return turf.polygon([coordinates])
}
/**
* trestle에서 영역을 가져와 mouse:move 이벤트로 해당 영역에 진입했을때 booleanPointInPolygon 로 진입여부를 확인
* 확인 후 셀을 이동시킴
@ -4859,29 +4866,19 @@ export function useMode() {
const trestlePolygons = canvas?.getObjects().filter((obj) => obj.name === 'trestle') //가대를 가져옴
if (trestlePolygons.length !== 0) {
let lastPointPosition = { x: 0, y: 0 }
let fabricPolygon = null
let inside = false
let turfPolygon
let manualDrawCells = drewRoofCells //
let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
let direction
canvas.on('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
const turfPoint = turf.point([mousePoint.x, mousePoint.y])
for (let i = 0; i < trestlePolygons.length; i++) {
turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
if (turf.booleanPointInPolygon(turfPoint, turfPolygon)) {
//turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
const direction = trestlePolygons[i].direction //도형의 방향
let width = direction === 'south' || direction === 'north' ? 172.2 : 113.4
let height = direction === 'south' || direction === 'north' ? 113.4 : 172.2
if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
let isDrawing = false
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
direction = trestlePolygons[i].direction //도형의 방향
let width = direction === 'south' || direction === 'north' ? 172 : 113
let height = direction === 'south' || direction === 'north' ? 113 : 172
const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
@ -4890,9 +4887,21 @@ export function useMode() {
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
]
const turfPoints = coordToTurfPolygon(points)
if (turf.booleanWithin(turfPoints, turfPolygon)) {
//turf에 보면 폴리곤안에 포인트가 있는지 함수가 있다
// if (Math.abs(mousePoint.x - lastPointPosition.x) >= 5 || Math.abs(mousePoint.y - lastPointPosition.y) >= 5) {
let isDrawing = false
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tmpCell')) //움직일때 일단 지워가면서 움직임
fabricPolygon = new QPolygon(points, {
fill: '#BFFD9F',
stroke: 'black',
// stroke: 'black',
// strokeWidth: 1,
selectable: false, // 선택 가능하게 설정
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
@ -4905,12 +4914,77 @@ export function useMode() {
})
canvas?.add(fabricPolygon) //움직여가면서 추가됨
lastPointPosition = { x: mousePoint.x, y: mousePoint.y }
/**
* 스냅기능
*/
let snapDistance = 20
const bigLeft = trestlePolygons[i].left
const bigTop = trestlePolygons[i].top
const bigRight = bigLeft + trestlePolygons[i].width * trestlePolygons[i].scaleX
const bigBottom = bigTop + trestlePolygons[i].height * trestlePolygons[i].scaleY
const bigCenter = (bigTop + bigTop + trestlePolygons[i].height) / 2
// 작은 폴리곤의 경계 좌표 계산
const smallLeft = fabricPolygon.left
const smallTop = fabricPolygon.top
const smallRight = smallLeft + fabricPolygon.width * fabricPolygon.scaleX
const smallBottom = smallTop + fabricPolygon.height * fabricPolygon.scaleY
const smallCenter = smallLeft + (fabricPolygon.width * fabricPolygon.scaleX) / 2
// 위쪽 변에 스냅
if (Math.abs(smallTop - bigTop) < snapDistance) {
fabricPolygon.top = bigTop
}
// 아래쪽 변에 스냅
if (Math.abs(smallTop + fabricPolygon.height * fabricPolygon.scaleY - (bigTop + trestlePolygons[i].height)) < snapDistance) {
fabricPolygon.top = bigTop + trestlePolygons[i].height - fabricPolygon.height * fabricPolygon.scaleY
}
// 왼쪽변에 스냅
if (Math.abs(smallLeft - bigLeft) < snapDistance) {
fabricPolygon.left = bigLeft
}
//오른쪽 변에 스냅
if (Math.abs(smallRight - bigRight) < snapDistance) {
fabricPolygon.left = bigRight - fabricPolygon.width * fabricPolygon.scaleX
}
if (direction === 'south' || direction === 'north') {
// 모듈왼쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallLeft - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2
}
// 모듈이 가운데가 세로중앙선에 붙게 스냅
if (Math.abs(smallCenter - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - (fabricPolygon.width * fabricPolygon.scaleX) / 2
}
// 모듈오른쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallRight - (bigLeft + trestlePolygons[i].width / 2)) < snapDistance) {
fabricPolygon.left = bigLeft + trestlePolygons[i].width / 2 - fabricPolygon.width * fabricPolygon.scaleX
}
} else {
// 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + fabricPolygon.height / 2 - bigCenter) < snapDistance) {
fabricPolygon.top = bigCenter - fabricPolygon.height / 2
}
if (Math.abs(smallTop - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
fabricPolygon.top = bigTop + trestlePolygons[i].height / 2
}
// 모듈 밑면이 가로중앙선에 스냅
if (Math.abs(smallBottom - (bigTop + trestlePolygons[i].height / 2)) < snapDistance) {
fabricPolygon.top = bigTop + trestlePolygons[i].height / 2 - fabricPolygon.height * fabricPolygon.scaleY
}
}
fabricPolygon.setCoords()
canvas?.renderAll()
inside = true
break
} else {
inside = false
}
@ -4926,20 +5000,26 @@ export function useMode() {
if (!inside) return
if (fabricPolygon) {
const turfCellPolygon = polygonToTurfPolygon(fabricPolygon)
fabricPolygon.setCoords() //좌표 재정렬
if (turf.booleanWithin(turfCellPolygon, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
manualDrawCells.forEach((cell) => {
console.log('cells', cell.points)
})
console.log('turfCellPolygon', turfCellPolygon.geometry.coordinates)
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(turfCellPolygon, polygonToTurfPolygon(cell)))
if (!isOverlap) {
//안겹치면 넣는다
fabricPolygon.set({ name: 'cell' })
fabricPolygon.setCoords()
fabricPolygon.set({ name: 'cell' })
manualDrawCells.push(fabricPolygon)
} else {
alert('셀끼리 겹치면 안되죠?')
}
} else {
alert('나갔으요!!')
// } else {
// alert('나갔으요!!')
}
setDrewRoofCells(manualDrawCells)
}
@ -5016,27 +5096,6 @@ export function useMode() {
// console.log('bbox', bbox)
const boxes = []
const installedCellsArray = []
for (let x = bbox[0]; x < bbox[2]; x += width) {
for (let y = bbox[1]; y < bbox[3]; y += height) {
const box = turf.polygon([
[
[x, y],
[x + width, y],
[x + width, y + height],
[x, y + height],
[x, y],
],
])
if (turf.booleanWithin(box, turfTrestlePolygon)) {
boxes.push(box)
}
}
}
for (let col = 0; col <= cols; col++) {
for (let row = 0; row <= rows; row++) {
let x = 0,
@ -5086,20 +5145,6 @@ export function useMode() {
const squarePolygon = turf.polygon([square])
// console.log('turfTrestlePolygon', turfTrestlePolygon)
// console.log('squarePolygon', squarePolygon)
const areaSize = turf.area(turfTrestlePolygon)
// console.log('areaSize', areaSize)
const objSize = turf.area(squarePolygon)
// console.log('objSize', objSize)
const maxObject = Math.floor(areaSize / objSize)
// console.log('maxObjectSize', maxObject)
const disjointFromTrestle = turf.booleanContains(turfTrestlePolygon, squarePolygon) || turf.booleanWithin(squarePolygon, turfTrestlePolygon)
if (disjointFromTrestle) {
@ -5140,6 +5185,8 @@ export function useMode() {
lockScalingY: true, // Y 축 크기 조정 잠금
opacity: 0.8,
parentId: trestle.parentId,
lineCol: col,
lineRow: row,
})
canvas?.add(fabricPolygon)
drawCellsArray.push(fabricPolygon)

34
src/hooks/usePlan.js
View File

@ -2,18 +2,15 @@ import { useRecoilState } from 'recoil'
import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { toastUp } from '@/hooks/useToast'
import { sessionStore } from '@/store/commonAtom'
import { useState } from 'react'
import { useSwal } from '@/hooks/useSwal'
export function usePlan() {
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const { swalFire } = useSwal()
const { getMessage } = useMessage()
const { get, promisePost, promisePut } = useAxios()
const [sessionState, setSessionState] = useRecoilState(sessionStore)
const [userId, setUserId] = useState(sessionState.userId)
const { get, promisePost, promisePut, promiseDel } = useAxios()
/**
* 마우스 포인터의 가이드라인을 제거합니다.
@ -103,14 +100,14 @@ export function usePlan() {
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
swalFire({ text: getMessage('common.message.save') })
console.log('[PUT] canvas-statuses res :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
)
})
.catch((error) => {
toastUp({ message: error.message, type: 'error' })
swalFire({ text: error.message, icon: 'error' })
console.error('[PUT] canvas-statuses error :::::::: %o', error)
})
} else {
@ -124,11 +121,11 @@ export function usePlan() {
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
toastUp({ message: getMessage('common.message.save'), type: 'success' }) // 성공 시 메세지 없음
swalFire({ text: getMessage('common.message.save') })
console.log('[POST] canvas-statuses response :::::::: %o', res)
})
.catch((error) => {
toastUp({ message: error.message, type: 'error' })
swalFire({ text: error.message, icon: 'error' })
console.error('[POST] canvas-statuses res error :::::::: %o', error)
})
}
@ -137,7 +134,7 @@ export function usePlan() {
/**
* objectNo에 해당하는 canvas 목록을 조회하는 함수
*/
const getCanvasByObjectNo = async (objectNo) => {
const getCanvasByObjectNo = async (userId, objectNo) => {
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item) => ({
id: item.id,
@ -149,11 +146,26 @@ export function usePlan() {
)
}
/**
* id에 해당하는 canvas 데이터를 삭제하는 함수
*/
const delCanvasById = (id) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
}
/**
* objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
*/
const delCanvasByObjectNo = (objectNo) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
}
return {
canvas,
removeMouseLines,
saveCanvas,
addCanvas,
getCanvasByObjectNo,
delCanvasById,
}
}

6
src/locales/ja.json
View File

@ -32,6 +32,7 @@
"modal.cover.outline.arrow": "方向 (矢印)",
"modal.cover.outline.fix": "外壁線確定",
"modal.cover.outline.rollback": "一変戦に戻る",
"modal.cover.outline.finish": "設定完了",
"modal.cover.outline.remove": "外壁の削除",
"modal.cover.outline.select.move": "外壁の選択、移動",
"plan.menu.roof.cover.roof.setting": "屋根形状設定",
@ -115,6 +116,11 @@
"modal.canvas.setting.first.option.border": "ボーダーのみ",
"modal.canvas.setting.first.option.line": "ラインハッチ",
"modal.canvas.setting.first.option.all": "All painted",
"modal.canvas.setting.wallline.properties.setting": "外壁のプロパティの設定",
"modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
"modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
"modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
"setting": "設定",
"common.message.no.data": "No data",
"common.message.no.dataDown": "ダウンロードするデータがありません",
"common.message.noData": "表示するデータがありません",

6
src/locales/ko.json
View File

@ -36,6 +36,7 @@
"modal.cover.outline.arrow": "방향(화살표)",
"modal.cover.outline.fix": "외벽선 확정",
"modal.cover.outline.rollback": "일변전으로 돌아가기",
"modal.cover.outline.finish": "설정완료",
"modal.cover.outline.remove": "외벽 제거",
"modal.cover.outline.select.move": "외벽 선택, 이동",
"plan.menu.placement.surface": "배치면",
@ -116,6 +117,11 @@
"modal.canvas.setting.first.option.border": "테두리만",
"modal.canvas.setting.first.option.line": "라인해치",
"modal.canvas.setting.first.option.all": "All painted",
"modal.canvas.setting.wallline.properties.setting": "외벽선 속성 설정",
"modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n",
"modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
"modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
"setting": "설정",
"common.message.no.data": "No data",
"common.message.no.dataDown": "No data to download",
"common.message.noData": "No data to display",

453
src/styles/_modal.scss
View File

@ -4,16 +4,29 @@ $pop-bold-weight: 500;
$pop-normal-size: 12px;
$alert-color: #101010;
@keyframes mountpop{
from{opacity: 0; scale: 0.95;}
to{opacity: 1; scale: 1;}
}
@keyframes unmountpop{
from{opacity: 1; scale: 1;}
to{opacity: 0; scale: 0.95;}
@keyframes mountpop {
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
}
.modal-pop-wrap{
@keyframes unmountpop {
from {
opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
}
.modal-pop-wrap {
position: fixed;
top: 200px;
right: 100px;
@ -27,50 +40,66 @@ $alert-color: #101010;
background-color: #272727;
z-index: 9999999;
overflow: hidden;
&.r{
&.r {
width: 400px;
}
&.sm{
&.lr {
width: 440px;
}
&.sm {
width: 580px;
}
&.ssm{
&.ssm {
width: 380px;
}
&.xm{
&.xm {
width: 300px;
}
&.l{
&.l {
width: 800px;
}
&.mount{
&.mount {
animation: mountpop .17s ease-in-out forwards;
}
&.unmount{
&.unmount {
animation: unmountpop .17s ease-in-out forwards;
}
&.alert{
&.alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: none;
.modal-head{
.modal-head {
background-color: transparent;
padding: 0 0 8px;
.modal-close{
.modal-close {
width: 20px;
height: 20px;
background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
}
}
.modal-body{
.modal-body {
background-color: #fff;
padding: 22px;
border-radius: 4px;
border: 1px solid #101010;
color: $alert-color;
.alert-title{
.alert-title {
font-size: 13px;
font-weight: 700;
color: $alert-color;
@ -79,82 +108,108 @@ $alert-color: #101010;
}
}
}
.modal-head{
.modal-head {
display: flex;
align-items: center;
padding: 10px 24px;
background-color: #000;
h1.title{
h1.title {
font-size: 13px;
color: $pop-color;
font-weight: 700;
}
.modal-close{
.modal-close {
margin-left: auto;
color: $pop-color;
text-indent: -999999999px;
width: 10px;
height: 10px;
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
}
}
.modal-body{
.modal-body {
padding: 24px;
.modal-btn-wrap{
.modal-btn-wrap {
display: flex;
align-items: center;
gap: 5px;
button{
button {
flex: 1;
}
&.sub {
button {
flex: 1 1 auto;
padding: 0;
}
.modal-check-btn-wrap{
}
}
.modal-check-btn-wrap {
margin-top: 15px;
.check-wrap-title{
.check-wrap-title {
font-size: $pop-normal-size;
color: $pop-color;
font-weight: 600;
&.light{
&.light {
font-weight: $pop-normal-weight;
}
}
.flex-check-box{
.flex-check-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
&.for2{
&.for2 {
justify-content: flex-end;
button{
button {
width: calc(50% - 5px);
}
&.btn{
&.btn {
gap: 5px;
button{
button {
width: calc(50% - 2.5px);
}
}
}
&.for-line{
button{
&.for-line {
button {
flex: 1;
}
}
}
}
.outer-line-wrap{
.outer-line-wrap {
border-top: 1px solid #3C3C3C;
margin-top: 10px;
padding-top: 15px;
margin-bottom: 15px;
> div{
> div {
margin-bottom: 15px;
&:last-child{
&:last-child {
margin-bottom: 0;
}
}
}
.modal-guide{
.modal-guide {
display: block;
font-size: $pop-normal-size;
color: $alert-color;
@ -162,7 +217,7 @@ $alert-color: #101010;
}
}
.adsorption-point{
.adsorption-point {
display: flex;
align-items: center;
background-color: #3A3A3A;
@ -170,11 +225,13 @@ $alert-color: #101010;
padding-left: 11px;
overflow: hidden;
transition: all 0.17s ease-in-out;
span{
span {
font-size: $pop-normal-size;
color: #898989;
}
i{
i {
display: flex;
align-items: center;
padding: 0 7px;
@ -183,8 +240,9 @@ $alert-color: #101010;
font-size: 13px;
color: #898989;
}
&.act{
i{
&.act {
i {
color: $pop-color;
background-color: #1083E3;
}
@ -192,17 +250,19 @@ $alert-color: #101010;
}
// grid-option
.grid-check-form{
.grid-check-form {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #3C3C3C;
}
.grid-option-wrap{
.grid-option-wrap {
padding: 15px 0;
border-bottom: 1px solid #3C3C3C;
.grid-option-box{
.grid-option-box {
display: flex;
align-items: center;
background-color: #3D3D3D;
@ -210,57 +270,68 @@ $alert-color: #101010;
padding: 10px;
gap: 20px;
margin-bottom: 5px;
.grid-input-form{
.grid-input-form {
display: flex;
align-items: center;
span{
span {
flex: none;
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-bold-weight;
}
.input-grid{
.input-grid {
width: 54px;
input{
input {
width: 100%;
}
}
}
&:last-child{
&:last-child {
margin-bottom: 0;
}
}
}
.grid-select{
.grid-select {
flex: 1;
.sort-select{
.sort-select {
width: 100%;
background-color: #313131;
}
}
.grid-btn-wrap{
.grid-btn-wrap {
padding-top: 15px;
text-align: right;
button{
button {
padding: 0 20px;
}
}
// grid copy
.grid-option-tit{
.grid-option-tit {
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-normal-weight;
padding-bottom: 15px;
border-bottom: 1px solid #3C3C3C;
}
.grid-direction{
.grid-direction {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
}
.direction{
.direction {
width: 22px;
height: 22px;
background-color: #757575;
@ -271,39 +342,54 @@ $alert-color: #101010;
border-radius: 50%;
transition: all .15s ease-in-out;
opacity: 0.6;
&.down{transform: rotate(180deg);}
&.left{transform: rotate(-90deg);}
&.right{transform: rotate(90deg);}
&.down {
transform: rotate(180deg);
}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover,
&.act{
&.act {
opacity: 1;
}
}
// grid-move
.move-form{
p{
.move-form {
p {
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-bold-weight;
}
}
.input-move-wrap{
.input-move-wrap {
display: flex;
align-items: center;
gap: 5px;
span{
span {
color: $pop-color;
font-size: $pop-normal-size;
}
.input-move{
.input-move {
width: 130px;
input{
input {
width: 100%;
}
}
}
.direction-move-wrap{
.direction-move-wrap {
flex: none;
display: grid;
grid-template-columns: 1fr 1fr;
@ -311,11 +397,12 @@ $alert-color: #101010;
}
// 배치면 초기 설정
.placement-table{
table{
.placement-table {
table {
table-layout: fixed;
tr{
th{
tr {
th {
display: flex;
align-items: center;
font-size: $pop-normal-size;
@ -324,49 +411,57 @@ $alert-color: #101010;
padding: 18px 0;
border-bottom: 1px solid #424242;
}
td{
td {
font-size: $pop-normal-size;
color: $pop-color;
border-bottom: 1px solid #424242;
padding-left: 20px;
}
&:first-child{
&:first-child {
td,
th{
th {
padding-top: 0;
}
}
}
}
.tooltip{
.tooltip {
position: relative;
display: block;
width: 15px;
height: 15px;
margin-left: 5px;
background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
background-size: cover;
}
&.light{
&.light {
padding: 0;
th,td{
th, td {
color: $alert-color;
border-bottom: none;
border-top: 1px solid #EFEFEF;
}
th{
th {
padding: 14px 0;
}
tr{
&:first-child{
tr {
&:first-child {
td,
th{
th {
padding-top: 14px;
}
}
&:last-child{
&:last-child {
td,
th{
th {
padding-bottom: 0px;
}
}
@ -374,26 +469,30 @@ $alert-color: #101010;
}
}
.pop-form-radio{
.pop-form-radio {
display: flex;
align-items: center;
gap: 10px;
}
.placement-option{
.placement-option {
display: flex;
align-items: center;
gap: 20px;
}
.select-wrap{
div{
.select-wrap {
div {
width: 100%;
}
}
.flex-ment{
.flex-ment {
display: flex;
align-items: center;
gap: 5px;
span{
span {
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-normal-weight;
@ -401,32 +500,45 @@ $alert-color: #101010;
}
// 외벽선 그리기
.outline-wrap{
.outline-wrap {
padding: 24px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
.outline-inner{
.outline-inner {
display: flex;
align-items: center;
margin-bottom: 14px;
&:last-child{
&:last-child {
margin-bottom: 0;
}
.outline-form {
width: 50%;
}
}
}
.outline-form{
width: 50%;
.outline-form {
display: flex;
align-items: center;
margin-right: 15px;
span{
span {
width: 60px;
flex: none;
font-size: $pop-normal-size;
font-weight: $pop-bold-weight;
color: $pop-color;
margin-right: 10px;
&.thin {
font-weight: & $pop-normal-weight;
}
.reset-btn{
}
.reset-btn {
flex: none;
width: 30px;
height: 30px;
@ -439,31 +551,152 @@ $alert-color: #101010;
background-size: 12px 12px;
background-position: center;
}
&:last-child{
&:last-child {
margin-right: 0;
}
}
.cul-wrap{
.cul-wrap {
display: flex;
.outline-box{
.outline-box {
width: 50%;
margin-right: 15px;
.outline-form{
.outline-form {
width: 100%;
margin-bottom: 14px;
margin-right: 0;
&:last-child{
&:last-child {
margin-bottom: 0;
}
}
}
.cul-box{
.cul-box {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
background-color: #3D3D3D;
border-radius: 2px ;
border-radius: 2px;
}
}
// 외벽선 속성 설정
.properties-guide {
font-size: $pop-normal-size;
color: #AAA;
font-weight: $pop-normal-weight;
margin-bottom: 14px;
}
.properties-setting-wrap {
&.outer {
margin-top: 24px;
}
.setting-tit {
font-size: 13px;
color: $pop-color;
font-weight: $pop-bold-weight;
margin-bottom: 10px;
}
.setting-btn-wrap {
display: flex;
align-items: center;
padding: 14px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
.setting-btn {
display: block;
width: 100%;
height: 40px;
font-size: 13px;
color: #fff;
font-weight: 700;
border-radius: 2px;
transition: all .15s ease-in-out;
&.green {
background-color: #305941;
border: 1px solid #45CD7D;
&:hover {
background-color: #3a6b4e;
}
}
&.blue {
background-color: #2E5360;
border: 1px solid #3FBAE6;
&:hover {
background-color: #365f6e;
}
}
}
}
}
// 지붕형상 설정
.roof-shape-menu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px 10px;
margin-bottom: 24px;
.shape-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 13px;
background-color: #3D3D3D;
transition: background .15s ease-in-out;
img {
max-width: 100%;
}
}
.shape-title {
font-size: $pop-normal-size;
font-weight: $pop-bold-weight;
color: $pop-color;
margin-top: 10px;
text-align: center;
transition: color .15s ease-in-out;
}
.shape-menu-box {
&.act,
&:hover {
.shape-box {
background-color: #008BFF;
}
.shape-title {
color: #008BFF;
}
}
}
}
.setting-box {
padding: 14px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
}
.discrimination-box {
padding: 16px 12px;
border: 1px solid #3D3D3D;
border-radius: 2px;
margin-top: 14px;
}

406
src/styles/_reset.scss
View File

@ -1,18 +1,21 @@
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
box-sizing: content-box
}
*, ::after, ::before {
box-sizing: border-box;
}
html, body{
html, body {
width: 100%;
height: 100%;
font-size: 16px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@ -36,86 +39,105 @@ time, mark, audio, video {
-moz-osx-font-smoothing: grayscale;
font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.4;
}
body:first-of-type caption { display:none;}
body:first-of-type caption {
display: none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
width: 100%;
border-collapse: separate;
border-spacing:0;
border:0 none;
border-spacing: 0;
border: 0 none;
}
caption, th, td {
text-align:left;
text-align: left;
font-weight: normal;
border:0;
border: 0;
}
a {
cursor:pointer;
color:#000;
cursor: pointer;
color: #000;
}
a, a:hover, a:active {
text-decoration:none;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/*form_style*/
input, select, textarea, button, a, label {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,input[type=text], input[type=button] {
button, input[type=text], input[type=button] {
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-appearance:none;
-webkit-appearance: none;
appearance: none;
border-radius: 0
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input, select, button {
border:0 none;
outline:none;
margin:0;
border: 0 none;
outline: none;
margin: 0;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
::-webkit-input-placeholder {
line-height:1;
font-weight:300;
font-size:0.938rem;
letter-spacing:-0.6px;
color:#8b8b8b;
line-height: 1;
font-weight: 300;
font-size: 0.938rem;
letter-spacing: -0.6px;
color: #8b8b8b;
}
.log-box ::-webkit-input-placeholder{
color:#8b8b8b;
.log-box ::-webkit-input-placeholder {
color: #8b8b8b;
}
button{
button {
background: transparent;
font-family: 'Noto Sans JP', sans-serif;
border: none;
@ -126,22 +148,46 @@ button{
outline: none;
cursor: pointer;
}
.pre{
.pre {
font-family: 'Pretendard', sans-serif !important;
}
// margin
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
// button
.btn-frame{
.btn-frame {
display: inline-block;
padding: 0 7px;
height: 34px;
@ -155,65 +201,94 @@ button{
font-family: 'Pretendard', sans-serif;
transition: all .17s ease-in-out;
cursor: pointer;
&.block{
&.block {
width: 100%;
}
&.small{
&.small {
font-family: 'Noto Sans JP', sans-serif;
height: 30px;
line-height: 30px;
font-size: 13px;
}
&.deepgray{
&.deepgray {
background-color: #2C2C2C;
border: 1px solid #484848;
}
&.gray{
&.gray {
background-color: #3C3C3C;
border: 1px solid #545454;
}
&.dark{
&.dark {
background-color: #1C1C1C;
border: 1px solid #484848;
}
&.modal{
&.modal {
font-family: 'Noto Sans JP', sans-serif;
background-color: #272727;
border: 1px solid #484848;
color: #aaa;
&:hover{
&:hover {
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
}
&.sub-tab {
height: 30px;
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
background-color: #2D2D2D;
border: 1px solid #393939;
color: #aaa;
&.act,
&:hover {
background-color: #414E6C;
border: 1px solid #414E6C;
color: #fff;
font-weight: 500;
}
}
&:hover,
&.act{
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
&.block{
&.block {
display: block;
width: 100%;
}
&.ico-flx{
&.ico-flx {
display: flex;
align-items: center;
.ico{
.ico {
margin-right: 10px;
}
&:hover,
&.act{
&.act {
font-weight: 400;
}
}
}
.btn-origin{
.btn-origin {
display: inline-block;
height: 30px;
padding: 0 14px;
@ -223,22 +298,26 @@ button{
font-size: 13px;
font-weight: 400;
transition: all .15s ease-in-out;
&.navy{
&.navy {
background-color: #304961;
&:hover{
&:hover {
background-color: #1083E3;
}
}
&.grey{
&.grey {
background-color: #94A0AD;
&:hover{
&:hover {
background-color: #607F9A;
}
}
}
// select
.sort-select{
.sort-select {
position: relative;
display: inline-block;
min-width: 100px;
@ -251,16 +330,18 @@ button{
border-top-left-radius: 2px;
color: #fff;
cursor: pointer;
p{
p {
font-size: 13px;
color: #fff;
height: 100%;
}
.select-item-wrap{
.select-item-wrap {
position: absolute;
top: 100%;
left: -1px;
clip-path:inset(0 0 100% 0);
clip-path: inset(0 0 100% 0);
width: calc(100% + 2px);
padding: 8px 0;
background-color: #373737;
@ -268,23 +349,27 @@ button{
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
.select-item{
.select-item {
display: flex;
align-items: center;
padding: 8px 20px;
line-height: 1.4;
transition: all .17s ease-in-out;
button{
button {
font-size: 12px;
color: #fff;
line-height: 1.4;
}
&:hover{
&:hover {
background-color: #2C2C2C;
}
}
}
&::after{
&::after {
content: '';
position: absolute;
top: 50%;
@ -296,18 +381,20 @@ button{
background-size: cover;
transition: all .17s ease-in-out;
}
&.active{
.select-item-wrap{
&.active {
.select-item-wrap {
clip-path: inset(0 0 0 0);
visibility: visible;
}
&:after{
&:after {
transform: translateY(-50%) rotate(-180deg);
}
}
}
.select-light{
.select-light {
position: relative;
display: block;
width: 100%;
@ -320,16 +407,19 @@ button{
color: #45576F;
font-family: 'Noto Sans JP', sans-serif;
cursor: pointer;
&:disabled{
&:disabled {
opacity: 1;
background-color: #FAFAFA;
color: #999;
cursor: default;
}
&.black{
&.black {
color: #101010;
}
&.dark{
&.dark {
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
color: #898989;
font-size: 12px;
@ -340,8 +430,8 @@ button{
// input
.form-input{
label{
.form-input {
label {
display: block;
color: #aaa;
font-size: 12px;
@ -349,9 +439,10 @@ button{
margin-bottom: 10px;
}
}
input[type=number],
input[type=text]{
&.input-origin{
input[type=text] {
&.input-origin {
display: inline-block;
height: 30px;
line-height: 30px;
@ -364,16 +455,19 @@ input[type=text]{
padding: 0 10px;
letter-spacing: 0px;
text-align: right;
&::placeholder{
&::placeholder {
opacity: 1;
font-size: 12px;
letter-spacing: 0px;
}
&.block{
&.block {
width: 100%;
}
}
&.input-light{
&.input-light {
display: block;
width: 100%;
height: 30px;
@ -387,7 +481,8 @@ input[type=text]{
font-weight: normal;
transition: border-color .17s ease-in-out;
text-align: left;
&:read-only{
&:read-only {
background-color: #FAFAFA;
color: #999999;
}
@ -395,40 +490,45 @@ input[type=text]{
}
// check-btn
.check-btn{
.check-btn {
display: flex;
align-items: center;
height: 30px;
background-color: #3A3A3A;
border-radius: 3px;
transition: all .17s ease-in-out;
.check-area{
.check-area {
flex: none;
width: 30px;
height: 100%;
border-right: 1px solid #272727;
background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
background-size: 11px 9px;
}
.title-area{
.title-area {
padding: 0 10px;
font-size: 12px;
color: #898989;
font-weight: 400;
}
&.block{
&.block {
width: 100%;
}
&:hover,
&.act{
&.act {
background-color: #fff;
.check-area{
.check-area {
border-right: 1px solid #101010;
background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
}
.title-area{
.title-area {
color: #101010;
font-weight: 600;
}
@ -436,7 +536,7 @@ input[type=text]{
}
// arr-btn
.arr-btn{
.arr-btn {
display: block;
height: 30px;
border-radius: 3px;
@ -444,13 +544,15 @@ input[type=text]{
padding: 0 11px;
text-align: left;
transition: all .17s ease-in-out;
span{
span {
position: relative;
font-size: 12px;
color: #898989;
font-weight: 400;
padding-right: 15px;
&:after{
&:after {
content: '';
position: absolute;
top: 50%;
@ -458,32 +560,39 @@ input[type=text]{
transform: translateY(-50%);
width: 5px;
height: 8px;
background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
}
}
&:hover,
&.act{
&.act {
background-color: #fff;
span{
span {
color: #101010;
font-weight: 500;
&:after{
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
&:after {
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
}
}
}
&.dark{
&.dark {
text-align: center;
background-color: #272727;
border: 1px solid #484848;
span{
span {
color: #Fff;
&:after{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
&:after {
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
}
}
&:hover,
&.act{
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
}
@ -492,11 +601,12 @@ input[type=text]{
// radio
.d-check-radio,
.d-check-box{
.d-check-box {
line-height: 1.1;
cursor: pointer;
input[type=checkbox],
input[type=radio]{
input[type=radio] {
position: static;
margin-left: 0;
cursor: pointer;
@ -504,7 +614,8 @@ input[type=text]{
z-index: 1;
flex: 0 0 auto;
}
label{
label {
position: relative;
padding-left: 10px;
margin-bottom: 0;
@ -517,81 +628,89 @@ input[type=text]{
font-weight: 400;
cursor: pointer;
}
&.light{
label{
&.light {
label {
color: #45576F;
}
}
&.no-text{
label{
&.no-text {
label {
padding-left: 0;
}
}
}
.d-check-radio {
label{
&::before{
label {
&::before {
cursor: pointer;
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
top:2px;
top: 2px;
left: 0;
margin-left: -12px;
border: 1px solid #999999;
border-radius: 100%;
background-color: transparent;
text-align:center;
font-size:13px;
line-height:1.4;
text-align: center;
font-size: 13px;
line-height: 1.4;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&::after{
&::after {
cursor: pointer;
content: "";
display: inline-block;
position: absolute;
width: 9px;
height: 9px;
top:6px;
top: 6px;
left: 4px;
margin-left: -12px;
border: none;
border-radius: 100%;
background-color: #fff;
text-align:center;
font-size:13px;
line-height:1.4;
text-align: center;
font-size: 13px;
line-height: 1.4;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}
}
&.light{
label{
&:before{
&.light {
label {
&:before {
border-color: #D6D6D7;
}
&:after{
&:after {
background-color: #697C8F;
}
}
}
input[type=radio]:checked + label::after{
input[type=radio]:checked + label::after {
opacity: 1;
visibility: visible;
}
&.pop{
label{
&:before{
&.pop {
label {
&:before {
width: 16px;
height: 16px;
border-color: #fff;
}
&:after{
&:after {
width: 8px;
height: 8px;
background-color: #fff;
@ -601,9 +720,9 @@ input[type=text]{
}
// check-box
.d-check-box{
label{
&::before{
.d-check-box {
label {
&::before {
cursor: pointer;
content: "";
display: inline-block;
@ -617,20 +736,22 @@ input[type=text]{
background-color: transparent;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&:after{
&:after {
cursor: pointer;
content: "";
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
top:0;
top: 0;
left: 0;
margin-left: -.8rem;
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
}
}
input[type=checkbox]:checked + label::after{
input[type=checkbox]:checked + label::after {
content: "";
display: inline-block;
position: absolute;
@ -641,23 +762,28 @@ input[type=text]{
border: 2px solid #697C8F;
border-left: none;
border-top: none;
transform: translate(7.75px,4.5px) rotate(45deg);
-ms-transform: translate(7.75px,4.5px) rotate(45deg);
transform: translate(7.75px, 4.5px) rotate(45deg);
-ms-transform: translate(7.75px, 4.5px) rotate(45deg);
}
&.pop{
input[type=checkbox]:checked + label::after{
&.pop {
input[type=checkbox]:checked + label::after {
border-color: #fff;
}
}
}
// date-picker
.date-picker{
svg{display: none;}
.react-datepicker-wrapper{
.date-picker {
svg {
display: none;
}
.react-datepicker-wrapper {
width: 100%;
}
input[type=text]{
input[type=text] {
display: block;
width: 100%;
height: 30px;