@searpent/react-image-annotate 2.0.0 → 2.0.3

package/src/LandingPage/index.js

@@ -1,147 +0,0 @@
-// @flow
-
-import React from "react"
-import Button from "@mui/material/Button"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import * as colors from "@mui/material/colors"
-import Grid from "@mui/material/Grid"
-import Markdown from "react-markdown"
-import GitHubButton from "react-github-btn"
-import "./github-markdown.css"
-import raw from "raw.macro"
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
-import { docco } from "react-syntax-highlighter/dist/cjs/languages/hljs/javascript"
-
-const contentMd = raw("./content.md")
-const theme = createTheme()
-const RootContainer = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-}))
-const ContentContainer = styled("div")(({ theme }) => ({
-  width: "100%",
-  boxSizing: "border-box",
-  display: "flex",
-  flexDirection: "column",
-  maxWidth: 1200,
-}))
-const Header = styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "center",
-  backgroundColor: colors.blue[600],
-  padding: 8,
-  boxSizing: "border-box",
-}))
-const HeaderButton = styled(Button)(({ theme }) => ({
-  color: "white",
-  margin: 8,
-  padding: 16,
-  paddingLeft: 24,
-  paddingRight: 24,
-}))
-const Hero = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  width: "100%",
-  backgroundColor: colors.blue[500],
-  padding: 16,
-  color: "white",
-  boxSizing: "border-box",
-}))
-const HeroMain = styled("div")(({ theme }) => ({
-  fontSize: 48,
-  fontWeight: "bold",
-  paddingTop: 64,
-  textShadow: "0px 1px 5px rgba(0,0,0,0.3)",
-}))
-const HeroSub = styled("div")(({ theme }) => ({
-  paddingTop: 32,
-  lineHeight: 1.5,
-  fontSize: 24,
-  textShadow: "0px 1px 3px rgba(0,0,0,0.2)",
-}))
-const HeroButtons = styled("div")(({ theme }) => ({
-  paddingTop: 32,
-  paddingBottom: 48,
-}))
-const Section = styled("div")(({ theme }) => ({
-  display: "flex",
-  padding: 16,
-  paddingTop: 32,
-  flexDirection: "column",
-}))
-
-const CodeBlock = ({ language, value }) => {
-  return (
-    <SyntaxHighlighter language={language} style={docco}>
-      {value}
-    </SyntaxHighlighter>
-  )
-}
-
-function flatten(text, child) {
-  return typeof child === "string"
-    ? text + child
-    : React.Children.toArray(child.props.children).reduce(flatten, text)
-}
-
-function HeadingRenderer(props) {
-  var children = React.Children.toArray(props.children)
-  var text = children.reduce(flatten, "")
-  var slug = text.toLowerCase().replace(/\W/g, "-")
-  return React.createElement("h" + props.level, { id: slug }, props.children)
-}
-
-const LandingPage = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <RootContainer>
-        <Header id="about">
-          <ContentContainer style={{ flexDirection: "row", flexGrow: 1 }}>
-            <HeaderButton href="#features">Features</HeaderButton>
-            <HeaderButton href="#usage">Usage</HeaderButton>
-            <HeaderButton href="#props">Props</HeaderButton>
-            <HeaderButton href="./demo">Demo Playground</HeaderButton>
-          </ContentContainer>
-        </Header>
-        <Hero>
-          <ContentContainer>
-            <HeroMain>React Image Annotate</HeroMain>
-            <HeroSub>
-              Powerful React component for image annotations with bounding
-              boxes, tagging, classification, multiple images and polygon
-              segmentation.
-            </HeroSub>
-            <HeroButtons>
-              <GitHubButton
-                href="https://github.com/waoai/react-image-annotate"
-                data-size="large"
-                data-show-count="true"
-                aria-label="Star waoai/react-image-annotate on GitHub"
-              >
-                Star
-              </GitHubButton>
-            </HeroButtons>
-          </ContentContainer>
-        </Hero>
-        <ContentContainer className="markdown-body">
-          <Section className="markdown-body">
-            <Markdown
-              escapeHtml={false}
-              source={contentMd}
-              renderers={{
-                code: CodeBlock,
-                heading: HeadingRenderer,
-              }}
-            />
-          </Section>
-        </ContentContainer>
-      </RootContainer>
-    </ThemeProvider>
-  )
-}
-
-export default LandingPage

