Adding Pin rendering component

src/rendering/Pin/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as style from './style';
+
+const radius = 5;
+
+const Pin = () => <circle
+  style={ style.pin }
+  r={ radius }
+  transform={ `translate(${ radius } ${ radius })` }/>;
+
+const layout = data => {
+  data.box = {
+    width: radius * 2,
+    height: radius * 2
+  };
+  return data;
+};
+
+export default Pin;
+export { layout };

src/rendering/Pin/style.js

@@ -0,0 +1,9 @@
+import {
+  brown,
+  strokeBase
+} from 'rendering/style';
+
+export const pin = {
+  fill: brown,
+  ...strokeBase
+};

src/rendering/types.js

@@ -1,10 +1,12 @@
 import * as SVG from 'rendering/SVG';
+import * as Pin from 'rendering/Pin';
 import * as Text from 'rendering/Text';
 import * as Box from 'rendering/Box';
 import * as HorizontalLayout from 'rendering/HorizontalLayout';
 
 export default {
   SVG,
+  Pin,
   Text,
   Box,
   HorizontalLayout

src/syntax/js.js

@@ -11,6 +11,9 @@ const parse = expr => {
           withConnectors: true
         },
         children: [
+          {
+            type: 'Pin'
+          },
           {
             type: 'Box',
             props: {
@@ -38,6 +41,9 @@ const parse = expr => {
                 ]
               }
             ]
+          },
+          {
+            type: 'Pin'
           }
         ]
       }

src/syntax/pcre.js

@@ -11,6 +11,9 @@ const parse = expr => {
           withConnectors: true
         },
         children: [
+          {
+            type: 'Pin'
+          },
           {
             type: 'Box',
             props: {
@@ -38,6 +41,9 @@ const parse = expr => {
                 ]
               }
             ]
+          },
+          {
+            type: 'Pin'
           }
         ]
       }