tessl/npm-react-art

React ART is a JavaScript library for drawing vector graphics using React

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Path API

Name: tessl/npm-react-art
Author: tessl

Vector path construction using the ART Path class for creating custom shapes and complex vector graphics. The Path API provides a fluent interface for building vector paths that can be used with Shape components.

Capabilities

Path Class

The main Path class from the ART library provides methods for constructing vector paths through a fluent API.

/**
 * Path class for vector path construction
 * Provides a fluent API for building complex vector paths
 * All methods return the Path instance for chaining
 */
class Path {
  /**
   * Move to a specific point without drawing
   * @param x - X coordinate to move to
   * @param y - Y coordinate to move to
   * @returns Path instance for chaining
   */
  moveTo(x: number, y: number): Path;

  /**
   * Move relative to current position without drawing
   * @param x - X offset from current position
   * @param y - Y offset from current position
   * @returns Path instance for chaining
   */
  move(x: number, y: number): Path;

  /**
   * Draw a line to a specific point
   * @param x - X coordinate to draw line to
   * @param y - Y coordinate to draw line to
   * @returns Path instance for chaining
   */
  lineTo(x: number, y: number): Path;

  /**
   * Draw a line relative to current position
   * @param x - X offset from current position
   * @param y - Y offset from current position
   * @returns Path instance for chaining
   */
  line(x: number, y: number): Path;

  /**
   * Draw an arc from current position
   * @param x - X offset to arc endpoint
   * @param y - Y offset to arc endpoint
   * @param rx - X radius of arc
   * @param ry - Y radius of arc (optional, defaults to rx)
   * @param large - Whether to use large arc sweep
   * @returns Path instance for chaining
   */
  arc(x: number, y: number, rx: number, ry?: number, large?: boolean): Path;

  /**
   * Draw a counter-clockwise arc from current position
   * @param x - X offset to arc endpoint
   * @param y - Y offset to arc endpoint
   * @param rx - X radius of arc
   * @param ry - Y radius of arc (optional, defaults to rx)
   * @param large - Whether to use large arc sweep
   * @returns Path instance for chaining
   */
  counterArc(x: number, y: number, rx: number, ry?: number, large?: boolean): Path;

  /**
   * Draw a cubic Bezier curve
   * @param cp1x - X coordinate of first control point
   * @param cp1y - Y coordinate of first control point
   * @param cp2x - X coordinate of second control point
   * @param cp2y - Y coordinate of second control point
   * @param x - X coordinate of end point
   * @param y - Y coordinate of end point
   * @returns Path instance for chaining
   */
  curveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): Path;

  /**
   * Draw a quadratic Bezier curve
   * @param cpx - X coordinate of control point
   * @param cpy - Y coordinate of control point
   * @param x - X coordinate of end point
   * @param y - Y coordinate of end point
   * @returns Path instance for chaining
   */
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): Path;

  /**
   * Close the current path by drawing a line to the starting point
   * @returns Path instance for chaining
   */
  close(): Path;

  /**
   * Reset the path, clearing all commands
   * @returns Path instance for chaining
   */
  reset(): Path;
}

/**
 * Create a new empty Path instance
 * @returns New Path instance
 */
function Path(): Path;

Usage Examples:

import React from 'react';
import { Surface, Shape, Path } from 'react-art';

// Basic triangle path
function Triangle() {
  const trianglePath = Path()
    .moveTo(50, 0)      // Start at top center
    .lineTo(100, 100)   // Line to bottom right
    .lineTo(0, 100)     // Line to bottom left
    .close();           // Close back to start

  return (
    <Surface width={100} height={100}>
      <Shape d={trianglePath} fill="blue" stroke="darkblue" strokeWidth={2} />
    </Surface>
  );
}

// Complex path with curves
function ComplexPath() {
  const path = Path()
    .moveTo(10, 50)                        // Start point
    .curveTo(10, 10, 90, 10, 90, 50)      // Cubic curve (top arc)
    .curveTo(90, 90, 10, 90, 10, 50)      // Cubic curve (bottom arc)
    .close();

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill="green" />
    </Surface>
  );
}

// Path with arcs
function ArcPath() {
  const path = Path()
    .moveTo(20, 50)         // Start on left
    .arc(60, 0, 30)         // Arc to right side
    .lineTo(80, 80)         // Line down
    .arc(-60, 0, 30)        // Arc back to left
    .close();               // Close path

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill="orange" stroke="red" strokeWidth={2} />
    </Surface>
  );
}

Path Building Patterns

Creating Custom Shapes:

import { Path } from 'react-art';

