From 3eb4daa8863a340e800c1785b8f5f26cdaf821cb Mon Sep 17 00:00:00 2001
From: MarcMas <marcmid@gmail.com>
Date: Tue, 9 Nov 2021 11:12:06 +0100
Subject: [PATCH 1/3] Add onClose method and isClosable method

---
 src/Container.tsx | 34 +++++++++++++++++++++++++---------
 src/global.ts     |  8 +++++---
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/Container.tsx b/src/Container.tsx
index 69c9e03..6cccc39 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -176,7 +176,7 @@ export function Container(props: {
                 tabHeight={ tabHeight }
                 onClickPanel={ () => handleClickedPanel(props.state, panelRect.panel, null) }
                 onClickTab={ (tabNumber) => handleClickedPanel(props.state, panelRect.panel, tabNumber) }
-                onCloseTab={ (ev, tabNumber) => handleClosedTab(ev, props.state, panelRect.panel, tabNumber) }
+                onCloseTab={ (ev, tabNumber) => handleClosedTab(props.state, panelRect.panel, tabNumber, ev) }
                 onDragHeader={ (ev, tabNumber) => handleDraggedHeader(ev, props.state, layoutRef, rectRef, panelRect.panel, tabNumber) }
             />
         )}
@@ -195,9 +195,16 @@ export function Container(props: {
             }}>
                 <Dockable.ContentContext.Provider value={{
                     layoutContent,
-
+                    content: layoutContent.content,
                     setTitle: (title) => setTitle(layoutContent, title),
                     setPreferredSize: (w, h) => setPreferredSize(layoutContent, w, h),
+                    close: () =>
+                        handleClosedTab(
+                          props.state,
+                          layoutContent.panel,
+                          layoutContent.tabIndex,
+                          undefined
+                        ),
                 }}>
                     <StyledContentInner>
                         { layoutContent.content.element }
@@ -495,15 +502,24 @@ function handleClickedPanel(
 
 
 function handleClosedTab(
-    ev: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     state: Dockable.RefState<Dockable.State>,
     panel: Dockable.Panel,
-    tabNumber: number)
+    tabNumber: number,
+    ev?: React.MouseEvent<HTMLButtonElement, MouseEvent>
+) 
 {
-    ev.preventDefault()
+    if (ev) {
+        ev.preventDefault();
+    }
 
-    const content = panel.contentList[tabNumber]
-    Dockable.removeContent(state.ref.current, panel, content.contentId)
-    Dockable.coallesceEmptyPanels(state.ref.current)
-    state.commit()
+    const content = panel.contentList[tabNumber];
+
+    if (content && content.isClosable && !content.isClosable()) {
+        // Don't close the tab
+        return;
+    }
+
+    Dockable.removeContent(state.ref.current, panel, content.contentId);
+    Dockable.coallesceEmptyPanels(state.ref.current);
+    state.commit();
 }
\ No newline at end of file
diff --git a/src/global.ts b/src/global.ts
index 269cc9b..6651772 100644
--- a/src/global.ts
+++ b/src/global.ts
@@ -69,10 +69,12 @@ export function spawnFloatingEphemeral(
 
 export interface ContentContextProps
 {
-    layoutContent: Dockable.LayoutContent
+    layoutContent: Dockable.LayoutContent;
+    content: Dockable.Content;
 
-    setTitle: (title: string) => void
-    setPreferredSize: (w: number, h: number) => void
+    setTitle: (title: string) => void;
+    setPreferredSize: (w: number, h: number) => void;
+    close: () => void;
 }
 
 

From da61bbe8ca6825aefa208f26afba7fd192a73440 Mon Sep 17 00:00:00 2001
From: MarcMas <marcmid@gmail.com>
Date: Tue, 9 Nov 2021 11:35:13 +0100
Subject: [PATCH 2/3] Added isClosable method to state

---
 src/state.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/state.ts b/src/state.ts
index 8da5936..12a8daa 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -60,6 +60,7 @@ export interface Content
 {
     contentId: ContentId
     title: string
+    isClosable?: () => boolean;
     element: JSX.Element
 }
 

From 56002031d6079abada014eb6dd38bed3146ef822 Mon Sep 17 00:00:00 2001
From: MarcMas <marcmid@gmail.com>
Date: Tue, 14 Dec 2021 10:20:13 +0100
Subject: [PATCH 3/3] Added scrolling tabs with wheel

---
 src/Panel.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Panel.tsx b/src/Panel.tsx
index 6b542e2..8c05277 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+import React, { useRef } from "react";
 import * as Dockable from "./index.js"
 import styled from "styled-components"
 
@@ -52,6 +52,7 @@ const StyledTabRowInner = styled.div<{
     {
         width: 4px;
         height: 4px;
+        display: none;
     }
 
     &::-webkit-scrollbar-track
@@ -141,6 +142,7 @@ export function ContainerPanel(props: {
 })
 {
     const panelRect: Dockable.LayoutPanel = props.panelRect
+    const refTabRowInner = useRef<HTMLDivElement>(null);
 
     const isActivePanel = props.state.ref.current.activePanel === panelRect.panel
 
@@ -159,6 +161,11 @@ export function ContainerPanel(props: {
                 draggable
                 tabHeight={ props.tabHeight }
                 tabCount={ panelRect.panel.contentList.length }
+                onWheel={(ev) => {
+                  if (refTabRowInner && refTabRowInner.current)
+                    refTabRowInner.current.scrollLeft += ev.deltaY;
+                  ev.preventDefault();
+                }}
                 onMouseDown={ ev => {
                     props.onClickPanel()
                     props.onDragHeader(ev, null)