@searpent/react-image-annotate 2.0.76 → 2.0.78

package/src/PageSelector/index.js

@@ -1,159 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classnames from "classnames"
-import './page-selector.css';
-import Locker from '../Locker';
-import Errorer from '../Errorer';
-
-function PageThumbnail({ src, isActive, onClick, metadata, showMetadata, imageIndex, imageId, onMetadataChange, metadataConfigs = [], isLocked, error, onRecalcClick, isRecalcReady = false }) {
-  const handleChange = e => {
-    e.preventDefault()
-    const { name, value } = e.target
-    onMetadataChange({
-      name,
-      value,
-      imageIndex
-    })
-  }
-
-  const handleRecalcClick = e => {
-    e.stopPropagation();
-    onRecalcClick({ imageId })
-  }
-
-  const pageNumber = metadata?.find?.(md => md.key === 'pageNumber')?.value
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className={classnames('ps-page-thumbnail', {
-        'ps-page-thumbnail-is-active': isActive,
-      })}
-      onClick={onClick}
-    >
-      {
-        isLocked && (
-          <Locker />
-        )
-      }
-      {
-        error && (
-          <Errorer errorMessage={error.message} />
-        )
-      }
-      <div className="ps-page-thumbnail-image-wrapper">
-        {
-          isRecalcReady && (
-            <div className="ps-page-thumbnail-recalc-wrapper">
-              <button className="recalc-button" onClick={handleRecalcClick}>Extract</button>
-            </div>
-          )
-        }
-        <img src={src} alt="" className="ps-page-thumbnail-image" />
-        <div className="page-number-wrapper">
-          {
-            (pageNumber !== undefined && !showMetadata) && (
-              <span className="page-number">{pageNumber}</span>
-            )
-          }
-        </div>
-      </div>
-      <div className="ps-page-thumbnail-metadata-wrapper">
-        {
-          metadata.map(({ key, value }) => (<>
-            <label for={key}>{key}</label>
-            <input type="text" value={value} name={key} onChange={handleChange} onClick={e => e.stopPropagation()} id={key} list={`${key}-list`} />
-            <datalist id={`${key}-list`}>
-              {
-                metadataConfigs.find(mcf => mcf.key === key)?.options.map(opt => <option key={opt} value={opt}></option>)
-              }
-            </datalist>
-          </>))
-        }
-      </div>
-    </div >
-  );
-}
-
-function isLocked(page) {
-  const { lockedUntil } = page;
-
-  // needs to be defined and greater than current time
-  if (Date.parse(lockedUntil)?.valueOf() > new Date().valueOf()) {
-    return true
-  }
-
-  return false;
-}
-
-function PageSelector({ pages, onPageClick, onMetadataChange, metadataConfigs, onRecalcClick }) {
-  const [showMetadata, setShowMetadata] = useState(false);
-
-  return (
-    <div className={classnames('page-selector', {
-      'page-selector--opened': showMetadata,
-    })}>
-      <div className="top-buttons">
-        <div className="show-metadata-wrapper">
-          <label className="switch mr-2">
-            <input id="show-metadata" type="checkbox" value={showMetadata} onChange={() => setShowMetadata(prev => !prev)} />
-            <span className="slider round"></span>
-          </label>
-          <label>Metadata</label>
-        </div>
-      </div>
-      <div className="pages">
-        {pages.map((page, idx) => (
-          <PageThumbnail
-            key={`${page.id}`}
-            isLocked={isLocked(page)}
-            error={page.syncError}
-            src={page.src}
-            isActive={page.isActive}
-            onClick={() => onPageClick(idx)}
-            metadata={page.metadata}
-            showMetadata={showMetadata}
-            imageIndex={idx}
-            imageId={page.id}
-            onMetadataChange={onMetadataChange}
-            metadataConfigs={metadataConfigs}
-            onRecalcClick={onRecalcClick}
-            isRecalcReady={page.isRecalcReady}
-          />
-        ))
-        }
-      </div >
-    </div >
-  );
-}
-
-PageSelector.propTypes = {
-  pages: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      src: PropTypes.string.isRequired,
-      isActive: PropTypes.bool.isRequired,
-      pageNumber: PropTypes.string
-    })
-  ).isRequired,
-  onPageClick: PropTypes.func,
-  recalcActive: PropTypes.bool,
-  saveActive: PropTypes.bool,
-  pageNumber: PropTypes.string,
-  onMetadataChange: PropTypes.func.isRequired,
-  metadataConfigs: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string.isRequired,
-    level: PropTypes.string.isRequired,
-    options: PropTypes.arrayOf(PropTypes.string).isRequired,
-  }))
-};
-
-PageSelector.defaultProps = {
-  onPageClick: () => { },
-  recalcActive: false,
-  saveActive: false,
-  pageNumber: undefined
-};
-
-export default PageSelector;

