You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
10 KiB
457 lines
10 KiB
/** ============================================================================
|
|
* Location of all the endpoint drawing routines.
|
|
*
|
|
* Every endpoint has its own drawing routine, which contains an endpoint definition.
|
|
*
|
|
* The endpoint definitions must have the following properies:
|
|
*
|
|
* - (0,0) is the connection point to the node it attaches to
|
|
* - The endpoints are orientated to the positive x-direction
|
|
* - The length of the endpoint is at most 1
|
|
*
|
|
* As long as the endpoint classes remain simple and not too numerous, they will
|
|
* be contained within this module.
|
|
* All classes here except `EndPoints` should be considered as private to this module.
|
|
*
|
|
* -----------------------------------------------------------------------------
|
|
* ### Further Actions
|
|
*
|
|
* After adding a new endpoint here, you also need to do the following things:
|
|
*
|
|
* - Add the new endpoint name to `network/options.js` in array `endPoints`.
|
|
* - Add the new endpoint name to the documentation.
|
|
* Scan for 'arrows.to.type` and add it to the description.
|
|
* - Add the endpoint to the examples. At the very least, add it to example
|
|
* `edgeStyles/arrowTypes`.
|
|
* ============================================================================= */
|
|
|
|
/**
|
|
* Common methods for endpoints
|
|
*
|
|
* @class
|
|
*/
|
|
class EndPoint {
|
|
|
|
/**
|
|
* Apply transformation on points for display.
|
|
*
|
|
* The following is done:
|
|
* - rotate by the specified angle
|
|
* - multiply the (normalized) coordinates by the passed length
|
|
* - offset by the target coordinates
|
|
*
|
|
* @param {Array<Point>} points
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static transform(points, arrowData) {
|
|
if (!(points instanceof Array)) {
|
|
points = [points];
|
|
}
|
|
|
|
var x = arrowData.point.x;
|
|
var y = arrowData.point.y;
|
|
var angle = arrowData.angle
|
|
var length = arrowData.length;
|
|
|
|
for(var i = 0; i < points.length; ++i) {
|
|
var p = points[i];
|
|
var xt = p.x * Math.cos(angle) - p.y * Math.sin(angle);
|
|
var yt = p.x * Math.sin(angle) + p.y * Math.cos(angle);
|
|
|
|
p.x = x + length*xt;
|
|
p.y = y + length*yt;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Draw a closed path using the given real coordinates.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {Array.<Point>} points
|
|
* @static
|
|
*/
|
|
static drawPath(ctx, points) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(points[0].x, points[0].y);
|
|
for(var i = 1; i < points.length; ++i) {
|
|
ctx.lineTo(points[i].x, points[i].y);
|
|
}
|
|
ctx.closePath();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Drawing methods for the arrow endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class Arrow extends EndPoint {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var points = [
|
|
{ x: 0 , y: 0 },
|
|
{ x:-1 , y: 0.3},
|
|
{ x:-0.9, y: 0 },
|
|
{ x:-1 , y:-0.3},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the crow endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class Crow {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var points = [
|
|
{ x:-1, y: 0},
|
|
{ x:0, y: 0.3},
|
|
{ x:-0.4, y: 0},
|
|
{ x:0, y:-0.3},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the curve endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class Curve {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var point = {x:-0.4, y:0};
|
|
EndPoint.transform(point, arrowData);
|
|
|
|
// Update endpoint style for drawing transparent arc.
|
|
ctx.strokeStyle = ctx.fillStyle;
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
|
|
|
|
// Define curve endpoint as semicircle.
|
|
var pi = Math.PI
|
|
var start_angle = arrowData.angle - pi/2;
|
|
var end_angle = arrowData.angle + pi/2;
|
|
ctx.beginPath();
|
|
ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the inverted curve endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class InvertedCurve {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var point = {x:-0.3, y:0};
|
|
EndPoint.transform(point, arrowData);
|
|
|
|
// Update endpoint style for drawing transparent arc.
|
|
ctx.strokeStyle = ctx.fillStyle;
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
|
|
|
|
// Define inverted curve endpoint as semicircle.
|
|
var pi = Math.PI
|
|
var start_angle = arrowData.angle + pi/2;
|
|
var end_angle = arrowData.angle + 3*pi/2;
|
|
ctx.beginPath();
|
|
ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the trinagle endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class Triangle {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var points = [
|
|
{ x:0.02, y:0},
|
|
{ x:-1, y: 0.3},
|
|
{ x:-1, y:-0.3},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the inverted trinagle endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class InvertedTriangle {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var points = [
|
|
{ x:0, y:0.3},
|
|
{ x:0, y: -0.3},
|
|
{ x:-1, y:0},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the circle endpoint.
|
|
*/
|
|
class Circle {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
var point = {x:-0.4, y:0};
|
|
|
|
EndPoint.transform(point, arrowData);
|
|
ctx.circle(point.x, point.y, arrowData.length*0.4);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Drawing methods for the bar endpoint.
|
|
*/
|
|
class Bar {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
/*
|
|
var points = [
|
|
{x:0, y:0.5},
|
|
{x:0, y:-0.5}
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
ctx.beginPath();
|
|
ctx.moveTo(points[0].x, points[0].y);
|
|
ctx.lineTo(points[1].x, points[1].y);
|
|
ctx.stroke();
|
|
*/
|
|
|
|
var points = [
|
|
{x:0, y:0.5},
|
|
{x:0, y:-0.5},
|
|
{x:-0.15, y:-0.5},
|
|
{x:-0.15, y:0.5},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the box endpoint.
|
|
*/
|
|
class Box {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
var points = [
|
|
{x:0, y:0.3},
|
|
{x:0, y:-0.3},
|
|
{x:-0.6, y:-0.3},
|
|
{x:-0.6, y:0.3},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the diamond endpoint.
|
|
*/
|
|
class Diamond {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
var points = [
|
|
{x:0, y:0},
|
|
{x:-0.5, y:-0.3},
|
|
{x:-1, y:0},
|
|
{x:-0.5, y:0.3},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the vee endpoint.
|
|
* @extends EndPoint
|
|
*/
|
|
class Vee {
|
|
|
|
/**
|
|
* Draw this shape at the end of a line.
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
// Normalized points of closed path, in the order that they should be drawn.
|
|
// (0, 0) is the attachment point, and the point around which should be rotated
|
|
var points = [
|
|
{ x:-1, y: 0.3},
|
|
{ x:-0.5, y: 0},
|
|
{ x:-1, y:-0.3},
|
|
{ x:0, y: 0},
|
|
];
|
|
|
|
EndPoint.transform(points, arrowData);
|
|
EndPoint.drawPath(ctx, points);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Drawing methods for the endpoints.
|
|
*/
|
|
class EndPoints {
|
|
|
|
/**
|
|
* Draw an endpoint
|
|
*
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {ArrowData} arrowData
|
|
* @static
|
|
*/
|
|
static draw(ctx, arrowData) {
|
|
var type;
|
|
if (arrowData.type) {
|
|
type = arrowData.type.toLowerCase();
|
|
}
|
|
|
|
switch (type) {
|
|
case 'circle':
|
|
Circle.draw(ctx, arrowData);
|
|
break;
|
|
case 'box':
|
|
Box.draw(ctx, arrowData);
|
|
break;
|
|
case 'crow':
|
|
Crow.draw(ctx, arrowData);
|
|
break;
|
|
case 'curve':
|
|
Curve.draw(ctx, arrowData);
|
|
break;
|
|
case 'diamond':
|
|
Diamond.draw(ctx, arrowData);
|
|
break;
|
|
case 'inv_curve':
|
|
InvertedCurve.draw(ctx, arrowData);
|
|
break;
|
|
case 'triangle':
|
|
Triangle.draw(ctx, arrowData);
|
|
break;
|
|
case 'inv_triangle':
|
|
InvertedTriangle.draw(ctx, arrowData);
|
|
break;
|
|
case 'bar':
|
|
Bar.draw(ctx, arrowData);
|
|
break;
|
|
case 'vee':
|
|
Vee.draw(ctx, arrowData);
|
|
break;
|
|
case 'arrow': // fall-through
|
|
default:
|
|
Arrow.draw(ctx, arrowData);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default EndPoints;
|