vmario/Doodle3D-Core
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Core.git synced 2024-06-25 22:21:22 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into feature-cordova

Browse Source
This commit is contained in:
casperlamboo 2017-12-11 16:23:03 +01:00
commit 4063fe5728
13 changed files with 998 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.babelrc
View File

@ -1,25 +0,0 @@
{
"env": {
"module": {
"presets": [
["env", {
"targets": { "node": "6" },
"modules": false
}],
"stage-0",
"react"
]
},
"main": {
"presets": ["env", "stage-0", "react"]
}
},
"plugins": [
"babel-plugin-transform-regenerator",
"babel-plugin-transform-object-rest-spread",
"babel-plugin-inline-import",
"babel-plugin-transform-class-properties",
"babel-plugin-transform-es2015-classes",
"babel-plugin-syntax-dynamic-import"
]
}

1050
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@doodle3d/doodle3d-core",
"version": "0.0.1",
"version": "0.17.4",
"description": "Core functions of Doodle3D Transform",
"main": "lib",
"module": "module",
@ -66,7 +66,6 @@
"babel-preset-stage-0": "^6.24.1",
"cordova": "^7.1.0",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"html-webpack-template": "^6.0.2",
"raw-loader": "^0.5.1",
@ -80,6 +79,7 @@
"redux-promise-middleware": "^4.4.2",
"redux-thunk": "^2.2.0",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-cordova-plugin": "^0.1.6",

72
src/constants/contextTools.js
View File

@ -9,34 +9,58 @@ export const ALIGN = 'align-tool';
export const UNION = 'union-tool';
export const INTERSECT = 'intersect-tool';
export const LIGHT_BLUE = 'color-light-blue';
export const LIGHT_GREEN = 'color-light-green';
export const LIGHT_PINK = 'color-light-pink';
export const LIGHT_YELLOW = 'color-light-yellow';
export const BLUE = 'color-blue';
export const GREEN = 'color-green';
export const PINK = 'color-pink';
export const YELLOW = 'color-yellow';
export const DARK_BLUE = 'color-dark-blue';
export const DARK_GREEN = 'color-dark-green';
export const DARK_PINK = 'color-dark-pink';
export const DARK_YELLOW = 'color-dark-yellow';
export const LIGHT_BLUE_A = 'color-light-blue-a';
export const LIGHT_BLUE_B = 'color-light-blue-b';
export const LIGHT_BLUE_C = 'color-light-blue-c';
export const DARK_BLUE_A = 'color-dark-blue-a';
export const DARK_BLUE_B = 'color-dark-blue-b';
export const DARK_BLUE_C = 'color-dark-blue-c';
export const PURPLE_A = 'color-purple-a';
export const PURPLE_B = 'color-purple-b';
export const PURPLE_C = 'color-purple-c';
export const PINK_A = 'color-pink-a';
export const PINK_B = 'color-pink-b';
export const PINK_C = 'color-pink-c';
export const RED_A = 'color-red-a';
export const RED_B = 'color-red-b';
export const RED_C = 'color-red-c';
export const YELLOW_A = 'color-yellow-a';
export const YELLOW_B = 'color-yellow-b';
export const YELLOW_C = 'color-yellow-c';
export const GREEN_A = 'color-green-a';
export const GREEN_B = 'color-green-b';
export const GREEN_C = 'color-green-c';
export const BLACK_A = 'color-black-a';
export const BLACK_B = 'color-black-b';
export const BLACK_C = 'color-black-c';
export const HOLE_MATERIAL = 'color-hole-material';
export const PIPETTE = 'pipette-tool';
export const COLORS = [
LIGHT_BLUE,
LIGHT_GREEN,
LIGHT_PINK,
LIGHT_YELLOW,
BLUE,
GREEN,
PINK,
YELLOW,
DARK_BLUE,
DARK_GREEN,
DARK_PINK,
DARK_YELLOW
LIGHT_BLUE_A,
LIGHT_BLUE_B,
LIGHT_BLUE_C,
DARK_BLUE_A,
DARK_BLUE_B,
DARK_BLUE_C,
PURPLE_A,
PURPLE_B,
PURPLE_C,
PINK_A,
PINK_B,
PINK_C,
RED_A,
RED_B,
RED_C,
YELLOW_A,
YELLOW_B,
YELLOW_C,
GREEN_A,
GREEN_B,
GREEN_C,
BLACK_A,
BLACK_B,
BLACK_C
];
export const ERASER_SIZE_SMALL = 'eraser-size-small';

2
src/constants/d2Constants.js
View File

