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

Move solid button to color picker

Browse Source
This commit is contained in:
casperlamboo 2017-11-29 13:37:32 +01:00
parent bedfb3f9b8
commit 823009a6ce
9 changed files with 70 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
img/contextmenu/btnColor.svg
View File

@ -9,9 +9,13 @@
height="41"
viewBox="0 0 33 41"
version="1.1"
id="btnColor">
<g
id="layer1">
id="layer1">
<defs>
<pattern id="holepattern" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+DQogIDxyZWN0IHdpZHRoPScxMCcgaGVpZ2h0PScxMCcgZmlsbD0nI2ZmZmZmZicgLz4NCiAgPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzUnIGhlaWdodD0nNScgZmlsbD0nI2NjY2NjYycgLz4NCiAgPHJlY3QgeD0nNScgeT0nNScgd2lkdGg9JzUnIGhlaWdodD0nNScgZmlsbD0nI2NjY2NjYycgLz4NCjwvc3ZnPg==" x="0" y="0" width="10" height="10"> </image>
</pattern>
</defs>
<g id="btnColor">
<path
id="path4500"
d="M 11.808677,36.68746 C 7.212924,34.725567 4.8021574,30.945522 4.7920593,25.685399 c -0.00724,-3.837835 0.8489152,-5.918222 5.3857677,-13.084846 1.631176,-2.576738 3.309732,-5.4893181 3.730127,-6.4725901 1.000065,-2.33888 2.325039,-3.043149 3.811373,-2.025741 0.617372,0.422517 1.122493,1.016003 1.122493,1.318784 0,0.302801 0.924449,1.530589 2.054327,2.728459 3.890677,4.1245911 7.33058,12.4354311 7.311762,17.6652631 -0.0186,5.182298 -2.522018,9.004192 -7.135215,10.893305 -2.115539,0.866287 -7.213028,0.854956 -9.26402,-0.02067 z"
@ -19,6 +23,6 @@
<path
id="path4498"
d="M 11.558303,37.154304 C 9.175071,35.919279 6.3454068,33.081547 5.4754664,31.054132 4.3968749,28.540456 4.5345964,22.881698 5.7388817,20.230837 c 0.547106,-1.20428 2.3629821,-4.404546 4.0352792,-7.111709 1.6722951,-2.707162 3.6069721,-6.0914464 4.2992761,-7.5206194 0.960239,-1.98228 1.557218,-2.59851 2.51737,-2.59851 0.692246,0 1.258629,0.226072 1.258629,0.502388 0,0.276315 1.070155,1.756103 2.378125,3.288429 6.254529,7.3273614 9.636295,18.6248624 7.270218,24.2876934 -0.970842,2.323538 -5.346483,6.154695 -7.527644,6.59094 -2.973146,0.594625 -6.712174,0.365635 -8.411832,-0.515145 z m 8.855785,-3.331188 c 1.050182,-0.498356 2.531925,-1.846748 3.292759,-2.996442 1.203115,-1.818028 1.352314,-2.537412 1.145206,-5.52182 C 24.564936,21.167588 21.375655,13.397201 18.689021,10.289233 L 16.895763,8.2147376 13.871514,12.902712 c -4.7365484,7.342247 -5.8690692,9.889748 -5.8690692,13.201955 0,6.569954 6.4193632,10.56197 12.4116432,7.718449 z m -3.248471,-2.420075 c -1.320264,-0.768986 -1.198926,-1.726723 0.41029,-3.238517 0.752201,-0.706647 1.367637,-1.58104 1.367637,-1.943057 0,-0.362037 0.382686,-0.97585 0.850412,-1.364023 0.709581,-0.588897 1.036141,-0.520045 1.971964,0.415775 1.318608,1.318598 1.059861,2.641475 -0.994115,5.082474 -1.472307,1.749756 -2.091494,1.929576 -3.606188,1.047348 z"
style="fill:#1e2918;stroke-width:2.06760979" />
style="fill:#000000;stroke-width:2.06760979" />
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

