testeranto 0.189.0 → 0.197.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 [Adam Wong, Demiurge Labs]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/default-project.json

@@ -0,0 +1,44 @@
+{
+  "version": "6.7.1",
+  "objects": [
+    {
+      "radius": 50,
+      "startAngle": 0,
+      "endAngle": 360,
+      "counterClockwise": false,
+      "type": "Circle",
+      "version": "6.7.1",
+      "originX": "left",
+      "originY": "top",
+      "left": 80.9524,
+      "top": 200,
+      "width": 100,
+      "height": 100,
+      "fill": "blue",
+      "stroke": null,
+      "strokeWidth": 1,
+      "strokeDashArray": null,
+      "strokeLineCap": "butt",
+      "strokeDashOffset": 0,
+      "strokeLineJoin": "miter",
+      "strokeUniform": false,
+      "strokeMiterLimit": 4,
+      "scaleX": 5.2241,
+      "scaleY": 1,
+      "angle": 0,
+      "flipX": false,
+      "flipY": false,
+      "opacity": 1,
+      "shadow": null,
+      "visible": true,
+      "backgroundColor": "",
+      "fillRule": "nonzero",
+      "paintFirst": "fill",
+      "globalCompositeOperation": "source-over",
+      "skewX": 0,
+      "skewY": 0
+    }
+  ],
+  "background": "#ffffff",
+  "projectId": "default-project"
+}

package/design-editor/DesignEditor.tsx

