Using typescript for node template

@maciekm wrote:

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

Posts: 7

Participants: 2

Read full topic