@adcops/autocore-react 3.0.33 → 3.0.34

package/dist/components/ValueDisplay.js

@@ -1 +1,160 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay extends Component{constructor(e){super(e),Object.defineProperty(this,"unsubscribeTopicId",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.state={subscribedValue:e.value,fontSize:"100%"}}componentDidMount(){const{topic:e}=this.props;if(e){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:u}=this.state,{scale:c,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:u&&c>1?100*c+"%":u,top:a&&t?`${b+c*t}px`:void 0,left:a&&e?`${p+c*e}px`:void 0,width:i?i*c+"px":void 0,height:s?s*c+"px":void 0,lineHeight:s?s*c+"px":void 0,whiteSpace:"nowrap"};let d;return d="number"==typeof l||"string"==typeof l&&!isNaN(Number(l))?numerableFormat(l,o,r):l,_jsx("div",{className:clsx(n),style:m,children:d})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-05-01 12:14:27
+ * Modified By: ADC
+ * -----
+ *
+ */
+import { Component } from 'react';
+//import useFitText from 'use-fit-text';
+import { format as numerableFormat } from 'numerable';
+import clsx from 'clsx';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+/**
+ * `ValueDisplay` is a React component designed to display a value which can be a string, number, or null.
+ * It supports formatting numeric values using the `numerableFormat` function, and is capable of dynamic positioning
+ * and sizing within its parent container. The component integrates with an `EventEmitterContext` to listen for
+ * updates to its value based on a specified topic, making it ideal for real-time data display scenarios.
+ *
+ * The component can be absolutely positioned based on `x` and `y` props, and its size can be adjusted using
+ * `width` and `height` props. If `useAbsolutePositioning` is true, it will position itself based on the provided
+ * coordinates; otherwise, it will position relatively.
+ *
+ * ### Props:
+ * - `value`: The initial value to display, which can be updated via props or context events.
+ * - `x`, `y`: Coordinates for absolute positioning within the parent container.
+ * - `width`, `height`: Dimensions of the component. If height is not provided, it defaults to the width.
+ * - `format`: A string specifying the format for numeric values (see numerable.js documentation for format strings).
+ * - `formatOptions`: Additional formatting options as per numerable.js.
+ * - `className`: Custom class for CSS styling.
+ * - `useAbsolutePositioning`: Boolean to toggle absolute positioning.
+ * - `topic`: Optional string to subscribe to context updates for dynamic value changes.
+ *
+ * ### Usage Example:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { ValueDisplay } from './components/ValueDisplay';
+ *
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <ValueDisplay
+ *         value={1234.56}
+ *         x={100}
+ *         y={200}
+ *         width={150}
+ *         height={50}
+ *         format="0,0.00"
+ *         className="numeric-display"
+ *         useAbsolutePositioning={true}
+ *         topic="priceUpdate"
+ *       />
+ *     </div>
+ *   );
+ * };
+ *
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * In this example, `ValueDisplay` is used to show a numeric value formatted as a string with two decimal places.
+ * It is positioned absolutely at coordinates (100, 200) with a specified width and height. The component listens
+ * for updates on the "priceUpdate" topic to dynamically update its displayed value.
+ */
+class ValueDisplay extends Component {
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props) {
+        super(props);
+        /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
+        Object.defineProperty(this, "unsubscribeTopicId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: '100%' // Initial font size, adjust as needed
+        };
+    }
+    /**
+     * Upon mounting, the component subscribes to updates on the specified topic if it exists,
+     * updating its state with the new value when the topic publishes updates.
+     */
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic) {
+            const { subscribe } = this.context;
+            this.unsubscribeTopicId = subscribe(topic, (value) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+    /**
+     * If the value prop changes, the component updates its state with the new value.
+     * This ensures that the component remains in sync with its props.
+     * @param prevProps The previous properties for comparison to detect changes.
+     */
+    componentDidUpdate(prevProps) {
+        // Check if the value prop has changed
+        if (this.props.value !== prevProps.value) {
+            // Update the state with the new value
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }
+    /**
+     * Before the component is unmounted, it unsubscribes from the topic to prevent memory leaks
+     * and unnecessary updates from occurring.
+     */
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId) {
+            const { unsubscribe } = this.context;
+            unsubscribe(this.unsubscribeTopicId);
+        }
+    }
+    /**
+     * Renders the component with styling and formatting based on the provided properties and state.
+     * Supports absolute or relative positioning and scales the display based on the context's dimensions.
+     * @returns A styled `div` element displaying the formatted value.
+     */
+    render() {
+        const { x, y, width, height, format, formatOptions, className, useAbsolutePositioning } = this.props;
+        const { subscribedValue, fontSize } = this.state;
+        const { scale, xOffset, yOffset } = this.context;
+        const style = {
+            position: useAbsolutePositioning ? 'absolute' : 'relative',
+            display: useAbsolutePositioning ? "" : "inline-block",
+            verticalAlign: 'middle',
+            fontSize: fontSize && scale > 1 ? `${scale * 100}%` : fontSize,
+            top: useAbsolutePositioning && y ? `${yOffset + scale * y}px` : undefined,
+            left: useAbsolutePositioning && x ? `${xOffset + scale * x}px` : undefined,
+            width: width ? `${width * scale}px` : undefined,
+            height: height ? `${height * scale}px` : undefined,
+            lineHeight: height ? `${height * scale}px` : undefined,
+            whiteSpace: 'nowrap',
+        };
+        // Determine how to display the value
+        let displayValue;
+        if (typeof subscribedValue === 'number' || (typeof subscribedValue === 'string' && !isNaN(Number(subscribedValue)))) {
+            displayValue = numerableFormat(subscribedValue, format, formatOptions);
+        }
+        else {
+            displayValue = subscribedValue; // Directly use the string if it's not numeric
+        }
+        return (_jsx("div", { className: clsx(className), style: style, children: displayValue }));
+    }
+}
+/** Defines the context type to subscribe to changes using EventEmitter. */
+Object.defineProperty(ValueDisplay, "contextType", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: EventEmitterContext
+});
+export { ValueDisplay };

package/dist/components/ValueIndicator.js

@@ -1 +1,38 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{Tooltip}from"primereact/tooltip";import{ValueDisplay}from"./ValueDisplay";import"./ValueIndicator.css";export class ValueIndicator extends Component{constructor(t){super(t),this.state={}}render(){return _jsxs("div",{className:"value-indicator-container",style:this.props.style,children:[_jsx(Tooltip,{target:".value-indicator-container"}),void 0!==this.props.label&&_jsx("div",{className:"value-indicator-label",children:this.props.label}),_jsx(ValueDisplay,{className:this.props.className,value:this.props.value,format:this.props.format,formatOptions:this.props.formatOptions,topic:this.props.topic,"data-pr-tooltip":this.props.tooltip,"data-pr-position":"down","data-pr-mousetrack":!0,"data-pr-showDelay":2e3})]})}}export default ValueIndicator;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2024-03-22 06:42:57
+ * Modified By: ADC
+ * -----
+ *
+ */
+import { Component } from 'react';
+import { Tooltip } from "primereact/tooltip";
+import { ValueDisplay } from './ValueDisplay';
+import "./ValueIndicator.css";
+/**
+ * `ValueIndicator` wraps `ValueDisplay` in a frame and label, giving it a widget appearance.
+ * Care is taken to adapt to the selected theme of the application.
+ *
+ */
+export class ValueIndicator extends Component {
+    /**
+     * The constructor initializes the component state and binds the initial value.
+     * @param {ValueIndicatorProps} props The properties passed to the component, including initial value and other display options.
+     */
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    /**
+     * Renders the component into the DOM.
+     * @returns A styled `div` element displaying the indicator.
+     */
+    render() {
+        return (_jsxs("div", { className: 'value-indicator-container', style: this.props.style, children: [_jsx(Tooltip, { target: ".value-indicator-container" }), this.props.label !== undefined &&
+                    _jsx("div", { className: "value-indicator-label", children: this.props.label }), _jsx(ValueDisplay, { className: this.props.className, value: this.props.value, format: this.props.format, formatOptions: this.props.formatOptions, topic: this.props.topic, "data-pr-tooltip": this.props.tooltip, "data-pr-position": "down", "data-pr-mousetrack": true, "data-pr-showDelay": 2000 })] }));
+    }
+}
+export default ValueIndicator;

package/dist/components/ValueInput.js

@@ -1 +1,158 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b,...h})=>{const[j,C]=useState(t),[E,_]=useState(t),[S,g]=useState(t),[y,N]=useState(!1),[k,B]=useState(!1),D=useRef(null),F=useContext(EventEmitterContext);useEffect((()=>{null!==S?(_(S),g(null),B(!1)):t!==E&&(_(t),C(t),N(!1),B(!1))}),[t,E]);const I=()=>{var e;y&&null!==j&&(e=j,void 0!==i&&e>i||void 0!==s&&e<s?B(!0):(_(j),N(!1),b?.(j),B(!1),f&&F.dispatch({topic:f,payload:j})))},w=()=>{y&&(C(null),_(null),N(!1),B(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{...h,ref:D,invalid:k,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:E,onChange:e=>{return t=e.value,y||(g(E),N(!0)),void C(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?I():"Escape"===e.key&&w()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!y,className:"p-button-success",onClick:()=>I(),visible:y,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!y,className:"p-button-danger",onClickCapture:()=>w(),visible:y,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-20 13:05:42
+ * -----
+ * Last Modified: 2024-05-17 10:01:45
+ * -----
+ *
+ */
+/** @file
+ * `ValueInput` is a React component for number input that encapsulates various features
+ * such as custom numeric formatting, optional currency formatting, increment and decrement
+ * buttons, and validation. This component uses the PrimeReact `InputNumber` control
+ * to provide a rich input experience, including handling both decimal and currency modes,
+ * with configurable precision and optional prefix/suffix text.
+ *
+ * Properties:
+ * - `label`: Label text displayed on the input field.
+ * - `value`: Current numeric value of the input field.
+ * - `min`: Minimum allowable value.
+ * - `max`: Maximum allowable value.
+ * - `minPrecision`: Minimum number of decimal places to display.
+ * - `maxPrecision`: Maximum number of decimal places allowed.
+ * - `mode`: Determines whether the input is treated as a plain decimal or currency. Defaults to "decimal".
+ * - `currency`: ISO 4217 currency code for formatting the value as currency.
+ * - `prefix`: String to display before the value.
+ * - `suffix`: String to display after the value.
+ * - `showButtons`: Whether to display increment and decrement buttons.
+ * - `step`: The amount by which the value should be incremented or decremented.
+ * - `locale`: Locale code for formatting the value.
+ * - `description`: Additional descriptive text to display below the input.
+ * - `disabled`: Whether the input is disabled.
+ * - `dispatchTopic`: Event topic to dispatch on value change.
+ * - `placeholder`: Placeholder text when the input is empty.
+ * - `onValueChanged`: Callback function that is called when the user accepts a new value.
+ *
+ * Example Usage:
+ * ```tsx
+ * <ValueInput
+ *   label="Quantity"
+ *   value={10}
+ *   min={1}
+ *   max={100}
+ *   minPrecision={0}
+ *   maxPrecision={2}
+ *   mode="decimal"
+ *   showButtons={true}
+ *   step={1}
+ *   locale="en-US"
+ *   onValueChanged={(newValue) => console.log("New Value:", newValue)}
+ * />
+ * ```
+ *
+ * This example creates a `ValueInput` component for entering quantities, with values ranging from 1 to 100,
+ * allowing up to 2 decimal places. Increment and decrement buttons are visible, and the new value is logged
+ * to the console when accepted.
+ */
+import { useState, useRef, useEffect, useContext } from 'react';
+import { InputNumber } from 'primereact/inputnumber';
+import { EventEmitterContext } from "../core/EventEmitterContext";
+import { Button } from 'primereact/button';
+/**
+ * A convenient field with all the usual features of inputing numbers.
+ * Wraps the common features of use of a InputNumber, p-inputgroup, some icon buttons,
+ * accepting and rejecting values and keyboard management.
+ */
+export const ValueInput = ({ label = '', value = null, min = undefined, max = undefined, minPrecision = 0, maxPrecision = 3, mode = "decimal", currency = "USD", prefix = undefined, suffix = undefined, showButtons = false, step = 1, locale = "en-US", description = undefined, disabled = false, dispatchTopic = undefined, placeholder = undefined, onValueChanged = undefined, ...restProps }) => {
+    const [entryValue, setEntryValue] = useState(value);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [bufferedValue, setBufferedValue] = useState(value);
+    const [editing, setEditing] = useState(false);
+    const [invalidValue, setInvalidValue] = useState(false);
+    const inputRef = useRef(null);
+    const eventEmitter = useContext(EventEmitterContext);
+    useEffect(() => {
+        if (bufferedValue !== null) {
+            setCurrentValue(bufferedValue);
+            setBufferedValue(null);
+            setInvalidValue(false);
+        }
+        else if (value !== currentValue) {
+            setCurrentValue(value);
+            setEntryValue(value);
+            setEditing(false);
+            setInvalidValue(false);
+        }
+    }, [value, currentValue]);
+    /**
+     * Buffers the original value, if editing just starting,
+     * and updates the entry value.
+     *
+     * @param val New value being entered.
+     */
+    const handleBufferValue = (val) => {
+        if (!editing) {
+            setBufferedValue(currentValue);
+            setEditing(true);
+        }
+        setEntryValue(val);
+    };
+    /**
+     * Returns true if the new value falls within specified parameters.
+     * @param val The new value.
+     * @returns
+     */
+    const validateValue = (val) => {
+        if (max !== undefined) {
+            if (val > max) {
+                return false;
+            }
+        }
+        if (min !== undefined) {
+            if (val < min) {
+                return false;
+            }
+        }
+        return true;
+    };
+    /**
+     * The user has elected to accept the input value. Validate and store, if valid.
+     */
+    const handleAcceptValue = () => {
+        if (editing && entryValue !== null) {
+            if (validateValue(entryValue)) {
+                setCurrentValue(entryValue);
+                setEditing(false);
+                onValueChanged?.(entryValue);
+                setInvalidValue(false);
+                if (dispatchTopic) {
+                    eventEmitter.dispatch({ topic: dispatchTopic, payload: entryValue });
+                }
+            }
+            else {
+                setInvalidValue(true);
+            }
+        }
+    };
+    /**
+     * The user wishes to cancel/reset to the previous value.
+     */
+    const handleResetValue = () => {
+        if (editing) {
+            setEntryValue(null);
+            setCurrentValue(null);
+            setEditing(false);
+            setInvalidValue(false);
+        }
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "p-inputgroup flex-1", children: [_jsx("span", { className: "p-inputgroup-addon", children: label }), _jsx(InputNumber, { ...restProps, ref: inputRef, invalid: invalidValue, min: min, max: max, minFractionDigits: minPrecision, maxFractionDigits: maxPrecision, mode: mode, prefix: prefix, suffix: suffix, showButtons: showButtons, step: step, placeholder: placeholder, value: currentValue, onChange: (e) => handleBufferValue(e.value), locale: locale, currency: currency, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                handleAcceptValue();
+                            }
+                            else if (e.key === 'Escape') {
+                                handleResetValue();
+                            }
+                        }, disabled: disabled }), _jsx(Button, { icon: "pi pi-check", disabled: disabled || !editing, className: "p-button-success", onClick: () => handleAcceptValue(), visible: editing, size: "small", autoFocus: false }), _jsx(Button, { icon: "pi pi-times", disabled: disabled || !editing, className: "p-button-danger", onClickCapture: () => handleResetValue(), visible: editing, size: "small", autoFocus: false })] }), description && _jsx("small", { children: description })] }));
+};
+export default ValueInput;

