radiant-charts-core 0.2.0

package/src/index.ts

@@ -0,0 +1,31 @@
+export { default as RadiantChart } from './RadiantChart';
+export type {
+  RadiantChartOptions,
+  AnimationOptions,
+  DataLabelOptions,
+  RadiantChartHandle,
+  DropShadow,
+  MarkerOptions,
+  MarkerShape,
+} from './RadiantChart';
+export { default as ResponsiveContainer } from './ResponsiveContainer';
+
+// ── Declarative JSX API ───────────────────────────────────────────────────────
+export {
+  Chart,
+  Bar, Line, Area, Scatter, Pie, Donut,
+  XAxis, YAxis, YAxisRight, Title, Subtitle, Legend,
+  Tooltip,
+} from './Declarative';
+export type { ChartProps, AxisProps, TitleProps, LegendProps, TooltipProps } from './Declarative';
+
+export { useChartTooltip } from './tooltip/useChartTooltip';
+export type { ChartTooltipContext } from './tooltip/useChartTooltip';
+export type {
+  TooltipOptions,
+  TooltipState,
+  TooltipDatumEntry,
+  TooltipTrigger,
+  TooltipMode,
+  TooltipPositionMode,
+} from './tooltip/types';

package/src/scale/Scale.ts

@@ -0,0 +1,99 @@
+/**
+ * Base Scale interface.
+ */
+export interface Scale<D, R> {
+  domain: D[];
+  range: R[];
+  convert(value: D): R;
+  invert(value: R): D;
+  ticks?(count?: number): D[];
+}
+
+/**
+ * LinearScale: domain [min, max] to range [minPixel, maxPixel].
+ */
+export class LinearScale implements Scale<number, number> {
+  domain: number[] = [0, 1];
+  range: number[] = [0, 1];
+
+  convert(value: number): number {
+    const [d0, d1] = this.domain;
+    const [r0, r1] = this.range;
+    if (d1 === d0) return r0;
+    return r0 + ((value - d0) / (d1 - d0)) * (r1 - r0);
+  }
+
+  invert(value: number): number {
+    const [d0, d1] = this.domain;
+    const [r0, r1] = this.range;
+    if (r1 === r0) return d0;
+    return d0 + ((value - r0) / (r1 - r0)) * (d1 - d0);
+  }
+
+  /**
+   * Generates "nice" ticks for the axis.
+   */
+  ticks(count: number = 5): number[] {
+    const [d0, d1] = this.domain;
+    const step = (d1 - d0) / count;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(step)));
+    const normalizedStep = step / magnitude;
+
+    let niceStep;
+    if (normalizedStep < 1.5) niceStep = 1;
+    else if (normalizedStep < 3) niceStep = 2;
+    else if (normalizedStep < 7) niceStep = 5;
+    else niceStep = 10;
+
+    const finalStep = niceStep * magnitude;
+    const start = Math.ceil(d0 / finalStep) * finalStep;
+    const end = Math.floor(d1 / finalStep) * finalStep;
+
+    const ticks = [];
+    for (let t = start; t <= end; t += finalStep) {
+      ticks.push(t);
+    }
+    return ticks;
+  }
+}
+
+/**
+ * BandScale: For categorical data.
+ */
+export class BandScale implements Scale<string, number> {
+  domain: string[] = [];
+  range: number[] = [0, 1];
+  padding: number = 0.1;
+
+  convert(value: string): number {
+    const index = this.domain.indexOf(value);
+    if (index === -1) return 0;
+    
+    const [r0, r1] = this.range;
+    const step = (r1 - r0) / this.domain.length;
+    return r0 + index * step + (step * this.padding) / 2;
+  }
+
+  invert(value: number): string {
+    const [r0, r1] = this.range;
+    const step = (r1 - r0) / this.domain.length;
+    const index = Math.floor((value - r0) / step);
+    return this.domain[index] || '';
+  }
+
+  getBandwidth(): number {
+    const [r0, r1] = this.range;
+    const step = (r1 - r0) / this.domain.length;
+    return Math.abs(step * (1 - this.padding));
+  }
+
+  ticks(): string[] {
+    return this.domain;
+  }
+}
+
+export function safeBandwidth(scale: Scale<any, number> | BandScale): number {
+  return typeof (scale as any).getBandwidth === 'function'
+    ? (scale as BandScale).getBandwidth()
+    : 0;
+}

