added visible display of number of outputs for a filter

This commit is contained in:
BroodjeAap 2022-10-02 11:28:52 +00:00
parent f237fad246
commit d4d85a27c2
3 changed files with 34 additions and 8 deletions

View file

@ -191,8 +191,9 @@ var NodeConnection = /** @class */ (function (_super) {
}(CanvasObject));
var DiagramNode = /** @class */ (function (_super) {
__extends(DiagramNode, _super);
function DiagramNode(id, x, y, label, meta, ctx) {
function DiagramNode(id, x, y, label, meta, ctx, results) {
if (meta === void 0) { meta = {}; }
if (results === void 0) { results = new Array(); }
var _this = _super.call(this, x, y, 0, 0) || this;
_this.dragging = false;
_this.dragOrigin = new Point();
@ -207,6 +208,7 @@ var DiagramNode = /** @class */ (function (_super) {
_this.logButton = new Button(0, 0, "Log", ctx, _diagram.editNodeCallback, _this);
_this.input = new NodeIO(_this, true);
_this.output = new NodeIO(_this, false);
_this.results = results;
return _this;
}
DiagramNode.prototype.update = function (ms) {
@ -253,6 +255,13 @@ var DiagramNode = /** @class */ (function (_super) {
var typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
var typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
ctx.fillText(this.type, typeX, typeY);
var resultCount = "" + this.results.length;
var resultCountSize = ctx.measureText(resultCount);
var resultCountWidth = resultCountSize.width;
var resultCountHeight = resultCountSize.actualBoundingBoxAscent + resultCountSize.actualBoundingBoxDescent;
var resultCountX = ms.offset.x + this.x + this.width - resultCountWidth - 3 * 3;
var resultCountY = ms.offset.y + this.y + resultCountHeight + 3 * 3;
ctx.fillText(resultCount, resultCountX, resultCountY);
this.deleteButton.x = ms.offset.x + this.x;
this.deleteButton.y = ms.offset.y + this.y + this.height - this.deleteButton.height;
this.deleteButton.draw(ctx, ms);
@ -529,9 +538,10 @@ var Diagrams = /** @class */ (function () {
};
Diagrams.prototype.draw = function () {
};
Diagrams.prototype.addNode = function (id, x, y, label, meta) {
Diagrams.prototype.addNode = function (id, x, y, label, meta, results) {
if (meta === void 0) { meta = {}; }
var node = new DiagramNode(id, x, y, label, meta, this.ctx);
if (results === void 0) { results = new Array(); }
var node = new DiagramNode(id, x, y, label, meta, this.ctx, results);
this.nodes.set(id, node);
};
Diagrams.prototype.addConnection = function (A, B) {

View file

@ -227,6 +227,7 @@ class DiagramNode extends CanvasObject {
children: Array<DiagramNode>;
meta: Object = {};
results: Array<string>;
constructor(
id: number,
@ -234,7 +235,8 @@ class DiagramNode extends CanvasObject {
y: number,
label: string,
meta: Object = {},
ctx: CanvasRenderingContext2D
ctx: CanvasRenderingContext2D,
results: Array<string> = new Array(),
){
super(x, y, 0, 0)
this.id = id;
@ -249,6 +251,7 @@ class DiagramNode extends CanvasObject {
this.input = new NodeIO(this, true);
this.output = new NodeIO(this, false);
this.results = results;
}
update(ms: MouseState) {
@ -298,7 +301,15 @@ class DiagramNode extends CanvasObject {
let typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
let typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
ctx.fillText(this.type, typeX, typeY);
let resultCount = `${this.results.length}`
let resultCountSize = ctx.measureText(resultCount);
let resultCountWidth = resultCountSize.width;
let resultCountHeight = resultCountSize.actualBoundingBoxAscent + resultCountSize.actualBoundingBoxDescent;
let resultCountX = ms.offset.x + this.x + this.width - resultCountWidth - 3 * 3;
let resultCountY = ms.offset.y + this.y + resultCountHeight + 3 * 3;
ctx.fillText(resultCount, resultCountX, resultCountY)
this.deleteButton.x = ms.offset.x + this.x;
this.deleteButton.y = ms.offset.y + this.y + this.height - this.deleteButton.height;
this.deleteButton.draw(ctx, ms);
@ -559,8 +570,8 @@ class Diagrams {
}
addNode(id: number, x: number, y: number, label: string, meta: Object = {}){
let node = new DiagramNode(id, x, y, label, meta, this.ctx);
addNode(id: number, x: number, y: number, label: string, meta: Object = {}, results: Array<string> = new Array()){
let node = new DiagramNode(id, x, y, label, meta, this.ctx, results);
this.nodes.set(id, node);
}

View file

@ -153,7 +153,12 @@ function canvasInit() {
var1: "{{ .Var1 }}",
var2: "{{ .Var2 }}",
var3: "{{ .Var3 }}",
}
},
[
{{ range .Results }}
["{{ . }}"],
{{ end }}
]
);
{{ end }}
{{ range .Connections }}