모듈 컨텍스트 메뉴 추가

src/components/floor-plan/modal/module/CircuitNumberEdit.jsx

@@ -0,0 +1,48 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CircuitNumberEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm`}>
+        <div className="modal-head">
+          <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: 'auto' }}>
+                  {getMessage('modal.module.circuit.number')}
+                </span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin block" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -0,0 +1,78 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+
+export default function PanelEdit(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, type = 'move', apply } = props
+  const { closePopup } = usePopup()
+  const [length, setLength] = useState(0)
+  const [direction, setDirection] = useState('')
+  const { getMessage } = useMessage()
+
+  const handleApply = () => {
+    apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap xm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
+          <div className="grid-option-wrap">
+            <div className="grid-option-box">
+              <div className="grid-input-form">
+                <span className="mr10">{getMessage('margin')}</span>
+                <div className="input-grid mr5">
+                  <input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
+                </div>
+                <span>mm</span>
+              </div>
+              <div className="grid-direction">
+                <button
+                  className={`direction up ${direction === '↑' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↑')
+                  }}
+                ></button>
+                <button
+                  className={`direction down ${direction === '↓' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('↓')
+                  }}
+                ></button>
+                <button
+                  className={`direction left ${direction === '←' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('←')
+                  }}
+                ></button>
+                <button
+                  className={`direction right ${direction === '→' ? 'act' : ''}`}
+                  onClick={() => {
+                    setDirection('→')
+                  }}
+                ></button>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/module/column/ColumnInsert.jsx

@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/module/column/ColumnRemove.jsx

