From 9ada6f005fd854b220e2c0aa1b8d6066630e117c Mon Sep 17 00:00:00 2001
From: Ayobami <lynxdev32@gmail.com>
Date: Wed, 2 Jul 2025 15:49:49 +0100
Subject: [PATCH] ISSUE 1: add selected doc to canvas editor

---
 src/components/Builder/Builder.jsx         | 164 ++++++++++++---------
 src/components/DockBuilder/DockBuilder.jsx |  42 +++---
 2 files changed, 115 insertions(+), 91 deletions(-)

diff --git a/src/components/Builder/Builder.jsx b/src/components/Builder/Builder.jsx
index 67d72e6..85e4982 100644
--- a/src/components/Builder/Builder.jsx
+++ b/src/components/Builder/Builder.jsx
@@ -5,13 +5,13 @@ import { fabric } from "fabric";
 import {
   GrayMaterial,
   PerforatedMaterial,
-  WoodgrainMaterial
+  WoodgrainMaterial,
 } from "Assets/images";
 import {
   DockPanelCategories,
   MaterialType,
   DockPanelCategoryMap,
-  CylinderType
+  CylinderType,
 } from "Utils/constants";
 import { Chevron } from "Assets/svgs";
 import MkdSDK from "Utils/MkdSDK";
@@ -21,7 +21,7 @@ import {
   getMaterial,
   getRampsCategory,
   getWedgesAndRampsMaterial,
-  getWedgesCategory
+  getWedgesCategory,
 } from "Utils/utils";
 
 const sdk = new MkdSDK();
@@ -32,7 +32,7 @@ export const Builder = ({ editor }) => {
     DockPanelCategories.RollIn
   );
   const rampsInitialState = {
-    data: []
+    data: [],
   };
   // const [ramps, setRamps] = useState(null);
   const [activeLiftRange, setActiveLiftRange] = useState(null);
@@ -44,7 +44,7 @@ export const Builder = ({ editor }) => {
     wedges: [],
     ramps: [],
     selectedRamps: [],
-    selectedWedges: []
+    selectedWedges: [],
   });
   const [boatLift, setBoatLift] = useState([]);
   const [liftRanges, setLiftRanges] = useState([]);
@@ -60,56 +60,80 @@ export const Builder = ({ editor }) => {
     [activeMaterial]
   );
 
