🥕 v0.17.0-b16 🌱 ThreeD: Home Design

marty-mcgee · Jan 2, 2025 · 44f4786 · 44f4786 · vercel · Jan 2, 2025
1 parent 900a2d9
commit 44f4786
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 82 deletions.
diff --git a/src/lib/farmbot/FarmBot.tsx b/src/lib/farmbot/FarmBot.tsx
@@ -18,18 +18,17 @@ import ccm from '#/lib/utils/console-colors'
 // IMPORTS COMPLETE
 // ==========================================================
 
-// DEBUG PREFERENCES FOR THIS MODULE
-const debug: boolean = true
-const DEBUG: boolean = true
-const debug_deep: boolean = true
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 const appVersion = 'v0.15.0-bot'
 // const appVersion = process.env.NEXT_PUBLIC_APP_VERSION
 // const appVersion = process.env.npm_package_version
 // const appVersion: string = require('package.json').version
 // const appVersion: string = require('../../package.json').version
 
-if ((debug || DEBUG) && debug_deep) {
+if (debug || DEBUG) {
   console.log('%c🥕 ThreeDGarden<FARMBOT>: {.tsx}', ccm.green)
   console.log('%c🌱 appVersion', ccm.darkgreen, appVersion)
   console.log(`%c====================================`, ccm.darkgreen)

diff --git a/src/lib/threed/HomeDesign.tsx b/src/lib/threed/HomeDesign.tsx
@@ -146,9 +146,9 @@ import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
 // IMPORTS COMPLETE
 // ==============================================================
 
-// DEBUG PREFERENCES FOR THIS MODULE
-const debug: boolean = true
-const DEBUG: boolean = true
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // const appVersion: string = require('package.json').version
 
@@ -175,10 +175,22 @@ let fragment: any = null
 let readOnly: boolean = false
 
 let threedHomeDesign: string = 'HEY HEY HEY ___',
-mouseMode: number = 0,
+// **
+// **
+// **
+// redrawGrid: Function = () => {},
+// redrawTexts: Function = () => {},
+xLines: Object[] = [],
+yLines: Object[] = [],
+// **
+// **
+threedItems: Object[] = threedItemsJSON,
 selectedItem: any,
-defaultCursor: string = 'default',
 deselectAll: Function = () => {},
+// **
+mouseMode: number = 0,
+defaultCursor: string = 'default',
+// **
 toolsGroup: Object[] = [],
 gridGroup: Object[] = [],
 threedGroup: Object[] = [],
@@ -188,13 +200,7 @@ floorsGroup: Object[] = [],
 dimensionsGroup: Object[] = [],
 textsGroup: Object[] = [],
 guidesGroup: Object[] = [],
-defaultWallHeight: number = 265,
-defaultWallThickness: number = 20,
-defaultRoofThickness: number = 25,
-defaultRoofWidth: number = 350,
-defaultRoofRise: number = 300,
-defaultRoofStartHeight: number = 0,
-defaultFloorThickness: number = 25,
+// **
 rotateIcon: any,
 resizeIcon: any,
 elevateIcon: any,
@@ -214,7 +220,17 @@ modalCloseBtnModel3d,
 // **
 threedToLoadCount: number = 0,
 loadedThreedCount: number = 0,
+// **
+defaultWallHeight: number = 265,
+defaultWallThickness: number = 20,
+defaultRoofThickness: number = 25,
+defaultRoofWidth: number = 350,
+defaultRoofRise: number = 300,
+defaultRoofStartHeight: number = 0,
+defaultFloorThickness: number = 25,
+// **
 tools,
+// **
 offsetMousePoint: any, // Object = {x: 0, y: 0}, // number = 0,
 ctrlKeyPressed: boolean = false,
 scaleFactor: number = 1.1,
@@ -226,7 +242,6 @@ lastNewWallSegmentClick: number = 0,
 lastNewRoofSegmentClick: number = 0,
 lastNewFloorSegmentClick: number = 0,
 // **
-threedItems: Object[] = threedItemsJSON,
 // **
 canvas3d,
 camera,
@@ -332,10 +347,6 @@ scalingY: boolean = false,
 rotating: boolean = false,
 wallHelper3dCube: THREE.Mesh = null, // new THREE.Mesh(),
 roofHelper3dCube: THREE.Mesh = null, // new THREE.Mesh(),
-// redrawGrid: Function = () => {},
-redrawTexts: Function = () => {},
-xLines: Object[] = [],
-yLines: Object[] = [],
 // **
 // **
 // **
@@ -497,7 +508,7 @@ function MMeMouse (e: any) {
       redrawGrid()
       redrawTexts()
 
-    } else {
+    } else {redrawGrid
       cumulclick = o
     }
   }
@@ -582,7 +593,7 @@ const PaperCanvas = (props: any) => {
         // ** THREED PAPER.JS
         // initThreeDPaper(planCanvas)
         // ** 
-        console.debug('%c🖼️ PaperCanvas THREED PAPER JS: initThreeDPaper(planCanvasRef)', ccm.darkgreenAlert, planCanvasRef.current)
+        console.debug('%c PaperCanvas THREED PAPER JS: initThreeDPaper(planCanvasRef)', ccm.darkgreenAlert, planCanvasRef.current)
         // console.debug(`%c🖼️ `, ccm.darkgreenAlert, planCanvas)
 
         // ** ================================================
@@ -5355,6 +5366,18 @@ function drawGridNew(paperScope: paper.PaperScope, gridSize: number) {
 }
 
 // ** REDRAW Functions
+function redrawTexts() {
+  Object.keys(Dimensions).forEach(function (e: any) {
+    var t = Dimensions[e as any]
+    // @ts-expect-error
+    "object" == typeof t && (Dimensions[e].text.fontSize = screenScale / 1.5)
+  }),
+    Object.keys(Texts).forEach(function (e: any) {
+      var t = Texts[e as any]
+      // @ts-expect-error
+      "object" == typeof t && (Texts[e].fontSize = screenScale / 1.5)
+    })
+}
 function redrawGrid(): boolean {
   // **
   if (redrawing = true && threedUILayout != '3dView') {
@@ -6718,7 +6741,7 @@ export default function ThreeDHomeDesign({
                 minSize={0}
                 maxSize={100}
                 style={{
-                  display: 'inline-block',
+                  // display: 'inline-block',
                   // overflow: 'auto', // no
                   border: '1px solid #1A1A1A',
                 }}
@@ -6731,27 +6754,30 @@ export default function ThreeDHomeDesign({
                       // flexGrow: '0',
                       width: '100%',
                       height: 'calc(100% - 20px)',
+                      backgroundColor: '#222222',
                     }}
                   >
                     <div
+                      id='rulerLeftContainer'
                       style={{
                         display: 'flex',
                         // flexGrow: '0',
                         width: '20px',
+                        maxWidth: '20px',
                         // height: '100%',
-                        backgroundColor: 'gray', // '#636363',
+                        // backgroundColor: 'transparent',
+                        backgroundColor: '#FFFFFF',
                       }}
                     >
                       <canvas 
                         id='rulerLeft' 
-                        width={20}
+                        width={'8px'} // not working well: 8px = 20px
                         // onMouseDown={() => addVerticalGuide()}
                         // onMouseUp={() => removeVerticalGuide()}
                       ></canvas>
                     </div>
 
-                    { true && 
-                      !isPaperCanvasLoadedVar() && (
+                    { true && (
                       <div 
                         id='paperView'
                         style={{
@@ -6773,7 +6799,7 @@ export default function ThreeDHomeDesign({
                       width: '100%',
                       height: '20px',
                       maxHeight: '20px',
-                      backgroundColor: 'gray',
+                      // backgroundColor: '#636363',
                     }}
                   >
                     <canvas 

diff --git a/src/lib/threed/components/controls/Toolbar.tsx b/src/lib/threed/components/controls/Toolbar.tsx
@@ -58,9 +58,9 @@ import ccm from '#/lib/utils/console-colors'
 // IMPORTS COMPLETE
 // ==========================================================
 
-// DEBUG PREFERENCES FOR THIS MODULE
-const debug: boolean = true
-const DEBUG: boolean = true
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // ==========================================================
 

diff --git a/src/lib/threed/components/nouns/Character/Animations.ts b/src/lib/threed/components/nouns/Character/Animations.ts
@@ -28,9 +28,10 @@ const loaderFBX = new FBXLoader()
 // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm)
 import ccm from '#/lib/utils/console-colors'
 
-// ** DEBUG
-const debug: boolean = true
-const debugAnimation: boolean = true
+
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // **
 // ** ANIMATIONS ****************************************

diff --git a/src/lib/threed/components/nouns/Character/Chicken.tsx b/src/lib/threed/components/nouns/Character/Chicken.tsx
@@ -61,12 +61,11 @@ import { useGame } from '#/lib/ecctrl/src/stores/useGame'
 // ** HELPER Imports
 // import { Perf } from 'r3f-perf'
 // import Spinner from '#/layout/ui/spinner'
-// ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm)
 import ccm from '#/lib/utils/console-colors'
 
-
-const debug: boolean = true
-const debugAnimation: boolean = false
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // ** FILES for CharacterModel: Settings/Locations
 // const theCharacterModelFile = '/objects/glb/CharacterModelFloating.glb'
@@ -364,7 +363,7 @@ export default function CharacterModel(props: CharacterModelProps) {
     const wordX: string = group.current.getWorldPosition(bodyPosition).x.toString()
     const wordY: string = group.current.getWorldPosition(bodyPosition).y.toString()
     const wordZ: string = group.current.getWorldPosition(bodyPosition).z.toString()
-    if (debugAnimation) {
+    if (debug || DEBUG) {
       // console.debug(`%c Chicken: useFrame :(`, ccm.redAlert, word)
       if (debug) console.debug(`%c Chicken: useFrame :(`, ccm.darkredAlert, wordX, wordY, wordZ)
     }

diff --git a/src/lib/threed/components/nouns/Character/FarmerManFloating.tsx b/src/lib/threed/components/nouns/Character/FarmerManFloating.tsx
@@ -63,9 +63,9 @@ import { GLTF } from 'three-stdlib'
 // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm)
 import ccm from '#/lib/utils/console-colors'
 
-
-const debug: boolean = true
-const debugAnimation: boolean = false
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // ** FILES for CharacterModel: Settings/Locations
 // const theCharacterModelFile = '/objects/glb/CharacterModelFloating.glb'
@@ -382,7 +382,7 @@ export default function CharacterModel(props: CharacterModelProps) {
     const wordX: string = group.current.getWorldPosition(bodyPosition).x
     const wordY: string = group.current.getWorldPosition(bodyPosition).y
     const wordZ: string = group.current.getWorldPosition(bodyPosition).z
-    if (debugAnimation) {
+    if (DEBUG) {
       // console.debug(`%c FarmerManFloating: useFrame :(`, ccm.redAlert, word)
       if (debug) console.debug(`%c FarmerManFloating: useFrame :(`, ccm.darkredAlert, wordX, wordY, wordZ)
     }

diff --git a/src/lib/threed/components/nouns/Character/FarmerWomanFloating.tsx b/src/lib/threed/components/nouns/Character/FarmerWomanFloating.tsx
@@ -79,8 +79,8 @@ import {
 import ccm from '#/lib/utils/console-colors'
 
 // ** DEBUG
-const debug: boolean = true
-const debugAnimation: boolean = true
+const debug: boolean = false
+const DEBUG: boolean = false
 
 // ** FILES for CharacterModel: Settings/Locations
 // const theCharacterModelFile = '/objects/glb/CharacterModelFloating.glb'

diff --git a/src/lib/threed/components/nouns/Character/Stacy.tsx b/src/lib/threed/components/nouns/Character/Stacy.tsx
@@ -17,9 +17,9 @@ import { GLTF } from 'three-stdlib'
 // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm)
 import ccm from '#/lib/utils/console-colors'
 
-// ** DEBUG
-const debug: boolean = true
-const debugAnimation: boolean = true
+// ** DEBUG: this module
+const debug: boolean = false
+const DEBUG: boolean = false
 
 type GLTFResult = GLTF & {
   nodes: {

diff --git a/src/lib/threed/styles/threed-home-design.css b/src/lib/threed/styles/threed-home-design.css
@@ -1,15 +1,4 @@
-/* #body-threed-demo-example {
-  margin: 0px;
-  padding: 0px;
-  font-family: Helvetica, sans-serif;
-  font-weight: 10;
-  letter-spacing: 1px;
-  overflow: hidden;
-  background-color: #888888;
-} */
-
 #planView {
-  /* position: absolute; */
   /* background-color: white; */
 }
 
@@ -18,12 +7,14 @@
   bottom: 50px;
   left: 30px;
   right: 0px; */
-  background-color: #09090D;
+  /* background-color: #09090D; */
+  background-color: transparent;
 }
 
 #rulerLeft {
   /* position: absolute; */
   background-color: #636363;
+  /* border: 1px solid darkred; */
 }
 
 #rulerBottom {
@@ -32,16 +23,6 @@
 }
 
 
-
-
-
-/* Scale canvas with resize attribute to full size */
-/* canvas[resize] {
-  width: 100%;
-  height: 100%;
-} */
-
-
 /* Scrollbar */
 /* ::-webkit-scrollbar {
   width: 10px;
@@ -62,6 +43,16 @@
   background: #787878;
 } */
 
+
+#toolBar {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  height: 30px;
+  background-color: #131418;
+}
+
 #progressBar {
   width: 500px;
   height: 24px;
@@ -71,16 +62,6 @@
   margin-left: -250px;
 }
 
-
-#toolBar {
-  /* position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  height: 30px;
-  background-color: #131418; */
-}
-
 #catalogFilters {
   /* position: absolute; */
   top: 0px;