testeranto 0.202.0 → 0.203.0

package/src/components/stateful/GenericXMLEditor/AttributeEditor.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface AttributeEditorProps {
+  selectedNode: XMLNode | null;
+  onUpdateNode: (nodeId: string, attributes: Record<string, string>) => void;
+}
+
+export const AttributeEditor: React.FC<AttributeEditorProps> = ({
+  selectedNode,
+  onUpdateNode
+}) => {
+  if (!selectedNode) {
+    return (
+      <div className="p-3 text-muted">
+        Select a node to edit its attributes
+      </div>
+    );
+  }
+
+  const handleAttributeChange = (key: string, value: string) => {
+    const newAttributes = { ...selectedNode.attributes };
+    if (value === '') {
+      delete newAttributes[key];
+    } else {
+      newAttributes[key] = value;
+    }
+    onUpdateNode(selectedNode.id, newAttributes);
+  };
+
+  const handleAddAttribute = () => {
+    const newKey = prompt('Enter attribute name:');
+    if (newKey && newKey.trim() !== '') {
+      const newAttributes = { ...selectedNode.attributes, [newKey]: '' };
+      onUpdateNode(selectedNode.id, newAttributes);
+    }
+  };
+
+  const handleRemoveAttribute = (key: string) => {
+    const newAttributes = { ...selectedNode.attributes };
+    delete newAttributes[key];
+    onUpdateNode(selectedNode.id, newAttributes);
+  };
+
+  return (
+    <div className="p-3">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h6>Attributes for {selectedNode.type}</h6>
+        <button
+          className="btn btn-sm btn-outline-success"
+          onClick={handleAddAttribute}
+        >
+          + Add
+        </button>
+      </div>
+      
+      {Object.entries(selectedNode.attributes).map(([key, value]) => (
+        <div key={key} className="mb-2 d-flex align-items-center">
+          <Form.Group className="flex-grow-1 me-2">
+            <Form.Label className="small mb-0">{key}</Form.Label>
+            <Form.Control
+              type="text"
+              size="sm"
+              value={value}
+              onChange={(e) => handleAttributeChange(key, e.target.value)}
+              placeholder="Value"
+            />
+          </Form.Group>
+          <button
+            className="btn btn-sm btn-outline-danger"
+            onClick={() => handleRemoveAttribute(key)}
+            style={{ marginTop: '1.5rem' }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+      
+      {Object.keys(selectedNode.attributes).length === 0 && (
+        <div className="text-muted small">
+          No attributes defined
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/stateful/GenericXMLEditor/Drawer.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Card } from 'react-bootstrap';
+
+interface DrawerProps {
+  position: 'left' | 'right' | 'bottom';
+  isOpen: boolean;
+  zIndex: number;
+  onToggle: () => void;
+  onBringToFront: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  position,
+  isOpen,
+  zIndex,
+  onBringToFront,
+  title,
+  children
+}) => {
+  const [size, setSize] = useState(position === 'bottom' ? 200 : 300);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0, size: 0 });
+  const drawerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsResizing(true);
+    setDragStart({
+      x: e.clientX,
+      y: e.clientY,
+      size: size
+    });
+    onBringToFront();
+    e.preventDefault();
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isResizing) return;
+      
+      switch (position) {
+        case 'left':
+          setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size + (e.clientX - dragStart.x))));
+          break;
+        case 'right':
+          setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size - (e.clientX - dragStart.x))));
+          break;
+        case 'bottom':
+          setSize(Math.max(40, Math.min(window.innerHeight - 100, dragStart.size - (e.clientY - dragStart.y))));
+          break;
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    if (isResizing) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = position === 'bottom' ? 'ns-resize' : 'ew-resize';
+      document.body.style.userSelect = 'none';
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isResizing, dragStart, position]);
+
+  const getPositionStyles = () => {
+    switch (position) {
+      case 'left':
+        return {
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: `${size}px`,
+          transform: 'none'
+        };
+      case 'right':
+        return {
+          top: 0,
+          right: 0,
+          height: '100%',
+          width: `${size}px`,
+          transform: 'none'
+        };
+      case 'bottom':
+        return {
+          bottom: 0,
+          left: 0,
+          width: '100%',
+          height: `${size}px`,
+          transform: 'none'
+        };
+      default:
+        return {};
+    }
+  };
+
+  // Determine which edge to show the drag handle based on position
+  const getDragEdgeStyle = () => {
+    switch (position) {
+      case 'left':
+        return {
+          right: '0',
+          top: '0',
+          height: '100%',
+          width: '8px',
+          cursor: 'ew-resize'
+        };
+      case 'right':
+        return {
+          left: '0',
+          top: '0',
+          height: '100%',
+          width: '8px',
+          cursor: 'ew-resize'
+        };
+      case 'bottom':
+        return {
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '8px',
+          cursor: 'ns-resize'
+        };
+      default:
+        return {};
+    }
+  };
+
+  return (
+    <div
+      ref={drawerRef}
+      className={`position-absolute bg-light border ${isResizing ? 'user-select-none' : ''}`}
+      style={{
+        ...getPositionStyles(),
+        zIndex,
+        transition: isResizing ? 'none' : 'all 0.3s ease',
+        overflow: 'hidden'
+      }}
+    >
+      {/* Header */}
+      <div
+        className="d-flex justify-content-between align-items-center p-2 border-bottom bg-white"
+        onMouseDown={() => onBringToFront()}
+        style={{ cursor: 'move' }}
+      >
+        <span>{title}</span>
+      </div>
+      
+      {/* Content - Always render but control visibility with height/width */}
+      <div className="h-100" style={{ overflow: 'auto' }}>
+        {children}
+      </div>
+      
+      {/* Resize handle */}
+      <div
+        style={{
+          position: 'absolute',
+          ...getDragEdgeStyle(),
+          backgroundColor: 'rgba(0, 0, 0, 0.2)'
+        }}
+        onMouseDown={handleMouseDown}
+        className="drag-edge"
+      />
+    </div>
+  );
+};

