The textarea is sized according to the node

#1

When the textarea input is too wide, it will exceed the canvas, as shown in the figure below
12

I tried very hard to make it happen, but unfortunately.
The code used is as follows
textarea.addEventListener(‘input’, function(e) {
let tool = TextEditor.tool
if (tool.textBlock === null) return;
let textBlock = tool.textBlock;
let diagram = tool.diagram;
diagram.startTransaction();
textBlock.text = this.value;
diagram.commitTransaction(“input text”);
let tempText = tool.measureTemporaryTextBlock(this.value);
let scale = this.textScale;
let loc = textBlock.getDocumentPoint(go.Spot.Center);
let pos = diagram.position;
let sc = diagram.scale;
let textscale = textBlock.getDocumentScale() * sc;
if (textscale < tool.minimumEditorScale) textscale = tool.minimumEditorScale;
// Add slightly more width/height to stop scrollbars and line wrapping on some browsers
// +6 is firefox minimum, otherwise lines will be wrapped improperly
let textwidth = (textBlock.naturalBounds.width * textscale) + 6;
let textheight = (textBlock.naturalBounds.height * textscale) + 2;
let left = (loc.x - pos.x) * sc;
let top = (loc.y - pos.y) * sc;
let paddingsize = 1;
this.style.width = 20 + tempText.measuredBounds.width * scale + “px”;
this.style.height = 10 + tempText.measuredBounds.height * scale + “px”;
this.style.left = ((left - (textwidth / 2) | 0) - paddingsize) + “px”;
this.style.top = ((top - (textheight / 2) | 0) - paddingsize) + “px”;
this.rows = tempText.lineCount;
}, false);

How do you type in the canvas size or a better way.
Thank you very much

#2

Yes, the text editor is an HTML element that can extend beyond the HTML Div element that holds the Diagram.

What exactly is your question? What do you want?

#3

Input cause canvas stretched

Hello there, I got some problem while text-inputting in the canvas area.

When some nodes reached the edge of canvas and I set the node into editing, it will appear something like below:

GIF

can anyone offer any help about this? thanks!

#4

What kind of solution would you prefer? The obvious alternatives would not be liked by most end-users.

#5

Hi, thank you very much, I want to input multiple text boxes cannot exceed the canvas

#6

OK, but there are several ways of implementing such a restriction. What do you want to implement?

Separately, you also need to decide what to do when the textarea’s size exceeds the viewport’s size in one or both dimensions.

Also, what do you mean by “input multiple text boxes”?

#7

I want the text box to be inside the canvas in all cases, not outside the canvas at the edges

Here’s how I did it.

The text box is inside the canvas, but the positioning and height of the text box are problematic
Can you help me

textarea.addEventListener('input', function(e) {
  let tool = TextEditor.tool
  if (tool.textBlock === null) return;
  let textBlock = tool.textBlock;
  let diagram = tool.diagram;
  diagram.startTransaction();
  textBlock.text = this.value;
  diagram.commitTransaction("input text");
  let tempText = tool.measureTemporaryTextBlock(this.value);
  let scale = this.textScale;
  let loc = textBlock.getDocumentPoint(go.Spot.Center);
  let pos = diagram.position;
  let sc = diagram.scale;
  let textscale = textBlock.getDocumentScale() * sc;
  if (textscale < tool.minimumEditorScale) textscale = tool.minimumEditorScale;
  let textwidth = (textBlock.naturalBounds.width * textscale) + 6;
  let textheight = (textBlock.naturalBounds.height * textscale) + 2;
  let left = (loc.x - pos.x) * sc;
  let top = (loc.y - pos.y) * sc;
  let paddingsize = 1;
  let width = 20 + tempText.measuredBounds.width * scale
  let heigth=10 + tempText.measuredBounds.height * scale
  let clientWidth=document.documentElement.clientWidth
  left = ((left - (textwidth / 2) | 0) - paddingsize)
  heigth=(width+left)>clientWidth?'auto':(heigth+"px")//Rewrite the heigth
  width=(width+left)>clientWidth?(clientWidth-left):width//Rewrite the width
  this.style.width = width + "px";
  this.style.height = heigth
  this.style.left = ((left - (textwidth / 2) | 0) - paddingsize) + "px";
  this.style.top = ((top - (textheight / 2) | 0) - paddingsize)-5 + "px";
  this.rows = tempText.lineCount;
}, false);
#8

OK, let’s start over please. You have significantly changed an unusual variation of the standard TextEditor.js file. I’ll show you the steps I take.

First, I’ll start off with a simple app. The details don’t really matter, because I only want to concentrate on the text editor. I add a copy of the extensions/TextEditor.js file. To make use of that TextEditor instead of the built-in one, I load that script file and I add a one line initialization to the TextEditingTool:

<script src="go.js"></script>
<script src="TextEditor.js"></script>  <!-- add this copy from extensions/ -->
<script>
function init() {
  var $ = go.GraphObject.make;

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      { "undoManager.isEnabled": true });

  // this is how you use the TextEditor definition from the TextEditor.js file:
  myDiagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditor;

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { fill: "lightgray" }),
      $(go.TextBlock, { margin: 8, editable: true },
        new go.Binding("text").makeTwoWay())
    );
  . . .

Now the behavior of this app when editing should be exactly the same as when using the built-in text editor.

I’ll change the behavior of the text editor by commenting out the “input” listener in my copy of the TextEditor.js file:

(function(window) {
  var textarea = document.createElement('textarea');
  textarea.id = "myTextArea";

  // textarea.addEventListener('input', function(e) {
  //   var tool = TextEditor.tool;
  //   if (tool.textBlock === null) return;
  //   var tempText = tool.measureTemporaryTextBlock(this.value);
  //   var scale = this.textScale;
  //   this.style.width = 20 + tempText.measuredBounds.width * scale + 'px';
  //   this.rows = tempText.lineCount;
  // }, false);

. . .

I believe this is one way to get the result that you are asking for.