Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
5.4 kB · 202 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203import * as React from "react";
import { I18nLabel } from "../I18nLabel";import { Actions } from "../model/Actions";import { ICloseType } from "../model/ICloseType";import type { TabNode } from "../model/TabNode";import { CLASSES } from "../Types";import type { IIcons, LayoutInternal } from "./Layout";import { getRenderStateEx, isAuxMouseEvent } from "./Utils";
/** @internal */export interface IBorderButtonProps { layout: LayoutInternal; node: TabNode; selected: boolean; border: string; icons: IIcons; path: string;}
/** @internal */export const BorderButton = (props: IBorderButtonProps) => { const { layout, node, selected, border, icons, path } = props; const selfRef = React.useRef<HTMLDivElement | null>(null); const contentRef = React.useRef<HTMLInputElement | null>(null);
const onDragStart = (event: React.DragEvent<HTMLElement>) => { if (node.isEnableDrag()) { event.stopPropagation(); layout.setDragNode(event.nativeEvent, node as TabNode); } else { event.preventDefault(); } };
const onDragEnd = (event: React.DragEvent<HTMLElement>) => { event.stopPropagation(); layout.clearDragMain(); };
const onAuxMouseClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { if (isAuxMouseEvent(event)) { layout.auxMouseClick(node, event); } };
const onContextMenu = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { layout.showContextMenu(node, event); };
const onClick = () => { layout.doAction(Actions.selectTab(node.getId())); };
// const onDoubleClick = (event: Event) => { // // if (node.isEnableRename()) { // // onRename(); // // } // };
// const onRename = () => { // layout.setEditingTab(node); // layout.getCurrentDocument()!.body.addEventListener("pointerdown", onEndEdit); // };
const onEndEdit = (event: Event) => { if (event.target !== contentRef.current!) { layout.getCurrentDocument()!.body.removeEventListener("pointerdown", onEndEdit); layout.setEditingTab(undefined); } };
const isClosable = () => { const closeType = node.getCloseType(); if (selected || closeType === ICloseType.Always) { return true; } if (closeType === ICloseType.Visible) { // not selected but x should be visible due to hover if (window.matchMedia?.("(hover: hover) and (pointer: fine)").matches) { return true; } } return false; };
const onClose = (event: React.MouseEvent<HTMLElement>) => { if (isClosable()) { layout.doAction(Actions.deleteTab(node.getId())); event.stopPropagation(); } };
const onClosePointerDown = (event: React.PointerEvent<HTMLElement>) => { event.stopPropagation(); };
React.useLayoutEffect(() => { node.setTabRect(layout.getBoundingClientRect(selfRef.current!)); if (layout.getEditingTab() === node) { (contentRef.current! as HTMLInputElement).select(); } });
const onTextBoxPointerDown = (event: React.PointerEvent<HTMLInputElement>) => { event.stopPropagation(); };
const onTextBoxKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.code === "Escape") { // esc layout.setEditingTab(undefined); } else if (event.code === "Enter") { // enter layout.setEditingTab(undefined); layout.doAction(Actions.renameTab(node.getId(), (event.target as HTMLInputElement).value)); } };
const cm = layout.getClassName; let classNames = `${cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON)} ${cm( CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border, )}`;
if (selected) { classNames += ` ${cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED)}`; } else { classNames += ` ${cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED)}`; }
if (node.getClassName() !== undefined) { classNames += ` ${node.getClassName()}`; }
let iconAngle = 0; if (node.getModel().isEnableRotateBorderIcons() === false) { if (border === "left") { iconAngle = 90; } else if (border === "right") { iconAngle = -90; } }
const renderState = getRenderStateEx(layout, node, iconAngle);
let content = renderState.content ? ( <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT)}>{renderState.content}</div> ) : null;
const leading = renderState.leading ? ( <div className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING)}>{renderState.leading}</div> ) : null;
if (layout.getEditingTab() === node) { content = ( <input ref={contentRef} className={cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX)} data-layout-path={`${path}/textbox`} type="text" defaultValue={node.getName()} onKeyDown={onTextBoxKeyPress} onPointerDown={onTextBoxPointerDown} /> ); }
if (node.isEnableClose()) { const closeTitle = layout.i18nName(I18nLabel.Close_Tab); renderState.buttons.push( <div key="close" data-layout-path={`${path}/button/close`} title={closeTitle} className={cm(CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING)} onPointerDown={onClosePointerDown} onClick={onClose} > {typeof icons.close === "function" ? icons.close(node) : icons.close} </div>, ); }
return ( <div ref={selfRef} data-layout-path={path} className={classNames} onClick={onClick} onAuxClick={onAuxMouseClick} onContextMenu={onContextMenu} title={node.getHelpText()} draggable={true} onDragStart={onDragStart} onDragEnd={onDragEnd} > {leading} {content} {renderState.buttons} </div> );};