tgui-core 1.0.0

package/src/components/RestrictedInput.jsx

@@ -0,0 +1,301 @@
+import { KEY_ENTER, KEY_ESCAPE } from '../common/keycodes';
+import { clamp } from '../common/math';
+import { classes } from '../common/react';
+import { Component, createRef } from 'react';
+
+import { Box } from './Box';
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 10000;
+
+/**
+ * Sanitize a number without interfering with writing negative or floating point numbers.
+ * Handling dots and minuses in a user friendly way
+ * @param value {String}
+ * @param minValue {Number}
+ * @param maxValue {Number}
+ * @param allowFloats {Boolean}
+ * @returns {String}
+ */
+const softSanitizeNumber = (value, minValue, maxValue, allowFloats) => {
+  const minimum = minValue || DEFAULT_MIN;
+  const maximum = maxValue || maxValue === 0 ? maxValue : DEFAULT_MAX;
+
+  let sanitizedString = allowFloats
+    ? value.replace(/[^\-\d.]/g, '')
+    : value.replace(/[^\-\d]/g, '');
+
+  if (allowFloats) {
+    sanitizedString = maybeLeadWithMin(sanitizedString, minimum);
+    sanitizedString = keepOnlyFirstOccurrence('.', sanitizedString);
+  }
+  if (minValue < 0) {
+    sanitizedString = maybeMoveMinusSign(sanitizedString);
+    sanitizedString = keepOnlyFirstOccurrence('-', sanitizedString);
+  } else {
+    sanitizedString = sanitizedString.replaceAll('-', '');
+  }
+  if (minimum <= 1 && maximum >= 0) {
+    return clampGuessedNumber(sanitizedString, minimum, maximum, allowFloats);
+  }
+  return sanitizedString;
+};
+
+/**
+ * Clamping the input to the restricted range, making the Input smart for min <= 1 and max >= 0
+ * @param softSanitizedNumber {String}
+ * @param allowFloats {Boolean}
+ * @returns {string}
+ */
+const clampGuessedNumber = (
+  softSanitizedNumber,
+  minValue,
+  maxValue,
+  allowFloats
+) => {
+  let parsed = allowFloats
+    ? parseFloat(softSanitizedNumber)
+    : parseInt(softSanitizedNumber, 10);
+  if (
+    !isNaN(parsed) &&
+    (softSanitizedNumber.slice(-1) !== '.' || parsed < Math.floor(minValue))
+  ) {
+    let clamped = clamp(parsed, minValue, maxValue);
+    if (parsed !== clamped) {
+      return String(clamped);
+    }
+  }
+  return softSanitizedNumber;
+};
+
+/**
+ * Translate x- to -x and -x- to x
+ * @param string {String}
+ * @returns {string}
+ */
+const maybeMoveMinusSign = (string) => {
+  let retString = string;
+  // if minus sign is present but not first
+  let minusIdx = string.indexOf('-');
+  if (minusIdx > 0) {
+    string = string.replace('-', '');
+    retString = '-'.concat(string);
+  } else if (minusIdx === 0) {
+    if (string.indexOf('-', minusIdx + 1) > 0) {
+      retString = string.replaceAll('-', '');
+    }
+  }
+  return retString;
+};
+
+/**
+ * Translate . to min. or .x to mim.x or -. to -min.
+ * @param string {String}
+ */
+const maybeLeadWithMin = (string, min) => {
+  let retString = string;
+  let cuttedVal = Math.sign(min) * Math.floor(Math.abs(min));
+  if (string.indexOf('.') === 0) {
+    retString = String(cuttedVal).concat(string);
+  } else if (string.indexOf('-') === 0 && string.indexOf('.') === 1) {
+    retString = cuttedVal + '.'.concat(string.slice(2));
+  }
+  return retString;
+};
+
+/**
+ * Keep only the first occurrence of a string in another string.
+ * @param needle {String}
+ * @param haystack {String}
+ * @returns {string}
+ */
+const keepOnlyFirstOccurrence = (needle, haystack) => {
+  const idx = haystack.indexOf(needle);
+  const len = haystack.length;
+  let newHaystack = haystack;
+  if (idx !== -1 && idx < len - 1) {
+    let trailingString = haystack.slice(idx + 1, len);
+    trailingString = trailingString.replaceAll(needle, '');
+    newHaystack = haystack.slice(0, idx + 1).concat(trailingString);
+  }
+  return newHaystack;
+};
+
+/**
+ * Takes a string input and parses integers or floats from it.
+ * If none: Minimum is set.
+ * Else: Clamps it to the given range.
+ */
+const getClampedNumber = (value, minValue, maxValue, allowFloats) => {
+  const minimum = minValue || DEFAULT_MIN;
+  const maximum = maxValue || maxValue === 0 ? maxValue : DEFAULT_MAX;
+  if (!value || !value.length) {
+    return String(minimum);
+  }
+  let parsedValue = allowFloats
+    ? parseFloat(value.replace(/[^\-\d.]/g, ''))
+    : parseInt(value.replace(/[^\-\d]/g, ''), 10);
+  if (isNaN(parsedValue)) {
+    return String(minimum);
+  } else {
+    return String(clamp(parsedValue, minimum, maximum));
+  }
+};
+
+export class RestrictedInput extends Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = createRef();
+    this.state = {
+      editing: false,
+    };
+    this.handleBlur = (e) => {
+      const { maxValue, minValue, onBlur, allowFloats } = this.props;
+      const { editing } = this.state;
+      if (editing) {
+        this.setEditing(false);
+      }
+      const safeNum = getClampedNumber(
+        e.target.value,
+        minValue,
+        maxValue,
+        allowFloats
+      );
+      if (onBlur) {
+        onBlur(e, +safeNum);
+      }
+    };
+    this.handleChange = (e) => {
+      const { maxValue, minValue, onChange, allowFloats } = this.props;
+      e.target.value = softSanitizeNumber(
+        e.target.value,
+        minValue,
+        maxValue,
+        allowFloats
+      );
+      if (onChange) {
+        onChange(e, +e.target.value);
+      }
+    };
+    this.handleFocus = (e) => {
+      const { editing } = this.state;
+      if (!editing) {
+        this.setEditing(true);
+      }
+    };
+    this.handleInput = (e) => {
+      const { editing } = this.state;
+      const { onInput } = this.props;
+      if (!editing) {
+        this.setEditing(true);
+      }
+      if (onInput) {
+        onInput(e, +e.target.value);
+      }
+    };
+    this.handleKeyDown = (e) => {
+      const { maxValue, minValue, onChange, onEnter, allowFloats } = this.props;
+      if (e.keyCode === KEY_ENTER) {
+        const safeNum = getClampedNumber(
+          e.target.value,
+          minValue,
+          maxValue,
+          allowFloats
+        );
+        this.setEditing(false);
+        if (onChange) {
+          onChange(e, +safeNum);
+        }
+        if (onEnter) {
+          onEnter(e, +safeNum);
+        }
+        e.target.blur();
+        return;
+      }
+      if (e.keyCode === KEY_ESCAPE) {
+        if (this.props.onEscape) {
+          this.props.onEscape(e);
+          return;
+        }
+        this.setEditing(false);
+        e.target.value = this.props.value;
+        e.target.blur();
+        return;
+      }
+    };
+  }
+
+  componentDidMount() {
+    const { maxValue, minValue, allowFloats } = this.props;
+    const nextValue = this.props.value?.toString();
+    const input = this.inputRef.current;
+    if (input) {
+      input.value = getClampedNumber(
+        nextValue,
+        minValue,
+        maxValue,
+        allowFloats
+      );
+    }
+    if (this.props.autoFocus || this.props.autoSelect) {
+      setTimeout(() => {
+        input.focus();
+
+        if (this.props.autoSelect) {
+          input.select();
+        }
+      }, 1);
+    }
+  }
+
+  componentDidUpdate(prevProps, _) {
+    const { maxValue, minValue, allowFloats } = this.props;
+    const { editing } = this.state;
+    const prevValue = prevProps.value?.toString();
+    const nextValue = this.props.value?.toString();
+    const input = this.inputRef.current;
+    if (input && !editing) {
+      if (nextValue !== prevValue && nextValue !== input.value) {
+        input.value = getClampedNumber(
+          nextValue,
+          minValue,
+          maxValue,
+          allowFloats
+        );
+      }
+    }
+  }
+
+  setEditing(editing) {
+    this.setState({ editing });
+  }
+
+  render() {
+    const { props } = this;
+    const { onChange, onEnter, onInput, onBlur, value, ...boxProps } = props;
+    const { className, fluid, monospace, ...rest } = boxProps;
+    return (
+      <Box
+        className={classes([
+          'Input',
+          fluid && 'Input--fluid',
+          monospace && 'Input--monospace',
+          className,
+        ])}
+        {...rest}
+      >
+        <div className="Input__baseline">.</div>
+        <input
+          className="Input__input"
+          onChange={this.handleChange}
+          onInput={this.handleInput}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          ref={this.inputRef}
+          type="number | string"
+        />
+      </Box>
+    );
+  }
+}

