- {#each [...layers].reverse() as L (L.id)}
- {@const i = layers.indexOf(L)}
-
-
-
{:else}
@@ -4760,23 +5259,19 @@
clickLayer(i, e)}
- oncontextmenu={(e) => { e.preventDefault(); if (!selectedIds.includes(L.id)) clickLayer(i, e); layerMenu = { x: e.clientX, y: e.clientY, i }; }}
- ondragover={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; dragOverId = L.id; }}
- ondragleave={() => { if (dragOverId === L.id) dragOverId = null; }}
- ondrop={(e) => { e.preventDefault(); dropLayer(L.id); }}>
- { dragId = L.id; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(L.id)); }}
- ondragend={() => { dragId = null; dragOverId = null; }}>⠿
- { e.stopPropagation(); setLayerVisible(i, !L.visible); }}>{L.visible ? "👁" : "—"}
- {#if renamingId === L.id}
-
- e.stopPropagation()}
- onkeydown={(e) => {
- e.stopPropagation();
- if (e.key === "Enter") commitRename();
- else if (e.key === "Escape") renamingId = null;
- }}
- onblur={commitRename} />
- {:else}
- { e.stopPropagation(); startRename(L); }}>{L.name}{#if L.mask}▦{/if}{#if layerBlendCss(L)}{L.blend}{/if}
- {/if}
- { opacityDragStart = L.opacity; }}
- oninput={(e) => setLayerOpacity(i, +e.currentTarget.value)}
- onchange={(e) => { if (opacityDragStart === null || +e.currentTarget.value !== opacityDragStart) commitAction("Opacity"); opacityDragStart = null; }}
- onclick={(e) => e.stopPropagation()} title="Opacity" />
-
+ {#each panelRows as row (row.type === "group" ? "g" + row.group.id : row.L.id)}
+ {#if row.type === "group"}
+ {@const g = row.group}
+
+
+ toggleGroupCollapsed(g.id)}>{g.collapsed ? "▸" : "▾"}
+ setGroupVisible(g.id, !g.visible)}>{g.visible ? "👁" : "—"}
+ {#if renamingGroupId === g.id}
+
+ e.stopPropagation()}
+ onkeydown={(e) => { e.stopPropagation(); if (e.key === "Enter") commitGroupRename(); else if (e.key === "Escape") renamingGroupId = null; }}
+ onblur={commitGroupRename} />
+ {:else}
+ { e.stopPropagation(); startGroupRename(g); }}>📁 {g.name}
+ {/if}
+ { opacityDragStart = g.opacity; }}
+ oninput={(e) => setGroupOpacity(g.id, +e.currentTarget.value)}
+ onchange={(e) => { if (opacityDragStart === null || +e.currentTarget.value !== opacityDragStart) commitAction("Group Opacity"); opacityDragStart = null; }}
+ onclick={(e) => e.stopPropagation()} title="Group opacity" />
+
+
+ {:else}
+ {@const L = row.L}
+ {@const i = row.i}
+
+
+ clickLayer(i, e)}
+ oncontextmenu={(e) => { e.preventDefault(); if (!selectedIds.includes(L.id)) clickLayer(i, e); layerMenu = { x: e.clientX, y: e.clientY, i, flip: e.clientX > window.innerWidth - 340 }; }}
+ ondragover={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; dragOverId = L.id; }}
+ ondragleave={() => { if (dragOverId === L.id) dragOverId = null; }}
+ ondrop={(e) => { e.preventDefault(); dropLayer(L.id); }}>
+ { dragId = L.id; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(L.id)); }}
+ ondragend={() => { dragId = null; dragOverId = null; }}>⠿
+ { e.stopPropagation(); setLayerVisible(i, !L.visible); }}>{L.visible ? "👁" : "—"}
+ {#if L.mask}
+
+ 
{ e.stopPropagation(); toggleMaskEdit(i); }} />
+ {/if}
+ {#if renamingId === L.id}
+
+ e.stopPropagation()}
+ onkeydown={(e) => {
+ e.stopPropagation();
+ if (e.key === "Enter") commitRename();
+ else if (e.key === "Escape") renamingId = null;
+ }}
+ onblur={commitRename} />
+ {:else}
+ { e.stopPropagation(); startRename(L); }}>{L.name}{#if L.blend && L.blend !== "normal"}{L.blend}{/if}
+ {/if}
+ { opacityDragStart = L.opacity; }}
+ oninput={(e) => setLayerOpacity(i, +e.currentTarget.value)}
+ onchange={(e) => { if (opacityDragStart === null || +e.currentTarget.value !== opacityDragStart) commitAction("Opacity"); opacityDragStart = null; }}
+ onclick={(e) => e.stopPropagation()} title="Opacity" />
+
+ {/if}
{/each}