remove inputs - dependencies object

m-dimmitt-pr · Jan 31, 2019 · b874136 · b874136
1 parent 398eced
commit b874136
Showing 1 changed file with 44 additions and 45 deletions.
diff --git a/index.js b/index.js
@@ -17,93 +17,92 @@ const honeyCanvas = (() => {
       }
       return grid
     })()
-    const drawHive = (hive) => {// This will mirror the hive.
+    const drawHive = ({hive}) => {// This will mirror the hive.
       const elements = []
       const root = document.querySelector('#hive')
       const padding = paddingNum
       const size = sizeNum
 
       // IF ADDCLASS DOES NOT GET PASSED AN ELEMENT IT WILL BE A COOL DRAWING PLATFORM.
-      const addClass = ({input: {target: element, className}, dependencies:{indexOf} }) => { // external functions: global:indexOf
+      const addClass = ({element, className}) => { // external functions: global:indexOf
         if (element.className.indexOf(className) === -1) {
           element.className += (' ' + className)
         }
       }
-
-      const removeClass = ({ inputs, dependencies }) => {  // external functions: global: split, filter, join
-        element=inputs.target;
-        className=inputs.value;
+      
+      const removeClass = ({target, value}) => {  // external functions: global: split, filter, join
+        element=target;
+        className=value;
         element.className = element.className.split(' ').filter(x => x !== className).join(' ') }
-      const getElementFromCoords = ({input: coords, dependencies}) => { // external functions: non global: elements, done,
+
+      const getElementFromCoords = ({x, y, elements}) => { // external functions: non global: elements, done,
         // console.log(coords, dependencies)
-        const row = dependencies.elements[coords.y]
-        if (row) { const element = row[coords.x]; return element }
+        const row = elements[y]
+        if (row) { const element = row[x]; return element }
       }
-      const getIntAttr = ({input: {element, attr}}) => { return parseInt(element.getAttribute(attr)) } // external functions: done, global functions parseInt, getAttribute
 
-      const getCoordsFromElement = ({input: element, dependencies: getIntAttr}) => { // external functions: non global: getIntAttr
-        const columnIndex = getIntAttr({input: {element: element, attr: 'data-columnIndex'}});
-        const rowIndex = getIntAttr({input: {element: element, attr: 'data-rowIndex'}})
+      const getIntAttr = ({element, attr}) => { return parseInt(element.getAttribute(attr)) } // external functions: done, global functions parseInt, getAttribute
+
+      const getCoordsFromElement = ({ target, getIntAttr }) => { // external functions: non global: getIntAttr
+        const element = target;
+        const columnIndex = getIntAttr({element: element, attr: 'data-columnIndex'});
+        const rowIndex = getIntAttr({element: element, attr: 'data-rowIndex'})
         return { x: columnIndex, y: rowIndex } }
 
-      const getAdjacentCells = ({input: {coords}, dependencies: {getElementFromCoords}}) => { // external functions: non global: getElementFromCoords, global: filter
+      const getAdjacentCells = ({coords, getElementFromCoords}) => { // external functions: non global: getElementFromCoords, global: filter
         const x = coords.x; const y = coords.y; const n = y - 1;
         const s = y + 1; const wx = x - 1; const ex = x + 1;
         const ny = x % 2 === 1 ? y : n; const sy = x % 2 === 1 ? s : y;
+        // console.log(elements) // global value.
         return [
-          getElementFromCoords({ input: { x: x, y: n }, dependencies: {elements} }),   // N
-          getElementFromCoords({ input: { x: x, y: s }, dependencies: {elements} }),   // S
-          getElementFromCoords({ input: { x: wx, y: ny }, dependencies: {elements} }), // NW
-          getElementFromCoords({ input: { x: ex, y: ny }, dependencies: {elements} }), // NE
-          getElementFromCoords({ input: { x: wx, y: sy }, dependencies: {elements} }), // SW
-          getElementFromCoords({ input: { x: ex, y: sy }, dependencies: {elements} }), // SE
+          getElementFromCoords({  x: x, y: n , elements: elements }),   // N
+          getElementFromCoords({  x: x, y: s , elements: elements }),   // S
+          getElementFromCoords({  x: wx, y: ny , elements: elements }), // NW
+          getElementFromCoords({  x: ex, y: ny , elements: elements }), // NE
+          getElementFromCoords({  x: wx, y: sy , elements: elements }), // SW
+          getElementFromCoords({  x: ex, y: sy , elements: elements }), // SE
         ].filter(x => !!x)
       }
-      const handleCellMouseOver = (event) => { // external functions: getCoordsFromElement, getAdjacentCells, addClass
-        const target = event.target;
-        const coords = getCoordsFromElement({ input: target, dependencies: getIntAttr })
-        addClass( {input: { target:target, className:'hover'}, dependencies: {indexOf:'test'}}  )
 
-        const adjacentCells = getAdjacentCells({ input: {coords: coords}, dependencies: {getElementFromCoords: getElementFromCoords} })
+      const handleCellMouseOver = ({target}) => { // external functions: getCoordsFromElement, getAdjacentCells, addClass
+        const coords = getCoordsFromElement({ target, getIntAttr })
+        addClass({ element:target, className:'hover'})
+
+      const adjacentCells = getAdjacentCells({coords: coords, getElementFromCoords})
         adjacentCells.forEach(cell => {
-          addClass( {input: { target:cell, className:'adjacent'}, dependencies: {indexOf:'test'}} )
+          addClass({ element:cell, className:'adjacent' })
         })
       }
-      const handleCellMouseOut = (event) => { // external functions: removeClass, getCoordsFromElement, getAdjacentCells
-        const target = event.target
-        const coords = getCoordsFromElement({ input: target, dependencies: getIntAttr })
+      const handleCellMouseOut = ({target}) => { // external functions: removeClass, getCoordsFromElement, getAdjacentCells
+        const coords = getCoordsFromElement({ target, getIntAttr })
 
-        removeClass({ inputs: {target: target, value:'hover'}, dependencies: 'test'})
-        const adjacentCells = getAdjacentCells({ input: {coords: coords}, dependencies: {getElementFromCoords: getElementFromCoords} })
+        removeClass({ target: target, value:'hover'})
+        const adjacentCells = getAdjacentCells({coords: coords, getElementFromCoords})
         adjacentCells.forEach(cell => {
-          removeClass({ inputs: {target: cell, value:'adjacent'},dependencies: 'test'})
+          removeClass({target: cell, value:'adjacent'})
         })
       }
-      const cellFactory = ({inputs, dependencies}) => { // external functions: handleCellMouseOver, handleCellMouseOut
+      const cellFactory = ({filled, columnIndex, rowIndex, handleCellMouseOver, handleCellMouseOut }) => { // external functions: handleCellMouseOver, handleCellMouseOut
         // console.log(inputs)
-        let {filled, columnIndex, rowIndex} = inputs
-
         const div = document.createElement('div')
         const className = 'cell' + (filled ? ' filled' : '')
         div.className = className
         if (filled) {
-          div.addEventListener('mouseover', dependencies.handleCellMouseOver)
-          div.addEventListener('mouseout', dependencies.handleCellMouseOut)
+          div.addEventListener('mouseover', handleCellMouseOver)
+          div.addEventListener('mouseout', handleCellMouseOut)
         }
         div.setAttribute('data-columnIndex', columnIndex)
         div.setAttribute('data-rowIndex', rowIndex)
         return div
       }
 
-      const penToPaper = (({inputs, dependencies}) => {
-        let {size, padding, root, elements} = inputs;
-        let {hive, cellFactory} = dependencies;
+      const penToPaper = (({size, padding, root, elements, hive, cellFactory}) => {
         hive.forEach((row, rowIndex) => {
           const elementRow = []
           row.forEach((value, columnIndex) => {
             const cell = cellFactory({
-              inputs: { filled:value, columnIndex:columnIndex, rowIndex:rowIndex},
-              dependencies: { handleCellMouseOver, handleCellMouseOut }
+              filled:value, columnIndex:columnIndex, rowIndex:rowIndex,
+              handleCellMouseOver, handleCellMouseOut 
             })
             const x = (columnIndex * 3 / 4 * size) + padding * columnIndex
             const y = (rowIndex * size + (columnIndex % 2 === 1 ? (1 / 2 * size) : 0)) + padding * rowIndex
@@ -117,8 +116,8 @@ const honeyCanvas = (() => {
       })
 
       penToPaper({
-        inputs: {size: size, padding: padding, root:root, elements:elements},
-        dependencies: {hive: hive, cellFactory: cellFactory}
+        size: size, padding: padding, root:root, elements:elements,
+        hive: hive, cellFactory: cellFactory
       })
     }
     return {
@@ -130,7 +129,7 @@ const honeyCanvas = (() => {
   function init(preset) {
     let p = playground(preset);
     let hivey = p.hive;
-    p.drawHive(hivey);
+    p.drawHive({hive:hivey});
   }
 
   return {