Class Graphie

constructor

• new Graphie(el: Element): Graphie

  Parameters

  • el: Element

  Returns Graphie

Optional_mouselayerWrapper

Optional_visiblelayerWrapper

currentStyle

Optionaldimensions

el

OptionalisDragging

isMobile

label

Optionalmouselayer

Optionalrange

Optionalraphael

Optionalscale

Optionalxpixels

Optionalypixels

addMouseLayer

• addMouseLayer(
      options: {
          allowScratchpad?: boolean;
          onClick?: MouseHandler;
          onMouseDown?: MouseHandler | null;
          onMouseMove?: MouseHandler;
          onMouseOut?: MouseHandler | null;
          onMouseOver?: MouseHandler | null;
          onMouseUp?: MouseHandler | null;
          setDrawingAreaAvailable?: (available: boolean) => void;
      },
  ): void

  Parameters

  • options: {
        allowScratchpad?: boolean;
        onClick?: MouseHandler;
        onMouseDown?: MouseHandler | null;
        onMouseMove?: MouseHandler;
        onMouseOut?: MouseHandler | null;
        onMouseOver?: MouseHandler | null;
        onMouseUp?: MouseHandler | null;
        setDrawingAreaAvailable?: (available: boolean) => void;
    }

  Returns void

addToMouseLayerWrapper

• addToMouseLayerWrapper(el: HTMLElement): void

  Parameters

  • el: HTMLElement

  Returns void

addToVisibleLayerWrapper

• addToVisibleLayerWrapper(el: HTMLElement): void

  Parameters

  • el: HTMLElement

  Returns void

arc

• arc(
      center: Coord,
      radius: Coord,
      startAngle: number,
      endAngle: number,
      sector: boolean,
      style?: StyleParams,
  ): RaphaelElement

  Parameters

  • center: Coord
  • radius: Coord
  • startAngle: number
  • endAngle: number
  • sector: boolean
  • Optionalstyle: StyleParams

  Returns RaphaelElement

circle

• circle(center: Coord, radius: number, style?: StyleParams): any

  Parameters

  • center: Coord
  • radius: number
  • Optionalstyle: StyleParams

  Returns any

cleanup

• cleanup(): void

  Returns void

ellipse

• ellipse(center: any, radii: any, style?: StyleParams): any

  Parameters

  • center: any
  • radii: any
  • Optionalstyle: StyleParams

  Returns any

fixedEllipse

• fixedEllipse(
      center: number | Coord,
      radii: number | [number, number],
      maxScale: number,
      padding: number,
      style?: StyleParams,
  ): PositionedShape

  Parameters

  • center: number | Coord
  • radii: number | [number, number]
  • maxScale: number
  • padding: number
  • Optionalstyle: StyleParams

  Returns PositionedShape

fixedLine

• fixedLine(start: Coord, end: Coord, thickness: number): PositionedShape

  Parameters

  • start: Coord
  • end: Coord
  • thickness: number

  Returns PositionedShape

fixedPath

• fixedPath(
      points: Coord[],
      center: Coord | null,
      createPath: (scaledPoints: Coord[]) => string,
  ): PositionedShape

  Parameters

  • points: Coord[]
  • center: Coord | null
  • createPath: (scaledPoints: Coord[]) => string

  Returns PositionedShape

getMouseCoord

• getMouseCoord(event: Readonly<{ pageX?: number; pageY?: number }>): Coord

  Get mouse coordinates in graph coordinates

  Parameters

  • event: Readonly<{ pageX?: number; pageY?: number }>

  Returns Coord

getMousePx

• getMousePx(event: Readonly<{ pageX?: number; pageY?: number }>): Coord

  Get mouse coordinates in pixels

  Parameters

  • event: Readonly<{ pageX?: number; pageY?: number }>

  Returns Coord

graphInit

