,
x: number,
@@ -302,14 +292,11 @@ export class Droptarget extends CompositeDisposable {
width: number,
height: number
): Position | null {
- const isPercentage =
- this.options.overlayModel?.activationSize === undefined ||
- this.options.overlayModel?.activationSize?.type === 'percentage';
+ const activationSizeOptions =
+ this.options.overlayModel?.activationSize ??
+ DEFAULT_ACTIVATION_SIZE;
- const value = numberOrFallback(
- this.options?.overlayModel?.activationSize?.value,
- 20
- );
+ const isPercentage = activationSizeOptions.type === 'percentage';
if (isPercentage) {
return calculateQuadrantAsPercentage(
@@ -318,7 +305,7 @@ export class Droptarget extends CompositeDisposable {
y,
width,
height,
- value
+ activationSizeOptions.value
);
}
@@ -328,7 +315,7 @@ export class Droptarget extends CompositeDisposable {
y,
width,
height,
- value
+ activationSizeOptions.value
);
}
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 019b2789a..39e9126cf 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -4,7 +4,12 @@ import {
getGridLocation,
ISerializedLeafNode,
} from '../gridview/gridview';
-import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
+import {
+ directionToPosition,
+ Droptarget,
+ DroptargetOverlayModel,
+ Position,
+} from '../dnd/droptarget';
import { tail, sequenceEquals, remove } from '../array';
import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
import { CompositeDisposable, Disposable } from '../lifecycle';
@@ -63,6 +68,11 @@ import {
OverlayRenderContainer,
} from '../overlayRenderContainer';
+const DEFAULT_ROOT_OVERLAY_MODEL: DroptargetOverlayModel = {
+ activationSize: { type: 'pixels', value: 10 },
+ size: { type: 'pixels', value: 20 },
+};
+
function getTheme(element: HTMLElement): string | undefined {
function toClassList(element: HTMLElement) {
const list: string[] = [];
@@ -219,6 +229,7 @@ export type DockviewComponentUpdateOptions = Pick<
| 'createPrefixHeaderActionsElement'
| 'disableFloatingGroups'
| 'floatingGroupBounds'
+ | 'rootOverlayModel'
>;
export interface DockviewDropEvent extends GroupviewDropEvent {
@@ -319,6 +330,7 @@ export class DockviewComponent
private readonly _floatingGroups: DockviewFloatingGroupPanel[] = [];
private readonly _popoutGroups: DockviewPopoutGroupPanel[] = [];
+ private readonly _rootDropTarget: Droptarget;
get orientation(): Orientation {
return this.gridview.orientation;
@@ -424,7 +436,7 @@ export class DockviewComponent
this.options.watermarkComponent = Watermark;
}
- const dropTarget = new Droptarget(this.element, {
+ this._rootDropTarget = new Droptarget(this.element, {
canDisplayOverlay: (event, position) => {
const data = getPanelData();
@@ -463,14 +475,12 @@ export class DockviewComponent
return false;
},
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
- overlayModel: {
- activationSize: { type: 'pixels', value: 10 },
- size: { type: 'pixels', value: 20 },
- },
+ overlayModel:
+ this.options.rootOverlayModel ?? DEFAULT_ROOT_OVERLAY_MODEL,
});
this.addDisposables(
- dropTarget.onDrop((event) => {
+ this._rootDropTarget.onDrop((event) => {
const data = getPanelData();
if (data) {
@@ -489,7 +499,7 @@ export class DockviewComponent
});
}
}),
- dropTarget
+ this._rootDropTarget
);
this._api = new DockviewApi(this);
@@ -714,20 +724,24 @@ export class DockviewComponent
}
updateOptions(options: DockviewComponentUpdateOptions): void {
- const hasOrientationChanged =
+ const changed_orientation =
typeof options.orientation === 'string' &&
this.gridview.orientation !== options.orientation;
- const hasFloatingGroupOptionsChanged =
+ const changed_floatingGroupBounds =
options.floatingGroupBounds !== undefined &&
options.floatingGroupBounds !== this.options.floatingGroupBounds;
+ const changed_rootOverlayOptions =
+ options.rootOverlayModel !== undefined &&
+ options.rootOverlayModel !== this.options.rootOverlayModel;
+
this._options = { ...this.options, ...options };
- if (hasOrientationChanged) {
+ if (changed_orientation) {
this.gridview.orientation = options.orientation!;
}
- if (hasFloatingGroupOptionsChanged) {
+ if (changed_floatingGroupBounds) {
for (const group of this._floatingGroups) {
switch (this.options.floatingGroupBounds) {
case 'boundedWithinViewport':
@@ -751,6 +765,10 @@ export class DockviewComponent
}
}
+ if (changed_rootOverlayOptions) {
+ this._rootDropTarget.setOverlayModel(options.rootOverlayModel!);
+ }
+
this.layout(this.gridview.width, this.gridview.height, true);
}
diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts
index 96493354b..34ab98989 100644
--- a/packages/dockview-core/src/dockview/options.ts
+++ b/packages/dockview-core/src/dockview/options.ts
@@ -13,7 +13,7 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
import { ISplitviewStyles, Orientation } from '../splitview/splitview';
import { PanelTransfer } from '../dnd/dataTransfer';
import { IDisposable } from '../lifecycle';
-import { Position } from '../dnd/droptarget';
+import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
import { IDockviewPanel } from './dockviewPanel';
import {
ComponentConstructor,
@@ -100,6 +100,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
popoutUrl?: string;
defaultRenderer?: DockviewPanelRenderer;
debug?: boolean;
+ rootOverlayModel?: DroptargetOverlayModel;
}
export interface PanelOptions {
diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts
index b3fda3fa7..62d415174 100644
--- a/packages/dockview-core/src/index.ts
+++ b/packages/dockview-core/src/index.ts
@@ -55,6 +55,8 @@ export {
Position,
positionToDirection,
directionToPosition,
+ MeasuredValue,
+ DroptargetOverlayModel,
} from './dnd/droptarget';
export {
FocusEvent,
diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx
index 3a7c2ac35..91aaa0562 100644
--- a/packages/dockview/src/dockview/dockview.tsx
+++ b/packages/dockview/src/dockview/dockview.tsx
@@ -11,6 +11,7 @@ import {
DockviewGroupPanel,
IHeaderActionsRenderer,
DockviewPanelRenderer,
+ DroptargetOverlayModel,
} from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart';
@@ -79,6 +80,7 @@ export interface IDockviewReactProps {
};
debug?: boolean;
defaultRenderer?: DockviewPanelRenderer;
+ rootOverlayModel?: DroptargetOverlayModel;
}
const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
@@ -180,6 +182,7 @@ export const DockviewReact = React.forwardRef(
floatingGroupBounds: props.floatingGroupBounds,
defaultRenderer: props.defaultRenderer,
debug: props.debug,
+ rootOverlayModel: props.rootOverlayModel,
});
const { clientWidth, clientHeight } = domRef.current;
@@ -312,6 +315,15 @@ export const DockviewReact = React.forwardRef(
});
}, [props.leftHeaderActionsComponent]);
+ React.useEffect(() => {
+ if (!dockviewRef.current) {
+ return;
+ }
+ dockviewRef.current.updateOptions({
+ rootOverlayModel: props.rootOverlayModel,
+ });
+ }, [props.rootOverlayModel]);
+
React.useEffect(() => {
if (!dockviewRef.current) {
return;