582 lines
No EOL
19 KiB
TypeScript
582 lines
No EOL
19 KiB
TypeScript
class DiagramNode {
|
|
id: number;
|
|
x: number;
|
|
y: number;
|
|
label: string;
|
|
width: number;
|
|
height: number;
|
|
|
|
hover: boolean = false;
|
|
inputHover: boolean = false;
|
|
outputHover: boolean = false;
|
|
|
|
parents: Array<DiagramNode>;
|
|
children: Array<DiagramNode>;
|
|
|
|
meta: Object = {};
|
|
|
|
constructor(
|
|
id: number,
|
|
x: number,
|
|
y: number,
|
|
label: string,
|
|
meta: Object = {}
|
|
){
|
|
this.id = id;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.label = label;
|
|
this.meta = meta;
|
|
this.resize();
|
|
}
|
|
|
|
resize(){
|
|
let textSize = _diagram.ctx.measureText(this.label);
|
|
let height = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
|
|
this.width = textSize.width + height;
|
|
this.height = height;
|
|
}
|
|
|
|
pointInNode(x: number, y: number){
|
|
if (x < this.x){
|
|
return false;
|
|
}
|
|
if (y < this.y){
|
|
return false;
|
|
}
|
|
if (x > this.x + this.width) {
|
|
return false;
|
|
}
|
|
if (y > this.y + this.height) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
pointNearNode(x: number, y: number){
|
|
// including the input/output circles
|
|
if (x < this.x - this.height / 3){
|
|
return false;
|
|
}
|
|
if (y < this.y){
|
|
return false;
|
|
}
|
|
if (x > this.x + this.width + this.height / 3){
|
|
return false;
|
|
}
|
|
if (y > this.y + this.height) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
getInputCircleXY(){
|
|
return [this.x, this.y + this.height / 2]
|
|
}
|
|
|
|
getOutputCircleXY(){
|
|
return [this.x + this.width, this.y + this.height / 2]
|
|
}
|
|
|
|
pointInInputCircle(x: number, y: number){
|
|
let [circleX, circleY] = this.getInputCircleXY()
|
|
let radiusSqrd = Math.pow(this.height / 3, 2);
|
|
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
|
|
}
|
|
|
|
pointInOutputCircle(x: number, y: number){
|
|
let [circleX, circleY] = this.getOutputCircleXY()
|
|
let radiusSqrd = Math.pow(this.height / 3, 2);
|
|
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
|
|
}
|
|
}
|
|
|
|
class ContextMenuItem {
|
|
x: number = 0;
|
|
y: number = 0;
|
|
hover: boolean = false;
|
|
callback: (node: DiagramNode) => void = function(node){}
|
|
label: string;
|
|
|
|
constructor(label: string, callback: (node: DiagramNode) => void){
|
|
this.label = label;
|
|
this.callback = callback;
|
|
}
|
|
}
|
|
class ContextMenu {
|
|
x: number = 0;
|
|
y: number = 0;
|
|
active: boolean = false;
|
|
mouseOver: boolean = false;
|
|
textWidth: number = 0;
|
|
textHeight: number = 0;
|
|
textMargin: number = 0;
|
|
width: number = 0;
|
|
height: number = 0;
|
|
ctx: CanvasRenderingContext2D;
|
|
items: Array<ContextMenuItem> = new Array();
|
|
|
|
contextNode: DiagramNode | null = null;
|
|
|
|
constructor(ctx: CanvasRenderingContext2D){
|
|
this.ctx = ctx;
|
|
this.ctx.font = "20px Helvetica";
|
|
let textSize = this.ctx.measureText("SomeLongerText");
|
|
this.textWidth = textSize.width;
|
|
this.textHeight = textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent;
|
|
this.textMargin = this.textWidth / 8;
|
|
}
|
|
|
|
fitContextMenu(){
|
|
this.width = this.textWidth + this.textMargin * 2;
|
|
this.height = this.textHeight + this.textMargin * (this.items.length + 2)
|
|
let index = 0;
|
|
for (let item of this.items){
|
|
item.x = this.textMargin;
|
|
item.y = this.textHeight * index + this.textMargin * (index + 2);
|
|
index++;
|
|
}
|
|
}
|
|
|
|
pointIn(x: number, y: number){
|
|
if (x < this.x){
|
|
this.mouseOver = false;
|
|
return false;
|
|
}
|
|
if (y < this.y){
|
|
this.mouseOver = false;
|
|
return false;
|
|
}
|
|
if (x > this.x + this.width) {
|
|
this.mouseOver = false;
|
|
return false;
|
|
}
|
|
if (y > this.y + this.height) {
|
|
this.mouseOver = false;
|
|
return false;
|
|
}
|
|
for (let item of this.items){
|
|
if (y >= this.y + item.y - this.textHeight && y <= this.y + item.y + this.textHeight){
|
|
item.hover = true;
|
|
} else {
|
|
item.hover = false;
|
|
}
|
|
}
|
|
this.mouseOver = true;
|
|
return true;
|
|
}
|
|
|
|
clickOn(){
|
|
if(this.contextNode == null){
|
|
console.warn("No contextNode");
|
|
return
|
|
}
|
|
for (let item of this.items){
|
|
if(item.hover){
|
|
item.callback(this.contextNode);
|
|
}
|
|
}
|
|
}
|
|
|
|
draw(){
|
|
let cameraX = _diagram.cameraX;
|
|
let cameraY = _diagram.cameraY;
|
|
this.ctx.fillStyle = "lightblue";
|
|
this.ctx.fillRect(this.x + cameraX, this.y + cameraY, this.width, this.height);
|
|
for (let item of this.items){
|
|
this.ctx.fillStyle = this.mouseOver && item.hover ? "red" : "black";
|
|
this.ctx.fillText(item.label, this.x + item.x + cameraX, this.y + item.y + cameraY);
|
|
}
|
|
}
|
|
}
|
|
|
|
let _diagram: Diagrams;
|
|
function diargramOnResize(){
|
|
_diagram.onresize();
|
|
}
|
|
function diagramOnMouseDown(ev: MouseEvent){
|
|
_diagram.onmousedown(ev);
|
|
}
|
|
function diagramOnMouseUp(ev: MouseEvent){
|
|
_diagram.onmouseup(ev);
|
|
}
|
|
function diagramOnMouseMove(ev: MouseEvent){
|
|
_diagram.onmousemove(ev);
|
|
}
|
|
function diagramOnWheel(ev: WheelEvent){
|
|
//_diagram.onwheel(ev);
|
|
}
|
|
function diagramOnContext(ev: MouseEvent){
|
|
ev.preventDefault();
|
|
}
|
|
|
|
class Diagrams {
|
|
canvas: HTMLCanvasElement;
|
|
ctx: CanvasRenderingContext2D;
|
|
|
|
nodes: Map<number, DiagramNode> = new Map();
|
|
|
|
connections: Array<[DiagramNode, DiagramNode]> = new Array();
|
|
|
|
cameraX: number = 0; // camera position
|
|
cameraY: number = 0;
|
|
mouseX: number = 0; // mouse position on the canvas
|
|
mouseY: number = 0;
|
|
worldX: number = 0; // relative mouse position
|
|
worldY: number = 0;
|
|
|
|
panning: boolean = false;
|
|
|
|
nodeDragging: DiagramNode | null = null;
|
|
nodeHover: DiagramNode | null = null;
|
|
|
|
makingConnectionNode: DiagramNode | null = null;
|
|
|
|
scale: number = 1.0;
|
|
|
|
editNodeCallback: (node: DiagramNode) => void = function (){};
|
|
deleteNodeCallback: (node: DiagramNode) => void = function (){};
|
|
|
|
contextMenu: ContextMenu;
|
|
|
|
constructor(
|
|
canvasId: string,
|
|
editNodeCallback: (node: DiagramNode) => void = function (){},
|
|
deleteNodeCallback: (node: DiagramNode) => void = function (){}
|
|
){
|
|
this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
|
|
if (this.canvas === null){
|
|
throw `Could not getElementById ${canvasId}`;
|
|
}
|
|
let ctx = this.canvas.getContext("2d");
|
|
if (ctx === null){
|
|
throw `Could not get 2d rendering context`
|
|
}
|
|
_diagram = this;
|
|
this.ctx = ctx;
|
|
this.contextMenu = new ContextMenu(this.ctx);
|
|
this.contextMenu.items.push(new ContextMenuItem("Edit", editNodeCallback))
|
|
this.contextMenu.items.push(new ContextMenuItem("Delete", deleteNodeCallback))
|
|
this.contextMenu.fitContextMenu();
|
|
this.ctx.font = "20px Helvetica";
|
|
this.canvas.onmousemove = diagramOnMouseMove;
|
|
this.canvas.onmousedown = diagramOnMouseDown;
|
|
this.canvas.onmouseup = diagramOnMouseUp;
|
|
this.canvas.onwheel = diagramOnWheel;
|
|
this.canvas.oncontextmenu = diagramOnContext;
|
|
window.onresize = diargramOnResize;
|
|
this.editNodeCallback = editNodeCallback;
|
|
this.deleteNodeCallback = deleteNodeCallback;
|
|
}
|
|
|
|
onmousemove(ev: MouseEvent){
|
|
let canvasRect = this.canvas.getBoundingClientRect();
|
|
this.mouseX = ev.x - canvasRect.left;
|
|
this.mouseY = ev.y - canvasRect.top;
|
|
this.worldX = this.mouseX - this.cameraX;
|
|
this.worldY = this.mouseY - this.cameraY;
|
|
|
|
if (this.contextMenu.active){
|
|
this.contextMenu.pointIn(this.worldX, this.worldY);
|
|
} else if (this.nodeHover != null){
|
|
this.nodeHover.hover = false;
|
|
this.nodeHover.inputHover = false
|
|
this.nodeHover.outputHover = false
|
|
this.nodeHover = null;
|
|
}
|
|
|
|
if (this.panning){
|
|
this.cameraX += ev.movementX;
|
|
this.cameraY += ev.movementY;
|
|
}
|
|
else if (this.nodeDragging != null){
|
|
// this.nodeDragging.x = worldX - this.nodeDragging.width / 2;
|
|
// this.nodeDragging.y = worldY - this.nodeDragging.height / 2;
|
|
this.nodeDragging.x += ev.movementX;
|
|
this.nodeDragging.y += ev.movementY;
|
|
} else {
|
|
for (let [_, node] of this.nodes){
|
|
if (node.pointNearNode(this.worldX, this.worldY)){
|
|
if (node.pointInInputCircle(this.worldX, this.worldY)) {
|
|
node.inputHover = true;
|
|
this.nodeHover = node;
|
|
break;
|
|
} else if (this.makingConnectionNode == null && node.pointInOutputCircle(this.worldX, this.worldY)){
|
|
node.outputHover = true;
|
|
this.nodeHover = node;
|
|
break;
|
|
}else if (node.pointInNode(this.worldX, this.worldY)){
|
|
node.hover = true;
|
|
this.nodeHover = node;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.draw();
|
|
}
|
|
|
|
onmousedown(ev: MouseEvent){
|
|
if (ev.button != 0){
|
|
return;
|
|
}
|
|
|
|
//this.contextMenu.active = false;
|
|
|
|
let canvasRect = this.canvas.getBoundingClientRect();
|
|
this.mouseX = ev.x - canvasRect.left;
|
|
this.mouseY = ev.y - canvasRect.top;
|
|
this.worldX = this.mouseX - this.cameraX;
|
|
this.worldY = this.mouseY - this.cameraY;
|
|
for (let [_, node] of this.nodes){
|
|
if (node.pointNearNode(this.worldX, this.worldY)){
|
|
if (node.pointInInputCircle(this.worldX, this.worldY)) {
|
|
// no dragging from inputs ?
|
|
} else if (node.pointInOutputCircle(this.worldX, this.worldY)){
|
|
this.makingConnectionNode = node;
|
|
return;
|
|
}
|
|
}
|
|
if (node.pointInNode(this.worldX, this.worldY)) {
|
|
this.nodeDragging = node;
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.panning = true;
|
|
}
|
|
|
|
onmouseup(ev: MouseEvent){
|
|
if (ev.button == 2) {
|
|
for (let [_, node] of this.nodes){
|
|
if (node.pointInNode(this.worldX, this.worldY)){
|
|
this.contextMenu.x = this.worldX;
|
|
this.contextMenu.y = this.worldY;
|
|
this.contextMenu.active = true;
|
|
this.contextMenu.contextNode = node;
|
|
this.draw();
|
|
}
|
|
}
|
|
}
|
|
if (ev.button != 0){
|
|
return;
|
|
}
|
|
|
|
this.panning = false;
|
|
this.nodeDragging = null;
|
|
if (this.makingConnectionNode !== null){
|
|
for (let [_, node] of this.nodes){
|
|
if (node == this.makingConnectionNode){
|
|
continue;
|
|
}
|
|
if(node.pointInInputCircle(this.worldX, this.worldY)){
|
|
let connectionExists = false;
|
|
for (let [output, input] of this.connections) {
|
|
if (this.makingConnectionNode.id == output.id && node.id == input.id){
|
|
connectionExists = true;
|
|
}
|
|
}
|
|
if (!connectionExists){
|
|
this.addConnection(this.makingConnectionNode, node);
|
|
}
|
|
}
|
|
}
|
|
this.makingConnectionNode = null;
|
|
}
|
|
if (this.contextMenu.active){
|
|
if (this.contextMenu.pointIn(this.worldX, this.worldY)){
|
|
this.contextMenu.clickOn();
|
|
this.draw();
|
|
}
|
|
this.contextMenu.active = false;
|
|
}
|
|
|
|
for (let [output, input] of this.connections){
|
|
let [outputX, outputY] = output.getOutputCircleXY();
|
|
outputX += this.cameraX;
|
|
outputY += this.cameraY;
|
|
let [inputX, inputY] = input.getInputCircleXY();
|
|
inputX += this.cameraX;
|
|
inputY += this.cameraY;
|
|
let dX = Math.abs(outputX - inputX);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(outputX, outputY);
|
|
this.ctx.strokeStyle = "black";
|
|
let cp1x = (outputX + dX / 2);
|
|
let cp1y = outputY;
|
|
let cp2x = (inputX - dX / 2);
|
|
let cp2y = inputY;
|
|
this.ctx.bezierCurveTo(
|
|
cp1x,
|
|
cp1y,
|
|
cp2x,
|
|
cp2y,
|
|
inputX,
|
|
inputY
|
|
);
|
|
this.ctx.stroke();
|
|
this.ctx.closePath();
|
|
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
|
|
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
|
|
if (mouseOnHalfway){
|
|
this.removeConnection(output, input);
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.draw();
|
|
}
|
|
|
|
onwheel(ev: WheelEvent){
|
|
if(ev.deltaY > 0){
|
|
return;
|
|
}
|
|
this.scale = Math.min(Math.max(this.scale - 0.1, 0.1), 1.0);
|
|
this.ctx.scale(this.scale, this.scale);
|
|
}
|
|
|
|
drawBackground(){
|
|
this.ctx.fillStyle = "#D8D8D8";
|
|
this.ctx.fillRect(0,0,this.canvas.width, this.canvas.height);
|
|
this.ctx.strokeStyle = "#888";
|
|
this.ctx.lineWidth = 5;
|
|
this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
draw(){
|
|
let scale = 1 / this.scale;
|
|
this.ctx.clearRect(0,0, this.canvas.width * scale, this.canvas.height * scale);
|
|
this.drawBackground();
|
|
let fullCircleRadians = Math.PI + (Math.PI * 3);
|
|
if (this.makingConnectionNode != null){
|
|
let [circleX, circleY] = this.makingConnectionNode.getOutputCircleXY();
|
|
let dX = Math.abs((circleX + this.cameraX) - this.mouseX);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(circleX + this.cameraX, circleY + this.cameraY);
|
|
this.ctx.strokeStyle = "black";
|
|
let cp1x = (circleX + dX / 2) + this.cameraX;
|
|
let cp1y = circleY + this.cameraY;
|
|
let cp2x = (this.mouseX - dX / 2);
|
|
let cp2y = this.mouseY;
|
|
this.ctx.bezierCurveTo(
|
|
cp1x,
|
|
cp1y,
|
|
cp2x,
|
|
cp2y,
|
|
this.mouseX,
|
|
this.mouseY
|
|
);
|
|
this.ctx.stroke();
|
|
this.ctx.closePath();
|
|
}
|
|
for (let [output, input] of this.connections){
|
|
let [outputX, outputY] = output.getOutputCircleXY();
|
|
outputX += this.cameraX;
|
|
outputY += this.cameraY;
|
|
let [inputX, inputY] = input.getInputCircleXY();
|
|
inputX += this.cameraX;
|
|
inputY += this.cameraY;
|
|
let dX = Math.abs(outputX - inputX);
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(outputX, outputY);
|
|
this.ctx.strokeStyle = "black";
|
|
let cp1x = (outputX + dX / 2);
|
|
let cp1y = outputY;
|
|
let cp2x = (inputX - dX / 2);
|
|
let cp2y = inputY;
|
|
this.ctx.bezierCurveTo(
|
|
cp1x,
|
|
cp1y,
|
|
cp2x,
|
|
cp2y,
|
|
inputX,
|
|
inputY
|
|
);
|
|
this.ctx.stroke();
|
|
this.ctx.closePath();
|
|
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
|
|
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
|
|
this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
|
|
this.ctx.lineTo(halfway.x + 10, halfway.y + 10);
|
|
this.ctx.moveTo(halfway.x + 10, halfway.y - 10);
|
|
this.ctx.lineTo(halfway.x - 10, halfway.y + 10);
|
|
this.ctx.stroke();
|
|
this.ctx.closePath();
|
|
}
|
|
for (let [_, node] of this.nodes){
|
|
this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
|
|
this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height);
|
|
this.ctx.fillStyle = "#D3D3D3";
|
|
this.ctx.font = "20px Helvetica";
|
|
this.ctx.fillText(
|
|
node.label,
|
|
node.x + this.cameraX + node.height / 2,
|
|
node.y + this.cameraY + node.height / 1.5
|
|
);
|
|
this.ctx.fillStyle = node.inputHover ? "red" : "green";
|
|
this.ctx.beginPath()
|
|
this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
|
|
this.ctx.fill();
|
|
this.ctx.beginPath()
|
|
this.ctx.fillStyle = node.outputHover ? "red" : "green";
|
|
this.ctx.moveTo(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY);
|
|
this.ctx.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
|
|
this.ctx.fill();
|
|
}
|
|
if (this.contextMenu.active){
|
|
this.contextMenu.draw();
|
|
}
|
|
}
|
|
|
|
addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
|
|
this.nodes.set(id, new DiagramNode(id, x, y, label, meta));
|
|
}
|
|
|
|
addConnection(A: DiagramNode, B: DiagramNode){
|
|
this.connections.push([A, B]);
|
|
}
|
|
addConnectionById(a: number, b: number){
|
|
let A = this.nodes.get(a);
|
|
if (A === undefined){
|
|
console.error(`No node with ID: ${a}`);
|
|
return;
|
|
}
|
|
let B = this.nodes.get(b);
|
|
if (B === undefined){
|
|
console.error(`No node with ID: ${b}`);
|
|
return;
|
|
}
|
|
this.connections.push([A, B])
|
|
}
|
|
removeConnection(A: DiagramNode, B: DiagramNode){
|
|
let index = 0;
|
|
for (let [output, input] of this.connections){
|
|
if (output.id == A.id && input.id == B.id) {
|
|
this.connections.splice(index, 1);
|
|
}
|
|
index++;
|
|
}
|
|
}
|
|
|
|
onresize(){
|
|
this.fillParent();
|
|
}
|
|
|
|
fillParent(){
|
|
this.canvas.width = this.canvas.clientWidth;
|
|
this.canvas.height = this.canvas.clientHeight;
|
|
this.draw();
|
|
}
|
|
}
|
|
|
|
// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html
|
|
function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
|
|
return {
|
|
x: Math.pow(1-t,3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
|
|
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex,
|
|
y: Math.pow(1-t,3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
|
|
+ 3 * t * t * (1 - t) * cp2y + t * t * t * ey
|
|
};
|
|
} |