layerchart 2.0.0-next.50 → 2.0.0-next.51

package/dist/components/GeoRaster.svelte

@@ -0,0 +1,311 @@
+<script lang="ts" module>
+  import type { GeoProjection } from 'd3-geo';
+
+  export type GeoRasterPropsWithoutHTML = {
+    /**
+     * The image to reproject. Either:
+     *
+     * - a URL string (loaded via `Image` with `crossOrigin="anonymous"`),
+     * - a preloaded `HTMLImageElement`,
+     * - an `HTMLCanvasElement` (e.g. a stitched tile mosaic),
+     * - or an `ImageBitmap`.
+     *
+     * The image pixel data must be readable (not tainted by CORS). When passing a
+     * URL, the component sets `crossOrigin` on the underlying `Image` — the host
+     * must respond with the appropriate `Access-Control-Allow-Origin` header.
+     */
+    image: string | HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+
+    /**
+     * Projection used by the source image. Pass as an uncalled function, e.g.
+     * `sourceProjection={geoEquirectangular}`.
+     *
+     * When omitted, the source is assumed to be an equirectangular (plate carrée)
+     * image covering the full globe — i.e. `x = ((lon + 180) / 360) * width`,
+     * `y = ((90 - lat) / 180) * height`. This is the common layout for imagery
+     * such as NASA Blue Marble / Black Marble.
+     */
+    sourceProjection?: () => GeoProjection;
+
+    /**
+     * Pixel sampling strategy.
+     *
+     * - `nearest` (default): fastest, slightly blocky at low source resolution.
+     * - `bilinear`: smoother, ~4x slower per pixel.
+     *
+     * @default 'nearest'
+     */
+    interpolate?: 'nearest' | 'bilinear';
+
+    /**
+     * `crossOrigin` attribute applied to the underlying `Image` element when
+     * loading from a URL. Set to `null` to disable.
+     *
+     * @default 'anonymous'
+     */
+    crossOrigin?: string | null;
+
+    /**
+     * Resolution multiplier for the reprojected output, relative to chart CSS
+     * pixels. A value greater than 1 produces a sharper image on HiDPI
+     * displays at the cost of more work per frame.
+     *
+     * @default 1
+     */
+    resolution?: number;
+
+    /**
+     * Disable image smoothing when compositing the reprojected buffer onto the
+     * destination canvas. Useful for a pixel-art look.
+     *
+     * @default false
+     */
+    pixelated?: boolean;
+  };
+
+  export type GeoRasterProps = GeoRasterPropsWithoutHTML;
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { geoPath } from 'd3-geo';
+
+  import { getChartContext } from '../contexts/chart.js';
+  import { getGeoContext } from '../contexts/geo.js';
+  import { getLayerContext } from '../contexts/layer.js';
+
+  let {
+    image,
+    sourceProjection,
+    interpolate = 'nearest',
+    crossOrigin = 'anonymous',
+    resolution = 1,
+    pixelated = false,
+  }: GeoRasterProps = $props();
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+  const layerCtx = getLayerContext();
+
+  type SourcePixels = {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+  };
+
+  let source = $state<SourcePixels | null>(null);
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    // Re-run when `image` changes
+    const src = image;
+
+    let cancelled = false;
+
+    async function load() {
+      let drawable: CanvasImageSource;
+      let sw: number;
+      let sh: number;
+
+      if (typeof src === 'string') {
+        const img = new Image();
+        if (crossOrigin !== null) img.crossOrigin = crossOrigin;
+        img.src = src;
+        try {
+          await img.decode();
+        } catch (err) {
+          console.warn('[GeoRaster] Failed to decode image', err);
+          return;
+        }
+        drawable = img;
+        sw = img.naturalWidth;
+        sh = img.naturalHeight;
+      } else if (src instanceof HTMLImageElement) {
+        try {
+          await src.decode();
+        } catch (err) {
+          console.warn('[GeoRaster] Failed to decode image', err);
+          return;
+        }
+        drawable = src;
+        sw = src.naturalWidth;
+        sh = src.naturalHeight;
+      } else {
+        // HTMLCanvasElement or ImageBitmap — already decoded
+        drawable = src;
+        sw = src.width;
+        sh = src.height;
+      }
+
+      if (cancelled) return;
+      if (!sw || !sh) return;
+
+      const offscreen = document.createElement('canvas');
+      offscreen.width = sw;
+      offscreen.height = sh;
+      const octx = offscreen.getContext('2d', { willReadFrequently: true });
+      if (!octx) return;
+      octx.drawImage(drawable, 0, 0);
+
+      try {
+        const imageData = octx.getImageData(0, 0, sw, sh);
+        untrack(() => {
+          source = { data: imageData.data, width: sw, height: sh };
+        });
+      } catch (err) {
+        console.warn(
+          '[GeoRaster] Unable to read image pixels — the image is likely tainted by CORS',
+          err
+        );
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  function render(dstCtx: CanvasRenderingContext2D) {
+    const src = source;
+    if (!src) return;
+
+    const projection = geo.projection;
+    if (!projection?.invert) return;
+
+    const width = Math.max(1, Math.floor(ctx.width * resolution));
+    const height = Math.max(1, Math.floor(ctx.height * resolution));
+    if (width <= 0 || height <= 0) return;
+
+    const buffer = document.createElement('canvas');
+    buffer.width = width;
+    buffer.height = height;
+    const bctx = buffer.getContext('2d');
+    if (!bctx) return;
+
+    const dstImage = bctx.createImageData(width, height);
+    const dstData = dstImage.data;
+
+    const srcData = src.data;
+    const sw = src.width;
+    const sh = src.height;
+
+    const srcProj = sourceProjection?.();
+    const invert = projection.invert.bind(projection);
+    const bilinear = interpolate === 'bilinear';
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        // Inverse-project destination pixel (in chart-space coordinates) to lon/lat.
+        // When `resolution !== 1`, scale the sample point back to chart coordinates.
+        const lonlat = invert([x / resolution, y / resolution]);
+        if (!lonlat) continue;
+
+        const lon = lonlat[0];
+        const lat = lonlat[1];
+        if (!Number.isFinite(lon) || !Number.isFinite(lat)) continue;
+
+        let sx: number;
+        let sy: number;
+
+        if (srcProj) {
+          const p = srcProj([lon, lat]);
+          if (!p) continue;
+          sx = p[0];
+          sy = p[1];
+        } else {
+          // Equirectangular source (plate carrée) — the default for most
+          // full-globe imagery like NASA Blue Marble.
+          sx = ((lon + 180) / 360) * sw;
+          sy = ((90 - lat) / 180) * sh;
+        }
+
+        if (!(sx >= 0 && sx < sw && sy >= 0 && sy < sh)) continue;
+
+        const di = (y * width + x) * 4;
+
+        if (bilinear) {
+          const x0 = Math.floor(sx);
+          const y0 = Math.floor(sy);
+          const x1 = Math.min(x0 + 1, sw - 1);
+          const y1 = Math.min(y0 + 1, sh - 1);
+          const fx = sx - x0;
+          const fy = sy - y0;
+          const w00 = (1 - fx) * (1 - fy);
+          const w10 = fx * (1 - fy);
+          const w01 = (1 - fx) * fy;
+          const w11 = fx * fy;
+          const i00 = (y0 * sw + x0) * 4;
+          const i10 = (y0 * sw + x1) * 4;
+          const i01 = (y1 * sw + x0) * 4;
+          const i11 = (y1 * sw + x1) * 4;
+          dstData[di] =
+            srcData[i00] * w00 + srcData[i10] * w10 + srcData[i01] * w01 + srcData[i11] * w11;
+          dstData[di + 1] =
+            srcData[i00 + 1] * w00 +
+            srcData[i10 + 1] * w10 +
+            srcData[i01 + 1] * w01 +
+            srcData[i11 + 1] * w11;
+          dstData[di + 2] =
+            srcData[i00 + 2] * w00 +
+            srcData[i10 + 2] * w10 +
+            srcData[i01 + 2] * w01 +
+            srcData[i11 + 2] * w11;
+          dstData[di + 3] =
+            srcData[i00 + 3] * w00 +
+            srcData[i10 + 3] * w10 +
+            srcData[i01 + 3] * w01 +
+            srcData[i11 + 3] * w11;
+        } else {
+          const sxi = sx | 0;
+          const syi = sy | 0;
+          const si = (syi * sw + sxi) * 4;
+          dstData[di] = srcData[si];
+          dstData[di + 1] = srcData[si + 1];
+          dstData[di + 2] = srcData[si + 2];
+          dstData[di + 3] = srcData[si + 3];
+        }
+      }
+    }
+
+    bctx.putImageData(dstImage, 0, 0);
+
+    // Clip to the projection's sphere so pixels outside the visible region
+    // (e.g. the far hemisphere of an orthographic globe) aren't drawn. For
+    // non-clipped projections (mercator, etc.) the sphere still renders as a
+    // finite region covering the full map.
+    dstCtx.save();
+    const pathGen = geoPath(projection, dstCtx);
+    dstCtx.beginPath();
+    pathGen({ type: 'Sphere' });
+    dstCtx.clip();
+
+    const prevSmoothing = dstCtx.imageSmoothingEnabled;
+    if (pixelated) dstCtx.imageSmoothingEnabled = false;
+    dstCtx.drawImage(buffer, 0, 0, ctx.width, ctx.height);
+    if (pixelated) dstCtx.imageSmoothingEnabled = prevSmoothing;
+
+    dstCtx.restore();
+  }
+
+  if (layerCtx === 'canvas') {
+    ctx.registerComponent({
+      name: 'GeoRaster',
+      kind: 'mark',
+      canvasRender: {
+        render,
+        deps: () => [
+          source,
+          geo.projection,
+          ctx.width,
+          ctx.height,
+          interpolate,
+          resolution,
+          pixelated,
+          sourceProjection,
+        ],
+      },
+    });
+  }
+</script>

package/dist/components/GeoRaster.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { GeoProjection } from 'd3-geo';
+export type GeoRasterPropsWithoutHTML = {
+    /**
+     * The image to reproject. Either:
+     *
+     * - a URL string (loaded via `Image` with `crossOrigin="anonymous"`),
+     * - a preloaded `HTMLImageElement`,
+     * - an `HTMLCanvasElement` (e.g. a stitched tile mosaic),
+     * - or an `ImageBitmap`.
+     *
+     * The image pixel data must be readable (not tainted by CORS). When passing a
+     * URL, the component sets `crossOrigin` on the underlying `Image` — the host
+     * must respond with the appropriate `Access-Control-Allow-Origin` header.
+     */
+    image: string | HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+    /**
+     * Projection used by the source image. Pass as an uncalled function, e.g.
+     * `sourceProjection={geoEquirectangular}`.
+     *
+     * When omitted, the source is assumed to be an equirectangular (plate carrée)
+     * image covering the full globe — i.e. `x = ((lon + 180) / 360) * width`,
+     * `y = ((90 - lat) / 180) * height`. This is the common layout for imagery
+     * such as NASA Blue Marble / Black Marble.
+     */
+    sourceProjection?: () => GeoProjection;
+    /**
+     * Pixel sampling strategy.
+     *
+     * - `nearest` (default): fastest, slightly blocky at low source resolution.
+     * - `bilinear`: smoother, ~4x slower per pixel.
+     *
+     * @default 'nearest'
+     */
+    interpolate?: 'nearest' | 'bilinear';
+    /**
+     * `crossOrigin` attribute applied to the underlying `Image` element when
+     * loading from a URL. Set to `null` to disable.
+     *
+     * @default 'anonymous'
+     */
+    crossOrigin?: string | null;
+    /**
+     * Resolution multiplier for the reprojected output, relative to chart CSS
+     * pixels. A value greater than 1 produces a sharper image on HiDPI
+     * displays at the cost of more work per frame.
+     *
+     * @default 1
+     */
+    resolution?: number;
+    /**
+     * Disable image smoothing when compositing the reprojected buffer onto the
+     * destination canvas. Useful for a pixel-art look.
+     *
+     * @default false
+     */
+    pixelated?: boolean;
+};
+export type GeoRasterProps = GeoRasterPropsWithoutHTML;
+declare const GeoRaster: import("svelte").Component<GeoRasterPropsWithoutHTML, {}, "">;
+type GeoRaster = ReturnType<typeof GeoRaster>;
+export default GeoRaster;

