tgui-core 1.1.11 → 1.1.13

package/lib/components/InfinitePlane.jsx

@@ -1,192 +0,0 @@
-import { Component } from 'react';
-
-import { computeBoxProps } from './Box';
-import { Button } from './Button';
-import { ProgressBar } from './ProgressBar';
-import { Stack } from './Stack';
-
-const ZOOM_MIN_VAL = 0.5;
-const ZOOM_MAX_VAL = 1.5;
-
-const ZOOM_INCREMENT = 0.1;
-
-export class InfinitePlane extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      mouseDown: false,
-
-      left: 0,
-      top: 0,
-
-      lastLeft: 0,
-      lastTop: 0,
-
-      zoom: 1,
-    };
-
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleZoomIncrease = this.handleZoomIncrease.bind(this);
-    this.handleZoomDecrease = this.handleZoomDecrease.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
-
-    this.doOffsetMouse = this.doOffsetMouse.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('mouseup', this.onMouseUp);
-
-    window.addEventListener('mousedown', this.doOffsetMouse);
-    window.addEventListener('mousemove', this.doOffsetMouse);
-    window.addEventListener('mouseup', this.doOffsetMouse);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mouseup', this.onMouseUp);
-
-    window.removeEventListener('mousedown', this.doOffsetMouse);
-    window.removeEventListener('mousemove', this.doOffsetMouse);
-    window.removeEventListener('mouseup', this.doOffsetMouse);
-  }
-
-  doOffsetMouse(event) {
-    const { zoom } = this.state;
-    event.screenZoomX = event.screenX * Math.pow(zoom, -1);
-    event.screenZoomY = event.screenY * Math.pow(zoom, -1);
-  }
-
-  handleMouseDown(event) {
-    this.setState((state) => {
-      return {
-        mouseDown: true,
-        lastLeft: event.clientX - state.left,
-        lastTop: event.clientY - state.top,
-      };
-    });
-  }
-
-  onMouseUp() {
-    this.setState({
-      mouseDown: false,
-    });
-  }
-
-  handleZoomIncrease(event) {
-    const { onZoomChange } = this.props;
-    const { zoom } = this.state;
-    const newZoomValue = Math.min(zoom + ZOOM_INCREMENT, ZOOM_MAX_VAL);
-    this.setState({
-      zoom: newZoomValue,
-    });
-    if (onZoomChange) {
-      onZoomChange(newZoomValue);
-    }
-  }
-
-  handleZoomDecrease(event) {
-    const { onZoomChange } = this.props;
-    const { zoom } = this.state;
-    const newZoomValue = Math.max(zoom - ZOOM_INCREMENT, ZOOM_MIN_VAL);
-    this.setState({
-      zoom: newZoomValue,
-    });
-
-    if (onZoomChange) {
-      onZoomChange(newZoomValue);
-    }
-  }
-
-  handleMouseMove(event) {
-    const { onBackgroundMoved, initialLeft = 0, initialTop = 0 } = this.props;
-    if (this.state.mouseDown) {
-      let newX, newY;
-      this.setState((state) => {
-        newX = event.clientX - state.lastLeft;
-        newY = event.clientY - state.lastTop;
-        return {
-          left: newX,
-          top: newY,
-        };
-      });
-      if (onBackgroundMoved) {
-        onBackgroundMoved(newX + initialLeft, newY + initialTop);
-      }
-    }
-  }
-
-  render() {
-    const {
-      children,
-      backgroundImage,
-      imageWidth,
-      initialLeft = 0,
-      initialTop = 0,
-      ...rest
-    } = this.props;
-    const { left, top, zoom } = this.state;
-
-    const finalLeft = initialLeft + left;
-    const finalTop = initialTop + top;
-
-    return (
-      <div
-        ref={this.ref}
-        {...computeBoxProps({
-          ...rest,
-          style: {
-            ...rest.style,
-            overflow: 'hidden',
-            position: 'relative',
-          },
-        })}
-      >
-        <div
-          onMouseDown={this.handleMouseDown}
-          onMouseMove={this.handleMouseMove}
-          style={{
-            position: 'fixed',
-            height: '100%',
-            width: '100%',
-            backgroundImage: `url("${backgroundImage}")`,
-            backgroundPosition: `${finalLeft}px ${finalTop}px`,
-            backgroundRepeat: 'repeat',
-            backgroundSize: `${zoom * imageWidth}px`,
-          }}
-        />
-        <div
-          onMouseDown={this.handleMouseDown}
-          onMouseMove={this.handleMouseMove}
-          style={{
-            position: 'fixed',
-            transform: `translate(${finalLeft}px, ${finalTop}px) scale(${zoom})`,
-            transformOrigin: 'top left',
-            height: '100%',
-            width: '100%',
-          }}
-        >
-          {children}
-        </div>
-
-        <Stack position="absolute" width="100%">
-          <Stack.Item>
-            <Button icon="minus" onClick={this.handleZoomDecrease} />
-          </Stack.Item>
-          <Stack.Item grow={1}>
-            <ProgressBar
-              minValue={ZOOM_MIN_VAL}
-              value={zoom}
-              maxValue={ZOOM_MAX_VAL}
-            >
-              {zoom}x
-            </ProgressBar>
-          </Stack.Item>
-          <Stack.Item>
-            <Button icon="plus" onClick={this.handleZoomIncrease} />
-          </Stack.Item>
-        </Stack>
-      </div>
-    );
-  }
-}

