chart-preview 1.2.0 → 1.3.1

package/.github/workflows/release.yml

@@ -22,9 +22,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: "npm"
-          registry-url: "https://registry.npmjs.org"
+
+      # npm trusted publishing needs npm >= 11.5.1; a cached Node 24.x can bundle an older npm.
+      - name: Install npm for trusted publishing
+        run: |
+          npm install -g npm@^11.5.1
+          npm --version
 
       - name: Install Dependencies
         run: npm ci
@@ -35,4 +40,3 @@ jobs:
           publish: npm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # chart-preview
 
+## 1.3.1
+
+### Patch Changes
+
+- 2175c5f: Draw five-fret open tap notes instead of skipping them. They use the open note texture with the tap marking of the other tap notes.
+
+## 1.3.0
+
+### Minor Changes
+
+- fe294b3: Add manual resize functionality to ChartPreview and trigger resize in ChartPreviewPlayer on fullscreen change
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -180,6 +180,11 @@ declare class ChartPreview {
     get chartCurrentTimeMs(): number;
     /** Total duration in milliseconds */
     get chartEndTimeMs(): number;
+    /**
+     * Manually triggers a resize of the camera and renderer.
+     * Call this when the container size changes (e.g., entering/exiting fullscreen).
+     */
+    resize(): void;
     /**
      * Cleans up all resources. Call this when discarding the preview.
      * The preview should not be used after calling dispose().

package/dist/index.js

@@ -241,6 +241,44 @@ function createPlaceholderTexture() {
   texture.colorSpace = THREE.SRGBColorSpace;
   return texture;
 }
+function createTapTexture(strumTexture) {
+  const rimPx = 8;
+  const rimFadePx = 6;
+  const image = strumTexture.image;
+  const canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  ctx.drawImage(image, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+  const clamp01 = (value) => Math.min(Math.max(value, 0), 1);
+  const colorWeight = (i) => {
+    const max = Math.max(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const min = Math.min(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const saturation = max === 0 ? 0 : (max - min) / max;
+    return pixels[i + 3] === 0 ? 0 : clamp01((saturation - 0.2) / 0.3);
+  };
+  for (let y = 0; y < canvas.height; y++) {
+    let runStart = 0;
+    for (let x = 0; x <= canvas.width; x++) {
+      if (x < canvas.width && colorWeight((y * canvas.width + x) * 4) > 0) {
+        continue;
+      }
+      for (let runX = runStart; runX < x; runX++) {
+        const distanceFromEnd = Math.min(runX - runStart, x - 1 - runX) + 1;
+        const rim = clamp01((rimPx + rimFadePx - distanceFromEnd) / rimFadePx);
+        const i = (y * canvas.width + runX) * 4;
+        pixels[i + 3] *= 1 - colorWeight(i) * (1 - rim);
+      }
+      runStart = x + 1;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = strumTexture.colorSpace;
+  return texture;
+}
 var AnimatedTextureManager = class {
   constructor() {
     this.animatedTextures = [];
@@ -409,6 +447,17 @@ var _ChartPreview = class {
   get chartEndTimeMs() {
     return this.audioManager.chartEndTimeMs;
   }
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -496,6 +545,10 @@ var ChartCamera = class extends THREE.PerspectiveCamera {
     this.aspect = width / height;
     this.updateProjectionMatrix();
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -518,6 +571,10 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
     const height = this.divContainer.offsetHeight ?? window.innerHeight;
     this.setSize(width, height);
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -1102,26 +1159,33 @@ async function loadTextures(instrumentType, options = {}) {
           [import_scan_chart.noteTypes.blue, "blue"],
           [import_scan_chart.noteTypes.orange, "orange"]
         ]);
-        const modifiers = /* @__PURE__ */ new Map([
-          [import_scan_chart.noteFlags.strum, "-strum"],
-          [import_scan_chart.noteFlags.hopo, "-hopo"],
-          [import_scan_chart.noteFlags.tap, "-tap"]
-        ]);
         const spFlags = /* @__PURE__ */ new Map([
           [import_scan_chart.noteFlags.none, ""],
           [SP_FLAG, "-sp"]
         ]);
         for (const [laneKey, laneName] of lanes) {
-          for (let [modifierKey, modifierName] of modifiers) {
-            for (const [spFlagKey, spFlagName] of spFlags) {
-              if (laneKey === import_scan_chart.noteTypes.open && modifierKey === import_scan_chart.noteFlags.tap) {
-                modifierName = "-hopo";
-                modifierKey = import_scan_chart.noteFlags.hopo;
-              }
+          for (const [spFlagKey, spFlagName] of spFlags) {
+            const strumTexture = addTexture(
+              laneKey,
+              import_scan_chart.noteFlags.strum | spFlagKey,
+              `5fret-${laneName}-strum${spFlagName}`
+            );
+            addTexture(
+              laneKey,
+              import_scan_chart.noteFlags.hopo | spFlagKey,
+              `5fret-${laneName}-hopo${spFlagName}`
+            );
+            if (laneKey === import_scan_chart.noteTypes.open) {
+              reuseTexture(
+                laneKey,
+                import_scan_chart.noteFlags.tap | spFlagKey,
+                strumTexture.then(createTapTexture)
+              );
+            } else {
               addTexture(
                 laneKey,
-                modifierKey | spFlagKey,
-                `5fret-${laneName}${modifierName}${spFlagName}`
+                import_scan_chart.noteFlags.tap | spFlagKey,
+                `5fret-${laneName}-tap${spFlagName}`
               );
             }
           }
@@ -1760,6 +1824,13 @@ var ChartPreviewPlayer = class extends HTMLElement {
       this.container.classList.toggle("fullscreen", this._isFullscreen);
       this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
       this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+      if (this.chartPreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.chartPreview?.resize();
+          });
+        });
+      }
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();

package/dist/index.mjs

@@ -201,6 +201,44 @@ function createPlaceholderTexture() {
   texture.colorSpace = THREE.SRGBColorSpace;
   return texture;
 }
+function createTapTexture(strumTexture) {
+  const rimPx = 8;
+  const rimFadePx = 6;
+  const image = strumTexture.image;
+  const canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  ctx.drawImage(image, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+  const clamp01 = (value) => Math.min(Math.max(value, 0), 1);
+  const colorWeight = (i) => {
+    const max = Math.max(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const min = Math.min(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const saturation = max === 0 ? 0 : (max - min) / max;
+    return pixels[i + 3] === 0 ? 0 : clamp01((saturation - 0.2) / 0.3);
+  };
+  for (let y = 0; y < canvas.height; y++) {
+    let runStart = 0;
+    for (let x = 0; x <= canvas.width; x++) {
+      if (x < canvas.width && colorWeight((y * canvas.width + x) * 4) > 0) {
+        continue;
+      }
+      for (let runX = runStart; runX < x; runX++) {
+        const distanceFromEnd = Math.min(runX - runStart, x - 1 - runX) + 1;
+        const rim = clamp01((rimPx + rimFadePx - distanceFromEnd) / rimFadePx);
+        const i = (y * canvas.width + runX) * 4;
+        pixels[i + 3] *= 1 - colorWeight(i) * (1 - rim);
+      }
+      runStart = x + 1;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = strumTexture.colorSpace;
+  return texture;
+}
 var AnimatedTextureManager = class {
   constructor() {
     this.animatedTextures = [];
@@ -369,6 +407,17 @@ var _ChartPreview = class {
   get chartEndTimeMs() {
     return this.audioManager.chartEndTimeMs;
   }
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -456,6 +505,10 @@ var ChartCamera = class extends THREE.PerspectiveCamera {
     this.aspect = width / height;
     this.updateProjectionMatrix();
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -478,6 +531,10 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
     const height = this.divContainer.offsetHeight ?? window.innerHeight;
     this.setSize(width, height);
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -1062,26 +1119,33 @@ async function loadTextures(instrumentType, options = {}) {
           [noteTypes.blue, "blue"],
           [noteTypes.orange, "orange"]
         ]);
-        const modifiers = /* @__PURE__ */ new Map([
-          [noteFlags.strum, "-strum"],
-          [noteFlags.hopo, "-hopo"],
-          [noteFlags.tap, "-tap"]
-        ]);
         const spFlags = /* @__PURE__ */ new Map([
           [noteFlags.none, ""],
           [SP_FLAG, "-sp"]
         ]);
         for (const [laneKey, laneName] of lanes) {
-          for (let [modifierKey, modifierName] of modifiers) {
-            for (const [spFlagKey, spFlagName] of spFlags) {
-              if (laneKey === noteTypes.open && modifierKey === noteFlags.tap) {
-                modifierName = "-hopo";
-                modifierKey = noteFlags.hopo;
-              }
+          for (const [spFlagKey, spFlagName] of spFlags) {
+            const strumTexture = addTexture(
+              laneKey,
+              noteFlags.strum | spFlagKey,
+              `5fret-${laneName}-strum${spFlagName}`
+            );
+            addTexture(
+              laneKey,
+              noteFlags.hopo | spFlagKey,
+              `5fret-${laneName}-hopo${spFlagName}`
+            );
+            if (laneKey === noteTypes.open) {
+              reuseTexture(
+                laneKey,
+                noteFlags.tap | spFlagKey,
+                strumTexture.then(createTapTexture)
+              );
+            } else {
               addTexture(
                 laneKey,
-                modifierKey | spFlagKey,
-                `5fret-${laneName}${modifierName}${spFlagName}`
+                noteFlags.tap | spFlagKey,
+                `5fret-${laneName}-tap${spFlagName}`
               );
             }
           }
@@ -1724,6 +1788,13 @@ var ChartPreviewPlayer = class extends HTMLElement {
       this.container.classList.toggle("fullscreen", this._isFullscreen);
       this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
       this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+      if (this.chartPreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.chartPreview?.resize();
+          });
+        });
+      }
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chart-preview",
-	"version": "1.2.0",
+	"version": "1.3.1",
 	"author": "Geo",
 	"license": "MIT",
 	"main": "dist/index.js",
@@ -26,7 +26,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+ssh://git@github.com/Geomitron/chart-preview.git"
+		"url": "git+https://github.com/Geomitron/chart-preview.git"
 	},
 	"bugs": {
 		"url": "https://github.com/Geomitron/chart-preview/issues"

package/src/ChartPreview.ts

@@ -259,6 +259,56 @@ function createPlaceholderTexture(): THREE.Texture {
   return texture;
 }
 
+/**
+ * Marks `strumTexture` the way the five-fret tap textures mark tap notes:
+ * each row of colored pixels is hollowed out, except for a rim at both ends of
+ * the row. With these values, the result closely matches each five-fret tap
+ * texture when this is applied to the matching strum texture.
+ */
+function createTapTexture(strumTexture: THREE.Texture): THREE.Texture {
+  const rimPx = 8;
+  const rimFadePx = 6;
+  const image = strumTexture.image as HTMLCanvasElement | HTMLImageElement;
+  const canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
+  ctx.drawImage(image, 0, 0);
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+  const clamp01 = (value: number) => Math.min(Math.max(value, 0), 1);
+
+  /** 0 for grey or transparent pixels, rising to 1 for strongly colored pixels. */
+  const colorWeight = (i: number) => {
+    const max = Math.max(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const min = Math.min(pixels[i], pixels[i + 1], pixels[i + 2]);
+    const saturation = max === 0 ? 0 : (max - min) / max;
+    return pixels[i + 3] === 0 ? 0 : clamp01((saturation - 0.2) / 0.3);
+  };
+
+  for (let y = 0; y < canvas.height; y++) {
+    let runStart = 0;
+    for (let x = 0; x <= canvas.width; x++) {
+      if (x < canvas.width && colorWeight((y * canvas.width + x) * 4) > 0) {
+        continue;
+      }
+      // Pixels runStart to x - 1 are a run of colored pixels
+      for (let runX = runStart; runX < x; runX++) {
+        const distanceFromEnd = Math.min(runX - runStart, x - 1 - runX) + 1;
+        const rim = clamp01((rimPx + rimFadePx - distanceFromEnd) / rimFadePx);
+        const i = (y * canvas.width + runX) * 4;
+        pixels[i + 3] *= 1 - colorWeight(i) * (1 - rim);
+      }
+      runStart = x + 1;
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = strumTexture.colorSpace;
+  return texture;
+}
+
 /** Collection of animated textures that need to be ticked each frame */
 class AnimatedTextureManager {
   private animatedTextures: AnimatedTexture[] = [];
@@ -509,6 +559,19 @@ export class ChartPreview {
     return this.audioManager.chartEndTimeMs;
   }
 
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    // Re-render a frame to immediately show the updated size
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
+
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -618,6 +681,11 @@ class ChartCamera extends THREE.PerspectiveCamera {
     this.updateProjectionMatrix();
   }
 
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
+
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -642,6 +710,11 @@ class ChartRenderer extends THREE.WebGLRenderer {
     this.setSize(width, height);
   }
 
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
+
   override dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -1459,27 +1532,35 @@ async function loadTextures(
           [noteTypes.blue, "blue"],
           [noteTypes.orange, "orange"],
         ]);
-        const modifiers = new Map([
-          [noteFlags.strum, "-strum"],
-          [noteFlags.hopo, "-hopo"],
-          [noteFlags.tap, "-tap"],
-        ]);
         const spFlags = new Map([
           [noteFlags.none, ""],
           [SP_FLAG, "-sp"],
         ]);
 
         for (const [laneKey, laneName] of lanes) {
-          for (let [modifierKey, modifierName] of modifiers) {
-            for (const [spFlagKey, spFlagName] of spFlags) {
-              if (laneKey === noteTypes.open && modifierKey === noteFlags.tap) {
-                modifierName = "-hopo";
-                modifierKey = noteFlags.hopo;
-              }
+          for (const [spFlagKey, spFlagName] of spFlags) {
+            const strumTexture = addTexture(
+              laneKey,
+              noteFlags.strum | spFlagKey,
+              `5fret-${laneName}-strum${spFlagName}`
+            );
+            addTexture(
+              laneKey,
+              noteFlags.hopo | spFlagKey,
+              `5fret-${laneName}-hopo${spFlagName}`
+            );
+            if (laneKey === noteTypes.open) {
+              // There is no open tap texture
+              reuseTexture(
+                laneKey,
+                noteFlags.tap | spFlagKey,
+                strumTexture.then(createTapTexture)
+              );
+            } else {
               addTexture(
                 laneKey,
-                modifierKey | spFlagKey,
-                `5fret-${laneName}${modifierName}${spFlagName}`
+                noteFlags.tap | spFlagKey,
+                `5fret-${laneName}-tap${spFlagName}`
               );
             }
           }

package/src/ChartPreviewPlayer.ts

@@ -549,6 +549,18 @@ export class ChartPreviewPlayer extends HTMLElement {
     this.fullscreenBtn.title = this._isFullscreen
       ? "Exit fullscreen"
       : "Enter fullscreen";
+
+    // Trigger resize on the chart preview after a short delay
+    // to ensure the container dimensions have updated
+    if (this.chartPreview) {
+      // Use requestAnimationFrame to ensure DOM has updated
+      requestAnimationFrame(() => {
+        // Double RAF to ensure layout has been recalculated
+        requestAnimationFrame(() => {
+          this.chartPreview?.resize();
+        });
+      });
+    }
   };
 
   private onSeekStart() {