@searpent/react-image-annotate 2.0.1 → 2.0.4

package/src/Annotator/index.js

@@ -6,6 +6,7 @@ import type {
   MainLayoutState,
   Mode,
   ToolEnum,
+  Metadata
 } from "../MainLayout/types"
 import React, { useEffect, useReducer } from "react"
 import makeImmutable, { without } from "seamless-immutable"
@@ -56,6 +57,18 @@ hideHeader ?: boolean,
   hideFullScreen ?: boolean,
   hideSave ?: boolean,
   onImagesChange ?: (any) => any,
+  groups ?: Array < any >,
+  onGroupSelect ?: (any) => any,
+  hideHistory ?: boolean,
+  hideNotEditingLabel ?: boolean,
+  showEditor ?: boolean,
+  showPageSelector ?: boolean,
+  clsColors ?: Object,
+  groupColors ?: Object,
+  onRecalc ?: (any) => any,
+  onSave ?: (any) => any,
+  allowedGroups ?: Object,
+  metadata ?: Array < Metadata >,
 }
 
 export const Annotator = ({
@@ -101,6 +114,18 @@ export const Annotator = ({
   hideSave,
   allowComments,
   onImagesChange,
+  groups,
+  onGroupSelect,
+  hideHistory,
+  hideNotEditingLabel,
+  showEditor,
+  showPageSelector,
+  clsColors,
+  groupColors,
+  onRecalc,
+  onSave,
+  allowedGroups,
+  metadata
 }: Props) => {
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
@@ -148,6 +173,9 @@ export const Annotator = ({
           videoSrc,
           keyframes,
         }),
+      imagesUpdatedAt: null,
+      imagesSavedAt: null,
+      metadata,
     })
   )
 
@@ -171,23 +199,63 @@ export const Annotator = ({
     })
   })
 
+  const handleSaveClick = async (e) => {
+    e.preventDefault()
+    if (onSave) {
+      onSave()
+      dispatchToReducer({
+        type: "IMAGES_SAVED",
+        savedAt: new Date()
+      })
+    }
+  }
+
+  const handleRecalcClick = (e) => {
+    e.preventDefault()
+    if (onRecalc) {
+      onRecalc()
+    }
+  }
+
+  const handleMetadataChange = ({ name, value, imageIndex }) => {
+    dispatchToReducer({
+      type: "UPDATE_METADATA",
+      name,
+      value,
+      imageIndex
+    })
+  }
+
+  // trigger this on every BBox manipulation (there is currently no way to detect adding of new box!)
   useEffect(() => {
+    if (!state.lastAction || !["BEGIN_BOX_TRANSFORM", "CHANGE_REGION", "DELETE_REGION"].includes(state.lastAction.type)) { return }
     if (onImagesChange) {
-      onImagesChange({ selectedImage, images: state.images })
+      onImagesChange(state.images)
     }
+    dispatchToReducer({
+      type: "IMAGES_UPDATED",
+      updatedAt: new Date()
+    })
+  }, [onImagesChange, state.images, state.lastAction])
+
+  useEffect(() => {
     if (selectedImage === undefined) return
     dispatchToReducer({
       type: "SELECT_IMAGE",
       imageIndex: selectedImage,
       image: state.images[selectedImage],
     })
-  }, [onImagesChange, selectedImage, state.images])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onImagesChange, selectedImage])
 
   if (!images && !videoSrc)
     return 'Missing required prop "images" or "videoSrc"'
 
