From 81dad57fb6e2a4cc208d8838b7b5674ef02b29da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zsolt=20Jur=C3=A1nyi?= <zsolt.juranyi@gmail.com>
Date: Thu, 13 Jul 2023 21:36:22 +0200
Subject: [PATCH] feat(ol-style-text): added backgroundFill and
 backgroundStroke props

---
 docs/componentsguide/styles/text/index.md | 12 ++++++++++++
 src/components/styles/OlStyleText.vue     | 23 +++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/docs/componentsguide/styles/text/index.md b/docs/componentsguide/styles/text/index.md
index f3b53b6f..d21b3196 100644
--- a/docs/componentsguide/styles/text/index.md
+++ b/docs/componentsguide/styles/text/index.md
@@ -82,3 +82,15 @@ Add text to shapes
 
 - **Type**: `Array`
 - **Default**: `() => [0, 0, 0, 0]`
+
+### backgroundFill
+
+- **Type**: `array`, `string`
+
+Fill color for the text background when `placement` is 'point'. Default is no fill. 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.
+
+### backgroundStroke
+
+- **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.
diff --git a/src/components/styles/OlStyleText.vue b/src/components/styles/OlStyleText.vue
index e29d50d7..435d72cb 100644
--- a/src/components/styles/OlStyleText.vue
+++ b/src/components/styles/OlStyleText.vue
@@ -8,7 +8,7 @@
 import type { Options, TextPlacement } from "ol/style/Text";
 import Text from "ol/style/Text";
 import Fill from "ol/style/Fill";
-import Stroke from "ol/style/Stroke";
+import Stroke, { type Options as StrokeOptions } from "ol/style/Stroke";
 
 import type { Ref } from "vue";
 import { inject, watch, onMounted, onUnmounted, provide, computed } from "vue";
@@ -16,6 +16,8 @@ import type Style from "ol/style/Style";
 import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import type { Color } from "ol/color";
+import type { ColorLike } from "ol/colorlike";
 
 const props = withDefaults(
   defineProps<{
@@ -32,6 +34,8 @@ const props = withDefaults(
     textAlign?: CanvasTextAlign;
     textBaseline?: CanvasTextBaseline;
     padding?: [number, number, number, number];
+    backgroundFill?: Color | ColorLike;
+    backgroundStroke?: StrokeOptions;
   }>(),
   {
     maxAngle: Math.PI / 4,
@@ -54,12 +58,23 @@ const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const createText = (innerProperties: Omit<Options, "fill" | "stroke">) => {
-  return new Text({
+const createText = (properties: typeof props) => {
+  const innerProperties = properties as Omit<
+    Options,
+    "fill" | "stroke" | "backgroundFill" | "backgroundStroke"
+  >;
+  const options: Options = {
     ...innerProperties,
     fill: new Fill(),
     stroke: new Stroke(),
-  });
+  };
+  if (properties.backgroundFill) {
+    options.backgroundFill = new Fill({ color: properties.backgroundFill });
+  }
+  if (properties.backgroundStroke) {
+    options.backgroundStroke = new Stroke(properties.backgroundStroke);
+  }
+  return new Text(options);
 };
 
 const textContent = computed(() => createText(properties));