Merge pull request #618 from tuanchauict/serialization-js

Jsonize SerializableGroup SerializableLine SerializableText SerializableRectangle

monosketch-svelte/src/lib/libs/graphics-geo/point.ts

@@ -132,7 +132,7 @@ export class DirectedPoint implements Comparable {
         return new DirectedPoint(this.direction, this.point.plus(base));
     }
 
-    // TODO: implement serialize and deserialize
+    static ZERO = new DirectedPoint(Direction.HORIZONTAL, Point.ZERO);
 }
 
 /**

monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts

@@ -174,4 +174,4 @@ describe('SerializableLineExtra', () => {
             })
         );
     });
-});
+});

monosketch-svelte/src/lib/mono/shape/serialization/extras.ts

@@ -89,6 +89,8 @@ export class SerializableTextExtra {
 
         return result;
     }
+
+    static EMPTY: SerializableTextExtra = new SerializableTextExtra();
 }
 
 /**
@@ -149,4 +151,6 @@ export class SerializableLineExtra {
 
         return result;
     }
+
+    static EMPTY: SerializableLineExtra = new SerializableLineExtra();
 }

monosketch-svelte/src/lib/mono/shape/serialization/serializable.ts

@@ -109,9 +109,10 @@ export function Jsonizable(constructor: Function) {
             // 1st: Check if the field has a serializer
             // 2nd: Check if the field has a fromJson method
             // 3rd: Use the value directly
+            console.log(field, key, value);
             if (serializers[key]) {
                 instance[key] = serializers[key].deserialize(value);
-            } else if (field.constructor && field.constructor.fromJson) {
+            } else if (field && field.constructor && field.constructor.fromJson) {
                 instance[key] = field.constructor.fromJson(value);
             } else {
                 instance[key] = value;

monosketch-svelte/src/lib/mono/shape/serialization/serializers.ts

@@ -2,7 +2,8 @@
  * Copyright (c) 2024, tuanchauict
  */
 
-import { Point, PointF } from "$libs/graphics-geo/point";
+import { DirectedPoint, Direction, Point, PointF } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
 import { LineAnchor } from "$mono/shape/shape/linehelper";
 
 /**
@@ -32,7 +33,7 @@ export const AnchorSerializer = {
             default:
                 throw new Error(`Unrecognizable value ${value}`);
         }
-    }
+    },
 }
 
 export const PointSerializer = {
@@ -46,7 +47,17 @@ export const PointSerializer = {
             throw new Error(`Invalid Point format: ${value}`);
         }
         return new Point(x, y);
-    }
+    },
+}
+
+export const PointArraySerializer = {
+    serialize(value: Point[]): string[] {
+        return value.map(PointSerializer.serialize);
+    },
+
+    deserialize(value: string[]): Point[] {
+        return value.map(PointSerializer.deserialize);
+    },
 }
 
 /**
@@ -63,5 +74,40 @@ export const PointFSerializer = {
             throw new Error(`Invalid PointF format: ${value}`);
         }
         return new PointF(x, y);
-    }
+    },
+}
+
+export const DirectedPointSerializer = {
+    MARSHAL_HORIZONTAL: "H",
+    MARSHAL_VERTICAL: "V",
+
+    serialize(value: DirectedPoint): string {
+        const serializedDirection = value.direction === Direction.HORIZONTAL
+            ? DirectedPointSerializer.MARSHAL_HORIZONTAL
+            : DirectedPointSerializer.MARSHAL_VERTICAL;
+        return `${serializedDirection}|${value.point.left}|${value.point.top}`;
+    },
+
+    deserialize(value: string): DirectedPoint {
+        const [serializedDirection, left, top] = value.split("|");
+        const direction = serializedDirection === DirectedPointSerializer.MARSHAL_HORIZONTAL
+            ? Direction.HORIZONTAL
+            : Direction.VERTICAL;
+
+        return DirectedPoint.of(direction, parseInt(left), parseInt(top));
+    },
 }
+
+export const RectSerializer = {
+    serialize(value: Rect): string {
+        return `${value.left}|${value.top}|${value.width}|${value.height}`;
+    },
+
+    deserialize(value: string): Rect {
+        const [left, top, width, height] = value.split("|").map(Number);
+        if (isNaN(left) || isNaN(top) || isNaN(width) || isNaN(width)) {
+            throw new Error(`Invalid Rect format: ${value}`);
+        }
+        return Rect.byLTWH(left, top, width, height);
+    },
+}