mirror of
https://github.com/Doodle3D/Doodle3D-Core.git
synced 2024-12-22 11:03:48 +01:00
update colors
This commit is contained in:
casperlamboo
parent
9436330d34
commit
bdd4897b95
@ -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';
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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
|
||||
}, {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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(),
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user