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 toolStates = {
  initial: "panning",
  on: {
    SET_MODE: [
      { cond: "isEnterPanningModeAction", target: ".panning" },
      { cond: "isEnterAnnotatingModeAction", target: ".annotating" },
      { cond: "isEnterErasingModeAction", target: ".erasing" },
      { cond: "isEnterPickingModeAction", target: ".picking" }
    ]
  },
  states: {
    panning: {},
    annotating: {
      initial: "idle",
      states: {
        idle: {
          on: {
            ADD_ANNOTATION: "addingAnnotation"
          }
        },
        addingAnnotation: {
          invoke: {
            src: "addAnnotation",
            onDone: { target: "idle", actions: ["addAnnotationSuccess"] },
            onError: { target: "idle", actions: "promptError" }
          }
        }
      }
    },
    erasing: {},
    picking: {}
  }
}

const quickPanningStates = {
  initial: "idle",
  states: {
    idle: {
      on: { START_QUICK_PANNING: "panning" }
    },
    panning: {
      on: { END_QUICK_PANNING: "idle" }
    }
  }
};
  
const predictionVerificationStates= {
  initial: "idle",
  states: {
    idle: {
      on: {
        "": [
          { target: "pending", cond: "isPendingVerification" },
          { target: "verifying", cond: "isBeingVerified" },
          { target: "verified", cond: "isVerified" }
        ]
      }
    },
    pending: {
      on: {
        START_VERIFICATION: { target: "startingVerification" }
      }
    },
    startingVerification: {
      invoke: {
        src: "startVerification",
        onDone: {
          target: "verifying",
          actions: ["startVerificationSuccess"]
        },
        onError: {
          target: "savingError"
        }
      }
    },
    verifying: {
      on: {
        UPDATE_PREDICTION_RESULT: { target: "updating" },
        MARK_AS_VERIFIED: { target: "markingAsVerified" }
      }
    },
    updating: {
      invoke: {
        src: "updatePrediction",
        onDone: {
          target: "verifying",
          actions: ["updatePredictionSuccess"]
        },
        onError: {
          target: "savingError"
        }
      }
    },
    markingAsVerified: {
      invoke: {
        src: "markAsVerified",
        onDone: {
          target: "verified",
          actions: ["markAsVerifiedSuccess"]
        },
        onError: {
          target: "savingError"
        }
      }
    },
    verified: {
      on: {
        UNDO_MARK_AS_VERIFIED: { target: "undoingMarkAsVerified" }
      }
    },
    undoingMarkAsVerified: {
      invoke: {
        src: "undoMarkAsVerified",
        onDone: {
          target: "verifying",
          actions: ["undoMarkAsVerifiedSuccess"]
        },
        onError: {
          target: "savingError"
        }
      }
    },
    savingError: {}
  }
};
  
  const fetchMachine = Machine(
{
  id: "image-viewer",
  initial: "loadingImage",
  states: {
    loadingImage: {
      invoke: {
        src: "loadImage",
        onDone: {
          target: "ready",
          actions: ["loadImageSuccess"]
        },
        onError: {
          target: "loadingImageError",
          actions: ["setError"]
        }
      }
    },
    loadingImageError: {},
    ready: {
      type: 'parallel',
      on: {
        START_QUICK_PANNING: { target: "quickPanning" },
        SET_MODE: { actions: ["setMode"] },
        SWITCH_PREDICTION: { actions: "switchPrediction" }
      },
      states: {
        mode: toolStates,
        quickPanning: quickPanningStates,
        predictionVerification: predictionVerificationStates        
      }

    },
    quickPanning: {
      on: {
        END_QUICK_PANNING: {
          target: "ready"
        }
      }
    }
  }
},
{guards: {
  isPendingVerification: () => true,
  isEnterPanningModeAction: () => false,
  isEnterAnnotatingModeAction: () => true
}}
);