@searpent/react-image-annotate 2.0.76 → 2.0.78

package/src/SidebarBoxContainer/index.js

@@ -1,93 +0,0 @@
-// @flow
-
-import React, { useState, memo } from "react"
-import Paper from "@mui/material/Paper"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import ExpandIcon from "@mui/icons-material/ExpandMore"
-import IconButton from "@mui/material/IconButton"
-import Collapse from "@mui/material/Collapse"
-import { grey } from "@mui/material/colors"
-import classnames from "classnames"
-import useEventCallback from "use-event-callback"
-import SidebarBox from "react-material-workspace-layout/SidebarBox"
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => ({
-  container: { margin: 8 },
-  header: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: "bold",
-    flexGrow: 1,
-    paddingLeft: 8,
-    color: grey[800],
-    "& span": {
-      color: grey[600],
-      fontSize: 12,
-    },
-  },
-  expandButton: {
-    padding: 0,
-    width: 30,
-    height: 30,
-    "& .icon": {
-      marginTop: -6,
-      width: 20,
-      height: 20,
-      transition: "500ms transform",
-      "&.expanded": {
-        transform: "rotate(180deg)",
-      },
-    },
-  },
-  expandedContent: {
-    maxHeight: 300,
-    overflowY: "auto",
-    "&.noScroll": {
-      overflowY: "visible",
-      overflow: "visible",
-    },
-  },
-}))
-
-export const SidebarBoxContainer = ({
-  icon,
-  title,
-  subTitle,
-  children,
-  noScroll = false,
-  expandedByDefault = false,
-}) => {
-  const classes = useStyles()
-  const content = (
-    <div
-      className={classnames(classes.expandedContent, noScroll && "noScroll")}
-    >
-      {children}
-    </div>
-  )
-
-  const [expanded, changeExpanded] = useState(expandedByDefault)
-  const toggleExpanded = useEventCallback(() => changeExpanded(!expanded))
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBox icon={icon} title={title}>
-        {children}
-      </SidebarBox>
-    </ThemeProvider>
-  )
-}
-
-export default memo(
-  SidebarBoxContainer,
-  (prev, next) => prev.title === next.title && prev.children === next.children
-)

package/src/SmallToolButton/index.js

@@ -1,57 +0,0 @@
-// @flow
-
-import React, { createContext, useContext, memo } from "react"
-import IconButton from "@mui/material/IconButton"
-import Tooltip from "@mui/material/Tooltip"
-import { blue } from "@mui/material/colors"
-
-export const SelectedTool = createContext()
-
-export const SmallToolButton = ({
-  id,
-  name,
-  icon,
-  selected,
-  togglable,
-  alwaysShowing = false,
-}: {
-  id: string,
-  name: string,
-  icon: any,
-  alwaysShowing?: boolean,
-  selected?: boolean,
-  togglable?: boolean,
-}) => {
-  const { enabledTools, selectedTool, onClickTool } = useContext(SelectedTool)
-  if (!enabledTools.includes(id) && !alwaysShowing) return null
-  selected = selected || selectedTool === id
-  return (
-    <Tooltip placement="right" title={name}>
-      <div>
-        <IconButton
-          disabled={!togglable ? selected : undefined}
-          aria-label={name}
-          onClick={() => onClickTool(id)}
-          size="small"
-          style={{
-            width: 50,
-            height: 50,
-            margin: 1,
-            color: selected ? blue[500] : undefined,
-          }}
-        >
-          {icon}
-        </IconButton>
-      </div>
-    </Tooltip>
-  )
-}
-
-export default memo(
-  SmallToolButton,
-  (prevProps, nextProps) =>
-    prevProps.togglable === nextProps.togglable &&
-    prevProps.selected === nextProps.selected &&
-    prevProps.name === nextProps.name &&
-    prevProps.id === nextProps.id
-)

package/src/TagsSidebarBox/index.js

