chart-preview 1.3.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,11 @@
 # 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

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 = [];
@@ -1121,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}`
               );
             }
           }

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 = [];
@@ -1081,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}`
               );
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chart-preview",
-	"version": "1.3.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[] = [];
@@ -1482,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}`
               );
             }
           }