code

packages/splitview-demo/src/layout-grid/application.tsx

@@ -13,11 +13,11 @@ const rootcomponents: {
   [index: string]: React.FunctionComponent<IGridviewPanelProps>;
 } = {
   sidebar: (props: IGridviewPanelProps) => {
-    return <div>sidebar</div>;
+    return <div style={{backgroundColor: "rgb(37,37,38)", height:"100%"}}>sidebar</div>;
   },
   editor: TestGrid,
   panel: () => {
-    return <div>panel</div>;
+    return <div style={{backgroundColor: "rgb(30,30,30)", height: "100%"}}>panel</div>;
   },
 };
 

packages/splitview-demo/src/layout-grid/reactgrid.tsx

@@ -8,6 +8,7 @@ import {
   CompositeDisposable,
   GroupChangeKind,
   IGridviewPanelProps,
+  TabContextMenuEvent
 } from "splitview";
 import { CustomTab } from "./customTab";
 import { Editor } from "./editorPanel";
@@ -341,7 +342,9 @@ export const TestGrid = (props: IGridviewPanelProps) => {
     });
   };
 
-  const onTabContextMenu = (event: MouseEvent) => {};
+  const onTabContextMenu = React.useMemo(() => (event: TabContextMenuEvent) => {
+    console.log(event);
+  },[])
 
   return (
     <div
@@ -400,7 +403,7 @@ export const TestGrid = (props: IGridviewPanelProps) => {
         // tabHeight={30}
         enableExternalDragEvents={true}
         // serializedLayout={data}
-        // onTabContextMenu={onTabContextMenu}
+        onTabContextMenu={onTabContextMenu}
       />
     </div>
   );

packages/splitview/src/events.ts

@@ -47,7 +47,7 @@ export class Emitter<T> implements IDisposable {
         return {
           dispose: () => {
             const index = this._listeners.indexOf(listener);
-            if (index > 1) {
+            if (index > -1) {
               this._listeners.splice(index, 1);
             }
           },

packages/splitview/src/groupview/events.ts

@@ -1,6 +1,19 @@
 import { DroptargetEvent } from "./droptarget/droptarget";
+import { IGroupPanel } from "./panel/types";
 
 export interface TabDropEvent {
   event: DroptargetEvent;
   index?: number;
 }
+
+export enum MouseEventKind {
+  CLICK = "CLICK",
+  CONTEXT_MENU = "CONTEXT_MENU",
+}
+
+export interface LayoutMouseEvent {
+  kind: MouseEventKind;
+  event: MouseEvent;
+  panel?: IGroupPanel;
+  tab?: boolean;
+}

packages/splitview/src/groupview/panel/tab/tab.ts

@@ -9,22 +9,15 @@ import {
 } from "../../droptarget/dataTransfer";
 import { toggleClass } from "../../../dom";
 import { IGroupAccessor } from "../../../layout";
+import {LayoutMouseEvent, MouseEventKind} from "../../events"
 
-export enum TabInteractionKind {
-  CLICK = "CLICK",
-  CONTEXT_MENU = "CONTEXT_MEU",
-}
-
-export interface TabInteractionEvent {
-  kind: TabInteractionKind;
-}
 
 export interface ITab {
   id: string;
   element: HTMLElement;
   hasActiveDragEvent: boolean;
   setContent: (element: HTMLElement) => void;
-  onChanged: Event<TabInteractionEvent>;
+  onChanged: Event<LayoutMouseEvent>;
   onDropped: Event<DroptargetEvent>;
   setActive(isActive: boolean): void;
   startDragEvent(): void;
@@ -39,8 +32,8 @@ export class Tab extends CompositeDisposable implements ITab {
   private droptarget: Droptarget;
   private content: HTMLElement;
 
-  private readonly _onChanged = new Emitter<TabInteractionEvent>();
-  readonly onChanged: Event<TabInteractionEvent> = this._onChanged.event;
+  private readonly _onChanged = new Emitter<LayoutMouseEvent>();
+  readonly onChanged: Event<LayoutMouseEvent> = this._onChanged.event;
 
   private readonly _onDropped = new Emitter<DroptargetEvent>();
   readonly onDropped: Event<DroptargetEvent> = this._onDropped.event;
@@ -75,14 +68,14 @@ export class Tab extends CompositeDisposable implements ITab {
     this._element.draggable = true;
 
     this.addDisposables(
-      addDisposableListener(this._element, "mousedown", (ev) => {
-        if (ev.defaultPrevented) {
+      addDisposableListener(this._element, "mousedown", (event) => {
+        if (event.defaultPrevented) {
           return;
         }
-        this._onChanged.fire({ kind: TabInteractionKind.CLICK });
+        this._onChanged.fire({ kind: MouseEventKind.CLICK,event });
       }),
-      addDisposableListener(this._element, "contextmenu", (ev) => {
-        this._onChanged.fire({ kind: TabInteractionKind.CONTEXT_MENU });
+      addDisposableListener(this._element, "contextmenu", (event) => {
+        this._onChanged.fire({ kind: MouseEventKind.CONTEXT_MENU, event });
       }),
       addDisposableListener(this._element, "dragstart", (event) => {
         this.dragInPlayDetails = { isDragging: true, id: this.accessor.id };

packages/splitview/src/groupview/titlebar/tabContainer.ts

@@ -4,7 +4,7 @@ import {
   IValueDisposable,
 } from "../../lifecycle";
 import { addDisposableListener, Emitter, Event } from "../../events";
-import { ITab, Tab, TabInteractionKind } from "../panel/tab/tab";
+import { ITab, Tab } from "../panel/tab/tab";
 import { removeClasses, addClasses, toggleClass } from "../../dom";
 import { hasProcessed, Position } from "../droptarget/droptarget";
 import { TabDropEvent } from "../events";
@@ -14,6 +14,7 @@ import { IGroupAccessor } from "../../layout";
 import { last } from "../../array";
 import { DataTransferSingleton } from "../droptarget/dataTransfer";
 import { IGroupPanel } from "../panel/types";
+import {MouseEventKind} from "../events"
 
 export interface ITabContainer extends IDisposable {
   element: HTMLElement;
@@ -210,12 +211,11 @@ export class TabContainer extends CompositeDisposable implements ITabContainer {
     const disposable = CompositeDisposable.from(
       tab.onChanged((event) => {
         switch (event.kind) {
-          case TabInteractionKind.CLICK:
+          case MouseEventKind.CLICK:
             this.group.openPanel(panel);
             break;
-          case TabInteractionKind.CONTEXT_MENU:
-          // TODO finish
         }
+        this.accessor.fireMouseEvent({...event, panel, tab:true});
       }),
       tab.onDropped((event) => {
         this._onDropped.fire({ event, index: this.indexOf(tab) });

packages/splitview/src/layout/index.ts

@@ -1,2 +1,3 @@
 export * from "./layout";
 export * from "./componentGridview";
+export * from "./options";

packages/splitview/src/layout/layout.ts

@@ -34,13 +34,14 @@ import {
   AddPanelOptions,
   PanelOptions,
   LayoutOptions,
-  MovementOptions,
+  MovementOptions, TabContextMenuEvent
 } from "./options";
 import {
   DataTransferSingleton,
   DATA_KEY,
   DragType,
 } from "../groupview/droptarget/dataTransfer";
+import { LayoutMouseEvent, MouseEventKind } from "../groupview/events";
 
 const nextGroupId = sequentialNumberGenerator();
 const nextLayoutId = sequentialNumberGenerator();
@@ -72,6 +73,8 @@ export interface Api {
   deserializer: IPanelDeserializer;
   // events
   onDidLayoutChange: Event<GroupChangeEvent>;
+  onTabInteractionEvent: Event<LayoutMouseEvent>;
+  onTabContextMenu: Event<TabContextMenuEvent>;
   moveToNext(options?: MovementOptions): void;
   moveToPrevious(options?: MovementOptions): void;
   activeGroup: IGroupview;
@@ -110,6 +113,7 @@ export interface IGroupAccessor {
   addPanel(options: AddPanelOptions): IGroupPanel;
   //
   getPanel: (id: string) => IGroupPanel;
+  fireMouseEvent(event: LayoutMouseEvent): void;
 }
 
 export interface ILayout extends IGroupAccessor, Api {}
@@ -128,8 +132,11 @@ export class Layout extends CompositeDisposable implements ILayout {
   private readonly debouncedDeque = debounce(this.syncConfigs.bind(this), 5000);
   // events
   private readonly _onDidLayoutChange = new Emitter<GroupChangeEvent>();
-  readonly onDidLayoutChange: Event<GroupChangeEvent> = this._onDidLayoutChange
-    .event;
+  readonly onDidLayoutChange: Event<GroupChangeEvent> = this._onDidLayoutChange.event;
+  private readonly _onTabInteractionEvent = new Emitter<LayoutMouseEvent>();
+  readonly onTabInteractionEvent: Event<LayoutMouseEvent> = this._onTabInteractionEvent.event;
+  private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>();
+  readonly onTabContextMenu: Event<TabContextMenuEvent> = this._onTabContextMenu.event;
   // everything else
   private _size: number;
   private _orthogonalSize: number;
@@ -488,6 +495,20 @@ export class Layout extends CompositeDisposable implements ILayout {
     this.layout(width, height);
   }
 
+  fireMouseEvent(event: LayoutMouseEvent) {
+    switch(event.kind) {
+      case MouseEventKind.CONTEXT_MENU:
+        if(event.tab) {
+          this._onTabContextMenu.fire({
+            event: event.event,
+            api: this,
+            panel: event.panel
+          })
+        }
+        break;
+    }
+  }
+
   public addPanelFromComponent(options: AddPanelOptions): PanelReference {
     const panel = this.addPanel(options);
 

packages/splitview/src/layout/options.ts

@@ -1,5 +1,4 @@
 import { IGroupview } from "../groupview/groupview";
-import { IGroupPanelApi } from "../groupview/panel/api";
 import {
   PanelContentPart,
   PanelContentPartConstructor,
@@ -19,7 +18,6 @@ export interface GroupPanelFrameworkComponentFactory {
 export interface TabContextMenuEvent {
   event: MouseEvent;
   api: Api;
-  panelApi: IGroupPanelApi;
   panel: IGroupPanel;
 }
 
@@ -42,7 +40,6 @@ export interface LayoutOptions {
   tabHeight?: number;
   debug?: boolean;
   enableExternalDragEvents?: boolean;
-  onTabContextMenu?: (event: TabContextMenuEvent) => void;
 }
 
 export interface PanelOptions {

packages/splitview/src/react/layout.tsx

@@ -5,7 +5,7 @@ import { ReactPanelContentPart } from "./reactContentPart";
 import { ReactPanelHeaderPart } from "./reactHeaderPart";
 import { IPanelProps } from "./react";
 import { ReactPanelDeserialzier } from "./deserializer";
-import { GroupPanelFrameworkComponentFactory } from "../layout/options";
+import { GroupPanelFrameworkComponentFactory, TabContextMenuEvent } from "../layout/options";
 
 export interface OnReadyEvent {
   api: Api;
@@ -38,6 +38,7 @@ export interface IReactGridProps {
   debug?: boolean;
   tabHeight?: number;
   enableExternalDragEvents?: boolean;
+  onTabContextMenu?: (event: TabContextMenuEvent) => void;
 }
 
 export const ReactGrid = (props: IReactGridProps) => {
@@ -89,6 +90,7 @@ export const ReactGrid = (props: IReactGridProps) => {
 
     layout.deserializer = new ReactPanelDeserialzier(layout);
 
+
     layout.resizeToFit();
 
     if (props.serializedLayout) {
@@ -104,6 +106,16 @@ export const ReactGrid = (props: IReactGridProps) => {
     };
   }, []);
 
+  React.useEffect(() => {
+    const disposable = layoutReference.current.onTabContextMenu((event) => {
+      props.onTabContextMenu(event);
+    });
+
+    return () => {
+      disposable.dispose()
+    }
+  }, [props.onTabContextMenu])
+
   React.useEffect(() => {
     layoutReference.current.setAutoResizeToFit(props.autoSizeToFitContainer);
   }, [props.autoSizeToFitContainer]);