Class PlotBoilerplate

Classdesc

The main class of the PlotBoilerplate.

Requires

Vertex

Requires

Line

Requires

Vector

Requires

Polygon

Requires

PBImage

Requires

VEllipse

Requires

Circle

Requires

MouseHandler

Requires

KeyHandler

Requires

VertexAttr

Requires

CubicBezierCurve

Requires

BezierPath

Requires

Drawable

Requires

DrawConfig

Requires

IHooks

Requires

PBParams

Requires

Triangle

Requires

drawutils

Requires

drawutilsgl

Requires

SVGSerializable

Requires

XYCoords

Requires

XYDimension

Index

Constructors

constructor

Constructors

constructor

new PlotBoilerplate(config, drawConfig): PlotBoilerplate
The constructor.
Parameters
- config: PBParams
- drawConfig: DrawConfig
Returns PlotBoilerplate
Name
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:392

Properties

canvas

canvas: HTMLCanvasElement | SVGElement

Member

Memberof

PlotBoilerplate

Instance

canvasSize

canvasSize: XYDimension

Member

Memberof

PlotBoilerplate

Instance

config

config: Config

Member

Memberof

PlotBoilerplate

Instance

console

console: Console

Member

Memberof

PlotBoilerplate

Instance

ctx

ctx: CanvasRenderingContext2D | WebGLRenderingContext

Member

Memberof

PlotBoilerplate

Deprecated

Instance

draggedElements

draggedElements: IDraggable[]

Member

Memberof

PlotBoilerplate

Instance

draw

draw: DrawLib<void>

Member

Memberof

PlotBoilerplate

Instance

drawConfig

drawConfig: DrawConfig

Member

Memberof

PlotBoilerplate

Instance

drawables

drawables: Drawable[]

Member

Memberof

PlotBoilerplate

Instance

eventCatcher

eventCatcher: HTMLElement

The event catcher might be a different element positioned over the actual canvas.

Member

Memberof

PlotBoilerplate

Instance

fill

fill: DrawLib<void>

Member

Memberof

PlotBoilerplate

Instance

grid

grid: Grid

Member

Memberof

PlotBoilerplate

Instance

hooks

hooks: IHooks

Member

Memberof

PlotBoilerplate

Instance

`Private` keyHandler

keyHandler: KeyHandler

Member

Memberof

PlotBoilerplate

Instance

paths

paths: BezierPath[]

Member

Memberof

PlotBoilerplate

Instance

`Private` renderTime

renderTime: number = 0

A discrete timestamp to identify single render cycles. Note that using system time milliseconds is not a safe way to identify render frames, as on modern powerful machines multiple frames might be rendered within each millisecond.

Member

Memberof

plotboilerplate

Instance

selectPolygon

selectPolygon: Polygon

Member

Memberof

PlotBoilerplate

Instance

vertices

vertices: Vertex[]

Member

Memberof

PlotBoilerplate

Instance

`Static` `Readonly` DEFAULT_CANVAS_HEIGHT

DEFAULT_CANVAS_HEIGHT: number = 768

Constant

`Static` `Readonly` DEFAULT_CANVAS_WIDTH

DEFAULT_CANVAS_WIDTH: number = 1024

Constant

`Static` `Readonly` DEFAULT_CLICK_TOLERANCE

DEFAULT_CLICK_TOLERANCE: number = 8

Constant

`Static` `Readonly` DEFAULT_TOUCH_TOLERANCE

DEFAULT_TOUCH_TOLERANCE: number = 32

Constant

`Static` `Private` Draggable

Draggable: typeof __class = ...

A wrapper class for draggable items (mostly vertices).

`Static` utils

utils: {
    enableBezierPathAutoAdjust: ((bezierPath) => void);
    fetch: {
        bool: ((obj, key, fallback) => any);
        func: ((obj, key, fallback) => any);
        num: ((obj, key, fallback) => any);
        val: ((obj, key, fallback) => any);
    };
    safeMergeByKeys: (<KeyType, ValueType>(base, extension) => Record<KeyType, ValueType>);
    setCSSscale: ((element, scaleX, scaleY) => void);
} = ...

