From b252682509c1ab1f179c1c677e8baf3cbd45d774 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 29 Apr 2026 09:47:27 +0330
Subject: [PATCH] sort layers

---
 .gitignore                                 |  2 +-
 src/pages/editor/components/LayersList.tsx | 29 +++++++++++++++++++
 src/pages/editor/store/editorStore.ts      | 33 ++++++++++++++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 62f35cb..e3118db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-Archive.zip
\ No newline at end of file
+*.zip
\ No newline at end of file
diff --git a/src/pages/editor/components/LayersList.tsx b/src/pages/editor/components/LayersList.tsx
index 4ca97c4..082196a 100644
--- a/src/pages/editor/components/LayersList.tsx
+++ b/src/pages/editor/components/LayersList.tsx
@@ -16,6 +16,7 @@ import {
   MouseSquare,
   Sticker,
 } from 'iconsax-react'
+import { useState } from 'react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
 
@@ -27,7 +28,10 @@ const LayersList = () => {
     deleteObject,
     duplicateObject,
     toggleObjectVisibility,
+    reorderObjects,
   } = useEditorStore()
+  const [draggedObjectId, setDraggedObjectId] = useState<string | null>(null)
+  const [dragOverObjectId, setDragOverObjectId] = useState<string | null>(null)
 
   const getLayerIcon = (type: string) => {
     switch (type) {
@@ -121,8 +125,33 @@ const LayersList = () => {
               <div
                 key={obj.id}
                 onClick={() => setSelectedObjectId(obj.id)}
+                draggable
+                onDragStart={() => {
+                  setDraggedObjectId(obj.id)
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault()
+                  if (dragOverObjectId !== obj.id) {
+                    setDragOverObjectId(obj.id)
+                  }
+                }}
+                onDrop={(e) => {
+                  e.preventDefault()
+                  if (draggedObjectId && draggedObjectId !== obj.id) {
+                    reorderObjects(draggedObjectId, obj.id)
+                  }
+                  setDraggedObjectId(null)
+                  setDragOverObjectId(null)
+                }}
+                onDragEnd={() => {
+                  setDraggedObjectId(null)
+                  setDragOverObjectId(null)
+                }}
                 className={clx(
                   'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
+                  dragOverObjectId === obj.id &&
+                    draggedObjectId !== obj.id &&
+                    'ring-2 ring-blue-300',
                   isSelected
                     ? 'bg-blue-50 border border-blue-200'
                     : 'bg-gray-50 hover:bg-gray-100'
diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts
index 9411fa0..463fc4d 100644
--- a/src/pages/editor/store/editorStore.ts
+++ b/src/pages/editor/store/editorStore.ts
@@ -91,6 +91,7 @@ type EditorStoreType = {
   updateObject: (id: string, updates: Partial<EditorObject>) => void;
   deleteObject: (id: string) => void;
   duplicateObject: (id: string) => void;
+  reorderObjects: (draggedId: string, targetId: string) => void;
   selectedObjectId: string | null;
   setSelectedObjectId: (id: string | null) => void;
   selectedObjectIds: string[];
@@ -354,6 +355,38 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         selectedObjectId: duplicatedObject.id,
       }));
     },
+    reorderObjects: (draggedId, targetId) => {
+      if (draggedId === targetId) return;
+
+      const reorder = (items: EditorObject[]) => {
+        const fromIndex = items.findIndex((item) => item.id === draggedId);
+        const toIndex = items.findIndex((item) => item.id === targetId);
+
+        if (fromIndex === -1 || toIndex === -1) return items;
+
+        const nextItems = [...items];
+        const [movedItem] = nextItems.splice(fromIndex, 1);
+        nextItems.splice(toIndex, 0, movedItem);
+        return nextItems;
+      };
+
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: reorder(state.objects),
+          pages: state.pages.map((page) =>
+            page.id === state.currentPageId
+              ? { ...page, objects: reorder(page.objects) }
+              : page,
+          ),
+        }));
+        return;
+      }
+
+      set((state) => ({
+        objects: reorder(state.objects),
+      }));
+    },
     selectedObjectId: null,
     setSelectedObjectId: (id) => {
       set({