Feature: Custom Styles Per Annotation

demo/src/components/Docs/index.js

@@ -29,7 +29,7 @@ export default class Docs extends Component {
   render () {
     return (
       <Container>
-        <h1>Multiple Type/Shape Support</h1>
+        <h1>Multiple Type/Shape/Style Support</h1>
         <Multi />
         <Highlight>
           {multiCode}

demo/src/components/Samples/Multiple/index.js

@@ -11,15 +11,21 @@ import Button from '../../Button'
 import mocks from '../../../mocks'
 import img from '../../../img.jpeg'
 
+const styles = {
+  redBorder: { border: '1px solid red' },
+  blueBorder: { border: '1px solid blue'}
+}
+
 export default class Multiple extends Component {
   state = {
     type: RectangleSelector.TYPE,
     annotations: mocks.annotations,
-    annotation: {}
+    annotation: {},
+    style: {}
   }
 
   onChange = (annotation) => {
-    this.setState({ annotation })
+    this.setState({ annotation: { ...annotation, style: this.state.style } })
   }
 
   onSubmit = (annotation) => {
@@ -32,7 +38,8 @@ export default class Multiple extends Component {
         data: {
           ...data,
           id: Math.random()
-        }
+        },
+        style: this.state.style
       })
     })
   }
@@ -47,25 +54,51 @@ export default class Multiple extends Component {
   render () {
     return (
       <div>
-        <Button
-          onClick={this.onChangeType}
-          active={RectangleSelector.TYPE === this.state.type}
-        >
-          {RectangleSelector.TYPE}
-        </Button>
-        <Button
-          onClick={this.onChangeType}
-          active={PointSelector.TYPE === this.state.type}
-        >
-          {PointSelector.TYPE}
-        </Button>
-        <Button
-          onClick={this.onChangeType}
-          active={OvalSelector.TYPE === this.state.type}
-        >
-          {OvalSelector.TYPE}
-        </Button>
+        <div>
+          <h3>Shape: </h3>
+          <Button
+            onClick={this.onChangeType}
+            active={RectangleSelector.TYPE === this.state.type}
+          >
+            {RectangleSelector.TYPE}
+          </Button>
+          <Button
+            onClick={this.onChangeType}
+            active={PointSelector.TYPE === this.state.type}
+          >
+            {PointSelector.TYPE}
+          </Button>
+          <Button
+            onClick={this.onChangeType}
+            active={OvalSelector.TYPE === this.state.type}
+          >
+            {OvalSelector.TYPE}
+          </Button>
+        </div>
+
+        <div style={{ flex: 1,  }}>
+          <h3>Border: </h3>
+          <Button 
+            onClick={() => this.setState({ style: {} })}
+            active={Object.keys(this.state.style).length === 0}
+          >
+            Dashed 
+          </Button>
+          <Button 
+            onClick={() => this.setState({ style: styles.redBorder})}
+            active={this.state.style === styles.redBorder}
+          >
+            Red 
+          </Button>
+          <Button 
+            onClick={() => this.setState({ style: styles.blueBorder })}
+            active={this.state.style === styles.blueBorder}
+          >
+            Blue
+          </Button>
+        </div>
 
+
         <Annotation
           src={img}
           alt='Two pebbles anthropomorphized holding hands'

demo/src/components/Samples/Multiple/index.txt

@@ -1,20 +1,31 @@
 import React, { Component } from 'react'
-import Annotation from 'react-image-annotation'
+import Annotation from '../../../../../src'
 import {
   PointSelector,
   RectangleSelector,
   OvalSelector
-} from 'react-image-annotation/lib/selectors'
+} from '../../../../../src/selectors'
+
+import Button from '../../Button'
+
+import mocks from '../../../mocks'
+import img from '../../../img.jpeg'
+
+const styles = {
+  redBorder: { border: '1px solid red' },
+  blueBorder: { border: '1px solid blue'}
+}
 
 export default class Multiple extends Component {
   state = {
     type: RectangleSelector.TYPE,
     annotations: mocks.annotations,
-    annotation: {}
+    annotation: {},
+    style: {}
   }
 
   onChange = (annotation) => {
-    this.setState({ annotation })
+    this.setState({ annotation: { ...annotation, style: this.state.style } })
   }
 
   onSubmit = (annotation) => {
@@ -27,7 +38,8 @@ export default class Multiple extends Component {
         data: {
           ...data,
           id: Math.random()
-        }
+        },
+        style: this.state.style
       })
     })
   }
