underpost 2.8.867 → 2.8.871

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

@@ -1535,18 +1535,6 @@ const Modal = {
           s(`.btn-icon-menu-back`).classList.add('hide');
           if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
         };
-        this.onHomeRouterEvent = async () => {
-          for (const keyModal of Object.keys(this.Data)) {
-            if (
-              ![idModal, 'main-body-top', 'main-body'].concat(this.Data[idModal]?.homeModals || []).includes(keyModal)
-            )
-              if (s(`.btn-close-${keyModal}`)) s(`.btn-close-${keyModal}`).click();
-            backMenuButtonEvent();
-          }
-          if (s(`.btn-close-modal-menu`)) s(`.btn-close-modal-menu`).click();
-          setPath(getProxyPath());
-          setDocTitle();
-        };
         s(`.main-btn-home`).onclick = async () => {
           // await this.onHomeRouterEvent();
           s(`.action-btn-home`).click();
@@ -1767,12 +1755,8 @@ const Modal = {
         if (!s(`.${idModal}`)) return;
         this.removeModal(idModal);
         // Handle modal route change
-        if (options.route) {
-          closeModalRouteChangeEvent({
-            route: options.route,
-            RouterInstance: options.RouterInstance,
-            homeCid: Modal.homeCid,
-          });
+        if (options.route || options.query) {
+          closeModalRouteChangeEvent({ closedId: idModal, homeCid: Modal.homeCid });
         }
       }, 300);
     };
@@ -1967,7 +1951,45 @@ const Modal = {
       ...this.Data[idModal],
     };
   },