package/src/scene/Node.ts

@@ -0,0 +1,183 @@
+export interface BBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Base Node class for the Radiant Chart Scene Graph.
+ */
+export abstract class Node {
+  id: string = Math.random().toString(36).substr(2, 9);
+  x: number = 0;
+  y: number = 0;
+  visible: boolean = true;
+  opacity: number = 1;
+  translation: { x: number; y: number } = { x: 0, y: 0 };
+  rotation: number = 0; // Rotation in radians
+  scaling: { x: number; y: number } = { x: 1, y: 1 };
+  
+  parent: Node | null = null;
+  children: Node[] = [];
+
+  // Hit testing properties
+  pointerEvents: boolean = true;
+
+  // Clipping
+  clipRect: BBox | null = null;
+
+  // Data mapping
+  datum: any = null;
+  seriesId: string = '';
+
+  /**
+   * Optional drop shadow applied to this node before its shape paints.
+   * Maps to canvas `shadow*` properties; reset automatically by the
+   * surrounding save/restore so it never bleeds onto siblings.
+   */
+  shadow: { color?: string; blur?: number; offsetX?: number; offsetY?: number } | null = null;
+
+  constructor() {}
+
+  /**
+   * Adds a child node.
+   */
+  add(child: Node) {
+    if (child.parent) {
+      child.parent.remove(child);
+    }
+    child.parent = this;
+    this.children.push(child);
+  }
+
+  /**
+   * Removes a child node.
+   */
+  remove(child: Node) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+      child.parent = null;
+    }
+  }
+
+  /**
+   * Clears all children.
+   */
+  clear() {
+    this.children.forEach(child => child.parent = null);
+    this.children = [];
+  }
+
+  /**
+   * Renders the node and its children.
+   */
+  render(ctx: CanvasRenderingContext2D) {
+    if (!this.visible || this.opacity === 0) return;
+
+    // Optimization: only save/restore if we have transformations, opacity change, or clipping.
+    // This avoids overhead for thousands of simple nodes in large datasets.
+    const hasTransform = (this.translation.x !== 0 || this.translation.y !== 0) || 
+                         (this.rotation !== 0) || 
+                         (this.scaling.x !== 1 || this.scaling.y !== 1);
+    const hasShadow = this.shadow !== null;
+    const hasEffect = (this.opacity !== 1) || (this.clipRect !== null) || hasShadow;
+
+    if (!hasTransform && !hasEffect) {
+      this.renderShape(ctx);
+      for (const child of this.children) {
+        child.render(ctx);
+      }
+      return;
+    }
+
+    ctx.save();
+    
+    // Apply transformations
+    if (this.translation.x !== 0 || this.translation.y !== 0) {
+      ctx.translate(this.translation.x, this.translation.y);
+    }
+    if (this.rotation !== 0) {
+      ctx.rotate(this.rotation);
+    }
+    if (this.scaling.x !== 1 || this.scaling.y !== 1) {
+      ctx.scale(this.scaling.x, this.scaling.y);
+    }
+    if (this.opacity !== 1) {
+      ctx.globalAlpha *= this.opacity;
+    }
+
+    // Apply clipping if defined
+    if (this.clipRect) {
+      ctx.beginPath();
+      ctx.rect(this.clipRect.x, this.clipRect.y, this.clipRect.width, this.clipRect.height);
+      ctx.clip();
+    }
+
+    // Apply drop shadow before painting this node. We deliberately reset
+    // before recursing into children so the shadow does not double-apply
+    // to nested shapes (the canvas shadowColor is sticky across draw calls).
+    if (this.shadow) {
+      ctx.shadowColor   = this.shadow.color   ?? 'rgba(0,0,0,0.25)';
+      ctx.shadowBlur    = this.shadow.blur    ?? 4;
+      ctx.shadowOffsetX = this.shadow.offsetX ?? 0;
+      ctx.shadowOffsetY = this.shadow.offsetY ?? 2;
+    }
+
+    // Abstract method to render the actual shape
+    this.renderShape(ctx);
+
+    if (this.shadow) {
+      ctx.shadowColor   = 'rgba(0,0,0,0)';
+      ctx.shadowBlur    = 0;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+    }
+
+    // Render children
+    for (const child of this.children) {
+      child.render(ctx);
+    }
+
+    ctx.restore();
+  }
+
+  /**
+   * Hit testing: Returns the topmost node at (x, y) coordinates relative to this node.
+   */
+  pickNode(x: number, y: number): Node | null {
+    if (!this.visible || !this.pointerEvents) return null;
+
+    // Transform coordinates for children
+    const localX = (x - this.translation.x) / this.scaling.x;
+    const localY = (y - this.translation.y) / this.scaling.y;
+    // Note: Rotation not handled in coordinate transform yet
+
+    // Check children in reverse order (topmost first)
+    for (let i = this.children.length - 1; i >= 0; i--) {
+      const picked = this.children[i].pickNode(localX, localY);
+      if (picked) return picked;
+    }
+
+    // Check this node
+    if (this.isPointInNode(localX, localY)) {
+      return this;
+    }
+
+    return null;
+  }
+
+  abstract renderShape(ctx: CanvasRenderingContext2D): void;
+
+  /**
+   * Hit testing: Returns true if the (x, y) coordinates (relative to parent) are within the node's bounds.
+   */
+  abstract isPointInNode(x: number, y: number): boolean;
+
+  /**
+   * Calculate bounding box (optional for now, but useful for layout).
+   */
+  abstract getBBox(): BBox;
+}
+

