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