+
+  const [recalcActive, saveActive] = state.imagesSavedAt < state.imagesUpdatedAt ? [true, true] : [false, false];
+
   return (
-    <SettingsProvider>
+    <SettingsProvider clsColors={clsColors} groupColors={groupColors}>
       <MainLayout
         RegionEditLabel={RegionEditLabel}
         alwaysShowNextButton={Boolean(onNextImage)}
@@ -203,6 +271,18 @@ export const Annotator = ({
         hideSettings={hideSettings}
         hideFullScreen={hideFullScreen}
         hideSave={hideSave}
+        groups={groups}
+        onGroupSelect={onGroupSelect}
+        hideHistory={hideHistory}
+        hideNotEditingLabel={hideNotEditingLabel}
+        showEditor={showEditor}
+        showPageSelector={showPageSelector}
+        onRecalc={handleRecalcClick}
+        onSave={handleSaveClick}
+        saveActive={recalcActive}
+        recalcActive={saveActive}
+        allowedGroups={allowedGroups}
+        onMetadataChange={handleMetadataChange}
       />
     </SettingsProvider>
   )

package/src/Annotator/index.story.js

@@ -12,7 +12,9 @@ import { defaultKeyMap } from "../ShortcutsManager"
 
 import Annotator from "./"
 
-import { testRegions } from "../ImageCanvas/index.story"
+import { testRegions, testRegionsBoxes } from "../ImageCanvas/index.story"
+import photosToImages from "../utils/photosToImages"
+import examplePhotos from "./examplePhotos"
 
 const middlewares = [
   (store) => (next) => (action) => {
@@ -54,33 +56,80 @@ storiesOf("Annotator", module)
   ))
   .add("Basic with onImagesChange", () => (
     <Annotator
-      onExit={actionAddon("onExit")}
       middlewares={middlewares}
       labelImages
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      regionTagList={["tag1", "tag2", "tag3"]}
-      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      imageTagList={["tag1", "tag2", "tag3"]}
-      onImagesChange={(images) => console.log("images changed to:", images)}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=1",
-          name: "Frame 0036",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=2",
-          name: "Frame 0037",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=3",
-          name: "Frame 0038",
-        },
+      regionClsList={[
+        "author",
+        "appendix",
+        "photo_author",
+        "photo_caption",
+        "advertisement",
+        "other_graphics",
+        "unknown",
+        "title",
+        "about_author",
+        "image",
+        "subtitle",
+        "interview",
+        "table",
+        "text",
       ]}
+      allowedGroups={[
+        { value: '0', label: '0' },
+        { value: '1', label: '1' },
+        { value: '2', label: '2' },
+        { value: '3', label: '3' },
+        { value: '4', label: '4' },
+        { value: '5', label: '5' },
+        { value: '6', label: '6' },
+        { value: '7', label: '7' },
+        { value: '8', label: '8' },
+        { value: '9', label: '9' },
+      ]}
+      onImagesChange={(images) => console.log("[images changed to]:", images)}
+      images={photosToImages([...examplePhotos, ...examplePhotos, ...examplePhotos])}
+      clsColors={{
+        title: "#f70202",
+        subtitle: "#ffb405",
+        text: "#14deef",
+        author: "#f8d51e",
+        appendix: "#bfede2",
+        photo_author: "#9a17bb",
+        photo_caption: "#ff84f6",
+        advertisement: "#ffb201",
+        other_graphics: "#ff5400",
+        unknown: "#bfede2",
+        about_author: "#9a17bb",
+        image: "#14deef",
+        interview: "#23b20f",
+        table: "#02b4ba",
+      }}
+      groupColors={{
+        "0": "#e3a7c0",
+        "1": "#c2d5a8",
+        "2": "#f2e9cc",
+        "3": "#bad5f0",
+        "4": "#f0d5ba",
+        "5": "#d6eff5",
+        "6": "#f8d7e8",
+        "7": "#a5d5d5",
+        "8": "#b0abcb",
+        "9": "#fae4cc",
+      }}
+      onGroupSelect={(groupId) => console.log('selected groupid:', groupId)}
+      hideHeader={true}
+      hideHistory={true}
+      hideNotEditingLabel={true}
+      showEditor={true}
+      showPageSelector={true}
+      metadata={[{
+        key: "name", value: "Dennik Aha"
+      }, {
+        key: "released", value: "20/1/2022"
+      }]}
+      onSave={() => console.log("[onSave] triggered]")}
+      onRecalc={() => console.log("[onRecalc] triggered]")}
+      onExit={(s) => console.log('[onExit] triggered:', s)}
     />
   ))
   .add("Basic - Allow Comments", () => (

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

@@ -12,6 +12,7 @@ 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"
 
 const getRandomId = () => Math.random().toString().split(".")[1]
 
@@ -167,8 +168,17 @@ export default (state: MainLayoutState, action: Action) => {
       const regions = [...(activeImage.regions || [])].map((r) => ({
         ...r,
         highlighted: r.id === region.id,
+        groupHighlighted: (r.groupId && r.groupId === region.groupId) ? true : false,
         editingLabels: r.id === region.id,
       }))
+
+      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": {
@@ -310,15 +320,15 @@ export default (state: MainLayoutState, action: Action) => {
             xFree === 0
               ? ow
               : xFree === -1
-              ? ow + (ox - dx)
-              : Math.max(0, ow + (x - ox - ow))
+                ? 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))
+                ? oh + (oy - dy)
+                : Math.max(0, oh + (y - oy - oh))
 
           // determine if we should switch the freedom
           if (dw <= 0.001) {
@@ -636,18 +646,18 @@ export default (state: MainLayoutState, action: Action) => {
           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(),
-          }
+            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,
@@ -664,10 +674,12 @@ export default (state: MainLayoutState, action: Action) => {
 
       const regions = [...(getIn(state, pathToActiveImage).regions || [])]
         .map((r) =>
-          setIn(r, ["editingLabels"], false).setIn(["highlighted"], false)
+          setIn(r, ["editingLabels"], false).setIn(["highlighted"], false).setIn(["groupHighlighted"], false)
         )
         .concat(newRegion ? [newRegion] : [])
 
+      state = setIn(state, [...pathToActiveImage, "selectedGroupId"], null)
+
       return setIn(state, [...pathToActiveImage, "regions"], regions)
     }
     case "MOUSE_UP": {
@@ -907,6 +919,76 @@ export default (state: MainLayoutState, action: Action) => {
       }
       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
+      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 "UPDATE_METADATA": {
+      const { name, value, imageIndex } = action;
+      if (isNaN(imageIndex)) {
+        // update global metadata
+        const metadataIndex = state.metadata?.findIndex(mt => mt.key === name)
+        if (metadataIndex < 0) {
+          console.error(`can't find metadata by key "${name}"`)
+          return
+        }
+        return setIn(
+          state,
+          ["metadata", metadataIndex],
+          {
+            key: name,
+            value: value
+          }
+        )
+      } else {
+        // update local metadata of imageIndex
+        const metadataIndex = state.images[imageIndex]?.metadata?.findIndex(mt => mt.key === name)
+        if (metadataIndex < 0) {
+          console.error(`can't find metadata by key "${name}"`)
+          return
+        }
+        return setIn(
+          state,
+          ["images", imageIndex, "metadata", metadataIndex],
+          {
+            key: name,
+            value: value
+          }
+        )
+      }
+    }
     default:
       break
   }

package/src/Editor/annotation-plugin/annotation.css

@@ -0,0 +1,46 @@
+/**
+ * Plugin styles
+ */
+.ce-header {
+  padding: 0.6em 0 3px;
+  margin: 0;
+  line-height: 1.25em;
+  outline: none;
+}
+
+.ce-header p,
+.ce-header div {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/**
+ * Styles for Plugin icon in Toolbar
+ */
+.ce-header__icon {}
+
+.ce-header[contentEditable=true][data-placeholder]::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: normal;
+  display: none;
+  cursor: text;
+}
+
+.ce-header[contentEditable=true][data-placeholder]:empty::before {
+  display: block;
+}
+
+.ce-header[contentEditable=true][data-placeholder]:empty:focus::before {
+  display: none;
+}
+
+/* Custom overwrite */
+.cdx-settings-button {
+  width: 100% !important;
+}
+
+.ce-settings__plugin-zone {
+  padding: 0 .25rem;
+}