@adcops/autocore-react 3.0.1 → 3.0.4

package/src/components/CodeEditor.tsx

@@ -0,0 +1,156 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-17 08:43:02
+ * -----
+ * Last Modified: 2024-03-18 11:29:08
+ * -----
+ * 
+ */
+
+
+
+import * as React from 'react';
+import { editor } from 'monaco-editor';
+//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { Monaco } from '@monaco-editor/react';
+
+
+interface CodeEditorProps {
+
+    /** 
+     * Code content of the editor 
+     */
+    code: string | undefined;
+
+    /** 
+     * Programming language type for syntax highlighting 
+     * @default 'python'
+     */
+    language : string;
+
+    /** 
+     * Visual theme of the editor. vs-dark is generally preferred. 
+     * @default 'vs-dark'
+     */
+    theme : 'vs-dark' | 'vs-light';
+
+    /** 
+     * Whether the editor is read only 
+     * @default false
+     */
+    readOnly: boolean;
+
+    /** 
+     * Style of the cursor in the editor. 
+     * @default 'line'
+     */
+    cursorStyle: "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin" | undefined;
+
+
+    /** Callback when the user types chances into the editor. */
+    onCodeChanged?(code: string | undefined): void;
+}
+
+
+/**
+ * Wrapper for the Microsoft Monaco editor, configured for our most common defaults.
+ */
+export class CodeEditor extends React.Component<CodeEditorProps> {
+
+
+    /**
+     * Default properties for this component.
+     */
+    static defaultProps = {
+        code: undefined,
+        language : 'python',
+        theme : 'vs-dark',
+        readOnly: false,
+        cursorStyle: "line",
+        onCodeChanged : undefined
+    }
+
+    /**
+     * Constructor
+     * @param props PythonEditorProps
+     */
+    constructor(props: CodeEditorProps) {
+        super(props);
+    }
+
+
+    /**
+     * The editor is initialized and displayed in the view.
+     * @param editor 
+     * @param monaco 
+     */
+    editorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        monaco;
+        editor.focus();
+    };
+
+    /**
+     * The editor is about to mount into the view.
+     * @param monaco Instance of the editor.
+     */
+    handleEditorWillMount = (monaco: Monaco) => {
+        monaco;
+    }
+
+
+    /**
+     * Handle changes to the editor's contents.
+     * @param newValue New value of editor content.
+     * @param e 
+     */
+    onChange = (newValue: string | undefined, e: any) => {
+        e;
+
+        if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
+            this.props.onCodeChanged(newValue);
+    };
+
+
+    handleEditorValidation = (markers: editor.IMarker[]) => {
+        // model markers
+        markers.forEach(marker => console.log('onValidate:', marker.message));
+    }
+
+
+    /**
+     * Render the component into the view.
+     * @returns 
+     */
+    render() {
+        const options: editor.IStandaloneEditorConstructionOptions = {
+            selectOnLineNumbers: true,
+            roundedSelection: false,
+            readOnly: this.props.readOnly,
+            cursorStyle: this.props.cursorStyle,
+            automaticLayout: true,
+            theme: this.props.theme,
+            language: this.props.language,
+            folding: false,
+
+
+        };
+
+        return (
+            <Editor
+                value={this.props.code}
+                height="100%"
+                width="100%"
+                defaultLanguage="python"
+                defaultValue=""
+                onChange={this.onChange}
+                onMount={this.editorDidMount}
+                beforeMount={this.handleEditorWillMount}
+                onValidate={this.handleEditorValidation}
+                theme='vs-dark'
+                options={options}
+            />
+        );
+    }
+}
+
+export default CodeEditor;

package/src/components/Indicator.tsx

@@ -2,86 +2,40 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:39:41
  * -----
- * Last Modified: 2024-03-08 07:48:42
+ * Last Modified: 2024-03-12 21:53:48
  * -----
  * 
  */
 
 
+import React, { Component } from 'react';
+//import clsx from 'clsx';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+//import { IPositionContext } from '../core/PositionContext';
+import {IndicatorColor} from "../core/IndicatorColor";
+export {IndicatorColor}
 
