testeranto 0.202.0 → 0.205.0

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/AttributeEditor.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Form } from 'react-bootstrap';
+export const AttributeEditor = ({ node: selectedNode, onUpdateAttributes, onUpdateTextContent }) => {
+    if (!selectedNode) {
+        return (React.createElement("div", { className: "p-3 text-muted" }, "Select a node to edit its attributes"));
+    }
+    const handleAttributeChange = (key, value) => {
+        const newAttributes = Object.assign({}, 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 = Object.assign(Object.assign({}, selectedNode.attributes), { [newKey]: '' });
+            onUpdateAttributes(newAttributes);
+        }
+    };
+    const handleRemoveAttribute = (key) => {
+        const newAttributes = Object.assign({}, selectedNode.attributes);
+        delete newAttributes[key];
+        onUpdateAttributes(newAttributes);
+    };
+    return (React.createElement("div", { className: "p-2" },
+        React.createElement("div", { className: "d-flex justify-content-between align-items-center mb-2" },
+            React.createElement("h6", { className: "mb-0 small" },
+                "Attributes for ",
+                selectedNode.type),
+            React.createElement("button", { className: "btn btn-sm btn-outline-success py-0 px-1", onClick: handleAddAttribute }, "+ Add")),
+        Object.entries(selectedNode.attributes).map(([key, value]) => (React.createElement("div", { key: key, className: "mb-1 d-flex align-items-center" },
+            React.createElement(Form.Group, { className: "flex-grow-1 me-1" },
+                React.createElement(Form.Label, { className: "small mb-0" }, key),
+                React.createElement(Form.Control, { type: "text", size: "sm", value: value, onChange: (e) => handleAttributeChange(key, e.target.value), placeholder: "Value", className: "py-0" })),
+            React.createElement("button", { className: "btn btn-sm btn-outline-danger py-0 px-1", onClick: () => handleRemoveAttribute(key), style: { marginTop: '1.25rem' } }, "\u00D7")))),
+        Object.keys(selectedNode.attributes).length === 0 && (React.createElement("div", { className: "text-muted small" }, "No attributes")),
+        onUpdateTextContent && (React.createElement(Form.Group, { className: "mt-2" },
+            React.createElement(Form.Label, { className: "small mb-0" }, "Text Content"),
+            React.createElement(Form.Control, { as: "textarea", rows: 2, value: selectedNode.textContent || '', onChange: (e) => onUpdateTextContent(e.target.value), placeholder: "Text content", className: "py-0" })))));
+};

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/Drawer.js

