tgui-core 1.0.2 → 1.0.3

package/{src/components → components}/ByondUi.jsx

@@ -1,121 +1,121 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { shallowDiffers } from '../common/react';
-import { debounce } from '../common/timer';
-import { Component, createRef } from 'react';
-
-import { computeBoxProps } from './Box';
-
-const logger = createLogger('ByondUi');
-
-// Stack of currently allocated BYOND UI element ids.
-const byondUiStack = [];
-
-const 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) => {
-      logger.log(`rendering '${id}'`);
-      byondUiStack[index] = id;
-      Byond.winset(id, params);
-    },
-    unmount: () => {
-      logger.log(`unmounting '${id}'`);
-      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') {
-      logger.log(`unmounting '${id}' (beforeunload)`);
-      byondUiStack[index] = null;
-      Byond.winset(id, {
-        parent: '',
-      });
-    }
-  }
-});
-
-/**
- * Get the bounding box of the DOM element in display-pixels.
- */
-const 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>
-    );
-  }
-}
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { shallowDiffers } from '../common/react';
+import { debounce } from '../common/timer';
+import { Component, createRef } from 'react';
+
+import { computeBoxProps } from './Box';
+
+const logger = createLogger('ByondUi');
+
+// Stack of currently allocated BYOND UI element ids.
+const byondUiStack = [];
+
+const 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) => {
+      logger.log(`rendering '${id}'`);
+      byondUiStack[index] = id;
+      Byond.winset(id, params);
+    },
+    unmount: () => {
+      logger.log(`unmounting '${id}'`);
+      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') {
+      logger.log(`unmounting '${id}' (beforeunload)`);
+      byondUiStack[index] = null;
+      Byond.winset(id, {
+        parent: '',
+      });
+    }
+  }
+});
+
+/**
+ * Get the bounding box of the DOM element in display-pixels.
+ */
+const 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/{src/components → components}/Chart.tsx

@@ -1,160 +1,160 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { map, zip } from '../common/collections';
-import { Component, createRef, RefObject } from 'react';
-
-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];
-
-const normalizeData = (
-  data: Point[],
-  scale: number[],
-  rangeX?: Range,
-  rangeY?: Range
-) => {
-  if (data.length === 0) {
-    return [];
-  }
-
-  const min = map(zip(...data), (p) => Math.min(...p));
-  const max = map(zip(...data), (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 = map(data, (point) =>
-    map(
-      zip(point, min, max, scale),
-      ([value, min, max, scale]) => ((value - min) / (max - min)) * scale
-    )
-  );
-
-  return normalized;
-};
-
-const 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,
-};
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { map, zip } from '../common/collections';
+import { Component, createRef, RefObject } from 'react';
+
+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];
+
+const normalizeData = (
+  data: Point[],
+  scale: number[],
+  rangeX?: Range,
+  rangeY?: Range
+) => {
+  if (data.length === 0) {
+    return [];
+  }
+
+  const min = map(zip(...data), (p) => Math.min(...p));
+  const max = map(zip(...data), (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 = map(data, (point) =>
+    map(
+      zip(point, min, max, scale),
+      ([value, min, max, scale]) => ((value - min) / (max - min)) * scale
+    )
+  );
+
+  return normalized;
+};
+
+const 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,
+};

package/{src/components → components}/ColorBox.tsx

@@ -1,30 +1,30 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from '../common/react';
-import { ReactNode } from 'react';
-
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-
-type Props = {
-  content?: ReactNode;
-} & BoxProps;
-
-export function ColorBox(props: Props) {
-  const { content, children, className, ...rest } = props;
-
-  rest.color = content ? null : 'default';
-  rest.backgroundColor = props.color || 'default';
-
-  return (
-    <div
-      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
-      {...computeBoxProps(rest)}
-    >
-      {content || '.'}
-    </div>
-  );
-}
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { ReactNode } from 'react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  content?: ReactNode;
+} & BoxProps;
+
+export function ColorBox(props: Props) {
+  const { content, children, className, ...rest } = props;
+
+  rest.color = content ? null : 'default';
+  rest.backgroundColor = props.color || 'default';
+
+  return (
+    <div
+      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
+      {content || '.'}
+    </div>
+  );
+}

package/{src/components → components}/Dimmer.tsx

@@ -1,19 +1,19 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { classes } from '../common/react';
-
-import { Box, BoxProps } from './Box';
-
-export function Dimmer(props: BoxProps) {
-  const { className, children, ...rest } = props;
-
-  return (
-    <Box className={classes(['Dimmer', className])} {...rest}>
-      <div className="Dimmer__inner">{children}</div>
-    </Box>
-  );
-}
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { Box, BoxProps } from './Box';
+
+export function Dimmer(props: BoxProps) {
+  const { className, children, ...rest } = props;
+
+  return (
+    <Box className={classes(['Dimmer', className])} {...rest}>
+      <div className="Dimmer__inner">{children}</div>
+    </Box>
+  );
+}