@ -6,7 +6,7 @@ export const MIN_ZOOM = 0.5;
export const MAX_ZOOM = 10;
export const CANVAS_SIZE = 100;
export const GRID_SIZE = 10;
export const IMAGE_GUIDE_TRANSPARENCY = 0.7;
export const IMAGE_GUIDE_TRANSPARENCY = 1.0;
export const FILL_TRANSPARENCY = 0.9;
export const LINE_TRANSPARENCY = 1.0;
export const DESELECT_TRANSPARENCY = 0.2;

38
src/constants/general.js
View File

@ -1,20 +1,32 @@
import * as contextTools from './contextTools.js';
export const VERSION = '0.17.0';
export const VERSION = '0.17.4';
export const SHAPE_CACHE_LIMIT = 50;
export const PIXEL_RATIO = 1.0;
export const COLOR_STRING_TO_HEX = {
[contextTools.LIGHT_BLUE]: 0xc8e4f7,
[contextTools.LIGHT_GREEN]: 0xcbe6c0,
[contextTools.LIGHT_PINK]: 0xf8c4d8,
[contextTools.LIGHT_YELLOW]: 0xf5f5c0,
[contextTools.BLUE]: 0x92c8ef,
[contextTools.GREEN]: 0x99cc81,
[contextTools.PINK]: 0xf28bb1,
[contextTools.YELLOW]: 0xebea7f,
[contextTools.DARK_BLUE]: 0x50a8e4,
[contextTools.DARK_GREEN]: 0x5aae31,
[contextTools.DARK_PINK]: 0xe94481,
[contextTools.DARK_YELLOW]: 0xdfde24
[contextTools.LIGHT_BLUE_A]: 0xbcffff,
[contextTools.LIGHT_BLUE_B]: 0x69e1fd,
[contextTools.LIGHT_BLUE_C]: 0x00b8ff,
[contextTools.DARK_BLUE_A]: 0xc8e2ff,
[contextTools.DARK_BLUE_B]: 0x7dacfc,
[contextTools.DARK_BLUE_C]: 0x0357ff,
[contextTools.PURPLE_A]: 0xefc9ff,
[contextTools.PURPLE_B]: 0xc57efc,
[contextTools.PURPLE_C]: 0x820ef9,
[contextTools.PINK_A]: 0xffc7ee,
[contextTools.PINK_B]: 0xfd7cc1,
[contextTools.PINK_C]: 0xfa047b,
[contextTools.RED_A]: 0xffcdce,
[contextTools.RED_B]: 0xfd898a,
[contextTools.RED_C]: 0xfd898a,
[contextTools.YELLOW_A]: 0xfffea0,
[contextTools.YELLOW_B]: 0xfffb39,
[contextTools.YELLOW_C]: 0xfdac05,
[contextTools.GREEN_A]: 0xdaffd4,
[contextTools.GREEN_B]: 0x97f194,
[contextTools.GREEN_C]: 0x31d22d,
[contextTools.BLACK_A]: 0xf4f4f4,
[contextTools.BLACK_B]: 0x7f7f7f,
[contextTools.BLACK_C]: 0x1f1f1f
};

38
src/constants/menu.js
View File

