How can I disable stateChart edit mode?

How can I disable edit mode?

Set Diagram.isReadOnly to true.

Read more at http://gojs.net/latest/intro/permissions.html.

Hi walter
isEnabled not a method for myDiagram objects




or allowInsert not a method for myDiagram objects

Yes, those are all properties (not methods) on Diagram:
http://gojs.net/latest/api/symbols/Diagram.html#isReadOnly
http://gojs.net/latest/api/symbols/Diagram.html#isEnabled
http://gojs.net/latest/api/symbols/Diagram.html#allowInsert

Your editor does not appear to know about the class that the value of myDiagram has. Note how those properties/methods that it does list are all marked with a “caution” icon, because it really does not know.

What editor are you using?

Hi
I’m using a Visual Studio editor.
In my javascript code

function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates

myDiagram =
  $(go.Diagram, "myDiagram",  // must name or refer to the DIV HTML element
    {
        // start everything in the middle of the viewport
        initialContentAlignment: go.Spot.Center,

        // have mouse wheel events zoom in and out instead of scroll up and down
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        // support double-click in background creating a new node
        "clickCreatingTool.archetypeNodeData": { text: "new node" },
        // enable undo & redo
        "undoManager.isEnabled": true
    });

// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function (e) {
    var button = document.getElementById("SaveButton");
    if (button) button.disabled = !myDiagram.isModified;
    var idx = document.title.indexOf("*");
    if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
    } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
    }
});

// define the Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    // define the node's outer shape, which will surround the TextBlock
    $(go.Shape, "RoundedRectangle",
      {
          parameter1: 10,  // the corner has a large radius
          //fill: $(go.Brush, "Linear", { 0: "#DDDDDD", 1: "#DDDDDD" }),
          stroke: "black",
          portId: "",
          fromLinkable: true,
          fromLinkableSelfNode: true,
          fromLinkableDuplicates: true,
          toLinkable: true,
          toLinkableSelfNode: true,
          toLinkableDuplicates: true,
          cursor: "pointer"
      }

      , new go.Binding("fill", "color")
      ),
    $(go.TextBlock,
      {
          font: "bold 8pt helvetica, bold arial, sans-serif",
          stroke: "white",//Durum yazı fontları
          editable: false  // editing the text automatically updates the model data
      },
      new go.Binding("text", "text").makeTwoWay()
      )
  );

// unlike the normal selection Adornment, this one includes a Button
myDiagram.nodeTemplate.selectionAdornmentTemplate =
  $(go.Adornment, "Spot",
    $(go.Panel, "Auto",
      $(go.Shape, { fill: null, stroke: "blue", strokeWidth: 2 }),
      $(go.Placeholder)  // this represents the selected Node
    ),
    // the button to create a "next" node, at the top-right corner
    $("Button",
      {
          alignment: go.Spot.TopRight,
          click: addNodeAndLink  // this function is defined below
      },
      $(go.Shape, "PlusLine", { desiredSize: new go.Size(6, 6) })
    ) // end button
  ); // end Adornment

// clicking the button inserts a new node to the right of the selected node,
// and adds a link to that new node
function addNodeAndLink(e, obj) {
    var adorn = obj.part;
    e.handled = true;
    var diagram = adorn.diagram;
    diagram.startTransaction("Add State");

    // get the node data for which the user clicked the button
    var fromNode = adorn.adornedPart;
    var fromData = fromNode.data;
    // create a new "State" data object, positioned off to the right of the adorned Node
    var toData = { text: "new" };
    var p = fromNode.location.copy();
    p.x += 20;
    toData.loc = go.Point.stringify(p);  // the "loc" property is a string, not a Point object
    // add the new node data to the model
    var model = diagram.model;
    model.addNodeData(toData);

    // create a link data from the old node data to the new node data
    var linkdata = {
        from: model.getKeyForNodeData(fromData),  // or just: fromData.id
        to: model.getKeyForNodeData(toData),
        text: "transition"
    };
    // and add the link data to the model
    model.addLinkData(linkdata);

    // select the new Node
    var newnode = diagram.findNodeForData(toData);
    diagram.select(newnode);

    diagram.commitTransaction("Add State");

    // if the new node is off-screen, scroll the diagram to show the new node
    diagram.scrollToRect(newnode.actualBounds);
}

// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
  $(go.Link,  // the whole link panel
    { curve: go.Link.Bezier, adjusting: go.Link.Stretch, reshapable: true },
    new go.Binding("curviness", "curviness"),
    new go.Binding("points").makeTwoWay(),
    $(go.Shape,  // strokeWidth: Ok un çizgisi
      { strokeWidth: 1.5 }, new go.Binding("stroke", "color")),

      //toArrow: Ok
    $(go.Shape,  // the arrowhead
      { toArrow: "standard", stroke: null }, new go.Binding("fill", "color")),

    $(go.Panel, "Auto",
     /*** GEÇİŞ ADI BACKGROUND COLOR STİL AYARLARI**/
      $(go.Shape,  // the link shape
        {
            fill: $(go.Brush, "Radial",
                    { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
            stroke: null
        }), /*** GEÇİŞ ADI STİL AYARLARI **/
      $(go.TextBlock, "transition",  // the label
        {
            textAlign: "center",
            font: "8pt helvetica, arial, sans-serif",  //Geçiş adlarının boyutunu gösterir.
            stroke: "black",
            margin: 2,
            editable: false  // editing the text automatically updates the model data
        },
        new go.Binding("text", "text").makeTwoWay())
    )
  );

// read in the JSON-format data from the "mySavedModel" element

load();

}

// Show the diagram’s model in JSON format
function save() {
$(“textarea[id*=‘mySavedModel’]”).attr(“value”, myDiagram.model.toJson());
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson($(“textarea[id*=‘mySavedModel’]”).attr(“value”));
}

So Where can I using a allowInsert property or isEnabled property?

Hi i find this place in code

myDiagram =
$(go.Diagram, “myDiagram”,
{
initialContentAlignment: go.Spot.Center,
allowCopy: false,
allowInsert: false,
allowLink: false,
isReadOnly: false,
// have mouse wheel events zoom in and out instead of scroll up and down
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelZoom,
// support double-click in background creating a new node
“clickCreatingTool.archetypeNodeData”: { text: “new node” },
// enable undo & redo
“undoManager.isEnabled”: true
});

but I couldn’t find a “disable create node” property.

If you take any GoJS diagram, setting Diagram.isReadOnly to true will automatically disable all of the built-in functionality that makes “semantic” modifications to the diagram. The user can still scroll and select and do other minor things, but they won’t be able to draw new links or delete any parts or in-place edit any text.

However the programmer can always do anything they want in their code. (That’s the first paragraph of http://gojs.net/latest/intro/permissions.html.) So if your button’s click event handler is making some changes, maybe you should change that code to be a no-op if Diagram.isReadOnly is true or if some other properties have certain values. Whatever your app needs.

thank you four your answer Walter.