package/src/MainLayout/icon-dictionary.js

@@ -1,79 +0,0 @@
-// @flow
-
-import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import {
-  faArrowsAlt,
-  faMousePointer,
-  faExpandArrowsAlt,
-  faGripLines,
-  faTag,
-  faPaintBrush,
-  faCrosshairs,
-  faDrawPolygon,
-  faVectorSquare,
-  faHandPaper,
-  faSearch,
-  faMask,
-  faEdit,
-  faChartLine,
-} from "@fortawesome/free-solid-svg-icons"
-import FullscreenIcon from "@mui/icons-material/Fullscreen"
-import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew"
-
-const faStyle = { marginTop: 4, width: 16, height: 16, marginBottom: 4 }
-
-export const iconDictionary = {
-  select: () => (
-    <FontAwesomeIcon
-      style={faStyle}
-      size="xs"
-      fixedWidth
-      icon={faMousePointer}
-    />
-  ),
-  pan: () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faHandPaper} />
-  ),
-  zoom: () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faSearch} />
-  ),
-  "show-tags": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faTag} />
-  ),
-  "create-point": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faCrosshairs} />
-  ),
-  "create-box": () => (
-    <FontAwesomeIcon
-      style={faStyle}
-      size="xs"
-      fixedWidth
-      icon={faVectorSquare}
-    />
-  ),
-  "create-polygon": () => (
-    <FontAwesomeIcon
-      style={faStyle}
-      size="xs"
-      fixedWidth
-      icon={faDrawPolygon}
-    />
-  ),
-  "create-expanding-line": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faGripLines} />
-  ),
-  "create-line": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faChartLine} />
-  ),
-  "show-mask": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faMask} />
-  ),
-  "modify-allowed-area": () => (
-    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faEdit} />
-  ),
-  "create-keypoints": AccessibilityNewIcon,
-  window: FullscreenIcon,
-}
-
-export default iconDictionary

package/src/MainLayout/index.js

