Compare commits
40 Commits
Author | SHA1 | Date |
---|---|---|
Rick Companje | 35e4877326 | |
Rick Companje | d519033bd6 | |
Rick Companje | 7418cce606 | |
Rick Companje | de19534d9d | |
Rick Companje | 9f84cf406b | |
casper | 83d03e8a1a | |
casper | 011d9904a7 | |
Rick Companje | 353793d867 | |
Rick Companje | 395a116760 | |
Rick Companje | e11de849dd | |
Rick Companje | a0307f8ead | |
casper | 80c08d7b2c | |
casper | bb1b2b73c0 | |
casper | f613c2b68d | |
Casper Lamboo | 87b6e9851b | |
Casper Lamboo | 31e9ec735f | |
Casper Lamboo | 1a5f0fd9d0 | |
casper | a6eeb3f3f6 | |
Rick Companje | f514c9da45 | |
Rick Companje | d569a4f5b7 | |
Casper Lamboo | d43c55906b | |
Casper Lamboo | 5f7e70027a | |
Casper Lamboo | 4879f47d4c | |
Casper Lamboo | fed4146aea | |
Casper Lamboo | 9e5c929da5 | |
Casper Lamboo | 0c1cdb1580 | |
Casper Lamboo | 6260e21c6d | |
Casper Lamboo | 02e312247c | |
Casper Lamboo | 3670802bea | |
Casper Lamboo | b5e0d809c7 | |
Casper Lamboo | 023c416b5d | |
Casper Lamboo | c55750613f | |
Casper Lamboo | 853d8a5c7e | |
Casper Lamboo | b5bf5eb8c7 | |
Casper Lamboo | ac2256d2c5 | |
Casper Lamboo | b0c0063039 | |
Casper Lamboo | ca4b886c93 | |
Casper Lamboo | 582b8f8c37 | |
Casper Lamboo | fcd6bdbbf8 | |
Casper Lamboo | 0a3686d8df |
|
@ -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.
|
14
README.md
14
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
|
||||
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
7
index.js
7
index.js
|
@ -27,7 +27,7 @@ import { createFile } from './src/utils/exportUtils.js';
|
|||
import sketchDataToJSON from './src/shape/sketchDataToJSON.js';
|
||||
import { JSONToBlob } from './src/utils/binaryUtils.js';
|
||||
|
||||
//usage: downloadStl({lineWidth:20})
|
||||
// usage: downloadStl({lineWidth:20})
|
||||
window.downloadStl = (options) => {
|
||||
store.dispatch(async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
|
@ -41,7 +41,7 @@ window.downloadSketch = () => {
|
|||
const state = getState();
|
||||
const json = sketchDataToJSON(state.sketcher.present);
|
||||
const blob = JSONToBlob(json);
|
||||
saveAsLib(blob, 'doodle.d3sketch');
|
||||
saveAsLib(blob, 'doodle.doodle3d');
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -64,10 +64,11 @@ JSONToSketchData(JSON.parse(modelData)).then(data => {
|
|||
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' },
|
||||
|
|
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@doodle3d/doodle3d-core",
|
||||
"version": "0.19.1",
|
||||
"version": "0.23.0",
|
||||
"description": "Core functions of Doodle3D Transform",
|
||||
"main": "lib",
|
||||
"module": "module",
|
||||
|
@ -11,51 +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",
|
||||
"font-loaded": "^1.0.0",
|
||||
"google-fonts-webpack-plugin": "^0.4.4",
|
||||
"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",
|
||||
|
@ -87,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",
|
||||
|
@ -99,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"
|
||||
},
|
||||
|
|
|
@ -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 };
|
||||
}
|
||||
|
|
|
@ -17,6 +17,9 @@ 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: {
|
||||
|
@ -72,29 +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();
|
||||
|
@ -103,6 +122,7 @@ 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);
|
||||
|
@ -206,12 +226,21 @@ 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 />
|
||||
{loaded && <div className={classes.appContainer}>
|
||||
<D2Panel />
|
||||
|
@ -230,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,
|
||||
|
|
|
@ -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>}
|
||||
|
|
|
@ -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';
|
||||
|
@ -69,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({
|
||||
|
@ -97,12 +102,12 @@ class D2Panel extends React.Component {
|
|||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
|
@ -218,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>
|
||||
);
|
||||
|
|
|
@ -50,6 +50,10 @@ const styles = {
|
|||
};
|
||||
|
||||
class D3Panel extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.canvasContainer = React.createRef();
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
state: PropTypes.object.isRequired,
|
||||
|
@ -73,10 +77,11 @@ class D3Panel extends React.Component {
|
|||
}
|
||||
|
||||
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() {
|
||||
|
@ -221,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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -28,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,
|
||||
|
@ -49,14 +54,12 @@ 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));
|
||||
}
|
||||
|
||||
|
@ -78,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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as contextTools from './contextTools.js';
|
||||
|
||||
export const VERSION = '0.19.1';
|
||||
export const VERSION = '0.23.0';
|
||||
export const SHAPE_CACHE_LIMIT = 50;
|
||||
export const PIXEL_RATIO = 1.0;
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Vector } from 'cal';
|
||||
import { Vector } from '@doodle3d/cal';
|
||||
import { PIXEL_RATIO } from '../constants/general.js';
|
||||
|
||||
export default class TolerancePointer {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Text, Color } from 'cal';
|
||||
import { Text, Color } from '@doodle3d/cal';
|
||||
|
||||
export const dimensionsText = new Text({
|
||||
size: 16,
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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: {}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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');
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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, {
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,35 @@
|
|||
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);
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Vector } from 'cal';
|
||||
import { Vector } from '@doodle3d/cal';
|
||||
|
||||
export function convertEvent(DOMNode, event) {
|
||||
const { left, top } = DOMNode.getBoundingClientRect();
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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; }
|
||||
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue