@underpostnet/cyberia 3.2.80

package/src/client/services/object-layer/object-layer.management.js

@@ -0,0 +1,414 @@
+import { DefaultManagement } from '../default/default.management.js';
+import { ObjectLayerService } from './object-layer.service.js';
+import { commonUserGuard, commonModeratorGuard } from '../../components/core/CommonJs.js';
+import { getProxyPath, setPath, setQueryParams } from '../../components/core/Router.js';
+import { ObjectLayerEngineModal } from '../../components/cyberia/ObjectLayerEngineModal.js';
+import { ObjectLayerEngineViewer } from '../../components/cyberia/ObjectLayerEngineViewer.js';
+import { s } from '../../components/core/VanillaJs.js';
+import { Modal } from '../../components/core/Modal.js';
+import { BtnIcon } from '../../components/core/BtnIcon.js';
+import { NotificationManager } from '../../components/core/NotificationManager.js';
+import { AgGrid } from '../../components/core/AgGrid.js';
+
+class ObjectLayerManagement {
+  static instance = async ({ appStore, idModal: rawIdModal }) => {
+    const idModal = rawIdModal || 'modal-object-layer-engine-management';
+    const serviceId = 'object-layer-engine-management';
+    const gridId = `${serviceId}-grid-${idModal}`;
+    const user = appStore.Data.user.main.model.user;
+    const { role } = user;
+
+    // Custom renderer for view button
+    class ViewButtonRenderer {
+      eGui;
+
+      async init(params) {
+        this.eGui = document.createElement('div');
+        const { data } = params;
+
+        if (!data || !data._id) {
+          this.eGui.innerHTML = '';
+          return;
+        }
+
+        this.eGui.innerHTML = html` ${await BtnIcon.instance({
+          label: html`<div class="abs center">
+            <i class="fas fa-eye"></i>
+          </div> `,
+          class: `in fll section-mp management-table-btn-mini btn-view-object-layer-${data._id}`,
+        })}`;
+
+        setTimeout(() => {
+          const btn = this.eGui.querySelector(`.btn-view-object-layer-${data._id}`);
+          if (btn)
+            btn.onclick = async () =>
+              setTimeout(async () => {
+                // Navigate to viewer route first
+                setPath(`${getProxyPath()}object-layer-engine-viewer`);
+                // Then add query param without replacing history
+                setQueryParams({ id: data._id }, { replace: true });
+                if (s(`.modal-object-layer-engine-viewer`)) {
+                  await ObjectLayerEngineViewer.Reload({ appStore, force: true });
+                }
+                s(`.main-btn-object-layer-engine-viewer`).click();
+              });
+        });
+      }
+
+      getGui() {
+        return this.eGui;
+      }
+
+      refresh(params) {
+        return true;
+      }
+    }
+
+    // Custom renderer for edit button
+    class EditButtonRenderer {
+      eGui;
+
+      async init(params) {
+        this.eGui = document.createElement('div');
+        const { data } = params;
+
+        if (!data || !data._id) {
+          this.eGui.innerHTML = '';
+          return;
+        }
+
+        this.eGui.innerHTML = html` ${await BtnIcon.instance({
+          label: html`<div class="abs center">
+            <i class="fas fa-edit"></i>
+          </div> `,
+          class: `in fll section-mp management-table-btn-mini btn-edit-object-layer-${data._id}`,
+        })}`;
+
+        setTimeout(() => {
+          const btn = this.eGui.querySelector(`.btn-edit-object-layer-${data._id}`);
+          if (btn)
+            btn.onclick = async () =>
+              setTimeout(async () => {
+                // Navigate to editor route first
+                setPath(`${getProxyPath()}object-layer-engine`);
+                // Then add query param without replacing history
+                setQueryParams({ id: data._id }, { replace: true });
+                if (s(`.modal-object-layer-engine`)) await ObjectLayerEngineModal.Reload();
+                else s(`.main-btn-object-layer-engine`).click();
+              });
+        });
+      }
+
+      getGui() {
+        return this.eGui;
+      }
+
+      refresh(params) {
+        return true;
+      }
+    }
+
+    // Custom renderer for the frame 08 preview
+    class Frame08Renderer {
+      eGui;
+
+      async init(params) {
+        this.eGui = document.createElement('div');
+        const { data } = params;
+
+        if (!data || !data.data || !data.data.item) {
+          this.eGui.innerHTML = '';
+          return;
+        }
+
+        const { type, id } = data.data.item;
+        const imagePath = `${getProxyPath()}assets/${type}/${id}/08/0.png`;
+
+        // Container with both image and fallback
+        this.eGui.innerHTML = html`
+          <div style="position: relative; width: 100px; height: 100px;">
+            <img
+              class="inl frame-08-preview"
+              src="${imagePath}"
+              style="width: 100px; height: 100px; display: block;"
+              alt="Frame 08"
+              onload="this.style.display='block'; this.nextElementSibling.style.display='none';"
+              onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+            />
+            <div
+              style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; display: none; align-items: center; justify-content: center; "
+            >
+              <i class="fas fa-image" style="font-size: 48px; color: #999;"></i>
+            </div>
+          </div>
+        `;
+      }
+
+      getGui() {
+        return this.eGui;
+      }
+
+      refresh(params) {
+        return true;
+      }
+    }
+
+    // Custom renderer for delete button (moderator+ only)
+    const canDelete = commonModeratorGuard(role);
+
+    class DeleteButtonRenderer {
+      eGui;
+
+      async init(params) {
+        this.eGui = document.createElement('div');
+        const { data } = params;
+
+        if (!data || !data._id || !canDelete) {
+          this.eGui.innerHTML = '';
+          return;
+        }
+
+        this.eGui.innerHTML = html` ${await BtnIcon.instance({
+          label: html`<div class="abs center">
+            <i class="fas fa-trash" style="color: #dc3545;"></i>
+          </div> `,
+          class: `in fll section-mp management-table-btn-mini btn-delete-object-layer-${data._id}`,
+        })}`;
+
+        setTimeout(() => {
+          const btn = this.eGui.querySelector(`.btn-delete-object-layer-${data._id}`);
+          if (btn)
+            btn.onclick = async () => {
+              const itemId = data?.data?.item?.id || data._id;
+              const confirmResult = await Modal.RenderConfirm({
+                id: `delete-object-layer-${data._id}`,
+                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: data._id });
+                if (result.status === 'success') {
+                  NotificationManager.Push({
+                    html: `Object layer "${itemId}" deleted successfully`,
+                    status: 'success',
+                  });
+                  if (AgGrid.grids[gridId]) {
+                    AgGrid.grids[gridId].applyTransaction({ remove: [data] });
+                  }
+                  const token = DefaultManagement.Tokens[idModal];
+                  if (token) {
+                    const newTotal = token.total - 1;
+                    const newTotalPages = Math.ceil(newTotal / token.limit);
+                    if (token.page > newTotalPages && newTotalPages > 0) {
+                      token.page = newTotalPages;
+                    }
+                    await DefaultManagement.loadTable(idModal, { reload: false });
+                  }
+                } else {
+                  throw new Error(result.message || 'Failed to delete object layer');
+                }
+              } catch (error) {
+                NotificationManager.Push({
+                  html: `Failed to delete: ${error.message}`,
+                  status: 'error',
+                });
+              }
+            };
+        });
+      }
+
+      getGui() {
+        return this.eGui;
+      }
+
+      refresh(params) {
+        return true;
+      }
+    }
+
+    const createCidRenderer = (cidAccessor) => {
+      return class {
+        eGui;
+
+        async init(params) {
+          this.eGui = document.createElement('div');
+          const { data } = params;
+          const cid = cidAccessor(data) || '';
+
+          if (!cid) {
+            this.eGui.innerHTML = html`<span style="color: #666; font-style: italic;">—</span>`;
+            return;
+          }
+
+          this.eGui.innerHTML = html`<span
+            title="${cid}"
+            style="font-family: monospace; font-size: 11px; cursor: default; user-select: all;"
+            >${cid}</span
+          >`;
+        }
+
+        getGui() {
+          return this.eGui;
+        }
+
+        refresh(params) {
+          return true;
+        }
+      };
+    };
+
+    // IPFS CID of object layer data JSON (fast-json-stable-stringify)
+    const CidRenderer = createCidRenderer((d) => d?.cid);
+    // IPFS CID of the consolidated atlas sprite sheet PNG
+    const AtlasCidRenderer = createCidRenderer((d) => d?.data?.render?.cid || d?.atlasSpriteSheetId?.cid);
+    // IPFS CID of the atlas sprite sheet metadata JSON (fast-json-stable-stringify)
+    const MetadataCidRenderer = createCidRenderer((d) => d?.data?.render?.metadataCid);
+
+    let columnDefs = [
+      // {
+      //   field: '_id',
+      //   headerName: 'Content ID',
+      //   width: 220,
+      //   editable: false,
+      //   cellClassRules: { m: (params) => true },
+      // },
+      {
+        field: 'data.item.id',
+        headerName: 'Item ID',
+        editable: commonModeratorGuard(role),
+      },
+      { field: 'data.item.type', headerName: 'Item Type', editable: commonModeratorGuard(role) },
+      { field: 'data.item.description', headerName: 'Description', flex: 1, editable: commonModeratorGuard(role) },
+      {
+        field: 'data.ledger.type',
+        headerName: 'Ledger Type',
+        width: 160,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'cid',
+        headerName: 'IPFS CID',
+        width: 160,
+        cellRenderer: CidRenderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'data.render.cid',
+        headerName: 'render CID',
+        width: 160,
+        cellRenderer: AtlasCidRenderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'data.render.metadataCid',
+        headerName: 'render Metadata CID',
+        width: 160,
+        cellRenderer: MetadataCidRenderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'frame08',
+        headerName: 'First IDLE frame preview',
+        width: 120,
+        cellRenderer: Frame08Renderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'view',
+        headerName: '',
+        width: 100,
+        cellRenderer: ViewButtonRenderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      {
+        field: 'edit',
+        headerName: '',
+        width: 100,
+        cellRenderer: EditButtonRenderer,
+        editable: false,
+        sortable: false,
+        filter: false,
+      },
+      ...(canDelete
+        ? [
+            {
+              field: 'delete',
+              headerName: '',
+              width: 100,
+              cellRenderer: DeleteButtonRenderer,
+              editable: false,
+              sortable: false,
+              filter: false,
+            },
+          ]
+        : []),
+    ];
+
+    return await DefaultManagement.instance({
+      idModal,
+      serviceId,
+      entity: 'object-layer',
+      permissions: {
+        add: commonModeratorGuard(role),
+        remove: false,
+        reload: commonUserGuard(role),
+      },
+      customEvent: {
+        add: async () => {
+          // Navigate to editor route for new object (no query params)
+          setPath(`${getProxyPath()}object-layer-engine`);
+          if (s(`.modal-object-layer-engine`))
+            setTimeout(() => {
+              ObjectLayerEngineModal.Reload();
+            });
+          s(`.main-btn-object-layer-engine`).click();
+        },
+      },
+      columnDefs,
+      customFormat: (obj) => {
+        return {
+          ...obj,
+        };
+      },
+      onRowValueChanged: async (...args) => {
+        const [event] = args;
+        return { status: 'success', data: event.data };
+      },
+      defaultColKeyFocus: 'data.item.id',
+      ServiceProvider: ObjectLayerService,
+      paginationOptions: {
+        limitOptions: [10, 25, 50, 100, 200],
+      },
+    });
+  };
+  static async Reload(subModalId = 'management') {
+    const idModal = `modal-object-layer-engine-${subModalId}`;
+    if (s(`.modal-object-layer-engine-${subModalId}`))
+      Modal.writeHTML({
+        idModal,
+        html: await Modal.Data[idModal].options.html(),
+      });
+  }
+}
+
+export { ObjectLayerManagement };

