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 = {}) { 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,