Feat: initiated json transformer

Author: Akalanka47000

src/components/operations/index.jsx

@@ -5,6 +5,7 @@ import { ids } from "@/constants";
 import { useBreakpoint } from "@/hooks";
 import { store } from "@/store";
 import { locationPlaceholder, setLocation, toggleControls } from "@/store/reducers/editor";
+import { stateToJSON } from "@/utils";
 import { Body, Button, IconButton } from "../core";
 import GridSwitch from "./grid-switch";
 
@@ -26,6 +27,10 @@ const Operations = () => {
     store.dispatch(setLocation(location));
   };
 
+  const onExportJson = () => {
+    console.log(stateToJSON());
+  };
+
   return (
     <div
       id={ids.operationBar}
@@ -45,12 +50,14 @@ const Operations = () => {
         {md ? (
           <>
             <Button className="py-[0.35rem]">Preview</Button>
-            <Button className="py-[0.35rem]">Export JSON</Button>
+            <Button className="py-[0.35rem]" onClick={onExportJson}>
+              Export JSON
+            </Button>
           </>
         ) : (
           <>
             <IconButton icon={<Eye />} label="Preview" />
-            <IconButton icon={<Braces />} label="Export JSON" />
+            <IconButton icon={<Braces />} label="Export JSON" onClick={onExportJson} />
           </>
         )}
         <Cog

src/components/workspace/elements/seat.jsx

@@ -42,7 +42,7 @@ const Seat = forwardRef(({ x, y, id, label, categories, category, status, ...pro
         cy={y}
         r={seatSize / 2}
         {...{ [dataAttributes.category]: category }}
-        {...{ [dataAttributes.status]: status }}
+        {...{ [dataAttributes.status]: status ?? SeatStatus.Available }}
         {...props}
       />
       {label && (
@@ -54,6 +54,7 @@ const Seat = forwardRef(({ x, y, id, label, categories, category, status, ...pro
           fontWeight={200}
           letterSpacing={1}
           {...props}
+          {...{ [dataAttributes.elementType]: undefined }}
           className={twMerge(props.className, "unselectable !stroke-1")}
         >
           {label ?? "A"}

src/utils/d3.ts

@@ -4,6 +4,7 @@ declare module "d3" {
   interface Selection<GElement extends d3.BaseType, Datum, PElement extends d3.BaseType, PDatum> {
     moveToBack(): Selection<GElement, Datum, PElement, PDatum>;
     moveToFront(): Selection<GElement, Datum, PElement, PDatum>;
+    map<T>(callback: (d: Selection<GElement, Datum, PElement, PDatum>, i: number) => T): T[];
   }
 }
 
@@ -22,6 +23,14 @@ d3.selection.prototype.moveToBack = function () {
   });
 };
 
+d3.selection.prototype.map = function (callback) {
+  const results = [];
+  this.each(function (_, i) {
+    results.push(callback(d3.select(this), i));
+  });
+  return results;
+};
+
 export const d3Extended = {
   ...d3,
   selectById(id: string): d3.Selection<d3.BaseType, {}, HTMLElement, any> {

src/utils/index.ts

@@ -2,6 +2,7 @@ import * as d3 from "d3";
 import { ids, selectors } from "@/constants";
 
 export * from "./d3";
+export * from "./transformer";
 export * from "./workspace";
 
 export const fallible = (fn: Function) => {

src/utils/transformer.ts

@@ -0,0 +1,46 @@
+import { ElementType } from "@/components/workspace/elements";
+import { dataAttributes } from "@/constants";
+import { store } from "@/store";
+import d3Extended from "./d3";
+
+export const domSeatsToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Seat}"]`).map((seat) => {
+    return {
+      id: seat.attr("id"),
+      x: +seat.attr("cx"),
+      y: +seat.attr("cy"),
+      label: document.getElementById(`${seat.attr("id")}-label`)?.textContent,
+      status: seat.attr(dataAttributes.status),
+      category: seat.attr(dataAttributes.category)
+    };
+  });
+};
+
+export const domBoothsToJSON = () => {
+  return d3Extended.selectAll(`[${dataAttributes.elementType}="${ElementType.Booth}"]`).map((booth) => {
+    return {
+      id: booth.attr("id"),
+      x: +booth.attr("cx"),
+      y: +booth.attr("cy")
+    };
+  });
+};
+
+export const domTextsToJSON = () => {};
+
+export const domShapesToJSON = () => {};
+
+export const domPolylineToJSON = () => {};
+
+export const domImagesToJSON = () => {};
+
+export const stateToJSON = () => {
+  const state = store.getState().editor;
+  return {
+    name: state.location,
+    categories: state.categories,
+    sections: state.sections,
+    seats: domSeatsToJSON(),
+    booths: domBoothsToJSON()
+  };
+};