Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'editor',
    initial: 'idle',
    context: {
        project: undefined,
        zoom: 1,
        minZoom: 1,
        margin: 1,
        contentWidth: 1,
        containerHeight: 1000,
        sizeCalculated: false,
        containerWidth: 1000,
    },

    states: {
        idle: {
            on: {
                FETCH: 'loading',
            },
        },
        loading: {
            on: {
                REJECT: 'failure',
                RESOLVE: 'success',
            },
        },
        failure: {
            on: {
                RETRY: 'loading',
            },
        },
        success: {
            on: {
                MEASURED: 'edit',
            },
        },
        edit: {
            type: 'parallel',
            on: {
                ZOOM: {
                    target: 'edit',
                    actions: 'zoom',
                    internal: true,
                },
            },
            states: {
                nightMode: {
                    initial: 'off',
                    states: {
                        on: {
                            on: {
                                NIGHT_MODE_OFF: 'off',
                            },
                        },
                        off: {
                            on: {
                                NIGHT_MODE_ON: 'on',
                            },
                        },
                    },
                },
                labels: {
                    initial: 'on',
                    states: {
                        on: {
                            on: {
                                LABELS_OFF: 'off',
                            },
                        },
                        off: {
                            on: {
                                LABELS_ON: 'on',
                            },
                        },
                    },
                },
                eyedropper: {
                    initial: 'off',
                    states: {
                        on: {
                            on: {
                                ALT_KEY_UP: 'off',
                            },
                        },
                        off: {
                            on: {
                                ALT_KEY_DOWN: 'on',
                            },
                        },
                    },
                },
                dragging: {
                    initial: 'off',
                    states: {
                        on: {
                            on: {
                                DRAG_END: 'off',
                            },
                        },
                        off: {
                            on: {
                                DRAG_START: 'on',
                            },
                        },
                    },
                },
            },
        },
    },
},
    {
        zoom: {
            target: 'edit',
            actions: (context, event) => ({
                zoom: context.zoom + event.data,
            }),
        },
    });