testeranto 0.200.1 → 0.202.0

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

@@ -0,0 +1,225 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { SVGNode } from '../SVGEditorPage';
+
+interface SVGPreviewProps {
+  svgTree: SVGNode;
+  editMode: string;
+  showGrid: boolean;
+  selectedNodeId: string | null;
+  onNodeInteraction: (nodeId: string, updates: Record<string, string>) => void;
+  hiddenNodes: Set<string>;
+}
+
+const renderGrid = (width: number, height: number) => {
+  const gridSize = 20;
+  const lines = [];
+  
+  // Horizontal lines
+  for (let y = 0; y <= height; y += gridSize) {
+    lines.push(
+      <line
+        key={`h-${y}`}
+        x1={0}
+        y1={y}
+        x2={width}
+        y2={y}
+        stroke="#e0e0e0"
+        strokeWidth={1}
+      />
+    );
+  }
+  
+  // Vertical lines
+  for (let x = 0; x <= width; x += gridSize) {
+    lines.push(
+      <line
+        key={`v-${x}`}
+        x1={x}
+        y1={0}
+        x2={x}
+        y2={height}
+        stroke="#e0e0e0"
+        strokeWidth={1}
+      />
+    );
+  }
+  
+  return lines;
+};
+
+export const SVGPreview: React.FC<SVGPreviewProps> = ({ 
+  svgTree, 
+  editMode, 
+  showGrid, 
+  selectedNodeId,
+  onNodeInteraction,
+  hiddenNodes 
+}) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [isInteracting, setIsInteracting] = useState(false);
+  const [startPoint, setStartPoint] = useState({ x: 0, y: 0 });
+  const [originalAttributes, setOriginalAttributes] = useState<Record<string, string>>({});
+
+  const getSVGPoint = useCallback((clientX: number, clientY: number) => {
+    if (svgRef.current) {
+      const pt = svgRef.current.createSVGPoint();
+      pt.x = clientX;
+      pt.y = clientY;
+      return pt.matrixTransform(svgRef.current.getScreenCTM()?.inverse());
+    }
+    return { x: 0, y: 0 };
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent, node: SVGNode) => {
+    if (editMode !== 'none' && selectedNodeId === node.id) {
+      e.preventDefault();
+      setIsInteracting(true);
+      setStartPoint({ x: e.clientX, y: e.clientY });
+      setOriginalAttributes({ ...node.attributes });
+    }
+  }, [editMode, selectedNodeId]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent, node: SVGNode) => {
+    if (isInteracting && editMode !== 'none' && selectedNodeId === node.id) {
+      e.preventDefault();
+      const currentPoint = getSVGPoint(e.clientX, e.clientY);
+      const startSVGPoint = getSVGPoint(startPoint.x, startPoint.y);
+      
+      const dx = currentPoint.x - startSVGPoint.x;
+      const dy = currentPoint.y - startSVGPoint.y;
+      
+      const updates: Record<string, string> = {};
+      
+      switch (editMode) {
+        case 'move':
+          if (node.type === 'rect' || node.type === 'text') {
+            updates.x = (parseFloat(originalAttributes.x || '0') + dx).toString();
+            updates.y = (parseFloat(originalAttributes.y || '0') + dy).toString();
+          } else if (node.type === 'circle') {
+            updates.cx = (parseFloat(originalAttributes.cx || '0') + dx).toString();
+            updates.cy = (parseFloat(originalAttributes.cy || '0') + dy).toString();
+          }
+          break;
+        
+        case 'scale':
+          if (node.type === 'rect') {
+            updates.width = Math.max(0, parseFloat(originalAttributes.width || '0') + dx).toString();
+            updates.height = Math.max(0, parseFloat(originalAttributes.height || '0') + dy).toString();
+          } else if (node.type === 'circle') {
+            updates.r = Math.max(0, parseFloat(originalAttributes.r || '0') + dx).toString();
+          }
+          break;
+        
+        case 'rotate':
+          // Calculate angle from center
+          const centerX = parseFloat(originalAttributes.cx || originalAttributes.x || '0') + 
+                         parseFloat(originalAttributes.width || '0') / 2;
+          const centerY = parseFloat(originalAttributes.cy || originalAttributes.y || '0') + 
+                         parseFloat(originalAttributes.height || '0') / 2;
+          
+          const startAngle = Math.atan2(
+            startSVGPoint.y - centerY,
+            startSVGPoint.x - centerX
+          );
+          const currentAngle = Math.atan2(
+            currentPoint.y - centerY,
+            currentPoint.x - centerX
+          );
+          
+          const angleDiff = (currentAngle - startAngle) * 180 / Math.PI;
+          updates.transform = `rotate(${angleDiff}, ${centerX}, ${centerY})`;
+          break;
+      }
+      
+      onNodeInteraction(node.id, updates);
+    }
+  }, [isInteracting, editMode, selectedNodeId, startPoint, originalAttributes, getSVGPoint, onNodeInteraction]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsInteracting(false);
+  }, []);
+
+  const renderSVGNode = useCallback((node: SVGNode): React.ReactElement | null => {
+    // Skip rendering if node is hidden
+    if (hiddenNodes.has(node.id)) {
+      return null;
+    }
+    
+    const isSelected = selectedNodeId === node.id;
+    const { type, attributes, children } = node;
+    
+    const eventHandlers = editMode !== 'none' && isSelected ? {
+      onMouseDown: (e: React.MouseEvent) => handleMouseDown(e, node),
+      onMouseMove: (e: React.MouseEvent) => handleMouseMove(e, node),
+      style: { cursor: getCursorForMode(editMode), outline: isSelected ? '2px dashed blue' : 'none' }
+    } : {
+      style: { outline: isSelected ? '2px dashed blue' : 'none' }
+    };
+    
+    // Filter out hidden children
+    const visibleChildren = children
+      .map(renderSVGNode)
+      .filter(child => child !== null) as React.ReactElement[];
+    
+    // For text elements, use the text content
+    if (type === 'text' || type === 'tspan') {
+      const textContent = attributes['data-text-content'] || '';
+      return React.createElement(
+        type,
+        {
+          key: node.id,
+          ...attributes,
+          ...eventHandlers
+        },
+        textContent,
+        ...visibleChildren
+      );
+    }
+    
+    return React.createElement(
+      type,
+      {
+        key: node.id,
+        ...attributes,
+        ...eventHandlers
+      },
+      visibleChildren
+    );
+  }, [editMode, selectedNodeId, hiddenNodes, handleMouseDown, handleMouseMove]);
+
+  const getCursorForMode = (mode: string) => {
+    switch (mode) {
+      case 'move': return 'move';
+      case 'scale': return 'nwse-resize';
+      case 'rotate': return 'crosshair';
+      default: return 'pointer';
+    }
+  };
+
+  const width = parseInt(svgTree.attributes.width || '400');
+  const height = parseInt(svgTree.attributes.height || '400');
+
+  return (
+    <div 
+      className="border rounded p-3 d-flex justify-content-center align-items-center" 
+      style={{ height: '400px' }}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <svg 
+        ref={svgRef}
+        {...svgTree.attributes}
+        style={{ 
+          background: showGrid ? '#f8f9fa' : 'white',
+          cursor: editMode !== 'none' ? getCursorForMode(editMode) : 'default'
+        }}
+        onMouseMove={(e) => {
+          // Handle mouse move on the SVG itself if needed
+        }}
+      >
+        {showGrid && renderGrid(width, height)}
+        {svgTree.children.map(renderSVGNode)}
+      </svg>
+    </div>
+  );
+};

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

