@robdobsn/raftjs 1.10.7 → 1.11.6

package/examples/dashboard/src/SystemTypeCog/SystemTypeCog.ts

@@ -1,5 +1,5 @@
 import { RaftSubscribeForUpdatesCBType, RaftSystemType } from "../../../../src/RaftSystemType";
-import { RaftEventFn, RaftLog, RaftOKFail, RaftPublishEvent, RaftPublishEventNames, RaftSystemUtils } from "../../../../src/main";
+import { inspectPublishFrame, RaftEventFn, RaftLog, RaftPublishEvent, RaftPublishEventNames, RaftSubscriptionUpdateResponse, RaftSystemUtils } from "../../../../src/main";
 import { CogStateInfo } from "./CogStateInfo";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
 
@@ -53,10 +53,16 @@ export default class SystemTypeCog implements RaftSystemType {
           ']}';
 
         const msgHandler = systemUtils.getMsgHandler();
-        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftOKFail>(
+        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftSubscriptionUpdateResponse>(
           enable ? subscribeEnable : subscribeDisable
         );
 
+        // Cache topic index->name map from response, then refresh from pubtopics endpoint when enabling
+        systemUtils.updatePublishTopicMapFromSubscriptionResponse(ricResp);
+        if (enable) {
+          await systemUtils.refreshPublishTopicMap();
+        }
+
         // Debug
         RaftLog.debug(`subscribe enable/disable returned ${JSON.stringify(ricResp)}`);
       } catch (error: unknown) {
@@ -72,13 +78,41 @@ export default class SystemTypeCog implements RaftSystemType {
 
       // RICLog.debug(`rxOtherMsgType payload ${RaftUtils.bufferToHex(payload)}`);
       RaftLog.verbose(`rxOtherMsgType payloadLen ${payload.length}`);
-      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs, SUBSCRIBE_BINARY_MSGS);
+
+      const frameMeta = inspectPublishFrame(payload, (idx) => this._systemUtils?.getPublishTopicName(idx));
+      let handledByDeviceManager = false;
+
+      if (frameMeta.frameType === "binary") {
+        if (frameMeta.binaryHasEnvelope) {
+          if (frameMeta.topicName === "devbin") {
+            this._stateInfo.handleBinaryPayload(payload);
+            handledByDeviceManager = true;
+          }
+        } else if (SUBSCRIBE_BINARY_MSGS) {
+          this._stateInfo.handleBinaryPayload(payload);
+          handledByDeviceManager = true;
+        }
+      } else if (frameMeta.frameType === "json") {
+        if (frameMeta.topicName === "devjson" || frameMeta.topicName === undefined) {
+          if (frameMeta.jsonString !== undefined) {
+            this._stateInfo.handleJsonPayload(frameMeta.jsonString);
+            handledByDeviceManager = true;
+          }
+        }
+      }
+
+      const topicIDs = frameMeta.topicIndex !== undefined ? [frameMeta.topicIndex.toString()] : [];
 
       // Call event handler if registered
       if (this._onEvent) {
         this._onEvent("pub", RaftPublishEvent.PUBLISH_EVENT_DATA, RaftPublishEventNames[RaftPublishEvent.PUBLISH_EVENT_DATA],
           {
             topicIDs: topicIDs,
+            topicName: frameMeta.topicName,
+            topicIndex: frameMeta.topicIndex,
+            topicVersion: frameMeta.version,
+            frameType: frameMeta.frameType,
+            handledByDeviceManager,
             payload: payload,
             frameTimeMs: frameTimeMs,
             isBinary: SUBSCRIBE_BINARY_MSGS

package/examples/dashboard/src/SystemTypeGeneric/StateInfoGeneric.ts

@@ -7,6 +7,14 @@ export class StateInfoGeneric {
     public constructor(private _deviceManager: DeviceManager) {
     }
 
+    async handleBinaryPayload(rxMsg: Uint8Array): Promise<void> {
+        await this._deviceManager.handleClientMsgBinary(rxMsg);
+    }
+
+    async handleJsonPayload(jsonString: string): Promise<void> {
+        await this._deviceManager.handleClientMsgJson(jsonString);
+    }
+
     updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number, isBinary: boolean): Array<string> {
 
         // Debug 
@@ -15,14 +23,14 @@ export class StateInfoGeneric {
         // Handle binary or JSON
         if (isBinary) {
             // Handle using device manager
-            this._deviceManager.handleClientMsgBinary(rxMsg);            
+            this.handleBinaryPayload(rxMsg);
         } else {
             // Convert Uint8Array to string
             const decoder = new TextDecoder('utf-8');
             const jsonString = decoder.decode(rxMsg.slice(2));
 
             // Handle using device manager
-            this._deviceManager.handleClientMsgJson(jsonString);
+            this.handleJsonPayload(jsonString);
         }
         return [];
 

package/examples/dashboard/src/SystemTypeGeneric/SystemTypeGeneric.ts

@@ -1,9 +1,9 @@
 import { RaftSubscribeForUpdatesCBType, RaftSystemType } from "../../../../src/RaftSystemType";
-import { RaftEventFn, RaftLog, RaftOKFail, RaftPublishEvent, RaftPublishEventNames, RaftSystemUtils } from "../../../../src/main";
+import { inspectPublishFrame, RaftEventFn, RaftLog, RaftPublishEvent, RaftPublishEventNames, RaftSubscriptionUpdateResponse, RaftSystemUtils } from "../../../../src/main";
 import { StateInfoGeneric } from "./StateInfoGeneric";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
 
-const SUBSCRIBE_BINARY_MSGS = false;
+const SUBSCRIBE_BINARY_MSGS = true;
 
 export default class SystemTypeGeneric implements RaftSystemType {
     nameForDialogs = "Generic System";
@@ -53,10 +53,16 @@ export default class SystemTypeGeneric implements RaftSystemType {
           ']}';
 
         const msgHandler = systemUtils.getMsgHandler();
-        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftOKFail>(
+        const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftSubscriptionUpdateResponse>(
           enable ? subscribeEnable : subscribeDisable
         );
 
+        // Cache topic index->name map from response, then refresh from pubtopics endpoint when enabling
+        systemUtils.updatePublishTopicMapFromSubscriptionResponse(ricResp);
+        if (enable) {
+          await systemUtils.refreshPublishTopicMap();
+        }
+
         // Debug
         RaftLog.debug(`subscribe enable/disable returned ${JSON.stringify(ricResp)}`);
       } catch (error: unknown) {
@@ -72,13 +78,41 @@ export default class SystemTypeGeneric implements RaftSystemType {
 
       // RICLog.debug(`rxOtherMsgType payload ${RaftUtils.bufferToHex(payload)}`);
       RaftLog.verbose(`rxOtherMsgType payloadLen ${payload.length}`);
-      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs, SUBSCRIBE_BINARY_MSGS);
+
+      const frameMeta = inspectPublishFrame(payload, (idx) => this._systemUtils?.getPublishTopicName(idx));
+      let handledByDeviceManager = false;
+
+      if (frameMeta.frameType === "binary") {
+        if (frameMeta.binaryHasEnvelope) {
+          if (frameMeta.topicName === "devbin") {
+            this._stateInfo.handleBinaryPayload(payload);
+            handledByDeviceManager = true;
+          }
+        } else if (SUBSCRIBE_BINARY_MSGS) {
+          this._stateInfo.handleBinaryPayload(payload);
+          handledByDeviceManager = true;
+        }
+      } else if (frameMeta.frameType === "json") {
+        if (frameMeta.topicName === "devjson" || frameMeta.topicName === undefined) {
+          if (frameMeta.jsonString !== undefined) {
+            this._stateInfo.handleJsonPayload(frameMeta.jsonString);
+            handledByDeviceManager = true;
+          }
+        }
+      }
+
+      const topicIDs = frameMeta.topicIndex !== undefined ? [frameMeta.topicIndex.toString()] : [];
 
       // Call event handler if registered
       if (this._onEvent) {
         this._onEvent("pub", RaftPublishEvent.PUBLISH_EVENT_DATA, RaftPublishEventNames[RaftPublishEvent.PUBLISH_EVENT_DATA],
           {
             topicIDs: topicIDs,
+            topicName: frameMeta.topicName,
+            topicIndex: frameMeta.topicIndex,
+            topicVersion: frameMeta.version,
+            frameType: frameMeta.frameType,
+            handledByDeviceManager,
             payload: payload,
             frameTimeMs: frameTimeMs,
             isBinary: SUBSCRIBE_BINARY_MSGS

package/examples/dashboard/src/SystemTypeMarty/RICStateInfo.ts

@@ -1,5 +1,5 @@
 import RaftDeviceMgrIF from "../../../../src/RaftDeviceMgrIF";
-import { DeviceAttributeState, DevicesState, DeviceState } from "../../../../src/RaftDeviceStates";
+import { DeviceAttributeState, DevicesState, DeviceState, DeviceOnlineState } from '../../../../src/RaftDeviceStates';
 import { RICSERIAL_PAYLOAD_POS } from "../../../../src/RaftProtocolDefs";
 import RICAddOnManager from "./RICAddOnManager";
 import RICCommsStats from "./RICCommsStats";
@@ -50,7 +50,7 @@ export class RICStateInfo implements RaftDeviceMgrIF {
             deviceAttributes: {},
             deviceIsNew: false,
             stateChanged: false,
-            isOnline: false,
+            onlineState: DeviceOnlineState.Offline,
             deviceAddress: "",
             deviceType: "",
             busName: ""
@@ -85,6 +85,14 @@ export class RICStateInfo implements RaftDeviceMgrIF {
         // TODO - implement if RICStateInfo is to be used as a DeviceMgr
     }
 
+    addDeviceRemovedCallback(callback: (deviceKey: string, state: DeviceState) => void): void {
+        // TODO - implement if RICStateInfo is to be used as a DeviceMgr
+    }
+
+    removeDeviceRemovedCallback(callback: (deviceKey: string, state: DeviceState) => void): void {
+        // TODO - implement if RICStateInfo is to be used as a DeviceMgr
+    }
+
     sendAction(deviceKey: string, action: any, data: any): void {
         // TODO - implement if RICStateInfo is to be used as a DeviceMgr
     }

package/examples/dashboard/src/styles.css

@@ -381,6 +381,168 @@ h1 {
     background-color: #555;
 }
 
+.menu-item-toggle {
+    padding: 6px 10px;
+}
+
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.menu-toggle input {
+    margin: 0;
+}
+
+.device-stats-panel {
+    flex: 0 0 220px;
+    min-width: 220px;
+    padding: 10px;
+    border: 1px solid #666;
+    border-radius: 4px;
+    background: #444;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.device-stats-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+}
+
+.device-stats-reset {
+    background: #555;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 0.8em;
+}
+
+.device-stats-reset:hover {
+    background: #666;
+}
+
+.device-stats-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+}
+
+.device-stats-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.device-stats-label {
+    color: #bbb;
+    font-size: 0.85em;
+}
+
+.device-stats-value {
+    font-weight: 600;
+    font-size: 0.9em;
+}
+
+.poll-rate-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.poll-rate-dialog {
+    background: #333;
+    border: 1px solid #666;
+    border-radius: 6px;
+    padding: 18px 22px;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    color: #fff;
+}
+
+.poll-rate-dialog-title {
+    font-size: 1em;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.poll-rate-dialog-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.poll-rate-input {
+    flex: 1;
+    background: #222;
+    border: 1px solid #666;
+    border-radius: 4px;
+    color: #fff;
+    padding: 6px 8px;
+    font-size: 1em;
+    width: 100%;
+}
+
+.poll-rate-unit {
+    color: #aaa;
+    font-size: 0.9em;
+}
+
+.poll-rate-preview {
+    font-size: 0.8em;
+    color: #aaa;
+}
+
+.poll-rate-status {
+    font-size: 0.85em;
+    color: #f90;
+}
+
+.poll-rate-dialog-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.poll-rate-btn {
+    padding: 6px 14px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.poll-rate-btn-set {
+    background: #4a7;
+    color: #fff;
+}
+
+.poll-rate-btn-set:hover {
+    background: #5b8;
+}
+
+.poll-rate-btn-cancel {
+    background: #555;
+    color: #fff;
+}
+
+.poll-rate-btn-cancel:hover {
+    background: #666;
+}
+
 /* Adjust height for portrait orientation */
 @media (orientation: portrait) {
     .device-line-chart {

package/package.json

@@ -1,51 +1,54 @@
 {
-  "name": "@robdobsn/raftjs",
-  "version": "1.10.7",
-  "description": "Javascript/TS library for Raft library",
-  "main": "dist/web/main.js",
-  "types": "dist/web/main.d.ts",
-  "react-native": "dist/react-native/main.js",
-  "author": "Rob Dobson <rob@dobson.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/robdobsn/raftjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/robdobsn/raftjs/issues"
-  },
-  "license": "MIT",
-  "keywords": [
-    "Raft"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "build:phone": "tsc -p tsconfig.react-native.json",
-    "build-all": "npm run clean && npm run build && npm run build:phone",
-    "lint": "eslint ./src",
-    "clean": "rimraf dist build package",
-    "docs": "typedoc --entryPoints src/main.ts",
-    "watch-all": "tsc -p tsconfig.json --watch & tsc -p tsconfig.react-native.json --watch"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.11",
-    "@types/web-bluetooth": "^0.0.21",
-    "@typescript-eslint/eslint-plugin": "^8.27.0",
-    "eslint": "^9.23.0",
-    "react-native-ble-plx": "^3.5.0",
-    "typescript": "^5.8.2",
-    "rimraf": "^6.0.1",
-    "@types/text-encoding": "^0.0.40"
-  },
-  "dependencies": {
-    "isomorphic-ws": "^5.0.0",
-    "tslib": "^2.8.1"
-  },
-  "peerDependencies": {
-    "react-native-ble-plx": "*",
-    "react-native": "*"
-  }
+    "name": "@robdobsn/raftjs",
+    "version": "1.11.6",
+    "description": "Javascript/TS library for Raft library",
+    "main": "dist/web/main.js",
+    "types": "dist/web/main.d.ts",
+    "react-native": "dist/react-native/main.js",
+    "author": "Rob Dobson <rob@dobson.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/robdobsn/raftjs.git"
+    },
+    "bugs": {
+        "url": "https://github.com/robdobsn/raftjs/issues"
+    },
+    "license": "MIT",
+    "keywords": [
+        "Raft"
+    ],
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "build:phone": "tsc -p tsconfig.react-native.json",
+        "build-all": "npm run clean && npm run build && npm run build:phone",
+        "lint": "eslint ./src",
+        "clean": "rimraf dist build package",
+        "docs": "typedoc --entryPoints src/main.ts",
+        "watch-all": "tsc -p tsconfig.json --watch & tsc -p tsconfig.react-native.json --watch"
+    },
+    "devDependencies": {
+        "@types/jest": "^30.0.0",
+        "@types/node": "^22.13.11",
+        "@types/text-encoding": "^0.0.40",
+        "@types/web-bluetooth": "^0.0.21",
+        "@typescript-eslint/eslint-plugin": "^8.27.0",
+        "eslint": "^9.23.0",
+        "jest": "^30.3.0",
+        "react-native-ble-plx": "^3.5.0",
+        "rimraf": "^6.0.1",
+        "ts-jest": "^29.4.6",
+        "typescript": "^5.8.2"
+    },
+    "dependencies": {
+        "isomorphic-ws": "^5.0.0",
+        "tslib": "^2.8.1"
+    },
+    "peerDependencies": {
+        "react-native": "*",
+        "react-native-ble-plx": "*"
+    }
 }

package/src/RaftAttributeHandler.ts

@@ -37,7 +37,7 @@ export default class AttributeHandler {
         const msgDataStartIdx = msgBufIdx;
 
         // New attribute values (in order as they appear in the attributes JSON)
-        let newAttrValues: number[][] = [];
+        let newAttrValues: (number | string)[][] = [];
         if ("c" in pollRespMetadata) {
 
             // Extract attribute values using custom handler
@@ -201,7 +201,7 @@ export default class AttributeHandler {
         }
     }
 
-    private processMsgAttribute(attrDef: DeviceTypeAttribute, msgBuffer: Uint8Array, msgBufIdx: number, msgDataStartIdx: number): { values: number[], newMsgBufIdx: number} {
+    private processMsgAttribute(attrDef: DeviceTypeAttribute, msgBuffer: Uint8Array, msgBufIdx: number, msgDataStartIdx: number): { values: (number | string)[], newMsgBufIdx: number} {
 
         // Current field message string index
         let curFieldBufIdx = msgBufIdx;
@@ -253,11 +253,14 @@ export default class AttributeHandler {
 
         // Extract the value using python-struct
         const unpackValues = structUnpack(maskOnSignedValue ? attrTypesOnly.toUpperCase() : attrTypesOnly, attrBuf);
-        let attrValues = unpackValues as number[];
+        let attrValues = unpackValues as (number | string)[];
 
         // Get number of bytes consumed
         const numBytesConsumed = structSizeOf(attrTypesOnly);
 
+        // Check if any values are strings (from 's' format) — skip numeric transforms for those
+        const hasStringValues = attrValues.some(v => typeof v === 'string');
+
         // // Check if sign extendable mask specified on signed value
         // if (mmSpecifiedOnSignedValue) {
         //     const signBitMask = 1 << (signExtendableMaskSignPos - 1);
@@ -270,57 +273,57 @@ export default class AttributeHandler {
         // }
 
         // Check for XOR mask
-        if ("x" in attrDef) {
+        if (!hasStringValues && "x" in attrDef) {
             const mask = typeof attrDef.x === "string" ? parseInt(attrDef.x, 16) : attrDef.x as number;
-            attrValues = attrValues.map((value) => (value >>> 0) ^ mask);
+            attrValues = attrValues.map((value) => ((value as number) >>> 0) ^ mask);
         }
         
         // Check for AND mask
-        if ("m" in attrDef) {
+        if (!hasStringValues && "m" in attrDef) {
             const mask = typeof attrDef.m === "string" ? parseInt(attrDef.m, 16) : attrDef.m as number;
-            attrValues = attrValues.map((value) => (maskOnSignedValue ? this.signExtend(value, mask) : (value >>> 0) & mask));
+            attrValues = attrValues.map((value) => (maskOnSignedValue ? this.signExtend(value as number, mask) : ((value as number) >>> 0) & mask));
         }
 
         // Check for a sign-bit
-        if ("sb" in attrDef) {
+        if (!hasStringValues && "sb" in attrDef) {
             const signBitPos = attrDef.sb as number;
             const signBitMask = 1 << signBitPos;
             if ("ss" in attrDef) {
                 const signBitSubtract = attrDef.ss as number;
-                attrValues = attrValues.map((value) => (value & signBitMask) ? signBitSubtract - value : value);
+                attrValues = attrValues.map((value) => ((value as number) & signBitMask) ? signBitSubtract - (value as number) : value);
             } else {
-                attrValues = attrValues.map((value) => (value & signBitMask) ? value - (signBitMask << 1) : value);
+                attrValues = attrValues.map((value) => ((value as number) & signBitMask) ? (value as number) - (signBitMask << 1) : value);
             }
         }
 
         // Check for bit shift required
-        if ("s" in attrDef && attrDef.s) {
+        if (!hasStringValues && "s" in attrDef && attrDef.s) {
             const bitshift = attrDef.s as number;
             if (bitshift > 0) {
-                attrValues = attrValues.map((value) => (value >>> 0) >>> bitshift);
+                attrValues = attrValues.map((value) => ((value as number) >>> 0) >>> bitshift);
             } else if (bitshift < 0) {
-                attrValues = attrValues.map((value) => (value >>> 0) << -bitshift);
+                attrValues = attrValues.map((value) => ((value as number) >>> 0) << -bitshift);
             }
         }
 
         // Check for divisor
-        if ("d" in attrDef && attrDef.d) {
+        if (!hasStringValues && "d" in attrDef && attrDef.d) {
             const divisor = attrDef.d as number;
-            attrValues = attrValues.map((value) => (value) / divisor);
+            attrValues = attrValues.map((value) => (value as number) / divisor);
         }
 
         // Check for value to add
-        if ("a" in attrDef && attrDef.a !== undefined) {
+        if (!hasStringValues && "a" in attrDef && attrDef.a !== undefined) {
             const addValue = attrDef.a as number;
-            attrValues = attrValues.map((value) => (value) + addValue);
+            attrValues = attrValues.map((value) => (value as number) + addValue);
         }
 
         // Apply lookup table if defined
-        if ("lut" in attrDef && attrDef.lut !== undefined) {
+        if (!hasStringValues && "lut" in attrDef && attrDef.lut !== undefined) {
             attrValues = attrValues.map((value): number => {
                 // Skip NaN values
-                if (isNaN(value)) {
-                    return value;
+                if (isNaN(value as number)) {
+                    return value as number;
                 }
 
                 // Search through the lookup table rows for a match
@@ -334,7 +337,7 @@ export default class AttributeHandler {
                     }
                     
                     // Parse the range string
-                    if (this.isValueInRangeString(value, row.r)) {
+                    if (this.isValueInRangeString(value as number, row.r)) {
                         return row.v;
                     }
                 }
@@ -345,7 +348,7 @@ export default class AttributeHandler {
                 }
                 
                 // Otherwise keep the original value
-                return value;
+                return value as number;
             });
         }
 

package/src/RaftChannelSimulated.ts

@@ -357,9 +357,9 @@ export default class RaftChannelSimulated implements RaftChannel {
     // Convert the buffer to a byte array
     const dataBytes = new Uint8Array(dataBuffer);
 
-    // Create the JSON message structure
+    // Create the JSON message structure (bus key is numeric string to match firmware convention)
     const message = {
-      "BUS1": {
+      "1": {
         [deviceName]: {
           "_t": deviceTypeInfo.type,
           "_o": 1,  // Device is online
@@ -464,7 +464,8 @@ export default class RaftChannelSimulated implements RaftChannel {
     const hotspotRow = (Math.sin(hotspotPhase) + 1) * (rows - 1) / 2;
     const hotspotCol = (Math.cos(hotspotPhase) + 1) * (cols - 1) / 2;
     const hotspotAmplitude = 6;
-    const sigma = Math.max(rows, cols) / 3 || 1;
+    const rawSigma = Math.max(rows, cols) / 3;
+    const sigma = Number.isFinite(rawSigma) ? rawSigma : 1;
 
     for (let idx = 0; idx < repeatCount; idx++) {
       const row = Math.floor(idx / cols);