From d6eaf1e596028ee7f5402dfa1ad7f934d121b3b7 Mon Sep 17 00:00:00 2001
From: Marty McGee <support@companyjuice.com>
Date: Wed, 8 Jan 2025 09:04:54 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A5=95=20v0.17.0-b19=20=F0=9F=8C=B1=20Thr?=
 =?UTF-8?q?eeD:=20Home=20Design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/api/graphql/apollo.ts |  1 +
 src/lib/threed/HomeDesign.tsx | 27 +++++++++++++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/lib/api/graphql/apollo.ts b/src/lib/api/graphql/apollo.ts
index 774a711eb..a3677bda9 100644
--- a/src/lib/api/graphql/apollo.ts
+++ b/src/lib/api/graphql/apollo.ts
@@ -1033,6 +1033,7 @@ export const isCanvasStatePaperSetVar = makeVar(false) // boolean: false | true
 // ** canvasStateThreeD(s)
 export const canvasStateThreeDVar = makeVar(canvasStateThreeDVarDefaults)
   // console.debug('canvasStateThreeDVar()', canvasStateThreeDVar())
+  // console.debug('canvasStateThreeDVar().state.scene', canvasStateThreeDVar().state.scene)
 export const isCanvasStateThreeDSetVar = makeVar(false) // boolean: false | true
   // console.debug('isCanvasStatePaperSetVar()', isCanvasStatePaperSetVar())
 
diff --git a/src/lib/threed/HomeDesign.tsx b/src/lib/threed/HomeDesign.tsx
index df3b8a93e..7fe1a1184 100644
--- a/src/lib/threed/HomeDesign.tsx
+++ b/src/lib/threed/HomeDesign.tsx
@@ -3267,6 +3267,9 @@ function closeAllModals() {
 const ViewProperties = () => {
   // console.debug('PropertiesView loading...')
 
+  // ** HOOKS
+  const useCanvasStateThreeDVar: Object = useReactiveVar(canvasStateThreeDVar)
+
   return (
     <>
     <div 
@@ -3293,7 +3296,16 @@ const ViewProperties = () => {
           Preview
         </button>
         <button className='moreInfoBtn' 
-          onClick={(event) => addThreed(event, draggingThreedItem, canvasStateThreeDVar().state.scene)}
+          // @ts-expect-error
+          // onClick={(event) => addThreed(event, draggingThreedItem, canvasStateThreeDVar().state.scene)}
+          onClick={(event) => addThreed(event, draggingThreedItem, useCanvasStateThreeDVar.state.scene)}
+          // onClick={(event) => {
+          //   if (("state" in useCanvasStateThreeDVar)) {
+          //     if (("scene" in useCanvasStateThreeDVar.state)) {
+          //       addThreed(event, draggingThreedItem, useCanvasStateThreeDVar.state.scene)
+          //     }
+          //   }
+          // }}
         >
           Add To Canvas
         </button>
@@ -5273,7 +5285,7 @@ function initThreed(threedItem: any, scene: any) {
                     imageN.visible = false
                     
                     // scene.add(meshN)
-                    // canvasStateThreeDVar().scene.add(meshN)
+                    // @ts-expect-error
                     canvasStateThreeDVar().state.scene.add(meshN)
                     console.debug('meshN added to scene')
 
@@ -5283,7 +5295,7 @@ function initThreed(threedItem: any, scene: any) {
 
 
                   // scene.add(OBJa)
-                  // canvasStateThreeDVar().scene.add(OBJa)
+                  // @ts-expect-error
                   canvasStateThreeDVar().state.scene.add(OBJa)
                   console.debug('OBJa added to scene')
 
@@ -5467,7 +5479,9 @@ function redrawGrid(): boolean {
       const planViewHeight = planView.clientHeight
       console.debug('redrawGrid: planView.width:height', planViewWidth, planViewHeight)
       const planCanvas = document.getElementById('planCanvas')
+      // @ts-expect-error
       planCanvas.width = planViewWidth
+      // @ts-expect-error
       planCanvas.height = planViewHeight
       const planCanvasWidth = planCanvas.clientWidth
       const planCanvasHeight = planCanvas.clientHeight
@@ -5799,8 +5813,8 @@ export default function ThreeDHomeDesign({
   // const [isPrefsLoaded, setIsPrefsLoaded] = useState(isPreferencesSetVar())
 
   // ** USE CANVAS STATE
-  // const canvasState = useReactiveVar(canvasStateThreeDVar) // YES !!
-  // console.debug('%c⚙️ ThreeD Home Design canvasState', ccm.orangeAlert, canvasState)
+  const useCanvasStateThreeDVar = useReactiveVar(canvasStateThreeDVar) // YES !!
+  // console.debug('%c⚙️ ThreeD Home Design useCanvasStateThreeDVar', ccm.orangeAlert, useCanvasStateThreeDVar)
   // ** INIT CANVAS STATE
   // const [isCanvasLoaded, setIsCanvasLoaded] = useState(false)
   // const [isCanvasStateLoaded, setIsCanvasStateLoaded] = useState(isCanvasStateSetVar())
@@ -6479,8 +6493,9 @@ export default function ThreeDHomeDesign({
 
       // ** [MM] CLOSER.. NOT EVEN CLOSE
       if (draggingThreedItem) {
+        // @ts-expect-error
         addThreed(e, draggingThreedItem, canvasStateThreeDVar().state.scene)
-        // addThreed(e, draggingThreedItem, canvasState.state.scene)
+        // addThreed(e, draggingThreedItem, useCanvasStateThreeDVar.state.scene)
         void (draggingNewGuide && (draggingNewGuide = false))
       }