Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
8.6 kB · 307 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308import * as React from "react";
import { DockLocation } from "../DockLocation";import { I18nLabel } from "../I18nLabel";import { Actions } from "../model/Actions";import type { BorderNode } from "../model/BorderNode";import type { TabNode } from "../model/TabNode";import { Orientation } from "../Orientation";import { CLASSES } from "../Types";import { BorderButton } from "./BorderButton";import type { LayoutInternal, ITabSetRenderValues } from "./Layout";import { showPopup } from "./PopupMenu";import { useTabOverflow } from "./TabOverflowHook";import { isAuxMouseEvent } from "./Utils";
/** @internal */export interface IBorderTabSetProps { border: BorderNode; layout: LayoutInternal; size: number;}
/** @internal */export const BorderTabSet = (props: IBorderTabSetProps) => { const { border, layout, size } = props;
const toolbarRef = React.useRef<HTMLDivElement | null>(null); const miniScrollRef = React.useRef<HTMLDivElement | null>(null); const overflowbuttonRef = React.useRef<HTMLButtonElement | null>(null); const stickyButtonsRef = React.useRef<HTMLDivElement | null>(null); const tabStripInnerRef = React.useRef<HTMLDivElement | null>(null);
const icons = layout.getIcons();
React.useLayoutEffect(() => { border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current!)); });
const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs, } = useTabOverflow( layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON), );
const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { if (isAuxMouseEvent(event)) { layout.auxMouseClick(border, event); } };
const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { layout.showContextMenu(border, event); };
const onInterceptPointerDown = (event: React.PointerEvent) => { event.stopPropagation(); };
const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { const callback = layout.getShowOverflowMenu(); const items = hiddenTabs.map((h) => { return { index: h, node: border.getChildren()[h] as TabNode }; }); if (callback !== undefined) { callback(border, event, items, onOverflowItemSelect); } else { const element = overflowbuttonRef.current!; showPopup(element, border, items, onOverflowItemSelect, layout); } event.stopPropagation(); };
const onOverflowItemSelect = (item: { node: TabNode; index: number }) => { layout.doAction(Actions.selectTab(item.node.getId())); userControlledPositionRef.current = false; };
const onPopoutTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode; if (selectedTabNode !== undefined) { layout.doAction(Actions.popoutTab(selectedTabNode.getId())); } event.stopPropagation(); };
const cm = layout.getClassName;
const tabButtons: any = [];
const layoutTab = (i: number) => { const isSelected = border.getSelected() === i; const child = border.getChildren()[i] as TabNode;
tabButtons.push( <BorderButton layout={layout} border={border.getLocation().getName()} node={child} path={`${border.getPath()}/tb${i}`} key={child.getId()} selected={isSelected} icons={icons} />, ); if (i < border.getChildren().length - 1) { tabButtons.push( <div key={`divider${i}`} className={cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER)} />, ); } };
for (let i = 0; i < border.getChildren().length; i++) { layoutTab(i); }
let borderClasses = `${cm(CLASSES.FLEXLAYOUT__BORDER)} ${cm( CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName(), )}`; if (border.getClassName() !== undefined) { borderClasses += ` ${border.getClassName()}`; }
// allow customization of tabset right/bottom buttons let buttons: any[] = []; const stickyButtons: any[] = []; const renderState: ITabSetRenderValues = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined, }; layout.customizeTabSet(border, renderState); buttons = renderState.buttons;
if (renderState.overflowPosition === undefined) { renderState.overflowPosition = stickyButtons.length; }
if (stickyButtons.length > 0) { if (isDockStickyButtons) { buttons = [...stickyButtons, ...buttons]; } else { tabButtons.push( <div ref={stickyButtonsRef} key="sticky_buttons_container" onPointerDown={onInterceptPointerDown} onDragStart={(e) => { e.preventDefault(); }} className={cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER)} > {stickyButtons} </div>, ); } }
if (isShowHiddenTabs) { const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip); let overflowContent: React.ReactNode; if (typeof icons.more === "function") { const items = hiddenTabs.map((h) => { return { index: h, node: border.getChildren()[h] as TabNode }; });
overflowContent = icons.more(border, items); } else { overflowContent = ( <> {icons.more} <div className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT)}> {hiddenTabs.length > 0 ? hiddenTabs.length : ""} </div> </> ); } buttons.splice( Math.min(renderState.overflowPosition, buttons.length), 0, <button key="overflowbutton" ref={overflowbuttonRef} className={`${cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON)} ${cm( CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW, )} ${cm( CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName(), )}`} title={overflowTitle} onClick={onOverflowClick} onPointerDown={onInterceptPointerDown} > {overflowContent} </button>, ); }
const selectedIndex = border.getSelected(); if (selectedIndex !== -1) { const selectedTabNode = border.getChildren()[selectedIndex] as TabNode; if ( selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout() ) { const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab); buttons.push( <button key="popout" title={popoutTitle} className={`${cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON)} ${cm( CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT, )}`} onClick={onPopoutTab} onPointerDown={onInterceptPointerDown} > {typeof icons.popout === "function" ? icons.popout(selectedTabNode) : icons.popout} </button>, ); } } const toolbar = ( <div key="toolbar" ref={toolbarRef} className={`${cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR)} ${cm( CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName(), )}`} > {buttons} </div> );
let innerStyle = {}; let outerStyle = {}; const borderHeight = size - 1; if (border.getLocation() === DockLocation.LEFT) { innerStyle = { right: "100%", top: 0 }; outerStyle = { width: borderHeight, overflowY: "auto" }; } else if (border.getLocation() === DockLocation.RIGHT) { innerStyle = { left: "100%", top: 0 }; outerStyle = { width: borderHeight, overflowY: "auto" }; } else { innerStyle = { left: 0 }; outerStyle = { height: borderHeight, overflowX: "auto" }; }
let miniScrollbar: any; if (border.isEnableTabScrollbar()) { miniScrollbar = ( <div ref={miniScrollRef} className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR)} onPointerDown={onScrollPointerDown} /> ); }
return ( <div ref={selfRef} style={{ display: "flex", flexDirection: border.getOrientation() === Orientation.VERT ? "row" : "column", }} className={borderClasses} data-layout-path={border.getPath()} onClick={onAuxMouseClick} onAuxClick={onAuxMouseClick} onContextMenu={onContextMenu} onWheel={onMouseWheel} > <div className={cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER)}> <div ref={tabStripInnerRef} className={`${cm(CLASSES.FLEXLAYOUT__BORDER_INNER)} ${cm( CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName(), )}`} style={outerStyle} onScroll={onScroll} > <div style={innerStyle} className={`${cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER)} ${cm( CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName(), )}`} > {tabButtons} </div> </div> {miniScrollbar} </div> {toolbar} </div> );};