265 lines
9.3 KiB
JavaScript
265 lines
9.3 KiB
JavaScript
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
|
|
import { useEffect, useState } from 'react'
|
|
import FontSetting from '@/components/common/font/FontSetting'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
|
import { useRecoilState } from 'recoil'
|
|
import { globalFontAtom } from '@/store/fontAtom'
|
|
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
|
|
|
const fonts = [
|
|
{ id: 1, name: 'MS PGothic', value: 'MS PGothic' },
|
|
{ id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
|
|
{ id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
|
|
{ id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
|
|
{ id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
|
|
//3,
|
|
]
|
|
|
|
const fontSizes = [
|
|
...Array.from({ length: 4 }).map((_, index) => {
|
|
return { id: index + 8, name: index + 8, value: index + 8 }
|
|
}),
|
|
...Array.from({ length: 9 }).map((_, index) => {
|
|
return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
|
|
}),
|
|
{ id: 36, name: 36, value: 36 },
|
|
{ id: 48, name: 48, value: 48 },
|
|
{ id: 72, name: 72, value: 72 },
|
|
]
|
|
|
|
export default function DimensionLineSetting(props) {
|
|
const { isShow, setIsShow, id, pos = { x: 985, y: 180 }, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
|
|
const { addPopup, closePopup, closePopups } = usePopup()
|
|
const pixels = Array.from({ length: 5 }).map((_, index) => {
|
|
return { id: index, name: index + 1, value: index + 1 }
|
|
})
|
|
//const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
|
|
//const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
|
|
//const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
|
|
//const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
|
|
|
|
const [fontModalId, setFontModalId] = useState(uuidv4())
|
|
const [colorModalId, setColorModalId] = useState(uuidv4())
|
|
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
|
|
const [showFontModal, setShowFontModal] = useState(false)
|
|
const { getMessage } = useMessage()
|
|
|
|
const { globalFont, setGlobalFont, dimensionLineSettings, setDimensionLineSettings } = useCanvasSetting()
|
|
|
|
const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
|
|
const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
|
|
const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
|
|
const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
|
|
|
|
const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
|
|
const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
|
|
|
|
const fontOptions = [
|
|
{ id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
|
|
{ id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
|
|
{ id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
|
|
{ id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
|
|
]
|
|
const fontColors = [
|
|
{ id: 'black', name: getMessage('color.black'), value: 'black' },
|
|
{ id: 'red', name: getMessage('color.red'), value: 'red' },
|
|
{ id: 'blue', name: getMessage('color.blue'), value: 'blue' },
|
|
{ id: 'gray', name: getMessage('color.gray'), value: 'gray' },
|
|
{ id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
|
|
{ id: 'green', name: getMessage('color.green'), value: 'green' },
|
|
{ id: 'pink', name: getMessage('color.pink'), value: 'pink' },
|
|
{ id: 'gold', name: getMessage('color.gold'), value: 'gold' },
|
|
{ id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
|
|
]
|
|
|
|
useEffect(() => {
|
|
if (originPixel) {
|
|
setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
|
|
}
|
|
|
|
setIsShow(true)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (originPixel.name) {
|
|
setOriginPixel(originPixel)
|
|
}
|
|
}, [originPixel])
|
|
|
|
useEffect(() => {
|
|
if (!isShow) {
|
|
closePopups([fontModalId, colorModalId])
|
|
}
|
|
}, [isShow])
|
|
|
|
const handleFontSave = (font) => {
|
|
setOriginFont(font.fontFamily)
|
|
setOriginFontWeight(font.fontWeight)
|
|
setOriginFontSize(font.fontSize)
|
|
setOriginFontColor(font.fontColor)
|
|
}
|
|
const handleColorSave = () => {}
|
|
|
|
const colorPickerProps = {
|
|
isShow: showColorPickerModal,
|
|
setIsShow: setShowColorPickerModal,
|
|
color: originColor,
|
|
setColor: setOriginColor,
|
|
id: colorModalId,
|
|
name: 'DimensionLineColor',
|
|
isConfig: true,
|
|
pos: {
|
|
x: 495,
|
|
y: 180,
|
|
},
|
|
settingsData,
|
|
setSettingsData,
|
|
settingsDataSave,
|
|
setSettingsDataSave,
|
|
}
|
|
|
|
const fontProps = {
|
|
isShow: showFontModal,
|
|
setIsShow: setShowFontModal,
|
|
font: {
|
|
fontFamily: originFont,
|
|
fontWeight: originFontWeight,
|
|
fontSize: originFontSize,
|
|
fontColor: originFontColor,
|
|
},
|
|
onSave: handleFontSave,
|
|
isConfig: true,
|
|
id: fontModalId,
|
|
pos: {
|
|
x: 455,
|
|
y: 180,
|
|
},
|
|
type: 'dimensionLineText',
|
|
}
|
|
const popupHandle = (type) => {
|
|
switch (type) {
|
|
case 'color':
|
|
addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />, true)
|
|
break
|
|
case 'font':
|
|
addPopup(fontModalId, 3, <FontSetting {...fontProps} />, true)
|
|
break
|
|
}
|
|
}
|
|
|
|
const onSave = () => {
|
|
setGlobalFont((prev) => {
|
|
return {
|
|
...prev,
|
|
dimensionLineText: {
|
|
fontFamily: originFont,
|
|
fontWeight: originFontWeight,
|
|
fontSize: originFontSize,
|
|
fontColor: originFontColor,
|
|
},
|
|
}
|
|
})
|
|
|
|
setDimensionLineSettings((prev) => {
|
|
return {
|
|
...prev,
|
|
pixel: originPixel.name,
|
|
color: originColor,
|
|
}
|
|
})
|
|
|
|
setSettingsData({
|
|
...settingsData,
|
|
dimensionLineText: {
|
|
fontFamily: originFont,
|
|
fontWeight: originFontWeight,
|
|
fontSize: originFontSize,
|
|
fontColor: originFontColor,
|
|
},
|
|
pixel: originPixel.name,
|
|
color: originColor,
|
|
})
|
|
|
|
setIsShow(false)
|
|
closePopups([fontModalId, colorModalId, id])
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos}>
|
|
<div className={`modal-pop-wrap xxxm mount`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
|
|
<button
|
|
className="modal-close"
|
|
onClick={() => {
|
|
setIsShow(false)
|
|
closePopups([fontModalId, colorModalId, id])
|
|
}}
|
|
>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="font-btn-wrap">
|
|
<button className="btn-frame modal" onClick={() => popupHandle('font')}>
|
|
{getMessage('modal.font.setting')}
|
|
</button>
|
|
</div>
|
|
<div className="line-color-wrap">
|
|
<div className="outline-form mb10">
|
|
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
|
|
<div className="grid-select mr5">
|
|
<QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
|
|
</div>
|
|
<span className="thin">pixel</span>
|
|
</div>
|
|
<div className="outline-form">
|
|
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
|
|
<button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
|
|
</div>
|
|
</div>
|
|
<div className="font-ex-wrap">
|
|
<div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
|
|
<div className="form-box">
|
|
<div className="line-form">
|
|
<div className="line-font-box">
|
|
<span
|
|
className="font"
|
|
style={{
|
|
fontFamily: originFont?.value ?? '',
|
|
fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
|
fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
|
fontSize: originFontSize?.value ?? '12px',
|
|
color: originFontColor?.value ?? 'black',
|
|
}}
|
|
>
|
|
9,999
|
|
</span>
|
|
<span
|
|
className="line"
|
|
style={{
|
|
backgroundColor: originColor,
|
|
borderColor: originColor,
|
|
height: originPixel.name,
|
|
}}
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act" onClick={onSave}>
|
|
{getMessage('modal.common.save')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|