From a35bb26f3da35680e8fd671ef58fca30e8acc2f5 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 12 Feb 2023 20:22:15 +0700 Subject: [PATCH 1/2] refactor: prefix classnames with dv-* to prevent collisions --- .../src/__tests__/dnd/abstractDragHandler.spec.ts | 8 ++++---- packages/dockview/src/dnd/abstractDragHandler.ts | 4 ++-- packages/dockview/src/dnd/ghost.ts | 2 +- .../src/dockview/components/tab/defaultTab.scss | 4 ++-- .../dockview/src/dockview/dockviewComponent.scss | 14 +------------- 5 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts b/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts index 6e1b68600..ebb55aae7 100644 --- a/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts +++ b/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts @@ -3,7 +3,7 @@ import { DragHandler } from '../../dnd/abstractDragHandler'; import { IDisposable } from '../../lifecycle'; describe('abstractDragHandler', () => { - test('that className dragged is added to element after dragstart event', () => { + test('that className dv-dragged is added to element after dragstart event', () => { jest.useFakeTimers(); const element = document.createElement('div'); @@ -26,13 +26,13 @@ describe('abstractDragHandler', () => { } })(element); - expect(element.classList.contains('dragged')).toBeFalsy(); + expect(element.classList.contains('dv-dragged')).toBeFalsy(); fireEvent.dragStart(element); - expect(element.classList.contains('dragged')).toBeTruthy(); + expect(element.classList.contains('dv-dragged')).toBeTruthy(); jest.runAllTimers(); - expect(element.classList.contains('dragged')).toBeFalsy(); + expect(element.classList.contains('dv-dragged')).toBeFalsy(); handler.dispose(); }); diff --git a/packages/dockview/src/dnd/abstractDragHandler.ts b/packages/dockview/src/dnd/abstractDragHandler.ts index a13e8aa5a..19ee381cc 100644 --- a/packages/dockview/src/dnd/abstractDragHandler.ts +++ b/packages/dockview/src/dnd/abstractDragHandler.ts @@ -34,8 +34,8 @@ export abstract class DragHandler extends CompositeDisposable { iframe.style.pointerEvents = 'none'; } - this.el.classList.add('dragged'); - setTimeout(() => this.el.classList.remove('dragged'), 0); + this.el.classList.add('dv-dragged'); + setTimeout(() => this.el.classList.remove('dv-dragged'), 0); this.disposable.value = this.getData(event.dataTransfer); diff --git a/packages/dockview/src/dnd/ghost.ts b/packages/dockview/src/dnd/ghost.ts index daed9a6e9..496ac16f7 100644 --- a/packages/dockview/src/dnd/ghost.ts +++ b/packages/dockview/src/dnd/ghost.ts @@ -5,7 +5,7 @@ export function addGhostImage( ghostElement: HTMLElement ) { // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues - addClasses(ghostElement, 'dragged'); + addClasses(ghostElement, 'dv-dragged'); document.body.appendChild(ghostElement); dataTransfer.setDragImage(ghostElement, 0, 0); diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.scss b/packages/dockview/src/dockview/components/tab/defaultTab.scss index 65f794f31..d820534b8 100644 --- a/packages/dockview/src/dockview/components/tab/defaultTab.scss +++ b/packages/dockview/src/dockview/components/tab/defaultTab.scss @@ -1,4 +1,4 @@ -.dragged { +.dv-dragged { transform: translate3d( 0px, 0px, @@ -9,7 +9,7 @@ .tab { flex-shrink: 0; - &.dragging { + &.dv-tab-dragging { .tab-action { background-color: var(--dv-activegroup-visiblepanel-tab-color); } diff --git a/packages/dockview/src/dockview/dockviewComponent.scss b/packages/dockview/src/dockview/dockviewComponent.scss index 869a450ad..b9860c17f 100644 --- a/packages/dockview/src/dockview/dockviewComponent.scss +++ b/packages/dockview/src/dockview/dockviewComponent.scss @@ -1,15 +1,3 @@ -.custom-dragging { - height: 24px; - line-height: 24px; - font-size: 11px; - width: 100px; - background-color: dodgerblue; - color: ghostwhite; - border-radius: 11px; - position: absolute; - padding-left: 10px; -} - .groupview { &.active-group { > .tabs-and-actions-container > .tabs-container > .tab { @@ -50,7 +38,7 @@ * therefore we also set some stylings for the dragging event **/ .tab { - &.dragging { + &.dv-tab-dragging { background-color: var( --dv-activegroup-visiblepanel-tab-background-color ); From 82490cba463985a2735b8fae35fb8a2d3c2507fb Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 12 Feb 2023 20:30:51 +0700 Subject: [PATCH 2/2] refactor: cleanup code --- packages/dockview/src/dnd/groupDragHandler.ts | 60 ++++++++++++++++ .../src/dockview/dockviewComponent.ts | 63 ++++++++-------- packages/dockview/src/groupview/groupview.ts | 2 + .../src/groupview/titlebar/voidContainer.ts | 72 ++----------------- 4 files changed, 99 insertions(+), 98 deletions(-) create mode 100644 packages/dockview/src/dnd/groupDragHandler.ts diff --git a/packages/dockview/src/dnd/groupDragHandler.ts b/packages/dockview/src/dnd/groupDragHandler.ts new file mode 100644 index 000000000..28ab895a0 --- /dev/null +++ b/packages/dockview/src/dnd/groupDragHandler.ts @@ -0,0 +1,60 @@ +import { GroupPanel } from '../groupview/groupviewPanel'; +import { IDisposable } from '../lifecycle'; +import { DragHandler } from './abstractDragHandler'; +import { LocalSelectionTransfer, PanelTransfer } from './dataTransfer'; +import { addGhostImage } from './ghost'; + +export class GroupDragHandler extends DragHandler { + private readonly panelTransfer = + LocalSelectionTransfer.getInstance(); + + constructor( + element: HTMLElement, + private readonly accessorId: string, + private readonly group: GroupPanel + ) { + super(element); + } + + getData(dataTransfer: DataTransfer | null): IDisposable { + this.panelTransfer.setData( + [new PanelTransfer(this.accessorId, this.group.id, null)], + PanelTransfer.prototype + ); + + const style = window.getComputedStyle(this.el); + + const bgColor = style.getPropertyValue( + '--dv-activegroup-visiblepanel-tab-background-color' + ); + const color = style.getPropertyValue( + '--dv-activegroup-visiblepanel-tab-color' + ); + + if (dataTransfer) { + const ghostElement = document.createElement('div'); + + ghostElement.style.backgroundColor = bgColor; + ghostElement.style.color = color; + ghostElement.style.padding = '2px 8px'; + ghostElement.style.height = '24px'; + ghostElement.style.fontSize = '11px'; + ghostElement.style.lineHeight = '20px'; + ghostElement.style.borderRadius = '12px'; + ghostElement.style.position = 'absolute'; + ghostElement.textContent = `Multiple Panels (${this.group.size})`; + + addGhostImage(dataTransfer, ghostElement); + } + + return { + dispose: () => { + this.panelTransfer.clearData(PanelTransfer.prototype); + }, + }; + } + + public dispose(): void { + // + } +} diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 2867e8fd2..ee3881794 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/packages/dockview/src/dockview/dockviewComponent.ts @@ -575,38 +575,9 @@ export class DockviewComponent if(itemId === undefined) { - - if(sourceGroup) { - if (!target || target === Position.Center) { - const activePanel = sourceGroup.activePanel; - const panels = [...sourceGroup.panels].map(p => sourceGroup.model.removePanel(p.id)); - - if (sourceGroup?.model.size === 0) { - this.doRemoveGroup(sourceGroup); - } - - for(const panel of panels) { - referenceGroup.model.openPanel(panel,{skipSetPanelActive:panel !== activePanel}); - } - } - else { - - this.gridview.removeView(getGridLocation(sourceGroup.element)); - - const referenceLocation = getGridLocation(referenceGroup.element); - const dropLocation = getRelativeLocation( - this.gridview.orientation, - referenceLocation, - target - ); - - - - this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation); - } + this.moveGroup(sourceGroup, referenceGroup, target); } - return; } @@ -684,6 +655,38 @@ export class DockviewComponent } } + private moveGroup(sourceGroup: GroupPanel, referenceGroup: GroupPanel, target: Position): void { + if(sourceGroup) { + if (!target || target === Position.Center) { + const activePanel = sourceGroup.activePanel; + const panels = [...sourceGroup.panels].map(p => sourceGroup.model.removePanel(p.id)); + + if (sourceGroup?.model.size === 0) { + this.doRemoveGroup(sourceGroup); + } + + for(const panel of panels) { + referenceGroup.model.openPanel(panel,{skipSetPanelActive:panel !== activePanel}); + } + } + else { + + this.gridview.removeView(getGridLocation(sourceGroup.element)); + + const referenceLocation = getGridLocation(referenceGroup.element); + const dropLocation = getRelativeLocation( + this.gridview.orientation, + referenceLocation, + target + ); + + + + this.gridview.addView(sourceGroup, Sizing.Distribute, dropLocation); + } + } + } + override doSetGroupActive( group: GroupPanel | undefined, skipFocus?: boolean diff --git a/packages/dockview/src/groupview/groupview.ts b/packages/dockview/src/groupview/groupview.ts index ecb56cdf2..5b7735321 100644 --- a/packages/dockview/src/groupview/groupview.ts +++ b/packages/dockview/src/groupview/groupview.ts @@ -699,7 +699,9 @@ export class Groupview extends CompositeDisposable implements IGroupview { if (data) { if (data.panelId === null) { + // this is a group move dnd event const { groupId } = data; + this._onMove.fire({ target: position, groupId: groupId, diff --git a/packages/dockview/src/groupview/titlebar/voidContainer.ts b/packages/dockview/src/groupview/titlebar/voidContainer.ts index c140001d6..8eadede55 100644 --- a/packages/dockview/src/groupview/titlebar/voidContainer.ts +++ b/packages/dockview/src/groupview/titlebar/voidContainer.ts @@ -1,73 +1,13 @@ import { last } from '../../array'; -import { DragHandler } from '../../dnd/abstractDragHandler'; -import { - getPanelData, - LocalSelectionTransfer, - PanelTransfer, -} from '../../dnd/dataTransfer'; +import { getPanelData } from '../../dnd/dataTransfer'; import { Droptarget, DroptargetEvent } from '../../dnd/droptarget'; -import { addGhostImage } from '../../dnd/ghost'; +import { GroupDragHandler } from '../../dnd/groupDragHandler'; import { DockviewComponent } from '../../dockview/dockviewComponent'; import { addDisposableListener, Emitter, Event } from '../../events'; -import { CompositeDisposable, IDisposable } from '../../lifecycle'; +import { CompositeDisposable } from '../../lifecycle'; import { DockviewDropTargets } from '../dnd'; import { GroupPanel } from '../groupviewPanel'; -class CustomDragHandler extends DragHandler { - private readonly panelTransfer = - LocalSelectionTransfer.getInstance(); - - constructor( - element: HTMLElement, - private readonly accessorId: string, - private readonly group: GroupPanel - ) { - super(element); - } - - getData(dataTransfer: DataTransfer | null): IDisposable { - this.panelTransfer.setData( - [new PanelTransfer(this.accessorId, this.group.id, null)], - PanelTransfer.prototype - ); - - const style = window.getComputedStyle(this.el); - - const bgColor = style.getPropertyValue( - '--dv-activegroup-visiblepanel-tab-background-color' - ); - const color = style.getPropertyValue( - '--dv-activegroup-visiblepanel-tab-color' - ); - - if (dataTransfer) { - const ghostElement = document.createElement('div'); - - ghostElement.style.backgroundColor = bgColor; - ghostElement.style.color = color; - ghostElement.style.padding = '2px 8px'; - ghostElement.style.height = '24px'; - ghostElement.style.fontSize = '11px'; - ghostElement.style.lineHeight = '20px'; - ghostElement.style.borderRadius = '12px'; - ghostElement.style.position = 'absolute'; - ghostElement.textContent = `Multiple Panels (${this.group.size})`; - - addGhostImage(dataTransfer, ghostElement); - } - - return { - dispose: () => { - this.panelTransfer.clearData(PanelTransfer.prototype); - }, - }; - } - - public dispose(): void { - // - } -} - export class VoidContainer extends CompositeDisposable { private readonly _element: HTMLElement; private readonly voidDropTarget: Droptarget; @@ -98,11 +38,7 @@ export class VoidContainer extends CompositeDisposable { }) ); - const handler = new CustomDragHandler( - this._element, - accessor.id, - group - ); + const handler = new GroupDragHandler(this._element, accessor.id, group); this.voidDropTarget = new Droptarget(this._element, { validOverlays: 'none',