5
src/components/InlineIconsLoader.js
View File

@ -4,9 +4,12 @@ import btnColorOption from '../../img/contextmenu/btnColorOption.svg';
import btnColor from '../../img/contextmenu/btnColor.svg';
import injectSheet from 'react-jss';
// if dispaly is set to none patterns don't work
const styles = {
container: {
display: 'none'
position: 'absolute',
opacity: 0.0
// display: 'none'
}
};

9
src/constants/contextTools.js
View File

@ -20,6 +20,7 @@ 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 HOLE_MATERIAL = 'color-hole-material';
export const COLORS = [
LIGHT_BLUE,
@ -64,14 +65,6 @@ export const FILL_TOGGLE_TOOLS = [
FILL_TOGGLE_OUTLINE
];
export const HOLE_TOGGLE_HOLE = 'hole-toggle-hole';
export const HOLE_TOGGLE_SOLID = 'hole-toggle-solid';
export const HOLE_TOGGLE_TOOLS = [
HOLE_TOGGLE_HOLE,
HOLE_TOGGLE_SOLID
];
export const ALIGN_LEFT = 'align-left';
export const ALIGN_HORIZONTAL = 'align-horizontal';
export const ALIGN_RIGHT = 'align-right';

27
src/constants/menu.js
View File

@ -58,12 +58,24 @@ const context = {
{ value: contextTools.DELETE },
{
value: contextTools.COLOR_PICKER,
svg: `#layer1`,
svg: `#btnColor`,
selected: contextTools.BLUE,
children: contextTools.COLORS.map(value => ({
value,
svg: `#color-picker-empty-fill`
})),
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.HOLE_MATERIAL, svg: '#color-picker-empty-fill' },
{ 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' }
],
...selectorBehavior
}, {
value: contextTools.ERASER_SIZE,
@ -80,11 +92,6 @@ const context = {
selected: contextTools.FILL_TOGGLE_FILL,
children: contextTools.FILL_TOGGLE_TOOLS.map(value => ({ value })),
...toggleBehavior
}, {
value: contextTools.HOLE_TOGGLE,
selected: contextTools.HOLE_TOGGLE_SOLID,
children: contextTools.HOLE_TOGGLE_TOOLS.map(value => ({ value })),
...toggleBehavior
}, {
value: contextTools.ALIGN,
selected: contextTools.ALIGN_HORIZONTAL,

3
src/constants/shapeTypeProperties.js
View File

@ -20,8 +20,7 @@ const defaultProperties = {
z: 0.0,
sculpt: [{ pos: 0.0, scale: 1.0 }, { pos: 1.0, scale: 1.0 }],
twist: 0.0,
fill: false,
solid: true
fill: false
};
export const SHAPE_TYPE_PROPERTIES = {

52
src/reducer/contextReducer.js
View File

@ -14,19 +14,23 @@ export default function (state, action) {
let menus = state.menus;
const [firstSelected] = state.selection.objects;
const colorHex = firstSelected ? state.objectsById[firstSelected.id].color : state.context.color;
// pick current draw color when color is unknown
const color = COLOR_HEX_TO_STRING[colorHex] || COLOR_HEX_TO_STRING[state.context.color];
const isSolid = firstSelected ? state.objectsById[firstSelected.id].solid : true;
let color;
if (!isSolid) {
color = contextTools.HOLE_MATERIAL;
} else {
const colorHex = firstSelected ? state.objectsById[firstSelected.id].color : state.context.color;
// pick current draw color when color is unknown
color = COLOR_HEX_TO_STRING[colorHex] || COLOR_HEX_TO_STRING[state.context.color];
}
menus = select(menus, color);
const fillBool = firstSelected && state.objectsById[firstSelected.id].fill;
const fill = fillBool ? contextTools.FILL_TOGGLE_FILL : contextTools.FILL_TOGGLE_OUTLINE;
menus = select(menus, fill);
const solidBool = firstSelected && state.objectsById[firstSelected.id].solid;
const solid = solidBool ? contextTools.HOLE_TOGGLE_SOLID : contextTools.HOLE_TOGGLE_HOLE;
menus = select(menus, solid);
return update(state, { menus: { $set: menus } });
}
@ -36,7 +40,7 @@ export default function (state, action) {
switch (action.type) {
case actions.D2_CHANGE_TOOL: {
const color = COLOR_HEX_TO_STRING[state.context.color];
const color = state.context.solid ? COLOR_HEX_TO_STRING[state.context.color] : contextTools.HOLE_MATERIAL;
return update(state, {
menus: { $set: select(state.menus, color) }
});
@ -47,6 +51,18 @@ export default function (state, action) {
}
switch (action.tool) {
case contextTools.HOLE_MATERIAL: {
return update(state, {
objectsById: state.selection.objects.reduce((updateObject, { id }) => {
updateObject[id] = { solid: { $set: false } };
return updateObject;
}, {}),
context: {
solid: { $set: false }
}
});
}
case contextTools.LIGHT_BLUE:
case contextTools.LIGHT_GREEN:
case contextTools.LIGHT_PINK:
@ -62,10 +78,14 @@ export default function (state, action) {
const color = COLOR_STRING_TO_HEX[action.tool];
return update(state, {
objectsById: state.selection.objects.reduce((updateObject, { id }) => {
updateObject[id] = { color: { $set: color } };
updateObject[id] = {
color: { $set: color },
solid: { $set: true }
};
return updateObject;
}, {}),
context: {
solid: { $set: true },
color: { $set: color }
}
});
@ -111,20 +131,6 @@ export default function (state, action) {
});
}
case contextTools.HOLE_TOGGLE_HOLE:
case contextTools.HOLE_TOGGLE_SOLID: {
const solid = action.tool === contextTools.HOLE_TOGGLE_SOLID;
return update(state, {
objectsById: state.selection.objects.reduce((updateObject, { id }) => {
const { type } = state.objectsById[id];
const d3Visible = SHAPE_TYPE_PROPERTIES[type].D3Visible;
if (d3Visible) updateObject[id] = { solid: { $set: solid } };
return updateObject;
}, {})
});
}
case contextTools.ALIGN_LEFT:
case contextTools.ALIGN_HORIZONTAL:
case contextTools.ALIGN_RIGHT:

1
src/reducer/index.js
View File

@ -36,6 +36,7 @@ const initialState = {
activeSpace: 'world',
objectIdCounter: 0,
context: {
solid: true,
color: 0x96cbef
},
selection: {

1
src/reducer/objectReducers.js
View File

@ -15,6 +15,7 @@ export function addObject(state, object, UID = generateUID(state)) {
object = {
...defaultProperties,
color: state.context.color,
solid: state.context.solid,
space: state.activeSpace,
...object,
UID

17
styles/styles.css
View File

@ -108,14 +108,8 @@
#context .menu {
z-index: 1;
position: absolute;
top: 50px;
/* Using transform to center submenu
Needed because some browser don't support flex-box's changed behaivior:
https://developers.google.com/web/updates/2016/06/absolute-positioned-children
Can't use the bottom toolbar's positioning system
because this submenu needs to be in line with the flex direction */
left: 50%;
transform: translateX(-50%);
top: 30px;
left: 30px;
}
#context .button {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
@ -253,8 +247,9 @@
}
#color-picker-tool .menu {
width: 185px;
width: 230px;
flex-wrap: wrap;
justify-content: flex-end;
}
#align-tool .menu {
@ -298,6 +293,10 @@
#color-dark-yellow, #color-dark-yellow-menu {
fill: #dfde24;
}
#color-hole-material, #color-hole-material-menu {
fill: url(#holepattern);
}
/* menu's */
.menu {
list-style: none;