How to convert go.Diagram(javascript) to typescript

GoJS
1

Hi there…

I have written some code for diagram

var CreateMainCanvas = function () {
        return goJs(go.Diagram, "canvasDiv",
            {
                padding: 0,
                scrollMode: go.Diagram.InfiniteScroll,
                initialPosition: new go.Point(0, 0),
                initialDocumentSpot: go.Spot.Center,
                initialViewportSpot: go.Spot.Center,
                initialContentAlignment: go.Spot.Center,
                //resizingTool: new laneResizingTool(),
                //layout: goJs(groupLayout),
                isReadOnly: isCanvasReadOnly,
                mouseDragOver: function (e) {
                    if (CielProcessProcessDesignCreateJob.executeDragOver) {
                        CielProcessProcessDesignCreateJob.executeDragOver = false;
                        var nodeCount = 0;
                        var it = e.diagram.toolManager.draggingTool.draggingParts.iterator;
                        while (it.next()) {
                            if (nodeCount > 0) {
                                var node = it.value;
                                node.containingGroup.collapseSubGraph();
                            }
                            nodeCount++;
                        }
                    }
                },
                externalObjectsDropped: function (e) {
                    canvas.commandHandler.expandSubGraph();
                    canvas.zoomToFit();
                    e.subject.each(function (node) {
                        node.opacity = 1;
                        if (node.data.category === "File") {
                            /////  Need to check 
                            CielProcessProcessDesignCreateJob.modelData.updateModel(node, CielProcessProcessDesignCreateJob.tablesPalette);
                            $("#file-modal").modal('show');
                        }
                        else if (node.data.category === "Table" && node.data.TABLETYPE === TableTypeEnum.New) {
                            node.data.TempID = CielProcessProcessDesignCreateJob.tempTablesHandle.generateNewID();
                            CielProcessProcessDesignCreateJob.tempTablesHandle.addTableToList(JSON.parse(JSON.stringify(node.data)));
                        }
                    });
                },
                allowDrop: true,
                mouseDrop: function (e) {FinishDrop(e, null); },
                "animationManager.duration": 600,
                "undoManager.isEnabled": true,
                "commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue", category: "OfNodes" },
                "linkingTool.isUnconnectedLinkValid": false,
                "relinkingTool.isUnconnectedLinkValid": false,
                "linkingTool.linkValidation": function (from, fromport, to, toport, link) {
                    if (from.data.category === to.data.category) {
                        return false;
                    }

                if (from.data.category === "FileWithTable" && to.data.category !== "Step") {
                    return false;
                }

                if (from.findLinksBetween(to, null, null).count == 1) {
                    return false;
                }
                if (from.data.category === "Step") {
                    if (from.findNodesOutOf().count === 1) {
                        return false;
                    }
                    else {
                        if (from.findNodesOutOf().count === 0 && to.data.category !== "Table") {
                            return false;
                        }
                        return true;
                    }
                } else {
                    return true;
                }
            } 
            
        });
}

above code is working fine in JavaScript but in case of TypeScript it shows error then loading diagram

can anyone help me to update code or how can i rewrite above code so that it works fine

2

What error are you getting? Is it a compilation error?

My experience has been that all JavaScript is valid TypeScript. We know that many customers use TypeScript when building their app using GoJS, including many who are using Angular 2. See for example the Angular2-minimal project in the projects subdirectory.

3

Error is:

Uncaught Error: ToolManager.replaceStandardTool:newtool value is not an instance of Tool: [object Object]
    at Object.k (go.js:13)
    at Object.Cd (go.js:15)
    at Object.A (go.js:14)
    at Gj (go.js:663)
    at Eg.<anonymous> (go.js:666)
    at Object.Xt (go.js:26)
    at cn (go.js:1048)
    at an (go.js:1040)
4 
                "animationManager.duration": 600,
                "undoManager.isEnabled": true,
                "commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue", category: "OfNodes" },
                "linkingTool.isUnconnectedLinkValid": false,
                "relinkingTool.isUnconnectedLinkValid": false,
                "linkingTool.linkValidation": function (from, fromport, to, toport, link) {
                    if (from.data.category === to.data.category) {
                        return false;
                    }

            if (from.data.category === "FileWithTable" && to.data.category !== "Step") {
                return false;
            }

            if (from.findLinksBetween(to, null, null).count == 1) {
                return false;
            }
            if (from.data.category === "Step") {
                if (from.findNodesOutOf().count === 1) {
                    return false;
                }
                else {
                    if (from.findNodesOutOf().count === 0 && to.data.category !== "Table") {
                        return false;
                    }
                    return true;
                }
            } else {
                return true;
            }
        }

when commenting above code in problem it works fine…

5

Are you talking about replacing the ToolManager.resizingTool with an instance of your tool? How did you define that class?

Here are examples of other GoJS subclasses in TypeScript: Possible to click endpoints to create link via LinkingTool? - #4 by walter