tgui-core 1.0.0

package/src/components/DraggableControl.jsx

@@ -0,0 +1,282 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { clamp } from '../common/math';
+import { Component, createRef } from 'react';
+
+import { AnimatedNumber } from './AnimatedNumber';
+
+const DEFAULT_UPDATE_RATE = 400;
+
+/**
+ * Reduces screen offset to a single number based on the matrix provided.
+ */
+const getScalarScreenOffset = (e, matrix) => {
+  return e.screenX * matrix[0] + e.screenY * matrix[1];
+};
+
+export class DraggableControl extends Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = createRef();
+    this.state = {
+      value: props.value,
+      dragging: false,
+      editing: false,
+      internalValue: null,
+      origin: null,
+      suppressingFlicker: false,
+    };
+
+    // Suppresses flickering while the value propagates through the backend
+    this.flickerTimer = null;
+    this.suppressFlicker = () => {
+      const { suppressFlicker } = this.props;
+      if (suppressFlicker > 0) {
+        this.setState({
+          suppressingFlicker: true,
+        });
+        clearTimeout(this.flickerTimer);
+        this.flickerTimer = setTimeout(() => {
+          this.setState({
+            suppressingFlicker: false,
+          });
+        }, suppressFlicker);
+      }
+    };
+
+    this.handleDragStart = (e) => {
+      const { value, dragMatrix } = this.props;
+      const { editing } = this.state;
+      if (editing) {
+        return;
+      }
+      document.body.style['pointer-events'] = 'none';
+      this.ref = e.target;
+      this.setState({
+        dragging: false,
+        origin: getScalarScreenOffset(e, dragMatrix),
+        value,
+        internalValue: value,
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          dragging: true,
+        });
+      }, 250);
+      this.dragInterval = setInterval(() => {
+        const { dragging, value } = this.state;
+        const { onDrag } = this.props;
+        if (dragging && onDrag) {
+          onDrag(e, value);
+        }
+      }, this.props.updateRate || DEFAULT_UPDATE_RATE);
+      document.addEventListener('mousemove', this.handleDragMove);
+      document.addEventListener('mouseup', this.handleDragEnd);
+    };
+
+    this.handleDragMove = (e) => {
+      const { minValue, maxValue, step, stepPixelSize, dragMatrix } =
+        this.props;
+      this.setState((prevState) => {
+        const state = { ...prevState };
+        const offset = getScalarScreenOffset(e, dragMatrix) - state.origin;
+        if (prevState.dragging) {
+          const stepOffset = Number.isFinite(minValue) ? minValue % step : 0;
+          // Translate mouse movement to value
+          // Give it some headroom (by increasing clamp range by 1 step)
+          state.internalValue = clamp(
+            state.internalValue + (offset * step) / stepPixelSize,
+            minValue - step,
+            maxValue + step
+          );
+          // Clamp the final value
+          state.value = clamp(
+            state.internalValue - (state.internalValue % step) + stepOffset,
+            minValue,
+            maxValue
+          );
+          state.origin = getScalarScreenOffset(e, dragMatrix);
+        } else if (Math.abs(offset) > 4) {
+          state.dragging = true;
+        }
+        return state;
+      });
+    };
+
+    this.handleDragEnd = (e) => {
+      const { onChange, onDrag } = this.props;
+      const { dragging, value, internalValue } = this.state;
+      document.body.style['pointer-events'] = 'auto';
+      clearTimeout(this.timer);
+      clearInterval(this.dragInterval);
+      this.setState({
+        dragging: false,
+        editing: !dragging,
+        origin: null,
+      });
+      document.removeEventListener('mousemove', this.handleDragMove);
+      document.removeEventListener('mouseup', this.handleDragEnd);
+      if (dragging) {
+        this.suppressFlicker();
+        if (onChange) {
+          onChange(e, value);
+        }
+        if (onDrag) {
+          onDrag(e, value);
+        }
+      } else if (this.inputRef) {
+        const input = this.inputRef.current;
+        input.value = internalValue;
+        // IE8: Dies when trying to focus a hidden element
+        // (Error: Object does not support this action)
+        try {
+          input.focus();
+          input.select();
+        } catch {}
+      }
+    };
+  }
+
+  render() {
+    const {
+      dragging,
+      editing,
+      value: intermediateValue,
+      suppressingFlicker,
+    } = this.state;
+    const {
+      animated,
+      value,
+      unit,
+      minValue,
+      maxValue,
+      unclamped,
+      format,
+      onChange,
+      onDrag,
+      children,
+      // Input props
+      height,
+      lineHeight,
+      fontSize,
+    } = this.props;
+    let displayValue = value;
+    if (dragging || suppressingFlicker) {
+      displayValue = intermediateValue;
+    }
+
+    const displayElement = (
+      <>
+        {animated && !dragging && !suppressingFlicker ? (
+          <AnimatedNumber value={displayValue} format={format} />
+        ) : format ? (
+          format(displayValue)
+        ) : (
+          displayValue
+        )}
+
+        {unit ? ' ' + unit : ''}
+      </>
+    );
+
+    // Setup an input element
+    // Handles direct input via the keyboard
+    const inputElement = (
+      <input
+        ref={this.inputRef}
+        className="NumberInput__input"
+        style={{
+          display: !editing ? 'none' : undefined,
+          height: height,
+          lineHeight: lineHeight,
+          fontsize: fontSize,
+        }}
+        onBlur={(e) => {
+          if (!editing) {
+            return;
+          }
+          let value;
+          if (unclamped) {
+            value = parseFloat(e.target.value);
+          } else {
+            value = clamp(parseFloat(e.target.value), minValue, maxValue);
+          }
+          if (Number.isNaN(value)) {
+            this.setState({
+              editing: false,
+            });
+            return;
+          }
+          this.setState({
+            editing: false,
+            value,
+          });
+          this.suppressFlicker();
+          if (onChange) {
+            onChange(e, value);
+          }
+          if (onDrag) {
+            onDrag(e, value);
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.keyCode === 13) {
+            let value;
+            if (unclamped) {
+              value = parseFloat(e.target.value);
+            } else {
+              value = clamp(parseFloat(e.target.value), minValue, maxValue);
+            }
+            if (Number.isNaN(value)) {
+              this.setState({
+                editing: false,
+              });
+              return;
+            }
+            this.setState({
+              editing: false,
+              value,
+            });
+            this.suppressFlicker();
+            if (onChange) {
+              onChange(e, value);
+            }
+            if (onDrag) {
+              onDrag(e, value);
+            }
+            return;
+          }
+          if (e.keyCode === 27) {
+            this.setState({
+              editing: false,
+            });
+            return;
+          }
+        }}
+      />
+    );
+    // Return a part of the state for higher-level components to use.
+    return children({
+      dragging,
+      editing,
+      value,
+      displayValue,
+      displayElement,
+      inputElement,
+      handleDragStart: this.handleDragStart,
+    });
+  }
+}
+
+DraggableControl.defaultProps = {
+  minValue: -Infinity,
+  maxValue: +Infinity,
+  step: 1,
+  stepPixelSize: 1,
+  suppressFlicker: 50,
+  dragMatrix: [1, 0],
+};

