frame.simulator 1.0.0

package/command-server.js

@@ -0,0 +1,132 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var express_1 = require("express");
+var cors_1 = require("cors");
+var app = (0, express_1.default)();
+var PORT = 3010;
+// Middleware
+app.use((0, cors_1.default)());
+app.use(express_1.default.json());
+// Store for command queue and results
+var commandQueue = [];
+var commandResults = new Map();
+// Endpoint to receive commands from batch processor
+app.post('/send-command', function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, command, data, commandId, attempts, maxAttempts, result, error_1;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                _b.trys.push([0, 4, , 5]);
+                _a = req.body, command = _a.command, data = _a.data;
+                console.log('Received command:', command, data);
+                commandId = Date.now().toString();
+                commandQueue.push({
+                    id: commandId,
+                    command: command,
+                    data: data,
+                    timestamp: new Date(),
+                });
+                attempts = 0;
+                maxAttempts = 50;
+                _b.label = 1;
+            case 1:
+                if (!(attempts < maxAttempts)) return [3 /*break*/, 3];
+                if (commandResults.has(commandId)) {
+                    result = commandResults.get(commandId);
+                    commandResults.delete(commandId);
+                    return [2 /*return*/, res.json(result)];
+                }
+                return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 100); })];
+            case 2:
+                _b.sent();
+                attempts++;
+                return [3 /*break*/, 1];
+            case 3:
+                // Timeout
+                res.status(408).json({
+                    status: 'error',
+                    message: 'Command timeout',
+                });
+                return [3 /*break*/, 5];
+            case 4:
+                error_1 = _b.sent();
+                console.error('Server error:', error_1);
+                res.status(500).json({
+                    status: 'error',
+                    message: error_1 instanceof Error ? error_1.message : 'Unknown error',
+                });
+                return [3 /*break*/, 5];
+            case 5: return [2 /*return*/];
+        }
+    });
+}); });
+// Endpoint for React app to poll for commands
+app.get('/poll-commands', function (req, res) {
+    if (commandQueue.length > 0) {
+        var command = commandQueue.shift();
+        res.json(command || null);
+    }
+    else {
+        res.json(null);
+    }
+});
+// Endpoint for React app to send command results
+app.post('/command-result', function (req, res) {
+    var _a = req.body, commandId = _a.commandId, result = _a.result;
+    commandResults.set(commandId, result);
+    res.json({ status: 'ok' });
+});
+// Health check
+app.get('/health', function (req, res) {
+    res.json({
+        status: 'healthy',
+        queueLength: commandQueue.length,
+        timestamp: new Date(),
+    });
+});
+app.listen(PORT, function () {
+    console.log('COMMAND SERVER (TYPESCRIPT VERSION)');
+    console.log("Command server running on http://localhost:".concat(PORT));
+    console.log('Endpoints:');
+    console.log('  POST /send-command - Receive batch commands');
+    console.log('  GET  /poll-commands - React app polls for commands');
+    console.log('  POST /command-result - React app sends results');
+    console.log('  GET  /health - Server health check');
+});
+exports.default = app;

package/command-server.ts