@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect } from 'react';
+export const Drawer = ({ 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(null);
+    const handleMouseDown = (e) => {
+        setIsResizing(true);
+        setDragStart({
+            x: e.clientX,
+            y: e.clientY,
+            size: size
+        });
+        onBringToFront();
+        e.preventDefault();
+    };
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            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 (React.createElement("div", { ref: drawerRef, className: `position-absolute bg-light border ${isResizing ? 'user-select-none' : ''}`, style: Object.assign(Object.assign({}, getPositionStyles()), { zIndex, transition: isResizing ? 'none' : 'all 0.3s ease', overflow: 'hidden' }) },
+        React.createElement("div", { className: "d-flex justify-content-between align-items-center p-2 border-bottom bg-white", onMouseDown: () => onBringToFront(), style: { cursor: 'move' } },
+            React.createElement("span", null, title)),
+        React.createElement("div", { className: "h-100", style: { overflow: 'auto' } }, children),
+        React.createElement("div", { style: Object.assign(Object.assign({ position: 'absolute' }, getDragEdgeStyle()), { backgroundColor: 'rgba(0, 0, 0, 0.2)' }), onMouseDown: handleMouseDown, className: "drag-edge" })));
+};

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/GenericPreview.js

@@ -0,0 +1,119 @@
+/* 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";
+export const GenericPreview = ({ onTreeUpdate, xmlTree = {
+    id: "root",
+    type: "root",
+    attributes: {},
+    children: [],
+}, selectedNodeId = null, hiddenNodes = new Set(), renderPreview = (node, isSelected, eventHandlers, onTreeUpdate) => {
+    console.error("Default renderPreview called - this should be overridden");
+    return (React.createElement("div", { style: {
+            border: isSelected ? "2px solid blue" : "1px solid gray",
+            padding: "4px",
+        } },
+        "Default preview for: ",
+        node.type));
+}, }) => {
+    // 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 React.createElement("div", null, "No XML tree data available");
+    }
+    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(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 (React.createElement("div", { style: { border: "1px solid red", padding: "4px", margin: "2px" } }, "Error rendering preview"));
+        }
+    }, [xmlTree, selectedNodeId, renderPreview, onTreeUpdate]);
+    // Handle mouse events for panning
+    const handleMouseDown = useCallback((e) => {
+        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) => {
+        if (isPanning) {
+            setPosition({
+                x: e.clientX - startPanPoint.x,
+                y: e.clientY - startPanPoint.y,
+            });
+        }
+    }, [isPanning, startPanPoint]);
+    const handleMouseUp = useCallback(() => {
+        setIsPanning(false);
+    }, []);
+    const handleWheel = useCallback((e) => {
+        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 (React.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center", style: { height: "400px", background: "#f8f9fa" } }, "Error: Invalid XML tree structure"));
+    }
+    // For SVG, we need to handle the transform differently
+    if (isSVG) {
+        return (React.createElement("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 },
+            React.createElement("div", { className: "position-absolute top-0 end-0 m-2" },
+                React.createElement(ButtonGroup, { size: "sm" },
+                    React.createElement(Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.min(5, s + 0.1)) }, "+"),
+                    React.createElement(Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.max(0.1, s - 0.1)) }, "-"),
+                    React.createElement(Button, { variant: "outline-secondary", onClick: resetView }, "Reset"))),
+            React.createElement("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)));
+    }
+    // For non-SVG content (HTML/bootstrap), use a different approach
+    return (React.createElement("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 },
+        React.createElement("div", { className: "position-absolute top-0 end-0 m-2" },
+            React.createElement(ButtonGroup, { size: "sm" },
+                React.createElement(Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.min(5, s + 0.1)) }, "+"),
+                React.createElement(Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.max(0.1, s - 0.1)) }, "-"),
+                React.createElement(Button, { variant: "outline-secondary", onClick: resetView }, "Reset"))),
+        React.createElement("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)));
+};

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/GenericTextEditor.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, Button } from 'react-bootstrap';
+// Function to convert XMLNode to proper XML string
+const nodeToXML = (node, depth = 0) => {
+    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) => {
+    // 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) => {
+        var _a;
+        // Get attributes
+        const attributes = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+            const attr = element.attributes[i];
+            attributes[attr.name] = attr.value;
+        }
+        // Process children
+        const children = [];
+        let textContent;
+        for (let i = 0; i < element.childNodes.length; i++) {
+            const node = element.childNodes[i];
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                children.push(parseElement(node));
+            }
+            else if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.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 = ({ xmlTree, onUpdateTree }) => {
+    const [xmlContent, setXmlContent] = useState('');
+    const [error, setError] = useState(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) => {
+        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 (React.createElement("div", { className: "h-100 d-flex flex-column align-items-center p-1" },
+        React.createElement("div", { style: { width: '100%', maxWidth: '100%', flex: 1, display: 'flex', flexDirection: 'column' } },
+            React.createElement("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 && (React.createElement(Alert, { variant: "danger", className: "mt-1 py-1" },
+                React.createElement("small", null, error))),
+            React.createElement(Button, { variant: "primary", onClick: applyChanges, className: "mt-1 py-0", disabled: !!error, size: "sm" }, "Apply"))));
+};

package/dist/module/src/app/frontend/components/stateful/GenericXMLEditor/GenericTree.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, ButtonGroup, Dropdown } from 'react-bootstrap';
+export const GenericTree = ({ node, selectedNodeId, onSelectNode, onAddNode, onRemoveNode, onToggleVisibility, hiddenNodes, nodeTypes }) => {
+    const isSelected = node.id === selectedNodeId;
+    const isHidden = hiddenNodes.has(node.id);
+    return (React.createElement("li", { style: { listStyle: 'none', marginLeft: '0', paddingLeft: '10px' } },
+        React.createElement("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' } },
+            React.createElement("span", { className: "flex-grow-1 small" }, node.type),
+            node.type !== 'root' && (React.createElement(ButtonGroup, { size: "sm" },
+                React.createElement(Button, { variant: "outline-secondary", onClick: (e) => {
+                        e.stopPropagation();
+                        onToggleVisibility(node.id);
+                    }, title: isHidden ? 'Show node' : 'Hide node' }, isHidden ? '👁️‍🗨️' : '👁️'),
+                React.createElement(Button, { variant: "outline-danger", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemoveNode(node.id);
+                    }, title: "Remove node" }, "\u00D7")))),
+        node.children.length > 0 && (React.createElement("ul", { style: { marginLeft: '10px', paddingLeft: '0' } }, node.children.map((child) => (React.createElement(GenericTree, { key: child.id, node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode, onAddNode: onAddNode, onRemoveNode: onRemoveNode, onToggleVisibility: onToggleVisibility, hiddenNodes: hiddenNodes, nodeTypes: nodeTypes }))))),
+        isSelected && (React.createElement("div", { className: "mt-0" },
+            React.createElement(Dropdown, null,
+                React.createElement(Dropdown.Toggle, { size: "sm", variant: "outline-success", id: "dropdown-add-node", className: "py-0 px-1" }, "+"),
+                React.createElement(Dropdown.Menu, null, nodeTypes.map(({ label, type }) => (React.createElement(Dropdown.Item, { key: type, onClick: () => onAddNode(node.id, type), className: "small" }, label)))))))));
+};