Merge pull request '#1052 물건 우편번호 검색팝업 적용기능' (#45) from feature/qcast-1052 into dev

Reviewed-on: #45

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -4,9 +4,11 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
-import { currentObjectState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useGrid } from '@/hooks/common/useGrid'
-
+import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
+const GRID_PADDING = 5
 export default function GridCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
@@ -15,10 +17,40 @@ export default function GridCopy(props) {
   const [length, setLength] = useState('0')
   const [arrow, setArrow] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
-  const { copy } = useGrid()
+  const canvas = useRecoilValue(canvasState)
+  const gridColor = useRecoilValue(gridColorState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const handleApply = () => {
     copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
   }
+
+  const copy = (object, length) => {
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
+    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
+
+    const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      padding: GRID_PADDING,
+      direction: object.direction,
+      visible: isGridDisplay,
+      name: object.name,
+    })
+
+    canvas.add(line)
+    canvas.setActiveObject(line)
+    canvas.renderAll()
+  }
   return (
     <WithDraggable isShow={true} pos={pos} className="xm">
       <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -6,7 +6,6 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
-import { useGrid } from '@/hooks/common/useGrid'
 import { useSwal } from '@/hooks/useSwal'
 import { set } from 'react-hook-form'
 
@@ -17,7 +16,6 @@ export default function GridMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
-  const { move } = useGrid()
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const [isAll, setIsAll] = useState(false)
   const [verticalSize, setVerticalSize] = useState('0')
@@ -69,6 +67,16 @@ export default function GridMove(props) {
     handleClose()
   }
 
+  const move = (object, x, y) => {
+    object.set({
+      ...object,
+      x1: object.direction === 'vertical' ? object.x1 + x : 0,
+      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
+      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
+      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
+    })
+  }
+
   const handleClose = () => {
     closePopup(id)
   }

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -105,6 +105,16 @@ export default function GridOption(props) {
     initEvent()
   }, [gridOptions])
 
+  useEffect(() => {
+    return () => {
+      setAdsorptionPointAddMode(false)
+      setTempGridMode(false)
+      setTimeout(() => {
+        initEvent()
+      }, 100)
+    }
+  }, [])
+
   const dotLineGridProps = {
     id: dotLineId,
     setIsShow: setShowDotLineGridModal,

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -6,16 +6,22 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
-import { canGridOptionSeletor } from '@/store/canvasAtom'
+import { adsorptionPointAddModeState, canGridOptionSeletor, tempGridModeState } from '@/store/canvasAtom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useTempGrid } from '@/hooks/useTempGrid'
+import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { useEvent } from '@/hooks/useEvent'
 
 export default function SettingModal01(props) {
   const { id } = props
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
   const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
+  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
+  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
+  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const { closePopup } = usePopup()
 
   const {
@@ -71,9 +77,22 @@ export default function SettingModal01(props) {
     setButtonAct(num)
   }
 
+  const onClose = () => {
+    setTempGridMode(false)
+    setAdsorptionPointAddMode(false)
+    setGridOptions((prev) => {
+      const newSettingOptions = [...prev]
+      newSettingOptions[0].selected = false
+      newSettingOptions[2].selected = false
+      return [...newSettingOptions]
+    })
+
+    closePopup(id, true)
+  }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
-      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
+      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={onClose} />
       <WithDraggable.Body>
         <div className="modal-btn-wrap">
           <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>

src/components/management/StuffDetail.jsx

@@ -1362,10 +1362,11 @@ export default function StuffDetail() {
     }
 
     if (params?.receiveUser !== '') {
-      if (checkLength(params?.receiveUser.trim()) > 10) {
+      if (checkLength(params?.receiveUser.trim()) > 40) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }
+
     //로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
     if (session.storeLvl !== '1') {
       if (params.saleStoreLevel === '1') {
@@ -1435,20 +1436,15 @@ export default function StuffDetail() {
     }
   }
 
+  /**
+   * 전각20자 (반각40자)
+   */
   const checkLength = (value) => {
-    let str = new String(value)
+    let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
-    let _byte = 0
+    let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
-    if (str.length !== 0) {
+
-      for (let i = 0; i < str.length; i++) {
+    let totalLength = fullWidthLength * 2 + halfWidthLength
-        let str2 = str.charAt(i)
+    return totalLength
-        if (encodeURIComponent(str2).length > 4) {
-          _byte += 2
-        } else {
-          _byte++
-        }
-      }
-    }
-    return _byte
   }
   // 임시저장
   const onTempSave = async () => {
@@ -1498,7 +1494,7 @@ export default function StuffDetail() {
 
     // 담당자 자리수 체크
     if (params?.receiveUser !== '') {
-      if (checkLength(params?.receiveUser.trim()) > 10) {
+      if (checkLength(params?.receiveUser.trim()) > 40) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }

src/components/management/popup/FindAddressPop.jsx

@@ -66,6 +66,11 @@ export default function FindAddressPop(props) {
       zipcode: watch('zipNo'),
     }
 
+    if (params.zipcode.length < 7) {
+      swalFire({ text: getMessage('stuff.addressPopup.error.message1'), type: 'alert', icon: 'warning' })
+      return
+    }
+
     setIsGlobalLoading(true)
     get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
       if (res.status === 200) {
@@ -85,15 +90,20 @@ export default function FindAddressPop(props) {
   }
   // 주소적용 클릭
   const applyAddress = () => {
-    if (prefId == null) {
+    if (!isNotEmptyArray(gridProps.gridData)) {
+      swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
+      return
+    }
+    if (gridProps.gridData[0].zipcode == '') {
       swalFire({ text: getMessage('stuff.addressPopup.error.message2'), type: 'alert', icon: 'warning' })
     } else {
+      //검색결과 무조건 1:1
       props.zipInfo({
-        zipNo: zipNo,
+        zipNo: gridProps.gridData[0].zipcode,
-        address1: address1,
+        address1: gridProps.gridData[0].address1,
-        address2: address2,
+        address2: gridProps.gridData[0].address2,
-        address3: address3,
+        address3: gridProps.gridData[0].address3,
-        prefId: prefId,
+        prefId: gridProps.gridData[0].prefcode,
       })
 
       //팝업닫기

src/hooks/common/useGrid.js

@@ -153,18 +153,18 @@ export function useGrid() {
   const move = (object, x, y) => {
     object.set({
       ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : 0,
+      x1: object.direction === 'vertical' ? object.x1 + x : -1500,
-      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
+      x2: object.direction === 'vertical' ? object.x1 + x : 2500,
-      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
+      y1: object.direction === 'vertical' ? -1500 : object.y1 + y,
-      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
+      y2: object.direction === 'vertical' ? 2500 : object.y1 + y,
     })
   }
 
   const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : -1500
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : 2500
-    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
+    const lineStartY = object.direction === 'vertical' ? -1500 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? 2500 : object.y1 + length
 
     const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
       stroke: gridColor,

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -449,7 +449,7 @@ export const useEstimateController = (planNo, flag) => {
         icon: 'warning',
       })
     } else {
-      if (checkLength(copyReceiveUser.trim()) > 10) {
+      if (checkLength(copyReceiveUser.trim()) > 40) {
         return swalFire({ text: getMessage('stuff.detail.tempSave.message2'), type: 'alert', icon: 'warning' })
       }
     }
@@ -489,20 +489,15 @@ export const useEstimateController = (planNo, flag) => {
       })
   }
 
+  /**
+   * 전각20자 (반각40자)
+   */
   const checkLength = (value) => {
-    let str = new String(value)
+    let fullWidthLength = value.replace(/[^\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
-    let _byte = 0
+    let halfWidthLength = value.replace(/[\u3000-\u9FFF\uFF01-\uFF5E]/g, '').length
-    if (str.length !== 0) {
+
-      for (let i = 0; i < str.length; i++) {
+    let totalLength = fullWidthLength * 2 + halfWidthLength
-        let str2 = str.charAt(i)
+    return totalLength
-        if (encodeURIComponent(str2).length > 4) {
-          _byte += 2
-        } else {
-          _byte++
-        }
-      }
-    }
-    return _byte
   }
 
   return {

src/hooks/roofcover/useOuterLineWall.js

@@ -33,6 +33,7 @@ import { usePopup } from '@/hooks/usePopup'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
 import Big from 'big.js'
 import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
+import { useObject } from '@/hooks/useObject'
 
 //외벽선 그리기
 export function useOuterLineWall(id, propertiesId) {
@@ -57,6 +58,7 @@ export function useOuterLineWall(id, propertiesId) {
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()
   const { addPolygonByLines } = usePolygon()
+  const { handleSelectableObjects } = useObject()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
@@ -91,18 +93,16 @@ export function useOuterLineWall(id, propertiesId) {
   const isFix = useRef(false)
 
   useEffect(() => {
-    if (adsorptionPointAddMode || tempGridMode) {
-      return
-    }
-
     addCanvasMouseEventListener('mouse:down', mouseDown)
     addDocumentEventListener('contextmenu', document, (e) => {
       handleRollback()
     })
+    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
 
     clear()
     return () => {
       initEvent()
+      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
 
       canvas
         .getObjects()

src/hooks/surface/usePlacementShapeDrawing.js

@@ -38,28 +38,32 @@ import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
+import { useObject } from '@/hooks/useObject'
 
 // 배치면 그리기
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseLine } =
+  const {
-    useEvent()
+    initEvent,
+    addCanvasMouseEventListener,
+    addDocumentEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeMouseLine,
+  } = useEvent()
   // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
   //   useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
-  const { tempGridMode } = useTempGrid()
   const { setSurfaceShapePattern } = useRoofFn()
   const { changeSurfaceLineType } = useSurfaceShapeBatch({})
+  const { handleSelectableObjects } = useObject()
 
-  const canvasSetting = useRecoilValue(canvasSettingState)
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
-  const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
-  const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
   const adsorptionRange = useRecoilValue(adsorptionRangeState)
-  const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
+  const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
 
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
@@ -87,16 +91,17 @@ export function usePlacementShapeDrawing(id) {
   const globalPitch = useRecoilValue(globalPitchState)
 
   useEffect(() => {
-    if (adsorptionPointAddMode || tempGridMode) {
-      return
-    }
-
     addCanvasMouseEventListener('mouse:down', mouseDown)
     addDocumentEventListener('contextmenu', document, (e) => {
       handleRollback()
     })
+    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
     clear()
-  }, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
+    return () => {
+      initEvent()
+      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
+    }
+  }, [verticalHorizontalMode, points, adsorptionRange, adsorptionPointMode])
 
   useEffect(() => {
     setPoints([])
@@ -122,7 +127,6 @@ export function usePlacementShapeDrawing(id) {
   }, [type])
 
   const clear = () => {
-    addCanvasMouseEventListener('mouse:move', mouseMove)
     setLength1(0)
     setLength2(0)
 
@@ -178,79 +182,6 @@ export function usePlacementShapeDrawing(id) {
     }
   }
 
-  /*
-mouseMove
- */
-  const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-  const roofAdsorptionPoints = useRef([])
-  const intersectionPoints = useRef([])
-  const { getAdsorptionPoints } = useAdsorptionPoint()
-
-  const mouseMove = (e) => {
-    removeMouseLine()
-    const pointer = canvas.getPointer(e.e)
-    const roofsPoints = roofs.map((roof) => roof.points).flat()
-    roofAdsorptionPoints.current = [...roofsPoints]
-
-    const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
-    const otherAdsorptionPoints = []
-
-    auxiliaryLines.forEach((line1) => {
-      auxiliaryLines.forEach((line2) => {
-        if (line1 === line2) {
-          return
-        }
-
-        const intersectionPoint = calculateIntersection(line1, line2)
-        if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
-          return
-        }
-        otherAdsorptionPoints.push(intersectionPoint)
-      })
-    })
-
-    let innerLinePoints = []
-    canvas
-      .getObjects()
-      .filter((obj) => obj.innerLines)
-      .forEach((polygon) => {
-        polygon.innerLines.forEach((line) => {
-          innerLinePoints.push({ x: line.x1, y: line.y1 })
-          innerLinePoints.push({ x: line.x2, y: line.y2 })
-        })
-      })
-
-    const adsorptionPoints = [
-      ...getAdsorptionPoints(),
-      ...roofAdsorptionPoints.current,
-      ...otherAdsorptionPoints,
-      ...intersectionPoints.current,
-      ...innerLinePoints,
-    ]
-
-    let arrivalPoint = { x: pointer.x, y: pointer.y }
-    let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints)
-
-    if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) {
-      arrivalPoint = { ...adsorptionPoint }
-    }
-    const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
-      stroke: 'red',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-
-    const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], {
-      stroke: 'red',
-      strokeWidth: 1,
-      selectable: false,
-      name: 'mouseLine',
-    })
-    canvas?.add(horizontalLine, verticalLine)
-    canvas?.renderAll()
-  }
-
   useEffect(() => {
     canvas
       ?.getObjects()

src/hooks/useEvent.js

@@ -8,6 +8,7 @@ import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
+import { POLYGON_TYPE } from '@/common/common'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -21,6 +22,8 @@ export function useEvent() {
   const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
   const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
   const { tempGridModeStateLeftClickEvent, tempGridMode } = useTempGrid()
+  const roofAdsorptionPoints = useRef([])
+  const intersectionPoints = useRef([])
 
   const textMode = useRecoilValue(textModeState)
 
@@ -97,14 +100,52 @@ export function useEvent() {
 
   const defaultMouseMoveEvent = (e) => {
     removeMouseLine()
+    const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     // 가로선
     const pointer = canvas.getPointer(e.e)
 
-    const adsorptionPoints = getAdsorptionPoints()
-
     let arrivalPoint = { x: pointer.x, y: pointer.y }
 
     if (adsorptionPointMode) {
+      const roofsPoints = roofs.map((roof) => roof.points).flat()
+      roofAdsorptionPoints.current = [...roofsPoints]
+
+      const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
+      const otherAdsorptionPoints = []
+
+      auxiliaryLines.forEach((line1) => {
+        auxiliaryLines.forEach((line2) => {
+          if (line1 === line2) {
+            return
+          }
+
+          const intersectionPoint = calculateIntersection(line1, line2)
+          if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+            return
+          }
+          otherAdsorptionPoints.push(intersectionPoint)
+        })
+      })
+
+      let innerLinePoints = []
+      canvas
+        .getObjects()
+        .filter((obj) => obj.innerLines)
+        .forEach((polygon) => {
+          polygon.innerLines.forEach((line) => {
+            innerLinePoints.push({ x: line.x1, y: line.y1 })
+            innerLinePoints.push({ x: line.x2, y: line.y2 })
+          })
+        })
+
+      const adsorptionPoints = [
+        ...getAdsorptionPoints(),
+        ...roofAdsorptionPoints.current,
+        ...otherAdsorptionPoints,
+        ...intersectionPoints.current,
+        ...innerLinePoints,
+      ]
+
       if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
         const closestLine = getClosestLineGrid(pointer)
 
@@ -357,6 +398,7 @@ export function useEvent() {
     removeDocumentEvent,
     removeMouseEvent,
     removeMouseLine,
+    defaultMouseMoveEvent,
     initEvent,
   }
 }

src/hooks/useObject.js

@@ -12,5 +12,17 @@ export function useObject() {
         canvas.remove(item)
       })
   }
-  return { deleteObject }
+
+  const handleSelectableObjects = (targetNames = [], bool) => {
+    if (!canvas) {
+      return
+    }
+    const selectableObjects = canvas.getObjects().filter((obj) => targetNames.includes(obj.name))
+    selectableObjects.forEach((obj) => {
+      obj.selectable = bool
+    })
+    canvas.renderAll()
+  }
+
+  return { deleteObject, handleSelectableObjects }
 }

src/locales/ja.json

@@ -732,7 +732,7 @@
   "stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
   "stuff.detail.tempSave.message0": "一時保存されました。 物件番号を取得するには、保存ボタンを押して下さい。,",
   "stuff.detail.tempSave.message1": "一時保存されました。物件番号を取得するには、必須項目をすべて入力してください。",
-  "stuff.detail.tempSave.message2": "担当者名は10桁以下で入力してください。",
+  "stuff.detail.tempSave.message2": "担当者名は全角20文字（半角40文字）以下で入力してください.",
   "stuff.detail.tempSave.message3": "二次販売店を選択してください。",
   "stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか？",
   "stuff.detail.delete.message1": "仕様が確定したものは削除できません。",

src/locales/ko.json

@@ -733,7 +733,7 @@
   "stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 매뉴얼을 확인해주십시오",
   "stuff.detail.tempSave.message0": "임시저장 되었습니다. 물건번호를 획득하려면 저장버튼을 눌러주십시오.",
   "stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
-  "stuff.detail.tempSave.message2": "담당자이름은 10자리 이하로 입력해 주십시오.",
+  "stuff.detail.tempSave.message2": "담당자이름은 전각20자(반각40자) 이하로 입력해 주십시오.",
   "stuff.detail.tempSave.message3": "2차 판매점을 선택해주세요.",
   "stuff.detail.confirm.message1": "판매점 정보를 변경하면 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
   "stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",