Editable: True in TextBlock is not working properly

Editable: True is not working for all the textblocks in the diagram. I can able to edit but the previous value is overlapping with the new value. The editable icon with empty textblock is not coming when I double click the text. Below is my code
// For Applinks
$(go.TextBlock,
{
name: “linkTextBlock”,
textAlign: “center”,
font: “9pt helvetica, arial, sans-serif”,
textValidation: this.validateTextLabel,
margin: 14
},
new go.Binding(“editable”, “”, function (v) {
if (v.category === “applink”) {
return false;
} else {
return true;
}
}),
new go.Binding(“text”, “linkText”).makeTwoWay()),

// For grouping
var backgroundtemplate =
(go.Node, "Auto", { locationSpot: go.Spot.TopCenter, isShadowed: false, selectable: true, resizable: true, desiredSize: new go.Size(150, 150), layerName: "Background", avoidable: false, selectionAdorned: false }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), (go.Shape, “RoundedRectangle”, roundedBackgroundRectangleParams, {
name: “SHAPE”,
fill: “#fff”,
strokeWidth: 1,
stroke: ‘#e3e3e3’,
fromLinkable: false,
fromLinkableSelfNode: false,
fromLinkableDuplicates: false,
toLinkable: false,
toLinkableSelfNode: false,
toLinkableDuplicates: false
}),
(go.Panel, "Vertical", { alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft, }, (go.TextBlock, {
margin: 10,
editable: true,
font: ‘14pt sans-serif’
},
new go.Binding(“text”).makeTwoWay()
)
)
);

I’m finding it hard to read your code – please format and indent correctly. Surround code with lines consisting of only triple backbones.

If two different GraphObjects are overlapping, and you don’t want them to be, you need to change their properties so that their shared Panel will lay them out differently.

When I try to edit the textblock, the new text overlaps with old text. But when I saw in Gojs editable option we are getting the editable box on click as attached screenshot. I am not getting that editable icon.

Here is my code

var linkTemplate =
      $(go.Link,
        {
          curve: go.Link.Bezier,
          adjusting: go.Link.Stretch,
          selectionAdorned: false,
          corner: 20,
        }, {
        fromPortChanged: this.updateLinkColor,
        toPortChanged: this.updateLinkColor
      }, {
        reshapable: true,
        resegmentable: false
      },

        new go.Binding("points").makeTwoWay(),
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        new go.Binding("adusting").makeTwoWay(),
        $(go.Shape,
          {
            name: "SHAPE",
            strokeWidth: 2,
            stroke: "#003366",
          }
        ),
        $(go.Shape, { toArrow: "Standard" }),
        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle", {
            fill: "white",
            strokeWidth: 2,
            height: 20,
            stroke: "#f5f5f5"
          }

          ),

          {
            toolTip: $("ToolTip", {
              "Border.fill": "#f5f5f5"
            },
              $(go.TextBlock, {
                margin: 4
              },
                new go.Binding("text"))
            )
          },
          $(go.TextBlock,
            {
              name: "linkTextBlock",
              textAlign: "center",
              font: "9pt helvetica, arial, sans-serif",
              textValidation: this.validateTextLabel,
              margin: 14
            },
            new go.Binding("editable", "", function (v) {
              if (v.category === "applink") {
                return false;
              } else {
                return true;
              }
            }),
            new go.Binding("text", "linkText").makeTwoWay()),
          {
            contextMenu: myContextMenu,
            click: function (e, node) {
              e.diagram.commandHandler.showContextMenu(node);
            },
            contextClick: function (e, node) { e.handled = true; }// end Adornment
          },
          $("Button", {
            name: "Button",
            alignment: go.Spot.RightCenter,
            visible: true,
          },
            $(go.Shape, {
              figure: "PlusLine",
              width: 4,
              height: 4,
            })
          )
        )
      );

Since I do not have the text, I cannot try it, but you node template looks fine as far as editing text is concerned. Was that the problem that you are referring to?

Or are you asking about editing the text label of your links?
If it is this latter question, then the problem is probably that you haven’t set TextBlock.editable to true by default on your TextBlock, combined with your link data not having its category value be set to a value other than undefined. When a source property is undefined, the binding conversion function will not be evaluated.

The above is the code for editable text. I can edit but the old value is overlapping with new value. The editable field is not coming as attached screenhot example.

Could you provide a small screenshot?

Did you want to hide the TextBlock whose text is being edited?

Have you set the <input>'s background to be transparent?

var backgroundtemplate =
      $(go.Node, "Auto", {
        locationSpot: go.Spot.TopCenter,
        isShadowed: false,
        selectable: true,
        resizable: true,
        desiredSize: new go.Size(150, 150),
        layerName: "Background",
        avoidable: false,
        selectionAdorned: false
      },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle", roundedBackgroundRectangleParams, {
          name: "SHAPE",
          fill: "#fff",
          strokeWidth: 1,
          stroke: '#e3e3e3',
          fromLinkable: false,
          fromLinkableSelfNode: false,
          fromLinkableDuplicates: false,
          toLinkable: false,
          toLinkableSelfNode: false,
          toLinkableDuplicates: false
        }),
        $(go.Panel, "Vertical", {
          alignment: go.Spot.TopLeft,
          alignmentFocus: go.Spot.TopLeft,
        },
          $(go.TextBlock, {
            margin: 10,
            editable: true,
            font: '14pt sans-serif'
          },
            new go.Binding("text").makeTwoWay()
          )
        )
      );

The above is the properties set. The below is the function on click on “Add grouping” button the above template will call. In the below function I am passing LOC, text, source, etc…

public newNode() {
    if (this.BackgroundLocked) {
      this.toasterService.pop('error', "Unlock Grouping First");
    } else {
      this.dia.model.addNodeData({
        category: "background",
        loc: "150 150",
        isExternalApp: true,
        id: "81942577254510220",
        text: "Name",
        source: ""
      });
    }
  }

I wasn’t asking about the TextBlock or any other GraphObject in the Node, but about the <input> HTMLInputElement that is the text editor.

In your case it seems to be transparent, which is why you can see what’s behind it. Yet that is not the case by default, as you can see in any of our samples where the user can edit text in place.

So my guess is that you have some CSS that is making the <input> element have a transparent background.

I have check my css file and I have not used any input element and not set any background to transparent.

I cannot explain it other than it being a CSS problem with the text editor.

Have you modified the text editor or TextEditingTool at all?

No, I am not using any text editor or TextEditingTool. Do I need to add any?

Not unless you want to. The default text editor implementation used by the TextEditingTool is fine for most people. It’s what you see in the samples, other than the ones that explicitly demonstrate extending/customizing text editing.

So default text editor is not properly working for me. So can I try with any other custom text editing. Can you share any examples to implement custom text editing. Let me try that once.

https://gojs.net/latest/intro/HTMLInteraction.html#TextEditors

Before you bother, please check in the debugger the computed styling for the text editor input element.

I cannot check in the debugger as the textblock is on the canvas. On top of the canvas we cannot inspect the element.

Really I am stuck in the editable textblock. I saw the texteditor.js as mentioned below.

Is it good to use the above one and also I need to implement in Angular. Is there a typescript code instead of JS.

It appears to me that it is the element that is transparent, because it is in front of the canvas and the text that is drawn on the canvas.

There are TypeScript versions of the extensions in either extensionsTS (UMD/require) or extensionsJSM (ES6 modules).

Thanks for the reply.

I was able to inspect the textarea and found the solution. Some of the styles was overriding.