@ -59,22 +59,34 @@ const context = {
{
value: contextTools.COLOR_PICKER,
svg: `#btnColor`,
selected: contextTools.BLUE,
selected: contextTools.LIGHT_BLUE_B,
children: [
{ value: contextTools.HOLE_MATERIAL, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_BLUE, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_GREEN, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_PINK, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_YELLOW, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_BLUE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_BLUE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.PURPLE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.PINK_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.RED_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.YELLOW_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.GREEN_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.BLACK_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.PIPETTE },
{ value: contextTools.BLUE, svg: '#color-picker-empty-fill' },
{ value: contextTools.GREEN, svg: '#color-picker-empty-fill' },
{ value: contextTools.PINK, svg: '#color-picker-empty-fill' },
{ value: contextTools.YELLOW, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_BLUE, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_GREEN, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_PINK, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_YELLOW, svg: '#color-picker-empty-fill' }
{ value: contextTools.LIGHT_BLUE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_BLUE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.PURPLE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.PINK_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.RED_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.YELLOW_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.GREEN_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.BLACK_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_BLUE_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_BLUE_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.PURPLE_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.PINK_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.RED_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.YELLOW_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.GREEN_C, svg: '#color-picker-empty-fill' },
{ value: contextTools.BLACK_C, svg: '#color-picker-empty-fill' }
],
...selectorBehavior
}, {

40
src/d3/ShapeMesh.js vendored
View File

@ -49,6 +49,12 @@ class ShapeMesh extends THREE.Object3D {
this.updatePoints(shapeData);
}
_isReverse() {
const sx = this._transform.sx > 0;
const sy = this._transform.sy > 0;
return sx !== sy;
}
add(object) {
if (!this.children.includes(object)) super.add(object);
}
@ -68,6 +74,7 @@ class ShapeMesh extends THREE.Object3D {
}
const objectGeometry = new THREE.Geometry().fromBufferGeometry(this._mesh.geometry);
objectGeometry.mergeVertices();
let objectBSP = new THREE_BSP(objectGeometry);
objectGeometry.dispose();
objectBSP = objectBSP.subtract(holes);
@ -116,10 +123,12 @@ class ShapeMesh extends THREE.Object3D {
this._triangleSize = shapeData.triangleSize;
const compoundPaths = shapeToPointsCornered(shapeData);
this._shapes = compoundPaths.map(({ points, holes = [], pointsMap, holesMaps = [] }) => ({
shape: [points, ...holes],
maps: [pointsMap, ...holesMaps]
}));
this._shapes = compoundPaths.map(({ points, holes = [], pointsMap, holesMaps = [] }) => {
const shape = [points, ...holes];
const maps = [pointsMap, ...holesMaps];
return { shape, maps };
});
const { min, max } = getPointsBounds(compoundPaths);
this._center.copy(min.add(max).scale(0.5));
@ -245,9 +254,11 @@ class ShapeMesh extends THREE.Object3D {
return { x: point.x, y: y + this._z, z: point.y };
}
_updateVerticesHorizontal(heightStep, paths, center, indexCounter) {
for (let pathindex = 0; pathindex < paths.length; pathindex ++) {
const path = applyMatrixOnPath(paths[pathindex], this._transform);
if (this._isReverse()) path.reverse();
for (let pathIndex = 0; pathIndex < path.length; pathIndex ++) {
let point = path[pathIndex];
@ -280,9 +291,10 @@ class ShapeMesh extends THREE.Object3D {
for (let pathsIndex = 0; pathsIndex < paths.length; pathsIndex ++) {
const path = applyMatrixOnPath(paths[pathsIndex], this._transform);
if (this._isReverse()) path.reverse();
for (let pathIndex = 0; pathIndex < path.length; pathIndex ++) {
let point = path[pathIndex];
const point = path[pathIndex];
for (let heightStep = 0; heightStep < numHeightSteps; heightStep ++) {
const { x, y, z } = this._getPoint(point, heightStep, center);
@ -393,20 +405,30 @@ class ShapeMesh extends THREE.Object3D {
})
.map(path => path.map(({ x, y }) => new THREE.Vector2(x, y)));
if (this._isReverse()) {
points.reverse();
holes.map(hole => hole.reverse());
}
// triangulate
const triangulatedBottom = THREE.ShapeUtils.triangulateShape(points, holes)
const triangulatedTop = THREE.ShapeUtils.triangulateShape(points, holes)
.reduce((a, b) => a.concat(b), [])
// // map mapped indexes back to original indexes
.map(value => flatMap[value])
.map(value => value + vertexOffset);
// reverse index order for bottom so faces are flipped
const triangulatedTop = triangulatedBottom
const triangulatedBottom = triangulatedTop
.map(value => value + numPoints)
.reverse();
if (this._isReverse()) {
triangulatedTop.reverse();
} else {
triangulatedBottom.reverse();
}
triangulatedIndexes.push(triangulatedBottom.concat(triangulatedTop));
indexBufferLength += triangulatedBottom.length + triangulatedTop.length;
indexBufferLength += triangulatedTop.length + triangulatedBottom.length;
vertexBufferLength += numPoints * 6;
vertexOffsets.push(vertexOffset + numPoints * 2);
} else {

36
src/reducer/contextReducer.js
View File

@ -69,18 +69,30 @@ export default function (state, action) {
});
}
case contextTools.LIGHT_BLUE:
case contextTools.LIGHT_GREEN:
case contextTools.LIGHT_PINK:
case contextTools.LIGHT_YELLOW:
case contextTools.BLUE:
case contextTools.GREEN:
case contextTools.PINK:
case contextTools.YELLOW:
case contextTools.DARK_BLUE:
case contextTools.DARK_GREEN:
case contextTools.DARK_PINK:
case contextTools.DARK_YELLOW: {
case contextTools.LIGHT_BLUE_A:
case contextTools.LIGHT_BLUE_B:
case contextTools.LIGHT_BLUE_C:
case contextTools.DARK_BLUE_A:
case contextTools.DARK_BLUE_B:
case contextTools.DARK_BLUE_C:
case contextTools.PURPLE_A:
case contextTools.PURPLE_B:
case contextTools.PURPLE_C:
case contextTools.PINK_A:
case contextTools.PINK_B:
case contextTools.PINK_C:
case contextTools.RED_A:
case contextTools.RED_B:
case contextTools.RED_C:
case contextTools.YELLOW_A:
case contextTools.YELLOW_B:
case contextTools.YELLOW_C:
case contextTools.GREEN_A:
case contextTools.GREEN_B:
case contextTools.GREEN_C:
case contextTools.BLACK_A:
case contextTools.BLACK_B:
case contextTools.BLACK_C: {
const color = COLOR_STRING_TO_HEX[action.tool];
return updateColor(state, color);
}

3
src/reducer/index.js
View File

@ -4,6 +4,7 @@ import undoFilter from '../utils/undoFilter.js';
import * as actions from '../actions/index.js';
import * as d2Tools from '../constants/d2Tools.js';
import * as d3Tools from '../constants/d3Tools.js';
import { COLOR_STRING_TO_HEX } from '../constants/general.js';
import * as contextTools from '../constants/contextTools.js';
import { ERASER_SIZES, BRUSH_SIZES } from '../constants/d2Constants.js';
import update from 'react-addons-update';
@ -37,7 +38,7 @@ const initialState = {
objectIdCounter: 0,
context: {
solid: true,
color: 0x96cbef
color: COLOR_STRING_TO_HEX[contextTools.LIGHT_BLUE_B]
},
selection: {
transform: new Matrix(),

4
src/shape/shapeToPoints.js
View File

@ -83,7 +83,7 @@ function shapeToPointsRaw(shapeData) {
const { radius, segment } = shapeData.circle;
const points = [];
const circumference = 2 * radius * Math.PI;
const numSegments = circumference;
const numSegments = Math.min(circumference * 2, 64);
for (let rad = 0; rad <= segment; rad += Math.PI * 2 / numSegments) {
const x = Math.sin(rad) * radius;
const y = -Math.cos(rad) * radius;
@ -219,7 +219,7 @@ function shapeToPointsRaw(shapeData) {
}
export const shapeToPointsCornered = memoize(shapeToPointsCorneredRaw, { max: SHAPE_CACHE_LIMIT });
function shapeToPointsCorneredRaw(shapeData, target) {
function shapeToPointsCorneredRaw(shapeData) {
let shapes = shapeToPoints(shapeData);
if (!shapeData.fill && !shapeData.solid) {

87
styles/styles.css
View File

@ -239,7 +239,7 @@
}
#color-picker-tool .menu {
width: 230px;
width: 420px;
flex-wrap: wrap;
justify-content: flex-end;
}
@ -249,42 +249,79 @@
flex-wrap: wrap;
}
#color-light-blue {
fill: #c8e4f7;
#color-light-blue-a {
fill: #bcffff;
}
#color-light-green {
fill: #cbe6c0;
#color-light-blue-b {
fill: #69e1fd;
}
#color-light-pink {
fill: #f8c4d8;
#color-light-blue-c {
fill: #00b8ff;
}
#color-light-yellow {
fill: #f5f5c0;
#color-dark-blue-a {
fill: #c8e2ff;
}
#color-blue {
fill: #92c8ef;
#color-dark-blue-b {
fill: #7dacfc;
}
#color-green {
fill: #99cc81;
#color-dark-blue-c {
fill: #0357ff;
}
#color-pink {
fill: #f28bb1;
#color-purple-a {
fill: #efc9ff;
}
#color-yellow {
fill: #ebea7f;
#color-purple-b {
fill: #c57efc;
}
#color-dark-blue {
fill: #50a8e4;
#color-purple-c {
fill: #820ef9;
}
#color-dark-green {
fill: #5aae31;
#color-pink-a {
fill: #ffc7ee;
}
#color-dark-pink {
fill: #e94481;
#color-pink-b {
fill: #fd7cc1;
}
#color-dark-yellow {
fill: #dfde24;
#color-pink-c {
fill: #fa047b;
}
#color-red-a {
fill: #ffcdce;
}
#color-red-b {
fill: #fd898a;
}
#color-red-c {
fill: #fd898a;
}
#color-yellow-a {
fill: #fffea0;
}
#color-yellow-b {
fill: #fffb39;
}
#color-yellow-c {
fill: #fdac05;
}
#color-green-a {
fill: #daffd4;
}
#color-green-b {
fill: #97f194;
}
#color-green-c {
fill: #31d22d;
}
#color-black-a {
fill: #f4f4f4;
}
#color-black-b {
fill: #7f7f7f;
}
#color-black-c {
fill: #1f1f1f;
}
#color-hole-material {
fill: url(#holepattern);
}

5
webpack.config.js
View File

@ -60,10 +60,7 @@ module.exports = {
}, {
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
loader: 'url-loader?name=images/[name].[ext]'
}
}, {
test: /\.(svg|glsl|d3sketch)$/,