commit 7d860ad2259a69ab0260888bed0ce465c4c5f55c Author: Ivan Danyliuk Date: Wed Jul 4 18:56:18 2018 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c5beb88 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +whispervis +node_modules/ +network.json +data.json +propagation.json diff --git a/main.go b/main.go new file mode 100644 index 0000000..6c74722 --- /dev/null +++ b/main.go @@ -0,0 +1,45 @@ +package main + +import ( + "flag" + "log" + + "github.com/divan/graph-experiments/graph" + "github.com/divan/graph-experiments/layout" +) + +func main() { + iterations := flag.Int("i", 600, "Graph layout iterations to run (0 = auto, buggy)") + flag.Parse() + + data, err := graph.NewGraphFromJSON("network.json") + if err != nil { + log.Fatal(err) + } + log.Printf("Loaded graph: %d nodes, %d links\n", len(data.Nodes()), len(data.Links())) + + plog, err := LoadPropagationData("propagation.json") + if err != nil { + log.Fatal(err) + } + log.Printf("Loaded propagation data: %d timestamps\n", len(plog.Timestamps)) + + log.Printf("Initializing layout...") + repelling := layout.NewGravityForce(-100.0, layout.BarneHutMethod) + springs := layout.NewSpringForce(0.01, 5.0, layout.ForEachLink) + drag := layout.NewDragForce(0.4, layout.ForEachNode) + layout3D := layout.New(data, repelling, springs, drag) + + ws := NewWSServer(layout3D) + if *iterations == 0 { + ws.layout.Calculate() + } else { + ws.layout.CalculateN(*iterations) + } + ws.updateGraph(data) + ws.updatePropagationData(plog) + + log.Printf("Starting web server...") + startWeb(ws) + select {} +} diff --git a/propagation.go b/propagation.go new file mode 100644 index 0000000..46bdf02 --- /dev/null +++ b/propagation.go @@ -0,0 +1,30 @@ +package main + +import ( + "encoding/json" + "os" +) + +// PropagationLog represnts log of p2p message propagation +// with relative timestamps (starting from T0). +type PropagationLog struct { + Timestamps []int // timestamps in milliseconds starting from T0 + Indices [][]int // indices of links for each step, len should be equal to len of Timestamps field + Nodes [][]int // indices of nodes involved +} + +func LoadPropagationData(filename string) (*PropagationLog, error) { + fd, err := os.Open(filename) + if err != nil { + return nil, err + } + defer fd.Close() + + var plog PropagationLog + err = json.NewDecoder(fd).Decode(&plog) + if err != nil { + return nil, err + } + + return &plog, nil +} diff --git a/web.go b/web.go new file mode 100644 index 0000000..61a4259 --- /dev/null +++ b/web.go @@ -0,0 +1,53 @@ +//go:generate browserify web/index.js web/js/ws.js -o web/bundle.js +package main + +import ( + "fmt" + "log" + "net/http" + "os/exec" + "runtime" +) + +func startWeb(ws *WSServer) { + port := ":20002" + go func() { + fs := http.FileServer(http.Dir("web")) + http.Handle("/", noCacheMiddleware(fs)) + http.HandleFunc("/ws", ws.Handle) + log.Fatal(http.ListenAndServe(port, nil)) + }() + url := "http://localhost" + port + fmt.Println("Please go to this url:", url) + /* + time.Sleep(1 * time.Second) + startBrowser(url) + */ +} + +// startBrowser tries to open the URL in a browser +// and reports whether it succeeds. +// +// Orig. code: golang.org/x/tools/cmd/cover/html.go +func startBrowser(url string) error { + // try to start the browser + var args []string + switch runtime.GOOS { + case "darwin": + args = []string{"open"} + case "windows": + args = []string{"cmd", "/c", "start"} + default: + args = []string{"xdg-open"} + } + cmd := exec.Command(args[0], append(args[1:], url)...) + fmt.Println("If browser window didn't appear, please go to this url:", url) + return cmd.Start() +} + +func noCacheMiddleware(h http.Handler) http.Handler { + return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { + w.Header().Add("Cache-Control", "max-age=0, no-cache") + h.ServeHTTP(w, r) + }) +} diff --git a/web/bundle.js b/web/bundle.js new file mode 100644 index 0000000..26d2bac --- /dev/null +++ b/web/bundle.js @@ -0,0 +1,5712 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o { + link.source = link["source"]; + link.target = link["target"]; + }); + + // Add WebGL objects + // Clear the place + while (nodesGroup.children.length) { + nodesGroup.remove(nodesGroup.children[0]) + } + while (linksGroup.children.length) { + linksGroup.remove(linksGroup.children[0]) + } + + // Render nodes + const nameAccessor = accessorFn("name"); + const valAccessor = accessorFn("weight"); + const colorAccessor = accessorFn("color"); + let sphereGeometries = {}; // indexed by node value + let sphereMaterials = {}; // indexed by color + + autoColorNodes(graphData.nodes); + graphData.nodes.forEach((node, idx) => { + let val = valAccessor(node) || 1; + if (!sphereGeometries.hasOwnProperty(val)) { + sphereGeometries[val] = NewEthereumGeometry(val); + } + + const color = colorAccessor(node); + if (!sphereMaterials.hasOwnProperty(color)) { + sphereMaterials[color] = new THREE.MeshStandardMaterial({ + color: colorStr2Hex(color || '#00ff00'), + transparent: false, + opacity: 0.75 + }); + } + + const sphere = new THREE.Mesh(sphereGeometries[val], sphereMaterials[color]); + + sphere.name = nameAccessor(node); // Add label + sphere.__data = node; // Attach node data + + nodesGroup.add(node.__sphere = sphere); + if (positions[idx] !== undefined) { + sphere.position.set(positions[idx].x, positions[idx].y, positions[idx].z); + } + }); + + const linkColorAccessor = accessorFn("color"); + let lineMaterials = {}; // indexed by color + console.log("Adding links", graphData.links.lengh); + graphData.links.forEach(link => { + const color = linkColorAccessor(link); + if (!lineMaterials.hasOwnProperty(color)) { + lineMaterials[color] = new THREE.LineBasicMaterial({ + color: /*colorStr2Hex(color || '#f0f0f0')*/ '#f0f0f0', + transparent: true, + opacity: 0.4, + }); + } + + const geometry = new THREE.BufferGeometry(); + geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3)); + const lineMaterial = lineMaterials[color]; + const line = new THREE.Line(geometry, lineMaterial); + + line.renderOrder = 10; // Prevent visual glitches of dark lines on top of spheres by rendering them last + + linksGroup.add(link.__line = line); + }); + + // correct camera position + if (camera.position.x === 0 && camera.position.y === 0) { + // If camera still in default position (not user modified) + camera.lookAt(nodesGroup.position); + camera.position.z = Math.cbrt(graphData.nodes.length) * 50; + } + + function resizeCanvas() { + if (width && height) { + renderer.setSize(width, height); + camera.aspect = width/height; + camera.updateProjectionMatrix(); + } + } +}; + +var redrawGraph = function () { + graphData.nodes.forEach((node, idx) => { + const sphere = node.__sphere; + if (!sphere) return; + + sphere.position.x = positions[idx].x; + sphere.position.y = positions[idx].y || 0; + sphere.position.z = positions[idx].z || 0; + }); + + + graphData.links.forEach(link => { + const line = link.__line; + if (!line) return; + + linePos = line.geometry.attributes.position; + + // TODO: move this index into map/cache or even into original graph data + let start, end; + for (let i = 0; i < graphData.nodes.length; i++) { + if (graphData.nodes[i].id === link.source) { + start = i; + break; + } + } + for (let i = 0; i < graphData.nodes.length; i++) { + if (graphData.nodes[i].id === link["target"]) { + end = i; + break; + } + } + + linePos.array[0] = positions[start].x; + linePos.array[1] = positions[start].y || 0; + linePos.array[2] = positions[start].z || 0; + linePos.array[3] = positions[end].x; + linePos.array[4] = positions[end].y || 0; + linePos.array[5] = positions[end].z || 0; + + linePos.needsUpdate = true; + line.geometry.computeBoundingSphere(); + }); +}; + +// replay restarts propagation animation. +function replay() { + console.log(linksGroup, plog); + animatePropagation(nodesGroup, linksGroup, plog); +} +// js functions after browserify cannot be accessed from html, +// so instead of using onclick="replay()" we need to attach listener +// here. +// Did I already say that whole frontend ecosystem is a one giant +// museum of hacks for hacks on top of hacks? +var replayButton = document.getElementById('replayButton'); +replayButton.addEventListener('click', replay); + +animate(); + +},{"./js/animation.js":2,"./js/colors.js":3,"./js/ethereum.js":4,"./js/keys.js":5,"./js/shitty_hacks.js":6,"dat.gui":11,"stats-js":12}],2:[function(require,module,exports){ +var gradient = require('d3-scale-chromatic').interpolateCool; + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +let mat = new THREE.LineBasicMaterial({ + color: '#cc0000', + transparent: true, + opacity: 0.7 +}); + +// Params +var restoreTimeout = 250; // ms +function updateRestoreTimeout(value) { + console.log("Updating restore timeout to ", value); + restoreTimeout = value; +} +var delayFactor = 3; // multiplication factor for blink timeout +function updateDelayFactor(value) { + delayFactor = value; +} + +function blinkLink(links, indices) { + indices.forEach(idx => { + if (links.children[idx].material === mat) { + return + } + let oldMat = links.children[idx].material; + links.children[idx].material = mat; + + console.log("Blinking with restore timeout", restoreTimeout); + setTimeout(function() { + links.children[idx].material = oldMat; + }, restoreTimeout); + }); +} + +var nodeCounters = {}; +var maxCounter = 0; +var nodeMaterials = {}; + +// blinkNodes updates nodes color increasing its temperature +// in a heatmap style +function blinkNodes(nodes, indices) { + indices.forEach(idx => { + nodeCounters[idx] = nodeCounters[idx] ? nodeCounters[idx]+1 : 1; + if (nodeCounters[idx] > maxCounter) { + maxCounter = nodeCounters[idx]; + } + }); + // TODO: FIXME: how to make simple map counter without this fucking bullshit? + Object.keys(nodeCounters).forEach(idx => { + let c = nodeCounters[idx]; + let scale = c / maxCounter; + let color = gradient(scale); + if (nodeMaterials[color] === undefined) { + nodeMaterials[color] = new THREE.MeshStandardMaterial({color: new THREE.Color(color)}); + } + nodes.children[idx].material = nodeMaterials[color]; + }); +} + +function animatePropagation(nodes, links, plog) { + maxCounter = 0; + nodeCounters = {}; + plog.Timestamps.forEach((ts, idx) => { + setTimeout(function() { + blinkLink(links, plog.Indices[idx]); + }, ts*delayFactor); + setTimeout(function() { + blinkNodes(nodes, plog.Nodes[idx]); + }, ts*delayFactor); + }); +} + +module.exports = { animatePropagation, + restoreTimeout, updateRestoreTimeout, + delayFactor, updateDelayFactor } + +},{"d3-scale-chromatic":10}],3:[function(require,module,exports){ +var schemePaired = require('d3-scale-chromatic').schemePaired; +var tinyColor = require('tinycolor2'); + +const colorStr2Hex = str => isNaN(str) ? parseInt(tinyColor(str).toHex(), 16) : str; + +function autoColorNodes(nodes) { + const colors = schemePaired; // Paired color set from color brewer + + const uncoloredNodes = nodes.filter(node => !node.color); + const nodeGroups = {}; + + uncoloredNodes.forEach(node => { nodeGroups[node["group"]] = null }); + Object.keys(nodeGroups).forEach((group, idx) => { nodeGroups[group] = idx }); + + uncoloredNodes.forEach(node => { + node.color = colorStr2Hex(colors[nodeGroups[node["group"]] % colors.length]); + }); +} + +module.exports = { colorStr2Hex, autoColorNodes }; + +},{"d3-scale-chromatic":10,"tinycolor2":13}],4:[function(require,module,exports){ +function NewEthereumGeometry(scale) { + let geom = new THREE.Geometry(); + geom.vertices.push( + new THREE.Vector3( scale*1, 0, 0 ), + new THREE.Vector3( -scale*1, 0, 0 ), + new THREE.Vector3( 0, scale*1.5, 0 ), + new THREE.Vector3( 0, scale*-1.5, 0 ), + new THREE.Vector3( 0, 0, scale*1 ), + new THREE.Vector3( 0, 0, -scale*1 ) + ); + geom.faces.push( + new THREE.Face3( 0, 2, 4 ), + new THREE.Face3( 0, 4, 3 ), + new THREE.Face3( 0, 3, 5 ), + new THREE.Face3( 0, 5, 2 ), + new THREE.Face3( 1, 2, 5 ), + new THREE.Face3( 1, 5, 3 ), + new THREE.Face3( 1, 3, 4 ), + new THREE.Face3( 1, 4, 2 ) + ); + geom.computeBoundingSphere(); + geom.computeFaceNormals(); + return geom; +} + +module.exports = { NewEthereumGeometry }; + +},{}],5:[function(require,module,exports){ +document.addEventListener("keydown", function(event) { +}); + +},{}],6:[function(require,module,exports){ +// accessorFn +function accessorFn(p) { + if (p instanceof Function) { + return p // fn + } + + if (typeof p === 'string') { + return function(obj) { + return obj[p]; // property name + } + } + + return function (obj){ + return p; // constant + } +} + +module.exports = accessorFn; + +},{}],7:[function(require,module,exports){ +var graph = require('../index.js'); + +var ws = new WebSocket('ws://' + window.location.host + '/ws'); + +// request graphData and initial positions from websocket connection +ws.onopen = function (event) { + ws.send('{"cmd": "init"}'); +}; + +ws.onmessage = function (event) { + let msg = JSON.parse(event.data); + switch(msg.type) { + case "graph": + graph.setGraphData(msg.graph); + break; + case "propagation": + graph.setPropagation(msg.propagation); + break; + case "positions": + console.log("Updating positions..."); + graph.updatePositions(msg.positions); + break; + } +} + +module.exports = { ws }; + +},{"../index.js":1}],8:[function(require,module,exports){ +// https://d3js.org/d3-color/ Version 1.0.3. Copyright 2017 Mike Bostock. +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (factory((global.d3 = global.d3 || {}))); +}(this, (function (exports) { 'use strict'; + +var define = function(constructor, factory, prototype) { + constructor.prototype = factory.prototype = prototype; + prototype.constructor = constructor; +}; + +function extend(parent, definition) { + var prototype = Object.create(parent.prototype); + for (var key in definition) prototype[key] = definition[key]; + return prototype; +} + +function Color() {} + +var darker = 0.7; +var brighter = 1 / darker; + +var reI = "\\s*([+-]?\\d+)\\s*"; +var reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*"; +var reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*"; +var reHex3 = /^#([0-9a-f]{3})$/; +var reHex6 = /^#([0-9a-f]{6})$/; +var reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"); +var reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"); +var reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"); +var reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"); +var reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"); +var reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$"); + +var named = { + aliceblue: 0xf0f8ff, + antiquewhite: 0xfaebd7, + aqua: 0x00ffff, + aquamarine: 0x7fffd4, + azure: 0xf0ffff, + beige: 0xf5f5dc, + bisque: 0xffe4c4, + black: 0x000000, + blanchedalmond: 0xffebcd, + blue: 0x0000ff, + blueviolet: 0x8a2be2, + brown: 0xa52a2a, + burlywood: 0xdeb887, + cadetblue: 0x5f9ea0, + chartreuse: 0x7fff00, + chocolate: 0xd2691e, + coral: 0xff7f50, + cornflowerblue: 0x6495ed, + cornsilk: 0xfff8dc, + crimson: 0xdc143c, + cyan: 0x00ffff, + darkblue: 0x00008b, + darkcyan: 0x008b8b, + darkgoldenrod: 0xb8860b, + darkgray: 0xa9a9a9, + darkgreen: 0x006400, + darkgrey: 0xa9a9a9, + darkkhaki: 0xbdb76b, + darkmagenta: 0x8b008b, + darkolivegreen: 0x556b2f, + darkorange: 0xff8c00, + darkorchid: 0x9932cc, + darkred: 0x8b0000, + darksalmon: 0xe9967a, + darkseagreen: 0x8fbc8f, + darkslateblue: 0x483d8b, + darkslategray: 0x2f4f4f, + darkslategrey: 0x2f4f4f, + darkturquoise: 0x00ced1, + darkviolet: 0x9400d3, + deeppink: 0xff1493, + deepskyblue: 0x00bfff, + dimgray: 0x696969, + dimgrey: 0x696969, + dodgerblue: 0x1e90ff, + firebrick: 0xb22222, + floralwhite: 0xfffaf0, + forestgreen: 0x228b22, + fuchsia: 0xff00ff, + gainsboro: 0xdcdcdc, + ghostwhite: 0xf8f8ff, + gold: 0xffd700, + goldenrod: 0xdaa520, + gray: 0x808080, + green: 0x008000, + greenyellow: 0xadff2f, + grey: 0x808080, + honeydew: 0xf0fff0, + hotpink: 0xff69b4, + indianred: 0xcd5c5c, + indigo: 0x4b0082, + ivory: 0xfffff0, + khaki: 0xf0e68c, + lavender: 0xe6e6fa, + lavenderblush: 0xfff0f5, + lawngreen: 0x7cfc00, + lemonchiffon: 0xfffacd, + lightblue: 0xadd8e6, + lightcoral: 0xf08080, + lightcyan: 0xe0ffff, + lightgoldenrodyellow: 0xfafad2, + lightgray: 0xd3d3d3, + lightgreen: 0x90ee90, + lightgrey: 0xd3d3d3, + lightpink: 0xffb6c1, + lightsalmon: 0xffa07a, + lightseagreen: 0x20b2aa, + lightskyblue: 0x87cefa, + lightslategray: 0x778899, + lightslategrey: 0x778899, + lightsteelblue: 0xb0c4de, + lightyellow: 0xffffe0, + lime: 0x00ff00, + limegreen: 0x32cd32, + linen: 0xfaf0e6, + magenta: 0xff00ff, + maroon: 0x800000, + mediumaquamarine: 0x66cdaa, + mediumblue: 0x0000cd, + mediumorchid: 0xba55d3, + mediumpurple: 0x9370db, + mediumseagreen: 0x3cb371, + mediumslateblue: 0x7b68ee, + mediumspringgreen: 0x00fa9a, + mediumturquoise: 0x48d1cc, + mediumvioletred: 0xc71585, + midnightblue: 0x191970, + mintcream: 0xf5fffa, + mistyrose: 0xffe4e1, + moccasin: 0xffe4b5, + navajowhite: 0xffdead, + navy: 0x000080, + oldlace: 0xfdf5e6, + olive: 0x808000, + olivedrab: 0x6b8e23, + orange: 0xffa500, + orangered: 0xff4500, + orchid: 0xda70d6, + palegoldenrod: 0xeee8aa, + palegreen: 0x98fb98, + paleturquoise: 0xafeeee, + palevioletred: 0xdb7093, + papayawhip: 0xffefd5, + peachpuff: 0xffdab9, + peru: 0xcd853f, + pink: 0xffc0cb, + plum: 0xdda0dd, + powderblue: 0xb0e0e6, + purple: 0x800080, + rebeccapurple: 0x663399, + red: 0xff0000, + rosybrown: 0xbc8f8f, + royalblue: 0x4169e1, + saddlebrown: 0x8b4513, + salmon: 0xfa8072, + sandybrown: 0xf4a460, + seagreen: 0x2e8b57, + seashell: 0xfff5ee, + sienna: 0xa0522d, + silver: 0xc0c0c0, + skyblue: 0x87ceeb, + slateblue: 0x6a5acd, + slategray: 0x708090, + slategrey: 0x708090, + snow: 0xfffafa, + springgreen: 0x00ff7f, + steelblue: 0x4682b4, + tan: 0xd2b48c, + teal: 0x008080, + thistle: 0xd8bfd8, + tomato: 0xff6347, + turquoise: 0x40e0d0, + violet: 0xee82ee, + wheat: 0xf5deb3, + white: 0xffffff, + whitesmoke: 0xf5f5f5, + yellow: 0xffff00, + yellowgreen: 0x9acd32 +}; + +define(Color, color, { + displayable: function() { + return this.rgb().displayable(); + }, + toString: function() { + return this.rgb() + ""; + } +}); + +function color(format) { + var m; + format = (format + "").trim().toLowerCase(); + return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0x0f0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00 + : (m = reHex6.exec(format)) ? rgbn(parseInt(m[1], 16)) // #ff0000 + : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0) + : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%) + : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1) + : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1) + : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%) + : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1) + : named.hasOwnProperty(format) ? rgbn(named[format]) + : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) + : null; +} + +function rgbn(n) { + return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1); +} + +function rgba(r, g, b, a) { + if (a <= 0) r = g = b = NaN; + return new Rgb(r, g, b, a); +} + +function rgbConvert(o) { + if (!(o instanceof Color)) o = color(o); + if (!o) return new Rgb; + o = o.rgb(); + return new Rgb(o.r, o.g, o.b, o.opacity); +} + +function rgb(r, g, b, opacity) { + return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity); +} + +function Rgb(r, g, b, opacity) { + this.r = +r; + this.g = +g; + this.b = +b; + this.opacity = +opacity; +} + +define(Rgb, rgb, extend(Color, { + brighter: function(k) { + k = k == null ? brighter : Math.pow(brighter, k); + return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity); + }, + darker: function(k) { + k = k == null ? darker : Math.pow(darker, k); + return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity); + }, + rgb: function() { + return this; + }, + displayable: function() { + return (0 <= this.r && this.r <= 255) + && (0 <= this.g && this.g <= 255) + && (0 <= this.b && this.b <= 255) + && (0 <= this.opacity && this.opacity <= 1); + }, + toString: function() { + var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a)); + return (a === 1 ? "rgb(" : "rgba(") + + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", " + + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", " + + Math.max(0, Math.min(255, Math.round(this.b) || 0)) + + (a === 1 ? ")" : ", " + a + ")"); + } +})); + +function hsla(h, s, l, a) { + if (a <= 0) h = s = l = NaN; + else if (l <= 0 || l >= 1) h = s = NaN; + else if (s <= 0) h = NaN; + return new Hsl(h, s, l, a); +} + +function hslConvert(o) { + if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity); + if (!(o instanceof Color)) o = color(o); + if (!o) return new Hsl; + if (o instanceof Hsl) return o; + o = o.rgb(); + var r = o.r / 255, + g = o.g / 255, + b = o.b / 255, + min = Math.min(r, g, b), + max = Math.max(r, g, b), + h = NaN, + s = max - min, + l = (max + min) / 2; + if (s) { + if (r === max) h = (g - b) / s + (g < b) * 6; + else if (g === max) h = (b - r) / s + 2; + else h = (r - g) / s + 4; + s /= l < 0.5 ? max + min : 2 - max - min; + h *= 60; + } else { + s = l > 0 && l < 1 ? 0 : h; + } + return new Hsl(h, s, l, o.opacity); +} + +function hsl(h, s, l, opacity) { + return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity); +} + +function Hsl(h, s, l, opacity) { + this.h = +h; + this.s = +s; + this.l = +l; + this.opacity = +opacity; +} + +define(Hsl, hsl, extend(Color, { + brighter: function(k) { + k = k == null ? brighter : Math.pow(brighter, k); + return new Hsl(this.h, this.s, this.l * k, this.opacity); + }, + darker: function(k) { + k = k == null ? darker : Math.pow(darker, k); + return new Hsl(this.h, this.s, this.l * k, this.opacity); + }, + rgb: function() { + var h = this.h % 360 + (this.h < 0) * 360, + s = isNaN(h) || isNaN(this.s) ? 0 : this.s, + l = this.l, + m2 = l + (l < 0.5 ? l : 1 - l) * s, + m1 = 2 * l - m2; + return new Rgb( + hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2), + hsl2rgb(h, m1, m2), + hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2), + this.opacity + ); + }, + displayable: function() { + return (0 <= this.s && this.s <= 1 || isNaN(this.s)) + && (0 <= this.l && this.l <= 1) + && (0 <= this.opacity && this.opacity <= 1); + } +})); + +/* From FvD 13.37, CSS Color Module Level 3 */ +function hsl2rgb(h, m1, m2) { + return (h < 60 ? m1 + (m2 - m1) * h / 60 + : h < 180 ? m2 + : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60 + : m1) * 255; +} + +var deg2rad = Math.PI / 180; +var rad2deg = 180 / Math.PI; + +var Kn = 18; +var Xn = 0.950470; +var Yn = 1; +var Zn = 1.088830; +var t0 = 4 / 29; +var t1 = 6 / 29; +var t2 = 3 * t1 * t1; +var t3 = t1 * t1 * t1; + +function labConvert(o) { + if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity); + if (o instanceof Hcl) { + var h = o.h * deg2rad; + return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity); + } + if (!(o instanceof Rgb)) o = rgbConvert(o); + var b = rgb2xyz(o.r), + a = rgb2xyz(o.g), + l = rgb2xyz(o.b), + x = xyz2lab((0.4124564 * b + 0.3575761 * a + 0.1804375 * l) / Xn), + y = xyz2lab((0.2126729 * b + 0.7151522 * a + 0.0721750 * l) / Yn), + z = xyz2lab((0.0193339 * b + 0.1191920 * a + 0.9503041 * l) / Zn); + return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity); +} + +function lab(l, a, b, opacity) { + return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity); +} + +function Lab(l, a, b, opacity) { + this.l = +l; + this.a = +a; + this.b = +b; + this.opacity = +opacity; +} + +define(Lab, lab, extend(Color, { + brighter: function(k) { + return new Lab(this.l + Kn * (k == null ? 1 : k), this.a, this.b, this.opacity); + }, + darker: function(k) { + return new Lab(this.l - Kn * (k == null ? 1 : k), this.a, this.b, this.opacity); + }, + rgb: function() { + var y = (this.l + 16) / 116, + x = isNaN(this.a) ? y : y + this.a / 500, + z = isNaN(this.b) ? y : y - this.b / 200; + y = Yn * lab2xyz(y); + x = Xn * lab2xyz(x); + z = Zn * lab2xyz(z); + return new Rgb( + xyz2rgb( 3.2404542 * x - 1.5371385 * y - 0.4985314 * z), // D65 -> sRGB + xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z), + xyz2rgb( 0.0556434 * x - 0.2040259 * y + 1.0572252 * z), + this.opacity + ); + } +})); + +function xyz2lab(t) { + return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0; +} + +function lab2xyz(t) { + return t > t1 ? t * t * t : t2 * (t - t0); +} + +function xyz2rgb(x) { + return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055); +} + +function rgb2xyz(x) { + return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4); +} + +function hclConvert(o) { + if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity); + if (!(o instanceof Lab)) o = labConvert(o); + var h = Math.atan2(o.b, o.a) * rad2deg; + return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity); +} + +function hcl(h, c, l, opacity) { + return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity); +} + +function Hcl(h, c, l, opacity) { + this.h = +h; + this.c = +c; + this.l = +l; + this.opacity = +opacity; +} + +define(Hcl, hcl, extend(Color, { + brighter: function(k) { + return new Hcl(this.h, this.c, this.l + Kn * (k == null ? 1 : k), this.opacity); + }, + darker: function(k) { + return new Hcl(this.h, this.c, this.l - Kn * (k == null ? 1 : k), this.opacity); + }, + rgb: function() { + return labConvert(this).rgb(); + } +})); + +var A = -0.14861; +var B = +1.78277; +var C = -0.29227; +var D = -0.90649; +var E = +1.97294; +var ED = E * D; +var EB = E * B; +var BC_DA = B * C - D * A; + +function cubehelixConvert(o) { + if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity); + if (!(o instanceof Rgb)) o = rgbConvert(o); + var r = o.r / 255, + g = o.g / 255, + b = o.b / 255, + l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB), + bl = b - l, + k = (E * (g - l) - C * bl) / D, + s = Math.sqrt(k * k + bl * bl) / (E * l * (1 - l)), // NaN if l=0 or l=1 + h = s ? Math.atan2(k, bl) * rad2deg - 120 : NaN; + return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity); +} + +function cubehelix(h, s, l, opacity) { + return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity); +} + +function Cubehelix(h, s, l, opacity) { + this.h = +h; + this.s = +s; + this.l = +l; + this.opacity = +opacity; +} + +define(Cubehelix, cubehelix, extend(Color, { + brighter: function(k) { + k = k == null ? brighter : Math.pow(brighter, k); + return new Cubehelix(this.h, this.s, this.l * k, this.opacity); + }, + darker: function(k) { + k = k == null ? darker : Math.pow(darker, k); + return new Cubehelix(this.h, this.s, this.l * k, this.opacity); + }, + rgb: function() { + var h = isNaN(this.h) ? 0 : (this.h + 120) * deg2rad, + l = +this.l, + a = isNaN(this.s) ? 0 : this.s * l * (1 - l), + cosh = Math.cos(h), + sinh = Math.sin(h); + return new Rgb( + 255 * (l + a * (A * cosh + B * sinh)), + 255 * (l + a * (C * cosh + D * sinh)), + 255 * (l + a * (E * cosh)), + this.opacity + ); + } +})); + +exports.color = color; +exports.rgb = rgb; +exports.hsl = hsl; +exports.lab = lab; +exports.hcl = hcl; +exports.cubehelix = cubehelix; + +Object.defineProperty(exports, '__esModule', { value: true }); + +}))); + +},{}],9:[function(require,module,exports){ +// https://d3js.org/d3-interpolate/ Version 1.1.6. Copyright 2017 Mike Bostock. +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-color')) : + typeof define === 'function' && define.amd ? define(['exports', 'd3-color'], factory) : + (factory((global.d3 = global.d3 || {}),global.d3)); +}(this, (function (exports,d3Color) { 'use strict'; + +function basis(t1, v0, v1, v2, v3) { + var t2 = t1 * t1, t3 = t2 * t1; + return ((1 - 3 * t1 + 3 * t2 - t3) * v0 + + (4 - 6 * t2 + 3 * t3) * v1 + + (1 + 3 * t1 + 3 * t2 - 3 * t3) * v2 + + t3 * v3) / 6; +} + +var basis$1 = function(values) { + var n = values.length - 1; + return function(t) { + var i = t <= 0 ? (t = 0) : t >= 1 ? (t = 1, n - 1) : Math.floor(t * n), + v1 = values[i], + v2 = values[i + 1], + v0 = i > 0 ? values[i - 1] : 2 * v1 - v2, + v3 = i < n - 1 ? values[i + 2] : 2 * v2 - v1; + return basis((t - i / n) * n, v0, v1, v2, v3); + }; +}; + +var basisClosed = function(values) { + var n = values.length; + return function(t) { + var i = Math.floor(((t %= 1) < 0 ? ++t : t) * n), + v0 = values[(i + n - 1) % n], + v1 = values[i % n], + v2 = values[(i + 1) % n], + v3 = values[(i + 2) % n]; + return basis((t - i / n) * n, v0, v1, v2, v3); + }; +}; + +var constant = function(x) { + return function() { + return x; + }; +}; + +function linear(a, d) { + return function(t) { + return a + t * d; + }; +} + +function exponential(a, b, y) { + return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) { + return Math.pow(a + t * b, y); + }; +} + +function hue(a, b) { + var d = b - a; + return d ? linear(a, d > 180 || d < -180 ? d - 360 * Math.round(d / 360) : d) : constant(isNaN(a) ? b : a); +} + +function gamma(y) { + return (y = +y) === 1 ? nogamma : function(a, b) { + return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a); + }; +} + +function nogamma(a, b) { + var d = b - a; + return d ? linear(a, d) : constant(isNaN(a) ? b : a); +} + +var rgb$1 = ((function rgbGamma(y) { + var color$$1 = gamma(y); + + function rgb$$1(start, end) { + var r = color$$1((start = d3Color.rgb(start)).r, (end = d3Color.rgb(end)).r), + g = color$$1(start.g, end.g), + b = color$$1(start.b, end.b), + opacity = nogamma(start.opacity, end.opacity); + return function(t) { + start.r = r(t); + start.g = g(t); + start.b = b(t); + start.opacity = opacity(t); + return start + ""; + }; + } + + rgb$$1.gamma = rgbGamma; + + return rgb$$1; +}))(1); + +function rgbSpline(spline) { + return function(colors) { + var n = colors.length, + r = new Array(n), + g = new Array(n), + b = new Array(n), + i, color$$1; + for (i = 0; i < n; ++i) { + color$$1 = d3Color.rgb(colors[i]); + r[i] = color$$1.r || 0; + g[i] = color$$1.g || 0; + b[i] = color$$1.b || 0; + } + r = spline(r); + g = spline(g); + b = spline(b); + color$$1.opacity = 1; + return function(t) { + color$$1.r = r(t); + color$$1.g = g(t); + color$$1.b = b(t); + return color$$1 + ""; + }; + }; +} + +var rgbBasis = rgbSpline(basis$1); +var rgbBasisClosed = rgbSpline(basisClosed); + +var array = function(a, b) { + var nb = b ? b.length : 0, + na = a ? Math.min(nb, a.length) : 0, + x = new Array(na), + c = new Array(nb), + i; + + for (i = 0; i < na; ++i) x[i] = value(a[i], b[i]); + for (; i < nb; ++i) c[i] = b[i]; + + return function(t) { + for (i = 0; i < na; ++i) c[i] = x[i](t); + return c; + }; +}; + +var date = function(a, b) { + var d = new Date; + return a = +a, b -= a, function(t) { + return d.setTime(a + b * t), d; + }; +}; + +var number = function(a, b) { + return a = +a, b -= a, function(t) { + return a + b * t; + }; +}; + +var object = function(a, b) { + var i = {}, + c = {}, + k; + + if (a === null || typeof a !== "object") a = {}; + if (b === null || typeof b !== "object") b = {}; + + for (k in b) { + if (k in a) { + i[k] = value(a[k], b[k]); + } else { + c[k] = b[k]; + } + } + + return function(t) { + for (k in i) c[k] = i[k](t); + return c; + }; +}; + +var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g; +var reB = new RegExp(reA.source, "g"); + +function zero(b) { + return function() { + return b; + }; +} + +function one(b) { + return function(t) { + return b(t) + ""; + }; +} + +var string = function(a, b) { + var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b + am, // current match in a + bm, // current match in b + bs, // string preceding current number in b, if any + i = -1, // index in s + s = [], // string constants and placeholders + q = []; // number interpolators + + // Coerce inputs to strings. + a = a + "", b = b + ""; + + // Interpolate pairs of numbers in a & b. + while ((am = reA.exec(a)) + && (bm = reB.exec(b))) { + if ((bs = bm.index) > bi) { // a string precedes the next number in b + bs = b.slice(bi, bs); + if (s[i]) s[i] += bs; // coalesce with previous string + else s[++i] = bs; + } + if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match + if (s[i]) s[i] += bm; // coalesce with previous string + else s[++i] = bm; + } else { // interpolate non-matching numbers + s[++i] = null; + q.push({i: i, x: number(am, bm)}); + } + bi = reB.lastIndex; + } + + // Add remains of b. + if (bi < b.length) { + bs = b.slice(bi); + if (s[i]) s[i] += bs; // coalesce with previous string + else s[++i] = bs; + } + + // Special optimization for only a single match. + // Otherwise, interpolate each of the numbers and rejoin the string. + return s.length < 2 ? (q[0] + ? one(q[0].x) + : zero(b)) + : (b = q.length, function(t) { + for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t); + return s.join(""); + }); +}; + +var value = function(a, b) { + var t = typeof b, c; + return b == null || t === "boolean" ? constant(b) + : (t === "number" ? number + : t === "string" ? ((c = d3Color.color(b)) ? (b = c, rgb$1) : string) + : b instanceof d3Color.color ? rgb$1 + : b instanceof Date ? date + : Array.isArray(b) ? array + : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object + : number)(a, b); +}; + +var round = function(a, b) { + return a = +a, b -= a, function(t) { + return Math.round(a + b * t); + }; +}; + +var degrees = 180 / Math.PI; + +var identity = { + translateX: 0, + translateY: 0, + rotate: 0, + skewX: 0, + scaleX: 1, + scaleY: 1 +}; + +var decompose = function(a, b, c, d, e, f) { + var scaleX, scaleY, skewX; + if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX; + if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX; + if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY; + if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX; + return { + translateX: e, + translateY: f, + rotate: Math.atan2(b, a) * degrees, + skewX: Math.atan(skewX) * degrees, + scaleX: scaleX, + scaleY: scaleY + }; +}; + +var cssNode; +var cssRoot; +var cssView; +var svgNode; + +function parseCss(value) { + if (value === "none") return identity; + if (!cssNode) cssNode = document.createElement("DIV"), cssRoot = document.documentElement, cssView = document.defaultView; + cssNode.style.transform = value; + value = cssView.getComputedStyle(cssRoot.appendChild(cssNode), null).getPropertyValue("transform"); + cssRoot.removeChild(cssNode); + value = value.slice(7, -1).split(","); + return decompose(+value[0], +value[1], +value[2], +value[3], +value[4], +value[5]); +} + +function parseSvg(value) { + if (value == null) return identity; + if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g"); + svgNode.setAttribute("transform", value); + if (!(value = svgNode.transform.baseVal.consolidate())) return identity; + value = value.matrix; + return decompose(value.a, value.b, value.c, value.d, value.e, value.f); +} + +function interpolateTransform(parse, pxComma, pxParen, degParen) { + + function pop(s) { + return s.length ? s.pop() + " " : ""; + } + + function translate(xa, ya, xb, yb, s, q) { + if (xa !== xb || ya !== yb) { + var i = s.push("translate(", null, pxComma, null, pxParen); + q.push({i: i - 4, x: number(xa, xb)}, {i: i - 2, x: number(ya, yb)}); + } else if (xb || yb) { + s.push("translate(" + xb + pxComma + yb + pxParen); + } + } + + function rotate(a, b, s, q) { + if (a !== b) { + if (a - b > 180) b += 360; else if (b - a > 180) a += 360; // shortest path + q.push({i: s.push(pop(s) + "rotate(", null, degParen) - 2, x: number(a, b)}); + } else if (b) { + s.push(pop(s) + "rotate(" + b + degParen); + } + } + + function skewX(a, b, s, q) { + if (a !== b) { + q.push({i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: number(a, b)}); + } else if (b) { + s.push(pop(s) + "skewX(" + b + degParen); + } + } + + function scale(xa, ya, xb, yb, s, q) { + if (xa !== xb || ya !== yb) { + var i = s.push(pop(s) + "scale(", null, ",", null, ")"); + q.push({i: i - 4, x: number(xa, xb)}, {i: i - 2, x: number(ya, yb)}); + } else if (xb !== 1 || yb !== 1) { + s.push(pop(s) + "scale(" + xb + "," + yb + ")"); + } + } + + return function(a, b) { + var s = [], // string constants and placeholders + q = []; // number interpolators + a = parse(a), b = parse(b); + translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q); + rotate(a.rotate, b.rotate, s, q); + skewX(a.skewX, b.skewX, s, q); + scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q); + a = b = null; // gc + return function(t) { + var i = -1, n = q.length, o; + while (++i < n) s[(o = q[i]).i] = o.x(t); + return s.join(""); + }; + }; +} + +var interpolateTransformCss = interpolateTransform(parseCss, "px, ", "px)", "deg)"); +var interpolateTransformSvg = interpolateTransform(parseSvg, ", ", ")", ")"); + +var rho = Math.SQRT2; +var rho2 = 2; +var rho4 = 4; +var epsilon2 = 1e-12; + +function cosh(x) { + return ((x = Math.exp(x)) + 1 / x) / 2; +} + +function sinh(x) { + return ((x = Math.exp(x)) - 1 / x) / 2; +} + +function tanh(x) { + return ((x = Math.exp(2 * x)) - 1) / (x + 1); +} + +// p0 = [ux0, uy0, w0] +// p1 = [ux1, uy1, w1] +var zoom = function(p0, p1) { + var ux0 = p0[0], uy0 = p0[1], w0 = p0[2], + ux1 = p1[0], uy1 = p1[1], w1 = p1[2], + dx = ux1 - ux0, + dy = uy1 - uy0, + d2 = dx * dx + dy * dy, + i, + S; + + // Special case for u0 ≅ u1. + if (d2 < epsilon2) { + S = Math.log(w1 / w0) / rho; + i = function(t) { + return [ + ux0 + t * dx, + uy0 + t * dy, + w0 * Math.exp(rho * t * S) + ]; + }; + } + + // General case. + else { + var d1 = Math.sqrt(d2), + b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1), + b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1), + r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0), + r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1); + S = (r1 - r0) / rho; + i = function(t) { + var s = t * S, + coshr0 = cosh(r0), + u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0)); + return [ + ux0 + u * dx, + uy0 + u * dy, + w0 * coshr0 / cosh(rho * s + r0) + ]; + }; + } + + i.duration = S * 1000; + + return i; +}; + +function hsl$1(hue$$1) { + return function(start, end) { + var h = hue$$1((start = d3Color.hsl(start)).h, (end = d3Color.hsl(end)).h), + s = nogamma(start.s, end.s), + l = nogamma(start.l, end.l), + opacity = nogamma(start.opacity, end.opacity); + return function(t) { + start.h = h(t); + start.s = s(t); + start.l = l(t); + start.opacity = opacity(t); + return start + ""; + }; + } +} + +var hsl$2 = hsl$1(hue); +var hslLong = hsl$1(nogamma); + +function lab$1(start, end) { + var l = nogamma((start = d3Color.lab(start)).l, (end = d3Color.lab(end)).l), + a = nogamma(start.a, end.a), + b = nogamma(start.b, end.b), + opacity = nogamma(start.opacity, end.opacity); + return function(t) { + start.l = l(t); + start.a = a(t); + start.b = b(t); + start.opacity = opacity(t); + return start + ""; + }; +} + +function hcl$1(hue$$1) { + return function(start, end) { + var h = hue$$1((start = d3Color.hcl(start)).h, (end = d3Color.hcl(end)).h), + c = nogamma(start.c, end.c), + l = nogamma(start.l, end.l), + opacity = nogamma(start.opacity, end.opacity); + return function(t) { + start.h = h(t); + start.c = c(t); + start.l = l(t); + start.opacity = opacity(t); + return start + ""; + }; + } +} + +var hcl$2 = hcl$1(hue); +var hclLong = hcl$1(nogamma); + +function cubehelix$1(hue$$1) { + return (function cubehelixGamma(y) { + y = +y; + + function cubehelix$$1(start, end) { + var h = hue$$1((start = d3Color.cubehelix(start)).h, (end = d3Color.cubehelix(end)).h), + s = nogamma(start.s, end.s), + l = nogamma(start.l, end.l), + opacity = nogamma(start.opacity, end.opacity); + return function(t) { + start.h = h(t); + start.s = s(t); + start.l = l(Math.pow(t, y)); + start.opacity = opacity(t); + return start + ""; + }; + } + + cubehelix$$1.gamma = cubehelixGamma; + + return cubehelix$$1; + })(1); +} + +var cubehelix$2 = cubehelix$1(hue); +var cubehelixLong = cubehelix$1(nogamma); + +var quantize = function(interpolator, n) { + var samples = new Array(n); + for (var i = 0; i < n; ++i) samples[i] = interpolator(i / (n - 1)); + return samples; +}; + +exports.interpolate = value; +exports.interpolateArray = array; +exports.interpolateBasis = basis$1; +exports.interpolateBasisClosed = basisClosed; +exports.interpolateDate = date; +exports.interpolateNumber = number; +exports.interpolateObject = object; +exports.interpolateRound = round; +exports.interpolateString = string; +exports.interpolateTransformCss = interpolateTransformCss; +exports.interpolateTransformSvg = interpolateTransformSvg; +exports.interpolateZoom = zoom; +exports.interpolateRgb = rgb$1; +exports.interpolateRgbBasis = rgbBasis; +exports.interpolateRgbBasisClosed = rgbBasisClosed; +exports.interpolateHsl = hsl$2; +exports.interpolateHslLong = hslLong; +exports.interpolateLab = lab$1; +exports.interpolateHcl = hcl$2; +exports.interpolateHclLong = hclLong; +exports.interpolateCubehelix = cubehelix$2; +exports.interpolateCubehelixLong = cubehelixLong; +exports.quantize = quantize; + +Object.defineProperty(exports, '__esModule', { value: true }); + +}))); + +},{"d3-color":8}],10:[function(require,module,exports){ +// https://d3js.org/d3-scale-chromatic/ Version 1.2.0. Copyright 2018 Mike Bostock. +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-interpolate'), require('d3-color')) : + typeof define === 'function' && define.amd ? define(['exports', 'd3-interpolate', 'd3-color'], factory) : + (factory((global.d3 = global.d3 || {}),global.d3,global.d3)); +}(this, (function (exports,d3Interpolate,d3Color) { 'use strict'; + +function colors(specifier) { + var n = specifier.length / 6 | 0, colors = new Array(n), i = 0; + while (i < n) colors[i] = "#" + specifier.slice(i * 6, ++i * 6); + return colors; +} + +var category10 = colors("1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf"); + +var Accent = colors("7fc97fbeaed4fdc086ffff99386cb0f0027fbf5b17666666"); + +var Dark2 = colors("1b9e77d95f027570b3e7298a66a61ee6ab02a6761d666666"); + +var Paired = colors("a6cee31f78b4b2df8a33a02cfb9a99e31a1cfdbf6fff7f00cab2d66a3d9affff99b15928"); + +var Pastel1 = colors("fbb4aeb3cde3ccebc5decbe4fed9a6ffffcce5d8bdfddaecf2f2f2"); + +var Pastel2 = colors("b3e2cdfdcdaccbd5e8f4cae4e6f5c9fff2aef1e2cccccccc"); + +var Set1 = colors("e41a1c377eb84daf4a984ea3ff7f00ffff33a65628f781bf999999"); + +var Set2 = colors("66c2a5fc8d628da0cbe78ac3a6d854ffd92fe5c494b3b3b3"); + +var Set3 = colors("8dd3c7ffffb3bebadafb807280b1d3fdb462b3de69fccde5d9d9d9bc80bdccebc5ffed6f"); + +function ramp(scheme) { + return d3Interpolate.interpolateRgbBasis(scheme[scheme.length - 1]); +} + +var scheme = new Array(3).concat( + "d8b365f5f5f55ab4ac", + "a6611adfc27d80cdc1018571", + "a6611adfc27df5f5f580cdc1018571", + "8c510ad8b365f6e8c3c7eae55ab4ac01665e", + "8c510ad8b365f6e8c3f5f5f5c7eae55ab4ac01665e", + "8c510abf812ddfc27df6e8c3c7eae580cdc135978f01665e", + "8c510abf812ddfc27df6e8c3f5f5f5c7eae580cdc135978f01665e", + "5430058c510abf812ddfc27df6e8c3c7eae580cdc135978f01665e003c30", + "5430058c510abf812ddfc27df6e8c3f5f5f5c7eae580cdc135978f01665e003c30" +).map(colors); + +var BrBG = ramp(scheme); + +var scheme$1 = new Array(3).concat( + "af8dc3f7f7f77fbf7b", + "7b3294c2a5cfa6dba0008837", + "7b3294c2a5cff7f7f7a6dba0008837", + "762a83af8dc3e7d4e8d9f0d37fbf7b1b7837", + "762a83af8dc3e7d4e8f7f7f7d9f0d37fbf7b1b7837", + "762a839970abc2a5cfe7d4e8d9f0d3a6dba05aae611b7837", + "762a839970abc2a5cfe7d4e8f7f7f7d9f0d3a6dba05aae611b7837", + "40004b762a839970abc2a5cfe7d4e8d9f0d3a6dba05aae611b783700441b", + "40004b762a839970abc2a5cfe7d4e8f7f7f7d9f0d3a6dba05aae611b783700441b" +).map(colors); + +var PRGn = ramp(scheme$1); + +var scheme$2 = new Array(3).concat( + "e9a3c9f7f7f7a1d76a", + "d01c8bf1b6dab8e1864dac26", + "d01c8bf1b6daf7f7f7b8e1864dac26", + "c51b7de9a3c9fde0efe6f5d0a1d76a4d9221", + "c51b7de9a3c9fde0eff7f7f7e6f5d0a1d76a4d9221", + "c51b7dde77aef1b6dafde0efe6f5d0b8e1867fbc414d9221", + "c51b7dde77aef1b6dafde0eff7f7f7e6f5d0b8e1867fbc414d9221", + "8e0152c51b7dde77aef1b6dafde0efe6f5d0b8e1867fbc414d9221276419", + "8e0152c51b7dde77aef1b6dafde0eff7f7f7e6f5d0b8e1867fbc414d9221276419" +).map(colors); + +var PiYG = ramp(scheme$2); + +var scheme$3 = new Array(3).concat( + "998ec3f7f7f7f1a340", + "5e3c99b2abd2fdb863e66101", + "5e3c99b2abd2f7f7f7fdb863e66101", + "542788998ec3d8daebfee0b6f1a340b35806", + "542788998ec3d8daebf7f7f7fee0b6f1a340b35806", + "5427888073acb2abd2d8daebfee0b6fdb863e08214b35806", + "5427888073acb2abd2d8daebf7f7f7fee0b6fdb863e08214b35806", + "2d004b5427888073acb2abd2d8daebfee0b6fdb863e08214b358067f3b08", + "2d004b5427888073acb2abd2d8daebf7f7f7fee0b6fdb863e08214b358067f3b08" +).map(colors); + +var PuOr = ramp(scheme$3); + +var scheme$4 = new Array(3).concat( + "ef8a62f7f7f767a9cf", + "ca0020f4a58292c5de0571b0", + "ca0020f4a582f7f7f792c5de0571b0", + "b2182bef8a62fddbc7d1e5f067a9cf2166ac", + "b2182bef8a62fddbc7f7f7f7d1e5f067a9cf2166ac", + "b2182bd6604df4a582fddbc7d1e5f092c5de4393c32166ac", + "b2182bd6604df4a582fddbc7f7f7f7d1e5f092c5de4393c32166ac", + "67001fb2182bd6604df4a582fddbc7d1e5f092c5de4393c32166ac053061", + "67001fb2182bd6604df4a582fddbc7f7f7f7d1e5f092c5de4393c32166ac053061" +).map(colors); + +var RdBu = ramp(scheme$4); + +var scheme$5 = new Array(3).concat( + "ef8a62ffffff999999", + "ca0020f4a582bababa404040", + "ca0020f4a582ffffffbababa404040", + "b2182bef8a62fddbc7e0e0e09999994d4d4d", + "b2182bef8a62fddbc7ffffffe0e0e09999994d4d4d", + "b2182bd6604df4a582fddbc7e0e0e0bababa8787874d4d4d", + "b2182bd6604df4a582fddbc7ffffffe0e0e0bababa8787874d4d4d", + "67001fb2182bd6604df4a582fddbc7e0e0e0bababa8787874d4d4d1a1a1a", + "67001fb2182bd6604df4a582fddbc7ffffffe0e0e0bababa8787874d4d4d1a1a1a" +).map(colors); + +var RdGy = ramp(scheme$5); + +var scheme$6 = new Array(3).concat( + "fc8d59ffffbf91bfdb", + "d7191cfdae61abd9e92c7bb6", + "d7191cfdae61ffffbfabd9e92c7bb6", + "d73027fc8d59fee090e0f3f891bfdb4575b4", + "d73027fc8d59fee090ffffbfe0f3f891bfdb4575b4", + "d73027f46d43fdae61fee090e0f3f8abd9e974add14575b4", + "d73027f46d43fdae61fee090ffffbfe0f3f8abd9e974add14575b4", + "a50026d73027f46d43fdae61fee090e0f3f8abd9e974add14575b4313695", + "a50026d73027f46d43fdae61fee090ffffbfe0f3f8abd9e974add14575b4313695" +).map(colors); + +var RdYlBu = ramp(scheme$6); + +var scheme$7 = new Array(3).concat( + "fc8d59ffffbf91cf60", + "d7191cfdae61a6d96a1a9641", + "d7191cfdae61ffffbfa6d96a1a9641", + "d73027fc8d59fee08bd9ef8b91cf601a9850", + "d73027fc8d59fee08bffffbfd9ef8b91cf601a9850", + "d73027f46d43fdae61fee08bd9ef8ba6d96a66bd631a9850", + "d73027f46d43fdae61fee08bffffbfd9ef8ba6d96a66bd631a9850", + "a50026d73027f46d43fdae61fee08bd9ef8ba6d96a66bd631a9850006837", + "a50026d73027f46d43fdae61fee08bffffbfd9ef8ba6d96a66bd631a9850006837" +).map(colors); + +var RdYlGn = ramp(scheme$7); + +var scheme$8 = new Array(3).concat( + "fc8d59ffffbf99d594", + "d7191cfdae61abdda42b83ba", + "d7191cfdae61ffffbfabdda42b83ba", + "d53e4ffc8d59fee08be6f59899d5943288bd", + "d53e4ffc8d59fee08bffffbfe6f59899d5943288bd", + "d53e4ff46d43fdae61fee08be6f598abdda466c2a53288bd", + "d53e4ff46d43fdae61fee08bffffbfe6f598abdda466c2a53288bd", + "9e0142d53e4ff46d43fdae61fee08be6f598abdda466c2a53288bd5e4fa2", + "9e0142d53e4ff46d43fdae61fee08bffffbfe6f598abdda466c2a53288bd5e4fa2" +).map(colors); + +var Spectral = ramp(scheme$8); + +var scheme$9 = new Array(3).concat( + "e5f5f999d8c92ca25f", + "edf8fbb2e2e266c2a4238b45", + "edf8fbb2e2e266c2a42ca25f006d2c", + "edf8fbccece699d8c966c2a42ca25f006d2c", + "edf8fbccece699d8c966c2a441ae76238b45005824", + "f7fcfde5f5f9ccece699d8c966c2a441ae76238b45005824", + "f7fcfde5f5f9ccece699d8c966c2a441ae76238b45006d2c00441b" +).map(colors); + +var BuGn = ramp(scheme$9); + +var scheme$10 = new Array(3).concat( + "e0ecf49ebcda8856a7", + "edf8fbb3cde38c96c688419d", + "edf8fbb3cde38c96c68856a7810f7c", + "edf8fbbfd3e69ebcda8c96c68856a7810f7c", + "edf8fbbfd3e69ebcda8c96c68c6bb188419d6e016b", + "f7fcfde0ecf4bfd3e69ebcda8c96c68c6bb188419d6e016b", + "f7fcfde0ecf4bfd3e69ebcda8c96c68c6bb188419d810f7c4d004b" +).map(colors); + +var BuPu = ramp(scheme$10); + +var scheme$11 = new Array(3).concat( + "e0f3dba8ddb543a2ca", + "f0f9e8bae4bc7bccc42b8cbe", + "f0f9e8bae4bc7bccc443a2ca0868ac", + "f0f9e8ccebc5a8ddb57bccc443a2ca0868ac", + "f0f9e8ccebc5a8ddb57bccc44eb3d32b8cbe08589e", + "f7fcf0e0f3dbccebc5a8ddb57bccc44eb3d32b8cbe08589e", + "f7fcf0e0f3dbccebc5a8ddb57bccc44eb3d32b8cbe0868ac084081" +).map(colors); + +var GnBu = ramp(scheme$11); + +var scheme$12 = new Array(3).concat( + "fee8c8fdbb84e34a33", + "fef0d9fdcc8afc8d59d7301f", + "fef0d9fdcc8afc8d59e34a33b30000", + "fef0d9fdd49efdbb84fc8d59e34a33b30000", + "fef0d9fdd49efdbb84fc8d59ef6548d7301f990000", + "fff7ecfee8c8fdd49efdbb84fc8d59ef6548d7301f990000", + "fff7ecfee8c8fdd49efdbb84fc8d59ef6548d7301fb300007f0000" +).map(colors); + +var OrRd = ramp(scheme$12); + +var scheme$13 = new Array(3).concat( + "ece2f0a6bddb1c9099", + "f6eff7bdc9e167a9cf02818a", + "f6eff7bdc9e167a9cf1c9099016c59", + "f6eff7d0d1e6a6bddb67a9cf1c9099016c59", + "f6eff7d0d1e6a6bddb67a9cf3690c002818a016450", + "fff7fbece2f0d0d1e6a6bddb67a9cf3690c002818a016450", + "fff7fbece2f0d0d1e6a6bddb67a9cf3690c002818a016c59014636" +).map(colors); + +var PuBuGn = ramp(scheme$13); + +var scheme$14 = new Array(3).concat( + "ece7f2a6bddb2b8cbe", + "f1eef6bdc9e174a9cf0570b0", + "f1eef6bdc9e174a9cf2b8cbe045a8d", + "f1eef6d0d1e6a6bddb74a9cf2b8cbe045a8d", + "f1eef6d0d1e6a6bddb74a9cf3690c00570b0034e7b", + "fff7fbece7f2d0d1e6a6bddb74a9cf3690c00570b0034e7b", + "fff7fbece7f2d0d1e6a6bddb74a9cf3690c00570b0045a8d023858" +).map(colors); + +var PuBu = ramp(scheme$14); + +var scheme$15 = new Array(3).concat( + "e7e1efc994c7dd1c77", + "f1eef6d7b5d8df65b0ce1256", + "f1eef6d7b5d8df65b0dd1c77980043", + "f1eef6d4b9dac994c7df65b0dd1c77980043", + "f1eef6d4b9dac994c7df65b0e7298ace125691003f", + "f7f4f9e7e1efd4b9dac994c7df65b0e7298ace125691003f", + "f7f4f9e7e1efd4b9dac994c7df65b0e7298ace125698004367001f" +).map(colors); + +var PuRd = ramp(scheme$15); + +var scheme$16 = new Array(3).concat( + "fde0ddfa9fb5c51b8a", + "feebe2fbb4b9f768a1ae017e", + "feebe2fbb4b9f768a1c51b8a7a0177", + "feebe2fcc5c0fa9fb5f768a1c51b8a7a0177", + "feebe2fcc5c0fa9fb5f768a1dd3497ae017e7a0177", + "fff7f3fde0ddfcc5c0fa9fb5f768a1dd3497ae017e7a0177", + "fff7f3fde0ddfcc5c0fa9fb5f768a1dd3497ae017e7a017749006a" +).map(colors); + +var RdPu = ramp(scheme$16); + +var scheme$17 = new Array(3).concat( + "edf8b17fcdbb2c7fb8", + "ffffcca1dab441b6c4225ea8", + "ffffcca1dab441b6c42c7fb8253494", + "ffffccc7e9b47fcdbb41b6c42c7fb8253494", + "ffffccc7e9b47fcdbb41b6c41d91c0225ea80c2c84", + "ffffd9edf8b1c7e9b47fcdbb41b6c41d91c0225ea80c2c84", + "ffffd9edf8b1c7e9b47fcdbb41b6c41d91c0225ea8253494081d58" +).map(colors); + +var YlGnBu = ramp(scheme$17); + +var scheme$18 = new Array(3).concat( + "f7fcb9addd8e31a354", + "ffffccc2e69978c679238443", + "ffffccc2e69978c67931a354006837", + "ffffccd9f0a3addd8e78c67931a354006837", + "ffffccd9f0a3addd8e78c67941ab5d238443005a32", + "ffffe5f7fcb9d9f0a3addd8e78c67941ab5d238443005a32", + "ffffe5f7fcb9d9f0a3addd8e78c67941ab5d238443006837004529" +).map(colors); + +var YlGn = ramp(scheme$18); + +var scheme$19 = new Array(3).concat( + "fff7bcfec44fd95f0e", + "ffffd4fed98efe9929cc4c02", + "ffffd4fed98efe9929d95f0e993404", + "ffffd4fee391fec44ffe9929d95f0e993404", + "ffffd4fee391fec44ffe9929ec7014cc4c028c2d04", + "ffffe5fff7bcfee391fec44ffe9929ec7014cc4c028c2d04", + "ffffe5fff7bcfee391fec44ffe9929ec7014cc4c02993404662506" +).map(colors); + +var YlOrBr = ramp(scheme$19); + +var scheme$20 = new Array(3).concat( + "ffeda0feb24cf03b20", + "ffffb2fecc5cfd8d3ce31a1c", + "ffffb2fecc5cfd8d3cf03b20bd0026", + "ffffb2fed976feb24cfd8d3cf03b20bd0026", + "ffffb2fed976feb24cfd8d3cfc4e2ae31a1cb10026", + "ffffccffeda0fed976feb24cfd8d3cfc4e2ae31a1cb10026", + "ffffccffeda0fed976feb24cfd8d3cfc4e2ae31a1cbd0026800026" +).map(colors); + +var YlOrRd = ramp(scheme$20); + +var scheme$21 = new Array(3).concat( + "deebf79ecae13182bd", + "eff3ffbdd7e76baed62171b5", + "eff3ffbdd7e76baed63182bd08519c", + "eff3ffc6dbef9ecae16baed63182bd08519c", + "eff3ffc6dbef9ecae16baed64292c62171b5084594", + "f7fbffdeebf7c6dbef9ecae16baed64292c62171b5084594", + "f7fbffdeebf7c6dbef9ecae16baed64292c62171b508519c08306b" +).map(colors); + +var Blues = ramp(scheme$21); + +var scheme$22 = new Array(3).concat( + "e5f5e0a1d99b31a354", + "edf8e9bae4b374c476238b45", + "edf8e9bae4b374c47631a354006d2c", + "edf8e9c7e9c0a1d99b74c47631a354006d2c", + "edf8e9c7e9c0a1d99b74c47641ab5d238b45005a32", + "f7fcf5e5f5e0c7e9c0a1d99b74c47641ab5d238b45005a32", + "f7fcf5e5f5e0c7e9c0a1d99b74c47641ab5d238b45006d2c00441b" +).map(colors); + +var Greens = ramp(scheme$22); + +var scheme$23 = new Array(3).concat( + "f0f0f0bdbdbd636363", + "f7f7f7cccccc969696525252", + "f7f7f7cccccc969696636363252525", + "f7f7f7d9d9d9bdbdbd969696636363252525", + "f7f7f7d9d9d9bdbdbd969696737373525252252525", + "fffffff0f0f0d9d9d9bdbdbd969696737373525252252525", + "fffffff0f0f0d9d9d9bdbdbd969696737373525252252525000000" +).map(colors); + +var Greys = ramp(scheme$23); + +var scheme$24 = new Array(3).concat( + "efedf5bcbddc756bb1", + "f2f0f7cbc9e29e9ac86a51a3", + "f2f0f7cbc9e29e9ac8756bb154278f", + "f2f0f7dadaebbcbddc9e9ac8756bb154278f", + "f2f0f7dadaebbcbddc9e9ac8807dba6a51a34a1486", + "fcfbfdefedf5dadaebbcbddc9e9ac8807dba6a51a34a1486", + "fcfbfdefedf5dadaebbcbddc9e9ac8807dba6a51a354278f3f007d" +).map(colors); + +var Purples = ramp(scheme$24); + +var scheme$25 = new Array(3).concat( + "fee0d2fc9272de2d26", + "fee5d9fcae91fb6a4acb181d", + "fee5d9fcae91fb6a4ade2d26a50f15", + "fee5d9fcbba1fc9272fb6a4ade2d26a50f15", + "fee5d9fcbba1fc9272fb6a4aef3b2ccb181d99000d", + "fff5f0fee0d2fcbba1fc9272fb6a4aef3b2ccb181d99000d", + "fff5f0fee0d2fcbba1fc9272fb6a4aef3b2ccb181da50f1567000d" +).map(colors); + +var Reds = ramp(scheme$25); + +var scheme$26 = new Array(3).concat( + "fee6cefdae6be6550d", + "feeddefdbe85fd8d3cd94701", + "feeddefdbe85fd8d3ce6550da63603", + "feeddefdd0a2fdae6bfd8d3ce6550da63603", + "feeddefdd0a2fdae6bfd8d3cf16913d948018c2d04", + "fff5ebfee6cefdd0a2fdae6bfd8d3cf16913d948018c2d04", + "fff5ebfee6cefdd0a2fdae6bfd8d3cf16913d94801a636037f2704" +).map(colors); + +var Oranges = ramp(scheme$26); + +var cubehelix$1 = d3Interpolate.interpolateCubehelixLong(d3Color.cubehelix(300, 0.5, 0.0), d3Color.cubehelix(-240, 0.5, 1.0)); + +var warm = d3Interpolate.interpolateCubehelixLong(d3Color.cubehelix(-100, 0.75, 0.35), d3Color.cubehelix(80, 1.50, 0.8)); + +var cool = d3Interpolate.interpolateCubehelixLong(d3Color.cubehelix(260, 0.75, 0.35), d3Color.cubehelix(80, 1.50, 0.8)); + +var rainbow = d3Color.cubehelix(); + +function rainbow$1(t) { + if (t < 0 || t > 1) t -= Math.floor(t); + var ts = Math.abs(t - 0.5); + rainbow.h = 360 * t - 100; + rainbow.s = 1.5 - 1.5 * ts; + rainbow.l = 0.8 - 0.9 * ts; + return rainbow + ""; +} + +function ramp$1(range) { + var n = range.length; + return function(t) { + return range[Math.max(0, Math.min(n - 1, Math.floor(t * n)))]; + }; +} + +var viridis = ramp$1(colors("44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725")); + +var magma = ramp$1(colors("00000401000501010601010802010902020b02020d03030f03031204041405041606051806051a07061c08071e0907200a08220b09240c09260d0a290e0b2b100b2d110c2f120d31130d34140e36150e38160f3b180f3d19103f1a10421c10441d11471e114920114b21114e22115024125325125527125829115a2a115c2c115f2d11612f116331116533106734106936106b38106c390f6e3b0f703d0f713f0f72400f74420f75440f764510774710784910784a10794c117a4e117b4f127b51127c52137c54137d56147d57157e59157e5a167e5c167f5d177f5f187f601880621980641a80651a80671b80681c816a1c816b1d816d1d816e1e81701f81721f817320817521817621817822817922827b23827c23827e24828025828125818326818426818627818827818928818b29818c29818e2a81902a81912b81932b80942c80962c80982d80992d809b2e7f9c2e7f9e2f7fa02f7fa1307ea3307ea5317ea6317da8327daa337dab337cad347cae347bb0357bb2357bb3367ab5367ab73779b83779ba3878bc3978bd3977bf3a77c03a76c23b75c43c75c53c74c73d73c83e73ca3e72cc3f71cd4071cf4070d0416fd2426fd3436ed5446dd6456cd8456cd9466bdb476adc4869de4968df4a68e04c67e24d66e34e65e44f64e55064e75263e85362e95462ea5661eb5760ec5860ed5a5fee5b5eef5d5ef05f5ef1605df2625df2645cf3655cf4675cf4695cf56b5cf66c5cf66e5cf7705cf7725cf8745cf8765cf9785df9795df97b5dfa7d5efa7f5efa815ffb835ffb8560fb8761fc8961fc8a62fc8c63fc8e64fc9065fd9266fd9467fd9668fd9869fd9a6afd9b6bfe9d6cfe9f6dfea16efea36ffea571fea772fea973feaa74feac76feae77feb078feb27afeb47bfeb67cfeb77efeb97ffebb81febd82febf84fec185fec287fec488fec68afec88cfeca8dfecc8ffecd90fecf92fed194fed395fed597fed799fed89afdda9cfddc9efddea0fde0a1fde2a3fde3a5fde5a7fde7a9fde9aafdebacfcecaefceeb0fcf0b2fcf2b4fcf4b6fcf6b8fcf7b9fcf9bbfcfbbdfcfdbf")); + +var inferno = ramp$1(colors("00000401000501010601010802010a02020c02020e03021004031204031405041706041907051b08051d09061f0a07220b07240c08260d08290e092b10092d110a30120a32140b34150b37160b39180c3c190c3e1b0c411c0c431e0c451f0c48210c4a230c4c240c4f260c51280b53290b552b0b572d0b592f0a5b310a5c320a5e340a5f3609613809623909633b09643d09653e0966400a67420a68440a68450a69470b6a490b6a4a0c6b4c0c6b4d0d6c4f0d6c510e6c520e6d540f6d550f6d57106e59106e5a116e5c126e5d126e5f136e61136e62146e64156e65156e67166e69166e6a176e6c186e6d186e6f196e71196e721a6e741a6e751b6e771c6d781c6d7a1d6d7c1d6d7d1e6d7f1e6c801f6c82206c84206b85216b87216b88226a8a226a8c23698d23698f24699025689225689326679526679727669827669a28659b29649d29649f2a63a02a63a22b62a32c61a52c60a62d60a82e5fa92e5eab2f5ead305dae305cb0315bb1325ab3325ab43359b63458b73557b93556ba3655bc3754bd3853bf3952c03a51c13a50c33b4fc43c4ec63d4dc73e4cc83f4bca404acb4149cc4248ce4347cf4446d04545d24644d34743d44842d54a41d74b3fd84c3ed94d3dda4e3cdb503bdd513ade5238df5337e05536e15635e25734e35933e45a31e55c30e65d2fe75e2ee8602de9612bea632aeb6429eb6628ec6726ed6925ee6a24ef6c23ef6e21f06f20f1711ff1731df2741cf3761bf37819f47918f57b17f57d15f67e14f68013f78212f78410f8850ff8870ef8890cf98b0bf98c0af98e09fa9008fa9207fa9407fb9606fb9706fb9906fb9b06fb9d07fc9f07fca108fca309fca50afca60cfca80dfcaa0ffcac11fcae12fcb014fcb216fcb418fbb61afbb81dfbba1ffbbc21fbbe23fac026fac228fac42afac62df9c72ff9c932f9cb35f8cd37f8cf3af7d13df7d340f6d543f6d746f5d949f5db4cf4dd4ff4df53f4e156f3e35af3e55df2e661f2e865f2ea69f1ec6df1ed71f1ef75f1f179f2f27df2f482f3f586f3f68af4f88ef5f992f6fa96f8fb9af9fc9dfafda1fcffa4")); + +var plasma = ramp$1(colors("0d088710078813078916078a19068c1b068d1d068e20068f2206902406912605912805922a05932c05942e05952f059631059733059735049837049938049a3a049a3c049b3e049c3f049c41049d43039e44039e46039f48039f4903a04b03a14c02a14e02a25002a25102a35302a35502a45601a45801a45901a55b01a55c01a65e01a66001a66100a76300a76400a76600a76700a86900a86a00a86c00a86e00a86f00a87100a87201a87401a87501a87701a87801a87a02a87b02a87d03a87e03a88004a88104a78305a78405a78606a68707a68808a68a09a58b0aa58d0ba58e0ca48f0da4910ea3920fa39410a29511a19613a19814a099159f9a169f9c179e9d189d9e199da01a9ca11b9ba21d9aa31e9aa51f99a62098a72197a82296aa2395ab2494ac2694ad2793ae2892b02991b12a90b22b8fb32c8eb42e8db52f8cb6308bb7318ab83289ba3388bb3488bc3587bd3786be3885bf3984c03a83c13b82c23c81c33d80c43e7fc5407ec6417dc7427cc8437bc9447aca457acb4679cc4778cc4977cd4a76ce4b75cf4c74d04d73d14e72d24f71d35171d45270d5536fd5546ed6556dd7566cd8576bd9586ada5a6ada5b69db5c68dc5d67dd5e66de5f65de6164df6263e06363e16462e26561e26660e3685fe4695ee56a5de56b5de66c5ce76e5be76f5ae87059e97158e97257ea7457eb7556eb7655ec7754ed7953ed7a52ee7b51ef7c51ef7e50f07f4ff0804ef1814df1834cf2844bf3854bf3874af48849f48948f58b47f58c46f68d45f68f44f79044f79143f79342f89441f89540f9973ff9983ef99a3efa9b3dfa9c3cfa9e3bfb9f3afba139fba238fca338fca537fca636fca835fca934fdab33fdac33fdae32fdaf31fdb130fdb22ffdb42ffdb52efeb72dfeb82cfeba2cfebb2bfebd2afebe2afec029fdc229fdc328fdc527fdc627fdc827fdca26fdcb26fccd25fcce25fcd025fcd225fbd324fbd524fbd724fad824fada24f9dc24f9dd25f8df25f8e125f7e225f7e425f6e626f6e826f5e926f5eb27f4ed27f3ee27f3f027f2f227f1f426f1f525f0f724f0f921")); + +exports.schemeCategory10 = category10; +exports.schemeAccent = Accent; +exports.schemeDark2 = Dark2; +exports.schemePaired = Paired; +exports.schemePastel1 = Pastel1; +exports.schemePastel2 = Pastel2; +exports.schemeSet1 = Set1; +exports.schemeSet2 = Set2; +exports.schemeSet3 = Set3; +exports.interpolateBrBG = BrBG; +exports.schemeBrBG = scheme; +exports.interpolatePRGn = PRGn; +exports.schemePRGn = scheme$1; +exports.interpolatePiYG = PiYG; +exports.schemePiYG = scheme$2; +exports.interpolatePuOr = PuOr; +exports.schemePuOr = scheme$3; +exports.interpolateRdBu = RdBu; +exports.schemeRdBu = scheme$4; +exports.interpolateRdGy = RdGy; +exports.schemeRdGy = scheme$5; +exports.interpolateRdYlBu = RdYlBu; +exports.schemeRdYlBu = scheme$6; +exports.interpolateRdYlGn = RdYlGn; +exports.schemeRdYlGn = scheme$7; +exports.interpolateSpectral = Spectral; +exports.schemeSpectral = scheme$8; +exports.interpolateBuGn = BuGn; +exports.schemeBuGn = scheme$9; +exports.interpolateBuPu = BuPu; +exports.schemeBuPu = scheme$10; +exports.interpolateGnBu = GnBu; +exports.schemeGnBu = scheme$11; +exports.interpolateOrRd = OrRd; +exports.schemeOrRd = scheme$12; +exports.interpolatePuBuGn = PuBuGn; +exports.schemePuBuGn = scheme$13; +exports.interpolatePuBu = PuBu; +exports.schemePuBu = scheme$14; +exports.interpolatePuRd = PuRd; +exports.schemePuRd = scheme$15; +exports.interpolateRdPu = RdPu; +exports.schemeRdPu = scheme$16; +exports.interpolateYlGnBu = YlGnBu; +exports.schemeYlGnBu = scheme$17; +exports.interpolateYlGn = YlGn; +exports.schemeYlGn = scheme$18; +exports.interpolateYlOrBr = YlOrBr; +exports.schemeYlOrBr = scheme$19; +exports.interpolateYlOrRd = YlOrRd; +exports.schemeYlOrRd = scheme$20; +exports.interpolateBlues = Blues; +exports.schemeBlues = scheme$21; +exports.interpolateGreens = Greens; +exports.schemeGreens = scheme$22; +exports.interpolateGreys = Greys; +exports.schemeGreys = scheme$23; +exports.interpolatePurples = Purples; +exports.schemePurples = scheme$24; +exports.interpolateReds = Reds; +exports.schemeReds = scheme$25; +exports.interpolateOranges = Oranges; +exports.schemeOranges = scheme$26; +exports.interpolateCubehelixDefault = cubehelix$1; +exports.interpolateRainbow = rainbow$1; +exports.interpolateWarm = warm; +exports.interpolateCool = cool; +exports.interpolateViridis = viridis; +exports.interpolateMagma = magma; +exports.interpolateInferno = inferno; +exports.interpolatePlasma = plasma; + +Object.defineProperty(exports, '__esModule', { value: true }); + +}))); + +},{"d3-color":8,"d3-interpolate":9}],11:[function(require,module,exports){ +/** + * dat-gui JavaScript Controller Library + * http://code.google.com/p/dat-gui + * + * Copyright 2011 Data Arts Team, Google Creative Lab + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.dat = factory()); +}(this, (function () { 'use strict'; + +function ___$insertStyle(css) { + if (!css) { + return; + } + if (typeof window === 'undefined') { + return; + } + + var style = document.createElement('style'); + + style.setAttribute('type', 'text/css'); + style.innerHTML = css; + document.head.appendChild(style); + + return css; +} + +function colorToString (color, forceCSSHex) { + var colorFormat = color.__state.conversionName.toString(); + var r = Math.round(color.r); + var g = Math.round(color.g); + var b = Math.round(color.b); + var a = color.a; + var h = Math.round(color.h); + var s = color.s.toFixed(1); + var v = color.v.toFixed(1); + if (forceCSSHex || colorFormat === 'THREE_CHAR_HEX' || colorFormat === 'SIX_CHAR_HEX') { + var str = color.hex.toString(16); + while (str.length < 6) { + str = '0' + str; + } + return '#' + str; + } else if (colorFormat === 'CSS_RGB') { + return 'rgb(' + r + ',' + g + ',' + b + ')'; + } else if (colorFormat === 'CSS_RGBA') { + return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; + } else if (colorFormat === 'HEX') { + return '0x' + color.hex.toString(16); + } else if (colorFormat === 'RGB_ARRAY') { + return '[' + r + ',' + g + ',' + b + ']'; + } else if (colorFormat === 'RGBA_ARRAY') { + return '[' + r + ',' + g + ',' + b + ',' + a + ']'; + } else if (colorFormat === 'RGB_OBJ') { + return '{r:' + r + ',g:' + g + ',b:' + b + '}'; + } else if (colorFormat === 'RGBA_OBJ') { + return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}'; + } else if (colorFormat === 'HSV_OBJ') { + return '{h:' + h + ',s:' + s + ',v:' + v + '}'; + } else if (colorFormat === 'HSVA_OBJ') { + return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}'; + } + return 'unknown format'; +} + +var ARR_EACH = Array.prototype.forEach; +var ARR_SLICE = Array.prototype.slice; +var Common = { + BREAK: {}, + extend: function extend(target) { + this.each(ARR_SLICE.call(arguments, 1), function (obj) { + var keys = this.isObject(obj) ? Object.keys(obj) : []; + keys.forEach(function (key) { + if (!this.isUndefined(obj[key])) { + target[key] = obj[key]; + } + }.bind(this)); + }, this); + return target; + }, + defaults: function defaults(target) { + this.each(ARR_SLICE.call(arguments, 1), function (obj) { + var keys = this.isObject(obj) ? Object.keys(obj) : []; + keys.forEach(function (key) { + if (this.isUndefined(target[key])) { + target[key] = obj[key]; + } + }.bind(this)); + }, this); + return target; + }, + compose: function compose() { + var toCall = ARR_SLICE.call(arguments); + return function () { + var args = ARR_SLICE.call(arguments); + for (var i = toCall.length - 1; i >= 0; i--) { + args = [toCall[i].apply(this, args)]; + } + return args[0]; + }; + }, + each: function each(obj, itr, scope) { + if (!obj) { + return; + } + if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { + obj.forEach(itr, scope); + } else if (obj.length === obj.length + 0) { + var key = void 0; + var l = void 0; + for (key = 0, l = obj.length; key < l; key++) { + if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) { + return; + } + } + } else { + for (var _key in obj) { + if (itr.call(scope, obj[_key], _key) === this.BREAK) { + return; + } + } + } + }, + defer: function defer(fnc) { + setTimeout(fnc, 0); + }, + debounce: function debounce(func, threshold, callImmediately) { + var timeout = void 0; + return function () { + var obj = this; + var args = arguments; + function delayed() { + timeout = null; + if (!callImmediately) func.apply(obj, args); + } + var callNow = callImmediately || !timeout; + clearTimeout(timeout); + timeout = setTimeout(delayed, threshold); + if (callNow) { + func.apply(obj, args); + } + }; + }, + toArray: function toArray(obj) { + if (obj.toArray) return obj.toArray(); + return ARR_SLICE.call(obj); + }, + isUndefined: function isUndefined(obj) { + return obj === undefined; + }, + isNull: function isNull(obj) { + return obj === null; + }, + isNaN: function (_isNaN) { + function isNaN(_x) { + return _isNaN.apply(this, arguments); + } + isNaN.toString = function () { + return _isNaN.toString(); + }; + return isNaN; + }(function (obj) { + return isNaN(obj); + }), + isArray: Array.isArray || function (obj) { + return obj.constructor === Array; + }, + isObject: function isObject(obj) { + return obj === Object(obj); + }, + isNumber: function isNumber(obj) { + return obj === obj + 0; + }, + isString: function isString(obj) { + return obj === obj + ''; + }, + isBoolean: function isBoolean(obj) { + return obj === false || obj === true; + }, + isFunction: function isFunction(obj) { + return Object.prototype.toString.call(obj) === '[object Function]'; + } +}; + +var INTERPRETATIONS = [ +{ + litmus: Common.isString, + conversions: { + THREE_CHAR_HEX: { + read: function read(original) { + var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); + if (test === null) { + return false; + } + return { + space: 'HEX', + hex: parseInt('0x' + test[1].toString() + test[1].toString() + test[2].toString() + test[2].toString() + test[3].toString() + test[3].toString(), 0) + }; + }, + write: colorToString + }, + SIX_CHAR_HEX: { + read: function read(original) { + var test = original.match(/^#([A-F0-9]{6})$/i); + if (test === null) { + return false; + } + return { + space: 'HEX', + hex: parseInt('0x' + test[1].toString(), 0) + }; + }, + write: colorToString + }, + CSS_RGB: { + read: function read(original) { + var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); + if (test === null) { + return false; + } + return { + space: 'RGB', + r: parseFloat(test[1]), + g: parseFloat(test[2]), + b: parseFloat(test[3]) + }; + }, + write: colorToString + }, + CSS_RGBA: { + read: function read(original) { + var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); + if (test === null) { + return false; + } + return { + space: 'RGB', + r: parseFloat(test[1]), + g: parseFloat(test[2]), + b: parseFloat(test[3]), + a: parseFloat(test[4]) + }; + }, + write: colorToString + } + } +}, +{ + litmus: Common.isNumber, + conversions: { + HEX: { + read: function read(original) { + return { + space: 'HEX', + hex: original, + conversionName: 'HEX' + }; + }, + write: function write(color) { + return color.hex; + } + } + } +}, +{ + litmus: Common.isArray, + conversions: { + RGB_ARRAY: { + read: function read(original) { + if (original.length !== 3) { + return false; + } + return { + space: 'RGB', + r: original[0], + g: original[1], + b: original[2] + }; + }, + write: function write(color) { + return [color.r, color.g, color.b]; + } + }, + RGBA_ARRAY: { + read: function read(original) { + if (original.length !== 4) return false; + return { + space: 'RGB', + r: original[0], + g: original[1], + b: original[2], + a: original[3] + }; + }, + write: function write(color) { + return [color.r, color.g, color.b, color.a]; + } + } + } +}, +{ + litmus: Common.isObject, + conversions: { + RGBA_OBJ: { + read: function read(original) { + if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b) && Common.isNumber(original.a)) { + return { + space: 'RGB', + r: original.r, + g: original.g, + b: original.b, + a: original.a + }; + } + return false; + }, + write: function write(color) { + return { + r: color.r, + g: color.g, + b: color.b, + a: color.a + }; + } + }, + RGB_OBJ: { + read: function read(original) { + if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b)) { + return { + space: 'RGB', + r: original.r, + g: original.g, + b: original.b + }; + } + return false; + }, + write: function write(color) { + return { + r: color.r, + g: color.g, + b: color.b + }; + } + }, + HSVA_OBJ: { + read: function read(original) { + if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v) && Common.isNumber(original.a)) { + return { + space: 'HSV', + h: original.h, + s: original.s, + v: original.v, + a: original.a + }; + } + return false; + }, + write: function write(color) { + return { + h: color.h, + s: color.s, + v: color.v, + a: color.a + }; + } + }, + HSV_OBJ: { + read: function read(original) { + if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v)) { + return { + space: 'HSV', + h: original.h, + s: original.s, + v: original.v + }; + } + return false; + }, + write: function write(color) { + return { + h: color.h, + s: color.s, + v: color.v + }; + } + } + } +}]; +var result = void 0; +var toReturn = void 0; +var interpret = function interpret() { + toReturn = false; + var original = arguments.length > 1 ? Common.toArray(arguments) : arguments[0]; + Common.each(INTERPRETATIONS, function (family) { + if (family.litmus(original)) { + Common.each(family.conversions, function (conversion, conversionName) { + result = conversion.read(original); + if (toReturn === false && result !== false) { + toReturn = result; + result.conversionName = conversionName; + result.conversion = conversion; + return Common.BREAK; + } + }); + return Common.BREAK; + } + }); + return toReturn; +}; + +var tmpComponent = void 0; +var ColorMath = { + hsv_to_rgb: function hsv_to_rgb(h, s, v) { + var hi = Math.floor(h / 60) % 6; + var f = h / 60 - Math.floor(h / 60); + var p = v * (1.0 - s); + var q = v * (1.0 - f * s); + var t = v * (1.0 - (1.0 - f) * s); + var c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][hi]; + return { + r: c[0] * 255, + g: c[1] * 255, + b: c[2] * 255 + }; + }, + rgb_to_hsv: function rgb_to_hsv(r, g, b) { + var min = Math.min(r, g, b); + var max = Math.max(r, g, b); + var delta = max - min; + var h = void 0; + var s = void 0; + if (max !== 0) { + s = delta / max; + } else { + return { + h: NaN, + s: 0, + v: 0 + }; + } + if (r === max) { + h = (g - b) / delta; + } else if (g === max) { + h = 2 + (b - r) / delta; + } else { + h = 4 + (r - g) / delta; + } + h /= 6; + if (h < 0) { + h += 1; + } + return { + h: h * 360, + s: s, + v: max / 255 + }; + }, + rgb_to_hex: function rgb_to_hex(r, g, b) { + var hex = this.hex_with_component(0, 2, r); + hex = this.hex_with_component(hex, 1, g); + hex = this.hex_with_component(hex, 0, b); + return hex; + }, + component_from_hex: function component_from_hex(hex, componentIndex) { + return hex >> componentIndex * 8 & 0xFF; + }, + hex_with_component: function hex_with_component(hex, componentIndex, value) { + return value << (tmpComponent = componentIndex * 8) | hex & ~(0xFF << tmpComponent); + } +}; + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { + return typeof obj; +} : function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; +}; + + + + + + + + + + + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + + + + + + + +var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } +}; + +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; + + + + + + + + + + + +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; + +var Color = function () { + function Color() { + classCallCheck(this, Color); + this.__state = interpret.apply(this, arguments); + if (this.__state === false) { + throw new Error('Failed to interpret color arguments'); + } + this.__state.a = this.__state.a || 1; + } + createClass(Color, [{ + key: 'toString', + value: function toString() { + return colorToString(this); + } + }, { + key: 'toHexString', + value: function toHexString() { + return colorToString(this, true); + } + }, { + key: 'toOriginal', + value: function toOriginal() { + return this.__state.conversion.write(this); + } + }]); + return Color; +}(); +function defineRGBComponent(target, component, componentHexIndex) { + Object.defineProperty(target, component, { + get: function get$$1() { + if (this.__state.space === 'RGB') { + return this.__state[component]; + } + Color.recalculateRGB(this, component, componentHexIndex); + return this.__state[component]; + }, + set: function set$$1(v) { + if (this.__state.space !== 'RGB') { + Color.recalculateRGB(this, component, componentHexIndex); + this.__state.space = 'RGB'; + } + this.__state[component] = v; + } + }); +} +function defineHSVComponent(target, component) { + Object.defineProperty(target, component, { + get: function get$$1() { + if (this.__state.space === 'HSV') { + return this.__state[component]; + } + Color.recalculateHSV(this); + return this.__state[component]; + }, + set: function set$$1(v) { + if (this.__state.space !== 'HSV') { + Color.recalculateHSV(this); + this.__state.space = 'HSV'; + } + this.__state[component] = v; + } + }); +} +Color.recalculateRGB = function (color, component, componentHexIndex) { + if (color.__state.space === 'HEX') { + color.__state[component] = ColorMath.component_from_hex(color.__state.hex, componentHexIndex); + } else if (color.__state.space === 'HSV') { + Common.extend(color.__state, ColorMath.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v)); + } else { + throw new Error('Corrupted color state'); + } +}; +Color.recalculateHSV = function (color) { + var result = ColorMath.rgb_to_hsv(color.r, color.g, color.b); + Common.extend(color.__state, { + s: result.s, + v: result.v + }); + if (!Common.isNaN(result.h)) { + color.__state.h = result.h; + } else if (Common.isUndefined(color.__state.h)) { + color.__state.h = 0; + } +}; +Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a']; +defineRGBComponent(Color.prototype, 'r', 2); +defineRGBComponent(Color.prototype, 'g', 1); +defineRGBComponent(Color.prototype, 'b', 0); +defineHSVComponent(Color.prototype, 'h'); +defineHSVComponent(Color.prototype, 's'); +defineHSVComponent(Color.prototype, 'v'); +Object.defineProperty(Color.prototype, 'a', { + get: function get$$1() { + return this.__state.a; + }, + set: function set$$1(v) { + this.__state.a = v; + } +}); +Object.defineProperty(Color.prototype, 'hex', { + get: function get$$1() { + if (!this.__state.space !== 'HEX') { + this.__state.hex = ColorMath.rgb_to_hex(this.r, this.g, this.b); + } + return this.__state.hex; + }, + set: function set$$1(v) { + this.__state.space = 'HEX'; + this.__state.hex = v; + } +}); + +var Controller = function () { + function Controller(object, property) { + classCallCheck(this, Controller); + this.initialValue = object[property]; + this.domElement = document.createElement('div'); + this.object = object; + this.property = property; + this.__onChange = undefined; + this.__onFinishChange = undefined; + } + createClass(Controller, [{ + key: 'onChange', + value: function onChange(fnc) { + this.__onChange = fnc; + return this; + } + }, { + key: 'onFinishChange', + value: function onFinishChange(fnc) { + this.__onFinishChange = fnc; + return this; + } + }, { + key: 'setValue', + value: function setValue(newValue) { + this.object[this.property] = newValue; + if (this.__onChange) { + this.__onChange.call(this, newValue); + } + this.updateDisplay(); + return this; + } + }, { + key: 'getValue', + value: function getValue() { + return this.object[this.property]; + } + }, { + key: 'updateDisplay', + value: function updateDisplay() { + return this; + } + }, { + key: 'isModified', + value: function isModified() { + return this.initialValue !== this.getValue(); + } + }]); + return Controller; +}(); + +var EVENT_MAP = { + HTMLEvents: ['change'], + MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'], + KeyboardEvents: ['keydown'] +}; +var EVENT_MAP_INV = {}; +Common.each(EVENT_MAP, function (v, k) { + Common.each(v, function (e) { + EVENT_MAP_INV[e] = k; + }); +}); +var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/; +function cssValueToPixels(val) { + if (val === '0' || Common.isUndefined(val)) { + return 0; + } + var match = val.match(CSS_VALUE_PIXELS); + if (!Common.isNull(match)) { + return parseFloat(match[1]); + } + return 0; +} +var dom = { + makeSelectable: function makeSelectable(elem, selectable) { + if (elem === undefined || elem.style === undefined) return; + elem.onselectstart = selectable ? function () { + return false; + } : function () {}; + elem.style.MozUserSelect = selectable ? 'auto' : 'none'; + elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none'; + elem.unselectable = selectable ? 'on' : 'off'; + }, + makeFullscreen: function makeFullscreen(elem, hor, vert) { + var vertical = vert; + var horizontal = hor; + if (Common.isUndefined(horizontal)) { + horizontal = true; + } + if (Common.isUndefined(vertical)) { + vertical = true; + } + elem.style.position = 'absolute'; + if (horizontal) { + elem.style.left = 0; + elem.style.right = 0; + } + if (vertical) { + elem.style.top = 0; + elem.style.bottom = 0; + } + }, + fakeEvent: function fakeEvent(elem, eventType, pars, aux) { + var params = pars || {}; + var className = EVENT_MAP_INV[eventType]; + if (!className) { + throw new Error('Event type ' + eventType + ' not supported.'); + } + var evt = document.createEvent(className); + switch (className) { + case 'MouseEvents': + { + var clientX = params.x || params.clientX || 0; + var clientY = params.y || params.clientY || 0; + evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0, + 0, + clientX, + clientY, + false, false, false, false, 0, null); + break; + } + case 'KeyboardEvents': + { + var init = evt.initKeyboardEvent || evt.initKeyEvent; + Common.defaults(params, { + cancelable: true, + ctrlKey: false, + altKey: false, + shiftKey: false, + metaKey: false, + keyCode: undefined, + charCode: undefined + }); + init(eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode); + break; + } + default: + { + evt.initEvent(eventType, params.bubbles || false, params.cancelable || true); + break; + } + } + Common.defaults(evt, aux); + elem.dispatchEvent(evt); + }, + bind: function bind(elem, event, func, newBool) { + var bool = newBool || false; + if (elem.addEventListener) { + elem.addEventListener(event, func, bool); + } else if (elem.attachEvent) { + elem.attachEvent('on' + event, func); + } + return dom; + }, + unbind: function unbind(elem, event, func, newBool) { + var bool = newBool || false; + if (elem.removeEventListener) { + elem.removeEventListener(event, func, bool); + } else if (elem.detachEvent) { + elem.detachEvent('on' + event, func); + } + return dom; + }, + addClass: function addClass(elem, className) { + if (elem.className === undefined) { + elem.className = className; + } else if (elem.className !== className) { + var classes = elem.className.split(/ +/); + if (classes.indexOf(className) === -1) { + classes.push(className); + elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, ''); + } + } + return dom; + }, + removeClass: function removeClass(elem, className) { + if (className) { + if (elem.className === className) { + elem.removeAttribute('class'); + } else { + var classes = elem.className.split(/ +/); + var index = classes.indexOf(className); + if (index !== -1) { + classes.splice(index, 1); + elem.className = classes.join(' '); + } + } + } else { + elem.className = undefined; + } + return dom; + }, + hasClass: function hasClass(elem, className) { + return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false; + }, + getWidth: function getWidth(elem) { + var style = getComputedStyle(elem); + return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + cssValueToPixels(style.width); + }, + getHeight: function getHeight(elem) { + var style = getComputedStyle(elem); + return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style.height); + }, + getOffset: function getOffset(el) { + var elem = el; + var offset = { left: 0, top: 0 }; + if (elem.offsetParent) { + do { + offset.left += elem.offsetLeft; + offset.top += elem.offsetTop; + elem = elem.offsetParent; + } while (elem); + } + return offset; + }, + isActive: function isActive(elem) { + return elem === document.activeElement && (elem.type || elem.href); + } +}; + +var BooleanController = function (_Controller) { + inherits(BooleanController, _Controller); + function BooleanController(object, property) { + classCallCheck(this, BooleanController); + var _this2 = possibleConstructorReturn(this, (BooleanController.__proto__ || Object.getPrototypeOf(BooleanController)).call(this, object, property)); + var _this = _this2; + _this2.__prev = _this2.getValue(); + _this2.__checkbox = document.createElement('input'); + _this2.__checkbox.setAttribute('type', 'checkbox'); + function onChange() { + _this.setValue(!_this.__prev); + } + dom.bind(_this2.__checkbox, 'change', onChange, false); + _this2.domElement.appendChild(_this2.__checkbox); + _this2.updateDisplay(); + return _this2; + } + createClass(BooleanController, [{ + key: 'setValue', + value: function setValue(v) { + var toReturn = get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'setValue', this).call(this, v); + if (this.__onFinishChange) { + this.__onFinishChange.call(this, this.getValue()); + } + this.__prev = this.getValue(); + return toReturn; + } + }, { + key: 'updateDisplay', + value: function updateDisplay() { + if (this.getValue() === true) { + this.__checkbox.setAttribute('checked', 'checked'); + this.__checkbox.checked = true; + this.__prev = true; + } else { + this.__checkbox.checked = false; + this.__prev = false; + } + return get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'updateDisplay', this).call(this); + } + }]); + return BooleanController; +}(Controller); + +var OptionController = function (_Controller) { + inherits(OptionController, _Controller); + function OptionController(object, property, opts) { + classCallCheck(this, OptionController); + var _this2 = possibleConstructorReturn(this, (OptionController.__proto__ || Object.getPrototypeOf(OptionController)).call(this, object, property)); + var options = opts; + var _this = _this2; + _this2.__select = document.createElement('select'); + if (Common.isArray(options)) { + var map = {}; + Common.each(options, function (element) { + map[element] = element; + }); + options = map; + } + Common.each(options, function (value, key) { + var opt = document.createElement('option'); + opt.innerHTML = key; + opt.setAttribute('value', value); + _this.__select.appendChild(opt); + }); + _this2.updateDisplay(); + dom.bind(_this2.__select, 'change', function () { + var desiredValue = this.options[this.selectedIndex].value; + _this.setValue(desiredValue); + }); + _this2.domElement.appendChild(_this2.__select); + return _this2; + } + createClass(OptionController, [{ + key: 'setValue', + value: function setValue(v) { + var toReturn = get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'setValue', this).call(this, v); + if (this.__onFinishChange) { + this.__onFinishChange.call(this, this.getValue()); + } + return toReturn; + } + }, { + key: 'updateDisplay', + value: function updateDisplay() { + if (dom.isActive(this.__select)) return this; + this.__select.value = this.getValue(); + return get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'updateDisplay', this).call(this); + } + }]); + return OptionController; +}(Controller); + +var StringController = function (_Controller) { + inherits(StringController, _Controller); + function StringController(object, property) { + classCallCheck(this, StringController); + var _this2 = possibleConstructorReturn(this, (StringController.__proto__ || Object.getPrototypeOf(StringController)).call(this, object, property)); + var _this = _this2; + function onChange() { + _this.setValue(_this.__input.value); + } + function onBlur() { + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.getValue()); + } + } + _this2.__input = document.createElement('input'); + _this2.__input.setAttribute('type', 'text'); + dom.bind(_this2.__input, 'keyup', onChange); + dom.bind(_this2.__input, 'change', onChange); + dom.bind(_this2.__input, 'blur', onBlur); + dom.bind(_this2.__input, 'keydown', function (e) { + if (e.keyCode === 13) { + this.blur(); + } + }); + _this2.updateDisplay(); + _this2.domElement.appendChild(_this2.__input); + return _this2; + } + createClass(StringController, [{ + key: 'updateDisplay', + value: function updateDisplay() { + if (!dom.isActive(this.__input)) { + this.__input.value = this.getValue(); + } + return get(StringController.prototype.__proto__ || Object.getPrototypeOf(StringController.prototype), 'updateDisplay', this).call(this); + } + }]); + return StringController; +}(Controller); + +function numDecimals(x) { + var _x = x.toString(); + if (_x.indexOf('.') > -1) { + return _x.length - _x.indexOf('.') - 1; + } + return 0; +} +var NumberController = function (_Controller) { + inherits(NumberController, _Controller); + function NumberController(object, property, params) { + classCallCheck(this, NumberController); + var _this = possibleConstructorReturn(this, (NumberController.__proto__ || Object.getPrototypeOf(NumberController)).call(this, object, property)); + var _params = params || {}; + _this.__min = _params.min; + _this.__max = _params.max; + _this.__step = _params.step; + if (Common.isUndefined(_this.__step)) { + if (_this.initialValue === 0) { + _this.__impliedStep = 1; + } else { + _this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(_this.initialValue)) / Math.LN10)) / 10; + } + } else { + _this.__impliedStep = _this.__step; + } + _this.__precision = numDecimals(_this.__impliedStep); + return _this; + } + createClass(NumberController, [{ + key: 'setValue', + value: function setValue(v) { + var _v = v; + if (this.__min !== undefined && _v < this.__min) { + _v = this.__min; + } else if (this.__max !== undefined && _v > this.__max) { + _v = this.__max; + } + if (this.__step !== undefined && _v % this.__step !== 0) { + _v = Math.round(_v / this.__step) * this.__step; + } + return get(NumberController.prototype.__proto__ || Object.getPrototypeOf(NumberController.prototype), 'setValue', this).call(this, _v); + } + }, { + key: 'min', + value: function min(minValue) { + this.__min = minValue; + return this; + } + }, { + key: 'max', + value: function max(maxValue) { + this.__max = maxValue; + return this; + } + }, { + key: 'step', + value: function step(stepValue) { + this.__step = stepValue; + this.__impliedStep = stepValue; + this.__precision = numDecimals(stepValue); + return this; + } + }]); + return NumberController; +}(Controller); + +function roundToDecimal(value, decimals) { + var tenTo = Math.pow(10, decimals); + return Math.round(value * tenTo) / tenTo; +} +var NumberControllerBox = function (_NumberController) { + inherits(NumberControllerBox, _NumberController); + function NumberControllerBox(object, property, params) { + classCallCheck(this, NumberControllerBox); + var _this2 = possibleConstructorReturn(this, (NumberControllerBox.__proto__ || Object.getPrototypeOf(NumberControllerBox)).call(this, object, property, params)); + _this2.__truncationSuspended = false; + var _this = _this2; + var prevY = void 0; + function onChange() { + var attempted = parseFloat(_this.__input.value); + if (!Common.isNaN(attempted)) { + _this.setValue(attempted); + } + } + function onFinish() { + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.getValue()); + } + } + function onBlur() { + onFinish(); + } + function onMouseDrag(e) { + var diff = prevY - e.clientY; + _this.setValue(_this.getValue() + diff * _this.__impliedStep); + prevY = e.clientY; + } + function onMouseUp() { + dom.unbind(window, 'mousemove', onMouseDrag); + dom.unbind(window, 'mouseup', onMouseUp); + onFinish(); + } + function onMouseDown(e) { + dom.bind(window, 'mousemove', onMouseDrag); + dom.bind(window, 'mouseup', onMouseUp); + prevY = e.clientY; + } + _this2.__input = document.createElement('input'); + _this2.__input.setAttribute('type', 'text'); + dom.bind(_this2.__input, 'change', onChange); + dom.bind(_this2.__input, 'blur', onBlur); + dom.bind(_this2.__input, 'mousedown', onMouseDown); + dom.bind(_this2.__input, 'keydown', function (e) { + if (e.keyCode === 13) { + _this.__truncationSuspended = true; + this.blur(); + _this.__truncationSuspended = false; + onFinish(); + } + }); + _this2.updateDisplay(); + _this2.domElement.appendChild(_this2.__input); + return _this2; + } + createClass(NumberControllerBox, [{ + key: 'updateDisplay', + value: function updateDisplay() { + this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision); + return get(NumberControllerBox.prototype.__proto__ || Object.getPrototypeOf(NumberControllerBox.prototype), 'updateDisplay', this).call(this); + } + }]); + return NumberControllerBox; +}(NumberController); + +function map(v, i1, i2, o1, o2) { + return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); +} +var NumberControllerSlider = function (_NumberController) { + inherits(NumberControllerSlider, _NumberController); + function NumberControllerSlider(object, property, min, max, step) { + classCallCheck(this, NumberControllerSlider); + var _this2 = possibleConstructorReturn(this, (NumberControllerSlider.__proto__ || Object.getPrototypeOf(NumberControllerSlider)).call(this, object, property, { min: min, max: max, step: step })); + var _this = _this2; + _this2.__background = document.createElement('div'); + _this2.__foreground = document.createElement('div'); + dom.bind(_this2.__background, 'mousedown', onMouseDown); + dom.bind(_this2.__background, 'touchstart', onTouchStart); + dom.addClass(_this2.__background, 'slider'); + dom.addClass(_this2.__foreground, 'slider-fg'); + function onMouseDown(e) { + document.activeElement.blur(); + dom.bind(window, 'mousemove', onMouseDrag); + dom.bind(window, 'mouseup', onMouseUp); + onMouseDrag(e); + } + function onMouseDrag(e) { + e.preventDefault(); + var bgRect = _this.__background.getBoundingClientRect(); + _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)); + return false; + } + function onMouseUp() { + dom.unbind(window, 'mousemove', onMouseDrag); + dom.unbind(window, 'mouseup', onMouseUp); + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.getValue()); + } + } + function onTouchStart(e) { + if (e.touches.length !== 1) { + return; + } + dom.bind(window, 'touchmove', onTouchMove); + dom.bind(window, 'touchend', onTouchEnd); + onTouchMove(e); + } + function onTouchMove(e) { + var clientX = e.touches[0].clientX; + var bgRect = _this.__background.getBoundingClientRect(); + _this.setValue(map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)); + } + function onTouchEnd() { + dom.unbind(window, 'touchmove', onTouchMove); + dom.unbind(window, 'touchend', onTouchEnd); + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.getValue()); + } + } + _this2.updateDisplay(); + _this2.__background.appendChild(_this2.__foreground); + _this2.domElement.appendChild(_this2.__background); + return _this2; + } + createClass(NumberControllerSlider, [{ + key: 'updateDisplay', + value: function updateDisplay() { + var pct = (this.getValue() - this.__min) / (this.__max - this.__min); + this.__foreground.style.width = pct * 100 + '%'; + return get(NumberControllerSlider.prototype.__proto__ || Object.getPrototypeOf(NumberControllerSlider.prototype), 'updateDisplay', this).call(this); + } + }]); + return NumberControllerSlider; +}(NumberController); + +var FunctionController = function (_Controller) { + inherits(FunctionController, _Controller); + function FunctionController(object, property, text) { + classCallCheck(this, FunctionController); + var _this2 = possibleConstructorReturn(this, (FunctionController.__proto__ || Object.getPrototypeOf(FunctionController)).call(this, object, property)); + var _this = _this2; + _this2.__button = document.createElement('div'); + _this2.__button.innerHTML = text === undefined ? 'Fire' : text; + dom.bind(_this2.__button, 'click', function (e) { + e.preventDefault(); + _this.fire(); + return false; + }); + dom.addClass(_this2.__button, 'button'); + _this2.domElement.appendChild(_this2.__button); + return _this2; + } + createClass(FunctionController, [{ + key: 'fire', + value: function fire() { + if (this.__onChange) { + this.__onChange.call(this); + } + this.getValue().call(this.object); + if (this.__onFinishChange) { + this.__onFinishChange.call(this, this.getValue()); + } + } + }]); + return FunctionController; +}(Controller); + +var ColorController = function (_Controller) { + inherits(ColorController, _Controller); + function ColorController(object, property) { + classCallCheck(this, ColorController); + var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property)); + _this2.__color = new Color(_this2.getValue()); + _this2.__temp = new Color(0); + var _this = _this2; + _this2.domElement = document.createElement('div'); + dom.makeSelectable(_this2.domElement, false); + _this2.__selector = document.createElement('div'); + _this2.__selector.className = 'selector'; + _this2.__saturation_field = document.createElement('div'); + _this2.__saturation_field.className = 'saturation-field'; + _this2.__field_knob = document.createElement('div'); + _this2.__field_knob.className = 'field-knob'; + _this2.__field_knob_border = '2px solid '; + _this2.__hue_knob = document.createElement('div'); + _this2.__hue_knob.className = 'hue-knob'; + _this2.__hue_field = document.createElement('div'); + _this2.__hue_field.className = 'hue-field'; + _this2.__input = document.createElement('input'); + _this2.__input.type = 'text'; + _this2.__input_textShadow = '0 1px 1px '; + dom.bind(_this2.__input, 'keydown', function (e) { + if (e.keyCode === 13) { + onBlur.call(this); + } + }); + dom.bind(_this2.__input, 'blur', onBlur); + dom.bind(_this2.__selector, 'mousedown', function () { + dom.addClass(this, 'drag').bind(window, 'mouseup', function () { + dom.removeClass(_this.__selector, 'drag'); + }); + }); + dom.bind(_this2.__selector, 'touchstart', function () { + dom.addClass(this, 'drag').bind(window, 'touchend', function () { + dom.removeClass(_this.__selector, 'drag'); + }); + }); + var valueField = document.createElement('div'); + Common.extend(_this2.__selector.style, { + width: '122px', + height: '102px', + padding: '3px', + backgroundColor: '#222', + boxShadow: '0px 1px 3px rgba(0,0,0,0.3)' + }); + Common.extend(_this2.__field_knob.style, { + position: 'absolute', + width: '12px', + height: '12px', + border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'), + boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', + borderRadius: '12px', + zIndex: 1 + }); + Common.extend(_this2.__hue_knob.style, { + position: 'absolute', + width: '15px', + height: '2px', + borderRight: '4px solid #fff', + zIndex: 1 + }); + Common.extend(_this2.__saturation_field.style, { + width: '100px', + height: '100px', + border: '1px solid #555', + marginRight: '3px', + display: 'inline-block', + cursor: 'pointer' + }); + Common.extend(valueField.style, { + width: '100%', + height: '100%', + background: 'none' + }); + linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000'); + Common.extend(_this2.__hue_field.style, { + width: '15px', + height: '100px', + border: '1px solid #555', + cursor: 'ns-resize', + position: 'absolute', + top: '3px', + right: '3px' + }); + hueGradient(_this2.__hue_field); + Common.extend(_this2.__input.style, { + outline: 'none', + textAlign: 'center', + color: '#fff', + border: 0, + fontWeight: 'bold', + textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)' + }); + dom.bind(_this2.__saturation_field, 'mousedown', fieldDown); + dom.bind(_this2.__saturation_field, 'touchstart', fieldDown); + dom.bind(_this2.__field_knob, 'mousedown', fieldDown); + dom.bind(_this2.__field_knob, 'touchstart', fieldDown); + dom.bind(_this2.__hue_field, 'mousedown', fieldDownH); + dom.bind(_this2.__hue_field, 'touchstart', fieldDownH); + function fieldDown(e) { + setSV(e); + dom.bind(window, 'mousemove', setSV); + dom.bind(window, 'touchmove', setSV); + dom.bind(window, 'mouseup', fieldUpSV); + dom.bind(window, 'touchend', fieldUpSV); + } + function fieldDownH(e) { + setH(e); + dom.bind(window, 'mousemove', setH); + dom.bind(window, 'touchmove', setH); + dom.bind(window, 'mouseup', fieldUpH); + dom.bind(window, 'touchend', fieldUpH); + } + function fieldUpSV() { + dom.unbind(window, 'mousemove', setSV); + dom.unbind(window, 'touchmove', setSV); + dom.unbind(window, 'mouseup', fieldUpSV); + dom.unbind(window, 'touchend', fieldUpSV); + onFinish(); + } + function fieldUpH() { + dom.unbind(window, 'mousemove', setH); + dom.unbind(window, 'touchmove', setH); + dom.unbind(window, 'mouseup', fieldUpH); + dom.unbind(window, 'touchend', fieldUpH); + onFinish(); + } + function onBlur() { + var i = interpret(this.value); + if (i !== false) { + _this.__color.__state = i; + _this.setValue(_this.__color.toOriginal()); + } else { + this.value = _this.__color.toString(); + } + } + function onFinish() { + if (_this.__onFinishChange) { + _this.__onFinishChange.call(_this, _this.__color.toOriginal()); + } + } + _this2.__saturation_field.appendChild(valueField); + _this2.__selector.appendChild(_this2.__field_knob); + _this2.__selector.appendChild(_this2.__saturation_field); + _this2.__selector.appendChild(_this2.__hue_field); + _this2.__hue_field.appendChild(_this2.__hue_knob); + _this2.domElement.appendChild(_this2.__input); + _this2.domElement.appendChild(_this2.__selector); + _this2.updateDisplay(); + function setSV(e) { + if (e.type.indexOf('touch') === -1) { + e.preventDefault(); + } + var fieldRect = _this.__saturation_field.getBoundingClientRect(); + var _ref = e.touches && e.touches[0] || e, + clientX = _ref.clientX, + clientY = _ref.clientY; + var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left); + var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); + if (v > 1) { + v = 1; + } else if (v < 0) { + v = 0; + } + if (s > 1) { + s = 1; + } else if (s < 0) { + s = 0; + } + _this.__color.v = v; + _this.__color.s = s; + _this.setValue(_this.__color.toOriginal()); + return false; + } + function setH(e) { + if (e.type.indexOf('touch') === -1) { + e.preventDefault(); + } + var fieldRect = _this.__hue_field.getBoundingClientRect(); + var _ref2 = e.touches && e.touches[0] || e, + clientY = _ref2.clientY; + var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top); + if (h > 1) { + h = 1; + } else if (h < 0) { + h = 0; + } + _this.__color.h = h * 360; + _this.setValue(_this.__color.toOriginal()); + return false; + } + return _this2; + } + createClass(ColorController, [{ + key: 'updateDisplay', + value: function updateDisplay() { + var i = interpret(this.getValue()); + if (i !== false) { + var mismatch = false; + Common.each(Color.COMPONENTS, function (component) { + if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) { + mismatch = true; + return {}; + } + }, this); + if (mismatch) { + Common.extend(this.__color.__state, i); + } + } + Common.extend(this.__temp.__state, this.__color.__state); + this.__temp.a = 1; + var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0; + var _flip = 255 - flip; + Common.extend(this.__field_knob.style, { + marginLeft: 100 * this.__color.s - 7 + 'px', + marginTop: 100 * (1 - this.__color.v) - 7 + 'px', + backgroundColor: this.__temp.toHexString(), + border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')' + }); + this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'; + this.__temp.s = 1; + this.__temp.v = 1; + linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString()); + this.__input.value = this.__color.toString(); + Common.extend(this.__input.style, { + backgroundColor: this.__color.toHexString(), + color: 'rgb(' + flip + ',' + flip + ',' + flip + ')', + textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)' + }); + } + }]); + return ColorController; +}(Controller); +var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', '']; +function linearGradient(elem, x, a, b) { + elem.style.background = ''; + Common.each(vendors, function (vendor) { + elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); '; + }); +} +function hueGradient(elem) { + elem.style.background = ''; + elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'; + elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; + elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; +} + +var css = { + load: function load(url, indoc) { + var doc = indoc || document; + var link = doc.createElement('link'); + link.type = 'text/css'; + link.rel = 'stylesheet'; + link.href = url; + doc.getElementsByTagName('head')[0].appendChild(link); + }, + inject: function inject(cssContent, indoc) { + var doc = indoc || document; + var injected = document.createElement('style'); + injected.type = 'text/css'; + injected.innerHTML = cssContent; + var head = doc.getElementsByTagName('head')[0]; + try { + head.appendChild(injected); + } catch (e) { + } + } +}; + +var saveDialogContents = "
\n\n Here's the new load parameter for your GUI's constructor:\n\n \n\n
\n\n Automatically save\n values to localStorage on exit.\n\n
The values saved to localStorage will\n override those passed to dat.GUI's constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n\n
\n\n
\n\n
"; + +var ControllerFactory = function ControllerFactory(object, property) { + var initialValue = object[property]; + if (Common.isArray(arguments[2]) || Common.isObject(arguments[2])) { + return new OptionController(object, property, arguments[2]); + } + if (Common.isNumber(initialValue)) { + if (Common.isNumber(arguments[2]) && Common.isNumber(arguments[3])) { + if (Common.isNumber(arguments[4])) { + return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]); + } + return new NumberControllerSlider(object, property, arguments[2], arguments[3]); + } + if (Common.isNumber(arguments[4])) { + return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3], step: arguments[4] }); + } + return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] }); + } + if (Common.isString(initialValue)) { + return new StringController(object, property); + } + if (Common.isFunction(initialValue)) { + return new FunctionController(object, property, ''); + } + if (Common.isBoolean(initialValue)) { + return new BooleanController(object, property); + } + return null; +}; + +function requestAnimationFrame(callback) { + setTimeout(callback, 1000 / 60); +} +var requestAnimationFrame$1 = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame; + +var CenteredDiv = function () { + function CenteredDiv() { + classCallCheck(this, CenteredDiv); + this.backgroundElement = document.createElement('div'); + Common.extend(this.backgroundElement.style, { + backgroundColor: 'rgba(0,0,0,0.8)', + top: 0, + left: 0, + display: 'none', + zIndex: '1000', + opacity: 0, + WebkitTransition: 'opacity 0.2s linear', + transition: 'opacity 0.2s linear' + }); + dom.makeFullscreen(this.backgroundElement); + this.backgroundElement.style.position = 'fixed'; + this.domElement = document.createElement('div'); + Common.extend(this.domElement.style, { + position: 'fixed', + display: 'none', + zIndex: '1001', + opacity: 0, + WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear', + transition: 'transform 0.2s ease-out, opacity 0.2s linear' + }); + document.body.appendChild(this.backgroundElement); + document.body.appendChild(this.domElement); + var _this = this; + dom.bind(this.backgroundElement, 'click', function () { + _this.hide(); + }); + } + createClass(CenteredDiv, [{ + key: 'show', + value: function show() { + var _this = this; + this.backgroundElement.style.display = 'block'; + this.domElement.style.display = 'block'; + this.domElement.style.opacity = 0; + this.domElement.style.webkitTransform = 'scale(1.1)'; + this.layout(); + Common.defer(function () { + _this.backgroundElement.style.opacity = 1; + _this.domElement.style.opacity = 1; + _this.domElement.style.webkitTransform = 'scale(1)'; + }); + } + }, { + key: 'hide', + value: function hide() { + var _this = this; + var hide = function hide() { + _this.domElement.style.display = 'none'; + _this.backgroundElement.style.display = 'none'; + dom.unbind(_this.domElement, 'webkitTransitionEnd', hide); + dom.unbind(_this.domElement, 'transitionend', hide); + dom.unbind(_this.domElement, 'oTransitionEnd', hide); + }; + dom.bind(this.domElement, 'webkitTransitionEnd', hide); + dom.bind(this.domElement, 'transitionend', hide); + dom.bind(this.domElement, 'oTransitionEnd', hide); + this.backgroundElement.style.opacity = 0; + this.domElement.style.opacity = 0; + this.domElement.style.webkitTransform = 'scale(1.1)'; + } + }, { + key: 'layout', + value: function layout() { + this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px'; + this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px'; + } + }]); + return CenteredDiv; +}(); + +var styleSheet = ___$insertStyle(".dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity .1s linear;-o-transition:opacity .1s linear;-moz-transition:opacity .1s linear;transition:opacity .1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1 !important}.dg.main:hover .close-button,.dg.main .close-button.drag{opacity:1}.dg.main .close-button{-webkit-transition:opacity .1s linear;-o-transition:opacity .1s linear;-moz-transition:opacity .1s linear;transition:opacity .1s linear;border:0;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main .close-button.close-top{position:relative}.dg.main .close-button.close-bottom{position:absolute}.dg.main .close-button:hover{background-color:#111}.dg.a{float:right;margin-right:15px;overflow-y:visible}.dg.a.has-save>ul.close-top{margin-top:0}.dg.a.has-save>ul.close-bottom{margin-top:27px}.dg.a.has-save>ul.closed{margin-top:0}.dg.a .save-row{top:0;z-index:1002}.dg.a .save-row.close-top{position:relative}.dg.a .save-row.close-bottom{position:fixed}.dg li{-webkit-transition:height .1s ease-out;-o-transition:height .1s ease-out;-moz-transition:height .1s ease-out;transition:height .1s ease-out;-webkit-transition:overflow .1s linear;-o-transition:overflow .1s linear;-moz-transition:overflow .1s linear;transition:overflow .1s linear}.dg li:not(.folder){cursor:auto;height:27px;line-height:27px;padding:0 4px 0 5px}.dg li.folder{padding:0;border-left:4px solid transparent}.dg li.title{cursor:pointer;margin-left:-4px}.dg .closed li:not(.title),.dg .closed ul li,.dg .closed ul li>*{height:0;overflow:hidden;border:0}.dg .cr{clear:both;padding-left:3px;height:27px;overflow:hidden}.dg .property-name{cursor:default;float:left;clear:left;width:40%;overflow:hidden;text-overflow:ellipsis}.dg .c{float:left;width:60%;position:relative}.dg .c input[type=text]{border:0;margin-top:4px;padding:3px;width:100%;float:right}.dg .has-slider input[type=text]{width:30%;margin-left:0}.dg .slider{float:left;width:66%;margin-left:-5px;margin-right:0;height:19px;margin-top:4px}.dg .slider-fg{height:100%}.dg .c input[type=checkbox]{margin-top:7px}.dg .c select{margin-top:5px}.dg .cr.function,.dg .cr.function .property-name,.dg .cr.function *,.dg .cr.boolean,.dg .cr.boolean *{cursor:pointer}.dg .cr.color{overflow:visible}.dg .selector{display:none;position:absolute;margin-left:-9px;margin-top:23px;z-index:10}.dg .c:hover .selector,.dg .selector.drag{display:block}.dg li.save-row{padding:0}.dg li.save-row .button{display:inline-block;padding:0px 6px}.dg.dialogue{background-color:#222;width:460px;padding:15px;font-size:13px;line-height:15px}#dg-new-constructor{padding:10px;color:#222;font-family:Monaco, monospace;font-size:10px;border:0;resize:none;box-shadow:inset 1px 1px 1px #888;word-wrap:break-word;margin:12px 0;display:block;width:440px;overflow-y:scroll;height:100px;position:relative}#dg-local-explain{display:none;font-size:11px;line-height:17px;border-radius:3px;background-color:#333;padding:8px;margin-top:10px}#dg-local-explain code{font-size:10px}#dat-gui-save-locally{display:none}.dg{color:#eee;font:11px 'Lucida Grande', sans-serif;text-shadow:0 -1px 0 #111}.dg.main::-webkit-scrollbar{width:5px;background:#1a1a1a}.dg.main::-webkit-scrollbar-corner{height:0;display:none}.dg.main::-webkit-scrollbar-thumb{border-radius:5px;background:#676767}.dg li:not(.folder){background:#1a1a1a;border-bottom:1px solid #2c2c2c}.dg li.save-row{line-height:25px;background:#dad5cb;border:0}.dg li.save-row select{margin-left:5px;width:108px}.dg li.save-row .button{margin-left:5px;margin-top:1px;border-radius:2px;font-size:9px;line-height:7px;padding:4px 4px 5px 4px;background:#c5bdad;color:#fff;text-shadow:0 1px 0 #b0a58f;box-shadow:0 -1px 0 #b0a58f;cursor:pointer}.dg li.save-row .button.gears{background:#c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;height:7px;width:8px}.dg li.save-row .button:hover{background-color:#bab19e;box-shadow:0 -1px 0 #b0a58f}.dg li.folder{border-bottom:0}.dg li.title{padding-left:16px;background:#000 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.2)}.dg .closed li.title{background-image:url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==)}.dg .cr.boolean{border-left:3px solid #806787}.dg .cr.color{border-left:3px solid}.dg .cr.function{border-left:3px solid #e61d5f}.dg .cr.number{border-left:3px solid #2FA1D6}.dg .cr.number input[type=text]{color:#2FA1D6}.dg .cr.string{border-left:3px solid #1ed36f}.dg .cr.string input[type=text]{color:#1ed36f}.dg .cr.function:hover,.dg .cr.boolean:hover{background:#111}.dg .c input[type=text]{background:#303030;outline:none}.dg .c input[type=text]:hover{background:#3c3c3c}.dg .c input[type=text]:focus{background:#494949;color:#fff}.dg .c .slider{background:#303030;cursor:ew-resize}.dg .c .slider-fg{background:#2FA1D6;max-width:100%}.dg .c .slider:hover{background:#3c3c3c}.dg .c .slider:hover .slider-fg{background:#44abda}\n"); + +css.inject(styleSheet); +var CSS_NAMESPACE = 'dg'; +var HIDE_KEY_CODE = 72; +var CLOSE_BUTTON_HEIGHT = 20; +var DEFAULT_DEFAULT_PRESET_NAME = 'Default'; +var SUPPORTS_LOCAL_STORAGE = function () { + try { + return 'localStorage' in window && window.localStorage !== null; + } catch (e) { + return false; + } +}(); +var SAVE_DIALOGUE = void 0; +var autoPlaceVirgin = true; +var autoPlaceContainer = void 0; +var hide = false; +var hideableGuis = []; +var GUI = function GUI(pars) { + var _this = this; + var params = pars || {}; + this.domElement = document.createElement('div'); + this.__ul = document.createElement('ul'); + this.domElement.appendChild(this.__ul); + dom.addClass(this.domElement, CSS_NAMESPACE); + this.__folders = {}; + this.__controllers = []; + this.__rememberedObjects = []; + this.__rememberedObjectIndecesToControllers = []; + this.__listening = []; + params = Common.defaults(params, { + closeOnTop: false, + autoPlace: true, + width: GUI.DEFAULT_WIDTH + }); + params = Common.defaults(params, { + resizable: params.autoPlace, + hideable: params.autoPlace + }); + if (!Common.isUndefined(params.load)) { + if (params.preset) { + params.load.preset = params.preset; + } + } else { + params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME }; + } + if (Common.isUndefined(params.parent) && params.hideable) { + hideableGuis.push(this); + } + params.resizable = Common.isUndefined(params.parent) && params.resizable; + if (params.autoPlace && Common.isUndefined(params.scrollable)) { + params.scrollable = true; + } + var useLocalStorage = SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true'; + var saveToLocalStorage = void 0; + Object.defineProperties(this, + { + parent: { + get: function get$$1() { + return params.parent; + } + }, + scrollable: { + get: function get$$1() { + return params.scrollable; + } + }, + autoPlace: { + get: function get$$1() { + return params.autoPlace; + } + }, + closeOnTop: { + get: function get$$1() { + return params.closeOnTop; + } + }, + preset: { + get: function get$$1() { + if (_this.parent) { + return _this.getRoot().preset; + } + return params.load.preset; + }, + set: function set$$1(v) { + if (_this.parent) { + _this.getRoot().preset = v; + } else { + params.load.preset = v; + } + setPresetSelectIndex(this); + _this.revert(); + } + }, + width: { + get: function get$$1() { + return params.width; + }, + set: function set$$1(v) { + params.width = v; + setWidth(_this, v); + } + }, + name: { + get: function get$$1() { + return params.name; + }, + set: function set$$1(v) { + params.name = v; + if (titleRowName) { + titleRowName.innerHTML = params.name; + } + } + }, + closed: { + get: function get$$1() { + return params.closed; + }, + set: function set$$1(v) { + params.closed = v; + if (params.closed) { + dom.addClass(_this.__ul, GUI.CLASS_CLOSED); + } else { + dom.removeClass(_this.__ul, GUI.CLASS_CLOSED); + } + this.onResize(); + if (_this.__closeButton) { + _this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED; + } + } + }, + load: { + get: function get$$1() { + return params.load; + } + }, + useLocalStorage: { + get: function get$$1() { + return useLocalStorage; + }, + set: function set$$1(bool) { + if (SUPPORTS_LOCAL_STORAGE) { + useLocalStorage = bool; + if (bool) { + dom.bind(window, 'unload', saveToLocalStorage); + } else { + dom.unbind(window, 'unload', saveToLocalStorage); + } + localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool); + } + } + } + }); + if (Common.isUndefined(params.parent)) { + params.closed = false; + dom.addClass(this.domElement, GUI.CLASS_MAIN); + dom.makeSelectable(this.domElement, false); + if (SUPPORTS_LOCAL_STORAGE) { + if (useLocalStorage) { + _this.useLocalStorage = true; + var savedGui = localStorage.getItem(getLocalStorageHash(this, 'gui')); + if (savedGui) { + params.load = JSON.parse(savedGui); + } + } + } + this.__closeButton = document.createElement('div'); + this.__closeButton.innerHTML = GUI.TEXT_CLOSED; + dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); + if (params.closeOnTop) { + dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_TOP); + this.domElement.insertBefore(this.__closeButton, this.domElement.childNodes[0]); + } else { + dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BOTTOM); + this.domElement.appendChild(this.__closeButton); + } + dom.bind(this.__closeButton, 'click', function () { + _this.closed = !_this.closed; + }); + } else { + if (params.closed === undefined) { + params.closed = true; + } + var _titleRowName = document.createTextNode(params.name); + dom.addClass(_titleRowName, 'controller-name'); + var titleRow = addRow(_this, _titleRowName); + var onClickTitle = function onClickTitle(e) { + e.preventDefault(); + _this.closed = !_this.closed; + return false; + }; + dom.addClass(this.__ul, GUI.CLASS_CLOSED); + dom.addClass(titleRow, 'title'); + dom.bind(titleRow, 'click', onClickTitle); + if (!params.closed) { + this.closed = false; + } + } + if (params.autoPlace) { + if (Common.isUndefined(params.parent)) { + if (autoPlaceVirgin) { + autoPlaceContainer = document.createElement('div'); + dom.addClass(autoPlaceContainer, CSS_NAMESPACE); + dom.addClass(autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER); + document.body.appendChild(autoPlaceContainer); + autoPlaceVirgin = false; + } + autoPlaceContainer.appendChild(this.domElement); + dom.addClass(this.domElement, GUI.CLASS_AUTO_PLACE); + } + if (!this.parent) { + setWidth(_this, params.width); + } + } + this.__resizeHandler = function () { + _this.onResizeDebounced(); + }; + dom.bind(window, 'resize', this.__resizeHandler); + dom.bind(this.__ul, 'webkitTransitionEnd', this.__resizeHandler); + dom.bind(this.__ul, 'transitionend', this.__resizeHandler); + dom.bind(this.__ul, 'oTransitionEnd', this.__resizeHandler); + this.onResize(); + if (params.resizable) { + addResizeHandle(this); + } + saveToLocalStorage = function saveToLocalStorage() { + if (SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(_this, 'isLocal')) === 'true') { + localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject())); + } + }; + this.saveToLocalStorageIfPossible = saveToLocalStorage; + function resetWidth() { + var root = _this.getRoot(); + root.width += 1; + Common.defer(function () { + root.width -= 1; + }); + } + if (!params.parent) { + resetWidth(); + } +}; +GUI.toggleHide = function () { + hide = !hide; + Common.each(hideableGuis, function (gui) { + gui.domElement.style.display = hide ? 'none' : ''; + }); +}; +GUI.CLASS_AUTO_PLACE = 'a'; +GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac'; +GUI.CLASS_MAIN = 'main'; +GUI.CLASS_CONTROLLER_ROW = 'cr'; +GUI.CLASS_TOO_TALL = 'taller-than-window'; +GUI.CLASS_CLOSED = 'closed'; +GUI.CLASS_CLOSE_BUTTON = 'close-button'; +GUI.CLASS_CLOSE_TOP = 'close-top'; +GUI.CLASS_CLOSE_BOTTOM = 'close-bottom'; +GUI.CLASS_DRAG = 'drag'; +GUI.DEFAULT_WIDTH = 245; +GUI.TEXT_CLOSED = 'Close Controls'; +GUI.TEXT_OPEN = 'Open Controls'; +GUI._keydownHandler = function (e) { + if (document.activeElement.type !== 'text' && (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) { + GUI.toggleHide(); + } +}; +dom.bind(window, 'keydown', GUI._keydownHandler, false); +Common.extend(GUI.prototype, +{ + add: function add(object, property) { + return _add(this, object, property, { + factoryArgs: Array.prototype.slice.call(arguments, 2) + }); + }, + addColor: function addColor(object, property) { + return _add(this, object, property, { + color: true + }); + }, + remove: function remove(controller) { + this.__ul.removeChild(controller.__li); + this.__controllers.splice(this.__controllers.indexOf(controller), 1); + var _this = this; + Common.defer(function () { + _this.onResize(); + }); + }, + destroy: function destroy() { + if (this.parent) { + throw new Error('Only the root GUI should be removed with .destroy(). ' + 'For subfolders, use gui.removeFolder(folder) instead.'); + } + if (this.autoPlace) { + autoPlaceContainer.removeChild(this.domElement); + } + var _this = this; + Common.each(this.__folders, function (subfolder) { + _this.removeFolder(subfolder); + }); + dom.unbind(window, 'keydown', GUI._keydownHandler, false); + removeListeners(this); + }, + addFolder: function addFolder(name) { + if (this.__folders[name] !== undefined) { + throw new Error('You already have a folder in this GUI by the' + ' name "' + name + '"'); + } + var newGuiParams = { name: name, parent: this }; + newGuiParams.autoPlace = this.autoPlace; + if (this.load && + this.load.folders && + this.load.folders[name]) { + newGuiParams.closed = this.load.folders[name].closed; + newGuiParams.load = this.load.folders[name]; + } + var gui = new GUI(newGuiParams); + this.__folders[name] = gui; + var li = addRow(this, gui.domElement); + dom.addClass(li, 'folder'); + return gui; + }, + removeFolder: function removeFolder(folder) { + this.__ul.removeChild(folder.domElement.parentElement); + delete this.__folders[folder.name]; + if (this.load && + this.load.folders && + this.load.folders[folder.name]) { + delete this.load.folders[folder.name]; + } + removeListeners(folder); + var _this = this; + Common.each(folder.__folders, function (subfolder) { + folder.removeFolder(subfolder); + }); + Common.defer(function () { + _this.onResize(); + }); + }, + open: function open() { + this.closed = false; + }, + close: function close() { + this.closed = true; + }, + onResize: function onResize() { + var root = this.getRoot(); + if (root.scrollable) { + var top = dom.getOffset(root.__ul).top; + var h = 0; + Common.each(root.__ul.childNodes, function (node) { + if (!(root.autoPlace && node === root.__save_row)) { + h += dom.getHeight(node); + } + }); + if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) { + dom.addClass(root.domElement, GUI.CLASS_TOO_TALL); + root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px'; + } else { + dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL); + root.__ul.style.height = 'auto'; + } + } + if (root.__resize_handle) { + Common.defer(function () { + root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; + }); + } + if (root.__closeButton) { + root.__closeButton.style.width = root.width + 'px'; + } + }, + onResizeDebounced: Common.debounce(function () { + this.onResize(); + }, 50), + remember: function remember() { + if (Common.isUndefined(SAVE_DIALOGUE)) { + SAVE_DIALOGUE = new CenteredDiv(); + SAVE_DIALOGUE.domElement.innerHTML = saveDialogContents; + } + if (this.parent) { + throw new Error('You can only call remember on a top level GUI.'); + } + var _this = this; + Common.each(Array.prototype.slice.call(arguments), function (object) { + if (_this.__rememberedObjects.length === 0) { + addSaveMenu(_this); + } + if (_this.__rememberedObjects.indexOf(object) === -1) { + _this.__rememberedObjects.push(object); + } + }); + if (this.autoPlace) { + setWidth(this, this.width); + } + }, + getRoot: function getRoot() { + var gui = this; + while (gui.parent) { + gui = gui.parent; + } + return gui; + }, + getSaveObject: function getSaveObject() { + var toReturn = this.load; + toReturn.closed = this.closed; + if (this.__rememberedObjects.length > 0) { + toReturn.preset = this.preset; + if (!toReturn.remembered) { + toReturn.remembered = {}; + } + toReturn.remembered[this.preset] = getCurrentPreset(this); + } + toReturn.folders = {}; + Common.each(this.__folders, function (element, key) { + toReturn.folders[key] = element.getSaveObject(); + }); + return toReturn; + }, + save: function save() { + if (!this.load.remembered) { + this.load.remembered = {}; + } + this.load.remembered[this.preset] = getCurrentPreset(this); + markPresetModified(this, false); + this.saveToLocalStorageIfPossible(); + }, + saveAs: function saveAs(presetName) { + if (!this.load.remembered) { + this.load.remembered = {}; + this.load.remembered[DEFAULT_DEFAULT_PRESET_NAME] = getCurrentPreset(this, true); + } + this.load.remembered[presetName] = getCurrentPreset(this); + this.preset = presetName; + addPresetOption(this, presetName, true); + this.saveToLocalStorageIfPossible(); + }, + revert: function revert(gui) { + Common.each(this.__controllers, function (controller) { + if (!this.getRoot().load.remembered) { + controller.setValue(controller.initialValue); + } else { + recallSavedValue(gui || this.getRoot(), controller); + } + if (controller.__onFinishChange) { + controller.__onFinishChange.call(controller, controller.getValue()); + } + }, this); + Common.each(this.__folders, function (folder) { + folder.revert(folder); + }); + if (!gui) { + markPresetModified(this.getRoot(), false); + } + }, + listen: function listen(controller) { + var init = this.__listening.length === 0; + this.__listening.push(controller); + if (init) { + updateDisplays(this.__listening); + } + }, + updateDisplay: function updateDisplay() { + Common.each(this.__controllers, function (controller) { + controller.updateDisplay(); + }); + Common.each(this.__folders, function (folder) { + folder.updateDisplay(); + }); + } +}); +function addRow(gui, newDom, liBefore) { + var li = document.createElement('li'); + if (newDom) { + li.appendChild(newDom); + } + if (liBefore) { + gui.__ul.insertBefore(li, liBefore); + } else { + gui.__ul.appendChild(li); + } + gui.onResize(); + return li; +} +function removeListeners(gui) { + dom.unbind(window, 'resize', gui.__resizeHandler); + if (gui.saveToLocalStorageIfPossible) { + dom.unbind(window, 'unload', gui.saveToLocalStorageIfPossible); + } +} +function markPresetModified(gui, modified) { + var opt = gui.__preset_select[gui.__preset_select.selectedIndex]; + if (modified) { + opt.innerHTML = opt.value + '*'; + } else { + opt.innerHTML = opt.value; + } +} +function augmentController(gui, li, controller) { + controller.__li = li; + controller.__gui = gui; + Common.extend(controller, { + options: function options(_options) { + if (arguments.length > 1) { + var nextSibling = controller.__li.nextElementSibling; + controller.remove(); + return _add(gui, controller.object, controller.property, { + before: nextSibling, + factoryArgs: [Common.toArray(arguments)] + }); + } + if (Common.isArray(_options) || Common.isObject(_options)) { + var _nextSibling = controller.__li.nextElementSibling; + controller.remove(); + return _add(gui, controller.object, controller.property, { + before: _nextSibling, + factoryArgs: [_options] + }); + } + }, + name: function name(_name) { + controller.__li.firstElementChild.firstElementChild.innerHTML = _name; + return controller; + }, + listen: function listen() { + controller.__gui.listen(controller); + return controller; + }, + remove: function remove() { + controller.__gui.remove(controller); + return controller; + } + }); + if (controller instanceof NumberControllerSlider) { + var box = new NumberControllerBox(controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step }); + Common.each(['updateDisplay', 'onChange', 'onFinishChange', 'step'], function (method) { + var pc = controller[method]; + var pb = box[method]; + controller[method] = box[method] = function () { + var args = Array.prototype.slice.call(arguments); + pb.apply(box, args); + return pc.apply(controller, args); + }; + }); + dom.addClass(li, 'has-slider'); + controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild); + } else if (controller instanceof NumberControllerBox) { + var r = function r(returned) { + if (Common.isNumber(controller.__min) && Common.isNumber(controller.__max)) { + var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML; + var wasListening = controller.__gui.__listening.indexOf(controller) > -1; + controller.remove(); + var newController = _add(gui, controller.object, controller.property, { + before: controller.__li.nextElementSibling, + factoryArgs: [controller.__min, controller.__max, controller.__step] + }); + newController.name(oldName); + if (wasListening) newController.listen(); + return newController; + } + return returned; + }; + controller.min = Common.compose(r, controller.min); + controller.max = Common.compose(r, controller.max); + } else if (controller instanceof BooleanController) { + dom.bind(li, 'click', function () { + dom.fakeEvent(controller.__checkbox, 'click'); + }); + dom.bind(controller.__checkbox, 'click', function (e) { + e.stopPropagation(); + }); + } else if (controller instanceof FunctionController) { + dom.bind(li, 'click', function () { + dom.fakeEvent(controller.__button, 'click'); + }); + dom.bind(li, 'mouseover', function () { + dom.addClass(controller.__button, 'hover'); + }); + dom.bind(li, 'mouseout', function () { + dom.removeClass(controller.__button, 'hover'); + }); + } else if (controller instanceof ColorController) { + dom.addClass(li, 'color'); + controller.updateDisplay = Common.compose(function (val) { + li.style.borderLeftColor = controller.__color.toString(); + return val; + }, controller.updateDisplay); + controller.updateDisplay(); + } + controller.setValue = Common.compose(function (val) { + if (gui.getRoot().__preset_select && controller.isModified()) { + markPresetModified(gui.getRoot(), true); + } + return val; + }, controller.setValue); +} +function recallSavedValue(gui, controller) { + var root = gui.getRoot(); + var matchedIndex = root.__rememberedObjects.indexOf(controller.object); + if (matchedIndex !== -1) { + var controllerMap = root.__rememberedObjectIndecesToControllers[matchedIndex]; + if (controllerMap === undefined) { + controllerMap = {}; + root.__rememberedObjectIndecesToControllers[matchedIndex] = controllerMap; + } + controllerMap[controller.property] = controller; + if (root.load && root.load.remembered) { + var presetMap = root.load.remembered; + var preset = void 0; + if (presetMap[gui.preset]) { + preset = presetMap[gui.preset]; + } else if (presetMap[DEFAULT_DEFAULT_PRESET_NAME]) { + preset = presetMap[DEFAULT_DEFAULT_PRESET_NAME]; + } else { + return; + } + if (preset[matchedIndex] && preset[matchedIndex][controller.property] !== undefined) { + var value = preset[matchedIndex][controller.property]; + controller.initialValue = value; + controller.setValue(value); + } + } + } +} +function _add(gui, object, property, params) { + if (object[property] === undefined) { + throw new Error('Object "' + object + '" has no property "' + property + '"'); + } + var controller = void 0; + if (params.color) { + controller = new ColorController(object, property); + } else { + var factoryArgs = [object, property].concat(params.factoryArgs); + controller = ControllerFactory.apply(gui, factoryArgs); + } + if (params.before instanceof Controller) { + params.before = params.before.__li; + } + recallSavedValue(gui, controller); + dom.addClass(controller.domElement, 'c'); + var name = document.createElement('span'); + dom.addClass(name, 'property-name'); + name.innerHTML = controller.property; + var container = document.createElement('div'); + container.appendChild(name); + container.appendChild(controller.domElement); + var li = addRow(gui, container, params.before); + dom.addClass(li, GUI.CLASS_CONTROLLER_ROW); + if (controller instanceof ColorController) { + dom.addClass(li, 'color'); + } else { + dom.addClass(li, _typeof(controller.getValue())); + } + augmentController(gui, li, controller); + gui.__controllers.push(controller); + return controller; +} +function getLocalStorageHash(gui, key) { + return document.location.href + '.' + key; +} +function addPresetOption(gui, name, setSelected) { + var opt = document.createElement('option'); + opt.innerHTML = name; + opt.value = name; + gui.__preset_select.appendChild(opt); + if (setSelected) { + gui.__preset_select.selectedIndex = gui.__preset_select.length - 1; + } +} +function showHideExplain(gui, explain) { + explain.style.display = gui.useLocalStorage ? 'block' : 'none'; +} +function addSaveMenu(gui) { + var div = gui.__save_row = document.createElement('li'); + dom.addClass(gui.domElement, 'has-save'); + gui.__ul.insertBefore(div, gui.__ul.firstChild); + dom.addClass(div, 'save-row'); + var gears = document.createElement('span'); + gears.innerHTML = ' '; + dom.addClass(gears, 'button gears'); + var button = document.createElement('span'); + button.innerHTML = 'Save'; + dom.addClass(button, 'button'); + dom.addClass(button, 'save'); + var button2 = document.createElement('span'); + button2.innerHTML = 'New'; + dom.addClass(button2, 'button'); + dom.addClass(button2, 'save-as'); + var button3 = document.createElement('span'); + button3.innerHTML = 'Revert'; + dom.addClass(button3, 'button'); + dom.addClass(button3, 'revert'); + var select = gui.__preset_select = document.createElement('select'); + if (gui.load && gui.load.remembered) { + Common.each(gui.load.remembered, function (value, key) { + addPresetOption(gui, key, key === gui.preset); + }); + } else { + addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false); + } + dom.bind(select, 'change', function () { + for (var index = 0; index < gui.__preset_select.length; index++) { + gui.__preset_select[index].innerHTML = gui.__preset_select[index].value; + } + gui.preset = this.value; + }); + div.appendChild(select); + div.appendChild(gears); + div.appendChild(button); + div.appendChild(button2); + div.appendChild(button3); + if (SUPPORTS_LOCAL_STORAGE) { + var explain = document.getElementById('dg-local-explain'); + var localStorageCheckBox = document.getElementById('dg-local-storage'); + var saveLocally = document.getElementById('dg-save-locally'); + saveLocally.style.display = 'block'; + if (localStorage.getItem(getLocalStorageHash(gui, 'isLocal')) === 'true') { + localStorageCheckBox.setAttribute('checked', 'checked'); + } + showHideExplain(gui, explain); + dom.bind(localStorageCheckBox, 'change', function () { + gui.useLocalStorage = !gui.useLocalStorage; + showHideExplain(gui, explain); + }); + } + var newConstructorTextArea = document.getElementById('dg-new-constructor'); + dom.bind(newConstructorTextArea, 'keydown', function (e) { + if (e.metaKey && (e.which === 67 || e.keyCode === 67)) { + SAVE_DIALOGUE.hide(); + } + }); + dom.bind(gears, 'click', function () { + newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2); + SAVE_DIALOGUE.show(); + newConstructorTextArea.focus(); + newConstructorTextArea.select(); + }); + dom.bind(button, 'click', function () { + gui.save(); + }); + dom.bind(button2, 'click', function () { + var presetName = prompt('Enter a new preset name.'); + if (presetName) { + gui.saveAs(presetName); + } + }); + dom.bind(button3, 'click', function () { + gui.revert(); + }); +} +function addResizeHandle(gui) { + var pmouseX = void 0; + gui.__resize_handle = document.createElement('div'); + Common.extend(gui.__resize_handle.style, { + width: '6px', + marginLeft: '-3px', + height: '200px', + cursor: 'ew-resize', + position: 'absolute' + }); + function drag(e) { + e.preventDefault(); + gui.width += pmouseX - e.clientX; + gui.onResize(); + pmouseX = e.clientX; + return false; + } + function dragStop() { + dom.removeClass(gui.__closeButton, GUI.CLASS_DRAG); + dom.unbind(window, 'mousemove', drag); + dom.unbind(window, 'mouseup', dragStop); + } + function dragStart(e) { + e.preventDefault(); + pmouseX = e.clientX; + dom.addClass(gui.__closeButton, GUI.CLASS_DRAG); + dom.bind(window, 'mousemove', drag); + dom.bind(window, 'mouseup', dragStop); + return false; + } + dom.bind(gui.__resize_handle, 'mousedown', dragStart); + dom.bind(gui.__closeButton, 'mousedown', dragStart); + gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild); +} +function setWidth(gui, w) { + gui.domElement.style.width = w + 'px'; + if (gui.__save_row && gui.autoPlace) { + gui.__save_row.style.width = w + 'px'; + } + if (gui.__closeButton) { + gui.__closeButton.style.width = w + 'px'; + } +} +function getCurrentPreset(gui, useInitialValues) { + var toReturn = {}; + Common.each(gui.__rememberedObjects, function (val, index) { + var savedValues = {}; + var controllerMap = gui.__rememberedObjectIndecesToControllers[index]; + Common.each(controllerMap, function (controller, property) { + savedValues[property] = useInitialValues ? controller.initialValue : controller.getValue(); + }); + toReturn[index] = savedValues; + }); + return toReturn; +} +function setPresetSelectIndex(gui) { + for (var index = 0; index < gui.__preset_select.length; index++) { + if (gui.__preset_select[index].value === gui.preset) { + gui.__preset_select.selectedIndex = index; + } + } +} +function updateDisplays(controllerArray) { + if (controllerArray.length !== 0) { + requestAnimationFrame$1.call(window, function () { + updateDisplays(controllerArray); + }); + } + Common.each(controllerArray, function (c) { + c.updateDisplay(); + }); +} + +var index = { + color: { + Color: Color, + math: ColorMath, + interpret: interpret + }, + controllers: { + Controller: Controller, + BooleanController: BooleanController, + OptionController: OptionController, + StringController: StringController, + NumberController: NumberController, + NumberControllerBox: NumberControllerBox, + NumberControllerSlider: NumberControllerSlider, + FunctionController: FunctionController, + ColorController: ColorController + }, + dom: { + dom: dom + }, + gui: { + GUI: GUI + }, + GUI: GUI +}; + +return index; + +}))); + + +},{}],12:[function(require,module,exports){ +// stats.js - http://github.com/mrdoob/stats.js +var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; +i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); +k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= +"block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:12,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= +a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};"object"===typeof module&&(module.exports=Stats); + +},{}],13:[function(require,module,exports){ +// TinyColor v1.4.1 +// https://github.com/bgrins/TinyColor +// Brian Grinstead, MIT License + +(function(Math) { + +var trimLeft = /^\s+/, + trimRight = /\s+$/, + tinyCounter = 0, + mathRound = Math.round, + mathMin = Math.min, + mathMax = Math.max, + mathRandom = Math.random; + +function tinycolor (color, opts) { + + color = (color) ? color : ''; + opts = opts || { }; + + // If input is already a tinycolor, return itself + if (color instanceof tinycolor) { + return color; + } + // If we are called as a function, call using new instead + if (!(this instanceof tinycolor)) { + return new tinycolor(color, opts); + } + + var rgb = inputToRGB(color); + this._originalInput = color, + this._r = rgb.r, + this._g = rgb.g, + this._b = rgb.b, + this._a = rgb.a, + this._roundA = mathRound(100*this._a) / 100, + this._format = opts.format || rgb.format; + this._gradientType = opts.gradientType; + + // Don't let the range of [0,255] come back in [0,1]. + // Potentially lose a little bit of precision here, but will fix issues where + // .5 gets interpreted as half of the total, instead of half of 1 + // If it was supposed to be 128, this was already taken care of by `inputToRgb` + if (this._r < 1) { this._r = mathRound(this._r); } + if (this._g < 1) { this._g = mathRound(this._g); } + if (this._b < 1) { this._b = mathRound(this._b); } + + this._ok = rgb.ok; + this._tc_id = tinyCounter++; +} + +tinycolor.prototype = { + isDark: function() { + return this.getBrightness() < 128; + }, + isLight: function() { + return !this.isDark(); + }, + isValid: function() { + return this._ok; + }, + getOriginalInput: function() { + return this._originalInput; + }, + getFormat: function() { + return this._format; + }, + getAlpha: function() { + return this._a; + }, + getBrightness: function() { + //http://www.w3.org/TR/AERT#color-contrast + var rgb = this.toRgb(); + return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; + }, + getLuminance: function() { + //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + var rgb = this.toRgb(); + var RsRGB, GsRGB, BsRGB, R, G, B; + RsRGB = rgb.r/255; + GsRGB = rgb.g/255; + BsRGB = rgb.b/255; + + if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} + if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} + if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} + return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); + }, + setAlpha: function(value) { + this._a = boundAlpha(value); + this._roundA = mathRound(100*this._a) / 100; + return this; + }, + toHsv: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; + }, + toHsvString: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); + return (this._a == 1) ? + "hsv(" + h + ", " + s + "%, " + v + "%)" : + "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; + }, + toHsl: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; + }, + toHslString: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); + return (this._a == 1) ? + "hsl(" + h + ", " + s + "%, " + l + "%)" : + "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; + }, + toHex: function(allow3Char) { + return rgbToHex(this._r, this._g, this._b, allow3Char); + }, + toHexString: function(allow3Char) { + return '#' + this.toHex(allow3Char); + }, + toHex8: function(allow4Char) { + return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); + }, + toHex8String: function(allow4Char) { + return '#' + this.toHex8(allow4Char); + }, + toRgb: function() { + return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; + }, + toRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; + }, + toPercentageRgb: function() { + return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; + }, + toPercentageRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : + "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; + }, + toName: function() { + if (this._a === 0) { + return "transparent"; + } + + if (this._a < 1) { + return false; + } + + return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; + }, + toFilter: function(secondColor) { + var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); + var secondHex8String = hex8String; + var gradientType = this._gradientType ? "GradientType = 1, " : ""; + + if (secondColor) { + var s = tinycolor(secondColor); + secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); + } + + return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; + }, + toString: function(format) { + var formatSet = !!format; + format = format || this._format; + + var formattedString = false; + var hasAlpha = this._a < 1 && this._a >= 0; + var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); + + if (needsAlphaFormat) { + // Special case for "transparent", all other non-alpha formats + // will return rgba when there is transparency. + if (format === "name" && this._a === 0) { + return this.toName(); + } + return this.toRgbString(); + } + if (format === "rgb") { + formattedString = this.toRgbString(); + } + if (format === "prgb") { + formattedString = this.toPercentageRgbString(); + } + if (format === "hex" || format === "hex6") { + formattedString = this.toHexString(); + } + if (format === "hex3") { + formattedString = this.toHexString(true); + } + if (format === "hex4") { + formattedString = this.toHex8String(true); + } + if (format === "hex8") { + formattedString = this.toHex8String(); + } + if (format === "name") { + formattedString = this.toName(); + } + if (format === "hsl") { + formattedString = this.toHslString(); + } + if (format === "hsv") { + formattedString = this.toHsvString(); + } + + return formattedString || this.toHexString(); + }, + clone: function() { + return tinycolor(this.toString()); + }, + + _applyModification: function(fn, args) { + var color = fn.apply(null, [this].concat([].slice.call(args))); + this._r = color._r; + this._g = color._g; + this._b = color._b; + this.setAlpha(color._a); + return this; + }, + lighten: function() { + return this._applyModification(lighten, arguments); + }, + brighten: function() { + return this._applyModification(brighten, arguments); + }, + darken: function() { + return this._applyModification(darken, arguments); + }, + desaturate: function() { + return this._applyModification(desaturate, arguments); + }, + saturate: function() { + return this._applyModification(saturate, arguments); + }, + greyscale: function() { + return this._applyModification(greyscale, arguments); + }, + spin: function() { + return this._applyModification(spin, arguments); + }, + + _applyCombination: function(fn, args) { + return fn.apply(null, [this].concat([].slice.call(args))); + }, + analogous: function() { + return this._applyCombination(analogous, arguments); + }, + complement: function() { + return this._applyCombination(complement, arguments); + }, + monochromatic: function() { + return this._applyCombination(monochromatic, arguments); + }, + splitcomplement: function() { + return this._applyCombination(splitcomplement, arguments); + }, + triad: function() { + return this._applyCombination(triad, arguments); + }, + tetrad: function() { + return this._applyCombination(tetrad, arguments); + } +}; + +// If input is an object, force 1 into "1.0" to handle ratios properly +// String input requires "1.0" as input, so 1 will be treated as 1 +tinycolor.fromRatio = function(color, opts) { + if (typeof color == "object") { + var newColor = {}; + for (var i in color) { + if (color.hasOwnProperty(i)) { + if (i === "a") { + newColor[i] = color[i]; + } + else { + newColor[i] = convertToPercentage(color[i]); + } + } + } + color = newColor; + } + + return tinycolor(color, opts); +}; + +// Given a string or object, convert that input to RGB +// Possible string inputs: +// +// "red" +// "#f00" or "f00" +// "#ff0000" or "ff0000" +// "#ff000000" or "ff000000" +// "rgb 255 0 0" or "rgb (255, 0, 0)" +// "rgb 1.0 0 0" or "rgb (1, 0, 0)" +// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" +// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" +// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" +// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" +// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" +// +function inputToRGB(color) { + + var rgb = { r: 0, g: 0, b: 0 }; + var a = 1; + var s = null; + var v = null; + var l = null; + var ok = false; + var format = false; + + if (typeof color == "string") { + color = stringInputToObject(color); + } + + if (typeof color == "object") { + if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { + rgb = rgbToRgb(color.r, color.g, color.b); + ok = true; + format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { + s = convertToPercentage(color.s); + v = convertToPercentage(color.v); + rgb = hsvToRgb(color.h, s, v); + ok = true; + format = "hsv"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { + s = convertToPercentage(color.s); + l = convertToPercentage(color.l); + rgb = hslToRgb(color.h, s, l); + ok = true; + format = "hsl"; + } + + if (color.hasOwnProperty("a")) { + a = color.a; + } + } + + a = boundAlpha(a); + + return { + ok: ok, + format: color.format || format, + r: mathMin(255, mathMax(rgb.r, 0)), + g: mathMin(255, mathMax(rgb.g, 0)), + b: mathMin(255, mathMax(rgb.b, 0)), + a: a + }; +} + + +// Conversion Functions +// -------------------- + +// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: +// + +// `rgbToRgb` +// Handle bounds / percentage checking to conform to CSS color spec +// +// *Assumes:* r, g, b in [0, 255] or [0, 1] +// *Returns:* { r, g, b } in [0, 255] +function rgbToRgb(r, g, b){ + return { + r: bound01(r, 255) * 255, + g: bound01(g, 255) * 255, + b: bound01(b, 255) * 255 + }; +} + +// `rgbToHsl` +// Converts an RGB color value to HSL. +// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] +// *Returns:* { h, s, l } in [0,1] +function rgbToHsl(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + + h /= 6; + } + + return { h: h, s: s, l: l }; +} + +// `hslToRgb` +// Converts an HSL color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] +function hslToRgb(h, s, l) { + var r, g, b; + + h = bound01(h, 360); + s = bound01(s, 100); + l = bound01(l, 100); + + function hue2rgb(p, q, t) { + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + } + + if(s === 0) { + r = g = b = l; // achromatic + } + else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// `rgbToHsv` +// Converts an RGB color value to HSV +// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] +// *Returns:* { h, s, v } in [0,1] +function rgbToHsv(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, v = max; + + var d = max - min; + s = max === 0 ? 0 : d / max; + + if(max == min) { + h = 0; // achromatic + } + else { + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + return { h: h, s: s, v: v }; +} + +// `hsvToRgb` +// Converts an HSV color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] + function hsvToRgb(h, s, v) { + + h = bound01(h, 360) * 6; + s = bound01(s, 100); + v = bound01(v, 100); + + var i = Math.floor(h), + f = h - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s), + mod = i % 6, + r = [v, q, p, p, t, v][mod], + g = [t, v, v, q, p, p][mod], + b = [p, p, t, v, v, q][mod]; + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// `rgbToHex` +// Converts an RGB color to hex +// Assumes r, g, and b are contained in the set [0, 255] +// Returns a 3 or 6 character hex +function rgbToHex(r, g, b, allow3Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + // Return a 3 character hex if possible + if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); + } + + return hex.join(""); +} + +// `rgbaToHex` +// Converts an RGBA color plus alpha transparency to hex +// Assumes r, g, b are contained in the set [0, 255] and +// a in [0, 1]. Returns a 4 or 8 character rgba hex +function rgbaToHex(r, g, b, a, allow4Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)), + pad2(convertDecimalToHex(a)) + ]; + + // Return a 4 character hex if possible + if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); + } + + return hex.join(""); +} + +// `rgbaToArgbHex` +// Converts an RGBA color to an ARGB Hex8 string +// Rarely used, but required for "toFilter()" +function rgbaToArgbHex(r, g, b, a) { + + var hex = [ + pad2(convertDecimalToHex(a)), + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + return hex.join(""); +} + +// `equals` +// Can be called with any tinycolor input +tinycolor.equals = function (color1, color2) { + if (!color1 || !color2) { return false; } + return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); +}; + +tinycolor.random = function() { + return tinycolor.fromRatio({ + r: mathRandom(), + g: mathRandom(), + b: mathRandom() + }); +}; + + +// Modification Functions +// ---------------------- +// Thanks to less.js for some of the basics here +// + +function desaturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s -= amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function saturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s += amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function greyscale(color) { + return tinycolor(color).desaturate(100); +} + +function lighten (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l += amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +function brighten(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var rgb = tinycolor(color).toRgb(); + rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); + rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); + rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); + return tinycolor(rgb); +} + +function darken (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l -= amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. +// Values outside of this range will be wrapped into this range. +function spin(color, amount) { + var hsl = tinycolor(color).toHsl(); + var hue = (hsl.h + amount) % 360; + hsl.h = hue < 0 ? 360 + hue : hue; + return tinycolor(hsl); +} + +// Combination Functions +// --------------------- +// Thanks to jQuery xColor for some of the ideas behind these +// + +function complement(color) { + var hsl = tinycolor(color).toHsl(); + hsl.h = (hsl.h + 180) % 360; + return tinycolor(hsl); +} + +function triad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function tetrad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function splitcomplement(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), + tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) + ]; +} + +function analogous(color, results, slices) { + results = results || 6; + slices = slices || 30; + + var hsl = tinycolor(color).toHsl(); + var part = 360 / slices; + var ret = [tinycolor(color)]; + + for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { + hsl.h = (hsl.h + part) % 360; + ret.push(tinycolor(hsl)); + } + return ret; +} + +function monochromatic(color, results) { + results = results || 6; + var hsv = tinycolor(color).toHsv(); + var h = hsv.h, s = hsv.s, v = hsv.v; + var ret = []; + var modification = 1 / results; + + while (results--) { + ret.push(tinycolor({ h: h, s: s, v: v})); + v = (v + modification) % 1; + } + + return ret; +} + +// Utility Functions +// --------------------- + +tinycolor.mix = function(color1, color2, amount) { + amount = (amount === 0) ? 0 : (amount || 50); + + var rgb1 = tinycolor(color1).toRgb(); + var rgb2 = tinycolor(color2).toRgb(); + + var p = amount / 100; + + var rgba = { + r: ((rgb2.r - rgb1.r) * p) + rgb1.r, + g: ((rgb2.g - rgb1.g) * p) + rgb1.g, + b: ((rgb2.b - rgb1.b) * p) + rgb1.b, + a: ((rgb2.a - rgb1.a) * p) + rgb1.a + }; + + return tinycolor(rgba); +}; + + +// Readability Functions +// --------------------- +// false +// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false +tinycolor.isReadable = function(color1, color2, wcag2) { + var readability = tinycolor.readability(color1, color2); + var wcag2Parms, out; + + out = false; + + wcag2Parms = validateWCAG2Parms(wcag2); + switch (wcag2Parms.level + wcag2Parms.size) { + case "AAsmall": + case "AAAlarge": + out = readability >= 4.5; + break; + case "AAlarge": + out = readability >= 3; + break; + case "AAAsmall": + out = readability >= 7; + break; + } + return out; + +}; + +// `mostReadable` +// Given a base color and a list of possible foreground or background +// colors for that base, returns the most readable color. +// Optionally returns Black or White if the most readable color is unreadable. +// *Example* +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" +tinycolor.mostReadable = function(baseColor, colorList, args) { + var bestColor = null; + var bestScore = 0; + var readability; + var includeFallbackColors, level, size ; + args = args || {}; + includeFallbackColors = args.includeFallbackColors ; + level = args.level; + size = args.size; + + for (var i= 0; i < colorList.length ; i++) { + readability = tinycolor.readability(baseColor, colorList[i]); + if (readability > bestScore) { + bestScore = readability; + bestColor = tinycolor(colorList[i]); + } + } + + if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { + return bestColor; + } + else { + args.includeFallbackColors=false; + return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); + } +}; + + +// Big List of Colors +// ------------------ +// +var names = tinycolor.names = { + aliceblue: "f0f8ff", + antiquewhite: "faebd7", + aqua: "0ff", + aquamarine: "7fffd4", + azure: "f0ffff", + beige: "f5f5dc", + bisque: "ffe4c4", + black: "000", + blanchedalmond: "ffebcd", + blue: "00f", + blueviolet: "8a2be2", + brown: "a52a2a", + burlywood: "deb887", + burntsienna: "ea7e5d", + cadetblue: "5f9ea0", + chartreuse: "7fff00", + chocolate: "d2691e", + coral: "ff7f50", + cornflowerblue: "6495ed", + cornsilk: "fff8dc", + crimson: "dc143c", + cyan: "0ff", + darkblue: "00008b", + darkcyan: "008b8b", + darkgoldenrod: "b8860b", + darkgray: "a9a9a9", + darkgreen: "006400", + darkgrey: "a9a9a9", + darkkhaki: "bdb76b", + darkmagenta: "8b008b", + darkolivegreen: "556b2f", + darkorange: "ff8c00", + darkorchid: "9932cc", + darkred: "8b0000", + darksalmon: "e9967a", + darkseagreen: "8fbc8f", + darkslateblue: "483d8b", + darkslategray: "2f4f4f", + darkslategrey: "2f4f4f", + darkturquoise: "00ced1", + darkviolet: "9400d3", + deeppink: "ff1493", + deepskyblue: "00bfff", + dimgray: "696969", + dimgrey: "696969", + dodgerblue: "1e90ff", + firebrick: "b22222", + floralwhite: "fffaf0", + forestgreen: "228b22", + fuchsia: "f0f", + gainsboro: "dcdcdc", + ghostwhite: "f8f8ff", + gold: "ffd700", + goldenrod: "daa520", + gray: "808080", + green: "008000", + greenyellow: "adff2f", + grey: "808080", + honeydew: "f0fff0", + hotpink: "ff69b4", + indianred: "cd5c5c", + indigo: "4b0082", + ivory: "fffff0", + khaki: "f0e68c", + lavender: "e6e6fa", + lavenderblush: "fff0f5", + lawngreen: "7cfc00", + lemonchiffon: "fffacd", + lightblue: "add8e6", + lightcoral: "f08080", + lightcyan: "e0ffff", + lightgoldenrodyellow: "fafad2", + lightgray: "d3d3d3", + lightgreen: "90ee90", + lightgrey: "d3d3d3", + lightpink: "ffb6c1", + lightsalmon: "ffa07a", + lightseagreen: "20b2aa", + lightskyblue: "87cefa", + lightslategray: "789", + lightslategrey: "789", + lightsteelblue: "b0c4de", + lightyellow: "ffffe0", + lime: "0f0", + limegreen: "32cd32", + linen: "faf0e6", + magenta: "f0f", + maroon: "800000", + mediumaquamarine: "66cdaa", + mediumblue: "0000cd", + mediumorchid: "ba55d3", + mediumpurple: "9370db", + mediumseagreen: "3cb371", + mediumslateblue: "7b68ee", + mediumspringgreen: "00fa9a", + mediumturquoise: "48d1cc", + mediumvioletred: "c71585", + midnightblue: "191970", + mintcream: "f5fffa", + mistyrose: "ffe4e1", + moccasin: "ffe4b5", + navajowhite: "ffdead", + navy: "000080", + oldlace: "fdf5e6", + olive: "808000", + olivedrab: "6b8e23", + orange: "ffa500", + orangered: "ff4500", + orchid: "da70d6", + palegoldenrod: "eee8aa", + palegreen: "98fb98", + paleturquoise: "afeeee", + palevioletred: "db7093", + papayawhip: "ffefd5", + peachpuff: "ffdab9", + peru: "cd853f", + pink: "ffc0cb", + plum: "dda0dd", + powderblue: "b0e0e6", + purple: "800080", + rebeccapurple: "663399", + red: "f00", + rosybrown: "bc8f8f", + royalblue: "4169e1", + saddlebrown: "8b4513", + salmon: "fa8072", + sandybrown: "f4a460", + seagreen: "2e8b57", + seashell: "fff5ee", + sienna: "a0522d", + silver: "c0c0c0", + skyblue: "87ceeb", + slateblue: "6a5acd", + slategray: "708090", + slategrey: "708090", + snow: "fffafa", + springgreen: "00ff7f", + steelblue: "4682b4", + tan: "d2b48c", + teal: "008080", + thistle: "d8bfd8", + tomato: "ff6347", + turquoise: "40e0d0", + violet: "ee82ee", + wheat: "f5deb3", + white: "fff", + whitesmoke: "f5f5f5", + yellow: "ff0", + yellowgreen: "9acd32" +}; + +// Make it easy to access colors via `hexNames[hex]` +var hexNames = tinycolor.hexNames = flip(names); + + +// Utilities +// --------- + +// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` +function flip(o) { + var flipped = { }; + for (var i in o) { + if (o.hasOwnProperty(i)) { + flipped[o[i]] = i; + } + } + return flipped; +} + +// Return a valid alpha value [0,1] with all invalid values being set to 1 +function boundAlpha(a) { + a = parseFloat(a); + + if (isNaN(a) || a < 0 || a > 1) { + a = 1; + } + + return a; +} + +// Take input from [0, n] and return it as [0, 1] +function bound01(n, max) { + if (isOnePointZero(n)) { n = "100%"; } + + var processPercent = isPercentage(n); + n = mathMin(max, mathMax(0, parseFloat(n))); + + // Automatically convert percentage into number + if (processPercent) { + n = parseInt(n * max, 10) / 100; + } + + // Handle floating point rounding errors + if ((Math.abs(n - max) < 0.000001)) { + return 1; + } + + // Convert into [0, 1] range if it isn't already + return (n % max) / parseFloat(max); +} + +// Force a number between 0 and 1 +function clamp01(val) { + return mathMin(1, mathMax(0, val)); +} + +// Parse a base-16 hex value into a base-10 integer +function parseIntFromHex(val) { + return parseInt(val, 16); +} + +// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 +// +function isOnePointZero(n) { + return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; +} + +// Check to see if string passed in is a percentage +function isPercentage(n) { + return typeof n === "string" && n.indexOf('%') != -1; +} + +// Force a hex value to have 2 characters +function pad2(c) { + return c.length == 1 ? '0' + c : '' + c; +} + +// Replace a decimal with it's percentage value +function convertToPercentage(n) { + if (n <= 1) { + n = (n * 100) + "%"; + } + + return n; +} + +// Converts a decimal to a hex value +function convertDecimalToHex(d) { + return Math.round(parseFloat(d) * 255).toString(16); +} +// Converts a hex value to a decimal +function convertHexToDecimal(h) { + return (parseIntFromHex(h) / 255); +} + +var matchers = (function() { + + // + var CSS_INTEGER = "[-\\+]?\\d+%?"; + + // + var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; + + // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. + var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; + + // Actual matching. + // Parentheses and commas are optional, but not required. + // Whitespace can take the place of commas or opening paren + var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + + return { + CSS_UNIT: new RegExp(CSS_UNIT), + rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), + rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), + hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), + hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), + hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), + hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), + hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, + hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ + }; +})(); + +// `isValidCSSUnit` +// Take in a single string / number and check to see if it looks like a CSS unit +// (see `matchers` above for definition). +function isValidCSSUnit(color) { + return !!matchers.CSS_UNIT.exec(color); +} + +// `stringInputToObject` +// Permissive string parsing. Take in a number of formats, and output an object +// based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` +function stringInputToObject(color) { + + color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); + var named = false; + if (names[color]) { + color = names[color]; + named = true; + } + else if (color == 'transparent') { + return { r: 0, g: 0, b: 0, a: 0, format: "name" }; + } + + // Try to match string input using regular expressions. + // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] + // Just return an object and let the conversion functions handle that. + // This way the result will be the same whether the tinycolor is initialized with string or object. + var match; + if ((match = matchers.rgb.exec(color))) { + return { r: match[1], g: match[2], b: match[3] }; + } + if ((match = matchers.rgba.exec(color))) { + return { r: match[1], g: match[2], b: match[3], a: match[4] }; + } + if ((match = matchers.hsl.exec(color))) { + return { h: match[1], s: match[2], l: match[3] }; + } + if ((match = matchers.hsla.exec(color))) { + return { h: match[1], s: match[2], l: match[3], a: match[4] }; + } + if ((match = matchers.hsv.exec(color))) { + return { h: match[1], s: match[2], v: match[3] }; + } + if ((match = matchers.hsva.exec(color))) { + return { h: match[1], s: match[2], v: match[3], a: match[4] }; + } + if ((match = matchers.hex8.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + a: convertHexToDecimal(match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex6.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + format: named ? "name" : "hex" + }; + } + if ((match = matchers.hex4.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + a: convertHexToDecimal(match[4] + '' + match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex3.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + format: named ? "name" : "hex" + }; + } + + return false; +} + +function validateWCAG2Parms(parms) { + // return valid WCAG2 parms for isReadable. + // If input parms are invalid, return {"level":"AA", "size":"small"} + var level, size; + parms = parms || {"level":"AA", "size":"small"}; + level = (parms.level || "AA").toUpperCase(); + size = (parms.size || "small").toLowerCase(); + if (level !== "AA" && level !== "AAA") { + level = "AA"; + } + if (size !== "small" && size !== "large") { + size = "small"; + } + return {"level":level, "size":size}; +} + +// Node: Export function +if (typeof module !== "undefined" && module.exports) { + module.exports = tinycolor; +} +// AMD/requirejs: Define the module +else if (typeof define === 'function' && define.amd) { + define(function () {return tinycolor;}); +} +// Browser: Expose to window +else { + window.tinycolor = tinycolor; +} + +})(Math); + +},{}]},{},[1,7]); diff --git a/web/css/controls.css b/web/css/controls.css new file mode 100644 index 0000000..b9fba70 --- /dev/null +++ b/web/css/controls.css @@ -0,0 +1,11 @@ +body { + background: #c0c0c0 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)) no-repeat; + padding-left: 10px; + padding-right: 10px; + height: 1000px; +} + +h1 { + font-family: "Helvetica Neue"; + font-weight: 300; +} diff --git a/web/css/pure-min.css b/web/css/pure-min.css new file mode 100644 index 0000000..e3ddfbf --- /dev/null +++ b/web/css/pure-min.css @@ -0,0 +1,11 @@ +/*! +Pure v1.0.0 +Copyright 2013 Yahoo! +Licensed under the BSD License. +https://github.com/yahoo/pure/blob/master/LICENSE.md +*/ +/*! +normalize.css v^3.0 | MIT License | git.io/normalize +Copyright (c) Nicolas Gallagher and Jonathan Neal +*/ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.pure-button:focus,a:active,a:hover{outline:0}.pure-table,table{border-collapse:collapse;border-spacing:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}.pure-button,input{line-height:normal}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}.pure-button,.pure-form input:not([type]),.pure-menu{box-sizing:border-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend,td,th{padding:0}legend{border:0}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;display:inline-block;zoom:1}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}.pure-button{display:inline-block;zoom:1;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-.43em}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:#444;color:rgba(0,0,0,.8);border:1px solid #999;border:transparent;background-color:#E6E6E6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{filter:alpha(opacity=90);background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;border-color:#000\9}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:none;background-image:none;filter:alpha(opacity=40);opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}.pure-button-hidden{display:none}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-button-group .pure-button{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto;margin:0;border-radius:0;border-right:1px solid #111;border-right:1px solid rgba(0,0,0,.2)}.pure-button-group .pure-button:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.pure-button-group .pure-button:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:none}.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=text],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;vertical-align:middle;box-sizing:border-box}.pure-form input:not([type]){padding:.5em .6em;display:inline-block;border:1px solid #ccc;box-shadow:inset 0 1px 3px #ddd;border-radius:4px}.pure-form input[type=color]{padding:.2em .5em}.pure-form input:not([type]):focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=text]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=checkbox]:focus,.pure-form input[type=radio]:focus{outline:#129FEA auto 1px}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input:not([type])[disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=text][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly]{background-color:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid{color:#b94a48;border-color:#e9322d}.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{height:2.25em;border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input:not([type]),.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked input[type=file],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=text],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned .pure-help-inline,.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline{display:inline-block;vertical-align:middle}.pure-form-aligned textarea{vertical-align:top}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 11em}.pure-form .pure-input-rounded,.pure-form input.pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input,.pure-form .pure-group textarea{display:block;padding:10px;margin:0 0 -1px;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus,.pure-form .pure-group textarea:focus{z-index:3}.pure-form .pure-group input:first-child,.pure-form .pure-group textarea:first-child{top:1px;border-radius:4px 4px 0 0;margin:0}.pure-form .pure-group input:first-child:last-child,.pure-form .pure-group textarea:first-child:last-child{top:1px;border-radius:4px;margin:0}.pure-form .pure-group input:last-child,.pure-form .pure-group textarea:last-child{top:-2px;border-radius:0 0 4px 4px;margin:0}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-3-4{width:75%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:.875em}.pure-form-message{display:block;color:#666;font-size:.875em}@media only screen and (max-width :480px){.pure-form button[type=submit]{margin:.7em 0 0}.pure-form input:not([type]),.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=text],.pure-form label{margin-bottom:.3em;display:block}.pure-group input:not([type]),.pure-group input[type=password],.pure-group input[type=email],.pure-group input[type=url],.pure-group input[type=date],.pure-group input[type=month],.pure-group input[type=time],.pure-group input[type=datetime],.pure-group input[type=datetime-local],.pure-group input[type=week],.pure-group input[type=tel],.pure-group input[type=color],.pure-group input[type=number],.pure-group input[type=search],.pure-group input[type=text]{margin-bottom:0}.pure-form-aligned .pure-control-group label{margin-bottom:.3em;text-align:left;display:block;width:100%}.pure-form-aligned .pure-controls{margin:1.5em 0 0}.pure-form .pure-help-inline,.pure-form-message,.pure-form-message-inline{display:block;font-size:.75em;padding:.2em 0 .8em}}.pure-menu-fixed{position:fixed;left:0;top:0;z-index:3}.pure-menu-item,.pure-menu-list{position:relative}.pure-menu-list{list-style:none;margin:0;padding:0}.pure-menu-item{padding:0;margin:0;height:100%}.pure-menu-heading,.pure-menu-link{display:block;text-decoration:none;white-space:nowrap}.pure-menu-horizontal{width:100%;white-space:nowrap}.pure-menu-horizontal .pure-menu-list{display:inline-block}.pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator{display:inline-block;zoom:1;vertical-align:middle}.pure-menu-item .pure-menu-item{display:block}.pure-menu-children{display:none;position:absolute;left:100%;top:0;margin:0;padding:0;z-index:3}.pure-menu-horizontal .pure-menu-children{left:0;top:auto;width:inherit}.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:absolute}.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after{content:"\25BE"}.pure-menu-scrollable{overflow-y:scroll;overflow-x:hidden}.pure-menu-scrollable .pure-menu-list{display:block}.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list{display:inline-block}.pure-menu-horizontal.pure-menu-scrollable{white-space:nowrap;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding:.5em 0}.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar{display:none}.pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator{background-color:#ccc;height:1px;margin:.3em 0}.pure-menu-horizontal .pure-menu-separator{width:1px;height:1.3em;margin:0 .3em}.pure-menu-horizontal .pure-menu-children .pure-menu-separator{display:block;width:auto}.pure-menu-heading{text-transform:uppercase;color:#565d64}.pure-menu-link{color:#777}.pure-menu-children{background-color:#fff}.pure-menu-disabled,.pure-menu-heading,.pure-menu-link{padding:.5em 1em}.pure-menu-disabled{opacity:.5}.pure-menu-disabled .pure-menu-link:hover{background-color:transparent}.pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover{background-color:#eee}.pure-menu-selected .pure-menu-link,.pure-menu-selected .pure-menu-link:visited{color:#000}.pure-table{empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:.5em 1em}.pure-table td:first-child,.pure-table th:first-child{border-left-width:0}.pure-table thead{background-color:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td,.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child>td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child>td{border-bottom-width:0} \ No newline at end of file diff --git a/web/data/data.js b/web/data/data.js new file mode 100644 index 0000000..34606f3 --- /dev/null +++ b/web/data/data.js @@ -0,0 +1,19 @@ +var graphData = { + "nodes": [ + { + "id": "Foo", + "group": 1 + }, + { + "id": "Bar", + "group": 1 + } + ], + "links": [ + { + "source": "Foo", + "target": "Bar", + "value": 1 + } + ] +}; diff --git a/web/data/data/labels.json b/web/data/data/labels.json new file mode 100644 index 0000000..1894ce5 --- /dev/null +++ b/web/data/data/labels.json @@ -0,0 +1 @@ +["Foo","Bar"] \ No newline at end of file diff --git a/web/data/data/links.bin b/web/data/data/links.bin new file mode 100644 index 0000000..ea20d33 Binary files /dev/null and b/web/data/data/links.bin differ diff --git a/web/data/data/meta.json b/web/data/data/meta.json new file mode 100644 index 0000000..a3f0557 --- /dev/null +++ b/web/data/data/meta.json @@ -0,0 +1 @@ +{"date":1512329825919,"nodeCount":2,"linkCount":1,"nodeFile":"data/labels.json","linkFile":"data/links.bin","version":"1.0.1"} \ No newline at end of file diff --git a/web/data/data/positions.bin b/web/data/data/positions.bin new file mode 100644 index 0000000..2dc3ac9 Binary files /dev/null and b/web/data/data/positions.bin differ diff --git a/web/data/data_orig.json b/web/data/data_orig.json new file mode 100644 index 0000000..502eedb --- /dev/null +++ b/web/data/data_orig.json @@ -0,0 +1,299 @@ +{ + "nodes": [ + { + "id": "\"Back()\"", + "group": 1 + }, + { + "id": "\"Element\"", + "group": 1 + }, + { + "id": "\"Front()\"", + "group": 1 + }, + { + "id": "\"Init()\"", + "group": 1 + }, + { + "id": "\"Len()\"", + "group": 1 + }, + { + "id": "\"List\"", + "group": 1 + }, + { + "id": "\"MoveAfter()\"", + "group": 1 + }, + { + "id": "\"MoveBefore()\"", + "group": 1 + }, + { + "id": "\"MoveToBack()\"", + "group": 1 + }, + { + "id": "\"MoveToFront()\"", + "group": 1 + }, + { + "id": "\"New()\"", + "group": 1 + }, + { + "id": "\"Next()\"", + "group": 1 + }, + { + "id": "\"Prev()\"", + "group": 1 + }, + { + "id": "\"PushBack()\"", + "group": 1 + }, + { + "id": "\"PushBackList()\"", + "group": 1 + }, + { + "id": "\"PushFront()\"", + "group": 1 + }, + { + "id": "\"PushFrontList()\"", + "group": 1 + }, + { + "id": "\"Remove\"", + "group": 1 + }, + { + "id": "\"insert()\"", + "group": 1 + }, + { + "id": "\"insertValue()\"", + "group": 1 + }, + { + "id": "\"lazyInit()\"", + "group": 1 + }, + { + "id": "\"remove()\"", + "group": 1 + } + ], + "links": [ + { + "source": "\"Element\"", + "target": "\"Element\"", + "value": 1 + }, + { + "source": "\"Element\"", + "target": "\"Next()\"", + "value": 1 + }, + { + "source": "\"Element\"", + "target": "\"Prev()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Back()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Element\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Front()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Init()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Len()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"MoveAfter()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"MoveBefore()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"MoveToBack()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"MoveToFront()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"PushBack()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"PushBackList()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"PushFront()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"PushFrontList()\"", + "value": 1 + }, + { + "source": "\"List\"", + "target": "\"Remove\"", + "value": 1 + }, + { + "source": "\"MoveAfter()\"", + "target": "\"insert()\"", + "value": 1 + }, + { + "source": "\"MoveAfter()\"", + "target": "\"remove()\"", + "value": 1 + }, + { + "source": "\"MoveBefore()\"", + "target": "\"insert()\"", + "value": 1 + }, + { + "source": "\"MoveBefore()\"", + "target": "\"remove()\"", + "value": 1 + }, + { + "source": "\"MoveToBack()\"", + "target": "\"insert()\"", + "value": 1 + }, + { + "source": "\"MoveToBack()\"", + "target": "\"remove()\"", + "value": 1 + }, + { + "source": "\"MoveToFront()\"", + "target": "\"insert()\"", + "value": 1 + }, + { + "source": "\"MoveToFront()\"", + "target": "\"remove()\"", + "value": 1 + }, + { + "source": "\"New()\"", + "target": "\"Init()\"", + "value": 1 + }, + { + "source": "\"PushBack()\"", + "target": "\"insertValue()\"", + "value": 1 + }, + { + "source": "\"PushBack()\"", + "target": "\"lazyInit()\"", + "value": 1 + }, + { + "source": "\"PushBackList()\"", + "target": "\"Front()\"", + "value": 1 + }, + { + "source": "\"PushBackList()\"", + "target": "\"Len()\"", + "value": 1 + }, + { + "source": "\"PushBackList()\"", + "target": "\"insertValue()\"", + "value": 1 + }, + { + "source": "\"PushBackList()\"", + "target": "\"lazyInit()\"", + "value": 1 + }, + { + "source": "\"PushFront()\"", + "target": "\"insertValue()\"", + "value": 1 + }, + { + "source": "\"PushFront()\"", + "target": "\"lazyInit()\"", + "value": 1 + }, + { + "source": "\"PushFrontList()\"", + "target": "\"Back()\"", + "value": 1 + }, + { + "source": "\"PushFrontList()\"", + "target": "\"Len()\"", + "value": 1 + }, + { + "source": "\"PushFrontList()\"", + "target": "\"insertValue()\"", + "value": 1 + }, + { + "source": "\"PushFrontList()\"", + "target": "\"lazyInit()\"", + "value": 1 + }, + { + "source": "\"Remove\"", + "target": "\"remove()\"", + "value": 1 + }, + { + "source": "\"insertValue()\"", + "target": "\"insert()\"", + "value": 1 + }, + { + "source": "\"lazyInit()\"", + "target": "\"Init()\"", + "value": 1 + } + ] +} diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..c88c30d --- /dev/null +++ b/web/index.html @@ -0,0 +1,54 @@ + + + Status Whisper network graph + + + + + + +
+
+

Status Whisper Network Graph

+

This graph represents Status cluster and connected peers, as + reported by instrumented nodes and Status app with metrics option + enabled.

+
+ +
+
+
+ +
+
+ + + + + + + diff --git a/web/index.js b/web/index.js new file mode 100644 index 0000000..65d6b3a --- /dev/null +++ b/web/index.js @@ -0,0 +1,239 @@ +var { colorStr2Hex, autoColorNodes } = require('./js/colors.js'); +require('./js/keys.js'); +var accessorFn = require('./js/shitty_hacks.js'); +var { animatePropagation, restoreTimeout, updateRestoreTimeout, delayFactor, updateDelayFactor } = require('./js/animation.js'); +var { NewEthereumGeometry } = require('./js/ethereum.js'); + +var Stats = require('stats-js'); +const dat = require('dat.gui'); + + +// WebGL +let canvas = document.getElementById("preview"); +var renderer = new THREE.WebGLRenderer({ canvas: canvas }); + +var graphData, plog; +var positions = Array(); + +function setGraphData(data) { + graphData = data; + + initGraph(); +} + +function setPropagation(plogData) { + plog = plogData; + animatePropagation(nodesGroup, linksGroup, plogData); +} + +function updatePositions(data) { + positions = data; + + redrawGraph(); +} + +module.exports = { updatePositions, setGraphData, setPropagation }; + +// Setup scene +const scene = new THREE.Scene(); +scene.background = new THREE.Color(0x000011); + +// Add lights +scene.add(new THREE.AmbientLight(0xbbbbbb)); +scene.add(new THREE.DirectionalLight(0xffffff, 0.6)); + +var linksGroup = new THREE.Group(); +scene.add(linksGroup); +var nodesGroup = new THREE.Group(); +scene.add(nodesGroup); + +// Setup camera +var camera = new THREE.PerspectiveCamera(); +camera.far = 20000; + +var tbControls = new THREE.TrackballControls(camera, renderer.domElement); +var flyControls = new THREE.FlyControls(camera, renderer.domElement); + +var animate = function () { + // frame cycle + tbControls.update(); + flyControls.update(1); + + renderer.render(scene, camera); + stats.update(); + requestAnimationFrame( animate ); +}; + +var width = window.innerWidth * 80 / 100 - 20; +var height = window.innerHeight - 20; +var nodeRelSize = 1; +var nodeResolution = 8; + +// Stats +var stats = new Stats(); +document.body.appendChild( stats.domElement ); +stats.domElement.style.position = 'absolute'; +stats.domElement.style.right = '15px'; +stats.domElement.style.bottom = '20px'; + +// Dat GUI +const gui = new dat.GUI(); +var f1 = gui.addFolder('Animation'); +var restoreCtl = f1.add({ restoreTimeout: restoreTimeout }, 'restoreTimeout').name('Restore timeout'); +restoreCtl.onFinishChange(function(value) { + updateRestoreTimeout(value); +}); +var factorCtl = f1.add({ delayFactor: delayFactor }, 'delayFactor').name('Delay factor'); +factorCtl.onFinishChange(function(value) { + updateDelayFactor(value); +}); + +var initGraph = function () { + resizeCanvas(); + + // parse links + graphData.links.forEach(link => { + link.source = link["source"]; + link.target = link["target"]; + }); + + // Add WebGL objects + // Clear the place + while (nodesGroup.children.length) { + nodesGroup.remove(nodesGroup.children[0]) + } + while (linksGroup.children.length) { + linksGroup.remove(linksGroup.children[0]) + } + + // Render nodes + const nameAccessor = accessorFn("name"); + const valAccessor = accessorFn("weight"); + const colorAccessor = accessorFn("color"); + let sphereGeometries = {}; // indexed by node value + let sphereMaterials = {}; // indexed by color + + autoColorNodes(graphData.nodes); + graphData.nodes.forEach((node, idx) => { + let val = valAccessor(node) || 1; + if (!sphereGeometries.hasOwnProperty(val)) { + sphereGeometries[val] = NewEthereumGeometry(val); + } + + const color = colorAccessor(node); + if (!sphereMaterials.hasOwnProperty(color)) { + sphereMaterials[color] = new THREE.MeshStandardMaterial({ + color: colorStr2Hex(color || '#00ff00'), + transparent: false, + opacity: 0.75 + }); + } + + const sphere = new THREE.Mesh(sphereGeometries[val], sphereMaterials[color]); + + sphere.name = nameAccessor(node); // Add label + sphere.__data = node; // Attach node data + + nodesGroup.add(node.__sphere = sphere); + if (positions[idx] !== undefined) { + sphere.position.set(positions[idx].x, positions[idx].y, positions[idx].z); + } + }); + + const linkColorAccessor = accessorFn("color"); + let lineMaterials = {}; // indexed by color + console.log("Adding links", graphData.links.lengh); + graphData.links.forEach(link => { + const color = linkColorAccessor(link); + if (!lineMaterials.hasOwnProperty(color)) { + lineMaterials[color] = new THREE.LineBasicMaterial({ + color: /*colorStr2Hex(color || '#f0f0f0')*/ '#f0f0f0', + transparent: true, + opacity: 0.4, + }); + } + + const geometry = new THREE.BufferGeometry(); + geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3)); + const lineMaterial = lineMaterials[color]; + const line = new THREE.Line(geometry, lineMaterial); + + line.renderOrder = 10; // Prevent visual glitches of dark lines on top of spheres by rendering them last + + linksGroup.add(link.__line = line); + }); + + // correct camera position + if (camera.position.x === 0 && camera.position.y === 0) { + // If camera still in default position (not user modified) + camera.lookAt(nodesGroup.position); + camera.position.z = Math.cbrt(graphData.nodes.length) * 50; + } + + function resizeCanvas() { + if (width && height) { + renderer.setSize(width, height); + camera.aspect = width/height; + camera.updateProjectionMatrix(); + } + } +}; + +var redrawGraph = function () { + graphData.nodes.forEach((node, idx) => { + const sphere = node.__sphere; + if (!sphere) return; + + sphere.position.x = positions[idx].x; + sphere.position.y = positions[idx].y || 0; + sphere.position.z = positions[idx].z || 0; + }); + + + graphData.links.forEach(link => { + const line = link.__line; + if (!line) return; + + linePos = line.geometry.attributes.position; + + // TODO: move this index into map/cache or even into original graph data + let start, end; + for (let i = 0; i < graphData.nodes.length; i++) { + if (graphData.nodes[i].id === link.source) { + start = i; + break; + } + } + for (let i = 0; i < graphData.nodes.length; i++) { + if (graphData.nodes[i].id === link["target"]) { + end = i; + break; + } + } + + linePos.array[0] = positions[start].x; + linePos.array[1] = positions[start].y || 0; + linePos.array[2] = positions[start].z || 0; + linePos.array[3] = positions[end].x; + linePos.array[4] = positions[end].y || 0; + linePos.array[5] = positions[end].z || 0; + + linePos.needsUpdate = true; + line.geometry.computeBoundingSphere(); + }); +}; + +// replay restarts propagation animation. +function replay() { + console.log(linksGroup, plog); + animatePropagation(nodesGroup, linksGroup, plog); +} +// js functions after browserify cannot be accessed from html, +// so instead of using onclick="replay()" we need to attach listener +// here. +// Did I already say that whole frontend ecosystem is a one giant +// museum of hacks for hacks on top of hacks? +var replayButton = document.getElementById('replayButton'); +replayButton.addEventListener('click', replay); + +animate(); diff --git a/web/js/animation.js b/web/js/animation.js new file mode 100644 index 0000000..9afec7b --- /dev/null +++ b/web/js/animation.js @@ -0,0 +1,79 @@ +var gradient = require('d3-scale-chromatic').interpolateCool; + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +let mat = new THREE.LineBasicMaterial({ + color: '#cc0000', + transparent: true, + opacity: 0.7 +}); + +// Params +var restoreTimeout = 250; // ms +function updateRestoreTimeout(value) { + console.log("Updating restore timeout to ", value); + restoreTimeout = value; +} +var delayFactor = 3; // multiplication factor for blink timeout +function updateDelayFactor(value) { + delayFactor = value; +} + +function blinkLink(links, indices) { + indices.forEach(idx => { + if (links.children[idx].material === mat) { + return + } + let oldMat = links.children[idx].material; + links.children[idx].material = mat; + + console.log("Blinking with restore timeout", restoreTimeout); + setTimeout(function() { + links.children[idx].material = oldMat; + }, restoreTimeout); + }); +} + +var nodeCounters = {}; +var maxCounter = 0; +var nodeMaterials = {}; + +// blinkNodes updates nodes color increasing its temperature +// in a heatmap style +function blinkNodes(nodes, indices) { + indices.forEach(idx => { + nodeCounters[idx] = nodeCounters[idx] ? nodeCounters[idx]+1 : 1; + if (nodeCounters[idx] > maxCounter) { + maxCounter = nodeCounters[idx]; + } + }); + // TODO: FIXME: how to make simple map counter without this fucking bullshit? + Object.keys(nodeCounters).forEach(idx => { + let c = nodeCounters[idx]; + let scale = c / maxCounter; + let color = gradient(scale); + if (nodeMaterials[color] === undefined) { + nodeMaterials[color] = new THREE.MeshStandardMaterial({color: new THREE.Color(color)}); + } + nodes.children[idx].material = nodeMaterials[color]; + }); +} + +function animatePropagation(nodes, links, plog) { + maxCounter = 0; + nodeCounters = {}; + plog.Timestamps.forEach((ts, idx) => { + setTimeout(function() { + blinkLink(links, plog.Indices[idx]); + }, ts*delayFactor); + setTimeout(function() { + blinkNodes(nodes, plog.Nodes[idx]); + }, ts*delayFactor); + }); +} + +module.exports = { animatePropagation, + restoreTimeout, updateRestoreTimeout, + delayFactor, updateDelayFactor } diff --git a/web/js/colors.js b/web/js/colors.js new file mode 100644 index 0000000..f529ec5 --- /dev/null +++ b/web/js/colors.js @@ -0,0 +1,20 @@ +var schemePaired = require('d3-scale-chromatic').schemePaired; +var tinyColor = require('tinycolor2'); + +const colorStr2Hex = str => isNaN(str) ? parseInt(tinyColor(str).toHex(), 16) : str; + +function autoColorNodes(nodes) { + const colors = schemePaired; // Paired color set from color brewer + + const uncoloredNodes = nodes.filter(node => !node.color); + const nodeGroups = {}; + + uncoloredNodes.forEach(node => { nodeGroups[node["group"]] = null }); + Object.keys(nodeGroups).forEach((group, idx) => { nodeGroups[group] = idx }); + + uncoloredNodes.forEach(node => { + node.color = colorStr2Hex(colors[nodeGroups[node["group"]] % colors.length]); + }); +} + +module.exports = { colorStr2Hex, autoColorNodes }; diff --git a/web/js/controls/FlyControls.js b/web/js/controls/FlyControls.js new file mode 100644 index 0000000..0bfbcd1 --- /dev/null +++ b/web/js/controls/FlyControls.js @@ -0,0 +1,292 @@ +/** + * @author James Baicoianu / http://www.baicoianu.com/ + */ + +THREE.FlyControls = function ( object, domElement ) { + + this.object = object; + + this.domElement = ( domElement !== undefined ) ? domElement : document; + if ( domElement ) this.domElement.setAttribute( 'tabindex', - 1 ); + + // API + + this.movementSpeed = 1.0; + this.rollSpeed = 0.005; + + this.dragToLook = false; + this.autoForward = false; + + // disable default target object behavior + + // internals + + this.tmpQuaternion = new THREE.Quaternion(); + + this.mouseStatus = 0; + + this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 }; + this.moveVector = new THREE.Vector3( 0, 0, 0 ); + this.rotationVector = new THREE.Vector3( 0, 0, 0 ); + + this.handleEvent = function ( event ) { + + if ( typeof this[ event.type ] == 'function' ) { + + this[ event.type ]( event ); + + } + + }; + + this.keydown = function( event ) { + + if ( event.altKey ) { + + return; + + } + + //event.preventDefault(); + + switch ( event.keyCode ) { + + case 16: /* shift */ this.movementSpeedMultiplier = .1; break; + + case 87: /*W*/ this.moveState.forward = 1; break; + case 83: /*S*/ this.moveState.back = 1; break; + + case 65: /*A*/ this.moveState.left = 1; break; + case 68: /*D*/ this.moveState.right = 1; break; + + case 82: /*R*/ this.moveState.up = 1; break; + case 70: /*F*/ this.moveState.down = 1; break; + + case 38: /*up*/ this.moveState.pitchUp = 1; break; + case 40: /*down*/ this.moveState.pitchDown = 1; break; + + case 37: /*left*/ this.moveState.yawLeft = 1; break; + case 39: /*right*/ this.moveState.yawRight = 1; break; + + case 81: /*Q*/ this.moveState.rollLeft = 1; break; + case 69: /*E*/ this.moveState.rollRight = 1; break; + + } + + this.updateMovementVector(); + this.updateRotationVector(); + + }; + + this.keyup = function( event ) { + + switch ( event.keyCode ) { + + case 16: /* shift */ this.movementSpeedMultiplier = 1; break; + + case 87: /*W*/ this.moveState.forward = 0; break; + case 83: /*S*/ this.moveState.back = 0; break; + + case 65: /*A*/ this.moveState.left = 0; break; + case 68: /*D*/ this.moveState.right = 0; break; + + case 82: /*R*/ this.moveState.up = 0; break; + case 70: /*F*/ this.moveState.down = 0; break; + + case 38: /*up*/ this.moveState.pitchUp = 0; break; + case 40: /*down*/ this.moveState.pitchDown = 0; break; + + case 37: /*left*/ this.moveState.yawLeft = 0; break; + case 39: /*right*/ this.moveState.yawRight = 0; break; + + case 81: /*Q*/ this.moveState.rollLeft = 0; break; + case 69: /*E*/ this.moveState.rollRight = 0; break; + + } + + this.updateMovementVector(); + this.updateRotationVector(); + + }; + + this.mousedown = function( event ) { + + if ( this.domElement !== document ) { + + this.domElement.focus(); + + } + + event.preventDefault(); + event.stopPropagation(); + + if ( this.dragToLook ) { + + this.mouseStatus ++; + + } else { + + switch ( event.button ) { + + case 0: this.moveState.forward = 1; break; + case 2: this.moveState.back = 1; break; + + } + + this.updateMovementVector(); + + } + + }; + + this.mousemove = function( event ) { + + // (divan: disabled) + if (false && (! this.dragToLook || this.mouseStatus > 0)) { + var container = this.getContainerDimensions(); + var halfWidth = container.size[ 0 ] / 2; + var halfHeight = container.size[ 1 ] / 2; + + this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth; + this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight; + + this.updateRotationVector(); + } + + }; + + this.mouseup = function( event ) { + + event.preventDefault(); + event.stopPropagation(); + + if ( this.dragToLook ) { + + this.mouseStatus --; + + this.moveState.yawLeft = this.moveState.pitchDown = 0; + + } else { + + switch ( event.button ) { + + case 0: this.moveState.forward = 0; break; + case 2: this.moveState.back = 0; break; + + } + + this.updateMovementVector(); + + } + + this.updateRotationVector(); + + }; + + this.update = function( delta ) { + + var moveMult = delta * this.movementSpeed; + var rotMult = delta * this.rollSpeed; + + this.object.translateX( this.moveVector.x * moveMult ); + this.object.translateY( this.moveVector.y * moveMult ); + this.object.translateZ( this.moveVector.z * moveMult ); + + this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize(); + this.object.quaternion.multiply( this.tmpQuaternion ); + + // expose the rotation vector for convenience + this.object.rotation.setFromQuaternion( this.object.quaternion, this.object.rotation.order ); + + + }; + + this.updateMovementVector = function() { + + var forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0; + + this.moveVector.x = ( - this.moveState.left + this.moveState.right ); + this.moveVector.y = ( - this.moveState.down + this.moveState.up ); + this.moveVector.z = ( - forward + this.moveState.back ); + + //console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] ); + + }; + + this.updateRotationVector = function() { + + this.rotationVector.x = ( - this.moveState.pitchDown + this.moveState.pitchUp ); + this.rotationVector.y = ( - this.moveState.yawRight + this.moveState.yawLeft ); + this.rotationVector.z = ( - this.moveState.rollRight + this.moveState.rollLeft ); + + //console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] ); + + }; + + this.getContainerDimensions = function() { + + if ( this.domElement != document ) { + + return { + size : [ this.domElement.offsetWidth, this.domElement.offsetHeight ], + offset : [ this.domElement.offsetLeft, this.domElement.offsetTop ] + }; + + } else { + + return { + size : [ window.innerWidth, window.innerHeight ], + offset : [ 0, 0 ] + }; + + } + + }; + + function bind( scope, fn ) { + + return function () { + + fn.apply( scope, arguments ); + + }; + + } + + function contextmenu( event ) { + + event.preventDefault(); + + } + + this.dispose = function() { + + //this.domElement.removeEventListener( 'contextmenu', contextmenu, false ); + //this.domElement.removeEventListener( 'mousedown', _mousedown, false ); + //this.domElement.removeEventListener( 'mousemove', _mousemove, false ); + //this.domElement.removeEventListener( 'mouseup', _mouseup, false ); + + window.removeEventListener( 'keydown', _keydown, false ); + window.removeEventListener( 'keyup', _keyup, false ); + + }; + + //var _mousemove = bind( this, this.mousemove ); + var _mousedown = bind( this, this.mousedown ); + var _mouseup = bind( this, this.mouseup ); + var _keydown = bind( this, this.keydown ); + var _keyup = bind( this, this.keyup ); + + this.domElement.addEventListener( 'contextmenu', contextmenu, false ); + + //this.domElement.addEventListener( 'mousemove', _mousemove, false ); + //this.domElement.addEventListener( 'mousedown', _mousedown, false ); + //this.domElement.addEventListener( 'mouseup', _mouseup, false ); + + window.addEventListener( 'keydown', _keydown, false ); + window.addEventListener( 'keyup', _keyup, false ); + + this.updateMovementVector(); + this.updateRotationVector(); + +}; diff --git a/web/js/controls/TrackballControls.js b/web/js/controls/TrackballControls.js new file mode 100644 index 0000000..a084522 --- /dev/null +++ b/web/js/controls/TrackballControls.js @@ -0,0 +1,625 @@ +/** + * @author Eberhard Graether / http://egraether.com/ + * @author Mark Lundin / http://mark-lundin.com + * @author Simone Manini / http://daron1337.github.io + * @author Luca Antiga / http://lantiga.github.io + */ + +THREE.TrackballControls = function ( object, domElement ) { + + var _this = this; + var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 }; + + this.object = object; + this.domElement = ( domElement !== undefined ) ? domElement : document; + + // API + + this.enabled = true; + + this.screen = { left: 0, top: 0, width: 0, height: 0 }; + + this.rotateSpeed = 1.0; + this.zoomSpeed = 1.2; + this.panSpeed = 0.3; + + this.noRotate = false; + this.noZoom = false; + this.noPan = false; + + this.staticMoving = false; + this.dynamicDampingFactor = 0.2; + + this.minDistance = 0; + this.maxDistance = Infinity; + + this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ]; + + // internals + + this.target = new THREE.Vector3(); + + var EPS = 0.000001; + + var lastPosition = new THREE.Vector3(); + + var _state = STATE.NONE, + _prevState = STATE.NONE, + + _eye = new THREE.Vector3(), + + _movePrev = new THREE.Vector2(), + _moveCurr = new THREE.Vector2(), + + _lastAxis = new THREE.Vector3(), + _lastAngle = 0, + + _zoomStart = new THREE.Vector2(), + _zoomEnd = new THREE.Vector2(), + + _touchZoomDistanceStart = 0, + _touchZoomDistanceEnd = 0, + + _panStart = new THREE.Vector2(), + _panEnd = new THREE.Vector2(); + + // for reset + + this.target0 = this.target.clone(); + this.position0 = this.object.position.clone(); + this.up0 = this.object.up.clone(); + + // events + + var changeEvent = { type: 'change' }; + var startEvent = { type: 'start' }; + var endEvent = { type: 'end' }; + + + // methods + + this.handleResize = function () { + + if ( this.domElement === document ) { + + this.screen.left = 0; + this.screen.top = 0; + this.screen.width = window.innerWidth; + this.screen.height = window.innerHeight; + + } else { + + var box = this.domElement.getBoundingClientRect(); + // adjustments come from similar code in the jquery offset() function + var d = this.domElement.ownerDocument.documentElement; + this.screen.left = box.left + window.pageXOffset - d.clientLeft; + this.screen.top = box.top + window.pageYOffset - d.clientTop; + this.screen.width = box.width; + this.screen.height = box.height; + + } + + }; + + this.handleEvent = function ( event ) { + + if ( typeof this[ event.type ] == 'function' ) { + + this[ event.type ]( event ); + + } + + }; + + var getMouseOnScreen = ( function () { + + var vector = new THREE.Vector2(); + + return function getMouseOnScreen( pageX, pageY ) { + + vector.set( + ( pageX - _this.screen.left ) / _this.screen.width, + ( pageY - _this.screen.top ) / _this.screen.height + ); + + return vector; + + }; + + }() ); + + var getMouseOnCircle = ( function () { + + var vector = new THREE.Vector2(); + + return function getMouseOnCircle( pageX, pageY ) { + + vector.set( + ( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ), + ( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional + ); + + return vector; + + }; + + }() ); + + this.rotateCamera = ( function() { + + var axis = new THREE.Vector3(), + quaternion = new THREE.Quaternion(), + eyeDirection = new THREE.Vector3(), + objectUpDirection = new THREE.Vector3(), + objectSidewaysDirection = new THREE.Vector3(), + moveDirection = new THREE.Vector3(), + angle; + + return function rotateCamera() { + + moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); + angle = moveDirection.length(); + + if ( angle ) { + + _eye.copy( _this.object.position ).sub( _this.target ); + + eyeDirection.copy( _eye ).normalize(); + objectUpDirection.copy( _this.object.up ).normalize(); + objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize(); + + objectUpDirection.setLength( _moveCurr.y - _movePrev.y ); + objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x ); + + moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) ); + + axis.crossVectors( moveDirection, _eye ).normalize(); + + angle *= _this.rotateSpeed; + quaternion.setFromAxisAngle( axis, angle ); + + _eye.applyQuaternion( quaternion ); + _this.object.up.applyQuaternion( quaternion ); + + _lastAxis.copy( axis ); + _lastAngle = angle; + + } else if ( ! _this.staticMoving && _lastAngle ) { + + _lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor ); + _eye.copy( _this.object.position ).sub( _this.target ); + quaternion.setFromAxisAngle( _lastAxis, _lastAngle ); + _eye.applyQuaternion( quaternion ); + _this.object.up.applyQuaternion( quaternion ); + + } + + _movePrev.copy( _moveCurr ); + + }; + + }() ); + + + this.zoomCamera = function () { + + var factor; + + if ( _state === STATE.TOUCH_ZOOM_PAN ) { + + factor = _touchZoomDistanceStart / _touchZoomDistanceEnd; + _touchZoomDistanceStart = _touchZoomDistanceEnd; + _eye.multiplyScalar( factor ); + + } else { + + factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed; + + if ( factor !== 1.0 && factor > 0.0 ) { + + _eye.multiplyScalar( factor ); + + } + + if ( _this.staticMoving ) { + + _zoomStart.copy( _zoomEnd ); + + } else { + + _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor; + + } + + } + + }; + + this.panCamera = ( function() { + + var mouseChange = new THREE.Vector2(), + objectUp = new THREE.Vector3(), + pan = new THREE.Vector3(); + + return function panCamera() { + + mouseChange.copy( _panEnd ).sub( _panStart ); + + if ( mouseChange.lengthSq() ) { + + mouseChange.multiplyScalar( _eye.length() * _this.panSpeed ); + + pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x ); + pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) ); + + _this.object.position.add( pan ); + _this.target.add( pan ); + + if ( _this.staticMoving ) { + + _panStart.copy( _panEnd ); + + } else { + + _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) ); + + } + + } + + }; + + }() ); + + this.checkDistances = function () { + + if ( ! _this.noZoom || ! _this.noPan ) { + + if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) { + + _this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) ); + _zoomStart.copy( _zoomEnd ); + + } + + if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) { + + _this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) ); + _zoomStart.copy( _zoomEnd ); + + } + + } + + }; + + this.update = function () { + + _eye.subVectors( _this.object.position, _this.target ); + + if ( ! _this.noRotate ) { + + _this.rotateCamera(); + + } + + if ( ! _this.noZoom ) { + + _this.zoomCamera(); + + } + + if ( ! _this.noPan ) { + + _this.panCamera(); + + } + + _this.object.position.addVectors( _this.target, _eye ); + + _this.checkDistances(); + + _this.object.lookAt( _this.target ); + + if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) { + + _this.dispatchEvent( changeEvent ); + + lastPosition.copy( _this.object.position ); + + } + + }; + + this.reset = function () { + + _state = STATE.NONE; + _prevState = STATE.NONE; + + _this.target.copy( _this.target0 ); + _this.object.position.copy( _this.position0 ); + _this.object.up.copy( _this.up0 ); + + _eye.subVectors( _this.object.position, _this.target ); + + _this.object.lookAt( _this.target ); + + _this.dispatchEvent( changeEvent ); + + lastPosition.copy( _this.object.position ); + + }; + + // listeners + + function keydown( event ) { + + if ( _this.enabled === false ) return; + + window.removeEventListener( 'keydown', keydown ); + + _prevState = _state; + + if ( _state !== STATE.NONE ) { + + return; + + } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) { + + _state = STATE.ROTATE; + + } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) { + + _state = STATE.ZOOM; + + } else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) { + + _state = STATE.PAN; + + } + + } + + function keyup( event ) { + + if ( _this.enabled === false ) return; + + _state = _prevState; + + window.addEventListener( 'keydown', keydown, false ); + + } + + function mousedown( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + event.stopPropagation(); + + if ( _state === STATE.NONE ) { + + _state = event.button; + + } + + if ( _state === STATE.ROTATE && ! _this.noRotate ) { + + _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); + _movePrev.copy( _moveCurr ); + + } else if ( _state === STATE.ZOOM && ! _this.noZoom ) { + + _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); + _zoomEnd.copy( _zoomStart ); + + } else if ( _state === STATE.PAN && ! _this.noPan ) { + + _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); + _panEnd.copy( _panStart ); + + } + + document.addEventListener( 'mousemove', mousemove, false ); + document.addEventListener( 'mouseup', mouseup, false ); + + _this.dispatchEvent( startEvent ); + + } + + function mousemove( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + event.stopPropagation(); + + if ( _state === STATE.ROTATE && ! _this.noRotate ) { + + _movePrev.copy( _moveCurr ); + _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); + + } else if ( _state === STATE.ZOOM && ! _this.noZoom ) { + + _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); + + } else if ( _state === STATE.PAN && ! _this.noPan ) { + + _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); + + } + + } + + function mouseup( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + event.stopPropagation(); + + _state = STATE.NONE; + + document.removeEventListener( 'mousemove', mousemove ); + document.removeEventListener( 'mouseup', mouseup ); + _this.dispatchEvent( endEvent ); + + } + + function mousewheel( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + event.stopPropagation(); + + switch ( event.deltaMode ) { + + case 2: + // Zoom in pages + _zoomStart.y -= event.deltaY * 0.025; + break; + + case 1: + // Zoom in lines + _zoomStart.y -= event.deltaY * 0.01; + break; + + default: + // undefined, 0, assume pixels + _zoomStart.y -= event.deltaY * 0.00025; + break; + + } + + _this.dispatchEvent( startEvent ); + _this.dispatchEvent( endEvent ); + + } + + function touchstart( event ) { + + if ( _this.enabled === false ) return; + + switch ( event.touches.length ) { + + case 1: + _state = STATE.TOUCH_ROTATE; + _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); + _movePrev.copy( _moveCurr ); + break; + + default: // 2 or more + _state = STATE.TOUCH_ZOOM_PAN; + var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; + var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; + _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy ); + + var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2; + var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2; + _panStart.copy( getMouseOnScreen( x, y ) ); + _panEnd.copy( _panStart ); + break; + + } + + _this.dispatchEvent( startEvent ); + + } + + function touchmove( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + event.stopPropagation(); + + switch ( event.touches.length ) { + + case 1: + _movePrev.copy( _moveCurr ); + _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); + break; + + default: // 2 or more + var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; + var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; + _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy ); + + var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2; + var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2; + _panEnd.copy( getMouseOnScreen( x, y ) ); + break; + + } + + } + + function touchend( event ) { + + if ( _this.enabled === false ) return; + + switch ( event.touches.length ) { + + case 0: + _state = STATE.NONE; + break; + + case 1: + _state = STATE.TOUCH_ROTATE; + _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); + _movePrev.copy( _moveCurr ); + break; + + } + + _this.dispatchEvent( endEvent ); + + } + + function contextmenu( event ) { + + if ( _this.enabled === false ) return; + + event.preventDefault(); + + } + + this.dispose = function() { + + this.domElement.removeEventListener( 'contextmenu', contextmenu, false ); + this.domElement.removeEventListener( 'mousedown', mousedown, false ); + this.domElement.removeEventListener( 'wheel', mousewheel, false ); + + this.domElement.removeEventListener( 'touchstart', touchstart, false ); + this.domElement.removeEventListener( 'touchend', touchend, false ); + this.domElement.removeEventListener( 'touchmove', touchmove, false ); + + document.removeEventListener( 'mousemove', mousemove, false ); + document.removeEventListener( 'mouseup', mouseup, false ); + + window.removeEventListener( 'keydown', keydown, false ); + window.removeEventListener( 'keyup', keyup, false ); + + }; + + this.domElement.addEventListener( 'contextmenu', contextmenu, false ); + this.domElement.addEventListener( 'mousedown', mousedown, false ); + this.domElement.addEventListener( 'wheel', mousewheel, false ); + + this.domElement.addEventListener( 'touchstart', touchstart, false ); + this.domElement.addEventListener( 'touchend', touchend, false ); + this.domElement.addEventListener( 'touchmove', touchmove, false ); + + window.addEventListener( 'keydown', keydown, false ); + window.addEventListener( 'keyup', keyup, false ); + + this.handleResize(); + + // force an update at start + this.update(); + +}; + +THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype ); +THREE.TrackballControls.prototype.constructor = THREE.TrackballControls; \ No newline at end of file diff --git a/web/js/ethereum.js b/web/js/ethereum.js new file mode 100644 index 0000000..d6a17c2 --- /dev/null +++ b/web/js/ethereum.js @@ -0,0 +1,26 @@ +function NewEthereumGeometry(scale) { + let geom = new THREE.Geometry(); + geom.vertices.push( + new THREE.Vector3( scale*1, 0, 0 ), + new THREE.Vector3( -scale*1, 0, 0 ), + new THREE.Vector3( 0, scale*1.5, 0 ), + new THREE.Vector3( 0, scale*-1.5, 0 ), + new THREE.Vector3( 0, 0, scale*1 ), + new THREE.Vector3( 0, 0, -scale*1 ) + ); + geom.faces.push( + new THREE.Face3( 0, 2, 4 ), + new THREE.Face3( 0, 4, 3 ), + new THREE.Face3( 0, 3, 5 ), + new THREE.Face3( 0, 5, 2 ), + new THREE.Face3( 1, 2, 5 ), + new THREE.Face3( 1, 5, 3 ), + new THREE.Face3( 1, 3, 4 ), + new THREE.Face3( 1, 4, 2 ) + ); + geom.computeBoundingSphere(); + geom.computeFaceNormals(); + return geom; +} + +module.exports = { NewEthereumGeometry }; diff --git a/web/js/keys.js b/web/js/keys.js new file mode 100644 index 0000000..1ce8b2f --- /dev/null +++ b/web/js/keys.js @@ -0,0 +1,2 @@ +document.addEventListener("keydown", function(event) { +}); diff --git a/web/js/shitty_hacks.js b/web/js/shitty_hacks.js new file mode 100644 index 0000000..2e48ff3 --- /dev/null +++ b/web/js/shitty_hacks.js @@ -0,0 +1,18 @@ +// accessorFn +function accessorFn(p) { + if (p instanceof Function) { + return p // fn + } + + if (typeof p === 'string') { + return function(obj) { + return obj[p]; // property name + } + } + + return function (obj){ + return p; // constant + } +} + +module.exports = accessorFn; diff --git a/web/js/ws.js b/web/js/ws.js new file mode 100644 index 0000000..64a3ba7 --- /dev/null +++ b/web/js/ws.js @@ -0,0 +1,26 @@ +var graph = require('../index.js'); + +var ws = new WebSocket('ws://' + window.location.host + '/ws'); + +// request graphData and initial positions from websocket connection +ws.onopen = function (event) { + ws.send('{"cmd": "init"}'); +}; + +ws.onmessage = function (event) { + let msg = JSON.parse(event.data); + switch(msg.type) { + case "graph": + graph.setGraphData(msg.graph); + break; + case "propagation": + graph.setPropagation(msg.propagation); + break; + case "positions": + console.log("Updating positions..."); + graph.updatePositions(msg.positions); + break; + } +} + +module.exports = { ws }; diff --git a/web/package-lock.json b/web/package-lock.json new file mode 100644 index 0000000..706e353 --- /dev/null +++ b/web/package-lock.json @@ -0,0 +1,50 @@ +{ + "name": "clean", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "d3-color": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz", + "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs=" + }, + "d3-interpolate": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz", + "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==", + "requires": { + "d3-color": "1.0.3" + } + }, + "d3-scale-chromatic": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz", + "integrity": "sha512-qQUhLi8fPe/F0b0M46C6eFUbms5IIMHuhJ5DKjjzBUvm1b6aPtygJzGbrMdMUD/ckLBq+NdWwHeN2cpMDp4Q5Q==", + "requires": { + "d3-color": "1.0.3", + "d3-interpolate": "1.1.6" + } + }, + "dat.gui": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.1.tgz", + "integrity": "sha512-fTv1JQqjwA1Rtjy/i0ThdLgUOSWA3hOJrvNEl3XrfaMvCcFdV0h01bo3aGXknLx3okJ7AO9qqgVz6TbuRHxYAw==" + }, + "stats-js": { + "version": "1.0.0-alpha1", + "resolved": "https://registry.npmjs.org/stats-js/-/stats-js-1.0.0-alpha1.tgz", + "integrity": "sha1-RK6C5kIRI7q5l1DZXD9VJrjyV9s=" + }, + "three": { + "version": "0.88.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz", + "integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU=" + }, + "tinycolor2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", + "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" + } + } +} diff --git a/web/package.json b/web/package.json new file mode 100644 index 0000000..65a5e9c --- /dev/null +++ b/web/package.json @@ -0,0 +1,18 @@ +{ + "name": "clean", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "d3-scale-chromatic": "^1.2.0", + "dat.gui": "^0.7.1", + "stats-js": "^1.0.0-alpha1", + "three": "^0.88.0", + "tinycolor2": "^1.4.1" + } +} diff --git a/ws.go b/ws.go new file mode 100644 index 0000000..a82fdaa --- /dev/null +++ b/ws.go @@ -0,0 +1,107 @@ +package main + +import ( + "encoding/json" + "log" + "net/http" + + "github.com/divan/graph-experiments/graph" + "github.com/divan/graph-experiments/layout" + "github.com/gorilla/websocket" +) + +type WSServer struct { + upgrader websocket.Upgrader + hub []*websocket.Conn + + Positions []*position + layout layout.Layout + graph *graph.Graph + propagation *PropagationLog +} + +func NewWSServer(layout layout.Layout) *WSServer { + ws := &WSServer{ + upgrader: websocket.Upgrader{}, + layout: layout, + } + ws.updatePositions() + return ws +} + +type WSResponse struct { + Type MsgType `json:"type"` + Positions []*position `json:"positions,omitempty"` + Graph json.RawMessage `json:"graph,omitempty"` + Propagation *PropagationLog `json:"propagation,omitempty"` +} + +type WSRequest struct { + Cmd WSCommand `json:"cmd"` +} + +type MsgType string +type WSCommand string + +// WebSocket response types +const ( + RespPositions MsgType = "positions" + RespGraph MsgType = "graph" + RespPropagation MsgType = "propagation" +) + +// WebSocket commands +const ( + CmdInit WSCommand = "init" +) + +func (ws *WSServer) Handle(w http.ResponseWriter, r *http.Request) { + c, err := ws.upgrader.Upgrade(w, r, nil) + if err != nil { + log.Println(err) + return + } + defer c.Close() + + ws.hub = append(ws.hub, c) + + for { + mt, message, err := c.ReadMessage() + if err != nil { + log.Println("read:", mt, err) + break + } + ws.processRequest(c, mt, message) + } +} + +func (ws *WSServer) processRequest(c *websocket.Conn, mtype int, data []byte) { + var cmd WSRequest + err := json.Unmarshal(data, &cmd) + if err != nil { + log.Fatal("unmarshal command", err) + return + } + + switch cmd.Cmd { + case CmdInit: + ws.sendGraphData(c) + ws.updatePositions() + ws.sendPositions(c) + ws.sendPropagationData(c) + } +} + +func (ws *WSServer) sendMsg(c *websocket.Conn, msg *WSResponse) { + data, err := json.Marshal(msg) + if err != nil { + log.Println("write:", err) + return + } + + err = c.WriteMessage(1, data) + if err != nil { + log.Println("write:", err) + return + } +} diff --git a/ws_graph.go b/ws_graph.go new file mode 100644 index 0000000..415856e --- /dev/null +++ b/ws_graph.go @@ -0,0 +1,37 @@ +package main + +import ( + "bytes" + "encoding/json" + "log" + + "github.com/divan/graph-experiments/export" + "github.com/divan/graph-experiments/graph" + "github.com/gorilla/websocket" +) + +func (ws *WSServer) sendGraphData(c *websocket.Conn) { + var buf bytes.Buffer + err := export.NewJSON(&buf, false).ExportGraph(ws.graph) + if err != nil { + log.Fatal("Can't marshal graph to JSON") + } + msg := &WSResponse{ + Type: RespGraph, + Graph: json.RawMessage(buf.Bytes()), + } + + ws.sendMsg(c, msg) +} + +func (ws *WSServer) updateGraph(g *graph.Graph) { + ws.graph = g + + ws.broadcastGraphData() +} + +func (ws *WSServer) broadcastGraphData() { + for i := 0; i < len(ws.hub); i++ { + ws.sendGraphData(ws.hub[i]) + } +} diff --git a/ws_positions.go b/ws_positions.go new file mode 100644 index 0000000..b764065 --- /dev/null +++ b/ws_positions.go @@ -0,0 +1,41 @@ +package main + +import "github.com/gorilla/websocket" + +type position struct { + X int `json:"x"` + Y int `json:"y"` + Z int `json:"z"` +} + +func (ws *WSServer) sendPositions(c *websocket.Conn) { + msg := &WSResponse{ + Type: RespPositions, + Positions: ws.Positions, + } + + ws.sendMsg(c, msg) +} + +func (ws *WSServer) updatePositions() { + // positions + nodes := ws.layout.Nodes() + positions := []*position{} + for i := 0; i < len(nodes); i++ { + pos := &position{ + X: nodes[i].X, + Y: nodes[i].Y, + Z: nodes[i].Z, + } + positions = append(positions, pos) + } + ws.Positions = positions + + ws.broadcastPositions() +} + +func (ws *WSServer) broadcastPositions() { + for i := 0; i < len(ws.hub); i++ { + ws.sendPositions(ws.hub[i]) + } +} diff --git a/ws_propagation.go b/ws_propagation.go new file mode 100644 index 0000000..b72351c --- /dev/null +++ b/ws_propagation.go @@ -0,0 +1,26 @@ +package main + +import ( + "github.com/gorilla/websocket" +) + +func (ws *WSServer) sendPropagationData(c *websocket.Conn) { + msg := &WSResponse{ + Type: RespPropagation, + Propagation: ws.propagation, + } + + ws.sendMsg(c, msg) +} + +func (ws *WSServer) updatePropagationData(plog *PropagationLog) { + ws.propagation = plog + + ws.broadcastPropagationData() +} + +func (ws *WSServer) broadcastPropagationData() { + for i := 0; i < len(ws.hub); i++ { + ws.sendPropagationData(ws.hub[i]) + } +}