Hi,
I’m new to go.js and I’m trying to use it with typescript. I have a problem when I’m trying to create a class extending go.Node and use it as a node template. I’m doing this:
class MyNodeTemplate extends go.Node {
constructor() {
super(go.Panel.Auto);
this.selectionAdorned = false;
this.resizable = true;
this.resizeObjectName = "SHAPE";
this.add(go.GraphObject.make(go.Shape,
{
name: "SHAPE",
width: 60,
height: 60
},
new go.Binding("figure"),
new go.Binding("fill", "fill", null)
));
this.add(go.GraphObject.make(go.TextBlock,
{
font: "16pt serif"
},
new go.Binding("text", "fill")
));
}
}
var nodeTemplate = new MyNodeTemplate();
class MyDiagram extends go.Diagram {
constructor(id?: string) {
super(id);
this.undoManager.isEnabled = true;
this.nodeTemplate = nodeTemplate;
}
}
window.onload = () => {
var myDiagram = new MyDiagram("myDiagramDiv");
myDiagram.model.nodeDataArray = [{ figure: "Triangle", fill: "Blue"}];
};
Unfortunately the result I’m getting is not as expected (please note a black background):
Everything is working when I’m doing inheritance by hand in java script like this (background is white as expected):
var MyNodeTemplate2 = function () {
go.Node.call(this, go.Panel.Auto);
this.selectionAdorned = false;
this.resizable = true;
this.resizeObjectName = "SHAPE";
this.add(go.GraphObject.make(go.Shape,
{
name: "SHAPE",
width: 60,
height: 60
},
new go.Binding("figure"),
new go.Binding("fill", "fill", null)
));
this.add(go.GraphObject.make(go.TextBlock,
{
font: "16pt serif"
},
new go.Binding("text", "fill")
));
}
MyNodeTemplate2.prototype = Object.create(go.Node.prototype);
var nodeTemplate = new MyNodeTemplate2();
For the record, this is a js code generated by typescript:
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var MyNodeTemplate = (function (_super) {
__extends(MyNodeTemplate, _super);
function MyNodeTemplate() {
_super.call(this, go.Panel.Auto);
this.selectionAdorned = false;
this.resizable = true;
this.resizeObjectName = "SHAPE";
this.add(go.GraphObject.make(go.Shape, {
name: "SHAPE",
width: 60,
height: 60
}, new go.Binding("figure"), new go.Binding("fill", "fill", null)));
this.add(go.GraphObject.make(go.TextBlock, {
font: "16pt serif"
}, new go.Binding("text", "fill")));
}
return MyNodeTemplate;
}(go.Node));
var nodeTemplate = new MyNodeTemplate();
I can’t figure out why it is not working as expected. Is there anything I’m missing?
Thanks,
Maciek