@searpent/react-image-annotate 2.0.1 → 2.0.4

package/src/ImageCanvas/index.story.js

@@ -87,6 +87,106 @@ export const testRegions = [
   },
 ]
 
+export const testRegionsBoxes = [
+  {
+    type: "box",
+    id: "box1",
+    cls: "title",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.315,
+    y: 0.63,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff4133",
+    groupColor: "#2436ff",
+    groupId: "alpha",
+    text: "first box text"
+  },
+  {
+    type: "box",
+    id: "box2",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.63,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff9924",
+    groupColor: "#2436ff",
+    groupId: "alpha",
+    text: "second box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta1",
+    cls: "title",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.315,
+    y: 0.43,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff4133",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "third box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta2",
+    cls: "subtitle",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.43,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#ff9924",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "fourth box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta3",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.53,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#007efc",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "fifth box text"
+  },
+  {
+    type: "box",
+    id: "boxBeta4",
+    cls: "text",
+    highlighted: false,
+    groupHighlighted: false,
+    x: 0.415,
+    y: 0.73,
+    w: 0.067,
+    h: 0.045,
+    visible: true,
+    color: "#007efc",
+    groupColor: "#78ffa7",
+    groupId: "beta",
+    text: "sixth box text"
+  },
+
+]
+
 const events = {
   // Ignore common mouse movements, they fill the action log
   onMouseMove: () => null, //action("onMouseMove"),

package/src/MainLayout/index.js

@@ -6,12 +6,12 @@ import React, { useCallback, useRef } from "react"
 import { makeStyles } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import { styled } from "@mui/material/styles"
-
 import ClassSelectionMenu from "../ClassSelectionMenu"
 import DebugBox from "../DebugSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
 import ImageCanvas from "../ImageCanvas"
 import ImageSelector from "../ImageSelectorSidebarBox"
+import GroupSelector from "../GroupSelectorSidebarBox"
 import KeyframeTimeline from "../KeyframeTimeline"
 import KeyframesSelector from "../KeyframesSelectorSidebarBox"
 import type { Node } from "react"
@@ -19,6 +19,7 @@ import RegionSelector from "../RegionSelectorSidebarBox"
 import SettingsDialog from "../SettingsDialog"
 import TagsSidebarBox from "../TagsSidebarBox"
 import TaskDescription from "../TaskDescriptionSidebarBox"
+import MetadataEditor from "../MetadataEditorSidebarBox"
 import Workspace from "react-material-workspace-layout/Workspace"
 import classnames from "classnames"
 import getActiveImage from "../Annotator/reducers/get-active-image"
@@ -31,6 +32,9 @@ import useImpliedVideoRegions from "./use-implied-video-regions"
 import useKey from "use-key-hook"
 import { useSettings } from "../SettingsProvider"
 import { withHotKeys } from "react-hotkeys"
+import Editor from "../Editor"
+import regionsToBlocks from '../utils/regions-to-blocks';
+import PagesSelector from "../PageSelector"
 
 // import Fullscreen from "../Fullscreen"
 
@@ -53,6 +57,12 @@ const FullScreenContainer = styled("div")(({ theme }) => ({
   },
 }))
 
