@adcops/autocore-react 3.3.9 → 3.3.14

package/src/components/IndicatorRect.tsx

@@ -1,172 +1,170 @@
-/*
- * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2025-01-20 15:09:55
- * -----
- * Last Modified: 2025-09-05 14:51:58
- * -----
- * 
- */
-
-import { Component } from 'react';
-import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
-import { IndicatorColor } from "../core/IndicatorColor";
-export { IndicatorColor };
-
-/**
- * Common properties for an indicator rectangle component. 
- * This component is used for displaying states and is not interactive.
- * It is commonly used in industrial HMIs for visual indication purposes.
- *
- * These properties support displaying values of boolean, number, and string states.
- *
- * Available boolean states: **on**, **off**, and **not available**:
- *
- * * `true` is treated as **on**
- * * `false` is treated as **off**
- * * `undefined` is treated as **not available**
- *
- * Numeric values can be used. When there are 2 or fewer possible states,
- * 0 will be considered false (OFF), anything else will be considered true (ON).
- * Undefined will be treated as "not available."
- *
- * When the indicator contains more than 2 states, the number will be matched
- * to the available state, in order. More than two states requires usage of the
- * `options` field and declaring more than two states there.
- *
- * If a string state is used, it will be matched exactly to the corresponding
- * label in the `options` field.
- */
-export interface IndicatorRectProps {
-
-    /**
-     * Topic name to monitor for state indication.
-     */
-    topic?: string;
-
-    /**
-     * State to be displayed.
-     */
-    value?: boolean | number | string;
-
-    /**
-     * Color for the rectangle when the state is TRUE.
-     */
-    onColor?: IndicatorColor;
-
-    /**
-     * Color for the rectangle when the state is FALSE.
-     */
-    offColor?: IndicatorColor;
-
-    /**
-     * An array of string labels to display as the available options.
-     * 
-     * For items with 2 states or less:
-     * Index 0 is the label when value is OFF.
-     * Index 1 is the label when value is ON.
-     * 
-     * If only one value is given (Index 0), then that value is used for all states.
-     */
-    options?: string[];
-
-    /**
-     * Additional CSS class name to apply to the rectangle.
-     */
-    className?: string;
-
-    /**
-     * Additional inline styles to apply to the rectangle.
-     */
-    style?: React.CSSProperties;
-
-}
-
-interface IndicatorRectState {
-    currentValue?: boolean | number | string;
-}
-
-export class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
-    static contextType = EventEmitterContext;
-
-    // Define default props
-    static defaultProps = {
-        onColor: IndicatorColor.IndicatorGreen,
-        offColor: "gray", // Default offColor
-    };
-
-    constructor(props: IndicatorRectProps) {
-        super(props);
-        this.state = {
-            currentValue: undefined,
-        };
-    }
-
-    componentDidMount() {
-        this.setupSubscriptions();
-    }
-
-    componentWillUnmount() {
-        // Unsubscribe logic if needed
-    }
-
-    /**
-     * Sets up subscriptions based on the provided topic.
-     */
-    private setupSubscriptions() {
-        const { topic } = this.props;
-        const { subscribe } = this.context as EventEmitterContextType;
-
-        if (topic) {
-            subscribe(topic, this.handleTopicUpdate);
-        }
-    }
-
-    /**
-     * Handles updates for the main topic.
-     */
-    private handleTopicUpdate = (value: boolean | number | string) => {
-        this.setState({ currentValue: value });
-    };
-
-    render() {
-        const { currentValue } = this.state;
-        const { className, style, value, onColor, offColor, options } = this.props;
-
-        // Load the value from the proper source
-        let displayValue = currentValue;
-        if (value !== undefined) {
-            displayValue = value;
-        }
-
-        // Determine the label and color based on the current state
-        let rectLabel = undefined;
-        if (options !== undefined && options.length > 0) {
-            rectLabel = displayValue ? options[1] : options[0];
-        }
-
-        let color = displayValue ? onColor : offColor;
-        if (displayValue === undefined) {
-            color = IndicatorColor.IndicatorInvalid;
-        }
-
-        return (
-            <div
-                className={`indicator-rect ${className || ""}`}
-                style={{
-                    backgroundColor: color,
-                    color: "white",
-                    width: "100px",
-                    height: "100px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    ...style,
-                }}
-            >
-                {rectLabel}
-            </div>
-        );
-    }
-}
-
-export default IndicatorRect;
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-01-20 15:09:55
+ * -----
+ * Last Modified: 2025-09-05 14:51:58
+ * -----
+ * 
+ */
+
+import { Component } from 'react';
+import { EventEmitterContext, type EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+
+/**
+ * Common properties for an indicator rectangle component. 
+ * This component is used for displaying states and is not interactive.
+ * It is commonly used in industrial HMIs for visual indication purposes.
+ *
+ * These properties support displaying values of boolean, number, and string states.
+ *
+ * Available boolean states: **on**, **off**, and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there are 2 or fewer possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available."
+ *
+ * When the indicator contains more than 2 states, the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * `options` field and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the corresponding
+ * label in the `options` field.
+ */
+export interface IndicatorRectProps {
+
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+
+    /**
+     * State to be displayed.
+     */
+    value?: boolean | number | string;
+
+    /**
+     * Color for the rectangle when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+
+    /**
+     * Color for the rectangle when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+
+    /**
+     * An array of string labels to display as the available options.
+     * 
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     * 
+     * If only one value is given (Index 0), then that value is used for all states.
+     */
+    options?: string[];
+
+    /**
+     * Additional CSS class name to apply to the rectangle.
+     */
+    className?: string;
+
+    /**
+     * Additional inline styles to apply to the rectangle.
+     */
+    style?: React.CSSProperties;
+
+}
+
+interface IndicatorRectState {
+    currentValue?: boolean | number | string;
+}
+
+export class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
+    static contextType = EventEmitterContext;
+
+    // Define default props
+    static defaultProps = {
+        onColor: IndicatorColor.IndicatorGreen,
+        offColor: "gray", // Default offColor
+    };
+
+    constructor(props: IndicatorRectProps) {
+        super(props);
+        this.state = {
+            currentValue: undefined,
+        };
+    }
+
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+
+    /**
+     * Sets up subscriptions based on the provided topic.
+     */
+    private setupSubscriptions() {
+        const { topic } = this.props;
+        const { subscribe } = this.context as EventEmitterContextType;
+
+        if (topic) {
+            subscribe(topic, this.handleTopicUpdate);
+        }
+    }
+
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate = (value: boolean | number | string) => {
+        this.setState({ currentValue: value });
+    };
+
+    render() {
+        const { currentValue } = this.state;
+        const { className, style, value, onColor, offColor, options } = this.props;
+
+        // Load the value from the proper source
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+
+        // Determine the label and color based on the current state
+        let rectLabel = undefined;
+        if (options !== undefined && options.length > 0) {
+            rectLabel = displayValue ? options[1] : options[0];
+        }
+
+        let color = displayValue ? onColor : offColor;
+        if (displayValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+
+        return (
+            <div
+                className={`indicator-rect ${className || ""}`}
+                style={{
+                    backgroundColor: color,
+                    color: "white",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    ...style,
+                }}
+            >
+                {rectLabel}
+            </div>
+        );
+    }
+}
+
+export default IndicatorRect;

package/src/components/JogPanel.css

@@ -1,41 +1,41 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 13:17:33
- * -----
- * Last Modified: 2024-03-19 10:37:26
- * -----
- * 
- */
-
- .jogpanel-container {
-    margin: 2mm;
-    display: flex; 
-    flex-direction: column; /* Stack children vertically */
-    align-items: center; /* Center children horizontally within the container */    
- }
-
-.grid-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;  /* Adjust the gap between rows */
-    
-}
-
-.grid-row {
-    display: flex;
-    justify-content: space-between;
-    gap: 10px;  /* Adjust the gap between buttons */    
-}
-
-.button-item {
-    flex: 1; /* Make buttons expand to fill the row */    
-}
-
-.distance-selector {
-    margin-top: 2mm; /* Gap between buttons and distance selector */
-    margin-left: auto;
-    margin-right: auto;    
-    width: -moz-fit-content;
-    width: fit-content;
-}
-
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 13:17:33
+ * -----
+ * Last Modified: 2024-03-19 10:37:26
+ * -----
+ * 
+ */
+
+ .jogpanel-container {
+    margin: 2mm;
+    display: flex; 
+    flex-direction: column; /* Stack children vertically */
+    align-items: center; /* Center children horizontally within the container */    
+ }
+
+.grid-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;  /* Adjust the gap between rows */
+    
+}
+
+.grid-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;  /* Adjust the gap between buttons */    
+}
+
+.button-item {
+    flex: 1; /* Make buttons expand to fill the row */    
+}
+
+.distance-selector {
+    margin-top: 2mm; /* Gap between buttons and distance selector */
+    margin-left: auto;
+    margin-right: auto;    
+    width: -moz-fit-content;
+    width: fit-content;
+}
+