Global State

Usage

usable in any functional component like this

import { useGlobalState } from "../GlobalState"
const [variableName, setVariable] = useGlobalState('variableName')

using that code, you can access the state content unter variableName and update it with setVariable(newValue)
note: all components using the state (like shown above) will be listerners to this variable and re-render on update, no matter what component updated it!
Functions that should be available globally can be a value of the GlobalState as well.

the state Object

to keep track of all accessors for each part of the state we list below each part of the GlobalState Object with its listeners and modifiers and the reason this variable needs to be global

variable name	initial state	listeners	modifiers	why global?
listeningLooper	undefined	App, menu	menu	menu creates each listening looper, canvas accesses it when adding events
nextLooperID	1	menu	menu	no reason so far, move to local useState(1) in menu asap
runningLoopers	new Map()	App, menu	App, menu	menu adds new loopers to Map, App needs to keep track of all running loopers
musicCtrl	new MusicCtrl()	App, menu		App triggers tone, menu assigns musicCtrl to looper when creating looper

Persistence

The JSON that is sent to the Flask API (and used by the components for rehydration of the state)

An example of a state with 1 looper including 2 events being exported
Note: The JSON's content may be changed in future versions, as the position of effect spheres and information about current canvas and available canvases are added

{
  "loopers": [
    {
      "canvasId": 0,
      "duration": 1310,
      "muted": false,
      "stopped": false,
      "playStartTime": 5044,
      "pauseTime": 0,
      "currentTime": 181,
      "events": [
        {
          "timestamp": 3954,
          "type": "canvasClick",
          "x": 0.39791666666666664,
          "y": 0.6329866270430906,
          "id": 1,
          "time": 39
        },
        {
          "timestamp": 4323,
          "type": "canvasClick",
          "x": 0.5072916666666667,
          "y": 0.3313521545319465,
          "id": 2,
          "time": 408
        }
      ]
    }
  ]
}

Proposal for Canvases part

{
    "currentCanvas": 0,
    "canvases": [
        {
            "id": 0,
            "color": "0x9EC2E3",
            "effectSphere": {
                "x": 0,
                "y": 0
            },
            "synthSphere": {
                "x": -10,
                "y": 0
            },
            "musicSphere": {
                "x": 10,
                "y": 0
            },
            "musicCtrl": {
                "isomorphicLayout": {
                    "?": 0
                },
                "synthAndEffects": {
                    "delay": {
                        "?": 0
                    },
                    "filter": {
                        "?": 0
                    },
                    "limiter": {
                        "?": 0
                    },
                    "noteLengthOptions": {
                        "?": 0
                    },
                    "....and more": {
                        "?": 0
                    }
                }
            }
        }
    ]
}