@searpent/react-image-annotate 2.0.75 → 2.0.77

package/src/PageSelector/index.js

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,90 @@
+// @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

@@ -0,0 +1,48 @@
+// @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

@@ -0,0 +1,23 @@
+// @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

@@ -0,0 +1,236 @@
+// @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
+)

package/{RegionLabel → src/RegionLabel}/styles.js

@@ -1,4 +1,7 @@
-import { grey } from "@mui/material/colors";
+// @flow
+
+import { grey } from "@mui/material/colors"
+
 export default {
   regionInfo: {
     fontSize: 12,
@@ -7,13 +10,13 @@ export default {
     opacity: 0.5,
     "&:hover": {
       opacity: 0.9,
-      cursor: "pointer"
+      cursor: "pointer",
     },
     "&.highlighted": {
       opacity: 0.9,
       "&:hover": {
-        opacity: 1
-      }
+        opacity: 1,
+      },
     },
     // pointerEvents: "none",
     fontWeight: 600,
@@ -28,8 +31,8 @@ export default {
         boxShadow: "0px 0px 2px rgba(0,0,0,0.4)",
         width: 10,
         height: 10,
-        borderRadius: 5
-      }
+        borderRadius: 5,
+      },
     },
     "& .tags": {
       "& .tag": {
@@ -37,12 +40,12 @@ export default {
         display: "inline-block",
         margin: 1,
         fontSize: 10,
-        textDecoration: "underline"
-      }
-    }
+        textDecoration: "underline",
+      },
+    },
   },
   commentBox: {
     fontWeight: 400,
-    fontSize: 13
-  }
-};
+    fontSize: 13,
+  },
+}