Class drawutilssvg

Classdesc

A helper class for basic SVG drawing operations. This class should be compatible to the default 'draw' class.

Requires

CubicBzierCurvce

Requires

Polygon

Requires

Vertex

Requires

XYCoords

Implements

DrawLib<void | SVGElement>

Index

Constructors

constructor

Properties

bufferGNode bufferedNodeDefs cache canvasSize curClassName curId drawConfig drawlibConfiguration fillShapes gNode isSecondary nodeDefs nodeStyle offset scale svgNode HEAD_XML

Constructors

constructor

new drawutilssvg(svgNode, offset, scale, canvasSize, fillShapes, drawConfig, isSecondary?, gNode?, bufferGNode?, nodeDefs?, bufferNodeDefs?, nodeStyle?): drawutilssvg
The constructor.
Parameters
- svgNode: SVGElement
  The SVG node to use.
- offset: XYCoords
  The draw offset to use.
- scale: XYCoords
  The scale factors to use.
- canvasSize: XYDimension
  The initial canvas size (use setSize to change).
- fillShapes: boolean
  Indicates if the constructed drawutils should fill all drawn shapes (if possible).
- drawConfig: DrawConfig
  The default draw config to use for CSS fallback styles.
- Optional isSecondary: boolean
  (optional) Indicates if this is the primary or secondary instance. Only primary instances manage child nodes.
- Optional gNode: SVGGElement
  (optional) Primary and seconday instances share the same <g> node.
- Optional bufferGNode: SVGGElement
- Optional nodeDefs: SVGDefsElement
- Optional bufferNodeDefs: SVGDefsElement
- Optional nodeStyle: SVGStyleElement
Returns drawutilssvg
Name
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:224

Properties

`Private` bufferGNode

bufferGNode: SVGGElement

To avoid flickering the lib draws on a buffer, which is replacing the old node at the end of the draw cycle.

Member

Memberof

drawutilssvg

Instance

`Private` bufferedNodeDefs

bufferedNodeDefs: SVGDefsElement

The buffered nodeDefs.

Member

Memberof

drawutilssvg

Instance

`Private` cache

cache: Map<string, SVGElement>

The SVG element cache. On clear() all elements are kept for possible re-use on next draw cycle.

canvasSize

canvasSize: XYDimension

Member

Memberof

drawutilssvg

Instance

`Private` curClassName

curClassName: string

The current drawable-classname.

`Private` curId

curId: string

The current drawable-ID. This can be any unique ID identifying the following drawn element.

Member

Memberof

drawutilssvg

Instance

`Private` drawConfig

drawConfig: DrawConfig

Keep the initial draw config to rebuild styles on each render loop.

drawlibConfiguration

drawlibConfiguration: DrawLibConfiguration

The current drawlib configuration to be used for all upcoming draw operations.

Member

Memberof

drawutilssvg

Instance

fillShapes

fillShapes: boolean

Member

Memberof

drawutilssvg

Instance

`Private` gNode

gNode: SVGGElement

The root elements container in the svgNode.

`Private` isSecondary

isSecondary: boolean

Indicates if this library is the primary or seconday instance (draw an fill share the same DOM nodes).

`Private` nodeDefs

nodeDefs: SVGDefsElement

A style node of type <defs>.

Member

Memberof

drawutilssvg

Instance

`Private` nodeStyle

nodeStyle: SVGStyleElement

A style node of type <style>.

Member

Memberof

drawutilssvg

Instance

offset

offset: Vertex

Member

Memberof

drawutilssvg

Instance

scale

scale: Vertex

Member

Memberof

drawutilssvg

Instance

svgNode

svgNode: SVGElement

Member

Memberof

drawutilssvg

Instance

`Static` HEAD_XML

HEAD_XML: string = ...

Methods

`Private` _addCSSClasses

_addCSSClasses(node, className): void
Private
Add custom CSS class names and the globally defined CSS classname to the given node.
Parameters
- node: SVGElement
  The SVG node to bind.
- className: string
  The additional custom classname to add.
Returns void
Method
addCSSClasses

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:480

`Private` _bindFillDraw

_bindFillDraw(node, className, color?, lineWidth?, strokeOptions?): SVGElement
Private
This is the final helper function for drawing and filling stuff and binding new nodes to the SVG document. It is not intended to be used from the outside.