A set of helper functions.

Type declaration

enableBezierPathAutoAdjust: ((bezierPath) => void)
Installs vertex listeners to the path's vertices so that controlpoints move with their path points when dragged.

Bézier path points with attr.bezierAutoAdjust==true will have their two control points audo-updated if moved, too (keep path connections smooth).
- - (bezierPath): void
  - Parameters
    - bezierPath: BezierPath
      The path to use auto-adjustment for.
    Returns void
fetch: {
    bool: ((obj, key, fallback) => any);
    func: ((obj, key, fallback) => any);
    num: ((obj, key, fallback) => any);
    val: ((obj, key, fallback) => any);
}
- bool: ((obj, key, fallback) => any)
  A helper function to the the object property boolean value specified by the given key.
  
  Returns
  - - (obj, key, fallback): any
    - Parameters
      obj: any
      key: string
      The key of the object property (the name).
      
      fallback: boolean
      A default value if the key does not exist.
      Returns any
- func: ((obj, key, fallback) => any)
  A helper function to the the object property function-value specified by the given key.
  
  Returns
  - - (obj, key, fallback): any
    - Parameters
      obj: any
      key: string
      The key of the object property (the name).
      
      fallback: ((...args) => any)
      A default value if the key does not exist.
      
      (...args): any
      Parameters
      Rest ...args: any[]
      Returns any
      Returns any
- num: ((obj, key, fallback) => any)
  A helper function to the the object property numeric value specified by the given key.
  
  Returns
  - - (obj, key, fallback): any
    - Parameters
      obj: any
      key: string
      The key of the object property (the name).
      
      fallback: number
      A default value if the key does not exist.
      Returns any
- val: ((obj, key, fallback) => any)
  A helper function to the the object property value specified by the given key.
  - - (obj, key, fallback): any
    - Parameters
      obj: any
      key: string
      The key of the object property (the name).
      
      fallback: any
      A default value if the key does not exist.
      Returns any
safeMergeByKeys: (<KeyType, ValueType>(base, extension) => Record<KeyType, ValueType>)
Merge the elements in the 'extension' object into the 'base' object based on the keys of 'base'.

Returns
base extended by the new attributes.
- - <KeyType, ValueType>(base, extension): Record<KeyType, ValueType>
  - Type Parameters
    - KeyType extends string | number | symbol
    - ValueType
    Parameters
    - base: Record<KeyType, ValueType>
    - extension: Record<KeyType, ValueType>
    Returns Record<KeyType, ValueType>
setCSSscale: ((element, scaleX, scaleY) => void)
- - (element, scaleX, scaleY): void
  - Parameters
    - element: HTMLElement | SVGElement
    - scaleX: number
    - scaleY: number
    Returns void

Methods

`Private` _handleColor

_handleColor(h, color): string
This is just a tiny helper function to determine the render color of vertices.
Parameters
- h: Vertex
- color: string
Returns string
- Defined in src/ts/PlotBoilerplate.ts:1136

`Private` _setToRetina

_setToRetina(): void
Private
This function sets the canvas resolution to factor 2.0 (or the preferred pixel ratio of your device) for retina displays. Please not that in non-GL mode this might result in very slow rendering as the canvas buffer size may increase.

Returns void
Method
_setToRetina

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:723

add

add(drawable, redraw?): void
Add a drawable object.

This must be either:
```
 * a Vertex
 * a Line
 * a Vector
 * a VEllipse
 * a VEllipseSector
 * a Circle
 * a Polygon
 * a Triangle
 * a BezierPath
 * a BPImage
```
Parameters
- drawable: Drawable | Drawable[]
  The drawable (of one of the allowed class instance) to add.
- Optional redraw: boolean
  If true the function will trigger redraw after the drawable(s) was/were added.
Returns void
Method
add

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:816

adjustOffset

adjustOffset(redraw?): void
Re-adjust the configured offset depending on the current canvas size and zoom (scaleX and scaleY).
Parameters
- Optional redraw: boolean
  [optional] If set the canvas will redraw with the new offset (default=false).