package/dist/components/Grid.svelte

@@ -44,6 +44,12 @@
      */
     radialY?: 'circle' | 'linear';
 
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+
     /**
      * Classes to apply to the rendered elements.
      *
@@ -113,6 +119,7 @@
     yTicks: yTicksProp,
     bandAlign = 'center',
     radialY = 'circle',
+    stroke,
     motion,
     transitionIn: transitionInProp,
     transitionInParams = { easing: cubicIn },
@@ -168,6 +175,7 @@
             {y1}
             {x2}
             {y2}
+            {stroke}
             motion={tweenConfig}
             {...splineProps}
             class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
@@ -176,6 +184,7 @@
           <Rule
             {x}
             xOffset={xBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
@@ -189,6 +198,7 @@
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
+          {stroke}
           {motion}
           {...splineProps}
           class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
@@ -205,6 +215,7 @@
           {#if radialY === 'circle'}
             <Circle
               r={ctx.yScale(y) + yBandOffset}
+              {stroke}
               {motion}
               {...splineProps}
               class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
@@ -214,6 +225,7 @@
               data={xTickVals.map((x) => ({ x, y }))}
               x="x"
               y="y"
+              {stroke}
               motion={tweenConfig}
               curve={curveLinearClosed}
               {...splineProps}
@@ -226,6 +238,7 @@
             y1={ctx.yScale(y) + yBandOffset}
             x2={ctx.xRange[1]}
             y2={ctx.yScale(y) + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
@@ -238,6 +251,7 @@
         {#if ctx.radial}
           <Circle
             r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
@@ -250,6 +264,7 @@
             y1={y}
             x2={ctx.xRange[1]}
             y2={y}
+            {stroke}
             {motion}
             {...splineProps}
             class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}

package/dist/components/Grid.svelte.d.ts

@@ -36,6 +36,11 @@ export type GridPropsWithoutHTML<In extends Transition = Transition> = {
      * @default 'circle'
      */
     radialY?: 'circle' | 'linear';
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
     /**
      * Classes to apply to the rendered elements.
      *

package/dist/components/Image.svelte

@@ -514,7 +514,7 @@
         style:object-fit="cover"
         crossorigin={crossOrigin}
         class={cls('lc-image', className)}
-        {...restProps}
+        {...restProps as any}
       />
     {/each}
   {:else}
@@ -532,7 +532,7 @@
       style:object-fit="cover"
       crossorigin={crossOrigin}
       class={cls('lc-image', className)}
-      {...restProps}
+      {...restProps as any}
     />
   {/if}
 {/if}

package/dist/components/Line.svelte

@@ -125,7 +125,13 @@
   import { getLayerContext } from '../contexts/layer.js';
   import { getChartContext } from '../contexts/chart.js';
   import { createDataMotionMap } from '../utils/motion.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, resolveColorProp, resolveGeoDataPair, resolveStyleProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    resolveColorProp,
+    resolveGeoDataPair,
+    resolveStyleProp,
+  } from '../utils/dataProp.js';
   import { getGeoContext } from '../contexts/geo.js';
   import { chartDataArray } from '../utils/common.js';
 
@@ -167,9 +173,7 @@
   const geo = getGeoContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates
   function resolveLine(d: any) {
@@ -233,29 +237,21 @@
   const _initialX2 = initialX2 ?? (typeof x2 === 'number' ? x2 : 0);
   const _initialY2 = initialY2 ?? (typeof y2 === 'number' ? y2 : 0);
 
-  const motionX1 = createMotion(
-    _initialX1,
-    () => (typeof x1 === 'number' ? x1 : 0),
-    motion
-  );
-  const motionY1 = createMotion(
-    _initialY1,
-    () => (typeof y1 === 'number' ? y1 : 0),
-    motion
-  );
-  const motionX2 = createMotion(
-    _initialX2,
-    () => (typeof x2 === 'number' ? x2 : 0),
-    motion
-  );
-  const motionY2 = createMotion(
-    _initialY2,
-    () => (typeof y2 === 'number' ? y2 : 0),
-    motion
-  );
+  const motionX1 = createMotion(_initialX1, () => (typeof x1 === 'number' ? x1 : 0), motion);
+  const motionY1 = createMotion(_initialY1, () => (typeof y1 === 'number' ? y1 : 0), motion);
+  const motionX2 = createMotion(_initialX2, () => (typeof x2 === 'number' ? x2 : 0), motion);
+  const motionY2 = createMotion(_initialY2, () => (typeof y2 === 'number' ? y2 : 0), motion);
 
   const layerCtx = getLayerContext();
 
+  const staticFill = $derived(typeof fill === 'string' ? fill : undefined);
+  const staticStroke = $derived(typeof stroke === 'string' ? stroke : undefined);
+  const staticFillOpacity = $derived(typeof fillOpacity === 'number' ? fillOpacity : undefined);
+  const staticStrokeWidth = $derived(typeof strokeWidth === 'number' ? strokeWidth : undefined);
+  const staticOpacity = $derived(typeof opacity === 'number' ? opacity : undefined);
+  const staticClassName = $derived(typeof className === 'string' ? className : undefined);
+  const staticHeight = $derived(typeof strokeWidth === 'number' ? `${strokeWidth}px` : '1px');
+
   function getStyleOptions(
     styleOverrides: ComputedStylesOptions | undefined,
     itemFill?: string | undefined,
@@ -266,16 +262,29 @@
     itemClass?: string | undefined
   ) {
     return styleOverrides
-      ? merge({ styles: { strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined) } }, styleOverrides)
+      ? merge(
+          {
+            styles: {
+              strokeWidth:
+                itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            },
+          },
+          styleOverrides
+        )
       : {
           styles: {
             fill: itemFill ?? fill,
-            fillOpacity: itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
+            fillOpacity:
+              itemFillOpacity ?? (typeof fillOpacity === 'number' ? fillOpacity : undefined),
             stroke: itemStroke ?? stroke,
-            strokeWidth: itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
+            strokeWidth:
+              itemStrokeWidth ?? (typeof strokeWidth === 'number' ? strokeWidth : undefined),
             opacity: itemOpacity ?? (typeof opacity === 'number' ? opacity : undefined),
           },
-          classes: cls('lc-line', itemClass ?? (typeof className === 'string' ? className : undefined)),
+          classes: cls(
+            'lc-line',
+            itemClass ?? (typeof className === 'string' ? className : undefined)
+          ),
           style: restProps.style as string | undefined,
         };
   }
@@ -292,7 +301,15 @@
         const resolvedStrokeWidth = resolveStyleProp(strokeWidth, item.d);
         const resolvedOpacity = resolveStyleProp(opacity, item.d);
         const resolvedClass = resolveStyleProp(className, item.d);
-        const styleOpts = getStyleOptions(styleOverrides, resolvedFill, resolvedStroke, resolvedFillOpacity, resolvedStrokeWidth, resolvedOpacity, resolvedClass);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
         const pathData = `M ${item.x1},${item.y1} L ${item.x2},${item.y2}`;
         renderPathData(ctx, pathData, styleOpts);
       }
@@ -318,29 +335,32 @@
         color: typeof stroke === 'string' ? stroke : typeof fill === 'string' ? fill : undefined,
       };
     },
-    canvasRender: layerCtx === 'canvas' ? {
-      render,
-      events: {
-        click: restProps.onclick,
-        pointerenter: restProps.onpointerenter,
-        pointermove: restProps.onpointermove,
-        pointerleave: restProps.onpointerleave,
-      },
-      deps: () => [
-        dataMode,
-        dataMode ? resolvedItems : null,
-        motionX1.current,
-        motionY1.current,
-        motionX2.current,
-        motionY2.current,
-        fillKey!.current,
-        strokeKey!.current,
-        strokeWidth,
-        opacity,
-        className,
-        restProps.style,
-      ],
-    } : undefined,
+    canvasRender:
+      layerCtx === 'canvas'
+        ? {
+            render,
+            events: {
+              click: restProps.onclick,
+              pointerenter: restProps.onpointerenter,
+              pointermove: restProps.onpointermove,
+              pointerleave: restProps.onpointerleave,
+            },
+            deps: () => [
+              dataMode,
+              dataMode ? resolvedItems : null,
+              motionX1.current,
+              motionY1.current,
+              motionX2.current,
+              motionY2.current,
+              fillKey!.current,
+              strokeKey!.current,
+              strokeWidth,
+              opacity,
+              className,
+              restProps.style,
+            ],
+          }
+        : undefined,
   });
 </script>
 
@@ -380,15 +400,15 @@
       y1={motionY1.current}
       x2={motionX2.current}
       y2={motionY2.current}
-      fill={fill as string}
-      stroke={stroke as string}
-      fill-opacity={fillOpacity as number}
-      stroke-width={strokeWidth as number}
-      opacity={opacity as number}
+      fill={staticFill}
+      stroke={staticStroke}
+      fill-opacity={staticFillOpacity}
+      stroke-width={staticStrokeWidth}
+      opacity={staticOpacity}
       marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
       marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
       marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-      class={cls('lc-line', className as string)}
+      class={cls('lc-line', staticClassName)}
       {...restProps}
     />
     <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
@@ -431,12 +451,12 @@
       style:left="{motionX1.current}px"
       style:top="{motionY1.current}px"
       style:width="{length}px"
-      style:height="{(strokeWidth as number) ?? 1}px"
+      style:height={staticHeight}
       style:transform="translateY(-50%) rotate({angle}deg)"
       style:transform-origin="0 50%"
-      style:opacity={opacity as number}
-      style:background-color={stroke as string}
-      class={cls('lc-line', className as string)}
+      style:opacity={staticOpacity}
+      style:background-color={staticStroke}
+      class={cls('lc-line', staticClassName)}
       style={restProps.style}
     ></div>
   {/if}