From 62909463ed208091c2409202c598d9b05d9ca839 Mon Sep 17 00:00:00 2001 From: Matthew O'Connor Date: Sat, 19 Sep 2020 16:34:36 +0100 Subject: [PATCH] code --- .../src/layout-grid/application.tsx | 4 +-- .../src/layout-grid/reactgrid.tsx | 7 +++-- packages/splitview/src/events.ts | 2 +- packages/splitview/src/groupview/events.ts | 13 +++++++++ .../splitview/src/groupview/panel/tab/tab.ts | 25 +++++++---------- .../src/groupview/titlebar/tabContainer.ts | 8 +++--- packages/splitview/src/layout/index.ts | 1 + packages/splitview/src/layout/layout.ts | 27 ++++++++++++++++--- packages/splitview/src/layout/options.ts | 3 --- packages/splitview/src/react/layout.tsx | 14 +++++++++- 10 files changed, 72 insertions(+), 32 deletions(-) diff --git a/packages/splitview-demo/src/layout-grid/application.tsx b/packages/splitview-demo/src/layout-grid/application.tsx index cbd8981c2..9bca05416 100644 --- a/packages/splitview-demo/src/layout-grid/application.tsx +++ b/packages/splitview-demo/src/layout-grid/application.tsx @@ -13,11 +13,11 @@ const rootcomponents: { [index: string]: React.FunctionComponent; } = { sidebar: (props: IGridviewPanelProps) => { - return
sidebar
; + return
sidebar
; }, editor: TestGrid, panel: () => { - return
panel
; + return
panel
; }, }; diff --git a/packages/splitview-demo/src/layout-grid/reactgrid.tsx b/packages/splitview-demo/src/layout-grid/reactgrid.tsx index edf3c167b..88779fd6a 100644 --- a/packages/splitview-demo/src/layout-grid/reactgrid.tsx +++ b/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 (
{ // tabHeight={30} enableExternalDragEvents={true} // serializedLayout={data} - // onTabContextMenu={onTabContextMenu} + onTabContextMenu={onTabContextMenu} />
); diff --git a/packages/splitview/src/events.ts b/packages/splitview/src/events.ts index 553bbcc39..71ddb4877 100644 --- a/packages/splitview/src/events.ts +++ b/packages/splitview/src/events.ts @@ -47,7 +47,7 @@ export class Emitter implements IDisposable { return { dispose: () => { const index = this._listeners.indexOf(listener); - if (index > 1) { + if (index > -1) { this._listeners.splice(index, 1); } }, diff --git a/packages/splitview/src/groupview/events.ts b/packages/splitview/src/groupview/events.ts index 0c0e0522c..6bcb0abe8 100644 --- a/packages/splitview/src/groupview/events.ts +++ b/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; +} diff --git a/packages/splitview/src/groupview/panel/tab/tab.ts b/packages/splitview/src/groupview/panel/tab/tab.ts index ab52a27fd..19b35f4da 100644 --- a/packages/splitview/src/groupview/panel/tab/tab.ts +++ b/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; + onChanged: Event; onDropped: Event; 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(); - readonly onChanged: Event = this._onChanged.event; + private readonly _onChanged = new Emitter(); + readonly onChanged: Event = this._onChanged.event; private readonly _onDropped = new Emitter(); readonly onDropped: Event = 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 }; diff --git a/packages/splitview/src/groupview/titlebar/tabContainer.ts b/packages/splitview/src/groupview/titlebar/tabContainer.ts index c5a5f39f0..549f3b676 100644 --- a/packages/splitview/src/groupview/titlebar/tabContainer.ts +++ b/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) }); diff --git a/packages/splitview/src/layout/index.ts b/packages/splitview/src/layout/index.ts index db0286bea..fca3da540 100644 --- a/packages/splitview/src/layout/index.ts +++ b/packages/splitview/src/layout/index.ts @@ -1,2 +1,3 @@ export * from "./layout"; export * from "./componentGridview"; +export * from "./options"; diff --git a/packages/splitview/src/layout/layout.ts b/packages/splitview/src/layout/layout.ts index 93fb524fd..65d4548fb 100644 --- a/packages/splitview/src/layout/layout.ts +++ b/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; + onTabInteractionEvent: Event; + onTabContextMenu: Event; 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(); - readonly onDidLayoutChange: Event = this._onDidLayoutChange - .event; + readonly onDidLayoutChange: Event = this._onDidLayoutChange.event; + private readonly _onTabInteractionEvent = new Emitter(); + readonly onTabInteractionEvent: Event = this._onTabInteractionEvent.event; + private readonly _onTabContextMenu = new Emitter(); + readonly onTabContextMenu: Event = 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); diff --git a/packages/splitview/src/layout/options.ts b/packages/splitview/src/layout/options.ts index 18e54ab5c..c716fe008 100644 --- a/packages/splitview/src/layout/options.ts +++ b/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 { diff --git a/packages/splitview/src/react/layout.tsx b/packages/splitview/src/react/layout.tsx index 3b010e321..6d7b49f99 100644 --- a/packages/splitview/src/react/layout.tsx +++ b/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]);