package/src/client/services/object-layer/object-layer.service.js

@@ -0,0 +1,208 @@
+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 = 'object-layer';
+class ObjectLayerService {
+  static post = (options = { id: '', body: {}, headerId: undefined }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(options.headerId),
+        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);
+        }),
+    );
+  static put = (options = { id: '', body: {}, headerId: undefined }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(options.headerId),
+        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);
+        }),
+    );
+  static get = (options = { id: '', page: 1, limit: 10 }) => {
+    const url = buildQueryUrl(getApiBaseUrl({ id: options.id, endpoint }), options);
+    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);
+        }),
+    );
+  };
+  static getRender = (options = { id: '' }) => {
+    const url = new URL(getApiBaseUrl({ id: `render/${options.id}`, endpoint }));
+    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);
+        }),
+    );
+  };
+  static getMetadata = (options = { id: '' }) => {
+    const url = new URL(getApiBaseUrl({ id: `metadata/${options.id}`, endpoint }));
+    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);
+        }),
+    );
+  };
+  static getFrameCounts = (options = { id: '' }) => {
+    const url = new URL(getApiBaseUrl({ id: `frame-counts/${options.id}`, endpoint }));
+    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);
+        }),
+    );
+  };
+  static 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);
+        }),
+    );
+  static generateWebp = (options = { itemType: '', itemId: '', directionCode: '' }) => {
+    const url = new URL(
+      getApiBaseUrl({
+        id: `generate-webp/${options.itemType}/${options.itemId}/${options.directionCode}`,
+        endpoint,
+      }),
+    );
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          if (!res.ok) {
+            const errorData = await res.json();
+            throw new Error(errorData.message || 'Failed to generate WebP');
+          }
+          // Get the blob data
+          const blob = await res.blob();
+          // Create a blob URL for display
+          const blobUrl = URL.createObjectURL(blob);
+          return { status: 'success', data: blobUrl };
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    );
+  };
+  static searchItemIds = (options = { q: '' }) => {
+    const url = new URL(getApiBaseUrl({ id: `search-item-ids`, endpoint }));
+    if (options.q) url.searchParams.set('q', options.q);
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    );
+  };
+}
+export { ObjectLayerService };