feat(ol-style-fill): correctly setup conic gradient (#375)

Author: d-koppenhagen

docs/componentsguide/styles/fill/index.md

@@ -9,10 +9,10 @@ Use it inside ol-style, ol-style-circle, ol-style-text along with ol-style-strok
 ## Demo
 
 <script setup>
-import MultiPoint from "@demos/MultiPoint.vue"
+import PolygonDemo from "@demos/PolygonDemo.vue"
 </script>
 <ClientOnly>
-<MultiPoint />
+<PolygonDemo />
 </ClientOnly>
 
 ## Setup
@@ -29,23 +29,31 @@ Styling a feature
 
 ::: code-group
 
-<<< ../../../../src/demos/MultiPoint.vue
+<<< ../../../../src/demos/PolygonDemo.vue
 
 :::
 
 ## Properties
 
+You need to pass either a `color` or a `gradient`.
+
 ### color
 
 - **Type**: `Number`
 
 The color either in hexadecimal or as RGB array with red, green, and blue values between 0 and 255 and alpha between 0 and 1 inclusive.
 
 ### gradient
-- **Type**: `Object`
-```
+
+- **Type**: `LinearGradient | RadialGradient | ConicGradient`
+
+::: details Details for the gradient configuration
+
+#### `LinearGradient`
+
+```jsonc
 {
-  "type": "linear", // Type of gradient. Here, it's a linear gradient.
+  "type": "linear",
   "x0": 0, // x-coordinate of the starting point. Indicates the horizontal position where the gradient starts.
   "y0": 0, // y-coordinate of the starting point. Indicates the vertical position where the gradient starts.
   "x1": 0, // x-coordinate of the ending point. This is the horizontal position where the gradient ends. It’s the same as x0, meaning the gradient is vertical.
@@ -56,9 +64,13 @@ The color either in hexadecimal or as RGB array with red, green, and blue values
     [1, "green"] // End color at position 1. The color at the end of the gradient (y = 256) is green.
   ]
 }
+```
+
+#### `RadialGradient`
 
+```jsonc
 {
-  "type": "radial", // Type of gradient. Here, it's a radial gradient.
+  "type": "radial",
   "x0": 128, // x-coordinate of the starting circle's center. Specifies the horizontal position of the starting circle.
   "y0": 128, // y-coordinate of the starting circle's center. Specifies the vertical position of the starting circle.
   "r0": 0, // Radius of the starting circle. Here, it's 0, meaning the gradient starts at a single point.
@@ -71,5 +83,22 @@ The color either in hexadecimal or as RGB array with red, green, and blue values
     [1, "white"] // Color at the edge of the gradient (r = 128). The color at the outer edge of the radial gradient is white.
   ]
 }
+```
+
+#### `ConicGradient`
+
+```jsonc
+{
+  "type": "conic",
+  "x": 0, // x-axis coordinate of the center of the gradient.
+  "y": 0, // y-axis coordinate of the center of the gradient.
+  "startAngle": 0, // The angle at which to begin the gradient, in radians. The angle starts from a line going horizontally right from the center, and proceeds clockwise.
+  "colorStops": [
+    [0, "red"], // Start color at position 0. The color at the beginning of the gradient is red.
+    [0.5, "yellow"], // Middle color at position 0.5. The color at the midpoint of the gradient (y = 128) is yellow.
+    [1, "green"] // End color at position 1. The color at the end of the gradient (y = 256) is green.
+  ]
+}
+```
 
-```
+:::

src/components/styles/OlStyleFill.vue

@@ -13,7 +13,7 @@ import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties
 type GradientColorStop = [number, string];
 
 // Define the type for linear gradients