package/dist/core/ActionMode.js

@@ -1 +1,18 @@
-export var ActionMode;!function(e){e.Tap="Tap",e.Toggle="Toggle",e.Pressed="Pressed",e.Released="Released"}(ActionMode||(ActionMode={}));
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 10:28:38
+ * -----
+ * Last Modified: 2024-03-12 10:28:47
+ * -----
+ *
+ */
+/**
+ * Enum for different input modes of the IndicatorButton.
+ */
+export var ActionMode;
+(function (ActionMode) {
+    ActionMode["Tap"] = "Tap";
+    ActionMode["Toggle"] = "Toggle";
+    ActionMode["Pressed"] = "Pressed";
+    ActionMode["Released"] = "Released";
+})(ActionMode || (ActionMode = {}));

package/dist/core/EventEmitterContext.js

@@ -1 +1,252 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useState,useMemo,useCallback}from"react";import{createHub,Hub}from"../hub";export{Hub};let globalSubscriptionId=1;export const EventEmitterContext=createContext({state:{subscriptions:{},nextSubscriptionId:1},dispatch:()=>{},subscribe:()=>0,invoke:async(t,s,e)=>Promise.resolve({data:{},success:!1,error_message:""}),unsubscribe:t=>{},hub:null,getSubscriptions:()=>[],isConnected:()=>!1});export const EventEmitterProvider=({children:t})=>{const[s,e]=useState({subscriptions:{},nextSubscriptionId:1}),i=useMemo((()=>createHub()),[]),r=useCallback((t=>{const{topic:s,payload:i}=t;e((t=>((t.subscriptions[s]||[]).forEach((t=>t.callback(i))),{...t,eventData:i})))}),[]),o=useCallback(((t,s)=>{globalSubscriptionId+=1;const i=globalSubscriptionId;return e((e=>({...e,subscriptions:{...e.subscriptions,[t]:[...e.subscriptions[t]||[],{id:i,callback:s}]},nextSubscriptionId:globalSubscriptionId+1}))),i}),[]),c=useCallback((t=>{e((s=>{const e={...s.subscriptions};return Object.keys(e).forEach((s=>{e[s]=e[s].filter((s=>s.id!==t)),0===e[s].length&&delete e[s]})),{...s,subscriptions:e}}))}),[]),n=useCallback((t=>t?s.subscriptions[t]||[]:s.subscriptions),[]),u=useMemo((()=>({state:s,dispatch:r,subscribe:o,unsubscribe:c,invoke:i.invoke,hub:i,getSubscriptions:n,isConnected:i.isConnected})),[s,i]);return i.setContext(u),_jsx(EventEmitterContext.Provider,{value:u,children:t})};
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-17 11:45:10
+ * -----
+ * Last Modified: 2024-04-25 15:24:53
+ * Modified By: ADC
+ * -----
+ *
+ */
+import { createContext, useState, useMemo, useCallback } from 'react';
+import { createHub, Hub } from "../hub";
+export { Hub };
+let globalSubscriptionId = 1;
+/**
+ * A global context for managing event emission and subscription.
+ *
+ * Creates a React context for the EventEmitter system, providing a structured way to manage events and data flow
+ * in a React application. It serves as a global event bus that components can subscribe to or emit events, allowing for
+ * a loosely coupled architecture. Additionally, it provides a mechanism for invoking backend functions and managing
+ * subscriptions, making it easier to integrate React components with backend services.
+ *
+ * The context includes several key functionalities:
+ * - `state`: Maintains the current state of subscriptions and their identifiers.
+ * - `dispatch`: Allows components to emit events with specific topics and payloads, which can be listened to by other components.
+ * - `subscribe`: Enables components to listen to specific topics and react to those events by providing a callback function.
+ * - `unsubscribe`: Provides a way for components to stop listening to events, helping prevent memory leaks and unnecessary updates.
+ * - `invoke`: Facilitates calling backend functions with specific arguments and handling their responses asynchronously.
+ * - `getSubscriptions`: Offers insight into current active subscriptions, useful for debugging purposes.
+ *
+ * This context is essential for applications that require a high degree of inter-component communication or need to
+ * interact with a backend efficiently.
+ *
+ * For more information, see [Additional Documentation](../additional-docs/GlobalEventEmitter.md).
+ *
+ * ## Usage
+ *
+ * The entire application should be wrapped in the EventEmitterProvider.
+ *
+ * App.tsx
+ * ```
+ * import { EventEmitterProvider } from "@adcops/autocore-react/core/EventEmitterContext.js";
+ * function App() {
+ *
+ *      return(
+ *          <EventEmitterProvider>
+ *              <PrimeReactProvider>
+ *                  <main>
+ *                      <section>
+ *                          <ContentView />
+ *                      </section>
+ *                  </main>
+ *              </PrimeReactProvider>
+ *          </EventEmitterProvider>
+ *      );
+ *
+ * }
+ *
+ * ```
+ *
+ * ### Catching and receiving events
+ * The EventEmitterContext creates an appropriate instance of the hub, which is derived from HubBase.
+ * That hub can be used to publish and subscribe to
+ * topics globally in the front-end, regardless of being connected to any backend.
+ * Usage within a component is simple.
+ *
+ * ```
+ * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * const [controlPower, setControlPower] = useState(false);
+ * useEffect(() => {
+ *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
+ *          setControlPower(value);
+ *      });
+ *
+ *
+ *      return () => {
+ *           unsubscribe(unsubscribeControlPower);
+ *      }
+ * }, [] );
+ *
+ * const onPbPressed = () => {
+ *      let count = 1;
+ *      dispatch({
+ *          topic: "my-awesome-topic",
+ *          payload: count
+ *      });
+ * }
+ *
+ * ```
+ * The hub should also be used for invoking events in the backend.
+ * This example will call the function "update_count" in the backend, passing
+ * the expected argument "count". Details of the interaction between the Hub and
+ * the backend will be handled by the appropriate HubBase sub-class, and should
+ * be transparent to the front end.
+ *
+ * ```
+ * const {invoke} = useContext(EventEmitterContext);
+ * const incrementCount = () => {
+ *    count += 1;
+ *    invoke('update_count', {"count": count});
+ * };
+ *
+ * Subscribing to a topic is simple. The type of value received is specific
+ * to the topic.
+ *
+ * Example: Listen to an event 'xarm-position':
+ * ```
+ * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * useEffect(() => {
+ *         const unsubscripeMp = subscribe('xarm-position', (value) => {
+ *            // The publisher sent a JSON object of 3D position values.
+ *            setX(value.x);
+ *            setY(value.y);
+ *            setZ(value.z);
+ *            setA(value.roll);
+ *            setB(value.yaw);
+ *            setC(value.pitch);
+ *        });
+ *
+ *    return () => {
+ *        unsubscribe(unsubscripeMp);
+ *    }
+ *
+ * }, [] );
+ *
+ * ```
+ *
+ * For applications that need to access the instance of the hub, get the current instance
+ * from the EventEmitterContext:
+ *
+ * ```
+ * const {hub} = useContext(EventEmitterContext);
+ *  * ```
+ *
+ *
+ */
+export const EventEmitterContext = createContext({
+    state: { subscriptions: {}, nextSubscriptionId: 1 },
+    dispatch: () => { },
+    subscribe: () => { return 0; }, // Placeholder for subscription logic
+    invoke: async (domain, fname, payload) => {
+        domain;
+        fname;
+        payload;
+        let ret = {
+            data: {},
+            success: false,
+            error_message: ""
+        };
+        // Placeholder for invoke logic
+        // Implement the logic to send a message to the backend and return a promise
+        return Promise.resolve(ret); // Example placeholder, replace with actual implementation
+    },
+    unsubscribe: (subscriptionId) => { subscriptionId; }, // Placeholder for unsubscription logic    
+    hub: null,
+    getSubscriptions: () => { return []; },
+    isConnected: () => { return false; }
+});
+/**
+ * A React component that provides the EventEmitterContext to its children.
+ *
+ * Wraps child components with the context, enabling them to access and interact
+ * with the event emitter.
+ *
+ * @param children The child components to be wrapped in the context.
+ *
+ * ## Usage
+ *
+ * The entire application should be wrapped in the EventEmitterProvider.
+ *
+ * App.tsx
+ * ```
+ * import { EventEmitterProvider } from "@adcops/autocore-react/core/EventEmitterContext.js";
+ * function App() {
+ *
+ *      return(
+ *          <EventEmitterProvider>
+ *              <PrimeReactProvider>
+ *                  <main>
+ *                      <section>
+ *                          <ContentView />
+ *                      </section>
+ *                  </main>
+ *              </PrimeReactProvider>
+ *          </EventEmitterProvider>
+ *      );
+ *
+ * }
+ *
+ * ```
+ */
+export const EventEmitterProvider = ({ children }) => {
+    const [state, setState] = useState({ subscriptions: {}, nextSubscriptionId: 1 });
+    // Memoize the hub instance so it's only created once
+    const hub = useMemo(() => createHub(), []);
+    const dispatch = useCallback((action) => {
+        const { topic, payload } = action;
+        setState(prevState => {
+            const callbacks = prevState.subscriptions[topic] || [];
+            callbacks.forEach(sub => sub.callback(payload));
+            return { ...prevState, eventData: payload };
+        });
+    }, []);
+    const subscribe = useCallback((topic, callback) => {
+        globalSubscriptionId += 1;
+        const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
+        setState(prevState => ({
+            ...prevState,
+            subscriptions: {
+                ...prevState.subscriptions,
+                [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
+            },
+            nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
+        }));
+        return subscriptionId;
+    }, []);
+    const unsubscribe = useCallback((subscriptionId) => {
+        setState(prevState => {
+            const newSubscriptions = { ...prevState.subscriptions };
+            Object.keys(newSubscriptions).forEach(topic => {
+                newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
+                if (newSubscriptions[topic].length === 0) {
+                    delete newSubscriptions[topic];
+                }
+            });
+            return { ...prevState, subscriptions: newSubscriptions };
+        });
+    }, []);
+    const getSubscriptions = useCallback((topic) => {
+        if (topic) {
+            // Return subscriptions for the provided topic, or an empty array if the topic doesn't exist
+            return state.subscriptions[topic] || [];
+        }
+        else {
+            // Return all subscriptions
+            return state.subscriptions;
+        }
+    }, []);
+    // Provide the memoized hub instance in the context value
+    const contextValue = useMemo(() => ({
+        state,
+        dispatch,
+        subscribe,
+        unsubscribe,
+        invoke: hub.invoke,
+        hub,
+        getSubscriptions,
+        isConnected: hub.isConnected
+    }), [state, hub]);
+    hub.setContext(contextValue);
+    return (_jsx(EventEmitterContext.Provider, { value: contextValue, children: children }));
+};

package/dist/core/IndicatorButtonState.js

@@ -1 +1,9 @@
-export{};
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-12 11:08:29
+ * -----
+ * Last Modified: 2024-03-12 11:08:41
+ * -----
+ *
+ */
+export {};