package/src/scene/Scene.ts

@@ -0,0 +1,197 @@
+import { Group } from './Shapes';
+import { Node } from './Node';
+
+/**
+ * Scene class: Manages the canvas element and the root of the scene graph.
+ */
+export class Scene {
+  private container: HTMLElement;
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  readonly root: Group = new Group();
+  
+  private width: number = 0;
+  private height: number = 0;
+  private pixelRatio: number = 1;
+
+  onHover?: (node: any, event: MouseEvent) => void;
+  onClick?: (node: any, event: MouseEvent) => void;
+  onDblClick?: (node: any, event: MouseEvent) => void;
+  onLongPress?: (node: any, event: MouseEvent) => void;
+
+  private _longPressTimer: ReturnType<typeof setTimeout> | null = null;
+  private _longPressFired = false;
+
+  /** Background color painted before the scene graph on every render frame. */
+  backgroundColor = '';
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.canvas = document.createElement('canvas');
+    this.canvas.style.position = 'absolute';
+    this.canvas.style.top = '0';
+    this.canvas.style.left = '0';
+    this.canvas.style.width = '100%';
+    this.canvas.style.height = '100%';
+    this.canvas.style.display = 'block';
+    this.canvas.style.zIndex = '1';
+    
+    container.appendChild(this.canvas);
+    
+    const ctx = this.canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Could not get Canvas 2D context');
+    }
+    this.ctx = ctx;
+    
+    this.resize();
+    this.setupEvents();
+  }
+
+  private setupEvents() {
+    this.canvas.addEventListener('mousemove', (e) => {
+      const rect = this.canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      
+      const node = this.root.pickNode(x, y);
+      if (this.onHover) {
+        this.onHover(node, e);
+      }
+    });
+
+    this.canvas.addEventListener('mouseleave', (e) => {
+      if (this.onHover) {
+        this.onHover(null, e);
+      }
+    });
+
+    this.canvas.addEventListener('click', (e) => {
+      const rect = this.canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const node = this.root.pickNode(x, y);
+      if (this.onClick) {
+        this.onClick(node, e);
+      }
+    });
+
+    this.canvas.addEventListener('dblclick', (e) => {
+      const rect = this.canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      const node = this.root.pickNode(x, y);
+      if (this.onDblClick) {
+        this.onDblClick(node, e);
+      }
+    });
+
+    // Touch events — map to hover/click for tooltip on touch devices
+    this.canvas.addEventListener('touchstart', (e) => {
+      if (e.touches.length !== 1) return;
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+
+      const node = this.root.pickNode(x, y);
+      // Synthesize a mouse event for the hover/click handlers
+      const syntheticMouse = new MouseEvent('mousemove', {
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
+      if (this.onHover) this.onHover(node, syntheticMouse);
+
+      this._longPressFired = false;
+      if (this._longPressTimer) clearTimeout(this._longPressTimer);
+      this._longPressTimer = setTimeout(() => {
+        this._longPressFired = true;
+        const longPressMouse = new MouseEvent('click', {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+        });
+        if (this.onLongPress) this.onLongPress(node, longPressMouse);
+      }, 500);
+    }, { passive: true });
+
+    this.canvas.addEventListener('touchend', (e) => {
+      // Cancel long-press timer
+      if (this._longPressTimer) { clearTimeout(this._longPressTimer); this._longPressTimer = null; }
+
+      if (e.changedTouches.length !== 1) return;
+      // Skip normal click if long-press already fired
+      if (this._longPressFired) { this._longPressFired = false; return; }
+
+      const touch = e.changedTouches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+
+      const node = this.root.pickNode(x, y);
+      const syntheticMouse = new MouseEvent('click', {
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
+      if (this.onClick) this.onClick(node, syntheticMouse);
+    }, { passive: true });
+
+    this.canvas.addEventListener('touchmove', (e) => {
+      // Cancel long-press on drag
+      if (this._longPressTimer) { clearTimeout(this._longPressTimer); this._longPressTimer = null; }
+      if (e.touches.length !== 1) return;
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+
+      const node = this.root.pickNode(x, y);
+      const syntheticMouse = new MouseEvent('mousemove', {
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
+      if (this.onHover) this.onHover(node, syntheticMouse);
+    }, { passive: true });
+  }
+
+  resize() {
+    const rect = this.container.getBoundingClientRect();
+    this.width = rect.width;
+    this.height = rect.height;
+    
+    if (this.width === 0 || this.height === 0) return;
+
+    this.pixelRatio = window.devicePixelRatio || 1;
+
+    this.canvas.width = this.width * this.pixelRatio;
+    this.canvas.height = this.height * this.pixelRatio;
+    
+    this.ctx.resetTransform();
+    this.ctx.scale(this.pixelRatio, this.pixelRatio);
+    this.render();
+  }
+
+  render() {
+    if (this.width === 0 || this.height === 0) return;
+
+    this.ctx.clearRect(0, 0, this.width, this.height);
+
+    if (this.backgroundColor) {
+      this.ctx.fillStyle = this.backgroundColor;
+      this.ctx.fillRect(0, 0, this.width, this.height);
+    }
+
+    this.root.render(this.ctx);
+  }
+
+  getCanvas(): HTMLCanvasElement { return this.canvas; }
+
+  /** Exposes the 2D context so ChartManager can measure text before layout. */
+  getContext(): CanvasRenderingContext2D { return this.ctx; }
+
+  destroy() {
+    if (this._longPressTimer) clearTimeout(this._longPressTimer);
+    this.canvas.remove();
+  }
+}