auto resizable textarea going back to normal size on nodeMoved

[adamburczy]

I have a node with auto resizable textarea inside, but size of node keeps getting back to normal size on nodeMoved, I need size to stay the same as size of textarea and text inside it. Is there a way to prevent node size getting back to normal?

video to show what I mean:

https://user-images.githubusercontent.com/73838040/132248522-0ee605b6-881b-4bb5-ad6b-aae0827cf5bf.mp4

[jerosoler]

Hello @adamburczy

Are you using a library for autosize? What library? You can put the code you are using.

It seems to be a problem of when the textarea loses focus and not when it is moved.

[jerosoler]

Without any CSS or anything. It seems to be working properly.

https://user-images.githubusercontent.com/30957047/132252638-ab0e9d69-cad6-4bf7-8e47-bca1a5bfb264.mp4

In this case I am using

editor.draggable_inputs = false

To resize textarea.

[adamburczy]

for autosize I use only JavaScript:

function textAreaAdjust(element) { element.style.height = "1px"; element.style.height = (25+element.scrollHeight)+"px"; }

and then in node html:

Your example is working fine, but I need a textarea with style="overflow:hidden", without scrollbar, and im not sure if it's working with the method you showed, is it?

[jerosoler]

Hello

With your code it also works correctly. It seems to be some other problem with your css or javascript.

https://user-images.githubusercontent.com/30957047/132296548-70f208a3-d422-4de0-9fcd-187b18738528.mp4

[adamburczy]

I checked out your solution, also I have found the reason for this problem. Every thing in your solution is working, to the moment when I want to add page saving funcionality:

editor.on('nodeMoved', function(id) {
  console.log("Node moved " + id);
  //save
  var exportdata = editor.export();
  editor.import(exportdata);
  localStorage.setItem('save', JSON.stringify(exportdata));
})

and then on the first lines of JS file:

var id = document.getElementById("drawflow"); const editor = new Drawflow(id); editor.reroute = true; editor.drawflow = {"drawflow":{"Home":{"data":{}}}} editor.start(); if(localStorage.length != 0){ var imported = localStorage.getItem('save'); editor.import(JSON.parse(imported)) }

that's where this bug appears. Have you got idea how to fix it?

[jerosoler]

Why re-import the JSON?

editor.on('nodeMoved', function(id) {
  console.log("Node moved " + id);
  //save
  var exportdata = editor.export();
  editor.import(exportdata);  // <-------------------------------- ??????????
  localStorage.setItem('save', JSON.stringify(exportdata));
})

If you delete that line, everything works correct, doesn't it?

[adamburczy]

oh yeees, now it does work correctly, on nodeMoved, but after I refresh the page still the same thing happens, like the JSON does not have new node height or something

[jerosoler]

Modifications to the html are not saved directly in the export.

You have two options:

1. Add the new html to node: https://github.com/jerosoler/Drawflow/issues/40#issuecomment-692820035
2. Use event import and recalculte all textarea height.

[adamburczy]

everything's working, thank you VERY much for help @jerosoler !