We are encountering a problem in that this is not being rendered correctly. The expected result, is that the blue block, along with the 2 red ones lines up perfectly (for this model and for any other model).
The data we are inputting from the backend has been validated and is correct, but the front-end drawing side of it appears to be wrong. Is there anyone here that can help figure this out?
Data being used is visible in the screenshot if needed. Any help is greatly appreciated!
getGripPlace = (extrusion: ExtrusionData, gripPlace: GripPlaceData, draw: any, cornerType: CornerType) => {
let pointarr = new SVG.PointArray([
[gripPlace.opening1 + gripPlace.opening2, gripPlace.grip1],
[gripPlace.opening1 + gripPlace.opening2, gripPlace.grip2],
[gripPlace.opening1 - 10, gripPlace.grip2],
[gripPlace.opening1 - 10, gripPlace.grip1],
[gripPlace.opening1, gripPlace.grip1]
]);
let polylineGrip = null;
if (cornerType === CornerType.First) {
if (!this.state.polylineGripPlaceFirst) {
polylineGrip = draw.polyline(pointarr).fill("red").scale(5, -5).translate((extrusion.width - (gripPlace.opening1 + gripPlace.opening1/2)) * 2.5, extrusion.height * 7.5).translate(5 * 5, 0);
} else {
polylineGrip = this.state.polylineGripPlaceFirst.plot(pointarr).fill("red");
}
this.setState({ polylineGripPlaceFirst: polylineGrip });
}
else {
if (!this.state.polylineGripPlaceSecond) {
polylineGrip = draw.polyline(pointarr).fill("red").scale(5, -5).translate((extrusion.width + (gripPlace.opening1 + gripPlace.opening1/2) * 7.5), extrusion.height * 7.5).translate(10 * 5, 0);
} else {
polylineGrip = this.state.polylineGripPlaceSecond.plot(pointarr).fill("red");
}
this.setState({ polylineGripPlaceSecond: polylineGrip });
}
};
Extrusion:
let draw = new SVG.Svg("svg").addTo("#svg").size(extrusion.width * 10, extrusion.height * 10);
this.setState({ draw });
const stringArr = new SVG.PointArray(this.props.selectedProfile.profileExtrusions[0]?.extrusion.svg);
draw.polyline(stringArr).fill("blue").scale(5, -5).translate(extrusion.width * 5, extrusion.height * 5);
let firstGripPlace: GripPlaceData = null;
let secondGripPlace: GripPlaceData = null;
this.props.selectedProfile.profileExtrusions[0].extrusion.gripPlaces.map((gripPlace: GripPlaceData) => {
if (gripPlace.cornerType === CornerType.First && !firstGripPlace) {
firstGripPlace = gripPlace;
return;
} else if (gripPlace.cornerType === CornerType.Second && !secondGripPlace) {
secondGripPlace = gripPlace;
return;
}
});
