@alpaca-editor/core 1.0.0

package/src/editor/sidebar/ComponentTree.tsx

@@ -0,0 +1,512 @@
+"use client";
+
+import { useEditContext, useEditContextRef } from "../client/editContext";
+
+import { 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: string;
+    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[]>([]);
+
+  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) {
+      setSelectedKeys(editContext.selection);
+    }
+  }, [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.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: "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.datasourceItem && c.datasourceItem?.id !== c.id) {
+      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 = (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]);
+    }
+  };
+
+  // Handle tree context menu
+  const handleTreeContextMenu = (item: any, event: React.MouseEvent) => {
+    const componentId = nodeDictionary[item.id]?.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 && item.data) {
+      selectedEntities = [item.data];
+    }
+
+    let commands = 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;
+
+  // Handle expanding nodes
+  const handleToggle = (key: string) => {
+    if (expandedKeys.includes(key)) {
+      handleCollapseItem(key);
+    } else {
+      const newExpandedKeys = [...expandedKeys];
+      newExpandedKeys.push(key);
+      setExpandedKeys(newExpandedKeys);
+    }
+  };
+
+  // Handle collapsing nodes
+  const handleCollapseItem = (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);
+  };
+
+  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);
+    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}
+        enableDragAndDrop={true}
+        onDragOverZone={(parent, index, event) =>
+          handleDragOverZone(parent as CustomTreeNode | null, index, event)
+        }
+        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;
+
+          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,
+            },
+          });
+        }}
+        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="font-geist-sans flex items-center gap-2 p-0.5 text-[12px] text-gray-600">
+        <i className={node.icon}></i>
+        <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;
+}