added visible display of number of outputs for a filter
This commit is contained in:
parent
f237fad246
commit
d4d85a27c2
3 changed files with 34 additions and 8 deletions
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -153,7 +153,12 @@ function canvasInit() {
|
|||
var1: "{{ .Var1 }}",
|
||||
var2: "{{ .Var2 }}",
|
||||
var3: "{{ .Var3 }}",
|
||||
}
|
||||
},
|
||||
[
|
||||
{{ range .Results }}
|
||||
["{{ . }}"],
|
||||
{{ end }}
|
||||
]
|
||||
);
|
||||
{{ end }}
|
||||
{{ range .Connections }}
|
||||
|
|
Loading…
Add table
Reference in a new issue