Make SerializableLineExtra jsonizable

tuanchauict · Dec 11, 2024 · 8cd8cf1 · 8cd8cf1
1 parent a6ee0b4
commit 8cd8cf1
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 14 deletions.
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/shape-extra.ts b/monosketch-svelte/src/lib/mono/shape/extra/shape-extra.ts
@@ -12,7 +12,7 @@ import {
     TextVerticalAlign,
 } from "$mono/shape/extra/style";
 import {
-    type SerializableLineExtra,
+    SerializableLineExtra,
     SerializableRectExtra,
     SerializableTextExtra,
 } from "$mono/shape/serialization/extras";
@@ -124,7 +124,7 @@ export class LineExtra implements ShapeExtra, ILineExtra {
     }
 
     toSerializableExtra(): SerializableLineExtra {
-        return {
+        return SerializableLineExtra.create({
             isStrokeEnabled: this.isStrokeEnabled,
             userSelectedStrokeStyleId: this.userSelectedStrokeStyle.id,
             isStartAnchorEnabled: this.isStartAnchorEnabled,
@@ -133,7 +133,7 @@ export class LineExtra implements ShapeExtra, ILineExtra {
             userSelectedEndAnchorId: this.userSelectedEndAnchor.id,
             dashPattern: this.dashPattern.toSerializableValue(),
             isRoundedCorner: this.isRoundedCorner,
-        };
+        });
     }
 }
 

diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts b/monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts
@@ -3,7 +3,7 @@
  */
 
 import { describe, expect, it } from "vitest";
-import { SerializableRectExtra, SerializableTextExtra } from './extras';
+import { SerializableLineExtra, SerializableRectExtra, SerializableTextExtra } from './extras';
 
 describe('SerializableRectExtra', () => {
     it('should create a SerializableRectExtra instance correctly', () => {
@@ -117,4 +117,61 @@ describe('SerializableTextExtra', () => {
             })
         );
     });
+});
+
+describe('SerializableLineExtra', () => {
+    it('should create a SerializableLineExtra instance correctly', () => {
+        const original = SerializableLineExtra.create({
+            isStrokeEnabled: true,
+            userSelectedStrokeStyleId: 'strokeStyle1',
+            isStartAnchorEnabled: true,
+            userSelectedStartAnchorId: 'startAnchor1',
+            isEndAnchorEnabled: true,
+            userSelectedEndAnchorId: 'endAnchor1',
+            dashPattern: 'dashPattern1',
+            isRoundedCorner: true,
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            se: true,
+            su: 'strokeStyle1',
+            ase: true,
+            asu: 'startAnchor1',
+            aee: true,
+            aeu: 'endAnchor1',
+            du: 'dashPattern1',
+            rc: true,
+        });
+    });
+
+    it('should serialize and deserialize correctly', () => {
+        const json = {
+            se: false,
+            su: 'strokeStyle2',
+            ase: false,
+            asu: 'startAnchor2',
+            aee: false,
+            aeu: 'endAnchor2',
+            du: 'dashPattern2',
+            rc: false,
+        }
+
+        // @ts-ignore
+        const deserialized = SerializableLineExtra.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableLineExtra.create({
+                isStrokeEnabled: false,
+                userSelectedStrokeStyleId: 'strokeStyle2',
+                isStartAnchorEnabled: false,
+                userSelectedStartAnchorId: 'startAnchor2',
+                isEndAnchorEnabled: false,
+                userSelectedEndAnchorId: 'endAnchor2',
+                dashPattern: 'dashPattern2',
+                isRoundedCorner: false,
+            })
+        );
+    });
 });
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/extras.ts b/monosketch-svelte/src/lib/mono/shape/serialization/extras.ts
@@ -94,16 +94,59 @@ export class SerializableTextExtra {
 /**
  * A serializable class for extra properties of a line shape.
  */
+@Jsonizable
 export class SerializableLineExtra {
-    constructor(
-        public isStrokeEnabled: boolean = true,
-        public userSelectedStrokeStyleId: string,
-        public isStartAnchorEnabled: boolean = false,
-        public userSelectedStartAnchorId: string,
-        public isEndAnchorEnabled: boolean = false,
-        public userSelectedEndAnchorId: string,
-        public dashPattern: string,
-        public isRoundedCorner: boolean = false,
-    ) {
+    @SerialName("se")
+    public isStrokeEnabled: boolean = true;
+    @SerialName("su")
+    public userSelectedStrokeStyleId: string = "";
+    @SerialName("ase")
+    public isStartAnchorEnabled: boolean = false;
+    @SerialName("asu")
+    public userSelectedStartAnchorId: string = "";
+    @SerialName("aee")
+    public isEndAnchorEnabled: boolean = false;
+    @SerialName("aeu")
+    public userSelectedEndAnchorId: string = "";
+    @SerialName("du")
+    public dashPattern: string = "";
+    @SerialName("rc")
+    public isRoundedCorner: boolean = false;
+
+    private constructor() {
+    }
+
+    static create(
+        {
+            isStrokeEnabled,
+            userSelectedStrokeStyleId,
+            isStartAnchorEnabled,
+            userSelectedStartAnchorId,
+            isEndAnchorEnabled,
+            userSelectedEndAnchorId,
+            dashPattern,
+            isRoundedCorner,
+        }: {
+            isStrokeEnabled: boolean;
+            userSelectedStrokeStyleId: string;
+            isStartAnchorEnabled: boolean;
+            userSelectedStartAnchorId: string;
+            isEndAnchorEnabled: boolean;
+            userSelectedEndAnchorId: string;
+            dashPattern: string;
+            isRoundedCorner: boolean;
+        },
+    ): SerializableLineExtra {
+        const result = new SerializableLineExtra();
+        result.isStrokeEnabled = isStrokeEnabled;
+        result.userSelectedStrokeStyleId = userSelectedStrokeStyleId;
+        result.isStartAnchorEnabled = isStartAnchorEnabled;
+        result.userSelectedStartAnchorId = userSelectedStartAnchorId;
+        result.isEndAnchorEnabled = isEndAnchorEnabled;
+        result.userSelectedEndAnchorId = userSelectedEndAnchorId;
+        result.dashPattern = dashPattern;
+        result.isRoundedCorner = isRoundedCorner;
+
+        return result;
     }
 }