When in draw mode it draws the current shape. When in fill mode it fills the current shape.

This function is usually only called internally.
Parameters
- node: SVGElement
  The node to draw/fill and bind.
- className: string
  The class name(s) to use.
- Optional color: string
  A stroke/fill color to use.
- Optional lineWidth: number
  (optional) A line width to use for drawing (default is 1).
- Optional strokeOptions: StrokeOptions
Returns SVGElement
The node itself (for chaining).

Method
_bindFillDraw

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:437

`Private` _bindNode

_bindNode(node, bindingParent?): SVGElement
Private
Bind this given node to a parent. If no parent is passed then the global node buffer will be used.
Parameters
- node: SVGElement
  The SVG node to bind.
- Optional bindingParent: SVGElement
  (optional) You may pass node other than the glober buffer node.
Returns SVGElement
The passed node itself.

Method
_bindNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:460

`Private` _configureNode

_configureNode(node, className, fillMode, color?, lineWidth?, strokeOptions?): SVGElement
Parameters
- node: SVGElement
- className: string
- fillMode: boolean
- Optional color: string
- Optional lineWidth: number
- Optional strokeOptions: StrokeOptions
Returns SVGElement
- Defined in src/ts/drawutilssvg.ts:488

`Private` _x

_x(x): number
Parameters
- x: number
Returns number
- Defined in src/ts/drawutilssvg.ts:662

`Private` _y

_y(y): number
Parameters
- y: number
Returns number
- Defined in src/ts/drawutilssvg.ts:665

addCustomStyleDefs

addCustomStyleDefs(defs): void
This is a simple way to include custom CSS class mappings to the style defs of the generated SVG.

The mapping should be of the form [style-class] -> [style-def-string]

Example: "rect.red" -> "fill: #ff0000; border: 1px solid red"
Parameters
- defs: Map<string, string>
Returns void
- Defined in src/ts/drawutilssvg.ts:339

`Private` addDefsNode

addDefsNode(): void
Adds the internal node.

Returns void
- Defined in src/ts/drawutilssvg.ts:321

`Private` addStyleDefs

addStyleDefs(drawConfig): void
Adds a default style defintion based on the passed DrawConfig. Twaek the draw config to change default colors or line thicknesses.
Parameters
- drawConfig: DrawConfig
Returns void
- Defined in src/ts/drawutilssvg.ts:274

`Private` applyStrokeOpts

applyStrokeOpts(node, strokeOptions?): void
A private helper method to apply stroke options to the current context.
Parameters
- node: SVGElement
- Optional strokeOptions: StrokeOptions
Returns void
- Defined in src/ts/drawutilssvg.ts:641

arrow

arrow(zA, zB, color, lineWidth?, headLength?, strokeOptions?): SVGElement
Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters
- zA: XYCoords
  The start point of the arrow-line.
- zB: XYCoords
  The end point of the arrow-line.
- color: string
  Any valid CSS color string.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- headLength: number = 8
  (optional) The length of the arrow head (default is 8 units).
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
arrow

Instance
Memberof
drawutilssvg
Implementation of DrawLib.arrow
- Defined in src/ts/drawutilssvg.ts:709

arrowHead

arrowHead(zA, zB, color, lineWidth?, headLength?, strokeOptions?): SVGElement
Draw just an arrow head a the end of an imaginary line (zB) of the given line width the specified (CSS-) color and size.
Parameters
- zA: XYCoords
  The start point of the arrow-line.
- zB: XYCoords
  The end point of the arrow-line.
- color: string
  Any valid CSS color string.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- headLength: number = 8
  (optional) The length of the arrow head (default is 8 pixels).
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
arrow

Instance
Memberof
DrawLib
Implementation of DrawLib.arrowHead
- Defined in src/ts/drawutilssvg.ts:800

beginDrawCycle

beginDrawCycle(renderTime): void
Called before each draw cycle. This is required for compatibility with other draw classes in the library.
Parameters
- renderTime: number
Returns void
Name
beginDrawCycle

Method
Instance
Memberof
drawutilssvg
Implementation of DrawLib.beginDrawCycle
- Defined in src/ts/drawutilssvg.ts:593

circle

circle(center, radius, color, lineWidth?, strokeOptions?): SVGElement
Draw a circle with the specified (CSS-) color and radius.

