Existence of SplitPane-Handle isn't clear to the user

[Bios-Marcel]

Unless a user knows that a splitpane is present, it's not possible to see it, as there's currently no handle.
I'd suggest adding a handle. We currently add three dots that use the same colors as the disabled font color.

We'd like to properly implement this though. We've been using this hack for a while and would like to contribute this.
Would you be okay with that? If so, what color should we use for it and what should the size of the handle and the icons be?

This is the code we've been using and an image of what it looks like:

Icon:

public class SplitPaneDividerBorderIcon implements Icon
{
  private static final Color CIRCLE_COLOR  = UIManager.getColor( "Label.disabledForeground" );
  private static final int   CIRCLE_AMOUNT = 3;
  private static final int   SIZE          = SwingGuiUtils.scaleToDpi( 16 );
  //Wir haben 3 Kreise und wollen, dass dessen Durchmesser 25% der Breite des Icons entsprechen.
  private static final int            CIRCLE_SIZE     = SIZE / 4;
  private static final int            GAP             = (SIZE - (CIRCLE_SIZE * CIRCLE_AMOUNT)) / (CIRCLE_AMOUNT - 1);
  private static final RenderingHints RENDERING_HINTS = new RenderingHints(
      RenderingHints.KEY_ANTIALIASING,
      RenderingHints.VALUE_ANTIALIAS_ON );

  private final boolean vertical;
  private final int     height;
  private final int     width;

  /**
   * @param vertical true = vertical
   */
  public SplitPaneDividerBorderIcon( final boolean vertical )
  {
    this.vertical = vertical;
    height = vertical ? SIZE : (CIRCLE_SIZE * 3);
    width = vertical ? (CIRCLE_SIZE * 3) : SIZE;
  }

  @Override
  public void paintIcon( final Component c, final Graphics g, final int x, final int y )
  {
    if ( g instanceof Graphics2D )
    {
      ((Graphics2D) g).setRenderingHints( RENDERING_HINTS );
    }
    g.setColor( CIRCLE_COLOR );
    final Rectangle bounds = c.getBounds();
    int xPosition = bounds.width / 2 - (CIRCLE_SIZE / 2);
    int yPosition = bounds.height / 2 - (CIRCLE_SIZE / 2);
    if ( !vertical )
    {
      //Aus irgendeinem Grund ist dieses Icon nicht zentriert, daher rechnen wir ein Feel-Good-Wert hinzu.
      yPosition -= SwingGuiUtils.scaleToDpi( 8 );
      for ( int i = 0; i < CIRCLE_AMOUNT; i++ )
      {
        g.fillOval( xPosition, yPosition + (i * GAP + i * CIRCLE_SIZE), CIRCLE_SIZE, CIRCLE_SIZE );
      }
    }
    else
    {
      //Aus irgendeinem Grund ist dieses Icon nicht zentriert, daher rechnen wir ein Feel-Good-Wert hinzu.
      xPosition -= SwingGuiUtils.scaleToDpi( 8 );
      for ( int i = 0; i < CIRCLE_AMOUNT; i++ )
      {
        g.fillOval( xPosition + (i * GAP + i * CIRCLE_SIZE), yPosition, CIRCLE_SIZE, CIRCLE_SIZE );
      }
    }
  }

  @Override
  public int getIconHeight()
  {
    return height;
  }

  @Override
  public int getIconWidth()
  {
    return width;
  }
}

Border:

public static class SplitPaneDividerBorder implements Border
{
  private final Icon iconVertical;
  private final Icon iconHorizontal;

  private final Insets insets;

  public SplitPaneDividerBorder( final Icon iconVertical, final Icon iconHorizontal )
  {
    this.iconVertical = iconVertical;
    this.iconHorizontal = iconHorizontal;

    //Insets sind null, da der Border keine Größe haben soll, sondern lediglich zentriert ein Icon zeichnen soll.
    insets = new Insets( 0, 0, 0, 0 );
  }

  @Override
  public void paintBorder( final @Nullable Component component, final @Nullable Graphics graphics,
                           final int x, final int y, final int width, final int height )
  {
    if ( component instanceof BasicSplitPaneDivider )
    {
      final BasicSplitPaneDivider divider = (BasicSplitPaneDivider) component;
      final int orientation = getDividerOrientation( divider );

      if ( orientation == JSplitPane.VERTICAL_SPLIT )
      {
        iconVertical.paintIcon( divider, graphics, 0, 0 );
      }
      else if ( orientation == JSplitPane.HORIZONTAL_SPLIT )
      {
        iconHorizontal.paintIcon( divider, graphics, 0, 0 );
      }
    }
  }

  private static int getDividerOrientation( final BasicSplitPaneDivider divider )
  {
    final int orientation;
    if ( divider.getParent() instanceof JSplitPane )
    {
      final JSplitPane parentSplitPane = (JSplitPane) divider.getParent();
      orientation = parentSplitPane.getOrientation();
    }
    else
    {
      throw new UnsupportedOperationException( "Ein SplitPaneDivider braucht eine SplitPane." );
    }

    return orientation;
  }

  @Override
  public Insets getBorderInsets( final @Nullable Component c )
  {
    return insets;
  }


  @Override
  public boolean isBorderOpaque()
  {
    return true;
  }
}

