Textblock editing in a node contained in a group

aragon · April 20, 2021, 8:49pm

Hi folks,

I’m trying to edit a textblock (the value 1000, simple in theory) but I can’t manage to do it. No msg, no errors but the textblock remains uneditable. Here’s my code (just for the green node) :

      myDiagram.nodeTemplateMap.add("COSVAL",
        $gj(go.Node, "Vertical",
          { 
		    isTreeExpanded: true,
			defaultStretch: go.GraphObject.Horizontal, 
			isShadowed: true,
			shadowColor: "lightgrey",
			shadowOffset: new go.Point(4,4),
			dragComputation: stayInGroup

		  },
		  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
		  new go.Binding("text", "text"),
          $gj(go.Panel, "Auto",
            $gj(go.Shape, "RoundedTopRectangle",
              { 
				portId: "totale",  
                fill: "#22AA99", 
				stroke: "white", 
				strokeWidth: 1,
			    fromSpot: go.Spot.Right,
				toSpot: go.Spot.Left,
				fromLinkable: false,
				toLinkable: true,
				toMaxLinks: 1,
				cursor: "pointer"
			  }),
			  $gj(go.TextBlock,
				{ 
				  margin: new go.Margin(5, 2, 5, 2), 
				  textAlign: "center",
                  stroke: "white",
                  font: "bold 12pt sans-serif"
				},
				  new go.Binding("text", "text")
				)
		   ),
          $gj(go.Panel, "Auto",
            { 
			  minSize: new go.Size(160, 20)				
			},
            $gj(go.Shape, "Rectangle", 
			  { 
				fill: "#22AA99",
				stroke: "white", 
				strokeWidth: 1,
			  }
			 ),
              $gj(go.TextBlock, 
                {
                  editable: true,
                  margin: new go.Margin(2, 2, 2, 10),
                  stroke: "white",
                  font: "bold 12pt sans-serif"
                },
                  new go.Binding("text", "valo").makeTwoWay()
				  //new go.Binding("text", "valo")
				)
          ),
          $gj(go.Panel, "Auto",
            $gj(go.Shape, "RoundedBottomRectangle",
              { 
				fill: "#22AA99",
				stroke: "white", 
				strokeWidth: 1
			  }
              //new go.Binding("fill", "role", function(r) { return r[0] === 'b' ? "lightgray" : "white"; })
			  ),
            $gj(go.Panel, "Table",
              $gj(go.Picture, BASE_URL+"img/value.png",
                { 
				  row: 0,column: 0, 
				  width: 12, height: 12, scale: 2.0, 
                  margin: new go.Margin(5, 2, 5, 2),
				}),
              $gj(go.TextBlock, "VALORE", 
                {
                  row: 0, column: 1,
                  margin: new go.Margin(2, 2, 2, 10),
                  editable: false,
                  maxSize: new go.Size(80, 40),
                  stroke: "white",
                  font: "bold 9pt sans-serif"
                }
				)
			)
          )
        )
	  );

and here’s the result in graphic:
textedit
I followed the GoJS Validation -- Northwoods Software example but I don’t understand what’s missing…
pls help thanks in advance
F

walter · April 21, 2021, 1:56am

I copied-pasted your node template and commented out some stuff that I didn’t have.
When I ran it, it worked just fine, including editing the TextBlock in the middle, as you can see:

aragon · April 21, 2021, 1:13pm

Did you try to put the node in a group? In my example I can’t edit the textblock if the node is in a group. Here’s the json code for that:

{"key":"VAL1618843131577", "text":"VALORE", "category":"COSVAL", "group":-4, "name":"VALORE", "valo":"1000", "loc":"878.522847498308 97.52284749830791"}

As you can see is quite the same, but on clicking on the text nothing happens

walter · April 21, 2021, 1:57pm

Yes, that works too:

aragon · April 21, 2021, 2:11pm

could a click event interfere with this?
I have two listener: (div = myDiagram)

      div.addEventListener("click", clickBody)
...
    function clickBody() {
  	  var wrp = document.getElementById("wrapper");
        wrp.classList.remove("toggled");
        var btnM=document.getElementById("menu-toggle");
        btnM.innerHTML='Apri Lista Opzioni';
        var ppup=document.getElementById("infoBoxHolder");
        ppup.innerHTML='';
        ppup.style.display === "none";
    }

this close an html slider
and there also a

window.addEventListener("click", hideCX, true);

that closes a context menu

I don’t know if it’s a curse (like the findtoplevelgroups) but it seems very strange this behaviour

