vmario
/
Doodle3D-Core
mirror of https://github.com/Doodle3D/Doodle3D-Core.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

update colors

This commit is contained in:
casperlamboo 2017-12-07 16:43:20 +01:00
parent 9436330d34
commit bdd4897b95
6 changed files with 185 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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';

36
src/constants/general.js
View File

@ -5,16 +5,28 @@ 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
}, {

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(),

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);
}