vmario/Doodle3D-Core
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Core.git synced 2024-12-22 11:03:48 +01:00
Code Issues Projects Releases Wiki Activity

update colors

Browse Source
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 UNION = 'union-tool';
export const INTERSECT = 'intersect-tool'; export const INTERSECT = 'intersect-tool';
export const LIGHT_BLUE = 'color-light-blue'; export const LIGHT_BLUE_A = 'color-light-blue-a';
export const LIGHT_GREEN = 'color-light-green'; export const LIGHT_BLUE_B = 'color-light-blue-b';
export const LIGHT_PINK = 'color-light-pink'; export const LIGHT_BLUE_C = 'color-light-blue-c';
export const LIGHT_YELLOW = 'color-light-yellow'; export const DARK_BLUE_A = 'color-dark-blue-a';
export const BLUE = 'color-blue'; export const DARK_BLUE_B = 'color-dark-blue-b';
export const GREEN = 'color-green'; export const DARK_BLUE_C = 'color-dark-blue-c';
export const PINK = 'color-pink'; export const PURPLE_A = 'color-purple-a';
export const YELLOW = 'color-yellow'; export const PURPLE_B = 'color-purple-b';
export const DARK_BLUE = 'color-dark-blue'; export const PURPLE_C = 'color-purple-c';
export const DARK_GREEN = 'color-dark-green'; export const PINK_A = 'color-pink-a';
export const DARK_PINK = 'color-dark-pink'; export const PINK_B = 'color-pink-b';
export const DARK_YELLOW = 'color-dark-yellow'; 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 HOLE_MATERIAL = 'color-hole-material';
export const PIPETTE = 'pipette-tool'; export const PIPETTE = 'pipette-tool';
export const COLORS = [ export const COLORS = [
LIGHT_BLUE, LIGHT_BLUE_A,
LIGHT_GREEN, LIGHT_BLUE_B,
LIGHT_PINK, LIGHT_BLUE_C,
LIGHT_YELLOW, DARK_BLUE_A,
BLUE, DARK_BLUE_B,
GREEN, DARK_BLUE_C,
PINK, PURPLE_A,
YELLOW, PURPLE_B,
DARK_BLUE, PURPLE_C,
DARK_GREEN, PINK_A,
DARK_PINK, PINK_B,
DARK_YELLOW 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'; 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 PIXEL_RATIO = 1.0;
export const COLOR_STRING_TO_HEX = { export const COLOR_STRING_TO_HEX = {
[contextTools.LIGHT_BLUE]: 0xc8e4f7, [contextTools.LIGHT_BLUE_A]: 0xbcffff,
[contextTools.LIGHT_GREEN]: 0xcbe6c0, [contextTools.LIGHT_BLUE_B]: 0x69e1fd,
[contextTools.LIGHT_PINK]: 0xf8c4d8, [contextTools.LIGHT_BLUE_C]: 0x00b8ff,
[contextTools.LIGHT_YELLOW]: 0xf5f5c0, [contextTools.DARK_BLUE_A]: 0xc8e2ff,
[contextTools.BLUE]: 0x92c8ef, [contextTools.DARK_BLUE_B]: 0x7dacfc,
[contextTools.GREEN]: 0x99cc81, [contextTools.DARK_BLUE_C]: 0x0357ff,
[contextTools.PINK]: 0xf28bb1, [contextTools.PURPLE_A]: 0xefc9ff,
[contextTools.YELLOW]: 0xebea7f, [contextTools.PURPLE_B]: 0xc57efc,
[contextTools.DARK_BLUE]: 0x50a8e4, [contextTools.PURPLE_C]: 0x820ef9,
[contextTools.DARK_GREEN]: 0x5aae31, [contextTools.PINK_A]: 0xffc7ee,
[contextTools.DARK_PINK]: 0xe94481, [contextTools.PINK_B]: 0xfd7cc1,
[contextTools.DARK_YELLOW]: 0xdfde24 [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, value: contextTools.COLOR_PICKER,
svg: `#btnColor`, svg: `#btnColor`,
selected: contextTools.BLUE, selected: contextTools.LIGHT_BLUE_B,
children: [ children: [
{ value: contextTools.HOLE_MATERIAL, svg: '#color-picker-empty-fill' }, { value: contextTools.HOLE_MATERIAL, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_BLUE, svg: '#color-picker-empty-fill' }, { value: contextTools.LIGHT_BLUE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_GREEN, svg: '#color-picker-empty-fill' }, { value: contextTools.DARK_BLUE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_PINK, svg: '#color-picker-empty-fill' }, { value: contextTools.PURPLE_A, svg: '#color-picker-empty-fill' },
{ value: contextTools.LIGHT_YELLOW, 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.PIPETTE },
{ value: contextTools.BLUE, svg: '#color-picker-empty-fill' }, { value: contextTools.LIGHT_BLUE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.GREEN, svg: '#color-picker-empty-fill' }, { value: contextTools.DARK_BLUE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.PINK, svg: '#color-picker-empty-fill' }, { value: contextTools.PURPLE_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.YELLOW, svg: '#color-picker-empty-fill' }, { value: contextTools.PINK_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_BLUE, svg: '#color-picker-empty-fill' }, { value: contextTools.RED_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_GREEN, svg: '#color-picker-empty-fill' }, { value: contextTools.YELLOW_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_PINK, svg: '#color-picker-empty-fill' }, { value: contextTools.GREEN_B, svg: '#color-picker-empty-fill' },
{ value: contextTools.DARK_YELLOW, 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 ...selectorBehavior
}, { }, {

36
src/reducer/contextReducer.js
View File

@ -69,18 +69,30 @@ export default function (state, action) {
}); });
} }
case contextTools.LIGHT_BLUE: case contextTools.LIGHT_BLUE_A:
case contextTools.LIGHT_GREEN: case contextTools.LIGHT_BLUE_B:
case contextTools.LIGHT_PINK: case contextTools.LIGHT_BLUE_C:
case contextTools.LIGHT_YELLOW: case contextTools.DARK_BLUE_A:
case contextTools.BLUE: case contextTools.DARK_BLUE_B:
case contextTools.GREEN: case contextTools.DARK_BLUE_C:
case contextTools.PINK: case contextTools.PURPLE_A:
case contextTools.YELLOW: case contextTools.PURPLE_B:
case contextTools.DARK_BLUE: case contextTools.PURPLE_C:
case contextTools.DARK_GREEN: case contextTools.PINK_A:
case contextTools.DARK_PINK: case contextTools.PINK_B:
case contextTools.DARK_YELLOW: { 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]; const color = COLOR_STRING_TO_HEX[action.tool];
return updateColor(state, color); 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 actions from '../actions/index.js';
import * as d2Tools from '../constants/d2Tools.js'; import * as d2Tools from '../constants/d2Tools.js';
import * as d3Tools from '../constants/d3Tools.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 * as contextTools from '../constants/contextTools.js';
import { ERASER_SIZES, BRUSH_SIZES } from '../constants/d2Constants.js'; import { ERASER_SIZES, BRUSH_SIZES } from '../constants/d2Constants.js';
import update from 'react-addons-update'; import update from 'react-addons-update';
@ -37,7 +38,7 @@ const initialState = {
objectIdCounter: 0, objectIdCounter: 0,
context: { context: {
solid: true, solid: true,
color: 0x96cbef color: COLOR_STRING_TO_HEX[contextTools.LIGHT_BLUE_B]
}, },
selection: { selection: {
transform: new Matrix(), transform: new Matrix(),

87
styles/styles.css
View File

@ -239,7 +239,7 @@
} }
#color-picker-tool .menu { #color-picker-tool .menu {
width: 230px; width: 420px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
} }
@ -249,42 +249,79 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
#color-light-blue { #color-light-blue-a {
fill: #c8e4f7; fill: #bcffff;
} }
#color-light-green { #color-light-blue-b {
fill: #cbe6c0; fill: #69e1fd;
} }
#color-light-pink { #color-light-blue-c {
fill: #f8c4d8; fill: #00b8ff;
} }
#color-light-yellow { #color-dark-blue-a {
fill: #f5f5c0; fill: #c8e2ff;
} }
#color-blue { #color-dark-blue-b {
fill: #92c8ef; fill: #7dacfc;
} }
#color-green { #color-dark-blue-c {
fill: #99cc81; fill: #0357ff;
} }
#color-pink { #color-purple-a {
fill: #f28bb1; fill: #efc9ff;
} }
#color-yellow { #color-purple-b {
fill: #ebea7f; fill: #c57efc;
} }
#color-dark-blue { #color-purple-c {
fill: #50a8e4; fill: #820ef9;
} }
#color-dark-green { #color-pink-a {
fill: #5aae31; fill: #ffc7ee;
} }
#color-dark-pink { #color-pink-b {
fill: #e94481; fill: #fd7cc1;
} }
#color-dark-yellow { #color-pink-c {
fill: #dfde24; 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 { #color-hole-material {
fill: url(#holepattern); fill: url(#holepattern);
} }