package/src/components/Dropdown.tsx

@@ -0,0 +1,246 @@
+import { classes } from '../common/react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { BoxProps, unit } from './Box';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Popper } from './Popper';
+
+export type DropdownEntry = {
+  displayText: ReactNode;
+  value: string | number;
+};
+
+type DropdownOption = string | DropdownEntry;
+
+type Props = {
+  /** An array of strings which will be displayed in the
+  dropdown when open. See Dropdown.tsx for more advanced usage with DropdownEntry */
+  options: DropdownOption[];
+  /** Called when a value is picked from the list, `value` is the value that was picked */
+  onSelected: (value: any) => void;
+  /** Currently selected entry to display. Can be left stateless to permanently display this value. */
+  selected: DropdownOption | null | undefined;
+} & Partial<{
+  /** Whether to scroll automatically on open. Defaults to true */
+  autoScroll: boolean;
+  /** Whether to display previous / next buttons */
+  buttons: boolean;
+  /** Whether to clip the selected text */
+  clipSelectedText: boolean;
+  /** Color of dropdown button */
+  color: string;
+  /** Disables the dropdown */
+  disabled: boolean;
+  /** Overwrites selection text with this. Good for objects etc. */
+  displayText: ReactNode;
+  /** Icon to display in dropdown button */
+  icon: string;
+  /** Angle of the icon */
+  iconRotation: number;
+  /** Whether or not the icon should spin */
+  iconSpin: boolean;
+  /** Width of the dropdown menu. Default: 15rem */
+  menuWidth: string;
+  /** Whether or not the arrow on the right hand side of the dropdown button is visible */
+  noChevron: boolean;
+  /** Called when dropdown button is clicked */
+  onClick: (event) => void;
+  /** Dropdown renders over instead of below */
+  over: boolean;
+  /** Text to show when nothing has been selected. */
+  placeholder: string;
+}> &
+  BoxProps;
+
+enum DIRECTION {
+  Previous = 'previous',
+  Next = 'next',
+  Current = 'current',
+}
+
+const NONE = -1;
+
+function getOptionValue(option: DropdownOption) {
+  return typeof option === 'string' ? option : option.value;
+}
+
+export function Dropdown(props: Props) {
+  const {
+    autoScroll = true,
+    buttons,
+    className,
+    clipSelectedText = true,
+    color = 'default',
+    disabled,
+    displayText,
+    icon,
+    iconRotation,
+    iconSpin,
+    menuWidth = '15rem',
+    noChevron,
+    onClick,
+    onSelected,
+    options = [],
+    over,
+    placeholder = 'Select...',
+    selected,
+    width = '15rem',
+  } = props;
+
+  const [open, setOpen] = useState(false);
+  const adjustedOpen = over ? !open : open;
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  const selectedIndex =
+    options.findIndex((option) => getOptionValue(option) === selected) || 0;
+
+  function scrollTo(position: number) {
+    let scrollPos = position;
+    if (position < selectedIndex) {
+      scrollPos = position < 2 ? 0 : position - 2;
+    } else {
+      scrollPos =
+        position > options.length - 3 ? options.length - 1 : position - 2;
+    }
+
+    const element = innerRef.current?.children[scrollPos];
+    element?.scrollIntoView({ block: 'nearest' });
+  }
+
+  /** Update the selected value when clicking the left/right buttons */
+  function updateSelected(direction: DIRECTION) {
+    if (options.length < 1 || disabled) {
+      return;
+    }
+
+    const startIndex = 0;
+    const endIndex = options.length - 1;
+
+    let newIndex: number;
+    if (selectedIndex < 0) {
+      newIndex = direction === 'next' ? endIndex : startIndex; // No selection yet
+    } else if (direction === 'next') {
+      newIndex = selectedIndex === endIndex ? startIndex : selectedIndex + 1; // Move to next option
+    } else {
+      newIndex = selectedIndex === startIndex ? endIndex : selectedIndex - 1; // Move to previous option
+    }
+
+    if (open && autoScroll) {
+      scrollTo(newIndex);
+    }
+    onSelected?.(getOptionValue(options[newIndex]));
+  }
+
+  /** Allows the menu to be scrollable on open */
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (autoScroll && selectedIndex !== NONE) {
+      scrollTo(selectedIndex);
+    }
+
+    innerRef.current?.focus();
+  }, [open]);
+
+  return (
+    <Popper
+      isOpen={open}
+      onClickOutside={() => setOpen(false)}
+      placement={over ? 'top-start' : 'bottom-start'}
+      content={
+        <div
+          className="Layout Dropdown__menu"
+          style={{ minWidth: menuWidth }}
+          ref={innerRef}
+        >
+          {options.length === 0 && (
+            <div className="Dropdown__menuentry">No options</div>
+          )}
+
+          {options.map((option, index) => {
+            const value = getOptionValue(option);
+
+            return (
+              <div
+                className={classes([
+                  'Dropdown__menuentry',
+                  selected === value && 'selected',
+                ])}
+                key={index}
+                onClick={() => {
+                  setOpen(false);
+                  onSelected?.(value);
+                }}
+              >
+                {typeof option === 'string' ? option : option.displayText}
+              </div>
+            );
+          })}
+        </div>
+      }
+    >
+      <div className="Dropdown" style={{ width: unit(width) }}>
+        <div
+          className={classes([
+            'Dropdown__control',
+            'Button',
+            'Button--dropdown',
+            'Button--color--' + color,
+            disabled && 'Button--disabled',
+            className,
+          ])}
+          onClick={(event) => {
+            if (disabled && !open) {
+              return;
+            }
+            setOpen(!open);
+            onClick?.(event);
+          }}
+        >
+          {icon && (
+            <Icon mr={1} name={icon} rotation={iconRotation} spin={iconSpin} />
+          )}
+          <span
+            className="Dropdown__selected-text"
+            style={{
+              overflow: clipSelectedText ? 'hidden' : 'visible',
+            }}
+          >
+            {displayText ||
+              (selected && getOptionValue(selected)) ||
+              placeholder}
+          </span>
+          {!noChevron && (
+            <span className="Dropdown__arrow-button">
+              <Icon name={adjustedOpen ? 'chevron-up' : 'chevron-down'} />
+            </span>
+          )}
+        </div>
+        {buttons && (
+          <>
+            <Button
+              disabled={disabled}
+              height={1.8}
+              icon="chevron-left"
+              onClick={() => {
+                updateSelected(DIRECTION.Previous);
+              }}
+            />
+
+            <Button
+              disabled={disabled}
+              height={1.8}
+              icon="chevron-right"
+              onClick={() => {
+                updateSelected(DIRECTION.Next);
+              }}
+            />
+          </>
+        )}
+      </div>
+    </Popper>
+  );
+}