Note that if the x- and y- scales are different the result will be an ellipse rather than a circle.
Parameters
- center: XYCoords
  The center of the circle.
- radius: number
  The radius of the circle.
- color: string
  The CSS color to draw the circle with.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
circle

Instance
Memberof
drawutilssvg
Implementation of DrawLib.circle
- Defined in src/ts/drawutilssvg.ts:1113

circleArc

circleArc(center, radius, startAngle, endAngle, color, lineWidth?, strokeOptions?): SVGElement
Draw a circular arc (section of a circle) with the given CSS color.
Parameters
- center: XYCoords
  The center of the circle.
- radius: number
  The radius of the circle.
- startAngle: number
  The angle to start at.
- endAngle: number
  The angle to end at.
- color: string
  The CSS color to draw the circle with.
- Optional lineWidth: number
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
circleArc

Instance
Memberof
drawutilssvg
Implementation of DrawLib.circleArc
- Defined in src/ts/drawutilssvg.ts:1140

circleHandle

circleHandle(center, radius, color): SVGElement
Draw a circle handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped circles.
Parameters
- center: XYCoords
  The center of the circle.
- radius: number
  The radius of the circle.
- color: string
  The CSS color to draw the circle with.
Returns SVGElement
Method
circleHandle

Instance
Memberof
drawutilssvg
Implementation of DrawLib.circleHandle
- Defined in src/ts/drawutilssvg.ts:1410

clear

clear(color): void
Due to gl compatibility there is a generic 'clear' function required to avoid accessing the context object itself directly.

This function just fills the whole canvas with a single color.
Parameters
- color: string
  The color to clear with.
Returns void
Instance
Memberof
drawutilssvg
Implementation of DrawLib.clear
- Defined in src/ts/drawutilssvg.ts:1681

copyInstance

copyInstance(fillShapes): drawutilssvg
Creates a 'shallow' (non deep) copy of this instance. This implies that under the hood the same gl context and gl program will be used.
Parameters
- fillShapes: boolean
Returns drawutilssvg
- Defined in src/ts/drawutilssvg.ts:526

`Private` createSVGNode

createSVGNode(nodeName): SVGElement
Private
Create a new DOM node <svg> in the SVG namespace.
Parameters
- nodeName: string
  The node name (tag-name).
Returns SVGElement
A new element in the SVG namespace with the given node name.

Method
createSVGNode

Memberof
drawutilssvg

Instance
- Defined in src/ts/drawutilssvg.ts:380

cross

cross(center, radius, color, lineWidth?): SVGElement
Draw a cross with diagonal axes with given radius, color and lineWidth at the given position.

Note that the x's radius will not be affected by scaling.
Parameters
- center: XYCoords
  The center of the crosshair.
- radius: number
  The radius of the crosshair.
- color: string
  The CSS color to draw the crosshair with.
- Optional lineWidth: number
  (optional, default=1.0) The line width to use.
Returns SVGElement
Method
crosshair

Instance
Memberof
drawutils
Implementation of DrawLib.cross
- Defined in src/ts/drawutilssvg.ts:1468

crosshair

crosshair(center, radius, color, lineWidth?): SVGElement
Draw a crosshair with given radius and color at the given position.

Note that the crosshair radius will not be affected by scaling.
Parameters
- center: XYCoords
  The center of the crosshair.
- radius: number
  The radius of the crosshair.
- color: string
  The CSS color to draw the crosshair with.
- Optional lineWidth: number
  (optional, default=0.5) The line width to use.
Returns SVGElement
Method
crosshair

Instance
Memberof
drawutilssvg
Implementation of DrawLib.crosshair
- Defined in src/ts/drawutilssvg.ts:1434

cubicBezier

cubicBezier(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, strokeOptions?): SVGElement
Draw the given (cubic) bézier curve.
Parameters
- startPoint: XYCoords
  The start point of the cubic Bézier curve
- endPoint: XYCoords
  The end point the cubic Bézier curve.
- startControlPoint: XYCoords
  The start control point the cubic Bézier curve.
- endControlPoint: XYCoords
  The end control point the cubic Bézier curve.
- color: string
  The CSS color to draw the curve with.
- Optional lineWidth: number
  (optional) The line width to use.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
cubicBezier

