From 823009a6ce8e82905a82c9e3cfe68a8b903211eb Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Wed, 29 Nov 2017 13:37:32 +0100 Subject: [PATCH] Move solid button to color picker --- img/contextmenu/btnColor.svg | 12 ++++--- src/components/InlineIconsLoader.js | 5 ++- src/constants/contextTools.js | 9 +---- src/constants/menu.js | 27 +++++++++------ src/constants/shapeTypeProperties.js | 3 +- src/reducer/contextReducer.js | 52 ++++++++++++++++------------ src/reducer/index.js | 1 + src/reducer/objectReducers.js | 1 + styles/styles.css | 17 +++++---- 9 files changed, 70 insertions(+), 57 deletions(-) diff --git a/img/contextmenu/btnColor.svg b/img/contextmenu/btnColor.svg index f08685e..905bde8 100644 --- a/img/contextmenu/btnColor.svg +++ b/img/contextmenu/btnColor.svg @@ -9,9 +9,13 @@ height="41" viewBox="0 0 33 41" version="1.1" - id="btnColor"> - + id="layer1"> + + + + + + + style="fill:#000000;stroke-width:2.06760979" /> diff --git a/src/components/InlineIconsLoader.js b/src/components/InlineIconsLoader.js index d4a6a19..fab5857 100644 --- a/src/components/InlineIconsLoader.js +++ b/src/components/InlineIconsLoader.js @@ -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' } }; diff --git a/src/constants/contextTools.js b/src/constants/contextTools.js index c846252..74f1bcb 100644 --- a/src/constants/contextTools.js +++ b/src/constants/contextTools.js @@ -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'; diff --git a/src/constants/menu.js b/src/constants/menu.js index 96d3d6e..75e5c7b 100644 --- a/src/constants/menu.js +++ b/src/constants/menu.js @@ -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, diff --git a/src/constants/shapeTypeProperties.js b/src/constants/shapeTypeProperties.js index 4e2f0a4..f09ba3d 100644 --- a/src/constants/shapeTypeProperties.js +++ b/src/constants/shapeTypeProperties.js @@ -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 = { diff --git a/src/reducer/contextReducer.js b/src/reducer/contextReducer.js index 4e6f5b1..75bbbe7 100644 --- a/src/reducer/contextReducer.js +++ b/src/reducer/contextReducer.js @@ -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: diff --git a/src/reducer/index.js b/src/reducer/index.js index e82be84..694da73 100644 --- a/src/reducer/index.js +++ b/src/reducer/index.js @@ -36,6 +36,7 @@ const initialState = { activeSpace: 'world', objectIdCounter: 0, context: { + solid: true, color: 0x96cbef }, selection: { diff --git a/src/reducer/objectReducers.js b/src/reducer/objectReducers.js index 69f207a..bbbcccc 100644 --- a/src/reducer/objectReducers.js +++ b/src/reducer/objectReducers.js @@ -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 diff --git a/styles/styles.css b/styles/styles.css index 91bd081..44aead2 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -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;