Returns void
Method
adjustOffset
- Defined in src/ts/PlotBoilerplate.ts:1945

`Private` clear

clear(): void
Private
This function clears the canvas with the configured background color.

This function is usually only used internally.

Returns void
Method
clear

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1507

`Private` clearSelection

clearSelection(redraw?): PlotBoilerplate
Private
Clear the selection.

This function is usually only used internally.
Parameters
- Optional redraw: boolean
  Indicates if the redraw function should be triggered.
Returns PlotBoilerplate
this

Method
clearSelection

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1524

createGUI

createGUI(props?): GUI
Creates a control GUI (a dat.gui instance) for this plot boilerplate instance.
Parameters
- Optional props: DatGuiProps
Returns GUI
Method
createGUI

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:2217

drawAll

drawAll(renderTime, draw, fill): void
Draw all: drawables, grid, select-polygon and vertices.
Parameters
- renderTime: number
- draw: DrawLib<any>
- fill: DrawLib<any>
Returns void
Method
drawAll

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1479

drawDrawable

drawDrawable(d, renderTime, draw, fill): void
Draw the given drawable.

This function is usually only used internally.
Parameters
- d: Drawable
  The drawable to draw.
- renderTime: number
  The current render time. It will be used to distinct already draw vertices from non-draw-yet vertices.
- draw: DrawLib<any>
  The drawing library to use to draw lines.
- fill: DrawLib<any>
  The drawing library to use to fill areas.
Returns void
Method
drawDrawable

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1180

drawDrawables

drawDrawables(renderTime, draw, fill): void
Draw all drawables.

This function is usually only used internally.
Parameters
- renderTime: number
  The current render time. It will be used to distinct already draw vertices from non-draw-yet vertices.
- draw: DrawLib<any>
  The drawing library to use to draw lines.
- fill: DrawLib<any>
  The drawing library to use to fill areas.
Returns void
Method
drawDrawables

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1154

`Private` drawGrid

drawGrid(draw): void
Private
Draw the grid with the current config settings.

This function is usually only used internally.
Parameters
- draw: DrawLib<any>
  The drawing library to use to draw lines.
Returns void
Method
drawGrid

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1066

`Private` drawOrigin

drawOrigin(draw): void
Private
Draw the origin with the current config settings.

This function is usually only used internally.
Parameters
- draw: DrawLib<any>
  The drawing library to use to draw lines.
Returns void
Method
drawOrigin

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1127

`Private` drawSelectPolygon

drawSelectPolygon(draw): void
Private
Draw the select-polygon (if there is one).

This function is usually only used internally.
Parameters
- draw: DrawLib<any>
Returns void
Method
drawSelectPolygon

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1409

`Private` drawVertices

drawVertices(renderTime, draw): void
Private
Draw all vertices that were not yet drawn with the given render time.

This function is usually only used internally.
Parameters
- renderTime: number
  The current render time. It is used to distinct already draw vertices from non-draw-yet vertices.
- draw: DrawLib<any>
Returns void
Method
drawVertices

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1431

fitToView

fitToView(bounds): void
Set the current zoom and draw offset to fit the given bounds.

This method currently restores the aspect zoom ratio.
Parameters
- bounds: Bounds
Returns void
- Defined in src/ts/PlotBoilerplate.ts:738

`Private` getAvailableContainerSpace

getAvailableContainerSpace(): XYDimension
Get the available inner space of the given container.

Size minus padding minus border.

Returns XYDimension
- Defined in src/ts/PlotBoilerplate.ts:1575

getDraggedElementCount

getDraggedElementCount(): number
Determine if any elements are currently being dragged (on mouse move or touch move).

Returns number
The number of elements that are currently being dragged.

Method
getDraggedElementCount

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1782

`Private` getFProp

getFProp(elem, propName): number
Internal helper function used to get 'float' properties from elements. Used to determine border withs and paddings that were defined using CSS.
Parameters
- elem: HTMLElement | SVGElement
- propName: string
Returns number
- Defined in src/ts/PlotBoilerplate.ts:1565