Instance
Memberof
drawutilssvg
Implementation of DrawLib.cubicBezier
- Defined in src/ts/drawutilssvg.ts:957

cubicBezierArrow

cubicBezierArrow(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, headLength?, strokeOptions?): SVGElement
Draw a cubic Bézier curve and and an arrow at the end (endControlPoint) of the given line width the specified (CSS-) color and arrow size.
Parameters
- startPoint: XYCoords
  The start point of the cubic Bézier curve
- endPoint: XYCoords
  The end point the cubic Bézier curve.
- startControlPoint: XYCoords
  The start control point the cubic Bézier curve.
- endControlPoint: XYCoords
  The end control point the cubic Bézier curve.
- color: string
  The CSS color to draw the curve with.
- Optional lineWidth: number
  (optional) The line width to use.
- headLength: number = 8
  (optional) The length of the arrow head (default is 8 units).
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
cubicBezierArrow

Instance
Memberof
DrawLib
Implementation of DrawLib.cubicBezierArrow
- Defined in src/ts/drawutilssvg.ts:746

cubicBezierPath

cubicBezierPath(path, color, lineWidth?, strokeOptions?): SVGElement
Draw the given (cubic) Bézier path.

The given path must be an array with n*3+1 vertices, where n is the number of curves in the path:
```
 [ point1, point1_startControl, point2_endControl, point2, point2_startControl, point3_endControl, point3, ... pointN_endControl, pointN ]
```
Parameters
- path: XYCoords[]
  The cubic bezier path as described above.
- color: string
  The CSS colot to draw the path with.
- Optional lineWidth: number
  (optional) The line width to use.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
cubicBezierPath

Instance
Memberof
drawutilssvg
Implementation of DrawLib.cubicBezierPath
- Defined in src/ts/drawutilssvg.ts:995

diamondHandle

diamondHandle(center, size, color): SVGElement
Draw a diamond handle (square rotated by 45°) with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped diamonds.
Parameters
- center: XYCoords
  The center of the diamond.
- size: number
  The x/y-size of the diamond.
- color: string
  The CSS color to draw the diamond with.
Returns SVGElement
Method
diamondHandle

Instance
Memberof
drawutilssvg
Implementation of DrawLib.diamondHandle
- Defined in src/ts/drawutilssvg.ts:1350

dot

dot(p, color): SVGElement
Draw a 1x1 dot with the specified (CSS-) color.
Parameters
- p: XYCoords
  The position to draw the dot at.
- color: string
  The CSS color to draw the dot with.
Returns SVGElement
Method
dot

Instance
Memberof
drawutilssvg
Implementation of DrawLib.dot
- Defined in src/ts/drawutilssvg.ts:1069

ellipse

ellipse(center, radiusX, radiusY, color, lineWidth?, rotation?, strokeOptions?): SVGElement
Draw an ellipse with the specified (CSS-) color and thw two radii.
Parameters
- center: XYCoords
  The center of the ellipse.
- radiusX: number
  The radius of the ellipse.
- radiusY: number
  The radius of the ellipse.
- color: string
  The CSS color to draw the ellipse with.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- Optional rotation: number
  (optional, default=0) The rotation of the ellipse.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
ellipse

Instance
Memberof
drawutilssvg
Implementation of DrawLib.ellipse
- Defined in src/ts/drawutilssvg.ts:1179

endDrawCycle

endDrawCycle(renderTime): void
Called after each draw cycle.

This is required for compatibility with other draw classes in the library (like drawgl).
Parameters
- renderTime: number
Returns void
Name
endDrawCycle

Method
Instance
Implementation of DrawLib.endDrawCycle
- Defined in src/ts/drawutilssvg.ts:617

`Private` findElement

findElement(key, nodeName): SVGElement
Private
Retieve an old (cached) element. Only if both – key and nodeName – match, the element will be returned (null otherwise).
Parameters
- key: string
  The key of the desired element (used when re-drawing).
- nodeName: string
  The expected node name.
Returns SVGElement
Method
findElement

Memberof
drawutilssvg

Instance
- Defined in src/ts/drawutilssvg.ts:358

grid

grid(center, width, height, sizeX, sizeY, color): SVGElement
Draw a grid of horizontal and vertical lines with the given (CSS-) color.
Parameters
- center: XYCoords
  The center of the grid.
- width: number
  The total width of the grid (width/2 each to the left and to the right).
