ISSUE 1: add selected doc to canvas editor
This commit is contained in:
Ayobami
@@ -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,7 +60,8 @@ export const Builder = ({ editor }) => {
|
||||
[activeMaterial]
|
||||
);
|
||||
|
||||
const onDockSelect = useCallback((dock) => {
|
||||
const onDockSelect = useCallback(
|
||||
(dock) => {
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
@@ -72,7 +73,6 @@ export const Builder = ({ editor }) => {
|
||||
let category;
|
||||
if (["wedges", "ramps"].includes(dock?.type)) {
|
||||
imageTopViewURL = (dock?.top_view).replace("%20", "+");
|
||||
|
||||
materials = getWedgesAndRampsMaterial(dock?.material);
|
||||
} else {
|
||||
imageTopViewURL = dock?.top_view;
|
||||
@@ -100,16 +100,40 @@ export const Builder = ({ editor }) => {
|
||||
no_of_cylinders: dock?.no_of_cylinders,
|
||||
name: dock?.name,
|
||||
thumbnail: dock?.thumbnail,
|
||||
weight_capacity: dock?.weight_capacity
|
||||
weight_capacity: dock?.weight_capacity,
|
||||
};
|
||||
|
||||
// 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
|
||||
}, []);
|
||||
// Add dock to editor as an image
|
||||
const imageUrl = imageTopViewURL || dock?.image || dock?.thumbnail;
|
||||
|
||||
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> */}
|
||||
|
||||
@@ -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"}`}
|
||||
|
||||
Reference in New Issue
Block a user