Thanks for a great script. Just wondering if you would consider an option to snap dragging to a defined interval of pixels.

I am using this in conjunction with Ace editor and it would be great to be able to set the dragInterval to the same height as the Ace editor lineHeight setting.

I am sure there could be other use cases as well for this functionality.

Thanks!

Hi, This is just a heads up that we had to revert to version 1.5.1 as recent changes have caused some layout and rendering issues in our tool. We have a boostrap/css app with tabs and multiple splits (e.g. a vertical split, then the top region has a horizontal split). With the latest release (and maybe a couple behind that) the split bar inside the second tab (not shown initially) did not render (no grab bar). In another tool, the component inside a split div did not consume all the space as it did before.

Sorry I do not have specifics yet, but will dig deeper and post them here. Thanks for an awesome library!

I would like to see an enhancement to be able to collapse a split panel. Essentially 'collapse()' would set the width (or height) to zero and the panel next to it to 100%. A call to 'expand()' would bring back the gutter to the last state. Collapse should also be available when min-size is not 0.

I think this is caused by clientWidth returning an integer, which is then used to calculate percentages. When done repeatedly, it makes the sides creep right or left.

Using getBoundingClientRect() might fix this.

Hello, in my application I'm using react-split 2.0.7. This library has nested deps split.js and after upgrading this library to 1.6.0 an error occurs:

    at SplitWrapper.componentDidMount (react-split.es.js:46)
    at commitLifeCycles (react-dom.development.js:19690)
    at commitLayoutEffects (react-dom.development.js:22662)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:291)
    at commitRootImpl (react-dom.development.js:22404)
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at commitRoot (react-dom.development.js:22246)
    at finishSyncRender (react-dom.development.js:21663)
    at performSyncWorkOnRoot (react-dom.development.js:21649)
    at react-dom.development.js:11131
    at unstable_runWithPriority (scheduler.development.js:659)
    at runWithPriority$1 (react-dom.development.js:11077)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11126)
    at flushSyncCallbackQueue (react-dom.development.js:11114)
    at scheduleUpdateOnFiber (react-dom.development.js:21056)
    at Object.enqueueSetState (react-dom.development.js:12676)
    at AsyncFunc.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:464)
    at AsyncFunc._callee$ (AsyncFunc.js:25)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:282)
    at Generator.prototype.<computed> [as next] (runtime.js:116)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)``` 

Unitl version split.js was 1.5.9 everything worked fine. 

I have a 3 pane horizontal view configured this way:

sizes: [10, 15, 75],
minSize: [0, 0, 0],
gutterSize: 2

I've added a button that when clicked "collapses" the first pane via setSizes([0, 15, 85]). (I did this instead of collapse so that I could allocate space to the last pane and not the second pane)

The problem is, when the first panel is collapsed, the third panel will get pushed down under the first two. This is happening because the size of the panels is calculated in an uneven way as follows:

Pane 1: width: calc(10% - 1px) Pane 2: width: calc(15% - 2px) Pane 3: width: calc(75% - 1px)

The width of the first gutter is being split in half across the first and last panes, which works perfectly fine when all 3 panes are in view, but once the first pane gets collapsed (Which renders the width of pane 1 to calc(0% - 1px) that half of that gutter isn't being subtracted from anywhere anymore which causes the series to add up to 1px more than 100%, and the third pane to get pushed down to a new line.

Looking over the API I see it's possible to interact with how the elements are sized via elementStyle, though I'm not sure if there's a supported way to interact with the sizing in a way that targets specific elements rather than the whole set (In my case the problem would be solved if pane 2 and 3 subtracted 2px each while the first subtracted none)

First of all, thanks for nice project! I've included it in my openlayers project. Second, I have 'enhanced' the code (I think) by adding a gutterId to the options. It'll set the id of the gutter element created: ` (...)

var gutter = document.createElement('div')

if (options.gutterId) gutter.id = options.gutterId

(...) `

Why? Because this way you are able to attach an eventlistener to the gutter using: `

