@adcops/autocore-react 3.0.1 → 3.0.3

package/src/components/JogPanel.tsx

@@ -0,0 +1,458 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 13:17:23
+  * -----
+ * Last Modified: 2024-03-19 21:20:59
+ * -----
+ * 
+ */
+
+import React from 'react';
+import { Button } from "primereact/button";
+import { SelectButton } from 'primereact/selectbutton';
+import { Tooltip } from 'primereact/tooltip';
+
+import './JogPanel.css';
+//import _default from '@monaco-editor/react';
+
+import { Distance, JogShort, JogMedium, JogLong } from '../assets';
+import { Speed, SpeedSlow, SpeedMedium, SpeedFast } from '../assets';
+import { RotationCcwA, RotationCcwB, RotationCcwC } from '../assets';
+import { RotationCwA, RotationCwB, RotationCwC  } from '../assets';
+
+/**
+ * Enumerates the source button or action when an event occurs.
+ */
+export enum JogPanelAction {
+    /** Invalid - Ignore this button */
+    Invalid = 0x00,
+    // Horizontal Right
+    xPositive = 0x01,  
+    // Vertical left
+    xNegative = 0x02,       
+    // Away, back
+    yPositive = 0x03,       
+    // Towards, forward
+    yNegative = 0x04,            
+    // Vertical UP
+    zPositive = 0x05,             
+    // Vertical down     
+    zNegative = 0x06,       
+    // Rotate positive around the X axis
+    aPositive = 0x07,
+    // Rotate negative around the X axis
+    aNegative = 0x08,
+    // Rotate positive around the Y axis
+    bPositive = 0x09,
+    // Rotate negative around the Y axis
+    bNegative = 0x10,
+    // Rotate positive around the Z axis
+    cPositive = 0x11,
+    // Rotate negative around the Z axis
+    cNegative = 0x12,
+
+    /** Stop, clear or reset */
+    Stop = 0xFF,
+}
+
+
+/**
+ * Enumerates the selected jog distance.
+ */
+export enum JogDistanceAction {
+    Short = 0x00,
+    Medium = 0x10,
+    Long = 0x20
+}
+
+/**
+ * Enumerates the selected jog distance.
+ */
+export enum JogSpeedAction {
+    Slow = 0x00,
+    Medium = 0x10,
+    Fast = 0x20
+}
+
+
+/**
+ * Jog button definition type for defining the button in the JogPanel.
+ */
+export interface JogPanelButtonDefinition {
+    icon: string;
+    alt: string;
+    action: JogPanelAction
+}
+
+/**
+ * Interface for the jog distance select button.
+ */
+interface JogDistanceItem {
+    name: string;
+    value: JogDistanceAction;
+}
+
+/**
+ * Interface for the jog speed select button.
+ */
+interface JogSpeedItem {
+    name: string;
+    value: JogSpeedAction;
+}
+
+/**
+ * Component properties of the directional pad.
+ */
+interface JogPanelProps {
+    onClicked?: (action: JogPanelAction) => void;
+    onJogDistanceChanged?: (action: JogDistanceAction) => void;
+    onJogSpeedChanged?: (action: JogSpeedAction) => void;
+    buttonDefinitions: (JogPanelButtonDefinition | undefined)[][] | undefined;
+    defaultJogDistance : JogDistanceAction;
+    defaultJogSpeed : JogSpeedAction;
+    showDistanceControl : boolean;
+    showSpeedControl : boolean;
+}
+
+
+interface JogPanelState {
+    jogDistance : JogDistanceAction,
+    jogSpeed : JogSpeedAction
+}
+
+
+/**
+ * Default X, Y, Z configuration.
+ */
+export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+];
+
+export const kRotationButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+    [{ icon: "pi", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "pi", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
+    [{ icon: "pi", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "pi", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
+    [undefined, { icon: "pi", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "pi ", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
+];
+
+/**
+ * Jogging panel that supports 3D motion. In 3D:
+ * - Z is Up and Down, 
+ * - Y is towards and away
+ * - X is left and right
+ * 
+ * This Jog Panel is based upon a standard CNC mill and industrial standards.
+ * 
+ * ## Parameters
+ * @param onClicked Callback any time a button is clicked. Includes argument for direction.
+ * @param buttonDefinitions A 3x3 matrix of (JogPanelButtonDefinition | undefined) that defines the button. If a button is undefined, it is disabled.
+ * 
+ * ## Button definitions
+ * 
+ * Example:
+ * ```
+ * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+ *    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+ *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+ *    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+ * ];
+ * ```
+ * 
+ */
+export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
+
+    static defaultProps : JogPanelProps = {
+        onClicked: undefined,
+        onJogDistanceChanged: undefined,
+        buttonDefinitions: kDefaultButtonDefinitions,
+        defaultJogDistance : JogDistanceAction.Short,
+        defaultJogSpeed : JogSpeedAction.Medium,
+        showDistanceControl : true,
+        showSpeedControl : true
+    };    
+
+
+    private jogDistanceItems: JogDistanceItem[] = [
+        {name: 'S', value: JogDistanceAction.Short},
+        {name: 'M', value: JogDistanceAction.Medium},
+        {name: 'L', value: JogDistanceAction.Long}
+    ];    
+
+    private jogSpeedItems: JogSpeedItem[] = [
+        {name: 'S', value: JogSpeedAction.Slow},
+        {name: 'M', value: JogSpeedAction.Medium},
+        {name: 'F', value: JogSpeedAction.Fast}
+    ];    
+
+
+    constructor(props: JogPanelProps) {
+        super(props);
+
+        this.state = {
+            jogDistance : props.defaultJogDistance,
+            jogSpeed : props.defaultJogSpeed
+        }
+    }
+
+
+    /**
+     * Handle a user action on the DirectionalPad
+     * @param action DirectionalPadAction
+     */
+    private handleClicked(action: JogPanelAction | undefined) {
+
+        if (action === undefined || action === null)
+            return;
+        
+        if (this.props.onClicked) {
+            this.props.onClicked(action);
+        }
+
+    };
+
+    /**
+     * The user has selected a different jog distance.
+     * @param {JogDistanceAction} action  The newly-selected distance.
+     */
+    private handleDistanceChanged(action : JogDistanceAction) {
+        this.setState({jogDistance: action});
+        if (this.props.onJogDistanceChanged) {
+            this.props.onJogDistanceChanged(action);
+        }
+    }
+
+    private handleSpeedChanged(action : JogSpeedAction) {
+        this.setState({jogSpeed: action});
+        if (this.props.onJogSpeedChanged) {
+            this.props.onJogSpeedChanged(action);
+        }
+    }    
+
+
+    emptyRow() {
+        return <div className="grid-row">
+            <div className="button-item empty-slot" />
+            <div className="button-item empty-slot" />
+            <div className="button-item empty-slot" />
+        </div>
+    }  
+    
+    private actionToIcon(action : JogPanelAction | undefined) {
+        if (action == JogPanelAction.Invalid) {
+            return <i/>
+        }
+        else if (action == JogPanelAction.Stop) {
+            return <i/>
+        }
+        else if (action == JogPanelAction.xNegative) {
+            return <i className="pi pi-arrow-left" />
+        }
+        else if (action == JogPanelAction.xPositive) {
+            return <i className="pi pi-arrow-right" />
+        }
+        else if (action == JogPanelAction.yNegative) {
+            return <i className="pi pi-arrow-up-left" />
+        }
+        else if (action == JogPanelAction.yPositive) {
+            return <i className="pi pi-arrow-down-right" />
+        }
+        else if (action == JogPanelAction.zNegative) {
+            return <i className="pi pi-up" />
+        }
+        else if (action == JogPanelAction.zPositive) {
+            return <i className="pi pi-down" />
+        }
+        else if (action == JogPanelAction.aNegative) {
+            return <RotationCcwA />
+        }
+        else if (action == JogPanelAction.aPositive) {
+            return <RotationCwA />
+        }
+        else if (action == JogPanelAction.bNegative) {
+            return <RotationCcwB />
+        }
+        else if (action == JogPanelAction.bPositive) {
+            return <RotationCwB />
+        }
+        else if (action == JogPanelAction.cNegative) {
+            return <RotationCcwC />
+        }
+        else if (action == JogPanelAction.cPositive) {
+            return <RotationCwC />
+        }
+        else {
+            return <i />
+        }
+
+    }
+
+    standardButton(row : number, col : number) {
+
+        if (this.props.buttonDefinitions !== undefined
+            && this.props.buttonDefinitions[row] !== undefined
+            && this.props.buttonDefinitions[row][col] !== undefined 
+            && this.props.buttonDefinitions[row][col]?.action !== undefined ) {
+
+            const action = this.props.buttonDefinitions[row][col]?.action;
+
+            if (action !== undefined && action < JogPanelAction.aPositive ) {
+                return <Button 
+                    key={`${row}-${col}`}
+                    icon={this.props.buttonDefinitions[row][col]?.icon} 
+                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
+                    onClick={() => this.handleClicked(action)}
+                    className="button-item" 
+                />        
+            }
+            else {
+                return <Button 
+                    key={`${row}-${col}`}                     
+                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
+                    onClick={() => this.handleClicked(action)}
+                    className="button-item" 
+                    icon={() => this.actionToIcon(action)}/>
+            }
+            
+        }
+        else {
+            return <Button icon="pi" key={`${row}-${col}`} disabled={true} className="button-item empty-slot" />
+        }
+
+
+    }
+
+    render() {
+
+
+        const distanceButtonTemplate = (option: JogDistanceItem) => {
+            if (option.value == JogDistanceAction.Short) {
+                return <JogShort className="distance-selector-button" width={16} height={16}     
+                    data-pr-tooltip="Short Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />
+            }
+            else if (option.value == JogDistanceAction.Medium) {
+                return <JogMedium className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Medium Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+            else {
+                return <JogLong className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Long Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+         
+        }
+
+
+        const speedButtonTemplate = (option: JogSpeedItem) => {
+            if (option.value == JogSpeedAction.Slow) {
+                return <SpeedSlow className="distance-selector-button" width={16} height={16}     
+                    data-pr-tooltip="Slow Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />
+            }
+            else if (option.value == JogSpeedAction.Medium) {
+                return <SpeedMedium className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Medium Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+            else {
+                return <SpeedFast className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Fast Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+         
+        }
+                
+        // const jogButtonTemplate = (option: JogDistanceItem) => {
+        //     if (option.value == JogDistanceAction.Short) {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0"/>
+        //             </svg>;
+        //     }
+        //     else if (option.value == JogDistanceAction.Medium) {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Z"/>
+        //             </svg>;
+        //     }
+        //     else {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Zm-240 0v-400h120v400H320Z"/>
+        //             </svg>;
+        //     }            
+        // }
+
+        return (
+            <div className="jogpanel-container">
+                <Tooltip target=".distance-selector-button" />
+
+                <div className="grid-container">
+                    <div key="0" className="grid-row">
+                        {this.standardButton(0,0)}
+                        {this.standardButton(0,1)}
+                        {this.standardButton(0,2)}
+                    </div>
+                    <div key="1" className="grid-row">
+                        {this.standardButton(1,0)}
+                        {this.standardButton(1,1)}
+                        {this.standardButton(1,2)}
+                    </div>
+                    <div key="2" className="grid-row">
+                        {this.standardButton(2,0)}
+                        {this.standardButton(2,1)}
+                        {this.standardButton(2,2)}
+                    </div>
+                </div>                
+
+                { this.props.showDistanceControl &&
+                    <div className="distance-selector p-inputgroup flex-1">                    
+                        <span className="p-inputgroup-addon">
+                            <Distance width={16} height={16} fill="white" />
+                        </span>
+                        <SelectButton 
+                            value={this.state.jogDistance} 
+                            onChange={(e) => this.handleDistanceChanged(e.value)} 
+                            optionLabel="name" 
+                            options={this.jogDistanceItems} 
+                            allowEmpty={false}
+                            itemTemplate={distanceButtonTemplate}
+                        />                
+                    </div>       
+                }
+                
+                {this.props.showSpeedControl && 
+                    <div className="distance-selector p-inputgroup flex-1">                    
+                        <span className="p-inputgroup-addon">
+                            <Speed width={16} height={16} fill="white" />
+                        </span>
+                        <SelectButton 
+                            value={this.state.jogSpeed} 
+                            onChange={(e) => this.handleSpeedChanged(e.value)} 
+                            optionLabel="name" 
+                            options={this.jogSpeedItems} 
+                            allowEmpty={false}
+                            itemTemplate={speedButtonTemplate}
+                        />                
+                    </div>    
+                }
+
+            </div>
+        );
+    }
+};
+
+export default JogPanel;
+
+

package/src/components/Lamp.tsx

@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:39:41
+ * -----
+ * Last Modified: 2024-03-12 21:12:29
+ * -----
+ * 
+ */
+
+
+
+// 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 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}
+
+
+
+
+interface LampProps {
+    /**
+     * State to be displayed<br/>
+     *
+     * Available states: **on**, **off** and **not available**:
+     *
+     * * `true` is treated as **on**
+     * * `false` is treated as **off**
+     * * `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
+     */
+    onColor?: string;
+    /**
+     * CSS color for **disabled** state
+     */
+    offColor?: string;
+    /**
+     * CSS color for **not available** state
+     */
+    invalidColor?: string;
+    /**
+     * 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;
+}
+
+
+interface LampState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+
+
+export class Lamp extends Component<LampProps, LampState> {
+    static contextType = EventEmitterContext;
+    protected unsubscribeTopicId: number | null = null;
+
+    // Define default properties
+    static defaultProps = {
+        width: 22,
+        height: 22,
+        onColor: "green",
+        offColor: "gray",
+        invalidColor: "black",
+        useAbsolutePositioning: false
+    };
+
+    constructor(props: LampProps) {
+        super(props);
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: "100%"
+        };
+    }
+
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic && this.unsubscribeTopicId === null) {
+            const { subscribe } = this.context as EventEmitterContextType;
+            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps: LampProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId !== null) {
+            const { unsubscribe } = this.context as EventEmitterContextType;
+            unsubscribe(this.unsubscribeTopicId);
+            this.unsubscribeTopicId = null;
+        }
+    }
+
+    render() {
+        const { x, y, width, height, className, onColor, offColor, invalidColor, useAbsolutePositioning } = this.props;
+        const { scale, xOffset, yOffset } = this.context as IPositionContext;
+        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;
+
+        let color;
+        switch (subscribedValue) {
+            case true:
+                color = onColor;
+                break;
+            case false:
+                color = offColor;
+                break;
+            default:
+                color = invalidColor;
+                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,
+            backgroundColor: color,
+            borderRadius: "20px"
+        };
+
+        return (
+            <div className={clsx(className)} style={style} />
+        );
+    }
+}
+
+export default Lamp;