stl-viewer - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

dist/STLViewer.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _ScaleLoader = require('halogen/ScaleLoader');
+
+var _ScaleLoader2 = _interopRequireDefault(_ScaleLoader);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,5 +49,2 @@
       var url = _props.url;
-      var xDims = _props.xDims;
-      var yDims = _props.yDims;
-      var zDims = _props.zDims;
       var width = _props.width;
@@ -54,6 +55,11 @@ var height = _props.height;
 
+      var xDims = undefined,
+          yDims = undefined,
+          zDims = undefined;
       var component = this;
 
+      var hexBackgroundColor = parseInt(backgroundColor.replace(/^#/, ''), 16);
+      var hexModelColor = parseInt(modelColor.replace(/^#/, ''), 16);
+
       init();
-      animate();
 
@@ -85,2 +91,7 @@ /**
           }));
+          // Set the object's dimensions
+          geometry.computeBoundingBox();
+          xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
+          yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
+          zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
 
@@ -90,16 +101,19 @@ mesh.rotation.x = 5;
           scene.add(mesh);
-        });
 
-        // Add the camera
-        camera = new _Three2.default.PerspectiveCamera(30, width / height, 1, distance);
-        camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
+          // Add the camera
+          camera = new _Three2.default.PerspectiveCamera(30, width / height, 1, distance);
+          camera.position.set(0, 0, Math.max(xDims * 3, yDims * 3, zDims * 3));
 
-        scene.add(camera);
+          scene.add(camera);
 
-        renderer = new _Three2.default.WebGLRenderer(); //new THREE.CanvasRenderer();
-        renderer.setSize(width, height);
-        renderer.setClearColor(backgroundColor, 1);
+          renderer = new _Three2.default.WebGLRenderer(); //new THREE.CanvasRenderer();
+          renderer.setSize(width, height);
+          renderer.setClearColor(backgroundColor, 1);
 
-        // Add to the React Component
-        _reactDom2.default.findDOMNode(component).appendChild(renderer.domElement);
+          // Add to the React Component
+          _reactDom2.default.findDOMNode(component).replaceChild(renderer.domElement, _reactDom2.default.findDOMNode(component).firstChild);
+
+          // Start the animation
+          animate();
+        });
       }
@@ -132,3 +146,19 @@
     value: function render() {
-      return _react2.default.createElement('div', { className: this.props.className });
+      var _props2 = this.props;
+      var width = _props2.width;
+      var height = _props2.height;
+      var modelColor = _props2.modelColor;
+
+      return _react2.default.createElement(
+        'div',
+        {
+          className: this.props.className,
+          style: { width: width, height: height }
+        },
+        _react2.default.createElement(
+          'div',
+          { style: { textAlign: 'center', marginTop: height / 2 - 8 } },
+          _react2.default.createElement(_ScaleLoader2.default, { color: modelColor, size: '16px' })
+        )
+      );
     }
@@ -143,12 +173,15 @@ }]);
   url: _react.PropTypes.string,
-  xDims: _react.PropTypes.number,
-  yDims: _react.PropTypes.number,
-  zDims: _react.PropTypes.number,
   width: _react.PropTypes.number,
   height: _react.PropTypes.number,
-  backgroundColor: _react.PropTypes.number,
-  modelColor: _react.PropTypes.number
+  backgroundColor: _react.PropTypes.string,
+  modelColor: _react.PropTypes.string
 };
+STLViewer.defaultProps = {
+  backgroundColor: '#EAEAEA',
+  modelColor: '#B92C2C',
+  height: 400,
+  width: 400
+};
 ;
 
 module.exports = STLViewer;

package.json

 {
   "name": "stl-viewer",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "A component for viewing an STL object from a given URL.",
@@ -22,7 +22,12 @@ "main": "dist/STLViewer.js",
   "dependencies": {
-    "three": "^0.72.0",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "halogen": "^0.1.10",
+    "three": "^0.72.0"
   },
+  "peerDependencies": {
+    "react": ">=0.14.0",
+    "react-dom": ">=0.14.0"
+  },
   "devDependencies": {
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "babel-cli": "^6.3.17",
@@ -46,5 +51,3 @@ "babel-core": "^6.3.17",
     "query-string": "^3.0.0",
-    "react": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
-    "react-dom": "^0.14.0",
     "react-transform-catch-errors": "^1.0.0",
@@ -51,0 +54,0 @@ "react-transform-hmr": "^1.0.1",

react/containers/App.js

@@ -14,5 +14,2 @@ import React, {Component} from 'react';
       url: query.url || 'http://localhost:4001/static/bottle.stl',
-      xDims:  parseInt(query.xDims, 10) || 53,
-      yDims:  parseInt(query.yDims, 10) || 85,
-      zDims:  parseInt(query.zDims, 10) || 27,
     };
@@ -22,18 +19,9 @@ }
   render(){
-    const { url, xDims, yDims, zDims } = this.state;
-    console.dir(this.state);
+    const { url  } = this.state;
+
     return (
       <div>
-        <STLViewer
-          url={url}
-          xDims={xDims}
-          yDims={yDims}
-          zDims={zDims}
-          width={400}
-          height={400}
-          modelColor={0x005B83}
-          backgroundColor={0xEAEAEA}
-        />
+        <STLViewer url={url} />
         <div><a href="http://localhost:4001">Example A</a></div>
-        <div><a href="http://localhost:4001/?url=http://localhost:4001/static/crazy-thing.stl&width=400&height=400&xDims=146&yDims=106&zDims=78">Example B</a></div>
+        <div><a href="http://localhost:4001/?url=http://localhost:4001/static/crazy-thing.stl">Example B</a></div>
       </div>
@@ -40,0 +28,0 @@ );

README.md

 # STL Viewer
 
-A component for viewing an STL object from a given URL. Currently you will need to enter the x,y and z dimensions of the object as well. In the future, this will not be needed
+A component for viewing an STL object from a given URL.
 
+*Note that you will still have to abide by the rules of CORS*
+
 # Installation
@@ -12,2 +14,6 @@
 	
-	<STLViewer url='http://www.example.com/example-url.stl' xDims={10} yDims={10} zDims={10} width={150} height={150} modelColor={0x005B83} backgroundColor={0xEAEAEA} />
+	<STLViewer url='http://www.example.com/example-url.stl'
+    width={150} height={150}
+    modelColor='#005B83'
+    backgroundColor='#EAEAEA'
+  />

src/STLViewer.js

 import React, { PropTypes, Component } from 'react';
 import ReactDOM  from 'react-dom';
 import THREE from './Three';
+import Loader from 'halogen/ScaleLoader';
 
@@ -9,18 +10,25 @@ class STLViewer extends Component {
     url: PropTypes.string,
-    xDims: PropTypes.number,
-    yDims: PropTypes.number,
-    zDims: PropTypes.number,
     width: PropTypes.number,
     height: PropTypes.number,
-    backgroundColor: PropTypes.number,
-    modelColor: PropTypes.number,
+    backgroundColor: PropTypes.string,
+    modelColor: PropTypes.string,
   };
 
+  static defaultProps = {
+    backgroundColor: '#EAEAEA',
+    modelColor: '#B92C2C',
+    height: 400,
+    width: 400,
+  };
+
   componentDidMount() {
     let camera, scene, renderer, mesh, distance;
-    let { url, xDims, yDims, zDims, width, height, modelColor, backgroundColor } = this.props;
+    let { url, width, height, modelColor, backgroundColor } = this.props;
+    let xDims, yDims, zDims;
     let component = this;
 
+    let hexBackgroundColor = parseInt(backgroundColor.replace(/^#/, ''), 16);
+    let hexModelColor = parseInt(modelColor.replace(/^#/, ''), 16);
+
     init();
-    animate();
 
@@ -55,2 +63,7 @@ /**
         ));
+        // Set the object's dimensions
+        geometry.computeBoundingBox();
+        xDims = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
+        yDims = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
+        zDims = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
 
@@ -60,16 +73,20 @@ mesh.rotation.x = 5;
         scene.add( mesh );
-      });
 
-      // Add the camera
-      camera = new THREE.PerspectiveCamera( 30, width / height, 1, distance );
-      camera.position.set(0,0,Math.max(xDims*3,yDims*3,zDims*3));
+        // Add the camera
+        camera = new THREE.PerspectiveCamera( 30, width / height, 1, distance );
+        camera.position.set(0,0,Math.max(xDims*3,yDims*3,zDims*3));
 
-      scene.add( camera );
+        scene.add( camera );
 
-      renderer = new THREE.WebGLRenderer(); //new THREE.CanvasRenderer();
-      renderer.setSize( width, height );
-      renderer.setClearColor(backgroundColor, 1);
+        renderer = new THREE.WebGLRenderer(); //new THREE.CanvasRenderer();
+        renderer.setSize( width, height );
+        renderer.setClearColor(backgroundColor, 1);
 
-      // Add to the React Component
-      ReactDOM.findDOMNode(component).appendChild( renderer.domElement );
+        // Add to the React Component
+        ReactDOM.findDOMNode(component).replaceChild( renderer.domElement,
+          ReactDOM.findDOMNode(component).firstChild);
+
+        // Start the animation
+        animate();
+      });
     }
@@ -101,4 +118,12 @@
   render() {
+    const {width, height, modelColor} = this.props;
+
     return(
-      <div className={this.props.className}>
+      <div
+        className={this.props.className}
+        style={{ width: width, height: height }}
+      >
+        <div style={{textAlign: 'center', marginTop: height/2 - 8 }} >
+          <Loader color={modelColor} size="16px" />
+        </div>
       </div>
@@ -105,0 +130,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

1671903

increased by0.1%

Lines of code

941

increased by3.98%

Number of lines in readme file

19

increased by46.15%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedhalogen@^0.1.10

• + Addedhalogen@0.1.10(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedreact-kit@0.1.14(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedreact@^0.14.0

• - Removedreact-dom@^0.14.0

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedreact-dom@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)