package/lib/components/Input.tsx

@@ -1,176 +0,0 @@
-import { KeyboardEvent, SyntheticEvent, useEffect, useRef } from 'react';
-
-import { KEY } from '../common/keys';
-import { classes } from '../common/react';
-import { debounce } from '../common/timer';
-import styles from '../styles/components/Input.module.scss';
-import { Box, BoxProps } from './Box';
-
-type ConditionalProps =
-  | {
-      /**
-       * Mark this if you want to debounce onInput.
-       *
-       * This is useful for expensive filters, large lists etc.
-       *
-       * Requires `onInput` to be set.
-       */
-      expensive?: boolean;
-      /**
-       * Fires on each key press / value change. Used for searching.
-       *
-       * If it's a large list, consider using `expensive` prop.
-       */
-      onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-    }
-  | {
-      /** This prop requires onInput to be set */
-      expensive?: never;
-      onInput?: never;
-    };
-
-type OptionalProps = Partial<{
-  /** Automatically focuses the input on mount */
-  autoFocus: boolean;
-  /** Automatically selects the input value on focus */
-  autoSelect: boolean;
-  /** The class name of the input */
-  className: string;
-  /** Disables the input */
-  disabled: boolean;
-  /** Mark this if you want the input to be as wide as possible */
-  fluid: boolean;
-  /** The maximum length of the input value */
-  maxLength: number;
-  /** Mark this if you want to use a monospace font */
-  monospace: boolean;
-  /** Fires when user is 'done typing': Clicked out, blur, enter key */
-  onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  /** Fires once the enter key is pressed */
-  onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  /** Fires once the escape key is pressed */
-  onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
-  /** The placeholder text when everything is cleared */
-  placeholder: string;
-  /** Clears the input value on enter */
-  selfClear: boolean;
-  /** The state variable of the input. */
-  value: string | number;
-}>;
-
-type Props = OptionalProps & ConditionalProps & BoxProps;
-
-export function toInputValue(value: string | number | undefined) {
-  return typeof value !== 'number' && typeof value !== 'string'
-    ? ''
-    : String(value);
-}
-
-const inputDebounce = debounce((onInput: () => void) => onInput(), 250);
-
-/**
- * ### Input
- * A basic text input which allow users to enter text into a UI.
- * > Input does not support custom font size and height due to the way
- * > it's implemented in CSS. Eventually, this needs to be fixed.
- */
-export function Input(props: Props) {
-  const {
-    autoFocus,
-    autoSelect,
-    className,
-    disabled,
-    expensive,
-    fluid,
-    maxLength,
-    monospace,
-    onChange,
-    onEnter,
-    onEscape,
-    onInput,
-    placeholder,
-    selfClear,
-    value,
-    ...rest
-  } = props;
-
-  // The ref to the input field
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  function handleInput(event: SyntheticEvent<HTMLInputElement>) {
-    if (!onInput) return;
-
-    const value = event.currentTarget?.value;
-
-    if (expensive) {
-      inputDebounce(() => onInput(event, value));
-    } else {
-      onInput(event, value);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === KEY.Enter) {
-      onEnter?.(event, event.currentTarget.value);
-      if (selfClear) {
-        event.currentTarget.value = '';
-      } else {
-        event.currentTarget.blur();
-        onChange?.(event, event.currentTarget.value);
-      }
-
-      return;
-    }
-
-    if (event.key === KEY.Escape) {
-      onEscape?.(event);
-
-      event.currentTarget.value = toInputValue(value);
-      event.currentTarget.blur();
-    }
-  }
-
-  /** Focuses the input on mount */
-  useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-
-    const newValue = toInputValue(value);
-
-    if (input.value !== newValue) input.value = newValue;
-
-    if (!autoFocus && !autoSelect) return;
-
-    setTimeout(() => {
-      input.focus();
-
-      if (autoSelect) {
-        input.select();
-      }
-    }, 1);
-  }, []);
-
-  return (
-    <Box
-      className={classes([
-        styles.input,
-        fluid && styles.fluid,
-        monospace && styles.monospace,
-        className,
-      ])}
-      {...rest}
-    >
-      <div className={styles.baseline}>.</div>
-      <input
-        className={styles.inner}
-        disabled={disabled}
-        maxLength={maxLength}
-        onBlur={(event) => onChange?.(event, event.target.value)}
-        onChange={handleInput}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        ref={inputRef}
-      />
-    </Box>
-  );
-}

