@vention/machine-logic-ui-sdk 0.14.0 → 0.16.1

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react-simple-keyboard/build/css/index.css';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, createContext, useMemo, useContext } from 'react';
 import Keyboard from 'react-simple-keyboard';
 import mqtt from 'mqtt';
 
@@ -1815,6 +1815,20 @@ const VirtualKeyboard = () => {
   const [keyboardLayoutName, setKeyboardLayoutName] = useState(KeyboardLayoutName.DEFAULT);
   const [focusedTextInput, setFocusedTextInput] = useState();
   const virtualKeyboardRef = useRef(null);
+  const keyboardContainerRef = useRef(null);
+  useEffect(function handleClickOutsideListeners() {
+    function handleClickOutside(event) {
+      if (keyboardContainerRef.current && !keyboardContainerRef.current.contains(event.target)) {
+        setIsKeyboardVisible(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, []);
   useEffect(function showOrHideKeyboard() {
     // The keyboard will appear/disappear on mouse down
     // However, if the user is clicking something, like a submit button or the input itself, the mouse up will happen a few milliseconds after the keyboard is shown/hidden
@@ -1830,14 +1844,6 @@ const VirtualKeyboard = () => {
         clearTimeout(showTimeout);
       };
     }
-    const hideTimeout = setTimeout(() => {
-      var _a;
-      (_a = virtualKeyboardRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-      setIsKeyboardVisible(false);
-    }, effectDelayMs);
-    return () => {
-      clearTimeout(hideTimeout);
-    };
   }, [focusedTextInput]);
   useEffect(function scrollInputIntoViewAfterKeyboardAppears() {
     if (isKeyboardVisible && focusedTextInput !== undefined) {
@@ -1886,11 +1892,13 @@ const VirtualKeyboard = () => {
       capture: true
     });
     return () => {
-      focusedTextInput.removeEventListener("blur", unsetFocusedTextInput, {
-        capture: true
-      });
+      if (!isKeyboardVisible) {
+        focusedTextInput.removeEventListener("blur", unsetFocusedTextInput, {
+          capture: true
+        });
+      }
     };
-  }, [focusedTextInput, initialInputValue]);
+  }, [focusedTextInput, initialInputValue, isKeyboardVisible]);
   // Stay in sync with external changes originating from code or physical keyboard
   useEffect(function syncExternalChangesFromCodeOrKeyboard() {
     if (focusedTextInput === undefined) {
@@ -1909,6 +1917,9 @@ const VirtualKeyboard = () => {
     focusedTextInput.addEventListener("click", updateKeyboardInput, {
       capture: true
     });
+    focusedTextInput.addEventListener("touchstart", updateKeyboardInput, {
+      capture: true
+    });
     focusedTextInput.addEventListener("touchend", updateKeyboardInput, {
       capture: true
     });
@@ -1919,6 +1930,9 @@ const VirtualKeyboard = () => {
       focusedTextInput.removeEventListener("click", updateKeyboardInput, {
         capture: true
       });
+      focusedTextInput.removeEventListener("touchstart", updateKeyboardInput, {
+        capture: true
+      });
       focusedTextInput.removeEventListener("touchend", updateKeyboardInput, {
         capture: true
       });
@@ -1947,20 +1961,35 @@ const VirtualKeyboard = () => {
       case KeyboardKey.SHIFT:
         setToggleLayoutOnInput(!toggleLayoutOnInput);
         setKeyboardLayoutName(toggleLayout(keyboardLayoutName));
+        setIsKeyboardVisible(true);
         break;
       case KeyboardKey.CAPS_LOCK:
         setKeyboardLayoutName(toggleLayout(keyboardLayoutName));
+        setIsKeyboardVisible(true);
         break;
       case KeyboardKey.SUBMIT:
         focusedTextInput.blur();
+        setIsKeyboardVisible(false);
         break;
     }
   };
+  const handleKeyboardContainerEvents = event => {
+    event.stopPropagation();
+    if (event.cancelable && event.type === "mousedown") {
+      event.preventDefault();
+    }
+    if (focusedTextInput) {
+      focusedTextInput.focus();
+    }
+  };
   if (!isKeyboardVisible) {
     return null;
   }
   return jsx("div", {
     id: "virtual_keyboard",
+    ref: keyboardContainerRef,
+    onMouseDown: handleKeyboardContainerEvents,
+    onTouchStart: handleKeyboardContainerEvents,
     children: jsx(Keyboard, {
       keyboardRef: ref => {
         virtualKeyboardRef.current = ref;
@@ -1989,7 +2018,6 @@ const VirtualKeyboard = () => {
       layoutName: keyboardLayoutName,
       preventMouseDownDefault: true,
       stopMouseDownPropagation: true,
-      autoUseTouchEvents: true,
       display: KeyboardDisplay,
       newLineOnEnter: true
     })
@@ -2499,4 +2527,82 @@ const getMachineCodeProcessHttpUrl = processName => {
   return `${executionEngineHttpUrl}/v1/machineCode/services/${processName}`;
 };
 
-export { MqttClient, VirtualKeyboard, connectToMqttAndGetClient, getExecutionEngineHttpUrl, getMachineCodeProcessHttpUrl, getMqttWsUrl, isOnEdge, isTouchScreenDevice };
+const defaultContext = {
+  client: null,
+  connectionStatus: "disconnected"
+};
+const mqttContext = /*#__PURE__*/createContext(defaultContext);
+const MqttProvider = props => {
+  const [connectionStatus, setConnectionStatus] = useState("disconnected");
+  const [mqttClient, setMqttClient] = useState(null);
+  const contextValue = useMemo(() => ({
+    client: mqttClient,
+    connectionStatus
+  }), [mqttClient, connectionStatus]);
+  useEffect(function mqttConnection() {
+    function connectToMqtt() {
+      return __awaiter(this, void 0, void 0, function* () {
+        const client = mqtt.connect(yield getMqttWsUrl());
+        client.on("connect", () => {
+          setConnectionStatus("connected");
+          setMqttClient(client);
+        });
+        client.on("error", error => {
+          setConnectionStatus("error");
+          console.error("MQTT error:", error);
+        });
+        client.on("offline", () => {
+          setConnectionStatus("disconnected");
+        });
+        client.on("end", () => {
+          setConnectionStatus("disconnected");
+        });
+        return function cleanup() {
+          setMqttClient(null);
+          setConnectionStatus("disconnected");
+          client.end();
+        };
+      });
+    }
+    connectToMqtt();
+  }, []);
+  return jsx(mqttContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+
+var MqttSandingTopics;
+(function (MqttSandingTopics) {
+  MqttSandingTopics["SET_APP_STATE"] = "sandingMachineApp/setAppState";
+  MqttSandingTopics["CALIBRATE"] = "sandingMachineApp/calibrate";
+  MqttSandingTopics["STATE_APP"] = "sandingMachineApp/state/app";
+  MqttSandingTopics["STATE_ROBOT"] = "sandingMachineApp/state/robot";
+  MqttSandingTopics["STATE_STATION"] = "sandingMachineApp/state/station";
+  MqttSandingTopics["CHANGE_SANDING_PAPER"] = "sandingMachineApp/state/changeSandingPaper";
+  MqttSandingTopics["SANDING_PAPER_CHANGED"] = "sandingMachineApp/sandingPaperChanged";
+  MqttSandingTopics["GET_INITIAL_STATE"] = "sandingMachineApp/getInitialState";
+  MqttSandingTopics["NOTIFICATION_MESSAGES"] = "sandingMachineApp/notification/messages";
+})(MqttSandingTopics || (MqttSandingTopics = {}));
+
+const useMqttSubscription = props => {
+  const mqtt = useContext(mqttContext);
+  const [message, setMessage] = useState();
+  useEffect(function test() {
+    var _a, _b;
+    if (mqtt.connectionStatus !== "connected" || !mqtt.client) return;
+    (_a = mqtt.client) === null || _a === void 0 ? void 0 : _a.subscribe(props.topic);
+    // Using the on message is not optimal as for every subscription we will add a new listener
+    // For the sake of simplicity we will keep it like this
+    (_b = mqtt.client) === null || _b === void 0 ? void 0 : _b.on("message", (topic, message) => {
+      if (topic === props.topic) setMessage(JSON.parse(message.toString()));
+    });
+    return function cleanup() {
+      var _a;
+      (_a = mqtt.client) === null || _a === void 0 ? void 0 : _a.unsubscribe(props.topic);
+    };
+  }, [mqtt, props.topic]);
+  return message;
+};
+
+export { MqttClient, MqttProvider, MqttSandingTopics, VirtualKeyboard, connectToMqttAndGetClient, getExecutionEngineHttpUrl, getMachineCodeProcessHttpUrl, getMqttWsUrl, isOnEdge, isTouchScreenDevice, mqttContext, useMqttSubscription };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-logic-ui-sdk",
-  "version": "0.14.0",
+  "version": "0.16.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"
@@ -11,7 +11,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "react-simple-keyboard": "3.7.153",
+    "react-simple-keyboard": "3.8.15",
     "mqtt": "5.10.1"
   },
   "peerDependencies": {

package/src/index.d.ts

@@ -1,3 +1,6 @@
 export * from "./lib/components/virtual-keyboard/virtual-keyboard";
 export * from "./lib/utils/machine-logic-ui-sdk-utils";
 export * from "./lib/mqtt-browser/mqtt-client";
+export * from "./lib/mqtt/mqtt-context";
+export * from "./lib/mqtt/mqtt-types";
+export * from "./lib/mqtt/use-mqtt-subscription";

package/src/lib/components/virtual-keyboard/keyboard-layouts.d.ts

@@ -39,3 +39,4 @@ export declare const KeyboardLayoutsByInputType: {
     readonly url: KeyboardLayoutObject;
     readonly textarea: KeyboardLayoutObject;
 };
+export type InputType = keyof typeof KeyboardLayoutsByInputType;

package/src/lib/mqtt/mqtt-context.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { MqttClient } from "mqtt";
+interface MqttContext {
+    client: MqttClient | null;
+    connectionStatus: "connected" | "disconnected" | "error";
+}
+export declare const mqttContext: import("react").Context<MqttContext>;
+interface Props {
+    children: ReactNode;
+}
+export declare const MqttProvider: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/mqtt/mqtt-types.d.ts

@@ -0,0 +1,56 @@
+export declare enum MqttSandingTopics {
+    SET_APP_STATE = "sandingMachineApp/setAppState",
+    CALIBRATE = "sandingMachineApp/calibrate",
+    STATE_APP = "sandingMachineApp/state/app",
+    STATE_ROBOT = "sandingMachineApp/state/robot",
+    STATE_STATION = "sandingMachineApp/state/station",
+    CHANGE_SANDING_PAPER = "sandingMachineApp/state/changeSandingPaper",
+    SANDING_PAPER_CHANGED = "sandingMachineApp/sandingPaperChanged",
+    GET_INITIAL_STATE = "sandingMachineApp/getInitialState",
+    NOTIFICATION_MESSAGES = "sandingMachineApp/notification/messages"
+}
+export type SandingApplicationState = "stop" | "start" | "home" | "freedrive";
+export type SandingRobotState = "fault" | "ready";
+type MqttSetAppStatePayload = {
+    state: SandingApplicationState;
+};
+type MqttCalibratePayload = object;
+type MqttRobotStatePayload = {
+    state: SandingRobotState;
+};
+export type StationState = {
+    completedSteps: number;
+    totalSteps: number;
+    isActive: boolean;
+    isVacuumActivated: boolean;
+    isPanelInPlace: boolean;
+};
+export type MqttStationStatePayload = {
+    station1: StationState;
+    station2: StationState;
+    station3: StationState;
+    station4: StationState;
+};
+type MqttChangeSandingPaperPayload = object;
+type MqttSandingPaperChangedPayload = object;
+type MqttGetInitialStatePayload = object;
+export type MqttNotificationPayload = {
+    id: string;
+    message: string;
+    type: "info" | "warn" | "error";
+    timestamp: number;
+    isRead?: boolean;
+};
+type MqttPayloadMapping = {
+    [MqttSandingTopics.SET_APP_STATE]: MqttSetAppStatePayload;
+    [MqttSandingTopics.CALIBRATE]: MqttCalibratePayload;
+    [MqttSandingTopics.STATE_APP]: MqttSetAppStatePayload;
+    [MqttSandingTopics.STATE_ROBOT]: MqttRobotStatePayload;
+    [MqttSandingTopics.STATE_STATION]: MqttStationStatePayload;
+    [MqttSandingTopics.CHANGE_SANDING_PAPER]: MqttChangeSandingPaperPayload;
+    [MqttSandingTopics.SANDING_PAPER_CHANGED]: MqttSandingPaperChangedPayload;
+    [MqttSandingTopics.GET_INITIAL_STATE]: MqttGetInitialStatePayload;
+    [MqttSandingTopics.NOTIFICATION_MESSAGES]: MqttNotificationPayload;
+};
+export type MqttPayloadByTopic<T extends MqttSandingTopics> = MqttPayloadMapping[T];
+export {};

package/src/lib/mqtt/use-mqtt-subscription.d.ts

@@ -0,0 +1,6 @@
+import { MqttSandingTopics, MqttPayloadByTopic } from "./mqtt-types";
+interface Props<TMqttTopic> {
+    topic: TMqttTopic;
+}
+export declare const useMqttSubscription: <TMqttTopic extends MqttSandingTopics>(props: Props<TMqttTopic>) => MqttPayloadByTopic<TMqttTopic>;
+export {};