Are there some checks I can do to verify if click event occurs on the textblock? Or a workaround like GoJS HTML Interaction -- Northwoods Software but with a textbox instead of a “select”…

walter · April 21, 2021, 3:32pm

I suppose you could override TextEditingTool.canStart to see if it is being called and whether it returns true.

aragon · April 21, 2021, 3:38pm

can you pls provide an example? I don’t know where and how write this code…

walter · April 21, 2021, 3:50pm

$(go.Diagram, . . .,
  {
    "textEditingTool.canStart": function() {
      var result = go.TextEditingTool.prototype.canStart.call(this);
      console.log("textEditingTool.canStart: ", result);
      return result;
    },
    . . .
  })

aragon · April 21, 2021, 4:04pm

thx Walter. Code inserted, console now shows textEditingTool.canStart: false.
This’s started after clicking on the Textblock of course. Why it is false? editable property is true…
I understand now that this event occurs everytime/everywhere I click on the viewport…So I guess that the textblock is unreachable by the mouse click, that’s the reason because canStart is false,
p.s.: after that modification firefox hangs and asks to close the window…

walter · April 21, 2021, 4:59pm

Yes, it will be called whenever a mouse-up event happens. Unless the ContextMenuTool, which is before the TextEditingTool in the ToolManager.mouseUpTools list, is started.

When I insert the canStart override in my sample editor app, I find that it works reliably. So I am guessing something that your click handlers are doing is causing the problem.

aragon · April 21, 2021, 11:48pm

I wonder what can interfere with this, because other handlers are related to html. All other click handlers works perfectly, just this is not working. Could be this related to z-index of the viewport? Or there’s something that’s beyond the textblock? The node is nested within a group but it’s like the textblock is behind something, maybe the group itself? There are no messages about any error on this…do I have to put a button to edit the textblock? Now I need to find a workaround, any ideas?

walter · April 22, 2021, 12:19am

z-index is an idea that’s easy to implement, if it’s the problem.

Maybe it’s a change of focus that is causing the problem?

aragon · April 22, 2021, 7:19am

It’s really odd. What’s clear is that context menu is working with right-click on the node. it’s the textblock on the node that is unreacheable with click or double click… If context menu is working I can try to implement an editing with the context menu itself… There are also some other strange behaviours regarding the drag & drop that I can’t explain… sometimes when I drag a group into another group, at the end of the add action the nested group is not yet in the memberGroup collection, maybe for the timing reason we discussed some days ago… But this, the editing, is very very strange, because there’re no functions that change focus on the viewport or inside the viewport itself. I can move the node inside the group or start a context menu, but the editing with click is disabled, despite the enabled property. Just for confirmation: TextEditor.js must stay in …/extensions directory of course to let it works…
so, resuming I put:
reference: extensions/TextEditor.js

[...]
myDiagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditor;
[...]
              $gj(go.TextBlock, 
                {
                  editable: true,
                  margin: new go.Margin(2, 2, 2, 10),
                  /*maxSize: new go.Size(80, 40),*/
                  stroke: "white",
                  font: "bold 12pt sans-serif"
                },
                  new go.Binding("text", "valo").makeTwoWay()
				)

what else?

walter · April 22, 2021, 1:26pm

Here’s the implementation of TextEditingTool.canStart, edited for clarity:

  public canStart(): boolean {
    if (!this.isEnabled) return false;
    const diagram = this.diagram;
    if (diagram === null || diagram.isReadOnly) return false;

    // don't allow a second editor to start if there's an invalid edit still ongoing
    if (. . .) return false;

    // only works with the left button
    if (!diagram.lastInput.left) return false;

    // the mouse down point needs to be near the mouse up point
    if (this.isBeyondDragSize()) return false;

    const p = diagram.lastInput.documentPoint;
    const tb = diagram.findObjectAt(p);
    if (tb === null || !(tb instanceof TextBlock)) return false;
    if (!tb.editable || !tb.part.canEdit()) return false;

    const part = tb.part;
    if (part === null) return false;
    if (this.starting === TextEditingTool.SingleClickSelected && !part.isSelected) return false;
    if (this.starting === TextEditingTool.DoubleClick && diagram.lastInput.clickCount < 2) return false;

    return true;
  }

I don’t know if that helps you or not, but it might give you some more ideas.

aragon · April 22, 2021, 2:07pm

I had an illumination…here’s the problem:

allowTextEdit: false

in the diagram definition. That was the only problem. I was unable to see it.
So that’s the solution. Unbelievable waste of time.
Thx for your support
ciao
F