docs(ol-style-flowline): add missing documentation page

Author: d-koppenhagen

docs/.vitepress/config.ts

@@ -225,6 +225,10 @@ export default defineConfig({
                 text: "ol-style-fill",
                 link: "/componentsguide/styles/fill/",
               },
+              {
+                text: "ol-style-flowline",
+                link: "/componentsguide/styles/flowline/",
+              },
               {
                 text: "ol-style-icon",
                 link: "/componentsguide/styles/icon/",

docs/componentsguide/styles/flowline/index.md

@@ -0,0 +1,40 @@
+# ol-style-flowline
+
+> Style of a flowline in a vector layer
+
+<script setup>
+import FlowLineDemo from "@demos/FlowLineDemo.vue"
+</script>
+<ClientOnly>
+<FlowLineDemo />
+</ClientOnly>
+
+## Usage
+
+::: code-group
+
+<<< ../../../../src/demos/FlowLineDemo.vue
+
+:::
+
+## Properties
+
+### Props from OpenLayers
+
+Properties are passed-trough from OpenLayers directly.
+Their types and default values can be checked-out [in the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_OSM-OSM.html).
+Only some properties deviate caused by reserved keywords from Vue / HTML.
+This deviating props are described in the section below.
+
+### Deviating Properties
+
+### `overrideStyleFunction`
+
+- **Type**: `OverrideStyleFunction`
+
+Change / override the applied style.
+The function has three arguments:
+
+1. `feature: FeatureLike`: The feature the style is related to.
+2. `currentStyle: Style`: The current style that's applied (you can override it here)
+3. `resolution?: number`: A number representing the view's resolution

docs/public/sitemap.xml

@@ -197,6 +197,11 @@
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>
   <priority>0.80</priority>
 </url>
+<url>
+  <loc>https://vue3openlayers.netlify.app/componentsguide/styles/flowline/</loc>
+  <lastmod>2023-07-06T23:00:00+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
 <url>
   <loc>https://vue3openlayers.netlify.app/componentsguide/styles/icon/</loc>
   <lastmod>2021-08-15T21:05:05+00:00</lastmod>

src/components/styles/OlStyleFlowline.vue

@@ -8,34 +8,32 @@
 import type { Ref } from "vue";
 import { inject, watch, onUnmounted, onMounted, computed } from "vue";
 
-import FlowLine from "ol-ext/style/FlowLine";
+import FlowLine, { type Options } from "ol-ext/style/FlowLine";
 import Draw from "ol/interaction/Draw";
 import Modify from "ol/interaction/Modify";
-import type { ColorLike } from "ol/colorlike";
 import type Feature from "ol/Feature";
-import type Style from "ol/style/Style";
+import Style from "ol/style/Style";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
-import type { StyleFunction, StyleLike } from "ol/style/Style";
+import type { StyleLike } from "ol/style/Style";
+import type { OverrideStyleFunction } from ".";
+import type { Layer } from "ol/layer";
+import type { Select } from "ol/interaction";
 
 const props = withDefaults(
-  defineProps<{
-    color?: ColorLike | ((feature: Feature, step: number) => ColorLike);
-    color2?: ColorLike;
-    width?: number | ((feature: Feature, step: number) => number);
-    width2?: number;
-    arrow?: number;
-    arrowColor?: string;
-    lineCap: CanvasRenderingContext2D["lineCap"];
-    overrideStyleFunction?: (...args: unknown[]) => unknown;
-  }>(),
+  defineProps<
+    Options & {
+      lineCap?: CanvasLineCap;
+      overrideStyleFunction?: OverrideStyleFunction;
+    }
+  >(),
   {
     visible: true,
     lineCap: "butt",
     arrowSize: 16,
   }
 );
 
-const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
+const styledObj = inject<Ref<Draw | Modify | Select | Feature | Layer> | null>(
   "stylable",
   null
 );
@@ -44,60 +42,51 @@ const { properties } = usePropsAsObjectProperties(props);
 
 const style = computed(() => new FlowLine(properties));
 
-const setStyle = (val: StyleLike | null) => {
-  if (styledObj?.value instanceof Draw || styledObj?.value instanceof Modify) {
-    styledObj?.value?.getOverlay().setStyle(val);
-    styledObj?.value?.dispatchEvent("styleChanged");
+const setStyle = (val: StyleLike) => {
+  if (!styledObj?.value) {
+    return;
+  }
+  if (styledObj.value instanceof Draw || styledObj?.value instanceof Modify) {
+    styledObj.value.getOverlay().setStyle(val);
+    styledObj.value.dispatchEvent("styleChanged");
     return;
   }
   try {
     // @ts-ignore
-    styledObj?.value?.setStyle(val);
-    // @ts-ignore
-    styledObj?.value?.changed();
-    // @ts-ignore
+    styledObj.value.setStyle(val);
+    styledObj.value.changed();
     styledObj?.value?.dispatchEvent("styleChanged");
   } catch (error) {
     if (styledObj?.value) {
       // @ts-ignore
       styledObj.value.style_ = val;
       // @ts-ignore
       styledObj.value.values_.style = val;
-      // @ts-ignore
       styledObj.value?.changed();
-      // @ts-ignore
       styledObj.value?.dispatchEvent("styleChanged");
     }
   }
 };
 
 const styleFunc = computed<StyleLike>(() => {
-  return (feature) => {
-    if (properties.overrideStyleFunction != null) {
-      properties.overrideStyleFunction(feature, style.value);
+  return (feature, resolution) => {
+    if (properties.overrideStyleFunction) {
+      properties.overrideStyleFunction(feature, style.value, resolution);
     }
     return style.value;
   };
 });
 
 watch(properties, () => {
-  if (properties.overrideStyleFunction == null) {
-    setStyle(style.value);
-  } else {
-    setStyle(styleFunc.value);
-  }
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value);
 });
 
 onMounted(() => {
-  if (properties.overrideStyleFunction == null) {
-    setStyle(style.value);
-  } else {
-    setStyle(styleFunc.value);
-  }
+  setStyle(properties.overrideStyleFunction ? styleFunc.value : style.value);
 });
 
 onUnmounted(() => {
-  setStyle(null);
+  setStyle(new Style());
 });
 
 defineExpose({

src/demos/FlowLineDemo.vue

@@ -0,0 +1,63 @@
+<template>
+  <ol-map ref="map" style="height: 400px">
+    <ol-view
+      ref="view"
+      :center="center"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer title="OSM">
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-vector-layer>
+      <ol-source-vector>
+        <ol-feature ref="animationPath">
+          <ol-geom-line-string :coordinates="path"></ol-geom-line-string>
+          <ol-style-flowline
+            color="red"
+            color2="yellow"
+            :width="10"
+            :width2="10"
+            :arrow="1"
+          />
+        </ol-feature>
+        <ol-animation-path
+          v-if="animationPath"
+          :path="animationPath?.feature"
+          :duration="4000"
+          :repeat="10"
+        >
+          <ol-feature>
+            <ol-geom-point :coordinates="path[0]"></ol-geom-point>
+            <ol-style>
+              <ol-style-circle :radius="10">
+                <ol-style-fill color="blue"></ol-style-fill>
+                <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
+              </ol-style-circle>
+            </ol-style>
+          </ol-feature>
+        </ol-animation-path>
+      </ol-source-vector>
+    </ol-vector-layer>
+  </ol-map>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type AnimationPath from "ol-ext/featureanimation/Path";
+
+const center = ref([29, 44.5]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6);
+const animationPath = ref<{ feature: AnimationPath } | null>(null);
+
+const path = ref([
+  [25.6064453125, 44.73302734375001],
+  [27.759765625, 44.75500000000001],
+  [28.287109375, 43.32677734375001],
+  [30.55029296875, 46.40294921875001],
+  [31.69287109375, 43.04113281250001],
+]);
+</script>