cyberia 2.89.2 → 2.89.45

package/src/client/components/core/ObjectLayerEngineViewer.js

@@ -1,11 +1,15 @@
 import { loggerFactory } from './Logger.js';
-import { getProxyPath, listenQueryPathInstance } from './Router.js';
+import { getProxyPath, listenQueryPathInstance, setPath, setQueryParams } from './Router.js';
 import { ObjectLayerService } from '../../services/object-layer/object-layer.service.js';
 import { NotificationManager } from './NotificationManager.js';
 import { htmls, s } from './VanillaJs.js';
-import { BtnIcon } from './BtnIcon.js';
+
 import { darkTheme, ThemeEvents } from './Css.js';
-import { ObjectLayerCyberiaPortal } from '../cyberia-portal/ObjectLayerCyberiaPortal.js';
+import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
+import { ObjectLayerEngineModal } from './ObjectLayerEngineModal.js';
+import { Modal } from './Modal.js';
+import { DefaultManagement } from '../../services/default/default.management.js';
+import { AgGrid } from './AgGrid.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -15,12 +19,8 @@ const ObjectLayerEngineViewer = {
     frameCounts: null,
     currentDirection: 'down',
     currentMode: 'idle',
-    gif: null,
-    gifWorkerBlob: null,
+    webp: null,
     isGenerating: false,
-    // Binary transparency settings for GIF export
-    gifTransparencyPlaceholder: { r: 100, g: 100, b: 100 }, // magenta - unlikely to exist in sprites
-    transparencyThreshold: 16, // alpha threshold (0-255) for binary transparency
   },
 
   // Map user-friendly direction/mode to numeric direction codes
@@ -39,24 +39,13 @@ const ObjectLayerEngineViewer = {
     return directionCodeMap[key] || null;
   },
 
