ayobami/Paradise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ISSUE 1: add selected doc to canvas editor

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