Provide drop-target-dropzone quadrant class

[garyvh2]

Could we add a simple change to allow for customization based on the quadrant we are targeting on drop target?

For instance here we already have the target quadrant.

const isLeft = quadrant === 'left';
const isRight = quadrant === 'right';
const isTop = quadrant === 'top';
const isBottom = quadrant === 'bottom';

We could do something similar to what we do with these

toggleClass(this.overlayElement, 'small-right', isSmallX && isRight);
toggleClass(this.overlayElement, 'small-left', isSmallX && isLeft);
toggleClass(this.overlayElement, 'small-top', isSmallY && isTop);
toggleClass(this.overlayElement, 'small-bottom', isSmallY && isBottom);

And change it into something like

toggleClass(this.overlayElement, 'small', isSmallX || isSmallY);
toggleClass(this.overlayElement, 'right', isRight);
toggleClass(this.overlayElement, 'left', isLeft);
toggleClass(this.overlayElement, 'top', isTop);
toggleClass(this.overlayElement, 'bottom', isBottom);

And scss could change into

> .drop-target-selection {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: var(--dv-drag-over-background-color);
    transition: top 70ms ease-out, left 70ms ease-out,
        width 70ms ease-out, height 70ms ease-out,
        opacity 0.15s ease-out;
    will-change: transform;
    pointer-events: none;

    &.small {
      &.top {
          border-top: 1px solid var(--dv-drag-over-border-color);
      }

      &.bottom {
          border-bottom: 1px solid var(--dv-drag-over-border-color);
      }

      &.left {
          border-left: 1px solid var(--dv-drag-over-border-color);
      }

      &.right {
          border-right: 1px solid var(--dv-drag-over-border-color);
      }
    }
}

That way it would allow us to personalize the top, bottom, left and right if needed.

[mathuo]

That makes sense - something like this?

[garyvh2]

Yeah that would be perfect, any ETA on when we could have that released.

Maybe 1.9.1?

[mathuo]

For now I've published an experimental build which is the build resulting from that branch which is a branch from the 1.9.0 release. You can install this build explicitly by running:

npm install dockview@0.0.0-experimental-e3e87f4-20240117 

The experimental builds are built using the same build CI script which can be viewed here and are verified in the same way as the offical builds through npm provenence. The exact build ran through Github Actions can be found here.

Available package: https://www.npmjs.com/package/dockview/v/0.0.0-experimental-e3e87f4-20240117

I will put this into a 1.9.1 build within the next couple of days hopefully.

[mathuo]

Released in 1.9.1