ISSUE 1: add selected doc to canvas editor

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"}`}