testeranto 0.202.0 → 0.205.0

package/src/app/frontend/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/app/frontend/components/stateful/GenericXMLEditor/GenericPreview.tsx

@@ -0,0 +1,234 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useRef, useCallback } from "react";
+import { Button, ButtonGroup } from "react-bootstrap";
+import { XMLNode } from "../GenericXMLEditorPage";
+
+interface GenericPreviewProps {
+  onTreeUpdate: any;
+  xmlTree: XMLNode;
+  selectedNodeId: string | null;
+  hiddenNodes: Set<string>;
+  renderPreview: (
+    node: XMLNode,
+    isSelected: boolean,
+    eventHandlers: any,
+    onTreeUpdate?: (newTree: XMLNode) => void
+  ) => React.ReactElement;
+}
+
+export const GenericPreview: React.FC<GenericPreviewProps> = ({
+  onTreeUpdate,
+  xmlTree = {
+    id: "root",
+    type: "root",
+    attributes: {},
+    children: [],
+  },
+  selectedNodeId = null,
+  hiddenNodes = new Set(),
+  renderPreview = (node: XMLNode, isSelected: boolean, eventHandlers: any, onTreeUpdate?: (newTree: XMLNode) => void) => {
+    console.error("Default renderPreview called - this should be overridden");
+    return (
+      <div
+        style={{
+          border: isSelected ? "2px solid blue" : "1px solid gray",
+          padding: "4px",
+        }}
+      >
+        Default preview for: {node.type}
+      </div>
+    );
+  },
+}) => {
+  // Add a check to ensure xmlTree is defined
+  console.log("GenericPreview props:", {
+    xmlTree,
+    selectedNodeId,
+    hiddenNodes,
+    renderPreview,
+    onTreeUpdate
+  });
+  if (!xmlTree) {
+    console.error("xmlTree is undefined in GenericPreview");
+    return <div>No XML tree data available</div>;
+  }
+  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);
+
+  // Always render the preview using the root xmlTree, not individual nodes
+  // This ensures we only get one preview rendered
+  const previewElement = React.useMemo(() => {
+    try {
+      const isSelected = selectedNodeId === xmlTree.id;
+      const eventHandlers = {};
+      return renderPreview(xmlTree, isSelected, eventHandlers, onTreeUpdate);
+    } catch (error) {
+      console.error("Error in renderPreview:", error);
+      return (
+        <div style={{ border: "1px solid red", padding: "4px", margin: "2px" }}>
+          Error rendering preview
+        </div>
+      );
+    }
+  }, [xmlTree, selectedNodeId, renderPreview, onTreeUpdate]);
+
+  // 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)
+  let isSVG = false;
+  try {
+    isSVG = xmlTree.type === "svg";
+  } catch (error) {
+    console.error("Error checking if xmlTree is SVG:", error);
+    return (
+      <div
+        className="border rounded p-3 d-flex justify-content-center align-items-center"
+        style={{ height: "400px", background: "#f8f9fa" }}
+      >
+        Error: Invalid XML tree structure
+      </div>
+    );
+  }
+
+  // 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",
+          }}
+        >
+          {previewElement}
+        </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%",
+        }}
+      >
+        {previewElement}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, Button } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface GenericTextEditorProps {
+  xmlTree: XMLNode;
+  onUpdateTree: (tree: XMLNode) => void;
+}
+
+// Function to convert XMLNode to proper XML string
+const nodeToXML = (node: XMLNode, depth: number = 0): string => {
+  const indent = '  '.repeat(depth);
+  
+  // Handle attributes
+  const attributes = Object.entries(node.attributes || {})
+    .map(([key, value]) => ` ${key}="${value}"`)
+    .join('');
+  
+  // Handle text content
+  const hasTextContent = node.textContent && node.textContent.trim().length > 0;
+  
+  if (node.children.length === 0) {
+    if (hasTextContent) {
+      return `${indent}<${node.type}${attributes}>${node.textContent}</${node.type}>`;
+    } else {
+      return `${indent}<${node.type}${attributes} />`;
+    }
+  } else {
+    let result = `${indent}<${node.type}${attributes}`;
+    
+    if (hasTextContent) {
+      result += `>${node.textContent}\n`;
+    } else {
+      result += '>\n';
+    }
+    
+    // Add children
+    node.children.forEach(child => {
+      result += nodeToXML(child, depth + 1) + '\n';
+    });
+    
+    result += `${indent}</${node.type}>`;
+    return result;
+  }
+};
+
+// Function to parse XML string back to XMLNode structure
+const parseXmlString = (xmlString: string): XMLNode => {
+  // Remove XML declaration if present
+  const cleanXmlString = xmlString.replace(/<\?xml.*?\?>\s*/s, '');
+  const parser = new DOMParser();
+  const xmlDoc = parser.parseFromString(cleanXmlString, 'text/xml');
+  
+  const parseElement = (element: Element): XMLNode => {
+    // Get attributes
+    const attributes: Record<string, string> = {};
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      attributes[attr.name] = attr.value;
+    }
+    
+    // Process children
+    const children: XMLNode[] = [];
+    let textContent: string | undefined;
+    
+    for (let i = 0; i < element.childNodes.length; i++) {
+      const node = element.childNodes[i];
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        children.push(parseElement(node as Element));
+      } else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+        textContent = (textContent || '') + node.textContent;
+      }
+    }
+    
+    // Trim text content if it exists
+    if (textContent) {
+      textContent = textContent.trim();
+    }
+    
+    return {
+      id: `${element.nodeName}-${Date.now()}-${Math.random()}`,
+      type: element.nodeName,
+      attributes,
+      children,
+      textContent: textContent || undefined
+    };
+  };
+  
+  // Get the root element
+  const rootElement = xmlDoc.documentElement;
+  return parseElement(rootElement);
+};
+
+export const GenericTextEditor: React.FC<GenericTextEditorProps> = ({
+  xmlTree,
+  onUpdateTree
+}) => {
+  const [xmlContent, setXmlContent] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      if (!xmlTree) {
+        setXmlContent('');
+        return;
+      }
+      
+      // Generate proper XML content with XML declaration
+      const content = `<?xml version="1.0" encoding="UTF-8"?>\n${nodeToXML(xmlTree, 0)}`;
+      setXmlContent(content);
+      setError(null);
+    } catch (err) {
+      setError('Error generating XML');
+    }
+  }, [xmlTree]);
+
+  const handleXmlChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newContent = e.target.value;
+    setXmlContent(newContent);
+    setError(null);
+  };
+
+  const applyChanges = () => {
+    try {
+      // Parse the XML content back to XMLNode structure
+      const newTree = parseXmlString(xmlContent);
+      onUpdateTree(newTree);
+      setError(null);
+    } 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 p-1">
+      <div style={{ width: '100%', maxWidth: '100%', flex: 1, display: 'flex', flexDirection: 'column' }}>
+        <textarea
+          value={xmlContent}
+          onChange={handleXmlChange}
+          style={{ 
+            width: '100%',
+            background: '#f8f9fa', 
+            padding: '0.5rem', 
+            borderRadius: '0.125rem',
+            flex: 1,
+            fontFamily: 'monospace',
+            whiteSpace: 'pre',
+            wordBreak: 'break-word',
+            lineHeight: '1.2',
+            outline: 'none',
+            border: '1px solid #ced4da',
+            resize: 'none',
+            fontSize: '0.875rem'
+          }}
+        />
+        {error && (
+          <Alert variant="danger" className="mt-1 py-1">
+            <small>{error}</small>
+          </Alert>
+        )}
+        <Button
+          variant="primary"
+          onClick={applyChanges}
+          className="mt-1 py-0"
+          disabled={!!error}
+          size="sm"
+        >
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,105 @@
+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-0 ${isSelected ? 'bg-primary text-white rounded-sm' : ''}`}
+        onClick={() => onSelectNode(node.id)}
+        style={{ cursor: 'pointer' }}
+      >
+        <span className="flex-grow-1 small">
+          {node.type}
+        </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: '10px', 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-0">
+          <Dropdown>
+            <Dropdown.Toggle size="sm" variant="outline-success" id="dropdown-add-node" className="py-0 px-1">
+              +
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {nodeTypes.map(({ label, type }) => (
+                <Dropdown.Item 
+                  key={type} 
+                  onClick={() => onAddNode(node.id, type)}
+                  className="small"
+                >
+                  {label}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      )}
+    </li>
+  );
+};