+const EditorWrapper = styled("div")(({ theme }) => ({
+  width: "45%",
+  padding: "1rem",
+  paddingLeft: "2rem"
+}))
+
 type Props = {
   state: MainLayoutState,
   RegionEditLabel?: Node,
@@ -62,6 +72,18 @@ type Props = {
   onRegionClassAdded: () => {},
   hideHeader?: boolean,
   hideHeaderText?: boolean,
+  groups?: Array<any>,
+  onGroupSelect?: (any) => any,
+  hideHistory?: boolean,
+  hideNotEditingLabel?: boolean,
+  showEditor?: boolean,
+  showPageSelector?: boolean,
+  onRecalc?: (any) => any,
+  onSave?: (any) => any,
+  recalcActive?: boolean,
+  saveActive?: boolean,
+  allowedGroups?: boolean,
+  onMetadataChange: (any) => any
 }
 
 export const MainLayout = ({
@@ -79,6 +101,18 @@ export const MainLayout = ({
   hideSettings = false,
   hideFullScreen = false,
   hideSave = false,
+  groups = [],
+  onGroupSelect = () => { },
+  hideHistory = false,
+  hideNotEditingLabel = false,
+  showEditor = false,
+  showPageSelector = false,
+  onRecalc = () => { },
+  onSave = () => { },
+  recalcActive = false,
+  saveActive = false,
+  allowedGroups = {},
+  onMetadataChange
 }: Props) => {
   const classes = useStyles()
   const settings = useSettings()
@@ -93,154 +127,190 @@ export const MainLayout = ({
     const fn = (...args: any) =>
       params.length > 0
         ? dispatch(
-            ({
-              type,
-              ...params.reduce((acc, p, i) => ((acc[p] = args[i]), acc), {}),
-            }: any)
+          ({
+            type,
+            ...params.reduce((acc, p, i) => ((acc[p] = args[i]), acc), {}),
+          }: any)
           )
         : dispatch({ type, ...args[0] })
-    memoizedActionFns.current[fnKey] = fn
-    return fn
-  }
+memoizedActionFns.current[fnKey] = fn
+return fn
+}
 
-  const { currentImageIndex, activeImage } = getActiveImage(state)
-  let nextImage
-  if (currentImageIndex !== null) {
-    nextImage = state.images[currentImageIndex + 1]
-  }
+const { currentImageIndex, activeImage } = getActiveImage(state)
+let nextImage
+if (currentImageIndex !== null) {
+  nextImage = state.images[currentImageIndex + 1]
+}
 
-  useKey(() => dispatch({ type: "CANCEL" }), {
-    detectKeys: [27],
-  })
+useKey(() => dispatch({ type: "CANCEL" }), {
+  detectKeys: [27],
+})
 
-  const isAVideoFrame = activeImage && activeImage.frameTime !== undefined
-  const innerContainerRef = useRef()
-  const hotkeyHandlers = useDispatchHotkeyHandlers({ dispatch })
+const isAVideoFrame = activeImage && activeImage.frameTime !== undefined
+const innerContainerRef = useRef()
+const hotkeyHandlers = useDispatchHotkeyHandlers({ dispatch })
 
-  let impliedVideoRegions = useImpliedVideoRegions(state)
+let impliedVideoRegions = useImpliedVideoRegions(state)
 
-  const refocusOnMouseEvent = useCallback((e) => {
-    if (!innerContainerRef.current) return
-    if (innerContainerRef.current.contains(document.activeElement)) return
-    if (innerContainerRef.current.contains(e.target)) {
-      innerContainerRef.current.focus()
-      e.target.focus()
+const refocusOnMouseEvent = useCallback((e) => {
+  if (!innerContainerRef.current) return
+  if (innerContainerRef.current.contains(document.activeElement)) return
+  if (innerContainerRef.current.contains(e.target)) {
+    innerContainerRef.current.focus()
+    e.target.focus()
+  }
+}, [])
+
+const canvas = (
+  <ImageCanvas
+    {...settings}
+    showCrosshairs={
+      settings.showCrosshairs &&
+      !["select", "pan", "zoom"].includes(state.selectedTool)
+    }
+    key={state.selectedImage}
+    showMask={state.showMask}
+    fullImageSegmentationMode={state.fullImageSegmentationMode}
+    autoSegmentationOptions={state.autoSegmentationOptions}
+    showTags={state.showTags}
+    allowedArea={state.allowedArea}
+    modifyingAllowedArea={state.selectedTool === "modify-allowed-area"}
+    regionClsList={state.regionClsList}
+    regionTagList={state.regionTagList}
+    regions={
+      state.annotationType === "image"
+        ? activeImage.regions || []
+        : impliedVideoRegions
+    }
+    realSize={activeImage ? activeImage.realSize : undefined}
+    videoPlaying={state.videoPlaying}
+    imageSrc={state.annotationType === "image" ? activeImage.src : null}
+    videoSrc={state.annotationType === "video" ? state.videoSrc : null}
+    pointDistancePrecision={state.pointDistancePrecision}
+    createWithPrimary={state.selectedTool.includes("create")}
+    dragWithPrimary={state.selectedTool === "pan"}
+    zoomWithPrimary={state.selectedTool === "zoom"}
+    showPointDistances={state.showPointDistances}
+    videoTime={
+      state.annotationType === "image"
+        ? state.selectedImageFrameTime
+        : state.currentVideoTime
     }
-  }, [])
+    keypointDefinitions={state.keypointDefinitions}
+    onMouseMove={action("MOUSE_MOVE")}
+    onMouseDown={action("MOUSE_DOWN")}
+    onMouseUp={action("MOUSE_UP")}
+    onChangeRegion={action("CHANGE_REGION", "region")}
+    onBeginRegionEdit={action("OPEN_REGION_EDITOR", "region")}
+    onCloseRegionEdit={action("CLOSE_REGION_EDITOR", "region")}
+    onDeleteRegion={action("DELETE_REGION", "region")}
+    onBeginBoxTransform={action("BEGIN_BOX_TRANSFORM", "box", "directions")}
+    onBeginMovePolygonPoint={action(
+      "BEGIN_MOVE_POLYGON_POINT",
+      "polygon",
+      "pointIndex"
+    )}
+    onBeginMoveKeypoint={action(
+      "BEGIN_MOVE_KEYPOINT",
+      "region",
+      "keypointId"
+    )}
+    onAddPolygonPoint={action(
+      "ADD_POLYGON_POINT",
+      "polygon",
+      "point",
+      "pointIndex"
+    )}
+    onSelectRegion={action("SELECT_REGION", "region")}
+    onBeginMovePoint={action("BEGIN_MOVE_POINT", "point")}
+    onImageLoaded={action("IMAGE_LOADED", "image")}
+    RegionEditLabel={RegionEditLabel}
+    onImageOrVideoLoaded={action("IMAGE_OR_VIDEO_LOADED", "metadata")}
+    onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
+    onChangeVideoPlaying={action("CHANGE_VIDEO_PLAYING", "isPlaying")}
+    onRegionClassAdded={onRegionClassAdded}
+    allowComments={state.allowComments}
+    hideNotEditingLabel={hideNotEditingLabel}
+    allowedGroups={allowedGroups}
+  />
+)
 
-  const canvas = (
-    <ImageCanvas
-      {...settings}
-      showCrosshairs={
-        settings.showCrosshairs &&
-        !["select", "pan", "zoom"].includes(state.selectedTool)
-      }
-      key={state.selectedImage}
-      showMask={state.showMask}
-      fullImageSegmentationMode={state.fullImageSegmentationMode}
-      autoSegmentationOptions={state.autoSegmentationOptions}
-      showTags={state.showTags}
-      allowedArea={state.allowedArea}
-      modifyingAllowedArea={state.selectedTool === "modify-allowed-area"}
-      regionClsList={state.regionClsList}
-      regionTagList={state.regionTagList}
-      regions={
-        state.annotationType === "image"
-          ? activeImage.regions || []
-          : impliedVideoRegions
-      }
-      realSize={activeImage ? activeImage.realSize : undefined}
-      videoPlaying={state.videoPlaying}
-      imageSrc={state.annotationType === "image" ? activeImage.src : null}
-      videoSrc={state.annotationType === "video" ? state.videoSrc : null}
-      pointDistancePrecision={state.pointDistancePrecision}
-      createWithPrimary={state.selectedTool.includes("create")}
-      dragWithPrimary={state.selectedTool === "pan"}
-      zoomWithPrimary={state.selectedTool === "zoom"}
-      showPointDistances={state.showPointDistances}
-      videoTime={
-        state.annotationType === "image"
-          ? state.selectedImageFrameTime
-          : state.currentVideoTime
-      }
-      keypointDefinitions={state.keypointDefinitions}
-      onMouseMove={action("MOUSE_MOVE")}
-      onMouseDown={action("MOUSE_DOWN")}
-      onMouseUp={action("MOUSE_UP")}
-      onChangeRegion={action("CHANGE_REGION", "region")}
-      onBeginRegionEdit={action("OPEN_REGION_EDITOR", "region")}
-      onCloseRegionEdit={action("CLOSE_REGION_EDITOR", "region")}
-      onDeleteRegion={action("DELETE_REGION", "region")}
-      onBeginBoxTransform={action("BEGIN_BOX_TRANSFORM", "box", "directions")}
-      onBeginMovePolygonPoint={action(
-        "BEGIN_MOVE_POLYGON_POINT",
-        "polygon",
-        "pointIndex"
-      )}
-      onBeginMoveKeypoint={action(
-        "BEGIN_MOVE_KEYPOINT",
-        "region",
-        "keypointId"
-      )}
-      onAddPolygonPoint={action(
-        "ADD_POLYGON_POINT",
-        "polygon",
-        "point",
-        "pointIndex"
-      )}
-      onSelectRegion={action("SELECT_REGION", "region")}
-      onBeginMovePoint={action("BEGIN_MOVE_POINT", "point")}
-      onImageLoaded={action("IMAGE_LOADED", "image")}
-      RegionEditLabel={RegionEditLabel}
-      onImageOrVideoLoaded={action("IMAGE_OR_VIDEO_LOADED", "metadata")}
-      onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
-      onChangeVideoPlaying={action("CHANGE_VIDEO_PLAYING", "isPlaying")}
-      onRegionClassAdded={onRegionClassAdded}
-      allowComments={state.allowComments}
-    />
-  )
+const onClickIconSidebarItem = useEventCallback((item) => {
+  dispatch({ type: "SELECT_TOOL", selectedTool: item.name })
+})
 
-  const onClickIconSidebarItem = useEventCallback((item) => {
-    dispatch({ type: "SELECT_TOOL", selectedTool: item.name })
-  })
+const onClickHeaderItem = useEventCallback((item) => {
+  if (item.name === "Fullscreen") {
+    fullScreenHandle.enter()
+  } else if (item.name === "Window") {
+    fullScreenHandle.exit()
+  }
+  dispatch({ type: "HEADER_BUTTON_CLICKED", buttonName: item.name })
+})
 
-  const onClickHeaderItem = useEventCallback((item) => {
-    if (item.name === "Fullscreen") {
-      fullScreenHandle.enter()
-    } else if (item.name === "Window") {
-      fullScreenHandle.exit()
-    }
-    dispatch({ type: "HEADER_BUTTON_CLICKED", buttonName: item.name })
-  })
+const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
+const nextImageHasRegions =
+  !nextImage || (nextImage.regions && nextImage.regions.length > 0)
 
-  const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
-  const nextImageHasRegions =
-    !nextImage || (nextImage.regions && nextImage.regions.length > 0)
+// Editor.js blocks
+const selectedGroupId = state.images[state.selectedImage]?.selectedGroupId || null;
+const editorBlocks = regionsToBlocks(state.images[state.selectedImage]?.regions || []);
+const blocks = editorBlocks.filter(i => i?.data?.groupId === selectedGroupId);
 
-  return (
-    <ThemeProvider theme={theme}>
-      <FullScreenContainer>
-        <FullScreen
-          handle={fullScreenHandle}
-          onChange={(open) => {
-            if (!open) {
-              fullScreenHandle.exit()
-              action("HEADER_BUTTON_CLICKED", "buttonName")("Window")
-            }
-          }}
+const handleEditorChange = ({ imageIndex, data }) => {
+  const newRegions = data.blocks.map(i => ({
+    id: i.id,
+    cls: i.data.labelName,
+    text: i.data.text
+  }))
+  dispatch({ type: "UPDATE_REGIONS", regions: newRegions, imageIndex })
+}
+
+const pages = state.images.map((i, idx) => ({
+  id: idx,
+  src: i.src,
+  isActive: idx === state.selectedImage,
+  pageNumber: i?.metadata?.find(md => md.key === "page").value || null
+}))
+
+const handlePageClick = (pageIndex) => {
+  dispatch({ type: "SELECT_IMAGE", imageIndex: pageIndex })
+}
+
+return (
+  <ThemeProvider theme={theme}>
+    <FullScreenContainer>
+      <FullScreen
+        handle={fullScreenHandle}
+        onChange={(open) => {
+          if (!open) {
+            fullScreenHandle.exit()
+            action("HEADER_BUTTON_CLICKED", "buttonName")("Window")
+          }
+        }}
+      >
+        <HotkeyDiv
+          tabIndex={-1}
+          divRef={innerContainerRef}
+          onMouseDown={refocusOnMouseEvent}
+          onMouseOver={refocusOnMouseEvent}
+          allowChanges
+          handlers={hotkeyHandlers}
+          className={classnames(
+            classes.container,
+            state.fullScreen && "Fullscreen"
+          )}
         >
-          <HotkeyDiv
-            tabIndex={-1}
-            divRef={innerContainerRef}
-            onMouseDown={refocusOnMouseEvent}
-            onMouseOver={refocusOnMouseEvent}
-            allowChanges
-            handlers={hotkeyHandlers}
-            className={classnames(
-              classes.container,
-              state.fullScreen && "Fullscreen"
-            )}
-          >
+          <div style={{
+            display: 'flex',
+            flexDirection: 'row'
+          }}>
+            {
+              showPageSelector && (
+                <PagesSelector pages={pages} onPageClick={handlePageClick} onRecalc={onRecalc} onSave={onSave} saveActive={saveActive} recalcActive={recalcActive} />
+              )
+            }
             <Workspace
               allowFullscreen
               iconDictionary={iconDictionary}
@@ -264,16 +334,16 @@ export const MainLayout = ({
                 state.annotationType !== "video"
                   ? null
                   : !state.videoPlaying
-                  ? { name: "Play" }
-                  : { name: "Pause" },
+                    ? { name: "Play" }
+                    : { name: "Pause" },
                 !hideClone &&
-                  !nextImageHasRegions &&
-                  activeImage.regions && { name: "Clone" },
+                !nextImageHasRegions &&
+                activeImage.regions && { name: "Clone" },
                 !hideSettings && { name: "Settings" },
                 !hideFullScreen &&
-                  (state.fullScreen
-                    ? { name: "Window" }
-                    : { name: "Fullscreen" }),
+                (state.fullScreen
+                  ? { name: "Window" }
+                  : { name: "Fullscreen" }),
                 !hideSave && { name: "Save" },
               ].filter(Boolean)}
               onClickHeaderItem={onClickHeaderItem}
@@ -377,6 +447,15 @@ export const MainLayout = ({
                 //     images={state.images}
                 //   />
                 // ),
+                // groups && (
+                //   <GroupSelector
+                //     title="Articles"
+                //     groups={groups}
+                //     selectedGroupId={selectedGroupId}
+                //     onSelect={onGroupSelect}
+                //   />
+                // )
+                ,
                 <RegionSelector
                   regions={activeImage ? activeImage.regions : emptyArr}
                   onSelectRegion={action("SELECT_REGION", "region")}
@@ -393,28 +472,39 @@ export const MainLayout = ({
                     keyframes={state.keyframes}
                   />
                 ),
-                <HistorySidebarBox
-                  history={state.history}
-                  onRestoreHistory={action("RESTORE_HISTORY")}
-                />,
+                !hideHistory && (
+                  <HistorySidebarBox
+                    history={state.history}
+                    onRestoreHistory={action("RESTORE_HISTORY")}
+                  />
+                ),
+                <MetadataEditor state={state} onMetadataChange={onMetadataChange} />
               ].filter(Boolean)}
             >
               {canvas}
             </Workspace>
-            <SettingsDialog
-              open={state.settingsOpen}
-              onClose={() =>
-                dispatch({
-                  type: "HEADER_BUTTON_CLICKED",
-                  buttonName: "Settings",
-                })
-              }
-            />
-          </HotkeyDiv>
-        </FullScreen>
-      </FullScreenContainer>
-    </ThemeProvider>
-  )
+            {
+              (showEditor) && (
+                <EditorWrapper id="editor-wrapper">
+                  <Editor id="editor" blocks={blocks} imageIndex={state.selectedImage} key={`${state.selectedImage}#${selectedGroupId}`} onChange={handleEditorChange} />
+                </EditorWrapper>
+              )
+            }
+          </div>
+          <SettingsDialog
+            open={state.settingsOpen}
+            onClose={() =>
+              dispatch({
+                type: "HEADER_BUTTON_CLICKED",
+                buttonName: "Settings",
+              })
+            }
+          />
+        </HotkeyDiv>
+      </FullScreen>
+    </FullScreenContainer>
+  </ThemeProvider >
+)
 }
 
 export default MainLayout