@@ -1,93 +0,0 @@
-// @flow
-
-import React, { useMemo, memo } from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import StyleIcon from "@mui/icons-material/Style"
-import { grey } from "@mui/material/colors"
-import Select from "react-select"
-import useEventCallback from "use-event-callback"
-import { asMutable } from "seamless-immutable"
-
-type Props = {
-  tags: Array<string>,
-  currentImage: { cls?: string, tags?: Array<string> },
-  imageClsList?: Array<string>,
-  imageTagList?: Array<string>,
-  onChangeImage: (Array<string>) => any,
-}
-
-const emptyArr = []
-const noop = () => null
-
-export const TagsSidebarBox = ({
-  currentImage,
-  imageClsList = emptyArr,
-  imageTagList = emptyArr,
-  onChangeImage = noop,
-}: Props) => {
-  const { tags = [], cls = null } = currentImage || {}
-  const onChangeClassification = useEventCallback((o) =>
-    onChangeImage({ cls: o.value })
-  )
-  const onChangeTags = useEventCallback((o) =>
-    onChangeImage({ tags: o.map((a) => a.value) })
-  )
-  const selectValue = useMemo(
-    () => (cls ? { value: cls, label: cls } : null),
-    [cls]
-  )
-  const memoImgClsList = useMemo(
-    () => asMutable(imageClsList.map((c) => ({ value: c, label: c }))),
-    [imageClsList]
-  )
-  const memoImgTagList = useMemo(
-    () => asMutable(imageTagList.map((c) => ({ value: c, label: c }))),
-    [imageTagList]
-  )
-  const memoCurrentTags = useMemo(
-    () => tags.map((r) => ({ value: r, label: r })),
-    [tags]
-  )
-
-  if (!currentImage) return null
-
-  return (
-    <SidebarBoxContainer
-      title="Image Tags"
-      expandedByDefault
-      noScroll
-      icon={<StyleIcon style={{ color: grey[700] }} />}
-    >
-      {imageClsList.length > 0 && (
-        <div style={{ padding: 8 }}>
-          <Select
-            placeholder="Image Classification"
-            onChange={onChangeClassification}
-            value={selectValue}
-            options={memoImgClsList}
-          />
-        </div>
-      )}
-      {imageTagList.length > 0 && (
-        <div style={{ padding: 8, paddingTop: 0 }}>
-          <Select
-            isMulti
-            placeholder="Image Tags"
-            onChange={onChangeTags}
-            value={memoCurrentTags}
-            options={memoImgTagList}
-          />
-        </div>
-      )}
-    </SidebarBoxContainer>
-  )
-}
-
-export default memo(
-  TagsSidebarBox,
-  (prevProps, nextProps) =>
-    prevProps.currentImage.cls === nextProps.currentImage.cls &&
-    prevProps.currentImage.tags === nextProps.currentImage.tags &&
-    prevProps.imageClsList === nextProps.imageClsList &&
-    prevProps.imageTagList === nextProps.imageTagList
-)

package/src/TaskDescriptionSidebarBox/index.js

@@ -1,43 +0,0 @@
-// @flow
-
-import React, { memo } from "react"
-import SidebarBoxContainer from "../SidebarBoxContainer"
-import DescriptionIcon from "@mui/icons-material/Description"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import { grey } from "@mui/material/colors"
-import Markdown from "react-markdown"
-
-const theme = createTheme()
-const MarkdownContainer = styled("div")(({ theme }) => ({
-  paddingLeft: 16,
-  paddingRight: 16,
-  fontSize: 12,
-  "& h1": { fontSize: 18 },
-  "& h2": { fontSize: 14 },
-  "& h3": { fontSize: 12 },
-  "& h4": { fontSize: 12 },
-  "& h5": { fontSize: 12 },
-  "& h6": { fontSize: 12 },
-  "& p": { fontSize: 12 },
-  "& a": {},
-  "& img": { width: "100%" },
-}))
-
-export const TaskDescriptionSidebarBox = ({ description }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarBoxContainer
-        title="Task Description"
-        icon={<DescriptionIcon style={{ color: grey[700] }} />}
-        expandedByDefault={description && description !== "" ? false : true}
-      >
-        <MarkdownContainer>
-          <Markdown source={description} />
-        </MarkdownContainer>
-      </SidebarBoxContainer>
-    </ThemeProvider>
-  )
-}
-
-export default memo(TaskDescriptionSidebarBox)

