From d3747d89adeee1385da6554ccfb4903ba49aad2d Mon Sep 17 00:00:00 2001
From: gabrielchase <gchase.patron@gmail.com>
Date: Thu, 6 Feb 2020 11:53:45 +0800
Subject: [PATCH 1/3] Rendered `props.annotation.style` in each component

---
 src/components/Oval/index.js      | 3 ++-
 src/components/Point/index.js     | 3 ++-
 src/components/Rectangle/index.js | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Oval/index.js b/src/components/Oval/index.js
index a134702..8d4e318 100644
--- a/src/components/Oval/index.js
+++ b/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}%`,
diff --git a/src/components/Point/index.js b/src/components/Point/index.js
index 86228e3..e2aba99 100644
--- a/src/components/Point/index.js
+++ b/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}%`
       }}
diff --git a/src/components/Rectangle/index.js b/src/components/Rectangle/index.js
index a2312b8..c1658f2 100644
--- a/src/components/Rectangle/index.js
+++ b/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
       }}
     />
   )

From 2fd2a91f7e55650a271d0d88d9dd64177627c080 Mon Sep 17 00:00:00 2001
From: gabrielchase <gchase.patron@gmail.com>
Date: Thu, 6 Feb 2020 11:54:13 +0800
Subject: [PATCH 2/3] Used `Rectangle` instead of `FancyRectangle` if
 `annotation.style` present

---
 src/components/defaultProps.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/defaultProps.js b/src/components/defaultProps.js
index 0cf81c9..02f3cf7 100644
--- a/src/components/defaultProps.js
+++ b/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

From 96cf7a9b5b1a0bd7d0e1a9e6d98b387496025c69 Mon Sep 17 00:00:00 2001
From: gabrielchase <gchase.patron@gmail.com>
Date: Thu, 6 Feb 2020 11:54:48 +0800
Subject: [PATCH 3/3] Updated demo to show example of border style change

---
 demo/src/components/Docs/index.js             |  2 +-
 demo/src/components/Samples/Multiple/index.js | 75 +++++++++++++------
 .../src/components/Samples/Multiple/index.txt | 75 +++++++++++++++----
 3 files changed, 116 insertions(+), 36 deletions(-)

diff --git a/demo/src/components/Docs/index.js b/demo/src/components/Docs/index.js
index 2923a31..d6ffe3f 100644
--- a/demo/src/components/Docs/index.js
+++ b/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}
diff --git a/demo/src/components/Samples/Multiple/index.js b/demo/src/components/Samples/Multiple/index.js
index 61f412f..5f90755 100644
--- a/demo/src/components/Samples/Multiple/index.js
+++ b/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'
diff --git a/demo/src/components/Samples/Multiple/index.txt b/demo/src/components/Samples/Multiple/index.txt
index 071776e..5f90755 100644
--- a/demo/src/components/Samples/Multiple/index.txt
+++ b/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'