feat(ol-style-text): fill and stroke properties for the text (#283)

MelihAltintas · Dec 3, 2023 · 111be7c · 111be7c
1 parent e5b1782
commit 111be7c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/docs/componentsguide/styles/text/index.md b/docs/componentsguide/styles/text/index.md
@@ -94,3 +94,15 @@ Fill color for the text background when `placement` is 'point'. Default is no fi
 - **Type**: `Object`
 
 Stroke style for the text background when `placement` is 'point'. Default is no stroke. Please see [ol-style-stroke](/componentsguide/styles/stroke/#properties) for available options.
+
+### fill
+
+- **Type**: `array`, `string`
+
+Fill color for the text. Default is '#333'. Either in hexadecimal or as RGBA array with red, green, and blue values betweeen 0 and 255 and alpha value between 0 and 1 inclusive.
+
+### stroke
+
+- **Type**: `Object`
+
+Stroke style for the text. Default is no stroke. Please see [ol-style-stroke](/componentsguide/styles/stroke/#properties) for available options.
diff --git a/src/components/styles/OlStyleText.vue b/src/components/styles/OlStyleText.vue
@@ -34,6 +34,8 @@ const props = withDefaults(
     textAlign?: CanvasTextAlign;
     textBaseline?: CanvasTextBaseline;
     padding?: [number, number, number, number];
+    fill?: Color | ColorLike;
+    stroke?: StrokeOptions;
     backgroundFill?: Color | ColorLike;
     backgroundStroke?: StrokeOptions;
   }>(),
@@ -64,10 +66,14 @@ const createText = (properties: typeof props) => {
     "fill" | "stroke" | "backgroundFill" | "backgroundStroke"
   >;
   const options: Options = {
-    ...innerProperties,
-    fill: new Fill(),
-    stroke: new Stroke(),
+    ...innerProperties
   };
+  if (properties.fill) {
+    options.fill = new Fill({ color: properties.fill });
+  }
+  if (properties.stroke) {
+    options.stroke = new Stroke(properties.stroke);
+  }
   if (properties.backgroundFill) {
     options.backgroundFill = new Fill({ color: properties.backgroundFill });
   }