package/src/Theme/index.js

@@ -1,36 +0,0 @@
-// @flow
-
-import React from "react"
-import { ThemeProvider, createTheme } from "@mui/material/styles"
-import { makeStyles } from "@mui/styles"
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    fontFamily: '"Inter", sans-serif',
-  },
-}))
-
-const theme = createTheme({
-  typography: {
-    fontFamily: '"Inter", "Roboto", sans-serif',
-  },
-  overrides: {
-    MuiButton: {
-      root: {
-        textTransform: "none",
-      },
-    },
-  },
-})
-
-export const Theme = ({ children }: any) => {
-  const classes = useStyles()
-  return (
-    <ThemeProvider theme={theme}>
-      {/* <div className={classes.container}>{children}</div> */}
-      <div>{children}</div>
-    </ThemeProvider>
-  )
-}
-
-export default Theme

package/src/VideoOrImageCanvasBackground/index.js

@@ -1,170 +0,0 @@
-// @flow weak
-
-import React, { useRef, useEffect, useMemo, useState } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import useEventCallback from "use-event-callback"
-import { useSettings } from "../SettingsProvider"
-
-const theme = createTheme()
-const Video = styled("video")(({ theme }) => ({
-  zIndex: 0,
-  position: "absolute",
-}))
-
-const StyledImage = styled("img")(({ theme }) => ({
-  zIndex: 0,
-  position: "absolute",
-}))
-
-const Error = styled("div")(({ theme }) => ({
-  zIndex: 0,
-  position: "absolute",
-  left: 0,
-  right: 0,
-  bottom: 0,
-  top: 0,
-  backgroundColor: "rgba(255,0,0,0.2)",
-  color: "#ff0000",
-  fontWeight: "bold",
-  whiteSpace: "pre-wrap",
-  padding: 50,
-}))
-
-export default ({
-  imagePosition,
-  mouseEvents,
-  videoTime,
-  videoSrc,
-  imageSrc,
-  onLoad,
-  useCrossOrigin = false,
-  videoPlaying,
-  onChangeVideoTime,
-  onChangeVideoPlaying,
-}) => {
-  const settings = useSettings()
-  const videoRef = useRef()
-  const imageRef = useRef()
-  const [error, setError] = useState()
-
-  useEffect(() => {
-    if (!videoPlaying && videoRef.current) {
-      videoRef.current.currentTime = (videoTime || 0) / 1000
-    }
-  }, [videoTime])
-
-  useEffect(() => {
-    let renderLoopRunning = false
-    if (videoRef.current) {
-      if (videoPlaying) {
-        videoRef.current.play()
-        renderLoopRunning = true
-        if (settings.videoPlaybackSpeed) {
-          videoRef.current.playbackRate = parseFloat(
-            settings.videoPlaybackSpeed
-          )
-        }
-      } else {
-        videoRef.current.pause()
-      }
-    }
-
-    function checkForNewFrame() {
-      if (!renderLoopRunning) return
-      if (!videoRef.current) return
-      const newVideoTime = Math.floor(videoRef.current.currentTime * 1000)
-      if (videoTime !== newVideoTime) {
-        onChangeVideoTime(newVideoTime)
-      }
-      if (videoRef.current.paused) {
-        renderLoopRunning = false
-        onChangeVideoPlaying(false)
-      }
-      requestAnimationFrame(checkForNewFrame)
-    }
-    checkForNewFrame()
-
-    return () => {
-      renderLoopRunning = false
-    }
-  }, [videoPlaying])
-
-  const onLoadedVideoMetadata = useEventCallback((event) => {
-    const videoElm = event.currentTarget
-    videoElm.currentTime = (videoTime || 0) / 1000
-    if (onLoad)
-      onLoad({
-        naturalWidth: videoElm.videoWidth,
-        naturalHeight: videoElm.videoHeight,
-        videoElm: videoElm,
-        duration: videoElm.duration,
-      })
-  })
-  const onImageLoaded = useEventCallback((event) => {
-    const imageElm = event.currentTarget
-    if (onLoad)
-      onLoad({
-        naturalWidth: imageElm.naturalWidth,
-        naturalHeight: imageElm.naturalHeight,
-        imageElm,
-      })
-  })
-  const onImageError = useEventCallback((event) => {
-    setError(
-      `Could not load image\n\nMake sure your image works by visiting ${
-        imageSrc || videoSrc
-      } in a web browser. If that URL works, the server hosting the URL may be not allowing you to access the image from your current domain. Adjust server settings to enable the image to be viewed.${
-        !useCrossOrigin
-          ? ""
-          : `\n\nYour image may be blocked because it's not being sent with CORs headers. To do pixel segmentation, browser web security requires CORs headers in order for the algorithm to read the pixel data from the image. CORs headers are easy to add if you're using an S3 bucket or own the server hosting your images.`
-      }\n\n If you need a hand, reach out to the community at universaldatatool.slack.com`
-    )
-  })
-
-  const stylePosition = useMemo(() => {
-    let width = imagePosition.bottomRight.x - imagePosition.topLeft.x
-    let height = imagePosition.bottomRight.y - imagePosition.topLeft.y
-    return {
-      imageRendering: "pixelated",
-      left: imagePosition.topLeft.x,
-      top: imagePosition.topLeft.y,
-      width: isNaN(width) ? 0 : width,
-      height: isNaN(height) ? 0 : height,
-    }
-  }, [
-    imagePosition.topLeft.x,
-    imagePosition.topLeft.y,
-    imagePosition.bottomRight.x,
-    imagePosition.bottomRight.y,
-  ])
-
-  if (!videoSrc && !imageSrc)
-    return <Error>No imageSrc or videoSrc provided</Error>
-
-  if (error) return <Error>{error}</Error>
-
-  return (
-    <ThemeProvider theme={theme}>
-      {imageSrc && videoTime === undefined ? (
-        <StyledImage
-          {...mouseEvents}
-          src={imageSrc}
-          ref={imageRef}
-          style={stylePosition}
-          onLoad={onImageLoaded}
-          onError={onImageError}
-          crossOrigin={useCrossOrigin ? "anonymous" : undefined}
-        />
-      ) : (
-        <Video
-          {...mouseEvents}
-          ref={videoRef}
-          style={stylePosition}
-          onLoadedMetadata={onLoadedVideoMetadata}
-          src={videoSrc || imageSrc}
-        />
-      )}
-    </ThemeProvider>
-  )
-}

