Merge branch 'feature-cordova'

.gitignore

@@ -5,3 +5,11 @@ lib
 module
 
 node_modules
+
+www
+
+plugins
+
+platforms
+
+config.xml

.npmignore

@@ -1 +1,9 @@
 node_modules
+
+www
+
+plugins
+
+platforms
+
+config.xml

index.js

@@ -10,6 +10,7 @@ import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import promiseMiddleware from 'redux-promise-middleware';
 import { createLogger } from 'redux-logger';
+import sketcherReducer from './src/reducer/index.js';
 const reducer = combineReducers({ sketcher: sketcherReducer });
 const enhancer = compose(applyMiddleware(thunkMiddleware, promiseMiddleware(), createLogger({ collapsed: true })));
 const store = createStore(reducer, enhancer);
@@ -26,32 +27,28 @@ import actionWrapper from 'redux-action-wrapper';
 import * as actions from './src/actions/index.js';
 window.actions = actionWrapper(actions, store.dispatch);
 
-// add inital shapes
-import * as CAL from 'cal';
-// store.dispatch(actions.addObject({
-//   type: 'FREE_HAND',
-//   fill: false,
-//   solid: false,
-//   points: [new CAL.Vector(-20, 0), new CAL.Vector(10, 1)],
-//   transform: new CAL.Matrix({ x: 0, y: 0 })
-// }));
-store.dispatch(actions.addObject({
-  type: 'RECT',
-  fill: true,
-  rectSize: new CAL.Vector(20, 20),
-  height: 40,
-  transform: new CAL.Matrix({ x: -10, y: -10 })
-}));
+import modelData from './models/noodlebot.d3sketch';
+import JSONToSketchData from './src/shape/JSONToSketchData.js';
+(async () => {
+  const data = await JSONToSketchData(JSON.parse(modelData));
+  store.dispatch(actions.openSketch({ data }));
+})();
 
 // render dom
 import React from 'react';
 import { Provider } from 'react-redux';
 import { render } from 'react-dom';
 import App from './src/components/App.js';
-import sketcherReducer from './src/reducer/index.js';
 
-render((
+async function init() {
+  if (process.env.TARGET === 'app') {
+    await new Promise(resolve => document.addEventListener('deviceready', resolve, false));
+  }
+
+  render((
     <Provider store={store}>
       <App />
     </Provider>
-), document.getElementById('app'));
+  ), document.getElementById('app'));
+}
+init();

package.json

@@ -7,6 +7,7 @@
   "esnext": "src",
   "scripts": {
     "start": "webpack-dev-server -w",
+    "ios": "TARGET=app webpack -p && cordova run ios",
     "prepare": "npm run build",
     "build": "npm run build:main && npm run build:module ",
     "build:main": "BABEL_ENV=main babel src -s -d lib",
@@ -47,7 +48,6 @@
     "valid-url": "^1.0.9"
   },
   "devDependencies": {
-    "webpack-bundle-analyzer": "^2.9.1",
     "babel-cli": "6.24.1",
     "babel-core": "6.24.1",
     "babel-loader": "^7.0.0",
@@ -64,6 +64,7 @@
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "cordova": "^7.1.0",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.5",
     "html-webpack-plugin": "^2.30.1",
@@ -80,6 +81,8 @@
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.19.0",
     "webpack": "^3.8.1",
+    "webpack-bundle-analyzer": "^2.9.1",
+    "webpack-cordova-plugin": "^0.1.6",
     "webpack-dev-server": "^2.9.4",
     "worker-loader": "^1.1.0",
     "yml-loader": "^2.1.0"

src/components/D3Panel.js

@@ -96,10 +96,10 @@ class D3Panel extends React.Component {
     const geometryPlane = new THREE.PlaneGeometry(CANVAS_WIDTH, CANVAS_HEIGHT);
     geometryPlane.merge(new THREE.PlaneGeometry(CANVAS_WIDTH, CANVAS_HEIGHT), undefined, 1);
 
-    const materialPlane = new THREE.MultiMaterial([
+    const materialPlane = [
       new THREE.MeshBasicMaterial({ color: 0xcccccc, side: THREE.BackSide, transparent: true, opacity: 0.3 }),
       new THREE.MeshBasicMaterial({ color: 0xcccccc, side: THREE.FrontSide, transparent: true, opacity: 0.1 })
-    ]);
+    ];
     this.plane = new THREE.Mesh(geometryPlane, materialPlane);
     this.plane.rotation.x = Math.PI / 2;
     this.plane.position.y = -0.01;

webpack.config.js

@@ -1,8 +1,11 @@
+const webpack = require('webpack');
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const HTMLWebpackPlugin = require('html-webpack-plugin');
+const CordovaPlugin = require('webpack-cordova-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
+const appMode = process.env.TARGET === 'app';
 
 const babelLoader = {
   loader: 'babel-loader',
@@ -63,7 +66,7 @@ module.exports = {
           }
         }
       }, {
-        test: /\.(svg|glsl)$/,
+        test: /\.(svg|glsl|d3sketch)$/,
         use: {
           loader: 'raw-loader'
         }
@@ -74,13 +77,26 @@ module.exports = {
     ]
   },
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'TARGET': JSON.stringify(process.env.TARGET)
+      }
+    }),
     new HTMLWebpackPlugin({
       title: 'Doodle3D Core - Simple example',
       template: require('html-webpack-template'),
       inject: false,
+      scripts: appMode ? ['cordova.js'] : null,
       appMountId: 'app'
     }),
-    // new BundleAnalyzerPlugin()
+    ...(appMode ? [
+      new CordovaPlugin({
+        config: 'config.xml',
+        src: 'index.html',
+        platform: 'ios',
+        version: true
+      })
+    ] : [])
   ],
   devtool: "source-map",
   devServer: {