testeranto 0.200.1 → 0.203.0

package/src/components/stateful/ProjectsPage.tsx

@@ -1,8 +1,12 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState, useCallback } from 'react';
+
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ProjectsPageView } from '../pure/ProjectsPageView';
 import { ISummary } from '../../Types';
+import { summaryDotJson } from '../../utils/api';
+import { useWebSocket } from '../../App';
 
 export const ProjectsPage = () => {
   const [projects, setProjects] = useState<any[]>([]);
@@ -11,16 +15,12 @@ export const ProjectsPage = () => {
   const [error, setError] = useState<string | null>(null);
   const [configs, setConfigs] = useState<Record<string, object>>({});
   const navigate = useNavigate();
-  const [ws, setWs] = useState<WebSocket | null>(null);
+  const { ws } = useWebSocket();
 
   useEffect(() => {
-    // Connect to WebSocket on the same host and port as the HTTP server
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${wsProtocol}//${window.location.host}`;
-    const websocket = new WebSocket(wsUrl);
-    setWs(websocket);
+    if (!ws) return;
 
-    websocket.onmessage = (event) => {
+    const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
         if (data.type === 'summaryUpdate') {
@@ -32,29 +32,27 @@ export const ProjectsPage = () => {
       }
     };
 
-    websocket.onerror = (error) => {
-      console.error('WebSocket error:', error);
-    };
+    ws.addEventListener('message', handleMessage);
 
     return () => {
-      websocket.close();
+      ws.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [ws]);
 
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const projectsRes = await fetch(`/projects.json`);
+        const projectsRes = await fetch(`projects.json`);
         const projectNames = await projectsRes.json();
 
         const projectsData = await Promise.all(
           projectNames.map(async (name) => {
             const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
-              fetch(`/reports/${name}/summary.json`),
-              fetch(`/metafiles/node/${name}.json`),
-              fetch(`/metafiles/web/${name}.json`),
-              fetch(`/metafiles/pure/${name}.json`),
-              fetch(`/reports/${name}/config.json`),
+              fetch(summaryDotJson(name)),
+              fetch(`metafiles/node/${name}.json`),
+              fetch(`metafiles/web/${name}.json`),
+              fetch(`metafiles/pure/${name}.json`),
+              fetch(`reports/${name}/config.json`),
             ]);
 
             const [summary, nodeData, webData, pureData, configData] = await Promise.all([

package/src/components/stateful/SVGEditor/CircleForm.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SVGCircleAttributes } from './SVGTypes';
+import { SVGAttributeField } from './SVGAttributeField';
+
+interface CircleFormProps {
+  attributes: SVGCircleAttributes;
+  onChange: (attributes: SVGCircleAttributes) => void;
+}
+
+export const CircleForm: React.FC<CircleFormProps> = ({ attributes, onChange }) => {
+  const handleChange = (key: keyof SVGCircleAttributes, value: any) => {
+    onChange({ ...attributes, [key]: value });
+  };
+
+  return (
+    <div>
+      <h3>Circle Attributes</h3>
+      <SVGAttributeField
+        label="Center X"
+        value={attributes.cx}
+        onChange={(value) => handleChange('cx', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Center Y"
+        value={attributes.cy}
+        onChange={(value) => handleChange('cy', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Radius"
+        value={attributes.r}
+        onChange={(value) => handleChange('r', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Fill Color"
+        value={attributes.fill}
+        onChange={(value) => handleChange('fill', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Color"
+        value={attributes.stroke}
+        onChange={(value) => handleChange('stroke', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Width"
+        value={attributes.strokeWidth}
+        onChange={(value) => handleChange('strokeWidth', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="ID"
+        value={attributes.id}
+        onChange={(value) => handleChange('id', value)}
+        type="text"
+      />
+      <SVGAttributeField
+        label="Class Name"
+        value={attributes.className}
+        onChange={(value) => handleChange('className', value)}
+        type="text"
+      />
+    </div>
+  );
+};

package/src/components/stateful/SVGEditor/GroupForm.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { SVGGAttributes } from './SVGTypes';
+import { SVGAttributeField } from './SVGAttributeField';
+
+interface GroupFormProps {
+  attributes: SVGGAttributes;
+  onChange: (attributes: SVGGAttributes) => void;
+}
+
+export const GroupForm: React.FC<GroupFormProps> = ({ attributes, onChange }) => {
+  const handleChange = (key: keyof SVGGAttributes, value: any) => {
+    onChange({ ...attributes, [key]: value });
+  };
+
+  return (
+    <div>
+      <h3>Group Attributes</h3>
+      <SVGAttributeField
+        label="ID"
+        value={attributes.id}
+        onChange={(value) => handleChange('id', value)}
+        type="text"
+      />
+      <SVGAttributeField
+        label="Class Name"
+        value={attributes.className}
+        onChange={(value) => handleChange('className', value)}
+        type="text"
+      />
+      <SVGAttributeField
+        label="Transform"
+        value={attributes.transform}
+        onChange={(value) => handleChange('transform', value)}
+        type="text"
+      />
+      <SVGAttributeField
+        label="Fill Color"
+        value={attributes.fill}
+        onChange={(value) => handleChange('fill', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Color"
+        value={attributes.stroke}
+        onChange={(value) => handleChange('stroke', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Width"
+        value={attributes.strokeWidth}
+        onChange={(value) => handleChange('strokeWidth', value)}
+        type="number"
+      />
+    </div>
+  );
+};

package/src/components/stateful/SVGEditor/RectForm.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { SVGRectAttributes } from './SVGTypes';
+import { SVGAttributeField } from './SVGAttributeField';
+
+interface RectFormProps {
+  attributes: SVGRectAttributes;
+  onChange: (attributes: SVGRectAttributes) => void;
+}
+
+export const RectForm: React.FC<RectFormProps> = ({ attributes, onChange }) => {
+  const handleChange = (key: keyof SVGRectAttributes, value: any) => {
+    onChange({ ...attributes, [key]: value });
+  };
+
+  return (
+    <div>
+      <h3>Rectangle Attributes</h3>
+      <SVGAttributeField
+        label="X Position"
+        value={attributes.x}
+        onChange={(value) => handleChange('x', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Y Position"
+        value={attributes.y}
+        onChange={(value) => handleChange('y', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Width"
+        value={attributes.width}
+        onChange={(value) => handleChange('width', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Height"
+        value={attributes.height}
+        onChange={(value) => handleChange('height', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="RX (Corner Radius X)"
+        value={attributes.rx}
+        onChange={(value) => handleChange('rx', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="RY (Corner Radius Y)"
+        value={attributes.ry}
+        onChange={(value) => handleChange('ry', value)}
+        type="number"
+      />
+      <SVGAttributeField
+        label="Fill Color"
+        value={attributes.fill}
+        onChange={(value) => handleChange('fill', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Color"
+        value={attributes.stroke}
+        onChange={(value) => handleChange('stroke', value)}
+        type="color"
+      />
+      <SVGAttributeField
+        label="Stroke Width"
+        value={attributes.strokeWidth}
+        onChange={(value) => handleChange('strokeWidth', value)}
+        type="number"
+      />
+    </div>
+  );
+};

package/src/components/stateful/SVGEditor/SVGAttributeField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface SVGAttributeFieldProps {
+  label: string;
+  value: any;
+  onChange: (value: any) => void;
+  type?: 'text' | 'number' | 'color';
+}
+
+export const SVGAttributeField: React.FC<SVGAttributeFieldProps> = ({
+  label,
+  value,
+  onChange,
+  type = 'text'
+}) => {
+  return (
+    <div style={{ marginBottom: '8px' }}>
+      <label style={{ display: 'block', marginBottom: '4px' }}>
+        {label}:
+      </label>
+      <input
+        type={type}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        style={{ width: '100%' }}
+      />
+    </div>
+  );
+};

package/src/components/stateful/SVGEditor/SVGAttributesEditor.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { Form } from 'react-bootstrap';
+import { SVGNode } from '../SVGEditorPage';
+
+interface SVGAttributesEditorProps {
+  node: SVGNode;
+  onUpdateAttributes: (attributes: Record<string, string>) => void;
+  onUpdateTextContent?: (text: string) => void;
+}
+
+export const SVGAttributesEditor: React.FC<SVGAttributesEditorProps> = ({
+  node,
+  onUpdateAttributes,
+  onUpdateTextContent
+}) => {
+  const [attributes, setAttributes] = useState<Record<string, string>>(node.attributes);
+  const [textContent, setTextContent] = useState<string>('');
+
+  useEffect(() => {
+    setAttributes(node.attributes);
+    // For text and tspan nodes, we might want to handle text content
+    // This is a simple approach - in a real implementation, you'd need to track text content separately
+  }, [node.id]);
+
+  const handleAttributeChange = (key: string, value: string) => {
+    const newAttributes = { ...attributes, [key]: value };
+    setAttributes(newAttributes);
+    onUpdateAttributes(newAttributes);
+  };
+
+  // const handleTextContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  //   const newText = e.target.value;
+  //   setTextContent(newText);
+  //   if (onUpdateTextContent) {
+  //     onUpdateTextContent(newText);
+  //   }
+  // };
+
+  return (
+    <div>
+      {/* Text content editor for text and tspan elements */}
+      {(node.type === 'text' || node.type === 'tspan') && (
+        <Form.Group className="mb-3">
+          <Form.Label>Text Content</Form.Label>
+          <Form.Control
+            type="text"
+            value={node.attributes['text-content'] || ''}
+            onChange={(e) => {
+              handleAttributeChange('text-content', e.target.value);
+              // Also update the actual text content if needed
+              if (onUpdateTextContent) {
+                onUpdateTextContent(e.target.value);
+              }
+            }}
+          />
+        </Form.Group>
+      )}
+
+      {Object.entries(attributes)
+        .filter(([key]) => key !== 'text-content')
+        .map(([key, value]) => (
+          <Form.Group key={key} className="mb-2">
+            <Form.Label>{key}</Form.Label>
+            <Form.Control
+              type="text"
+              value={value}
+              onChange={(e) => handleAttributeChange(key, e.target.value)}
+            />
+          </Form.Group>
+        ))}
+      {/* Add new attribute */}
+      <Form.Group>
+        <Form.Label>Add New Attribute</Form.Label>
+        <Form.Control
+          type="text"
+          placeholder="attribute=value"
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              const target = e.target as HTMLInputElement;
+              const [key, value] = target.value.split('=');
+              if (key && value) {
+                handleAttributeChange(key.trim(), value.trim());
+                target.value = '';
+              }
+            }
+          }}
+        />
+      </Form.Group>
+    </div>
+  );
+};

package/src/components/stateful/SVGEditor/SVGEditorControls.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, ButtonGroup, Card } from 'react-bootstrap';
+import { SVGNode } from '../SVGEditorPage';
+
+interface SVGEditorControlsProps {
+  selectedNode: SVGNode;
+  onAddNode: (nodeType: string) => void;
+  onRemoveNode: () => void;
+}
+
+export const SVGEditorControls: React.FC<SVGEditorControlsProps> = ({
+  selectedNode,
+  onAddNode,
+  onRemoveNode
+}) => {
+  return (
+    <Card>
+      <Card.Header>Controls</Card.Header>
+      <Card.Body>
+        <ButtonGroup vertical className="w-100">
+          <h6>Add Elements:</h6>
+          <Button variant="outline-primary" onClick={() => onAddNode('rect')}>
+            Rectangle
+          </Button>
+          <Button variant="outline-primary" onClick={() => onAddNode('circle')}>
+            Circle
+          </Button>
+          <Button variant="outline-primary" onClick={() => onAddNode('path')}>
+            Path
+          </Button>
+          <Button variant="outline-primary" onClick={() => onAddNode('text')}>
+            Text
+          </Button>
+          <Button variant="outline-primary" onClick={() => onAddNode('g')}>
+            Group
+          </Button>
+          <hr />
+          <Button variant="outline-danger" onClick={onRemoveNode}>
+            Remove This Element
+          </Button>
+        </ButtonGroup>
+      </Card.Body>
+    </Card>
+  );
+};

package/src/components/stateful/SVGEditor/SVGElementForm.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CircleForm } from './CircleForm';
+import { RectForm } from './RectForm';
+import { GroupForm } from './GroupForm';
+import { SVGCircleAttributes, SVGRectAttributes, SVGGAttributes } from './SVGTypes';
+
+export type SVGElementType = 'circle' | 'rect' | 'g';
+
+interface SVGElementFormProps {
+  elementType: SVGElementType;
+  attributes: any;
+  onChange: (attributes: any) => void;
+}
+
+export const SVGElementForm: React.FC<SVGElementFormProps> = ({
+  elementType,
+  attributes,
+  onChange
+}) => {
+  switch (elementType) {
+    case 'circle':
+      return (
+        <CircleForm
+          attributes={attributes as SVGCircleAttributes}
+          onChange={onChange}
+        />
+      );
+    case 'rect':
+      return (
+        <RectForm
+          attributes={attributes as SVGRectAttributes}
+          onChange={onChange}
+        />
+      );
+    case 'g':
+      return (
+        <GroupForm
+          attributes={attributes as SVGGAttributes}
+          onChange={onChange}
+        />
+      );
+    default:
+      return <div>Select an element type</div>;
+  }
+};