@@ -0,0 +1,247 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, useRef } from 'react';
+import { Canvas, Rect, Circle, Text } from 'fabric';
+import { toPng } from 'html-to-image';
+
+interface DesignObject {
+  type: string;
+  [key: string]: any;
+}
+
+interface Design {
+  version: string;
+  background: string;
+  objects: DesignObject[];
+}
+
+interface Collaborator {
+  id: string;
+  name: string;
+}
+
+export interface DesignEditorRef {
+  loadDesign: (design: Design) => void;
+  saveDesign: () => Design | null;
+}
+
+export const DesignEditor = React.forwardRef<DesignEditorRef, { projectId: string }>(
+  ({ projectId }, ref) => {
+  const canvasRef = useRef<fabric.Canvas | null>(null);
+  const [design, setDesign] = useState<Design>({
+    objects: [],
+    background: '#ffffff',
+    version: '1.0'
+  });
+  const [collaborators, setCollaborators] = useState<Collaborator[]>([]);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  // Initialize canvas and WebSocket connection
+  useEffect(() => {
+    const canvas = new Canvas('design-canvas', {
+      width: 800,
+      height: 600
+    });
+    canvas.backgroundColor = design.background;
+    canvasRef.current = canvas;
+
+    const wsPort = window.location.port ? Number(window.location.port) + 1 : 3001;
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.hostname;
+    wsRef.current = new WebSocket(`${protocol}//${host}:${wsPort}/design?project=${projectId}`);
+
+    wsRef.current.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      if (message.type === 'design_update' && canvasRef.current) {
+        canvasRef.current.loadFromJSON(message.data, () => {
+          canvasRef.current?.renderAll();
+        });
+      } else if (message.type === 'collaborators_update') {
+        setCollaborators(message.data);
+      }
+    };
+
+    return () => {
+      wsRef.current?.close();
+      canvas.dispose();
+    };
+  }, [projectId]);
+
+  const addShape = (shape: string) => {
+    if (!canvasRef.current) return;
+
+    let object;
+    switch (shape) {
+      case 'rectangle':
+        object = new Rect({
+          width: 100,
+          height: 100,
+          fill: 'red',
+          left: 100,
+          top: 100
+        });
+        break;
+      case 'circle':
+        object = new Circle({
+          radius: 50,
+          fill: 'blue',
+          left: 200,
+          top: 200
+        });
+        break;
+      case 'text':
+        object = new Text('Double click to edit', {
+          fontFamily: 'Arial',
+          fontSize: 20,
+          left: 100,
+          top: 300
+        });
+        break;
+      default:
+        return;
+    }
+
+    canvasRef.current.add(object);
+    canvasRef.current.renderAll();
+  };
+
+  const saveDesign = (): Design | null => {
+    if (!canvasRef.current) {
+      console.warn('Canvas ref is null, cannot save design');
+      return null;
+    }
+    
+    try {
+      // Get current canvas state
+      const json = canvasRef.current.toJSON() as Design;
+      setDesign(json);
+      
+      // Send update to collaborators
+      if (wsRef.current) {
+        wsRef.current.send(JSON.stringify({
+          type: 'design_update',
+          data: json
+        }));
+      }
+      
+      // Force re-render of all objects
+      canvasRef.current.getObjects().forEach(obj => {
+        obj.set('dirty', true);
+      });
+      canvasRef.current.renderAll();
+      
+      console.log('Design saved:', json);
+      return json;
+    } catch (err) {
+      console.error('Error saving design:', err);
+      return null;
+    }
+  };
+
+  const loadDesign = (design: Design) => {
+    console.log('loadDesign called with:', design);
+    if (!canvasRef.current) {
+      console.warn('Canvas ref is null, cannot load design');
+      return;
+    }
+
+    try {
+      console.log('Loading design into canvas...');
+
+      // Clear existing canvas
+      canvasRef.current.clear();
+
+      // Set background color
+      if (design.background) {
+        canvasRef.current.backgroundColor = design.background;
+      }
+
+      // Load objects if they exist
+      if (design.objects && design.objects.length > 0) {
+        console.log('Loading objects:', design.objects.length);
+        canvasRef.current.loadFromJSON(design, () => {
+          console.log('Design loaded, rendering canvas...');
+          // Force re-render of all objects
+          canvasRef.current?.getObjects().forEach(obj => {
+            obj.set('dirty', true);
+          });
+          canvasRef.current?.renderAll();
+          console.log('Canvas rendered with new design');
+        });
+      } else {
+        console.log('No objects to load, rendering empty canvas');
+        canvasRef.current.renderAll();
+      }
+
+      // Force immediate render
+      canvasRef.current.renderAll();
+    } catch (err) {
+      console.error('Error loading design:', err);
+      if (err instanceof Error) {
+        console.error('Error details:', {
+          name: err.name,
+          message: err.message,
+          stack: err.stack
+        });
+      }
+    }
+  };
+
+  // Expose methods via ref
+  React.useImperativeHandle(ref, () => ({
+    loadDesign,
+    saveDesign
+  }));
+
+  const exportAsPNG = async () => {
+    if (!canvasRef.current) return;
+
+    try {
+      // Store current active object and hide controls
+      const activeObject = canvasRef.current.getActiveObject();
+      if (activeObject) {
+        canvasRef.current.discardActiveObject();
+      }
+
+      // Render once to clear controls
+      canvasRef.current.renderAll();
+
+      // Get canvas element and export
+      const canvasElement = document.getElementById('design-canvas');
+      if (!canvasElement) return;
+      
+      const dataUrl = await toPng(canvasElement);
+      const link = document.createElement('a');
+      link.download = `design-${projectId}.png`;
+      link.href = dataUrl;
+      link.click();
+
+      // Restore active object if there was one
+      if (activeObject) {
+        canvasRef.current.setActiveObject(activeObject);
+        canvasRef.current.renderAll();
+      }
+    } catch (error) {
+      console.error('Error exporting PNG:', error);
+    }
+  };
+
+  return (
+    <div className="design-editor">
+      <div className="toolbar">
+        <button onClick={() => addShape('rectangle')}>Add Rectangle</button>
+        <button onClick={() => addShape('circle')}>Add Circle</button>
+        <button onClick={() => addShape('text')}>Add Text</button>
+        <button onClick={exportAsPNG}>Export PNG</button>
+      </div>
+      <canvas id="design-canvas" />
+      <div className="collaborators">
+        <h3>Collaborators ({collaborators.length})</h3>
+        <ul>
+          {collaborators.map(user => (
+            <li key={user.id}>{user.name}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+});

package/design-editor/index.ts

@@ -0,0 +1,2 @@
+export * from './DesignEditor';
+export * from './server';

package/design-editor/server.ts

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { WebSocketServer, WebSocket } from "ws";
+import fs from "fs";
+import path from "path";
+
+interface Design {
+  version: string;
+  background: string;
+  objects: any[];
+}
+
+interface Project {
+  connections: Set<any>;
+  design: Design;
+}
+
+const projects = new Map<string, Project>();
+
+export function startDesignEditorServer(wssPort: number, httpPort?: number) {
+  const wss = new WebSocketServer({ port: wssPort });
+
+  wss.on("connection", (ws: WebSocket, req) => {
+    // Create URL from request URL and host header
+    const url = new URL(req.url || "", `http://${req.headers.host}`);
+    const projectId = url.searchParams.get("project") || "default";
+
+    if (!projects.has(projectId)) {
+      projects.set(projectId, {
+        connections: new Set(),
+        design: loadDesign(projectId),
+      });
+    }
+
+    const project = projects.get(projectId)!;
+    project.connections.add(ws);
+
+    // Send current design to new collaborator
+    ws.send(
+      JSON.stringify({
+        type: "design_update",
+        data: project.design,
+      })
+    );
+
+    broadcastCollaborators(projectId);
+
+    ws.on("message", (message: string) => {
+      const data = JSON.parse(message);
+      if (data.type === "design_update") {
+        project.design = data.data;
+        saveDesign(projectId, data.data);
+        broadcastToProject(projectId, message.toString());
+      }
+    });
+
+    ws.on("close", (code: number, reason: Buffer) => {
+      project.connections.delete(ws);
+      if (project.connections.size === 0) {
+        projects.delete(projectId);
+      } else {
+        broadcastCollaborators(projectId);
+      }
+    });
+  });
+
+  console.log(`Design editor WebSocket server running on port ${wssPort}`);
+}
+
+function broadcastToProject(projectId: string, message: string) {
+  const project = projects.get(projectId);
+  if (project) {
+    project.connections.forEach((client: WebSocket) => {
+      if (client.readyState === client.OPEN) {
+        client.send(message);
+      }
+    });
+  }
+}
+
+function broadcastCollaborators(projectId: string) {
+  const project = projects.get(projectId);
+  if (project) {
+    const collaborators = Array.from(project.connections).map((_, i) => ({
+      id: `user-${i}`,
+      name: `Collaborator ${i + 1}`,
+    }));
+
+    broadcastToProject(
+      projectId,
+      JSON.stringify({
+        type: "collaborators_update",
+        data: collaborators,
+      })
+    );
+  }
+}
+
+function loadDesign(projectId: string): Design {
+  const designsDir = path.join(process.cwd(), "designs");
+  const filePath = path.join(designsDir, `${projectId}.json`);
+  try {
+    const data = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(data);
+  } catch {
+    return {
+      version: "1.0",
+      background: "#ffffff",
+      objects: [],
+    };
+  }
+}
+
+function saveDesign(projectId: string, design: Design) {
+  const designsDir = path.join(process.cwd(), "designs");
+  if (!fs.existsSync(designsDir)) {
+    fs.mkdirSync(designsDir, { recursive: true });
+  }
+  const filePath = path.join(designsDir, `${projectId}.json`);
+  fs.writeFileSync(filePath, JSON.stringify(design, null, 2));
+}

package/design-editor/types.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface DesignObject {
+  type: string;
+  [key: string]: any;
+}
+
+export interface Design {
+  version: string;
+  background: string;
+  objects: DesignObject[];
+}
+
+export interface Collaborator {
+  id: string;
+  name: string;
+}

package/designs/default-project.json

@@ -0,0 +1,210 @@
+{
+  "version": "6.7.1",
+  "objects": [
+    {
+      "fontSize": 20,
+      "fontWeight": "normal",
+      "fontFamily": "Arial",
+      "fontStyle": "normal",
+      "lineHeight": 1.16,
+      "text": "Double click to edit",
+      "charSpacing": 0,
+      "textAlign": "left",
+      "styles": [],
+      "pathStartOffset": 0,
+      "pathSide": "left",
+      "pathAlign": "baseline",
+      "underline": false,
+      "overline": false,
+      "linethrough": false,
+      "textBackgroundColor": "",
+      "direction": "ltr",
+      "textDecorationThickness": 66.667,
+      "type": "Text",
+      "version": "6.7.1",
+      "originX": "left",
+      "originY": "top",
+      "left": 401.3864,
+      "top": 91.2657,
+      "width": 167.8613,
+      "height": 22.6,
+      "fill": "rgb(0,0,0)",
+      "stroke": null,
+      "strokeWidth": 1,
+      "strokeDashArray": null,
+      "strokeLineCap": "butt",
+      "strokeDashOffset": 0,
+      "strokeLineJoin": "miter",
+      "strokeUniform": false,
+      "strokeMiterLimit": 4,
+      "scaleX": 1.2509,
+      "scaleY": 1.2509,
+      "angle": 0,
+      "flipX": false,
+      "flipY": false,
+      "opacity": 1,
+      "shadow": null,
+      "visible": true,
+      "backgroundColor": "",
+      "fillRule": "nonzero",
+      "paintFirst": "fill",
+      "globalCompositeOperation": "source-over",
+      "skewX": 0,
+      "skewY": 0
+    },
+    {
+      "fontSize": 20,
+      "fontWeight": "normal",
+      "fontFamily": "Arial",
+      "fontStyle": "normal",
+      "lineHeight": 1.16,
+      "text": "Double click to edit",
+      "charSpacing": 0,
+      "textAlign": "left",
+      "styles": [],
+      "pathStartOffset": 0,
+      "pathSide": "left",
+      "pathAlign": "baseline",
+      "underline": false,
+      "overline": false,
+      "linethrough": false,
+      "textBackgroundColor": "",
+      "direction": "ltr",
+      "textDecorationThickness": 66.667,
+      "type": "Text",
+      "version": "6.7.1",
+      "originX": "left",
+      "originY": "top",
+      "left": 403.5925,
+      "top": 498.2463,
+      "width": 167.8613,
+      "height": 22.6,
+      "fill": "rgb(0,0,0)",
+      "stroke": null,
+      "strokeWidth": 1,
+      "strokeDashArray": null,
+      "strokeLineCap": "butt",
+      "strokeDashOffset": 0,
+      "strokeLineJoin": "miter",
+      "strokeUniform": false,
+      "strokeMiterLimit": 4,
+      "scaleX": 1,
+      "scaleY": 1,
+      "angle": 283.1254,
+      "flipX": false,
+      "flipY": false,
+      "opacity": 1,
+      "shadow": null,
+      "visible": true,
+      "backgroundColor": "",
+      "fillRule": "nonzero",
+      "paintFirst": "fill",
+      "globalCompositeOperation": "source-over",
+      "skewX": 0,
+      "skewY": 0
+    },
+    {
+      "fontSize": 20,
+      "fontWeight": "normal",
+      "fontFamily": "Arial",
+      "fontStyle": "normal",
+      "lineHeight": 1.16,
+      "text": "Double click to edit",
+      "charSpacing": 0,
+      "textAlign": "left",
+      "styles": [],
+      "pathStartOffset": 0,
+      "pathSide": "left",
+      "pathAlign": "baseline",
+      "underline": false,
+      "overline": false,
+      "linethrough": false,
+      "textBackgroundColor": "",
+      "direction": "ltr",
+      "textDecorationThickness": 66.667,
+      "type": "Text",
+      "version": "6.7.1",
+      "originX": "left",
+      "originY": "top",
+      "left": 335.8361,
+      "top": 191.1009,
+      "width": 167.8613,
+      "height": 22.6,
+      "fill": "rgb(0,0,0)",
+      "stroke": null,
+      "strokeWidth": 1,
+      "strokeDashArray": null,
+      "strokeLineCap": "butt",
+      "strokeDashOffset": 0,
+      "strokeLineJoin": "miter",
+      "strokeUniform": false,
+      "strokeMiterLimit": 4,
+      "scaleX": 1,
+      "scaleY": 1,
+      "angle": 0,
+      "flipX": false,
+      "flipY": false,
+      "opacity": 1,
+      "shadow": null,
+      "visible": true,
+      "backgroundColor": "",
+      "fillRule": "nonzero",
+      "paintFirst": "fill",
+      "globalCompositeOperation": "source-over",
+      "skewX": 0,
+      "skewY": 0
+    },
+    {
+      "fontSize": 20,
+      "fontWeight": "normal",
+      "fontFamily": "Arial",
+      "fontStyle": "normal",
+      "lineHeight": 1.16,
+      "text": "Double click to edit",
+      "charSpacing": 0,
+      "textAlign": "left",
+      "styles": [],
+      "pathStartOffset": 0,
+      "pathSide": "left",
+      "pathAlign": "baseline",
+      "underline": false,
+      "overline": false,
+      "linethrough": false,
+      "textBackgroundColor": "",
+      "direction": "ltr",
+      "textDecorationThickness": 66.667,
+      "type": "Text",
+      "version": "6.7.1",
+      "originX": "left",
+      "originY": "top",
+      "left": 107.9944,
+      "top": 64.2185,
+      "width": 167.8613,
+      "height": 22.6,
+      "fill": "rgb(0,0,0)",
+      "stroke": null,
+      "strokeWidth": 1,
+      "strokeDashArray": null,
+      "strokeLineCap": "butt",
+      "strokeDashOffset": 0,
+      "strokeLineJoin": "miter",
+      "strokeUniform": false,
+      "strokeMiterLimit": 4,
+      "scaleX": 1,
+      "scaleY": 1,
+      "angle": 0,
+      "flipX": false,
+      "flipY": false,
+      "opacity": 1,
+      "shadow": null,
+      "visible": true,
+      "backgroundColor": "",
+      "fillRule": "nonzero",
+      "paintFirst": "fill",
+      "globalCompositeOperation": "source-over",
+      "skewX": 0,
+      "skewY": 0
+    }
+  ],
+  "background": "#ffffff"
+}