underpost 2.8.866 → 2.8.871

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

@@ -51,6 +51,7 @@ const Modal = {
       RouterInstance: {},
       disableTools: [],
       observer: false,
+      disableBoxShadow: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -89,6 +90,11 @@ const Modal = {
       onHome: {},
       homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
+      getTop: () => window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
+      getHeight: () =>
+        window.innerHeight -
+        (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
+        (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar),
     };
 
     if (idModal !== 'main-body' && options.mode !== 'view') {
@@ -117,12 +123,7 @@ const Modal = {
 
           Responsive.Event[`view-${idModal}`] = () => {
             if (!this.Data[idModal]) return delete Responsive.Event[`view-${idModal}`];
-            if (this.Data[idModal].slideMenu)
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+            if (this.Data[idModal].slideMenu) s(`.${idModal}`).style.height = `${this.Data[idModal].getHeight()}px`;
           };
           Responsive.Event[`view-${idModal}`]();
 
@@ -207,11 +208,7 @@ const Modal = {
             const { barConfig } = options;
             options.style = {
               position: 'absolute',
-              height: `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`,
+              height: `${Modal.Data[idModal].getHeight()}px`,
               width: `${slideMenuWidth}px`,
               // 'overflow-x': 'hidden',
               // overflow: 'visible', // required for tooltip
@@ -239,11 +236,7 @@ const Modal = {
                 if (this.Data[_idModal].slideMenu && this.Data[_idModal].slideMenu.id === idModal)
                   this.Data[_idModal].slideMenu.callBack();
               }
-              s(`.${idModal}`).style.height = `${
-                window.innerHeight -
-                (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-              }px`;
+              s(`.${idModal}`).style.height = `${Modal.Data[idModal].getHeight()}px`;
               if (s(`.main-body-top`)) {
                 if (Modal.mobileModal()) {
                   if (s(`.btn-menu-${idModal}`).classList.contains('hide') && collapseSlideMenuWidth !== slideMenuWidth)
@@ -753,9 +746,12 @@ const Modal = {
                 s(`.main-btn-${results[currentKeyBoardSearchBoxIndex].routerId}`).click();
                 Modal.removeModal(searchBoxHistoryId);
               };
-
+              let boxHistoryDelayRender = 0;
               const searchBoxHistoryOpen = async () => {
-                if (!s(`.${id}`)) {
+                if (boxHistoryDelayRender) return;
+                boxHistoryDelayRender = 1000;
+                setTimeout(() => (boxHistoryDelayRender = 0));
+                if (!s(`.${searchBoxHistoryId}`)) {
                   const { barConfig } = await Themes[Css.currentTheme]();
                   barConfig.buttons.maximize.disabled = true;
                   barConfig.buttons.minimize.disabled = true;
@@ -763,7 +759,7 @@ const Modal = {
                   barConfig.buttons.menu.disabled = true;
                   barConfig.buttons.close.disabled = false;
                   await Modal.Render({
-                    id,
+                    id: searchBoxHistoryId,
                     barConfig,
                     title: html`<div class="search-box-recent-title">
                         ${renderViewTitle({
@@ -964,6 +960,7 @@ const Modal = {
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
                   observer: true,
+                  disableBoxShadow: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -985,12 +982,7 @@ const Modal = {
                   s(`.top-bar-search-box`).style.top = `${
                     (originHeightTopBar - s(`.top-bar-search-box`).clientHeight) / 2
                   }px`;
-                  if (this.Data[id].slideMenu)
-                    s(`.${id}`).style.height = `${
-                      window.innerHeight -
-                      (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                      (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                  if (this.Data[id].slideMenu) s(`.${id}`).style.height = `${Modal.Data[id].getHeight()}px`;
                 };
                 Responsive.Event[`view-${id}`]();
                 Keyboard.instanceMultiPressKey({
@@ -1119,9 +1111,7 @@ const Modal = {
                     if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
                     //  <div class="in fll right-offset-menu-bottom-bar" style="height: 100%"></div>
                     // s(`.right-offset-menu-bottom-bar`).style.width = `${window.innerWidth - slideMenuWidth}px`;
-                    s(`.${id}`).style.top = `${
-                      window.innerHeight - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                    }px`;
+                    s(`.${id}`).style.top = `${Modal.Data[id].getTop()}px`;
                   };
                   Responsive.Event[`view-${id}`]();
                 }
@@ -1293,11 +1283,7 @@ const Modal = {
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
                     s(`.btn-restore-${id}`).style.display !== 'none'
                       ? `${window.innerHeight}px`
-                      : `${
-                          window.innerHeight -
-                          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                        }px`;
+                      : `${Modal.Data[id].getHeight()}px`;
 
                   if (
                     s(`.main-body-btn-ui-close`).classList.contains('hide') &&
@@ -1405,7 +1391,11 @@ const Modal = {
         }
       </style>
       ${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
-      <div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
+      <div
+        class="fix ${options && options.class ? options.class : ''} modal ${options.disableBoxShadow
+          ? ''
+          : 'box-shadow'} ${idModal}"
+      >
         <div class="abs modal-handle-${idModal}"></div>
         <div class="in modal-html-${idModal}">
           <div class="stq bar-default-modal bar-default-modal-${idModal}">
@@ -1545,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();
@@ -1777,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);
     };
@@ -1918,11 +1892,7 @@ const Modal = {
             if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display !== 'none') {
               s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
                 ? `${window.innerHeight}px`
-                : `${
-                    window.innerHeight -
-                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                  }px`;
+                : `${Modal.Data[idModal].getHeight()}px`;
             }
             s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
               ? `0px`
@@ -1981,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(() => {
@@ -2010,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;