@phun-ky/arclace / Arclace
Class: Arclace
Defined in: src/Arclace.ts:71
Draws and maintains SVG lines between DOM elements.
An instance adds one <svg class="arc-svg"> overlay to its container and draws every connection into it.
Example
import { Arclace } from '@phun-ky/arclace';
const arclace = new Arclace({ container: '#diagram' });
arclace.connect('#a', '#b', { arrow: 'end', label: 'depends on' });Constructors
Constructor
new Arclace(
options?):Arclace
Defined in: src/Arclace.ts:97
Parameters
options?
ArcOptionsType = {}
Returns
Arclace
Throws
When an option has the wrong type.
Throws
When an option is out of range.
Throws
When there is no DOM, or the container can't be found.
Properties
container
readonlycontainer:HTMLElement
Defined in: src/Arclace.ts:75
The element the overlay was added to.
svg
readonlysvg:SVGSVGElement
Defined in: src/Arclace.ts:80
The SVG overlay all lines are drawn in.
Accessors
connections
Get Signature
get connections():
Connection[]
Defined in: src/Arclace.ts:139
All current connections, in the order they were made.
Returns
Methods
clear()
clear():
void
Defined in: src/Arclace.ts:298
Removes every connection.
Returns
void
connect()
connect(
startElement,endElement,options?):Connection
Defined in: src/Arclace.ts:158
Connects two elements and draws the line right away.
Parameters
startElement
The element (or selector) the line starts at.
endElement
The element (or selector) the line ends at.
options?
Options for this connection, merged over the instance defaults.
Returns
Throws
When an element or an option has the wrong type.
Throws
When an option is out of range.
Throws
When an element can't be found, the id is taken or the instance has been destroyed. Nothing is added.
Example
const connection = arclace.connect(a, b, { type: 'orthogonal', arrow: 'end' });connectAll()
connectAll(
definitions):Connection[]
Defined in: src/Arclace.ts:189
Connects many pairs of elements and draws them in one go. Every definition is checked first, so either all of them are added or none.
Parameters
definitions
Returns
Throws
When definitions isn't an array, or an element or an option has the wrong type.
Throws
When an option is out of range.
Throws
When an element can't be found, an id is taken or repeated, or the instance has been destroyed.
Example
arclace.connectAll([
{ startElement: '#a', endElement: '#b' },
{ startElement: '#a', endElement: '#c', dashed: true }
]);destroy()
destroy():
void
Defined in: src/Arclace.ts:406
Removes every connection and the overlay, and stops listening for changes. The instance can't be used afterwards.
Returns
void
disconnect()
disconnect(
target):void
Defined in: src/Arclace.ts:266
Removes connections.
Parameters
target
string | Element | Connection
A connection, a connection id, or an element (or selector) whose connections should all be removed. Targets that match nothing, and null or undefined, are ignored.
Returns
void
Throws
When the target is another kind of value.
Throws
When a string is neither an id nor a valid selector.
Example
arclace.disconnect(connection);
arclace.disconnect('my-connection-id');
arclace.disconnect(document.querySelector('#a'));find()
find(
target):Connection[]
Defined in: src/Arclace.ts:236
Returns every connection that starts or ends at an element. A selector that matches nothing returns an empty array.
Parameters
target
Returns
Throws
When the target is neither an element nor a string.
Throws
When the selector is invalid.
get()
get(
id):Connection|undefined
Defined in: src/Arclace.ts:225
Returns the connection with the given id.
Parameters
id
string
Returns
Connection | undefined
update()
update():
void
Defined in: src/Arclace.ts:314
Remeasures every element and redraws every connection. Called automatically when autoUpdate is on; call it yourself after moving elements in ways the page can't observe.
Returns
void