mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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:
@@ -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
Reference in New Issue
Block a user