How to increase the size of the area that will open the text editor when clicked

GoJS
1

Below is the code that I’ve inherited for creating a process element. This process element will only show the text editor when you double click right in the center of it. Is there a way to make it so that the area that you can click on to open the editor is larger?

    goObj(go.Node, "Spot", { selectionAdorned: true }, nodeStyle(goObj),
      goObj(go.Panel, "Spot",
        objectShapeStandard(goObj, onClick),
        goObj(go.TextBlock, {
            ...STYLES.TEXTBOX,
            editable: true,
            maxLines: 3,
            //Makes textblock fit within the diamond bounds.
            maxSize: new go.Size((drag.draggedToCanvasWidth), (drag.draggedToCanvasHeight)),
            textEditor: getCustomTextEditor(diagram)
          },
          new go.Binding("text")
          .makeTwoWay()
        )
      ),
      attachPortTop(goObj, allowedConnectors),
      attachPortRight(goObj, allowedConnectors),
      attachPortBottom(goObj, allowedConnectors),
      attachPortLeft(goObj, allowedConnectors)
    ));

export function getCustomTextEditor(diagram) {
  var customEditor = document.getElementById("customTextEditor");

  customEditor.style.backgroundColor = STYLES.CUSTOM_EDITOR.backgroundColor;
  customEditor.style.visibility = "hidden";

  customEditor.onActivate = function () {
    customEditor.value = customEditor.textEditingTool.textBlock.text;

    const containerShapeBoundingBox = customEditor.textEditingTool.textBlock.part.actualBounds;
    const offsetSpot = new go.Spot(.125, .25);
    const loc = customEditor.textEditingTool.textBlock.part.getDocumentPoint(offsetSpot);
    const pos = diagram.transformDocToView(loc);

    function onBlur() {
      customEditor.textEditingTool.acceptText(go.TextEditingTool.LostFocus);
      customEditor.value = "";
      customEditor.removeEventListener("blur", onBlur, false);
      customEditor.removeEventListener("keydown", onKeyDown, false);
    };

    function onKeyDown(e) {
      const keynum = e.which;

      if (keynum === 9) {
        customEditor.textEditingTool.acceptText(go.TextEditingTool.Tab);
        customEditor.value = "";
        customEditor.removeEventListener("blur", onBlur, false);
        customEditor.removeEventListener("keydown", onKeyDown, false);
      }
    };

    customEditor.style.visibility = "";
    customEditor.style.width = (containerShapeBoundingBox.width * .75) + "px";
    customEditor.style.height = (containerShapeBoundingBox.height / 2) + "px";
    customEditor.style.left = pos.x + "px";
    customEditor.style.top = pos.y + "px";

    customEditor.addEventListener("blur", onBlur, false);
    customEditor.addEventListener("keydown", onKeyDown, false);
  };

  return customEditor;
}
2

When TextBlock.editable is true, the user can click (or double-click, depending on TextEditingTool.starting) on the TextBlock in order to start the TextEditingTool.

If you want the user to be able to edit text upon a click or double-click on other elements of the Node. you have at least two options.

Ycan implement a GraphObject.click or GraphObject.doubleClick event handler that calls CommandHandler | GoJS API on the TextBlock that you want them to edit. (Remember that there might be many TextBlocks in a node, so you have to specify which one to edit.)

Alternatively you could override TextEditingTool.canStart to be more lenient in the circumstances in which that tool can be started. By default the user has to click on an editable TextBlock and the TextEditingTool.starting condition must hold. But you could set TextEditingTool.textBlock so that the tool will start editing that TextBlock.