From 7070b7207214571e3116234b2bbfff9b81bfff3e Mon Sep 17 00:00:00 2001
From: Bert Verhelst <bert.verhelst@studiohyperdrive.be>
Date: Wed, 28 Aug 2024 21:36:52 +0200
Subject: [PATCH] feat: add save and load buttons to save/load to json file

---
 src/components/Button.tsx                |  5 +-
 src/components/Toolbar.tsx               | 28 +++++++++-
 src/components/icon.tsx                  |  6 +++
 src/entities/ArcEntity.ts                | 52 ++++++++++++++++--
 src/entities/CircleEntity.ts             | 51 ++++++++++++++++--
 src/entities/{Entitity.ts => Entity.ts}  | 22 +++++++-
 src/entities/LineEntity.ts               | 39 ++++++++++++--
 src/entities/PointEntity.ts              | 62 +++++++++++++++++----
 src/entities/RectangleEntity.ts          | 57 ++++++++++++++++++--
 src/entities/SelectionRectangleEntity.ts | 16 ++++--
 src/helpers/draw-functions.ts            |  2 +-
 src/helpers/export-entities-to-json.ts   | 21 ++++++++
 src/helpers/export-entities-to-svg.ts    |  2 +-
 src/helpers/find-closest-entity.ts       |  2 +-
 src/helpers/get-draw-guides.ts           |  2 +-
 src/helpers/get-intersection-points.ts   |  2 +-
 src/helpers/import-entities-from-json.ts | 68 ++++++++++++++++++++++++
 src/helpers/tools/eraser-tool.ts         |  8 +--
 src/state.ts                             |  2 +-
 19 files changed, 406 insertions(+), 41 deletions(-)
 rename src/entities/{Entitity.ts => Entity.ts} (57%)
 create mode 100644 src/helpers/export-entities-to-json.ts
 create mode 100644 src/helpers/import-entities-from-json.ts

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c62f078..03d9d7c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { Icon, IconName } from './icon.tsx';
 
 interface ButtonProps {
@@ -7,6 +7,7 @@ interface ButtonProps {
   icon?: IconName;
   active?: boolean;
   onClick?: () => void;
+  children?: ReactNode;
   className?: string;
 }
 
@@ -16,6 +17,7 @@ export const Button: FC<ButtonProps> = ({
   icon,
   onClick,
   active = false,
+  children,
   className,
 }) => {
   return (
@@ -31,6 +33,7 @@ export const Button: FC<ButtonProps> = ({
       >
         {icon && <Icon name={icon} />}
         {label && <span>{label}</span>}
+        {children}
       </button>
     </>
   );
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 4a7b544..65988ac 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -16,6 +16,9 @@ import {
 import { StateVariable } from '../helpers/undo-stack.ts';
 import { exportEntitiesToSvgFile } from '../helpers/export-entities-to-svg.ts';
 import { exportEntitiesToPngFile } from '../helpers/export-entities-to-png.ts';
+import { exportEntitiesToJsonFile } from '../helpers/export-entities-to-json.ts';
+import { importEntitiesFromJsonFile } from '../helpers/import-entities-from-json.ts';
+import { noop } from 'es-toolkit';
 
 interface ToolbarProps {}
 
@@ -149,12 +152,33 @@ export const Toolbar: FC<ToolbarProps> = () => {
       </DropdownButton>
       <Button
         className="mt-2"
-        title="Export SVG"
+        title="Save to JSON file"
+        icon={IconName.Save}
+        onClick={() => exportEntitiesToJsonFile()}
+      />
+      <Button
+        className="relative"
+        title="Load from JSON file"
+        icon={IconName.Folder}
+        onClick={noop}
+      >
+        <input
+          className="absolute inset-0 opacity-0"
+          type="file"
+          accept="*.json"
+          onChange={async evt => {
+            await importEntitiesFromJsonFile(evt.target.files?.[0]);
+            evt.target.files = null;
+          }}
+        ></input>
+      </Button>
+      <Button
+        title="Export to SVG file"
         label="SVG"
         onClick={() => exportEntitiesToSvgFile()}
       />
       <Button
-        title="Export PNG"
+        title="Export to PNG file"
         label="PNG"
         onClick={() => exportEntitiesToPngFile()}
       />
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 6a6aef8..a3c3d16 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -13,6 +13,8 @@ import AntiClockwiseIcon from 'teenyicons/outline/anti-clockwise.svg?react';
 import ClockwiseIcon from 'teenyicons/outline/clockwise.svg?react';
 import GithubIcon from 'teenyicons/outline/github.svg?react';
 import CropIcon from 'teenyicons/outline/crop.svg?react';
+import FolderIcon from 'teenyicons/outline/folder.svg?react';
+import SaveIcon from 'teenyicons/outline/save.svg?react';
 import { FC } from 'react';
 
 // https://icon-sets.iconify.design/teenyicons
@@ -27,6 +29,8 @@ enum IconName {
   Clockwise = 'Clockwise',
   Github = 'Github',
   Crop = 'Crop',
+  Folder = 'Folder',
+  Save = 'Save',
   Svg = 'Svg',
   SolidDown = 'SolidDown',
   SolidUp = 'SolidUp',
@@ -45,6 +49,8 @@ const icons: Record<IconName, FC> = {
   [IconName.Clockwise]: ClockwiseIcon,
   [IconName.Github]: GithubIcon,
   [IconName.Crop]: CropIcon,
+  [IconName.Folder]: FolderIcon,
+  [IconName.Save]: SaveIcon,
   [IconName.Svg]: SvgIcon,
   [IconName.SolidDown]: SolidDownIcon,
   [IconName.SolidUp]: SolidUpIcon,
diff --git a/src/entities/ArcEntity.ts b/src/entities/ArcEntity.ts
index a76fc69..16c3bfa 100644
--- a/src/entities/ArcEntity.ts
+++ b/src/entities/ArcEntity.ts
@@ -1,4 +1,4 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, Shape, SnapPoint, SnapPointType } from '../App.types.ts';
 import { Arc, Box, Line, point, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
@@ -8,7 +8,7 @@ import { isPointEqual } from '../helpers/is-point-equal.ts';
 import { sortPointsOnArc } from '../helpers/sort-points-on-arc.ts';
 
 export class ArcEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
+  public id: string = crypto.randomUUID();
   private arc: Arc | null = null;
   private centerPoint: Point | null = null;
   private firstPoint: Point | null = null;
@@ -166,7 +166,7 @@ export class ArcEntity implements Entity {
     return EntityName.Arc;
   }
 
-  public containsPointOnLine(point: Point): boolean {
+  public containsPointOnShape(point: Point): boolean {
     if (!this.arc) {
       return false;
     }
@@ -205,4 +205,50 @@ export class ArcEntity implements Entity {
     }
     return segmentArcs;
   }
+
+  public toJson(): JsonEntity<ArcJsonData> | null {
+    if (!this.arc) {
+      return null;
+    }
+    return {
+      id: this.id,
+      type: EntityName.Arc,
+      shapeData: {
+        center: { x: this.arc.center.x, y: this.arc.center.y },
+        start: { x: this.arc.start.x, y: this.arc.start.y },
+        end: { x: this.arc.end.x, y: this.arc.end.y },
+        counterClockwise: this.arc.counterClockwise,
+      },
+    };
+  }
+
+  public fromJson(jsonEntity: JsonEntity<ArcJsonData>): ArcEntity {
+    if (jsonEntity.type !== EntityName.Arc) {
+      throw new Error('Invalid Entity type in JSON');
+    }
+
+    const center = new Point(
+      jsonEntity.shapeData.center.x,
+      jsonEntity.shapeData.center.y,
+    );
+    const start = new Point(
+      jsonEntity.shapeData.start.x,
+      jsonEntity.shapeData.start.y,
+    );
+    const end = new Point(
+      jsonEntity.shapeData.end.x,
+      jsonEntity.shapeData.end.y,
+    );
+    const counterClockwise = jsonEntity.shapeData.counterClockwise;
+    const arcEntity = new ArcEntity(center, start, end, counterClockwise);
+    arcEntity.id = jsonEntity.id;
+    return arcEntity;
+  }
+}
+
+export interface ArcJsonData {
+  center: { x: number; y: number };
+  start: { x: number; y: number };
+  end: { x: number; y: number };
+  counterClockwise: boolean;
 }
diff --git a/src/entities/CircleEntity.ts b/src/entities/CircleEntity.ts
index 21ec88a..ab30264 100644
--- a/src/entities/CircleEntity.ts
+++ b/src/entities/CircleEntity.ts
@@ -1,15 +1,30 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, Shape, SnapPoint, SnapPointType } from '../App.types.ts';
 import { Box, circle, Circle, point, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 import { ArcEntity } from './ArcEntity.ts';
 import { wrapModule } from '../helpers/wrap-module.ts';
+import { pointDistance } from '../helpers/distance-between-points.ts';
 
 export class CircleEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
+  public id: string = crypto.randomUUID();
   private circle: Circle | null = null;
   private centerPoint: Point | null = null;
 
+  constructor(centerPoint?: Point, radiusOrSecondPoint?: number | Point) {
+    if (centerPoint) {
+      this.centerPoint = centerPoint;
+    }
+    if (centerPoint && radiusOrSecondPoint) {
+      this.circle = new Circle(
+        centerPoint,
+        typeof radiusOrSecondPoint === 'number'
+          ? radiusOrSecondPoint
+          : pointDistance(centerPoint, radiusOrSecondPoint),
+      );
+    }
+  }
+
   public send(newPoint: Point): boolean {
     if (!this.centerPoint) {
       this.centerPoint = point(newPoint.x, newPoint.y);
@@ -144,7 +159,7 @@ export class CircleEntity implements Entity {
     return EntityName.Circle;
   }
 
-  public containsPointOnLine(point: Point): boolean {
+  public containsPointOnShape(point: Point): boolean {
     if (!this.circle) {
       return false;
     }
@@ -174,4 +189,34 @@ export class CircleEntity implements Entity {
     }
     return segmentArcs;
   }
+
+  public toJson(): JsonEntity<CircleJsonData> | null {
+    if (!this.circle) {
+      return null;
+    }
+    return {
+      id: this.id,
+      type: EntityName.Circle,
+      shapeData: {
+        center: { x: this.circle.center.x, y: this.circle.center.y },
+        radius: this.circle?.r,
+      },
+    };
+  }
+
+  public fromJson(jsonEntity: JsonEntity<CircleJsonData>): CircleEntity {
+    const center = new Point(
+      jsonEntity.shapeData.center.x,
+      jsonEntity.shapeData.center.y,
+    );
+    const radius = jsonEntity.shapeData.radius;
+    const circleEntity = new CircleEntity(center, radius);
+    circleEntity.id = jsonEntity.id;
+    return circleEntity;
+  }
+}
+
+export interface CircleJsonData {
+  center: { x: number; y: number };
+  radius: number;
 }
diff --git a/src/entities/Entitity.ts b/src/entities/Entity.ts
similarity index 57%
rename from src/entities/Entitity.ts
rename to src/entities/Entity.ts
index 7da579a..36234eb 100644
--- a/src/entities/Entitity.ts
+++ b/src/entities/Entity.ts
@@ -1,5 +1,10 @@
 import { DrawInfo, Shape, SnapPoint } from '../App.types.ts';
 import { Box, Point, Segment } from '@flatten-js/core';
+import { ArcJsonData } from './ArcEntity.ts';
+import { CircleJsonData } from './CircleEntity.ts';
+import { LineJsonData } from './LineEntity.ts';
+import { RectangleJsonData } from './RectangleEntity.ts';
+import { PointJsonData } from './PointEntity.ts';
 
 export interface Entity {
   // Random uuid generated when the Entity is created
@@ -16,7 +21,9 @@ export interface Entity {
   distanceTo(shape: Shape): [number, Segment] | null;
   getSvgString(): string | null;
   getType(): EntityName;
-  containsPointOnLine(point: Point): boolean;
+  containsPointOnShape(point: Point): boolean;
+  toJson(): JsonEntity | null;
+  fromJson(jsonEntity: JsonEntity): Entity | null;
 }
 
 export enum EntityName {
@@ -27,3 +34,16 @@ export enum EntityName {
   SelectionRectangle = 'SelectionRectangle',
   Point = 'Point',
 }
+
+export type ShapeJsonData =
+  | RectangleJsonData
+  | CircleJsonData
+  | ArcJsonData
+  | LineJsonData
+  | PointJsonData;
+
+export interface JsonEntity<TShapeJsonData = ShapeJsonData> {
+  id: string;
+  type: EntityName;
+  shapeData: TShapeJsonData;
+}
diff --git a/src/entities/LineEntity.ts b/src/entities/LineEntity.ts
index b8a01b7..6f2dbdb 100644
--- a/src/entities/LineEntity.ts
+++ b/src/entities/LineEntity.ts
@@ -1,4 +1,4 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, Shape, SnapPoint, SnapPointType } from '../App.types.ts';
 import { Box, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
@@ -7,7 +7,7 @@ import { isPointEqual } from '../helpers/is-point-equal.ts';
 import { pointDistance } from '../helpers/distance-between-points.ts';
 
 export class LineEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
+  public id: string = crypto.randomUUID();
   private segment: Segment | null = null;
   private startPoint: Point | null = null;
 
@@ -133,7 +133,7 @@ export class LineEntity implements Entity {
     return EntityName.Line;
   }
 
-  public containsPointOnLine(point: Point): boolean {
+  public containsPointOnShape(point: Point): boolean {
     if (!this.segment) {
       return false;
     }
@@ -170,4 +170,37 @@ export class LineEntity implements Entity {
     }
     return lineSegments;
   }
+
+  public toJson(): JsonEntity<LineJsonData> | null {
+    if (!this.segment) {
+      return null;
+    }
+    return {
+      id: this.id,
+      type: EntityName.Line,
+      shapeData: {
+        startPoint: { x: this.segment.start.x, y: this.segment.start.y },
+        endPoint: { x: this.segment.end.x, y: this.segment.end.y },
+      },
+    };
+  }
+
+  public fromJson(jsonEntity: JsonEntity<LineJsonData>): LineEntity {
+    const startPoint = new Point(
+      jsonEntity.shapeData.startPoint.x,
+      jsonEntity.shapeData.startPoint.y,
+    );
+    const endPoint = new Point(
+      jsonEntity.shapeData.endPoint.x,
+      jsonEntity.shapeData.endPoint.y,
+    );
+    const lineEntity = new LineEntity(startPoint, endPoint);
+    lineEntity.id = jsonEntity.id;
+    return lineEntity;
+  }
+}
+
+export interface LineJsonData {
+  startPoint: { x: number; y: number };
+  endPoint: { x: number; y: number };
 }
diff --git a/src/entities/PointEntity.ts b/src/entities/PointEntity.ts
index 2f1d428..0b1daa9 100644
--- a/src/entities/PointEntity.ts
+++ b/src/entities/PointEntity.ts
@@ -1,24 +1,25 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, Shape, SnapPoint, SnapPointType } from '../App.types.ts';
 import * as Flatten from '@flatten-js/core';
 import { Box, Point, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
+import { isNil } from 'es-toolkit';
 
 export class PointEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
-  public point: Point;
-
-  constructor(x: Point | number, y?: number) {
-    if (!y) {
-      // Past a point object
-      this.point = x as Point;
-    } else {
+  public id: string = crypto.randomUUID();
+  public point: Point | null = null;
+
+  constructor(x?: Point | number, y?: number) {
+    if (!isNil(x) && !isNil(y)) {
       // Passed x and y coordinates
       this.point = new Point(x as number, y as number);
     }
   }
 
   public draw(drawInfo: DrawInfo): void {
+    if (!this.point) {
+      return;
+    }
     const screenPoint = worldToScreen(this.point);
 
     drawInfo.context.beginPath();
@@ -37,7 +38,10 @@ export class PointEntity implements Entity {
     return box.contains(this.point);
   }
 
-  public getBoundingBox(): Box {
+  public getBoundingBox(): Box | null {
+    if (!this.point) {
+      return null;
+    }
     return new Box(this.point.x, this.point.y, this.point.x, this.point.y);
   }
 
@@ -80,7 +84,43 @@ export class PointEntity implements Entity {
     return EntityName.Point;
   }
 
-  public containsPointOnLine(point: Flatten.Point): boolean {
+  public containsPointOnShape(point: Flatten.Point): boolean {
+    if (!this.point) {
+      return false;
+    }
     return this.point.equalTo(point);
   }
+
+  public toJson(): JsonEntity<PointJsonData> | null {
+    if (!this.point) {
+      return null;
+    }
+    return {
+      id: this.id,
+      type: EntityName.Point,
+      shapeData: {
+        point: {
+          x: this.point.x,
+          y: this.point.y,
+        },
+      },
+    };
+  }
+
+  public fromJson(jsonEntity: JsonEntity<PointJsonData>): PointEntity {
+    const point = new Point(
+      jsonEntity.shapeData.point.x,
+      jsonEntity.shapeData.point.y,
+    );
+    const lineEntity = new PointEntity(point);
+    lineEntity.id = jsonEntity.id;
+    return lineEntity;
+  }
+}
+
+export interface PointJsonData {
+  point: {
+    x: number;
+    y: number;
+  };
 }
diff --git a/src/entities/RectangleEntity.ts b/src/entities/RectangleEntity.ts
index 3ba795d..80e2d79 100644
--- a/src/entities/RectangleEntity.ts
+++ b/src/entities/RectangleEntity.ts
@@ -1,14 +1,28 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, Shape, SnapPoint, SnapPointType } from '../App.types.ts';
 import * as Flatten from '@flatten-js/core';
 import { Box, Point, Relations, Segment } from '@flatten-js/core';
 import { worldToScreen } from '../helpers/world-screen-conversion.ts';
 
 export class RectangleEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
+  public id: string = crypto.randomUUID();
   private rectangle: Box | null = null;
   private startPoint: Point | null = null;
 
+  constructor(startPoint?: Point, endPoint?: Point) {
+    if (startPoint) {
+      this.startPoint = startPoint;
+    }
+    if (startPoint && endPoint) {
+      this.rectangle = new Box(
+        Math.min(startPoint.x, endPoint.x),
+        Math.min(startPoint.y, endPoint.y),
+        Math.max(startPoint.x, endPoint.x),
+        Math.max(startPoint.y, endPoint.y),
+      );
+    }
+  }
+
   public send(point: Point): boolean {
     if (!this.startPoint) {
       this.startPoint = point;
@@ -170,10 +184,47 @@ export class RectangleEntity implements Entity {
     return EntityName.Rectangle;
   }
 
-  public containsPointOnLine(point: Flatten.Point): boolean {
+  public containsPointOnShape(point: Flatten.Point): boolean {
     if (!this.rectangle) {
       return false;
     }
     return this.rectangle.toSegments().some(segment => segment.contains(point));
   }
+
+  public toJson(): JsonEntity<RectangleJsonData> | null {
+    if (!this.rectangle) {
+      return null;
+    }
+    return {
+      id: this.id,
+      type: EntityName.Rectangle,
+      shapeData: {
+        xmin: this.rectangle.xmin,
+        ymin: this.rectangle.ymin,
+        xmax: this.rectangle.xmax,
+        ymax: this.rectangle.ymax,
+      },
+    };
+  }
+
+  public fromJson(jsonEntity: JsonEntity<RectangleJsonData>): RectangleEntity {
+    const startPoint = new Point(
+      jsonEntity.shapeData.xmin,
+      jsonEntity.shapeData.ymin,
+    );
+    const endPoint = new Point(
+      jsonEntity.shapeData.xmax,
+      jsonEntity.shapeData.ymax,
+    );
+    const rectangleEntity = new RectangleEntity(startPoint, endPoint);
+    rectangleEntity.id = jsonEntity.id;
+    return rectangleEntity;
+  }
+}
+
+export interface RectangleJsonData {
+  xmin: number;
+  ymin: number;
+  xmax: number;
+  ymax: number;
 }
diff --git a/src/entities/SelectionRectangleEntity.ts b/src/entities/SelectionRectangleEntity.ts
index d9e3d79..05dfd37 100644
--- a/src/entities/SelectionRectangleEntity.ts
+++ b/src/entities/SelectionRectangleEntity.ts
@@ -1,4 +1,4 @@
-import { Entity, EntityName } from './Entitity.ts';
+import { Entity, EntityName, JsonEntity } from './Entity.ts';
 import { DrawInfo, SnapPoint } from '../App.types.ts';
 import { Box, Point, Segment } from '@flatten-js/core';
 import {
@@ -6,11 +6,11 @@ import {
   SELECTION_RECTANGLE_COLOR_CONTAINS,
   SELECTION_RECTANGLE_COLOR_INTERSECTION,
 } from '../App.consts.ts';
-import { worldToScreen } from '../helpers/world-screen-conversion.ts';
+import { worldToScreen } from '../helpers/world-screen-conversion.ts'; // TODO move the selection rectangle to its own thing, not part of the entities logic
 
 // TODO move the selection rectangle to its own thing, not part of the entities logic
 export class SelectionRectangleEntity implements Entity {
-  public readonly id: string = crypto.randomUUID();
+  public id: string = crypto.randomUUID();
   private rectangle: Box | null = null;
   private startPoint: Point | null = null;
 
@@ -130,7 +130,15 @@ export class SelectionRectangleEntity implements Entity {
     return EntityName.SelectionRectangle;
   }
 
-  public containsPointOnLine(): boolean {
+  public containsPointOnShape(): boolean {
     return false; // Not implemented
   }
+
+  public toJson(): JsonEntity | null {
+    return null; // Not implemented
+  }
+
+  public fromJson(): Entity | null {
+    return null; // Not implemented
+  }
 }
diff --git a/src/helpers/draw-functions.ts b/src/helpers/draw-functions.ts
index 8234de7..f05e90f 100644
--- a/src/helpers/draw-functions.ts
+++ b/src/helpers/draw-functions.ts
@@ -1,5 +1,5 @@
 import { DrawInfo, SnapPoint, SnapPointType } from '../App.types.ts';
-import { Entity } from '../entities/Entitity.ts';
+import { Entity } from '../entities/Entity.ts';
 import {
   ANGLE_GUIDES_COLOR,
   CANVAS_BACKGROUND_COLOR,
diff --git a/src/helpers/export-entities-to-json.ts b/src/helpers/export-entities-to-json.ts
new file mode 100644
index 0000000..9bfb01a
--- /dev/null
+++ b/src/helpers/export-entities-to-json.ts
@@ -0,0 +1,21 @@
+import { getEntities } from '../state.ts';
+import { saveAs } from 'file-saver';
+import { JsonEntity } from '../entities/Entity.ts';
+import { compact } from 'es-toolkit';
+
+export function exportEntitiesToJsonFile() {
+  const entities = getEntities();
+
+  const jsonEntities = compact(entities.map(entity => entity.toJson()));
+  const jsonDrawingFile: JsonDrawingFile = {
+    entities: jsonEntities,
+  };
+  const json = JSON.stringify(jsonDrawingFile, null, 2);
+
+  const blob = new Blob([json], { type: 'text/json;charset=utf-8' });
+  saveAs(blob, 'open-web-cad--drawing.json');
+}
+
+export interface JsonDrawingFile {
+  entities: JsonEntity[];
+}
diff --git a/src/helpers/export-entities-to-svg.ts b/src/helpers/export-entities-to-svg.ts
index 470e01b..f6dafe9 100644
--- a/src/helpers/export-entities-to-svg.ts
+++ b/src/helpers/export-entities-to-svg.ts
@@ -1,4 +1,4 @@
-import { Entity } from '../entities/Entitity.ts';
+import { Entity } from '../entities/Entity.ts';
 import { SVG_MARGIN } from '../App.consts.ts';
 import { Point, Vector } from '@flatten-js/core';
 import { Shape } from '../App.types.ts';
diff --git a/src/helpers/find-closest-entity.ts b/src/helpers/find-closest-entity.ts
index 32e4a89..a720ef7 100644
--- a/src/helpers/find-closest-entity.ts
+++ b/src/helpers/find-closest-entity.ts
@@ -1,5 +1,5 @@
 import { Point, Segment } from '@flatten-js/core';
-import { Entity } from '../entities/Entitity.ts';
+import { Entity } from '../entities/Entity.ts';
 
 export function findClosestEntity<EntityType = Entity>(
   worldPoint: Point,
diff --git a/src/helpers/get-draw-guides.ts b/src/helpers/get-draw-guides.ts
index 27981b2..a377deb 100644
--- a/src/helpers/get-draw-guides.ts
+++ b/src/helpers/get-draw-guides.ts
@@ -5,7 +5,7 @@ import { getClosestSnapPointWithinRadius } from './get-closest-snap-point.ts';
 import { SNAP_ANGLE_DISTANCE } from '../App.consts.ts';
 import { getAngleGuideLines } from './get-angle-guide-lines.ts';
 import { findClosestEntity } from './find-closest-entity.ts';
-import { Entity } from '../entities/Entitity.ts';
+import { Entity } from '../entities/Entity.ts';
 import { LineEntity } from '../entities/LineEntity.ts';
 import { compact } from 'es-toolkit';
 
diff --git a/src/helpers/get-intersection-points.ts b/src/helpers/get-intersection-points.ts
index 1e06b7d..b1eb9a4 100644
--- a/src/helpers/get-intersection-points.ts
+++ b/src/helpers/get-intersection-points.ts
@@ -1,4 +1,4 @@
-import { Entity } from '../entities/Entitity.ts';
+import { Entity } from '../entities/Entity.ts';
 import { Point } from '@flatten-js/core';
 
 // TODO in the future we could optimize this by only calculating intersection points near the mouse
diff --git a/src/helpers/import-entities-from-json.ts b/src/helpers/import-entities-from-json.ts
new file mode 100644
index 0000000..2bae9d2
--- /dev/null
+++ b/src/helpers/import-entities-from-json.ts
@@ -0,0 +1,68 @@
+import { EntityName, JsonEntity } from '../entities/Entity.ts';
+import { JsonDrawingFile } from './export-entities-to-json.ts';
+import {
+  RectangleEntity,
+  RectangleJsonData,
+} from '../entities/RectangleEntity.ts';
+import { ArcEntity, ArcJsonData } from '../entities/ArcEntity.ts';
+import { CircleEntity, CircleJsonData } from '../entities/CircleEntity.ts';
+import { LineEntity, LineJsonData } from '../entities/LineEntity.ts';
+import { PointEntity, PointJsonData } from '../entities/PointEntity.ts';
+import { setEntities } from '../state.ts';
+import { compact } from 'es-toolkit';
+
+/**
+ * Open a file selection dialog to select *.json files
+ * Parse the JSON file
+ * Generate entities from the JSON data
+ * Set the entities in the state
+ */
+export function importEntitiesFromJsonFile(file: File | null | undefined) {
+  return new Promise<void>((resolve, reject) => {
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.addEventListener('load', async () => {
+      const json = reader.result as string;
+      const data = JSON.parse(json) as JsonDrawingFile;
+
+      if (!data.entities) {
+        reject(new Error('Invalid JSON file'));
+      }
+
+      const entities = compact(
+        data.entities.map(entity => {
+          switch (entity.type) {
+            case EntityName.Arc:
+              return new ArcEntity().fromJson(
+                entity as JsonEntity<ArcJsonData>,
+              );
+            case EntityName.Circle:
+              return new CircleEntity().fromJson(
+                entity as JsonEntity<CircleJsonData>,
+              );
+            case EntityName.Line:
+              return new LineEntity().fromJson(
+                entity as JsonEntity<LineJsonData>,
+              );
+            case EntityName.Point:
+              return new PointEntity().fromJson(
+                entity as JsonEntity<PointJsonData>,
+              );
+            case EntityName.Rectangle:
+              return new RectangleEntity().fromJson(
+                entity as JsonEntity<RectangleJsonData>,
+              );
+
+            default:
+              reject(new Error('Invalid entity type: ' + entity.type));
+          }
+        }),
+      );
+
+      setEntities(entities);
+      resolve();
+    });
+    reader.readAsText(file, 'utf-8');
+  });
+}
diff --git a/src/helpers/tools/eraser-tool.ts b/src/helpers/tools/eraser-tool.ts
index 373a3c1..e617f6d 100644
--- a/src/helpers/tools/eraser-tool.ts
+++ b/src/helpers/tools/eraser-tool.ts
@@ -7,7 +7,7 @@ import {
   setDebugEntities,
 } from '../../state.ts';
 import { compact } from 'es-toolkit';
-import { Entity, EntityName } from '../../entities/Entitity.ts';
+import { Entity, EntityName } from '../../entities/Entity.ts';
 import { LineEntity } from '../../entities/LineEntity.ts';
 import { findNeighboringPointsOnLine } from '../find-neighboring-points-on-line.ts';
 import { PointEntity } from '../../entities/PointEntity.ts';
@@ -104,7 +104,7 @@ function eraseLineSegment(
   const cutLines: Entity[] = line.cutAtPoints([firstCutPoint, secondCutPoint]);
   // Remove the segment that has the clickedPointOnShape point on it
   const remainingLines = cutLines.filter(
-    line => !line.containsPointOnLine(clickedPointOnShape),
+    line => !line.containsPointOnShape(clickedPointOnShape),
   );
   deleteEntity(line);
   addEntity(...remainingLines);
@@ -134,7 +134,7 @@ function eraseCircleSegment(
   } else {
     // Delete segment that contains the click point
     const remainingArcs = cutArcs.filter(
-      arc => !arc.containsPointOnLine(clickedPointOnShape),
+      arc => !arc.containsPointOnShape(clickedPointOnShape),
     );
     deleteEntity(circle);
     addEntity(...remainingArcs);
@@ -165,7 +165,7 @@ function eraseArcSegment(
   } else {
     // Delete segment that contains the click point
     const remainingArcs = cutArcs.filter(
-      arc => !arc.containsPointOnLine(clickedPointOnShape),
+      arc => !arc.containsPointOnShape(clickedPointOnShape),
     );
     deleteEntity(arc);
     addEntity(...remainingArcs);
diff --git a/src/state.ts b/src/state.ts
index d3b136b..a09f894 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -1,4 +1,4 @@
-import { Entity } from './entities/Entitity.ts';
+import { Entity } from './entities/Entity.ts';
 import { Point } from '@flatten-js/core';
 import { Tool } from './tools.ts';
 import { screenToWorld } from './helpers/world-screen-conversion.ts';