comptree

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -106,7 +106,10 @@ export const CompTree = defineComponent({
           parentComp?.children.default?.push(currComp?.id);
         }
         if (currParent?.id != parentComp.id) {
-          sortCompInCard(parentComp, 0);
+          const len = parentComp?.children.default?.length;
+          const index = currComp.compKey == "Container" ? 0 : len - 1;
+          const revert = currComp.compKey == "Container" ? false : true;
+          sortCompInCard(parentComp, index, revert);
         }
       } else {
         if (currComp.compKey == "Container") {
@@ -125,7 +128,8 @@ export const CompTree = defineComponent({
         }
 
         if (currParent?.id != parentComp.id) {
-          sortCompInCard(parentComp, info.dropPosition);
+          const revert = currComp.compKey == "Container" ? false : true;
+          sortCompInCard(parentComp, info.dropPosition, revert);
         }
       }
       nextTick(() => {
@@ -133,13 +137,17 @@ export const CompTree = defineComponent({
         helper.extendStreamCard(parentComp.id);
       });
     };
-    const sortCompInCard = (parentComp: DesignComp, index: number) => {
+    const sortCompInCard = (
+      parentComp: DesignComp,
+      index: number,
+      revert = false
+    ) => {
       if (parentComp?.compKey != "Container") {
         return;
       }
       const children = parentComp.children.default || [];
       if (children?.length > 0) {
-        const prveCompId = children[index - 1];
+        const prveCompId = revert ? children[index + 1] : children[index - 1];
         const nowCompId = children[index];
         const nowComp = helper.findComp(nowCompId);
         if (!prveCompId) {
@@ -175,7 +183,8 @@ export const CompTree = defineComponent({
           draggable={true}
           onDrop={onDrop}
           onSelect={(ids) => {
-          const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
+            const id =
+              (ids[0] as string) || state.expandedKeys.at(-2) || "root";
             actions.pickComp(id);
           }}
         >
@@ -211,7 +220,9 @@ const CompNode = defineComponent({
       return (
         <div class={nodeStyle}>
           <Image src={thumbnail} size={240} />
-          <span class="w-1/1 flex-1 whitespace-nowrap mr-30px">{props.title}</span>
+          <span class="w-1/1 flex-1 whitespace-nowrap mr-30px">
+            {props.title}
+          </span>
           <span class="space-x-4px whitespace-nowrap">
             {actions.map((action, i) =>
               action.getVisible.call(editor, comp) ? (