package/src/PointDistances/index.js

@@ -1,90 +0,0 @@
-// @flow weak
-
-import React, { Fragment } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-
-const theme = createTheme()
-const Svg = styled("svg")(({ theme }) => ({
-  pointerEvents: "none",
-  position: "absolute",
-  zIndex: 1,
-  left: 0,
-  top: 0,
-  width: "100%",
-  height: "100%",
-  "& text": {
-    fill: "#fff",
-  },
-  "& path": {
-    vectorEffect: "non-scaling-stroke",
-    strokeWidth: 2,
-    opacity: 0.5,
-    stroke: "#FFF",
-    fill: "none",
-    strokeDasharray: 5,
-    animationDuration: "4s",
-    animationTimingFunction: "linear",
-    animationIterationCount: "infinite",
-    animationPlayState: "running",
-  },
-}))
-
-export const PointDistances = ({
-  projectRegionBox,
-  regions,
-  pointDistancePrecision,
-  realSize,
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Svg>
-        {regions
-          .filter((r1) => r1.type === "point")
-          .flatMap((r1, i1) =>
-            regions
-              .filter((r2, i2) => i2 > i1)
-              .filter((r2) => r2.type === "point")
-              .map((r2) => {
-                const pr1 = projectRegionBox(r1)
-                const pr2 = projectRegionBox(r2)
-                const prm = {
-                  x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
-                  y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2,
-                }
-                let displayDistance
-                if (realSize) {
-                  const { w, h, unitName } = realSize
-                  displayDistance =
-                    Math.sqrt(
-                      Math.pow(r1.x * w - r2.x * w, 2) +
-                        Math.pow(r1.y * h - r2.y * h, 2)
-                    ).toFixed(pointDistancePrecision) + unitName
-                } else {
-                  displayDistance =
-                    (
-                      Math.sqrt(
-                        Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)
-                      ) * 100
-                    ).toFixed(pointDistancePrecision) + "%"
-                }
-                return (
-                  <Fragment>
-                    <path
-                      d={`M${pr1.x + pr1.w / 2},${pr1.y + pr1.h / 2} L${
-                        pr2.x + pr2.w / 2
-                      },${pr2.y + pr2.h / 2}`}
-                    />
-                    <text x={prm.x} y={prm.y}>
-                      {displayDistance}
-                    </text>
-                  </Fragment>
-                )
-              })
-          )}
-      </Svg>
-    </ThemeProvider>
-  )
-}
-
-export default PointDistances

package/src/PreventScrollToParents/index.js

