update version number

it was in the app-example

LICENSE.md

@@ -0,0 +1,22 @@
+ Copyright (c) 2015-2021 Doodle3D
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,14 @@
+This repository contains the core functionality of Doodle3D Transform.
+
+## Build & run locally
+```bash
+git clone git@github.com:Doodle3D/Doodle3D-Core.git
+cd Doodle3D-Core
+npm install    # Make sure you have installed NPM / NodeJS first
+npm run start
+# visit http://localhost:8080
+```
+
+## Doodle3D-Transform
+The Doodle3D-Core repo just contains the core drawing features of Doodle3D Transform. To get the other features like file management, exporting and slicing you should visit the Doodle3D Transform repository: https://github.com/Doodle3D/Doodle3D-Transform
+

index.js

@@ -27,12 +27,11 @@ import { createFile } from './src/utils/exportUtils.js';
 import sketchDataToJSON from './src/shape/sketchDataToJSON.js';
 import { JSONToBlob } from './src/utils/binaryUtils.js';
 
-import keycode from 'keycode';
-
-window.downloadStl = () => {
+// usage: downloadStl({lineWidth:20})
+window.downloadStl = (options) => {
   store.dispatch(async (dispatch, getState) => {
     const state = getState();
-    const blob = await createFile(state.sketcher.present, 'stl-blob');
+    const blob = await createFile(state.sketcher.present, 'stl-blob', options);
     saveAsLib(blob, 'doodle.stl');
   });
 };
@@ -42,32 +41,34 @@ window.downloadSketch = () => {
     const state = getState();
     const json = sketchDataToJSON(state.sketcher.present);
     const blob = JSONToBlob(json);
-    saveAsLib(blob, 'doodle.d3sketch');
+    saveAsLib(blob, 'doodle.doodle3d');
   });
 };
 
-window.addEventListener('keydown', (event) => {
-  // downloadSketch
-  const key = keycode(event);
-  if (key === 's') window.downloadSketch();
-});
+// import keycode from 'keycode';
+// window.addEventListener('keydown', (event) => {
+//   // downloadSketch
+//   const key = keycode(event);
+//   if (key === 's') window.downloadSketch();
+// });
 
 
 // add model to store
 import modelData from './models/circle_error.d3sketch';
 import JSONToSketchData from './src/shape/JSONToSketchData.js';
