fix: keep folder fold status when drag order

(cherry picked from commit 0e203a30159eed77375bffecf21d78ae6213fc96)

Author: sarike

client/packages/openblocks/src/components/DraggableTree/DraggableItem.tsx

@@ -21,7 +21,6 @@ const Wrapper = styled.div<{
   margin-bottom: ${(props) => props.positionLineHeight ?? 4}px;
   display: flex;
   /* padding: 0 8px; */
-  background-color: #ffffff;
   align-items: center;
   opacity: ${(props) => (props.dragging ? "0.5" : 1)};
 

client/packages/openblocks/src/components/DraggableTree/DraggableTree.tsx

@@ -8,7 +8,7 @@ import {
   useSensors,
 } from "@dnd-kit/core";
 import _ from "lodash";
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
 import { DraggableTreeContext, DraggableTreeContextValue } from "./DraggableTreeContext";
 import DraggableMenuItem from "./DroppableMenuItem";
@@ -130,7 +130,8 @@ function MenuItemList(props: IMenuItemListProps) {
         <DragOverlay dropAnimation={null}>
           {active && (
             <DraggableMenuItem
-              defaultFold={contextValue.showSubInDragOverlay === false}
+              isOverlay
+              forceFold={contextValue.showSubInDragOverlay === false}
               path={[]}
               item={active.node}
               renderContent={renderItemContent}
@@ -142,13 +143,15 @@ function MenuItemList(props: IMenuItemListProps) {
   );
 }
 
-interface DraggableTreeProps<T = any> extends DraggableTreeContextValue {
+interface DraggableTreeProps<T = any>
+  extends Omit<DraggableTreeContextValue, "foldedStatus" | "toggleFold"> {
   node: DraggableTreeNode<T>;
   renderItemContent: (params: DraggableTreeNodeItemRenderProps<T>) => React.ReactNode;
 }
 
 export function DraggableTree<T = any>(props: DraggableTreeProps<T>) {
-  const { node, renderItemContent, ...contextValue } = props;
+  const { node, renderItemContent, ...otherProps } = props;
+  const [foldedStatus, setFoldedState] = useState<Record<string, boolean>>({});
 
   const getItemByPath = (path: number[], scope?: DraggableTreeNode[]): DraggableTreeNode => {
     if (!scope) {
@@ -170,6 +173,24 @@ export function DraggableTree<T = any>(props: DraggableTreeProps<T>) {
     return getItemListByPath(path.slice(1), root.items[path[0]]);
   };
 
+  const toggleFold = (id: string) => {
+    // toggle setFoldedState by id in foldedStatus
+    setFoldedState((prev) => {
+      const newFoldedStatus: Record<string, boolean> = { ...prev };
+      newFoldedStatus[id] = !newFoldedStatus[id];
+      return newFoldedStatus;
+    });
+  };
+
+  const contextValue = useMemo<DraggableTreeContextValue>(
+    () => ({
+      ...otherProps,
+      toggleFold,
+      foldedStatus,
+    }),
+    [foldedStatus, otherProps]
+  );
+
   return (
     <DraggableTreeContext.Provider value={contextValue}>
       <MenuItemList

client/packages/openblocks/src/components/DraggableTree/DraggableTreeContext.tsx

@@ -2,11 +2,18 @@ import React from "react";
 
 export interface DraggableTreeContextValue {
   disable?: boolean;
+  unfoldAll?: boolean;
   itemHeight?: number;
   positionLineHeight?: number;
   showPositionLineDot?: boolean;
   positionLineDotDiameter?: number;
   showSubInDragOverlay?: boolean;
   positionLineIndent?(path: number[], dropInAsSub: boolean): number;
+
+  toggleFold(id: string): void;
+  foldedStatus: Record<string, boolean>;
 }
-export const DraggableTreeContext = React.createContext<DraggableTreeContextValue>({});
+export const DraggableTreeContext = React.createContext<DraggableTreeContextValue>({
+  toggleFold: () => {},
+  foldedStatus: {},
+});

client/packages/openblocks/src/components/DraggableTree/DroppableMenuItem.tsx

@@ -1,5 +1,5 @@
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { Fragment, useContext, useState } from "react";
+import { Fragment, useContext } from "react";
 import styled from "styled-components";
 import DraggableItem from "./DraggableItem";
 import { DraggableTreeContext } from "./DraggableTreeContext";
@@ -14,10 +14,12 @@ const DraggableMenuItemWrapper = styled.div`
 interface IDraggableMenuItemProps {
   path: number[];
   item: DraggableTreeNode;
-  defaultFold?: boolean;
+  forceFold?: boolean;
   dropInAsSub?: boolean;
   activeNode?: DraggableTreeNode;
   disabled?: boolean;
+  // current item is used as overlay or not
+  isOverlay?: boolean;
   disableDropIn?: boolean;
   parentDragging?: boolean;
   onDelete?: (path: number[]) => void;
@@ -33,17 +35,18 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
     disabled,
     parentDragging,
     disableDropIn,
-    defaultFold = false,
+    forceFold = false,
     dropInAsSub = true,
+    isOverlay = false,
     // onAddSubMenu,
     onDelete,
     renderContent,
   } = props;
 
-  const id = path.join("_");
+  const id = item.id ?? path.join("_");
   const items = item.items;
-  const [isFold, setIsFold] = useState(defaultFold);
   const context = useContext(DraggableTreeContext);
+  const isFold = (forceFold || context.foldedStatus[id]) && !context.unfoldAll;
 
   const dragData: IDragData = {
     path,
@@ -87,7 +90,7 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
         )}
         <DraggableItem
           path={path}
-          id={path.join("_")}
+          id={id}
           dropInAsSub={dropInAsSub && canDropIn !== false}
           isOver={isOver}
           ref={(node) => {
@@ -100,11 +103,12 @@ export default function DraggableMenuItem(props: IDraggableMenuItemProps) {
             node: item,
             isOver,
             path,
+            isOverlay,
             hasChildren: items.length > 0,
             dragging: !!(isDragging || parentDragging),
             isFolded: isFold,
             onDelete: () => onDelete?.(path),
-            onToggleFold: () => setIsFold(!isFold),
+            onToggleFold: () => context.toggleFold(id),
           }) || null}
         </DraggableItem>
       </DraggableMenuItemWrapper>

client/packages/openblocks/src/components/DraggableTree/types.ts

@@ -4,11 +4,14 @@ export interface DraggableTreeNodeItemRenderProps<T = any> {
   dragging: boolean;
   isOver: boolean;
   isFolded: boolean;
+  isOverlay: boolean;
   hasChildren: boolean;
   onDelete: () => void;
   onToggleFold: () => void;
 }
 export interface DraggableTreeNode<T = any> {
+  // identity a node, will be used to save fold status
+  id?: string;
   data?: T;
   canDropIn?: boolean | ((source: T) => boolean);
   canDropBefore?: boolean | ((source?: T) => boolean);

client/packages/openblocks/src/comps/comps/jsonComp/jsonEditorComp.tsx

@@ -19,6 +19,7 @@ import {
   type EditorView as EditorViewType,
 } from "base/codeEditor/codeMirror";
 import { useExtensions } from "base/codeEditor/extensions";
+import { getJsonFormatter } from "base/codeEditor/autoFormat";
 
 /**
  * JsonEditor Comp

client/packages/openblocks/src/pages/editor/bottom/BottomSidebar.tsx

@@ -149,6 +149,7 @@ export function BottomSidebar(props: BottomSidebarProps) {
       .map((i) => convertRefTree(i as InstanceType<typeof RefTreeComp>))
       .filter((i): i is DraggableTreeNode<BottomResComp> => !!i);
     const node: DraggableTreeNode<BottomResComp> = {
+      id: bottomResComp?.id(),
       canDropBefore: (source) => {
         if (currentNodeType === BottomResTypeEnum.Folder) {
           return source?.type() === BottomResTypeEnum.Folder;
@@ -262,10 +263,11 @@ export function BottomSidebar(props: BottomSidebarProps) {
       )}
       <ScrollBar>
         {items.length > 0 && node ? (
-          <div style={{ paddingTop: 4, paddingBottom: 16 }}>
+          <div style={{ paddingTop: 4, paddingBottom: 100, overflow: "hidden" }}>
             <DraggableTree<BottomResComp>
               node={node}
               disable={!!search}
+              unfoldAll={!!search}
               showSubInDragOverlay={false}
               showPositionLineDot
               positionLineDotDiameter={4}
@@ -314,7 +316,12 @@ export function BottomSidebar(props: BottomSidebarProps) {
   );
 }
 
-const ColumnDiv = styled.div<{ $color?: boolean; level: number; foldable: boolean }>`
+const ColumnDiv = styled.div<{
+  $color?: boolean;
+  level: number;
+  foldable: boolean;
+  isOverlay: boolean;
+}>`
   width: 100%;
   height: 25px;
   display: flex;
@@ -323,11 +330,12 @@ const ColumnDiv = styled.div<{ $color?: boolean; level: number; foldable: boolea
   justify-content: center;
   padding: 0 15px 0 2px;
   padding-left: ${(props) => 2 + props.level * 20 + (props.foldable ? 0 : 14)}px;
-  background-color: #ffffff;
+  /* background-color: #ffffff; */
   /* margin: 2px 0; */
+  background-color: ${(props) => (props.isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
 
   &&& {
-    background-color: ${(props) => (props.$color ? "#f2f7fc" : null)};
+    background-color: ${(props) => (props.$color && !props.isOverlay ? "#f2f7fc" : null)};
   }
 
   :hover {
@@ -342,6 +350,7 @@ const ColumnDiv = styled.div<{ $color?: boolean; level: number; foldable: boolea
     color: #222222;
     margin-left: 0;
     font-size: 13px;
+    padding-left: 0;
 
     :hover {
       background-color: transparent;
@@ -394,7 +403,8 @@ interface BottomSidebarItemProps extends DraggableTreeNodeItemRenderProps {
 }
 
 function BottomSidebarItem(props: BottomSidebarItemProps) {
-  const { id, resComp, path, isFolded, onDelete, onCopy, onSelect, onToggleFold } = props;
+  const { id, resComp, isOverlay, path, isFolded, onDelete, onCopy, onSelect, onToggleFold } =
+    props;
   const [error, setError] = useState<string | undefined>(undefined);
   const [editing, setEditing] = useState(false);
   const editorState = useContext(EditorContext);
@@ -441,14 +451,20 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
   };
 
   return (
-    <ColumnDiv level={level} foldable={isFolder} onClick={handleClickItem} $color={isSelected}>
+    <ColumnDiv
+      level={level}
+      foldable={isFolder}
+      onClick={handleClickItem}
+      $color={isSelected}
+      isOverlay={isOverlay}
+    >
       {isFolder && <FoldIconBtn>{!isFolded ? <FoldedIcon /> : <UnfoldIcon />}</FoldIconBtn>}
       {icon}
       <div style={{ flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }}>
         <EditText
           text={name}
           forceClickIcon={isFolder}
-          disabled={!isSelected || readOnly}
+          disabled={!isSelected || readOnly || isOverlay}
           onFinish={handleFinishRename}
           onChange={handleNameChange}
           onEditStateChange={(editing) => setEditing(editing)}
@@ -460,7 +476,7 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
           hasError={!!error}
         />
       </div>
-      {!readOnly && (
+      {!readOnly && !isOverlay && (
         <EditPopover copy={!isFolder ? onCopy : undefined} del={onDelete}>
           <Icon tabIndex={-1} />
         </EditPopover>