- height: number
  The total height of the grid (height/2 each to the top and to the bottom).
- sizeX: number
  The horizontal grid size.
- sizeY: number
  The vertical grid size.
- color: string
  The CSS color to draw the grid with.
Returns SVGElement
Method
grid

Instance
Memberof
drawutilssvg
Implementation of DrawLib.grid
- Defined in src/ts/drawutilssvg.ts:1279

handle

handle(startPoint, endPoint): void
Draw the given handle and handle point (used to draw interactive Bézier curves).

The colors for this are fixed and cannot be specified.
Parameters
- startPoint: XYCoords
  The start of the handle.
- endPoint: XYCoords
  The end point of the handle.
Returns void
Method
handle

Instance
Memberof
drawutilssvg
Implementation of DrawLib.handle
- Defined in src/ts/drawutilssvg.ts:1039

handleLine

handleLine(startPoint, endPoint): void
Draw a handle line (with a light grey).
Parameters
- startPoint: XYCoords
  The start point to draw the handle at.
- endPoint: XYCoords
  The end point to draw the handle at.
Returns void
Method
handleLine

Instance
Memberof
drawutilssvg
Implementation of DrawLib.handleLine
- Defined in src/ts/drawutilssvg.ts:1055

image

image(image, position, size, alpha?): SVGElement
Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters
- image: HTMLImageElement
  The image object to draw.
- position: XYCoords
  The position to draw the the upper left corner at.
- size: XYCoords
  The x/y-size to draw the image with.
- alpha: number = 1.0
  (optional, default=0.0) The transparency (1.0=opaque, 0.0=transparent).
Returns SVGElement
Method
image

Instance
Memberof
drawutilssvg
Implementation of DrawLib.image
- Defined in src/ts/drawutilssvg.ts:826

label

label(text, x, y, rotation?, color?): SVGElement
Draw a non-scaling text label at the given position.
Parameters
- text: string
  The text to draw.
- x: number
  The x-position to draw the text at.
- y: number
  The y-position to draw the text at.
- Optional rotation: number
  The (optional) rotation in radians.
- Optional color: string
  The color to use (default is black).
Returns SVGElement
Method
label

Instance
Memberof
drawutilssvg
Implementation of DrawLib.label
- Defined in src/ts/drawutilssvg.ts:1630

line

line(zA, zB, color, lineWidth?, strokeOptions?): SVGElement
Draw the line between the given two points with the specified (CSS-) color.
Parameters
- zA: XYCoords
  The start point of the line.
- zB: XYCoords
  The end point of the line.
- color: string
  Any valid CSS color string.
- Optional lineWidth: number
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
line

Instance
Memberof
drawutilssvg
Implementation of DrawLib.line
- Defined in src/ts/drawutilssvg.ts:683

`Private` makeArrowHeadNode

makeArrowHeadNode(zA, zB, color, lineWidth?, headLength?, strokeOptions?, arrowHeadBasePositionBuffer?): SVGPathElement
Private
Creates a basic arrow head node ( node) at the end of the given line coordinates. The created node will not be bound to any root node.
Parameters
- zA: XYCoords
- zB: XYCoords
- color: string
  The CSS color to draw the point with.
- Optional lineWidth: number
  (optional) The line width to use.
- headLength: number = 8
  (optional) The length of the arrow head; if none is specified then the head will be 8 absolute units long.
- Optional strokeOptions: StrokeOptions
  (optional) Additional stroke options to use.
- Optional arrowHeadBasePositionBuffer: XYCoords
  (optional) If not null, then this position will contain the arrow head's start point (after execution). Some sort of OUT variable.
Returns SVGPathElement
Method
makeArrowHeadNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1996

`Private` makeCubicBezierNode

makeCubicBezierNode(startPoint, endPoint, startControlPoint, endControlPoint, color, lineWidth?, strokeOptions?): SVGElement
Private
Creates a basic cubic Bézier path node ( node) with the given cubic Bézier data. The created node will not be bound to any root node.
Parameters
- startPoint: XYCoords
  The start point of the cubic Bézier curve
- endPoint: XYCoords
  The end point the cubic Bézier curve.
- startControlPoint: XYCoords
  The start control point the cubic Bézier curve.
- endControlPoint: XYCoords
  The end control point the cubic Bézier curve.