-// import { useContext } from 'react';
-// import clsx from 'clsx';
-
-// import DimensionsContext from '../core/DimensionsContext';
-
-
-
-// /**
-//  * Displays boolean values<br/>
-//  * Supports 3 states: **on**, **off** and **invalid/not available**:
-//  */
-// const Indicator = ({
-//     value: value,
-//     x,
-//     y,
-//     width = 22,
-//     height = width,
-//     className,
-//     onColor: onColor = IndicatorGreen,
-//     offColor: offColor = IndicatorOff,
-//     invalidColor: invalidColor = IndicatorInvalid,
-//     useAbsolutePositioning = false, // Default to false
-// }: Props): JSX.Element => {
-//     const { scale, xOffset, yOffset } = useContext(DimensionsContext);
-
-//     let color;
-//     switch (value) {
-//         case true:
-//             color = onColor;
-//             break;
-//         case false:
-//             color = offColor;
-//             break;
-//         default:
-//             color = invalidColor;
-//             break;
-//     }
-
-//     return (
-//         <div
-//             className={clsx(className)}
-//             style={{
-//                 position: useAbsolutePositioning ? 'absolute' : 'relative',
-//                 display: useAbsolutePositioning ?  "": "inline-block",
-//                 verticalAlign: 'middle',
-//                 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,
-//                 backgroundColor: color,
-//                 borderRadius: "20px"
-//             }}
-//         />
-//     );
-// };
-
-// export { Indicator };
+//import {Lamp} from "./Lamp";
 
 
 
 
-import React, { Component } from 'react';
-import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
-import { IPositionContext } from '../core/PositionContext';
-import {IndicatorColor} from "./IndicatorColor";
-export {IndicatorColor}
+interface IndicatorProps {
 
 
+    /**
+     * Label of the group/row. Can be any element.
+     * 
+     * ## Examples
+     * ```
+     * <Indicator label="Simple Text" />
+     * <Indicator label={<span><i className="pi pi-check"></i> Icon and Text</span>} />
+     * <Indicator label={<YourCustomIconComponent />} />
+     * ```
+     */
+    label? : React.ReactNode;
 
 
-interface IndicatorProps {
     /**
      * State to be displayed<br/>
      *
@@ -92,23 +46,6 @@ interface IndicatorProps {
      * * `undefined` is treated as **not available**
      */
     value?: boolean | 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;
     /**
      * CSS color for **enabled** state
      */
@@ -126,18 +63,12 @@ interface IndicatorProps {
      */
     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;
+
+
 }
 
 
@@ -153,12 +84,9 @@ export class Indicator extends Component<IndicatorProps, IndicatorState> {
 
     // Define default properties
     static defaultProps = {
-        width: 22,
-        height: 22,
         onColor: "green",
         offColor: "gray",
-        invalidColor: "yellow",
-        useAbsolutePositioning: false
+        invalidColor: "black"
     };
 
     constructor(props: IndicatorProps) {
@@ -194,22 +122,20 @@ export class Indicator extends Component<IndicatorProps, IndicatorState> {
     }
 
     render() {
-        const { x, y, width, height, className, onColor, offColor, invalidColor, useAbsolutePositioning } = this.props;
-        const { scale, xOffset, yOffset } = this.context as IPositionContext;
+        const { label, value, onColor, offColor, invalidColor } = this.props;
         const { subscribedValue } = this.state;
 
-        let adjWidth = width || 10;
-        if (adjWidth < 10)
-            adjWidth = 10;
-        let adjHeight = height || 10;
-        if (adjHeight < 10)
-            adjHeight = 10;
-        let adjScale = scale || 1;
-        if (adjScale === 0)
-            adjScale = 1;
+        //
+        // Load the value from the proper source.
+        // If the `value` property is undefined, that takes precedence.
+        // 
+        let displayValue = subscribedValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }      
 
         let color;
-        switch (subscribedValue) {
+        switch (displayValue) {
             case true:
                 color = onColor;
                 break;
@@ -221,21 +147,40 @@ export class Indicator extends Component<IndicatorProps, IndicatorState> {
                 break;
         }
 
-        const style: React.CSSProperties = {
-            position: useAbsolutePositioning ? 'absolute' : 'relative',
-            display: useAbsolutePositioning ? "" : "inline-block",
-            verticalAlign: 'middle',
-            top: useAbsolutePositioning && y ? `${yOffset + adjScale * y}px` : undefined,
-            left: useAbsolutePositioning && x ? `${xOffset + adjScale * x}px` : undefined,
-            width: adjWidth ? `${adjWidth * adjScale}px` : undefined,
-            height: adjHeight ? `${adjHeight * adjScale}px` : undefined,
-            lineHeight: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+        // const style: React.CSSProperties = {
+        //     position: useAbsolutePositioning ? 'absolute' : 'relative',
+        //     display: useAbsolutePositioning ? "" : "inline-block",
+        //     verticalAlign: 'middle',
+        //     top: useAbsolutePositioning && y ? `${yOffset + adjScale * y}px` : undefined,
+        //     left: useAbsolutePositioning && x ? `${xOffset + adjScale * x}px` : undefined,
+        //     width: adjWidth ? `${adjWidth * adjScale}px` : undefined,
+        //     height: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+        //     lineHeight: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+        //     backgroundColor: color,
+        //     borderRadius: "20px"
+        // };
+
+
+        const groupStyle : React.CSSProperties = {
+            alignItems: "center !important"
+        };
+
+        const lampDivStyle : React.CSSProperties = {
             backgroundColor: color,
-            borderRadius: "20px"
+            width: "22px"
         };
 
         return (
-            <div className={clsx(className)} style={style} />
+
+            <div className="p-inputgroup flex-1" style={groupStyle} >
+                <span className="p-inputgroup-addon" style={lampDivStyle} >
+                    &nbsp;
+                </span>
+                <span className="p-inputgroup-addon">
+                    {label}
+                </span>
+            </div>
+
         );
     }
 }

package/src/components/IndicatorButton.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-21 10:33:58
   * -----
- * Last Modified: 2024-03-08 07:17:08
+ * Last Modified: 2024-03-12 20:55:17
  * Modified By: ADC
  * -----
  * 
@@ -12,31 +12,58 @@
 import { Component } from 'react';
 import { Button, ButtonProps} from 'primereact/button';
 import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
-import {IndicatorColor} from "./IndicatorColor";
+import {IndicatorColor} from "../core/IndicatorColor";
 export {IndicatorColor}
+import { ActionMode } from '../core/ActionMode';
+export {ActionMode};
+
+import { IndicatorButtonState } from '../core/IndicatorButtonState';
+
+export declare type IndicatorButtonOptionsType = string[] | undefined[] | undefined;
 
-/**
- * Enum for different input modes of the IndicatorButton.
- */
-export enum ActionMode {
-    Tap = 'Tap',
-    Toggle = 'Toggle',
-    Pressed = 'Pressed',
-    Released = 'Released'
-}
 
 /**
- * Properties for the IndicatorButton.
+ * Common properties for an indicating button, toggle or similar component. 
+ * These types of components both indicate a state and execute commands/signals.
+ * This type of component is very common in industrial HMIs.
+ * 
+ * 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 is only 2 or less 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, then 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 matching
+ * label in the `options` field.
+ * 
  * 
  * For more information on the AutoCore Button API Specification, see 
  * [Additional Documentation](../additional-docs/ButtonApiSpecs.md).
  */
-export interface IndicatorButtonProps extends ButtonProps {
+export interface IndicatorButtonProps extends Omit<ButtonProps, 'value'> {
+    
     /**
      * Topic name to monitor for state indication.
+     * If `value` field is not undefined, then that value is used instead.
      */
     topic?: string;
 
+    /**
+     * State to be displayed. 
+     * 
+     */
+    value?: boolean | number | string;
+
     /**
      * Color for the button when the state is TRUE.
      */
@@ -47,15 +74,47 @@ export interface IndicatorButtonProps extends ButtonProps {
      */
     offColor?: IndicatorColor;
 
+    // /**
+    //  * Text displayed when the state is TRUE. Falls back to `label` if undefined.
+    //  */
+    // onLabel?: string;
+
+    // /**
+    //  * Text displayed when the state is FALSE. Falls back to `label` if undefined.
+    //  */
+    // offLabel?: string;
+
+
     /**
-     * Text displayed when the state is TRUE. Falls back to `label` if undefined.
+     * 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 only value is given (Index 0), then that value is used for all states.
+     * For many controls, this is the same as setting the `label` field and leaving this
+     * field undefined. 
      */
-    onLabel?: string;
+    options? : IndicatorButtonOptionsType;
+
 
     /**
-     * Text displayed when the state is FALSE. Falls back to `label` if undefined.
+     * Icon to be displayed on the button. Overrideen by onIcon or offIcon if those
+     * are not undefined.
      */
-    offLabel?: string;
+    icon? : string;
+
+    /**
+     * Icon displayed when the state is TRUE. Falls back to `icon` if undefined.
+     */
+    onIcon? : string;
+
+    /**
+     * Icon displayed when the state is FALSE. Falls back to `icon` if undefined.
+     */    
+    offIcon? : string;
+
 
     /**
      * Name of the command to invoke on button events.
@@ -97,32 +156,6 @@ export interface IndicatorButtonProps extends ButtonProps {
     invert?: boolean;
 }
 
-/**
- * State for the IndicatorButton.
- */
-export interface IndicatorButtonState {
-    /**
-     * Current value/state of the button based on the subscribed topic.
-     */
-    currentValue?: boolean;
-
-    /**
-     * Indicates whether the button is disabled.
-     */
-    isDisabled?: boolean;
-
-    /**
-     * Indicates whether the button is invisible.
-     */
-    isInvisible?: boolean;
-
-    /**
-     * The button is in the "down" state.
-     */
-    isPressed : boolean;
-}
-
-
 
 
 export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorButtonState> {
@@ -266,22 +299,42 @@ export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorBu
 
     render() {
         const { currentValue, isDisabled, isInvisible } = this.state;
-        const { className, severity, label, raised,
-            onColor, offColor, onLabel, offLabel, topic, command,
+        const { className, severity, label, raised, value,
+            onColor, offColor, options, topic, command,
             commandArgs, disableTopic, invisibleTopic, inputMode, invert,
+            onIcon, offIcon, icon, 
             ...restProps
         } = this.props;
 
 
+        //
+        // Load the value from the proper source.
+        // If the `value` property is undefined, that takes precedence.
+        // 
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }        
+
         // Determine the label and color based on the current state
-        let btnLabel = currentValue ? onLabel : offLabel;
-        if (btnLabel === undefined || btnLabel === null || btnLabel.length === 0)
+        let btnLabel = undefined;
+        if (options !== undefined && options !== null) {
+            btnLabel = displayValue ? options[1] : options[0];
+            if (btnLabel === undefined || btnLabel === null || btnLabel.length === 0)
+                btnLabel = label;    
+        }
+        else {
             btnLabel = label;
+        }
+
+        let btnIcon = displayValue ? onIcon : offIcon;
+        if (btnIcon === undefined || btnIcon === null || btnIcon.length === 0)
+            btnIcon = icon;
 
-        let color = currentValue ? onColor : offColor;
+        let color = displayValue ? onColor : offColor;
 
         // Handle special cases like undefined state or specific input modes
-        if (currentValue === undefined) {
+        if (displayValue === undefined) {
             color = IndicatorColor.IndicatorInvalid;
         }
 
@@ -289,6 +342,7 @@ export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorBu
         return (
             <Button {...restProps}
                 label={btnLabel}
+                icon={`pi ${btnIcon}`}
                 className={className}
                 style={{ color: "white", backgroundColor: color, display: isInvisible ? 'none' : 'block' }}
                 disabled={isDisabled}
@@ -296,7 +350,7 @@ export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorBu
                 onTouchStart={() => this.handleOnPressed() }
                 onMouseUp={() => this.handleOnReleased() }
                 onTouchEnd={() => this.handleOnReleased() }
-            
+                value={disableTopic}
                 raised
             />
         );

package/src/components/JogPanel.css

@@ -0,0 +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;
+}
+