Add current global tempo node

 * Fix some eslint config + fix some newly uncovered warnings
 * Fix underdraw in MIDI editor note lines when zoomed in

docs/_layouts/package.json

@@ -7,8 +7,8 @@
     "gatsby": "^3.0",
     "gatsby-plugin-plausible": "^0.0.7",
     "gatsby-theme-garden": "=0.1.66",
-    "react": "^16.3",
-    "react-dom": "^16.3"
+    "react": "^18.3",
+    "react-dom": "^18.3"
   },
   "keywords": [
     "foam"

docs/_layouts/yarn.lock

@@ -3796,17 +3796,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
-  version "1.0.30001660"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz"
-  integrity sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==
-
-caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001394:
-  version "1.0.30001660"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz"
-  integrity sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==
-
-caniuse-lite@^1.0.30001646:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001394, caniuse-lite@^1.0.30001646:
   version "1.0.30001660"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz"
   integrity sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==
@@ -11739,15 +11729,13 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^16.3:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^18.3:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.2"
 
 react-error-overlay@^6.0.9:
   version "6.0.11"
@@ -11810,7 +11798,7 @@ react-stacked-pages-hook@^0.4.8:
     lodash.isequal "^4.5.0"
     lodash.throttle "^4.1.1"
 
-react@^16.13.1, react@^16.3:
+react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -11819,6 +11807,13 @@ react@^16.13.1, react@^16.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^18.3:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -12416,13 +12411,12 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^2.6.5:
   version "2.7.1"

eslint.config.mjs

@@ -84,8 +84,13 @@ export default [
       '@typescript-eslint/no-unused-vars': [
         'warn',
         {
+          args: 'all',
           argsIgnorePattern: '^_',
+          caughtErrors: 'all',
           caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
         },
       ],
 

package.json

@@ -86,7 +86,7 @@
     "ramda": "^0.30.1",
     "react": "18.3.1",
     "react-ace": "^12.0.0",
-    "react-control-panel": ">=0.12.3",
+    "react-control-panel": ">=0.12.5",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.3.1",

src/ViewContextManager/ViewContextManager.tsx

@@ -145,7 +145,7 @@ export const ViewContextManager: React.FC<VCMProps> = ({ engine }) => {
         }}
         name={globalBeatCounterStarted ? 'Stop Global Play' : 'Start Global Play'}
       >
-        <div style={{ display: 'flex', padding: 4, width: 32, height: 24 }}>
+        <div style={{ display: 'flex', padding: 4, width: 32, height: 24, marginTop: -6 }}>
           <div
             className='restart-playback-icon-container'
             dangerouslySetInnerHTML={{ __html: RestartPlayback }}

src/controlPanel/PlaceholderInput.tsx

@@ -14,7 +14,7 @@ export class PlaceholderInput extends DummyNode {
   public label: string;
 
   constructor(
-    ctx: AudioContext,
+    _ctx: AudioContext,
     vcId: string,
     getConnectables: () => AudioConnectables,
     addInput: (

src/controlPanel/getConnectables.ts

@@ -36,7 +36,7 @@ export const buildControlPanelAudioConnectables = (
         const instanceState = getState().controlPanel.stateByPanelInstance[vcId];
         return buildControlPanelAudioConnectables(vcId, instanceState);
       },
-      (inputName: string, type: ConnectableType, rxConnectableDescriptor: ConnectableDescriptor) =>
+      (inputName: string, _type: ConnectableType, rxConnectableDescriptor: ConnectableDescriptor) =>
         void dispatch(
           actionCreators.controlPanel.ADD_CONTROL_PANEL_CONNECTION(
             vcId,

src/controls/adsr2/adsr2.tsx

@@ -1066,7 +1066,7 @@ export class ADSR2Instance {
         width: width * dpr,
         backgroundColor: BACKGROUND_COLOR,
       });
-    } catch (err) {
+    } catch (_err) {
       console.error('Failed to initialize PixiJS applicationl; WebGL not supported?');
     }
 

src/faustEditor/FaustEditor.tsx

@@ -267,7 +267,7 @@ const buildCodeEditorControlPanelSettings = ({
           reduxInfra.dispatch(
             reduxInfra.actionCreators.faustEditor.SET_EDITOR_CONTENT(effect.code)
           );
-        } catch (err) {
+        } catch (_err) {
           // pass
         }
       },

src/fmSynth/ConfigureOperator.tsx

@@ -198,8 +198,7 @@ const ConfigureWavetableIndex: React.FC<ConfigureWavetableIndexProps> = ({
             const WavetableConfigurator = (await import('./Wavetable/WavetableConfigurator.svelte'))
               .default;
             try {
-              const wavetableBank =
-                await renderSvelteModalWithControls<WavetableBank>(WavetableConfigurator);
+              const wavetableBank = await renderSvelteModalWithControls(WavetableConfigurator);
               setWavetableState({
                 ...wavetableState,
                 wavetableBanks: [wavetableBank],
@@ -259,7 +258,7 @@ const ConfigureWavetableIndex: React.FC<ConfigureWavetableIndexProps> = ({
               ...wavetableState,
               wavetableBanks: [...wavetableState.wavetableBanks, wavetableBank],
             });
-          } catch (err) {
+          } catch (_err) {
             // pass
           }
         },

src/graphEditor/GraphEditor.tsx

@@ -249,7 +249,7 @@ LGraphCanvas.prototype.getNodeMenuOptions = function (this: LGraphCanvas, node:
 
   const moveToSubgraph = {
     content: 'Move Selected to Subgraph',
-    callback: (_menuEntry: any, options: any, event: any, parentMenu: ContextMenu) => {
+    callback: (_menuEntry: any, _options: any, event: any, parentMenu: ContextMenu) => {
       const activeSubgraphID = getState().viewContextManager.activeSubgraphID;
       const validMoveToSubgraphs = R.sortWith(
         [R.ascend(([_id, desc]) => desc.name.toLocaleLowerCase())],
@@ -778,7 +778,7 @@ const GraphEditor: React.FC<{ stateKey: string }> = ({ stateKey }) => {
         }
 
         const lowerValue = value.toLowerCase().trim();
-        return displayNames.filter((displayName, i) => lowerDisplayNames[i].includes(lowerValue));
+        return displayNames.filter((_displayName, i) => lowerDisplayNames[i].includes(lowerValue));
       };
       canvas.onSearchBoxSelection = (name, _evt, _graphCanvas) => {
         const entry = sortedNodeEntries.find(([displayName]) => displayName === name);

src/graphEditor/nodes/CustomAudio/BPM/BPMNode.ts

@@ -0,0 +1,50 @@
+import { Map as ImmMap } from 'immutable';
+import { globalTempoCSN } from 'src/globalMenu';
+import BpmNodeSmallView from 'src/graphEditor/nodes/CustomAudio/BPM/BPMNodeSmallView.svelte';
+
+import type { ForeignNode } from 'src/graphEditor/nodes/CustomAudio/CustomAudio';
+import type { OverridableAudioParam } from 'src/graphEditor/nodes/util';
+import type { ConnectableInput, ConnectableOutput } from 'src/patchNetwork';
+import { mkSvelteContainerCleanupHelper, mkSvelteContainerRenderHelper } from 'src/svelteUtils';
+
+export class BPMNode implements ForeignNode {
+  private vcId: string | undefined;
+
+  static typeName = 'BPM';
+  public nodeType = 'customAudio/bpm';
+
+  public paramOverrides: {
+    [name: string]: { param: OverridableAudioParam; override: ConstantSourceNode };
+  } = {};
+
+  constructor(_ctx: AudioContext, vcId?: string, _params?: { [key: string]: any } | null) {
+    this.vcId = vcId;
+
+    this.renderSmallView = mkSvelteContainerRenderHelper({
+      Comp: BpmNodeSmallView,
+      getProps: () => ({}),
+    });
+
+    this.cleanupSmallView = mkSvelteContainerCleanupHelper({ preserveRoot: true });
+  }
+
+  public serialize(): { [key: string]: any } {
+    return {};
+  }
+
+  public buildConnectables() {
+    return {
+      inputs: ImmMap<string, ConnectableInput>(),
+      outputs: ImmMap<string, ConnectableOutput>().set('bpm', {
+        type: 'number',
+        node: globalTempoCSN,
+      }),
+      vcId: this.vcId!,
+      node: this,
+    };
+  }
+
+  // These are set dynamically at initialization time in the constructor
+  public renderSmallView: ForeignNode['renderSmallView'];
+  public cleanupSmallView: ForeignNode['cleanupSmallView'];
+}

src/graphEditor/nodes/CustomAudio/BPM/BPMNodeSmallView.svelte

@@ -0,0 +1,11 @@
+<div class="root">
+  This node outputs the current global tempo for the composition in BPM.
+  <br /><br />
+  In the future, this will allow the global tempo to be controlled dynamically during playback as well.
+</div>
+
+<style>
+  .root {
+    padding: 8px;
+  }
+</style>

src/graphEditor/nodes/CustomAudio/CustomAudio.ts

@@ -44,6 +44,7 @@ import type { SampleDescriptor } from 'src/sampleLibrary';
 import { LGAudioConnectables } from '../AudioConnectablesNode';
 import { FMSynthFxNode } from './FMSynthFx/FMSynthFxNode';
 import { SubgraphPortalNode } from 'src/graphEditor/nodes/CustomAudio/Subgraph/SubgraphPortalNode';
+import { BPMNode } from 'src/graphEditor/nodes/CustomAudio/BPM/BPMNode';
 
 const ctx = new AudioContext();
 
@@ -78,7 +79,16 @@ export interface ForeignNode<T = any> {
   };
   renderSmallView?: (domId: string) => void;
   cleanupSmallView?: (domId: string) => void;
+  /**
+   * This method should be implemented by nodes that load samples.  It should return a list of all the samples that
+   * are currently being used by this node.  This is used during composition sharing to make sure that any local
+   * samples are converted into remote samples before saving so that they are available to other users loading
+   * the composition.
+   */
   listUsedSamples?: () => SampleDescriptor[];
+  /**
+   * This will be called when the node is double-clicked in the graph editor.
+   */
   onNodeDblClicked?: () => void;
 }
 
@@ -497,6 +507,9 @@ export const audioNodeGetters: {
   'customAudio/subgraphPortal': {
     nodeGetter: SubgraphPortalNode,
   },
+  'customAudio/bpm': {
+    nodeGetter: BPMNode,
+  },
 };
 
 /**

src/graphEditor/nodes/CustomAudio/CustomGainNodeSmallView.tsx

@@ -1,22 +1,32 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import ControlPanel from 'react-control-panel';
 
 import type { ForeignNode } from 'src/graphEditor/nodes/CustomAudio';
 
-const CustomGainNodeSmallView: React.FC<{ node: ForeignNode<BiquadFilterNode> }> = ({ node }) => (
+interface CustomGainNodeSmallViewProps {
+  node: ForeignNode<BiquadFilterNode>;
+}
+
+const CustomGainNodeSmallView: React.FC<CustomGainNodeSmallViewProps> = ({ node }) => (
   <ControlPanel
-    settings={[
-      {
-        type: 'range',
-        label: 'gain',
-        min: -1,
-        max: 5,
-        initial: node.paramOverrides.gain.override.offset.value,
+    settings={useMemo(
+      () => [
+        {
+          type: 'range',
+          label: 'gain',
+          min: -1,
+          max: 5,
+          initial: node.paramOverrides.gain.override.offset.value,
+        },
+      ],
+      [node.paramOverrides.gain.override.offset.value]
+    )}
+    onChange={useCallback(
+      (_key: string, val: number) => {
+        node.paramOverrides.gain.override.offset.value = val;
       },
-    ]}
-    onChange={(_key: string, val: number) => {
-      node.paramOverrides.gain.override.offset.value = val;
-    }}
+      [node.paramOverrides.gain.override.offset]
+    )}
     style={{ width: 500 }}
   />
 );

src/midiEditor/MIDIEditor.tsx

@@ -447,7 +447,7 @@ const MIDIEditorControlsInner: React.FC<MIDIEditorControlsProps> = ({
             });
             const composition = activeInstance.current!.serialize(true);
             await saveMIDIComposition(name, description ?? '', composition, tags ?? []);
-          } catch (err) {
+          } catch (_err) {
             return;
           }
         }}