package/lib/components/KeyListener.tsx

@@ -1,40 +0,0 @@
-import { Component } from 'react';
-
-import { KeyEvent } from '../common/events';
-import { listenForKeyEvents } from '../common/hotkeys';
-
-type KeyListenerProps = Partial<{
-  onKey: (key: KeyEvent) => void;
-  onKeyDown: (key: KeyEvent) => void;
-  onKeyUp: (key: KeyEvent) => void;
-}>;
-
-export class KeyListener extends Component<KeyListenerProps> {
-  dispose: () => void;
-
-  constructor(props) {
-    super(props);
-
-    this.dispose = listenForKeyEvents((key) => {
-      if (this.props.onKey) {
-        this.props.onKey(key);
-      }
-
-      if (key.isDown() && this.props.onKeyDown) {
-        this.props.onKeyDown(key);
-      }
-
-      if (key.isUp() && this.props.onKeyUp) {
-        this.props.onKeyUp(key);
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.dispose();
-  }
-
-  render() {
-    return null;
-  }
-}

package/lib/components/Knob.tsx

@@ -1,178 +0,0 @@
-import { keyOfMatchingRange, scale } from '../common/math';
-import { BooleanLike, classes } from '../common/react';
-import styles from '../styles/components/Knob.module.scss';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { DraggableControl } from './DraggableControl';
-
-type Props = {
-  /** Value itself, controls the position of the cursor. */
-  value: number;
-} & Partial<{
-  /** Animates the value if it was changed externally. */
-  animated: boolean;
-  /** Knob can be bipolar or unipolar. */
-  bipolar: boolean;
-  /** Color of the outer ring around the knob. */
-  color: string | BooleanLike;
-  /** If set, this value will be used to set the fill percentage of the outer ring independently of the main value. */
-  fillValue: number;
-  /** Format value using this function before displaying it. */
-  format: (value: number) => string;
-  /** Highest possible value. */
-  maxValue: number;
-  /** Lowest possible value. */
-  minValue: number;
-  /** Adjust value by this amount when dragging the input. */
-  onChange: (event: Event, value: number) => void;
-  /** An event, which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
-  onDrag: (event: Event, value: number) => void;
-  /** Applies a `color` to the outer ring around the knob based on whether the value lands in the range between `from` and `to`. */
-  ranges: Record<string, [number, number]>;
-  /** Relative size of the knob. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
-  size: number;
-  /** Adjust value by this amount when dragging the input. */
-  step: number;
-  /** Screen distance mouse needs to travel to adjust value by one `step`. */
-  stepPixelSize: number;
-  /** A number in milliseconds, for which the input will hold off from updating while events propagate through the backend. Default is about 250ms, increase it if you still see flickering. */
-  suppressFlicker: boolean;
-  /** Whether to clamp the value to the range. */
-  unclamped: boolean;
-  /** Unit to display to the right of value. */
-  unit: string;
-}> &
-  BoxProps;
-
-/**
- * ## Knob
- * A radial control which allows dialing in precise values by dragging it
- * up and down.
- *
- * Single click opens an input box to manually type in a number.
- */
-export function Knob(props: Props) {
-  const {
-    // Draggable props (passthrough)
-    animated,
-    format,
-    maxValue,
-    minValue,
-    onChange,
-    onDrag,
-    step,
-    stepPixelSize,
-    suppressFlicker,
-    unclamped,
-    unit,
-    value,
-    // Own props
-    bipolar,
-    className,
-    color,
-    fillValue,
-    ranges = {},
-    size = 1,
-    style,
-    ...rest
-  } = props;
-
-  return (
-    <DraggableControl
-      dragMatrix={[0, -1]}
-      {...{
-        animated,
-        format,
-        maxValue,
-        minValue,
-        onChange,
-        onDrag,
-        step,
-        stepPixelSize,
-        suppressFlicker,
-        unclamped,
-        unit,
-        value,
-      }}
-    >
-      {(control) => {
-        const {
-          displayElement,
-          displayValue,
-          dragging,
-          handleDragStart,
-          inputElement,
-          value,
-        } = control;
-        const scaledFillValue = scale(
-          fillValue ?? displayValue,
-          minValue,
-          maxValue,
-        );
-        const scaledDisplayValue = scale(displayValue, minValue, maxValue);
-        const effectiveColor =
-          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
-        const rotation = Math.min((scaledDisplayValue - 0.5) * 270, 225);
-
-        return (
-          <div
-            className={classes([
-              styles.knob,
-              styles['color__' + effectiveColor],
-              bipolar && styles.bipolar,
-              className,
-              computeBoxClassName(rest),
-            ])}
-            {...computeBoxProps({
-              style: {
-                fontSize: size + 'em',
-                ...style,
-              },
-              ...rest,
-            })}
-            onMouseDown={handleDragStart}
-          >
-            <div className={styles.circle}>
-              <div
-                className={styles.cursorBox}
-                style={{
-                  transform: `rotate(${rotation}deg)`,
-                }}
-              >
-                <div className={styles.cursor} />
-              </div>
-            </div>
-            {dragging && (
-              <div className={styles.popupValue}>{displayElement}</div>
-            )}
-            <svg
-              className={classes([styles.ring, styles.ringTrackPivot])}
-              viewBox="0 0 100 100"
-            >
-              <circle className="Knob__ringTrack" cx="50" cy="50" r="50" />
-            </svg>
-            <svg
-              className={classes([styles.ring, styles.ringFillPivot])}
-              viewBox="0 0 100 100"
-            >
-              <circle
-                className={styles.ringFill}
-                style={{
-                  strokeDashoffset: Math.max(
-                    ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) *
-                      Math.PI *
-                      50,
-                    0,
-                  ),
-                }}
-                cx="50"
-                cy="50"
-                r="50"
-              />
-            </svg>
-            {inputElement}
-          </div>
-        );
-      }}
-    </DraggableControl>
-  );
-}

package/lib/components/LabeledControls.tsx

@@ -1,44 +0,0 @@
-import { Flex, FlexProps } from './Flex';
-
-export function LabeledControls(props: FlexProps) {
-  const { children, wrap, ...rest } = props;
-
-  return (
-    <Flex
-      mx={-0.5}
-      wrap={wrap}
-      align="stretch"
-      justify="space-between"
-      {...rest}
-    >
-      {children}
-    </Flex>
-  );
-}
-
-type ItemProps = {
-  label: string;
-} & FlexProps;
-
-function LabeledControlsItem(props: ItemProps) {
-  const { label, children, mx = 1, ...rest } = props;
-
-  return (
-    <Flex.Item mx={mx}>
-      <Flex
-        height="100%"
-        direction="column"
-        align="center"
-        textAlign="center"
-        justify="space-between"
-        {...rest}
-      >
-        <Flex.Item />
-        <Flex.Item>{children}</Flex.Item>
-        <Flex.Item color="label">{label}</Flex.Item>
-      </Flex>
-    </Flex.Item>
-  );
-}
-
-LabeledControls.Item = LabeledControlsItem;