search

xcfox / react-tile-pane

A React tiling pane manager
MIT License
28 stars 3 forks source link

Reacting to DraggableTitle being dragged and adding a pane #3

Closed greggman closed 1 year ago

greggman commented 1 year ago

I have a component like this

<DraggableTitle name={names[nextFreePaneId]}>
   <div onClick={() => setMostRecentlyUsedEditorWindowToFile(filename)}>{filename}</div>
</DraggableTitle>

You can see an example of this in VSCode. Imagine all the filenames on the left are made with the component above

https://user-images.githubusercontent.com/234804/198961223-9b8fec60-0b5a-45f7-99a5-43ad611b8683.mp4

When a component is clicked one thing happens. When a component is dragged, a different thing happens.

I'm trying to dupilicate this behavior. Is it possible?

At the moment I just pre-create 50 panes (pane0, pane1, pane2, ....). But they are not in the rootPane tree. I have an array of free pane names. All of the elements using the component above get the same nextFreePaneId. This seems okay because only one of those elements will be dragged to make a new pane, at which point they'd all get a differetn nextFreePAneId

This almost works, when I click the component one thing happens, when I drag the component, a new pane is created.

I have 2 issues though:

  1. After dragging, the component's onClick event fires. I need to prevent that click.

    Is there some props or context state I can look at to see that I'm being dragged?

  2. Have no way to tell the new pane that was just added which file to use

  3. I have no way to tell a pane was even added

    So I can't update my list of free pane ids.

Am I approaching this the right way? Any idea how I would solve this?

Maybe I could solve it by wrapping that component in another component that some how checks if it's being dragged and passs that as a prop to this component so it can stop setting onClick? That would solve but not 2 or 3.

xcfox commented 1 year ago

Thanks for your feedback!

I have released version v0.5.0 just now. In v0.5.0, The DraggableTitle exposes the following new properties:

I'm trying to dupilicate this behavior. Is it possible?

Now just set filterTaps to true at dragConfig, this is turned on by default.

I think you need a dynamic nodeList, This way you don't need to pre-create 50 panes. When a file starts to be dragged, create a new pane, and it should be easy to tell the new pane that was just added which file to use. I have written a simple example of a dynamic nodeList at codesandbox

greggman commented 1 year ago

Wow, thank you! I will check it out.