Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.2 kB · 122 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123import * as React from "react";
import { Actions } from "../model/Actions";import { BorderNode } from "../model/BorderNode";import type { TabNode } from "../model/TabNode";import { TabSetNode } from "../model/TabSetNode";import { CLASSES } from "../Types";import type { LayoutInternal } from "./Layout";
/** @internal */export interface ITabProps { layout: LayoutInternal; node: TabNode; selected: boolean; path: string;}
/** @internal */export const Tab = (props: ITabProps) => { const { layout, selected, node, path } = props; const selfRef = React.useRef<HTMLDivElement | null>(null); const firstSelect = React.useRef<boolean>(true);
const parentNode = node.getParent() as TabSetNode | BorderNode; const rect = parentNode.getContentRect()!;
React.useLayoutEffect(() => { const element = node.getMoveableElement()!; selfRef.current!.appendChild(element); node.setMoveableElement(element);
const handleScroll = () => { node.saveScrollPosition(); };
// keep scroll position element.addEventListener("scroll", handleScroll);
// listen for clicks to change active tabset selfRef.current!.addEventListener("pointerdown", onPointerDown);
return () => { element.removeEventListener("scroll", handleScroll); if (selfRef.current) { selfRef.current.removeEventListener("pointerdown", onPointerDown); } node.setVisible(false); }; }, []);
React.useEffect(() => { if (node.isSelected()) { if (firstSelect.current) { node.restoreScrollPosition(); // if window docked back in firstSelect.current = false; } } });
const onPointerDown = () => { const parent = node.getParent()!; // cannot use parentNode here since will be out of date if (parent instanceof TabSetNode) { if (!parent.isActive()) { layout.doAction(Actions.setActiveTabset(parent.getId(), layout.getWindowId())); } } };
node.setRect(rect); // needed for resize event const cm = layout.getClassName; const style: Record<string, any> = {};
rect.styleWithPosition(style);
let overlay = null;
if (selected) { node.setVisible(true); if (document.hidden && node.isEnablePopoutOverlay()) { const overlayStyle: Record<string, any> = {}; rect.styleWithPosition(overlayStyle); overlay = <div style={overlayStyle} className={cm(CLASSES.FLEXLAYOUT__TAB_OVERLAY)} />; } } else { style.display = "none"; node.setVisible(false); }
if (parentNode instanceof TabSetNode) { if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== undefined) { if (parentNode.isMaximized()) { style.zIndex = 10; } else { style.display = "none"; } } }
if (parentNode instanceof BorderNode) { if (!parentNode.isShowing()) { style.display = "none"; } }
let className = cm(CLASSES.FLEXLAYOUT__TAB); if (parentNode instanceof BorderNode) { className += ` ${cm(CLASSES.FLEXLAYOUT__TAB_BORDER)}`; className += ` ${cm(CLASSES.FLEXLAYOUT__TAB_BORDER_ + parentNode.getLocation().getName())}`; }
if (node.getContentClassName() !== undefined) { className += ` ${node.getContentClassName()}`; }
return ( <> {overlay}
<div ref={selfRef} style={style} className={className} data-layout-path={path} /> </> );};