radiant-charts-core 0.2.0

package/src/scene/Shapes.ts

@@ -0,0 +1,446 @@
+import { Node, BBox } from './Node';
+
+// ─── Group ────────────────────────────────────────────────────────────────────
+
+export class Group extends Node {
+  renderShape(_ctx: CanvasRenderingContext2D) {}
+
+  isPointInNode(_x: number, _y: number): boolean {
+    return false;
+  }
+
+  getBBox(): BBox {
+    if (this.children.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const child of this.children) {
+      const b = child.getBBox();
+      minX = Math.min(minX, b.x + child.translation.x);
+      minY = Math.min(minY, b.y + child.translation.y);
+      maxX = Math.max(maxX, b.x + b.width + child.translation.x);
+      maxY = Math.max(maxY, b.y + b.height + child.translation.y);
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+}
+
+// ─── Rect ─────────────────────────────────────────────────────────────────────
+
+export class Rect extends Node {
+  width: number = 0;
+  height: number = 0;
+  fill: string = 'transparent';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+  cornerRadius: number = 0;
+  lineDash: number[] = [];
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    if (this.width <= 0 || this.height <= 0) return;
+
+    ctx.beginPath();
+    if (this.cornerRadius > 0) {
+      const r = Math.min(this.cornerRadius, this.width / 2, this.height / 2);
+      ctx.moveTo(this.x + r, this.y);
+      ctx.arcTo(this.x + this.width, this.y, this.x + this.width, this.y + this.height, r);
+      ctx.arcTo(this.x + this.width, this.y + this.height, this.x, this.y + this.height, r);
+      ctx.arcTo(this.x, this.y + this.height, this.x, this.y, r);
+      ctx.arcTo(this.x, this.y, this.x + this.width, this.y, r);
+    } else {
+      ctx.rect(this.x, this.y, this.width, this.height);
+    }
+    ctx.closePath();
+
+    if (this.fill !== 'transparent') {
+      ctx.fillStyle = this.fill;
+      ctx.fill();
+    }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth = this.strokeWidth;
+      if (this.lineDash.length > 0) ctx.setLineDash(this.lineDash);
+      ctx.stroke();
+      if (this.lineDash.length > 0) ctx.setLineDash([]);
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    const minX = Math.min(this.x, this.x + this.width);
+    const maxX = Math.max(this.x, this.x + this.width);
+    const minY = Math.min(this.y, this.y + this.height);
+    const maxY = Math.max(this.y, this.y + this.height);
+    return x >= minX && x <= maxX && y >= minY && y <= maxY;
+  }
+
+  getBBox(): BBox {
+    return { x: this.x, y: this.y, width: this.width, height: this.height };
+  }
+}
+
+// ─── Line ─────────────────────────────────────────────────────────────────────
+
+export class Line extends Node {
+  x1: number = 0;
+  y1: number = 0;
+  x2: number = 0;
+  y2: number = 0;
+  stroke: string = 'black';
+  strokeWidth: number = 1;
+  lineDash?: number[];
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    ctx.save();
+    if (this.lineDash) ctx.setLineDash(this.lineDash);
+    ctx.strokeStyle = this.stroke;
+    ctx.lineWidth = this.strokeWidth;
+    ctx.beginPath();
+    ctx.moveTo(this.x1, this.y1);
+    ctx.lineTo(this.x2, this.y2);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  isPointInNode(_x: number, _y: number): boolean { return false; }
+
+  getBBox(): BBox {
+    return {
+      x: Math.min(this.x1, this.x2),
+      y: Math.min(this.y1, this.y2),
+      width: Math.abs(this.x2 - this.x1),
+      height: Math.abs(this.y2 - this.y1),
+    };
+  }
+}
+
+// ─── Circle ───────────────────────────────────────────────────────────────────
+
+export class Circle extends Node {
+  centerX: number = 0;
+  centerY: number = 0;
+  radius: number = 5;
+  fill: string = 'blue';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2);
+    ctx.closePath();
+    if (this.fill !== 'transparent') { ctx.fillStyle = this.fill; ctx.fill(); }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth = this.strokeWidth;
+      ctx.stroke();
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    const dx = x - this.centerX, dy = y - this.centerY;
+    return (dx * dx + dy * dy) <= this.radius * this.radius;
+  }
+
+  getBBox(): BBox {
+    return { x: this.centerX - this.radius, y: this.centerY - this.radius, width: this.radius * 2, height: this.radius * 2 };
+  }
+}
+
+// ─── Path ─────────────────────────────────────────────────────────────────────
+
+export interface PathPoint {
+  x: number;
+  y: number;
+  command: 'M' | 'L' | 'C';
+  /** Bezier control point 1 (used when command === 'C') */
+  cp1x?: number;
+  cp1y?: number;
+  /** Bezier control point 2 (used when command === 'C') */
+  cp2x?: number;
+  cp2y?: number;
+}
+
+export class Path extends Node {
+  pathData: PathPoint[] = [];
+  fill: string = 'transparent';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+  closed: boolean = false;
+  lineDash?: number[];
+  lineDashOffset: number = 0;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    if (this.pathData.length === 0) return;
+
+    ctx.save();
+    if (this.lineDash) {
+      ctx.setLineDash(this.lineDash);
+      ctx.lineDashOffset = this.lineDashOffset;
+    }
+
+    ctx.beginPath();
+    for (const p of this.pathData) {
+      if (p.command === 'M') {
+        ctx.moveTo(p.x, p.y);
+      } else if (p.command === 'L') {
+        ctx.lineTo(p.x, p.y);
+      } else if (p.command === 'C' && p.cp1x !== undefined && p.cp2x !== undefined) {
+        ctx.bezierCurveTo(p.cp1x, p.cp1y!, p.cp2x, p.cp2y!, p.x, p.y);
+      }
+    }
+
+    if (this.closed) ctx.closePath();
+
+    if (this.fill !== 'transparent') { ctx.fillStyle = this.fill; ctx.fill(); }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth = this.strokeWidth;
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  isPointInNode(_x: number, _y: number): boolean { return false; }
+
+  getBBox(): BBox {
+    if (this.pathData.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of this.pathData) {
+      minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x); maxY = Math.max(maxY, p.y);
+      if (p.cp1x !== undefined) {
+        minX = Math.min(minX, p.cp1x, p.cp2x!); minY = Math.min(minY, p.cp1y!, p.cp2y!);
+        maxX = Math.max(maxX, p.cp1x, p.cp2x!); maxY = Math.max(maxY, p.cp1y!, p.cp2y!);
+      }
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+}
+
+// ─── Marker ───────────────────────────────────────────────────────────────────
+// A polymorphic point marker. Drop-in replacement for Circle in series that
+// want to expose a `markerShape` option. Hit-testing uses the bounding box of
+// the marker square, which is plenty accurate for marker-sized targets.
+
+export type MarkerShape = 'circle' | 'square' | 'cross' | 'diamond' | 'triangle' | 'plus';
+
+export class Marker extends Node {
+  centerX: number = 0;
+  centerY: number = 0;
+  radius: number = 5;
+  fill: string = 'blue';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+  shape: MarkerShape = 'circle';
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    const cx = this.centerX, cy = this.centerY, r = this.radius;
+    if (r <= 0) return;
+
+    ctx.beginPath();
+    switch (this.shape) {
+      case 'circle':
+        ctx.arc(cx, cy, r, 0, Math.PI * 2);
+        ctx.closePath();
+        break;
+      case 'square':
+        ctx.rect(cx - r, cy - r, r * 2, r * 2);
+        ctx.closePath();
+        break;
+      case 'diamond':
+        ctx.moveTo(cx, cy - r);
+        ctx.lineTo(cx + r, cy);
+        ctx.lineTo(cx, cy + r);
+        ctx.lineTo(cx - r, cy);
+        ctx.closePath();
+        break;
+      case 'triangle':
+        // Equilateral, point-up. Centred on (cx, cy).
+        ctx.moveTo(cx, cy - r);
+        ctx.lineTo(cx + r * 0.866, cy + r * 0.5);
+        ctx.lineTo(cx - r * 0.866, cy + r * 0.5);
+        ctx.closePath();
+        break;
+      case 'cross': {
+        // Diagonal X — drawn with two thick lines fused into one path so the
+        // shadow paints once. Width scales with radius.
+        const w = r * 0.4;
+        ctx.moveTo(cx - r, cy - r + w); ctx.lineTo(cx - r + w, cy - r);
+        ctx.lineTo(cx, cy - w);          ctx.lineTo(cx + r - w, cy - r);
+        ctx.lineTo(cx + r, cy - r + w);  ctx.lineTo(cx + w, cy);
+        ctx.lineTo(cx + r, cy + r - w);  ctx.lineTo(cx + r - w, cy + r);
+        ctx.lineTo(cx, cy + w);          ctx.lineTo(cx - r + w, cy + r);
+        ctx.lineTo(cx - r, cy + r - w);  ctx.lineTo(cx - w, cy);
+        ctx.closePath();
+        break;
+      }
+      case 'plus': {
+        // Axis-aligned plus sign with arm thickness w.
+        const w = r * 0.4;
+        ctx.moveTo(cx - w, cy - r); ctx.lineTo(cx + w, cy - r);
+        ctx.lineTo(cx + w, cy - w); ctx.lineTo(cx + r, cy - w);
+        ctx.lineTo(cx + r, cy + w); ctx.lineTo(cx + w, cy + w);
+        ctx.lineTo(cx + w, cy + r); ctx.lineTo(cx - w, cy + r);
+        ctx.lineTo(cx - w, cy + w); ctx.lineTo(cx - r, cy + w);
+        ctx.lineTo(cx - r, cy - w); ctx.lineTo(cx - w, cy - w);
+        ctx.closePath();
+        break;
+      }
+    }
+
+    if (this.fill !== 'transparent') { ctx.fillStyle = this.fill; ctx.fill(); }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth   = this.strokeWidth;
+      ctx.stroke();
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    const dx = x - this.centerX, dy = y - this.centerY;
+    // Bounding-square hit test — sufficient for finger/cursor-sized markers.
+    return Math.abs(dx) <= this.radius && Math.abs(dy) <= this.radius;
+  }
+
+  getBBox(): BBox {
+    return {
+      x: this.centerX - this.radius,
+      y: this.centerY - this.radius,
+      width: this.radius * 2,
+      height: this.radius * 2,
+    };
+  }
+}
+
+// ─── Arc ──────────────────────────────────────────────────────────────────────
+
+export class Arc extends Node {
+  centerX: number = 0;
+  centerY: number = 0;
+  innerRadius: number = 0;
+  outerRadius: number = 0;
+  startAngle: number = 0;
+  endAngle: number = 0;
+  fill: string = 'blue';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    ctx.beginPath();
+    ctx.arc(this.centerX, this.centerY, this.outerRadius, this.startAngle, this.endAngle);
+    if (this.innerRadius > 0) {
+      ctx.arc(this.centerX, this.centerY, this.innerRadius, this.endAngle, this.startAngle, true);
+    } else {
+      ctx.lineTo(this.centerX, this.centerY);
+    }
+    ctx.closePath();
+    if (this.fill !== 'transparent') { ctx.fillStyle = this.fill; ctx.fill(); }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke; ctx.lineWidth = this.strokeWidth; ctx.stroke();
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    const dx = x - this.centerX, dy = y - this.centerY;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist < this.innerRadius || dist > this.outerRadius) return false;
+    let angle = Math.atan2(dy, dx);
+    if (angle < 0) angle += Math.PI * 2;
+    let s = this.startAngle % (Math.PI * 2); if (s < 0) s += Math.PI * 2;
+    let e = this.endAngle % (Math.PI * 2); if (e < 0) e += Math.PI * 2;
+    return s < e ? (angle >= s && angle <= e) : (angle >= s || angle <= e);
+  }
+
+  getBBox(): BBox {
+    return { x: this.centerX - this.outerRadius, y: this.centerY - this.outerRadius, width: this.outerRadius * 2, height: this.outerRadius * 2 };
+  }
+}
+
+// ─── Text ─────────────────────────────────────────────────────────────────────
+
+export class Text extends Node {
+  text: string = '';
+  fontSize: number = 12;
+  fontFamily: string = 'sans-serif';
+  fontWeight: string = 'normal';
+  fill: string = 'black';
+  textAlign: CanvasTextAlign = 'start';
+  textBaseline: CanvasTextBaseline = 'alphabetic';
+  maxWidth?: number;
+  shadowColor?: string;
+  shadowBlur?: number;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    ctx.font = `${this.fontWeight} ${this.fontSize}px ${this.fontFamily}`;
+    ctx.fillStyle = this.fill;
+    ctx.textAlign = this.textAlign;
+    ctx.textBaseline = this.textBaseline;
+    if (this.shadowColor) ctx.shadowColor = this.shadowColor;
+    if (this.shadowBlur !== undefined) ctx.shadowBlur = this.shadowBlur;
+    
+    if (this.maxWidth !== undefined && this.maxWidth > 0) {
+      ctx.fillText(this.text, this.x, this.y, this.maxWidth);
+    } else {
+      ctx.fillText(this.text, this.x, this.y);
+    }
+    
+    if (this.shadowColor) ctx.shadowColor = 'transparent';
+    if (this.shadowBlur !== undefined) ctx.shadowBlur = 0;
+  }
+
+  isPointInNode(_x: number, _y: number): boolean { return false; }
+
+  getBBox(): BBox {
+    return { x: this.x, y: this.y - this.fontSize, width: this.text.length * (this.fontSize * 0.55), height: this.fontSize };
+  }
+}
+
+// ─── Polygon ──────────────────────────────────────────────────────────────────
+
+export class Polygon extends Node {
+  points: { x: number; y: number }[] = [];
+  fill: string = 'transparent';
+  stroke: string = 'transparent';
+  strokeWidth: number = 1;
+  closed: boolean = true;
+
+  renderShape(ctx: CanvasRenderingContext2D) {
+    if (this.points.length < 2) return;
+
+    ctx.beginPath();
+    ctx.moveTo(this.points[0].x, this.points[0].y);
+    for (let i = 1; i < this.points.length; i++) {
+      ctx.lineTo(this.points[i].x, this.points[i].y);
+    }
+    if (this.closed) ctx.closePath();
+
+    if (this.fill !== 'transparent') {
+      ctx.fillStyle = this.fill;
+      ctx.fill();
+    }
+    if (this.stroke !== 'transparent' && this.strokeWidth > 0) {
+      ctx.strokeStyle = this.stroke;
+      ctx.lineWidth = this.strokeWidth;
+      ctx.stroke();
+    }
+  }
+
+  isPointInNode(x: number, y: number): boolean {
+    // Basic ray-casting algorithm for point-in-polygon
+    let inside = false;
+    for (let i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
+      const xi = this.points[i].x, yi = this.points[i].y;
+      const xj = this.points[j].x, yj = this.points[j].y;
+      const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+      if (intersect) inside = !inside;
+    }
+    return inside;
+  }
+
+  getBBox(): BBox {
+    if (this.points.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of this.points) {
+      minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x); maxY = Math.max(maxY, p.y);
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+}