mirror of
https://github.com/Doodle3D/Doodle3D-Core.git
synced 2024-06-02 13:24:32 +02:00
Compare commits
41 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
35e4877326 | ||
|
d519033bd6 | ||
|
7418cce606 | ||
|
de19534d9d | ||
|
9f84cf406b | ||
|
83d03e8a1a | ||
|
011d9904a7 | ||
|
353793d867 | ||
|
395a116760 | ||
|
e11de849dd | ||
|
a0307f8ead | ||
|
80c08d7b2c | ||
|
bb1b2b73c0 | ||
|
f613c2b68d | ||
|
87b6e9851b | ||
|
31e9ec735f | ||
|
1a5f0fd9d0 | ||
|
a6eeb3f3f6 | ||
|
f514c9da45 | ||
|
d569a4f5b7 | ||
|
d43c55906b | ||
|
5f7e70027a | ||
|
4879f47d4c | ||
|
fed4146aea | ||
|
9e5c929da5 | ||
|
0c1cdb1580 | ||
|
6260e21c6d | ||
|
02e312247c | ||
|
3670802bea | ||
|
b5e0d809c7 | ||
|
023c416b5d | ||
|
c55750613f | ||
|
853d8a5c7e | ||
|
b5bf5eb8c7 | ||
|
ac2256d2c5 | ||
|
b0c0063039 | ||
|
ca4b886c93 | ||
|
582b8f8c37 | ||
|
fcd6bdbbf8 | ||
|
0a3686d8df | ||
|
24abade4b9 |
22
LICENSE.md
Normal file
22
LICENSE.md
Normal file
|
@ -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
|
||||
|
BIN
fonts/abril-fatface-v12-latin-regular.woff
Normal file
BIN
fonts/abril-fatface-v12-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/bellefair-v6-latin-regular.woff
Normal file
BIN
fonts/bellefair-v6-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/fascinate-v11-latin-regular.woff
Normal file
BIN
fonts/fascinate-v11-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/joti-one-v11-latin-regular.woff
Normal file
BIN
fonts/joti-one-v11-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/lobster-v23-latin-regular.woff
Normal file
BIN
fonts/lobster-v23-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/oswald-v36-latin-regular.woff
Normal file
BIN
fonts/oswald-v36-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/play-v12-latin-regular.woff
Normal file
BIN
fonts/play-v12-latin-regular.woff
Normal file
Binary file not shown.
BIN
fonts/ranga-v8-latin-regular.woff
Normal file
BIN
fonts/ranga-v8-latin-regular.woff
Normal file
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' },
|
||||
|
|
32778
package-lock.json
generated
32778
package-lock.json
generated
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.17.5",
|
||||
"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.18.0';
|
||||
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';
|
||||
|
|
4
src/d3/EventScene.js
vendored
4
src/d3/EventScene.js
vendored
|
@ -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';
|
||||
|
|
2
src/d3/SelectionBox.js
vendored
2
src/d3/SelectionBox.js
vendored
|
@ -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');
|
||||
|
||||
|
|
5
src/d3/createSceneData.js
vendored
5
src/d3/createSceneData.js
vendored
|
@ -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: {}
|
||||
|
|
2
src/d3/transformers/HeightTransformer.js
vendored
2
src/d3/transformers/HeightTransformer.js
vendored
|
@ -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';
|
||||
|
|
2
src/d3/transformers/SculptTransformer.js
vendored
2
src/d3/transformers/SculptTransformer.js
vendored
|
@ -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;
|
||||
|
||||
|
|
4
src/reducer/d3/toolReducer.js
vendored
4
src/reducer/d3/toolReducer.js
vendored
|
@ -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, {
|
||||
|
|
33
src/reducer/d3/tools/cameraReducer.js
vendored
33
src/reducer/d3/tools/cameraReducer.js
vendored
|
@ -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:
|
||||
|
|
2
src/reducer/d3/tools/heightReducer.js
vendored
2
src/reducer/d3/tools/heightReducer.js
vendored
|
@ -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';
|
||||
|
|
2
src/reducer/d3/tools/twistReducer.js
vendored
2
src/reducer/d3/tools/twistReducer.js
vendored
|
@ -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
Block a user