치수선 표시변경 수정

src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx

@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef } from 'react'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
@@ -5,14 +6,41 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { pitchTextSelector } from '@/store/canvasAtom'
+import { defaultSlope } from '@/store/commonAtom'
+import { canvasState } from '@/store/canvasAtom'
 
 export default function DimensionLineSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, setIsShow, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const canvas = useRecoilValue(canvasState)
   const pitchText = useRecoilState(pitchTextSelector)
-  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const SelectOption01 = defaultSlope
+  const [basicLength, setBasicLength] = useState(0)
+  const [slopeAble, setSlopeAble] = useState(false)
+  const changeLengthRef = useRef(0)
+
+  useEffect(() => {
+    if (canvas) {
+      const dimensionObject = canvas.getActiveObject()
+      const id = dimensionObject.groupId
+      const textObj = dimensionObject._objects.filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      setBasicLength(parseInt(textObj.text))
+    }
+  }, [])
+
+  const handleChangeLength = () => {
+    const changeLength = changeLengthRef.current.value
+    if (canvas) {
+      const dimensionObject = canvas.getActiveObject()
+      const id = dimensionObject.id
+      const textObj = canvas.getObjects().filter((obj) => obj.name === 'dimensionLineText' && obj.id === id)[0]
+      textObj.text = changeLength
+      canvas.renderAll()
+    }
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -29,19 +57,19 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">既存の長さ</span>
                 <div className="input-grid mr5">
-                  <input type="text" className="input-origin block" defaultValue={5933} readOnly />
+                  <input type="text" className="input-origin block" value={basicLength} readOnly />
                 </div>
               </div>
               <div className="mb-box">
                 <div className="outline-form">
                   <span className="mr10">変更の長さ</span>
                   <div className="input-grid mr5">
-                    <input type="text" className="input-origin block" defaultValue={0} />
+                    <input type="text" className="input-origin block" ref={changeLengthRef} defaultValue={0} />
                   </div>
                 </div>
               </div>
               <div className="d-check-box pop">
-                <input type="checkbox" id="ch99" />
+                <input type="checkbox" id="ch99" onChange={() => setSlopeAble(!slopeAble)} />
                 <label htmlFor="ch99">コーナー・ゴールの場合</label>
               </div>
             </div>
@@ -52,14 +80,14 @@ export default function DimensionLineSetting(props) {
               <div className="outline-form mb15">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={'0'} option={SelectOption01} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
               <div className="outline-form">
                 <span className="mr10">傾斜</span>
                 <div className="grid-select mr10">
-                  <QSelectBox title={'0'} option={SelectOption01} />
+                  <QSelectBox title={''} options={SelectOption01} disabled={slopeAble} />
                 </div>
                 <span className="thin">{pitchText}</span>
               </div>
@@ -67,7 +95,9 @@ export default function DimensionLineSetting(props) {
             <div className="warning">傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。</div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act" onClick={handleChangeLength}>
+              保存
+            </button>
           </div>
         </div>
       </div>

src/hooks/usePlan.js

@@ -38,8 +38,6 @@ export function usePlan() {
 
     const str = JSON.stringify(objs)
 
-    console.log(str)
-
     // canvas?.clear()
     return str
 

src/store/commonAtom.js

@@ -1,4 +1,18 @@
-import { atom } from 'recoil'
+import { atom, selectorFamily } from 'recoil'
+
+export const defaultSlope = [
+  { name: '0', value: 0, angleValue: 0 },
+  { name: '1', value: 1, angleValue: 5.71 },
+  { name: '2', value: 2, angleValue: 11.31 },
+  { name: '3', value: 3, angleValue: 16.7 },
+  { name: '4', value: 4, angleValue: 21.8 },
+  { name: '5', value: 5, angleValue: 26.57 },
+  { name: '6', value: 6, angleValue: 30.96 },
+  { name: '7', value: 7, angleValue: 34.99 },
+  { name: '8', value: 8, angleValue: 38.66 },
+  { name: '9', value: 9, angleValue: 41.99 },
+  { name: '10', value: 10, angleValue: 45.0 },
+]
 
 export const dimmedStore = atom({
   key: 'dimmedState',
@@ -9,3 +23,12 @@ export const sessionStore = atom({
   key: 'sessionState',
   default: {},
 })
+
+export const slopeSelector = selectorFamily({
+  key: 'slopeSelector',
+  get:
+    (degree) =>
+    ({ get }) => {
+      return defaultSlope[degree]
+    },
+})