@file-viewer/renderer-data 2.1.13 → 2.1.15

package/dist/psd.js

@@ -81,15 +81,15 @@ const toCanvas = (documentRef, source) => {
     }
     return undefined;
 };
-const flattenLayers = (documentRef, layers, depth = 0, path = '') => {
+const buildLayerTree = (documentRef, layers, depth = 0, path = '') => {
     if (!Array.isArray(layers)) {
         return [];
     }
-    return layers.flatMap((layer, index) => {
+    return layers.map((layer, index) => {
         const name = String(layer.name || `Layer ${index + 1}`);
         const id = `${path}${index}`;
         const canvas = toCanvas(documentRef, layer.canvas || layer.imageData);
-        const item = {
+        return {
             id,
             name,
             depth,
@@ -98,11 +98,17 @@ const flattenLayers = (documentRef, layers, depth = 0, path = '') => {
             width: Math.max(0, Number(layer.right || 0) - Number(layer.left || 0)),
             height: Math.max(0, Number(layer.bottom || 0) - Number(layer.top || 0)),
             hidden: Boolean(layer.hidden),
-            canvas
+            canvas,
+            children: buildLayerTree(documentRef, layer.children, depth + 1, `${id}.`)
         };
-        return [item, ...flattenLayers(documentRef, layer.children, depth + 1, `${id}.`)];
     });
 };
+const flattenLayerTreeForDrawing = (layers) => {
+    return layers.flatMap(layer => [layer, ...flattenLayerTreeForDrawing(layer.children)]);
+};
+const flattenLayerTreeForPanel = (layers) => {
+    return layers.slice().reverse().flatMap(layer => [layer, ...flattenLayerTreeForPanel(layer.children)]);
+};
 const clampZoom = (value) => {
     return Math.min(4, Math.max(0.1, Number(value.toFixed(2))));
 };
@@ -112,7 +118,9 @@ export default async function renderPsdAsset(buffer, target, context) {
     const { readPsd } = await import('ag-psd');
     const psd = readPsd(buffer, { useImageData: true });
     const compositeCanvas = toCanvas(documentRef, psd.canvas || psd.imageData);
-    const layers = flattenLayers(documentRef, psd.children);
+    const layerTree = buildLayerTree(documentRef, psd.children);
+    const layers = flattenLayerTreeForDrawing(layerTree);
+    const panelLayers = flattenLayerTreeForPanel(layerTree);
     const drawableLayers = layers.filter(layer => layer.canvas);
     const selected = new Set(drawableLayers.filter(layer => !layer.hidden).map(layer => layer.id));
     let zoom = 1;
@@ -163,7 +171,7 @@ export default async function renderPsdAsset(buffer, target, context) {
             context.drawImage(compositeCanvas, 0, 0);
             return;
         }
-        visibleLayerCanvases.slice().reverse().forEach(layer => {
+        visibleLayerCanvases.forEach(layer => {
             if (layer.canvas) {
                 context.drawImage(layer.canvas, layer.left, layer.top);
             }
@@ -172,8 +180,10 @@ export default async function renderPsdAsset(buffer, target, context) {
     if (!layers.length) {
         list.appendChild(createElement(documentRef, 'li', 'psd-empty', t('psd.layers.empty')));
     }
-    layers.forEach(layer => {
+    panelLayers.forEach(layer => {
         const item = createElement(documentRef, 'li', 'psd-layer');
+        item.dataset.layerId = layer.id;
+        item.dataset.layerName = layer.name;
         item.style.paddingLeft = `${8 + layer.depth * 14}px`;
         const checkbox = createElement(documentRef, 'input');
         checkbox.type = 'checkbox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-data",
-  "version": "2.1.13",
+  "version": "2.1.15",
   "private": false,
   "type": "module",
   "description": "Standalone data asset renderer plugin for Flyfish File Viewer with PSD, SQLite, Parquet, Avro, WASM, font, AI/EPS, and WebArchive previews.",
@@ -57,7 +57,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "^2.1.13",
+    "@file-viewer/core": "^2.1.15",
     "ag-psd": "^30.1.1",
     "avsc": "^5.7.9",
     "hyparquet": "^1.26.0",