Merge pull request #1 from RobinNagpal/theme_and_menu

Theme and menu
RobinNagpal · Oct 27, 2021 · e48bf32 · e48bf32
2 parents 9cbfb6f + de95c1b
commit e48bf32
Show file tree

Hide file tree

Showing 23 changed files with 733 additions and 248 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,6 @@
 React Image Annotation(TypeScript)
 =========================
 
-This is a fork of https://github.com/Secretmapper/react-image-annotation 
-
-Since the original project was inactive, only option was to fork and update the code.
-
 ![Annotation demo](https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/demo.gif)
 
 ## Installation

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
+    "@szhsin/react-menu": "^2.2.0",
     "styled-components": "^5.3.3",
     "types": "^0.1.1"
   },

diff --git a/src/components/Annotation.stories.tsx b/src/components/Annotation.stories.tsx
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -25,16 +25,14 @@ const Container = styled.div<{ allowTouch?: boolean }>`
   touch-action: ${({ allowTouch }) => (allowTouch ? 'pinch-zoom' : 'auto')};
 `;
 
-const Items = styled.div`
+const ItemsDiv = styled.div`
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 `;
 
-const Target = Items;
-
 export type AnnotationPropsOptional = {
   [K in keyof AnnotationProps]?: AnnotationProps[K]; // so that it retains the types
 };
@@ -214,26 +212,10 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
       }
     };
 
-    shouldAnnotationBeActive = (
-      annotation: IAnnotation,
-      top: IAnnotation | undefined
-    ) => {
-      if (this.props.activeAnnotations) {
-        const isActive = !!this.props.activeAnnotations.find((active) =>
-          this.props.activeAnnotationComparator(annotation, active)
-        );
-
-        return isActive || top === annotation;
-      } else {
-        return top === annotation;
-      }
-    };
-
     render() {
       const { props } = this;
       const {
         renderHighlight,
-        renderContent,
         renderSelector,
         renderEditor,
         renderOverlay,
@@ -244,11 +226,6 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
         src,
       } = props;
 
-      const topAnnotationAtMouse = this.getTopAnnotationAt(
-        this.props.relativeMousePos.x,
-        this.props.relativeMousePos.y
-      );
-
       return (
         <Container
           style={props.style}
@@ -264,25 +241,23 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
             draggable={false}
             setInnerRef={this.setInnerRef}
           />
-          <Items>
+          <ItemsDiv>
             {props.annotations.map((annotation) =>
               renderHighlight({
                 key: annotation.data.id,
                 annotation,
-                active: this.shouldAnnotationBeActive(
-                  annotation,
-                  topAnnotationAtMouse
-                ),
+                renderContent: props.renderContent,
               })
             )}
             {!props.disableSelector &&
               props.value &&
               props.value.geometry &&
               renderSelector({
                 annotation: props.value,
+                renderContent: props.renderContent,
               })}
-          </Items>
-          <Target
+          </ItemsDiv>
+          <ItemsDiv
             onClick={this.onClick}
             onMouseUp={this.onMouseUp}
             onMouseDown={this.onMouseDown}
@@ -294,14 +269,6 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
               type: props.type,
               annotation: props.value!,
             })}
-          {props.annotations.map(
-            (annotation) =>
-              this.shouldAnnotationBeActive(annotation, topAnnotationAtMouse) &&
-              renderContent({
-                key: annotation.data.id,
-                annotation: annotation,
-              })
-          )}
           {!props.disableEditor &&
             props.value &&
             props.value.selection &&

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
@@ -10,6 +10,7 @@ const Container = styled.div`
   padding: 8px 16px;
   margin-top: 8px;
   margin-left: 8px;
+  z-index: 2;
 `;
 
 export interface ContentProps {

diff --git a/src/components/FancyRectangle/index.tsx b/src/components/FancyRectangle/index.tsx
@@ -59,9 +59,4 @@ function FancyRectangle(props: FancyRectangleProps) {
   );
 }
 
-FancyRectangle.defaultProps = {
-  className: '',
-  style: {},
-};
-
 export default FancyRectangle;
diff --git a/src/components/Oval/index.tsx b/src/components/Oval/index.tsx
diff --git a/src/components/Shapes/Oval.tsx b/src/components/Shapes/Oval.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { withShapeWrapper } from './withShapeWrapper';
+import styled from 'styled-components';
+import { ShapeProps } from '../../types/index';
+
+const Container = styled.div`
+  border-radius: 100%;
+  box-shadow: 0 0 1px 1px white inset;
+  box-sizing: border-box;
+  transition: box-shadow 0.21s ease-in-out;
+  z-index: 1;
+  cursor: pointer;
+`;
+
+function Oval(props: ShapeProps) {
+  const {
+    annotation: { geometry },
+    isMouseOver,
+    onMouseEnter,
+    onMouseLeave,
+  } = props;
+  if (!geometry) return null;
+
+  return (
+    <Container
+      style={{
+        position: 'absolute',
+        left: `${geometry.x}%`,
+        top: `${geometry.y}%`,
+        height: `${geometry.height}%`,
+        width: `${geometry.width}%`,
+        border: isMouseOver ? 'solid 1px black' : 'dashed 2px black',
+        boxShadow: isMouseOver ? '0 0 1px 1px black inset' : '',
+        backgroundColor: isMouseOver
+          ? 'rgba(128, 128, 128, 0.3)'
+          : 'rgba(128, 128, 128, 0.05)',
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    />
+  );
+}
+
+export default withShapeWrapper(Oval);