-  onHomeRouterEvent: () => {},
+  onHomeRouterEvent: async () => {
+    // 1. Get list of modals to close.
+    const modalsToClose = Object.keys(Modal.Data).filter((idModal) => {
+      const modal = Modal.Data[idModal];
+      if (!modal) return false;
+      // Don't close the core UI elements
+      const coreUI = ['modal-menu', 'main-body', 'main-body-top', 'bottom-bar', 'board-notification'];
+      if (coreUI.find((id) => idModal.startsWith(id))) {
+        return false;
+      }
+      // Don't close modals that are part of the "home" screen itself
+      const homeModals = Modal.Data['modal-menu']?.homeModals || [];
+      if (homeModals.includes(idModal)) {
+        return false;
+      }
+      return true;
+    });
+
+    // 2. Navigate to home first, creating a new history entry.
+    setPath(getProxyPath());
+    setDocTitle();
+
+    // 3. Close the modals without them affecting the URL.
+    for (const id of modalsToClose) {
+      Modal.removeModal(id);
+    }
+
+    // 4. Finally, handle UI cleanup for the slide-menu.
+    if (s(`.menu-btn-container-children`)) htmls(`.menu-btn-container-children`, '');
+    if (s(`.nav-title-display-modal-menu`)) htmls(`.nav-title-display-modal-menu`, '');
+    if (s(`.nav-path-display-modal-menu`)) htmls(`.nav-path-display-modal-menu`, '');
+    if (s(`.btn-icon-menu-back`)) s(`.btn-icon-menu-back`).classList.add('hide');
+    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
+
+    // And close the slide menu if it's open
+    if (s(`.btn-close-modal-menu`) && !s(`.btn-close-modal-menu`).classList.contains('hide')) {
+      s(`.btn-close-modal-menu`).click();
+    }
+  },
   currentTopModalId: '',
   zIndexSync: function ({ idModal }) {
     setTimeout(() => {
@@ -1996,11 +2018,6 @@ const Modal = {
   setTopModalCallback: function (idModal) {
     s(`.${idModal}`).style.zIndex = '4';
     this.currentTopModalId = `${idModal}`;
-    if (
-      this.Data[idModal].query &&
-      `${location.pathname}${window.location.search}` !== `${location.pathname}${this.Data[idModal].query}`
-    )
-      setPath(`${location.pathname}${this.Data[idModal].query}`);
   },
   mobileModal: () => window.innerWidth < 600 || window.innerHeight < 600,
   writeHTML: ({ idModal, html }) => htmls(`.html-${idModal}`, html),

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

@@ -33,6 +33,22 @@ const templateHTML = html`
       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">
@@ -48,8 +64,34 @@ const templateHTML = html`
       <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>
@@ -79,11 +121,24 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._importJsonBtn = this.shadowRoot.querySelector('button[part="import-json"]');
     this._toggleGrid = this.shadowRoot.querySelector('input[part="toggle-grid"]');
 
+    // new controls
+    this._widthInput = this.shadowRoot.querySelector('input[part="cell-width"]');
+    this._heightInput = this.shadowRoot.querySelector('input[part="cell-height"]');
+    this._flipHBtn = this.shadowRoot.querySelector('button[part="flip-h"]');
+    this._flipVBtn = this.shadowRoot.querySelector('button[part="flip-v"]');
+    this._rotCCWBtn = this.shadowRoot.querySelector('button[part="rot-ccw"]');
+    this._rotCWBtn = this.shadowRoot.querySelector('button[part="rot-cw"]');
+    this._clearBtn = this.shadowRoot.querySelector('button[part="clear"]');
+    this._opacityRange = this.shadowRoot.querySelector('input[part="opacity"]');
+    this._opacityNumber = this.shadowRoot.querySelector('input[part="opacity-num"]');
+
     // internal state
     this._width = 16;
     this._height = 16;
     this._pixelSize = 16;
     this._brushSize = 1;
+    // brush color stored as [r,g,b,a]
+    this._brushColor = [0, 0, 0, 255];
     this._matrix = this._createEmptyMatrix(this._width, this._height);
 
     this._pixelCtx = null;
@@ -91,13 +146,18 @@ class ObjectLayerEngineElement extends HTMLElement {
 
     this._isPointerDown = false;
     this._tool = 'pencil';
-    this._brushColor = [0, 0, 0, 255];
     this._showGrid = false;
 
     // binds
     this._onPointerDown = this._onPointerDown.bind(this);
     this._onPointerMove = this._onPointerMove.bind(this);
     this._onPointerUp = this._onPointerUp.bind(this);
+
+    // transform methods bound (useful if passing as callbacks)
+    this.flipHorizontal = this.flipHorizontal.bind(this);
+    this.flipVertical = this.flipVertical.bind(this);
+    this.rotateCW = this.rotateCW.bind(this);
+    this.rotateCCW = this.rotateCCW.bind(this);
   }
 
   static get observedAttributes() {
@@ -111,16 +171,29 @@ class ObjectLayerEngineElement extends HTMLElement {
   }
 
   connectedCallback() {
+    // respect attributes if present
     if (this.hasAttribute('width')) this._width = Math.max(1, parseInt(this.getAttribute('width'), 10));
     if (this.hasAttribute('height')) this._height = Math.max(1, parseInt(this.getAttribute('height'), 10));
     if (this.hasAttribute('pixel-size')) this._pixelSize = Math.max(1, parseInt(this.getAttribute('pixel-size'), 10));
 
     this._setupContextsAndSize();
 
+    // set initial UI control values (keeps in sync with attributes)
+    if (this._widthInput) this._widthInput.value = String(this._width);
+    if (this._heightInput) this._heightInput.value = String(this._height);
+    if (this._pixelSizeInput) this._pixelSizeInput.value = String(this._pixelSize);
+    if (this._brushSizeInput) this._brushSizeInput.value = String(this._brushSize);
+
+    // initialize color & opacity UI
+    if (this._colorInput) this._colorInput.value = this._rgbaToHex(this._brushColor);
+    if (this._opacityRange) this._opacityRange.value = String(this._brushColor[3]);
+    if (this._opacityNumber) this._opacityNumber.value = String(this._brushColor[3]);
+
     // UI events
     this._colorInput.addEventListener('input', (e) => {
-      const rgba = this._hexToRgba(e.target.value);
-      this.setBrushColor([rgba[0], rgba[1], rgba[2], 255]);
+      const rgb = this._hexToRgba(e.target.value);
+      // keep current alpha
+      this.setBrushColor([rgb[0], rgb[1], rgb[2], this._brushColor[3]]);
     });
     this._toolSelect.addEventListener('change', (e) => this.setTool(e.target.value));
     this._brushSizeInput.addEventListener('change', (e) => this.setBrushSize(parseInt(e.target.value, 10) || 1));
@@ -132,6 +205,42 @@ class ObjectLayerEngineElement extends HTMLElement {
       this._renderGrid();
     });
 
+    // opacity controls - keep range and number in sync
+    if (this._opacityRange) {
+      this._opacityRange.addEventListener('input', (e) => {
+        const v = Math.max(0, Math.min(255, parseInt(e.target.value, 10) || 0));
+        this.setBrushAlpha(v);
+      });
+    }
+    if (this._opacityNumber) {
+      this._opacityNumber.addEventListener('change', (e) => {
+        const v = Math.max(0, Math.min(255, parseInt(e.target.value, 10) || 0));
+        this.setBrushAlpha(v);
+      });
+    }
+
+    // width/height change -> resize (preserve existing content)
+    if (this._widthInput)
+      this._widthInput.addEventListener('change', (e) => {
+        const val = Math.max(1, parseInt(e.target.value, 10) || 1);
+        // keep value synced (will update input again in resize)
+        this.resize(val, this._height, { preserve: true });
+      });
+    if (this._heightInput)
+      this._heightInput.addEventListener('change', (e) => {
+        const val = Math.max(1, parseInt(e.target.value, 10) || 1);
+        this.resize(this._width, val, { preserve: true });
+      });
+
+    // transform buttons
+    if (this._flipHBtn) this._flipHBtn.addEventListener('click', this.flipHorizontal);
+    if (this._flipVBtn) this._flipVBtn.addEventListener('click', this.flipVertical);
+    if (this._rotCWBtn) this._rotCWBtn.addEventListener('click', this.rotateCW);
+    if (this._rotCCWBtn) this._rotCCWBtn.addEventListener('click', this.rotateCCW);
+
+    // clear button (makes canvas fully transparent)
+    if (this._clearBtn) this._clearBtn.addEventListener('click', () => this.clear([0, 0, 0, 0]));
+
     // Export/Import
     this._exportBtn.addEventListener('click', () => this.exportPNG());
     this._exportJsonBtn.addEventListener('click', () => {
@@ -169,6 +278,14 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._pixelCanvas.removeEventListener('pointerdown', this._onPointerDown);
     window.removeEventListener('pointermove', this._onPointerMove);
     window.removeEventListener('pointerup', this._onPointerUp);
+
+    if (this._flipHBtn) this._flipHBtn.removeEventListener('click', this.flipHorizontal);
+    if (this._flipVBtn) this._flipVBtn.removeEventListener('click', this.flipVertical);
+    if (this._rotCWBtn) this._rotCWBtn.removeEventListener('click', this.rotateCW);
+    if (this._rotCCWBtn) this._rotCCWBtn.removeEventListener('click', this.rotateCCW);
+    if (this._clearBtn) this._clearBtn.removeEventListener('click', () => this.clear([0, 0, 0, 0]));
+    if (this._opacityRange) this._opacityRange.removeEventListener('input', () => {});
+    if (this._opacityNumber) this._opacityNumber.removeEventListener('change', () => {});
   }
 
   // ---------------- Matrix helpers ----------------
@@ -227,6 +344,13 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._width = nw;
     this._height = nh;
     this._matrix = newMat;
+
+    // keep inputs and attributes in sync
+    if (this._widthInput) this._widthInput.value = String(this._width);
+    if (this._heightInput) this._heightInput.value = String(this._height);
+    this.setAttribute('width', String(this._width));
+    this.setAttribute('height', String(this._height));
+
     this._setupContextsAndSize();
     this.render();
     this.dispatchEvent(new CustomEvent('resize', { detail: { width: nw, height: nh } }));
@@ -365,10 +489,33 @@ class ObjectLayerEngineElement extends HTMLElement {
     this._tool = name;
     if (this._toolSelect) this._toolSelect.value = name;
   }
+
+  // set full RGBA brush color (alpha optional)
   setBrushColor(rgba) {
-    this._brushColor = rgba.map((n) => this._clampInt(n));
+    if (!Array.isArray(rgba) || rgba.length < 3) return;
+    const r = this._clampInt(rgba[0]);
+    const g = this._clampInt(rgba[1]);
+    const b = this._clampInt(rgba[2]);
+    const a = typeof rgba[3] === 'number' ? this._clampInt(rgba[3]) : this._brushColor[3];
+    this._brushColor = [r, g, b, a];
     if (this._colorInput) this._colorInput.value = this._rgbaToHex(this._brushColor);
+    if (this._opacityRange) this._opacityRange.value = String(this._brushColor[3]);
+    if (this._opacityNumber) this._opacityNumber.value = String(this._brushColor[3]);
   }
+
+  // set brush alpha (0-255)
+  setBrushAlpha(a) {
+    const v = Math.max(0, Math.min(255, Math.floor(Number(a) || 0)));
+    this._brushColor[3] = v;
+    if (this._opacityRange) this._opacityRange.value = String(v);
+    if (this._opacityNumber) this._opacityNumber.value = String(v);
+    // keep color input (hex) representing rgb only
+    if (this._colorInput) this._colorInput.value = this._rgbaToHex(this._brushColor);
+  }
+  getBrushAlpha() {
+    return this._brushColor[3];
+  }
+
   setBrushSize(n) {
     this._brushSize = Math.max(1, Math.floor(n));
     if (this._brushSizeInput) this._brushSizeInput.value = this._brushSize;
@@ -584,6 +731,84 @@ class ObjectLayerEngineElement extends HTMLElement {
       .slice(1)}`;
   }
 
+  // ---------------- Transform helpers (flip/rotate) ----------------
+  flipHorizontal() {
+    // reverse each row (mirror horizontally)
+    for (let y = 0; y < this._height; y++) {
+      this._matrix[y].reverse();
+    }
+    this.render();
+    this.dispatchEvent(new CustomEvent('transform', { detail: { type: 'flip-horizontal' } }));
+  }
+
+  flipVertical() {
+    // reverse the order of rows (mirror vertically)
+    this._matrix.reverse();
+    this.render();
+    this.dispatchEvent(new CustomEvent('transform', { detail: { type: 'flip-vertical' } }));
+  }
+
+  rotateCW() {
+    // rotate +90 degrees (clockwise)
+    const oldH = this._height;
+    const oldW = this._width;
+    const newW = oldH;
+    const newH = oldW;
+    const newMat = this._createEmptyMatrix(newW, newH);
+    for (let y = 0; y < oldH; y++) {
+      for (let x = 0; x < oldW; x++) {
+        const px = this._matrix[y][x] ? this._matrix[y][x].slice() : [0, 0, 0, 0];
+        const newX = oldH - 1 - y; // column in new matrix
+        const newY = x; // row in new matrix
+        newMat[newY][newX] = px;
+      }
+    }
+    this._width = newW;
+    this._height = newH;
+    this._matrix = newMat;
+    // keep inputs/attributes in sync
+    if (this._widthInput) this._widthInput.value = String(this._width);
+    if (this._heightInput) this._heightInput.value = String(this._height);
+    this.setAttribute('width', String(this._width));
+    this.setAttribute('height', String(this._height));
+
+    this._setupContextsAndSize();
+    this.render();
+    this.dispatchEvent(
+      new CustomEvent('transform', { detail: { type: 'rotate-cw', width: this._width, height: this._height } }),
+    );
+  }
+
+  rotateCCW() {
+    // rotate -90 degrees (counter-clockwise)
+    const oldH = this._height;
+    const oldW = this._width;
+    const newW = oldH;
+    const newH = oldW;
+    const newMat = this._createEmptyMatrix(newW, newH);
+    for (let y = 0; y < oldH; y++) {
+      for (let x = 0; x < oldW; x++) {
+        const px = this._matrix[y][x] ? this._matrix[y][x].slice() : [0, 0, 0, 0];
+        const newX = y; // column in new matrix
+        const newY = oldW - 1 - x; // row in new matrix
+        newMat[newY][newX] = px;
+      }
+    }
+    this._width = newW;
+    this._height = newH;
+    this._matrix = newMat;
+    if (this._widthInput) this._widthInput.value = String(this._width);
+    if (this._heightInput) this._heightInput.value = String(this._height);
+    this.setAttribute('width', String(this._width));
+    this.setAttribute('height', String(this._height));
+
+    this._setupContextsAndSize();
+    this.render();
+    this.dispatchEvent(
+      new CustomEvent('transform', { detail: { type: 'rotate-ccw', width: this._width, height: this._height } }),
+    );
+  }
+
   // ---------------- Properties ----------------
   get width() {
     return this._width;