package/src/colors.js

@@ -1,32 +0,0 @@
-// @flow
-
-import * as muiColors from "@mui/material/colors"
-
-export const colors = [
-  muiColors.red[500],
-  muiColors.blue[500],
-  muiColors.green[500],
-  muiColors.orange[800],
-  muiColors.brown[500],
-  muiColors.lightGreen[700],
-  muiColors.pink[500],
-  muiColors.purple[500],
-  muiColors.indigo[500],
-  muiColors.teal[500],
-  muiColors.lime[500],
-  muiColors.blueGrey[500],
-]
-
-const transparency = 0x88000000
-
-function reverseParseColor(rrggbb) {
-  rrggbb = rrggbb.replace("#", "")
-  const bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2)
-  return parseInt(bbggrr, 16)
-}
-
-export const colorInts: Array<number> = colors.map(
-  (c) => (reverseParseColor(c) | transparency) >>> 0
-)
-
-export default colors

package/src/hooks/use-colors.js

@@ -1,75 +0,0 @@
-import { useSettings } from "../SettingsProvider"
-
-const DEFAULT_GROUP_COLOR = "#32CD32";
-
-function defaultClsColor(cls) {
-  switch (cls) {
-    case 'title':
-      return '#f70202'
-    case 'subtitle':
-      return "#ffb405"
-    case 'text':
-      return "#14deef"
-    case 'author':
-      return "#f8d51e"
-    case 'appendix':
-      return "#bfede2"
-    case 'photo_author':
-      return "#9a17bb"
-    case 'photo_caption':
-      return "#ff84f6"
-    case 'advertisement':
-      return "#ffb201"
-    case 'other_graphics':
-      return "#ff5400"
-    case 'unknown':
-      return "#bfede2"
-    case 'about_author':
-      return "#9a17bb"
-    case 'image':
-      return "#14deef"
-    case 'interview':
-      return "#23b20f"
-    case 'table':
-      return "#02b4ba"
-    case 'section':
-      return "#ffcccc"
-    default:
-      return "#02b4ba"
-  }
-}
-
-function stringToNumber(str) {
-  let sum = 0
-  for (let index = 0; index < str.length; index++) {
-    sum += str.charCodeAt(index)
-
-  }
-  return sum
-}
-
-const useColors = () => {
-  const { clsColors, groupColors } = useSettings()
-
-  const clsColor = (cls) => {
-    if (!clsColors) { return DEFAULT_GROUP_COLOR }
-    if (clsColors[cls]) { return clsColors[cls] }
-    return defaultClsColor(cls)
-  }
-
-  const groupColor = (idx) => {
-    if (isNaN(idx)) {
-      return groupColors[stringToNumber(idx) % groupColors.length] || DEFAULT_GROUP_COLOR
-    } else {
-      return groupColors[idx % groupColors.length] || DEFAULT_GROUP_COLOR
-    }
-
-  }
-
-  return {
-    clsColor,
-    groupColor
-  }
-}
-
-export default useColors;

