Merge pull request #6 from lifeomic/build

Build source tree before publishing

.gitignore

@@ -6,3 +6,4 @@ coverage
 
 storybook-static
 __diff_output__
+lib

.travis.yml

@@ -3,8 +3,9 @@ node_js:
 - '8'
 - '9'
 - '10'
-addons:
-  apt:
+branches:
+  only:
+  - master
 addons:
   apt:
     sources:
@@ -23,9 +24,10 @@ notifications:
     on_failure: always
 deploy:
 - provider: npm
+  skip-cleanup: true
   email: barlockm@gmail.com
   api_key:
-    secure: HVqK8gOLFe7ekcLafff5oFuWUbraeR+EtCJiaZ7hfoZwtLYB/VpmLj+726GjCxH8kIwtidMyufHW5wk385wmrYSWeT/20TkSI1LIMkKKXU/ugFA/Bss1VobP7VUKZizSRaxp4dS1/zuMacrI5PvXMCVCy+oX0gz9WMncTkE/v/iUNMtdv+Uj9DZXxrfwSrVEoF/1tucXNGkJEUKh3kQwIVTxun7T9aN4pyLeHd8v+HilJm+CEwXB5/3Lkw4jwhdAmX5CqLp/koTS4png8ybqrlfg5hEypzRZQCC3gTSRw32g0yIG9QrfOM9OD0vvYtApdpmnoeOsAWP/WaISwKf7SbNaa2OEXBoFBQs2OoseBpIh19VK2G5+5HJHzuKe0/zGrO75XQ8PS0RxHIJvCUIpkDK3UBcrkVddAV7QSjpUXYSMmXaz6A/W6ONfn9WAUTcd1QWfggi1eRgzJy6gqwleOTgFZIOb7Rpu0iocl+FQhZjM5/LiBrEI9EFRnVVfwwM63xav8Cn4ZVsQRkhk6paRUwo5l3ZxzwJZ5wnfVWCgACtxcTBpkg9pbWNXmMeHqxzKI7hVKkRbHRumXEUaitYc8Z4DgJQwC9RT8SiKc2lBVSO9zwdZ2q4i9ab2l78TUHyIzw4/O8x00LKZ60KjAwrwkMU8oY5hl8NlftwXjLb1hKE=
+      secure: dUMtMBv/n1qXoykp6iOl79pHdCPA8OSgAHP3aWuHbrKYXvylgHGvX52QSM+Mt0gZCcHQRhb0Yw2YFZnr4R9EX9CWUq+Bjd3fg93X3ga63fpswbDHDyNNW8i9UlMSg09M6T63c00PsvOBiGKgzLgl8iLMy++WEWlsWwPWLmsRvmJx/u3TyJTV97xsPnYrV+Uv0SbuueRjlSi8JmiU5LOXXQ38tp181lx5rFKcqWxrPR+tQaxx+yzJnp2GEcptv6EjT54SXzhBIXOx4eh4ICjzYG+W9NuieClgZCq3sJ0gkJI9+d1WtKMLre5k407B6+UXdNC1nFmu05iMn6NtB98Y29KCvwMuxS/uh7+Z90ghPr+z/a9BDN1J5AyoItqiqFOeDKuW/BBz5Lh3mV/VPYNKAGz7tKV9D0D8HHsfU1BjkVos8Y6yGXg2o3fuW4VYrQsDiCrbpQDTmFmEsW/bMAXO9dRnA62QQcwxf5DlcarBsc6stbKbYAS2+bwdLW2WZjybHqUmmecFQnMgt4QMYx9lYsX/m7IJhyFVZJReqQIZLS62geA7Lx3pHmzAmtkpqCxO4bbSUiLXkism6i8qvX7MoL5/TetVfWTixa83OBrmQIVN9uRVuAxUWR/CADeBBFKkrNyRd2SMOkXSqWbkANglPlea2bubslveWvMDwIX+mxg=
   on:
     tags: true
     repo: lifeomic/react-vis-network
@@ -38,4 +40,3 @@ deploy:
   local-dir: storybook-static
   on:
     branch: master
-

README.md

@@ -104,7 +104,7 @@ const MyNetwork = () => (
 
 **NB:** This is simply syntactic sugar over [using HTML in Nodes](https://github.com/almende/vis/blob/master/examples/network/nodeStyles/HTMLInNodes.html) and will end up being a data+image. You will not recieve dom events through this component, use `Network`'s event system or `decorator`s instead.
 
-`decorator`: A react element positioned in the center of rendered `Node`. A decorator is similar to `component` in that it's a [render prop](https://reactjs.org/docs/render-props.html) that recieves the props of a the node, and returns a react element. This element however doesn't need to be an svg.
+`decorator`: A react element positioned at the top center of rendered `Node`. A decorator is similar to `component` in that it's a [render prop](https://reactjs.org/docs/render-props.html) that recieves the props of a the node, and returns a react element. This element however doesn't need to be an svg.
 
 ```js
 const Decorator = props => {

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-vis-network",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Declarative vis.js network for react",
-  "main": "index.js",
+  "main": "lib/index.js",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook",
-    "build": "yarn build:storybook",
+    "build": "yarn build:src && yarn build:storybook",
+    "build:src": "rm -rf lib && babel src -d lib --ignore '**/*.test.js'",
     "build:storybook": "build-storybook",
     "lint": "eslint .",
     "prettier": "prettier --write '**/*.{js,json,css,md}'",
@@ -23,10 +24,13 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "dependencies": {
     "vis": "^4.0.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.52",
     "@babel/core": "^7.0.0-beta.52",
     "@babel/preset-env": "^7.0.0-beta.52",
     "@babel/preset-react": "^7.0.0-beta.52",
@@ -56,8 +60,7 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-feather": "^1.1.1",
-    "react-test-renderer": "^16.4.1",
-    "vis": "^4.21.0"
+    "react-test-renderer": "^16.4.1"
   },
   "husky": {
     "hooks": {

src/Module.js

@@ -48,13 +48,18 @@ export default class VisModule extends PureComponent {
         const { [id]: canvasPosition } = network.getPositions([id]);
 
         if (canvasPosition) {
-          const domPosition = network.canvasToDOM(canvasPosition);
+          const boundingBox = network.getBoundingBox(id);
+          const topCenterPosition = { x: canvasPosition.x, y: boundingBox.top };
+
+          const domPosition = network.canvasToDOM(topCenterPosition);
+
+          // Remove `display: none` before getting the element size
+          decoratorEl.style.display = 'block';
           const { height, width } = decoratorEl.getBoundingClientRect();
 
           const x = domPosition.x - width / 2;
-          const y = domPosition.y - height / 2;
+          const y = domPosition.y - height;
 
-          decoratorEl.style.display = 'block';
           decoratorEl.style.transform = `translateX(${x}px) translateY(${y}px)`;
         }
       }

src/storyshot-image.test.js

@@ -9,7 +9,7 @@ initStoryshots({
     // storybookUrl: 'http://localhost:9001',
     storybookUrl: `file://${path.resolve(__dirname, '../storybook-static')}`,
     getMatchOptions: () => ({
-      failureThreshold: 0.1,
+      failureThreshold: 0.15,
       failureThresholdType: 'percent'
     })
   })