cyberia 3.0.1 → 3.0.2

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

@@ -10,15 +10,16 @@ import {
 import { ObjectLayerService } from '../../services/object-layer/object-layer.service.js';
 import { AtlasSpriteSheetService } from '../../services/atlas-sprite-sheet/atlas-sprite-sheet.service.js';
 import { NotificationManager } from '../core/NotificationManager.js';
-import { htmls, s } from '../core/VanillaJs.js';
+import { append, htmls, s } from '../core/VanillaJs.js';
 
-import { darkTheme, ThemeEvents } from '../core/Css.js';
+import { darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from '../core/Css.js';
 import { ObjectLayerManagement } from '../../services/object-layer/object-layer.management.js';
 import { ObjectLayerEngineModal } from './ObjectLayerEngineModal.js';
 import { Modal } from '../core/Modal.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
 import { AgGrid } from '../core/AgGrid.js';
 import { EventsUI } from '../core/EventsUI.js';
+import { createJSONEditor } from 'vanilla-jsoneditor';
 
 const logger = loggerFactory(import.meta);
 
@@ -30,10 +31,11 @@ const ObjectLayerEngineViewer = {
     currentMode: 'idle',
     webp: null,
     isGenerating: false,
-    currentCid: undefined, // Track current loaded cid to prevent unnecessary reloads
+    currentObjectId: undefined, // Track current loaded object layer id to prevent unnecessary reloads
     atlasSpriteSheet: null,
     isGeneratingAtlas: false,
     webpMetadata: null,
+    metadataJsonEditor: null,
   },
 
   // Map user-friendly direction/mode to numeric direction codes
@@ -55,8 +57,8 @@ const ObjectLayerEngineViewer = {
   Render: async function ({ Elements }) {
     const id = 'object-layer-engine-viewer';
 
-    // Reset currentCid when modal is rendered to ensure Reload triggers properly
-    this.Data.currentCid = undefined;
+    // Reset currentObjectId when modal is rendered to ensure Reload triggers properly
+    this.Data.currentObjectId = undefined;
 
     Modal.Data[`modal-${id}`].onReloadModalListener[id] = async () => {
       ObjectLayerEngineViewer.Reload({ Elements });
@@ -66,15 +68,15 @@ const ObjectLayerEngineViewer = {
     listenQueryParamsChange({
       id: `${id}-query-listener`,
       event: async (queryParams) => {
-        const cid = queryParams.cid || null;
+        const objectId = queryParams.id || null;
 
         if (!s(`.modal-${id}`) || !s(`#${id}`)) {
           logger.warn('ObjectLayerEngineViewer DOM not ready for query param change');
           return;
         }
 
-        // Only reload if cid actually changed (normalize undefined to null for comparison)
-        if (cid !== this.Data.currentCid) {
+        // Only reload if object id actually changed (normalize undefined to null for comparison)
+        if (objectId !== this.Data.currentObjectId) {
           await this.Reload({ Elements });
         }
       },
@@ -101,8 +103,8 @@ const ObjectLayerEngineViewer = {
       return;
     }
 
-    // Clear current cid when rendering empty state
-    this.Data.currentCid = null;
+    // Clear current object id when rendering empty state
+    this.Data.currentObjectId = null;
 
     // Check if the management table grid already exists AND its DOM is still present
     // If it does, don't re-render (just let DefaultManagement's RouterEvents handle URL changes)
@@ -569,6 +571,50 @@ const ObjectLayerEngineViewer = {
             color: ${darkTheme ? '#666' : '#999'};
             padding: 20px;
           }
+          .ipfs-cid-label {
+            font-size: 14px;
+            color: ${darkTheme ? '#b0b8c8' : '#555'};
+            word-break: break-all;
+            padding: 10px 12px;
+            border: 1px solid
+              ${(() => {
+                const tc = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+                return tc ? (darkTheme ? darkenHex(tc, 0.7) : lightenHex(tc, 0.7)) : darkTheme ? '#3a3f4b' : '#d0d5dd';
+              })()};
+            border-radius: 6px;
+            background: ${(() => {
+              const tc = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+              return tc ? (darkTheme ? darkenHex(tc, 0.85) : lightenHex(tc, 0.85)) : darkTheme ? '#1a1f2e' : '#f4f6f9';
+            })()};
+            margin-top: 8px;
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+            line-height: 1.5;
+          }
+          .ipfs-cid-label i {
+            color: ${(() => {
+              const tc = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+              return tc ? (darkTheme ? lightenHex(tc, 0.5) : darkenHex(tc, 0.3)) : darkTheme ? '#4a9eff' : '#2196F3';
+            })()};
+            font-size: 14px;
+            flex-shrink: 0;
+          }
+          .ipfs-cid-label strong {
+            color: ${darkTheme ? '#cdd4e0' : '#333'};
+            white-space: nowrap;
+            font-size: 14px;
+          }
+          .ipfs-cid-label .ipfs-cid-value {
+            user-select: all;
+            cursor: text;
+            color: ${(() => {
+              const tc = darkTheme ? subThemeManager.darkColor : subThemeManager.lightColor;
+              return tc ? (darkTheme ? lightenHex(tc, 0.6) : darkenHex(tc, 0.3)) : darkTheme ? '#8ecfff' : '#1565c0';
+            })()};
+            font-family: monospace;
+            font-size: 13px;
+          }
 
           @media (max-width: 850px) {
             .object-layer-viewer-container {
@@ -619,6 +665,38 @@ const ObjectLayerEngineViewer = {
                       <span style="font-weight: 600;">${itemActivable ? 'Yes' : 'No'}</span>
                     </div>
                   </div>
+                  ${objectLayer.cid
+                    ? html`<div class="ipfs-cid-label">
+                        <i class="fa-solid fa-cube"></i>
+                        <strong>IPFS CID:</strong>
+                        <span class="ipfs-cid-value">${objectLayer.cid}</span>
+                      </div>`
+                    : ''}
+                  ${objectLayer.data.atlasSpriteSheetCid
+                    ? html`<div class="ipfs-cid-label">
+                        <i class="fa-solid fa-image"></i>
+                        <strong>Atlas IPFS CID:</strong>
+                        <span class="ipfs-cid-value">${objectLayer.data.atlasSpriteSheetCid}</span>
+                      </div>`
+                    : ''}
+                  ${objectLayer.sha256
+                    ? html`<div class="ipfs-cid-label">
+                        <i class="fa-solid fa-fingerprint"></i>
+                        <strong>SHA-256:</strong>
+                        <span class="ipfs-cid-value">${objectLayer.sha256}</span>
+                      </div>`
+                    : ''}
+                </div>
+
+                <!-- Metadata JSON Section -->
+                <div class="control-group" style="margin-bottom: 20px;">
+                  <h4><i class="fa-solid fa-code"></i> Metadata JSON</h4>
+                  <div
+                    id="metadata-json-editor-container"
+                    style="height: 400px; border-radius: 6px; overflow: hidden; border: 1px solid ${darkTheme
+                      ? '#444'
+                      : '#ddd'};"
+                  ></div>
                 </div>
 
                 <!-- Stats Data Section -->
@@ -777,6 +855,16 @@ const ObjectLayerEngineViewer = {
                               <p style="padding: 2px"><strong class="item-data-key-label">ID:</strong></p>
                               <p style="padding: 2px" font-size: 12px;">${this.Data.atlasSpriteSheet._id}</p>
                             </div>
+                            ${
+                              this.Data.atlasSpriteSheet.cid
+                                ? html`<div style="grid-column: 1 / -1;">
+                                    <p style="padding: 2px"><strong class="item-data-key-label">IPFS CID:</strong></p>
+                                    <p class="ipfs-cid-value" style="padding: 2px;">
+                                      ${this.Data.atlasSpriteSheet.cid}
+                                    </p>
+                                  </div>`
+                                : ''
+                            }
                             <div>
                               <p style="padding: 2px"><strong class="item-data-key-label">Dimensions:</strong></p>
                               <p style="padding: 2px">
@@ -837,6 +925,10 @@ const ObjectLayerEngineViewer = {
                     <i class="fa-solid fa-edit"></i>
                     <span>Edit</span>
                   </button>
+                  <button class="default-viewer-btn" id="delete-object-layer-btn" style="background: #dc3545;">
+                    <i class="fa-solid fa-trash"></i>
+                    <span>Delete</span>
+                  </button>
                 </div>
               `}
         </div>
@@ -850,6 +942,9 @@ const ObjectLayerEngineViewer = {
     if (this.Data.webp) {
       this.displayWebp();
     }
+
+    // Initialize metadata JSON editor
+    this.initMetadataJsonEditor();
   },
 
   displayWebp: async function () {
@@ -894,6 +989,128 @@ const ObjectLayerEngineViewer = {
     }
   },
 
+  initMetadataJsonEditor: async function () {
+    const container = s('#metadata-json-editor-container');
+    if (!container) return;
+
+    // Ensure vanilla-jsoneditor dark theme CSS is loaded
+    if (!s('.jse-dark-theme-link')) {
+      append(
+        'head',
+        html`<link
+          class="jse-dark-theme-link"
+          rel="stylesheet"
+          type="text/css"
+          href="${getProxyPath()}styles/vanilla-jsoneditor/jse-theme-dark.css"
+        />`,
+      );
+    }
+
+    // Destroy previous instance if any
+    if (this.Data.metadataJsonEditor) {
+      this.Data.metadataJsonEditor.destroy();
+      this.Data.metadataJsonEditor = null;
+    }
+
+    const objectLayerId = this.Data.objectLayer?._id;
+    if (!objectLayerId) return;
+
+    try {
+      const response = await ObjectLayerService.getMetadata({ id: objectLayerId });
+      const metadataContent = response.status === 'success' && response.data ? response.data : response;
+
+      this.Data.metadataJsonEditor = createJSONEditor({
+        target: container,
+        props: {
+          content: { json: metadataContent },
+          readOnly: true,
+          mainMenuBar: true,
+          navigationBar: true,
+          statusBar: true,
+          mode: 'tree',
+        },
+      });
+
+      // Apply dark theme class based on current theme
+      this._applyJsonEditorTheme();
+
+      // Register theme event to toggle dark/light on the JSON editor
+      ThemeEvents['metadata-json-editor-theme'] = () => {
+        this._applyJsonEditorTheme();
+      };
+    } catch (err) {
+      logger.warn('Failed to initialize metadata JSON editor:', err);
+      container.innerHTML = html`<div style="padding: 20px; color: #999; text-align: center;">
+        Failed to load metadata JSON
+      </div>`;
+    }
+  },
+
+  _applyJsonEditorTheme: function () {
+    const container = s('#metadata-json-editor-container');
+    if (!container) return;
+    if (darkTheme) {
+      container.classList.add('jse-theme-dark');
+    } else {
+      container.classList.remove('jse-theme-dark');
+    }
+  },
+
+  deleteObjectLayer: async function ({ Elements } = {}) {
+    const objectLayerId = this.Data.objectLayer?._id;
+    if (!objectLayerId) return;
+
+    const itemId = this.Data.objectLayer?.data?.item?.id || objectLayerId;
+
+    const confirmResult = await Modal.RenderConfirm({
+      id: 'delete-object-layer-confirm',
+      html: async () => html`
+        <div class="in section-mp" style="text-align: center">
+          <p>Are you sure you want to permanently delete object layer <strong>"${itemId}"</strong>?</p>
+          <p style="color: #dc3545; font-size: 13px; margin-top: 8px;">
+            This will remove all associated data including render frames, atlas sprite sheet, IPFS pins, and static
+            asset files.
+          </p>
+        </div>
+      `,
+    });
+
+    if (confirmResult.status !== 'confirm') return;
+
+    try {
+      const result = await ObjectLayerService.delete({ id: objectLayerId });
+      if (result.status === 'success') {
+        NotificationManager.Push({
+          html: `Object layer "${itemId}" deleted successfully`,
+          status: 'success',
+        });
+
+        // Clean up JSON editor and its theme event
+        if (this.Data.metadataJsonEditor) {
+          this.Data.metadataJsonEditor.destroy();
+          this.Data.metadataJsonEditor = null;
+        }
+        delete ThemeEvents['metadata-json-editor-theme'];
+
+        // Navigate back to list
+        this.Data.currentObjectId = undefined;
+        this.Data.objectLayer = null;
+        this.Data.webp = null;
+        this.Data.webpMetadata = null;
+        this.Data.atlasSpriteSheet = null;
+        setQueryParams({ id: null }, { replace: false });
+      } else {
+        throw new Error(result.message || 'Failed to delete object layer');
+      }
+    } catch (error) {
+      logger.error('Error deleting object layer:', error);
+      NotificationManager.Push({
+        html: `Failed to delete object layer: ${error.message}`,
+        status: 'error',
+      });
+    }
+  },
+
   attachEventListeners: function ({ Elements }) {
     // Direction buttons
     const directionButtons = document.querySelectorAll('[data-direction]');
@@ -904,7 +1121,7 @@ const ObjectLayerEngineViewer = {
         if (direction !== this.Data.currentDirection) {
           this.Data.currentDirection = direction;
           await this.renderViewer({ Elements });
-          await this.attachEventListeners({ Elements });
+          // attachEventListeners is already called inside renderViewer
           await this.generateWebp();
         }
       });
@@ -919,7 +1136,7 @@ const ObjectLayerEngineViewer = {
         if (mode !== this.Data.currentMode) {
           this.Data.currentMode = mode;
           await this.renderViewer({ Elements });
-          await this.attachEventListeners({ Elements });
+          // attachEventListeners is already called inside renderViewer
           await this.generateWebp();
         }
       });
@@ -936,10 +1153,26 @@ const ObjectLayerEngineViewer = {
     // Return to list button
     const listBtn = s('#return-to-list-btn');
     if (listBtn) {
-      listBtn.addEventListener('click', () => {
-        // Clear the cid parameter to return to list view
-        setQueryParams({ cid: null }, { replace: false });
-        // The listener will detect the change and call renderEmpty()
+      listBtn.addEventListener('click', async () => {
+        // Clear object data and reset state
+        this.Data.webp = null;
+        this.Data.webpMetadata = null;
+        this.Data.objectLayer = null;
+        this.Data.frameCounts = null;
+
+        // Set currentObjectId to null BEFORE setQueryParams so the
+        // listenQueryParamsChange listener sees the id already matches
+        // and skips calling Reload (avoids double-render race condition)
+        this.Data.currentObjectId = null;
+
+        // Update the URL to remove the id parameter
+        setQueryParams({ id: null }, { replace: false });
+
+        // Directly render the list view instead of relying on the
+        // listener → Reload → renderEmpty chain which can silently
+        // fail when the URL was already clean or currentObjectId
+        // was already null
+        await this.renderEmpty({ Elements });
       });
     }
 
@@ -951,6 +1184,14 @@ const ObjectLayerEngineViewer = {
       });
     }
 
+    // Delete button
+    const deleteBtn = s('#delete-object-layer-btn');
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', async () => {
+        await this.deleteObjectLayer({ Elements });
+      });
+    }
+
     // Atlas buttons
     if (s('#generate-atlas-btn')) {
       EventsUI.onClick('#generate-atlas-btn', async () => {
@@ -1020,7 +1261,10 @@ const ObjectLayerEngineViewer = {
           html: 'Atlas sprite sheet generated successfully',
           status: 'success',
         });
+        // Reset generating flag before reload so renderViewer shows updated content
+        this.Data.isGeneratingAtlas = false;
         await this.Reload({ Elements, force: true, skipWebp: true });
+        return;
       } else {
         throw new Error(message || 'Failed to generate atlas');
       }
@@ -1031,8 +1275,10 @@ const ObjectLayerEngineViewer = {
         status: 'error',
       });
     } finally {
-      this.Data.isGeneratingAtlas = false;
-      await this.renderViewer({ Elements });
+      if (this.Data.isGeneratingAtlas) {
+        this.Data.isGeneratingAtlas = false;
+        await this.renderViewer({ Elements });
+      }
     }
   },
 
@@ -1062,7 +1308,10 @@ const ObjectLayerEngineViewer = {
           html: 'Atlas sprite sheet removed successfully',
           status: 'success',
         });
+        // Reset generating flag before reload so renderViewer shows updated content
+        this.Data.isGeneratingAtlas = false;
         await this.Reload({ Elements, force: true, skipWebp: true });
+        return;
       } else {
         throw new Error(message || 'Failed to remove atlas');
       }
@@ -1073,8 +1322,10 @@ const ObjectLayerEngineViewer = {
         status: 'error',
       });
     } finally {
-      this.Data.isGeneratingAtlas = false;
-      await this.renderViewer({ Elements });
+      if (this.Data.isGeneratingAtlas) {
+        this.Data.isGeneratingAtlas = false;
+        await this.renderViewer({ Elements });
+      }
     }
   },
 
@@ -1209,7 +1460,7 @@ const ObjectLayerEngineViewer = {
     // Navigate to editor route first
     setPath(`${getProxyPath()}object-layer-engine`);
     // Then add query param without replacing history
-    setQueryParams({ cid: objectLayer._id }, { replace: true });
+    setQueryParams({ id: objectLayer._id }, { replace: true });
 
     if (s(`.modal-object-layer-engine`)) {
       ObjectLayerEngineModal.Reload();
@@ -1221,22 +1472,22 @@ const ObjectLayerEngineViewer = {
   Reload: async function (options = {}) {
     const { Elements, force = false, skipWebp = false } = options;
     const queryParams = getQueryParams();
-    const cid = queryParams.cid || null;
+    const objectId = queryParams.id || null;
 
-    // Only reload if cid actually changed (same logic as listener) or forced
-    if (cid !== this.Data.currentCid || force) {
-      if (cid !== this.Data.currentCid && !skipWebp) {
+    // Only reload if object id actually changed (same logic as listener) or forced
+    if (objectId !== this.Data.currentObjectId || force) {
+      if (objectId !== this.Data.currentObjectId && !skipWebp) {
         this.Data.webp = null;
         this.Data.webpMetadata = null;
       }
-      this.Data.currentCid = cid;
+      this.Data.currentObjectId = objectId;
 
-      if (cid) {
-        await this.loadObjectLayer(cid, Elements, { skipWebp });
+      if (objectId) {
+        await this.loadObjectLayer(objectId, Elements, { skipWebp });
       } else {
         await this.renderEmpty({ Elements });
       }
-    } else if (!cid && (this.Data.currentCid === null || force)) {
+    } else if (!objectId && (this.Data.currentObjectId === null || force)) {
       // Special case: if we're already in empty state but DOM might have been reset
       // (e.g., modal reopened), force render the table if DOM is missing
       const id = 'object-layer-engine-viewer';

package/src/client/services/ipfs/ipfs.service.js

@@ -0,0 +1,144 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory, buildQueryUrl } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'ipfs';
+
+const IpfsService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = {}) => {
+    const { id, page, limit, filterModel, sortModel, sort, asc, order } = options;
+    const url = buildQueryUrl(getApiBaseUrl({ id, endpoint }), {
+      page,
+      limit,
+      filterModel,
+      sortModel,
+      sort,
+      asc,
+      order,
+    });
+
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    );
+  },
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  pin: (options = { body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(`${getApiBaseUrl({ endpoint })}/pin`, {
+        method: 'POST',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  unpin: (options = { cid: '' }) =>
+    new Promise((resolve, reject) =>
+      fetch(`${getApiBaseUrl({ endpoint })}/pin/${options.cid}`, {
+        method: 'DELETE',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { IpfsService };