Class: Plot

Plot(optionsopt)

Plot is an object that is able to create, display and download SVG documents.

Constructor

new Plot(optionsopt)

Parameters:
Name Type Attributes Description
options object <optional>

An object containing configuration for Plot.

Properties
Name Type Attributes Default Description
size object <optional>

An object with width and height properties to be used as dimensions of the Plot.

Properties
Name Type Attributes Default Description
width number <optional>
 100

The width of the Plot.
height number <optional>
 100

The height of the Plot.
title string <optional>
 "Untitled"

The title of the Plot.
units string <optional>
 "mm"

The units of measurement to be used (i.e. "mm" or "in").
backgroundColor string <optional>
 "transparent"

The background colour of the plot, as a hex value or HTML color name.
seed number <optional>

The seed to be used for the Plot. Defaults to an 8 digit hexadecimal integer.
stroke string <optional>
 "black"

The foreground colour of the plot, as a hex value or HTML color name.
strokeWidth number <optional>
 1

The line width of the Plot. Defaults to 1 unit. (1mm)
minimumLineLength number <optional>
 0.1

Lines shorter than this length are not drawn.
Source:

Classes

Plot

Methods

add(shape)

Adds shapes to the plot.

Parameters:
Name Type Description
shape Line | Circle | Path | Point | Array

An object or array of objects to be added to the plot.
Source:
Example
import { Plot, Line, Circle } from "@jakebeamish/penplotting";

const plot = new Plot({
    backgroundColor: "#ffffff"
});

plot.generate = () => {
    const line = Line.fromArray([0, 0, 100, 100]);
    const circlesArray = [
        new Circle(10, 10, 10),
        new Circle(40, 40, 15),
        new Circle(80, 80, 20)
    ];
    plot.add([line, circlesArray]);
}

plot.draw();

addCirclesToSVG()

Adds the Circles in this Plot's circles array to it's SVG element.

Source:

addLinesToSVG()

Adds the Lines in this Plot's lines array to it's SVG element.

Source:

addPathsToSVG()

Adds the Paths in this Plot's paths array to it's SVG element.

Source:

(private) addSingleShape(shape)

Adds a single shape to the appropriate array. Used by Plot#add.

Parameters:
Name Type Description
shape Line | Path | Circle | Point
Source:

appendSVG()

Appends this plot's SVG element to the document body.

Source:

clear()

Empty out any existing HTML UI and SVG document elements on the page, in order to regenerate a Plot.

Source:

createUI(timeTaken)

Creates HTML UI and adds it to the document body.

Parameters:
Name Type Description
timeTaken number
Source:

deduplicateLines()

Removes duplicated Lines from this Plot's lines array.

Source:

downloadSVG()

Download the Plot as an SVG file.

Source:

draw()

Generates the SVG and UI and appends them to the document body. Must be called after defining a Plot.generate() function.

Source:

filename() → {string}

Source:
Returns:
  • The file name to be used for the Plot's SVG file, as a string in the format Title_ffffffff_210x297mm.svg
Type
string

removeOverlappingLines()

Removes overlapping Lines from this Plot's lines array.

Source:

removeShortLines(minimumLength)

Removes Lines in this Plot's lines array that are shorter than a specified minimum length.

Parameters:
Name Type Description
minimumLength number
Source: