feat: add layers panel with blend modes, effects, and drag reorder

Implements the layer management panel for the image editor (Features 16, 40):
- Blend mode dropdown (16 modes) and opacity slider for active layer
- Layer list with visibility/lock toggles, thumbnails, and inline rename
- Pointer-based drag reorder (not HTML5 drag API)
- Right-click context menu: Duplicate, Merge Down, Flatten All, Delete
- Layer effects section: Drop Shadow, Inner Shadow, Outer Glow, Stroke
- Each effect with enable/disable toggle and full parameter controls
- Wired into EditorRightPanel as the "Layers" tab content
This commit is contained in:
SnapOtter
2026-05-06 23:22:24 +08:00
parent 9eae8369bb
commit fedb7bc2e3
2 changed files with 1012 additions and 2 deletions
@@ -2,6 +2,7 @@
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { useEditorStore } from "@/stores/editor-store";
import { LayersPanel } from "./panels/layers-panel";
const TABS = [
{ id: "layers" as const, label: "Layers" },
@@ -57,8 +58,8 @@ export function EditorRightPanel() {
</button>
</div>
<div className="flex-1 overflow-y-auto p-2">
{/* Tab content rendered by agents: layers-panel, adjustments-panel, history-panel */}
<div id={`editor-panel-${activeTab}`} />
{activeTab === "layers" && <LayersPanel />}
{activeTab !== "layers" && <div id={`editor-panel-${activeTab}`} />}
</div>
{/* Color panel always visible at bottom (Agent 5) */}
<div id="editor-color-panel" className="border-t border-border" />
File diff suppressed because it is too large Load Diff