Categorize nodes

MixeryOSS · Sep 12, 2023 · 9e3370f · 9e3370f
1 parent 0dbf24e
commit 9e3370f
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 4 deletions.
diff --git a/modules/engine/src/nodes/ADSREnvelopeNode.ts b/modules/engine/src/nodes/ADSREnvelopeNode.ts
@@ -167,6 +167,7 @@ export class ADSREnvelopeNode implements INode<ADSREnvelopeNode, ADSR> {
         return {
             typeId: ADSREnvelopeNode.ID,
             label: "ADSR Envelope",
+            category: "Synthesizing",
             createNew(project, context, nodeId) {
                 return new ADSREnvelopeNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/AudioSourceNode.ts b/modules/engine/src/nodes/AudioSourceNode.ts
@@ -69,6 +69,7 @@ export class AudioSourceNode implements INode<AudioSourceNode, AudioSourceNodeDa
         return {
             typeId: AudioSourceNode.ID,
             label: "Audio Source",
+            category: "Inputs/Outputs",
             createNew(project, context, nodeId) {
                 return new AudioSourceNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/ConstantNode.ts b/modules/engine/src/nodes/ConstantNode.ts
@@ -46,6 +46,7 @@ export class ConstantNode implements INode<ConstantNode, number> {
         return {
             typeId: ConstantNode.ID,
             label: "Constant",
+            category: "Inputs/Outputs",
             createNew(project, context, nodeId) {
                 return new ConstantNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/GainNode.ts b/modules/engine/src/nodes/GainNode.ts
@@ -54,6 +54,7 @@ export class GainNode implements INode<GainNode, number> {
         return {
             typeId: GainNode.ID,
             label: "Gain",
+            category: "Audio Effects",
             createNew(project, context, nodeId) {
                 return new GainNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/INode.ts b/modules/engine/src/nodes/INode.ts
@@ -81,6 +81,7 @@ export type NodeFromDataFactory<T extends INode<T, TData>, TData> = (
 export interface NodeFactory<T extends INode<T, TData>, TData> {
     readonly typeId: Identifier;
     readonly label: string;
+    readonly category?: string;
     readonly hidden?: boolean;
     createNew: NewNodeFactory<T, TData>;
     createExisting: NodeFromDataFactory<T, TData>;

diff --git a/modules/engine/src/nodes/NotesSourceNode.ts b/modules/engine/src/nodes/NotesSourceNode.ts
@@ -61,6 +61,7 @@ export class NotesSourceNode implements INode<NotesSourceNode, NotesSourceNodeDa
         return {
             typeId: NotesSourceNode.ID,
             label: "Notes Source",
+            category: "Inputs/Outputs",
             createNew(workspace, context, nodeId) {
                 return new NotesSourceNode(nodeId);
             },

diff --git a/modules/engine/src/nodes/PluckNode.ts b/modules/engine/src/nodes/PluckNode.ts
@@ -92,6 +92,7 @@ export class PluckNode implements INode<PluckNode, any> {
         return {
             typeId: PluckNode.ID,
             label: "Pluck",
+            category: "Instruments",
             createNew(project, context, nodeId) {
                 return new PluckNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/SpeakerNode.ts b/modules/engine/src/nodes/SpeakerNode.ts
@@ -45,6 +45,7 @@ export class SpeakerNode implements INode<SpeakerNode, any> {
         return {
             typeId: SpeakerNode.ID,
             label: "Speaker Output",
+            category: "Inputs/Outputs",
             createNew(project, context, nodeId) {
                 return new SpeakerNode(nodeId, context.audioOut);
             },

diff --git a/modules/engine/src/nodes/UnpackNoteNode.ts b/modules/engine/src/nodes/UnpackNoteNode.ts
@@ -84,6 +84,7 @@ export class UnpackNoteNode implements INode<UnpackNoteNode, UnpackNoteNodeData>
         return {
             typeId: UnpackNoteNode.ID,
             label: "Unpack Note",
+            category: "Synthesizing",
             createNew(project, context, nodeId) {
                 return new UnpackNoteNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/group/GroupNode.ts b/modules/engine/src/nodes/group/GroupNode.ts
@@ -131,6 +131,7 @@ export class GroupNode implements INode<GroupNode, GroupNodeSavedData> {
         return {
             typeId: GroupNode.ID,
             label: "Group",
+            category: "Specials",
             createNew(project, context, nodeId) {
                 return new GroupNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/engine/src/nodes/oscillators/SineOscillatorNode.ts b/modules/engine/src/nodes/oscillators/SineOscillatorNode.ts
@@ -111,6 +111,7 @@ export class SineOscillatorNode implements INode<SineOscillatorNode, SineOscilla
         return {
             typeId: SineOscillatorNode.ID,
             label: "Sine Oscillator",
+            category: "Synthesizing",
             createNew(project, context, nodeId) {
                 return new SineOscillatorNode(nodeId, project.workspace.audio);
             },

diff --git a/modules/ui/src/components/contextmenus/ContextMenu.vue b/modules/ui/src/components/contextmenus/ContextMenu.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
 <template>
     <div class="context-menu" ref="root" :style="{ left: `${props.x}px`, top: `${props.y}px` }">
         <div class="content">
-            <div class="entry" v-for="entry in props.menu">
+            <div class="entry" v-for="entry in props.menu" :class="{ submenu: !!entry.submenu }">
                 <div class="label" @click="entryClicked($event, entry)">{{ entry.label }}</div>
             </div>
         </div>
@@ -85,10 +85,26 @@ onUnmounted(() => {
             line-height: 1.6;
             border-radius: 4px;
             transition: 0.1s background-color;
+            white-space: pre;
+            position: relative;
 
             &:hover {
                 background-color: #ffffff1f;
             }
+
+            &.submenu {
+                padding-right: 16px;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    right: 4px; top: 50%;
+                    translate: 0 -50%;
+                    border-left: 6px solid #ffffff;
+                    border-top: 6px solid transparent;
+                    border-bottom: 6px solid transparent;
+                }
+            }
         }
     }
 }

diff --git a/modules/ui/src/components/workspace/nodes/NodesEditor.vue b/modules/ui/src/components/workspace/nodes/NodesEditor.vue
@@ -191,11 +191,14 @@ function addNode(event: MouseEvent) {
     const workspaceBox = workspaceUI?.getBoundingClientRect();
     contextMenuX.value = event.pageX - (workspaceBox?.x ?? 0);
     contextMenuY.value = event.pageY - (workspaceBox?.y ?? 0);
-    const entries: ContextMenuEntry[] = [];
+    const categories: Map<string, ContextMenuEntry[]> = new Map();
+
     getWorkspace().workspace.registries.nodeFactories.forEach((id, factory) => {
         if (factory.hidden) return;
+        let category = categories.get(factory.category ?? "Uncategorized");
+        if (!category) categories.set(factory.category ?? "Uncategorized", category = []);
 
-        entries.push({
+        category.push({
             label: factory.label,
             async onClick() {
                 const createTask = factory.createNew(
@@ -214,7 +217,11 @@ function addNode(event: MouseEvent) {
             },
         });
     });
-    contextMenu.value = entries;
+
+    contextMenu.value = [...categories.keys()].map(v => ({
+        label: v,
+        submenu: categories.get(v) ?? []
+    }));
 }
 
 function nodeClick(event: PointerEvent, cb: (node: INode<any, any>, port?: IPort<any>, portType?: "input" | "output") => any) {