Move solid button to color picker

img/contextmenu/btnColor.svg

@@ -9,9 +9,13 @@
    height="41"
    viewBox="0 0 33 41"
    version="1.1"
-   id="btnColor">
+   id="layer1">
-  <g
+  <defs>
-     id="layer1">
+    <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>

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

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

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 => ({
+      children: [
-        value,
+        { value: contextTools.HOLE_MATERIAL, svg: '#color-picker-empty-fill' },
-        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,

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,
+  fill: false
-  solid: true
 };
 
 export const SHAPE_TYPE_PROPERTIES = {

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;
+      const isSolid = firstSelected ? state.objectsById[firstSelected.id].solid : true;
-      // pick current draw color when color is unknown
+
-      const color = COLOR_HEX_TO_STRING[colorHex] || COLOR_HEX_TO_STRING[state.context.color];
+      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:

src/reducer/index.js

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

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

styles/styles.css

@@ -108,14 +108,8 @@
 #context .menu {
 	z-index: 1;
 	position: absolute;
-	top: 50px;
+	top: 30px;
-	/* Using transform to center submenu
+	left: 30px;
-	   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%);
 }
 #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;