-JSONToSketchData(JSON.parse(modelData)).then(sketch => {
-  store.dispatch(actions.openSketch(sketch));
+JSONToSketchData(JSON.parse(modelData)).then(data => {
+  store.dispatch(actions.openSketch({ data }));
 });
 
 // default css
 import jss from 'jss';
 import preset from 'jss-preset-default';
 import normalize from 'normalize-jss';
+
 jss.setup(preset());
 jss.createStyleSheet(normalize).attach();
 jss.createStyleSheet({
-  '@global': {
+    '@global': {
     '*': { margin: 0, padding: 0 },
     '#app, body, html': { height: '100%', fontFamily: 'sans-serif' },
     body: { overflow: 'auto' },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doodle3d/doodle3d-core",
-  "version": "0.17.5",
+  "version": "0.23.0",
   "description": "Core functions of Doodle3D Transform",
   "main": "lib",
   "module": "module",
@@ -11,50 +11,49 @@
     "prepare": "npm run build",
     "lint": "eslint src",
     "dist": "NODE_ENV=production webpack -p",
-    "upload": "npm run dist && scp -r dist/* doodle3d.com:/domains/doodle3d.com/core",
     "build": "npm run build:main && npm run build:module ",
     "build:main": "BABEL_ENV=main babel src -s -d lib",
     "build:module": "BABEL_ENV=module babel src -s -d module"
   },
   "dependencies": {
     "@doodle3d/cal": "0.0.8",
-    "@doodle3d/clipper-js": "^1.0.7",
-    "@doodle3d/fill-path": "^1.0.7",
+    "@doodle3d/clipper-js": "^1.0.11",
     "@doodle3d/potrace-js": "0.0.6",
     "@doodle3d/threejs-export-obj": "0.0.8",
     "@doodle3d/threejs-export-stl": "0.0.5",
-    "@doodle3d/touch-events": "0.0.7",
+    "@doodle3d/touch-events": "0.0.9",
     "babel-polyfill": "^6.26.0",
     "bezier-js": "^2.2.3",
     "blueimp-canvas-to-blob": "^3.14.0",
     "bowser": "^1.8.1",
+    "file-loader": "^0.11.2",
+    "fill-path": "^1.0.11",
     "fit-curve": "^0.1.6",
-    "google-fonts-webpack-plugin": "^0.4.4",
+    "font-loaded": "^1.0.0",
     "imports-loader": "^0.7.1",
     "jss": "^9.4.0",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "memoizee": "^0.3.9",
     "normalize-wheel": "^1.0.1",
-    "pouchdb": "^6.3.4",
     "proptypes": "^1.1.0",
     "raf": "^3.4.0",
     "ramda": "^0.21.0",
-    "react": "^16.0.0",
+    "react": "^16.0.1",
     "react-addons-update": "^15.6.2",
     "react-jss": "^7.0.2",
     "react-notification-system-redux": "^1.2.0",
     "react-redux": "^5.0.6",
     "react-resize-detector": "^1.1.0",
     "react-svg-inline": "^2.0.1",
+    "react-tap-event-plugin": "^3.0.3",
     "redux-form": "^7.1.2",
     "redux-undo": "^1.0.0-beta9-9-7",
     "reselect": "^3.0.1",
     "semver": "^5.4.1",
     "shortid": "^2.2.8",
     "three": "^0.88.0",
-    "three-js-csg": "github:Doodle3D/three-js-csg",
-    "valid-url": "^1.0.9"
+    "three-js-csg": "github:Doodle3D/three-js-csg"
   },
   "devDependencies": {
     "babel-cli": "6.24.1",
@@ -86,7 +85,6 @@
     "normalize-jss": "^4.0.0",
     "raw-loader": "^0.5.1",
     "react-dom": "^16.1.1",
-    "react-tap-event-plugin": "^3.0.2",
     "redux": "^3.7.2",
     "redux-action-wrapper": "^1.0.1",
     "redux-logger": "^3.0.6",
@@ -98,16 +96,15 @@
     "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"
+    "worker-loader": "^1.1.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Doodle3D/Doodle3D-Core.git"
   },
   "author": "Casper @Doodle3D",
-  "license": "UNLICENSED",
-  "private": true,
+  "license": "MIT",
+  "private": false,
   "bugs": {
     "url": "https://github.com/Doodle3D/Doodle3D-Core/issues"
   },

src/actions/index.js

@@ -8,7 +8,7 @@ import { createThrottle } from '../utils/async.js';
 import { tween } from '../utils/tweenUtils.js';
 import { DEFAULT_TRACE_TOLERANCE, MAX_TRACE_TOLERANCE } from '../constants/d2Constants.js';
 import * as d2Tools from '../constants/d2Tools.js';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:actions');
 
@@ -84,6 +84,8 @@ export const TRACE_FLOOD_FILL = 'TRACE_FLOOD_FILL';
 export const MENU_OPEN = 'MENU_OPEN';
 export const MENU_CLOSE = 'MENU_CLOSE';
 export const OPEN_SKETCH = 'OPEN_SKETCH';
+export const SET_PREVENT_SCROLL = 'SET_PREVENT_SCROLL';
+export const SET_DISABLE_SCROLL = 'SET_DISABLE_SCROLL';
 
 // CATEGORIES
 // actions that influence selected objects
@@ -416,25 +418,25 @@ export function traceDrag(position, start, id, screenMatrixContainer, screenMatr
     });
   };
 }
-export function traceTap(position, objects, screenMatrixContainer, screenMatrixZoom) {
-  return async (dispatch, getState) => {
-    dispatch({ type: TRACE_TAP });
-
-    const state = getState();
-    const id = objects.find(_id => state.sketcher.present.objectsById[_id].type === 'IMAGE_GUIDE');
-
-    if (id) {
-      const shapeData = state.sketcher.present.objectsById[id];
-      const traceStart = calculatePointInImage(position, shapeData, screenMatrixZoom);
-
-      const { value: traceData } = await dispatch(floodFill(DEFAULT_TRACE_TOLERANCE, shapeData, traceStart));
-
-      return dispatch(traceFloodFill(traceData, shapeData));
-    } else {
-      return dispatch(importImage());
-    }
-  };
-}
+// export function traceTap(position, objects, screenMatrixContainer, screenMatrixZoom) {
+//   return async (dispatch, getState) => {
+//     dispatch({ type: TRACE_TAP });
+//
+//     const state = getState();
+//     const id = objects.find(_id => state.sketcher.present.objectsById[_id].type === 'IMAGE_GUIDE');
+//
+//     if (id) {
+//       const shapeData = state.sketcher.present.objectsById[id];
+//       const traceStart = calculatePointInImage(position, shapeData, screenMatrixZoom);
+//
+//       const { value: traceData } = await dispatch(floodFill(DEFAULT_TRACE_TOLERANCE, shapeData, traceStart));
+//
+//       return dispatch(traceFloodFill(traceData, shapeData));
+//     } else {
+//       return dispatch(importImage());
+//     }
+//   };
+// }
 
 export function importImage() {
   return dispatch => {
@@ -496,3 +498,11 @@ export function menuClose(menuValue) {
 export function openSketch(data) {
   return { type: OPEN_SKETCH, data };
 }
+
+export function setPreventScroll(preventScroll) {
+  return { type: SET_PREVENT_SCROLL, preventScroll };
+}
+
+export function setDisableScroll(disableScroll) {
+  return { type: SET_DISABLE_SCROLL, disableScroll };
+}

src/components/App.js

@@ -16,6 +16,10 @@ import JSONToSketchData from '../shape/JSONToSketchData.js';
 import keycode from 'keycode';
 import bowser from 'bowser';
 import * as d2Tools from '../constants/d2Tools.js';
+import { isLoaded, load } from '../utils/loaded.js';
+import { setConfig } from '@doodle3d/touch-events';
+
+setConfig({ DRAG_THRESHOLD: 0 });
 
 const styles = {
   container: {
@@ -71,23 +75,45 @@ class App extends React.Component {
     selectAll: PropTypes.func.isRequired,
     d2ChangeTool: PropTypes.func.isRequired,
     moveSelection: PropTypes.func.isRequired,
-    selectedPen: PropTypes.string.isRequired
+    selectedPen: PropTypes.string.isRequired,
+    preventScroll: PropTypes.bool.isRequired
+  };
+
+  constructor(props) {
+   super(props);
+
+   this.container = React.createRef();
+ }
+
+  state = {
+    loaded: isLoaded()
   };
 
   componentDidMount() {
-    const { container } = this.refs;
+    if (!this.state.loaded) load.then(() => this.setState({ loaded: true }));
 
-    container.addEventListener('dragover', event => event.preventDefault());
-    container.addEventListener('drop', this.onDrop);
-    window.addEventListener('keydown', this.onKeyDown);
+    if (this.container.current) {
+      this.container.current.addEventListener('dragover', this.dragOver);
+      this.container.current.addEventListener('drop', this.onDrop);
+      this.container.current.addEventListener('wheel', this.onWheel);
+      window.addEventListener('keydown', this.onKeyDown);
+    }
   }
 
   componentWillUnmount() {
-    const { container } = this.refs;
-    container.removeEventListener('drop', this.onDrop);
-    window.removeEventListener('keydown', this.onKeyDown);
+    if (this.container.current) {
+
+      this.container.current.addEventListener('dragover', this.dragOver);
+      this.container.current.removeEventListener('drop', this.onDrop);
+      this.container.current.addEventListener('wheel', this.onWheel);
+      window.removeEventListener('keydown', this.onKeyDown);
+    }
   }
 
+  dragOver = event => {
+    event.preventDefault();
+  };
+
   onDrop = async event => {
     const { openSketch, addImage } = this.props;
     event.preventDefault();
@@ -96,12 +122,13 @@ class App extends React.Component {
       const extentions = file.name.split('.').pop();
 
       switch (extentions.toUpperCase()) {
+        case 'DOODLE3D':
         case 'D3SKETCH':
         case 'JSON':
           const url = URL.createObjectURL(file);
-          const data = await fetch(url).then(result => result.json());
-          const sketchData = await JSONToSketchData(data);
-          openSketch(sketchData);
+          const json = await fetch(url).then(result => result.json());
+          const data = await JSONToSketchData(json);
+          openSketch({ data });
           break;
         case 'JPG':
         case 'JPEG':
@@ -145,6 +172,29 @@ class App extends React.Component {
         }
         break;
 
+      case 's': {
+        if (!commandKey) d2ChangeTool(d2Tools.TRANSFORM);
+        break;
+      }
+
+      case 'e': {
+        if (!commandKey) {
+          event.preventDefault();
+          d2ChangeTool(d2Tools.ERASER);
+        }
+        break;
+      }
+
+      case 'c': {
+        if (!commandKey) d2ChangeTool(d2Tools.CIRCLE);
+        break;
+      }
+
+      case 'l': {
+        if (!commandKey) d2ChangeTool(d2Tools.POLYGON);
+        break;
+      }
+
       case 't': {
         if (!commandKey) d2ChangeTool(d2Tools.TEXT);
         break;
@@ -176,16 +226,27 @@ class App extends React.Component {
     }
   }
 
+  onWheel = (event) => {
+    const { preventScroll } = this.props;
+    if (preventScroll) event.preventDefault();
+  };
+
+  dragover = (event) => {
+    event.preventDefault();
+  };
+
   render() {
     const { classes, undo, redo } = this.props;
+    const { loaded } = this.state;
+
     return (
-      <div ref="container" className={classes.container}>
+      <div ref={this.container} className={classes.container}>
         <InlineIconsLoader />
-        <div className={classes.appContainer}>
+        {loaded && <div className={classes.appContainer}>
           <D2Panel />
           <div className={classes.vLine} />
           <D3Panel />
-        </div>
+        </div>}
         <Logo />
         <div className={classes.undoMenu}>
           <Button onSelect={undo} className={classes.undo} />
@@ -198,6 +259,7 @@ class App extends React.Component {
 }
 
 export default injectSheet(styles)(connect(state => ({
+  preventScroll: state.sketcher.present.preventScroll,
   selectedPen: state.sketcher.present.menus['pen-tools'].selected
 }), {
   undo: actions.undo.undo,

src/components/AuthImage.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'proptypes';
-import { connect } from 'react-redux';
-import { isWebUri } from 'valid-url';
-import PouchDB from 'pouchdb';
-// import createDebug from 'debug';
-// const debug = createDebug('d3d:FileThumb');
-
-class AuthImage extends React.Component {
-  static propTypes = {
-    dispatch: PropTypes.func,
-    src: PropTypes.string.isRequired,
-    token: PropTypes.string,
-    password: PropTypes.string
-  };
-
-  state = {
-    src: null
-  };
-
-  componentWillMount() {
-    const { src, token, password } = this.props;
-
-    if (src.startsWith('/') || src.startsWith('./')) {
-      this.setState({ src });
-    } else if (isWebUri(src)) {
-      if (token && password) {
-        const filteredSrc = src.replace(/:\/\/.+?@/, '://');
-        const headers = {
-          Authorization: `Basic ${btoa(`${token}:${password}`)}`
-        };
-        fetch(filteredSrc, { headers })
-          .then(response => response.blob())
-          .then(blob => this.setState({ src: URL.createObjectURL(blob) }));
-      } else {
-        this.setState({ src });
-      }
-    } else {
-      const [dbName, docName, attachmentName] = src.split('/');
-      const db = new PouchDB(dbName);
-      db.getAttachment(docName, attachmentName).then((blob) => {
-        this.setState({ src: URL.createObjectURL(blob) });
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    URL.revokeObjectURL(this.state.src);
-  }
-
-  render() {
-    // filter props before passing them to img element
-    const props = { ...this.props };
-    delete props.dispatch;
-    delete props.token;
-    delete props.password;
-    delete props.src;
-    return (<img { ...props } src={this.state.src} />);
-  }
-}
-
-export default connect(state => ({
-  token: state.user.session.token,
-  password: state.user.session.password
-}))(AuthImage);

src/components/Button.js

@@ -37,7 +37,7 @@ export default class Button extends React.Component {
     if (className) combinedClassName += ` ${className}`;
 
     return (
-      <div id={id} className={combinedClassName} onTouchTap={this.onClick}>
+      <div id={id} className={combinedClassName} onClick={this.onClick}>
         {svg && <svg>
           <use xlinkHref={svg}/>
         </svg>}

src/components/D2Panel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import * as CAL from 'cal';
+import * as CAL from '@doodle3d/cal';
 import * as toolNames from '../constants/d2Tools';
 import { PIPETTE } from '../constants/contextTools.js';
 import { CANVAS_SIZE } from '../constants/d2Constants';
@@ -22,7 +22,6 @@ import { PIXEL_RATIO } from '../constants/general';
 import ShapesManager from '../d2/ShapesManager.js';
 import EventGroup from '../d2/EventGroup.js';
 import ReactResizeDetector from 'react-resize-detector';
-import { load as loadPattern } from '../d2/Shape.js';
 import InputText from './InputText.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:d2');
@@ -70,6 +69,11 @@ class D2Panel extends React.Component {
   activeNeedRender = false;
   inactiveNeedRender = false;
 
+  constructor(props) {
+    super(props);
+    this.canvasContainer = React.createRef();
+  }
+
   componentWillMount() {
     // Scene space
     this.sceneActive = new EventGroup({
@@ -93,22 +97,17 @@ class D2Panel extends React.Component {
     this.objectContainerInactive.add(new Grid(new CAL.Color(0xdddddd)));
 
     this.shapesManager = new ShapesManager(this.objectContainerActive, this.objectContainerInactive);
-    loadPattern.then(() => {
-      this.activeNeedRender = true;
-      this.inactiveNeedRender = true;
-      this.renderRequest();
-    });
 
     this.DOM = null;
   }
 
   componentDidMount() {
-    const { canvasContainer } = this.refs;
-    this.container = canvasContainer;
-
-    this.container.appendChild(this.sceneInactive.image);
-    this.container.appendChild(this.sceneActive.image);
+    if (this.canvasContainer.current) {
+      this.container = this.canvasContainer.current;
 
+      this.container.appendChild(this.sceneInactive.image);
+      this.container.appendChild(this.sceneActive.image);
+    }
     this.sceneActive.onClick = (event) => event.stopPropagation();
   }
 
@@ -224,7 +223,7 @@ class D2Panel extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <div className={classes.canvasContainer} ref="canvasContainer" />
+        <div className={classes.canvasContainer} ref={this.canvasContainer} />
         <InputText screenMatrix={screenMatrix} />
       </div>
     );

src/components/D3Panel.js

@@ -20,7 +20,6 @@ import RenderChain, { TOONSHADER_OUTLINE, TOONSHADER } from '../d3/RenderChain';
 import BaseTransformer from '../d3/transformers/BaseTransformer.js';
 import Camera from '../d3/Camera.js';
 import ReactResizeDetector from 'react-resize-detector';
-import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:d3');
 
@@ -51,6 +50,10 @@ const styles = {
 };
 
 class D3Panel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.canvasContainer = React.createRef();
+  }
 
   static propTypes = {
     state: PropTypes.object.isRequired,
@@ -70,15 +73,15 @@ class D3Panel extends React.Component {
       plane: this.plane
     });
 
-    loadMatcapMaterial.then(this.renderRequest);
     this.DOM = null;
   }
 
   componentDidMount() {
-    this.container = this.refs.canvasContainer;
-    this.container.appendChild(this.renderer.domElement);
-
-    this.renderScene(); // immidiatly render because when THREE.JS inits, a black screen is generated
+    if (this.canvasContainer.current) {
+      this.container = this.canvasContainer.current;
+      this.container.appendChild(this.renderer.domElement);
+      this.renderScene(); // immidiatly render because when THREE.JS inits, a black screen is generated
+    }
   }
 
   componentWillUnmount() {
@@ -223,7 +226,7 @@ class D3Panel extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <div className={classes.canvasContainer} ref="canvasContainer"/>
+        <div className={classes.canvasContainer} ref={this.canvasContainer}/>
       </div>
     );
   }

src/components/DoodlePreview.js

@@ -8,7 +8,6 @@ import createScene from '../d3/createScene.js';
 import injectSheet from 'react-jss';
 import ReactResizeDetector from 'react-resize-detector';
 import requestAnimationFrame from 'raf';
-import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
 import createRAFOnce from '../utils/rafOnce.js';
 
 const rafOnce = createRAFOnce();
@@ -29,6 +28,11 @@ class DoodlePreview extends React.Component {
     pixelRatio: 1
   };
 
+  constructor(props) {
+    super(props);
+    this.canvas = React.createRef();
+  }
+
   static propTypes = {
     classes: PropTypes.objectOf(PropTypes.string),
     width: PropTypes.number.isRequired,
@@ -50,17 +54,13 @@ class DoodlePreview extends React.Component {
 
     if (docData) sketchData = await JSONToSketchData(docData);
 
-    const { canvas } = this.refs;
+    const sceneData = await createSceneData(sketchData);
 
-    const sceneData = createSceneData(sketchData);
-
-    const scene = createScene(sceneData, canvas);
+    const scene = createScene(sceneData, this.canvas.current);
     this.setState(scene);
 
-    this.editorControls = new THREE.EditorControls(scene.camera, canvas);
+    this.editorControls = new THREE.EditorControls(scene.camera, this.canvas.current);
     this.editorControls.addEventListener('change', () => rafOnce(scene.render));
-
-    loadMatcapMaterial.then(scene.render);
   }
 
   componentWillUnmount() {
@@ -81,7 +81,7 @@ class DoodlePreview extends React.Component {
     return (
       <div className={classes.container}>
         <ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
-        <canvas className={classes.canvas} ref="canvas" />
+        <canvas className={classes.canvas} ref={this.canvas} />
       </div>
     );
   }

src/components/InputText.js

@@ -3,7 +3,7 @@ import injectSheet from 'react-jss';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import * as actions from '../actions/index.js';
-import * as CAL from 'cal';
+import * as CAL from '@doodle3d/cal';
 import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js';
 
 const CONTEXT = document.createElement('canvas').getContext('2d');
@@ -25,6 +25,11 @@ const styles = {
 };
 
 class InputText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.text = React.createRef();
+  }
+
   static propTypes = {
     state: PropTypes.object.isRequired,
     classes: PropTypes.objectOf(PropTypes.string),
@@ -37,7 +42,7 @@ class InputText extends React.Component {
     if (!shapeData) return;
 
     const { changeText } = this.props;
-    const text = this.refs.text.value;
+    const text = this.text.current.value;
 
     changeText(text);
   };
@@ -51,7 +56,7 @@ class InputText extends React.Component {
   }
 
   componentWillUpdate() {
-    if (this.refs.text) this.refs.text.focus();
+    if (this.text.current) this.text.current.focus();
   }
 
   render() {
@@ -82,7 +87,7 @@ class InputText extends React.Component {
               width: `${width}px`
             }}
             value={text}
-            ref="text"
+            ref={this.text}
             spellCheck="false"
             autoFocus
             onChange={this.onInputChange}

src/components/Logo.js

@@ -8,11 +8,12 @@ const styles = {
     top: '0px',
     right: '15%',
     width: '19%',
+    backgroundImage: `url("${doodleSignImageURL}")`,
+    maxWidth: '290px',
+    height: '140px',
+    backgroundSize: '100%',
+    backgroundRepeat: 'no-repeat',
     pointerEvents: 'none', // enable clicking through logo
-    '& img': {
-      width: '100%',
-      maxWidth: '290px'
-    }
   },
   '@media (max-width: 555px)': {
     container: {
@@ -22,8 +23,6 @@ const styles = {
 };
 
 const Logo = ({ classes }) => (
-  <div className={classes.container}>
-    <img src={doodleSignImageURL} />
-  </div>
+  <div className={classes.container} />
 );
 export default injectSheet(styles)(Logo);

src/components/SubMenu.js

@@ -8,6 +8,11 @@ import { hexToStyle } from '../utils/colorUtils.js';
 // const debug = createDebug('d3d:ui:submenu');
 
 class SubMenu extends React.Component {
+  constructor(props) {
+    super(props);
+    this.li = React.createRef();
+  }
+
   static propTypes = {
     onSelect: PropTypes.func,
     onOpen: PropTypes.func,
@@ -61,7 +66,7 @@ class SubMenu extends React.Component {
     const { open, onClose, value } = this.props;
     if (open && onClose) {
       // was click on this submenu?
-      const onSubmenu = this.refs.li.contains(event.target);
+      const onSubmenu = this.li.current.contains(event.target);
       // debug(`onDocumentClick ${event.type} ${onSubmenu ? 'onSubmenu' : ''}`);
       if (!onSubmenu) onClose({ menuValue: value });
     }
@@ -79,7 +84,7 @@ class SubMenu extends React.Component {
     let className = 'submenu';
     if (open) className += ' open';
     return (
-      <li id={id} className={className} ref="li" style={style}>
+      <li id={id} className={className} ref={this.li} style={style}>
         <Button
           id={`${selectedValue}-menu`}
           value={selectedValue}

src/constants/d2Constants.js

@@ -21,13 +21,6 @@ export const SNAPPING_DISTANCE = 7.0;
 export const MAX_TRACE_TOLERANCE = 256;
 export const SELECTION_VIEW_MIN_SCALE = 50;
 export const SELECTION_VIEW_MIN_AXIS_SCALE = 80;
-export const POTRACE_OPTIONS = {
-  turnpolicy: 'black',
-  turdsize: 5.0,
-  optcurve: false,
-  alphamax: 0.5,
-  opttolerance: 0.2
-};
 export const ERASER_SIZES = {
   [contextTools.ERASER_SIZE_SMALL]: 10,
   [contextTools.ERASER_SIZE_MEDIUM]: 30,

src/constants/general.js

@@ -1,6 +1,6 @@
 import * as contextTools from './contextTools.js';
 
-export const VERSION = '0.18.0';
+export const VERSION = '0.23.0';
 export const SHAPE_CACHE_LIMIT = 50;
 export const PIXEL_RATIO = 1.0;
 

src/d2/EraserPointer.js

@@ -1,6 +1,7 @@
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import transposeEvents from '../utils/transposeEvents.js';
 import { PIXEL_RATIO } from '../constants/general.js';
+import { convertEvent } from '../utils/pointerUtils.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:design:EraserPointer');
 
@@ -28,7 +29,7 @@ export default class EraserPointer {
   pointerMove(event) {
     this.showMouse = event.pointerType === 'mouse';
     if (this.erasing || this.showMouse) {
-      this.mousePosition.set(event.clientX, event.clientY);
+      this.mousePosition.copy(convertEvent(event.target, event));
       if (this.onChanged) this.onChanged();
     }
   }

src/d2/EventGroup.js

@@ -1,5 +1,5 @@
-import { Group, Utils } from 'cal';
-import createListener from 'touch-events';
+import { Group, Utils } from '@doodle3d/cal';
+import createListener from '@doodle3d/touch-events';
 import bowser from 'bowser';
 import { convertEvent, isMouseEvent } from '../utils/pointerUtils.js';
 import normalizeWheel from 'normalize-wheel';

src/d2/Grid.js

@@ -1,4 +1,4 @@
-import { Color, Vector } from 'cal';
+import { Color, Vector } from '@doodle3d/cal';
 import { CANVAS_SIZE, GRID_SIZE } from '../constants/d2Constants';
 import { PIXEL_RATIO } from '../constants/general.js';
 

src/d2/ImageShape.js

@@ -1,5 +1,5 @@
 import { IMAGE_GUIDE_TRANSPARENCY, DESELECT_TRANSPARENCY } from '../constants/d2Constants.js';
-import { Surface } from 'cal';
+import { Surface } from '@doodle3d/cal';
 
 export default class ImageShape extends Surface {
   constructor(shapeData) {

src/d2/Shape.js

@@ -1,6 +1,6 @@
 import { shapeToPoints } from '../shape/shapeToPoints.js';
 import { shapeChanged } from '../shape/shapeDataUtils.js';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 import { LINE_WIDTH } from '../constants/d2Constants.js';
 import { hexToStyle } from '../utils/colorUtils.js';
 import { DESELECT_TRANSPARENCY, FILL_TRANSPARENCY, LINE_TRANSPARENCY } from '../constants/d2Constants.js';

src/d2/TolerancePointer.js

@@ -1,4 +1,4 @@
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import { PIXEL_RATIO } from '../constants/general.js';
 
 export default class TolerancePointer {

src/d2/texts.js

@@ -1,4 +1,4 @@
-import { Text, Color } from 'cal';
+import { Text, Color } from '@doodle3d/cal';
 
 export const dimensionsText = new Text({
   size: 16,

src/d2/tools/BaseTool.js

@@ -1,14 +1,14 @@
 import EventGroup from '../EventGroup.js';
 import * as actions from '../../actions/index.js';
 import transposeEvents from '../../utils/transposeEvents.js';
-import ClipperShape from 'clipper-js';
+import ClipperShape from '@doodle3d/clipper-js';
 import { applyMatrixOnShape } from '../../utils/vectorUtils';
 import { getPointsBounds } from '../../shape/shapeDataUtils';
 import { shapeToPoints } from '../../shape/shapeToPoints';
 import { LINE_COLLISION_MARGIN } from '../../constants/d2Constants';
 import { LINE_WIDTH } from '../../constants/d2Constants';
 import { PIXEL_RATIO } from '../../constants/general';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 
 const HIT_ORDER = {
   RECT: 0,
@@ -159,7 +159,7 @@ export default class BaseTool extends EventGroup {
             } else {
               return clipperShape
                 .offset(margin, { joinType: 'jtSquare', endType: 'etOpenButt' })
-                .seperateShapes()
+                .separateShapes()
                 .some(_clipperShape => _clipperShape.pointInShape(position, true, true));
             }
           });

src/d2/tools/BrushTool.js

@@ -1,6 +1,7 @@
 import BaseTool from './BaseTool.js';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import { PIXEL_RATIO } from '../../constants/general.js';
+import { convertEvent } from '../../utils/pointerUtils.js';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:2d:tool:eraser');
 export default class BrushTool extends BaseTool {
@@ -14,7 +15,7 @@ export default class BrushTool extends BaseTool {
   pointerMove(event) {
     this.showMouse = event.pointerType === 'mouse';
     if (this.showMouse) {
-      this.mousePosition.set(event.clientX, event.clientY);
+      this.mousePosition.copy(convertEvent(event.target, event));
       this.renderRequest();
     }
   }

src/d2/tools/CircleTool.js

@@ -1,4 +1,4 @@
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import BaseTool from './BaseTool.js';
 import * as humanReadable from '../../utils/humanReadable.js';
 import { dimensionsText } from '../texts.js';

src/d2/tools/PhotoGuideTool.js

@@ -1,5 +1,5 @@
 import BaseTool from './BaseTool.js';
-import * as CAL from 'cal';
+import * as CAL from '@doodle3d/cal';
 import TolerancePointer from '../TolerancePointer.js';
 import * as actions from '../../actions/index.js';
 import { calculateTolerance } from '../../utils/traceUtils';

src/d2/tools/PolygonTool.js

@@ -1,5 +1,5 @@
 import BaseTool from './BaseTool.js';
-import { Vector, Utils } from 'cal';
+import { Vector, Utils } from '@doodle3d/cal';
 import * as humanReadable from '../../utils/humanReadable.js';
 import { dimensionsText } from '../texts.js';
 // import createDebug from 'debug';

src/d2/tools/TransformTool.js

@@ -1,4 +1,4 @@
-import { Vector, Matrix, Image } from 'cal';
+import { Vector, Matrix, Image } from '@doodle3d/cal';
 import { SELECTION_VIEW_MIN_AXIS_SCALE, SELECTION_VIEW_MIN_SCALE } from '../../constants/d2Constants';
 import dottedLineUrl from '../../../img/2d/dotLine01.png';
 import rotateHandleUrl from '../../../img/2d/rotateHandle.png';

src/d3/EventScene.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
-import { Utils } from 'cal';
-import createListener from 'touch-events';
+import { Utils } from '@doodle3d/cal';
+import createListener from '@doodle3d/touch-events';
 import bowser from 'bowser';
 import { convertEvent, isMouseEvent } from '../utils/pointerUtils.js';
 import normalizeWheel from 'normalize-wheel';

src/d3/SelectionBox.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:preview:selectionBox');
 

src/d3/createSceneData.js

@@ -1,7 +1,10 @@
 import shortid from 'shortid';
 import { SHAPE_TYPE_PROPERTIES } from '../constants/shapeTypeProperties.js';
+import { load } from '../utils/loaded.js';
+
+export default async function createSceneData(docData) {
+  await load;
 
-export default function docToShapeData(docData) {
   const sketchData = {
     spaces: {},
     objectsById: {}

src/d3/transformers/HeightTransformer.js

@@ -1,4 +1,4 @@
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import * as THREE from 'three';
 import heightHandleURL from '../../../img/3d/heightHandle.png';
 import pivitHandleURL from '../../../img/3d/sculptHandle.png';

src/d3/transformers/SculptTransformer.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import { SHAPE_TYPE_PROPERTIES } from '../../constants/shapeTypeProperties.js';
 import * as d3Tools from '../../constants/d3Tools';
 import handleURL from '../../../img/3d/sculptHandle.png';

src/reducer/contextReducer.js

@@ -6,7 +6,7 @@ import { SHAPE_TYPE_PROPERTIES } from '../constants/shapeTypeProperties.js';
 import * as actions from '../actions/index.js';
 import { select } from './menusReducer.js';
 import { getSelectedObjectsSelector, getBoundingBox } from '../utils/selectionUtils.js';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 import { updateTool as updateTool2d } from './d2/toolReducer.js';
 import { updateColor } from './selectionReducer.js';
 

src/reducer/d2/addImageReducer.js

@@ -1,5 +1,5 @@
 import { CANVAS_SIZE, INITIAL_IMAGE_SCALE } from '../../constants/d2Constants.js';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 import { addObject } from '../objectReducers.js';
 
 const IMAGE_SIZE = CANVAS_SIZE * 2 * INITIAL_IMAGE_SCALE;

src/reducer/d2/constrainMatrix.js

@@ -1,4 +1,4 @@
-import { Vector, Utils as CALUtils } from 'cal';
+import { Vector, Utils as CALUtils } from '@doodle3d/cal';
 import { MIN_ZOOM, MAX_ZOOM, CANVAS_SIZE } from '../../constants/d2Constants.js';
 
 export default function constrainMatrix(matrix) {

src/reducer/d2/tools/bucketReducer.js

@@ -1,6 +1,6 @@
 import update from 'react-addons-update';
 import fillPath from 'fill-path';
-import ClipperShape from 'clipper-js';
+import ClipperShape from '@doodle3d/clipper-js';
 import * as actions from '../../../actions/index.js';
 import { SHAPE_TYPE_PROPERTIES } from '../../../constants/shapeTypeProperties.js';
 import { LINE_WIDTH, CLIPPER_PRECISION } from '../../../constants/d2Constants.js';

src/reducer/d2/tools/eraserReducer.js

@@ -1,5 +1,5 @@
 import * as actions from '../../../actions/index';
-import ClipperShape from 'clipper-js';
+import ClipperShape from '@doodle3d/clipper-js';
 import * as d2Tools from '../../../constants/d2Tools';
 import subtractShapeFromState from '../../../utils/subtractShapeFromState';
 import { CLIPPER_PRECISION } from '../../../constants/d2Constants.js';

src/reducer/d2/tools/shapes/circleReducer.js

@@ -1,5 +1,5 @@
 import update from 'react-addons-update';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
 import createDebug from 'debug';

src/reducer/d2/tools/shapes/heartReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:reducer:star');
 

src/reducer/d2/tools/shapes/polyPointReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:reducer:star');
 

src/reducer/d2/tools/shapes/rectReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import createDebug from 'debug';
 const debug = createDebug('d3d:reducer:rect');
 

src/reducer/d2/tools/shapes/skewRectReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { removeObject, addObjectActive2D, setActive2D } from '../../../objectReducers.js';
-import { Vector, Matrix } from 'cal';
+import { Vector, Matrix } from '@doodle3d/cal';
 import createDebug from 'debug';
 const debug = createDebug('d3d:reducer:skewRect');
 

src/reducer/d2/tools/shapes/starReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 // import createDebug from 'debug';
 // const debug = createDebug('d3d:reducer:star');
 

src/reducer/d2/tools/shapes/triangleReducer.js

@@ -1,7 +1,7 @@
 import update from 'react-addons-update';
 import * as actions from '../../../../actions/index.js';
 import { addObjectActive2D, addObject, setActive2D } from '../../../objectReducers.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import createDebug from 'debug';
 const debug = createDebug('d3d:reducer:triangle');
 

src/reducer/d2/tools/textReducer.js

@@ -1,4 +1,4 @@
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import update from 'react-addons-update';
 import * as actions from '../../../actions/index.js';
 import createDebug from 'debug';
@@ -21,7 +21,7 @@ export default function textReducer(state, action) {
         return setActive2D(state, textId);
       } else {
         return addObjectActive2D(state, {
-          transform: new Matrix({ x: screenPosition.x, y: screenPosition.y }),
+          transform: new Matrix({ x: screenPosition.x, y: screenPosition.y, sx: 0.5, sy: 0.5 }),
           type: 'TEXT',
           text: {
             text: '',

src/reducer/d2/tools/transformReducer.js

@@ -1,5 +1,5 @@
 import update from 'react-addons-update';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import { CANVAS_SIZE } from '../../../constants/d2Constants.js';
 import * as actions from '../../../actions/index.js';
 import { calculateGestureMatrix } from '../../../utils/matrixUtils.js';

src/reducer/d2/wheelZoomReducer.js

@@ -1,11 +1,13 @@
 import update from 'react-addons-update';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 import constrainMatrix from './constrainMatrix.js';
 import { MAX_ZOOM } from '../../constants/d2Constants.js';
 
 export default function d2WheelZoomReducer(state, action) {
   const { position, wheelDelta, screenMatrixContainer } = action;
-  const { canvasMatrix } = state.d2;
+  const { d2: { canvasMatrix }, disableScroll } = state;
+
+  if (disableScroll) return state;
 
   const targetScale = 1 + wheelDelta / -500;
 

src/reducer/d3/toolReducer.js

@@ -20,9 +20,7 @@ const reducers = {
 export default function toolReducer(state, action) {
   // if (action.log !== false) debug(action.type);
 
-  state = update(state, {
-    d3: { camera: { $set: cameraReducer(state.d3.camera, action) } }
-  });
+  state = cameraReducer(state, action);
 
   if (action.type === actions.D3_CHANGE_TOOL && action.tool !== state.d3.tool) {
     state = update(state, {

src/reducer/d3/tools/cameraReducer.js

@@ -24,19 +24,22 @@ export function cameraReducer(state, action) {
 
   switch (action.type) {
     case actions.D3_MOUSE_WHEEL: {
+      if (state.disableScroll) return state;
       const delta = new THREE.Vector3(0, 0, action.wheelDelta);
-      return zoom(state, delta);
+      return update(state, {
+        d3: { camera: { $set: zoom(state.d3.camera, delta) } }
+      });
     }
 
     case actions.D3_DRAG_START: {
       return update(state, {
-        state: { $set: CAMERA_STATES.ROTATE }
+        d3: { camera: { state: { $set: CAMERA_STATES.ROTATE } } }
       });
     }
 
     case actions.D3_SECOND_DRAG_START: {
       return update(state, {
-        state: { $set: CAMERA_STATES.PAN }
+        d3: { camera: { state: { $set: CAMERA_STATES.PAN } } }
       });
     }
 
@@ -44,18 +47,24 @@ export function cameraReducer(state, action) {
     case actions.D3_SECOND_DRAG: {
       const movement = action.position.subtract(action.previousPosition);
 
-      switch (state.state) {
+      switch (state.d3.camera.state) {
         case CAMERA_STATES.ROTATE: {
           const delta = new THREE.Vector3(-movement.x * ROTATION_SPEED, -movement.y * ROTATION_SPEED, 0);
-          return rotate(state, delta);
+          return update(state, {
+            d3: { camera: { $set: rotate(state.d3.camera, delta) } }
+          });
         }
         case CAMERA_STATES.PAN: {
           const delta = new THREE.Vector3(-movement.x, movement.y, 0);
-          return pan(state, delta);
+          return update(state, {
+            d3: { camera: { $set: pan(state.d3.camera, delta) } }
+          });
         }
         case CAMERA_STATES.ZOOM: {
           const delta = new THREE.Vector3(0, 0, movement.y);
-          return zoom(state, delta);
+          return update(state, {
+            d3: { camera: { $set: zoom(state.d3.camera, delta) } }
+          });
         }
         default:
           return state;
@@ -66,7 +75,7 @@ export function cameraReducer(state, action) {
     case actions.D3_DRAG_END:
     case actions.D3_SECOND_DRAG_END:
       return update(state, {
-        state: { $set: CAMERA_STATES.NONE }
+        d3: { camera: { state: { $set: CAMERA_STATES.NONE } } }
       });
 
     case actions.D3_MULTITOUCH: {
@@ -74,7 +83,9 @@ export function cameraReducer(state, action) {
       const prevDistance = action.previousPositions[0].distanceTo(action.previousPositions[1]);
 
       const zoomDelta = new THREE.Vector3(0, 0, prevDistance - distance);
-      state = zoom(state, zoomDelta);
+      state = update(state, {
+        d3: { camera: { $set: zoom(state.d3.camera, zoomDelta) } }
+      });
 
       const offset0 = new THREE.Vector3(
         -(action.positions[0].x - action.previousPositions[0].x),
@@ -88,7 +99,9 @@ export function cameraReducer(state, action) {
       );
       const panDelta = offset0.add(offset1).multiplyScalar(0.5);
 
-      return pan(state, panDelta);
+      return update(state, {
+        d3: { camera: { $set: pan(state.d3.camera, panDelta) } }
+      });
     }
 
     default:

src/reducer/d3/tools/heightReducer.js

@@ -1,5 +1,5 @@
 import update from 'react-addons-update';
-import { Utils } from 'cal';
+import { Utils } from '@doodle3d/cal';
 import * as THREE from 'three';
 import { SHAPE_TYPE_PROPERTIES } from '../../../constants/shapeTypeProperties.js';
 import * as d3Tools from '../../../constants/d3Tools.js';

src/reducer/d3/tools/twistReducer.js

@@ -1,5 +1,5 @@
 import update from 'react-addons-update';
-import { Utils } from 'cal';
+import { Utils } from '@doodle3d/cal';
 import * as actions from '../../../actions/index.js';
 import * as d3Tools from '../../../constants/d3Tools';
 import { SHAPE_TYPE_PROPERTIES } from '../../../constants/shapeTypeProperties.js';

src/reducer/index.js

@@ -18,7 +18,7 @@ import d2PanZoomReducer from './d2/panReducer.js';
 import selectionReducer from './selectionReducer.js';
 import selectionOperationReducer from './selectionOperationReducer.js';
 import contextReducer from './contextReducer.js';
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 import { setActiveSpace, addSpaceActive, setActive2D, getActive2D, addObject } from './objectReducers.js';
 import menusReducer from './menusReducer.js';
 // import createDebug from 'debug';
@@ -95,7 +95,9 @@ const initialState = {
     },
     camera: defaultCamera
   },
-  menus: menusReducer(undefined, {})
+  menus: menusReducer(undefined, {}),
+  preventScroll: true,
+  disableScroll: false
 };
 
 function sketcherReducer(state = initialState, action) {
@@ -246,6 +248,16 @@ function sketcherReducer(state = initialState, action) {
         objectsById: { [action.id]: { transform: { $set: action.transform } } }
       });
 
+    case actions.SET_PREVENT_SCROLL:
+      return update(state, {
+        preventScroll: { $set: action.preventScroll }
+      });
+
+    case actions.SET_DISABLE_SCROLL:
+      return update(state, {
+        disableScroll: { $set: action.disableScroll }
+      });
+
     default:
       return state;
   }

src/reducer/selectionOperationReducer.js

@@ -1,6 +1,6 @@
 import update from 'react-addons-update';
-import ClipperShape from 'clipper-js';
-import { Matrix } from 'cal';
+import ClipperShape from '@doodle3d/clipper-js';
+import { Matrix } from '@doodle3d/cal';
 import { addObject, removeObject } from './objectReducers.js';
 import { recursiveClone } from '../utils/clone.js';
 import { shapeToPoints } from '../shape/shapeToPoints.js';
@@ -65,7 +65,7 @@ export default function (state, action) {
         unionShape = unionShape.union(shape);
       }
 
-      const unionShapes = unionShape.scaleDown(CLIPPER_PRECISION).seperateShapes().map(shape => {
+      const unionShapes = unionShape.scaleDown(CLIPPER_PRECISION).separateShapes().map(shape => {
         shape = shape
           .removeDuplicates()
           .mapToLower()

src/reducer/selectionReducer.js

@@ -1,6 +1,6 @@
 import update from 'react-addons-update';
 import * as actions from '../actions/index.js';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import { shapeToPoints } from '../shape/shapeToPoints.js';
 import createDebug from 'debug';
 const debug = createDebug('d3d:reducer:selection');

src/shape/JSONToSketchData.js

@@ -28,6 +28,9 @@ export function reviveObject(objects, reviver) {
 }
 
 function revive(appVersion, key, value) {
+  // Somtimes there are null objects in the d3sketchformat (when saving fails)
+  if (!value) return value;
+
   if (semver.lt(appVersion, '0.1.2')) {
     if (key === 'imageData') {
       return base64ToImage(value);

src/shape/docToFile.js

@@ -34,7 +34,11 @@ export default async function docToFile(db, doc, { image = false, sketch = false
     }
   }
   if (image) {
-    response.img = `${db.name}/${doc._id}/img`;
+    if (!(doc._attachments && doc._attachments.img && doc._attachments.img.data)) {
+      throw new Error(`'${doc.name}' doesn't include image attachment`);
+    }
+
+    response.img = URL.createObjectURL(doc._attachments.img.data);
   }
 
   return response;

src/shape/shapeToPoints.js

@@ -185,7 +185,7 @@ function shapeToPointsRaw(shapeData) {
       if (shapeData.fill) {
         new ClipperShape([points, ...holes], true, true, false, false)
           .simplify('pftEvenOdd')
-          .seperateShapes()
+          .separateShapes()
           .forEach(shape => {
             const [points, ...holes] = shape
               .mapToLower()
@@ -236,7 +236,7 @@ function shapeToPointsCorneredRaw(shapeData) {
           roundPrecision: 0.25
         })
         .scaleDown(CLIPPER_PRECISION)
-        .seperateShapes()
+        .separateShapes()
         .forEach(shape => {
           let [points, ...holes] = shape
             .mapToLower()

src/utils/async.js

@@ -1,3 +1,7 @@
+export function sleep(timeout) {
+  return new Promise(resolve => setTimeout(resolve), timeout);
+}
+
 export function recursivePromiseApply(object, promises = [], first = true) {
   for (const key in object) {
     const value = object[key];

src/utils/curveUtils.js

@@ -1,6 +1,6 @@
 import fitCurve from 'fit-curve';
 import Bezier from 'bezier-js';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 
 const DEFAULT_CURVE_ERROR = 3.0;
 const DEFAULT_DISTANCE_THRESHOLD = 1.0;

src/utils/dbUtils.js

@@ -1,29 +0,0 @@
-import PouchDB from 'pouchdb';
-
-export function getLegalDBName(input) {
-  return encodeURIComponent(input.toLowerCase())
-    .replace(/\./g, '%2E')
-    .replace(/!/g, '%21')
-    .replace(/~/g, '%7E')
-    .replace(/\*/g, '%2A')
-    .replace(/'/g, '%27')
-    .replace(/\(/g, '%28')
-    .replace(/\)/g, '%29')
-    .replace(/\-/g, '%2D')
-    .toLowerCase()
-    .replace(/(%..)/g, esc => `(${esc.substr(1)})`);
-}
-
-export function getDbUrl(db) {
-  if (db.user) {
-    return `${db.protocol}${encodeURIComponent(db.user)}:${encodeURIComponent(db.password)}@${db.host}`;
-  } else {
-    return `${db.protocol}${db.host}`;
-  }
-}
-
-const dbs = {};
-export function getDb(dbUrl) {
-  if (!dbs[dbUrl]) dbs[dbUrl] = new PouchDB(dbUrl);
-  return dbs[dbUrl];
-}

src/utils/generateThumb.js

@@ -1,9 +1,12 @@
 import 'blueimp-canvas-to-blob'; // canvas toBlob polyfill
 import createScene from '../d3/createScene.js';
 import { IMAGE_TYPE, IMAGE_QUALITY } from '../constants/saveConstants.js';
+import { load } from '../utils/loaded.js';
 
 export function generateThumb(state, width, height, responseType = 'blob') {
-  return new Promise((resolve) => {
+  return new Promise(async (resolve) => {
+    await load;
+
     const { render, renderer, setSize } = createScene(state);
 
     setSize(width, height, 1.0);

src/utils/loaded.js

@@ -0,0 +1,45 @@
+import { FONT_FACE } from '../constants/general.js';
+import * as contextTools from '../constants/contextTools.js';
+import FontLoaded from 'font-loaded';
+import { load as loadPattern } from '../d2/Shape.js';
+import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
+import jss from 'jss';
+import abril_url from '../../fonts/abril-fatface-v12-latin-regular.woff';
+import bellefair_url from '../../fonts/bellefair-v6-latin-regular.woff';
+import fascinate_url from '../../fonts/fascinate-v11-latin-regular.woff';
+import joti_url from '../../fonts/joti-one-v11-latin-regular.woff';
+import lobster_url from '../../fonts/lobster-v23-latin-regular.woff';
+import oswald_url from '../../fonts/oswald-v36-latin-regular.woff';
+import play_url from '../../fonts/play-v12-latin-regular.woff';
+import ranga_url from '../../fonts/ranga-v8-latin-regular.woff';
+
+const fontFaces = [
+  { url: abril_url,     family: FONT_FACE[contextTools.ABRIL_FATFACE], },
+  { url: bellefair_url, family: FONT_FACE[contextTools.BELLEFAIR], },
+  { url: fascinate_url, family: FONT_FACE[contextTools.FASCINATE], },
+  { url: joti_url,      family: FONT_FACE[contextTools.JOTI_ONE], },
+  { url: lobster_url,   family: FONT_FACE[contextTools.LOBSTER], },
+  { url: oswald_url,    family: FONT_FACE[contextTools.OSWALD], },
+  { url: play_url,      family: FONT_FACE[contextTools.PLAY], },
+  { url: ranga_url,     family: FONT_FACE[contextTools.RANGA], },
+];
+
+jss.createStyleSheet({
+    '@font-face': fontFaces.map(({ url, family }) => ({
+        'font-family': family,
+        'src': `url("${url}") format("woff")`
+    })),
+}).attach();
+
+const loadFont = font => {
+  const fontLoaded = new FontLoaded(font);
+  return new Promise((resolve, reject) => {
+    fontLoaded.on('load', resolve);
+    fontLoaded.on('error', reject);
+  });
+};
+export const loadFonts = Promise.all(Object.values(FONT_FACE).map(loadFont));
+
+let loaded = false;
+export const load = Promise.all([loadFonts, loadPattern, loadMatcapMaterial]).then(() => loaded = true);
+export const isLoaded = () => loaded;

src/utils/matrixUtils.js

@@ -1,4 +1,4 @@
-import { Matrix, Vector } from 'cal';
+import { Matrix, Vector } from '@doodle3d/cal';
 
 export function calculateGestureMatrix(positions, previousPositions, screenMatrix, { rotate, scale, pan }) {
   const matrix = screenMatrix.inverseMatrix();

src/utils/pointerUtils.js

@@ -1,4 +1,4 @@
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 
 export function convertEvent(DOMNode, event) {
   const { left, top } = DOMNode.getBoundingClientRect();

src/utils/selectionUtils.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { shapeToPoints } from '../shape/shapeToPoints.js';
 import { getPointsBounds } from '../shape/shapeDataUtils.js';
-import { Vector } from 'cal';
+import { Vector } from '@doodle3d/cal';
 import arrayMemoizer from './arrayMemoizer.js';
 import memoize from 'memoizee';
 // import createDebug from 'debug';

src/utils/subtractShapeFromState.js

@@ -1,6 +1,6 @@
 import update from 'react-addons-update';
-import { Matrix } from 'cal';
-import ClipperShape from 'clipper-js';
+import { Matrix } from '@doodle3d/cal';
+import ClipperShape from '@doodle3d/clipper-js';
 import { recursiveClone } from './clone.js';
 import { addObject, removeObject } from '../reducer/objectReducers.js';
 import { SHAPE_TYPE_PROPERTIES } from '../constants/shapeTypeProperties.js';
@@ -67,7 +67,7 @@ export default function subtractShapeFromState(state, differenceShape, tool, opt
     // Returns two dimentional array, with per shape an array of paths.
     // The first item of each path is the outline, the others are holes, if there are any.
     let resultShapes = resultShape
-      .seperateShapes()
+      .separateShapes()
       .map(resultPaths => { // go through all created shapes (1 shape can be a combination of outline+holes)
         if (scale !== undefined) resultPaths.scaleDown(scale);
         resultPaths = resultPaths

src/utils/textUtils.js

@@ -1,6 +1,5 @@
 import { SHAPE_CACHE_LIMIT } from '../constants/general.js';
 import { Text } from '@doodle3d/cal';
-import { POTRACE_OPTIONS } from '../constants/d2Constants.js';
 import * as POTRACE from '@doodle3d/potrace-js';
 import ClipperShape from '@doodle3d/clipper-js';
 import { shapeToVectorShape } from './vectorUtils.js';
@@ -15,7 +14,13 @@ export function createTextRaw(text, size, precision, family, style, weight) {
   const canvas = createTextCanvas(text, size * precision, family, style, weight);
 
   // TODO merge with potrace in flood fill trace reducer
-  const paths = POTRACE.getPaths(POTRACE.traceCanvas(canvas, POTRACE_OPTIONS));
+  const paths = POTRACE.getPaths(POTRACE.traceCanvas(canvas, {
+    turnpolicy: 'black',
+    turdsize: 5.0,
+    optcurve: false,
+    alphamax: 0.5,
+    opttolerance: 0.2
+  }));
 
   const pathsOffset = paths.map(path => path.map(({ x, y }) => ({
     x: (x - MARGIN) / precision,
@@ -24,7 +29,7 @@ export function createTextRaw(text, size, precision, family, style, weight) {
 
   const shapes = new ClipperShape(pathsOffset, true, true, false)
     .fixOrientation()
-    .seperateShapes()
+    .separateShapes()
     .map(shape => shape.mapToLower())
     .map(shapeToVectorShape);
 

src/utils/traceUtils.js

@@ -1,5 +1,5 @@
 import { applyMatrixOnPath, pathToVectorPath } from './vectorUtils.js';
-import { Matrix } from 'cal';
+import { Matrix } from '@doodle3d/cal';
 import TraceWorker from '../../workers/trace.worker.js';
 import { getPixel } from './colorUtils.js';
 import memoize from 'memoizee';

src/utils/undoFilter.js

@@ -23,7 +23,11 @@ const INCLUDE = [
   actions.DELETE_SELECTION,
   actions.DUPLICATE_SELECTION,
   actions.UNION,
-  actions.INTERSECT
+  actions.INTERSECT,
+  actions.OPEN_SKETCH,
+  actions.D2_CHANGE_TOOL,
+  actions.D3_CHANGE_TOOL,
+  actions.CONTEXT_CHANGE_TOOL
 ];
 
 const ACTION_INCLUDES = {
@@ -41,10 +45,8 @@ const CONTEXT_TOOL_CHANGES = [
 ];
 
 export default function undoFilter(action, currentState) {
-  if (INCLUDE.indexOf(action.type) !== -1) return true;
-  if (ACTION_INCLUDES[action.type] && ACTION_INCLUDES[action.type].indexOf(currentState.d2.tool) !== -1) {
-    return true;
-  }
+  if (INCLUDE.includes(action.type)) return true;
+  if (ACTION_INCLUDES[action.type] && ACTION_INCLUDES[action.type].includes(currentState.d2.tool)) return true;
   if (action.type === actions.CONTEXT_CHANGE_TOOL && CONTEXT_TOOL_CHANGES.includes(action.tool)) return true;
 
   return false;

styles/styles.css

@@ -267,7 +267,7 @@
 	text-align: center;
 }
 
-#color-light-blue-a { fill: #BCFFFF; }
+#color-light-blue-a { fill: #9fcaea; }
 #color-light-blue-b { fill: #68E1FD; }
 #color-light-blue-c { fill: #01B8FF; }
 
@@ -283,15 +283,15 @@
 #color-pink-b { fill: #FD7BC1; }
 #color-pink-c { fill: #FA047B; }
 
-#color-red-a { fill: #FFCDCE; }
+#color-red-a { fill: #e392b0; }
 #color-red-b { fill: #FD898A; }
 #color-red-c { fill: #FF2600; }
 
-#color-yellow-a { fill: #FFF76B; }
+#color-yellow-a { fill: #ebe994; }
 #color-yellow-b { fill: #FF9201; }
 #color-yellow-c { fill: #AA7942; }
 
-#color-green-a { fill: #DAFFD5; }
+#color-green-a { fill: #a5c88e; }
 #color-green-b { fill: #97F294; }
 #color-green-c { fill: #00EA01; }
 

webpack.config.js

@@ -3,7 +3,6 @@ const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const CordovaPlugin = require('webpack-cordova-plugin');
-const GoogleFontsPlugin = require('google-fonts-webpack-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
 const appMode = process.env.TARGET === 'app';
@@ -30,19 +29,6 @@ module.exports = {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   },
-  resolve: {
-    alias: {
-      'doodle3d-core': path.resolve(__dirname, devMode ? 'module' : 'lib'),
-      'clipper-lib': '@doodle3d/clipper-lib',
-      'clipper-js': '@doodle3d/clipper-js',
-      'cal': '@doodle3d/cal',
-      'touch-events': '@doodle3d/touch-events',
-      'potrace-js': '@doodle3d/potrace-js',
-      'fill-path': '@doodle3d/fill-path',
-      'threejs-export-stl': '@doodle3d/threejs-export-stl',
-      'threejs-export-obj': '@doodle3d/threejs-export-obj'
-    }
-  },
   module: {
     rules:  [
       {
@@ -64,10 +50,15 @@ module.exports = {
           loader: 'url-loader?name=images/[name].[ext]'
         }
       }, {
-        test: /\.(svg|glsl|d3sketch)$/,
+        test: /\.(svg|glsl|d3sketch|doodle3d)$/,
         use: {
           loader: 'raw-loader'
         }
+      }, {
+        test: /\.(woff)$/,
+        use: {
+          loader: 'file-loader'
+        }
       }, {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
@@ -90,18 +81,6 @@ module.exports = {
         { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, user-scalable=no' }
       ]
     }),
-    new GoogleFontsPlugin({
-      fonts: [
-        { family: 'Oswald' },
-        { family: 'Ranga' },
-        { family: 'Joti One' },
-        { family: 'Bellefair' },
-        { family: 'Lobster' },
-        { family: 'Abril Fatface' },
-        { family: 'Play' },
-        { family: 'Fascinate' }
-      ]
-    }),
     ...(appMode ? [
       new CordovaPlugin({
         config: 'config.xml',

workers/trace.worker.js

@@ -1,6 +1,13 @@
 import 'babel-polyfill';
-import * as POTRACE from 'potrace-js';
-import { POTRACE_OPTIONS } from 'doodle3d-core/constants/d2Constants.js';
+import * as POTRACE from '@doodle3d/potrace-js';
+
+const POTRACE_OPTIONS = {
+  turnpolicy: 'black',
+  turdsize: 5.0,
+  optcurve: false,
+  alphamax: 0.5,
+  opttolerance: 0.2
+};
 
 self.addEventListener('message', (event) => {
   switch (event.data.msg) {