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: 'loading',
    context: {
        projectId: undefined,
        project: undefined,
        zoom: 1,
        minZoom: 1,
        margin: 1,
        contentWidth: 1,
        containerHeight: 1000,
        sizeCalculated: false,
        containerWidth: 1000,
    },

    states: {
        loading: {
            invoke: {
                id: 'getProject',
                src: 'getProject',
                onError: {
                    target: 'error',
                },
                onDone: {
                    target: 'edit',

                },
            },
        },
        error: {
            on: {
                RETRY: 'loading',
            },
        },
        edit: {
            type: 'parallel',
            states: {
                zoom: {
                    initial: 'unknown',
                    states: {
                        unknown: {
                            on: {
                                '': [
                                    {
                                        target: 'min',
                                        cond: 'isZoomMin',
                                    },
                                    {
                                        target: 'max',
                                        cond: 'isZoomMax',
                                    },
                                    { target: 'middle' },
                                ],
                            },
                        },
                        min: {
                            on: {
                                ZOOM_IN: {
                                    target: 'unknown',
                                    actions: ['zoomIn'],
                                },
                            },
                        },
                        max: {
                            on: {
                                ZOOM_OUT: {
                                    target: 'unknown',
                                    actions: ['zoomOut'],
                                },
                            },
                        },
                        middle: {
                            on: {
                                ZOOM_IN: {
                                    target: 'unknown',
                                    actions: ['zoomIn'],
                                },
                                ZOOM_OUT: {
                                    target: 'unknown',
                                    actions: ['zoomOut'],
                                },
                            },
                        },
                    },
                },
                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',
                            },
                        },
                    },
                },
            },
        },
    },
});