margins.js

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else {
		var a = factory();
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "top_margin$", function() { return top_margin$; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "bottom_margin$", function() { return bottom_margin$; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "num_bars", function() { return num_bars; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "gap$", function() { return gap$; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "bar_height$", function() { return bar_height$; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "container_height$", function() { return container_height$; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "container_height", function() { return container_height; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "top_margin", function() { return top_margin; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "bottom_margin", function() { return bottom_margin; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "gap", function() { return gap; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "bar_height", function() { return bar_height; });
const top_margin$ = ({
  top_margin$_in
}) => top_margin$_in;
const bottom_margin$ = ({
  bottom_margin$_in
}) => bottom_margin$_in;
const num_bars = ({
  num_bars_in
}) => num_bars_in; // not unlockable (fut: possibly, with a remainder?)

const gap$ = ({
  gap$_in
}) => gap$_in;
const bar_height$ = ({
  bar_height$_in
}) => bar_height$_in;
const container_height$ = ({
  container_height$_in
}) => container_height$_in; // the formula we are interested in (following example Bret Victor uses):
//    top_margin + bottom_margin + (num_bars-1) * gap + num_bars * bar_height = container_height

const container_height = ({
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) => container_height$({
  container_height$_in
}) != undefined ? container_height$({
  container_height$_in
}) // nullish coalescing not working TODO fix
: top_margin({
  top_margin$_in,
  container_height$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) + bottom_margin({
  bottom_margin$_in,
  container_height$_in,
  top_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) + (num_bars({
  num_bars_in
}) - 1) * gap({
  gap$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  bar_height$_in
}) + num_bars({
  num_bars_in
}) * bar_height({
  bar_height$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in
}); // I do manual algebraic manipulation below, some tools can do this auto, investigate?

const top_margin = ({
  top_margin$_in,
  container_height$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) => top_margin$({
  top_margin$_in
}) != undefined ? top_margin$({
  top_margin$_in
}) : container_height({
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - (bottom_margin({
  bottom_margin$_in,
  container_height$_in,
  top_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) + (num_bars({
  num_bars_in
}) - 1) * gap({
  gap$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  bar_height$_in
}) + num_bars({
  num_bars_in
}) * bar_height({
  bar_height$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in
}));
const bottom_margin = ({
  bottom_margin$_in,
  container_height$_in,
  top_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) => bottom_margin$({
  bottom_margin$_in
}) != undefined ? bottom_margin$({
  bottom_margin$_in
}) : container_height({
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - (top_margin({
  top_margin$_in,
  container_height$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) + (num_bars({
  num_bars_in
}) - 1) * gap({
  gap$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  bar_height$_in
}) + num_bars({
  num_bars_in
}) * bar_height({
  bar_height$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in
}));
const gap = ({
  gap$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  bar_height$_in
}) => gap$({
  gap$_in
}) != undefined ? gap$({
  gap$_in
}) : (container_height({
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - top_margin({
  top_margin$_in,
  container_height$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - bottom_margin({
  bottom_margin$_in,
  container_height$_in,
  top_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - num_bars({
  num_bars_in
}) * bar_height({
  bar_height$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in
})) / (num_bars({
  num_bars_in
}) - 1);
const bar_height = ({
  bar_height$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in
}) => bar_height$({
  bar_height$_in
}) != undefined ? bar_height$({
  bar_height$_in
}) : (container_height({
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - top_margin({
  top_margin$_in,
  container_height$_in,
  bottom_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - bottom_margin({
  bottom_margin$_in,
  container_height$_in,
  top_margin$_in,
  num_bars_in,
  gap$_in,
  bar_height$_in
}) - gap({
  gap$_in,
  container_height$_in,
  top_margin$_in,
  bottom_margin$_in,
  num_bars_in,
  bar_height$_in
}) * (num_bars({
  num_bars_in
}) - 1)) / num_bars({
  num_bars_in
});

/***/ })
/******/ ]);
});
//# sourceMappingURL=margins.js.map

margins.js.map

{"version":3,"sources":["webpack:///../../../webpack/universalModuleDefinition","webpack:///../../../webpack/bootstrap","webpack:///../../../margins.cul.js"],"names":["top_margin$","top_margin$_in","bottom_margin$","bottom_margin$_in","num_bars","num_bars_in","gap$","gap$_in","bar_height$","bar_height$_in","container_height$","container_height$_in","container_height","undefined","top_margin","bottom_margin","gap","bar_height"],"mappings":"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","file":"margins.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(this, function() {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","export const top_margin$ = () => top_margin$_in;\r\nexport const bottom_margin$ = () => bottom_margin$_in;\r\nexport const num_bars = () => num_bars_in; // not unlockable (fut: possibly, with a remainder?)\r\nexport const gap$ = () => gap$_in;\r\nexport const bar_height$ = () => bar_height$_in;\r\nexport const container_height$ = () => container_height$_in;\r\n\r\n// the formula we are interested in (following example Bret Victor uses):\r\n//    top_margin + bottom_margin + (num_bars-1) * gap + num_bars * bar_height = container_height\r\n\r\nexport const container_height = () =>\r\n  container_height$() != undefined\r\n    ? container_height$() // nullish coalescing not working TODO fix\r\n    : top_margin() +\r\n      bottom_margin() +\r\n      (num_bars() - 1) * gap() +\r\n      num_bars() * bar_height();\r\n\r\n// I do manual algebraic manipulation below, some tools can do this auto, investigate?\r\n\r\nexport const top_margin = () =>\r\n  top_margin$() != undefined\r\n    ? top_margin$()\r\n    : container_height() -\r\n      (bottom_margin() + (num_bars() - 1) * gap() + num_bars() * bar_height());\r\n\r\nexport const bottom_margin = () =>\r\n  bottom_margin$() != undefined\r\n    ? bottom_margin$()\r\n    : container_height() -\r\n      (top_margin() + (num_bars() - 1) * gap() + num_bars() * bar_height());\r\n\r\nexport const gap = () =>\r\n  gap$() != undefined\r\n    ? gap$()\r\n    : (container_height() -\r\n        top_margin() -\r\n        bottom_margin() -\r\n        num_bars() * bar_height()) /\r\n      (num_bars() - 1);\r\n\r\nexport const bar_height = () =>\r\n  bar_height$() != undefined\r\n    ? bar_height$()\r\n    : (container_height() -\r\n        top_margin() -\r\n        bottom_margin() -\r\n        gap() * (num_bars() - 1)) /\r\n      num_bars();\r\n"],"sourceRoot":""}

use-margins.js

var margins = require('./margins');

console.log(
  margins.container_height({
    top_margin$_in: 60,
    bottom_margin$_in: 140,
    num_bars_in: 9,
    gap$_in: 20,
    bar_height$_in: 100,
  })
); // 1260? yes

console.log(
  margins.top_margin({
    bottom_margin$_in: 140,
    container_height$_in: 1260,
    num_bars_in: 9,
    gap$_in: 20,
    bar_height$_in: 100,
  })
); // 60? yes

console.log(
  margins.gap({
    top_margin$_in: 60,
    bottom_margin$_in: 140,
    num_bars_in: 9,
    container_height$_in: 1260,
    bar_height$_in: 100,
  })
); // 20? yes

console.log(
  margins.bar_height({
    top_margin$_in: 60,
    bottom_margin$_in: 140,
    num_bars_in: 9,
    container_height$_in: 1260,
    gap$_in: 20,
  })
); // 100? yes