package/src/components/stateful/GenericXMLEditor/GenericPreview.tsx

@@ -0,0 +1,160 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Button, ButtonGroup } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface GenericPreviewProps {
+  xmlTree: XMLNode;
+  selectedNodeId: string | null;
+  hiddenNodes: Set<string>;
+  renderPreview: (node: XMLNode, isSelected: boolean, eventHandlers: any) => React.ReactElement;
+}
+
+export const GenericPreview: React.FC<GenericPreviewProps> = ({
+  xmlTree,
+  selectedNodeId,
+  hiddenNodes,
+  renderPreview
+}) => {
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [startPanPoint, setStartPanPoint] = useState({ x: 0, y: 0 });
+  const previewRef = useRef<HTMLDivElement>(null);
+
+  const renderNode = (node: XMLNode): React.ReactElement | null => {
+    // Skip rendering if node is hidden
+    if (hiddenNodes.has(node.id)) {
+      return null;
+    }
+    
+    const isSelected = selectedNodeId === node.id;
+    const eventHandlers = {};
+    
+    // Render children
+    const children = node.children
+      .map(renderNode)
+      .filter(child => child !== null) as React.ReactElement[];
+    
+    // Use the provided renderPreview function
+    return renderPreview(node, isSelected, eventHandlers);
+  };
+
+  // Handle mouse events for panning
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button === 1 || (e.button === 0 && e.altKey)) { // Middle click or Alt + Left click
+      e.preventDefault();
+      setIsPanning(true);
+      setStartPanPoint({ x: e.clientX - position.x, y: e.clientY - position.y });
+    }
+  }, [position]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (isPanning) {
+      setPosition({
+        x: e.clientX - startPanPoint.x,
+        y: e.clientY - startPanPoint.y
+      });
+    }
+  }, [isPanning, startPanPoint]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = -e.deltaY * 0.01;
+    setScale(prevScale => Math.max(0.1, Math.min(5, prevScale + delta)));
+  }, []);
+
+  const resetView = useCallback(() => {
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+
+  // Check if we're rendering SVG content (root node is svg)
+  const isSVG = xmlTree.type === 'svg';
+  
+  // For SVG, we need to handle the transform differently
+  if (isSVG) {
+    return (
+      <div 
+        className="border rounded p-3 d-flex justify-content-center align-items-center position-relative" 
+        style={{ height: '400px', overflow: 'hidden' }}
+        ref={previewRef}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onWheel={handleWheel}
+      >
+        {/* Navigation controls */}
+        <div className="position-absolute top-0 end-0 m-2">
+          <ButtonGroup size="sm">
+            <Button variant="outline-secondary" onClick={() => setScale(s => Math.min(5, s + 0.1))}>
+              +
+            </Button>
+            <Button variant="outline-secondary" onClick={() => setScale(s => Math.max(0.1, s - 0.1))}>
+              -
+            </Button>
+            <Button variant="outline-secondary" onClick={resetView}>
+              Reset
+            </Button>
+          </ButtonGroup>
+        </div>
+        
+        {/* Panning cursor style */}
+        <div style={{ 
+          cursor: isPanning ? 'grabbing' : (scale !== 1 ? 'grab' : 'default'),
+          transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+          transformOrigin: 'center center',
+          transition: isPanning ? 'none' : 'transform 0.1s ease'
+        }}>
+          <svg {...xmlTree.attributes} style={{ background: '#f8f9fa' }}>
+            {xmlTree.children.map(renderNode)}
+          </svg>
+        </div>
+      </div>
+    );
+  }
+  
+  // For non-SVG content (HTML/bootstrap), use a different approach
+  return (
+    <div 
+      className="border rounded p-3 position-relative" 
+      style={{ height: '400px', overflow: 'hidden' }}
+      ref={previewRef}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onWheel={handleWheel}
+    >
+      {/* Navigation controls */}
+      <div className="position-absolute top-0 end-0 m-2">
+        <ButtonGroup size="sm">
+          <Button variant="outline-secondary" onClick={() => setScale(s => Math.min(5, s + 0.1))}>
+            +
+          </Button>
+          <Button variant="outline-secondary" onClick={() => setScale(s => Math.max(0.1, s - 0.1))}>
+            -
+          </Button>
+          <Button variant="outline-secondary" onClick={resetView}>
+            Reset
+          </Button>
+        </ButtonGroup>
+      </div>
+      
+      {/* Panning cursor style */}
+      <div style={{ 
+        cursor: isPanning ? 'grabbing' : (scale !== 1 ? 'grab' : 'default'),
+        transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+        transformOrigin: '0 0',
+        transition: isPanning ? 'none' : 'transform 0.1s ease',
+        height: '100%'
+      }}>
+        {xmlTree.children.map(renderNode)}
+      </div>
+    </div>
+  );
+};

package/src/components/stateful/GenericXMLEditor/GenericTextEditor.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Alert, Button } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface GenericTextEditorProps {
+  xmlTree: XMLNode;
+  onUpdateTree: (tree: XMLNode) => void;
+}
+
+const nodeToXML = (node: XMLNode, 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}>`;
+  }
+};
+
+export const GenericTextEditor: React.FC<GenericTextEditorProps> = ({
+  xmlTree,
+  onUpdateTree
+}) => {
+  const [xmlContent, setXmlContent] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      // For SVG, the root is the svg element itself, so we need to include its attributes
+      if (xmlTree.type === 'svg') {
+        const content = nodeToXML(xmlTree, 0);
+        setXmlContent(content);
+      } else {
+        // Convert the XML tree to XML, but only the children of the root
+        const content = xmlTree.children.map(child => nodeToXML(child, 0)).join('\n');
+        setXmlContent(content);
+      }
+      setError(null);
+    } catch (err) {
+      setError('Error generating XML');
+    }
+  }, [xmlTree]);
+
+  const handleXmlChange = (e: React.FormEvent<HTMLDivElement>) => {
+    const newContent = e.currentTarget.textContent || '';
+    setXmlContent(newContent);
+    setError(null);
+  };
+
+  const applyChanges = () => {
+    try {
+      // This is a placeholder - in a real implementation, you'd parse the XML
+      // and convert it back to an XMLNode structure
+      // For now, we'll just log an error
+      setError('XML parsing not implemented yet');
+    } catch (err) {
+      setError('Error parsing XML: ' + (err instanceof Error ? err.message : String(err)));
+    }
+  };
+
+  return (
+    <div className="h-100 d-flex flex-column align-items-center">
+      <div style={{ width: '80ch', maxWidth: '100%' }}>
+        <div 
+          contentEditable
+          onInput={handleXmlChange}
+          style={{ 
+            width: '80ch',
+            background: '#f8f9fa', 
+            padding: '1rem', 
+            borderRadius: '0.25rem',
+            overflow: 'auto',
+            minHeight: '400px',
+            fontFamily: 'monospace',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            lineHeight: '1.4',
+            outline: 'none'
+          }}
+          suppressContentEditableWarning={true}
+        >
+          {xmlContent}
+        </div>
+        {error && (
+          <Alert variant="danger" className="mt-2">
+            {error}
+          </Alert>
+        )}
+        <Button
+          variant="primary"
+          onClick={applyChanges}
+          className="mt-2"
+          disabled={!!error}
+        >
+          Apply Changes
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/stateful/GenericXMLEditor/GenericTree.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface GenericTreeProps {
+  node: XMLNode;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string) => void;
+  onAddNode: (parentId: string, nodeType: string) => void;
+  onRemoveNode: (nodeId: string) => void;
+  onToggleVisibility: (nodeId: string) => void;
+  hiddenNodes: Set<string>;
+  nodeTypes: { label: string; type: string }[];
+}
+
+export const GenericTree: React.FC<GenericTreeProps> = ({
+  node,
+  selectedNodeId,
+  onSelectNode,
+  onAddNode,
+  onRemoveNode,
+  onToggleVisibility,
+  hiddenNodes,
+  nodeTypes
+}) => {
+  const isSelected = node.id === selectedNodeId;
+  const isHidden = hiddenNodes.has(node.id);
+
+  return (
+    <li
+      style={{ listStyle: 'none', marginLeft: '0', paddingLeft: '10px' }}
+    >
+      <div
+        className={`d-flex justify-content-between align-items-center p-1 ${isSelected ? 'bg-primary text-white rounded' : ''}`}
+        onClick={() => onSelectNode(node.id)}
+        style={{ cursor: 'pointer' }}
+      >
+        <span className="flex-grow-1">
+          {node.type} ({node.id})
+        </span>
+        {node.type !== 'root' && (
+          <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) => (
+            <GenericTree
+              key={child.id}
+              node={child}
+              selectedNodeId={selectedNodeId}
+              onSelectNode={onSelectNode}
+              onAddNode={onAddNode}
+              onRemoveNode={onRemoveNode}
+              onToggleVisibility={onToggleVisibility}
+              hiddenNodes={hiddenNodes}
+              nodeTypes={nodeTypes}
+            />
+          ))}
+        </ul>
+      )}
+      {isSelected && (
+        <div className="mt-1">
+          <Dropdown>
+            <Dropdown.Toggle size="sm" variant="outline-success" id="dropdown-add-node">
+              Add Element
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {nodeTypes.map(({ label, type }) => (
+                <Dropdown.Item 
+                  key={type} 
+                  onClick={() => onAddNode(node.id, type)}
+                >
+                  {label}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      )}
+    </li>
+  );
+};