- color: string
  The CSS color to draw the point with.
- Optional lineWidth: number
  (optional) The line width to use.
- Optional strokeOptions: StrokeOptions
  (optional) Additional stroke options to use.
Returns SVGElement
Method
makeCubicBezierNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:2040

`Private` makeLineNode

makeLineNode(zA, zB, color, lineWidth?, strokeOptions?, classNameOverride?): SVGLineElement
Private
Creates a basic node with start and end coordinates. The created node will not be bound to any root node.
Parameters
- zA: XYCoords
  The line's start position.
- zB: XYCoords
  The line's start position.
- color: string
  The CSS color to draw the point with.
- Optional lineWidth: number
  (optional) The line width to use.
- Optional strokeOptions: StrokeOptions
  (optional) Additional stroke options to use.
- Optional classNameOverride: string
  (optional) If nothing is passed the default classname 'path' will be used.
Returns SVGLineElement
Method
makeLineNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1935

`Private` makeNode

makeNode(nodeName): SVGElement
Private
Make a new SVG node (or recycle an old one) with the given node name (circle, path, line, rect, ...).

This function is used in draw cycles to re-use old DOM nodes (in hope to boost performance).
Parameters
- nodeName: string
  The node name.
Returns SVGElement
The new node, which is not yet added to any document.

Method
makeNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:396

`Private` makePathNode

makePathNode(pathString, color, lineWidth?, strokeOptions?, classNameOverride?): SVGPathElement
Private
Creates a basic node with given path string data. The created node will not be bound to any root node.
Parameters
- pathString: string
  The path data (must be a valid path data string).
- color: string
  The CSS color to draw the point with.
- Optional lineWidth: number
  (optional) The line width to use.
- Optional strokeOptions: StrokeOptions
  (optional) Additional stroke options to use.
- Optional classNameOverride: string
  (optional) If nothing is passed the default classname 'path' will be used.
Returns SVGPathElement
Method
makePathNode

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1967

path

path(pathData, color?, lineWidth?, options?): SVGElement
Draw an SVG-like path given by the specified path data.
Parameters
- pathData: SVGPathParams
  An array of path commands and params.
- Optional color: string
  (optional) The color to draw this path with (default is null).
- Optional lineWidth: number
  (optional) the line width to use (default is 1).
- Optional options: {
  inplace?: boolean;
  } & StrokeOptions
Returns SVGElement
An instance representing the drawn path.

Method
path

Instance
Memberof
drawutils
Implementation of DrawLib.path
- Defined in src/ts/drawutilssvg.ts:1659

point

point(p, color): SVGElement
Draw the given point with the specified (CSS-) color and radius 3.
Parameters
- p: XYCoords
  The position to draw the point at.
- color: string
  The CSS color to draw the point with.
Returns SVGElement
Method
point

Instance
Memberof
drawutilssvg
Implementation of DrawLib.point
- Defined in src/ts/drawutilssvg.ts:1088

polygon

polygon(polygon, color, lineWidth?): SVGElement
Draw a polygon.
Parameters
- polygon: Polygon
  The polygon to draw.
- color: string
  The CSS color to draw the polygon with.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
Returns SVGElement
Method
polygon

Instance
Memberof
drawutilssvg
Implementation of DrawLib.polygon
- Defined in src/ts/drawutilssvg.ts:1499

polyline

polyline(vertices, isOpen, color, lineWidth?, strokeOptions?): SVGElement
Draw a polygon line (alternative function to the polygon).
Parameters
- vertices: XYCoords[]
  The polygon vertices to draw.
- isOpen: boolean
  If true the polyline will not be closed at its end.
- color: string
  The CSS color to draw the polygon with.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
polyline

Instance
Memberof
drawutilssvg
Implementation of DrawLib.polyline
- Defined in src/ts/drawutilssvg.ts:1517

raster

raster(center, width, height, sizeX, sizeY, color): SVGElement
Draw a raster of crosshairs in the given grid.

This works analogue to the grid() function
Parameters
- center: XYCoords
  The center of the raster.
- width: number
  The total width of the raster (width/2 each to the left and to the right).
- height: number
  The total height of the raster (height/2 each to the top and to the bottom).
- sizeX: number
  The horizontal raster size.
- sizeY: number
  The vertical raster size.
- color: string
  The CSS color to draw the raster with.
