@onjmin/dtm 0.1.37 → 0.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3662,12 +3662,14 @@ var drawKeyboard = () => {
3662
3662
  const totalPitch = pitchIndex + pitchRangeStart;
3663
3663
  const pitchMod12 = totalPitch % 12;
3664
3664
  const isBlackKey = blackKeyPitches.has(pitchMod12);
3665
+ const octave = Math.floor(totalPitch / 12) - 1;
3666
+ const isC4Range = octave === 4;
3665
3667
  const screenY = y - g_draw_offset_y;
3666
3668
  const bkW = Math.floor(KEYBOARD_WIDTH * BK_RATIO);
3667
3669
  if (isBlackKey) {
3668
- g_key_ctx.fillStyle = WHITE_KEY;
3670
+ g_key_ctx.fillStyle = isC4Range ? "#d8d4be" : WHITE_KEY;
3669
3671
  g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
3670
- g_key_ctx.fillStyle = BLACK_KEY;
3672
+ g_key_ctx.fillStyle = isC4Range ? "#1a1408" : BLACK_KEY;
3671
3673
  g_key_ctx.fillRect(0, screenY, bkW, keyHeight);
3672
3674
  g_key_ctx.strokeStyle = BK_EDGE;
3673
3675
  g_key_ctx.lineWidth = 1;
@@ -3676,7 +3678,7 @@ var drawKeyboard = () => {
3676
3678
  g_key_ctx.lineTo(bkW, screenY + keyHeight);
3677
3679
  g_key_ctx.stroke();
3678
3680
  } else {
3679
- g_key_ctx.fillStyle = WHITE_KEY;
3681
+ g_key_ctx.fillStyle = isC4Range ? "#dedad0" : WHITE_KEY;
3680
3682
  g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
3681
3683
  if (pitchMod12 === 5 || pitchMod12 === 0) {
3682
3684
  g_key_ctx.strokeStyle = WW_SEP;
@@ -3688,13 +3690,13 @@ var drawKeyboard = () => {
3688
3690
  }
3689
3691
  }
3690
3692
  if (pitchMod12 === 0) {
3691
- const octave = Math.floor(totalPitch / 12) - 1;
3693
+ const octave2 = Math.floor(totalPitch / 12) - 1;
3692
3694
  g_key_ctx.fillStyle = "#555040";
3693
3695
  g_key_ctx.font = "10px 'k8x12',monospace";
3694
3696
  g_key_ctx.textAlign = "right";
3695
3697
  g_key_ctx.textBaseline = "bottom";
3696
3698
  g_key_ctx.fillText(
3697
- `${KEY_NAMES[pitchMod12]}${octave}`,
3699
+ `${KEY_NAMES[pitchMod12]}${octave2}`,
3698
3700
  KEYBOARD_WIDTH - 4,
3699
3701
  screenY + keyHeight - 2
3700
3702
  );
@@ -3746,17 +3748,22 @@ var drawGrid = (noteLengthSteps = 1) => {
3746
3748
  drawKeyboard();
3747
3749
  drawHeader();
3748
3750
  g_grid_ctx.clearRect(0, 0, g_grid_canvas.width, g_grid_canvas.height);
3749
- const { keyHeight, keyCount, stepWidth, stepsPerBar } = g_config;
3751
+ const { keyHeight, keyCount, stepWidth, stepsPerBar, pitchRangeStart } = g_config;
3750
3752
  const startY = Math.floor(g_draw_offset_y / keyHeight) * keyHeight;
3751
3753
  const endY = g_draw_offset_y + g_grid_canvas.height;
3752
3754
  for (let y = startY; y < endY; y += keyHeight) {
3753
3755
  const pitchIndex = keyCount - 1 - y / keyHeight;
3756
+ const totalPitch = pitchIndex + pitchRangeStart;
3754
3757
  const pitchMod12 = pitchIndex % 12;
3755
3758
  const isBlackKey = blackKeyPitches.has(pitchMod12);
3756
3759
  const isC = pitchMod12 === 0;
3760
+ const octave = Math.floor(totalPitch / 12) - 1;
3761
+ const isC4Range = octave === 4;
3757
3762
  const screenY = y - g_draw_offset_y;
3758
- if (isBlackKey) {
3759
- g_grid_ctx.fillStyle = "#0d1020";
3763
+ g_grid_ctx.fillStyle = isBlackKey ? "#080b16" : "#111628";
3764
+ g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
3765
+ if (isC4Range) {
3766
+ g_grid_ctx.fillStyle = "rgba(41,173,255,0.05)";
3760
3767
  g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
3761
3768
  }
3762
3769
  g_grid_ctx.beginPath();
@@ -10424,6 +10431,12 @@ var adjustZone = async (ctx, zone) => {
10424
10431
  }
10425
10432
  } else if (zone.file) {
10426
10433
  const buf = Uint8Array.from(atob(zone.file), (c) => c.charCodeAt(0)).buffer;
10434
+ if (ctx.state !== "running") {
10435
+ try {
10436
+ await ctx.resume();
10437
+ } catch {
10438
+ }
10439
+ }
10427
10440
  zone.buffer = await ctx.decodeAudioData(buf);
10428
10441
  }
10429
10442
  for (const [k, v] of [
package/dist/index.mjs CHANGED
@@ -3551,12 +3551,14 @@ var drawKeyboard = () => {
3551
3551
  const totalPitch = pitchIndex + pitchRangeStart;
3552
3552
  const pitchMod12 = totalPitch % 12;
3553
3553
  const isBlackKey = blackKeyPitches.has(pitchMod12);
3554
+ const octave = Math.floor(totalPitch / 12) - 1;
3555
+ const isC4Range = octave === 4;
3554
3556
  const screenY = y - g_draw_offset_y;
3555
3557
  const bkW = Math.floor(KEYBOARD_WIDTH * BK_RATIO);
3556
3558
  if (isBlackKey) {
3557
- g_key_ctx.fillStyle = WHITE_KEY;
3559
+ g_key_ctx.fillStyle = isC4Range ? "#d8d4be" : WHITE_KEY;
3558
3560
  g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
3559
- g_key_ctx.fillStyle = BLACK_KEY;
3561
+ g_key_ctx.fillStyle = isC4Range ? "#1a1408" : BLACK_KEY;
3560
3562
  g_key_ctx.fillRect(0, screenY, bkW, keyHeight);
3561
3563
  g_key_ctx.strokeStyle = BK_EDGE;
3562
3564
  g_key_ctx.lineWidth = 1;
@@ -3565,7 +3567,7 @@ var drawKeyboard = () => {
3565
3567
  g_key_ctx.lineTo(bkW, screenY + keyHeight);
3566
3568
  g_key_ctx.stroke();
3567
3569
  } else {
3568
- g_key_ctx.fillStyle = WHITE_KEY;
3570
+ g_key_ctx.fillStyle = isC4Range ? "#dedad0" : WHITE_KEY;
3569
3571
  g_key_ctx.fillRect(0, screenY, KEYBOARD_WIDTH, keyHeight);
3570
3572
  if (pitchMod12 === 5 || pitchMod12 === 0) {
3571
3573
  g_key_ctx.strokeStyle = WW_SEP;
@@ -3577,13 +3579,13 @@ var drawKeyboard = () => {
3577
3579
  }
3578
3580
  }
3579
3581
  if (pitchMod12 === 0) {
3580
- const octave = Math.floor(totalPitch / 12) - 1;
3582
+ const octave2 = Math.floor(totalPitch / 12) - 1;
3581
3583
  g_key_ctx.fillStyle = "#555040";
3582
3584
  g_key_ctx.font = "10px 'k8x12',monospace";
3583
3585
  g_key_ctx.textAlign = "right";
3584
3586
  g_key_ctx.textBaseline = "bottom";
3585
3587
  g_key_ctx.fillText(
3586
- `${KEY_NAMES[pitchMod12]}${octave}`,
3588
+ `${KEY_NAMES[pitchMod12]}${octave2}`,
3587
3589
  KEYBOARD_WIDTH - 4,
3588
3590
  screenY + keyHeight - 2
3589
3591
  );
@@ -3635,17 +3637,22 @@ var drawGrid = (noteLengthSteps = 1) => {
3635
3637
  drawKeyboard();
3636
3638
  drawHeader();
3637
3639
  g_grid_ctx.clearRect(0, 0, g_grid_canvas.width, g_grid_canvas.height);
3638
- const { keyHeight, keyCount, stepWidth, stepsPerBar } = g_config;
3640
+ const { keyHeight, keyCount, stepWidth, stepsPerBar, pitchRangeStart } = g_config;
3639
3641
  const startY = Math.floor(g_draw_offset_y / keyHeight) * keyHeight;
3640
3642
  const endY = g_draw_offset_y + g_grid_canvas.height;
3641
3643
  for (let y = startY; y < endY; y += keyHeight) {
3642
3644
  const pitchIndex = keyCount - 1 - y / keyHeight;
3645
+ const totalPitch = pitchIndex + pitchRangeStart;
3643
3646
  const pitchMod12 = pitchIndex % 12;
3644
3647
  const isBlackKey = blackKeyPitches.has(pitchMod12);
3645
3648
  const isC = pitchMod12 === 0;
3649
+ const octave = Math.floor(totalPitch / 12) - 1;
3650
+ const isC4Range = octave === 4;
3646
3651
  const screenY = y - g_draw_offset_y;
3647
- if (isBlackKey) {
3648
- g_grid_ctx.fillStyle = "#0d1020";
3652
+ g_grid_ctx.fillStyle = isBlackKey ? "#080b16" : "#111628";
3653
+ g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
3654
+ if (isC4Range) {
3655
+ g_grid_ctx.fillStyle = "rgba(41,173,255,0.05)";
3649
3656
  g_grid_ctx.fillRect(0, screenY, g_grid_canvas.width, keyHeight);
3650
3657
  }
3651
3658
  g_grid_ctx.beginPath();
@@ -10313,6 +10320,12 @@ var adjustZone = async (ctx, zone) => {
10313
10320
  }
10314
10321
  } else if (zone.file) {
10315
10322
  const buf = Uint8Array.from(atob(zone.file), (c) => c.charCodeAt(0)).buffer;
10323
+ if (ctx.state !== "running") {
10324
+ try {
10325
+ await ctx.resume();
10326
+ } catch {
10327
+ }
10328
+ }
10316
10329
  zone.buffer = await ctx.decodeAudioData(buf);
10317
10330
  }
10318
10331
  for (const [k, v] of [
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "onjmin",
3
3
  "license": "MIT",
4
4
  "name": "@onjmin/dtm",
5
- "version": "0.1.37",
5
+ "version": "0.1.38",
6
6
  "description": "MMLを中間言語に用いた、モバイルファーストなDAW / ピアノロール打ち込みコンポーネント",
7
7
  "homepage": "https://onjmin.github.io/dtm",
8
8
  "repository": {