broodjeaap/go-watch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

can edit nodes now

Browse source
This commit is contained in:
BroodjeAap 2022-09-18 14:46:17 +00:00
parent dff5a7d5b9
commit 99d26f7721
5 changed files with 185 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
static/diagram.js
View file

@ -1,5 +1,5 @@
var DiagramNode = /** @class */ (function () {
function DiagramNode(id, x, y, width, height, label, meta) {
function DiagramNode(id, x, y, label, meta) {
if (meta === void 0) { meta = {}; }
this.hover = false;
this.inputHover = false;
@ -8,11 +8,16 @@ var DiagramNode = /** @class */ (function () {
this.id = id;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.label = label;
this.meta = meta;
this.resize();
}
DiagramNode.prototype.resize = function () {
var textSize = _diagram.ctx.measureText(this.label);
var height = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.width = textSize.width + height;
this.height = height;
};
DiagramNode.prototype.pointInNode = function (x, y) {
if (x < this.x) {
return false;
@ -82,7 +87,8 @@ function diagramOnContext(ev) {
ev.preventDefault();
}
var Diagrams = /** @class */ (function () {
function Diagrams(canvasId) {
function Diagrams(canvasId, editNodeCallback) {
if (editNodeCallback === void 0) { editNodeCallback = function () { }; }
this.nodes = new Array();
this.connections = new Array();
this.cameraX = 0; // camera position
@ -96,6 +102,7 @@ var Diagrams = /** @class */ (function () {
this.nodeHover = null;
this.makingConnectionNode = null;
this.scale = 1.0;
this.editNodeCallback = function () { };
this.canvas = document.getElementById(canvasId);
if (this.canvas === null) {
throw "Could not getElementById " + canvasId;
@ -113,6 +120,7 @@ var Diagrams = /** @class */ (function () {
this.canvas.onwheel = diagramOnWheel;
this.canvas.oncontextmenu = diagramOnContext;
window.onresize = diargramOnResize;
this.editNodeCallback = editNodeCallback;
}
Diagrams.prototype.onmousemove = function (ev) {
var canvasRect = this.canvas.getBoundingClientRect();
@ -188,21 +196,29 @@ var Diagrams = /** @class */ (function () {
this.panning = true;
};
Diagrams.prototype.onmouseup = function (ev) {
if (ev.button == 2) {
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
var node = _a[_i];
if (node.pointInNode(this.worldX, this.worldY)) {
this.editNodeCallback(node);
}
}
}
if (ev.button != 0) {
return;
}
this.panning = false;
this.nodeDragging = null;
if (this.makingConnectionNode !== null) {
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
var node = _a[_i];
for (var _b = 0, _c = this.nodes; _b < _c.length; _b++) {
var node = _c[_b];
if (node == this.makingConnectionNode) {
continue;
}
if (node.pointInInputCircle(this.worldX, this.worldY)) {
var connectionExists = false;
for (var _b = 0, _c = this.connections; _b < _c.length; _b++) {
var _d = _c[_b], output = _d[0], input = _d[1];
for (var _d = 0, _e = this.connections; _d < _e.length; _d++) {
var _f = _e[_d], output = _f[0], input = _f[1];
if (this.makingConnectionNode.id == output.id && node.id == input.id) {
connectionExists = true;
}
@ -214,12 +230,12 @@ var Diagrams = /** @class */ (function () {
}
this.makingConnectionNode = null;
}
for (var _e = 0, _f = this.connections; _e < _f.length; _e++) {
var _g = _f[_e], output = _g[0], input = _g[1];
var _h = output.getOutputCircleXY(), outputX = _h[0], outputY = _h[1];
for (var _g = 0, _h = this.connections; _g < _h.length; _g++) {
var _j = _h[_g], output = _j[0], input = _j[1];
var _k = output.getOutputCircleXY(), outputX = _k[0], outputY = _k[1];
outputX += this.cameraX;
outputY += this.cameraY;
var _j = input.getInputCircleXY(), inputX = _j[0], inputY = _j[1];
var _l = input.getInputCircleXY(), inputX = _l[0], inputY = _l[1];
inputX += this.cameraX;
inputY += this.cameraY;
var dX = Math.abs(outputX - inputX);
@ -325,9 +341,7 @@ var Diagrams = /** @class */ (function () {
};
Diagrams.prototype.addNode = function (id, x, y, label, meta) {
if (meta === void 0) { meta = {}; }
var textSize = this.ctx.measureText(label);
var textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
this.nodes.push(new DiagramNode(id, x, y, label, meta));
};
Diagrams.prototype.addConnection = function (A, B) {
this.connections.push([A, B]);

29
static/diagram.ts
View file

@ -19,18 +19,22 @@ class DiagramNode {
id: number,
x: number,
y: number,
width: number,
height: number,
label: string,
meta: Object = {}
){
this.id = id;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
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){
@ -131,7 +135,9 @@ class Diagrams {
scale: number = 1.0;
constructor(canvasId: string){
editNodeCallback: (node: DiagramNode) => void = function (){};
constructor(canvasId: string, editNodeCallback: (node: DiagramNode) => void = function (){}){
this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
if (this.canvas === null){
throw `Could not getElementById ${canvasId}`;
@ -149,7 +155,7 @@ class Diagrams {
this.canvas.onwheel = diagramOnWheel;
this.canvas.oncontextmenu = diagramOnContext;
window.onresize = diargramOnResize;
this.editNodeCallback = editNodeCallback;
}
onmousemove(ev: MouseEvent){
@ -226,6 +232,13 @@ class Diagrams {
}
onmouseup(ev: MouseEvent){
if (ev.button == 2) {
for (let node of this.nodes){
if (node.pointInNode(this.worldX, this.worldY)){
this.editNodeCallback(node);
}
}
}
if (ev.button != 0){
return;
}
@ -389,9 +402,7 @@ class Diagrams {
}
addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
let textSize = this.ctx.measureText(label);
let textHeight = 2 * (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent);
this.nodes.push(new DiagramNode(id, x, y, textSize.width + textHeight, textHeight, label, meta));
this.nodes.push(new DiagramNode(id, x, y, label, meta));
}
addConnection(A: DiagramNode, B: DiagramNode){

60
static/edit.js
View file

@ -81,10 +81,66 @@ function onSubmitNewFilter() {
var3: var3Input.value
});
}
function editNode(node) {
console.log(node);
var addFilterButton = document.getElementById("filterButton");
addFilterButton.click();
var name = node.label;
// @ts-ignore
var type = node.meta.type;
// @ts-ignore
var var1 = node.meta.var1;
// @ts-ignore
var var2 = node.meta.var2;
if (var2 === undefined) {
var2 = "";
}
// @ts-ignore
var var3 = node.meta.var3;
if (var3 === undefined) {
var3 = "";
}
var nameInput = document.getElementById("nameInput");
nameInput.value = name;
var selectType = document.getElementById("typeInput");
selectType.value = type;
var var1Input = document.getElementById("var1Input");
var1Input.value = var1;
var var2Input = document.getElementById("var2Input");
var2Input.value = var2;
var var3Input = document.getElementById("var3Input");
var3Input.value = var3;
onTypeChange();
var submitButton = document.getElementById("submitFilterButton");
submitButton.innerHTML = "Save";
submitButton.onclick = function () { submitEditNode(node); };
}
function submitEditNode(node) {
var nameInput = document.getElementById("nameInput");
node.label = nameInput.value;
var selectType = document.getElementById("typeInput");
// @ts-ignore
node.meta.type = selectType.value;
var var1Input = document.getElementById("var1Input");
// @ts-ignore
node.meta.var1 = var1Input.value;
var var2Input = document.getElementById("var2Input");
// @ts-ignore
node.meta.var2 = var2Input.value;
var var3Input = document.getElementById("var3Input");
// @ts-ignore
node.meta.var3 = var3Input.value;
node.resize();
}
function addFilterButtonClicked() {
var submitButton = document.getElementById("submitFilterButton");
submitButton.onclick = onSubmitNewFilter;
submitButton.innerHTML = "Add Filter";
}
function newFilterInit() {
var select = document.getElementById("typeInput");
select.onchange = onTypeChange;
var submitButton = document.getElementById("submitFilterButton");
submitButton.onclick = onSubmitNewFilter;
var addFilterButton = document.getElementById("filterButton");
addFilterButton.onclick = addFilterButtonClicked;
}
document.addEventListener('DOMContentLoaded', newFilterInit, false);

75
static/edit.ts
View file

@ -95,11 +95,82 @@ function onSubmitNewFilter(){
})
}
function editNode(node: DiagramNode){
console.log(node);
let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
addFilterButton.click();
let name = node.label;
// @ts-ignore
let type = node.meta.type;
// @ts-ignore
let var1 = node.meta.var1;
// @ts-ignore
let var2 = node.meta.var2;
if (var2 === undefined){
var2 = "";
}
// @ts-ignore
let var3 = node.meta.var3;
if (var3 === undefined){
var3 = "";
}
let nameInput = document.getElementById("nameInput") as HTMLInputElement;
nameInput.value = name;
let selectType = document.getElementById("typeInput") as HTMLSelectElement;
selectType.value = type;
let var1Input = document.getElementById("var1Input") as HTMLInputElement;
var1Input.value = var1;
let var2Input = document.getElementById("var2Input") as HTMLInputElement;
var2Input.value = var2;
let var3Input = document.getElementById("var3Input") as HTMLInputElement;
var3Input.value = var3;
onTypeChange();
let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
submitButton.innerHTML = "Save";
submitButton.onclick = function() {submitEditNode(node);}
}
function submitEditNode(node: DiagramNode){
let nameInput = document.getElementById("nameInput") as HTMLInputElement;
node.label = nameInput.value;
let selectType = document.getElementById("typeInput") as HTMLSelectElement;
// @ts-ignore
node.meta.type = selectType.value
let var1Input = document.getElementById("var1Input") as HTMLInputElement;
// @ts-ignore
node.meta.var1 = var1Input.value;
let var2Input = document.getElementById("var2Input") as HTMLInputElement;
// @ts-ignore
node.meta.var2 = var2Input.value;
let var3Input = document.getElementById("var3Input") as HTMLInputElement;
// @ts-ignore
node.meta.var3 = var3Input.value;
node.resize();
}
function addFilterButtonClicked(){
let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
submitButton.onclick = onSubmitNewFilter
submitButton.innerHTML = "Add Filter"
}
function newFilterInit(){
let select = document.getElementById("typeInput") as HTMLSelectElement;
select.onchange = onTypeChange;
let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
submitButton.onclick = onSubmitNewFilter
let addFilterButton = document.getElementById("filterButton") as HTMLButtonElement;
addFilterButton.onclick = addFilterButtonClicked
}
document.addEventListener('DOMContentLoaded', newFilterInit, false);

10
templates/diagrams.html
View file

@ -12,7 +12,7 @@
{{ define "left" }}
<div>
<button type="button" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#FilterModal">
<button type="button" id="filterButton" class="btn btn-primary btn-block btn-sm" data-bs-toggle="modal" data-bs-target="#FilterModal">
Add Filter
</button>
</div>
@ -70,10 +70,10 @@
<script>
var diagrams;
function canvasInit() {
diagrams = new Diagrams("canvas");
diagrams.addNode(1, 100, 100, "Test");
diagrams.addNode(2, 300, 300, "Test2");
diagrams.addNode(3, 500, 500, "A much longer name");
diagrams = new Diagrams("canvas", editNode);
diagrams.addNode(1, 100, 100, "Test", {type: "json"});
diagrams.addNode(2, 300, 300, "Test2", {type: "css"});
diagrams.addNode(3, 500, 500, "A much longer name", {type: "replace"});
diagrams.fillParent();
}
document.addEventListener('DOMContentLoaded', canvasInit, false);