@@ -1,48 +0,0 @@
-// @flow
-
-import React, { useState } from "react"
-import { RemoveScroll } from "react-remove-scroll"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import useEventCallback from "use-event-callback"
-
-const theme = createTheme()
-const Container = styled("div")(({ theme }) => ({
-  "& > div": {
-    width: "100%",
-    height: "100%",
-  },
-}))
-
-export const PreventScrollToParents = ({ children, ...otherProps }) => {
-  const [mouseOver, changeMouseOver] = useState(false)
-  const onMouseMove = useEventCallback((e) => {
-    if (!mouseOver) changeMouseOver(true)
-    if (otherProps.onMouseMove) {
-      otherProps.onMouseMove(e)
-    }
-  })
-  const onMouseLeave = useEventCallback((e) => {
-    setTimeout(() => {
-      if (mouseOver) {
-        changeMouseOver(false)
-      }
-    }, 100)
-  })
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Container
-        {...otherProps}
-        onMouseMove={onMouseMove}
-        onMouseLeave={onMouseLeave}
-      >
-        <RemoveScroll enabled={mouseOver} removeScrollBar={false}>
-          {children}
-        </RemoveScroll>
-      </Container>
-    </ThemeProvider>
-  )
-}
-
-export default PreventScrollToParents

package/src/PreventScrollToParents/index.story.js

@@ -1,23 +0,0 @@
-// @flow
-
-import React from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
-
-import RemoveScrollOnChildren from "./"
-
-storiesOf("RemoveScrollOnChildren", module).add("Basic", () => (
-  <div style={{ width: "100vh", textAlign: "center", height: "200vh" }}>
-    <RemoveScrollOnChildren>
-      <div
-        style={{
-          display: "inline-block",
-          width: 100,
-          height: 100,
-          backgroundColor: "red",
-        }}
-      />
-    </RemoveScrollOnChildren>
-  </div>
-))

package/src/RegionLabel/index.js