• graphInit(
      options: {
          axes?: boolean;
          axisArrows?: true | "" | "->" | "<->";
          axisCenter?: Coord;
          axisLabels?: false | [string, string];
          axisOpacity?: number;
          grid?: boolean;
          gridOpacity?: number;
          gridRange?: Coord | [Interval, Interval];
          gridStep?: number | Coord;
          isMobile?: boolean;
          labelFormat?: (a: number) => string;
          labelOpacity?: number;
          labels?: boolean;
          labelStep?: number;
          range?: Coord | [Interval, Interval];
          scale: number | Coord;
          tickLen?: number | Coord;
          tickOpacity?: number;
          ticks?: boolean;
          tickStep?: number | Coord;
          unityLabels?: boolean | [boolean, boolean];
          xLabelFormat?: (x: number) => string;
          yLabelFormat?: (y: number) => string;
      },
  ): void

  Parameters

  • options: {
        axes?: boolean;
        axisArrows?: true | "" | "->" | "<->";
        axisCenter?: Coord;
        axisLabels?: false | [string, string];
        axisOpacity?: number;
        grid?: boolean;
        gridOpacity?: number;
        gridRange?: Coord | [Interval, Interval];
        gridStep?: number | Coord;
        isMobile?: boolean;
        labelFormat?: (a: number) => string;
        labelOpacity?: number;
        labels?: boolean;
        labelStep?: number;
        range?: Coord | [Interval, Interval];
        scale: number | Coord;
        tickLen?: number | Coord;
        tickOpacity?: number;
        ticks?: boolean;
        tickStep?: number | Coord;
        unityLabels?: boolean | [boolean, boolean];
        xLabelFormat?: (x: number) => string;
        yLabelFormat?: (y: number) => string;
    }

  Returns void

grid

• grid(xr: Interval, yr: Interval, style?: StyleParams): unknown

  Parameters

  • xr: Interval
  • yr: Interval
  • Optionalstyle: StyleParams

  Returns unknown

init

• init(
      options: {
          isMobile?: boolean;
          range: [Interval, Interval];
          scale?: number | Coord;
      },
  ): Graphie

  Parameters

  • options: { isMobile?: boolean; range: [Interval, Interval]; scale?: number | Coord }

  Returns Graphie

line

• line(start: Coord, end: Coord, style?: StyleParams): RaphaelElement

  Parameters

  • start: Coord
  • end: Coord
  • Optionalstyle: StyleParams

  Returns RaphaelElement

parabola

• parabola(a: number, b: number, c: number, style?: StyleParams): RaphaelElement

  Parameters

  • a: number
  • b: number
  • c: number
  • Optionalstyle: StyleParams

  Returns RaphaelElement

path

• path(points: Coord[], style?: StyleParams): RaphaelElement

  Parameters

  • points: Coord[]
  • Optionalstyle: StyleParams

  Returns RaphaelElement

plot

• plot(
      fn: (x: number) => number,
      range: Interval,
      style?: StyleParams,
  ): RaphaelElement

  Parameters

  • fn: (x: number) => number
  • range: Interval
  • Optionalstyle: StyleParams

  Returns RaphaelElement

plotParametric

• plotParametric(
      fn: (t: number) => Coord,
      range: Interval,
      style?: StyleParams,
  ): RaphaelElement

  Parameters

  • fn: (t: number) => Coord
  • range: Interval
  • Optionalstyle: StyleParams

  Returns RaphaelElement

rect

• rect(x: any, y: any, width: any, height: any, style?: StyleParams): any

  Parameters

  • x: any
  • y: any
  • width: any
  • height: any
  • Optionalstyle: StyleParams

  Returns any

scaledPath

• scaledPath(points: Coord[], style?: StyleParams): RaphaelElement

  Parameters

  • points: Coord[]
  • Optionalstyle: StyleParams

  Returns RaphaelElement

scalePoint

• scalePoint(point: number | Coord): Coord

  Parameters

  • point: number | Coord

  Returns Coord

scaleVector

• scaleVector(point: number | Coord): any

  Parameters

  • point: number | Coord

  Returns any

sinusoid

• sinusoid(
      a: number,
      b: number,
      c: number,
      d: number,
      style?: StyleParams,
  ): RaphaelElement

  Parameters

  • a: number
  • b: number
  • c: number
  • d: number
  • Optionalstyle: StyleParams

  Returns RaphaelElement

style

• style<T>(attrs: any, fn?: (this: Graphie) => T): T | undefined

  Type Parameters

  • T

  Parameters

  • attrs: any
  • Optionalfn: (this: Graphie) => T

  Returns T | undefined

svgParabolaPath

• svgParabolaPath(a: number, b: number, c: number): string

  Parameters

  • a: number
  • b: number
  • c: number

  Returns string

svgPath

• svgPath(points: (true | Coord)[], alreadyScaled?: boolean): string

  Parameters

  • points: (true | Coord)[]
  • OptionalalreadyScaled: boolean

  Returns string

svgSinusoidPath

• svgSinusoidPath(a: number, b: number, c: number, d: number): string

  Parameters

  • a: number
  • b: number
  • c: number
  • d: number

  Returns string

unscalePoint

• unscalePoint(point: number | Coord): any

  Parameters

  • point: number | Coord

  Returns any

unscaleVector

• unscaleVector(point: number | Coord): any

  Parameters

  • point: number | Coord

  Returns any