package/src/components/RoundGauge.tsx

@@ -0,0 +1,189 @@
+/**
+ * @file
+ * @copyright 2020 bobbahbrown (https://github.com/bobbahbrown)
+ * @license MIT
+ */
+
+import { clamp01, keyOfMatchingRange, scale } from '../common/math';
+import { classes } from '../common/react';
+
+import { AnimatedNumber } from './AnimatedNumber';
+import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  /** The current value of the metric. */
+  value: number;
+} & Partial<{
+  /** When provided, will cause an alert symbol on the gauge to begin flashing in the color upon which the needle currently rests, as defined in `ranges`. */
+  alertAfter: number;
+  /** As with alertAfter, but alerts below a value. If both are set, and alertAfter comes earlier, the alert will only flash when the needle is between both values. Otherwise, the alert will flash when on the active side of either threshold. */
+  alertBefore: number;
+  /** CSS style. */
+  className: string;
+  /** When provided, will be used to format the value of the metric for display. */
+  format: (value: number) => string;
+  /** The upper bound of the gauge. */
+  maxValue: number;
+  /** The lower bound of the gauge. */
+  minValue: number;
+  /** Provide regions of the gauge to color between two specified values of the metric. */
+  ranges: Record<string, [number, number]>;
+  /** When provided scales the gauge. */
+  size: number;
+  /** Custom css */
+  style: React.CSSProperties;
+}> &
+  BoxProps;
+
+/**
+ * ## RoundGauge
+ * The RoundGauge component provides a visual representation of a single metric, as well as being capable of showing
+ * informational or cautionary boundaries related to that metric.
+ *
+ * @example
+ * ```tsx
+ * <RoundGauge
+ *  size={1.75}
+ *  value={tankPressure}
+ *  minValue={0}
+ *  maxValue={pressureLimit}
+ *  alertAfter={pressureLimit * 0.7}
+ *  ranges={{
+ *     good: [0, pressureLimit * 0.7],
+ *     average: [pressureLimit * 0.7, pressureLimit * 0.85],
+ *     bad: [pressureLimit * 0.85, pressureLimit],
+ *   }}
+ *   format={formatPressure}
+ * />
+ * ```
+ *
+ * The alert on the gauge is optional, and will only be shown if the `alertAfter` prop is defined. When defined, the alert
+ * will begin to flash the respective color upon which the needle currently rests, as defined in the `ranges` prop.
+ *
+ */
+export function RoundGauge(props: Props) {
+  const {
+    alertAfter,
+    alertBefore,
+    className,
+    format,
+    maxValue = 1,
+    minValue = 1,
+    ranges,
+    size = 1,
+    style,
+    value,
+    ...rest
+  } = props;
+
+  const scaledValue = scale(value, minValue, maxValue);
+  const clampedValue = clamp01(scaledValue);
+  const scaledRanges = ranges ? {} : { primary: [0, 1] };
+
+  if (ranges) {
+    Object.keys(ranges).forEach((x) => {
+      const range = ranges[x];
+      scaledRanges[x] = [
+        scale(range[0], minValue, maxValue),
+        scale(range[1], minValue, maxValue),
+      ];
+    });
+  }
+
+  function shouldShowAlert() {
+    // If both after and before alert props are set, and value is between them
+    if (
+      alertAfter &&
+      alertBefore &&
+      value > alertAfter &&
+      value < alertBefore
+    ) {
+      return true;
+    }
+    // If only alertAfter is set and value is greater than alertAfter
+    else if (alertAfter && value > alertAfter) {
+      return true;
+    }
+    // If only alertBefore is set and value is less than alertBefore
+    else if (alertBefore && value < alertBefore) {
+      return true;
+    }
+    // If none of the above conditions are met
+    return false;
+  }
+
+  const alertColor =
+    shouldShowAlert() && keyOfMatchingRange(clampedValue, scaledRanges);
+
+  return (
+    <Box inline>
+      <div
+        className={classes([
+          'RoundGauge',
+          className,
+          computeBoxClassName(rest),
+        ])}
+        {...computeBoxProps({
+          style: {
+            fontSize: size + 'em',
+            ...style,
+          },
+          ...rest,
+        })}
+      >
+        <svg viewBox="0 0 100 50">
+          {(alertAfter || alertBefore) && (
+            <g
+              className={classes([
+                'RoundGauge__alert',
+                alertColor ? `active RoundGauge__alert--${alertColor}` : '',
+              ])}
+            >
+              <path d="M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z" />
+            </g>
+          )}
+          <g>
+            <circle className="RoundGauge__ringTrack" cx="50" cy="50" r="45" />
+          </g>
+          <g>
+            {Object.keys(scaledRanges).map((x, i) => {
+              const col_ranges = scaledRanges[x];
+              return (
+                <circle
+                  className={`RoundGauge__ringFill RoundGauge--color--${x}`}
+                  key={i}
+                  style={{
+                    strokeDashoffset: Math.max(
+                      (2.0 - (col_ranges[1] - col_ranges[0])) * Math.PI * 50,
+                      0
+                    ),
+                  }}
+                  transform={`rotate(${180 + 180 * col_ranges[0]} 50 50)`}
+                  cx="50"
+                  cy="50"
+                  r="45"
+                />
+              );
+            })}
+          </g>
+          <g
+            className="RoundGauge__needle"
+            transform={`rotate(${clampedValue * 180 - 90} 50 50)`}
+          >
+            <polygon
+              className="RoundGauge__needleLine"
+              points="46,50 50,0 54,50"
+            />
+            <circle
+              className="RoundGauge__needleMiddle"
+              cx="50"
+              cy="50"
+              r="8"
+            />
+          </g>
+        </svg>
+      </div>
+      <AnimatedNumber value={value} format={format} />
+    </Box>
+  );
+}

