@adcops/autocore-react 3.0.0

package/dist/components/DPad.css

@@ -0,0 +1,522 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 13:17:33
+ * -----
+ * Last Modified: 2024-03-08 07:16:53
+ * -----
+ * 
+ */
+
+
+.d-pad {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border-radius: 48%;
+    overflow: hidden;
+
+    &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        border-radius: 5%;
+        transform: translate(-50%, -50%);
+        width: 66.6%;
+        height: 66.6%;
+        background: transparent;
+    }
+
+    &:after {
+        content: '';
+        position: absolute;
+        display: none;
+        z-index: 2;
+        width: 20%;
+        height: 20%;
+        top: 50%;
+        left: 50%;
+        background: var(--vc-dpad-fg);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        /* transition: all .25s; */
+    }
+
+    &:hover:after {
+        width: 30%;
+        height: 30%;
+    }
+
+    a {
+        cursor: var(--vc-btn-cursor);
+        display: block;
+        position: absolute;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+        width: 33.3%;
+        height: 43%;
+        line-height: 40%;
+        color: #fff;
+        text-align: center;
+        background: var(--vc-btn-bgcolor);
+        box-shadow: 0 2px 4px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:before {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-radius: 5px;
+            border-style: solid;
+            /* transition: all .25s; */
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            width: 102%;
+            height: 78%;
+            background: var(--vc-dpad-bg);
+            border-radius: var(--vc-dpad-radius-in);
+        }
+    }
+
+    a.left,
+    a.right {
+        width: 43%;
+        height: 33%;
+
+        &:after {
+            width: 78%;
+            height: 102%;
+        }
+    }
+
+    a.up {
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+        border-radius: var(--vc-dpad-radius) var(--vc-dpad-radius) 50% 50%;
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:after {
+            left: 0;
+            top: 0;
+            transform: translate(-100%, 0);
+            border-top-left-radius: 50%;
+            pointer-events: none;
+        }
+
+        &:before {
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-width: 0 var(--vc-tri-sml-a) var(--vc-tri-sml-b) var(--vc-tri-sml-a);
+            border-color: transparent transparent var(--vc-arrowcolor) transparent;
+        }
+
+        &:active:before {
+            border-bottom-color: #333;
+        }
+    }
+
+    a.up:hover:before {
+        top: var(--vc-dpad-arrow-move);
+        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
+        outline-color: white;
+        outline-offset: 8px;
+        text-shadow: 1px 1px 2px var(--vc-color-black);
+
+        outline: 1px solid;
+        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+
+    a.down {
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+        border-radius: 50% 50% var(--vc-dpad-radius) var(--vc-dpad-radius);
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:after {
+            right: 0;
+            bottom: 0;
+            transform: translate(100%, 0);
+            border-bottom-right-radius: 50%;
+            pointer-events: none;
+        }
+
+        &:before {
+            bottom: 40%;
+            left: 50%;
+            transform: translate(-50%, 50%);
+            border-width: var(--vc-tri-sml-b) var(--vc-tri-sml-a) 0px var(--vc-tri-sml-a);
+            border-color: var(--vc-arrowcolor) transparent transparent transparent;
+        }
+
+        &:active:before {
+            border-top-color: #333;
+        }
+    }
+
+    a.down:hover:before {
+        bottom: var(--vc-dpad-arrow-move);
+        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
+        outline-color: white;
+        outline-offset: 8px;
+        text-shadow: 1px 1px 2px var(--vc-color-black);
+
+        outline: 1px solid;
+        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+
+    a.left {
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+        border-radius: var(--vc-dpad-radius) 50% 50% var(--vc-dpad-radius);
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:after {
+            left: 0;
+            bottom: 0;
+            transform: translate(0, 100%);
+            border-bottom-left-radius: 50%;
+            pointer-events: none;
+        }
+
+        &:before {
+            left: 40%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            border-width: var(--vc-tri-sml-a) var(--vc-tri-sml-b) var(--vc-tri-sml-a) 0;
+            border-color: transparent var(--vc-arrowcolor) transparent transparent;
+        }
+
+        &:active:before {
+            border-right-color: #333;
+        }
+    }
+
+    a.left:hover:before {
+        left: var(--vc-dpad-arrow-move);
+        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
+        outline-color: white;
+        outline-offset: 8px;
+        text-shadow: 1px 1px 2px var(--vc-color-black);
+
+        outline: 1px solid;
+        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+
+    a.right {
+        top: 50%;
+        right: 0;
+        transform: translate(0, -50%);
+        border-radius: 50% var(--vc-dpad-radius) var(--vc-dpad-radius) 50%;
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:after {
+            right: 0;
+            top: 0;
+            transform: translate(0, -100%);
+            border-top-right-radius: 50%;
+            pointer-events: none;
+        }
+
+        &:before {
+            right: 40%;
+            top: 50%;
+            transform: translate(50%, -50%);
+            border-width: var(--vc-tri-sml-a) 0 var(--vc-tri-sml-a) var(--vc-tri-sml-b);
+            border-color: transparent transparent transparent var(--vc-arrowcolor);
+        }
+
+        &:active:before {
+            border-left-color: #333;
+        }
+    }
+
+    a.right:hover:before {
+        right: var(--vc-dpad-arrow-move);
+        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
+        outline-color: white;
+        outline-offset: 8px;
+        text-shadow: 1px 1px 2px var(--vc-color-black);
+
+        outline: 1px solid;
+        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+}
+
+.d-pad.up a.up:before {
+    border-bottom-color: #333;
+}
+
+.d-pad.down a.down:before {
+    border-top-color: #333;
+}
+
+.d-pad.left a.left:before {
+    border-right-color: #333;
+}
+
+.d-pad.right a.right:before {
+    border-left-color: #333;
+}
+
+
+.o-pad {
+    position: relative;
+    background: var(--vc-dpad-fg);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    overflow: hidden;
+
+
+    box-shadow: 2px 2px 4px black;
+
+    &:after {
+        content: '';
+        position: absolute;
+        z-index: 2;
+        width: 20%;
+        height: 20%;
+        top: 50%;
+        left: 50%;
+        background: #ddd;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        display: none;
+        /* transition: all .25s; */
+    }
+
+    &:hover:after {
+        width: 30%;
+        height: 30%;
+    }
+
+    a {
+        cursor: var(--vc-btn-cursor);
+        display: block;
+        position: absolute;
+        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+        width: 50%;
+        height: 50%;
+        text-align: center;
+        transform: rotate(45deg);
+        border: 1px solid rgba(0, 0, 0, .2);
+
+        &:before {
+            content: '';
+            position: absolute;
+            width: 60%;
+            height: 60%;
+            top: 50%;
+            left: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            /* transition: all .25s; */
+            display: none;
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-radius: 5px;
+            border-style: solid;
+            transform: translate(-50%, -50%) rotate(-45deg);
+            /* transition: all .25s; */
+        }
+    }
+
+    a.up {
+        bottom: 50%;
+        left: 50%;
+        transform: translate(-50%, -20%) rotate(45deg);
+        border-top-left-radius: 50%;
+        z-index: 1;
+
+        background: var(--vc-btn-bgcolor);
+        box-shadow: 0 1px 4px white, inset 0 -1px 4px black;
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:before {
+            left: 57%;
+            top: 57%;
+        }
+
+        &:after {
+            left: 53%;
+            top: 53%;
+            border-width: 0 var(--vc-tri-lrg-a) var(--vc-tri-lrg-b) var(--vc-tri-lrg-a);
+            border-color: transparent transparent var(--vc-arrowcolor) transparent;
+        }
+
+        &:active:after {
+            border-bottom-color: #333;
+        }
+    }
+
+
+    a.down {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 20%) rotate(45deg);
+        border-bottom-right-radius: 50%;
+        z-index: 1;
+
+        background: var(--vc-btn-bgcolor);
+        box-shadow: 0 2px 4px black, inset 0 2px 4px rgba(255, 255, 255, 0.5);
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:before {
+            left: 43%;
+            top: 43%;
+        }
+
+        &:after {
+            left: 47%;
+            top: 47%;
+            border-width: var(--vc-tri-lrg-b) var(--vc-tri-lrg-a) 0px var(--vc-tri-lrg-a);
+            border-color: var(--vc-arrowcolor) transparent transparent transparent;
+        }
+
+        &:active:after {
+            border-top-color: #333;
+        }
+    }
+
+    a.left {
+        top: 50%;
+        right: 50%;
+        transform: translate(-20%, -50%) rotate(45deg);
+        border-bottom-left-radius: 50%;
+        border: none;
+
+        background: var(--vc-btn-bgcolor);
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:before {
+            left: 57%;
+            top: 43%;
+        }
+
+        &:after {
+            left: 53%;
+            top: 47%;
+            border-width: var(--vc-tri-lrg-a) var(--vc-tri-lrg-b) var(--vc-tri-lrg-a) 0;
+            border-color: transparent var(--vc-arrowcolor) transparent transparent;
+        }
+
+        &:active:after {
+            border-right-color: #333;
+        }
+    }
+
+    a.right {
+        top: 50%;
+        left: 50%;
+        transform: translate(20%, -50%) rotate(45deg);
+        border-top-right-radius: 50%;
+        border: none;
+
+        background: var(--vc-btn-bgcolor);
+        box-shadow: 0 1px 4px white, inset 0 -1px 4px black;
+
+        &:hover {}
+
+        &:active {
+            background: linear-gradient(45deg, var(--vc-dpad-fg-hover) 15%, var(--vc-dpad-fg-hover) 100%);
+        }
+
+        &:before {
+            left: 43%;
+            top: 57%;
+        }
+
+        &:after {
+            left: 47%;
+            top: 53%;
+            border-width: var(--vc-tri-lrg-a) 0 var(--vc-tri-lrg-a) var(--vc-tri-lrg-b);
+            border-color: transparent transparent transparent var(--vc-arrowcolor);
+        }
+
+        &:active:after {
+            border-left-color: #333;
+        }
+    }
+
+    a:hover:after {
+        left: 50%;
+        top: 50%;
+        box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .2);
+        outline-color: white;
+        outline-offset: 8px;
+        text-shadow: 1px 1px 2px var(--vc-color-black);
+
+        outline: 1px solid;
+        transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
+    }
+}
+
+
+.d-pad.up a.up:before {
+    border-bottom-color: #333;
+}
+
+.d-pad.down a.down:before {
+    border-top-color: #333;
+}
+
+.d-pad.left a.left:before {
+    border-right-color: #333;
+}
+
+.d-pad.right a.right:before {
+    border-left-color: #333;
+}

package/dist/components/DPad.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './VcDPad.css';
+/**
+ * Enumerates the source button or action when an event occurs.
+ */
+export declare enum VcJoyPadAction {
+    /** Invalid - Ignore this button */
+    Invalid = 0,
+    Up = 1,
+    Right = 2,
+    Down = 3,
+    Left = 4,
+    /** Stop, clear or reset */
+    Stop = 16
+}
+/**
+ * Enumerates the id's of buttons used in the joypad for standardization.
+ */
+export declare enum VcJoyPadButtonId {
+    Stop = "stop",
+    Up = "up",
+    Right = "right",
+    Down = "down",
+    Left = "left"
+}
+interface VcDPadProps {
+    onAction?: (action: VcJoyPadAction) => void;
+    onUp?: () => void;
+    onDown?: () => void;
+    onRight?: () => void;
+    onLeft?: () => void;
+}
+export declare const VcDPad: React.FC<VcDPadProps>;
+export default VcDPad;

package/dist/components/DPad.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import"./VcDPad.css";export var VcJoyPadAction;!function(o){o[o.Invalid=0]="Invalid",o[o.Up=1]="Up",o[o.Right=2]="Right",o[o.Down=3]="Down",o[o.Left=4]="Left",o[o.Stop=16]="Stop"}(VcJoyPadAction||(VcJoyPadAction={}));export var VcJoyPadButtonId;!function(o){o.Stop="stop",o.Up="up",o.Right="right",o.Down="down",o.Left="left"}(VcJoyPadButtonId||(VcJoyPadButtonId={}));export const VcDPad=({onAction:o,onUp:t,onDown:n,onRight:c,onLeft:a})=>{const i=i=>{o&&o(i),i===VcJoyPadAction.Up?null!=t&&t():i===VcJoyPadAction.Down?null!=n&&n():i===VcJoyPadAction.Right?null!=c&&c():i===VcJoyPadAction.Left&&null!=a&&a()};return _jsx("div",{className:"set",children:_jsxs("nav",{className:"d-pad",children:[_jsx("a",{className:"up",onClick:()=>i(VcJoyPadAction.Up)}),_jsx("a",{className:"right",onClick:()=>i(VcJoyPadAction.Right)}),_jsx("a",{className:"down",onClick:()=>i(VcJoyPadAction.Down)}),_jsx("a",{className:"left",onClick:()=>i(VcJoyPadAction.Left)})]})})};export default VcDPad;

package/dist/components/Indicator.d.ts

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "./IndicatorColor";
+export { IndicatorColor };
+interface IndicatorProps {
+    /**
+     * 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 IndicatorState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+export declare class Indicator extends Component<IndicatorProps, IndicatorState> {
+    static contextType: React.Context<EventEmitterContextType>;
+    protected unsubscribeTopicId: number | null;
+    static defaultProps: {
+        width: number;
+        height: number;
+        onColor: string;
+        offColor: string;
+        invalidColor: string;
+        useAbsolutePositioning: boolean;
+    };
+    constructor(props: IndicatorProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IndicatorProps): void;
+    componentWillUnmount(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Indicator;

package/dist/components/Indicator.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"./IndicatorColor";export{IndicatorColor};export class Indicator 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&&null===this.unsubscribeTopicId){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){e.value!==this.props.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(null!==this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId),this.unsubscribeTopicId=null}}render(){const{x:e,y:t,width:o,height:i,className:s,onColor:r,offColor:n,invalidColor:l,useAbsolutePositioning:c}=this.props,{scale:a,xOffset:u,yOffset:d}=this.context,{subscribedValue:b}=this.state;let p=o||10;p<10&&(p=10);let h=i||10;h<10&&(h=10);let f,m=a||1;switch(0===m&&(m=1),b){case!0:f=r;break;case!1:f=n;break;default:f=l}const x={position:c?"absolute":"relative",display:c?"":"inline-block",verticalAlign:"middle",top:c&&t?`${d+m*t}px`:void 0,left:c&&e?`${u+m*e}px`:void 0,width:p?p*m+"px":void 0,height:h?h*m+"px":void 0,lineHeight:h?h*m+"px":void 0,backgroundColor:f,borderRadius:"20px"};return _jsx("div",{className:clsx(s),style:x})}}Object.defineProperty(Indicator,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(Indicator,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{width:22,height:22,onColor:"green",offColor:"gray",invalidColor:"yellow",useAbsolutePositioning:!1}});export default Indicator;