// Star shape
function createStarPath(centerX, centerY, outerRadius, innerRadius, points) {
  const path = Path();
  const angleStep = (Math.PI * 2) / (points * 2);
  
  for (let i = 0; i < points * 2; i++) {
    const angle = i * angleStep - Math.PI / 2;
    const radius = i % 2 === 0 ? outerRadius : innerRadius;
    const x = centerX + Math.cos(angle) * radius;
    const y = centerY + Math.sin(angle) * radius;
    
    if (i === 0) {
      path.moveTo(x, y);
    } else {
      path.lineTo(x, y);
    }
  }
  
  return path.close();
}

// Rounded rectangle path
function createRoundedRectPath(width, height, radius) {
  return Path()
    .moveTo(radius, 0)
    .lineTo(width - radius, 0)
    .arc(radius, radius, radius)
    .lineTo(width, height - radius)
    .arc(-radius, radius, radius)
    .lineTo(radius, height)
    .arc(-radius, -radius, radius)
    .lineTo(0, radius)
    .arc(radius, -radius, radius)
    .close();
}

// Heart shape path
function createHeartPath(size) {
  const path = Path();
  const x = size / 2;
  const y = size / 4;
  
  return path
    .moveTo(x, y)
    .curveTo(x, y - size/4, x - size/4, y - size/4, x - size/4, y)
    .curveTo(x - size/4, y + size/8, x, y + size/2, x, y + size/2)
    .curveTo(x, y + size/2, x + size/4, y + size/8, x + size/4, y)
    .curveTo(x + size/4, y - size/4, x, y - size/4, x, y)
    .close();
}

Path Manipulation

Combining Paths:

// Multiple disconnected shapes in one path
function MultiShapePath() {
  const path = Path()
    // First shape - circle
    .moveTo(20, 20)
    .arc(20, 0, 10)
    .arc(-20, 0, 10)
    .close()
    // Second shape - square (disconnected)
    .moveTo(60, 10)
    .lineTo(80, 10)
    .lineTo(80, 30)
    .lineTo(60, 30)
    .close();

  return (
    <Surface width={100} height={50}>
      <Shape d={path} fill="purple" />
    </Surface>
  );
}

// Path with holes
function PathWithHole() {
  const path = Path()
    // Outer rectangle
    .moveTo(10, 10)
    .lineTo(90, 10)
    .lineTo(90, 90)
    .lineTo(10, 90)
    .close()
    // Inner rectangle (hole) - drawn in reverse direction
    .moveTo(30, 30)
    .lineTo(30, 70)
    .lineTo(70, 70)
    .lineTo(70, 30)
    .close();

  return (
    <Surface width={100} height={100}>
      <Shape d={path} fill="teal" />
    </Surface>
  );
}

Advanced Path Techniques

Smooth Curves:

// Smooth wavy line using quadratic curves
function WavyPath() {
  const path = Path()
    .moveTo(0, 50);

  // Create wave pattern
  for (let x = 0; x < 200; x += 40) {
    path.quadraticCurveTo(x + 20, 20, x + 40, 50)
        .quadraticCurveTo(x + 60, 80, x + 80, 50);
  }

  return (
    <Surface width={200} height={100}>
      <Shape d={path} fill="none" stroke="blue" strokeWidth={3} />
    </Surface>
  );
}

// Bezier curve examples
function BezierCurves() {
  const path = Path()
    // Cubic bezier curve
    .moveTo(10, 80)
    .curveTo(40, 10, 60, 10, 90, 80)
    // Quadratic bezier curve
    .moveTo(110, 80)
    .quadraticCurveTo(125, 10, 140, 80);

  return (
    <Surface width={150} height={100}>
      <Shape d={path} fill="none" stroke="red" strokeWidth={2} />
    </Surface>
  );
}

Path Coordinate System

Origin: (0, 0) is at the top-left of the Surface
X-axis: Increases from left to right
Y-axis: Increases from top to bottom
Units: All coordinates are in pixels
Relative vs Absolute:
- moveTo, lineTo, curveTo, quadraticCurveTo use absolute coordinates
- move, line, arc, counterArc use relative coordinates from current position

Methods Used by React ART Components

The following Path methods are actively used by React ART's built-in components (Circle, Rectangle, Wedge):

Core methods used:

moveTo() - Used for positioning
move() - Used for relative positioning
line() - Used for straight line segments
arc() - Used for curved segments (both 3-param and 5-param versions)
counterArc() - Used for reverse direction arcs
close() - Used to close paths

Additional methods available:

lineTo(), curveTo(), quadraticCurveTo(), reset() - Part of the ART Path API but not used by built-in components

Path Performance

Paths are immutable - each method call returns a new path
Complex paths with many segments can impact rendering performance
Consider simplifying paths for better performance
Reuse path objects when possible rather than recreating them

Types

// Path class from ART library
class Path {
  // All path construction methods return Path for chaining
}

// Path factory function
function Path(): Path;

Install with Tessl CLI