Feat: added remaining json transformers

Author: Akalanka47000

src/components/workspace/elements/shape.jsx

@@ -36,7 +36,8 @@ const Shape = forwardRef(({ x, y, id, name, width, height, rx, resizable, classN
       ref={ref}
       x={x}
       y={y}
-      size={shapeSize}
+      width={width ?? shapeSize}
+      height={height ?? shapeSize}
       className={twMerge(className, "stroke-[0.75] fill-transparent")}
       stroke={color}
       {...{ [dataAttributes.shape]: name }}

src/utils/transformer.ts

@@ -1,7 +1,8 @@
 import { ElementType } from "@/components/workspace/elements";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
-import d3Extended from "./d3";
+import { rgbToHex } from ".";
+import { default as d3Extended } from "./d3";
 
 export const domSeatsToJSON = () => {
   return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`).map((seat) => {
@@ -26,13 +27,63 @@ export const domBoothsToJSON = () => {
   });
 };
 
-export const domTextsToJSON = () => {};
+export const domTextToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Text}"]`).map((text) => {
+    return {
+      id: text.attr("id"),
+      x: +text.attr("x"),
+      y: +text.attr("y"),
+      label: text.text(),
+      fontSize: +text.attr("font-size"),
+      fontWeight: +text.attr("font-weight"),
+      letterSpacing: +text.attr("letter-spacing"),
+      color: rgbToHex(text.style("stroke")) || text.attr("stroke")
+    };
+  });
+};
 
-export const domShapesToJSON = () => {};
+export const domShapesToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Shape}"]`).map((shape) => {
+    return {
+      id: shape.attr("id"),
+      name: shape.attr(dataAttributes.shape),
+      x: +shape.attr("x"),
+      y: +shape.attr("y"),
+      width: +shape.attr("width"),
+      height: +shape.attr("height"),
+      rx: shape.attr("rx") ? +shape.attr("rx") : undefined,
+      color: rgbToHex(shape.style("stroke")) || shape.attr("stroke")
+    };
+  });
+};
 
-export const domPolylineToJSON = () => {};
+export const domPolylineToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Polyline}"]`).map((polyline) => {
+    return {
+      id: polyline.attr("id"),
+      points: polyline
+        .attr("points")
+        .split(" ")
+        .map((point) => {
+          const [x, y] = point.split(",");
+          return { x: +x, y: +y };
+        })
+    };
+  });
+};
 
-export const domImagesToJSON = () => {};
+export const domImagesToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Image}"]`).map((image) => {
+    return {
+      id: image.attr("id"),
+      x: +image.attr("x"),
+      y: +image.attr("y"),
+      width: +image.attr("width"),
+      height: +image.attr("height"),
+      href: image.attr("href")
+    };
+  });
+};
 
 export const stateToJSON = () => {
   const state = store.getState().editor;
@@ -41,6 +92,10 @@ export const stateToJSON = () => {
     categories: state.categories,
     sections: state.sections,
     seats: domSeatsToJSON(),
-    booths: domBoothsToJSON()
+    booths: domBoothsToJSON(),
+    text: domTextToJSON(),
+    shapes: domShapesToJSON(),
+    polyline: domPolylineToJSON(),
+    images: domImagesToJSON()
   };
 };