Quantcast
Channel: Northwoods Software - Latest topics
Viewing all articles
Browse latest Browse all 7425

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

$
0
0

@ryanvice wrote:

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;
}

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 7425

Latest Images

Trending Articles



Latest Images