Added SplitNode, minor fixes

src/audio/audio.libraryItem.ts

@@ -56,7 +56,7 @@ export class AudioLibraryItem extends LibraryItem<AudioLibraryItemState> {
                 return false;
             }
             if (!this.name) {
-                this.name = dialogResult.filePaths![0];
+                this.name = dialogResult.filePaths![0].replace(/^.*[\\/]/, "");
             }
             this.path = dialogResult.filePaths![0];
             await this.loadAudio();

src/graph/nodes/effects/SplitNode.ts

@@ -0,0 +1,30 @@
+import { defineDynamicNode } from "baklavajs";
+import { ColorArrayInterface, IntegerInterface } from "../../interfaces";
+import { LmsCalculationContext } from "../../types";
+import { Color } from "../../colors";
+import { scaleColorArray } from "@/utils";
+
+export const SplitNode = defineDynamicNode({
+    type: "Split",
+    inputs: {
+        splitInto: () => new IntegerInterface("Split Into", 2, 1, 10),
+        colors: () => new ColorArrayInterface("Colors", []),
+    },
+    onUpdate: ({ splitInto }) => {
+        const outputs: Record<string, () => ColorArrayInterface> = {};
+        for (let i = 1; i <= splitInto; i++) {
+            outputs[`output${i}`] = () => new ColorArrayInterface(`Output ${i}`, []);
+        }
+
+        return { outputs };
+    },
+    calculate: ({ colors, splitInto }, ctx: LmsCalculationContext) => {
+        const result: Record<string, Color[]> = {};
+        for (let i = 1; i <= splitInto; i++) {
+            // slice the input array into splitInto parts
+            const output = colors.slice((i - 1) * (colors.length / splitInto), i * (colors.length / splitInto));
+            result[`output${i}`] = scaleColorArray(output, ctx.globalValues.resolution);
+        }
+        return result;
+    },
+});

src/graph/nodes/effects/index.ts

@@ -1,3 +1,4 @@
 export * from "./AfterglowNode";
 export * from "./MirrorNode";
 export * from "./RotateNode";
+export * from "./SplitNode";

src/graph/options/ColorPicker.vue

@@ -38,12 +38,18 @@ onClickOutside(el, () => {
 .color-picker {
     height: 100%;
     border-radius: 3px;
+    cursor: pointer;
 }
 
 .color-picker-overlay {
     position: absolute;
     left: 100%;
     top: 0%;
     z-index: 100;
+    transform: scale(1);
+}
+
+:deep(.vc-input__input) {
+    background-color: white;
 }
 </style>