@@ -0,0 +1,143 @@
+import express, { Response, Request } from 'express';
+import cors from 'cors';
+
+// Type definitions
+interface CommandRequest {
+  command: string;
+  data?: any;
+}
+
+interface CommandResponse {
+  status: 'success' | 'error';
+  message?: string;
+  result?: any;
+}
+
+interface QueuedCommand {
+  id: string;
+  command: string;
+  data?: any;
+  timestamp: Date;
+}
+
+interface CommandResultRequest {
+  commandId: string;
+  result: any;
+}
+
+interface HealthResponse {
+  status: string;
+  queueLength: number;
+  timestamp: Date;
+}
+
+const app: express.Application = express();
+const PORT: number = 3010;
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Store for command queue and results
+let commandQueue: QueuedCommand[] = [];
+let commandResults: Map<string, any> = new Map();
+
+// Endpoint to receive commands from batch processor
+app.post(
+  '/send-command',
+  async (
+    req: Request<{}, CommandResponse, CommandRequest>,
+    res: Response<CommandResponse>,
+  ) => {
+    try {
+      const { command, data } = req.body;
+      console.log('Received command:', command, data);
+
+      // For browser-based commands, we'll use a different approach
+      // Store the command and let the React app poll for it
+      const commandId: string = Date.now().toString();
+
+      commandQueue.push({
+        id: commandId,
+        command,
+        data,
+        timestamp: new Date(),
+      });
+
+      // Wait for result (with timeout)
+      let attempts: number = 0;
+      const maxAttempts: number = 50; // 5 seconds timeout
+
+      while (attempts < maxAttempts) {
+        if (commandResults.has(commandId)) {
+          const result = commandResults.get(commandId);
+          commandResults.delete(commandId);
+          return res.json(result);
+        }
+
+        await new Promise<void>((resolve) => setTimeout(resolve, 100));
+        attempts++;
+      }
+
+      // Timeout
+      res.status(408).json({
+        status: 'error',
+        message: 'Command timeout',
+      });
+    } catch (error) {
+      console.error('Server error:', error);
+      res.status(500).json({
+        status: 'error',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  },
+);
+
+// Endpoint for React app to poll for commands
+app.get(
+  '/poll-commands',
+  (req: Request, res: Response<QueuedCommand | null>) => {
+    if (commandQueue.length > 0) {
+      const command: QueuedCommand | undefined = commandQueue.shift();
+      res.json(command || null);
+    } else {
+      res.json(null);
+    }
+  },
+);
+
+// Endpoint for React app to send command results
+app.post(
+  '/command-result',
+  (
+    req: Request<{}, { status: string }, CommandResultRequest>,
+    res: Response<{ status: string }>,
+  ) => {
+    const { commandId, result } = req.body;
+    commandResults.set(commandId, result);
+    res.json({ status: 'ok' });
+  },
+);
+
+// Health check
+app.get('/health', (req: Request, res: Response<HealthResponse>) => {
+  res.json({
+    status: 'healthy',
+    queueLength: commandQueue.length,
+    timestamp: new Date(),
+  });
+});
+
+app.listen(PORT, () => {
+  console.log('COMMAND SERVER (TYPESCRIPT VERSION)');
+
+  console.log(`Command server running on http://localhost:${PORT}`);
+  console.log('Endpoints:');
+  console.log('  POST /send-command - Receive batch commands');
+  console.log('  GET  /poll-commands - React app polls for commands');
+  console.log('  POST /command-result - React app sends results');
+  console.log('  GET  /health - Server health check');
+});
+
+export default app;

package/dist/command-server.d.ts

@@ -0,0 +1,3 @@
+import express from 'express';
+declare const app: express.Application;
+export default app;

package/dist/command-server.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const cors_1 = __importDefault(require("cors"));
+const app = (0, express_1.default)();
+const PORT = 3010;
+// Middleware
+app.use((0, cors_1.default)());
+app.use(express_1.default.json());
+// Store for command queue and results
+let commandQueue = [];
+let commandResults = new Map();
+// Endpoint to receive commands from batch processor
+app.post('/send-command', async (req, res) => {
+    try {
+        const { command, data } = req.body;
+        console.log('Received command:', command, data);
+        // For browser-based commands, we'll use a different approach
+        // Store the command and let the React app poll for it
+        const commandId = Date.now().toString();
+        commandQueue.push({
+            id: commandId,
+            command,
+            data,
+            timestamp: new Date(),
+        });
+        // Wait for result (with timeout)
+        let attempts = 0;
+        const maxAttempts = 50; // 5 seconds timeout
+        while (attempts < maxAttempts) {
+            if (commandResults.has(commandId)) {
+                const result = commandResults.get(commandId);
+                commandResults.delete(commandId);
+                return res.json(result);
+            }
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            attempts++;
+        }
+        // Timeout
+        res.status(408).json({
+            status: 'error',
+            message: 'Command timeout',
+        });
+    }
+    catch (error) {
+        console.error('Server error:', error);
+        res.status(500).json({
+            status: 'error',
+            message: error instanceof Error ? error.message : 'Unknown error',
+        });
+    }
+});
+// Endpoint for React app to poll for commands
+app.get('/poll-commands', (req, res) => {
+    if (commandQueue.length > 0) {
+        const command = commandQueue.shift();
+        res.json(command || null);
+    }
+    else {
+        res.json(null);
+    }
+});
+// Endpoint for React app to send command results
+app.post('/command-result', (req, res) => {
+    const { commandId, result } = req.body;
+    commandResults.set(commandId, result);
+    res.json({ status: 'ok' });
+});
+// Health check
+app.get('/health', (req, res) => {
+    res.json({
+        status: 'healthy',
+        queueLength: commandQueue.length,
+        timestamp: new Date(),
+    });
+});
+app.listen(PORT, () => {
+    console.log('COMMAND SERVER (TYPESCRIPT VERSION)');
+    console.log(`Command server running on http://localhost:${PORT}`);
+    console.log('Endpoints:');
+    console.log('  POST /send-command - Receive batch commands');
+    console.log('  GET  /poll-commands - React app polls for commands');
+    console.log('  POST /command-result - React app sends results');
+    console.log('  GET  /health - Server health check');
+});
+exports.default = app;

package/dist/simulator.d.ts

@@ -0,0 +1,12 @@
+import { TClick, TClickOnCanvas, TScaleFrame } from './types';
+export declare class Simulator {
+    constructor();
+    findHTMLElement(testId: string, elementType: typeof HTMLElement, type?: string): HTMLElement | null;
+    simulateClickOnCanvas(data: TClickOnCanvas): void;
+    simulateUserClick(data: TClick): void;
+    simulateUserCheck(data: TClick): void;
+    simulateUserInput(testId: string, value: string): {
+        status: string;
+    } | undefined;
+    simulateScaleFrame(scaleValues: TScaleFrame): void;
+}

package/dist/simulator.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Simulator = void 0;
+const frame_constants_1 = require("frame.constants");
+class Simulator {
+    constructor() {
+        console.log('Simulator initialized');
+    }
+    findHTMLElement(testId, elementType, type) {
+        if (type) {
+            console.log(`${frame_constants_1.green}Simulating ${type} on element with testId: ${testId}${frame_constants_1.reset}`);
+        }
+        const element = document.querySelector(`[data-testid="${testId}"]`);
+        if (element) {
+            if (element instanceof elementType) {
+            }
+            else {
+                console.error(`Element found but not a ${elementType.name} for ${type} simulation: ${testId}`);
+            }
+        }
+        else {
+            console.error(`Element not found for ${type} simulation: ${testId}`);
+        }
+        return element;
+    }
+    simulateClickOnCanvas(data) {
+        const { x, y } = data;
+        const canvas = this.findHTMLElement('canvas.draw', HTMLCanvasElement, 'click');
+        if (canvas) {
+            const rect = canvas.getBoundingClientRect();
+            const event = new MouseEvent('click', {
+                clientX: rect.left + rect.width / 2 + x, // Convert canvas-relative to screen coordinates
+                clientY: rect.top + rect.height / 2 - y, // Convert canvas-relative to screen coordinates (flip Y)
+                bubbles: true,
+            });
+            // Set batch properties
+            // @ts-ignore - Add custom properties for batch identification
+            event.isBatch = true;
+            // @ts-ignore - Store original canvas-relative coordinates
+            event.batchX = x;
+            // @ts-ignore - Store original canvas-relative coordinates
+            event.batchY = y;
+            canvas.dispatchEvent(event);
+        }
+    }
+    simulateUserClick(data) {
+        const { testId } = data;
+        const element = this.findHTMLElement(testId, HTMLButtonElement, 'click');
+        if (element) {
+            const event = new MouseEvent('click', { bubbles: true });
+            // @ts-ignore - Add custom property to identify this as a batch click
+            event.isBatch = true;
+            element.click();
+        }
+    }
+    simulateUserCheck(data) {
+        const { testId } = data;
+        const element = this.findHTMLElement(testId, HTMLInputElement, 'check');
+        if (element) {
+            const event = new MouseEvent('click', { bubbles: true });
+            // @ts-ignore - Add custom property to identify this as a batch click
+            event.isBatch = true;
+            element.dispatchEvent(event);
+        }
+    }
+    simulateUserInput(testId, value) {
+        const element = this.findHTMLElement(testId, HTMLDivElement, 'input');
+        if (element) {
+            if (element instanceof HTMLInputElement) {
+                element.value = value.toString();
+                element.dispatchEvent(new Event('input', { bubbles: true }));
+                return { status: 'ok' };
+            }
+            else if (element instanceof HTMLDivElement) {
+                const childElement = element.firstChild;
+                if (childElement instanceof HTMLInputElement) {
+                    childElement.value = value || '';
+                    childElement.dispatchEvent(new Event('input', { bubbles: true }));
+                }
+            }
+        }
+    }
+    simulateScaleFrame(scaleValues) {
+        const { length, height } = scaleValues;
+        console.log(`${frame_constants_1.red}Simulating scale frame with length: ${length}, height: ${height}${frame_constants_1.reset}`);
+        this.simulateUserInput('ScaleInput.input.length', length.toString());
+        this.simulateUserInput('ScaleInput.input.height', height.toString());
+        this.simulateUserCheck({ testId: 'ShowOptions.cbx.scaledBox' });
+        this.simulateUserClick({ testId: 'ScaleForm.button.apply' });
+        this.simulateUserCheck({ testId: 'ShowOptions.cbx.points' });
+    }
+}
+exports.Simulator = Simulator;

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../command-server.ts","../simulator.ts","../types.ts"],"errors":true,"version":"5.6.3"}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export type TClick = {
+    testId: string;
+};
+export type TClickOnCanvas = {
+    x: number;
+    y: number;
+};
+export type TScaleFrame = {
+    length: number;
+    height: number;
+};
+export type TUserAction = TClickOnCanvas | TScaleFrame | TClick;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "frame.simulator",
+  "version": "1.0.0",
+  "description": "A simulator for testing form interactions in a controlled environment.",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc -b",
+    "command-server": "tsx command-server.ts"
+  },
+  "peerDependencies": {
+    "frame.constants": "^1.0.5"
+  },
+  "devDependencies": {
+    "cors": "^2.8.5",
+    "express": "^5.2.1",
+    "frame.constants": "^1.0.5",
+    "tsx": "^4.21.0"
+  }
+}

