diff --git a/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts b/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts index 731c7b49b..08e1ff910 100644 --- a/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts +++ b/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts @@ -34,9 +34,7 @@ export class DropTargetAnchorContainer extends CompositeDisposable { return { clear: () => { if (this._model) { - this._model.root.parentElement?.removeChild( - this._model.root - ); + this._model.root.remove(); } this._model = undefined; }, diff --git a/packages/dockview-core/src/dnd/pointer/pointerDragController.ts b/packages/dockview-core/src/dnd/pointer/pointerDragController.ts index 5ae30bdbb..d95e0b95b 100644 --- a/packages/dockview-core/src/dnd/pointer/pointerDragController.ts +++ b/packages/dockview-core/src/dnd/pointer/pointerDragController.ts @@ -140,7 +140,7 @@ export class PointerDragController extends CompositeDisposable { targetWindow, 'pointermove', (e) => { - if (!this._active || e.pointerId !== this._active.pointerId) { + if (e.pointerId !== this._active?.pointerId) { return; } this._handleMove(e); @@ -151,7 +151,7 @@ export class PointerDragController extends CompositeDisposable { targetWindow, 'pointerup', (e) => { - if (!this._active || e.pointerId !== this._active.pointerId) { + if (e.pointerId !== this._active?.pointerId) { return; } this._handleEnd(e, true); @@ -162,7 +162,7 @@ export class PointerDragController extends CompositeDisposable { targetWindow, 'pointercancel', (e) => { - if (!this._active || e.pointerId !== this._active.pointerId) { + if (e.pointerId !== this._active?.pointerId) { return; } this._handleEnd(e, false); diff --git a/packages/dockview-core/src/dockview/components/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts index 63e801f93..97a38aad2 100644 --- a/packages/dockview-core/src/dockview/components/panel/content.ts +++ b/packages/dockview-core/src/dockview/components/panel/content.ts @@ -101,7 +101,7 @@ export class ContentContainer return false; } - if (data && data.viewId === this.accessor.id) { + if (data?.viewId === this.accessor.id) { return true; } @@ -182,7 +182,7 @@ export class ContentContainer /** * If the currently attached panel is mounted directly to the content then remove it */ - this._element.removeChild(this.panel.view.content.element); + this.panel.view.content.element.remove(); this.panel.view.content.onHide?.(); } @@ -207,7 +207,7 @@ export class ContentContainer if ( panel.view.content.element.parentElement === this._element ) { - this._element.removeChild(panel.view.content.element); + panel.view.content.element.remove(); } container = this.group.renderContainer.attach({ panel, @@ -250,9 +250,7 @@ export class ContentContainer public closePanel(): void { if (this.panel) { if (this.panel.api.renderer === 'onlyWhenVisible') { - this.panel.view.content.element.parentElement?.removeChild( - this.panel.view.content.element - ); + this.panel.view.content.element.remove(); this.panel.view.content.onHide?.(); } } diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts index 2def3f9b1..4db376ae9 100644 --- a/packages/dockview-core/src/dockview/components/tab/tab.ts +++ b/packages/dockview-core/src/dockview/components/tab/tab.ts @@ -101,7 +101,7 @@ export class Tab extends CompositeDisposable { const data = getPanelData(); - if (data && this.accessor.id === data.viewId) { + if (this.accessor.id === data?.viewId) { // Smooth-reorder takes over the in-flight visual when active, // so individual tab overlays are suppressed for internal drags. if (this.accessor.options.theme?.tabAnimation === 'smooth') { @@ -265,7 +265,7 @@ export class Tab extends CompositeDisposable { public setContent(part: ITabRenderer): void { if (this.content) { - this._element.removeChild(this.content.element); + this.content.element.remove(); } this.content = part; this._element.appendChild(this.content.element); diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts b/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts index 0a8d767ef..d9fbbf3eb 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts @@ -204,11 +204,8 @@ abstract class BaseTabGroupIndicator implements ITabGroupIndicator { tg.collapsed || tg.panelIds.some((pid) => { const te = tabMap.get(pid); - return ( - te && - te.value.element.classList.contains( - 'dv-tab--group-expanding' - ) + return te?.value.element.classList.contains( + 'dv-tab--group-expanding' ); }); @@ -342,7 +339,9 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator { // Ensure SVG + path child exists (created once, reused) let svg = underline.firstElementChild as SVGSVGElement | null; let path: SVGPathElement; - if (!svg || svg.tagName !== 'svg') { + if (svg?.tagName === 'svg') { + path = svg.firstElementChild as SVGPathElement; + } else { underline.replaceChildren(); svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.style.display = 'block'; @@ -353,8 +352,6 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator { path.setAttribute('fill', 'none'); svg.appendChild(path); underline.appendChild(svg); - } else { - path = svg.firstElementChild as SVGPathElement; } path.setAttribute('stroke', color); diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts b/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts index 126edc46a..2015d798e 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts @@ -530,7 +530,7 @@ export class TabGroupManager { return false; } const data = getPanelData(); - if (data && this._ctx.accessor.id === data.viewId) { + if (this._ctx.accessor.id === data?.viewId) { if ( this._ctx.accessor.options.theme?.tabAnimation === 'smooth' diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts index 9c30e2fb0..93363bdbe 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts @@ -1160,7 +1160,7 @@ export class Tabs extends CompositeDisposable { } const data = getPanelData(); const sourceIndex = - data && data.groupId === this.group.id && data.panelId + data?.groupId === this.group.id && data?.panelId ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1; const adjustedIndex = diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts index 079ca5300..dcc1d83d8 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts @@ -90,7 +90,7 @@ export class VoidContainer extends CompositeDisposable { const data = getPanelData(); - if (data && this.accessor.id === data.viewId) { + if (this.accessor.id === data?.viewId) { return true; } diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index def9eff68..259b3a3eb 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -441,8 +441,7 @@ let _hasWarnedUsingCoreDirectly = false; function warnIfUsingCoreDirectly(): void { if ( typeof process !== 'undefined' && - process.env && - process.env.NODE_ENV === 'production' + process.env?.NODE_ENV === 'production' ) { return; } @@ -1014,7 +1013,7 @@ export class DockviewComponent // The shell always wraps the dockview element so edge groups can be // added at any time via addEdgeGroup() without re-parenting the DOM. this.disableResizing = true; - container.removeChild(this.element); + this.element.remove(); this._shellManager = new ShellManager( container, @@ -3321,15 +3320,19 @@ export class DockviewComponent removePanel( panel: IDockviewPanel, - options: { - removeEmptyGroup: boolean; + options?: { + removeEmptyGroup?: boolean; skipDispose?: boolean; skipSetActiveGroup?: boolean; - } = { - removeEmptyGroup: true, } ): void { - this.mutation('remove', () => this._doRemovePanel(panel, options)); + this.mutation('remove', () => + this._doRemovePanel(panel, { + removeEmptyGroup: options?.removeEmptyGroup ?? true, + skipDispose: options?.skipDispose, + skipSetActiveGroup: options?.skipSetActiveGroup, + }) + ); } private _doRemovePanel( @@ -3338,8 +3341,6 @@ export class DockviewComponent removeEmptyGroup: boolean; skipDispose?: boolean; skipSetActiveGroup?: boolean; - } = { - removeEmptyGroup: true, } ): void { const group = panel.group; @@ -3641,7 +3642,7 @@ export class DockviewComponent const refGroup = selectedGroup.referenceGroup ? this.getPanel(selectedGroup.referenceGroup) : undefined; - if (refGroup && refGroup.panels.length === 0) { + if (refGroup?.panels.length === 0) { this.removeGroup(refGroup); } } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 8c58ba4f7..512f24551 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -788,7 +788,7 @@ export class DockviewGroupPanelModel // Remove from any existing group first const existingGroup = this.getTabGroupForPanel(panelId); - if (existingGroup && existingGroup.id === tabGroupId) { + if (existingGroup?.id === tabGroupId) { return; // already in this group — no mutation } @@ -818,7 +818,7 @@ export class DockviewGroupPanelModel newIndex: number ): void { const tabGroup = this._tabGroupMap.get(tabGroupId); - if (!tabGroup || !tabGroup.containsPanel(panelId)) { + if (!tabGroup?.containsPanel(panelId)) { return; } @@ -1090,7 +1090,7 @@ export class DockviewGroupPanelModel for (let i = activePanelIndex + 1; i < this._panels.length; i++) { const candidate = this._panels[i]; const candidateGroup = this._findTabGroupForPanel(candidate.id); - if (!candidateGroup || !candidateGroup.collapsed) { + if (!candidateGroup?.collapsed) { this.doSetActivePanel(candidate); this.updateContainer(); return; @@ -1100,7 +1100,7 @@ export class DockviewGroupPanelModel for (let i = activePanelIndex - 1; i >= 0; i--) { const candidate = this._panels[i]; const candidateGroup = this._findTabGroupForPanel(candidate.id); - if (!candidateGroup || !candidateGroup.collapsed) { + if (!candidateGroup?.collapsed) { this.doSetActivePanel(candidate); this.updateContainer(); return; @@ -1473,7 +1473,7 @@ export class DockviewGroupPanelModel if (!this._activePanel && this.panels.length > 0) { const candidate = this._panels.find((p) => { const tg = this._findTabGroupForPanel(p.id); - return !tg || !tg.collapsed; + return !tg?.collapsed; }); if (candidate) { this.doSetActivePanel(candidate); diff --git a/packages/dockview-core/src/dockview/dockviewShell.ts b/packages/dockview-core/src/dockview/dockviewShell.ts index 25c33e8b0..1af9600c6 100644 --- a/packages/dockview-core/src/dockview/dockviewShell.ts +++ b/packages/dockview-core/src/dockview/dockviewShell.ts @@ -891,6 +891,6 @@ export class ShellManager implements IDisposable { dispose(): void { this._disposables.dispose(); - this._shellElement.parentElement?.removeChild(this._shellElement); + this._shellElement.remove(); } } diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index 269e6bead..c3f48e78e 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -197,7 +197,7 @@ export abstract class BaseGrid this.forceRelayout(); }), Disposable.from(() => { - this.element.parentElement?.removeChild(this.element); + this.element.remove(); }), this.gridview.onDidChange(() => { this._bufferOnDidLayoutChange.fire(); diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index 41b8af30c..1e4724cc4 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -682,7 +682,7 @@ export class Gridview implements IDisposable { if (oldRoot) { oldRoot.dispose(); this._maximizedNode = undefined; - this.element.removeChild(oldRoot.element); + oldRoot.element.remove(); } this._root = root; diff --git a/packages/dockview-core/src/overlay/overlayRenderContainer.ts b/packages/dockview-core/src/overlay/overlayRenderContainer.ts index 2976137dc..1ba918350 100644 --- a/packages/dockview-core/src/overlay/overlayRenderContainer.ts +++ b/packages/dockview-core/src/overlay/overlayRenderContainer.ts @@ -28,7 +28,7 @@ class PositionCache { height: number; } { const cached = this.cache.get(element); - if (cached && cached.frameId === this.currentFrameId) { + if (cached?.frameId === this.currentFrameId) { return cached.rect; } @@ -321,10 +321,10 @@ export class OverlayRenderContainer extends CompositeDisposable { this.map[panel.api.id].destroy = Disposable.from(() => { if (contentElement.parentElement === focusContainer) { - focusContainer.removeChild(contentElement); + contentElement.remove(); } - focusContainer.parentElement?.removeChild(focusContainer); + focusContainer.remove(); }); correctLayerPosition(); diff --git a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts index 33c55c48f..1a047208b 100644 --- a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts +++ b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts @@ -175,7 +175,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel { private onDrop(event: DroptargetEvent): void { const data = getPaneData(); - if (!data || data.viewId !== this.accessor.id) { + if (data?.viewId !== this.accessor.id) { // if there is no local drag event for this panel // or if the drag event was creating by another Paneview instance this._onDidDrop.fire({ diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index a491f6e99..ab3343360 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -414,7 +414,7 @@ export class Splitview { const viewItem = new ViewItem(container, view, viewSize, { dispose: () => { disposable.dispose(); - this.viewContainer.removeChild(container); + container.remove(); }, }); @@ -572,7 +572,7 @@ export class Splitview { container: sash, disposable: () => { sash.removeEventListener('pointerdown', onPointerStart); - this.sashContainer.removeChild(sash); + sash.remove(); }, }; @@ -643,7 +643,7 @@ export class Splitview { this.relayout(); } - if (sizing && sizing.type === 'distribute') { + if (sizing?.type === 'distribute') { this.distributeViewSizes(); } @@ -1160,7 +1160,7 @@ export class Splitview { for (let i = 0; i < this.element.children.length; i++) { if (this.element.children.item(i) === this.element) { - this.element.removeChild(this.element); + this.element.remove(); break; } } diff --git a/packages/dockview-core/src/theme/_space-mixin.scss b/packages/dockview-core/src/theme/_space-mixin.scss index fe3c88f45..1883aa2b2 100644 --- a/packages/dockview-core/src/theme/_space-mixin.scss +++ b/packages/dockview-core/src/theme/_space-mixin.scss @@ -27,7 +27,7 @@ // dimensions don't overflow the content box and trigger scrollbars. // .dv-dockview already has no padding, so this is a defensive zero that // guarantees the inner element never picks up the spaced inset. - & .dv-dockview { + .dv-dockview { padding: 0; } diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts index f778ce278..ed3b70268 100644 --- a/packages/dockview-vue/src/utils.ts +++ b/packages/dockview-vue/src/utils.ts @@ -57,7 +57,7 @@ export function findComponent( name: string, components?: Record ): VueComponent | null { - if (components && components[name]) { + if (components?.[name]) { return components[name] as VueComponent; }