testeranto 0.203.0 → 0.205.0

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+import { XMLNode } from '../GenericXMLEditorPage';
+
+interface AttributeEditorProps {
+  node: XMLNode | null;
+  onUpdateAttributes: (attrs: Record<string, string>) => void;
+  onUpdateTextContent?: (text: string) => void;
+}
+
+export const AttributeEditor: React.FC<AttributeEditorProps> = ({
+  node: selectedNode,
+  onUpdateAttributes,
+  onUpdateTextContent
+}) => {
+  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;
+    }
+    onUpdateAttributes(newAttributes);
+  };
+
+  const handleAddAttribute = () => {
+    const newKey = prompt('Enter attribute name:');
+    if (newKey && newKey.trim() !== '') {
+      const newAttributes = { ...selectedNode.attributes, [newKey]: '' };
+      onUpdateAttributes(newAttributes);
+    }
+  };
+
+  const handleRemoveAttribute = (key: string) => {
+    const newAttributes = { ...selectedNode.attributes };
+    delete newAttributes[key];
+    onUpdateAttributes(newAttributes);
+  };
+
+  return (
+    <div className="p-2">
+      <div className="d-flex justify-content-between align-items-center mb-2">
+        <h6 className="mb-0 small">Attributes for {selectedNode.type}</h6>
+        <button
+          className="btn btn-sm btn-outline-success py-0 px-1"
+          onClick={handleAddAttribute}
+        >
+          + Add
+        </button>
+      </div>
+      
+      {Object.entries(selectedNode.attributes).map(([key, value]) => (
+        <div key={key} className="mb-1 d-flex align-items-center">
+          <Form.Group className="flex-grow-1 me-1">
+            <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"
+              className="py-0"
+            />
+          </Form.Group>
+          <button
+            className="btn btn-sm btn-outline-danger py-0 px-1"
+            onClick={() => handleRemoveAttribute(key)}
+            style={{ marginTop: '1.25rem' }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+      
+      {Object.keys(selectedNode.attributes).length === 0 && (
+        <div className="text-muted small">
+          No attributes
+        </div>
+      )}
+      
+      {/* Text content editor */}
+      {onUpdateTextContent && (
+        <Form.Group className="mt-2">
+          <Form.Label className="small mb-0">Text Content</Form.Label>
+          <Form.Control
+            as="textarea"
+            rows={2}
+            value={selectedNode.textContent || ''}
+            onChange={(e) => onUpdateTextContent(e.target.value)}
+            placeholder="Text content"
+            className="py-0"
+          />
+        </Form.Group>
+      )}
+    </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>
+  );
+};