@@ -1,236 +0,0 @@
-// @flow
-
-import React, { useRef, memo } from "react"
-import Paper from "@mui/material/Paper"
-import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import styles from "./styles"
-import classnames from "classnames"
-import type { Region } from "../ImageCanvas/region-tools.js"
-import IconButton from "@mui/material/IconButton"
-import Button from "@mui/material/Button"
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import CheckIcon from "@mui/icons-material/Check"
-import TextField from "@mui/material/TextField"
-import Select from "react-select"
-import CreatableSelect from "react-select/creatable"
-import uuidToHash from '../utils/uuid-to-hash';
-
-import { asMutable } from "seamless-immutable"
-
-const theme = createTheme()
-const useStyles = makeStyles((theme) => styles)
-
-type Props = {
-  region: Region,
-  editing?: boolean,
-  allowedClasses?: Array<string>,
-  allowedTags?: Array<string>,
-  allowedGroups?: Array<{ value: String, label: String }>,
-  cls?: string,
-  tags?: Array<string>,
-  onDelete: (Region) => null,
-  onDeleteGroup: (string) => null,
-  onChange: (Region) => null,
-  onClose: (Region) => null,
-  onOpen: (Region) => null,
-  onRegionClassAdded: () => {},
-  allowComments?: boolean,
-  hideNotEditingLabel?: boolean,
-}
-
-export const RegionLabel = ({
-  region,
-  editing,
-  allowedClasses,
-  allowedTags,
-  onDelete,
-  onChange,
-  onClose,
-  onOpen,
-  onRegionClassAdded,
-  allowComments,
-  hideNotEditingLabel,
-  allowedGroups,
-  onDeleteGroup
-}: Props) => {
-  const classes = useStyles()
-  const commentInputRef = useRef(null)
-  const onCommentInputClick = (_) => {
-    // The TextField wraps the <input> tag with two divs
-    const commentInput = commentInputRef.current.children[0].children[0]
-
-    if (commentInput) return commentInput.focus()
-  }
-
-  if (hideNotEditingLabel && !editing) return null
-  const allowedGroupsForSelect = allowedGroups ? allowedGroups.map(g => ({
-    value: `${g.id}`,
-    label: g.label || uuidToHash(g.id)
-  })) : []
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Paper
-        onClick={() => (!editing ? onOpen(region) : null)}
-        className={classnames(classes.regionInfo, {
-          highlighted: region.highlighted,
-        })}
-      >
-        {!editing ? (
-          <div>
-            {region.cls && (
-              <div className="name">
-                <div
-                  className="circle"
-                  style={{ backgroundColor: region.color }}
-                />
-                {region.cls}
-              </div>
-            )}
-            {region.tags && (
-              <div className="tags">
-                {region.tags.map((t) => (
-                  <div key={t} className="tag">
-                    {t}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        ) : (
-          <div style={{ width: 200 }}>
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              <div
-                style={{
-                  display: "flex",
-                  backgroundColor: region.color || "#888",
-                  color: "#fff",
-                  padding: 4,
-                  paddingLeft: 8,
-                  paddingRight: 8,
-                  borderRadius: 4,
-                  fontWeight: "bold",
-                  textShadow: "0px 0px 5px rgba(0,0,0,0.4)",
-                }}
-              >
-                {region.type}
-              </div>
-              <div style={{ flexGrow: 1 }} />
-              <IconButton
-                onClick={() => onDelete(region)}
-                tabIndex={-1}
-                style={{ width: 22, height: 22 }}
-                size="small"
-                variant="outlined"
-              >
-                <DeleteOutlineIcon style={{ marginTop: -8, width: 16, height: 16 }} />
-              </IconButton>
-              <IconButton
-                onClick={() => onDeleteGroup(region.groupId)}
-                tabIndex={-1}
-                style={{ width: 22, height: 22 }}
-                size="small"
-                variant="outlined"
-              >
-                <DeleteForeverIcon style={{ marginTop: -8, width: 16, height: 16 }} />
-              </IconButton>
-            </div>
-            {(allowedClasses || []).length > 0 && (
-              <div style={{ marginTop: 6 }}>
-                <CreatableSelect
-                  placeholder="Classification"
-                  onChange={(o, actionMeta) => {
-                    if (actionMeta.action == "create-option") {
-                      onRegionClassAdded(o.value)
-                    }
-                    return onChange({
-                      ...(region: any),
-                      cls: o.value,
-                    })
-                  }}
-                  value={
-                    region.cls ? { label: region.cls, value: region.cls } : null
-                  }
-                  options={asMutable(
-                    allowedClasses.map((c) => ({ value: c, label: c }))
-                  )}
-                />
-              </div>
-            )}
-            {(allowedGroups || []).length > 0 && (
-              <Select
-                onChange={(newGroup) => onChange({
-                  ...(region: any),
-                  groupId: newGroup.value,
-                })}
-                placeholder="Group"
-                value={allowedGroupsForSelect.find(g => g.value === region.groupId)
-                }
-                options={[...allowedGroupsForSelect]}
-              />
-            )}
-            {(allowedTags || []).length > 0 && (
-              <div style={{ marginTop: 4 }}>
-                <Select
-                  onChange={(newTags) =>
-                    onChange({
-                      ...(region: any),
-                      tags: newTags.map((t) => t.value),
-                    })
-                  }
-                  placeholder="Tags"
-                  value={(region.tags || []).map((c) => ({
-                    label: c,
-                    value: c,
-                  }))}
-                  isMulti
-                  options={asMutable(
-                    allowedTags.map((c) => ({ value: c, label: c }))
-                  )}
-                />
-              </div>
-            )}
-            {allowComments && (
-              <TextField
-                InputProps={{
-                  className: classes.commentBox,
-                }}
-                fullWidth
-                multiline
-                rows={3}
-                ref={commentInputRef}
-                onClick={onCommentInputClick}
-                value={region.comment || ""}
-                onChange={(event) =>
-                  onChange({ ...(region: any), comment: event.target.value })
-                }
-              />
-            )}
-            {onClose && (
-              <div style={{ marginTop: 4, display: "flex" }}>
-                <div style={{ flexGrow: 1 }} />
-                <Button
-                  onClick={() => onClose(region)}
-                  size="small"
-                  variant="contained"
-                  color="primary"
-                >
-                  <CheckIcon />
-                </Button>
-              </div>
-            )}
-          </div>
-        )}
-      </Paper>
-    </ThemeProvider>
-  )
-}
-
-export default memo(
-  RegionLabel,
-  (prevProps, nextProps) =>
-    prevProps.editing === nextProps.editing &&
-    prevProps.region === nextProps.region
-)