InvokeAI icon indicating copy to clipboard operation
InvokeAI copied to clipboard

feat: :sparkles: allow vertical resizing of node textareas

Open joshistoast opened this issue 1 year ago • 2 comments

Summary

Allows you to vertically resize textareas within the node editor and viewer. I was getting really tired of the restrictive viewing of my prompts within the workflows tab, so this pr addresses that.

Related Issues / Discussions

QA Instructions

Merge Plan

Checklist

  • [x] The PR has a short but descriptive title, suitable for a changelog
  • [ ] Tests added / updated (if applicable)
  • [ ] Documentation added / updated (if applicable)

joshistoast avatar Apr 08 '24 23:04 joshistoast

Also need to check how this might interact with the linear view, especially the drag and drop.

I played with drag and drop with resizing and it worked surprisingly well.

I don't have any strong objections to changing it to allow resize but just wanted to add some context.

That's good context to have, and an restriction for that library to have. Maybe filing an issue on their repo could be beneficial.

joshistoast avatar Apr 09 '24 14:04 joshistoast

Actually, the width and height are recorded in the state. Resizing the text area updates these dimensions, but the nodes are all rendered and re-measured on mount, resetting the dimensions. There are existing issues in reactflow about this.

A solution might be to store the dimensions in our controlled data attribute on each node, then explicitly render the component at those dimensions. That should ensure the dimensions are measured correctly.

This would require adding the dimensions to zInvocationNodeData, zNotesNodeData and zCurrentImageNodeData as an optional property. <NodeWrapper /> would render the node with explicit width and height if present. Add handling in the nodesChanged reducer to check for changes of type "dimensions" and update the newly-added dimensions property for changed nodes.

psychedelicious avatar Apr 14 '24 05:04 psychedelicious