When the textarea input is too wide, it will exceed the canvas, as shown in the figure below
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
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: