@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/sidebar/ComponentTree.tsx

@@ -1,548 +0,0 @@
-"use client";
-
-import { useEditContext, useEditContextRef } from "../client/editContext";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-
-import { confirmDialog } from "primereact/confirmdialog";
-import { getComponentCommands } from "../commands/componentCommands";
-import { MenuItem, MenuItemCommandEvent } from "primereact/menuitem";
-
-import { Component, Placeholder } from "../pageModel";
-import { PerfectTree, TreeNode } from "../ui/PerfectTree";
-
-import { isValidPlaceholder } from "../componentTreeHelper";
-
-type CustomTreeNode = TreeNode<Component | Placeholder> & {
-  parent?: CustomTreeNode;
-  componentId?: string;
-  className?: string;
-  type: string;
-  tags?: {
-    value: string;
-    icon: React.ReactNode;
-    severity: "success" | "info" | "warning" | "danger" | null | undefined;
-    onClick?: () => void;
-    color?: string;
-    tooltip?: string;
-    id: string;
-  }[];
-};
-
-export function ComponentTree({}) {
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>(["page"]);
-
-  const [rootNodes, setRootNodes] = useState<TreeNode[]>([]);
-  const [nodeDictionary, setNodeDictionary] = useState<{
-    [key: string]: CustomTreeNode;
-  }>({});
-
-  let editContextRef = useEditContextRef();
-  const editContext = useEditContext();
-
-  const treeRef = useRef<HTMLDivElement>(null);
-
-  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: Placeholder,
-    parent: CustomTreeNode,
-  ): CustomTreeNode {
-    const node: CustomTreeNode = {
-      key: p.key,
-      componentId: p.key,
-      label: p.description || p.name,
-      icon: "pi pi-folder",
-      data: p,
-      parent: parent,
-      type: "placeholder",
-    };
-    node.children = p.components.map((c) => mapComponentNode(c, node));
-    return node;
-  }
-
-  function mapPlaceholders(
-    c: Component,
-    parent: CustomTreeNode,
-  ): CustomTreeNode[] {
-    if (!c?.placeholders) return [];
-    if (c.placeholders.length > 1)
-      return c.placeholders.map((x) => mapPlaceholderNode(x, parent));
-    else if (c.placeholders.length > 0) {
-      return c.placeholders[0]!.components.map((c) =>
-        mapComponentNode(c, parent),
-      );
-    }
-    return [];
-  }
-
-  function mapComponentNode(
-    c: Component,
-    parent: CustomTreeNode,
-  ): CustomTreeNode {
-    const node: CustomTreeNode = {
-      key: c.id,
-      componentId: c.id,
-      label: c.name,
-      icon: c.datasourceItem?.icon ? (
-        <img src={c.icon} width={16} height={16} />
-      ) : (
-        "pi pi-stop"
-      ),
-      data: c,
-      parent: parent,
-      tags: [],
-      className: c.isRemovedFromMasterLanguage ? "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: "pi pi-caret-right",
-      });
-    }
-
-    if (c.layoutId) {
-      node.tags!.push({
-        id: "layout",
-        severity: "warning",
-        value: "Layout",
-        icon: "",
-        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;
-          confirmDialog({
-            header: "Edit layout",
-            message: "Edit layout " + hostItem.path + "?",
-            accept: () =>
-              editContext.loadItem({
-                id: c.layoutId!,
-                language: page!.item.language,
-                version: 0,
-              }),
-          });
-        },
-      });
-    }
-
-    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) {
-      const itemsNode: CustomTreeNode = {
-        key: "items" + c.id,
-        label: "items",
-        icon: "pi pi-circle",
-        parent: node,
-        type: "items",
-      };
-
-      itemsNode.children = c.items.map((x) => {
-        const itemNode: CustomTreeNode = {
-          key: x.id,
-          label: x.name,
-          icon: "pi pi-file",
-          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: "pi pi-home",
-      children: [],
-      type: "placeholder",
-    });
-    const dict: { [key: string]: CustomTreeNode } = {};
-    createMap(treeNodes, dict);
-
-    const otherNode: CustomTreeNode = {
-      key: "other",
-      label: "Other",
-      icon: "pi pi-file",
-      children: [],
-      type: "other",
-    };
-
-    if (otherNode.children?.length) treeNodes.push(otherNode);
-
-    const pageNode: CustomTreeNode = {
-      key: "page",
-      label: "Page",
-      icon: "pi pi-home",
-      parent: undefined,
-      componentId: page.item.id,
-      type: "page",
-    };
-
-    setRootNodes([pageNode, ...treeNodes]);
-    setNodeDictionary(dict);
-  }, [page]);
-
-  const handleTreeSelection = useCallback(
-    (key: string, event: React.MouseEvent) => {
-      let newKeys = [key];
-      if (event.ctrlKey) {
-        if (selectedKeys.includes(key)) {
-          newKeys = selectedKeys.filter((x) => x !== key);
-        } else {
-          newKeys = [...selectedKeys, key];
-        }
-      }
-
-      const selectedComponentIds = newKeys
-        .filter((key) => nodeDictionary[key])
-        .map((key) => nodeDictionary[key]!.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: TreeNode<Component>,
-    event: React.MouseEvent,
-  ) => {
-    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: Component | Placeholder | undefined,
-    ): entity is Component | Placeholder {
-      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 as Component];
-    }
-
-    let commands = await getComponentCommands(
-      selectedEntities,
-      editContextRef.current!,
-    );
-
-    const menu: MenuItem[] = commands.map((x) => ({
-      label: x.label,
-      icon: x.icon,
-      disabled: editContextRef.current?.isCommandDisabled({
-        command: x,
-      }),
-      command: (ev: MenuItemCommandEvent) => {
-        editContextRef.current?.executeCommand({
-          command: x,
-          data: { components: selectedEntities as Component[] },
-          event: ev.originalEvent,
-        });
-      },
-    }));
-
-    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: string) => {
-      // 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: string) => {
-      if (expandedKeys.includes(key)) {
-        handleCollapseItem(key);
-      } else {
-        const newExpandedKeys = [...expandedKeys];
-        newExpandedKeys.push(key);
-        setExpandedKeys(newExpandedKeys);
-      }
-    },
-    [expandedKeys, handleCollapseItem],
-  );
-
-  // Handle collapsing nodes
-
-  const getPlaceholder = (node: CustomTreeNode | null): Placeholder | null => {
-    if (!node) return null;
-    if (node.type === "placeholder") return node.data as Placeholder;
-    if (node.type === "component" && (node.data as Component).placeholders) {
-      if ((node.data as Component).placeholders.length === 1)
-        return (node.data as Component).placeholders[0]!;
-    }
-    return null;
-  };
-
-  // Handle drag over node
-  const handleDragOverZone = (
-    dragOverNode: CustomTreeNode | null,
-    index: number,
-    event: React.DragEvent,
-  ): boolean => {
-    if (!editContext?.dragObject) return false;
-    const placeholder = getPlaceholder(dragOverNode);
-    if (!placeholder) return false;
-    var isValid = isValidPlaceholder(placeholder, editContext.dragObject);
-    event.dataTransfer.dropEffect = isValid ? "move" : "none";
-    return isValid;
-  };
-
-  // Handle drop on node
-  const handleDropZone = (
-    droppedOnNode: CustomTreeNode | null,
-    index: number,
-    event: React.DragEvent,
-  ): void => {
-    const placeholder = getPlaceholder(droppedOnNode);
-    if (!placeholder) return;
-
-    editContext!.droppedInPlaceholder(placeholder.key, index);
-  };
-
-  if (!page)
-    return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-500"></div>
-    );
-
-  // Use the PerfectTree component
-  return (
-    <div className="p-2" ref={treeRef}>
-      <PerfectTree
-        nodes={rootNodes}
-        isDragging={!!editContext?.dragObject}
-        selectedKeys={selectedItems}
-        expandedKeys={expandedItems}
-        onToggleExpand={handleToggle}
-        onSelect={handleTreeSelection}
-        onContextMenu={handleTreeContextMenu}
-        enableDragAndDrop={true}
-        onDragOverZone={(parent, index, event) =>
-          handleDragOverZone(parent as CustomTreeNode | null, index, event)
-        }
-        isValidDropZone={(parent, index) => {
-          const placeholder = getPlaceholder(parent as CustomTreeNode | null);
-          if (!placeholder) return false;
-          if (!editContext?.dragObject) return false;
-          const result = isValidPlaceholder(
-            placeholder,
-            editContext.dragObject,
-          );
-
-          return result;
-        }}
-        onStartDrag={(data) => {
-          const component = data.node.data as Component;
-
-          // Initialize drag data to make sure dataTransfer is set
-          data.event.dataTransfer.setData("text/plain", data.node.key);
-
-          // Only create drag object for components with datasourceItem
-          if (!component?.datasourceItem) return;
-          setTimeout(() => {
-            editContext!.dragStart({
-              type: "component",
-              typeId: component.typeId,
-              templateId: component.datasourceItem?.templateId,
-              name: component.name,
-              component: {
-                id: component.id,
-                language: editContext!.page!.item.language,
-                version: editContext!.page!.item.version,
-              },
-            });
-          }, 1);
-        }}
-        onDragEnd={(event) => {
-          editContext!.dragEnd();
-        }}
-        onDrop={(parent, index, event) =>
-          handleDropZone(parent as CustomTreeNode | null, index, event)
-        }
-        renderNode={(node) => renderNode(node as CustomTreeNode)}
-      />
-    </div>
-  );
-}
-
-function renderNode(node: CustomTreeNode) {
-  return (
-    <div>
-      <div className="flex items-center gap-2 text-[12px] text-gray-600">
-        {typeof node.icon === "string" ? (
-          <i className={node.icon}></i>
-        ) : (
-          node.icon
-        )}
-        <span className={node.className}>{node.label}</span>
-        {node.tags?.map((x: any) => (
-          <div key={`tag-${node.key}-${x.id}`}>
-            <span
-              id={`id-${node.key}-${x.id}`}
-              className="ml-2 rounded px-1 py-0.5 text-xs"
-              style={{
-                backgroundColor: x.color,
-                marginLeft: "8px",
-                fontSize: "10px",
-                padding: "1px 4px 2px 2px",
-              }}
-              title={x.tooltip}
-              onClick={
-                x.onClick
-                  ? (e) => {
-                      e.stopPropagation();
-                      x.onClick();
-                    }
-                  : undefined
-              }
-            >
-              {x.icon && <i className={x.icon}></i>}
-              {x.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function createMap(
-  treeNodes: CustomTreeNode[],
-  nodeDictionary: { [key: string]: CustomTreeNode },
-) {
-  treeNodes.forEach((n) => {
-    if (n.key) nodeDictionary[n.key] = n;
-    if (n.children) createMap(n.children as CustomTreeNode[], nodeDictionary);
-  });
-}
-
-function expandParents(node: CustomTreeNode, expandedKeysList: string[]) {
-  if (!node) return;
-
-  if (node.key && !expandedKeysList.includes(node.key)) {
-    expandedKeysList.push(node.key);
-  }
-
-  if (node.parent) {
-    expandParents(node.parent, expandedKeysList);
-  }
-}
-
-function hasSameProps(obj1: any, obj2: any) {
-  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;
-}