@imperosoft/cris-webui-components 1.1.2-beta.0 → 1.1.2-beta.10

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/CrisButton.tsx
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { useDigital, useJoinsStore } from "@imperosoft/cris-webui-ch5-core";
 
 // src/utils/icons.ts
@@ -73,9 +73,12 @@ function CrisButton({
   iconNameActive,
   iconClassActive,
   iconStyleActive,
+  selected,
   showControlFeedback = true,
   showLocalFeedback = true,
   suppressKeyClicks = false,
+  visible,
+  enabled,
   smartId,
   className = "",
   classActive = "",
@@ -86,19 +89,24 @@ function CrisButton({
   onRelease,
   debug = false
 }) {
-  const log = debug ? (msg, data) => console.log(`[CrisButton:${join}] ${msg}`, data ?? "") : () => {
-  };
+  const debugRef = useRef(debug);
+  debugRef.current = debug;
+  const joinRef = useRef(join);
+  joinRef.current = join;
+  const log = useCallback((msg, data) => {
+    if (debugRef.current) console.log(`[CrisButton:${joinRef.current}] ${msg}`, data ?? "");
+  }, []);
   const [pressed, setPressed] = useState(false);
   const pressedRef = useRef(false);
   const touchingRef = useRef(false);
   const touchStartedHereRef = useRef(false);
   const feedbackJoin = joinFeedback ?? join;
   const feedback = useDigital(feedbackJoin ?? 0);
-  const enabled = useDigital(joinEnable ?? 0);
-  const visible = useDigital(joinVisible ?? 0);
+  const enabledJoin = useDigital(joinEnable ?? 0);
+  const visibleJoin = useDigital(joinVisible ?? 0);
   const dSet = useJoinsStore((state) => state.dSet);
-  const isEnabled = joinEnable == null ? true : enabled;
-  const isVisible = joinVisible == null ? true : visible;
+  const isEnabled = enabled ?? (joinEnable == null ? true : enabledJoin);
+  const isVisible = visible ?? (joinVisible == null ? true : visibleJoin);
   useEffect(() => {
     log("visibility effect", { isVisible, pressedRef: pressedRef.current });
     if (!isVisible && pressedRef.current) {
@@ -112,7 +120,7 @@ function CrisButton({
         dSet(join, false);
       }
     }
-  }, [isVisible, join, smartId, dSet, log]);
+  }, [isVisible, join, smartId, dSet]);
   useEffect(() => {
     return () => {
       if (pressedRef.current && join != null && smartId == null) {
@@ -121,7 +129,7 @@ function CrisButton({
       }
     };
   }, [join, smartId, dSet, log]);
-  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;
+  const hasControlFeedback = showControlFeedback && (feedbackJoin != null && feedback || selected === true);
   const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;
   const isActive = hasControlFeedback || hasPressedFeedback;
   let currentText = text ?? "";
@@ -368,7 +376,7 @@ function CrisText({
 }
 
 // src/components/CrisSlider.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
 import { useDigital as useDigital3, useAnalog, useJoinsStore as useJoinsStore2 } from "@imperosoft/cris-webui-ch5-core";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function CrisSlider({
@@ -426,7 +434,7 @@ function CrisSlider({
       }
     };
   }, [effectiveDigitalJoin, dSet]);
-  const analogToRatio = useCallback(
+  const analogToRatio = useCallback2(
     (value) => {
       const range = maxValue - minValue;
       if (range <= 0) return 0;
@@ -434,14 +442,14 @@ function CrisSlider({
     },
     [minValue, maxValue]
   );
-  const ratioToAnalog = useCallback(
+  const ratioToAnalog = useCallback2(
     (ratio) => {
       const range = maxValue - minValue;
       return Math.round(minValue + ratio * range);
     },
     [minValue, maxValue]
   );
-  const updateFromFeedback = useCallback(() => {
+  const updateFromFeedback = useCallback2(() => {
     if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {
       setRatioCurrent(analogToRatio(analogValue));
     }
@@ -449,7 +457,7 @@ function CrisSlider({
   useEffect2(() => {
     updateFromFeedback();
   }, [updateFromFeedback]);
-  const handleDragStart = useCallback(() => {
+  const handleDragStart = useCallback2(() => {
     if (!isEnabled) return;
     setIsDragging(true);
     if (effectiveDigitalJoin != null) {
@@ -464,7 +472,7 @@ function CrisSlider({
       afterDragTimeoutRef.current = null;
     }
   }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);
-  const handleDragEnd = useCallback(() => {
+  const handleDragEnd = useCallback2(() => {
     if (!isDragging) return;
     setIsDragging(false);
     if (effectiveDigitalJoin != null) {
@@ -481,7 +489,7 @@ function CrisSlider({
       updateFromFeedback();
     }
   }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);
-  const handleMove = useCallback(
+  const handleMove = useCallback2(
     (clientX, clientY, bounds) => {
       if (!isDragging) return;
       let newRatio;
@@ -801,7 +809,7 @@ function CrisSpinner({
 }
 
 // src/components/CrisOfflinePage.tsx
-import { useEffect as useEffect3, useState as useState3, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect3, useState as useState3, useCallback as useCallback3 } from "react";
 import { isNativeMode, useConnectionStore } from "@imperosoft/cris-webui-ch5-core";
 import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var isFileProtocol = typeof window !== "undefined" && window.location.protocol === "file:";
@@ -854,11 +862,11 @@ function CrisOfflinePage({
   const isTimeoutError = lastErrorReason === "timeout";
   const loginUrl = `https://${processorHost}${loginPath}`;
   const certUrl = `https://${processorHost}:${wsPort}/`;
-  const openCertPage = useCallback2(() => {
+  const openCertPage = useCallback3(() => {
     window.open(certUrl, "_blank");
     setCertPageOpened(true);
   }, [certUrl]);
-  const retryConnection = useCallback2(() => {
+  const retryConnection = useCallback3(() => {
     window.location.reload();
   }, []);
   useEffect3(() => {
@@ -1098,8 +1106,465 @@ function CrisOfflinePage({
     ] })
   ] }) });
 }
+
+// src/components/CrisCoDebug.tsx
+import { useCustomObject, useCustomObjectSend } from "@imperosoft/cris-webui-ch5-core";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto",
+    gap: 2
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    padding: "8px 12px",
+    opacity: 0.7
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    padding: "8px 12px",
+    gap: 8,
+    minHeight: 48
+  },
+  info: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  moduleName: {
+    fontSize: 14,
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  moduleType: {
+    fontSize: 11,
+    opacity: 0.5
+  },
+  icons: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center",
+    minWidth: 56,
+    justifyContent: "center"
+  },
+  buttons: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  iconBox: {
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  }
+};
+function ConnectionIcon({ on, type }) {
+  const label = type === "eth" ? "ETH" : "RS";
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        ...defaultStyles.iconBox,
+        opacity: on ? 1 : 0.4
+      },
+      title: `${type === "eth" ? "Ethernet" : "RS232"}: ${on ? "Connected" : "Disconnected"}`,
+      children: /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
+        /* @__PURE__ */ jsx7("rect", { x: "1", y: "4", width: "18", height: "12", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx7("text", { x: "10", y: "12.5", textAnchor: "middle", fontSize: "7", fontWeight: "bold", fill: "currentColor", children: label }),
+        on ? /* @__PURE__ */ jsx7("circle", { cx: "16", cy: "5", r: "3.5", fill: "#4caf50", stroke: "none" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx7("circle", { cx: "16", cy: "5", r: "3.5", fill: "#f44336", stroke: "none" }),
+          /* @__PURE__ */ jsx7("line", { x1: "14", y1: "3", x2: "18", y2: "7", stroke: "white", strokeWidth: "1.5" })
+        ] })
+      ] })
+    }
+  );
+}
+function DebugModuleItem({
+  module,
+  onAction,
+  itemClassName,
+  itemStyle,
+  buttonClassName,
+  buttonActiveClassName,
+  iconEthOn,
+  iconEthOff,
+  iconRs232On,
+  iconRs232Off
+}) {
+  const name = module.lb ? `${module.id} (${module.lb})` : module.id;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: itemClassName,
+      style: itemClassName ? itemStyle : { ...defaultStyles.item, ...itemStyle },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: defaultStyles.info, children: [
+          /* @__PURE__ */ jsx7("div", { style: defaultStyles.moduleName, children: name }),
+          /* @__PURE__ */ jsx7("div", { style: defaultStyles.moduleType, children: module.tp })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: defaultStyles.icons, children: [
+          module.et.vs && (iconEthOn && iconEthOff ? module.et.on ? iconEthOn : iconEthOff : /* @__PURE__ */ jsx7(ConnectionIcon, { on: module.et.on, type: "eth" })),
+          module.rs.vs && (iconRs232On && iconRs232Off ? module.rs.on ? iconRs232On : iconRs232Off : /* @__PURE__ */ jsx7(ConnectionIcon, { on: module.rs.on, type: "rs232" }))
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: defaultStyles.buttons, children: [
+          module.md.vs && /* @__PURE__ */ jsx7(
+            CrisButton,
+            {
+              selected: module.md.on,
+              text: "Mod",
+              className: buttonClassName,
+              classActive: buttonActiveClassName,
+              onPress: () => onAction("toggleMod", module.id)
+            }
+          ),
+          module.cm.vs && /* @__PURE__ */ jsx7(
+            CrisButton,
+            {
+              selected: module.cm.on,
+              text: "Com",
+              className: buttonClassName,
+              classActive: buttonActiveClassName,
+              onPress: () => onAction("toggleCom", module.id)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CrisCoDebug({
+  oid = "__DBG__",
+  title,
+  className,
+  style,
+  itemClassName,
+  itemStyle,
+  buttonClassName,
+  buttonActiveClassName,
+  iconEthOn,
+  iconEthOff,
+  iconRs232On,
+  iconRs232Off
+}) {
+  const modules = useCustomObject(oid);
+  const send = useCustomObjectSend();
+  const handleAction = (action, id) => {
+    send(oid, { action, id });
+  };
+  if (!modules || modules.length === 0) {
+    return null;
+  }
+  const visibleModules = modules.filter((m) => m.vs);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaultStyles.container, ...style },
+      children: [
+        title && /* @__PURE__ */ jsx7("div", { style: defaultStyles.title, children: title }),
+        visibleModules.map((module) => /* @__PURE__ */ jsx7(
+          DebugModuleItem,
+          {
+            module,
+            onAction: handleAction,
+            itemClassName,
+            itemStyle,
+            buttonClassName,
+            buttonActiveClassName,
+            iconEthOn,
+            iconEthOff,
+            iconRs232On,
+            iconRs232Off
+          },
+          module.id
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/CrisCoMatrixListsTie.tsx
+import { useCustomObject as useCustomObject2, useCustomObjectSend as useCustomObjectSend2 } from "@imperosoft/cris-webui-ch5-core";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var defaults = {
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8,
+    height: "100%"
+  },
+  list: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    minHeight: 0
+  },
+  header: {
+    fontSize: 13,
+    fontWeight: 600,
+    padding: "6px 10px",
+    textTransform: "uppercase",
+    opacity: 0.6,
+    flexShrink: 0
+  },
+  scroll: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto",
+    WebkitOverflowScrolling: "touch",
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    minHeight: 40,
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  itemLabel: {
+    flex: 1,
+    fontSize: 13,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  indicators: {
+    display: "flex",
+    gap: 4,
+    alignItems: "center"
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    flexShrink: 0
+  }
+};
+function DefaultIoIndicator({ on }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#4caf50" : "#f44336"
+      },
+      title: on ? "Online" : "Offline"
+    }
+  );
+}
+function DefaultSignalIndicator({ on }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        ...defaults.indicator,
+        backgroundColor: on ? "#2196f3" : "#666"
+      },
+      title: on ? "Signal detected" : "No signal"
+    }
+  );
+}
+function MatrixItemRow({
+  item,
+  type,
+  active,
+  showChannels,
+  onSelect,
+  onToggleVideoMute,
+  itemClassName,
+  itemStyle: itemStyleProp,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const isActive = active;
+  const isEnabled = item.sl.en;
+  const classes = [
+    "cris-co-matrix-item",
+    itemClassName,
+    isActive && (itemActiveClassName || "active"),
+    !isEnabled && (itemDisabledClassName || "disabled")
+  ].filter(Boolean).join(" ");
+  const computedStyle = itemClassName ? { ...itemStyleProp } : {
+    ...defaults.item,
+    ...itemStyleProp,
+    ...isActive ? itemActiveStyle : void 0,
+    opacity: isEnabled ? 1 : 0.4
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: classes, style: computedStyle, children: [
+    /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected: isActive,
+        enabled: isEnabled,
+        onPress: onSelect,
+        className: `cris-co-matrix-item-btn ${itemActiveClassName ?? ""}`,
+        classActive: itemActiveClassName,
+        children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 6, width: "100%" }, children: [
+          showChannels && /* @__PURE__ */ jsx8("span", { className: "cris-co-matrix-ch", style: { flexShrink: 0, opacity: 0.6 }, children: item.id }),
+          /* @__PURE__ */ jsx8("span", { style: defaults.itemLabel, children: item.lb || `${type === "input" ? "Input" : "Output"} ${item.id}` }),
+          /* @__PURE__ */ jsxs7("div", { style: defaults.indicators, children: [
+            item.io.vs && (renderIoIndicator ? renderIoIndicator(item.io.on) : /* @__PURE__ */ jsx8(DefaultIoIndicator, { on: item.io.on })),
+            item.sg.vs && (renderSignalIndicator ? renderSignalIndicator(item.sg.on) : /* @__PURE__ */ jsx8(DefaultSignalIndicator, { on: item.sg.on }))
+          ] })
+        ] })
+      }
+    ),
+    item.vm.vs && /* @__PURE__ */ jsx8(
+      CrisButton,
+      {
+        selected: item.vm.on,
+        enabled: item.vm.en,
+        text: "VM",
+        onPress: onToggleVideoMute,
+        className: vmButtonClassName,
+        classActive: vmButtonActiveClassName
+      }
+    )
+  ] });
+}
+function CrisCoMatrixListsTie({
+  oid,
+  inputTitle = "Inputs",
+  outputTitle = "Outputs",
+  showChannels = true,
+  className,
+  style,
+  listClassName,
+  listStyle,
+  headerClassName,
+  headerStyle,
+  itemClassName,
+  itemStyle,
+  itemActiveClassName,
+  itemActiveStyle,
+  itemDisabledClassName,
+  vmButtonClassName,
+  vmButtonActiveClassName,
+  renderIoIndicator,
+  renderSignalIndicator
+}) {
+  const matrix = useCustomObject2(oid);
+  const send = useCustomObjectSend2();
+  if (!matrix) return null;
+  const { si, ip: inputs, op: outputs } = matrix;
+  const handleSelectInput = (id) => {
+    send(oid, { action: "selectInput", id });
+  };
+  const handleTie = (id) => {
+    send(oid, { action: "tie", id });
+  };
+  const handleToggleVideoMute = (type, id) => {
+    send(oid, { action: "toggleVideoMute", type, id });
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className,
+      style: className ? style : { ...defaults.container, ...style },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  children: inputTitle
+                }
+              ),
+              /* @__PURE__ */ jsx8("div", { style: defaults.scroll, children: inputs?.map((item) => /* @__PURE__ */ jsx8(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "input",
+                  active: si === item.id,
+                  showChannels,
+                  onSelect: () => handleSelectInput(item.id),
+                  onToggleVideoMute: () => handleToggleVideoMute("input", item.id),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.id
+              )) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: listClassName,
+            style: listClassName ? listStyle : { ...defaults.list, ...listStyle },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: headerClassName,
+                  style: headerClassName ? headerStyle : { ...defaults.header, ...headerStyle },
+                  children: outputTitle
+                }
+              ),
+              /* @__PURE__ */ jsx8("div", { style: defaults.scroll, children: outputs?.map((item) => /* @__PURE__ */ jsx8(
+                MatrixItemRow,
+                {
+                  item,
+                  type: "output",
+                  active: item.ti === si,
+                  showChannels,
+                  onSelect: () => handleTie(item.id),
+                  onToggleVideoMute: () => handleToggleVideoMute("output", item.id),
+                  itemClassName,
+                  itemStyle,
+                  itemActiveClassName,
+                  itemActiveStyle,
+                  itemDisabledClassName,
+                  vmButtonClassName,
+                  vmButtonActiveClassName,
+                  renderIoIndicator,
+                  renderSignalIndicator
+                },
+                item.id
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   CrisButton,
+  CrisCoDebug,
+  CrisCoMatrixListsTie,
   CrisGauge,
   CrisOfflinePage,
   CrisSlider,