-  const onDockSelect = useCallback((dock) => {
-    if (!editor) {
-      return;
-    }
-    const editorHeight = editor.getHeight();
-    const division = editorHeight / oneFeet - 4;
+  const onDockSelect = useCallback(
+    (dock) => {
+      if (!editor) {
+        return;
+      }
+      const editorHeight = editor.getHeight();
+      const division = editorHeight / oneFeet - 4;
 
-    let imageTopViewURL;
-    let materials;
-    let category;
-    if (["wedges", "ramps"].includes(dock?.type)) {
-      imageTopViewURL = (dock?.top_view).replace("%20", "+");
+      let imageTopViewURL;
+      let materials;
+      let category;
+      if (["wedges", "ramps"].includes(dock?.type)) {
+        imageTopViewURL = (dock?.top_view).replace("%20", "+");
+        materials = getWedgesAndRampsMaterial(dock?.material);
+      } else {
+        imageTopViewURL = dock?.top_view;
+        materials = getMaterial(dock?.materials);
+      }
 
-      materials = getWedgesAndRampsMaterial(dock?.material);
-    } else {
-      imageTopViewURL = dock?.top_view;
-      materials = getMaterial(dock?.materials);
-    }
+      if (["ramps"].includes(dock?.type)) {
+        category = getRampsCategory(dock?.category);
+      } else if (["wedges"].includes(dock?.type)) {
+        category = getWedgesCategory(dock?.category);
+      } else {
+        category = getCategory(dock?.category);
+      }
 
-    if (["ramps"].includes(dock?.type)) {
-      category = getRampsCategory(dock?.category);
-    } else if (["wedges"].includes(dock?.type)) {
-      category = getWedgesCategory(dock?.category);
-    } else {
-      category = getCategory(dock?.category);
-    }
+      const dockData = {
+        itemName: activeDockCategory,
+        image: dock?.image,
+        category: category,
+        length: dock?.length,
+        materials: materials,
+        top_view: dock?.top_view,
+        width: dock?.width,
+        lift_range: dock?.lift_range,
+        model: dock?.model,
+        no_of_cylinders: dock?.no_of_cylinders,
+        name: dock?.name,
+        thumbnail: dock?.thumbnail,
+        weight_capacity: dock?.weight_capacity,
+      };
 
-    const dockData = {
-      itemName: activeDockCategory,
-      image: dock?.image,
-      category: category,
-      length: dock?.length,
-      materials: materials,
-      top_view: dock?.top_view,
-      width: dock?.width,
-      lift_range: dock?.lift_range,
-      model: dock?.model,
-      no_of_cylinders: dock?.no_of_cylinders,
-      name: dock?.name,
-      thumbnail: dock?.thumbnail,
-      weight_capacity: dock?.weight_capacity
-    };
+      // Add dock to editor as an image
+      const imageUrl = imageTopViewURL || dock?.image || dock?.thumbnail;
 
-    // TODO: Add dock to editor
-    // TODO: object which is the image should have the dockData, snapAngle of 45, snapThreshold of 5
-    // TODO: image should be scaled down by scaleFactor
-    // TODO: image should be positioned at the top left of the editor
-    // TODO: image should be added to the editor
-    // TODO: render the editor
-  }, []);
+      if (!imageUrl) return;
+
+      // Add dock to editor
+      fabric.Image.fromURL(
+        imageUrl,
+        function (img) {
+          img.set({
+            left: 0, //Note that this starting pos is behind the sidebar
+            top: 0,
+            scaleX: scaleFactor,
+            scaleY: scaleFactor,
+            snapAngle: 45, // TODO: snapAngle
+            snapThreshold: 5, // TODO: snapThreshold
+            dockData: dockData, // TODO: attach dockData
+            selectable: true,
+            hasControls: true,
+          });
+
+          // Add to editor and make active
+          editor.add(img); // TODO: add to editor
+          editor.setActiveObject(img);
+          editor.requestRenderAll(); // TODO: render editor
+        },
+        { crossOrigin: "anonymous" }
+      );
+    },
+    [editor, activeDockCategory]
+  );
 
   const getItems = useCallback((table) => {
     // console.log( category, materials );
@@ -145,8 +169,8 @@ export const Builder = ({ editor }) => {
                 ? [
                     ...result?.model.map((item) => ({
                       ...item,
-                      type: "boatlifts"
-                    }))
+                      type: "boatlifts",
+                    })),
                   ]
                 : []
             );
@@ -158,8 +182,8 @@ export const Builder = ({ editor }) => {
                 ? [
                     ...result?.model.map((item) => ({
                       ...item,
-                      type: "accessories"
-                    }))
+                      type: "accessories",
+                    })),
                   ]
                 : []
             );
@@ -171,10 +195,10 @@ export const Builder = ({ editor }) => {
                 ? [
                     ...result?.model.map((item) => ({
                       ...item,
-                      type: "wedges"
-                    }))
+                      type: "wedges",
+                    })),
                   ]
-                : []
+                : [],
             }));
           case Tables.Ramps:
             // return console.log( result )
@@ -182,7 +206,7 @@ export const Builder = ({ editor }) => {
               ...prev,
               ramps: result?.model
                 ? [...result?.model.map((item) => ({ ...item, type: "ramps" }))]
-                : []
+                : [],
             }));
           // return setRamps(() => [...result?.model]);
         }