addListenerById = function(listenertype,id,handlerfunction) {

var elm = document.getElementById(id);

if (elm) {

	elm.addEventListener(listenertype, handlerfunction, false);

	console.log("listener type="+listenertype+" attached to id="+id);

}

else {

	console.log("could not find element with id="+id);

}

} `

Extremely handy to use when the gutter has resized a div and you need to, in my case, redraw the map div/canvas. As you may know, there is no 'resize' event available for a div, only for the window (which isn't resized when the gutter is dragged). Thought to let you know.

1. Open http://nathancahill.github.io/Split.js/ in Chrome
2. Resize the browser window to about 800 pixels in width
3. Reload the page
4. Increase the width of the browser window

This causes empty white space to the right of the second split pane, which at least in my case is incorrect. The desired behavior would be to have the panes to increase in size to fill the container.

This is a minor issue I noticed. Please check this demonstration. It's also reproducible on your website.

Click and hold the first gutter from the left and move it left and right. Everything is smooth and perfect. You can see the cursor type remains the same.

Do the same on the second or third gutter. When you move the gutter to left, cursor type kind of flickers between default and col-resize. When you move it to right, col-resize is completely lost and it becomes default.

In react-split's SplitProps interface you removed className?: string in favour of extending from React.HTMLAttributes<HTMLDivElement>.

(see https://github.com/nathancahill/split/issues/689 and https://github.com/nathancahill/split/commit/e18c3a07dc607725c708b2c476dff52f9b515142)

The problem is, that some types in SplitProps have the same names as in @types/react's React.HTMLAttributes<HTMLDivElement> but different definitions, like onDrag

SplitProps: onDrag?: Options["onDrag"] DOMAttributes (which HTMLAttributes extends from): onDrag?: DragEventHandler<T> | undefined;

And that can generate errors like this:

Interface 'SplitProps' incorrectly extends interface 'HTMLAttributes<HTMLDivElement>'.
  Types of property 'onDrag' are incompatible.
    Type '((sizes: number[]) => void) | undefined' is not assignable to type 'DragEventHandler<HTMLDivElement> | undefined'.
      Type '(sizes: number[]) => void' is not assignable to type 'DragEventHandler<HTMLDivElement>'.
        Types of parameters 'sizes' and 'event' are incompatible.
          Type 'DragEvent<HTMLDivElement>' is missing the following properties from type 'number[]': length, pop, push, concat, and 28 more.

export interface SplitProps extends React.HTMLAttributes<HTMLDivElement> {

Patch for https://github.com/nathancahill/Split.js/issues/111

Thanks for giving me contributor access, but to begin with I'd like to stick to PRs so you get a chance to comment.

This series of commits fixes the linter issues I mentioned, moves event listeners from the parent node to the root node, and tidies up a few minor things (slightly better minification).

Tested in Chrome, FireFox and Safari

Bumps qs from 6.10.1 to 6.10.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.10.1 to 6.10.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

How to update properties without destroying and reinitialization?

  async initSplitInstance() {
    if (this.rightLeftSplitInstance) {
      this.rightLeftSplitInstance.destroy(true);
    }
    setTimeout(() => {
      this.rightLeftSplitInstance = Split([this.leftPanel.nativeElement, this.rightPanel.nativeElement], {
        sizes: [75, 25],
        minSize: [300, 300],
        expandToMin: true,
        // gutterSize: 5,
        // cursor: 'col-resize',
        direction: this.selectedLayout === EditorLayouts.LEFT || this.selectedLayout === EditorLayouts.RIGHT ? 'horizontal' : 'vertical',
        elementStyle: function (dimension, size, gutterSize) {
          return {
            'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)',
          }
        },
        gutter(index: number, direction: "horizontal" | "vertical"): HTMLElement {
          const gutter = document.createElement('div');
          gutter.className = `gutter gutter-${direction}`;
          return gutter;
        },
        gutterStyle: function (dimension, gutterSize) {
          return {
            'flex-basis': gutterSize + 'px',
          }
        },
        onDrag: () => {
          this.isDragging = true;
        },
        onDragEnd: () => {
          this.isDragging = false;
        }
      });
    }, 0);
  }

In this example, the this.selectedLayout is EditorLayouts.RIGHT so the direction is horizontal.

In HTML this is how I have implemented it.

<div class="relative h-full flex split-box" [ngClass]="{
        'flex-row': selectedLayout === EditorLayoutsEnum.RIGHT,
        'flex-row-reverse': selectedLayout === EditorLayoutsEnum.LEFT,
        'flex-col': selectedLayout === EditorLayoutsEnum.BOTTOM,
        'flex-col-reverse': selectedLayout === EditorLayoutsEnum.TOP
       }">
       ...
</div>

Now, whenever the user presses any of these change layout buttons. I have to destroy the instance and reinitialize the Split.js.

  changeLayout($event: MouseEvent, layout: EditorLayouts) {
    this.selectedLayout = layout;
    this.initSplitInstance();
  }

Is there a way to do this more efficiently? maybe not destroying the instance, just update it?