Installation

With npm:

npm install @rnacanvas/draw.bonds.curved

Usage

All exports of this package can be accessed as named imports.

// an example import
import { CurvedBond } from '@rnacanvas/draw.bonds.curved';

class CurvedBond

A bond that can have one or more curves in it (often used for tertiary bonds in drawings).

static between()

Creates and returns a new curved bond between two bases.

var drawing = new Drawing();

// necessary for bounding box calculations to work correctly
document.body.append(drawing.domNode);

var base1 = drawing.addBase('G');
var base2 = drawing.addBase('C');

var bond = CurvedBond.betweeen(base1, base2);

bond.base1 === base1; // true
bond.base2 === base2; // true

// the `static between()` method automatically assigns a UUID
bond.domNode.id.length >= 36; // true

readonly id

The ID of a curved bond.

(Corresponds to the ID attribute of the underlying SVG path element.)

As with DOM elements in general, the ID of a curved bond shouldn't be changed after it's been set.

var drawing = new Drawing();

document.body.append(drawing.domNode);

var domNode = document.createElementNS('http://www.w3.org/2000/svg', 'path');

domNode.id = 'id-12345';

drawing.domNode.append(domNode);

var base1 = drawing.addBase('G');
var base2 = drawing.addBase('C');

var bond = new CurvedBond(domNode, base1, base2);

bond.id; // "id-12345"

readonly base1

Base 1 that the curved bond is attached to.

var drawing = new Drawing();

document.body.append(drawing.domNode);

var base1 = drawing.addBase('G');
var base2 = drawing.addBase('C');

var bond = CurvedBond.between(base1, base2);

bond.base1 === base1; // true

readonly base2

Base 2 that the curved bond is attached to.

var drawing = new Drawing();

document.body.append(drawing.domNode);

var base1 = drawing.addBase('G');
var base2 = drawing.addBase('C');

var bond = CurvedBond.between(base1, base2);

bond.base2 === base2; // true

drag()

Drags the curved bond by a vector (e.g., the movement of the mouse).

var drawing = new Drawing();

document.body.append(drawing.domNode);

var base1 = drawing.addBase('G');
var base2 = drawing.addBase('C');

base1.centerPoint.x = 0;
base1.centerPoint.y = 0;

base2.centerPoint.x = 10;
base2.centerPoiny.y = 20;

var bond = CurvedBond.between(base1, base2);

// drag by the vector (3, 4)
bond.drag(3, 4);

Specifying the dragPoint gives control over which point of a curved bond gets dragged.

(The dragPoint represents the point at which the mouse made contact with the curved bond when initiating the drag action, for instance.)

// drag the starting point of the curved bond
bond.drag(3, 4, { dragPoint: bond.atLength(0) });

// drag the end point of the curved bond
bond.drag(3, 4, { dragPoint: bond.atLength(bond.length) });

Specifying the dragGroup can prevent dragging from taking place if bases 1 or 2 are already being dragged.

(The dragGroup represents the other selected elements that are also being dragged with a curved bond.)

// no dragging (base 1 is already being dragged)
bond.drag(3, 4, { dragGroup: new Set([bond.base1.domNode]) });

// no dragging (base 2 is already being dragged)
bond.drag(3, 4, { dragGroup: new Set([bond.base2.domNode]) });

The dragGroup should fulfill the following Collection interface (for SVG graphics elements).

interface Collection {
  has(ele: SVGGraphicsElement): boolean;
}