@@ -42,16 +54,51 @@ export default class Multiple extends Component {
   render () {
     return (
       <div>
-        <Button onClick={this.onChangeType}>
-          {RectangleSelector.TYPE}
-        </Button>
-        <Button onClick={this.onChangeType}>
-          {PointSelector.TYPE}
-        </Button>
-        <Button onClick={this.onChangeType}>
-          {OvalSelector.TYPE}
-        </Button>
+        <div>
+          <h3>Shape: </h3>
+          <Button
+            onClick={this.onChangeType}
+            active={RectangleSelector.TYPE === this.state.type}
+          >
+            {RectangleSelector.TYPE}
+          </Button>
+          <Button
+            onClick={this.onChangeType}
+            active={PointSelector.TYPE === this.state.type}
+          >
+            {PointSelector.TYPE}
+          </Button>
+          <Button
+            onClick={this.onChangeType}
+            active={OvalSelector.TYPE === this.state.type}
+          >
+            {OvalSelector.TYPE}
+          </Button>
+        </div>
+
+        <div style={{ flex: 1,  }}>
+          <h3>Border: </h3>
+          <Button 
+            onClick={() => this.setState({ style: {} })}
+            active={Object.keys(this.state.style).length === 0}
+          >
+            Dashed 
+          </Button>
+          <Button 
+            onClick={() => this.setState({ style: styles.redBorder})}
+            active={this.state.style === styles.redBorder}
+          >
+            Red 
+          </Button>
+          <Button 
+            onClick={() => this.setState({ style: styles.blueBorder })}
+            active={this.state.style === styles.blueBorder}
+          >
+            Blue
+          </Button>
+        </div>
 
+
         <Annotation
           src={img}
           alt='Two pebbles anthropomorphized holding hands'

src/components/Oval/index.js

@@ -10,13 +10,14 @@ const Container = styled.div`
 `
 
 function Oval (props) {
-  const { geometry } = props.annotation
+  const { geometry, style } = props.annotation
   if (!geometry) return null
 
   return (
     <Container
       className={props.className}
       style={{
+        ...style,
         position: 'absolute',
         left: `${geometry.x}%`,
         top: `${geometry.y}%`,

src/components/Point/index.js

@@ -16,12 +16,13 @@ const Container = styled.div`
 ` 
 
 function Point (props) {
-  const { geometry } = props.annotation
+  const { geometry, style } = props.annotation
   if (!geometry) return null
 
   return (
     <Container
       style={{
+        ...style,
         top: `${geometry.y}%`,
         left: `${geometry.x}%`
       }}

src/components/Rectangle/index.js

@@ -9,20 +9,20 @@ const Container = styled.div`
 `
 
 function Rectangle (props) {
-  const { geometry } = props.annotation
+  const { geometry, style } = props.annotation
   if (!geometry) return null
 
   return (
     <Container
       className={props.className}
       style={{
+        ...style,
         position: 'absolute',
         left: `${geometry.x}%`,
         top: `${geometry.y}%`,
         height: `${geometry.height}%`,
         width: `${geometry.width}%`,
         boxShadow: props.active && '0 0 1px 1px yellow inset',
-        ...props.style
       }}
     />
   )

src/components/defaultProps.js

@@ -32,11 +32,15 @@ export default {
   renderSelector: ({ annotation }) => {
     switch (annotation.geometry.type) {
       case RectangleSelector.TYPE:
-        return (
-          <FancyRectangle
-            annotation={annotation}
-          />
-        )
+        if (annotation.style) {
+          return <Rectangle annotation={annotation} />
+        } else {
+          return (
+            <FancyRectangle
+              annotation={annotation}
+            />
+          )
+        }
       case PointSelector.TYPE:
         return (
           <Point