getVertexNear

getVertexNear(pixelPosition, pixelTolerance): Vertex
Find the vertex near the given position.

The position is the absolute vertex position, not the x-y-coordinates on the canvas.
Parameters
- pixelPosition: XYCoords
- pixelTolerance: number
  A radius around the position to include into the search. Note that the tolerance will be scaled up/down when zoomed.
Returns Vertex
The vertex near the given position or undefined if none was found there.
- Defined in src/ts/PlotBoilerplate.ts:1043

`Private` handleClick

handleClick(e): void
Private
Handle left-click event.
Parameters
- e: XMouseEvent
Returns void
Method
handleClick
- Defined in src/ts/PlotBoilerplate.ts:1712

`Private` installInputListeners

installInputListeners(): void
Returns void
- Defined in src/ts/PlotBoilerplate.ts:1992

`Private` locatePointNear

locatePointNear(point, tolerance?): IDraggable
Private
(Helper) Locates the point (index) at the passed position. Using an internal tolerance of 7 pixels.

The result is an object { type : 'bpath', pindex, cindex, pid }

Returns false if no point is near the passed position.
Parameters
- point: XYCoords
  The polygonal selection area.
- Optional tolerance: number
  The tolerance to use identtifying vertices.
Returns IDraggable
Or false if none found.

Method
locatePointNear
- Defined in src/ts/PlotBoilerplate.ts:1687

`Private` mouseDownHandler

mouseDownHandler(e): void
Private
(Helper) The mouse-down handler.

It selects vertices for dragging.
Parameters
- e: XMouseEvent
  The event to handle
Returns void
Method
mouseDownHandler.
- Defined in src/ts/PlotBoilerplate.ts:1796

`Private` mouseDragHandler

mouseDragHandler(e): void
Private
The mouse-drag handler.

It moves selected elements around or performs the panning if the ctrl-key if hold down.
Parameters
- e: XMouseEvent
  The event to handle
Returns void
Method
mouseDragHandler.
- Defined in src/ts/PlotBoilerplate.ts:1840

`Private` mouseUpHandler

mouseUpHandler(e): void
Private
The mouse-up handler.

It clears the dragging-selection.
Parameters
- e: XMouseEvent
  The event to handle
Returns void
Method
mouseUpHandler.
- Defined in src/ts/PlotBoilerplate.ts:1892

`Private` mouseWheelHandler

mouseWheelHandler(e): void
Private
The mouse-wheel handler.

It performs the zooming.
Parameters
- e: XMouseEvent
  The event to handle
Returns void
Method
mouseWheelHandler.
- Defined in src/ts/PlotBoilerplate.ts:1920

redraw

redraw(): void
Trigger redrawing of all objects.

Usually this function is automatically called when objects change.

Returns void
Method
redraw

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1452

remove

remove(drawable, redraw?, removeWithVertices?): void
Remove a drawable object.

This must be either:
```
 * a Vertex
 * a Line
 * a Vector
 * a VEllipse
 * a Circle
 * a Polygon
 * a BezierPath
 * a BPImage
 * a Triangle
```
Parameters
- drawable: Drawable | Drawable[]
  The drawable (of one of the allowed class instance) to remove.
- Optional redraw: boolean
- Optional removeWithVertices: boolean
Returns void
Method
remove

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:922

removeAll

removeAll(keepVertices?): void
Remove all elements.

If you want to keep the vertices, pass true.
Parameters
- Optional keepVertices: boolean
Returns void
Method
removeAll

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1025

removeVertex

removeVertex(vert, redraw?): void
Remove a vertex from the vertex list.
Parameters
- vert: Vertex
  The vertex to remove.
- Optional redraw: boolean
Returns void
Method
removeVertex

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1002

resizeCanvas

resizeCanvas(): void
This function resizes the canvas to the required settings (toggles fullscreen).

This function is usually only used internally but feel free to call it if resizing required.