package/src/components/FakeTerminal.jsx

@@ -0,0 +1,52 @@
+import { Component, Fragment } from 'react';
+
+import { Box } from './Box';
+
+export class FakeTerminal extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.state = {
+      currentIndex: 0,
+      currentDisplay: [],
+    };
+  }
+
+  tick() {
+    const { props, state } = this;
+    if (state.currentIndex <= props.allMessages.length) {
+      this.setState((prevState) => {
+        return {
+          currentIndex: prevState.currentIndex + 1,
+        };
+      });
+      const { currentDisplay } = state;
+      currentDisplay.push(props.allMessages[state.currentIndex]);
+    } else {
+      clearTimeout(this.timer);
+      setTimeout(props.onFinished, props.finishedTimeout);
+    }
+  }
+
+  componentDidMount() {
+    const { linesPerSecond = 2.5 } = this.props;
+    this.timer = setInterval(() => this.tick(), 1000 / linesPerSecond);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    return (
+      <Box m={1}>
+        {this.state.currentDisplay.map((value) => (
+          <Fragment key={value}>
+            {value}
+            <br />
+          </Fragment>
+        ))}
+      </Box>
+    );
+  }
+}

package/src/components/FitText.tsx

@@ -0,0 +1,99 @@
+import {
+  Component,
+  createRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  RefObject,
+} from 'react';
+
+const DEFAULT_ACCEPTABLE_DIFFERENCE = 5;
+
+type Props = {
+  acceptableDifference?: number;
+  maxWidth: number;
+  maxFontSize: number;
+  native?: HTMLAttributes<HTMLDivElement>;
+} & PropsWithChildren;
+
+type State = {
+  fontSize: number;
+};
+
+export class FitText extends Component<Props, State> {
+  ref: RefObject<HTMLDivElement> = createRef();
+  state: State = {
+    fontSize: 0,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.resize = this.resize.bind(this);
+
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.children !== this.props.children) {
+      this.resize();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize() {
+    const element = this.ref.current;
+    if (!element) {
+      return;
+    }
+
+    const maxWidth = this.props.maxWidth;
+
+    let start = 0;
+    let end = this.props.maxFontSize;
+
+    for (let _ = 0; _ < 10; _++) {
+      const middle = Math.round((start + end) / 2);
+      element.style.fontSize = `${middle}px`;
+
+      const difference = element.offsetWidth - maxWidth;
+
+      if (difference > 0) {
+        end = middle;
+      } else if (
+        difference <
+        (this.props.acceptableDifference ?? DEFAULT_ACCEPTABLE_DIFFERENCE)
+      ) {
+        start = middle;
+      } else {
+        break;
+      }
+    }
+
+    this.setState({
+      fontSize: Math.round((start + end) / 2),
+    });
+  }
+
+  componentDidMount() {
+    this.resize();
+  }
+
+  render() {
+    return (
+      <span
+        ref={this.ref}
+        style={{
+          fontSize: `${this.state.fontSize}px`,
+          ...(typeof this.props.native?.style === 'object'
+            ? this.props.native.style
+            : {}),
+        }}
+      >
+        {this.props.children}
+      </span>
+    );
+  }
+}