feat(ol-style-text): added backgroundFill and backgroundStroke props

[juzraai]

Hey! First of all, thanks for this awesome library! :)

One thing I was missing is the ability to set backgroundFill and backgroundStroke options of ol/style/Text, so I added it.

Description

• I added a new backgroundFill prop. It's type is Color | ColorLike so it's easy to pass just a color when using the component.
• I added a new backgroundStoke prop. It's type is StrokeOptions. When using the component, we can pass a plain object with proper fields.
• I had to modify the createText function's signature to be able to accept the new props. Originally it accepted a form of Options as argument, but since the 2 new props doesn't match that, I had to change to the type of this component's props.
• Modified the createText function to exclude the 2 new props as well from innerProperties, then add them as needed to Text's options.

Usage:

<ol-style-text
  background-fill="yellow"
  :background-stroke="{ color: 'orange', width: 2 }"
  text="Hello"
/>

I considered alternative approaches to add these 2 text style parameters, but found this one the easiest to implement and fit in the library.

Alternative B would be to add an as-background prop to ol-style-fill and ol-style-stroke, make them check if they are inside an ol-style-text, and depending on these 2 they can decide whether to call setFill/setStroke or setBackgroundFill/setBackgroundStroke. The problem with this is that if the as-background prop is removed, they cannot set the visual style of Text reliably. They can only set it back to default, but if there's another ol-style-fill or ol-style-stroke besides the current one inside an ol-style-text slot, the visual style will be inconsistent.

Alternative C would be to add new ol-style-background-fill and ol-style-background-stroke components which would only set the background fill and stroke, and only inside an ol-style-text. I found this also unnecessary complex and confusing as backgroundFill and backgroundStroke only exist in ol/style/Text in OpenLayers.

However, I see that my current approach has a disadvantage that stroke options are squeezed into one prop.

Please say if you have a different view on how this feature should be added in the library and I can try to update the PR accordingly.

Motivation and Context

OlStyleText already implemented all of ol/style/Text's attributes except these 2, and it would be nice if we could set the background style of the texts too with this library.

How Has This Been Tested?

I tested it by hand during development. I ran npm run docs:dev, navigated to http://localhost:5173/componentsguide/styles/text/ and edited TextDemo to check how the text style reflects to code changes. Adding and changing background-fill and background-stroke props updates the visual style immediately, and removing them reverts the text background style to OL defaults.

Don't think these changes should affect any other parts of the library, but please advise if I have to test anything and how.

Screenshots (if appropriate):

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update
• Other (Tooling, Dependency Updates, etc.)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.

If you added a new component feature (layer, geom, source, etc.), please be sure to update the documentation:

• Add component to output.globals in vite.config.ts
• Create a src/demos/<Component>Demo.vue
• Create a docs/componentsguide/<Category>/<Feature>/index.md containing the Demo and documentation for the component
• Add the docs page to docs/.vitepress/config.ts
• Update the sitemap docs/public/sitemap.xml

[netlify]

✅ Deploy Preview for vue3openlayers ready!

Name	Link
🔨 Latest commit	81dad57
🔍 Latest deploy log	https://app.netlify.com/sites/vue3openlayers/deploys/64bbaedaeda4b80007246896
😎 Deploy Preview	https://deploy-preview-223--vue3openlayers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.