fix: save pasted elements structure

The-Zagy · nagy-nabil · Sep 8, 2023 · Sep 2, 2023 · Sep 4, 2023 · Sep 7, 2023
commit 65d961bdfe11caf7da09ec39c2003f60f3fa153a
diff --git a/.editorconfig b/.editorconfig
@@ -1,7 +1,7 @@
 root = true
 
 [*]
-indent_style = spaces
+indent_style = space
 indent_size = 2
 end_of_line = lf
 charset = utf-8

diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
- "trailingComma": "es5",
+ "trailingComma": "all",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 4,

diff --git a/index.html b/index.html
@@ -5,6 +5,9 @@
  <link rel="icon" type="image/svg+xml" href="/src/public/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Zagydraw | The whiteboarding app</title>
+ <link rel="preload" as="font" href="/src/assets/fonts/FiraCode-VariableFont_wght.ttf" />
+ <link rel="preload" as="font" href="/src/assets/fonts/GochiHand-Regular.ttf" />
+ <link rel="preload" as="font" href="/src/assets/fonts/PressStart2P-Regular.ttf" />
  </head>
  <body>
  <div id="root">

diff --git a/src/actions/ExportScene.ts b/src/actions/ExportScene.ts
@@ -15,7 +15,6 @@ import { isText } from "@/types/general";
 import { ZagyCanvasTextElement } from "@/types/general";
 import { isHanddrawn } from "@/types/general";
 import { ZagyCanvasHandDrawnElement } from "@/types/general";
-import { getBoundingRect } from "@/utils";
 
 export const DestOpts = {
  CLIPBOARD: 0,
@@ -78,7 +77,6 @@ export class ActionExportScene extends Command {
  return {
  ...baseTemp,
  shape: el.shape,
- path2D: el.path2D,
  paths: el.paths,
  options: el.options,
  } satisfies CleanedElement<ZagyCanvasHandDrawnElement> as unknown as CleanedElement<T>;
@@ -98,14 +96,13 @@ export class ActionExportScene extends Command {
  // choose which items to clean up
  if (this.onlySelected) {
  selectedElements.forEach((el) =>
- portable.elements.push(ActionExportScene.cleanupItem(el))
+ portable.elements.push(ActionExportScene.cleanupItem(el)),
  );
  } else {
  elements.forEach((el) => portable.elements.push(ActionExportScene.cleanupItem(el)));
  }
  // don't copy dump text into the user clipboard if there's no data to copy
  if (portable.elements.length === 0) return;
- console.log("copied bounding rect", getBoundingRect(...portable.elements));
  // choose export mechanism
  if (this.dest === DestOpts.CLIPBOARD) {
  await navigator.clipboard.writeText(JSON.stringify(portable));

diff --git a/src/actions/copySelected.ts b/src/actions/copySelected.ts
diff --git a/src/actions/createText.ts b/src/actions/createText.ts
@@ -21,7 +21,7 @@ class TextAction {
  }
  private static _inProgress(
  textAreaWrapper: HTMLDivElement | null,
- textArea: HTMLTextAreaElement | null
+ textArea: HTMLTextAreaElement | null,
  ) {
  const { cursorFn, zoomLevel } = useStore.getState();
  if (!textAreaWrapper || !textArea || cursorFn !== CursorFn.Text) return;
@@ -58,7 +58,7 @@ class TextAction {
 
  public static end(
  canvas: HTMLCanvasElement | null,
- textArea: HTMLTextAreaElement | null
+ textArea: HTMLTextAreaElement | null,
  ): UndoableCommand | null {
  let element: ZagyCanvasElement | null = null;
  const { cursorFn } = useStore.getState();

diff --git a/src/actions/cutSelected.ts b/src/actions/cutSelected.ts
@@ -1,5 +1,5 @@
 import { ActionDeleteSelected } from "./deleteSelected";
-import { ActionExportScene, DestOpts } from "./copySelected";
+import { ActionExportScene, DestOpts } from "./ExportScene";
 import { UndoableCommand } from "./types";
 
 export class ActionCutSelected extends UndoableCommand {

diff --git a/src/actions/delete.ts b/src/actions/delete.ts
@@ -18,7 +18,7 @@ class DeleteAction {
  if (el !== null) {
  this.willDelete = true;
  setElements((prev) =>
- prev.map((val) => (val.id === el.id ? { ...val, willDelete: true } : val))
+ prev.map((val) => (val.id === el.id ? { ...val, willDelete: true } : val)),
  );
  }
  }
@@ -42,7 +42,7 @@ class DeleteAction {
  !(
  val.shape === "image" &&
  (val as ZagyCanvasImageElement).imgRef instanceof Promise
- )
+ ),
  )
  .map((val) => ({ ...val, willDelete: false }));
  if (deletedElements.length === 0) return null;

diff --git a/src/actions/deleteSelected.ts b/src/actions/deleteSelected.ts
@@ -14,7 +14,7 @@ export class ActionDeleteSelected extends UndoableCommand {
  !(
  itm.shape === "image" &&
  (itm as ZagyCanvasImageElement).imgRef instanceof Promise
- )
+ ),
  );
  // remove any elements that exist on selected elements array
  // create hash of ids for easy check while filtring the elements

diff --git a/src/actions/draw.ts b/src/actions/draw.ts
@@ -52,15 +52,15 @@ class DrawAction {
  this.roughGenerator,
  this.lastMouseDownPosition,
  this.lastMouseUpPosition,
- { seed: this.currentSeed }
+ { seed: this.currentSeed },
  );
  setPreviewElement(rect);
  } else if (cursorFn === CursorFn.Line) {
  const line: ZagyCanvasLineElement = generateLineElement(
  this.roughGenerator,
  this.lastMouseDownPosition,
  this.lastMouseUpPosition,
- { seed: this.currentSeed }
+ { seed: this.currentSeed },
  );
  setPreviewElement(line);
  } else if (cursorFn === CursorFn.FreeDraw) {
@@ -113,7 +113,7 @@ class DrawAction {
  this.lastMouseDownPosition,
  this.lastMouseUpPosition,
  zoomLevel,
- { seed: this.currentSeed }
+ { seed: this.currentSeed },
  );
  el = line;
  this.currentSeed = randomSeed();
@@ -123,7 +123,7 @@ class DrawAction {
  this.lastMouseDownPosition,
  this.lastMouseUpPosition,
  zoomLevel,
- { seed: this.currentSeed }
+ { seed: this.currentSeed },
  );
  if (rect.endX - rect.x < 10 || rect.endY - rect.y < 10) return;
 
@@ -132,7 +132,7 @@ class DrawAction {
  } else if (cursorFn === CursorFn.FreeDraw) {
  const handDrawnElement = generateCachedHandDrawnElement(
  this.currentlyDrawnFreeHand,
- zoomLevel
+ zoomLevel,
  );
  el = handDrawnElement;
  this.currentlyDrawnFreeHand = [];