Add functional patch saving plus validation

client/src/api.ts

@@ -1,3 +1,5 @@
+import { Patch } from '../../common/types'
+
 type Method = 'GET' | 'POST'
 type Options = {
   body?: any
@@ -29,3 +31,7 @@ const post = (endpoint: string, options?: Options) => {
 export const getIdentity = () => {
   return get('/api/identity')
 }
+
+export const saveNewPatch = (patch: Patch) => {
+  return post('/api/patch', { body: patch })
+}

client/src/components/ActiveCable.tsx

@@ -21,11 +21,11 @@ const ActiveCable = () => {
 
   const candidateSocket = getCableConnectionCandidate()
 
-  const a = getSocketPosition(state.activeCable.from.socket)
+  const a = getSocketPosition(state.activeCable.from)
   const b = candidateSocket ? getSocketPosition(candidateSocket) : state.cursor
 
-  const from = state.activeCable.from.socket.type === 'output' ? a : b
-  const to = state.activeCable.from.socket.type === 'output' ? b : a
+  const from = state.activeCable.from.type === 'output' ? a : b
+  const to = state.activeCable.from.type === 'output' ? b : a
 
   return <CablePath from={from} to={to} />
 }

client/src/components/App.tsx

@@ -0,0 +1,14 @@
+import { h } from 'kaiku'
+
+const App = () => {
+  return (
+    <div className="">
+      <div className="header">
+        <h2>modulate</h2>
+        <div className="current-patch">
+          <input type="text" />
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/Cable.tsx

@@ -1,7 +1,7 @@
 import { h, useEffect } from 'kaiku'
 import { getRegisteredSocket, getSockets } from '../sockets'
 import { getSocketPosition } from '../state'
-import { ConnectedSocket } from '../types'
+import { ConnectedSocket } from '../../../common/types'
 import CablePath from './CablePath'
 
 type Props = {

client/src/components/Cables.tsx

@@ -1,14 +1,14 @@
 import { h } from 'kaiku'
-import state from '../state'
+import { viewport, patch } from '../state'
 
 import ActiveCable from './ActiveCable'
 import Cable from './Cable'
 
 const Cables = () => (
   <div className="cables">
-    <svg viewBox={`0 0 ${state.viewport.width} ${state.viewport.height}`}>
-      {state.cables.map(({ id, from, to }) => (
-        <Cable key={id} from={from.socket} to={to.socket} />
+    <svg viewBox={`0 0 ${viewport.width} ${viewport.height}`}>
+      {patch.cables.map(({ id, from, to }) => (
+        <Cable key={id} from={from} to={to} />
       ))}
       <ActiveCable />
     </svg>

client/src/components/Knob.tsx

@@ -1,6 +1,6 @@
 import { h, useState, useEffect } from 'kaiku'
 import state, { getKnobValue, setKnobValue } from '../state'
-import { Id, Vec2 } from '../types'
+import { Id, Vec2 } from '../../../common/types'
 
 type Props = {
   moduleId: Id

client/src/components/Module.tsx

@@ -1,6 +1,6 @@
 import { h, useState, useEffect, FC } from 'kaiku'
 import state, { getModulePosition } from '../state'
-import { Id, Vec2 } from '../types'
+import { Id, Vec2 } from '../../../common/types'
 
 type Props = {
   id: Id

client/src/components/Modules.tsx

@@ -1,14 +1,13 @@
 import { h, Fragment } from 'kaiku'
-import state from '../state'
-import { Id } from '../types'
+import { patch } from '../state'
 import { moduleMap } from '../moduleMap'
 
 const Modules = () => {
   return (
     <>
-      {Object.keys(state.modules).map((id: string) => {
+      {Object.keys(patch.modules).map((id: string) => {
         const Component: any =
-          moduleMap[state.modules[id as Id].name as keyof typeof moduleMap]
+          moduleMap[patch.modules[id].name as keyof typeof moduleMap]
         return <Component id={id} />
       })}
     </>

client/src/components/Socket.tsx

@@ -1,7 +1,7 @@
 import { h, Fragment, useEffect, useRef } from 'kaiku'
-import { getModulePosition, plugActiveCable, setSocketPosition } from '../state'
+import { plugActiveCable, setSocketPosition } from '../state'
 import { RegisteredSocket, registerSocket, unregisterSocket } from '../sockets'
-import { Vec2 } from '../types'
+import { Vec2 } from '../../../common/types'
 
 type Props = RegisteredSocket
 
@@ -43,6 +43,7 @@ const Socket = ({ moduleId, type, name, node }: Props) => {
     if (ref.current) {
       const offset = getSocketOffset(ref.current)
       const { width, height } = ref.current.getBoundingClientRect()
+
       setSocketPosition(moduleId, name, {
         x: offset.x + width / 2,
         y: offset.y + height / 2,

client/src/generated/worklets.ts

@@ -1,3 +1,4 @@
+
 // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 //
 // THIS IS A GENERATED FILE, DO NOT EDIT MANUALLY
@@ -8,13 +9,7 @@ import Clock from '../../worklets/Clock'
 import Gain from '../../worklets/Gain'
 import ModulationHelper from '../../worklets/ModulationHelper'
 import Sequencer from '../../worklets/Sequencer'
-export const workletNames = [
-  'ADSR',
-  'Clock',
-  'Gain',
-  'ModulationHelper',
-  'Sequencer',
-] as const
+export const workletNames = ["ADSR","Clock","Gain","ModulationHelper","Sequencer"] as const
 export type Worklets = {
   ADSR: typeof ADSR
   Clock: typeof Clock

client/src/index.tsx

@@ -3,7 +3,7 @@ import { initializeAudio } from './audio'
 import Cables from './components/Cables'
 import Modules from './components/Modules'
 import ModuleSelector from './components/ModuleSelector'
-import state from './state'
+import state, { patch } from './state'
 import * as api from './api'
 
 const initialize = async () => {
@@ -14,14 +14,13 @@ const initialize = async () => {
   if (rawSaveState) {
     const { currentId, modules, knobs, sockets, cables } =
       JSON.parse(rawSaveState)
-    state.knobs = knobs
-    state.currentId = currentId
-    state.modules = modules
-    state.sockets = sockets
+    patch.knobs = knobs
+    patch.currentId = currentId
+    patch.modules = modules
 
     state.initialized = true
     await new Promise((resolve) => requestAnimationFrame(resolve))
-    state.cables = cables
+    patch.cables = cables
   } else {
     state.initialized = true
   }
@@ -36,18 +35,7 @@ const App = () => {
   useEffect(() => {
     if (!state.initialized) return
 
-    const { currentId, modules, knobs, sockets, cables } = state
-
-    localStorage.setItem(
-      'savestate',
-      JSON.stringify({
-        currentId,
-        modules,
-        knobs,
-        sockets,
-        cables,
-      })
-    )
+    localStorage.setItem('savestate', JSON.stringify(patch))
   })
 
   if (!state.initialized) {
@@ -63,6 +51,9 @@ const App = () => {
       <ModuleSelector />
       <Modules />
       <Cables />
+      <div className="patch-controls">
+        <button onClick={() => api.saveNewPatch(patch)}>Save</button>
+      </div>
     </>
   )
 }