@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/ValueDisplay.tsx

@@ -1,236 +1,236 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 14:17:02
- * -----
- * Last Modified: 2025-09-05 14:51:23
- * 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, type EventEmitterContextType } from '../core/EventEmitterContext';
-
-import type { IPositionContext } from '../core/PositionContext';
-import type { NumerableFormatOptions } from '../core/NumerableTypes';
-
-/**
- * Properties of the ValueDisplay component.
- */
-interface Props {
-    /**
-     * Value to be displayed
-     */
-    value?: string | number | null | undefined;
-    /**
-     * X position (in pixels)
-     */
-    x?: number;
-    /**
-     * Y position (in pixels)
-     */
-    y?: number;
-    /**
-     * Width (in pixels)
-     */
-    width?: number;
-    /**
-     * Height (in pixels)<br/>
-     * @default width
-     */
-    height?: number;
-    /**
-     * Format for `value`<br/>
-     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
-     */
-    format?: string | null | undefined;
-    /**
-     * Format options for `value`<br/>
-     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
-     */
-    formatOptions?: NumerableFormatOptions;
-    /**
-     * Custom class name to be attached
-     */
-    className?: string;
-
-    /**
-     * Enable absolute positioning for the component, allowing it to be
-     * placed on a specific position of its parent. This is useful when
-     * laying components over an image or wireframe.
-     */
-    useAbsolutePositioning?: boolean;
-
-
-    /**
-     * The topic to monitor to display. Optional. 
-     */
-    topic?: string;
-}
-
-/**
- * State of the ValueDisplay component.
- */
-interface State {
-    subscribedValue?: string | number | null;
-    fontSize?: string;
-}
-
-
-
-/**
- * `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<Props, State> {
-
-    /** Defines the context type to subscribe to changes using EventEmitter. */
-    static contextType = EventEmitterContext;
-
-
-    /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
-    protected unsubscribeTopicId: number | null = null;
-
-    /**
-     * 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: Props) {
-        super(props);
-        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 as EventEmitterContextType;
-            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
-                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: Props) {
-        // 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 as EventEmitterContextType;
-            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 as IPositionContext;
-
-        const style: React.CSSProperties = {
-            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 (
-            <div className={clsx(className)} style={style}>
-                {displayValue}
-            </div>
-        );
-    }
-
-}
-
-export { ValueDisplay, type NumerableFormatOptions };
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:17:02
+ * -----
+ * Last Modified: 2025-09-05 14:51:23
+ * 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, type EventEmitterContextType } from '../core/EventEmitterContext';
+
+import type { IPositionContext } from '../core/PositionContext';
+import type { NumerableFormatOptions } from '../core/NumerableTypes';
+
+/**
+ * Properties of the ValueDisplay component.
+ */
+interface Props {
+    /**
+     * Value to be displayed
+     */
+    value?: string | number | null | undefined;
+    /**
+     * X position (in pixels)
+     */
+    x?: number;
+    /**
+     * Y position (in pixels)
+     */
+    y?: number;
+    /**
+     * Width (in pixels)
+     */
+    width?: number;
+    /**
+     * Height (in pixels)<br/>
+     * @default width
+     */
+    height?: number;
+    /**
+     * Format for `value`<br/>
+     * See [numerable formats](https://github.com/gastonmesseri/numerable#1234-formatting-numbers)
+     */
+    format?: string | null | undefined;
+    /**
+     * Format options for `value`<br/>
+     * See [numerable format options](https://github.com/gastonmesseri/numerable#format)
+     */
+    formatOptions?: NumerableFormatOptions;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+    /**
+     * Enable absolute positioning for the component, allowing it to be
+     * placed on a specific position of its parent. This is useful when
+     * laying components over an image or wireframe.
+     */
+    useAbsolutePositioning?: boolean;
+
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+/**
+ * State of the ValueDisplay component.
+ */
+interface State {
+    subscribedValue?: string | number | null;
+    fontSize?: string;
+}
+
+
+
+/**
+ * `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<Props, State> {
+
+    /** Defines the context type to subscribe to changes using EventEmitter. */
+    static contextType = EventEmitterContext;
+
+
+    /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
+    protected unsubscribeTopicId: number | null = null;
+
+    /**
+     * 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: Props) {
+        super(props);
+        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 as EventEmitterContextType;
+            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
+                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: Props) {
+        // 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 as EventEmitterContextType;
+            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 as IPositionContext;
+
+        const style: React.CSSProperties = {
+            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 (
+            <div className={clsx(className)} style={style}>
+                {displayValue}
+            </div>
+        );
+    }
+
+}
+
+export { ValueDisplay, type NumerableFormatOptions };

package/src/components/ValueIndicator.css

@@ -1,32 +1,30 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-22 06:26:45
- * -----
- * Last Modified: 2024-03-22 07:07:50
- * -----
- * 
- */
-
-
-
- .value-indicator-container {
-
-    display: flex;
-    flex-direction: column;
-    background-color: var(--surface-ground);
-    border-color: var(--surface-border);
-    border-radius: var(--border-radius);
-    border-width: 1px;
-    border-style: solid;
-    justify-content: center;
-    align-items: center;
-    padding: 2mm;
-    flex-grow: 1; /* Allow the item to grow to fill available space */
-    flex-shrink: 0; /* Allow the item to shrink if necessary */
-    flex-basis: 0; /* Start with 0 width and then grow as needed, equal distribution */
-    min-width: 0; /* Prevents flex items from overflowing their container */
-}
-
-.value-indicator-label {
-    padding-bottom: 1mm;
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-22 06:26:45
+ * -----
+ * Last Modified: 2024-03-22 07:07:50
+ * -----
+ * 
+ */
+
+
+
+ .value-indicator-container {
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--surface-ground);
+    border-color: var(--surface-border);
+    border-radius: var(--border-radius);
+    border-width: 1px;
+    border-style: solid;
+    justify-content: center;
+    align-items: center;
+    padding: 2mm;
+    flex-shrink: 0;
+    min-width: 0; /* Prevents flex items from overflowing their container */
+}
+
+.value-indicator-label {
+    padding-bottom: 1mm;
 }