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 {
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> */}
src/components/DockBuilder/DockBuilder.jsx
+21 -21
View File
@@ -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"}`}