From 1a907af5d0494699070976ea5783597e3375457b Mon Sep 17 00:00:00 2001
From: llama <gh@siid.sh>
Date: Mon, 2 Jun 2025 19:38:01 +0800
Subject: [PATCH] fill masks in editor

---
 ts/routes/image-occlusion/shapes/from-cloze.ts  | 1 +
 ts/routes/image-occlusion/shapes/text.ts        | 4 +++-
 ts/routes/image-occlusion/tools/tool-polygon.ts | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ts/routes/image-occlusion/shapes/from-cloze.ts b/ts/routes/image-occlusion/shapes/from-cloze.ts
index a59f8f965..0db496740 100644
--- a/ts/routes/image-occlusion/shapes/from-cloze.ts
+++ b/ts/routes/image-occlusion/shapes/from-cloze.ts
@@ -77,6 +77,7 @@ function extractShapeFromRenderedCloze(cloze: HTMLDivElement): Shape | null {
         scale: cloze.dataset.scale,
         fs: cloze.dataset.fontSize,
         angle: cloze.dataset.angle,
+        ...(cloze.dataset.fill == null ? {} : { fill: cloze.dataset.fill }),
     };
     return buildShape(type, props);
 }
diff --git a/ts/routes/image-occlusion/shapes/text.ts b/ts/routes/image-occlusion/shapes/text.ts
index 53ef9e18b..4adb3abbb 100644
--- a/ts/routes/image-occlusion/shapes/text.ts
+++ b/ts/routes/image-occlusion/shapes/text.ts
@@ -19,11 +19,12 @@ export class Text extends Shape {
         text = "",
         scaleX = 1,
         scaleY = 1,
+        fill = TEXT_COLOR,
         fontSize,
         ...rest
     }: ConstructorParams<Text> = {}) {
         super(rest);
-        this.fill = TEXT_COLOR;
+        this.fill = fill;
         this.text = text;
         this.scaleX = scaleX;
         this.scaleY = scaleY;
@@ -38,6 +39,7 @@ export class Text extends Shape {
             // scaleX and scaleY are guaranteed to be equal since we lock the aspect ratio
             scale: floatToDisplay(this.scaleX),
             fs: this.fontSize ? floatToDisplay(this.fontSize) : undefined,
+            ...(this.fill === TEXT_COLOR ? {} : { fill: this.fill }),
         };
     }
 
diff --git a/ts/routes/image-occlusion/tools/tool-polygon.ts b/ts/routes/image-occlusion/tools/tool-polygon.ts
index bf6a11896..895cae523 100644
--- a/ts/routes/image-occlusion/tools/tool-polygon.ts
+++ b/ts/routes/image-occlusion/tools/tool-polygon.ts
@@ -223,7 +223,7 @@ export const modifiedPolygon = (canvas: fabric.Canvas, polygon: fabric.Polygon):
         });
 
     const polygon1 = new fabric.Polygon(transformedPoints, {
-        fill: SHAPE_MASK_COLOR,
+        fill: polygon.fill ?? SHAPE_MASK_COLOR,
         objectCaching: false,
         stroke: BORDER_COLOR,
         strokeWidth: 1,