@parhelia/core 0.1.10745

package/dist/editor/sidebar/ComponentTree.js

@@ -0,0 +1,691 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext, useEditContextRef } from "../client/editContext";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getComponentCommands } from "../commands/componentCommands";
+import ConfirmationDialog from "../ConfirmationDialog";
+import { PerfectTree } from "../ui/PerfectTree";
+import { isValidPlaceholder } from "../componentTreeHelper";
+import { getAbsoluteIconUrl } from "../utils";
+import { Plus, LayoutTemplate, Pentagon, Folder, Square, ChevronRight, Circle, File, Home, } from "lucide-react";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Spinner } from "../ui/Spinner";
+export function ComponentTree({}) {
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState(["page"]);
+    const [rootNodes, setRootNodes] = useState([]);
+    const [nodeDictionary, setNodeDictionary] = useState({});
+    let editContextRef = useEditContextRef();
+    const editContext = useEditContext();
+    const treeRef = useRef(null);
+    const confirmDialogRef = useRef(null);
+    const pendingDragStartTimeoutRef = useRef(null);
+    // Helper function to clean placeholder labels by removing _{guid} pattern
+    function cleanPlaceholderLabel(label) {
+        return label.replace(/_{[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}}$/, "");
+    }
+    // Helper function to check if a component has editable descendants
+    // function hasEditableDescendants(component: Component): boolean {
+    //   if (!component.placeholders) return false;
+    //   for (const placeholder of component.placeholders) {
+    //     // If placeholder itself is editable, we have editable descendants
+    //     if (placeholder.editable) return true;
+    //     // Check if any component in this placeholder is editable or has editable descendants
+    //     for (const comp of placeholder.components) {
+    //       if (comp.editable || hasEditableDescendants(comp)) {
+    //         return true;
+    //       }
+    //     }
+    //   }
+    //   return false;
+    // }
+    // Helper function to get all editable descendants, flattening the tree
+    function getEditableDescendants(component, parent) {
+        const editableNodes = [];
+        if (component.editable) {
+            // If this component is editable, include it and map its children normally
+            const node = mapComponentNode(component, parent);
+            editableNodes.push(node);
+        }
+        else {
+            // If this component is not editable, skip it and collect its editable descendants
+            if (component.placeholders) {
+                for (const placeholder of component.placeholders) {
+                    // if (placeholder.editable) {
+                    //   const placeholderNode = mapPlaceholderNode(placeholder, parent);
+                    //   editableNodes.push(placeholderNode);
+                    // } else {
+                    for (const childComponent of placeholder.components) {
+                        const childEditableNodes = getEditableDescendants(childComponent, parent);
+                        editableNodes.push(...childEditableNodes);
+                    }
+                    // }
+                }
+            }
+        }
+        return editableNodes;
+    }
+    useEffect(() => {
+        if (treeRef.current) {
+            const selectedNodeKey = Object.keys(selectedKeys || {})[0];
+            const selectedNodeElement = treeRef.current.querySelector(`[data-id="${selectedNodeKey}"]`);
+            if (selectedNodeElement) {
+                selectedNodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                });
+            }
+        }
+    }, [selectedKeys]);
+    useEffect(() => {
+        if (editContext?.selection && editContext.selection.length > 0) {
+            setSelectedKeys(editContext.selection);
+        }
+        else {
+            setSelectedKeys(["page"]);
+        }
+    }, [editContext?.selection]);
+    const selection = editContext?.selection || [];
+    const page = editContext?.page;
+    useEffect(() => {
+        const newExpandedKeys = [...expandedKeys];
+        for (const id of selection) {
+            if (nodeDictionary[id]?.parent) {
+                expandParents(nodeDictionary[id].parent, newExpandedKeys);
+            }
+        }
+        if (newExpandedKeys.length !== expandedKeys.length ||
+            !newExpandedKeys.every((key, i) => key === expandedKeys[i])) {
+            setExpandedKeys(newExpandedKeys);
+        }
+    }, [selection, nodeDictionary]);
+    function mapPlaceholderNode(p, parent) {
+        const rawLabel = p.description || p.name;
+        const cleanedLabel = cleanPlaceholderLabel(rawLabel);
+        const node = {
+            key: p.key,
+            componentId: p.key,
+            label: cleanedLabel,
+            icon: _jsx(Folder, { className: "h-4 w-4" }),
+            data: p,
+            parent: parent,
+            type: "placeholder",
+            className: !p.editable ? "text-gray-400" : "",
+            tags: [],
+        };
+        if (!editContext?.showLayoutComponents) {
+            // Map components and filter out layout components when hidden
+            const mappedComponents = p.components.map((c) => mapComponentNode(c, node));
+            node.children = mappedComponents.filter((componentNode) => {
+                const component = componentNode.data;
+                return !component.layoutId;
+            });
+        }
+        else {
+            // Always map components, but filter based on editability and descendants
+            const mappedComponents = p.components.map((c) => mapComponentNode(c, node));
+            node.children = mappedComponents.filter((componentNode) => {
+                const component = componentNode.data;
+                return component.editable || true; //hasEditableDescendants(component);
+            });
+        }
+        return node;
+    }
+    function mapPlaceholders(c, parent) {
+        if (!c?.placeholders) {
+            return [];
+        }
+        if (!editContext?.showLayoutComponents) {
+            // Show only non-layout components
+            const nodes = [];
+            for (const placeholder of c.placeholders) {
+                for (const component of placeholder.components) {
+                    if (!component.layoutId) {
+                        const componentNode = mapComponentNode(component, parent);
+                        nodes.push(componentNode);
+                    }
+                }
+            }
+            return nodes;
+        }
+        else {
+            // Original logic for when showing layout components
+            // Filter placeholders based on editable descendants
+            let placeholdersToShow = c.placeholders.filter((p) => {
+                // Show placeholder if it's editable or has editable descendants
+                if (p.editable)
+                    return true;
+                return p.components.some((comp) => comp.editable || true);
+            });
+            if (placeholdersToShow.length > 1) {
+                return placeholdersToShow.map((x) => mapPlaceholderNode(x, parent));
+            }
+            else if (placeholdersToShow.length > 0) {
+                const placeholder = placeholdersToShow[0];
+                // For single placeholders, map the components directly (don't show placeholder node)
+                const mappedComponents = placeholder.components.map((c) => {
+                    const componentNode = mapComponentNode(c, parent);
+                    // Apply gray styling to components in non-editable placeholders (only when showing non-editable components)
+                    if (!placeholder.editable) {
+                        componentNode.className =
+                            (componentNode.className || "") + " text-gray-400";
+                    }
+                    return componentNode;
+                });
+                // Filter components to only show editable ones or those with editable descendants
+                return mappedComponents.filter((componentNode) => {
+                    const component = componentNode.data;
+                    return component.editable || true; // || hasEditableDescendants(component);
+                });
+            }
+        }
+        return [];
+    }
+    function mapComponentNode(c, parent) {
+        const node = {
+            key: c.id,
+            componentId: c.id,
+            label: c.name,
+            icon: c.datasourceItem?.icon ? (_jsx("img", { src: c.datasourceItem.icon, width: 16, height: 16 })) : c.icon ? (_jsx("img", { src: c.icon, width: 16, height: 16 })) : (_jsx(Square, { className: "h-4 w-4" })),
+            data: c,
+            parent: parent,
+            isDraggable: true,
+            tags: [],
+            className: c.isRemovedFromMasterLanguage || !c.editable ? "text-gray-400" : "",
+            type: "component",
+        };
+        if (c.isInheritedFromMasterLanguage) {
+            node.tags.push({
+                id: "inherited",
+                severity: "info",
+                value: "Inherited " + (c.isRemovedFromMasterLanguage ? " / removed" : ""),
+                tooltip: c.isRemovedFromMasterLanguage
+                    ? "Component was removed from master language"
+                    : "Component is inherited from master language",
+                icon: _jsx(ChevronRight, { className: "h-3 w-3" }),
+            });
+        }
+        if (c.layoutId) {
+            node.tags.push({
+                id: "layout",
+                severity: "warning",
+                value: "Layout",
+                icon: _jsx(ChevronRight, { className: "h-3 w-3" }),
+                color: "rgb(192 132 252)",
+                tooltip: "Component is inherited from layout. Click to edit layout.",
+                onClick: async () => {
+                    if (!editContext || !c.layoutId)
+                        return;
+                    const hostItem = await editContext.itemsRepository.getItem({
+                        id: c.layoutId,
+                        language: page.item.language,
+                        version: 0,
+                    });
+                    if (!hostItem)
+                        return;
+                    confirmDialogRef.current?.confirm({
+                        header: "Edit layout",
+                        message: "Edit layout " + hostItem.path + "?",
+                        accept: () => editContext.loadItem({
+                            id: c.layoutId,
+                            language: page.item.language,
+                            version: 0,
+                        }),
+                    });
+                },
+            });
+        }
+        if (c.isSharedLayout) {
+            node.tags.push({
+                id: "shared-layout",
+                severity: "warning",
+                value: "",
+                icon: _jsx(Pentagon, { className: "h-3 w-3 text-gray-400", strokeWidth: 1 }),
+                tooltip: "Component is shared across all languages",
+            });
+        }
+        if (c.isShared) {
+            node.tags.push({
+                id: "linked",
+                severity: "warning",
+                value: "Shared",
+                icon: "",
+                tooltip: "Component is linked to " + c.datasourceItem?.id,
+                color: "rgb(251, 146, 60)",
+            });
+        }
+        node.children = mapPlaceholders(c, node);
+        if (c.items.length > 0 &&
+            c.items[0].id !== c.datasourceItem?.id &&
+            c.items[0].id !== page?.item.id) {
+            const itemsNode = {
+                key: "items" + c.id,
+                label: "items",
+                icon: _jsx(Circle, { className: "h-4 w-4" }),
+                parent: node,
+                type: "items",
+            };
+            itemsNode.children = c.items.map((x) => {
+                const itemNode = {
+                    key: x.id,
+                    label: x.name,
+                    icon: _jsx(File, { className: "h-4 w-4" }),
+                    parent: itemsNode,
+                    type: "item",
+                };
+                return itemNode;
+            });
+            node.children.push(itemsNode);
+        }
+        return node;
+    }
+    useEffect(() => {
+        if (!page)
+            return;
+        const treeNodes = mapPlaceholders(page.rootComponent, {
+            key: "root",
+            label: "Root",
+            icon: _jsx(Home, { className: "h-4 w-4" }),
+            children: [],
+            type: "placeholder",
+        });
+        const dict = {};
+        createMap(treeNodes, dict);
+        const otherNode = {
+            key: "other",
+            label: "Other",
+            icon: _jsx(File, { className: "h-4 w-4" }),
+            children: [],
+            type: "other",
+        };
+        if (otherNode.children?.length) {
+            treeNodes.push(otherNode);
+        }
+        const pageNode = {
+            key: "page",
+            label: "Page",
+            icon: _jsx(Home, { className: "h-4 w-4" }),
+            parent: undefined,
+            componentId: page.item.id,
+            type: "page",
+        };
+        const finalNodes = [pageNode, ...treeNodes];
+        setRootNodes(finalNodes);
+        setNodeDictionary(dict);
+    }, [page, editContext?.showLayoutComponents]);
+    const handleTreeSelection = useCallback((key, event) => {
+        let newKeys = [];
+        // Helper: gather visible component keys using current tree data and expanded state
+        const getVisibleComponentKeys = () => {
+            const keys = [];
+            const visit = (nodes) => {
+                for (const n of nodes) {
+                    if (n.type === "component")
+                        keys.push(n.key);
+                    if (n.children && expandedKeys.includes(n.key)) {
+                        visit(n.children);
+                    }
+                }
+            };
+            visit(rootNodes);
+            return keys;
+        };
+        if (event.shiftKey) {
+            const anchorKey = selectedKeys && selectedKeys.length > 0
+                ? selectedKeys[selectedKeys.length - 1]
+                : undefined;
+            const orderedKeys = getVisibleComponentKeys();
+            const aIdx = anchorKey ? orderedKeys.indexOf(anchorKey) : -1;
+            const bIdx = orderedKeys.indexOf(key);
+            if (aIdx !== -1 && bIdx !== -1) {
+                const start = Math.min(aIdx, bIdx);
+                const end = Math.max(aIdx, bIdx);
+                const rangeKeys = orderedKeys.slice(start, end + 1);
+                if (event.ctrlKey) {
+                    const union = new Set([
+                        ...selectedKeys.filter((k) => nodeDictionary[k]?.type === "component"),
+                        ...rangeKeys,
+                    ]);
+                    newKeys = Array.from(union);
+                }
+                else {
+                    newKeys = rangeKeys;
+                }
+            }
+            else {
+                // Fallback to single selection when anchor or target not found
+                newKeys = [key];
+            }
+        }
+        else if (event.ctrlKey) {
+            if (selectedKeys.includes(key)) {
+                newKeys = selectedKeys.filter((x) => x !== key);
+            }
+            else {
+                newKeys = [...selectedKeys, key];
+            }
+        }
+        else {
+            newKeys = [key];
+        }
+        const selectedComponentIds = Array.from(new Set(newKeys
+            .filter((k) => nodeDictionary[k]?.type === "component")
+            .map((k) => nodeDictionary[k].componentId)));
+        editContextRef.current?.select(selectedComponentIds);
+        if (selectedComponentIds.length === 1) {
+            editContextRef.current?.setScrollIntoView(selectedComponentIds[0]);
+        }
+    }, [selectedKeys, nodeDictionary, editContextRef]);
+    // Handle tree context menu
+    const handleTreeContextMenu = async (node, event) => {
+        const componentId = nodeDictionary[node.key]?.componentId;
+        let selectedComponentIds = editContext?.selection || [];
+        if (componentId) {
+            if (selectedComponentIds.indexOf(componentId) < 0) {
+                editContextRef.current?.select([componentId]);
+                selectedComponentIds = [componentId];
+            }
+        }
+        function isDefinedEntity(entity) {
+            return entity !== undefined;
+        }
+        let selectedEntities = selectedComponentIds
+            .filter((key) => nodeDictionary[key])
+            .map((key) => nodeDictionary[key].data)
+            .filter(isDefinedEntity);
+        if (selectedEntities.length === 0 && nodeDictionary[node.key]?.data) {
+            selectedEntities = [nodeDictionary[node.key].data];
+        }
+        let commands = await getComponentCommands(selectedEntities, editContextRef.current);
+        const menu = commands.map((x) => ({
+            id: x.id,
+            label: x.label,
+            icon: x.icon,
+            disabled: editContextRef.current?.isCommandDisabled({ command: x }),
+            command: async (ev) => {
+                await editContextRef.current?.executeCommand({
+                    command: x,
+                    data: { components: selectedEntities },
+                    event: event,
+                });
+            },
+        }));
+        if (editContext?.mode === "edit") {
+            // Check if we have a placeholder to add insert options
+            const placeholder = getPlaceholder(nodeDictionary[node.key] || null);
+            if (placeholder && placeholder.insertOptions) {
+                const insertOptions = placeholder.insertOptions
+                    .filter((x) => !x.isHidden && !x.isInvalid)
+                    .map((x) => ({
+                    id: x.typeId,
+                    icon: (_jsx("img", { src: getAbsoluteIconUrl(x.icon), width: "16", height: "16", className: "m-1" })),
+                    label: x.name,
+                    command: async () => {
+                        await editContextRef.current?.operations.addComponent(x.typeId, placeholder.key, 0, // Insert at the beginning by default
+                        editContextRef.current?.currentItemDescriptor);
+                    },
+                }));
+                if (insertOptions.length > 0) {
+                    // Add separator if there are existing menu items
+                    if (menu.length > 0) {
+                        menu.push({ id: "separator-insert", separator: true });
+                    }
+                    // Add insert submenu
+                    menu.push({
+                        id: "insert",
+                        label: "Insert",
+                        icon: _jsx(Plus, { size: 16 }),
+                        items: insertOptions,
+                    });
+                }
+            }
+        }
+        editContextRef.current?.showContextMenu(event, menu);
+    };
+    // Convert expanded keys for PerfectTree
+    const expandedItems = expandedKeys;
+    // Convert selected keys for PerfectTree
+    const selectedItems = selectedKeys;
+    const handleCollapseItem = useCallback((key) => {
+        // First, get the node we're collapsing
+        const nodeToCollapse = nodeDictionary[key];
+        // Create a new array for expanded keys
+        const newExpandedKeys = [...expandedKeys].filter((x) => x !== key);
+        setExpandedKeys(newExpandedKeys);
+    }, [expandedKeys, nodeDictionary]);
+    // Handle expanding nodes
+    const handleToggle = useCallback((key) => {
+        if (expandedKeys.includes(key)) {
+            handleCollapseItem(key);
+        }
+        else {
+            const newExpandedKeys = [...expandedKeys];
+            newExpandedKeys.push(key);
+            setExpandedKeys(newExpandedKeys);
+        }
+    }, [expandedKeys, handleCollapseItem]);
+    // Handle collapsing nodes
+    const getPlaceholder = (node) => {
+        if (!node)
+            return null;
+        if (node.type === "placeholder") {
+            const placeholder = node.data;
+            return placeholder.editable ? placeholder : null;
+        }
+        if (node.type === "component" && node.data.placeholders) {
+            const editablePlaceholders = node.data.placeholders.filter((p) => p.editable);
+            if (editablePlaceholders.length === 1)
+                return editablePlaceholders[0];
+        }
+        return null;
+    };
+    // Resolve placeholder and correct index for drop zones even when placeholders are hidden/flattened
+    const getSiblingsForParent = (parent) => {
+        if (!parent)
+            return rootNodes || [];
+        const parentNode = nodeDictionary[parent.key];
+        return (parentNode?.children ||
+            []);
+    };
+    const findNearestComponentNeighbor = (siblings, index) => {
+        // Prefer right neighbor
+        for (let i = index; i < siblings.length; i++) {
+            if (siblings[i]?.type === "component")
+                return siblings[i];
+        }
+        // Fallback to left neighbor
+        for (let j = index - 1; j >= 0; j--) {
+            if (siblings[j]?.type === "component")
+                return siblings[j];
+        }
+        return null;
+    };
+    const resolveDropContext = (dragOverParent, index) => {
+        // Direct placeholder parent
+        if (dragOverParent && dragOverParent.type === "placeholder") {
+            const placeholder = dragOverParent.data;
+            return {
+                placeholder: placeholder.editable ? placeholder : null,
+                indexInPlaceholder: Math.max(0, index),
+            };
+        }
+        // Single editable placeholder on a component
+        if (dragOverParent && dragOverParent.type === "component") {
+            const component = dragOverParent.data;
+            const editablePlaceholders = (component.placeholders || []).filter((p) => p.editable);
+            const siblings = getSiblingsForParent(dragOverParent);
+            if (editablePlaceholders.length === 1) {
+                const ph = editablePlaceholders[0];
+                // Count how many siblings in this placeholder appear before the zone
+                const indexInPlaceholder = siblings
+                    .slice(0, Math.max(0, index))
+                    .filter((n) => n.type === "component" &&
+                    n.data?.parentPlaceholder?.key === ph.key).length;
+                return { placeholder: ph, indexInPlaceholder };
+            }
+            // Multiple placeholders: infer from nearest neighbor component
+            const neighbor = findNearestComponentNeighbor(siblings, Math.max(0, index));
+            const ph = neighbor?.data?.parentPlaceholder;
+            if (ph && ph.editable) {
+                const indexInPlaceholder = siblings
+                    .slice(0, Math.max(0, index))
+                    .filter((n) => n.type === "component" &&
+                    n.data?.parentPlaceholder?.key === ph.key).length;
+                return { placeholder: ph, indexInPlaceholder };
+            }
+            return { placeholder: null, indexInPlaceholder: 0 };
+        }
+        // Root-level (no parent): infer from neighbors among root nodes
+        const siblings = getSiblingsForParent(null);
+        const neighbor = findNearestComponentNeighbor(siblings, Math.max(0, index));
+        const ph = neighbor?.data?.parentPlaceholder;
+        if (ph && ph.editable) {
+            const indexInPlaceholder = siblings
+                .slice(0, Math.max(0, index))
+                .filter((n) => n.type === "component" &&
+                n.data?.parentPlaceholder?.key === ph.key).length;
+            return { placeholder: ph, indexInPlaceholder };
+        }
+        return { placeholder: null, indexInPlaceholder: 0 };
+    };
+    // Handle drag over node (memoized)
+    const handleDragOverZone = useCallback((dragOverNode, index, event) => {
+        if (!editContext?.dragObject)
+            return false;
+        const { placeholder } = resolveDropContext(dragOverNode, index);
+        if (!placeholder)
+            return false;
+        const isValid = isValidPlaceholder(placeholder, editContext.dragObject);
+        event.dataTransfer.dropEffect = isValid ? "move" : "none";
+        return isValid;
+    }, [editContext?.dragObject]);
+    // Handle drop on node (memoized)
+    const handleDropZone = useCallback((droppedOnNode, index, event) => {
+        // When dropping on a node (index < 0), use legacy behavior
+        if (index < 0) {
+            const placeholder = getPlaceholder(droppedOnNode);
+            if (!placeholder)
+                return;
+            editContext.droppedInPlaceholder(placeholder.key, index);
+            return;
+        }
+        const { placeholder, indexInPlaceholder } = resolveDropContext(droppedOnNode, index);
+        if (!placeholder)
+            return;
+        editContext.droppedInPlaceholder(placeholder.key, indexInPlaceholder);
+    }, [editContext]);
+    // Memoize isValidDropZone callback
+    const handleIsValidDropZone = useCallback((parent, index) => {
+        const { placeholder } = resolveDropContext(parent, index);
+        if (!placeholder)
+            return false;
+        if (!editContext?.dragObject)
+            return false;
+        const result = isValidPlaceholder(placeholder, editContext.dragObject);
+        return result;
+    }, [editContext?.dragObject]);
+    // Memoize onStartDrag callback
+    const handleStartDrag = useCallback((data) => {
+        const component = data.node.data;
+        // Initialize drag data to make sure dataTransfer is set
+        data.event.dataTransfer.setData("text/plain", data.node.key);
+        // Align with FrameMenu: include componentId and allowed effect
+        data.event.dataTransfer.setData("componentId", component.id);
+        data.event.dataTransfer.effectAllowed = "copyMove";
+        // Only create drag object for components with datasourceItem
+        if (!component?.datasourceItem)
+            return;
+        pendingDragStartTimeoutRef.current = setTimeout(() => {
+            const language = editContext.page.item.language;
+            const version = editContext.page.item.version;
+            const selectedIds = (editContext?.selection?.length || 0) > 1 &&
+                editContext.selection.includes(component.id)
+                ? editContext.selection
+                : [component.id];
+            const componentsToDrag = selectedIds.map((id) => ({
+                id,
+                language,
+                version,
+            }));
+            editContext.dragStart({
+                type: "component",
+                typeId: component.typeId,
+                templateId: component.datasourceItem?.templateId,
+                name: component.name,
+                components: componentsToDrag,
+            });
+        }, 50);
+        // Prevent any upstream handlers from interfering
+        data.event.stopPropagation();
+    }, [editContext]);
+    // Memoize onDragEnd callback
+    const handleDragEnd = useCallback((event) => {
+        if (pendingDragStartTimeoutRef.current) {
+            clearTimeout(pendingDragStartTimeoutRef.current);
+            pendingDragStartTimeoutRef.current = null;
+        }
+        editContext.dragEnd();
+    }, [editContext]);
+    // Cleanup pending drag start timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (pendingDragStartTimeoutRef.current) {
+                clearTimeout(pendingDragStartTimeoutRef.current);
+                pendingDragStartTimeoutRef.current = null;
+            }
+        };
+    }, []);
+    if (!page) {
+        if (editContext?.contentEditorItem?.hasLayout) {
+            return (_jsx("div", { className: "flex h-full items-center justify-center text-xs text-gray-500", children: _jsx(Spinner, {}) }));
+        }
+        return (_jsx("div", { className: "flex h-full items-center justify-center text-xs text-gray-500", children: "This item has no layout." }));
+    }
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-2 py-1", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(Plus, { strokeWidth: 1, className: "h-4 w-4" }), label: "Add component", size: "small", "data-testid": "component-tree-add-component", onClick: (event) => {
+                                if (!editContext ||
+                                    editContext.readonly ||
+                                    editContext.mode !== "edit")
+                                    return;
+                                editContext.setInsertMode(true);
+                            } }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(LayoutTemplate, { strokeWidth: 1, className: "h-4 w-4" }), label: editContext?.showLayoutComponents ? "Hide layout" : "Show layout", size: "small", selected: editContext?.showLayoutComponents, onClick: () => editContext?.setShowLayoutComponents(!editContext.showLayoutComponents) }) })] }), _jsx("div", { className: "flex-1 p-2", ref: treeRef, "data-testid": "component-tree", children: _jsx(PerfectTree, { nodes: rootNodes, isDragging: !!editContext?.dragObject, multiDragNoun: "components", selectedKeys: selectedItems, expandedKeys: expandedItems, onToggleExpand: handleToggle, onSelect: handleTreeSelection, onContextMenu: handleTreeContextMenu, enableDragAndDrop: true, onDragOverZone: handleDragOverZone, isValidDropZone: handleIsValidDropZone, onStartDrag: handleStartDrag, onDragEnd: handleDragEnd, onDrop: handleDropZone, renderNode: (node) => renderNode(node) }) }), _jsx(ConfirmationDialog, { ref: confirmDialogRef })] }));
+}
+function renderNode(node) {
+    return (_jsx("div", { className: `component-tree-node ${node.type ? `component-tree-${node.type}` : ""}`, "data-component-node": node.type === "component" ? "true" : undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-[12px] text-gray-600", children: [typeof node.icon === "string" ? (_jsx("i", { className: node.icon })) : (node.icon), _jsx("span", { className: node.className, children: node.label }), node.tags?.map((x) => (_jsx("div", { children: _jsxs("span", { id: `id-${node.key}-${x.id}`, className: "ml-2 flex rounded p-0.5 px-1.5 text-xs text-white", style: {
+                            backgroundColor: x.color,
+                            marginLeft: "8px",
+                            fontSize: "10px",
+                        }, title: x.tooltip, onClick: x.onClick
+                            ? (e) => {
+                                e.stopPropagation();
+                                x.onClick();
+                            }
+                            : undefined, children: [x.icon, x.value] }) }, `tag-${node.key}-${x.id}`)))] }) }));
+}
+function createMap(treeNodes, nodeDictionary) {
+    treeNodes.forEach((n) => {
+        if (n.key)
+            nodeDictionary[n.key] = n;
+        if (n.children)
+            createMap(n.children, nodeDictionary);
+    });
+}
+function expandParents(node, expandedKeysList) {
+    if (!node)
+        return;
+    if (node.key && !expandedKeysList.includes(node.key)) {
+        expandedKeysList.push(node.key);
+    }
+    if (node.parent) {
+        expandParents(node.parent, expandedKeysList);
+    }
+}
+function hasSameProps(obj1, obj2) {
+    var obj1Props = Object.keys(obj1), obj2Props = Object.keys(obj2);
+    if (obj1Props.length == obj2Props.length) {
+        return obj1Props.every(function (prop) {
+            return obj2Props.indexOf(prop) >= 0;
+        });
+    }
+    return false;
+}
+//# sourceMappingURL=ComponentTree.js.map