feat(editor): simpler node numbers

Author: Picalines

packages/editor/src/__mock__/project/simple-project.ts

@@ -3,25 +3,47 @@ import type { Project } from '#model'
 export const simpleProjectMock: Project = {
   synthTree: {
     nodes: {
-      out: {
+      output: {
         type: 'output',
         position: { x: 0, y: 0 },
         params: {},
         color: 'zinc',
         number: 0,
       },
-      gen: {
+      generator: {
         type: 'generator',
-        position: { x: -200, y: 0 },
+        position: { x: -200, y: -50 },
         params: { waveShape: 'sawtooth', release: 1 },
         color: 'emerald',
         number: 1,
       },
+      oscillator: {
+        type: 'oscillator',
+        position: { x: -400, y: 0 },
+        params: {},
+        color: 'yellow',
+        number: 2,
+      },
+      reverb: {
+        type: 'reverb',
+        position: { x: -200, y: 50 },
+        params: {},
+        color: 'orange',
+        number: 3,
+      },
     },
     edges: {
       main: {
-        source: { node: 'gen', socket: 0 },
-        target: { node: 'out', socket: 0 },
+        source: { node: 'generator', socket: 0 },
+        target: { node: 'output', socket: 0 },
+      },
+      oscToReverb: {
+        source: { node: 'oscillator', socket: 0 },
+        target: { node: 'reverb', socket: 0 },
+      },
+      reverbToOutput: {
+        source: { node: 'reverb', socket: 0 },
+        target: { node: 'output', socket: 0 },
       },
     },
   },
@@ -30,10 +52,10 @@ export const simpleProjectMock: Project = {
     beatsPerMinute: 125,
     endingNote: 2,
     notes: {
-      'note-1': { synth: 'gen', pitch: 'c4', time: 0, duration: 0.25 },
-      'note-2': { synth: 'gen', pitch: 'e4', time: 0.25, duration: 0.25 },
-      'note-3': { synth: 'gen', pitch: 'd4', time: 0.5, duration: 0.25 },
-      'note-4': { synth: 'gen', pitch: 'f4', time: 0.75, duration: 0.25 },
+      'note-1': { synth: 'generator', pitch: 'c4', time: 0, duration: 0.25 },
+      'note-2': { synth: 'generator', pitch: 'e4', time: 0.25, duration: 0.25 },
+      'note-3': { synth: 'generator', pitch: 'd4', time: 0.5, duration: 0.25 },
+      'note-4': { synth: 'generator', pitch: 'f4', time: 0.75, duration: 0.25 },
     },
   },
 }

packages/editor/src/components/node-tile/node-tile.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { allSettled, fork } from 'effector'
 import type { ComponentProps } from 'react'
-import { mockRunningAudioContext } from '#__mock__/audio-context'
 import { simpleProjectMock } from '#__mock__/project'
 import { EditorScope } from '#components/editor'
 import { editorModel } from '#model'
@@ -12,7 +11,6 @@ type StoryArgs = ComponentProps<typeof NodeTile>
 export default {
   title: 'tiles/Node',
   component: NodeTile,
-  beforeEach: () => mockRunningAudioContext(),
   decorators: [
     (Story, { parameters: { scope } }) => (
       <EditorScope scope={scope}>
@@ -64,7 +62,7 @@ export const Selected: Story = {
       params: [
         {
           action: 'synth-node-select',
-          id: 'gen',
+          id: 'generator',
           selected: true,
         },
       ],
@@ -91,7 +89,7 @@ export const Readonly: Story = {
       params: [
         {
           action: 'synth-node-select',
-          id: 'gen',
+          id: 'generator',
           selected: true,
         },
       ],

packages/editor/src/components/synth-tree-tile/__screenshots__/tiles-SynthTree-Default-dark-1.png

@@ -49,24 +49,15 @@ const SynthFlowNodeComponent: FC<NodeProps<SynthFlowNode>> = props => {
     <>
       <div
         className={cn(
-          '-top-[1rlh] pointer-events-none absolute left-1 transition-all ease-out',
-          selected && '-translate-y-1',
-        )}
-      >
-        <Text color="muted" weight="bold">
-          {number}
-        </Text>
-      </div>
-      <div
-        className={cn(
-          'rounded-md border-2 border-accent bg-gradient-to-b p-1 px-2 text-white ring-offset-background transition-all ease-out',
+          'flex flex-col justify-between rounded-md border-2 border-accent bg-gradient-to-b p-1 px-2 text-white ring-offset-background transition-all ease-out',
           selected && 'ring-2 ring-offset-2',
           NODE_COLOR_CLASSNAMES[color],
           isPlaying && !outgoingConnections && numberOfOutputs && 'opacity-65',
         )}
         style={{ width: `${width}px`, height: `${height}px` }}
       >
         <Text>{capitalize(type)}</Text>
+        <Text variant="text-s">#{number}</Text>
       </div>
       {Array.from({ length: numberOfInputs }).map((_, i) => (
         <Handle key={String(i)} type="target" id={String(i)} position={Position.Left} className="!h-3 !w-3" />

packages/editor/src/components/synth-tree-tile/__screenshots__/tiles-SynthTree-Default-light-1.png

@@ -0,0 +1,7 @@
+import { testStoryMatrix } from '@repo/test-screen/test-story'
+
+testStoryMatrix({
+  meta: { title: 'tiles/SynthTree' },
+  stories: ['Default', 'Selected', 'Readonly'],
+  themes: ['light', 'dark'],
+})