package/src/components/Section.tsx

@@ -0,0 +1,125 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { canRender, classes } from '../common/react';
+import { forwardRef, ReactNode, RefObject, useEffect } from 'react';
+
+import { addScrollableNode, removeScrollableNode } from '../events';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = Partial<{
+  /** Buttons to render aside the section title. */
+  buttons: ReactNode;
+  /** If true, fills all available vertical space. */
+  fill: boolean;
+  /** If true, removes all section padding. */
+  fitted: boolean;
+  /** Shows or hides the scrollbar. */
+  scrollable: boolean;
+  /** Shows or hides the horizontal scrollbar. */
+  scrollableHorizontal: boolean;
+  /** Title of the section. */
+  title: ReactNode;
+  /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */
+  container_id: string;
+  /** @member Callback function for the `scroll` event */
+  onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+}> &
+  BoxProps;
+
+/**
+ * ## Section
+ * Section is a surface that displays content and actions on a single topic.
+ *
+ * They should be easy to scan for relevant and actionable information.
+ * Elements, like text and images, should be placed in them in a way that
+ * clearly indicates hierarchy.
+ *
+ * Sections can now be nested, and will automatically font size of the
+ * header according to their nesting level. Previously this was done via `level`
+ * prop, but now it is automatically calculated.
+ *
+ * Section can also be titled to clearly define its purpose.
+ *
+ * ```tsx
+ * <Section title="Cargo">Here you can order supply crates.</Section>
+ * ```
+ *
+ * If you want to have a button on the right side of an section title
+ * (for example, to perform some sort of action), there is a way to do that:
+ *
+ * ```tsx
+ * <Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
+ *   Here you can order supply crates.
+ * </Section>
+ * ```
+ */
+export const Section = forwardRef(
+  (props: Props, forwardedRef: RefObject<HTMLDivElement>) => {
+    const {
+      buttons,
+      children,
+      className,
+      fill,
+      fitted,
+      onScroll,
+      scrollable,
+      scrollableHorizontal,
+      title,
+      container_id,
+      ...rest
+    } = props;
+
+    const hasTitle = canRender(title) || canRender(buttons);
+
+    /** We want to be able to scroll on hover, but using focus will steal it from inputs */
+    useEffect(() => {
+      if (!forwardedRef?.current) return;
+      if (!scrollable && !scrollableHorizontal) return;
+
+      addScrollableNode(forwardedRef.current);
+
+      return () => {
+        if (!forwardedRef?.current) return;
+        removeScrollableNode(forwardedRef.current!);
+      };
+    }, []);
+
+    return (
+      <div
+        id={container_id || ''}
+        className={classes([
+          'Section',
+          fill && 'Section--fill',
+          fitted && 'Section--fitted',
+          scrollable && 'Section--scrollable',
+          scrollableHorizontal && 'Section--scrollableHorizontal',
+          className,
+          computeBoxClassName(rest),
+        ])}
+        {...computeBoxProps(rest)}
+      >
+        {hasTitle && (
+          <div className="Section__title">
+            <span className="Section__titleText">{title}</span>
+            <div className="Section__buttons">{buttons}</div>
+          </div>
+        )}
+        <div className="Section__rest">
+          <div
+            className="Section__content"
+            onScroll={onScroll}
+            // For posterity: the forwarded ref needs to be here specifically
+            // to actually let things interact with the scrolling.
+            ref={forwardedRef}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);