react-native-livechart 3.5.0 → 3.5.1

package/dist/components/MarkerOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkerOverlay.d.ts","sourceRoot":"","sources":["../../src/components/MarkerOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAejD,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,MAAM,EACN,YAAY,EACb,MAAM,UAAU,CAAC;AA8FlB;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,MAAM,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IACrC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;CAC1C,2CAyHA"}
+{"version":3,"file":"MarkerOverlay.d.ts","sourceRoot":"","sources":["../../src/components/MarkerOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAejD,OAAO,KAAK,EACV,gBAAgB,EAChB,cAAc,EACd,MAAM,EACN,YAAY,EACb,MAAM,UAAU,CAAC;AA8FlB;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAM,EACN,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;IAC/B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,MAAM,CAAC,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IACrC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;CAC1C,2CAgIA"}

package/dist/draw/markerAtlas.d.ts

@@ -22,7 +22,9 @@ export declare function isConnectorMarker(m: Marker): boolean;
 export declare function markerAppearanceSig(m: Marker): string;
 /** One packed glyph in the atlas image: its source rect + box size. */
 export interface AtlasCell {
+    /** Source rect into the (hi-res) atlas texture, in **device** pixels. */
     rect: SkRect;
+    /** Logical (DPR-independent) cell width/height, used to center the blit. */
     w: number;
     h: number;
 }
@@ -31,6 +33,13 @@ export interface MarkerAtlas {
     image: SkImage | null;
     /** appearance-signature → cell. */
     cells: Record<string, AtlasCell>;
+    /**
+     * Device-pixel scale the texture was rasterized at. Cell `rect`s are in
+     * texture (device) pixels, while `w`/`h` stay in logical pixels — so the
+     * per-frame blit must apply an `RSXform` scale of `1 / scale` to map the
+     * hi-res cell back to its logical on-canvas size. See `buildMarkerAtlas`.
+     */
+    scale: number;
 }
 /**
  * Rasterize every distinct marker appearance into a single packed atlas image,
@@ -39,6 +48,12 @@ export interface MarkerAtlas {
  *
  * Connector kinds (see `isConnectorMarker`) are skipped — they render via a
  * self-projecting fallback component.
+ *
+ * The texture is rasterized at `scale` (the screen's device-pixel ratio) so the
+ * cells carry enough resolution to stay crisp when blitted onto a retina canvas
+ * — every glyph is recorded in logical coords then magnified by `scale`, and the
+ * per-frame `drawAtlas` shrinks it back with an `RSXform` scale of `1 / scale`.
+ * Without this the logical-sized texture is upscaled ~3× on iOS and looks blurry.
  */
-export declare function buildMarkerAtlas(markers: Marker[], palette: LiveChartPalette, font: SkFont): MarkerAtlas;
+export declare function buildMarkerAtlas(markers: Marker[], palette: LiveChartPalette, font: SkFont, scale?: number): MarkerAtlas;
 //# sourceMappingURL=markerAtlas.d.ts.map

package/dist/draw/markerAtlas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markerAtlas.d.ts","sourceRoot":"","sources":["../../src/draw/markerAtlas.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,MAAM,EACX,KAAK,OAAO,EAEZ,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAErE,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAQpC,iEAAiE;AACjE,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAaR;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAOpD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED,uEAAuE;AACvE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAW;IAC1B,8EAA8E;IAC9E,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CAClC;AAuKD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EAAE,EACjB,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,GACX,WAAW,CAsCb"}
+{"version":3,"file":"markerAtlas.d.ts","sourceRoot":"","sources":["../../src/draw/markerAtlas.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,MAAM,EACX,KAAK,OAAO,EAEZ,KAAK,MAAM,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAErE,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAQpC,iEAAiE;AACjE,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAaR;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAOpD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED,uEAAuE;AACvE,MAAM,WAAW,SAAS;IACxB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAW;IAC1B,8EAA8E;IAC9E,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACjC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAuKD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EAAE,EACjB,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,MAAM,EACZ,KAAK,SAAI,GACR,WAAW,CAgDb"}

package/package.json

@@ -68,5 +68,5 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "3.5.0"
+  "version": "3.5.1"
 }

package/src/components/MarkerOverlay.tsx

@@ -6,6 +6,7 @@ import {
   type SkFont,
 } from "@shopify/react-native-skia";
 import { useMemo, useRef, useState } from "react";
+import { PixelRatio } from "react-native";
 import {
   useDerivedValue,
   useAnimatedReaction,
@@ -189,13 +190,19 @@ export function MarkerOverlay({
   }, [snapshot]);
   // Cells bake in resolved colors; include the palette fields they depend on.
   const paletteKey = `${palette.bgRgb.join(",")}|${palette.line}|${palette.refLine}|${palette.dotUp}|${palette.refLabel}`;
+  // Rasterize at the screen's device-pixel ratio so sprites stay crisp on
+  // retina canvases instead of being upscaled from a logical-sized texture.
+  const dpr = PixelRatio.get();
   const atlas = useMemo(
-    () => buildMarkerAtlas(snapshot, palette, font),
+    () => buildMarkerAtlas(snapshot, palette, font, dpr),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- appearanceKey/paletteKey capture the inputs that change cell pixels
-    [appearanceKey, paletteKey, font],
+    [appearanceKey, paletteKey, font, dpr],
   );
   const cells: Record<string, AtlasCell> = atlas.cells;
   const atlasImage = atlas.image;
+  // Inverse of the texture's device-pixel scale; shrinks each hi-res cell back
+  // to its logical on-canvas size in the per-frame blit.
+  const invScale = 1 / atlas.scale;
 
   // One pooled, ping-ponged projection buffer reused every frame (no per-frame
   // array allocation for the projection itself).
@@ -240,15 +247,16 @@ export function MarkerOverlay({
         if (isConnectorMarker(m)) continue;
         const cell = cells[markerAppearanceSig(m)];
         if (!cell) continue;
-        // Center the cell on the projected point (RSXform: scale 1, no rotation).
+        // Center the cell on the projected point. The cell's source rect is in
+        // device pixels, so scale by 1/dpr to land it at its logical size.
         transforms.push(
-          Skia.RSXform(1, 0, pt.x - cell.w / 2, pt.y - cell.h / 2),
+          Skia.RSXform(invScale, 0, pt.x - cell.w / 2, pt.y - cell.h / 2),
         );
         sprites.push(cell.rect);
       }
       return { transforms, sprites };
     },
-    [cells, markers, engine, padding, series, lineData],
+    [cells, invScale, markers, engine, padding, series, lineData],
   );
   const transforms = useDerivedValue(() => atlasData.get().transforms, [atlasData]);
   const sprites = useDerivedValue(() => atlasData.get().sprites, [atlasData]);

package/src/draw/markerAtlas.ts

@@ -74,7 +74,9 @@ export function markerAppearanceSig(m: Marker): string {
 
 /** One packed glyph in the atlas image: its source rect + box size. */
 export interface AtlasCell {
+  /** Source rect into the (hi-res) atlas texture, in **device** pixels. */
   rect: SkRect;
+  /** Logical (DPR-independent) cell width/height, used to center the blit. */
   w: number;
   h: number;
 }
@@ -84,9 +86,16 @@ export interface MarkerAtlas {
   image: SkImage | null;
   /** appearance-signature → cell. */
   cells: Record<string, AtlasCell>;
+  /**
+   * Device-pixel scale the texture was rasterized at. Cell `rect`s are in
+   * texture (device) pixels, while `w`/`h` stay in logical pixels — so the
+   * per-frame blit must apply an `RSXform` scale of `1 / scale` to map the
+   * hi-res cell back to its logical on-canvas size. See `buildMarkerAtlas`.
+   */
+  scale: number;
 }
 
-const EMPTY_ATLAS: MarkerAtlas = { image: null, cells: {} };
+const EMPTY_ATLAS: MarkerAtlas = { image: null, cells: {}, scale: 1 };
 
 function fillPaint(color: string): SkPaint {
   const p = Skia.Paint();
@@ -258,11 +267,18 @@ function cellSpec(m: Marker, palette: LiveChartPalette, font: SkFont): CellSpec
  *
  * Connector kinds (see `isConnectorMarker`) are skipped — they render via a
  * self-projecting fallback component.
+ *
+ * The texture is rasterized at `scale` (the screen's device-pixel ratio) so the
+ * cells carry enough resolution to stay crisp when blitted onto a retina canvas
+ * — every glyph is recorded in logical coords then magnified by `scale`, and the
+ * per-frame `drawAtlas` shrinks it back with an `RSXform` scale of `1 / scale`.
+ * Without this the logical-sized texture is upscaled ~3× on iOS and looks blurry.
  */
 export function buildMarkerAtlas(
   markers: Marker[],
   palette: LiveChartPalette,
   font: SkFont,
+  scale = 1,
 ): MarkerAtlas {
   const seen = new Set<string>();
   const specs: { sig: string; spec: CellSpec }[] = [];
@@ -282,11 +298,16 @@ export function buildMarkerAtlas(
     totalW += specs[i].spec.w;
     if (specs[i].spec.h > maxH) maxH = specs[i].spec.h;
   }
+  // Logical packed size; the texture itself is `scale`× larger in each axis.
   const W = Math.max(1, Math.ceil(totalW));
   const H = Math.max(1, Math.ceil(maxH));
+  const texW = Math.max(1, Math.ceil(W * scale));
+  const texH = Math.max(1, Math.ceil(H * scale));
 
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, W, H));
+  const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, texW, texH));
+  // Magnify so glyphs drawn in logical coords fill the hi-res texture.
+  canvas.scale(scale, scale);
   const cells: Record<string, AtlasCell> = {};
   let x = 0;
   for (let i = 0; i < specs.length; i++) {
@@ -295,10 +316,15 @@ export function buildMarkerAtlas(
     canvas.translate(x, 0);
     spec.draw(canvas, spec.w / 2, H / 2);
     canvas.restore();
-    cells[sig] = { rect: Skia.XYWHRect(x, 0, spec.w, H), w: spec.w, h: H };
+    // Source rect indexes the device-pixel texture; w/h stay logical.
+    cells[sig] = {
+      rect: Skia.XYWHRect(x * scale, 0, spec.w * scale, texH),
+      w: spec.w,
+      h: H,
+    };
     x += spec.w;
   }
   const picture = recorder.finishRecordingAsPicture();
-  const image = drawAsImageFromPicture(picture, { width: W, height: H });
-  return { image, cells };
+  const image = drawAsImageFromPicture(picture, { width: texW, height: texH });
+  return { image, cells, scale };
 }