Search code examples
javascriptgojs

goJS get node into edit mode on key press


I am using goJS to make some graphs. Trying to make better user experience so that when user have one node selected and presses any alphanumerical keys, interpunctions or space bar on keyboard that node automatically go into edit mode.

After that user will write some text and when enter is pressed or mouse is clicked outside of node, text remains inside node.

So far I made this nodeClicked function and if user holds Shift + mouse click it registers event succesfully. But I can not get it into edit mode and I need help. This is my nodeClicked function:

function nodeClicked(e, obj) {  // executed by click and doubleclick handlers
      var evt = e.copy();
      var node = obj.part;
      if(evt.diagram.lastInput.shift){
          evt.diagram.commandHandler.editTextBlock(node.findObject("TEXTBLOCK"));
      }
}

and this is my node template:

myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {click: nodeClicked},
        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: 20,  // the corner has a large radius
            fill: "#cce6ff", // the default fill, if there is no data-binding
            stroke: null, 
            portId: "",  // this Shape is the Node's port, not the whole Node
            fromLinkable: false, fromLinkableDuplicates: true,
            toLinkable: false, toLinkableDuplicates: true,
            cursor: "pointer"
          }, 
          new go.Binding("fill", "fill"),
          new go.Binding("strokeDashArray", "dash"),
          new go.Binding("strokeWidth", "width")),
          $(go.TextBlock,
          {
            font: "bold 11pt helvetica, bold arial, sans-serif",
            textValidation: okName,
            isMultiline: false,
            editable: true  // editing the text automatically updates the model data
            //textEditor: window.TextEditorRadioButtons, // defined in textEditorRadioButtons.js
            // this specific TextBlock has its own choices:
          },
          new go.Binding("editable", "text", function(t, e) {
               return t === "?"; 
        }),
       new go.Binding("editable", "text", isFeEditable).makeTwoWay(fromLocation),
       new go.Binding("text").makeTwoWay())
    );

I have also read documentation on InputEvent class but I could not find any examples using it, so I am a bit confused how to implement it.


Solution

  • Your nodeClicked function assumes that there is a TextBlock with the name "TEXTBLOCK", but you don't set name on any TextBlock in your Node template.