@searpent/react-image-annotate 2.0.75 → 2.0.77

package/src/Annotator/reducers/general-reducer.js

@@ -0,0 +1,1228 @@
+// @flow
+import type { MainLayoutState, Action } from "../../MainLayout/types"
+import { moveRegion } from "../../ImageCanvas/region-tools.js"
+import { getIn, setIn, updateIn } from "seamless-immutable"
+import moment from "moment"
+import isEqual from "lodash/isEqual"
+import uniq from "lodash/uniq"
+import getActiveImage from "./get-active-image"
+import { saveToHistory } from "./history-handler.js"
+import colors from "../../colors"
+import fixTwisted from "./fix-twisted"
+import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon"
+import clamp from "clamp"
+import getLandmarksWithTransform from "../../utils/get-landmarks-with-transform"
+import setInLocalStorage from "../../utils/set-in-local-storage"
+import onlyUnique from "../../utils/filter-only-unique"
+import nextGroupId from "../../utils/next-group-id"
+import defaultLockedUntil from "../../utils/default-locked-until"
+
+const getRandomId = () => Math.random().toString().split(".")[1]
+
+export default (state: MainLayoutState, action: Action) => {
+  if (
+    state.allowedArea &&
+    state.selectedTool !== "modify-allowed-area" &&
+    ["MOUSE_DOWN", "MOUSE_UP", "MOUSE_MOVE"].includes(action.type)
+  ) {
+    const aa = state.allowedArea
+    action.x = clamp(action.x, aa.x, aa.x + aa.w)
+    action.y = clamp(action.y, aa.y, aa.y + aa.h)
+  }
+
+  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
+    const oldRegionClsList = state.regionClsList
+    const newState = {
+      ...state,
+      regionClsList: oldRegionClsList.concat(action.cls),
+    }
+    return newState
+  }
+
+  // Throttle certain actions
+  if (action.type === "MOUSE_MOVE") {
+    if (Date.now() - ((state: any).lastMouseMoveCall || 0) < 16) return state
+    state = setIn(state, ["lastMouseMoveCall"], Date.now())
+  }
+  if (!action.type.includes("MOUSE")) {
+    state = setIn(state, ["lastAction"], action)
+  }
+
+  const { currentImageIndex, pathToActiveImage, activeImage } =
+    getActiveImage(state)
+
+  const getRegionIndex = (region) => {
+    const regionId =
+      typeof region === "string" || typeof region === "number"
+        ? region
+        : region.id
+    if (!activeImage) return null
+    const regionIndex = (activeImage.regions || []).findIndex(
+      (r) => r.id === regionId
+    )
+    return regionIndex === -1 ? null : regionIndex
+  }
+  const getRegion = (regionId) => {
+    if (!activeImage) return null
+    const regionIndex = getRegionIndex(regionId)
+    if (regionIndex === null) return [null, null]
+    const region = activeImage.regions[regionIndex]
+    return [region, regionIndex]
+  }
+  const modifyRegion = (regionId, obj) => {
+    const [region, regionIndex] = getRegion(regionId)
+    if (!region) return state
+    if (obj !== null) {
+      return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+        ...region,
+        ...obj,
+      })
+    } else {
+      // delete region
+      const regions = activeImage.regions
+      return setIn(
+        state,
+        [...pathToActiveImage, "regions"],
+        (regions || []).filter((r) => r.id !== region.id)
+      )
+    }
+  }
+  const unselectRegions = (state: MainLayoutState) => {
+    if (!activeImage) return state
+    return setIn(
+      state,
+      [...pathToActiveImage, "regions"],
+      (activeImage.regions || []).map((r) => ({
+        ...r,
+        highlighted: false,
+      }))
+    )
+  }
+
+  const closeEditors = (state: MainLayoutState) => {
+    if (currentImageIndex === null) return state
+    return setIn(
+      state,
+      [...pathToActiveImage, "regions"],
+      (activeImage.regions || []).map((r) => ({
+        ...r,
+        editingLabels: false,
+      }))
+    )
+  }
+
+  const addSaveableAction = (state: MainLayoutState, action: string) => {
+    if (currentImageIndex === null) return state
+    return setIn(
+      state,
+      [...pathToActiveImage, "saveableActions"],
+      [...(activeImage.saveableActions || []), action]
+    )
+  }
+
+  const setNewImage = (img: string | Object, index: number) => {
+    let { src, frameTime } = typeof img === "object" ? img : { src: img }
+    state = setIn(state, ["previouslySelectedImage"], state.selectedImage)
+    return setIn(
+      setIn(state, ["selectedImage"], index),
+      ["selectedImageFrameTime"],
+      frameTime
+    )
+  }
+
+  switch (action.type) {
+    case "@@INIT": {
+      return state
+    }
+    case "SELECT_IMAGE": {
+      return setNewImage(action.image, action.imageIndex)
+    }
+    case "SELECT_CLASSIFICATION": {
+      // if there is selected region, set its cls
+      const selectedRegionId = state.images[state.selectedImage].regions.find(r => r.highlighted === true)?.id
+      if (selectedRegionId) {
+        const newRegions = activeImage.regions.map(r => {
+          if (r.id === selectedRegionId) {
+            return {
+              ...r,
+              cls: action.cls
+            }
+          } else {
+            return r
+          }
+        })
+        state = setIn(state, [...pathToActiveImage, "regions"], newRegions)
+      }
+      state = addSaveableAction(state, "SELECT_CLASSIFICATION")
+      return setIn(state, ["selectedCls"], action.cls)
+    }
+    case "CHANGE_REGION": {
+      const regionIndex = getRegionIndex(action.region)
+      if (regionIndex === null) return state
+      const oldRegion = activeImage.regions[regionIndex]
+      if (oldRegion.cls !== action.region.cls) {
+        state = saveToHistory(state, "Change Region Classification")
+        const clsIndex = state.regionClsList.indexOf(action.region.cls)
+        if (clsIndex !== -1) {
+          state = setIn(state, ["selectedCls"], action.region.cls)
+          action.region.color = colors[clsIndex % colors.length]
+        }
+      }
+      if (!isEqual(oldRegion.tags, action.region.tags)) {
+        state = saveToHistory(state, "Change Region Tags")
+      }
+      if (!isEqual(oldRegion.comment, action.region.comment)) {
+        state = saveToHistory(state, "Change Region Comment")
+      }
+      state = addSaveableAction(state, "CHANGE_REGION")
+      return setIn(
+        state,
+        [...pathToActiveImage, "regions", regionIndex],
+        action.region
+      )
+    }
+    case "CHANGE_IMAGE": {
+      if (!activeImage) return state
+      const { delta } = action
+      for (const key of Object.keys(delta)) {
+        if (key === "cls") saveToHistory(state, "Change Image Class")
+        if (key === "tags") saveToHistory(state, "Change Image Tags")
+        state = setIn(state, [...pathToActiveImage, key], delta[key])
+      }
+      return state
+    }
+    case "SELECT_REGION": {
+      const { region } = action
+      const regionIndex = getRegionIndex(action.region)
+      if (regionIndex === null) return state
+      const regions = [...(activeImage.regions || [])].map((r) => ({
+        ...r,
+        highlighted: r.id === region.id,
+        groupHighlighted: (r.groupId && r.groupId === region.groupId) ? true : false,
+        editingLabels: region.ctrlKey ? r.id === region.id : false,
+      }))
+
+      const selectedGroupIds = regions.filter(i => i.highlighted).map(r => r.groupId || '').filter(onlyUnique);
+      if (selectedGroupIds.length === 1) {
+        state = setIn(state, [...pathToActiveImage, "selectedGroupId"], selectedGroupIds[0])
+      }
+      if (selectedGroupIds.length === 0) {
+        state = setIn(state, [...pathToActiveImage, "selectedGroupId"], null)
+      }
+      return setIn(state, [...pathToActiveImage, "regions"], regions)
+    }
+    case "BEGIN_MOVE_POINT": {
+      state = closeEditors(state)
+      return setIn(state, ["mode"], {
+        mode: "MOVE_REGION",
+        regionId: action.point.id,
+      })
+    }
+    case "BEGIN_BOX_TRANSFORM": {
+      const { box, directions } = action
+      state = closeEditors(state)
+      if (directions[0] === 0 && directions[1] === 0) {
+        return setIn(state, ["mode"], { mode: "MOVE_REGION", regionId: box.id })
+      } else {
+        return setIn(state, ["mode"], {
+          mode: "RESIZE_BOX",
+          regionId: box.id,
+          freedom: directions,
+          original: { x: box.x, y: box.y, w: box.w, h: box.h },
+        })
+      }
+    }
+    case "BEGIN_MOVE_POLYGON_POINT": {
+      const { polygon, pointIndex } = action
+      state = closeEditors(state)
+      if (
+        state.mode &&
+        state.mode.mode === "DRAW_POLYGON" &&
+        pointIndex === 0
+      ) {
+        return setIn(
+          modifyRegion(polygon, {
+            points: polygon.points.slice(0, -1),
+            open: false,
+          }),
+          ["mode"],
+          null
+        )
+      } else {
+        state = saveToHistory(state, "Move Polygon Point")
+      }
+      return setIn(state, ["mode"], {
+        mode: "MOVE_POLYGON_POINT",
+        regionId: polygon.id,
+        pointIndex,
+      })
+    }
+    case "BEGIN_MOVE_KEYPOINT": {
+      const { region, keypointId } = action
+      state = closeEditors(state)
+      state = saveToHistory(state, "Move Keypoint")
+      return setIn(state, ["mode"], {
+        mode: "MOVE_KEYPOINT",
+        regionId: region.id,
+        keypointId,
+      })
+    }
+    case "ADD_POLYGON_POINT": {
+      const { polygon, point, pointIndex } = action
+      const regionIndex = getRegionIndex(polygon)
+      if (regionIndex === null) return state
+      const points = [...polygon.points]
+      points.splice(pointIndex, 0, point)
+      return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+        ...polygon,
+        points,
+      })
+    }
+    case "MOUSE_MOVE": {
+      const { x, y } = action
+      if (!state.mode) return state
+      if (!activeImage) return state
+      const { mouseDownAt } = state
+      switch (state.mode.mode) {
+        case "MOVE_POLYGON_POINT": {
+          const { pointIndex, regionId } = state.mode
+          const regionIndex = getRegionIndex(regionId)
+          if (regionIndex === null) return state
+          return setIn(
+            state,
+            [
+              ...pathToActiveImage,
+              "regions",
+              regionIndex,
+              "points",
+              pointIndex,
+            ],
+            [x, y]
+          )
+        }
+        case "MOVE_KEYPOINT": {
+          const { keypointId, regionId } = state.mode
+          const [region, regionIndex] = getRegion(regionId)
+          if (regionIndex === null) return state
+          return setIn(
+            state,
+            [
+              ...pathToActiveImage,
+              "regions",
+              regionIndex,
+              "points",
+              keypointId,
+            ],
+            { ...(region: any).points[keypointId], x, y }
+          )
+        }
+        case "MOVE_REGION": {
+          const { regionId } = state.mode
+          if (regionId === "$$allowed_area") {
+            const {
+              allowedArea: { w, h },
+            } = state
+            return setIn(state, ["allowedArea"], {
+              x: x - w / 2,
+              y: y - h / 2,
+              w,
+              h,
+            })
+          }
+          const regionIndex = getRegionIndex(regionId)
+          if (regionIndex === null) return state
+          return setIn(
+            state,
+            [...pathToActiveImage, "regions", regionIndex],
+            moveRegion(activeImage.regions[regionIndex], x, y)
+          )
+        }
+        case "RESIZE_BOX": {
+          const {
+            regionId,
+            freedom: [xFree, yFree],
+            original: { x: ox, y: oy, w: ow, h: oh },
+          } = state.mode
+
+          const dx = xFree === 0 ? ox : xFree === -1 ? Math.min(ox + ow, x) : ox
+          const dw =
+            xFree === 0
+              ? ow
+              : xFree === -1
+                ? ow + (ox - dx)
+                : Math.max(0, ow + (x - ox - ow))
+          const dy = yFree === 0 ? oy : yFree === -1 ? Math.min(oy + oh, y) : oy
+          const dh =
+            yFree === 0
+              ? oh
+              : yFree === -1
+                ? oh + (oy - dy)
+                : Math.max(0, oh + (y - oy - oh))
+
+          // determine if we should switch the freedom
+          if (dw <= 0.001) {
+            state = setIn(state, ["mode", "freedom"], [xFree * -1, yFree])
+          }
+          if (dh <= 0.001) {
+            state = setIn(state, ["mode", "freedom"], [xFree, yFree * -1])
+          }
+
+          if (regionId === "$$allowed_area") {
+            return setIn(state, ["allowedArea"], {
+              x: dx,
+              w: dw,
+              y: dy,
+              h: dh,
+            })
+          }
+
+          const regionIndex = getRegionIndex(regionId)
+          if (regionIndex === null) return state
+          const box = activeImage.regions[regionIndex]
+
+          return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+            ...box,
+            x: dx,
+            w: dw,
+            y: dy,
+            h: dh,
+          })
+        }
+        case "RESIZE_KEYPOINTS": {
+          const { regionId, landmarks, centerX, centerY } = state.mode
+          const distFromCenter = Math.sqrt(
+            (centerX - x) ** 2 + (centerY - y) ** 2
+          )
+          const scale = distFromCenter / 0.15
+          return modifyRegion(regionId, {
+            points: getLandmarksWithTransform({
+              landmarks,
+              center: { x: centerX, y: centerY },
+              scale,
+            }),
+          })
+        }
+        case "DRAW_POLYGON": {
+          const { regionId } = state.mode
+          const [region, regionIndex] = getRegion(regionId)
+          if (!region) return setIn(state, ["mode"], null)
+          return setIn(
+            state,
+            [
+              ...pathToActiveImage,
+              "regions",
+              regionIndex,
+              "points",
+              (region: any).points.length - 1,
+            ],
+            [x, y]
+          )
+        }
+        case "DRAW_LINE": {
+          const { regionId } = state.mode
+          const [region, regionIndex] = getRegion(regionId)
+          if (!region) return setIn(state, ["mode"], null)
+          return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+            ...region,
+            x2: x,
+            y2: y,
+          })
+        }
+        case "DRAW_EXPANDING_LINE": {
+          const { regionId } = state.mode
+          const [expandingLine, regionIndex] = getRegion(regionId)
+          if (!expandingLine) return state
+          const isMouseDown = Boolean(state.mouseDownAt)
+          if (isMouseDown) {
+            // If the mouse is down, set width/angle
+            const lastPoint = expandingLine.points.slice(-1)[0]
+            const mouseDistFromLastPoint = Math.sqrt(
+              (lastPoint.x - x) ** 2 + (lastPoint.y - y) ** 2
+            )
+            if (mouseDistFromLastPoint < 0.002 && !lastPoint.width) return state
+
+            const newState = setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex, "points"],
+              expandingLine.points.slice(0, -1).concat([
+                {
+                  ...lastPoint,
+                  width: mouseDistFromLastPoint * 2,
+                  angle: Math.atan2(lastPoint.x - x, lastPoint.y - y),
+                },
+              ])
+            )
+            return newState
+          } else {
+            // If mouse is up, move the next candidate point
+            return setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex],
+              {
+                ...expandingLine,
+                candidatePoint: { x, y },
+              }
+            )
+          }
+
+          return state
+        }
+        case "SET_EXPANDING_LINE_WIDTH": {
+          const { regionId } = state.mode
+          const [expandingLine, regionIndex] = getRegion(regionId)
+          if (!expandingLine) return state
+          const lastPoint = expandingLine.points.slice(-1)[0]
+          const { mouseDownAt } = state
+          return setIn(
+            state,
+            [...pathToActiveImage, "regions", regionIndex, "expandingWidth"],
+            Math.sqrt((lastPoint.x - x) ** 2 + (lastPoint.y - y) ** 2)
+          )
+        }
+        default:
+          return state
+      }
+    }
+    case "MOUSE_DOWN": {
+      if (!activeImage) return state
+      const { x, y } = action
+
+      state = setIn(state, ["mouseDownAt"], { x, y })
+
+      if (state.mode) {
+        switch (state.mode.mode) {
+          case "DRAW_POLYGON": {
+            const [polygon, regionIndex] = getRegion(state.mode.regionId)
+            if (!polygon) break
+            return setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex],
+              { ...polygon, points: polygon.points.concat([[x, y]]) }
+            )
+          }
+          case "DRAW_LINE": {
+            const [line, regionIndex] = getRegion(state.mode.regionId)
+            if (!line) break
+            setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+              ...line,
+              x2: x,
+              y2: y,
+            })
+            return setIn(state, ["mode"], null)
+          }
+          case "DRAW_EXPANDING_LINE": {
+            const [expandingLine, regionIndex] = getRegion(state.mode.regionId)
+            if (!expandingLine) break
+            const lastPoint = expandingLine.points.slice(-1)[0]
+            if (
+              expandingLine.points.length > 1 &&
+              Math.sqrt((lastPoint.x - x) ** 2 + (lastPoint.y - y) ** 2) < 0.002
+            ) {
+              if (!lastPoint.width) {
+                return setIn(state, ["mode"], {
+                  mode: "SET_EXPANDING_LINE_WIDTH",
+                  regionId: state.mode.regionId,
+                })
+              } else {
+                return state
+                  .setIn(
+                    [...pathToActiveImage, "regions", regionIndex],
+                    convertExpandingLineToPolygon(expandingLine)
+                  )
+                  .setIn(["mode"], null)
+              }
+            }
+
+            // Create new point
+            return setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex, "points"],
+              expandingLine.points.concat([{ x, y, angle: null, width: null }])
+            )
+          }
+          case "SET_EXPANDING_LINE_WIDTH": {
+            const [expandingLine, regionIndex] = getRegion(state.mode.regionId)
+            if (!expandingLine) break
+            const { expandingWidth } = expandingLine
+            return state
+              .setIn(
+                [...pathToActiveImage, "regions", regionIndex],
+                convertExpandingLineToPolygon({
+                  ...expandingLine,
+                  points: expandingLine.points.map((p) =>
+                    p.width ? p : { ...p, width: expandingWidth }
+                  ),
+                  expandingWidth: undefined,
+                })
+              )
+              .setIn(["mode"], null)
+          }
+          default:
+            break
+        }
+      }
+
+      let newRegion
+      let defaultRegionCls = state.selectedCls || state.regionClsList?.[0],
+        defaultRegionColor = "#ff0000"
+
+      const clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls)
+      if (clsIndex !== -1) {
+        defaultRegionColor = colors[clsIndex % colors.length]
+      }
+
+      switch (state.selectedTool) {
+        case "create-point": {
+          state = saveToHistory(state, "Create Point")
+          newRegion = {
+            type: "point",
+            x,
+            y,
+            highlighted: true,
+            editingLabels: true,
+            color: defaultRegionColor,
+            id: getRandomId(),
+            cls: defaultRegionCls,
+          }
+          break
+        }
+        case "create-box": {
+          let groupId = state?.images[state.selectedImage]?.regions?.find(r => r.highlighted === true)?.groupId;
+          let groupSelected = true
+          if (groupId === undefined) {
+            groupId = nextGroupId()
+            groupSelected = false
+          }
+          state = saveToHistory(state, "Create Box")
+          newRegion = {
+            type: "box",
+            x: x,
+            y: y,
+            w: 0,
+            h: 0,
+            highlighted: true,
+            editingLabels: false,
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
+            id: getRandomId(),
+            groupHighlighted: true,
+            groupId,
+          }
+          state = setIn(state, ["mode"], {
+            mode: "RESIZE_BOX",
+            editLabelEditorAfter: !groupSelected,
+            regionId: newRegion.id,
+            freedom: [1, 1],
+            original: { x, y, w: newRegion.w, h: newRegion.h },
+            isNew: true,
+          })
+          break
+        }
+        case "create-polygon": {
+          if (state.mode && state.mode.mode === "DRAW_POLYGON") break
+          state = saveToHistory(state, "Create Polygon")
+          newRegion = {
+            type: "polygon",
+            points: [
+              [x, y],
+              [x, y],
+            ],
+            open: true,
+            highlighted: true,
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
+            id: getRandomId(),
+          }
+          state = setIn(state, ["mode"], {
+            mode: "DRAW_POLYGON",
+            regionId: newRegion.id,
+          })
+          break
+        }
+        case "create-expanding-line": {
+          state = saveToHistory(state, "Create Expanding Line")
+          newRegion = {
+            type: "expanding-line",
+            unfinished: true,
+            points: [{ x, y, angle: null, width: null }],
+            open: true,
+            highlighted: true,
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
+            id: getRandomId(),
+          }
+          state = setIn(state, ["mode"], {
+            mode: "DRAW_EXPANDING_LINE",
+            regionId: newRegion.id,
+          })
+          break
+        }
+        case "create-line": {
+          if (state.mode && state.mode.mode === "DRAW_LINE") break
+          state = saveToHistory(state, "Create Line")
+          newRegion = {
+            type: "line",
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y,
+            highlighted: true,
+            editingLabels: false,
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
+            id: getRandomId(),
+          }
+          state = setIn(state, ["mode"], {
+            mode: "DRAW_LINE",
+            regionId: newRegion.id,
+          })
+          break
+        }
+        case "create-keypoints": {
+          state = saveToHistory(state, "Create Keypoints")
+          const [[keypointsDefinitionId, { landmarks, connections }]] =
+            (Object.entries(state.keypointDefinitions): any)
+
+            newRegion = {
+              type: "keypoints",
+              keypointsDefinitionId,
+              points: getLandmarksWithTransform({
+                landmarks,
+                center: { x, y },
+                scale: 1,
+              }),
+              highlighted: true,
+              editingLabels: false,
+              id: getRandomId(),
+            }
+          state = setIn(state, ["mode"], {
+            mode: "RESIZE_KEYPOINTS",
+            landmarks,
+            centerX: x,
+            centerY: y,
+            regionId: newRegion.id,
+            isNew: true,
+          })
+          break
+        }
+        default:
+          break
+      }
+
+      const regions = [...(getIn(state, pathToActiveImage).regions || [])]
+        .map((r) =>
+          setIn(r, ["editingLabels"], false).setIn(["highlighted"], false).setIn([state.selectedTool === 'create-box' ? undefined : 'groupHighlighted'], false)
+        )
+        .concat(newRegion ? [newRegion] : [])
+
+      state = setIn(state, [...pathToActiveImage, "selectedGroupId"], null)
+
+      return setIn(state, [...pathToActiveImage, "regions"], regions)
+    }
+    case "MOUSE_UP": {
+      const { x, y } = action
+
+      const { mouseDownAt = { x, y } } = state
+      if (!state.mode) return state
+      state = setIn(state, ["mouseDownAt"], null)
+      switch (state.mode.mode) {
+        case "RESIZE_BOX": {
+          state = setIn(state, ["selectedTool"], 'select')
+          if (state.mode.isNew) {
+            if (
+              Math.abs(state.mode.original.x - x) < 0.002 ||
+              Math.abs(state.mode.original.y - y) < 0.002
+            ) {
+              state = addSaveableAction(state, "MOUSE_UP_RESIZE_BOX")
+              return setIn(
+                modifyRegion(state.mode.regionId, null),
+                ["mode"],
+                null
+              )
+            }
+          }
+          if (state.mode.editLabelEditorAfter) {
+            state = addSaveableAction(state, "MOUSE_UP_RESIZE_BOX")
+            return {
+              ...modifyRegion(state.mode.regionId, { editingLabels: true }),
+              mode: null,
+            }
+          }
+        }
+        case "MOVE_REGION":
+        case "RESIZE_KEYPOINTS":
+        case "MOVE_POLYGON_POINT": {
+          state = addSaveableAction(state, "MOUSE_UP_MOVE_REGION")
+          return { ...state, mode: null }
+        }
+        case "MOVE_KEYPOINT": {
+          return { ...state, mode: null }
+        }
+        case "CREATE_POINT_LINE": {
+          return state
+        }
+        case "DRAW_EXPANDING_LINE": {
+          const [expandingLine, regionIndex] = getRegion(state.mode.regionId)
+          if (!expandingLine) return state
+          let newExpandingLine = expandingLine
+          const lastPoint =
+            expandingLine.points.length !== 0
+              ? expandingLine.points.slice(-1)[0]
+              : mouseDownAt
+          let jointStart
+          if (expandingLine.points.length > 1) {
+            jointStart = expandingLine.points.slice(-2)[0]
+          } else {
+            jointStart = lastPoint
+          }
+          const mouseDistFromLastPoint = Math.sqrt(
+            (lastPoint.x - x) ** 2 + (lastPoint.y - y) ** 2
+          )
+          if (mouseDistFromLastPoint > 0.002) {
+            // The user is drawing has drawn the width for the last point
+            const newPoints = [...expandingLine.points]
+            for (let i = 0; i < newPoints.length - 1; i++) {
+              if (newPoints[i].width) continue
+              newPoints[i] = {
+                ...newPoints[i],
+                width: lastPoint.width,
+              }
+            }
+            newExpandingLine = setIn(
+              expandingLine,
+              ["points"],
+              fixTwisted(newPoints)
+            )
+          } else {
+            return state
+          }
+          return setIn(
+            state,
+            [...pathToActiveImage, "regions", regionIndex],
+            newExpandingLine
+          )
+        }
+        default:
+          return state
+      }
+    }
+    case "OPEN_REGION_EDITOR": {
+      const { region } = action
+      const regionIndex = getRegionIndex(action.region)
+      if (regionIndex === null) return state
+      const newRegions = setIn(
+        activeImage.regions.map((r) => ({
+          ...r,
+          highlighted: false,
+          editingLabels: false,
+        })),
+        [regionIndex],
+        {
+          ...(activeImage.regions || [])[regionIndex],
+          highlighted: true,
+          editingLabels: true,
+        }
+      )
+      return setIn(state, [...pathToActiveImage, "regions"], newRegions)
+    }
+    case "CLOSE_REGION_EDITOR": {
+      const { region } = action
+      const regionIndex = getRegionIndex(action.region)
+      if (regionIndex === null) return state
+      return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+        ...(activeImage.regions || [])[regionIndex],
+        editingLabels: false,
+      })
+    }
+    case "DELETE_REGION": {
+      const regionIndex = getRegionIndex(action.region)
+      if (regionIndex === null) return state
+      state = saveToHistory(state, "Delete region")
+      state = addSaveableAction(state, "DELETE_REGION")
+      return setIn(
+        state,
+        [...pathToActiveImage, "regions"],
+        (activeImage.regions || []).filter((r) => r.id !== action.region.id)
+      )
+    }
+    case "DELETE_GROUP": {
+      const { groupId } = action
+      if (groupId === null || groupId === undefined) return state
+      state = saveToHistory(state, "Delete group")
+      state = addSaveableAction(state, "DELETE_GROUP")
+      return setIn(
+        state,
+        [...pathToActiveImage, "regions"],
+        (activeImage.regions || []).filter((r) => r.groupId !== groupId)
+      )
+    }
+    case "DELETE_SELECTED_REGION": {
+      state = saveToHistory(state, "Delete selected region")
+      state = addSaveableAction(state, "DELETE_SELECTED_REGION")
+      return setIn(
+        state,
+        [...pathToActiveImage, "regions"],
+        (activeImage.regions || []).filter((r) => !r.highlighted)
+      )
+    }
+    case "HEADER_BUTTON_CLICKED": {
+      const buttonName = action.buttonName.toLowerCase()
+      switch (buttonName) {
+        case "prev": {
+          if (currentImageIndex === null) return state
+          if (currentImageIndex === 0) return state
+          return setNewImage(
+            state.images[currentImageIndex - 1],
+            currentImageIndex - 1
+          )
+        }
+        case "next": {
+          if (currentImageIndex === null) return state
+          if (currentImageIndex === state.images.length - 1) return state
+          return setNewImage(
+            state.images[currentImageIndex + 1],
+            currentImageIndex + 1
+          )
+        }
+        case "clone": {
+          if (currentImageIndex === null) return state
+          if (currentImageIndex === state.images.length - 1) return state
+          return setIn(
+            setNewImage(
+              state.images[currentImageIndex + 1],
+              currentImageIndex + 1
+            ),
+            ["images", currentImageIndex + 1, "regions"],
+            activeImage.regions
+          )
+        }
+        case "settings": {
+          return setIn(state, ["settingsOpen"], !state.settingsOpen)
+        }
+        case "help": {
+          return state
+        }
+        case "fullscreen": {
+          return setIn(state, ["fullScreen"], true)
+        }
+        case "exit fullscreen":
+        case "window": {
+          return setIn(state, ["fullScreen"], false)
+        }
+        case "hotkeys": {
+          return state
+        }
+        case "exit":
+        case "done": {
+          return state
+        }
+        default:
+          return state
+      }
+    }
+    case "SELECT_TOOL": {
+      if (action.selectedTool === "show-tags") {
+        setInLocalStorage("showTags", !state.showTags)
+        return setIn(state, ["showTags"], !state.showTags)
+      } else if (action.selectedTool === "show-mask") {
+        return setIn(state, ["showMask"], !state.showMask)
+      }
+      if (action.selectedTool === "modify-allowed-area" && !state.allowedArea) {
+        state = setIn(state, ["allowedArea"], { x: 0, y: 0, w: 1, h: 1 })
+      }
+      state = setIn(state, ["mode"], null)
+      return setIn(state, ["selectedTool"], action.selectedTool)
+    }
+    case "CANCEL": {
+      const { mode } = state
+      if (mode) {
+        switch (mode.mode) {
+          case "DRAW_EXPANDING_LINE":
+          case "SET_EXPANDING_LINE_WIDTH":
+          case "DRAW_POLYGON": {
+            const { regionId } = mode
+            return modifyRegion(regionId, null)
+          }
+          case "MOVE_POLYGON_POINT":
+          case "RESIZE_BOX":
+          case "MOVE_REGION": {
+            return setIn(state, ["mode"], null)
+          }
+          default:
+            return state
+        }
+      }
+      // Close any open boxes
+      const regions: any = activeImage.regions
+      if (regions && regions.some((r) => r.editingLabels)) {
+        return setIn(
+          state,
+          [...pathToActiveImage, "regions"],
+          regions.map((r) => ({
+            ...r,
+            editingLabels: false,
+          }))
+        )
+      } else if (regions) {
+        return setIn(
+          state,
+          [...pathToActiveImage, "regions"],
+          regions.map((r) => ({
+            ...r,
+            highlighted: false,
+          }))
+        )
+      }
+      break
+    }
+    case "UPDATE_REGIONS": {
+      const { imageIndex, regions: newRegions } = action;
+      const updatedRegions = state.images[imageIndex].regions.map(r => {
+        const updatedRegion = newRegions.find(i => i.id === r.id)
+        if (!updatedRegion) {
+          return r
+        }
+        return {
+          ...r,
+          cls: updatedRegion.cls,
+          text: updatedRegion.text
+        }
+      })
+      // TODO: add mutation of order and deletion of regions - SI-1967
+      state = addSaveableAction(state, "UPDATE_REGIONS")
+      return setIn(
+        state,
+        ["images", imageIndex, "regions"],
+        updatedRegions
+      )
+    }
+    case "IMAGES_UPDATED": {
+      const { updatedAt } = action;
+      return setIn(
+        state,
+        ["imagesUpdatedAt"],
+        updatedAt
+      )
+    }
+    case "IMAGES_SAVED": {
+      const { savedAt } = action;
+      return setIn(
+        state,
+        ["imagesSavedAt"],
+        savedAt
+      )
+    }
+    case "IMAGES_RECALCULATED": {
+      const { recalculatedAt } = action;
+      return setIn(
+        state,
+        ["imagesSavedAt"],
+        recalculatedAt
+      )
+    }
+    case "UPDATE_METADATA": {
+      const { name, value, imageIndex, groupId, metadataId } = action;
+      if (isNaN(imageIndex)) {
+        // update global/album metadata
+        const metadataIndex = state.albumMetadata?.findIndex(mt => mt.key === name)
+        if (metadataIndex < 0) {
+          console.error(`can't find metadata by key "${name}"`)
+          return state;
+        }
+        state = addSaveableAction(state, "UPDATE_ALBUM_METADATA")
+        return setIn(
+          state,
+          ["albumMetadata", metadataIndex],
+          {
+            key: name,
+            value: value
+          }
+        )
+      } else {
+        // update metadata of article
+        if (groupId) {
+          const articleMetadataRegionIdx = state.images[imageIndex]?.regions.findIndex(r => r.cls === 'metadata' && r.groupId === groupId)
+          if (articleMetadataRegionIdx < 0) {
+            console.error(`can't find article metadata for goupId "${groupId}"`)
+            return state
+          }
+
+          const articleRegionToUpdate = state.images[imageIndex]?.regions[articleMetadataRegionIdx]
+          const articleMetadata = JSON.parse(articleRegionToUpdate.text)
+          const toBeUpdatedMetadataIdx = articleMetadata.findIndex(i => i.metadataId === metadataId)
+          if (toBeUpdatedMetadataIdx < 0) {
+            console.error(`can't find metadata field in article metadata for key "${name}"`)
+            return state
+          }
+
+          articleMetadata[toBeUpdatedMetadataIdx].value = value
+          state = addSaveableAction(state, "UPDATE_METADATA")
+          return setIn(
+            state,
+            ["images", imageIndex, "regions", articleMetadataRegionIdx],
+            {
+              ...articleRegionToUpdate,
+              text: JSON.stringify(articleMetadata)
+            }
+          )
+        }
+
+        // update metadata of image
+        const metadataIndex = state.images[imageIndex]?.metadata?.findIndex(mt => mt.key === name)
+        if (metadataIndex < 0) {
+          console.error(`can't find photo metadata by key "${name}"`)
+          return state
+        }
+        state = addSaveableAction(state, "UPDATE_METADATA")
+        return setIn(
+          state,
+          ["images", imageIndex, "metadata", metadataIndex],
+          {
+            key: name,
+            value: value
+          }
+        )
+      }
+    }
+    case "ADD_GROUP": {
+      // FIXME: remove this branch
+      return state
+      // const { group } = action;
+      // const newAllowedGroups = []
+      // return setIn(
+      //   state,
+      //   ["allowedGroups"],
+      //   newAllowedGroups
+      // )
+    }
+    case "SAVE_IMAGE": {
+      const { image, triggerRecalc, toSaveMetadata } = action;
+      return setIn(state, ["toSaveImage"], { image, triggerRecalc, toSaveMetadata });
+    }
+    case "RECALC_CLICKED": {
+      const { imageId } = action;
+      const imageIdx = state.images.findIndex(i => i.id === imageId);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${imageId}`)
+      }
+      const image = { ...state.images[imageIdx] }
+      return setIn(state, ["toSaveImage"], { image, triggerRecalc: true, toSaveMetadata: [] });
+    }
+    case "IMAGE_UPDATE_INIT": {
+      const { imageId } = action;
+      const imageIdx = state.images.findIndex(i => i.id === imageId);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${imageId}`)
+      }
+
+      state = setIn(state, ["toSaveImage"], null);
+
+      return setIn(
+        state,
+        ["images", imageIdx],
+        {
+          ...state.images[imageIdx],
+          lockedUntil: defaultLockedUntil(),
+          syncError: null,
+          saveableActions: [],
+        }
+      )
+    }
+    case "IMAGE_UPDATE_SUCCESS": {
+      const { imageId, lockedUntil } = action;
+      const imageIdx = state.images.findIndex(i => i.id === imageId);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${imageId}`)
+      }
+
+      // if there is lockedUntil set, it means we need to poll for updated
+      if (lockedUntil) {
+        state = setIn(state, ["toPollImages"], uniq([...state.toPollImages, imageId]))
+      }
+
+      return setIn(
+        state,
+        ["images", imageIdx],
+        {
+          ...state.images[imageIdx],
+          lockedUntil,
+          syncError: null
+        }
+      )
+    }
+    case "IMAGE_UPDATE_FAIL": {
+      const { imageId, error } = action;
+      const imageIdx = state.images.findIndex(i => i.id === imageId);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${imageId}`)
+      }
+
+      return setIn(
+        state,
+        ["images", imageIdx],
+        {
+          ...state.images[imageIdx],
+          lockedUntil: null,
+          syncError: error
+        }
+      )
+    }
+    case "IMAGE_POLL_INIT": {
+      const { imageIds } = action;
+      return setIn(state, ["toPollImages"], state.toPollImages.filter(i => !imageIds.includes(i)))
+    }
+    case "IMAGE_POLL_SUCCESS": {
+      const { image } = action;
+      const imageIdx = state.images.findIndex(i => i.id === image.id);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${image.id}`)
+      }
+
+      return setIn(
+        state,
+        ["images", imageIdx],
+        {
+          ...state.images[imageIdx],
+          lockedUntil: null,
+          syncError: null,
+          ...image
+        }
+      )
+    }
+    case "IMAGE_POLL_TIMEOUT": {
+      const { imageId } = action;
+      const imageIdx = state.images.findIndex(i => i.id === imageId);
+      if (imageIdx < 0) {
+        throw new Error(`failed to find index of image with id ${imageId}`)
+      }
+
+      return setIn(
+        state,
+        ["images", imageIdx],
+        {
+          ...state.images[imageIdx],
+          lockedUntil: null,
+          syncError: new Error(`polling timeout`)
+        }
+      )
+    }
+    case "ZOOM_RESET":
+      {
+        if (state.selectedImage === undefined || state.selectedImage === null) {
+          return state
+        }
+
+        const deselectedRegions = state.images[state.selectedImage].regions.map(i => ({
+          ...i,
+          highlighted: false,
+          groupHighlighted: false
+        }));
+
+        state = setIn(state, ["selectedGroupId"], null);
+        return setIn(state, ["images", state.selectedImage, "regions"], deselectedRegions);
+      }
+    default:
+      break
+  }
+  return state
+}