Returns SVGElement
Method
raster

Instance
Memberof
drawutilssvg
Implementation of DrawLib.raster
- Defined in src/ts/drawutilssvg.ts:1316

`Private` rebuildStyleDefs

rebuildStyleDefs(drawConfig): void
This method is required to re-define the global style defs. It is needed if any value in the DrawConfig changed in the meantime.
Parameters
- drawConfig: DrawConfig
Returns void
- Defined in src/ts/drawutilssvg.ts:285

rect

rect(position, width, height, color, lineWidth?, strokeOptions?): SVGElement
Draw a rectangle.
Parameters
- position: XYCoords
  The upper left corner of the rectangle.
- width: number
  The width of the rectangle.
- height: number
  The height of the rectangle.
- color: string
  The color to use.
- Optional lineWidth: number
  (optional) The line with to use (default is 1).
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Instance
Memberof
drawutilssvg
Implementation of DrawLib.rect
- Defined in src/ts/drawutilssvg.ts:1246

`Private` removeAllChildNodes

removeAllChildNodes(): void
Private
A private helper function to clear all SVG nodes from the >g> node.

Returns void
- Defined in src/ts/drawutilssvg.ts:1711

setConfiguration

setConfiguration(configuration): void
Set the current drawlib configuration.
Parameters
- configuration: DrawLibConfiguration
  The new configuration settings to use for the next render methods.
Returns void
Name
setConfiguration

Method
Implementation of DrawLib.setConfiguration
- Defined in src/ts/drawutilssvg.ts:551

setCurrentClassName

setCurrentClassName(className): void
This method shouled be called each time the currently drawn Drawable changes. Determine the class name for further usage here.
Parameters
- className: string
  A class name for further custom use cases.
Returns void
Name
setCurrentClassName

Method
Instance
Memberof
drawutilssvg
Implementation of DrawLib.setCurrentClassName
- Defined in src/ts/drawutilssvg.ts:579

setCurrentId

setCurrentId(uid): void
This method shouled be called each time the currently drawn Drawable changes. It is used by some libraries for identifying elemente on re-renders.
Parameters
- uid: string
  A UID identifying the currently drawn element(s).
Returns void
Name
setCurrentId

Method
Instance
Memberof
drawutilssvg
Implementation of DrawLib.setCurrentId
- Defined in src/ts/drawutilssvg.ts:565

setSize

setSize(canvasSize): void
Sets the size and view box of the document. Call this if canvas size changes.
Parameters
- canvasSize: XYDimension
  The new canvas size.
Returns void
Method
setSize

Instance
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:515

square

square(center, size, color, lineWidth?, strokeOptions?): SVGElement
Draw square at the given center, size and with the specified (CSS-) color.

Note that if the x-scale and the y-scale are different the result will be a rectangle rather than a square.
Parameters
- center: XYCoords
  The center of the square.
- size: number
  The size of the square.
- color: string
  The CSS color to draw the square with.
- Optional lineWidth: number
  (optional) The line width to use; default is 1.
- Optional strokeOptions: StrokeOptions
  (optional) Stroke settings to use.
Returns SVGElement
Method
square

Instance
Memberof
drawutilssvg
Implementation of DrawLib.square
- Defined in src/ts/drawutilssvg.ts:1220

squareHandle

squareHandle(center, size, color): SVGElement
Draw a square handle with the given CSS color.

It is an inherent featur of the handle functions that the drawn elements are not scaled and not distorted. So even if the user zooms in or changes the aspect ratio, the handles will be drawn as even shaped squares.
Parameters
- center: XYCoords
  The center of the square.
- size: number
  The x/y-size of the square.
- color: string
  The CSS color to draw the square with.
Returns SVGElement
Method
squareHandle

Instance
Memberof
drawutilssvg
Implementation of DrawLib.squareHandle
- Defined in src/ts/drawutilssvg.ts:1386

text

text(text, x, y, options?): SVGElement
Draw a text at the given relative position.
Parameters
- text: string
  The text to draw.
- x: number
  The x-position to draw the text at.
- y: number
  The y-position to draw the text at.
