tgui-core 1.1.8 → 1.1.9

package/lib/components/Button.tsx

@@ -0,0 +1,425 @@
+import { Placement } from '@popperjs/core';
+import {
+  ChangeEvent,
+  createRef,
+  MouseEvent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { KEY } from '../common/keys';
+import { BooleanLike, classes } from '../common/react';
+import styles from '../styles/components/Button.module.scss';
+import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+
+/**
+ * Getting ellipses to work requires that you use:
+ * 1. A string rather than a node
+ * 2. A fixed width here or in a parent
+ * 3. Children prop rather than content
+ */
+type EllipsisUnion =
+  | {
+      children: string;
+      /** @deprecated use children instead */
+      content?: never;
+      /** Cuts off text with an ellipsis */
+      ellipsis: true;
+    }
+  | Partial<{
+      children: ReactNode;
+      /** @deprecated use children instead */
+      content: ReactNode;
+      ellipsis: undefined;
+    }>;
+
+type Props = Partial<{
+  /** Captures keyboard events */
+  captureKeys: boolean;
+  /** Makes the button circular */
+  circular: boolean;
+  /** Reduces the padding of the button */
+  compact: boolean;
+  /** Disables and greys out the button */
+  disabled: BooleanLike;
+  /** Fill all available horizontal space */
+  fluid: boolean;
+  /** Adds an icon to the button */
+  icon: string | false;
+  /** Icon color */
+  iconColor: string;
+  /** Icon position */
+  iconPosition: string;
+  /** Icon rotation */
+  iconRotation: number;
+  /** Makes the icon spin */
+  iconSpin: BooleanLike;
+  /** Called when element is clicked */
+  onClick: (e: any) => void;
+  /** Activates the button (gives it a green color) */
+  selected: BooleanLike;
+  /** A fancy, boxy tooltip, which appears when hovering over the button */
+  tooltip: ReactNode;
+  /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
+  tooltipPosition: Placement;
+  /** Align content vertically using flex. Use lineHeight if the height is static. */
+  verticalAlignContent: string;
+}> &
+  EllipsisUnion &
+  BoxProps;
+
+/** Clickable button. Comes with variants. Read more in the documentation. */
+export function Button(props: Props) {
+  const {
+    captureKeys = true,
+    children,
+    circular,
+    className,
+    color,
+    compact,
+    content,
+    disabled,
+    ellipsis,
+    fluid,
+    icon,
+    iconColor,
+    iconPosition,
+    iconRotation,
+    iconSpin,
+    onClick,
+    selected,
+    tooltip,
+    tooltipPosition,
+    verticalAlignContent,
+    ...rest
+  } = props;
+
+  const toDisplay: ReactNode = content || children;
+
+  let buttonContent = (
+    <div
+      className={classes([
+        styles.button,
+        fluid && styles.fluid,
+        disabled && styles.disabled,
+        selected && styles.selected,
+        circular && styles.circular,
+        compact && styles.compact,
+        verticalAlignContent && styles.flex,
+        verticalAlignContent && fluid && styles.flex__fluid,
+        verticalAlignContent &&
+          styles['verticalAlignContent__' + verticalAlignContent],
+        color && typeof color === 'string'
+          ? styles['color__' + color]
+          : styles['color__default'],
+        className,
+        computeBoxClassName(rest),
+      ])}
+      tabIndex={!disabled ? 0 : undefined}
+      onClick={(event) => {
+        if (!disabled && onClick) {
+          onClick(event);
+        }
+      }}
+      onKeyDown={(event) => {
+        if (!captureKeys) {
+          return;
+        }
+
+        // Simulate a click when pressing space or enter.
+        if (event.key === KEY.Space || event.key === KEY.Enter) {
+          event.preventDefault();
+          if (!disabled && onClick) {
+            onClick(event);
+          }
+          return;
+        }
+
+        // Refocus layout on pressing escape.
+        if (event.key === KEY.Escape) {
+          event.preventDefault();
+        }
+      }}
+      {...computeBoxProps(rest)}
+    >
+      <div className={styles.content}>
+        {icon && iconPosition !== 'right' && (
+          <Icon
+            mr={1}
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+        {!ellipsis ? (
+          toDisplay
+        ) : (
+          <span
+            className={classes([styles.ellipsis, icon && styles.textMargin])}
+          >
+            {toDisplay}
+          </span>
+        )}
+        {icon && iconPosition === 'right' && (
+          <Icon
+            ml={1}
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+      </div>
+    </div>
+  );
+
+  if (tooltip) {
+    buttonContent = (
+      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
+        {buttonContent}
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+}
+
+type CheckProps = Partial<{
+  checked: BooleanLike;
+}> &
+  Props;
+
+/** Visually toggles between checked and unchecked states. */
+export function ButtonCheckbox(props: CheckProps) {
+  const { checked, ...rest } = props;
+
+  return (
+    <Button
+      color="transparent"
+      icon={checked ? 'check-square-o' : 'square-o'}
+      selected={checked}
+      {...rest}
+    />
+  );
+}
+
+Button.Checkbox = ButtonCheckbox;
+
+type ConfirmProps = Partial<{
+  confirmColor: string;
+  confirmContent: ReactNode;
+  confirmIcon: string;
+}> &
+  Props;
+
+/**  Requires user confirmation before triggering its action. */
+function ButtonConfirm(props: ConfirmProps) {
+  const {
+    children,
+    color,
+    confirmColor = 'bad',
+    confirmContent = 'Confirm?',
+    confirmIcon,
+    ellipsis = true,
+    icon,
+    onClick,
+    ...rest
+  } = props;
+  const [clickedOnce, setClickedOnce] = useState(false);
+
+  function handleClick(event: MouseEvent<HTMLDivElement>) {
+    if (!clickedOnce) {
+      setClickedOnce(true);
+      return;
+    }
+
+    onClick?.(event);
+    setClickedOnce(false);
+  }
+
+  return (
+    <Button
+      icon={clickedOnce ? confirmIcon : icon}
+      color={clickedOnce ? confirmColor : color}
+      onClick={handleClick}
+      {...rest}
+    >
+      {clickedOnce ? confirmContent : children}
+    </Button>
+  );
+}
+
+Button.Confirm = ButtonConfirm;
+
+type InputProps = Partial<{
+  currentValue: string;
+  defaultValue: string;
+  fluid: boolean;
+  maxLength: number;
+  onCommit: (e: any, value: string) => void;
+  placeholder: string;
+}> &
+  Props;
+
+/** Accepts and handles user input. */
+function ButtonInput(props: InputProps) {
+  const {
+    children,
+    color = 'default',
+    content,
+    currentValue,
+    defaultValue,
+    disabled,
+    fluid,
+    icon,
+    iconRotation,
+    iconSpin,
+    maxLength,
+    onCommit = () => null,
+    placeholder,
+    tooltip,
+    tooltipPosition,
+    ...rest
+  } = props;
+  const [inInput, setInInput] = useState(false);
+  const inputRef = createRef<HTMLInputElement>();
+
+  const toDisplay = content || children;
+
+  function commitResult(e) {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const hasValue = input.value !== '';
+    if (hasValue) {
+      onCommit(e, input.value);
+    } else {
+      if (defaultValue) {
+        onCommit(e, defaultValue);
+      }
+    }
+  }
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    if (inInput) {
+      input.value = currentValue || '';
+      try {
+        input.focus();
+        input.select();
+      } catch {
+        // Ignore errors
+      }
+    }
+  }, [inInput, currentValue]);
+
+  let buttonContent = (
+    <Box
+      className={classes([
+        styles.button,
+        fluid && styles.fluid,
+        styles['color__' + color],
+      ])}
+      {...rest}
+      onClick={() => setInInput(true)}
+    >
+      {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
+      <div>{toDisplay}</div>
+      <input
+        disabled={!!disabled}
+        ref={inputRef}
+        className="NumberInput__input"
+        style={{
+          display: !inInput ? 'none' : '',
+          textAlign: 'left',
+        }}
+        onBlur={(event) => {
+          if (!inInput) {
+            return;
+          }
+          setInInput(false);
+          commitResult(event);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === KEY.Enter) {
+            setInInput(false);
+            commitResult(event);
+            return;
+          }
+          if (event.key === KEY.Escape) {
+            setInInput(false);
+          }
+        }}
+      />
+    </Box>
+  );
+
+  if (tooltip) {
+    buttonContent = (
+      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
+        {buttonContent}
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+}
+
+Button.Input = ButtonInput;
+
+type FileProps = {
+  accept: string;
+  multiple?: boolean;
+  onSelectFiles: (files: string | string[]) => void;
+} & Props;
+
+/**  Accepts file input */
+function ButtonFile(props: FileProps) {
+  const { accept, multiple, onSelectFiles, ...rest } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function read(files: FileList) {
+    const promises = Array.from(files).map((file) => {
+      const reader = new FileReader();
+
+      return new Promise<string>((resolve) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsText(file);
+      });
+    });
+
+    return await Promise.all(promises);
+  }
+
+  async function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const files = event.target.files;
+    if (files?.length) {
+      const readFiles = await read(files);
+      onSelectFiles(multiple ? readFiles : readFiles[0]);
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={() => inputRef.current?.click()} {...rest} />
+      <input
+        hidden
+        type="file"
+        ref={inputRef}
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+      />
+    </>
+  );
+}
+
+Button.File = ButtonFile;

package/lib/components/ByondUi.jsx

@@ -0,0 +1,110 @@
+import { Component, createRef } from 'react';
+
+import { shallowDiffers } from '../common/react';
+import { debounce } from '../common/timer';
+import { computeBoxProps } from './Box';
+
+// Stack of currently allocated BYOND UI element ids.
+const byondUiStack = [];
+
+function createByondUiElement(elementId) {
+  // Reserve an index in the stack
+  const index = byondUiStack.length;
+  byondUiStack.push(null);
+  // Get a unique id
+  const id = elementId || 'byondui_' + index;
+  // Return a control structure
+  return {
+    render: (params) => {
+      byondUiStack[index] = id;
+      Byond.winset(id, params);
+    },
+    unmount: () => {
+      byondUiStack[index] = null;
+      Byond.winset(id, {
+        parent: '',
+      });
+    },
+  };
+}
+
+window.addEventListener('beforeunload', () => {
+  // Cleanly unmount all visible UI elements
+  for (let index = 0; index < byondUiStack.length; index++) {
+    const id = byondUiStack[index];
+    if (typeof id === 'string') {
+      byondUiStack[index] = null;
+      Byond.winset(id, {
+        parent: '',
+      });
+    }
+  }
+});
+
+/**
+ * Get the bounding box of the DOM element in display-pixels.
+ */
+function getBoundingBox(element) {
+  const pixelRatio = window.devicePixelRatio ?? 1;
+  const rect = element.getBoundingClientRect();
+
+  return {
+    pos: [rect.left * pixelRatio, rect.top * pixelRatio],
+    size: [
+      (rect.right - rect.left) * pixelRatio,
+      (rect.bottom - rect.top) * pixelRatio,
+    ],
+  };
+}
+
+export class ByondUi extends Component {
+  constructor(props) {
+    super(props);
+    this.containerRef = createRef();
+    this.byondUiElement = createByondUiElement(props.params?.id);
+    this.handleResize = debounce(() => {
+      this.forceUpdate();
+    }, 100);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { params: prevParams = {}, ...prevRest } = this.props;
+    const { params: nextParams = {}, ...nextRest } = nextProps;
+    return (
+      shallowDiffers(prevParams, nextParams) ||
+      shallowDiffers(prevRest, nextRest)
+    );
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    this.componentDidUpdate();
+    this.handleResize();
+  }
+
+  componentDidUpdate() {
+    const { params = {} } = this.props;
+    const box = getBoundingBox(this.containerRef.current);
+    this.byondUiElement.render({
+      parent: Byond.windowId,
+      ...params,
+      pos: box.pos[0] + ',' + box.pos[1],
+      size: box.size[0] + 'x' + box.size[1],
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+    this.byondUiElement.unmount();
+  }
+
+  render() {
+    const { params, ...rest } = this.props;
+    return (
+      <div ref={this.containerRef} {...computeBoxProps(rest)}>
+        {/* Filler */}
+        <div style={{ minHeight: '22px' }} />
+      </div>
+    );
+  }
+}

package/lib/components/Chart.tsx

@@ -0,0 +1,155 @@
+import { Component, createRef, RefObject } from 'react';
+
+import { zip } from '../common/collections';
+import { Box, BoxProps } from './Box';
+
+type Props = {
+  data: number[][];
+} & Partial<{
+  fillColor: string;
+  rangeX: [number, number];
+  rangeY: [number, number];
+  strokeColor: string;
+  strokeWidth: number;
+}> &
+  BoxProps;
+
+type State = {
+  viewBox: [number, number];
+};
+
+type Point = number[];
+type Range = [number, number];
+
+function normalizeData(
+  data: Point[],
+  scale: number[],
+  rangeX?: Range,
+  rangeY?: Range,
+) {
+  if (data.length === 0) {
+    return [];
+  }
+
+  const zipped = zip(...data);
+
+  const min = zipped.map((p) => Math.min(...p));
+  const max = zipped.map((p) => Math.max(...p));
+
+  if (rangeX !== undefined) {
+    min[0] = rangeX[0];
+    max[0] = rangeX[1];
+  }
+
+  if (rangeY !== undefined) {
+    min[1] = rangeY[0];
+    max[1] = rangeY[1];
+  }
+
+  const normalized = data.map((point) =>
+    zip(point, min, max, scale).map(
+      ([value, min, max, scale]) => ((value - min) / (max - min)) * scale,
+    ),
+  );
+
+  return normalized;
+}
+
+function dataToPolylinePoints(data) {
+  let points = '';
+  for (let i = 0; i < data.length; i++) {
+    const point = data[i];
+    points += point[0] + ',' + point[1] + ' ';
+  }
+  return points;
+}
+
+class LineChart extends Component<Props> {
+  ref: RefObject<HTMLDivElement>;
+  state: State;
+
+  constructor(props: Props) {
+    super(props);
+    this.ref = createRef();
+    this.state = {
+      // Initial guess
+      viewBox: [600, 200],
+    };
+    this.handleResize = this.handleResize.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = () => {
+    const element = this.ref.current;
+    if (!element) {
+      return;
+    }
+    this.setState({
+      viewBox: [element.offsetWidth, element.offsetHeight],
+    });
+  };
+
+  render() {
+    const {
+      data = [],
+      rangeX,
+      rangeY,
+      fillColor = 'none',
+      strokeColor = '#ffffff',
+      strokeWidth = 2,
+      ...rest
+    } = this.props;
+    const { viewBox } = this.state;
+    const normalized = normalizeData(data, viewBox, rangeX, rangeY);
+    // Push data outside viewBox and form a fillable polygon
+    if (normalized.length > 0) {
+      const first = normalized[0];
+      const last = normalized[normalized.length - 1];
+      normalized.push([viewBox[0] + strokeWidth, last[1]]);
+      normalized.push([viewBox[0] + strokeWidth, -strokeWidth]);
+      normalized.push([-strokeWidth, -strokeWidth]);
+      normalized.push([-strokeWidth, first[1]]);
+    }
+    const points = dataToPolylinePoints(normalized);
+    const divProps = { ...rest, className: '', ref: this.ref };
+
+    return (
+      <Box position="relative" {...rest}>
+        <Box {...divProps}>
+          <svg
+            viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
+            preserveAspectRatio="none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              overflow: 'hidden',
+            }}
+          >
+            <polyline
+              transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
+              fill={fillColor}
+              stroke={strokeColor}
+              strokeWidth={strokeWidth}
+              points={points}
+            />
+          </svg>
+        </Box>
+      </Box>
+    );
+  }
+}
+
+export const Chart = {
+  Line: LineChart,
+};