Returns void
Method
resizeCanvas

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1605

revertMousePosition

revertMousePosition(x, y): XYCoords
Revert a transformed mouse position back to canvas coordinates.

This is the inverse function of transformMousePosition.
Parameters
- x: number
  The x component of the position to revert.
- y: number
  The y component of the position to revert.
Returns XYCoords
The canvas coordinates for the given position.

Method
revertMousePosition

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1770

saveFile

saveFile(): void
Trigger the saveFile.hook.

Returns void
Method
saveFile

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1556

selectVerticesInPolygon

selectVerticesInPolygon(polygon): void
Add all vertices inside the polygon to the current selection.
Parameters
- polygon: Polygon
  The polygonal selection area.
Returns void
Method
selectVerticesInPolygon

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1668

setConsole

setConsole(con): void
Set the console for this instance.
Parameters
- con: Console
  The new console object (default is globalThis.console).
Returns void
Method
setConsole

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:769

`Private` setOffset

setOffset(newOffset): void
Set the new draw offset.

Note: the function will not trigger any redraws.
Parameters
- newOffset: XYCoords
  The new draw offset to use.
Returns void
- Defined in src/ts/PlotBoilerplate.ts:1966

`Private` setZoom

setZoom(zoomFactorX, zoomFactorY, interactionPos): void
Set a new zoom value (and re-adjust the draw offset).

Note: the function will not trigger any redraws.
Parameters
- zoomFactorX: number
  The new horizontal zoom value.
- zoomFactorY: number
  The new vertical zoom value.
- interactionPos: Vertex
  The position of mouse/touch interaction.
Returns void
- Defined in src/ts/PlotBoilerplate.ts:1982

transformMousePosition

transformMousePosition(x, y): XYCoords
Transforms the given x-y-(mouse-)point to coordinates respecting the view offset and the zoom settings.
Parameters
- x: number
  The x position relative to the canvas.
- y: number
  The y position relative to the canvas.
Returns XYCoords
A simple object
```
{ x : Number, y : Number }
```
with the transformed coordinates.

Method
transformMousePosition

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1751

`Private` updateCSSscale

updateCSSscale(): void
Private
Update the CSS scale for the canvas depending onf the cssScale{X,Y} settings.

This function is usually only used inernally.

Returns void
Method
updateCSSscale

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:784

viewport

viewport(): Bounds
Get the current view port.

Returns Bounds
The current viewport.

Method
viewport

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:1538

`Static` `Private` _saveFile

_saveFile(pb): void
Private
This function opens a save-as file dialog and – once an output file is selected – stores the current canvas contents as an SVG image.

It is the default hook for saving files and can be overwritten.
Parameters
- pb: PlotBoilerplate
Returns void
Method
_saveFile

Instance
Memberof
PlotBoilerplate
- Defined in src/ts/PlotBoilerplate.ts:668

Class PlotBoilerplate

Classdesc

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Requires

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns PlotBoilerplate

Name

Properties

canvas

Member

Memberof

Instance

canvasSize

Member

Memberof

Instance

config

Member

Memberof

Instance

console

Member

Memberof

Instance

ctx

Member

Memberof

Deprecated

Instance

draggedElements

Member

Memberof

Instance

draw

Member

Memberof

Instance

drawConfig

Member

Memberof

Instance

drawables

Member

Memberof

Instance

eventCatcher

Member

Memberof

Instance

fill

Member

Memberof

Instance

grid

`Private` keyHandler

`Private` renderTime

`Static` `Readonly` DEFAULT_CANVAS_HEIGHT

`Static` `Readonly` DEFAULT_CANVAS_WIDTH

`Static` `Readonly` DEFAULT_CLICK_TOLERANCE

`Static` `Readonly` DEFAULT_TOUCH_TOLERANCE

`Static` `Private` Draggable

`Static` utils

fetch: {
bool: ((obj, key, fallback) => any);
func: ((obj, key, fallback) => any);
num: ((obj, key, fallback) => any);
val: ((obj, key, fallback) => any);
}

`Private` _handleColor