package/simulator.ts

@@ -0,0 +1,109 @@
+import { green, red, reset } from 'frame.constants';
+import { TClick, TClickOnCanvas, TScaleFrame } from './types';
+
+export class Simulator {
+  constructor() {
+    console.log('Simulator initialized');
+  }
+
+  findHTMLElement(
+    testId: string,
+    elementType: typeof HTMLElement,
+    type?: string,
+  ): HTMLElement | null {
+    if (type) {
+      console.log(
+        `${green}Simulating ${type} on element with testId: ${testId}${reset}`,
+      );
+    }
+    const element = document.querySelector(`[data-testid="${testId}"]`);
+    if (element) {
+      if (element instanceof elementType) {
+      } else {
+        console.error(
+          `Element found but not a ${elementType.name} for ${type} simulation: ${testId}`,
+        );
+      }
+    } else {
+      console.error(`Element not found for ${type} simulation: ${testId}`);
+    }
+    return element as HTMLElement;
+  }
+
+  simulateClickOnCanvas(data: TClickOnCanvas) {
+    const { x, y } = data;
+    const canvas = this.findHTMLElement(
+      'canvas.draw',
+      HTMLCanvasElement,
+      'click',
+    );
+    if (canvas) {
+      const rect = canvas.getBoundingClientRect();
+      const event = new MouseEvent('click', {
+        clientX: rect.left + rect.width / 2 + x, // Convert canvas-relative to screen coordinates
+        clientY: rect.top + rect.height / 2 - y, // Convert canvas-relative to screen coordinates (flip Y)
+        bubbles: true,
+      });
+      // Set batch properties
+      // @ts-ignore - Add custom properties for batch identification
+      event.isBatch = true;
+      // @ts-ignore - Store original canvas-relative coordinates
+      event.batchX = x;
+      // @ts-ignore - Store original canvas-relative coordinates
+      event.batchY = y;
+      canvas.dispatchEvent(event);
+    }
+  }
+
+  simulateUserClick(data: TClick) {
+    const { testId } = data;
+    const element = this.findHTMLElement(testId, HTMLButtonElement, 'click');
+    if (element) {
+      const event = new MouseEvent('click', { bubbles: true });
+      // @ts-ignore - Add custom property to identify this as a batch click
+      event.isBatch = true;
+      element.click();
+    }
+  }
+
+  simulateUserCheck(data: TClick) {
+    const { testId } = data;
+    const element = this.findHTMLElement(testId, HTMLInputElement, 'check');
+    if (element) {
+      const event = new MouseEvent('click', { bubbles: true });
+      // @ts-ignore - Add custom property to identify this as a batch click
+      event.isBatch = true;
+      element.dispatchEvent(event);
+    }
+  }
+
+  simulateUserInput(testId: string, value: string) {
+    const element = this.findHTMLElement(testId, HTMLDivElement, 'input');
+
+    if (element) {
+      if (element instanceof HTMLInputElement) {
+        element.value = value.toString();
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+        return { status: 'ok' };
+      } else if (element instanceof HTMLDivElement) {
+        const childElement = element.firstChild as HTMLElement;
+        if (childElement instanceof HTMLInputElement) {
+          childElement.value = value || '';
+          childElement.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+      }
+    }
+  }
+
+  simulateScaleFrame(scaleValues: TScaleFrame) {
+    const { length, height } = scaleValues;
+    console.log(
+      `${red}Simulating scale frame with length: ${length}, height: ${height}${reset}`,
+    );
+    this.simulateUserInput('ScaleInput.input.length', length.toString());
+    this.simulateUserInput('ScaleInput.input.height', height.toString());
+    this.simulateUserCheck({ testId: 'ShowOptions.cbx.scaledBox' });
+    this.simulateUserClick({ testId: 'ScaleForm.button.apply' });
+    this.simulateUserCheck({ testId: 'ShowOptions.cbx.points' });
+  }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/types.ts

@@ -0,0 +1,15 @@
+export type TClick = {
+  testId: string;
+};
+
+export type TClickOnCanvas = {
+  x: number;
+  y: number;
+};
+
+export type TScaleFrame = {
+  length: number;
+  height: number;
+};
+
+export type TUserAction = TClickOnCanvas | TScaleFrame | TClick;