@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import { Form, Alert, Button } from 'react-bootstrap';
+import { SVGNode } from '../SVGEditorPage';
+
+interface SVGTextEditorProps {
+  svgTree: SVGNode;
+  onUpdateTree: (tree: SVGNode) => void;
+}
+
+const nodeToXML = (node: SVGNode, depth: number = 0): string => {
+  const indent = '  '.repeat(depth);
+  const attributes = Object.entries(node.attributes)
+    .map(([key, value]) => ` ${key}="${value}"`)
+    .join('');
+
+  if (node.children.length === 0) {
+    return `${indent}<${node.type}${attributes} />`;
+  } else {
+    const children = node.children.map(child => nodeToXML(child, depth + 1)).join('\n');
+    return `${indent}<${node.type}${attributes}>\n${children}\n${indent}</${node.type}>`;
+  }
+};
+
+const xmlToNode = (xml: string): SVGNode | null => {
+  try {
+    // This is a simplified parser - in a real application, you'd want a proper XML parser
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(`<root>${xml}</root>`, 'text/xml');
+
+    const parseElement = (element: Element): SVGNode => {
+      const attributes: Record<string, string> = {};
+      for (let i = 0; i < element.attributes.length; i++) {
+        const attr = element.attributes[i];
+        attributes[attr.name] = attr.value;
+      }
+
+      const children: SVGNode[] = [];
+      for (let i = 0; i < element.children.length; i++) {
+        const child = element.children[i];
+        children.push(parseElement(child));
+      }
+
+      return {
+        id: `${element.nodeName}-${Date.now()}`,
+        type: element.nodeName,
+        attributes,
+        children
+      };
+    };
+
+    const rootElement = doc.documentElement.firstElementChild;
+    if (rootElement) {
+      return parseElement(rootElement);
+    }
+    return null;
+  } catch (error) {
+    console.error('Error parsing XML:', error);
+    return null;
+  }
+};
+
+export const SVGTextEditor: React.FC<SVGTextEditorProps> = ({
+  svgTree,
+  onUpdateTree
+}) => {
+  const [xmlContent, setXmlContent] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      // Convert the SVG tree to XML, but only the children of the root SVG
+      const content = svgTree.children.map(child => nodeToXML(child, 0)).join('\n');
+      setXmlContent(content);
+      setError(null);
+    } catch (err) {
+      setError('Error generating XML');
+    }
+  }, [svgTree]);
+
+  const handleXmlChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newContent = e.target.value;
+    setXmlContent(newContent);
+    setError(null);
+  };
+
+  const applyChanges = () => {
+    try {
+      // Parse the XML content and update the tree
+      const wrappedXml = `<svg>${xmlContent}</svg>`;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(wrappedXml, 'text/xml');
+
+      // Check for parsing errors
+      const parseError = doc.querySelector('parsererror');
+      if (parseError) {
+        throw new Error('Invalid XML structure');
+      }
+
+      // Create a new SVG tree with the parsed content
+      const newSvgTree: SVGNode = {
+        ...svgTree,
+        children: []
+      };
+
+      // Parse each child element
+      const parseElement = (element: Element): SVGNode => {
+        const attributes: Record<string, string> = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+          const attr = element.attributes[i];
+          attributes[attr.name] = attr.value;
+        }
+
+        const children: SVGNode[] = [];
+        for (let i = 0; i < element.children.length; i++) {
+          const child = element.children[i];
+          children.push(parseElement(child));
+        }
+
+        return {
+          id: `${element.nodeName}-${Date.now()}`,
+          type: element.nodeName,
+          attributes,
+          children
+        };
+      };
+
+      // Add all direct children of the SVG element
+      for (let i = 0; i < doc.documentElement.children.length; i++) {
+        const child = doc.documentElement.children[i];
+        newSvgTree.children.push(parseElement(child));
+      }
+
+      onUpdateTree(newSvgTree);
+      setError(null);
+    } catch (err) {
+      setError('Error parsing XML: ' + (err instanceof Error ? err.message : String(err)));
+    }
+  };
+
+  return (
+    <div className="h-100 d-flex flex-column">
+      <Form.Control
+        as="textarea"
+        value={xmlContent}
+        onChange={handleXmlChange}
+        className="flex-grow-1 font-monospace"
+        style={{ minHeight: '300px' }}
+        placeholder="Edit SVG content as XML..."
+      />
+      {error && (
+        <Alert variant="danger" className="mt-2">
+          {error}
+        </Alert>
+      )}
+      <Button
+        variant="primary"
+        onClick={applyChanges}
+        className="mt-2"
+        disabled={!!error}
+      >
+        Apply Changes
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
+import { SVGNode } from '../SVGEditorPage';
+
+interface SVGTreeProps {
+  node: SVGNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string) => void;
+  onAddNode: (parentId: string, nodeType: string) => void;
+  onRemoveNode: (nodeId: string) => void;
+  onToggleVisibility: (nodeId: string) => void;
+  onMoveNode: (nodeId: string, newParentId: string | null, index: number) => void;
+  hiddenNodes: Set<string>;
+  dragInfo: { isDragging: boolean; nodeId: string | null };
+  onDragStart: (nodeId: string) => void;
+  onDragEnd: () => void;
+}
+
+export const SVGTree: React.FC<SVGTreeProps> = ({
+  node,
+  selectedNodeId,
+  onSelectNode,
+  onAddNode,
+  onRemoveNode,
+  onToggleVisibility,
+  onMoveNode,
+  hiddenNodes,
+  dragInfo,
+  onDragStart,
+  onDragEnd
+}) => {
+  const isSelected = node.id === selectedNodeId;
+  const isHidden = hiddenNodes.has(node.id);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragStart = (e: React.DragEvent, nodeId: string) => {
+    e.dataTransfer.setData('text/plain', nodeId);
+    onDragStart(nodeId);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent, targetNodeId: string) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const draggedNodeId = e.dataTransfer.getData('text/plain');
+
+    if (draggedNodeId && draggedNodeId !== targetNodeId) {
+      // Move the node to be a child of the target node
+      onMoveNode(draggedNodeId, targetNodeId, node.children.length);
+    }
+    onDragEnd();
+  };
+
+  const handleDropBefore = (e: React.DragEvent, targetNodeId: string, index: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const draggedNodeId = e.dataTransfer.getData('text/plain');
+
+    if (draggedNodeId && draggedNodeId !== targetNodeId) {
+      // Find the parent of the target node to insert at the correct index
+      // For simplicity, we'll pass the parent ID and index to onMoveNode
+      // This requires some restructuring, but for now, we'll use a placeholder
+      // In a real implementation, you'd need to know the parent node
+    }
+    onDragEnd();
+  };
+
+  return (
+    <li
+      style={{ listStyle: 'none', marginLeft: '0', paddingLeft: '10px' }}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={(e) => handleDrop(e, node.id)}
+    >
+      <div
+        className={`d-flex justify-content-between align-items-center p-1 ${isSelected ? 'bg-primary text-white rounded' : ''} ${isDragOver ? 'bg-info' : ''}`}
+        onClick={() => onSelectNode(node.id)}
+        style={{ cursor: 'pointer' }}
+        draggable
+        onDragStart={(e) => handleDragStart(e, node.id)}
+        onDragEnd={onDragEnd}
+      >
+        <span className="flex-grow-1">
+          {node.type} ({node.id})
+        </span>
+        {node.type !== 'svg' && (
+          <ButtonGroup size="sm">
+            <Button
+              variant="outline-secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleVisibility(node.id);
+              }}
+              title={isHidden ? 'Show node' : 'Hide node'}
+            >
+              {isHidden ? '👁️‍🗨️' : '👁️'}
+            </Button>
+            <Button
+              variant="outline-danger"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemoveNode(node.id);
+              }}
+              title="Remove node"
+            >
+              ×
+            </Button>
+          </ButtonGroup>
+        )}
+      </div>
+      {node.children.length > 0 && (
+        <ul style={{ marginLeft: '20px', paddingLeft: '0' }}>
+          {node.children.map((child, index) => (
+            <SVGTree
+              key={child.id}
+              node={child}
+              selectedNodeId={selectedNodeId}
+              onSelectNode={onSelectNode}
+              onAddNode={onAddNode}
+              onRemoveNode={onRemoveNode}
+              onToggleVisibility={onToggleVisibility}
+              onMoveNode={onMoveNode}
+              hiddenNodes={hiddenNodes}
+              dragInfo={dragInfo}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+            />
+          ))}
+        </ul>
+      )}
+      {isSelected && (
+        <div className="mt-1">
+          <Dropdown>
+            <Dropdown.Toggle size="sm" variant="outline-success" id="dropdown-add-node">
+              Add Element
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={() => onAddNode(node.id, 'rect')}>Rectangle</Dropdown.Item>
+              <Dropdown.Item onClick={() => onAddNode(node.id, 'circle')}>Circle</Dropdown.Item>
+              <Dropdown.Item onClick={() => onAddNode(node.id, 'path')}>Path</Dropdown.Item>
+              <Dropdown.Item onClick={() => onAddNode(node.id, 'text')}>Text</Dropdown.Item>
+              <Dropdown.Item onClick={() => onAddNode(node.id, 'g')}>Group</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      )}
+    </li>
+  );
+};

package/src/components/stateful/SVGEditor/SVGTypes.ts

@@ -0,0 +1,36 @@
+export interface SVGBaseAttributes {
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  transform?: string;
+}
+
+export interface SVGCircleAttributes extends SVGBaseAttributes {
+  cx?: number | string;
+  cy?: number | string;
+  r?: number | string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number | string;
+  // Add other circle-specific attributes as needed
+}
+
+export interface SVGRectAttributes extends SVGBaseAttributes {
+  x?: number | string;
+  y?: number | string;
+  width?: number | string;
+  height?: number | string;
+  rx?: number | string;
+  ry?: number | string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number | string;
+  // Add other rect-specific attributes as needed
+}
+
+export interface SVGGAttributes extends SVGBaseAttributes {
+  // Group-specific attributes
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number | string;
+}