@@ -231,7 +255,7 @@ export const Builder = ({ editor }) => {
       [
         DockPanelCategories.RollIn,
         DockPanelCategories.Floating,
-        DockPanelCategories.Sectional
+        DockPanelCategories.Sectional,
       ].includes(activeDockCategory)
     ) {
       // console.log( activeDockCategory, activeMaterial )
@@ -296,7 +320,7 @@ export const Builder = ({ editor }) => {
               : "bg-gray-200"
           }`}
         >
-          <img className={`rounded-md`} src={GrayMaterial} alt="GreyMaterial" />
+          <img className={`rounded-md`} src={GrayMaterial} alt='GreyMaterial' />
         </div>
 
         <div
@@ -311,7 +335,7 @@ export const Builder = ({ editor }) => {
           <img
             className={`rounded-md`}
             src={PerforatedMaterial}
-            alt="PerforatedMaterial"
+            alt='PerforatedMaterial'
           />
         </div>
 
@@ -327,7 +351,7 @@ export const Builder = ({ editor }) => {
           <img
             className={`rounded-md`}
             src={WoodgrainMaterial}
-            alt="WoodgrainMaterial"
+            alt='WoodgrainMaterial'
           />
         </div>
       </div>
@@ -353,7 +377,7 @@ export const Builder = ({ editor }) => {
           >
             {dock.length ? (
               <>
-                <img src={dock[0].image} alt="" className={`rounded-md my-2`} />
+                <img src={dock[0].image} alt='' className={`rounded-md my-2`} />
                 <div className={`grid grid-cols-2`}>
                   {dock?.map((dockItem, index) => (
                     <button
@@ -397,7 +421,7 @@ export const Builder = ({ editor }) => {
           >
             {dock.length ? (
               <>
-                <img src={dock[0].image} alt="" className={`rounded-md my-2`} />
+                <img src={dock[0].image} alt='' className={`rounded-md my-2`} />
                 <div className={`grid grid-cols-2`}>
                   {dock?.map((dockItem, index) => (
                     <button
@@ -441,7 +465,7 @@ export const Builder = ({ editor }) => {
           >
             {dock.length ? (
               <>
-                <img src={dock[0].image} alt="" className={`rounded-md my-2`} />
+                <img src={dock[0].image} alt='' className={`rounded-md my-2`} />
                 <div className={`grid grid-cols-2`}>
                   {dock?.map((dockItem, index) => (
                     <button
@@ -484,7 +508,7 @@ export const Builder = ({ editor }) => {
               <>
                 <img
                   src={wedgesAndRamps?.wedges[0].image}
-                  alt=""
+                  alt=''
                   className={`rounded-md my-2`}
                 />
                 <div className={`grid grid-cols-2`}>
@@ -532,7 +556,7 @@ export const Builder = ({ editor }) => {
               <>
                 <img
                   src={wedgesAndRamps.ramps[0].image}
-                  alt=""
+                  alt=''
                   className={`rounded-md my-2`}
                 />
                 <div className={`grid grid-cols-2`}>
@@ -606,7 +630,7 @@ export const Builder = ({ editor }) => {
                 </div>
                 <img
                   src={boatLift[0].image}
-                  alt=""
+                  alt=''
                   className={`rounded-md my-2`}
                 />
                 <div className={`grid grid-cols-2`}>
@@ -677,7 +701,7 @@ export const Builder = ({ editor }) => {
                 </div>
                 <img
                   src={boatLift[0].image}
-                  alt=""
+                  alt=''
                   className={`rounded-md my-2`}
                 />
                 <div className={`grid grid-cols-2`}>
@@ -735,7 +759,7 @@ export const Builder = ({ editor }) => {
                         <span>{ dockItem.length }'</span> */}
                       <img
                         src={dockItem.thumbnail}
-                        alt=""
+                        alt=''
                         className={`rounded-md `}
                       />
                       {/* </div> */}
diff --git a/src/components/DockBuilder/DockBuilder.jsx b/src/components/DockBuilder/DockBuilder.jsx
index 2392660..1856096 100644
--- a/src/components/DockBuilder/DockBuilder.jsx
+++ b/src/components/DockBuilder/DockBuilder.jsx
@@ -4,7 +4,7 @@ import React, {
   useCallback,
   useRef,
   useState,
-  useContext
+  useContext,
 } from "react";
 import { FabricJSCanvas, useFabricJSEditor } from "fabricjs-react";
 import { fabric } from "fabric";
@@ -20,7 +20,7 @@ import { clearClone, clone } from "Utils/DockBuilderUtils/clone";
 import {
   edgeDetection,
   handleEdgeDetection,
-  handleIntersection
+  handleIntersection,
 } from "Utils/DockBuilderUtils";
 import {
   CanvasModes,
@@ -32,12 +32,12 @@ import {
   oneFeet,
   rotateIcon,
   scaleFactor,
-  twoSeventyDeg
+  twoSeventyDeg,
 } from "Utils/constants";
 import {
   reScaleXY,
   resolveHeight,
-  resolveWidth
+  resolveWidth,
 } from "Utils/DockBuilderUtils/edgeDetection";
 import { DeleteIcon, RotateIcon } from "Assets/svgs";
 import { capitalize } from "Utils/helper";
@@ -90,7 +90,7 @@ export const DockBuilder = () => {
     const ext = "png";
     const base64 = editorMemo.toDataURL({
       format: ext,
-      enableRetinaScaling: true
+      enableRetinaScaling: true,
     });
     setDockImage(base64);
     setShowEstimateModal(true);
@@ -144,14 +144,14 @@ export const DockBuilder = () => {
       function (img) {
         img.set({
           scaleX: editorMemo.width / img.width,
-          scaleY: editorMemo.height / img.height
+          scaleY: editorMemo.height / img.height,
         });
         editorMemo.setBackgroundImage(img);
         editorMemo.renderAll();
         // updateModifications( true, )
       },
       {
-        crossOrigin: "anonymous"
+        crossOrigin: "anonymous",
       }
     );
   }, [editorMemo]);
@@ -195,7 +195,7 @@ export const DockBuilder = () => {
       onChange: function (value) {
         editorMemo.zoomToPoint({ x: pointer.x, y: pointer.y }, value);
       },
-      fps: 1080
+      fps: 1080,
     });
     opt.e.preventDefault();
     opt.e.stopPropagation();
@@ -350,12 +350,12 @@ export const DockBuilder = () => {
 
     let line = new fabric.Line([0, newTop, editorMemo.getWidth(), newTop], {
       stroke: "#AAAAAA",
-      testLine: true
+      testLine: true,
       // strokeDashArray: [ 5 ],
     });
     let line2 = new fabric.Line([0, objTop, editorMemo.getWidth(), objTop], {
       stroke: "#AAAAAA",
-      testLine: true
+      testLine: true,
       // strokeDashArray: [ 5 ],
     });
     editorMemo.add(line);
@@ -371,12 +371,12 @@ export const DockBuilder = () => {
 
     let line = new fabric.Line([newLeft, 0, newLeft, editorMemo.getHeight()], {
       stroke: "#AAAAAA",
-      testLine: true
+      testLine: true,
       // strokeDashArray: [ 5 ],
     });
     let line2 = new fabric.Line([objLeft, 0, objLeft, editorMemo.getWidth()], {
       stroke: "#AAAAAA",
-      testLine: true
+      testLine: true,
       // strokeDashArray: [ 5 ],
     });
     editorMemo.add(line);
@@ -539,7 +539,7 @@ export const DockBuilder = () => {
           [0, oneFeet * i, editorMemo.getWidth(), oneFeet * i],
           {
             stroke: "#AAAAAA",
-            strokeDashArray: [5]
+            strokeDashArray: [5],
           }
         );
 
@@ -548,7 +548,7 @@ export const DockBuilder = () => {
           fill: "#AAAAAA",
           fontSize: 18,
           left: editorMemo.getWidth() - 40,
-          top: oneFeet * i
+          top: oneFeet * i,
         });
 
         multiplier++;
@@ -576,7 +576,7 @@ export const DockBuilder = () => {
 
     dispatch({
       type: "DOCK_LOADING",
-      payload: false
+      payload: false,
     });
     setInitialLoad(false);
   }, [editorMemo, showBuildCanvasFromLocalModal, dispatch, initialLoad]);
@@ -625,7 +625,7 @@ export const DockBuilder = () => {
         bl: false, // bottom-left
         mb: false, //middle-bottom
         br: false, //bottom-right
-        mtr: false // rotate icon
+        mtr: false, // rotate icon
       });
       // fabric.Object.prototype.controls.deleteControl = new fabric.Control( {
       //   x: -0.8,
@@ -654,7 +654,7 @@ export const DockBuilder = () => {
         sizeX: 40,
         sizeY: 40,
         touchSizeX: 40,
-        touchSizeY: 40
+        touchSizeY: 40,
       });
       fabric.Object.prototype.hasControls = true;
       fabric.Object.prototype.lockScalingX = true;
@@ -718,7 +718,7 @@ export const DockBuilder = () => {
         setInitialLoad(false);
         dispatch({
           type: "DOCK_LOADING",
-          payload: false
+          payload: false,
         });
       }
     }
@@ -733,7 +733,7 @@ export const DockBuilder = () => {
         editorMemo.setBackgroundImage(editorMemo.backgroundImage, (bgImage) => {
           bgImage.set({
             scaleX: editorMemo.width / bgImage.width,
-            scaleY: editorMemo.height / bgImage.height
+            scaleY: editorMemo.height / bgImage.height,
           });
         });
         removeLines();
@@ -789,8 +789,8 @@ export const DockBuilder = () => {
 
           <img
             ref={imageRef}
-            src=""
-            alt=""
+            src=''
+            alt=''
             width={174}
             height={116}
             className={`rounded relative ${objHovered ? "" : "hidden"}`}