Interacting with the widget via a script widget

In this example we are showing how you can interact with the widget via a script.

We have a mxgraphWidget in our page named mxDiagramWidget. A model is preloaded.

There’s a thing that just serves some XML and a mashup using the CodeHost widget from @BogdanMihaiciuc. The script shows some graph configuration (what cells are locked based on criterias) as well as dynamic movements of the cells. You can download the example from here You may need the following extension:

• BMCodeHost from https://github.com/ptc-iot-sharing/BMCoreUIWidgets
• Enable MonacoEditor https://github.com/ptc-iot-sharing/MonacoEditorTWX

// exectutes when the mashup finishes loading
// we save a reference to the current graph
let currentGraph;
self.mashupDidFinishLoading = function () {
    // get a reference to the mx diagram widget based on its display name
    let diagramWdg = $w('mxDiagramWidget');
    // we are going to override a method on the widget itself.
    // this method is called setNewActiveGraph. It is called internally
    // whenever a new graph is loaded with the graph as a parametner
    // first save the reference to the old method
    let _setNewActiveGraph = diagramWdg.setNewActiveGraph;
    // now replace it
    diagramWdg.setNewActiveGraph = function (graph) {
        // call the original method
        _setNewActiveGraph.apply(diagramWdg, arguments);
        // save a reference to the current graph
        currentGraph = graph;
        // now we do our custom stuff on our the graph
        // for example we disable the connection of cells
        // https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.setConnectable
        graph.setConnectable(false);
        // or specify that only cenrtain cells are movable by the user
        // https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.isCellMovable
        graph.isCellMovable = function (cell) {
            // certain conditions here
            // for example, we test the shape of the cell. We could test the value, or some other metadata
            let shape = cell.style ? cell.style.split(";")[0] : "";
            if (shape == "ellipse") {
                return true;
            } else {
                return false;
            }
        }
    }
}

self.propertyDidUpdateToValue = function (name, value) {
    if (currentGraph) {

        if (name == "rhombusX" || name == "rhombusY") {
            // get a reference to the cell 3
            let cell = currentGraph.getModel().getCell(3);
            // translate it relative to the current position
            // see https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.translateCell

            //currentGraph.translateCell(cell, parseFloat(self.rhombusX), parseFloat(self.rhombusY));

            // if you want absolut positioning 
            let currentLocationX = cell.getGeometry().x;
            let currentLocationY = cell.getGeometry().y;
            currentGraph.translateCell(cell, parseFloat(self.rhombusX) - currentLocationX,
                parseFloat(self.rhombusY) - currentLocationY);

        }
    }
}