tgui-core 5.4.1 → 5.5.0

package/dist/common/eventbus.d.ts

@@ -11,39 +11,48 @@
  * and update accordingly.
  *
  * @usage
+ *
+ * First, create an EventBus with the listeners you want to handle.
  * ```ts
  * const bus = new EventBus(listeners);
+ *```
  *
- * // These are the event types and their corresponding callbacks.
+ *  Next, define the listeners object. These are the event types and their
+ * corresponding callbacks.
+ * ```ts
  * const listeners = {
- *   'messageTypeA': (message) => { logger.log(message.payload); },
+ *   'messageTypeA': [handlerA, handlerB, handlerC],
  * } as const;
+ *```
  *
- * // You can further shorten this by linking a function to the event type:
- * function messageTypeA(payload: { text: string }) {
+ * Write a handler for the specific message type. They're handled serially.
+ * Anything you return will be passed to the next listener as the payload.
+ * ```ts
+ * function handlerA(payload: { text: string }) {
  *  logger.log(payload.text);
+ *  // The payload is discarded!
  * }
  *
- * const listeners = {
- *   messageTypeA,
- * } as const;
- *
- *
- * // Later, dispatch a message:
- * const message: ByondMessage = {
- *   type: 'messageTypeA',
- *   payload: { text: 'Hello, world!' },
- * };
+ * function handlerB(payload: { count: number }) {
+ *  // The next handler will receive this object as its payload.
+ *  return { count: payload.count + 1, otherData: 'foo' };
+ * }
  *
- * bus.dispatch(message);
- * ```
+ * function handlerC(payload: { count: number; otherData: string }) {
+ *  logger.log(`Count is ${payload.count} and otherData is ${payload.otherData}`);
+ * }
+ *```
  */
-export declare class EventBus<TListeners extends Readonly<Record<string, (payload: unknown) => void>>> {
+export declare class EventBus<TListeners extends Readonly<Record<string, Array<(payload: unknown) => void>>>> {
     private listeners;
     constructor(initialListeners: TListeners);
     /** Dispatch a message to the appropriate listener. */
     dispatch<TType extends keyof TListeners>(message: {
         type: TType;
-        payload?: Parameters<TListeners[TType]>[0];
+        /**
+         * This should match the first listener's payload type. It can be passed
+         * along and mutated by each listener in the chain by returning a new value.
+         */
+        payload?: Parameters<TListeners[TType][0]>[0];
     }): void;
 }

package/dist/common/eventbus.js

@@ -1 +1 @@
-class s{listeners={};constructor(s){this.listeners=s}dispatch(s){this.listeners[s.type]?.(s.payload)}}export{s as EventBus};
+class e{listeners={};constructor(e){this.listeners=e}dispatch(e){let t=this.listeners[e.type]?.length||0;if(0===t)return void console.warn(`EventBus: No listeners for message type "${String(e.type)}"`);let s=e.payload;for(let r=0;r<t;r++)s=this.listeners[e.type]?.[r](s)}}export{e as EventBus};

package/dist/components/index.d.ts

@@ -22,7 +22,7 @@ export { Image } from './Image';
 export { ImageButton } from './ImageButton';
 export { InfinitePlane } from './InfinitePlane';
 export { Input } from './Input';
-export { Interactive } from './Interactive';
+export { type Interaction, Interactive } from './Interactive';
 export { KeyListener } from './KeyListener';
 export { Knob } from './Knob';
 export { LabeledControls } from './LabeledControls';

package/package.json

@@ -67,5 +67,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.4.1"
+  "version": "5.5.0"
 }

package/styles/main.scss

@@ -12,7 +12,6 @@
 @include meta.load-css("./components/BlockQuote.scss");
 @include meta.load-css("./components/Button.scss");
 @include meta.load-css("./components/ColorBox.scss");
-@include meta.load-css("./components/ColorPicker.scss");
 @include meta.load-css("./components/Dialog.scss");
 @include meta.load-css("./components/Dimmer.scss");
 @include meta.load-css("./components/Divider.scss");

package/styles/components/ColorPicker.scss

@@ -1,153 +0,0 @@
-/**
- * MIT License
- * https://github.com/omgovich/react-colorful/
- *
- * Copyright (c) 2020 Vlad Shilov <omgovich@ya.ru>
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-@use '../colors.scss';
-@use '../base.scss';
-
-.react-colorful {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  height: 200px;
-  user-select: none;
-  cursor: default;
-}
-
-.react-colorful__saturation_value {
-  position: relative;
-  flex-grow: 1;
-  border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
-  border-bottom: 12px solid #000;
-  border-radius: 8px 8px 0 0;
-  background-image: linear-gradient(
-      to top,
-      rgba(0, 0, 0, 255),
-      rgba(0, 0, 0, 0)
-    ),
-    linear-gradient(to right, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
-}
-
-.react-colorful__pointer-fill,
-.react-colorful__alpha-gradient {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  border-radius: inherit;
-}
-
-/* Improve elements rendering on light backgrounds */
-.react-colorful__alpha-gradient,
-.react-colorful__saturation_value {
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
-}
-
-.react-colorful__hue,
-.react-colorful__r,
-.react-colorful__g,
-.react-colorful__b,
-.react-colorful__alpha,
-.react-colorful__saturation,
-.react-colorful__value {
-  position: relative;
-  height: 24px;
-}
-
-.react-colorful__hue {
-  background: linear-gradient(
-    to right,
-    #f00 0%,
-    #ff0 17%,
-    #0f0 33%,
-    #0ff 50%,
-    #00f 67%,
-    #f0f 83%,
-    #f00 100%
-  );
-}
-
-.react-colorful__r {
-  background: linear-gradient(to right, #000, #f00);
-}
-
-.react-colorful__g {
-  background: linear-gradient(to right, #000, #0f0);
-}
-
-.react-colorful__b {
-  background: linear-gradient(to right, #000, #00f);
-}
-
-/* Round bottom corners of the last element: `Hue` for `ColorPicker` or `Alpha` for `AlphaColorPicker` */
-.react-colorful__last-control {
-  border-radius: 0 0 8px 8px;
-}
-
-.react-colorful__interactive {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  outline: none;
-  /* Don't trigger the default scrolling behavior when the event is originating from this element */
-  touch-action: none;
-}
-
-.react-colorful__pointer {
-  position: absolute;
-  z-index: 1;
-  box-sizing: border-box;
-  width: 28px;
-  height: 28px;
-  transform: translate(-50%, -50%);
-  background-color: #cfcfcf;
-  border: 2px solid #cfcfcf;
-  border-radius: 50%;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-}
-
-.react-colorful__interactive:focus .react-colorful__pointer {
-  transform: translate(-50%, -50%) scale(1.1);
-  background-color: #fff;
-  border-color: #fff;
-}
-
-/* Chessboard-like pattern for alpha related elements */
-.react-colorful__alpha,
-.react-colorful__alpha-pointer {
-  background-color: #fff;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
-}
-
-.react-colorful__saturation-pointer,
-.react-colorful__value-pointer,
-.react-colorful__hue-pointer,
-.react-colorful__r-pointer,
-.react-colorful__g-pointer,
-.react-colorful__b-pointer {
-  z-index: 1;
-  width: 20px;
-  height: 20px;
-}
-
-/* Display the saturation value pointer over the hue one */
-.react-colorful__saturation_value-pointer {
-  z-index: 3;
-}