package/src/hooks/use-event-callback.js

@@ -1,11 +0,0 @@
-// @flow
-
-import { useRef, useCallback, useLayoutEffect, useEffect } from "react"
-
-export default (fn) => {
-  let ref = useRef()
-  useLayoutEffect(() => {
-    ref.current = fn
-  })
-  return useCallback((...args) => (0, ref.current)(...args), [])
-}

package/src/hooks/use-exclude-pattern.js

@@ -1,27 +0,0 @@
-// @flow weak
-
-import { useRef } from "react"
-import excludePatternSrc from "./xpattern.js"
-
-export default () => {
-  const excludePattern = useRef(null)
-  if (excludePattern.current === null) {
-    excludePattern.current = {
-      image: new Image(),
-      pattern: null,
-    }
-    const canvas = document.createElement("canvas")
-    canvas.width = 100
-    canvas.height = 100
-    const context = canvas.getContext("2d")
-
-    excludePattern.current.image.onload = () => {
-      excludePattern.current.pattern = context.createPattern(
-        excludePattern.current.image,
-        "repeat"
-      )
-    }
-    excludePattern.current.image.src = excludePatternSrc
-  }
-  return excludePattern.current.pattern
-}

package/src/hooks/use-load-image.js

@@ -1,21 +0,0 @@
-// @flow weak
-
-import { useRef, useState } from "react"
-
-export default (imageSrc, onImageLoaded) => {
-  const [imageLoaded, changeImageLoaded] = useState(false)
-  const image = useRef(null)
-  if (image.current === null) {
-    image.current = new Image()
-    image.current.onload = () => {
-      changeImageLoaded(true)
-      if (onImageLoaded)
-        onImageLoaded({
-          width: image.current.naturalWidth,
-          height: image.current.naturalHeight,
-        })
-    }
-    image.current.src = imageSrc
-  }
-  return [image.current, imageLoaded]
-}