tgui-core 1.1.7 → 1.1.9

package/lib/components/InfinitePlane.jsx

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,178 @@
+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

@@ -0,0 +1,44 @@
+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;