layer panel with took left
This commit is contained in:
hamid zarghami
@@ -1,6 +1,9 @@
|
||||
import { DocumentText, Layer, Eye, EyeSlash, Lock1, Lock, Trash, ArrowRight2, Text, Shapes } from 'iconsax-react'
|
||||
import { DocumentText, Layer, Eye, Lock, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
|
||||
import { useEditorStore } from '../store/editorStore'
|
||||
import { clx } from '@/helpers/utils'
|
||||
import { useState } from 'react'
|
||||
|
||||
type TabType = 'pages' | 'layers'
|
||||
|
||||
type LayersPanelProps = {
|
||||
isOpen: boolean
|
||||
@@ -8,7 +11,16 @@ type LayersPanelProps = {
|
||||
}
|
||||
|
||||
const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('pages')
|
||||
const { objects, selectedObjectId, setSelectedObjectId, deleteObject } = useEditorStore()
|
||||
const {
|
||||
pages,
|
||||
currentPageId,
|
||||
setCurrentPage,
|
||||
addPage,
|
||||
duplicatePage,
|
||||
deletePage,
|
||||
} = useEditorStore()
|
||||
|
||||
const getLayerIcon = (type: string) => {
|
||||
switch (type) {
|
||||
@@ -36,19 +48,39 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddPage = () => {
|
||||
addPage()
|
||||
}
|
||||
|
||||
const handleDuplicatePage = (pageId: string) => {
|
||||
duplicatePage(pageId)
|
||||
}
|
||||
|
||||
const handleDeletePage = (pageId: string) => {
|
||||
if (pages.length > 1) {
|
||||
deletePage(pageId)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) {
|
||||
return (
|
||||
<div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
|
||||
<div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||||
onClick={() => {
|
||||
setActiveTab('pages')
|
||||
setIsOpen(true)
|
||||
}}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<DocumentText size={24} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||||
onClick={() => {
|
||||
setActiveTab('layers')
|
||||
setIsOpen(true)
|
||||
}}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Layer size={24} color="black" />
|
||||
</button>
|
||||
@@ -58,78 +90,172 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
|
||||
<div className="bg-white rounded-t-[32px] rounded-b-[32px] flex flex-col h-full">
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ArrowRight2 size={20} color="black" />
|
||||
</button>
|
||||
<h2 className="text-lg font-medium">لایه ها</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
|
||||
<div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveTab('pages')
|
||||
}}
|
||||
className={clx(
|
||||
'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
|
||||
activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
|
||||
)}
|
||||
>
|
||||
<DocumentText size={24} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveTab('layers')
|
||||
}}
|
||||
className={clx(
|
||||
'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
|
||||
activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
|
||||
)}
|
||||
>
|
||||
<Layer size={24} color="black" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
{objects.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
لایهای وجود ندارد
|
||||
</div>
|
||||
) : (
|
||||
objects.map((obj) => {
|
||||
const isSelected = selectedObjectId === obj.id
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => setSelectedObjectId(obj.id)}
|
||||
className={clx(
|
||||
'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
|
||||
isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
{getLayerIcon(obj.type)}
|
||||
</div>
|
||||
<div className="flex-1 text-sm font-medium">
|
||||
{getLayerLabel(obj.type)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
// TODO: Toggle visibility
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Eye size={16} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
// TODO: Toggle lock
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Lock size={16} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
deleteObject(obj.id)
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
|
||||
>
|
||||
<Trash size={16} color="#FF3B30" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
<div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
|
||||
<div className="bg-white rounded-r-4xl flex flex-col h-full">
|
||||
<div className="flex items-center justify-between p-4 border-b border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<ArrowRight2 size={20} color="black" />
|
||||
</button>
|
||||
<h2 className="text-lg font-medium">
|
||||
{activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'pages' ? (
|
||||
<>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
{pages.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
صفحهای وجود ندارد
|
||||
</div>
|
||||
) : (
|
||||
pages.map((page) => {
|
||||
const isSelected = currentPageId === page.id
|
||||
return (
|
||||
<div
|
||||
key={page.id}
|
||||
onClick={() => setCurrentPage(page.id)}
|
||||
className={clx(
|
||||
'flex flex-col gap-2 p-3 rounded-lg cursor-pointer transition-colors',
|
||||
isSelected
|
||||
? 'bg-blue-50 border border-blue-200'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
<div className="w-full aspect-4/3 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<DocumentText size={32} color="#666" />
|
||||
</div>
|
||||
<div className="text-sm font-medium text-center">
|
||||
{page.name}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-border bg-gray-50 rounded-b-[32px]">
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<button
|
||||
onClick={handleAddPage}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
|
||||
>
|
||||
<Add size={20} color="black" />
|
||||
</button>
|
||||
{currentPageId && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleDuplicatePage(currentPageId)}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
|
||||
>
|
||||
<Copy size={20} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePage(currentPageId)}
|
||||
disabled={pages.length <= 1}
|
||||
className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-red-100 transition-colors border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Trash size={20} color="#FF3B30" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
{objects.length === 0 ? (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
لایهای وجود ندارد
|
||||
</div>
|
||||
) : (
|
||||
objects.map((obj) => {
|
||||
const isSelected = selectedObjectId === obj.id
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => setSelectedObjectId(obj.id)}
|
||||
className={clx(
|
||||
'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
|
||||
isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
<div className="shrink-0">
|
||||
{getLayerIcon(obj.type)}
|
||||
</div>
|
||||
<div className="flex-1 text-sm font-medium">
|
||||
{getLayerLabel(obj.type)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
// TODO: Toggle visibility
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Eye size={16} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
// TODO: Toggle lock
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Lock size={16} color="black" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
deleteObject(obj.id)
|
||||
}}
|
||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
|
||||
>
|
||||
<Trash size={16} color="#FF3B30" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user