split components layers and pages
This commit is contained in:
hamid zarghami
@@ -0,0 +1,102 @@
|
|||||||
|
import { Text, Shapes, Eye, Copy, Trash } from 'iconsax-react'
|
||||||
|
import { useEditorStore } from '../store/editorStore'
|
||||||
|
import { clx } from '@/helpers/utils'
|
||||||
|
|
||||||
|
const LayersList = () => {
|
||||||
|
const {
|
||||||
|
objects,
|
||||||
|
selectedObjectId,
|
||||||
|
setSelectedObjectId,
|
||||||
|
deleteObject,
|
||||||
|
duplicateObject,
|
||||||
|
} = useEditorStore()
|
||||||
|
|
||||||
|
const getLayerIcon = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'text':
|
||||||
|
return <Text size={20} color="black" />
|
||||||
|
case 'rectangle':
|
||||||
|
case 'image':
|
||||||
|
case 'grid':
|
||||||
|
return <Shapes size={20} color="black" />
|
||||||
|
default:
|
||||||
|
return <Shapes size={20} color="black" />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLayerLabel = (type: string) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'text':
|
||||||
|
return 'متن'
|
||||||
|
case 'rectangle':
|
||||||
|
case 'image':
|
||||||
|
case 'grid':
|
||||||
|
return 'اشکال هندسی'
|
||||||
|
default:
|
||||||
|
return 'لایه'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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-xs">{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()
|
||||||
|
duplicateObject(obj.id)
|
||||||
|
}}
|
||||||
|
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
||||||
|
>
|
||||||
|
<Copy 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LayersList
|
||||||
|
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
import { DocumentText, Layer, Eye, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
|
import { DocumentText, Layer, ArrowRight2 } from 'iconsax-react'
|
||||||
import { useEditorStore } from '../store/editorStore'
|
|
||||||
import { clx } from '@/helpers/utils'
|
import { clx } from '@/helpers/utils'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import PagesPanel from './PagesPanel'
|
||||||
|
import LayersList from './LayersList'
|
||||||
|
|
||||||
type TabType = 'pages' | 'layers'
|
type TabType = 'pages' | 'layers'
|
||||||
|
|
||||||
@@ -12,55 +13,6 @@ type LayersPanelProps = {
|
|||||||
|
|
||||||
const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('pages')
|
const [activeTab, setActiveTab] = useState<TabType>('pages')
|
||||||
const { objects, selectedObjectId, setSelectedObjectId, deleteObject, duplicateObject } = useEditorStore()
|
|
||||||
const {
|
|
||||||
pages,
|
|
||||||
currentPageId,
|
|
||||||
setCurrentPage,
|
|
||||||
addPage,
|
|
||||||
duplicatePage,
|
|
||||||
deletePage,
|
|
||||||
} = useEditorStore()
|
|
||||||
|
|
||||||
const getLayerIcon = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'text':
|
|
||||||
return <Text size={20} color="black" />
|
|
||||||
case 'rectangle':
|
|
||||||
case 'image':
|
|
||||||
case 'grid':
|
|
||||||
return <Shapes size={20} color="black" />
|
|
||||||
default:
|
|
||||||
return <Shapes size={20} color="black" />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLayerLabel = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'text':
|
|
||||||
return 'متن'
|
|
||||||
case 'rectangle':
|
|
||||||
case 'image':
|
|
||||||
case 'grid':
|
|
||||||
return 'اشکال هندسی'
|
|
||||||
default:
|
|
||||||
return 'لایه'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddPage = () => {
|
|
||||||
addPage()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDuplicatePage = (pageId: string) => {
|
|
||||||
duplicatePage(pageId)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDeletePage = (pageId: string) => {
|
|
||||||
if (pages.length > 1) {
|
|
||||||
deletePage(pageId)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
return (
|
return (
|
||||||
@@ -135,131 +87,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeTab === 'pages' ? (
|
{activeTab === 'pages' ? <PagesPanel /> : <LayersList />}
|
||||||
<>
|
|
||||||
<div className="flex-1 overflow-y-auto p-4">
|
|
||||||
<div className="flex flex-col gap-3 items-center">
|
|
||||||
{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 cursor-pointer transition-colors',
|
|
||||||
isSelected && ' rounded-lg p-0.5'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={clx(
|
|
||||||
"w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center",
|
|
||||||
isSelected && 'border border-black'
|
|
||||||
)}>
|
|
||||||
<DocumentText size={20} color="#000" variant="Outline" />
|
|
||||||
</div>
|
|
||||||
<div className="text-xs font-medium text-center text-black">
|
|
||||||
{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()
|
|
||||||
duplicateObject(obj.id)
|
|
||||||
}}
|
|
||||||
className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
|
|
||||||
>
|
|
||||||
<Copy 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,99 @@
|
|||||||
|
import { DocumentText, Copy, Trash, AddSquare } from 'iconsax-react'
|
||||||
|
import { useEditorStore } from '../store/editorStore'
|
||||||
|
import { clx } from '@/helpers/utils'
|
||||||
|
|
||||||
|
const PagesPanel = () => {
|
||||||
|
const {
|
||||||
|
pages,
|
||||||
|
currentPageId,
|
||||||
|
setCurrentPage,
|
||||||
|
addPage,
|
||||||
|
duplicatePage,
|
||||||
|
deletePage,
|
||||||
|
} = useEditorStore()
|
||||||
|
|
||||||
|
const handleAddPage = () => {
|
||||||
|
addPage()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDuplicatePage = (pageId: string) => {
|
||||||
|
duplicatePage(pageId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeletePage = (pageId: string) => {
|
||||||
|
if (pages.length > 1) {
|
||||||
|
deletePage(pageId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
<div className="flex flex-col gap-3 items-center">
|
||||||
|
{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 cursor-pointer transition-colors',
|
||||||
|
isSelected && ' rounded-lg p-0.5'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={clx(
|
||||||
|
'w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center',
|
||||||
|
isSelected && 'border border-black'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<DocumentText size={20} color="#000" variant="Outline" />
|
||||||
|
</div>
|
||||||
|
<div className="text-xs font-medium text-center text-black">
|
||||||
|
{page.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 border-t border-border 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 "
|
||||||
|
>
|
||||||
|
<AddSquare 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 "
|
||||||
|
>
|
||||||
|
<Copy size={20} color="black" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeletePage(currentPageId)}
|
||||||
|
disabled={pages.length <= 1}
|
||||||
|
className="w-10 h-10 flex items-center hover:bg-gray-100 justify-center rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<Trash size={20} color="#FF3B30" />
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PagesPanel
|
||||||
|
|
||||||
Reference in New Issue
Block a user