글꼴 및 도면 크기 작업중

2024-10-21 14:13:43 +09:00 · 2024-10-21 14:13:43 +09:00 · 93ee8c14d9
commit 93ee8c14d9
parent 128c564b43
10 changed files with 265 additions and 46 deletions
--- a/public/static/images/common/select_del.svg
+++ b/public/static/images/common/select_del.svg
@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@ -10,13 +10,14 @@ export default function ColorPickerModal(props) {
  const [originColor, setOriginColor] = useState(color)
  const { closePopup } = usePopup()

+  console.log(props)
  useEffect(() => {
    setOriginColor(color)
  }, [isShow])
-  
+
  return (
    <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lr`}>
+      <div className={`modal-pop-wrap lr mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
          <button
--- a/src/components/common/font/FontSetting.jsx
+++ b/src/components/common/font/FontSetting.jsx
@ -1,20 +1,63 @@
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'

-const SelectOption = [{ name: '原寸' }, { name: '原寸' }, { name: '原寸' }, { name: '原寸' }]
+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' },
+]
+const fontOptions = [
+  { name: '보통', value: 'normal' },
+  { name: '기울임꼴', value: 'italic' },
+  {
+    name: '굵게',
+    value: 'bold',
+  },
+  { name: '굵은 기울임꼴', value: 'boldAndItalic' },
+]
+const fontSizes = [
+  ...Array.from({ length: 4 }).map((_, index) => {
+    return { name: index + 8, value: index + 8 }
+  }),
+  ...Array.from({ length: 9 }).map((_, index) => {
+    return { name: (index + 6) * 2, value: (index + 6) * 2 }
+  }),
+  { name: 36, value: 36 },
+  { name: 48, value: 48 },
+  { name: 72, value: 72 },
+]
+const fontColors = [
+  { name: '검정색', value: 'black' },
+  { name: '빨강색', value: 'red' },
+  { name: '파랑색', value: 'blue' },
+  { name: '회색', value: 'gray' },
+  { name: '황색', value: 'yellow' },
+  { name: '녹색', value: 'green' },
+  { name: '분홍색', value: 'pink' },
+  { name: '황금색', value: 'gold' },
+  { name: '남색', value: 'darkblue' },
+]
 export default function FontSetting(props) {
-  const { id, setShowFontSettingModal } = props
+  const { id, setIsShow, font, setFont, fontSize, setFontSize } = props
  const { closePopup } = usePopup()
+  const [originFont, setOriginFont] = useState(font)
+  const [originFontSize, setOriginFontSize] = useState(fontSize)
+  const [selectedFont, setSelectedFont] = useState(font ? font : fonts[0])
+  const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
+  const [selectedFontColor, setSelectedFontColor] = useState(null)
  return (
-    <WithDraggable isShow={true} pos={{ x: 820, y: -815 }}>
-      <div className={`modal-pop-wrap r`}>
+    <WithDraggable isShow={true} pos={{ x: 455, y: 180 }}>
+      <div className={`modal-pop-wrap lrr`}>
        <div className="modal-head">
          <h1 className="title">フォント </h1>
          <button
            className="modal-close"
            onClick={() => {
-              setShowFontSettingModal(false)
+              setIsShow(false)
              closePopup(id)
            }}
          >
@ -27,43 +70,57 @@ export default function FontSetting(props) {
              <div className="font-option-item">
                <div className="option-item-tit">文字(F)</div>
                <div className="grid-select">
-                  <QSelectBox title={'MS PGothic'} option={SelectOption} />
+                  <QSelectBox options={fonts} value={selectedFont} onChange={(e) => setSelectedFont(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">フォントスタイル(Y)</div>
                <div className="grid-select">
-                  <QSelectBox title={'いつもの'} option={SelectOption} />
+                  <QSelectBox options={fontOptions} onChange={(e) => setSelectedFont(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">サイズ(S)</div>
                <div className="grid-select">
-                  <QSelectBox
-                    title={'8'}
-                    options={Array.from({ length: 9 }).map((_, index) => {
-                      return { id: index, name: 8 * (index + 1) }
-                    })}
-                  />
+                  <QSelectBox options={fontSizes} value={selectedFontSize} onChange={(e) => setSelectedFontSize(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">フォン</div>
                <div className="grid-select">
-                  <QSelectBox title={'黒'} option={SelectOption} />
+                  <QSelectBox title={''} options={fontColors} value={selectedFontColor} onChange={(e) => setSelectedFontColor(e)} />
                </div>
              </div>
            </div>
            <div className="font-ex-wrap">
              <div className="font-ex-tit">見る</div>
              <div className="font-ex-box">
-                <span style={{ fontSize: '12px', fontWeight: '400', color: '#101010' }}>Aaあぁアァ</span>
+                <span
+                  style={{
+                    fontFamily: selectedFont?.value ?? '',
+                    fontSize: selectedFontSize?.value ?? '12px',
+                    fontWeight: '400',
+                    color: selectedFontColor?.value ?? 'black',
+                  }}
+                >
+                  Aaあぁアァ
+                </span>
              </div>
            </div>
            <div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
          </div>
          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">ストレージ</button>
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setIsShow(false)
+                setFont(selectedFont)
+                setFontSize(selectedFontSize)
+                closePopup(id)
+              }}
+            >
+              ストレージ
+            </button>
          </div>
        </div>
      </div>
--- a/src/components/common/popupManager/PopupManager.jsx
+++ b/src/components/common/popupManager/PopupManager.jsx
@ -1,8 +1,9 @@
 'use client'
 import { useRecoilState } from 'recoil'
 import { popupState } from '@/store/popupAtom'
+import { Fragment } from 'react'

 export default function PopupManager() {
  const [popup, setPopup] = useRecoilState(popupState)
-  return <>{popup.children?.map((child) => child.component)}</>
+  return popup.children?.map((child) => <Fragment key={child.id}>{child.component}</Fragment>)
 }
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@ -11,7 +11,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { v4 as uuidv4 } from 'uuid'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'

-export default function GridOption(props) {
+export default function GridOption() {
  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@ -21,7 +21,8 @@ export default function GridOption(props) {
  const [color, setColor] = useColor(gridColor)
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
-  const { addPopup } = usePopup()
+  const { addPopup, closePopup } = usePopup()
+  let [colorId, dotLineId] = ''

  useEffect(() => {
    console.log('GridOption useEffect 실행')
@ -36,6 +37,8 @@ export default function GridOption(props) {
  }, [showColorPickerModal])

  useEffect(() => {
+    colorId = uuidv4()
+    dotLineId = uuidv4()
    return () => {
      setSettingModalGridOptions((prev) => {
        const newSettingOptions = [...prev]
@ -47,7 +50,7 @@ export default function GridOption(props) {

  const onClickOption = (option) => {
    const newGridOptions = [...gridOptions]
-    const id = uuidv4()
+
    newGridOptions.map((item) => {
      if (item.id === option.id) {
        item.selected = !item.selected
@ -65,9 +68,10 @@ export default function GridOption(props) {
      // 점.선 그리드
      if (option.selected) {
        setShowDotLineGridModal(true)
-        addPopup(id, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={id} />)
+        addPopup(dotLineId, 2, <DotLineGrid setShowDotLineGridModal={setShowDotLineGridModal} id={dotLineId} />)
      } else {
        setShowDotLineGridModal(false)
+        closePopup(dotLineId)
      }
    }

@ -79,12 +83,12 @@ export default function GridOption(props) {

    if (option.id === 4) {
      // 그리드 색 설정
-      console.log(option)
      if (option.selected) {
        setShowColorPickerModal(true)
-        addPopup(id, 2, <ColorPickerModal {...colorPickerProps} id={id} />)
+        addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} id={colorId} />)
      } else {
        setShowColorPickerModal(false)
+        closePopup(colorId)
      }
    }

--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@ -134,19 +134,43 @@ export default function SecondOption() {
    }
    setAdsorptionRange(option.range)
  }
+  const dimensionId = uuidv4()
+  const fontId = uuidv4()
+  const [pixel, setPixel] = useState(1)
+  const [color, setColor] = useState('#FF0000')
+  const [font, setFont] = useState(null)
+  const [fontSize, setFontSize] = useState('#FF0000')
+  const [fontColor, setFontColor] = useState('#FF0000')
+
+  const dimensionProps = {
+    color,
+    setColor,
+    pixel,
+    setPixel,
+    font,
+    setFont,
+    fontSize,
+    setFontSize,
+    fontColor,
+    setFontColor,
+    id: dimensionId,
+    isShow: showDimensionLineSettingModal,
+    setIsShow: setShowDimensionLineSettingModal,
+  }

  const handlePopup = (type) => {
    const id = uuidv4()

    switch (type) {
      case 'dimensionLine':
-        addPopup(id, 2, <DimensionLineSetting id={id} />)
+        setShowDimensionLineSettingModal(true)
+        addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
        break
      case 'font1': //문자 글꼴변경
      case 'font2': //흐름 방향 글꼴 변경
      case 'font3': //치수 글꼴변경
      case 'font4': //회로번호 글꼴변경
-        addPopup(id, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
+        addPopup(fontId, 2, <FontSetting id={id} setShowFontSettingModal={setShowFontSettingModal} />)
    }
  }

@ -176,7 +200,7 @@ export default function SecondOption() {
        </div>
        <div className="flex-check-box for-line">
          {/*<button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>*/}
-          <button className="arr-btn" onClick={() => handlePopup('dimensionLine')}>
+          <button className={`arr-btn ${showDimensionLineSettingModal ? 'act' : ''}`} onClick={() => handlePopup('dimensionLine')}>
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
          </button>
          <button className="arr-btn">
--- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx
+++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx
@ -23,7 +23,7 @@ export default function SettingModal01(props) {

  return (
    <>
-      <WithDraggable isShow={true} pos={{ x: 1270, y: -815 }}>
+      <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
        <div className={`modal-pop-wrap sm mount`}>
          <div className="modal-head">
            <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
@ -48,7 +48,7 @@ export default function SettingModal01(props) {
            </div>
            {buttonAct === 1 && <FirstOption />}
            {buttonAct === 2 && <SecondOption />}
-            {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
+            {buttonAct === 3 && <GridOption />}
          </div>
        </div>
      </WithDraggable>
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@ -1,51 +1,171 @@
 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'
+/*
+ color: 치수선 색
+ fontColor: 글꼴 색
+ fontSize: 치수선 치수 색
+ pixel: 치수선 두깨
+*/
 export default function DimensionLineSetting(props) {
-  const { id, pos = { x: 970, y: -815 }, setShowColorPickerModal } = props
-  console.log(props)
-  const { closePopup } = usePopup()
+  const {
+    color,
+    setColor,
+    font,
+    setFont,
+    fontColor,
+    setFontColor,
+    fontSize,
+    setFontSize,
+    pixel,
+    setPixel,
+    setIsShow,
+    id,
+    pos = { x: 985, y: 180 },
+  } = props
+  const { addPopup, closePopup } = usePopup()
+  const pixels = Array.from({ length: 5 }).map((_, index) => {
+    return { 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 fontModalId = uuidv4()
+  const colorModalId = uuidv4()
+  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
+  const [showFontModal, setShowFontModal] = useState(false)
+  const { getMessage } = useMessage()
+  const colorPickerProps = {
+    isShow: showColorPickerModal,
+    setIsShow: setShowColorPickerModal,
+    color: originColor,
+    setColor: setOriginColor,
+    id: colorModalId,
+    pos: {
+      x: 480,
+      y: -815,
+    },
+  }
+
+  const fontProps = {
+    isShow: showFontModal,
+    setIsShow: setShowFontModal,
+    color: originColor,
+    setColor: setOriginColor,
+    font: originFont,
+    setFont: setOriginFont,
+    fontColor: 'black',
+    setFontColor: setOriginFontColor,
+    fontSize: originFontSize,
+    setFontSize: setOriginFontSize,
+    id: fontModalId,
+    pos: {
+      x: 480,
+      y: -815,
+    },
+  }
+  const popupHandle = (type) => {
+    switch (type) {
+      case 'color':
+        closePopup(fontModalId)
+        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
+        break
+      case 'font':
+        closePopup(colorModalId)
+        addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
+        break
+    }
+  }
+
+  useEffect(() => {
+    console.log(pixel)
+    if (pixel) {
+      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
+    }
+  }, [])
+
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap xxxm`}>
        <div className="modal-head">
-          <h1 className="title">寸法線 設定 </h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
+          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
+          <button
+            className="modal-close"
+            onClick={() => {
+              setIsShow(false)
+              closePopup(id)
+            }}
+          >
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="font-btn-wrap">
-            <button className="btn-frame modal">フォント設定</button>
+            <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' }}>寸法線の線太さ</span>
-              <div className="input-grid mr5" style={{ width: '66px' }}>
-                <input type="text" className="input-origin block" defaultValue={1} />
+              <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' }}>寸法線の線の色</span>
-              <button className="color-btn" style={{ backgroundColor: '#ff0000' }} onClick={() => setShowColorPickerModal(true)}></button>
+              <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">見る</div>
+            <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={{ fontSize: '12px', fontWeight: '400' }}>
+                  <span
+                    className="font"
+                    style={{
+                      fontFamily: originFont?.value ?? '',
+                      color: originFontColor?.value ?? 'black',
+                      fontSize: originFontSize?.value ?? '12px',
+                      fontWeight: '400',
+                    }}
+                  >
                    9,999
                  </span>
-                  <span className="line" style={{ backgroundColor: '#ff0000', borderColor: '#ff0000', height: '1px' }}></span>
+                  <span
+                    className="line"
+                    style={{
+                      backgroundColor: originColor,
+                      borderColor: originColor,
+                      height: originPixel.value,
+                    }}
+                  ></span>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">ストレージ</button>
+            <button
+              className="btn-frame modal act"
+              onClick={() => {
+                setPixel(originPixel.value)
+                setColor(originColor)
+                setFont(originFont)
+                setIsShow(false)
+                closePopup(id)
+              }}
+            >
+              {getMessage('modal.common.save')}
+            </button>
          </div>
        </div>
      </div>
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -156,6 +156,7 @@
  "plan.menu.simulation.pdf": "PDF",
  "plan.mode.vertical.horizontal": "垂直水平モード",
  "plan.mode.free": "프리 모드(JA)",
+  "modal.font.setting": "フォント設定",
  "modal.canvas.setting": "Canvas設定",
  "modal.canvas.setting.display": "ディスプレイ設定",
  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
@ -198,6 +199,9 @@
  "modal.canvas.setting.font.plan.absorption.medium": "中",
  "modal.canvas.setting.font.plan.absorption.large": "ティーン",
  "modal.canvas.setting.font.plan.absorption.dimension.line": "寸法線の設定",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "寸法線の線太さ",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.color": "寸法線の線の色",
+  "modal.canvas.setting.font.plan.absorption.dimension.display": "見る",
  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
  "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
  "modal.canvas.setting.first.option.alloc": "할당표시",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -160,6 +160,7 @@
  "plan.menu.simulation.pdf": "PDF",
  "plan.mode.vertical.horizontal": "수직 수평 모드",
  "plan.mode.free": "프리 모드",
+  "modal.font.setting": "글꼴 설정",
  "modal.canvas.setting": "Canvas 설정",
  "modal.canvas.setting.display": "디스플레이 설정",
  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
@ -203,6 +204,9 @@
  "modal.canvas.setting.font.plan.absorption.medium": "중",
  "modal.canvas.setting.font.plan.absorption.large": "대",
  "modal.canvas.setting.font.plan.absorption.dimension.line": "치수선 설정",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "치수선의 굵기",
+  "modal.canvas.setting.font.plan.absorption.dimension.line.color": "치수선의 색",
+  "modal.canvas.setting.font.plan.absorption.dimension.display": "보기",
  "modal.canvas.setting.font.plan.absorption.plan.size.setting": "도면크기 설정",
  "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
  "modal.canvas.setting.first.option.alloc": "할당표시",