@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function ColumnRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
+    { name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
+    { name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
+    { name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={(e) => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/module/row/RowInsert.jsx

@@ -0,0 +1,95 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowInsert(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  const HandleRadioChange = (e) => {
+    setSelectedType(Number(e.target.value))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.insert')} </h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
+                  <label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
+                  <label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
+                </div>
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-edit02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                  <div className="additional-color-box">
+                    <span className="additional-color white"></span>
+                    <span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/module/row/RowRemove.jsx

@@ -0,0 +1,118 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RowRemove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition, apply } = props
+  const { closePopup } = usePopup()
+  const [selectedType, setSelectedType] = useState(1)
+  const { getMessage } = useMessage()
+  const types = [
+    { name: getMessage('modal.row.remove.type.up'), value: 1 },
+    { name: getMessage('modal.row.remove.type.down'), value: 2 },
+    { name: getMessage('modal.row.remove.type.side'), value: 3 },
+    { name: getMessage('modal.row.remove.type.none'), value: 4 },
+  ]
+  const handleApply = () => {
+    if (apply) apply()
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.row.remove')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
+            <div className="additional-wrap">
+              <div className="additional-radio-wrap">
+                {types.map((type, index) => {
+                  return (
+                    <div className="d-check-radio pop">
+                      <input
+                        type="radio"
+                        name="radio01"
+                        id={`ra0${index + 1}`}
+                        onClick={() => setSelectedType(Number(e.target.value))}
+                        value={type.value}
+                        checked={selectedType === type.value}
+                      />
+                      <label htmlFor="ra01">{getMessage(type.name)}</label>
+                    </div>
+                  )
+                })}
+              </div>
+              <div className="additional-img-wrap">
+                {selectedType === 1 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del01.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 2 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del02.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 3 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del03.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+                {selectedType === 4 && (
+                  <Image
+                    src="/static/images/canvas/additional_bundle-del04.svg"
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{ width: 'auto', height: 'auto' }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('legend')}</div>
+            <div className="module-table-box">
+              <div className="module-table-inner">
+                <div className="additional-color-wrap">
+                  <div className="additional-color-box">
+                    <span className="additional-color pink"></span>
+                    <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleApply}>
+              {getMessage('modal.common.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/hooks/useContextMenu.js

@@ -16,7 +16,6 @@ import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
 import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
 import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
 import FontSetting from '@/components/common/font/FontSetting'
-import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
@@ -24,6 +23,13 @@ import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
 import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
+import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
+import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
+import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
+import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
+import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
+import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
+import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -36,6 +42,8 @@ export function useContextMenu() {
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
+  const [cell, setCell] = useState(null)
+  const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -241,6 +249,7 @@ export function useContextMenu() {
 
   useEffect(() => {
     if (currentObject?.name) {
+      console.log(currentObject?.name)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':
@@ -475,6 +484,110 @@ export function useContextMenu() {
             ],
           ])
           break
+        case 'panel':
+          setContextMenu([
+            [
+              {
+                id: 'remove',
+                name: getMessage('contextmenu.remove'),
+              },
+              {
+                id: 'move',
+                name: getMessage('contextmenu.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'copy',
+                name: getMessage('contextmenu.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+            ],
+            [
+              {
+                id: 'columnMove',
+                name: getMessage('contextmenu.column.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'columnCopy',
+                name: getMessage('contextmenu.column.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'columnRemove',
+                name: getMessage('contextmenu.column.remove'),
+                component: <ColumnRemove id={popupId} />,
+              },
+              {
+                id: 'columnInsert',
+                name: getMessage('contextmenu.column.insert'),
+                component: <ColumnInsert id={popupId} />,
+              },
+            ],
+            [
+              {
+                id: 'rowMove',
+                name: getMessage('contextmenu.row.move'),
+                component: <PanelEdit id={popupId} type={'move'} />,
+              },
+              {
+                id: 'rowCopy',
+                name: getMessage('contextmenu.row.copy'),
+                component: <PanelEdit id={popupId} type={'copy'} />,
+              },
+              {
+                id: 'rowRemove',
+                name: getMessage('contextmenu.row.remove'),
+                component: <RowRemove id={popupId} />,
+              },
+              {
+                id: 'rowInsert',
+                name: getMessage('contextmenu.row.insert'),
+                component: <RowInsert id={popupId} />,
+              },
+            ],
+          ])
+          break
+        case 'module':
+        case 'dimensionLineText':
+          setContextMenu([
+            [
+              {
+                id: 'moduleVerticalCenterAlign',
+                name: getMessage('contextmenu.module.vertical.align'),
+              },
+              {
+                id: 'moduleHorizonCenterAlign',
+                name: getMessage('contextmenu.module.horizon.align'),
+              },
+              {
+                id: 'moduleLeftAlign',
+                name: getMessage('contextmenu.module.left.align'),
+              },
+              {
+                id: 'moduleRightAlign',
+                name: getMessage('contextmenu.module.right.align'),
+              },
+              {
+                id: 'moduleUpAlign',
+                name: getMessage('contextmenu.module.up.align'),
+              },
+              {
+                id: 'moduleDownAlign',
+                name: getMessage('contextmenu.module.down.align'),
+              },
+              {
+                id: 'moduleRemove',
+                name: getMessage('contextmenu.module.remove'),
+              },
+              {
+                id: 'moduleCircuitNumberEdit',
+                name: getMessage('contextmenu.module.circuit.number.edit'),
+                component: <CircuitNumberEdit id={popupId} />,
+              },
+            ],
+          ])
+          break
         default:
           currentMenuSetting()
       }

src/locales/ja.json

@@ -303,11 +303,35 @@
   "contextmenu.column.move": "열 이동(JA)",
   "contextmenu.column.copy": "열 복사(JA)",
   "contextmenu.column.remove": "コピー設定",
-  "contextmenu.column.insert": "열 삽입(JA)",
+  "modal.panel.column.remove": "コピー設定",
+  "modal.panel.column.remove.info": "削除列をどのようにしますか？",
+  "modal.panel.column.remove.type.left": "左に減らす",
+  "modal.panel.column.remove.type.right": "右に減らす",
+  "modal.panel.column.remove.type.side": "両側に減る",
+  "modal.panel.column.remove.type.none": "減らさない",
+  "modal.panel.select.column": "選択列",
+  "modal.panel.select.row": "選択段",
+  "modal.panel.insert.column": "挿入列",
+  "modal.panel.insert.row": "挿入段",
+  "modal.panel.column.insert": "列の挿入",
+  "modal.panel.column.insert.info": "挿入する方向を選択してください。",
+  "modal.panel.column.insert.type.left": "左挿入",
+  "modal.panel.column.insert.type.right": "右挿入",
+  "contextmenu.column.insert": "列の挿入",
   "contextmenu.row.move": "단 이동(JA)",
   "contextmenu.row.copy": "단 복사(JA)",
-  "contextmenu.row.remove": "단 삭제(JA)",
+  "contextmenu.row.remove": "ただし削除",
-  "contextmenu.row.insert": "단 삽입(JA)",
+  "modal.row.remove": "ただし削除",
+  "modal.row.remove.info": "削除列をどのようにしますか？",
+  "modal.row.remove.type.up": "上向きに減らす",
+  "modal.row.remove.type.down": "下向きに減らす",
+  "modal.row.remove.type.side": "両側に減らす",
+  "modal.row.remove.type.none": "減らさない",
+  "contextmenu.row.insert": "段挿入",
+  "modal.row.insert": "段挿入",
+  "modal.row.insert.info": "挿入する方向を選択してください。",
+  "modal.row.insert.type.up": "上部挿入",
+  "modal.row.insert.type.down": "下の挿入",
   "modal.move.setting": "移動設定",
   "modal.move.setting.info": "間隔を設定し、移動方向を選択します。",
   "modal.copy.setting": "コピー設定",
@@ -318,13 +342,36 @@
   "contextmenu.font.setting": "폰트 설정(JA)",
   "contextmenu.grid.color.edit": "그리드 색 변경(JA)",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경(JA)",
-  "contextmenu.display.edit": "표시 변경(JA)",
+  "contextmenu.display.edit": "表示の変更",
+  "modal.display.edit.info": "寸法線に表示する数値を入力してください",
+  "modal.display.edit.before.length": "既存の長さ",
+  "modal.display.edit.after.length": "変更の長さ",
+  "modal.display.edit.corner.valley": "コーナー・ゴールの場合",
+  "modal.display.edit.input.slope": "경사를 傾斜を着せてください。",
+  "modal.display.edit.input.slope.info": "傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。",
+  "modal.distance": "距離測定",
+  "modal.distance.dual.point": "2点間距離",
+  "modal.distance.horizon": "水平距離",
+  "modal.distance.vertical": "垂直距離",
   "contextmenu.opening.offset": "개구 오프셋(JA)",
   "contextmenu.remove": "삭제(JA)",
   "contextmenu.remove.all": "전체 삭제(JA)",
   "contextmenu.move": "이동(JA)",
   "contextmenu.copy": "복사(JA)",
   "contextmenu.edit": "편집(JA)",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬(JA)",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬(JA)",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬(JA)",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬(JA)",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬(JA)",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬(JA)",
+  "contextmenu.module.remove": "모듈 일괄 삭제(JA)",
+  "contextmenu.module.move": "모듈 일괄 이동(JA)",
+  "contextmenu.module.copy": "모듈 일괄 복사(JA)",
+  "contextmenu.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit": "モジュール一括回路番号の変更",
+  "modal.module.circuit.number.edit.info": "回路番号を入力してください。",
+  "modal.module.circuit.number": "回路番号",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
@@ -415,6 +462,7 @@
   "common.input.file": "ファイルを読み込む",
   "common.input.file.load": "ファイルの追加",
   "common.require": "必須",
+  "common.ok": "確認",
   "commons.west": "立つ",
   "commons.east": "ドン",
   "commons.south": "南",
@@ -690,6 +738,7 @@
   "shed": "片側の流れ",
   "apply": "適用",
   "module": "モジュール",
+  "legend": "凡例",
   "has.sleeve": "袖あり",
   "has.not.sleeve": "袖なし",
   "jerkinhead.width": "半折先幅",

src/locales/ko.json

@@ -308,11 +308,35 @@
   "contextmenu.column.move": "열 이동",
   "contextmenu.column.copy": "열 복사",
   "contextmenu.column.remove": "열 삭제",
+  "modal.panel.column.remove": "열 삭제",
+  "modal.panel.column.remove.info": "삭제열을 어떻게 하시겠습니까?",
+  "modal.panel.column.remove.type.left": "왼쪽으로 줄이다",
+  "modal.panel.column.remove.type.right": "오른쪽으로 줄이다",
+  "modal.panel.column.remove.type.side": "양쪽으로 줄이다",
+  "modal.panel.column.remove.type.none": "줄이지 않는다",
+  "modal.panel.select.column": "선택 열",
+  "modal.panel.select.row": "선택 단",
+  "modal.panel.insert.column": "삽입 열",
+  "modal.panel.insert.row": "삽입 단",
   "contextmenu.column.insert": "열 삽입",
+  "modal.panel.column.insert": "열 삽입",
+  "modal.panel.column.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.panel.column.insert.type.left": "왼쪽 삽입",
+  "modal.panel.column.insert.type.right": "오른쪽 삽입",
   "contextmenu.row.move": "단 이동",
   "contextmenu.row.copy": "단 복사",
   "contextmenu.row.remove": "단 삭제",
+  "modal.row.remove": "단 삭제",
+  "modal.row.remove.info": "삭제 단을 어떻게 하시겠습니까?",
+  "modal.row.remove.type.up": "위족으로 줄이다",
+  "modal.row.remove.type.down": "아래쪽으로 줄이다",
+  "modal.row.remove.type.side": "양쪽으로 줄이다",
+  "modal.row.remove.type.none": "줄이지 않는다",
   "contextmenu.row.insert": "단 삽입",
+  "modal.row.insert": "단 삽입",
+  "modal.row.insert.info": "삽입할 방향을 선택해주세요.",
+  "modal.row.insert.type.up": "위쪽 삽입",
+  "modal.row.insert.type.down": "아래쪽 삽입",
   "modal.move.setting": "이동 설정",
   "modal.move.setting.info": "간격을 설정하고 이동 방향을 선택하십시오.",
   "modal.copy.setting": "복사 설정",
@@ -324,12 +348,35 @@
   "contextmenu.grid.color.edit": "그리드 색 변경",
   "contextmenu.dimension.auxiliary.line.edit": "치수 보조선 변경",
   "contextmenu.display.edit": "표시 변경",
+  "modal.display.edit.info": "치수선에 표시할 수치를 입력해 주세요.",
+  "modal.display.edit.before.length": "기존 길이",
+  "modal.display.edit.after.length": "변경 길이",
+  "modal.display.edit.corner.valley": "구석・골의 경우",
+  "modal.display.edit.input.slope": "경사를 입력해주세요.",
+  "modal.display.edit.input.slope.info": "경사 설정되어 있는 경우 입력한 수치에 경사 계산을 한 수치가 표시됩니다.",
+  "modal.distance": "거리 측정",
+  "modal.distance.dual.point": "두 점간 거리",
+  "modal.distance.horizon": "수평 거리",
+  "modal.distance.vertical": "수직 거리",
   "contextmenu.opening.offset": "개구 오프셋",
   "contextmenu.remove": "삭제",
   "contextmenu.remove.all": "전체 삭제",
   "contextmenu.move": "이동",
   "contextmenu.copy": "복사",
   "contextmenu.edit": "편집",
+  "contextmenu.module.vertical.align": "모듈 세로 가운데 정렬",
+  "contextmenu.module.horizon.align": "모듈 가로 가운데 정렬",
+  "contextmenu.module.left.align": "모듈 왼쪽 정렬",
+  "contextmenu.module.right.align": "모듈 오른쪽 정렬",
+  "contextmenu.module.up.align": "모듈 위쪽 정렬",
+  "contextmenu.module.down.align": "모듈 아래쪽 정렬",
+  "contextmenu.module.remove": "모듈 일괄 삭제",
+  "contextmenu.module.move": "모듈 일괄 이동",
+  "contextmenu.module.copy": "모듈 일괄 복사",
+  "contextmenu.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit": "모듈 일괄 회로 번호 변경",
+  "modal.module.circuit.number.edit.info": "회로 번호를 입력해주세요.",
+  "modal.module.circuit.number": "회로 번호",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
@@ -420,6 +467,7 @@
   "common.input.file": "파일 불러오기",
   "common.input.file.load": "불러오기",
   "common.require": "필수",
+  "common.ok": "확인",
   "commons.west": "서",
   "commons.east": "동",
   "commons.south": "남",
@@ -695,6 +743,7 @@
   "shed": "한쪽흐름",
   "apply": "적용",
   "module": "모듈",
+  "legend": "범례",
   "has.sleeve": "소매 있음",
   "has.not.sleeve": "소매 없음",
   "jerkinhead.width": "반절처 폭",