underpost 2.8.881 → 2.8.883

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

@@ -1,113 +1,112 @@
 import { darkTheme, renderChessPattern } from './Css.js';
-
-const templateHTML = html`
-  <style>
-    :host {
-      --border: 1px solid #bbb;
-      --gap: 8px;
-      display: inline-block;
-      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-    }
-    .wrap {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-      align-items: flex-start;
-    }
-    .canvas-frame {
-      border: var(--border);
-      display: inline-block;
-      line-height: 0;
-      position: relative;
-      background: transparent;
-    }
-    canvas.canvas-layer {
-      display: block;
-      image-rendering: pixelated;
-      touch-action: none;
-      cursor: crosshair;
-    }
-    canvas.grid-layer {
-      position: absolute;
-      left: 0;
-      top: 0;
-      pointer-events: none;
-    }
-    .toolbar {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-    .toolbar label {
-      display: inline-flex;
-      gap: 6px;
-      align-items: center;
-    }
-    .group {
-      display: inline-flex;
-      gap: 6px;
-      align-items: center;
-    }
-  </style>
-
-  <div class="wrap">
-    <div class="toolbar">
-      <input type="color" part="color" title="Brush color" value="#000000" />
-      <select part="tool">
-        <option value="pencil">pencil</option>
-        <option value="eraser">eraser</option>
-        <option value="fill">fill</option>
-        <option value="eyedropper">eyedropper</option>
-      </select>
-
-      <label>brush <input type="number" part="brush-size" min="1" value="1" /></label>
-      <label>pixel-size <input type="number" part="pixel-size" min="1" value="16" /></label>
-
-      <!-- New: cell dimensions (width x height) -->
-      <label
-        >cells <input type="number" part="cell-width" min="1" value="16" style="width:6ch" /> x
-        <input type="number" part="cell-height" min="1" value="16" style="width:6ch"
-      /></label>
-
-      <label class="switch"> <input type="checkbox" part="toggle-grid" /> grid </label>
-
-      <!-- New: transform tools -->
-      <div class="group">
-        <button part="flip-h" title="Flip horizontally">Flip H</button>
-        <button part="flip-v" title="Flip vertically">Flip V</button>
-        <button part="rot-ccw" title="Rotate -90°">⟲</button>
-        <button part="rot-cw" title="Rotate +90°">⟳</button>
-      </div>
-
-      <label
-        >opacity <input type="range" part="opacity" min="0" max="255" value="255" style="width:10rem" /><input
-          type="number"
-          part="opacity-num"
-          min="0"
-          max="255"
-          value="255"
-          style="width:5ch;margin-left:4px"
-      /></label>
-
-      <button part="clear" title="Clear (make fully transparent)">Clear</button>
-
-      <button part="export">Export PNG</button>
-      <button part="export-json">Export JSON</button>
-      <button part="import-json">Import JSON</button>
-    </div>
-    <div class="canvas-frame" style="${renderChessPattern()}">
-      <canvas part="canvas" class="canvas-layer"></canvas>
-      <canvas part="grid" class="grid-layer"></canvas>
-    </div>
-  </div>
-`;
+import { append, htmls } from './VanillaJs.js';
 
 class ObjectLayerEngineElement extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = templateHTML;
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          --border: 1px solid #bbb;
+          --gap: 8px;
+          display: inline-block;
+          font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+        }
+        .wrap {
+          display: flex;
+          flex-direction: column;
+          gap: var(--gap);
+          align-items: flex-start;
+        }
+        .canvas-frame {
+          border: var(--border);
+          display: inline-block;
+          line-height: 0;
+          position: relative;
+          background: transparent;
+        }
+        canvas.canvas-layer {
+          display: block;
+          image-rendering: pixelated;
+          touch-action: none;
+          cursor: crosshair;
+        }
+        canvas.grid-layer {
+          position: absolute;
+          left: 0;
+          top: 0;
+          pointer-events: none;
+        }
+        .toolbar {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+          align-items: center;
+        }
+        .toolbar label {
+          display: inline-flex;
+          gap: 6px;
+          align-items: center;
+        }
+        .group {
+          display: inline-flex;
+          gap: 6px;
+          align-items: center;
+        }
+      </style>
+
+      <div class="wrap">
+        <div class="toolbar">
+          <input type="color" part="color" title="Brush color" value="#000000" />
+          <select part="tool">
+            <option value="pencil">pencil</option>
+            <option value="eraser">eraser</option>
+            <option value="fill">fill</option>
+            <option value="eyedropper">eyedropper</option>
+          </select>
+
+          <label>brush <input type="number" part="brush-size" min="1" value="1" /></label>
+          <label>pixel-size <input type="number" part="pixel-size" min="1" value="16" /></label>
+
+          <!-- New: cell dimensions (width x height) -->
+          <label
+            >cells <input type="number" part="cell-width" min="1" value="16" style="width:6ch" /> x
+            <input type="number" part="cell-height" min="1" value="16" style="width:6ch"
+          /></label>
+
+          <label class="switch"> <input type="checkbox" part="toggle-grid" /> grid </label>
+
+          <!-- New: transform tools -->
+          <div class="group">
+            <button part="flip-h" title="Flip horizontally">Flip H</button>
+            <button part="flip-v" title="Flip vertically">Flip V</button>
+            <button part="rot-ccw" title="Rotate -90°">⟲</button>
+            <button part="rot-cw" title="Rotate +90°">⟳</button>
+          </div>
+
+          <label
+            >opacity <input type="range" part="opacity" min="0" max="255" value="255" style="width:10rem" /><input
+              type="number"
+              part="opacity-num"
+              min="0"
+              max="255"
+              value="255"
+              style="width:5ch;margin-left:4px"
+          /></label>
+
+          <button part="clear" title="Clear (make fully transparent)">Clear</button>
+
+          <button part="export">Export PNG</button>
+          <button part="export-json">Export JSON</button>
+          <button part="import-json">Import JSON</button>
+        </div>
+        <div class="canvas-frame" style="${renderChessPattern()}">
+          <canvas part="canvas" class="canvas-layer"></canvas>
+          <canvas part="grid" class="grid-layer"></canvas>
+        </div>
+      </div>
+    `;
 
     // DOM
     this._pixelCanvas = this.shadowRoot.querySelector('canvas[part="canvas"]');
@@ -862,64 +861,61 @@ Example usage:
 <object-layer-engine id="ole" width="20" height="12" pixel-size="20"></object-layer-engine>
 */
 
-const template = document.createElement('template');
-template.innerHTML = html`
-  <style>
-    :host {
-      display: block;
-      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
-    }
-    .wrap {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .controls {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-    .drop-area {
-      border: 2px dashed #999;
-      padding: 12px;
-      border-radius: 8px;
-      text-align: center;
-      color: #555;
-      user-select: none;
-    }
-    .drop-area.dragover {
-      border-color: #4a90e2;
-      color: #1a73e8;
-      background: rgba(74, 144, 226, 0.04);
-    }
-    input[type='file'] {
-      display: inline-block;
-    }
-    .hint {
-      font-size: 0.9rem;
-      color: #666;
-    }
-  </style>
-
-  <div class="wrap">
-    <div class="controls">
-      <label title="Load PNG file">
-        <input type="file" accept="image/png" part="file-input" />
-        <span class="btn">Choose PNG</span>
-      </label>
-      <div class="hint">Only PNG images accepted. Drop PNG onto the box below.</div>
-    </div>
-
-    <div class="drop-area" part="drop-area">Drop PNG here or click "Choose PNG"</div>
-  </div>
-`;
-
 class ObjectLayerPngLoader extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
+        }
+        .wrap {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .controls {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+        .drop-area {
+          border: 2px dashed #999;
+          padding: 12px;
+          border-radius: 8px;
+          text-align: center;
+          color: #555;
+          user-select: none;
+        }
+        .drop-area.dragover {
+          border-color: #4a90e2;
+          color: #1a73e8;
+          background: rgba(74, 144, 226, 0.04);
+        }
+        input[type='file'] {
+          display: inline-block;
+        }
+        .hint {
+          font-size: 0.9rem;
+          color: #666;
+        }
+      </style>
+
+      <div class="wrap">
+        <div class="controls">
+          <label title="Load PNG file">
+            <input type="file" accept="image/png" part="file-input" />
+            <span class="btn">Choose PNG</span>
+          </label>
+          <div class="hint">Only PNG images accepted. Drop PNG onto the box below.</div>
+        </div>
+
+        <div class="drop-area" part="drop-area">Drop PNG here or click "Choose PNG"</div>
+      </div>
+    `;
 
     this._fileInput = this.shadowRoot.querySelector('input[type="file"]');
     this._dropArea = this.shadowRoot.querySelector('.drop-area');

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

@@ -131,6 +131,7 @@ const Panel = {
           ${await BtnIcon.Render({
             class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
             label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
+            useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
               text: `${Translate.Render(`edit`)}`,
@@ -141,6 +142,7 @@ const Panel = {
           ${await BtnIcon.Render({
             class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
             label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
+            useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
               text: `${Translate.Render(`delete`)}`,

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

@@ -42,6 +42,7 @@ const PanelForm = {
       limit: 3, // Load 5 items per page
       hasMore: true,
       loading: false,
+      lasIdAvailable: null,
     };
 
     const formData = [
@@ -359,9 +360,10 @@ const PanelForm = {
             panelData.data = [];
           }
 
-          panelData.originData.push(...newInstance(result.data));
+          panelData.originData.push(...newInstance(result.data.data));
+          panelData.lasIdAvailable = result.data.lastId;
 
-          for (const documentObject of result.data) {
+          for (const documentObject of result.data.data) {
             let mdFileId, fileId;
             let mdBlob, fileBlob;
             let mdPlain, filePlain;
@@ -407,9 +409,9 @@ const PanelForm = {
             });
           }
 
-          panelData.skip += result.data.length;
-          panelData.hasMore = result.data.length === panelData.limit;
-          if (result.data.length < panelData.limit) {
+          panelData.skip += result.data.data.length;
+          panelData.hasMore = result.data.data.length === panelData.limit;
+          if (result.data.data.length === 0 || result.data.data.pop()._id === panelData.lasIdAvailable) {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
             panelData.hasMore = false;
           }
@@ -474,75 +476,107 @@ const PanelForm = {
     let firsUpdateEvent = false;
     let lastCid;
     let lastUserId;
+    let loadingGetData = false;
     closeModalRouteChangeEvents[idPanel] = () => {
       setTimeout(() => {
         this.Data[idPanel].updatePanel();
       });
     };
-    this.Data[idPanel].updatePanel = async () => {
-      const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      const forceUpdate = lastUserId !== Elements.Data.user.main.model.user._id;
-      if (lastCid === cid && !forceUpdate) return;
-      lastUserId = newInstance(Elements.Data.user.main.model.user._id);
-      lastCid = cid;
-
-      if (cid) {
-        this.Data[idPanel] = {
-          ...this.Data[idPanel],
-          originData: [],
-          data: [],
-          filesData: [],
-          skip: 0,
-          limit: 3, // Load 5 items per page
-          hasMore: true,
-          loading: false,
-        };
-      }
+    this.Data[idPanel].updatePanel = async (...args) => {
+      const _updatePanel = async (...args) => {
+        try {
+          const cid = getQueryParams().cid ? getQueryParams().cid : '';
+          const forceUpdate =
+            Elements.Data.user.main.model &&
+            Elements.Data.user.main.model.user &&
+            Elements.Data.user.main.model.user._id &&
+            lastUserId !== Elements.Data.user.main.model.user._id;
+
+          logger.warn(
+            {
+              idPanel,
+              cid,
+              forceUpdate,
+            },
+            JSON.stringify(Elements.Data.user.main.model.user, null, 4),
+          );
 
-      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
-      htmls(containerSelector, await renderSrrPanelData());
+          if (loadingGetData || (lastCid === cid && !forceUpdate)) return;
+          loadingGetData = true;
+          lastUserId = newInstance(Elements.Data.user.main.model.user._id);
+          lastCid = cid;
 
-      await getPanelData();
+          logger.warn('Init render panel data');
 
-      htmls(
-        containerSelector,
-        html`
-          <div class="in">${await panelRender({ data: this.Data[idPanel].data })}</div>
-          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
-        `,
-      );
+          this.Data[idPanel] = {
+            ...this.Data[idPanel],
+            originData: [],
+            data: [],
+            filesData: [],
+            limit: 3, // Load 5 items per page
+            hasMore: true,
+            loading: false,
+          };
 
-      LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+          if (cid) this.Data[idPanel].skip = 0;
 
-      const scrollContainerSelector = `.modal-${options.route}`;
+          const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+          htmls(containerSelector, await renderSrrPanelData());
 
-      if (cid) {
-        LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
-        return;
-      }
-      if (this.Data[idPanel].removeScrollEvent) {
-        this.Data[idPanel].removeScrollEvent();
-      }
-      const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
-        const panelData = PanelForm.Data[idPanel];
-        if (!panelData) return;
-
-        // Infinite scroll: load more items at bottom
-        if (payload.atBottom && panelData.hasMore && !panelData.loading) {
-          const oldDataCount = panelData.data.length;
-          await getPanelData(true); // isLoadMore = true
-          const newItems = panelData.data.slice(oldDataCount);
-          if (newItems.length > 0) {
-            for (const item of newItems) append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+          await getPanelData();
+
+          htmls(
+            containerSelector,
+            html`
+              <div class="in">${await panelRender({ data: this.Data[idPanel].data })}</div>
+              <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+            `,
+          );
+
+          if (
+            !this.Data[idPanel].lasIdAvailable ||
+            this.Data[idPanel].lasIdAvailable !==
+              this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1]._id
+          )
+            LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+
+          const scrollContainerSelector = `.modal-${options.route}`;
+
+          if (cid) {
+            LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+            return;
+          }
+          if (this.Data[idPanel].removeScrollEvent) {
+            this.Data[idPanel].removeScrollEvent();
           }
+          const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
+            const panelData = PanelForm.Data[idPanel];
+            if (!panelData) return;
+
+            // Infinite scroll: load more items at bottom
+            if (payload.atBottom && panelData.hasMore && !panelData.loading) {
+              const oldDataCount = panelData.data.length;
+              await getPanelData(true); // isLoadMore = true
+              const newItems = panelData.data.slice(oldDataCount);
+              if (newItems.length > 0) {
+                for (const item of newItems)
+                  append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+              }
+            }
+          });
+          this.Data[idPanel].removeScrollEvent = removeEvent;
+
+          if (!firsUpdateEvent && options.firsUpdateEvent) {
+            firsUpdateEvent = true;
+            await options.firsUpdateEvent();
+          }
+        } catch (error) {
+          logger.error(error);
         }
-      });
-      this.Data[idPanel].removeScrollEvent = removeEvent;
+      };
 
-      if (!firsUpdateEvent && options.firsUpdateEvent) {
-        firsUpdateEvent = true;
-        await options.firsUpdateEvent();
-      }
+      await _updatePanel(...args);
+      loadingGetData = false;
     };
     if (options.route) {
       listenQueryPathInstance({

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

@@ -59,7 +59,7 @@ const getProxyPath = () => {
  * @returns {void | undefined} Returns `undefined` if the new path is the same as the current path, otherwise `void` (result of `history.pushState`).
  */
 const setPath = (path = '/', options = { removeSearch: false, removeHash: false }, stateStorage = {}, title = '') => {
-  logger.warn(`Set path input`, `${path}`);
+  // logger.warn(`Set path input`, `${path}`);
   if (!path) path = '/';
 
   let [inputPath, inputSearchHash] = `${path}`.split('?');
@@ -77,18 +77,18 @@ const setPath = (path = '/', options = { removeSearch: false, removeHash: false
     inputHash && !options.removeHash ? `#${inputHash}` : ''
   }`;
   const currentFullPath = `${window.location.pathname}${location.search}${location.hash}`;
-  logger.warn(`Set path output`, {
-    inputPath: inputPath,
-    inputSearch: inputSearch,
-    inputHash: inputHash,
-    sanitizedPath: sanitizedPath,
-    currentLocationSearch: location.search,
-    currentLocationHash: location.hash,
-    currentFullPath,
-    newFullPath,
-  });
+  // logger.warn(`Set path output`, {
+  //   inputPath: inputPath,
+  //   inputSearch: inputSearch,
+  //   inputHash: inputHash,
+  //   sanitizedPath: sanitizedPath,
+  //   currentLocationSearch: location.search,
+  //   currentLocationHash: location.hash,
+  //   currentFullPath,
+  //   newFullPath,
+  // });
   if (currentFullPath === newFullPath) {
-    logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
+    // logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
     return;
   }
   return history.pushState.call(history, stateStorage, title, newFullPath);
@@ -149,7 +149,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
   const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
-  logger.info(options);
+  // logger.info(options);
 
   for (let route of Object.keys(Routes())) {
     route = route.slice(1);
@@ -229,11 +229,11 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
  * @memberof PwaRouter
  */
 const closeModalRouteChangeEvent = (options = {}) => {
-  logger.warn('closeModalRouteChangeEvent', options);
+  // logger.warn('closeModalRouteChangeEvent', options);
   const { closedId } = options;
   if (!closedId) return;
   if (coreUI.find((id) => closedId.startsWith(id))) {
-    logger.warn('prevent core ui component close');
+    // logger.warn('prevent core ui component close');
     return;
   }