@@ -1,420 +0,0 @@
-// @flow
-
-import type { Action, MainLayoutState } from "./types"
-import { FullScreen, useFullScreenHandle } from "react-full-screen"
-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 KeyframeTimeline from "../KeyframeTimeline"
-import KeyframesSelector from "../KeyframesSelectorSidebarBox"
-import type { Node } from "react"
-import RegionSelector from "../RegionSelectorSidebarBox"
-import SettingsDialog from "../SettingsDialog"
-import TagsSidebarBox from "../TagsSidebarBox"
-import TaskDescription from "../TaskDescriptionSidebarBox"
-import Workspace from "react-material-workspace-layout/Workspace"
-import classnames from "classnames"
-import getActiveImage from "../Annotator/reducers/get-active-image"
-import getHotkeyHelpText from "../utils/get-hotkey-help-text"
-import iconDictionary from "./icon-dictionary"
-import styles from "./styles"
-import { useDispatchHotkeyHandlers } from "../ShortcutsManager"
-import useEventCallback from "use-event-callback"
-import useImpliedVideoRegions from "./use-implied-video-regions"
-import useKey from "use-key-hook"
-import { useSettings } from "../SettingsProvider"
-import { withHotKeys } from "react-hotkeys"
-
-// import Fullscreen from "../Fullscreen"
-
-const emptyArr = []
-const theme = createTheme()
-const useStyles = makeStyles((theme) => styles)
-
-const HotkeyDiv = withHotKeys(({ hotKeys, children, divRef, ...props }) => (
-  <div {...{ ...hotKeys, ...props }} ref={divRef}>
-    {children}
-  </div>
-))
-
-const FullScreenContainer = styled("div")(({ theme }) => ({
-  width: "100%",
-  height: "100%",
-  "& .fullscreen": {
-    width: "100%",
-    height: "100%",
-  },
-}))
-
-type Props = {
-  state: MainLayoutState,
-  RegionEditLabel?: Node,
-  dispatch: (Action) => any,
-  alwaysShowNextButton?: boolean,
-  alwaysShowPrevButton?: boolean,
-  onRegionClassAdded: () => {},
-  hideHeader?: boolean,
-  hideHeaderText?: boolean,
-}
-
-export const MainLayout = ({
-  state,
-  dispatch,
-  alwaysShowNextButton = false,
-  alwaysShowPrevButton = false,
-  RegionEditLabel,
-  onRegionClassAdded,
-  hideHeader,
-  hideHeaderText,
-  hideNext = false,
-  hidePrev = false,
-  hideClone = false,
-  hideSettings = false,
-  hideFullScreen = false,
-  hideSave = false,
-}: Props) => {
-  const classes = useStyles()
-  const settings = useSettings()
-  const fullScreenHandle = useFullScreenHandle()
-
-  const memoizedActionFns = useRef({})
-  const action = (type: string, ...params: Array<string>) => {
-    const fnKey = `${type}(${params.join(",")})`
-    if (memoizedActionFns.current[fnKey])
-      return memoizedActionFns.current[fnKey]
-
-    const fn = (...args: any) =>
-      params.length > 0
-        ? dispatch(
-            ({
-              type,
-              ...params.reduce((acc, p, i) => ((acc[p] = args[i]), acc), {}),
-            }: any)
-          )
-        : dispatch({ type, ...args[0] })
-    memoizedActionFns.current[fnKey] = fn
-    return fn
-  }
-
-  const { currentImageIndex, activeImage } = getActiveImage(state)
-  let nextImage
-  if (currentImageIndex !== null) {
-    nextImage = state.images[currentImageIndex + 1]
-  }
-
-  useKey(() => dispatch({ type: "CANCEL" }), {
-    detectKeys: [27],
-  })
-
-  const isAVideoFrame = activeImage && activeImage.frameTime !== undefined
-  const innerContainerRef = useRef()
-  const hotkeyHandlers = useDispatchHotkeyHandlers({ dispatch })
-
-  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 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 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)
-
-  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"
-            )}
-          >
-            <Workspace
-              allowFullscreen
-              iconDictionary={iconDictionary}
-              hideHeader={hideHeader}
-              hideHeaderText={hideHeaderText}
-              headerLeftSide={[
-                state.annotationType === "video" ? (
-                  <KeyframeTimeline
-                    currentTime={state.currentVideoTime}
-                    duration={state.videoDuration}
-                    onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
-                    keyframes={state.keyframes}
-                  />
-                ) : activeImage ? (
-                  <div className={classes.headerTitle}>{activeImage.name}</div>
-                ) : null,
-              ].filter(Boolean)}
-              headerItems={[
-                !hidePrev && { name: "Prev" },
-                !hideNext && { name: "Next" },
-                state.annotationType !== "video"
-                  ? null
-                  : !state.videoPlaying
-                  ? { name: "Play" }
-                  : { name: "Pause" },
-                !hideClone &&
-                  !nextImageHasRegions &&
-                  activeImage.regions && { name: "Clone" },
-                !hideSettings && { name: "Settings" },
-                !hideFullScreen &&
-                  (state.fullScreen
-                    ? { name: "Window" }
-                    : { name: "Fullscreen" }),
-                !hideSave && { name: "Save" },
-              ].filter(Boolean)}
-              onClickHeaderItem={onClickHeaderItem}
-              onClickIconSidebarItem={onClickIconSidebarItem}
-              selectedTools={[
-                state.selectedTool,
-                state.showTags && "show-tags",
-                state.showMask && "show-mask",
-              ].filter(Boolean)}
-              iconSidebarItems={[
-                {
-                  name: "select",
-                  helperText: "Select" + getHotkeyHelpText("select_tool"),
-                  alwaysShowing: true,
-                },
-                {
-                  name: "pan",
-                  helperText:
-                    "Drag/Pan (right or middle click)" +
-                    getHotkeyHelpText("pan_tool"),
-                  alwaysShowing: true,
-                },
-                {
-                  name: "zoom",
-                  helperText:
-                    "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
-                  alwaysShowing: true,
-                },
-                {
-                  name: "show-tags",
-                  helperText: "Show / Hide Tags",
-                  alwaysShowing: true,
-                },
-                {
-                  name: "create-point",
-                  helperText: "Add Point" + getHotkeyHelpText("create_point"),
-                },
-                {
-                  name: "create-box",
-                  helperText:
-                    "Add Bounding Box" +
-                    getHotkeyHelpText("create_bounding_box"),
-                },
-                {
-                  name: "create-polygon",
-                  helperText:
-                    "Add Polygon" + getHotkeyHelpText("create_polygon"),
-                },
-                {
-                  name: "create-line",
-                  helperText: "Add Line",
-                },
-                {
-                  name: "create-expanding-line",
-                  helperText: "Add Expanding Line",
-                },
-                {
-                  name: "create-keypoints",
-                  helperText: "Add Keypoints (Pose)",
-                },
-                state.fullImageSegmentationMode && {
-                  name: "show-mask",
-                  alwaysShowing: true,
-                  helperText: "Show / Hide Mask",
-                },
-                {
-                  name: "modify-allowed-area",
-                  helperText: "Modify Allowed Area",
-                },
-              ]
-                .filter(Boolean)
-                .filter(
-                  (a) => a.alwaysShowing || state.enabledTools.includes(a.name)
-                )}
-              rightSidebarItems={[
-                debugModeOn && (
-                  <DebugBox state={debugModeOn} lastAction={state.lastAction} />
-                ),
-                state.taskDescription && (
-                  <TaskDescription description={state.taskDescription} />
-                ),
-                state.regionClsList && (
-                  <ClassSelectionMenu
-                    selectedCls={state.selectedCls}
-                    regionClsList={state.regionClsList}
-                    onSelectCls={action("SELECT_CLASSIFICATION", "cls")}
-                  />
-                ),
-                state.labelImages && (
-                  <TagsSidebarBox
-                    currentImage={activeImage}
-                    imageClsList={state.imageClsList}
-                    imageTagList={state.imageTagList}
-                    onChangeImage={action("CHANGE_IMAGE", "delta")}
-                    expandedByDefault
-                  />
-                ),
-                // (state.images?.length || 0) > 1 && (
-                //   <ImageSelector
-                //     onSelect={action("SELECT_REGION", "region")}
-                //     images={state.images}
-                //   />
-                // ),
-                <RegionSelector
-                  regions={activeImage ? activeImage.regions : emptyArr}
-                  onSelectRegion={action("SELECT_REGION", "region")}
-                  onDeleteRegion={action("DELETE_REGION", "region")}
-                  onChangeRegion={action("CHANGE_REGION", "region")}
-                />,
-                state.keyframes && (
-                  <KeyframesSelector
-                    onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
-                    onDeleteKeyframe={action("DELETE_KEYFRAME", "time")}
-                    onChangeCurrentTime={action("CHANGE_VIDEO_TIME", "newTime")}
-                    currentTime={state.currentVideoTime}
-                    duration={state.videoDuration}
-                    keyframes={state.keyframes}
-                  />
-                ),
-                <HistorySidebarBox
-                  history={state.history}
-                  onRestoreHistory={action("RESTORE_HISTORY")}
-                />,
-              ].filter(Boolean)}
-            >
-              {canvas}
-            </Workspace>
-            <SettingsDialog
-              open={state.settingsOpen}
-              onClose={() =>
-                dispatch({
-                  type: "HEADER_BUTTON_CLICKED",
-                  buttonName: "Settings",
-                })
-              }
-            />
-          </HotkeyDiv>
-        </FullScreen>
-      </FullScreenContainer>
-    </ThemeProvider>
-  )
-}
-
-export default MainLayout