Canvas setting font 관련 기능 수정
This commit is contained in:
minsik
parent
c70fbc27e8
commit
529d5b551b
@ -3,76 +3,69 @@ import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { contextPopupPositionState } from '@/store/popupAtom'
|
||||
|
||||
const fonts = [
|
||||
{ name: 'MS PGothic', value: 'MS PGothic' },
|
||||
{ name: '@Yu Gothic', value: '@Yu Gothic' },
|
||||
{ name: 'Yu Gothic', value: 'Yu Gothic' },
|
||||
{ name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
|
||||
{ name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
|
||||
{ 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 { name: index + 8, value: index + 8 }
|
||||
return { id: index + 8, name: index + 8, value: index + 8 }
|
||||
}),
|
||||
...Array.from({ length: 9 }).map((_, index) => {
|
||||
return { name: (index + 6) * 2, value: (index + 6) * 2 }
|
||||
return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
|
||||
}),
|
||||
{ name: 36, value: 36 },
|
||||
{ name: 48, value: 48 },
|
||||
{ name: 72, value: 72 },
|
||||
{ id: 36, name: 36, value: 36 },
|
||||
{ id: 48, name: 48, value: 48 },
|
||||
{ id: 72, name: 72, value: 72 },
|
||||
]
|
||||
|
||||
export default function FontSetting(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
|
||||
const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false, onSave, font } = props
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
|
||||
const currentFont = useRecoilValue(fontSelector(type))
|
||||
|
||||
const [selectedFont, setSelectedFont] = useState(currentFont.fontFamily)
|
||||
const [selectedFontWeight, setSelectedFontWeight] = useState(currentFont.fontWeight)
|
||||
const [selectedFontSize, setSelectedFontSize] = useState(currentFont.fontSize)
|
||||
const [selectedFontColor, setSelectedFontColor] = useState(currentFont.fontColor)
|
||||
const [selectedFont, setSelectedFont] = useState(font.fontFamily)
|
||||
const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight)
|
||||
const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize)
|
||||
const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor)
|
||||
const fontOptions = [
|
||||
{ name: getMessage('font.style.normal'), value: 'normal' },
|
||||
{ name: getMessage('font.style.italic'), value: 'italic' },
|
||||
{ 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',
|
||||
},
|
||||
{ name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
|
||||
{ id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
|
||||
]
|
||||
const fontColors = [
|
||||
{ name: getMessage('color.black'), value: 'black' },
|
||||
{ name: getMessage('color.red'), value: 'red' },
|
||||
{ name: getMessage('color.blue'), value: 'blue' },
|
||||
{ name: getMessage('color.gray'), value: 'gray' },
|
||||
{ name: getMessage('color.yellow'), value: 'yellow' },
|
||||
{ name: getMessage('color.green'), value: 'green' },
|
||||
{ name: getMessage('color.pink'), value: 'pink' },
|
||||
{ name: getMessage('color.gold'), value: 'gold' },
|
||||
{ name: getMessage('color.darkblue'), value: 'darkblue' },
|
||||
{ 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' },
|
||||
]
|
||||
const handleSaveBtn = () => {
|
||||
setGlobalFont((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
[type]: {
|
||||
fontFamily: selectedFont,
|
||||
fontSize: selectedFontSize,
|
||||
fontColor: selectedFontColor,
|
||||
fontWeight: selectedFontWeight,
|
||||
},
|
||||
}
|
||||
onSave({
|
||||
fontFamily: selectedFont,
|
||||
fontSize: selectedFontSize,
|
||||
fontColor: selectedFontColor,
|
||||
fontWeight: selectedFontWeight,
|
||||
})
|
||||
if (setIsShow) setIsShow(false)
|
||||
closePopup(id)
|
||||
closePopup(id, isConfig)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -125,7 +118,8 @@ export default function FontSetting(props) {
|
||||
style={{
|
||||
fontFamily: selectedFont?.value ?? '',
|
||||
fontSize: selectedFontSize?.value ?? '12px',
|
||||
fontWeight: '400',
|
||||
fontStyle: selectedFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: selectedFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
color: selectedFontColor?.value ?? 'black',
|
||||
}}
|
||||
>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
|
||||
@ -6,55 +5,35 @@ import { usePopup } from '@/hooks/usePopup'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import FontSetting from '@/components/common/font/FontSetting'
|
||||
import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
|
||||
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
||||
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
|
||||
|
||||
export default function SecondOption() {
|
||||
const { getMessage } = useMessage()
|
||||
const { addPopup, closePopup, closePopups } = usePopup()
|
||||
const { addPopup, closePopup } = usePopup()
|
||||
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
|
||||
const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
|
||||
const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
|
||||
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
|
||||
|
||||
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
|
||||
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
||||
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
|
||||
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
|
||||
const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
|
||||
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
|
||||
const commonFont = useRecoilValue(fontSelector('commonText'))
|
||||
const flowFont = useRecoilValue(fontSelector('flowText'))
|
||||
const lengthFont = useRecoilValue(fontSelector('lengthText'))
|
||||
const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText'))
|
||||
|
||||
const [dimensionId, setDimensionId] = useState(uuidv4())
|
||||
const [fontId, setFontId] = useState(uuidv4())
|
||||
const [planSizeId, setPlanSizeId] = useState(uuidv4())
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
console.log('SecondOption useEffect 실행')
|
||||
//fetchSettings()
|
||||
}, [objectNo])
|
||||
|
||||
let dimensionId = null
|
||||
let fontId = null
|
||||
let planSizeId = null
|
||||
const [pixel, setPixel] = useState(dimensionSettings.pixel)
|
||||
const [color, setColor] = useState(dimensionSettings.color)
|
||||
const [font, setFont] = useState(null)
|
||||
const [fontSize, setFontSize] = useState(dimensionSettings.fontSize)
|
||||
const [fontColor, setFontColor] = useState(dimensionSettings.fontColor)
|
||||
|
||||
useEffect(() => {
|
||||
dimensionId = uuidv4()
|
||||
fontId = uuidv4()
|
||||
planSizeId = uuidv4()
|
||||
}, [])
|
||||
|
||||
const dimensionProps = {
|
||||
color,
|
||||
setColor,
|
||||
pixel,
|
||||
setPixel,
|
||||
font,
|
||||
setFont,
|
||||
fontSize,
|
||||
setFontSize,
|
||||
fontColor,
|
||||
setFontColor,
|
||||
id: dimensionId,
|
||||
isShow: showDimensionLineSettingModal,
|
||||
setIsShow: setShowDimensionLineSettingModal,
|
||||
@ -62,23 +41,6 @@ export default function SecondOption() {
|
||||
|
||||
const [horizon, setHorizon] = useState(1600)
|
||||
const [vertical, setVertical] = useState(1600)
|
||||
|
||||
const fontProps = {
|
||||
id: fontId,
|
||||
pos: { x: 745, y: 180 },
|
||||
setIsShow: setShowFontSettingModal,
|
||||
isConfig: true,
|
||||
}
|
||||
const planSizeProps = {
|
||||
id: planSizeId,
|
||||
horizon,
|
||||
setHorizon,
|
||||
vertical,
|
||||
setVertical,
|
||||
setIsShow: setShowPlanSizeSettingModal,
|
||||
pos: { x: 1025, y: 180 },
|
||||
}
|
||||
|
||||
const handlePopup = (type) => {
|
||||
setShowPlanSizeSettingModal(false)
|
||||
setShowFontSettingModal(false)
|
||||
@ -90,6 +52,7 @@ export default function SecondOption() {
|
||||
setShowDimensionLineSettingModal(false)
|
||||
fontProps.type = 'commonText'
|
||||
fontProps.id = fontId + 1
|
||||
fontProps.font = commonFont
|
||||
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
|
||||
break
|
||||
}
|
||||
@ -99,6 +62,7 @@ export default function SecondOption() {
|
||||
setShowFontSettingModal(true)
|
||||
setShowDimensionLineSettingModal(false)
|
||||
fontProps.type = 'flowText'
|
||||
fontProps.font = flowFont
|
||||
fontProps.id = fontId + 2
|
||||
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />, true)
|
||||
break
|
||||
@ -107,9 +71,9 @@ export default function SecondOption() {
|
||||
case 'font3': {
|
||||
//치수 글꼴변경
|
||||
setShowFontSettingModal(true)
|
||||
|
||||
setShowDimensionLineSettingModal(false)
|
||||
fontProps.type = 'lengthText'
|
||||
fontProps.font = lengthFont
|
||||
fontProps.id = fontId + 3
|
||||
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />, true)
|
||||
break
|
||||
@ -120,6 +84,7 @@ export default function SecondOption() {
|
||||
setShowFontSettingModal(true)
|
||||
setShowDimensionLineSettingModal(false)
|
||||
fontProps.type = 'circuitNumberText'
|
||||
fontProps.font = circuitNumberTextFont
|
||||
fontProps.id = fontId
|
||||
addPopup(fontId, 2, <FontSetting {...fontProps} />, true)
|
||||
break
|
||||
@ -129,6 +94,12 @@ export default function SecondOption() {
|
||||
//치수선 설정
|
||||
if (!showDimensionLineSettingModal) {
|
||||
setShowDimensionLineSettingModal(true)
|
||||
fontProps.font = {
|
||||
fontFamily: '',
|
||||
fontColor: '',
|
||||
fontSize: '',
|
||||
fontWeight: '',
|
||||
}
|
||||
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
|
||||
} else {
|
||||
setShowDimensionLineSettingModal(false)
|
||||
@ -147,6 +118,38 @@ export default function SecondOption() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleFontSave = (font) => {
|
||||
setGlobalFont((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
[fontProps.type]: {
|
||||
fontFamily: font.fontFamily,
|
||||
fontWeight: font.fontWeight,
|
||||
fontSize: font.fontSize,
|
||||
fontColor: font.fontColor,
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fontProps = {
|
||||
id: fontId,
|
||||
pos: { x: 745, y: 180 },
|
||||
setIsShow: setShowFontSettingModal,
|
||||
onSave: handleFontSave,
|
||||
isConfig: true,
|
||||
}
|
||||
|
||||
const planSizeProps = {
|
||||
id: planSizeId,
|
||||
horizon,
|
||||
setHorizon,
|
||||
vertical,
|
||||
setVertical,
|
||||
setIsShow: setShowPlanSizeSettingModal,
|
||||
pos: { x: 1025, y: 180 },
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-check-btn-wrap">
|
||||
|
||||
@ -8,68 +8,57 @@ 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'
|
||||
|
||||
/*
|
||||
color: 치수선 색
|
||||
fontColor: 글꼴 색
|
||||
fontSize: 치수선 치수 색
|
||||
pixel: 치수선 두깨
|
||||
*/
|
||||
export default function DimensionLineSetting(props) {
|
||||
const {
|
||||
color,
|
||||
setColor,
|
||||
font,
|
||||
setFont,
|
||||
fontColor,
|
||||
setFontColor,
|
||||
fontSize,
|
||||
setFontSize,
|
||||
pixel,
|
||||
setPixel,
|
||||
isShow,
|
||||
setIsShow,
|
||||
id,
|
||||
pos = { x: 985, y: 180 },
|
||||
} = props
|
||||
const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props
|
||||
const { addPopup, closePopup, closePopups } = usePopup()
|
||||
const pixels = Array.from({ length: 5 }).map((_, index) => {
|
||||
return { name: index + 1, value: index + 1 }
|
||||
return { id: index, name: index + 1, value: index + 1 }
|
||||
})
|
||||
const [originColor, setOriginColor] = useState(color)
|
||||
const [originFont, setOriginFont] = useState(font)
|
||||
const [originFontColor, setOriginFontColor] = useState(fontColor)
|
||||
const [originFontSize, setOriginFontSize] = useState(fontSize)
|
||||
const [originPixel, setOriginPixel] = useState(pixel)
|
||||
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
|
||||
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
|
||||
const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
|
||||
const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
|
||||
const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
|
||||
const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
|
||||
const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
|
||||
const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
|
||||
const [fontModalId, setFontModalId] = useState(uuidv4())
|
||||
const [colorModalId, setColorModalId] = useState(uuidv4())
|
||||
|
||||
const [colorModalId, setColorModalId] = useState(uuidv4())
|
||||
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
|
||||
const [showFontModal, setShowFontModal] = useState(false)
|
||||
const { getMessage } = useMessage()
|
||||
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(2, isShow)
|
||||
if (pixel) {
|
||||
setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
|
||||
if (originPixel) {
|
||||
setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
|
||||
}
|
||||
setIsShow(true)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(1, isShow)
|
||||
if (!isShow) {
|
||||
closePopups([fontModalId, colorModalId])
|
||||
}
|
||||
}, [isShow])
|
||||
|
||||
const handleFontSave = (font) => {
|
||||
setOriginFont(font.fontFamily)
|
||||
setOriginFontSize(font.fontSize)
|
||||
setOriginFontColor(font.fontColor)
|
||||
setOriginFontWeight(font.fontWeight)
|
||||
}
|
||||
const handleColorSave = () => {}
|
||||
|
||||
const colorPickerProps = {
|
||||
isShow: showColorPickerModal,
|
||||
setIsShow: setShowColorPickerModal,
|
||||
color: originColor,
|
||||
setColor: setOriginColor,
|
||||
id: colorModalId,
|
||||
isConfig: true,
|
||||
pos: {
|
||||
x: 495,
|
||||
y: 180,
|
||||
@ -79,14 +68,13 @@ export default function DimensionLineSetting(props) {
|
||||
const fontProps = {
|
||||
isShow: showFontModal,
|
||||
setIsShow: setShowFontModal,
|
||||
color: originColor,
|
||||
setColor: setOriginColor,
|
||||
font: originFont,
|
||||
setFont: setOriginFont,
|
||||
fontColor: 'black',
|
||||
setFontColor: setOriginFontColor,
|
||||
fontSize: originFontSize,
|
||||
setFontSize: setOriginFontSize,
|
||||
font: {
|
||||
fontFamily: originFont,
|
||||
fontSize: originFontSize,
|
||||
fontColor: originFontColor,
|
||||
fontWeight: originFontWeight,
|
||||
},
|
||||
onSave: handleFontSave,
|
||||
isConfig: true,
|
||||
id: fontModalId,
|
||||
pos: {
|
||||
@ -106,6 +94,29 @@ export default function DimensionLineSetting(props) {
|
||||
}
|
||||
}
|
||||
|
||||
const onSave = () => {
|
||||
setGlobalFont((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
dimensionLineText: {
|
||||
fontFamily: originFont,
|
||||
fontWeight: originFontWeight,
|
||||
fontSize: originFontSize,
|
||||
fontColor: originFontColor,
|
||||
},
|
||||
}
|
||||
})
|
||||
setDimensionLineSettings((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
pixel: originPixel?.value,
|
||||
color: originColor,
|
||||
}
|
||||
})
|
||||
setIsShow(false)
|
||||
closePopups([fontModalId, colorModalId, id])
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm mount`}>
|
||||
@ -149,9 +160,10 @@ export default function DimensionLineSetting(props) {
|
||||
className="font"
|
||||
style={{
|
||||
fontFamily: originFont?.value ?? '',
|
||||
color: originFontColor?.value ?? 'black',
|
||||
color: originFontColor.value ?? 'black',
|
||||
fontSize: originFontSize?.value ?? '12px',
|
||||
fontWeight: '400',
|
||||
fontStyle: originFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: originFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
9,999
|
||||
@ -161,7 +173,7 @@ export default function DimensionLineSetting(props) {
|
||||
style={{
|
||||
backgroundColor: originColor,
|
||||
borderColor: originColor,
|
||||
height: originPixel.value,
|
||||
height: originPixel?.value,
|
||||
}}
|
||||
></span>
|
||||
</div>
|
||||
@ -169,26 +181,7 @@ export default function DimensionLineSetting(props) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
setPixel(originPixel.value)
|
||||
setColor(originColor)
|
||||
setFont(originFont)
|
||||
setDimensionLineSettings((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
pixel: originPixel.value,
|
||||
color: originColor,
|
||||
font: originFont,
|
||||
fontColor: originFontColor,
|
||||
fontSize: originFontSize,
|
||||
}
|
||||
})
|
||||
setIsShow(false)
|
||||
closePopups([fontModalId, colorModalId, id])
|
||||
}}
|
||||
>
|
||||
<button className="btn-frame modal act" onClick={onSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useRecoilValue, useRecoilState } from 'recoil'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { wordDisplaySelector } from '@/store/settingAtom'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { checkLineOrientation, getDistance } from '@/util/canvas-util'
|
||||
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
||||
import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
|
||||
import { fontSelector } from '@/store/fontAtom'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import Distance from '@/components/floor-plan/modal/distance/Distance'
|
||||
import { commonUtilsState } from '@/store/commonUtilsAtom'
|
||||
import { center, point } from '@turf/turf'
|
||||
|
||||
export function useCommonUtils() {
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
@ -39,6 +37,7 @@ export function useCommonUtils() {
|
||||
commonTextKeyEvent()
|
||||
addCanvasMouseEventListener('mouse:down', (event) => {
|
||||
const pointer = canvas?.getPointer(event.e)
|
||||
|
||||
textbox = new fabric.Textbox('', {
|
||||
left: pointer.x,
|
||||
top: pointer.y,
|
||||
@ -49,7 +48,8 @@ export function useCommonUtils() {
|
||||
fill: commonTextFont.fontColor.value,
|
||||
fontFamily: commonTextFont.fontFamily.value,
|
||||
fontSize: commonTextFont.fontSize.value,
|
||||
fontStyle: commonTextFont.fontWeight.value,
|
||||
fontStyle: commonTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: commonTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
selectable: true,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
@ -262,7 +262,8 @@ export function useCommonUtils() {
|
||||
fill: dimensionLineTextFont.fontColor.value,
|
||||
fontSize: dimensionLineTextFont.fontSize.value,
|
||||
fontFamily: dimensionLineTextFont.fontFamily.value,
|
||||
fontStyle: dimensionLineTextFont.fontWeight.value,
|
||||
fontStyle: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: dimensionLineTextFont.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
selectable: true,
|
||||
textAlign: 'center',
|
||||
originX: 'center',
|
||||
|
||||
@ -17,8 +17,8 @@ export function useFont() {
|
||||
textObjs.forEach((obj) => {
|
||||
obj.set({
|
||||
fontFamily: commonText.fontFamily.value,
|
||||
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: commonText.fontSize.value,
|
||||
fill: commonText.fontColor.value,
|
||||
})
|
||||
@ -33,8 +33,8 @@ export function useFont() {
|
||||
textObjs.forEach((obj) => {
|
||||
obj.set({
|
||||
fontFamily: dimensionLineText.fontFamily.value,
|
||||
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: dimensionLineText.fontSize.value,
|
||||
fill: dimensionLineText.fontColor.value,
|
||||
})
|
||||
@ -49,8 +49,8 @@ export function useFont() {
|
||||
textObjs.forEach((obj) => {
|
||||
obj.set({
|
||||
fontFamily: flowText.fontFamily.value,
|
||||
fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: flowText.fontSize.value,
|
||||
fill: flowText.fontColor.value,
|
||||
})
|
||||
|
||||
@ -11,10 +11,6 @@ export const dimensionLineSettingsState = atom({
|
||||
default: {
|
||||
pixel: 1,
|
||||
color: '#000000',
|
||||
font: 'Arial',
|
||||
fontColor: '#000000',
|
||||
fontSize: 15,
|
||||
fontStyle: 'normal',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user