feat(Hull): Add CommonStyleProps (fill, fillOpacity, stroke, strokeOpacity, strokeWidth, opacity) for Canvas layer compatibility

Author: techniq

.changeset/hull-style-props.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Hull): Add CommonStyleProps (fill, fillOpacity, stroke, strokeOpacity, strokeWidth, opacity) for Canvas layer compatibility

docs/src/examples/components/Hull/scatter.svelte

@@ -38,14 +38,13 @@
 		{#each dataByGroup as [group, data]}
 			{@const color = groupColor(group)}
 			<Points r={3} {data} fill={color} />
-			<!-- TODO: handle group color differently to work with Canvas -->
 			<Hull
 				{data}
 				{curve}
-				style="--group-color:{color}"
-				classes={{
-					path: 'pointer-events-none stroke-[var(--group-color)] fill-[var(--group-color)] [fill-opacity:0.1]'
-				}}
+				stroke={color}
+				fill={color}
+				fillOpacity={0.1}
+				class="pointer-events-none"
 			/>
 		{/each}
 	</Layer>

packages/layerchart/src/lib/components/Hull.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Without } from '$lib/utils/types.js';
+  import type { Without, CommonStyleProps } from '$lib/utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { ComponentProps } from 'svelte';
 
@@ -47,7 +47,7 @@
      * @bindable
      */
     ref?: SVGGElement;
-  };
+  } & CommonStyleProps;
 
   export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
@@ -79,6 +79,12 @@
     onpointermove,
     onclick,
     onpointerleave,
+    fill,
+    fillOpacity,
+    stroke,
+    strokeOpacity,
+    strokeWidth,
+    opacity,
     class: className,
     ref: refProp = $bindable(),
     ...restProps
@@ -112,6 +118,12 @@
     <GeoPath
       geojson={polygon}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
@@ -125,6 +137,12 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
+      {fill}
+      {fillOpacity}
+      {stroke}
+      {strokeOpacity}
+      {strokeWidth}
+      {opacity}
       class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}