- Optional options: {
      color?: string;
      fontFamily?: string;
      fontSize?: number;
      fontStyle?: FontStyle;
      fontWeight?: FontWeight;
      lineHeight?: number;
      rotation?: number;
      textAlign?: CanvasTextAlign;
  }
  - Optional color?: string
    The Color to use.
  - Optional fontFamily?: string
    The font family to use.
  - Optional fontSize?: number
    The font size (in pixels) to use.
  - Optional fontStyle?: FontStyle
    The font style to use.
  - Optional fontWeight?: FontWeight
    The font weight to use.
  - Optional lineHeight?: number
    The line height (in pixels) to use.
  - Optional rotation?: number
    The (optional) rotation in radians.
  - Optional textAlign?: CanvasTextAlign
    The text align to use. According to the specifiactions (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) valid values are "left" || "right" || "center" || "start" || "end".
Returns SVGElement
Method
text

Instance
Memberof
drawutils
Implementation of DrawLib.text
- Defined in src/ts/drawutilssvg.ts:1560

texturedPoly

texturedPoly(textureImage, textureSize, polygon, polygonPosition, rotation): SVGElement
Draw an image at the given position with the given size.

Note: SVG images may have resizing issues at the moment.Draw a line and an arrow at the end (zB) of the given line with the specified (CSS-) color.
Parameters
- textureImage: HTMLImageElement
  The image object to draw.
- textureSize: Bounds
  The texture size to use; these are the original bounds to map the polygon vertices to.
- polygon: Polygon
  The polygon to use as clip path.
- polygonPosition: XYCoords
  The polygon's position (relative), measured at the bounding box's center.
- rotation: number
  The rotation to use for the polygon (and for the texture).
Returns SVGElement
Method
texturedPoly

Instance
Memberof
drawutilssvg
Implementation of DrawLib.texturedPoly
- Defined in src/ts/drawutilssvg.ts:872

`Static` copyPathData

copyPathData(data): SVGPathParams
Create a copy of the given path data. As path data only consists of strings and numbers, the copy will be shallow by definition.
Parameters
- data: SVGPathParams
Returns SVGPathParams
Name
copyPathData

Static
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1740

`Static` createSvg

createSvg(): SVGElement
Create a new and empty SVGElement <svg> in the svg-namespace.

Returns SVGElement
SVGElement

Name
createSvg

Static
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1728

`Static` `Private` nodeSupportsLineDash

nodeSupportsLineDash(nodeName): boolean
Parameters
- nodeName: string
Returns boolean
- Defined in src/ts/drawutilssvg.ts:1915

`Static` transformPathData

transformPathData(data, offset, scale): void
Transform the given path data (translate and scale. rotating is not intended here).
Parameters
- data: SVGPathParams
  The data to transform.
- offset: XYCoords
  The translation offset (neutral is x=0, y=0).
- scale: XYCoords
  The scale factors (neutral is x=1, y=1).
Returns void
Name
transformPathData

Static
Memberof
drawutilssvg
- Defined in src/ts/drawutilssvg.ts:1758

Class drawutilssvg

Classdesc

Requires

Requires

Requires

Requires

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns drawutilssvg

Name

Properties

Private bufferGNode

Member

Memberof

Instance

Private bufferedNodeDefs

Member

Memberof

Instance

Private cache

canvasSize

Member

Memberof

Instance

Private curClassName

Private curId

Member

Memberof

Instance

Private drawConfig

drawlibConfiguration

Member

Memberof

Instance

fillShapes

Member

Memberof

Instance

Private gNode

Private isSecondary

Private nodeDefs

Member

Memberof

Instance

Private nodeStyle

Member

Memberof

Instance

offset

Member

Memberof

Instance

scale

Member

Memberof

Instance

svgNode

Member

Memberof

Instance

Static HEAD_XML

Methods

Private _addCSSClasses

Parameters

Returns void

Method

Instance

Memberof

Private _bindFillDraw

Parameters

Returns SVGElement

Method

Instance

Memberof

`Private` bufferGNode

`Private` bufferedNodeDefs

`Private` cache

`Private` curClassName

`Private` curId

`Private` drawConfig

`Private` gNode

`Private` isSecondary

`Private` nodeDefs

`Private` nodeStyle

`Static` HEAD_XML

`Private` _addCSSClasses

`Private` _bindFillDraw

`Private` _bindNode

`Private` _configureNode

`Private` _x

`Private` _y

`Private` addDefsNode

`Private` addStyleDefs

`Private` applyStrokeOpts