-type LinearGradient = {
+export type LinearGradient = {
   type: "linear";
   x0: number;
   y0: number;
@@ -23,7 +23,7 @@ type LinearGradient = {
 };
 
 // Define the type for radial gradients
-type RadialGradient = {
+export type RadialGradient = {
   type: "radial";
   x0: number;
   y0: number;
@@ -35,18 +35,16 @@ type RadialGradient = {
 };
 
 // Define the type for conic gradients
-type ConicGradient = {
+export type ConicGradient = {
   type: "conic";
-  cx: number;
-  cy: number;
-  radius: number;
+  x: number;
+  y: number;
   startAngle: number;
-  endAngle: number;
   colorStops: GradientColorStop[];
 };
 
 // Define a union type for all gradient types
-type Gradient = LinearGradient | RadialGradient | ConicGradient;
+export type Gradient = LinearGradient | RadialGradient | ConicGradient;
 
 // Define the props type for the component
 const props = defineProps<{
@@ -100,8 +98,11 @@ const createGradientFill = (
         );
         break;
       case "conic":
-        // Conic gradients are not directly supported by the Canvas API, use a linear gradient as a fallback
-        grad = ctx.createLinearGradient(0, 0, width, height);
+        grad = ctx.createConicGradient(
+          gradient.x,
+          gradient.y,
+          gradient.startAngle,
+        );
         break;
       default:
         throw new Error("Unsupported gradient type");

src/components/styles/index.ts

@@ -9,6 +9,12 @@ import OlStyleFlowline from "./OlStyleFlowline.vue";
 import type { FeatureLike } from "ol/Feature";
 import type { Style } from "ol/style";
 import type { Vue3OpenlayersGlobalOptions } from "@/types";
+import type {
+  Gradient,
+  ConicGradient,
+  RadialGradient,
+  LinearGradient,
+} from "./OlStyleFill.vue";
 
 type OverrideStyleFunction = (
   feature: FeatureLike,
@@ -46,4 +52,8 @@ export {
   OlStyleFlowline,
   OlStyleCircle,
   type OverrideStyleFunction,
+  type Gradient,
+  type ConicGradient,
+  type RadialGradient,
+  type LinearGradient,
 };

src/demos/PolygonDemo.vue

@@ -89,19 +89,37 @@
             <ol-style-fill :gradient="radialGradient" />
           </ol-style>
         </ol-feature>
+        <ol-feature>
+          <ol-geom-polygon
+            :coordinates="[
+              [
+                [-98.8435, 19.680586],
+                [-98.838, 19.68098],
+                [-98.835, 19.68522],
+                [-98.843, 19.685667],
+                [-98.835, 19.683586],
+              ],
+            ]"
+          ></ol-geom-polygon>
+          <ol-style>
+            <ol-style-fill :gradient="conicGradient" />
+          </ol-style>
+        </ol-feature>
       </ol-source-vector>
     </ol-vector-layer>
   </ol-map>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ref } from "vue";
+import type { LinearGradient, RadialGradient } from "vue3-openlayers";
+import type { ConicGradient } from "@components/styles";
 
 const center = ref([-98.8449, 19.6869]);
 const projection = ref("EPSG:4326");
 const zoom = ref(15);
 
-const linearGradient = {
+const linearGradient: LinearGradient = {
   type: "linear",
   x0: 0,
   y0: 0,
@@ -114,7 +132,7 @@ const linearGradient = {
   ],
 };
 
-const radialGradient = {
+const radialGradient: RadialGradient = {
   type: "radial",
   x0: 128,
   y0: 128,
@@ -128,4 +146,18 @@ const radialGradient = {
     [1, "white"], // Edge color
   ],
 };
+
+const conicGradient: ConicGradient = {
+  type: "conic",
+  x: 100,
+  y: 100,
+  startAngle: 100,
+  colorStops: [
+    [0, "red"],
+    [0.25, "orange"],
+    [0.5, "yellow"],
+    [0.75, "green"],
+    [1, "blue"],
+  ],
+};
 </script>

tsconfig.json

@@ -28,7 +28,8 @@
     "paths": {
       "@/*": ["./src/*"],
       "@components/*": ["./src/components/*"],
-      "@demos/*": ["./src/demos/*"]
+      "@demos/*": ["./src/demos/*"],
+      "vue3-openlayers/*": ["src/*"]
     },
     "checkJs": false
   },