-  // Get all possible direction names for a direction code
-  getDirectionsFromDirectionCode: function (directionCode) {
-    const directionMap = {
-      '08': ['down_idle', 'none_idle', 'default_idle'],
-      18: ['down_walking'],
-      '02': ['up_idle'],
-      12: ['up_walking'],
-      '04': ['left_idle', 'up_left_idle', 'down_left_idle'],
-      14: ['left_walking', 'up_left_walking', 'down_left_walking'],
-      '06': ['right_idle', 'up_right_idle', 'down_right_idle'],
-      16: ['right_walking', 'up_right_walking', 'down_right_walking'],
-    };
-    return directionMap[directionCode] || [];
-  },
-
   Render: async function ({ Elements }) {
     const id = 'object-layer-engine-viewer';
 
+    Modal.Data[`modal-${id}`].onReloadModalListener[id] = async () => {
+      ObjectLayerEngineViewer.Reload({ Elements });
+    };
+
     // Listen for cid query parameter
     listenQueryPathInstance(
       {
@@ -64,34 +53,15 @@ const ObjectLayerEngineViewer = {
         routeId: 'object-layer-engine-viewer',
         event: async (cid) => {
           if (cid) {
-            await this.loadObjectLayer(cid);
+            await this.loadObjectLayer(cid, Elements);
           } else {
-            this.renderEmpty();
+            this.renderEmpty({ Elements });
           }
         },
       },
       'cid',
     );
 
-    setTimeout(async () => {
-      htmls(
-        `#${id}`,
-        html` <div class="inl section-mp">
-          <div class="in">
-            <div class="fl">
-              <div class="in fll">
-                ${await BtnIcon.Render({
-                  class: 'section-mp main-button',
-                  label: html`<i class="fa-solid fa-arrow-left"></i> ${' Back'}`,
-                  attrs: `data-id="btn-back"`,
-                })}
-              </div>
-            </div>
-          </div>
-        </div>`,
-      );
-    });
-
     return html`
       <div class="fl">
         <div class="in ${id}" id="${id}">
@@ -103,12 +73,24 @@ const ObjectLayerEngineViewer = {
     `;
   },
 
-  renderEmpty: async function () {
+  renderEmpty: async function ({ Elements }) {
     const id = 'object-layer-engine-viewer';
-    htmls(`#${id}`, await ObjectLayerCyberiaPortal.Render());
+    const idModal = 'modal-object-layer-engine-viewer';
+    const serviceId = 'object-layer-engine-management';
+    const gridId = `${serviceId}-grid-${idModal}`;
+    if (s(`.${serviceId}-grid-${idModal}`) && AgGrid.grids[gridId])
+      await DefaultManagement.loadTable(idModal, { reload: true });
+    else
+      htmls(
+        `#${id}`,
+        await ObjectLayerManagement.RenderTable({
+          Elements,
+          idModal,
+        }),
+      );
   },
 
-  loadObjectLayer: async function (objectLayerId) {
+  loadObjectLayer: async function (objectLayerId, Elements) {
     const id = 'object-layer-engine-viewer';
 
     try {
@@ -129,18 +111,18 @@ const ObjectLayerEngineViewer = {
       }
 
       this.Data.frameCounts = frameData.frameCounts;
-
-      // Auto-select first available direction/mode combination
-      this.selectFirstAvailableDirectionMode();
+      // Priority order for directions
+      const directions = ['down', 'up', 'left', 'right'];
+      // Priority order for modes
+      const modes = ['idle', 'walking'];
+      this.Data.currentDirection = 'down';
+      this.Data.currentMode = 'idle';
 
       // Render the viewer UI
-      await this.renderViewer();
-
-      // Initialize gif.js worker
-      await this.initGifJs();
+      await this.renderViewer({ Elements });
 
-      // Generate initial GIF
-      await this.generateGif();
+      // Generate WebP
+      await this.generateWebp();
     } catch (error) {
       logger.error('Error loading object layer:', error);
       NotificationManager.Push({
@@ -162,7 +144,7 @@ const ObjectLayerEngineViewer = {
     }
   },
 
-  renderViewer: async function () {
+  renderViewer: async function ({ Elements }) {
     const id = 'object-layer-engine-viewer';
     const { objectLayer, frameCounts } = this.Data;
 
@@ -172,8 +154,6 @@ const ObjectLayerEngineViewer = {
     const itemId = objectLayer.data.item.id;
     const itemDescription = objectLayer.data.item.description || '';
     const itemActivable = objectLayer.data.item.activable || false;
-    const frameDuration = objectLayer.data.render.frame_duration || 100;
-    const isStateless = objectLayer.data.render.is_stateless || false;
 
     // Get stats data
     const stats = objectLayer.data.stats || {};
@@ -213,7 +193,7 @@ const ObjectLayerEngineViewer = {
             color: ${darkTheme ? '#fff' : '#333'};
           }
 
-          .gif-display-area {
+          .webp-display-area {
             background: ${darkTheme ? '#2a2a2a' : '#f5f5f5'};
             border: 2px solid ${darkTheme ? '#444' : '#ddd'};
             border-radius: 12px;
@@ -229,7 +209,7 @@ const ObjectLayerEngineViewer = {
             overflow: auto;
           }
 
-          .gif-canvas-container {
+          .webp-canvas-container {
             position: relative;
             display: flex;
             justify-content: center;
@@ -238,8 +218,8 @@ const ObjectLayerEngineViewer = {
             height: 100%;
           }
 
-          .gif-canvas-container canvas,
-          .gif-canvas-container img {
+          .webp-canvas-container canvas,
+          .webp-canvas-container img {
             image-rendering: pixelated;
             image-rendering: -moz-crisp-edges;
             image-rendering: crisp-edges;
@@ -255,13 +235,13 @@ const ObjectLayerEngineViewer = {
             display: block;
           }
 
-          .gif-canvas-container canvas {
+          .webp-canvas-container canvas {
             background: repeating-conic-gradient(#80808020 0% 25%, #fff0 0% 50%) 50% / 20px 20px;
             min-width: 128px;
             min-height: 128px;
           }
 
-          .gif-info-badge {
+          .webp-info-badge {
             position: absolute;
             bottom: 10px;
             right: 10px;
@@ -274,7 +254,7 @@ const ObjectLayerEngineViewer = {
             backdrop-filter: blur(4px);
           }
 
-          .gif-info-badge .info-label {
+          .webp-info-badge .info-label {
             opacity: 0.7;
             margin-right: 4px;
           }
@@ -356,7 +336,7 @@ const ObjectLayerEngineViewer = {
             font-size: 16px;
           }
 
-          .download-btn {
+          .default-viewer-btn {
             width: 100%;
             padding: 15px;
             background: ${darkTheme ? '#4caf50' : '#4CAF50'};
@@ -373,7 +353,7 @@ const ObjectLayerEngineViewer = {
             gap: 10px;
           }
 
-          .download-btn:hover {
+          .default-viewer-btn:hover {
             background: ${darkTheme ? '#45a049' : '#45a049'};
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
@@ -392,35 +372,43 @@ const ObjectLayerEngineViewer = {
             margin-left: 4px;
           }
 
-          .download-btn:disabled {
+          .default-viewer-btn:disabled {
             background: ${darkTheme ? '#555' : '#ccc'};
             cursor: not-allowed;
             transform: none;
           }
 
+          .edit-btn {
+            background: ${darkTheme ? '#4a9eff' : '#2196F3'};
+          }
+
+          .edit-btn:hover {
+            background: ${darkTheme ? '#3a8eff' : '#1186f2'};
+          }
+
           @media (max-width: 768px) {
-            .gif-display-area {
+            .webp-display-area {
               max-height: 500px;
               min-height: 300px;
               padding: 20px;
             }
 
-            .gif-canvas-container canvas,
-            .gif-canvas-container img {
+            .webp-canvas-container canvas,
+            .webp-canvas-container img {
               max-width: 100%;
               max-height: 440px;
             }
           }
 
           @media (max-width: 600px) {
-            .gif-display-area {
+            .webp-display-area {
               max-height: 400px;
               min-height: 250px;
               padding: 15px;
             }
 
-            .gif-canvas-container canvas,
-            .gif-canvas-container img {
+            .webp-canvas-container canvas,
+            .webp-canvas-container img {
               max-height: 340px;
             }
 
@@ -440,7 +428,8 @@ const ObjectLayerEngineViewer = {
           .item-data-value-label {
             font-size: 20px;
             font-weight: 700;
-            color: ${darkTheme ? '#4a9eff' : '#2196F3'};
+            color: ${darkTheme ? '#aaa' : '#666'};
+            text-align: center;
           }
           .item-stat-entry {
             display: flex;
@@ -457,6 +446,12 @@ const ObjectLayerEngineViewer = {
             color: ${darkTheme ? '#666' : '#999'};
             padding: 20px;
           }
+
+          @media (max-width: 850px) {
+            .object-layer-viewer-container {
+              padding: 5px;
+            }
+          }
         </style>`,
       );
     };
@@ -493,16 +488,42 @@ const ObjectLayerEngineViewer = {
             </div>
           </div>
 
-          <div class="gif-display-area">
-            <div class="gif-canvas-container" id="gif-canvas-container">
+          <!-- Stats Data Section -->
+          <div class="control-group" style="margin-bottom: 20px;">
+            <h4><i class="fa-solid fa-chart-bar"></i> Stats Data</h4>
+            <div
+              style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 10px 0;"
+            >
+              ${Object.keys(stats).length > 0
+                ? Object.entries(stats)
+                    .map(([statKey, statValue]) => {
+                      const statInfo = ObjectLayerEngineModal.statDescriptions[statKey];
+                      if (!statInfo) return '';
+                      return html`
+                        <div class="item-stat-entry">
+                          <div style="display: flex; align-items: center; gap: 8px;">
+                            <i class="${statInfo.icon}" id="stat-icon-${statKey}-${id}"></i>
+                            <span class="item-data-key-label">${statInfo.title}</span>
+                          </div>
+                          <span class="item-data-value-label">${statValue}</span>
+                        </div>
+                      `;
+                    })
+                    .join('')
+                : html`<div class="no-data-container">No stats data available</div>`}
+            </div>
+          </div>
+
+          <div class="webp-display-area">
+            <div class="webp-canvas-container" id="webp-canvas-container">
               <div style="text-align: center; color: ${darkTheme ? '#aaa' : '#666'};">
                 <i class="fa-solid fa-image" style="font-size: 48px; opacity: 0.3; margin-bottom: 16px;"></i>
-                <p style="margin: 0; font-size: 14px;">GIF preview will appear here</p>
+                <p style="margin: 0; font-size: 14px;">WebP preview will appear here</p>
               </div>
-              <div id="gif-loading-overlay" class="loading-overlay" style="display: none;">
+              <div id="webp-loading-overlay" class="loading-overlay" style="display: none;">
                 <div>
                   <i class="fa-solid fa-spinner fa-spin"></i>
-                  <span style="margin-left: 10px;">Generating GIF...</span>
+                  <span style="margin-left: 10px;">Generating WebP...</span>
                 </div>
               </div>
             </div>
@@ -587,39 +608,30 @@ const ObjectLayerEngineViewer = {
               </div>
             </div>
           </div>
-          <!-- Stats Data Section -->
-          <div class="control-group" style="margin-bottom: 20px;">
-            <h4><i class="fa-solid fa-chart-bar"></i> Stats Data</h4>
-            <div
-              style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 10px 0;"
-            >
-              ${Object.keys(stats).length > 0
-                ? Object.entries(stats)
-                    .map(
-                      ([statKey, statValue]) => html`
-                        <div class="item-stat-entry">
-                          <span class="item-data-key-label"> ${statKey} </span>
-                          <span style="item-data-value-label"> ${statValue} </span>
-                        </div>
-                      `,
-                    )
-                    .join('')
-                : html`<div class="no-data-container">No stats data available</div>`}
-            </div>
+
+          <div style="display: flex; gap: 10px; margin-top: 20px;">
+            <button class="default-viewer-btn" id="return-to-list-btn">
+              <i class="fa-solid fa-arrow-left"></i>
+              <span>Return to List</span>
+            </button>
+            <button class="default-viewer-btn" id="download-webp-btn">
+              <i class="fa-solid fa-download"></i>
+              <span>Download WebP</span>
+            </button>
+            <button class="default-viewer-btn edit-btn" id="edit-object-layer-btn">
+              <i class="fa-solid fa-edit"></i>
+              <span>Edit</span>
+            </button>
           </div>
-          <button class="download-btn" id="download-gif-btn">
-            <i class="fa-solid fa-download"></i>
-            <span>Download GIF</span>
-          </button>
         </div>
       `,
     );
     ThemeEvents[id]();
     // Attach event listeners
-    this.attachEventListeners();
+    this.attachEventListeners({ Elements });
   },
 
-  attachEventListeners: function () {
+  attachEventListeners: function ({ Elements }) {
     // Direction buttons
     const directionButtons = document.querySelectorAll('[data-direction]');
     directionButtons.forEach((btn) => {
@@ -628,9 +640,9 @@ const ObjectLayerEngineViewer = {
         const direction = e.currentTarget.getAttribute('data-direction');
         if (direction !== this.Data.currentDirection) {
           this.Data.currentDirection = direction;
-          await this.renderViewer();
-          await this.attachEventListeners();
-          await this.generateGif();
+          await this.renderViewer({ Elements });
+          await this.attachEventListeners({ Elements });
+          await this.generateWebp();
         }
       });
     });
@@ -643,97 +655,41 @@ const ObjectLayerEngineViewer = {
         const mode = e.currentTarget.getAttribute('data-mode');
         if (mode !== this.Data.currentMode) {
           this.Data.currentMode = mode;
-          await this.renderViewer();
-          await this.attachEventListeners();
-          await this.generateGif();
+          await this.renderViewer({ Elements });
+          await this.attachEventListeners({ Elements });
+          await this.generateWebp();
         }
       });
     });
 
     // Download button
-    const downloadBtn = s('#download-gif-btn');
+    const downloadBtn = s('#download-webp-btn');
     if (downloadBtn) {
       downloadBtn.addEventListener('click', () => {
-        this.downloadGif();
+        this.downloadWebp();
       });
     }
 
-    // Back button
-    setTimeout(() => {
-      const backBtn = s('[data-id="btn-back"]');
-      if (backBtn) {
-        backBtn.addEventListener('click', () => {
-          window.history.back();
-        });
-      }
-    }, 100);
-  },
-
-  selectFirstAvailableDirectionMode: function () {
-    const { frameCounts } = this.Data;
-    if (!frameCounts) return;
-
-    // Priority order for directions
-    const directions = ['down', 'up', 'left', 'right'];
-    // Priority order for modes
-    const modes = ['idle', 'walking'];
-
-    // Try to find first available combination using numeric codes
-    for (const mode of modes) {
-      for (const direction of directions) {
-        const numericCode = this.getDirectionCode(direction, mode);
-        if (numericCode && frameCounts[numericCode] && frameCounts[numericCode] > 0) {
-          this.Data.currentDirection = direction;
-          this.Data.currentMode = mode;
-          logger.info(`Auto-selected: ${direction} ${mode} (code: ${numericCode}, ${frameCounts[numericCode]} frames)`);
-          return;
-        }
-      }
+    // Return to list button
+    const listBtn = s('#return-to-list-btn');
+    if (listBtn) {
+      listBtn.addEventListener('click', () => {
+        setPath(`${getProxyPath()}object-layer-engine-viewer`);
+        setQueryParams({ cid: null });
+        ObjectLayerEngineViewer.renderEmpty({ Elements });
+      });
     }
 
-    // If no frames found, log warning
-    logger.warn('No frames found for any direction/mode combination');
-  },
-
-  initGifJs: async function () {
-    if (this.Data.gifWorkerBlob) return; // Already initialized
-
-    try {
-      // Load gif.js library
-      await this.loadScript('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.min.js');
-
-      // Fetch worker script
-      const response = await fetch('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.worker.js');
-      if (!response.ok) {
-        throw new Error('Failed to fetch gif.worker.js');
-      }
-      const workerBlob = await response.blob();
-      this.Data.gifWorkerBlob = URL.createObjectURL(workerBlob);
-
-      logger.info('gif.js initialized successfully');
-    } catch (error) {
-      logger.error('Error initializing gif.js:', error);
-      throw error;
+    // Edit button
+    const editBtn = s('#edit-object-layer-btn');
+    if (editBtn) {
+      editBtn.addEventListener('click', () => {
+        this.toEngine();
+      });
     }
   },
 
-  loadScript: function (src) {
-    return new Promise((resolve, reject) => {
-      // Check if already loaded
-      if (document.querySelector(`script[src="${src}"]`)) {
-        resolve();
-        return;
-      }
-
-      const script = document.createElement('script');
-      script.src = src;
-      script.onload = resolve;
-      script.onerror = reject;
-      document.head.appendChild(script);
-    });
-  },
-
-  generateGif: async function () {
+  generateWebp: async function () {
     if (this.Data.isGenerating) return;
 
     const { objectLayer, frameCounts, currentDirection, currentMode } = this.Data;
@@ -766,128 +722,74 @@ const ObjectLayerEngineViewer = {
     this.Data.isGenerating = true;
     this.showLoading(true);
 
-    try {
-      // Build frame paths based on frame count using numeric code
-      const frames = [];
-      for (let i = 0; i < frameCount; i++) {
-        frames.push(`${getProxyPath()}assets/${itemType}/${itemId}/${numericCode}/${i}.png`);
-      }
-
-      // Update loading message
-      const loadingOverlay = s('#gif-loading-overlay');
-      if (loadingOverlay) {
-        loadingOverlay.querySelector('span').textContent = `Loading frames... (0/${frames.length})`;
-      }
-
-      // Load all frames to find maximum dimensions
-      const loadedImages = [];
-      let maxWidth = 0;
-      let maxHeight = 0;
-
-      for (let i = 0; i < frames.length; i++) {
-        const img = await this.loadImage(frames[i]);
-        loadedImages.push(img);
-        maxWidth = Math.max(maxWidth, img.naturalWidth);
-        maxHeight = Math.max(maxHeight, img.naturalHeight);
-
-        // Update progress
-        if (loadingOverlay && (i === 0 || i % 5 === 0)) {
-          loadingOverlay.querySelector('span').textContent = `Loading frames... (${i + 1}/${frames.length})`;
-        }
-      }
-
-      // Update loading message for GIF generation
-      if (loadingOverlay) {
-        loadingOverlay.querySelector('span').textContent = 'Generating GIF...';
+    // Update loading overlay text
+    const loadingOverlay = s('#webp-loading-overlay');
+    if (loadingOverlay) {
+      const loadingText = loadingOverlay.querySelector('span');
+      if (loadingText) {
+        loadingText.textContent = `Loading WebP animation for ${currentDirection} ${currentMode}...`;
       }
+    }
 
-      logger.info(`GIF dimensions calculated: ${maxWidth}x${maxHeight} from ${frames.length} frames`);
-
-      // Use binary transparency with placeholder color (magenta)
-      const placeholder = this.Data.gifTransparencyPlaceholder;
-      const transparentColorHex = (placeholder.r << 16) | (placeholder.g << 8) | placeholder.b;
-
-      // Create new GIF instance with binary transparency
-      const gif = new GIF({
-        workers: 2,
-        workerScript: this.Data.gifWorkerBlob,
-        quality: 10,
-        width: maxWidth,
-        height: maxHeight,
-        transparent: transparentColorHex, // Use magenta as transparent color
-        repeat: 0,
+    try {
+      // Call the WebP generation API endpoint
+      const { status, data } = await ObjectLayerService.generateWebp({
+        itemType,
+        itemId,
+        directionCode: numericCode,
       });
 
-      // Process each frame with binary transparency threshold
-      for (let i = 0; i < loadedImages.length; i++) {
-        const img = loadedImages[i];
-
-        // Create canvas for this frame
-        const canvas = document.createElement('canvas');
-        canvas.width = maxWidth;
-        canvas.height = maxHeight;
-        const ctx = canvas.getContext('2d', { alpha: true, willReadFrequently: true });
-
-        // Start with transparent canvas (don't fill with magenta yet)
-        ctx.clearRect(0, 0, maxWidth, maxHeight);
-
-        // Center the image
-        const x = Math.floor((maxWidth - img.naturalWidth) / 2);
-        const y = Math.floor((maxHeight - img.naturalHeight) / 2);
-
-        // Disable smoothing to keep pixel-art sharp
-        ctx.imageSmoothingEnabled = false;
-
-        // Draw the original image centered on transparent canvas
-        ctx.drawImage(img, x, y);
-
-        // Apply binary transparency threshold: replace ONLY transparent pixels with placeholder color
-        const threshold = this.Data.transparencyThreshold;
-        try {
-          const imageData = ctx.getImageData(0, 0, maxWidth, maxHeight);
-          const data = imageData.data;
-
-          for (let p = 0; p < data.length; p += 4) {
-            const alpha = data[p + 3];
-            // If alpha is below threshold, replace with opaque placeholder color (for GIF transparency)
-            if (alpha < threshold) {
-              data[p] = placeholder.r; // R
-              data[p + 1] = placeholder.g; // G
-              data[p + 2] = placeholder.b; // B
-              data[p + 3] = 255; // A (fully opaque)
-            }
+      if (status === 'success' && data) {
+        // Store the blob URL
+        this.Data.webp = data;
+
+        // Display the WebP in the viewer
+        const container = s('#webp-canvas-container');
+        if (container) {
+          // Clear container
+          container.innerHTML = '';
+
+          // Create and append image
+          const img = document.createElement('img');
+          img.src = data;
+          img.alt = 'WebP Animation';
+          container.appendChild(img);
+
+          // Create and append info badge
+          const infoBadge = document.createElement('div');
+          infoBadge.className = 'webp-info-badge';
+          infoBadge.innerHTML = html`
+            <span class="info-label" style="margin-left: 8px;">Frames:</span>
+            <span>${frameCount}</span><br />
+            <span class="info-label" style="margin-left: 8px;">Duration:</span>
+            <span>${frameDuration}ms</span><br />
+            <span class="info-label" style="margin-left: 8px;">Direction:</span>
+            <span>${currentDirection}</span><br />
+            <span class="info-label" style="margin-left: 8px;">Mode:</span>
+            <span>${currentMode}</span><br />
+            <span class="info-label" style="margin-left: 8px;">Code:</span>
+            <span>${numericCode}</span>
+          `;
+          const displayArea = s('.webp-display-area');
+          if (displayArea) {
+            displayArea.appendChild(infoBadge);
           }
-
-          ctx.putImageData(imageData, 0, 0);
-        } catch (err) {
-          logger.warn(
-            'Could not access image data for transparency threshold (CORS issue). Transparency may not work correctly.',
-            err,
-          );
         }
 
-        // Add frame to GIF with dispose mode to clear between frames
-        gif.addFrame(canvas, {
-          delay: frameDuration,
-          copy: true,
-          dispose: 2, // Restore to background color before drawing next frame (prevents overlap)
-        });
+        // NotificationManager.Push({
+        //   html: `WebP generated successfully (${frameCount} frames, ${frameDuration}ms duration)`,
+        //   status: 'success',
+        // });
+      } else {
+        throw new Error('Failed to generate WebP');
       }
 
-      // Handle GIF finished event
-      gif.on('finished', (blob) => {
-        this.displayGif(blob, maxWidth, maxHeight, frameDuration, frameCount);
-        this.Data.gif = blob;
-        this.Data.isGenerating = false;
-        this.showLoading(false);
-      });
-
-      // Render the GIF
-      gif.render();
+      this.Data.isGenerating = false;
+      this.showLoading(false);
     } catch (error) {
-      logger.error('Error generating GIF:', error);
+      logger.error('Error generating WebP:', error);
       NotificationManager.Push({
-        html: `Failed to generate GIF: ${error.message}`,
+        html: `Failed to generate WebP: ${error.message}`,
         status: 'error',
       });
       this.Data.isGenerating = false;
@@ -895,133 +797,35 @@ const ObjectLayerEngineViewer = {
     }
   },
 
-  loadImage: function (src) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.crossOrigin = 'anonymous';
-      img.onload = () => resolve(img);
-      img.onerror = reject;
-      img.src = src;
-    });
-  },
-
-  displayGif: function (blob, originalWidth, originalHeight, frameDuration, frameCount) {
-    const container = s('#gif-canvas-container');
-    if (!container) return;
-
-    const url = URL.createObjectURL(blob);
-
-    // Create img element for the animated GIF
-    const gifImg = document.createElement('img');
-    gifImg.src = url;
-
-    gifImg.onload = () => {
-      // Use provided dimensions or get from image
-      const naturalWidth = originalWidth || gifImg.naturalWidth;
-      const naturalHeight = originalHeight || gifImg.naturalHeight;
-
-      // Calculate intelligent scaling based on container and image size
-      const containerEl = s('.gif-display-area');
-      const containerWidth = containerEl ? containerEl.clientWidth - 60 : 400; // subtract padding
-      const containerHeight = containerEl ? containerEl.clientHeight - 60 : 400;
-
-      // Calculate scale to fit container while maintaining aspect ratio
-      const scaleToFitWidth = containerWidth / naturalWidth;
-      const scaleToFitHeight = containerHeight / naturalHeight;
-      const scaleToFit = Math.min(scaleToFitWidth, scaleToFitHeight);
-
-      // For pixel art, use integer scaling for better visuals
-      // Minimum 2x for small sprites, but respect container size
-      let scale = Math.max(1, Math.floor(scaleToFit));
-
-      // For very small sprites (< 100px), try to scale up more
-      if (Math.max(naturalWidth, naturalHeight) < 100) {
-        scale = Math.min(4, Math.floor(scaleToFit));
-      }
-
-      // Make sure scaled image fits in container
-      const displayWidth = naturalWidth * scale;
-      const displayHeight = naturalHeight * scale;
-
-      if (displayWidth > containerWidth || displayHeight > containerHeight) {
-        scale = Math.max(1, scale - 1);
-      }
-
-      gifImg.style.width = `${naturalWidth * scale}px !important`;
-      gifImg.style.height = `${naturalHeight * scale}px !important`;
-      gifImg.style.maxWidth = '100%';
-      gifImg.style.maxHeight = '540px';
-
-      // Force pixel-perfect rendering (no antialiasing/blur)
-      // gifImg.style.imageRendering = 'pixelated';
-      // gifImg.style.imageRendering = '-moz-crisp-edges';
-      // gifImg.style.imageRendering = 'crisp-edges';
-      // gifImg.style.msInterpolationMode = 'nearest-neighbor';
-
-      // Prevent any browser scaling optimizations
-      // gifImg.style.transform = 'translateZ(0)'; // Force GPU rendering
-      // gifImg.style.backfaceVisibility = 'hidden'; // Prevent subpixel rendering
-
-      // Clear container and add the GIF
-      container.innerHTML = '';
-      container.appendChild(gifImg);
-
-      // Re-add loading overlay
-      const overlay = document.createElement('div');
-      overlay.id = 'gif-loading-overlay';
-      overlay.className = 'loading-overlay';
-      overlay.style.display = 'none';
-      overlay.innerHTML = html`
-        <div>
-          <i class="fa-solid fa-spinner fa-spin"></i>
-          <span style="margin-left: 10px;">Generating GIF...</span>
-        </div>
-      `;
-      container.appendChild(overlay);
-
-      // Add info badge with dimensions and scale
-      const infoBadge = document.createElement('div');
-      infoBadge.className = 'gif-info-badge';
-      const displayW = Math.round(naturalWidth * scale);
-      const displayH = Math.round(naturalHeight * scale);
-      infoBadge.innerHTML = html`
-        <span class="info-label">Dimensions:</span> ${naturalWidth}x${naturalHeight}px<br />
-        <span class="info-label">Display:</span> ${displayW}x${displayH}px<br />
-        ${scale > 1 ? `<span class="info-label">Scale:</span> ${scale}x<br />` : ''}
-        <span class="info-label">Frames:</span> ${frameCount}<br />
-        <span class="info-label">Frame Duration:</span> ${frameDuration}ms<br />
-        <span class="info-label">Total Duration:</span> ${(frameDuration * frameCount) / 1000}s
-      `;
-      s(`.gif-display-area`).appendChild(infoBadge);
-
-      logger.info(`Displaying GIF: ${naturalWidth}x${naturalHeight} at ${scale}x scale (${displayW}x${displayH})`);
-    };
-
-    gifImg.onerror = () => {
-      logger.error('Failed to load GIF image');
-      NotificationManager.Push({
-        html: 'Failed to display GIF',
-        status: 'error',
-      });
-    };
-  },
-
   showLoading: function (show) {
-    const overlay = s('#gif-loading-overlay');
+    const overlay = s('#webp-loading-overlay');
     if (overlay) {
       overlay.style.display = show ? 'flex' : 'none';
+      if (!show) {
+        // Reset loading text when hiding
+        const loadingText = overlay.querySelector('span');
+        if (loadingText) {
+          loadingText.textContent = 'Generating WebP...';
+        }
+      }
     }
 
-    const downloadBtn = s('#download-gif-btn');
+    const downloadBtn = s('#download-webp-btn');
     if (downloadBtn) {
       downloadBtn.disabled = show;
     }
+
+    // Remove old info badge if exists
+    const oldBadge = s('.webp-info-badge');
+    if (oldBadge && show) {
+      oldBadge.remove();
+    }
   },
 
-  downloadGif: function () {
-    if (!this.Data.gif) {
+  downloadWebp: function () {
+    if (!this.Data.webp) {
       NotificationManager.Push({
-        html: 'No GIF available to download',
+        html: 'No WebP available to download',
         status: 'warning',
       });
       return;
@@ -1029,31 +833,46 @@ const ObjectLayerEngineViewer = {
 
     const { objectLayer, currentDirection, currentMode } = this.Data;
     const numericCode = this.getDirectionCode(currentDirection, currentMode);
-    const filename = `${objectLayer.data.item.id}_${currentDirection}_${currentMode}_${numericCode}.gif`;
+    const filename = `${objectLayer.data.item.id}_${currentDirection}_${currentMode}_${numericCode}.webp`;
 
-    const url = URL.createObjectURL(this.Data.gif);
+    // Create a temporary anchor element to trigger download
     const a = document.createElement('a');
-    a.href = url;
+    a.href = this.Data.webp;
     a.download = filename;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-    URL.revokeObjectURL(url);
 
     NotificationManager.Push({
-      html: `GIF downloaded: ${filename}`,
+      html: `WebP downloaded: ${filename}`,
       status: 'success',
     });
   },
 
-  Reload: async function () {
+  toEngine: function () {
+    const { objectLayer } = this.Data;
+    if (!objectLayer || !objectLayer._id) return;
+
+    // Navigate to editor route first
+    setPath(`${getProxyPath()}object-layer-engine`);
+    // Then add query param without replacing history
+    setQueryParams({ cid: objectLayer._id }, { replace: true });
+
+    if (s(`.modal-object-layer-engine`)) {
+      ObjectLayerEngineModal.Reload();
+    } else {
+      s(`.main-btn-object-layer-engine`)?.click();
+    }
+  },
+
+  Reload: async function ({ Elements }) {
     const queryParams = new URLSearchParams(window.location.search);
     const cid = queryParams.get('cid');
 
     if (cid) {
-      await this.loadObjectLayer(cid);
+      await this.loadObjectLayer(cid, Elements);
     } else {
-      this.renderEmpty();
+      this.renderEmpty({ Elements });
     }
   },
 };