mirror of
https://github.com/status-im/whispervis.git
synced 2025-02-10 12:16:27 +00:00
5710 lines
185 KiB
JavaScript
5710 lines
185 KiB
JavaScript
(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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
|
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 = [];
|
|
Object.keys(data).forEach((k) => {
|
|
let v = data[k];
|
|
positions[k] = {
|
|
x: v.X,
|
|
y: v.Y,
|
|
z: v.Z,
|
|
};
|
|
})
|
|
console.log("Positions", positions);
|
|
|
|
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[node.id] !== undefined) {
|
|
sphere.position.set(positions[node.id].x, positions[node.id].y, positions[node.id].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[node.id].x;
|
|
sphere.position.y = positions[node.id].y || 0;
|
|
sphere.position.z = positions[node.id].z || 0;
|
|
});
|
|
|
|
|
|
graphData.links.forEach(link => {
|
|
const line = link.__line;
|
|
if (!line) return;
|
|
|
|
linePos = line.geometry.attributes.position;
|
|
|
|
let start = link.source;
|
|
let end = link.target;
|
|
|
|
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 = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n <textarea id=\"dg-new-constructor\"></textarea>\n\n <div id=\"dg-save-locally\">\n\n <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n values to <code>localStorage</code> on exit.\n\n <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n override those passed to <code>dat.GUI</code>'s constructor. This makes it\n easier to work incrementally, but <code>localStorage</code> is fragile,\n and your friends may not see the same values you do.\n\n </div>\n\n </div>\n\n</div>";
|
|
|
|
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:
|
|
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
|
|
|
|
// `rgbToRgb`
|
|
// Handle bounds / percentage checking to conform to CSS color spec
|
|
// <http://www.w3.org/TR/css3-color/>
|
|
// *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
|
|
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
|
|
|
|
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
|
|
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
|
|
|
|
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
|
|
// ---------------------
|
|
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
|
|
|
|
// `contrast`
|
|
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
|
|
tinycolor.readability = function(color1, color2) {
|
|
var c1 = tinycolor(color1);
|
|
var c2 = tinycolor(color2);
|
|
return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
|
|
};
|
|
|
|
// `isReadable`
|
|
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
|
|
// The third argument is an optional Object.
|
|
// the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
|
|
// the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
|
|
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
|
|
|
|
// *Example*
|
|
// tinycolor.isReadable("#000", "#111") => 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
|
|
// ------------------
|
|
// <http://www.w3.org/TR/css3-color/#svg-color>
|
|
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
|
|
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
|
|
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() {
|
|
|
|
// <http://www.w3.org/TR/css3-values/#integers>
|
|
var CSS_INTEGER = "[-\\+]?\\d+%?";
|
|
|
|
// <http://www.w3.org/TR/css3-values/#number-value>
|
|
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]);
|