To use it:

    final Icon iconVertical = new SplitPaneDividerBorderIcon( true );
    final Icon iconHorizontal = new SplitPaneDividerBorderIcon( false );
    UIManager.put( "SplitPaneDivider.border", new SplitPaneDividerBorder( iconVertical, iconHorizontal ) );
    UIManager.put( "SplitPane.dividerSize", iconVertical.getIconWidth() );

[k33ptoo]

Very useful. Anyone looking for SwingGuiUtils.scaleToDpi(int) function you can use DPIController class in this repo.

[Bios-Marcel]

Yeah, I basically just copied the code over here. I think I didn't even need to do that. I was just wondering whether it would be okay to add these dots as a PR ^^

[k33ptoo]

I hope the devs will consider. ;-)

[DevCharly]

Sorry for the late reply...

Yes, these dots would be nice and I'll accept a PR 👍

But then we do not need two extra classes.
The painting can be done directly in class FlatSplitPaneUI.FlatSplitPaneDivider

Just remembered that there is already some code in FlatLaf that paints dots. It is in the toolbar:

The code is in FlatToolBarBorder.paintGrip:

FlatLaf/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatToolBarBorder.java

Lines 66 to 96 in f0fd02e

	protected void paintGrip( Component c, Graphics g, int x, int y, int width, int height ) {
	int dotSize = scale( DOT_SIZE );
	int gapSize = dotSize;
	int gripSize = (dotSize * DOT_COUNT) + ((gapSize * (DOT_COUNT - 1)));
	// include toolbar margin in grip position calculation
	Insets insets = getBorderInsets( c );
	// calculate grip position
	boolean horizontal = ((JToolBar)c).getOrientation() == SwingConstants.HORIZONTAL;
	if( horizontal ) {
	if( c.getComponentOrientation().isLeftToRight() )
	x += insets.left - (dotSize * 2);
	else
	x += width - insets.right + dotSize;
	y += Math.round( (height - gripSize) / 2f );
	} else {
	// vertical
	x += Math.round( (width - gripSize) / 2f );
	y += insets.top - (dotSize * 2);
	}
	// paint dots
	for( int i = 0; i < DOT_COUNT; i++ ) {
	g.fillOval( x, y, dotSize, dotSize );
	if( horizontal )
	y += dotSize + gapSize;
	else
	x += dotSize + gapSize;
	}
	}

You could use method paintGrip as base,
copy it to class FlatSplitPaneUI.FlatSplitPaneDivider,
change dot size to 3,
change dot count to 3,
maybe change gap between dots to 2,
remove right-to-left specific code,
remove insets specific code.
Simply paint dots in center of divider component.

Maybe also increase divider thickness, which is currently 5px and probably to small for 3px dots.
7 could work fine with 3px dots and 2px gap on each side.

FlatLaf/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties

Line 526 in f0fd02e

SplitPane.dividerSize={integer}5

Regarding color of dots:
The toolbar grip uses ToolBar.gripColor

FlatLaf/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties

Line 679 in f0fd02e

ToolBar.gripColor=@icon

To be consistent I would suggest something like:

SplitPaneDivider.gripColor=@icon

[k33ptoo]

Hi @DevCharly thank you for above, any chance this will be added soon to release.

[Bios-Marcel]

I didn't get to do this yet, sorry. It's rather low prio right now, as this basically already works for us 😓

[k33ptoo]

Hi @Bios-Marcel thanks for the update, I tried your solution but then I got a bug on second monitor on Mac, the icons disappear.

[Bios-Marcel]

Oh, that's interesting. When dragging the window over?

[k33ptoo]

When the window(s) are launched on the second monitor.

[DevCharly]

I'm working on it...

[Bios-Marcel]

@DevCharly Stupid question on the side: Do yout take donations anywhere?

[j-dimension]

@Bios-Marcel I've been asking the same not at all stupid question in the past.

No answer from @DevCharly so far, but I am still interested! Being an Open Source author myself, I really would like to express my gratitude for the time and passion that goes into this.

[DevCharly]

@Bios-Marcel thanks for the offer.
FlatLaf development definitely could need some sponsoring 😃
Until now I've financed it alone...
Please contact me at info (at) formdev (dot) com.
Thanks.

@j-dimension found and answered you Email. Thx.

[DevCharly]

The splitpane divider grip is implemented in commit 18d8c7d.

@Bios-Marcel the divider width is still 5px, but the dots are smaller than in your code.
However you can configure the dot size, dot count, dot gap and dot color:

FlatLaf/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties

Lines 535 to 540 in 18d8c7d

	# allowed values: "grip" (default) or "plain"
	SplitPaneDivider.style=grip
	SplitPaneDivider.gripColor=@icon
	SplitPaneDivider.gripDotCount=3
	SplitPaneDivider.gripDotSize={integer}3
	SplitPaneDivider.gripGap=2

Following code makes divider wider, dots larger and use 4 dots:

UIManager.put( "SplitPane.dividerSize", 9 );
UIManager.put( "SplitPaneDivider.gripDotCount", 4 );
UIManager.put( "SplitPaneDivider.gripDotSize", 4 );
UIManager.put( "SplitPaneDivider.gripGap", 3 );

To disable divider grip use:

UIManager.put( "SplitPaneDivider.style", "plain" );