1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | function ___$insertStyle(css) {
|
15 | if (!css) {
|
16 | return;
|
17 | }
|
18 | if (typeof window === 'undefined') {
|
19 | return;
|
20 | }
|
21 |
|
22 | var style = document.createElement('style');
|
23 |
|
24 | style.setAttribute('type', 'text/css');
|
25 | style.innerHTML = css;
|
26 | document.head.appendChild(style);
|
27 |
|
28 | return css;
|
29 | }
|
30 |
|
31 | function colorToString (color, forceCSSHex) {
|
32 | var colorFormat = color.__state.conversionName.toString();
|
33 | var r = Math.round(color.r);
|
34 | var g = Math.round(color.g);
|
35 | var b = Math.round(color.b);
|
36 | var a = color.a;
|
37 | var h = Math.round(color.h);
|
38 | var s = color.s.toFixed(1);
|
39 | var v = color.v.toFixed(1);
|
40 | if (forceCSSHex || colorFormat === 'THREE_CHAR_HEX' || colorFormat === 'SIX_CHAR_HEX') {
|
41 | var str = color.hex.toString(16);
|
42 | while (str.length < 6) {
|
43 | str = '0' + str;
|
44 | }
|
45 | return '#' + str;
|
46 | } else if (colorFormat === 'CSS_RGB') {
|
47 | return 'rgb(' + r + ',' + g + ',' + b + ')';
|
48 | } else if (colorFormat === 'CSS_RGBA') {
|
49 | return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
|
50 | } else if (colorFormat === 'HEX') {
|
51 | return '0x' + color.hex.toString(16);
|
52 | } else if (colorFormat === 'RGB_ARRAY') {
|
53 | return '[' + r + ',' + g + ',' + b + ']';
|
54 | } else if (colorFormat === 'RGBA_ARRAY') {
|
55 | return '[' + r + ',' + g + ',' + b + ',' + a + ']';
|
56 | } else if (colorFormat === 'RGB_OBJ') {
|
57 | return '{r:' + r + ',g:' + g + ',b:' + b + '}';
|
58 | } else if (colorFormat === 'RGBA_OBJ') {
|
59 | return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';
|
60 | } else if (colorFormat === 'HSV_OBJ') {
|
61 | return '{h:' + h + ',s:' + s + ',v:' + v + '}';
|
62 | } else if (colorFormat === 'HSVA_OBJ') {
|
63 | return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';
|
64 | }
|
65 | return 'unknown format';
|
66 | }
|
67 |
|
68 | var ARR_EACH = Array.prototype.forEach;
|
69 | var ARR_SLICE = Array.prototype.slice;
|
70 | var Common = {
|
71 | BREAK: {},
|
72 | extend: function extend(target) {
|
73 | this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
74 | var keys = this.isObject(obj) ? Object.keys(obj) : [];
|
75 | keys.forEach(function (key) {
|
76 | if (!this.isUndefined(obj[key])) {
|
77 | target[key] = obj[key];
|
78 | }
|
79 | }.bind(this));
|
80 | }, this);
|
81 | return target;
|
82 | },
|
83 | defaults: function defaults(target) {
|
84 | this.each(ARR_SLICE.call(arguments, 1), function (obj) {
|
85 | var keys = this.isObject(obj) ? Object.keys(obj) : [];
|
86 | keys.forEach(function (key) {
|
87 | if (this.isUndefined(target[key])) {
|
88 | target[key] = obj[key];
|
89 | }
|
90 | }.bind(this));
|
91 | }, this);
|
92 | return target;
|
93 | },
|
94 | compose: function compose() {
|
95 | var toCall = ARR_SLICE.call(arguments);
|
96 | return function () {
|
97 | var args = ARR_SLICE.call(arguments);
|
98 | for (var i = toCall.length - 1; i >= 0; i--) {
|
99 | args = [toCall[i].apply(this, args)];
|
100 | }
|
101 | return args[0];
|
102 | };
|
103 | },
|
104 | each: function each(obj, itr, scope) {
|
105 | if (!obj) {
|
106 | return;
|
107 | }
|
108 | if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
|
109 | obj.forEach(itr, scope);
|
110 | } else if (obj.length === obj.length + 0) {
|
111 | var key = void 0;
|
112 | var l = void 0;
|
113 | for (key = 0, l = obj.length; key < l; key++) {
|
114 | if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) {
|
115 | return;
|
116 | }
|
117 | }
|
118 | } else {
|
119 | for (var _key in obj) {
|
120 | if (itr.call(scope, obj[_key], _key) === this.BREAK) {
|
121 | return;
|
122 | }
|
123 | }
|
124 | }
|
125 | },
|
126 | defer: function defer(fnc) {
|
127 | setTimeout(fnc, 0);
|
128 | },
|
129 | debounce: function debounce(func, threshold, callImmediately) {
|
130 | var timeout = void 0;
|
131 | return function () {
|
132 | var obj = this;
|
133 | var args = arguments;
|
134 | function delayed() {
|
135 | timeout = null;
|
136 | if (!callImmediately) func.apply(obj, args);
|
137 | }
|
138 | var callNow = callImmediately || !timeout;
|
139 | clearTimeout(timeout);
|
140 | timeout = setTimeout(delayed, threshold);
|
141 | if (callNow) {
|
142 | func.apply(obj, args);
|
143 | }
|
144 | };
|
145 | },
|
146 | toArray: function toArray(obj) {
|
147 | if (obj.toArray) return obj.toArray();
|
148 | return ARR_SLICE.call(obj);
|
149 | },
|
150 | isUndefined: function isUndefined(obj) {
|
151 | return obj === undefined;
|
152 | },
|
153 | isNull: function isNull(obj) {
|
154 | return obj === null;
|
155 | },
|
156 | isNaN: function (_isNaN) {
|
157 | function isNaN(_x) {
|
158 | return _isNaN.apply(this, arguments);
|
159 | }
|
160 | isNaN.toString = function () {
|
161 | return _isNaN.toString();
|
162 | };
|
163 | return isNaN;
|
164 | }(function (obj) {
|
165 | return isNaN(obj);
|
166 | }),
|
167 | isArray: Array.isArray || function (obj) {
|
168 | return obj.constructor === Array;
|
169 | },
|
170 | isObject: function isObject(obj) {
|
171 | return obj === Object(obj);
|
172 | },
|
173 | isNumber: function isNumber(obj) {
|
174 | return obj === obj + 0;
|
175 | },
|
176 | isString: function isString(obj) {
|
177 | return obj === obj + '';
|
178 | },
|
179 | isBoolean: function isBoolean(obj) {
|
180 | return obj === false || obj === true;
|
181 | },
|
182 | isFunction: function isFunction(obj) {
|
183 | return Object.prototype.toString.call(obj) === '[object Function]';
|
184 | }
|
185 | };
|
186 |
|
187 | var INTERPRETATIONS = [
|
188 | {
|
189 | litmus: Common.isString,
|
190 | conversions: {
|
191 | THREE_CHAR_HEX: {
|
192 | read: function read(original) {
|
193 | var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
|
194 | if (test === null) {
|
195 | return false;
|
196 | }
|
197 | return {
|
198 | space: 'HEX',
|
199 | hex: parseInt('0x' + test[1].toString() + test[1].toString() + test[2].toString() + test[2].toString() + test[3].toString() + test[3].toString(), 0)
|
200 | };
|
201 | },
|
202 | write: colorToString
|
203 | },
|
204 | SIX_CHAR_HEX: {
|
205 | read: function read(original) {
|
206 | var test = original.match(/^#([A-F0-9]{6})$/i);
|
207 | if (test === null) {
|
208 | return false;
|
209 | }
|
210 | return {
|
211 | space: 'HEX',
|
212 | hex: parseInt('0x' + test[1].toString(), 0)
|
213 | };
|
214 | },
|
215 | write: colorToString
|
216 | },
|
217 | CSS_RGB: {
|
218 | read: function read(original) {
|
219 | var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
220 | if (test === null) {
|
221 | return false;
|
222 | }
|
223 | return {
|
224 | space: 'RGB',
|
225 | r: parseFloat(test[1]),
|
226 | g: parseFloat(test[2]),
|
227 | b: parseFloat(test[3])
|
228 | };
|
229 | },
|
230 | write: colorToString
|
231 | },
|
232 | CSS_RGBA: {
|
233 | read: function read(original) {
|
234 | var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
|
235 | if (test === null) {
|
236 | return false;
|
237 | }
|
238 | return {
|
239 | space: 'RGB',
|
240 | r: parseFloat(test[1]),
|
241 | g: parseFloat(test[2]),
|
242 | b: parseFloat(test[3]),
|
243 | a: parseFloat(test[4])
|
244 | };
|
245 | },
|
246 | write: colorToString
|
247 | }
|
248 | }
|
249 | },
|
250 | {
|
251 | litmus: Common.isNumber,
|
252 | conversions: {
|
253 | HEX: {
|
254 | read: function read(original) {
|
255 | return {
|
256 | space: 'HEX',
|
257 | hex: original,
|
258 | conversionName: 'HEX'
|
259 | };
|
260 | },
|
261 | write: function write(color) {
|
262 | return color.hex;
|
263 | }
|
264 | }
|
265 | }
|
266 | },
|
267 | {
|
268 | litmus: Common.isArray,
|
269 | conversions: {
|
270 | RGB_ARRAY: {
|
271 | read: function read(original) {
|
272 | if (original.length !== 3) {
|
273 | return false;
|
274 | }
|
275 | return {
|
276 | space: 'RGB',
|
277 | r: original[0],
|
278 | g: original[1],
|
279 | b: original[2]
|
280 | };
|
281 | },
|
282 | write: function write(color) {
|
283 | return [color.r, color.g, color.b];
|
284 | }
|
285 | },
|
286 | RGBA_ARRAY: {
|
287 | read: function read(original) {
|
288 | if (original.length !== 4) return false;
|
289 | return {
|
290 | space: 'RGB',
|
291 | r: original[0],
|
292 | g: original[1],
|
293 | b: original[2],
|
294 | a: original[3]
|
295 | };
|
296 | },
|
297 | write: function write(color) {
|
298 | return [color.r, color.g, color.b, color.a];
|
299 | }
|
300 | }
|
301 | }
|
302 | },
|
303 | {
|
304 | litmus: Common.isObject,
|
305 | conversions: {
|
306 | RGBA_OBJ: {
|
307 | read: function read(original) {
|
308 | if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b) && Common.isNumber(original.a)) {
|
309 | return {
|
310 | space: 'RGB',
|
311 | r: original.r,
|
312 | g: original.g,
|
313 | b: original.b,
|
314 | a: original.a
|
315 | };
|
316 | }
|
317 | return false;
|
318 | },
|
319 | write: function write(color) {
|
320 | return {
|
321 | r: color.r,
|
322 | g: color.g,
|
323 | b: color.b,
|
324 | a: color.a
|
325 | };
|
326 | }
|
327 | },
|
328 | RGB_OBJ: {
|
329 | read: function read(original) {
|
330 | if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b)) {
|
331 | return {
|
332 | space: 'RGB',
|
333 | r: original.r,
|
334 | g: original.g,
|
335 | b: original.b
|
336 | };
|
337 | }
|
338 | return false;
|
339 | },
|
340 | write: function write(color) {
|
341 | return {
|
342 | r: color.r,
|
343 | g: color.g,
|
344 | b: color.b
|
345 | };
|
346 | }
|
347 | },
|
348 | HSVA_OBJ: {
|
349 | read: function read(original) {
|
350 | if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v) && Common.isNumber(original.a)) {
|
351 | return {
|
352 | space: 'HSV',
|
353 | h: original.h,
|
354 | s: original.s,
|
355 | v: original.v,
|
356 | a: original.a
|
357 | };
|
358 | }
|
359 | return false;
|
360 | },
|
361 | write: function write(color) {
|
362 | return {
|
363 | h: color.h,
|
364 | s: color.s,
|
365 | v: color.v,
|
366 | a: color.a
|
367 | };
|
368 | }
|
369 | },
|
370 | HSV_OBJ: {
|
371 | read: function read(original) {
|
372 | if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v)) {
|
373 | return {
|
374 | space: 'HSV',
|
375 | h: original.h,
|
376 | s: original.s,
|
377 | v: original.v
|
378 | };
|
379 | }
|
380 | return false;
|
381 | },
|
382 | write: function write(color) {
|
383 | return {
|
384 | h: color.h,
|
385 | s: color.s,
|
386 | v: color.v
|
387 | };
|
388 | }
|
389 | }
|
390 | }
|
391 | }];
|
392 | var result = void 0;
|
393 | var toReturn = void 0;
|
394 | var interpret = function interpret() {
|
395 | toReturn = false;
|
396 | var original = arguments.length > 1 ? Common.toArray(arguments) : arguments[0];
|
397 | Common.each(INTERPRETATIONS, function (family) {
|
398 | if (family.litmus(original)) {
|
399 | Common.each(family.conversions, function (conversion, conversionName) {
|
400 | result = conversion.read(original);
|
401 | if (toReturn === false && result !== false) {
|
402 | toReturn = result;
|
403 | result.conversionName = conversionName;
|
404 | result.conversion = conversion;
|
405 | return Common.BREAK;
|
406 | }
|
407 | });
|
408 | return Common.BREAK;
|
409 | }
|
410 | });
|
411 | return toReturn;
|
412 | };
|
413 |
|
414 | var tmpComponent = void 0;
|
415 | var ColorMath = {
|
416 | hsv_to_rgb: function hsv_to_rgb(h, s, v) {
|
417 | var hi = Math.floor(h / 60) % 6;
|
418 | var f = h / 60 - Math.floor(h / 60);
|
419 | var p = v * (1.0 - s);
|
420 | var q = v * (1.0 - f * s);
|
421 | var t = v * (1.0 - (1.0 - f) * s);
|
422 | var c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][hi];
|
423 | return {
|
424 | r: c[0] * 255,
|
425 | g: c[1] * 255,
|
426 | b: c[2] * 255
|
427 | };
|
428 | },
|
429 | rgb_to_hsv: function rgb_to_hsv(r, g, b) {
|
430 | var min = Math.min(r, g, b);
|
431 | var max = Math.max(r, g, b);
|
432 | var delta = max - min;
|
433 | var h = void 0;
|
434 | var s = void 0;
|
435 | if (max !== 0) {
|
436 | s = delta / max;
|
437 | } else {
|
438 | return {
|
439 | h: NaN,
|
440 | s: 0,
|
441 | v: 0
|
442 | };
|
443 | }
|
444 | if (r === max) {
|
445 | h = (g - b) / delta;
|
446 | } else if (g === max) {
|
447 | h = 2 + (b - r) / delta;
|
448 | } else {
|
449 | h = 4 + (r - g) / delta;
|
450 | }
|
451 | h /= 6;
|
452 | if (h < 0) {
|
453 | h += 1;
|
454 | }
|
455 | return {
|
456 | h: h * 360,
|
457 | s: s,
|
458 | v: max / 255
|
459 | };
|
460 | },
|
461 | rgb_to_hex: function rgb_to_hex(r, g, b) {
|
462 | var hex = this.hex_with_component(0, 2, r);
|
463 | hex = this.hex_with_component(hex, 1, g);
|
464 | hex = this.hex_with_component(hex, 0, b);
|
465 | return hex;
|
466 | },
|
467 | component_from_hex: function component_from_hex(hex, componentIndex) {
|
468 | return hex >> componentIndex * 8 & 0xFF;
|
469 | },
|
470 | hex_with_component: function hex_with_component(hex, componentIndex, value) {
|
471 | return value << (tmpComponent = componentIndex * 8) | hex & ~(0xFF << tmpComponent);
|
472 | }
|
473 | };
|
474 |
|
475 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
476 | return typeof obj;
|
477 | } : function (obj) {
|
478 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
479 | };
|
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 |
|
486 |
|
487 |
|
488 |
|
489 |
|
490 |
|
491 | var classCallCheck = function (instance, Constructor) {
|
492 | if (!(instance instanceof Constructor)) {
|
493 | throw new TypeError("Cannot call a class as a function");
|
494 | }
|
495 | };
|
496 |
|
497 | var createClass = function () {
|
498 | function defineProperties(target, props) {
|
499 | for (var i = 0; i < props.length; i++) {
|
500 | var descriptor = props[i];
|
501 | descriptor.enumerable = descriptor.enumerable || false;
|
502 | descriptor.configurable = true;
|
503 | if ("value" in descriptor) descriptor.writable = true;
|
504 | Object.defineProperty(target, descriptor.key, descriptor);
|
505 | }
|
506 | }
|
507 |
|
508 | return function (Constructor, protoProps, staticProps) {
|
509 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
510 | if (staticProps) defineProperties(Constructor, staticProps);
|
511 | return Constructor;
|
512 | };
|
513 | }();
|
514 |
|
515 |
|
516 |
|
517 |
|
518 |
|
519 |
|
520 |
|
521 | var get = function get(object, property, receiver) {
|
522 | if (object === null) object = Function.prototype;
|
523 | var desc = Object.getOwnPropertyDescriptor(object, property);
|
524 |
|
525 | if (desc === undefined) {
|
526 | var parent = Object.getPrototypeOf(object);
|
527 |
|
528 | if (parent === null) {
|
529 | return undefined;
|
530 | } else {
|
531 | return get(parent, property, receiver);
|
532 | }
|
533 | } else if ("value" in desc) {
|
534 | return desc.value;
|
535 | } else {
|
536 | var getter = desc.get;
|
537 |
|
538 | if (getter === undefined) {
|
539 | return undefined;
|
540 | }
|
541 |
|
542 | return getter.call(receiver);
|
543 | }
|
544 | };
|
545 |
|
546 | var inherits = function (subClass, superClass) {
|
547 | if (typeof superClass !== "function" && superClass !== null) {
|
548 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
549 | }
|
550 |
|
551 | subClass.prototype = Object.create(superClass && superClass.prototype, {
|
552 | constructor: {
|
553 | value: subClass,
|
554 | enumerable: false,
|
555 | writable: true,
|
556 | configurable: true
|
557 | }
|
558 | });
|
559 | if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
560 | };
|
561 |
|
562 |
|
563 |
|
564 |
|
565 |
|
566 |
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 | var possibleConstructorReturn = function (self, call) {
|
573 | if (!self) {
|
574 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
575 | }
|
576 |
|
577 | return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
578 | };
|
579 |
|
580 | var Color = function () {
|
581 | function Color() {
|
582 | classCallCheck(this, Color);
|
583 | this.__state = interpret.apply(this, arguments);
|
584 | if (this.__state === false) {
|
585 | throw new Error('Failed to interpret color arguments');
|
586 | }
|
587 | this.__state.a = this.__state.a || 1;
|
588 | }
|
589 | createClass(Color, [{
|
590 | key: 'toString',
|
591 | value: function toString() {
|
592 | return colorToString(this);
|
593 | }
|
594 | }, {
|
595 | key: 'toHexString',
|
596 | value: function toHexString() {
|
597 | return colorToString(this, true);
|
598 | }
|
599 | }, {
|
600 | key: 'toOriginal',
|
601 | value: function toOriginal() {
|
602 | return this.__state.conversion.write(this);
|
603 | }
|
604 | }]);
|
605 | return Color;
|
606 | }();
|
607 | function defineRGBComponent(target, component, componentHexIndex) {
|
608 | Object.defineProperty(target, component, {
|
609 | get: function get$$1() {
|
610 | if (this.__state.space === 'RGB') {
|
611 | return this.__state[component];
|
612 | }
|
613 | Color.recalculateRGB(this, component, componentHexIndex);
|
614 | return this.__state[component];
|
615 | },
|
616 | set: function set$$1(v) {
|
617 | if (this.__state.space !== 'RGB') {
|
618 | Color.recalculateRGB(this, component, componentHexIndex);
|
619 | this.__state.space = 'RGB';
|
620 | }
|
621 | this.__state[component] = v;
|
622 | }
|
623 | });
|
624 | }
|
625 | function defineHSVComponent(target, component) {
|
626 | Object.defineProperty(target, component, {
|
627 | get: function get$$1() {
|
628 | if (this.__state.space === 'HSV') {
|
629 | return this.__state[component];
|
630 | }
|
631 | Color.recalculateHSV(this);
|
632 | return this.__state[component];
|
633 | },
|
634 | set: function set$$1(v) {
|
635 | if (this.__state.space !== 'HSV') {
|
636 | Color.recalculateHSV(this);
|
637 | this.__state.space = 'HSV';
|
638 | }
|
639 | this.__state[component] = v;
|
640 | }
|
641 | });
|
642 | }
|
643 | Color.recalculateRGB = function (color, component, componentHexIndex) {
|
644 | if (color.__state.space === 'HEX') {
|
645 | color.__state[component] = ColorMath.component_from_hex(color.__state.hex, componentHexIndex);
|
646 | } else if (color.__state.space === 'HSV') {
|
647 | Common.extend(color.__state, ColorMath.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
|
648 | } else {
|
649 | throw new Error('Corrupted color state');
|
650 | }
|
651 | };
|
652 | Color.recalculateHSV = function (color) {
|
653 | var result = ColorMath.rgb_to_hsv(color.r, color.g, color.b);
|
654 | Common.extend(color.__state, {
|
655 | s: result.s,
|
656 | v: result.v
|
657 | });
|
658 | if (!Common.isNaN(result.h)) {
|
659 | color.__state.h = result.h;
|
660 | } else if (Common.isUndefined(color.__state.h)) {
|
661 | color.__state.h = 0;
|
662 | }
|
663 | };
|
664 | Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
|
665 | defineRGBComponent(Color.prototype, 'r', 2);
|
666 | defineRGBComponent(Color.prototype, 'g', 1);
|
667 | defineRGBComponent(Color.prototype, 'b', 0);
|
668 | defineHSVComponent(Color.prototype, 'h');
|
669 | defineHSVComponent(Color.prototype, 's');
|
670 | defineHSVComponent(Color.prototype, 'v');
|
671 | Object.defineProperty(Color.prototype, 'a', {
|
672 | get: function get$$1() {
|
673 | return this.__state.a;
|
674 | },
|
675 | set: function set$$1(v) {
|
676 | this.__state.a = v;
|
677 | }
|
678 | });
|
679 | Object.defineProperty(Color.prototype, 'hex', {
|
680 | get: function get$$1() {
|
681 | if (!this.__state.space !== 'HEX') {
|
682 | this.__state.hex = ColorMath.rgb_to_hex(this.r, this.g, this.b);
|
683 | }
|
684 | return this.__state.hex;
|
685 | },
|
686 | set: function set$$1(v) {
|
687 | this.__state.space = 'HEX';
|
688 | this.__state.hex = v;
|
689 | }
|
690 | });
|
691 |
|
692 | var Controller = function () {
|
693 | function Controller(object, property) {
|
694 | classCallCheck(this, Controller);
|
695 | this.initialValue = object[property];
|
696 | this.domElement = document.createElement('div');
|
697 | this.object = object;
|
698 | this.property = property;
|
699 | this.__onChange = undefined;
|
700 | this.__onFinishChange = undefined;
|
701 | }
|
702 | createClass(Controller, [{
|
703 | key: 'onChange',
|
704 | value: function onChange(fnc) {
|
705 | this.__onChange = fnc;
|
706 | return this;
|
707 | }
|
708 | }, {
|
709 | key: 'onFinishChange',
|
710 | value: function onFinishChange(fnc) {
|
711 | this.__onFinishChange = fnc;
|
712 | return this;
|
713 | }
|
714 | }, {
|
715 | key: 'setValue',
|
716 | value: function setValue(newValue) {
|
717 | this.object[this.property] = newValue;
|
718 | if (this.__onChange) {
|
719 | this.__onChange.call(this, newValue);
|
720 | }
|
721 | this.updateDisplay();
|
722 | return this;
|
723 | }
|
724 | }, {
|
725 | key: 'getValue',
|
726 | value: function getValue() {
|
727 | return this.object[this.property];
|
728 | }
|
729 | }, {
|
730 | key: 'updateDisplay',
|
731 | value: function updateDisplay() {
|
732 | return this;
|
733 | }
|
734 | }, {
|
735 | key: 'isModified',
|
736 | value: function isModified() {
|
737 | return this.initialValue !== this.getValue();
|
738 | }
|
739 | }]);
|
740 | return Controller;
|
741 | }();
|
742 |
|
743 | var EVENT_MAP = {
|
744 | HTMLEvents: ['change'],
|
745 | MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
|
746 | KeyboardEvents: ['keydown']
|
747 | };
|
748 | var EVENT_MAP_INV = {};
|
749 | Common.each(EVENT_MAP, function (v, k) {
|
750 | Common.each(v, function (e) {
|
751 | EVENT_MAP_INV[e] = k;
|
752 | });
|
753 | });
|
754 | var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
|
755 | function cssValueToPixels(val) {
|
756 | if (val === '0' || Common.isUndefined(val)) {
|
757 | return 0;
|
758 | }
|
759 | var match = val.match(CSS_VALUE_PIXELS);
|
760 | if (!Common.isNull(match)) {
|
761 | return parseFloat(match[1]);
|
762 | }
|
763 | return 0;
|
764 | }
|
765 | var dom = {
|
766 | makeSelectable: function makeSelectable(elem, selectable) {
|
767 | if (elem === undefined || elem.style === undefined) return;
|
768 | elem.onselectstart = selectable ? function () {
|
769 | return false;
|
770 | } : function () {};
|
771 | elem.style.MozUserSelect = selectable ? 'auto' : 'none';
|
772 | elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
|
773 | elem.unselectable = selectable ? 'on' : 'off';
|
774 | },
|
775 | makeFullscreen: function makeFullscreen(elem, hor, vert) {
|
776 | var vertical = vert;
|
777 | var horizontal = hor;
|
778 | if (Common.isUndefined(horizontal)) {
|
779 | horizontal = true;
|
780 | }
|
781 | if (Common.isUndefined(vertical)) {
|
782 | vertical = true;
|
783 | }
|
784 | elem.style.position = 'absolute';
|
785 | if (horizontal) {
|
786 | elem.style.left = 0;
|
787 | elem.style.right = 0;
|
788 | }
|
789 | if (vertical) {
|
790 | elem.style.top = 0;
|
791 | elem.style.bottom = 0;
|
792 | }
|
793 | },
|
794 | fakeEvent: function fakeEvent(elem, eventType, pars, aux) {
|
795 | var params = pars || {};
|
796 | var className = EVENT_MAP_INV[eventType];
|
797 | if (!className) {
|
798 | throw new Error('Event type ' + eventType + ' not supported.');
|
799 | }
|
800 | var evt = document.createEvent(className);
|
801 | switch (className) {
|
802 | case 'MouseEvents':
|
803 | {
|
804 | var clientX = params.x || params.clientX || 0;
|
805 | var clientY = params.y || params.clientY || 0;
|
806 | evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0,
|
807 | 0,
|
808 | clientX,
|
809 | clientY,
|
810 | false, false, false, false, 0, null);
|
811 | break;
|
812 | }
|
813 | case 'KeyboardEvents':
|
814 | {
|
815 | var init = evt.initKeyboardEvent || evt.initKeyEvent;
|
816 | Common.defaults(params, {
|
817 | cancelable: true,
|
818 | ctrlKey: false,
|
819 | altKey: false,
|
820 | shiftKey: false,
|
821 | metaKey: false,
|
822 | keyCode: undefined,
|
823 | charCode: undefined
|
824 | });
|
825 | init(eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode);
|
826 | break;
|
827 | }
|
828 | default:
|
829 | {
|
830 | evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);
|
831 | break;
|
832 | }
|
833 | }
|
834 | Common.defaults(evt, aux);
|
835 | elem.dispatchEvent(evt);
|
836 | },
|
837 | bind: function bind(elem, event, func, newBool) {
|
838 | var bool = newBool || false;
|
839 | if (elem.addEventListener) {
|
840 | elem.addEventListener(event, func, bool);
|
841 | } else if (elem.attachEvent) {
|
842 | elem.attachEvent('on' + event, func);
|
843 | }
|
844 | return dom;
|
845 | },
|
846 | unbind: function unbind(elem, event, func, newBool) {
|
847 | var bool = newBool || false;
|
848 | if (elem.removeEventListener) {
|
849 | elem.removeEventListener(event, func, bool);
|
850 | } else if (elem.detachEvent) {
|
851 | elem.detachEvent('on' + event, func);
|
852 | }
|
853 | return dom;
|
854 | },
|
855 | addClass: function addClass(elem, className) {
|
856 | if (elem.className === undefined) {
|
857 | elem.className = className;
|
858 | } else if (elem.className !== className) {
|
859 | var classes = elem.className.split(/ +/);
|
860 | if (classes.indexOf(className) === -1) {
|
861 | classes.push(className);
|
862 | elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
|
863 | }
|
864 | }
|
865 | return dom;
|
866 | },
|
867 | removeClass: function removeClass(elem, className) {
|
868 | if (className) {
|
869 | if (elem.className === className) {
|
870 | elem.removeAttribute('class');
|
871 | } else {
|
872 | var classes = elem.className.split(/ +/);
|
873 | var index = classes.indexOf(className);
|
874 | if (index !== -1) {
|
875 | classes.splice(index, 1);
|
876 | elem.className = classes.join(' ');
|
877 | }
|
878 | }
|
879 | } else {
|
880 | elem.className = undefined;
|
881 | }
|
882 | return dom;
|
883 | },
|
884 | hasClass: function hasClass(elem, className) {
|
885 | return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
|
886 | },
|
887 | getWidth: function getWidth(elem) {
|
888 | var style = getComputedStyle(elem);
|
889 | return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + cssValueToPixels(style.width);
|
890 | },
|
891 | getHeight: function getHeight(elem) {
|
892 | var style = getComputedStyle(elem);
|
893 | return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style.height);
|
894 | },
|
895 | getOffset: function getOffset(el) {
|
896 | var elem = el;
|
897 | var offset = { left: 0, top: 0 };
|
898 | if (elem.offsetParent) {
|
899 | do {
|
900 | offset.left += elem.offsetLeft;
|
901 | offset.top += elem.offsetTop;
|
902 | elem = elem.offsetParent;
|
903 | } while (elem);
|
904 | }
|
905 | return offset;
|
906 | },
|
907 | isActive: function isActive(elem) {
|
908 | return elem === document.activeElement && (elem.type || elem.href);
|
909 | }
|
910 | };
|
911 |
|
912 | var BooleanController = function (_Controller) {
|
913 | inherits(BooleanController, _Controller);
|
914 | function BooleanController(object, property) {
|
915 | classCallCheck(this, BooleanController);
|
916 | var _this2 = possibleConstructorReturn(this, (BooleanController.__proto__ || Object.getPrototypeOf(BooleanController)).call(this, object, property));
|
917 | var _this = _this2;
|
918 | _this2.__prev = _this2.getValue();
|
919 | _this2.__checkbox = document.createElement('input');
|
920 | _this2.__checkbox.setAttribute('type', 'checkbox');
|
921 | function onChange() {
|
922 | _this.setValue(!_this.__prev);
|
923 | }
|
924 | dom.bind(_this2.__checkbox, 'change', onChange, false);
|
925 | _this2.domElement.appendChild(_this2.__checkbox);
|
926 | _this2.updateDisplay();
|
927 | return _this2;
|
928 | }
|
929 | createClass(BooleanController, [{
|
930 | key: 'setValue',
|
931 | value: function setValue(v) {
|
932 | var toReturn = get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'setValue', this).call(this, v);
|
933 | if (this.__onFinishChange) {
|
934 | this.__onFinishChange.call(this, this.getValue());
|
935 | }
|
936 | this.__prev = this.getValue();
|
937 | return toReturn;
|
938 | }
|
939 | }, {
|
940 | key: 'updateDisplay',
|
941 | value: function updateDisplay() {
|
942 | if (this.getValue() === true) {
|
943 | this.__checkbox.setAttribute('checked', 'checked');
|
944 | this.__checkbox.checked = true;
|
945 | this.__prev = true;
|
946 | } else {
|
947 | this.__checkbox.checked = false;
|
948 | this.__prev = false;
|
949 | }
|
950 | return get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'updateDisplay', this).call(this);
|
951 | }
|
952 | }]);
|
953 | return BooleanController;
|
954 | }(Controller);
|
955 |
|
956 | var OptionController = function (_Controller) {
|
957 | inherits(OptionController, _Controller);
|
958 | function OptionController(object, property, opts) {
|
959 | classCallCheck(this, OptionController);
|
960 | var _this2 = possibleConstructorReturn(this, (OptionController.__proto__ || Object.getPrototypeOf(OptionController)).call(this, object, property));
|
961 | var options = opts;
|
962 | var _this = _this2;
|
963 | _this2.__select = document.createElement('select');
|
964 | if (Common.isArray(options)) {
|
965 | var map = {};
|
966 | Common.each(options, function (element) {
|
967 | map[element] = element;
|
968 | });
|
969 | options = map;
|
970 | }
|
971 | Common.each(options, function (value, key) {
|
972 | var opt = document.createElement('option');
|
973 | opt.innerHTML = key;
|
974 | opt.setAttribute('value', value);
|
975 | _this.__select.appendChild(opt);
|
976 | });
|
977 | _this2.updateDisplay();
|
978 | dom.bind(_this2.__select, 'change', function () {
|
979 | var desiredValue = this.options[this.selectedIndex].value;
|
980 | _this.setValue(desiredValue);
|
981 | });
|
982 | _this2.domElement.appendChild(_this2.__select);
|
983 | return _this2;
|
984 | }
|
985 | createClass(OptionController, [{
|
986 | key: 'setValue',
|
987 | value: function setValue(v) {
|
988 | var toReturn = get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'setValue', this).call(this, v);
|
989 | if (this.__onFinishChange) {
|
990 | this.__onFinishChange.call(this, this.getValue());
|
991 | }
|
992 | return toReturn;
|
993 | }
|
994 | }, {
|
995 | key: 'updateDisplay',
|
996 | value: function updateDisplay() {
|
997 | if (dom.isActive(this.__select)) return this;
|
998 | this.__select.value = this.getValue();
|
999 | return get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'updateDisplay', this).call(this);
|
1000 | }
|
1001 | }]);
|
1002 | return OptionController;
|
1003 | }(Controller);
|
1004 |
|
1005 | var StringController = function (_Controller) {
|
1006 | inherits(StringController, _Controller);
|
1007 | function StringController(object, property) {
|
1008 | classCallCheck(this, StringController);
|
1009 | var _this2 = possibleConstructorReturn(this, (StringController.__proto__ || Object.getPrototypeOf(StringController)).call(this, object, property));
|
1010 | var _this = _this2;
|
1011 | function onChange() {
|
1012 | _this.setValue(_this.__input.value);
|
1013 | }
|
1014 | function onBlur() {
|
1015 | if (_this.__onFinishChange) {
|
1016 | _this.__onFinishChange.call(_this, _this.getValue());
|
1017 | }
|
1018 | }
|
1019 | _this2.__input = document.createElement('input');
|
1020 | _this2.__input.setAttribute('type', 'text');
|
1021 | dom.bind(_this2.__input, 'keyup', onChange);
|
1022 | dom.bind(_this2.__input, 'change', onChange);
|
1023 | dom.bind(_this2.__input, 'blur', onBlur);
|
1024 | dom.bind(_this2.__input, 'keydown', function (e) {
|
1025 | if (e.keyCode === 13) {
|
1026 | this.blur();
|
1027 | }
|
1028 | });
|
1029 | _this2.updateDisplay();
|
1030 | _this2.domElement.appendChild(_this2.__input);
|
1031 | return _this2;
|
1032 | }
|
1033 | createClass(StringController, [{
|
1034 | key: 'updateDisplay',
|
1035 | value: function updateDisplay() {
|
1036 | if (!dom.isActive(this.__input)) {
|
1037 | this.__input.value = this.getValue();
|
1038 | }
|
1039 | return get(StringController.prototype.__proto__ || Object.getPrototypeOf(StringController.prototype), 'updateDisplay', this).call(this);
|
1040 | }
|
1041 | }]);
|
1042 | return StringController;
|
1043 | }(Controller);
|
1044 |
|
1045 | function numDecimals(x) {
|
1046 | var _x = x.toString();
|
1047 | if (_x.indexOf('.') > -1) {
|
1048 | return _x.length - _x.indexOf('.') - 1;
|
1049 | }
|
1050 | return 0;
|
1051 | }
|
1052 | var NumberController = function (_Controller) {
|
1053 | inherits(NumberController, _Controller);
|
1054 | function NumberController(object, property, params) {
|
1055 | classCallCheck(this, NumberController);
|
1056 | var _this = possibleConstructorReturn(this, (NumberController.__proto__ || Object.getPrototypeOf(NumberController)).call(this, object, property));
|
1057 | var _params = params || {};
|
1058 | _this.__min = _params.min;
|
1059 | _this.__max = _params.max;
|
1060 | _this.__step = _params.step;
|
1061 | if (Common.isUndefined(_this.__step)) {
|
1062 | if (_this.initialValue === 0) {
|
1063 | _this.__impliedStep = 1;
|
1064 | } else {
|
1065 | _this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(_this.initialValue)) / Math.LN10)) / 10;
|
1066 | }
|
1067 | } else {
|
1068 | _this.__impliedStep = _this.__step;
|
1069 | }
|
1070 | _this.__precision = numDecimals(_this.__impliedStep);
|
1071 | return _this;
|
1072 | }
|
1073 | createClass(NumberController, [{
|
1074 | key: 'setValue',
|
1075 | value: function setValue(v) {
|
1076 | var _v = v;
|
1077 | if (this.__min !== undefined && _v < this.__min) {
|
1078 | _v = this.__min;
|
1079 | } else if (this.__max !== undefined && _v > this.__max) {
|
1080 | _v = this.__max;
|
1081 | }
|
1082 | if (this.__step !== undefined && _v % this.__step !== 0) {
|
1083 | _v = Math.round(_v / this.__step) * this.__step;
|
1084 | }
|
1085 | return get(NumberController.prototype.__proto__ || Object.getPrototypeOf(NumberController.prototype), 'setValue', this).call(this, _v);
|
1086 | }
|
1087 | }, {
|
1088 | key: 'min',
|
1089 | value: function min(minValue) {
|
1090 | this.__min = minValue;
|
1091 | return this;
|
1092 | }
|
1093 | }, {
|
1094 | key: 'max',
|
1095 | value: function max(maxValue) {
|
1096 | this.__max = maxValue;
|
1097 | return this;
|
1098 | }
|
1099 | }, {
|
1100 | key: 'step',
|
1101 | value: function step(stepValue) {
|
1102 | this.__step = stepValue;
|
1103 | this.__impliedStep = stepValue;
|
1104 | this.__precision = numDecimals(stepValue);
|
1105 | return this;
|
1106 | }
|
1107 | }]);
|
1108 | return NumberController;
|
1109 | }(Controller);
|
1110 |
|
1111 | function roundToDecimal(value, decimals) {
|
1112 | var tenTo = Math.pow(10, decimals);
|
1113 | return Math.round(value * tenTo) / tenTo;
|
1114 | }
|
1115 | var NumberControllerBox = function (_NumberController) {
|
1116 | inherits(NumberControllerBox, _NumberController);
|
1117 | function NumberControllerBox(object, property, params) {
|
1118 | classCallCheck(this, NumberControllerBox);
|
1119 | var _this2 = possibleConstructorReturn(this, (NumberControllerBox.__proto__ || Object.getPrototypeOf(NumberControllerBox)).call(this, object, property, params));
|
1120 | _this2.__truncationSuspended = false;
|
1121 | var _this = _this2;
|
1122 | var prevY = void 0;
|
1123 | function onChange() {
|
1124 | var attempted = parseFloat(_this.__input.value);
|
1125 | if (!Common.isNaN(attempted)) {
|
1126 | _this.setValue(attempted);
|
1127 | }
|
1128 | }
|
1129 | function onFinish() {
|
1130 | if (_this.__onFinishChange) {
|
1131 | _this.__onFinishChange.call(_this, _this.getValue());
|
1132 | }
|
1133 | }
|
1134 | function onBlur() {
|
1135 | onFinish();
|
1136 | }
|
1137 | function onMouseDrag(e) {
|
1138 | var diff = prevY - e.clientY;
|
1139 | _this.setValue(_this.getValue() + diff * _this.__impliedStep);
|
1140 | prevY = e.clientY;
|
1141 | }
|
1142 | function onMouseUp() {
|
1143 | dom.unbind(window, 'mousemove', onMouseDrag);
|
1144 | dom.unbind(window, 'mouseup', onMouseUp);
|
1145 | onFinish();
|
1146 | }
|
1147 | function onMouseDown(e) {
|
1148 | dom.bind(window, 'mousemove', onMouseDrag);
|
1149 | dom.bind(window, 'mouseup', onMouseUp);
|
1150 | prevY = e.clientY;
|
1151 | }
|
1152 | _this2.__input = document.createElement('input');
|
1153 | _this2.__input.setAttribute('type', 'text');
|
1154 | dom.bind(_this2.__input, 'change', onChange);
|
1155 | dom.bind(_this2.__input, 'blur', onBlur);
|
1156 | dom.bind(_this2.__input, 'mousedown', onMouseDown);
|
1157 | dom.bind(_this2.__input, 'keydown', function (e) {
|
1158 | if (e.keyCode === 13) {
|
1159 | _this.__truncationSuspended = true;
|
1160 | this.blur();
|
1161 | _this.__truncationSuspended = false;
|
1162 | onFinish();
|
1163 | }
|
1164 | });
|
1165 | _this2.updateDisplay();
|
1166 | _this2.domElement.appendChild(_this2.__input);
|
1167 | return _this2;
|
1168 | }
|
1169 | createClass(NumberControllerBox, [{
|
1170 | key: 'updateDisplay',
|
1171 | value: function updateDisplay() {
|
1172 | this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
|
1173 | return get(NumberControllerBox.prototype.__proto__ || Object.getPrototypeOf(NumberControllerBox.prototype), 'updateDisplay', this).call(this);
|
1174 | }
|
1175 | }]);
|
1176 | return NumberControllerBox;
|
1177 | }(NumberController);
|
1178 |
|
1179 | function map(v, i1, i2, o1, o2) {
|
1180 | return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
1181 | }
|
1182 | var NumberControllerSlider = function (_NumberController) {
|
1183 | inherits(NumberControllerSlider, _NumberController);
|
1184 | function NumberControllerSlider(object, property, min, max, step) {
|
1185 | classCallCheck(this, NumberControllerSlider);
|
1186 | var _this2 = possibleConstructorReturn(this, (NumberControllerSlider.__proto__ || Object.getPrototypeOf(NumberControllerSlider)).call(this, object, property, { min: min, max: max, step: step }));
|
1187 | var _this = _this2;
|
1188 | _this2.__background = document.createElement('div');
|
1189 | _this2.__foreground = document.createElement('div');
|
1190 | dom.bind(_this2.__background, 'mousedown', onMouseDown);
|
1191 | dom.bind(_this2.__background, 'touchstart', onTouchStart);
|
1192 | dom.addClass(_this2.__background, 'slider');
|
1193 | dom.addClass(_this2.__foreground, 'slider-fg');
|
1194 | function onMouseDown(e) {
|
1195 | document.activeElement.blur();
|
1196 | dom.bind(window, 'mousemove', onMouseDrag);
|
1197 | dom.bind(window, 'mouseup', onMouseUp);
|
1198 | onMouseDrag(e);
|
1199 | }
|
1200 | function onMouseDrag(e) {
|
1201 | e.preventDefault();
|
1202 | var bgRect = _this.__background.getBoundingClientRect();
|
1203 | _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
|
1204 | return false;
|
1205 | }
|
1206 | function onMouseUp() {
|
1207 | dom.unbind(window, 'mousemove', onMouseDrag);
|
1208 | dom.unbind(window, 'mouseup', onMouseUp);
|
1209 | if (_this.__onFinishChange) {
|
1210 | _this.__onFinishChange.call(_this, _this.getValue());
|
1211 | }
|
1212 | }
|
1213 | function onTouchStart(e) {
|
1214 | if (e.touches.length !== 1) {
|
1215 | return;
|
1216 | }
|
1217 | dom.bind(window, 'touchmove', onTouchMove);
|
1218 | dom.bind(window, 'touchend', onTouchEnd);
|
1219 | onTouchMove(e);
|
1220 | }
|
1221 | function onTouchMove(e) {
|
1222 | var clientX = e.touches[0].clientX;
|
1223 | var bgRect = _this.__background.getBoundingClientRect();
|
1224 | _this.setValue(map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
|
1225 | }
|
1226 | function onTouchEnd() {
|
1227 | dom.unbind(window, 'touchmove', onTouchMove);
|
1228 | dom.unbind(window, 'touchend', onTouchEnd);
|
1229 | if (_this.__onFinishChange) {
|
1230 | _this.__onFinishChange.call(_this, _this.getValue());
|
1231 | }
|
1232 | }
|
1233 | _this2.updateDisplay();
|
1234 | _this2.__background.appendChild(_this2.__foreground);
|
1235 | _this2.domElement.appendChild(_this2.__background);
|
1236 | return _this2;
|
1237 | }
|
1238 | createClass(NumberControllerSlider, [{
|
1239 | key: 'updateDisplay',
|
1240 | value: function updateDisplay() {
|
1241 | var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
|
1242 | this.__foreground.style.width = pct * 100 + '%';
|
1243 | return get(NumberControllerSlider.prototype.__proto__ || Object.getPrototypeOf(NumberControllerSlider.prototype), 'updateDisplay', this).call(this);
|
1244 | }
|
1245 | }]);
|
1246 | return NumberControllerSlider;
|
1247 | }(NumberController);
|
1248 |
|
1249 | var FunctionController = function (_Controller) {
|
1250 | inherits(FunctionController, _Controller);
|
1251 | function FunctionController(object, property, text) {
|
1252 | classCallCheck(this, FunctionController);
|
1253 | var _this2 = possibleConstructorReturn(this, (FunctionController.__proto__ || Object.getPrototypeOf(FunctionController)).call(this, object, property));
|
1254 | var _this = _this2;
|
1255 | _this2.__button = document.createElement('div');
|
1256 | _this2.__button.innerHTML = text === undefined ? 'Fire' : text;
|
1257 | dom.bind(_this2.__button, 'click', function (e) {
|
1258 | e.preventDefault();
|
1259 | _this.fire();
|
1260 | return false;
|
1261 | });
|
1262 | dom.addClass(_this2.__button, 'button');
|
1263 | _this2.domElement.appendChild(_this2.__button);
|
1264 | return _this2;
|
1265 | }
|
1266 | createClass(FunctionController, [{
|
1267 | key: 'fire',
|
1268 | value: function fire() {
|
1269 | if (this.__onChange) {
|
1270 | this.__onChange.call(this);
|
1271 | }
|
1272 | this.getValue().call(this.object);
|
1273 | if (this.__onFinishChange) {
|
1274 | this.__onFinishChange.call(this, this.getValue());
|
1275 | }
|
1276 | }
|
1277 | }]);
|
1278 | return FunctionController;
|
1279 | }(Controller);
|
1280 |
|
1281 | var ColorController = function (_Controller) {
|
1282 | inherits(ColorController, _Controller);
|
1283 | function ColorController(object, property) {
|
1284 | classCallCheck(this, ColorController);
|
1285 | var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property));
|
1286 | _this2.__color = new Color(_this2.getValue());
|
1287 | _this2.__temp = new Color(0);
|
1288 | var _this = _this2;
|
1289 | _this2.domElement = document.createElement('div');
|
1290 | dom.makeSelectable(_this2.domElement, false);
|
1291 | _this2.__selector = document.createElement('div');
|
1292 | _this2.__selector.className = 'selector';
|
1293 | _this2.__saturation_field = document.createElement('div');
|
1294 | _this2.__saturation_field.className = 'saturation-field';
|
1295 | _this2.__field_knob = document.createElement('div');
|
1296 | _this2.__field_knob.className = 'field-knob';
|
1297 | _this2.__field_knob_border = '2px solid ';
|
1298 | _this2.__hue_knob = document.createElement('div');
|
1299 | _this2.__hue_knob.className = 'hue-knob';
|
1300 | _this2.__hue_field = document.createElement('div');
|
1301 | _this2.__hue_field.className = 'hue-field';
|
1302 | _this2.__input = document.createElement('input');
|
1303 | _this2.__input.type = 'text';
|
1304 | _this2.__input_textShadow = '0 1px 1px ';
|
1305 | dom.bind(_this2.__input, 'keydown', function (e) {
|
1306 | if (e.keyCode === 13) {
|
1307 | onBlur.call(this);
|
1308 | }
|
1309 | });
|
1310 | dom.bind(_this2.__input, 'blur', onBlur);
|
1311 | dom.bind(_this2.__selector, 'mousedown', function () {
|
1312 | dom.addClass(this, 'drag').bind(window, 'mouseup', function () {
|
1313 | dom.removeClass(_this.__selector, 'drag');
|
1314 | });
|
1315 | });
|
1316 | dom.bind(_this2.__selector, 'touchstart', function () {
|
1317 | dom.addClass(this, 'drag').bind(window, 'touchend', function () {
|
1318 | dom.removeClass(_this.__selector, 'drag');
|
1319 | });
|
1320 | });
|
1321 | var valueField = document.createElement('div');
|
1322 | Common.extend(_this2.__selector.style, {
|
1323 | width: '122px',
|
1324 | height: '102px',
|
1325 | padding: '3px',
|
1326 | backgroundColor: '#222',
|
1327 | boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
|
1328 | });
|
1329 | Common.extend(_this2.__field_knob.style, {
|
1330 | position: 'absolute',
|
1331 | width: '12px',
|
1332 | height: '12px',
|
1333 | border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'),
|
1334 | boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
|
1335 | borderRadius: '12px',
|
1336 | zIndex: 1
|
1337 | });
|
1338 | Common.extend(_this2.__hue_knob.style, {
|
1339 | position: 'absolute',
|
1340 | width: '15px',
|
1341 | height: '2px',
|
1342 | borderRight: '4px solid #fff',
|
1343 | zIndex: 1
|
1344 | });
|
1345 | Common.extend(_this2.__saturation_field.style, {
|
1346 | width: '100px',
|
1347 | height: '100px',
|
1348 | border: '1px solid #555',
|
1349 | marginRight: '3px',
|
1350 | display: 'inline-block',
|
1351 | cursor: 'pointer'
|
1352 | });
|
1353 | Common.extend(valueField.style, {
|
1354 | width: '100%',
|
1355 | height: '100%',
|
1356 | background: 'none'
|
1357 | });
|
1358 | linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
|
1359 | Common.extend(_this2.__hue_field.style, {
|
1360 | width: '15px',
|
1361 | height: '100px',
|
1362 | border: '1px solid #555',
|
1363 | cursor: 'ns-resize',
|
1364 | position: 'absolute',
|
1365 | top: '3px',
|
1366 | right: '3px'
|
1367 | });
|
1368 | hueGradient(_this2.__hue_field);
|
1369 | Common.extend(_this2.__input.style, {
|
1370 | outline: 'none',
|
1371 | textAlign: 'center',
|
1372 | color: '#fff',
|
1373 | border: 0,
|
1374 | fontWeight: 'bold',
|
1375 | textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)'
|
1376 | });
|
1377 | dom.bind(_this2.__saturation_field, 'mousedown', fieldDown);
|
1378 | dom.bind(_this2.__saturation_field, 'touchstart', fieldDown);
|
1379 | dom.bind(_this2.__field_knob, 'mousedown', fieldDown);
|
1380 | dom.bind(_this2.__field_knob, 'touchstart', fieldDown);
|
1381 | dom.bind(_this2.__hue_field, 'mousedown', fieldDownH);
|
1382 | dom.bind(_this2.__hue_field, 'touchstart', fieldDownH);
|
1383 | function fieldDown(e) {
|
1384 | setSV(e);
|
1385 | dom.bind(window, 'mousemove', setSV);
|
1386 | dom.bind(window, 'touchmove', setSV);
|
1387 | dom.bind(window, 'mouseup', fieldUpSV);
|
1388 | dom.bind(window, 'touchend', fieldUpSV);
|
1389 | }
|
1390 | function fieldDownH(e) {
|
1391 | setH(e);
|
1392 | dom.bind(window, 'mousemove', setH);
|
1393 | dom.bind(window, 'touchmove', setH);
|
1394 | dom.bind(window, 'mouseup', fieldUpH);
|
1395 | dom.bind(window, 'touchend', fieldUpH);
|
1396 | }
|
1397 | function fieldUpSV() {
|
1398 | dom.unbind(window, 'mousemove', setSV);
|
1399 | dom.unbind(window, 'touchmove', setSV);
|
1400 | dom.unbind(window, 'mouseup', fieldUpSV);
|
1401 | dom.unbind(window, 'touchend', fieldUpSV);
|
1402 | onFinish();
|
1403 | }
|
1404 | function fieldUpH() {
|
1405 | dom.unbind(window, 'mousemove', setH);
|
1406 | dom.unbind(window, 'touchmove', setH);
|
1407 | dom.unbind(window, 'mouseup', fieldUpH);
|
1408 | dom.unbind(window, 'touchend', fieldUpH);
|
1409 | onFinish();
|
1410 | }
|
1411 | function onBlur() {
|
1412 | var i = interpret(this.value);
|
1413 | if (i !== false) {
|
1414 | _this.__color.__state = i;
|
1415 | _this.setValue(_this.__color.toOriginal());
|
1416 | } else {
|
1417 | this.value = _this.__color.toString();
|
1418 | }
|
1419 | }
|
1420 | function onFinish() {
|
1421 | if (_this.__onFinishChange) {
|
1422 | _this.__onFinishChange.call(_this, _this.__color.toOriginal());
|
1423 | }
|
1424 | }
|
1425 | _this2.__saturation_field.appendChild(valueField);
|
1426 | _this2.__selector.appendChild(_this2.__field_knob);
|
1427 | _this2.__selector.appendChild(_this2.__saturation_field);
|
1428 | _this2.__selector.appendChild(_this2.__hue_field);
|
1429 | _this2.__hue_field.appendChild(_this2.__hue_knob);
|
1430 | _this2.domElement.appendChild(_this2.__input);
|
1431 | _this2.domElement.appendChild(_this2.__selector);
|
1432 | _this2.updateDisplay();
|
1433 | function setSV(e) {
|
1434 | if (e.type.indexOf('touch') === -1) {
|
1435 | e.preventDefault();
|
1436 | }
|
1437 | var fieldRect = _this.__saturation_field.getBoundingClientRect();
|
1438 | var _ref = e.touches && e.touches[0] || e,
|
1439 | clientX = _ref.clientX,
|
1440 | clientY = _ref.clientY;
|
1441 | var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
|
1442 | var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
|
1443 | if (v > 1) {
|
1444 | v = 1;
|
1445 | } else if (v < 0) {
|
1446 | v = 0;
|
1447 | }
|
1448 | if (s > 1) {
|
1449 | s = 1;
|
1450 | } else if (s < 0) {
|
1451 | s = 0;
|
1452 | }
|
1453 | _this.__color.v = v;
|
1454 | _this.__color.s = s;
|
1455 | _this.setValue(_this.__color.toOriginal());
|
1456 | return false;
|
1457 | }
|
1458 | function setH(e) {
|
1459 | if (e.type.indexOf('touch') === -1) {
|
1460 | e.preventDefault();
|
1461 | }
|
1462 | var fieldRect = _this.__hue_field.getBoundingClientRect();
|
1463 | var _ref2 = e.touches && e.touches[0] || e,
|
1464 | clientY = _ref2.clientY;
|
1465 | var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
|
1466 | if (h > 1) {
|
1467 | h = 1;
|
1468 | } else if (h < 0) {
|
1469 | h = 0;
|
1470 | }
|
1471 | _this.__color.h = h * 360;
|
1472 | _this.setValue(_this.__color.toOriginal());
|
1473 | return false;
|
1474 | }
|
1475 | return _this2;
|
1476 | }
|
1477 | createClass(ColorController, [{
|
1478 | key: 'updateDisplay',
|
1479 | value: function updateDisplay() {
|
1480 | var i = interpret(this.getValue());
|
1481 | if (i !== false) {
|
1482 | var mismatch = false;
|
1483 | Common.each(Color.COMPONENTS, function (component) {
|
1484 | if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
|
1485 | mismatch = true;
|
1486 | return {};
|
1487 | }
|
1488 | }, this);
|
1489 | if (mismatch) {
|
1490 | Common.extend(this.__color.__state, i);
|
1491 | }
|
1492 | }
|
1493 | Common.extend(this.__temp.__state, this.__color.__state);
|
1494 | this.__temp.a = 1;
|
1495 | var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
|
1496 | var _flip = 255 - flip;
|
1497 | Common.extend(this.__field_knob.style, {
|
1498 | marginLeft: 100 * this.__color.s - 7 + 'px',
|
1499 | marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
|
1500 | backgroundColor: this.__temp.toHexString(),
|
1501 | border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
|
1502 | });
|
1503 | this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
|
1504 | this.__temp.s = 1;
|
1505 | this.__temp.v = 1;
|
1506 | linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
|
1507 | this.__input.value = this.__color.toString();
|
1508 | Common.extend(this.__input.style, {
|
1509 | backgroundColor: this.__color.toHexString(),
|
1510 | color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
|
1511 | textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
|
1512 | });
|
1513 | }
|
1514 | }]);
|
1515 | return ColorController;
|
1516 | }(Controller);
|
1517 | var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
|
1518 | function linearGradient(elem, x, a, b) {
|
1519 | elem.style.background = '';
|
1520 | Common.each(vendors, function (vendor) {
|
1521 | elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
|
1522 | });
|
1523 | }
|
1524 | function hueGradient(elem) {
|
1525 | elem.style.background = '';
|
1526 | elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
|
1527 | elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
1528 | elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
1529 | elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
1530 | elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
|
1531 | }
|
1532 |
|
1533 | var css = {
|
1534 | load: function load(url, indoc) {
|
1535 | var doc = indoc || document;
|
1536 | var link = doc.createElement('link');
|
1537 | link.type = 'text/css';
|
1538 | link.rel = 'stylesheet';
|
1539 | link.href = url;
|
1540 | doc.getElementsByTagName('head')[0].appendChild(link);
|
1541 | },
|
1542 | inject: function inject(cssContent, indoc) {
|
1543 | var doc = indoc || document;
|
1544 | var injected = document.createElement('style');
|
1545 | injected.type = 'text/css';
|
1546 | injected.innerHTML = cssContent;
|
1547 | var head = doc.getElementsByTagName('head')[0];
|
1548 | try {
|
1549 | head.appendChild(injected);
|
1550 | } catch (e) {
|
1551 | }
|
1552 | }
|
1553 | };
|
1554 |
|
1555 | 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>";
|
1556 |
|
1557 | var ControllerFactory = function ControllerFactory(object, property) {
|
1558 | var initialValue = object[property];
|
1559 | if (Common.isArray(arguments[2]) || Common.isObject(arguments[2])) {
|
1560 | return new OptionController(object, property, arguments[2]);
|
1561 | }
|
1562 | if (Common.isNumber(initialValue)) {
|
1563 | if (Common.isNumber(arguments[2]) && Common.isNumber(arguments[3])) {
|
1564 | if (Common.isNumber(arguments[4])) {
|
1565 | return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
|
1566 | }
|
1567 | return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
|
1568 | }
|
1569 | if (Common.isNumber(arguments[4])) {
|
1570 | return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3], step: arguments[4] });
|
1571 | }
|
1572 | return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });
|
1573 | }
|
1574 | if (Common.isString(initialValue)) {
|
1575 | return new StringController(object, property);
|
1576 | }
|
1577 | if (Common.isFunction(initialValue)) {
|
1578 | return new FunctionController(object, property, '');
|
1579 | }
|
1580 | if (Common.isBoolean(initialValue)) {
|
1581 | return new BooleanController(object, property);
|
1582 | }
|
1583 | return null;
|
1584 | };
|
1585 |
|
1586 | function requestAnimationFrame(callback) {
|
1587 | setTimeout(callback, 1000 / 60);
|
1588 | }
|
1589 | var requestAnimationFrame$1 = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || requestAnimationFrame;
|
1590 |
|
1591 | var CenteredDiv = function () {
|
1592 | function CenteredDiv() {
|
1593 | classCallCheck(this, CenteredDiv);
|
1594 | this.backgroundElement = document.createElement('div');
|
1595 | Common.extend(this.backgroundElement.style, {
|
1596 | backgroundColor: 'rgba(0,0,0,0.8)',
|
1597 | top: 0,
|
1598 | left: 0,
|
1599 | display: 'none',
|
1600 | zIndex: '1000',
|
1601 | opacity: 0,
|
1602 | WebkitTransition: 'opacity 0.2s linear',
|
1603 | transition: 'opacity 0.2s linear'
|
1604 | });
|
1605 | dom.makeFullscreen(this.backgroundElement);
|
1606 | this.backgroundElement.style.position = 'fixed';
|
1607 | this.domElement = document.createElement('div');
|
1608 | Common.extend(this.domElement.style, {
|
1609 | position: 'fixed',
|
1610 | display: 'none',
|
1611 | zIndex: '1001',
|
1612 | opacity: 0,
|
1613 | WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
|
1614 | transition: 'transform 0.2s ease-out, opacity 0.2s linear'
|
1615 | });
|
1616 | document.body.appendChild(this.backgroundElement);
|
1617 | document.body.appendChild(this.domElement);
|
1618 | var _this = this;
|
1619 | dom.bind(this.backgroundElement, 'click', function () {
|
1620 | _this.hide();
|
1621 | });
|
1622 | }
|
1623 | createClass(CenteredDiv, [{
|
1624 | key: 'show',
|
1625 | value: function show() {
|
1626 | var _this = this;
|
1627 | this.backgroundElement.style.display = 'block';
|
1628 | this.domElement.style.display = 'block';
|
1629 | this.domElement.style.opacity = 0;
|
1630 | this.domElement.style.webkitTransform = 'scale(1.1)';
|
1631 | this.layout();
|
1632 | Common.defer(function () {
|
1633 | _this.backgroundElement.style.opacity = 1;
|
1634 | _this.domElement.style.opacity = 1;
|
1635 | _this.domElement.style.webkitTransform = 'scale(1)';
|
1636 | });
|
1637 | }
|
1638 | }, {
|
1639 | key: 'hide',
|
1640 | value: function hide() {
|
1641 | var _this = this;
|
1642 | var hide = function hide() {
|
1643 | _this.domElement.style.display = 'none';
|
1644 | _this.backgroundElement.style.display = 'none';
|
1645 | dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
1646 | dom.unbind(_this.domElement, 'transitionend', hide);
|
1647 | dom.unbind(_this.domElement, 'oTransitionEnd', hide);
|
1648 | };
|
1649 | dom.bind(this.domElement, 'webkitTransitionEnd', hide);
|
1650 | dom.bind(this.domElement, 'transitionend', hide);
|
1651 | dom.bind(this.domElement, 'oTransitionEnd', hide);
|
1652 | this.backgroundElement.style.opacity = 0;
|
1653 | this.domElement.style.opacity = 0;
|
1654 | this.domElement.style.webkitTransform = 'scale(1.1)';
|
1655 | }
|
1656 | }, {
|
1657 | key: 'layout',
|
1658 | value: function layout() {
|
1659 | this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
|
1660 | this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
|
1661 | }
|
1662 | }]);
|
1663 | return CenteredDiv;
|
1664 | }();
|
1665 |
|
1666 | 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 rgba(0,0,0,0)}.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");
|
1667 |
|
1668 | css.inject(styleSheet);
|
1669 | var CSS_NAMESPACE = 'dg';
|
1670 | var HIDE_KEY_CODE = 72;
|
1671 | var CLOSE_BUTTON_HEIGHT = 20;
|
1672 | var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
|
1673 | var SUPPORTS_LOCAL_STORAGE = function () {
|
1674 | try {
|
1675 | return !!window.localStorage;
|
1676 | } catch (e) {
|
1677 | return false;
|
1678 | }
|
1679 | }();
|
1680 | var SAVE_DIALOGUE = void 0;
|
1681 | var autoPlaceVirgin = true;
|
1682 | var autoPlaceContainer = void 0;
|
1683 | var hide = false;
|
1684 | var hideableGuis = [];
|
1685 | var GUI = function GUI(pars) {
|
1686 | var _this = this;
|
1687 | var params = pars || {};
|
1688 | this.domElement = document.createElement('div');
|
1689 | this.__ul = document.createElement('ul');
|
1690 | this.domElement.appendChild(this.__ul);
|
1691 | dom.addClass(this.domElement, CSS_NAMESPACE);
|
1692 | this.__folders = {};
|
1693 | this.__controllers = [];
|
1694 | this.__rememberedObjects = [];
|
1695 | this.__rememberedObjectIndecesToControllers = [];
|
1696 | this.__listening = [];
|
1697 | params = Common.defaults(params, {
|
1698 | closeOnTop: false,
|
1699 | autoPlace: true,
|
1700 | width: GUI.DEFAULT_WIDTH
|
1701 | });
|
1702 | params = Common.defaults(params, {
|
1703 | resizable: params.autoPlace,
|
1704 | hideable: params.autoPlace
|
1705 | });
|
1706 | if (!Common.isUndefined(params.load)) {
|
1707 | if (params.preset) {
|
1708 | params.load.preset = params.preset;
|
1709 | }
|
1710 | } else {
|
1711 | params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME };
|
1712 | }
|
1713 | if (Common.isUndefined(params.parent) && params.hideable) {
|
1714 | hideableGuis.push(this);
|
1715 | }
|
1716 | params.resizable = Common.isUndefined(params.parent) && params.resizable;
|
1717 | if (params.autoPlace && Common.isUndefined(params.scrollable)) {
|
1718 | params.scrollable = true;
|
1719 | }
|
1720 | var useLocalStorage = SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true';
|
1721 | var saveToLocalStorage = void 0;
|
1722 | var titleRow = void 0;
|
1723 | Object.defineProperties(this,
|
1724 | {
|
1725 | parent: {
|
1726 | get: function get$$1() {
|
1727 | return params.parent;
|
1728 | }
|
1729 | },
|
1730 | scrollable: {
|
1731 | get: function get$$1() {
|
1732 | return params.scrollable;
|
1733 | }
|
1734 | },
|
1735 | autoPlace: {
|
1736 | get: function get$$1() {
|
1737 | return params.autoPlace;
|
1738 | }
|
1739 | },
|
1740 | closeOnTop: {
|
1741 | get: function get$$1() {
|
1742 | return params.closeOnTop;
|
1743 | }
|
1744 | },
|
1745 | preset: {
|
1746 | get: function get$$1() {
|
1747 | if (_this.parent) {
|
1748 | return _this.getRoot().preset;
|
1749 | }
|
1750 | return params.load.preset;
|
1751 | },
|
1752 | set: function set$$1(v) {
|
1753 | if (_this.parent) {
|
1754 | _this.getRoot().preset = v;
|
1755 | } else {
|
1756 | params.load.preset = v;
|
1757 | }
|
1758 | setPresetSelectIndex(this);
|
1759 | _this.revert();
|
1760 | }
|
1761 | },
|
1762 | width: {
|
1763 | get: function get$$1() {
|
1764 | return params.width;
|
1765 | },
|
1766 | set: function set$$1(v) {
|
1767 | params.width = v;
|
1768 | setWidth(_this, v);
|
1769 | }
|
1770 | },
|
1771 | name: {
|
1772 | get: function get$$1() {
|
1773 | return params.name;
|
1774 | },
|
1775 | set: function set$$1(v) {
|
1776 | params.name = v;
|
1777 | if (titleRow) {
|
1778 | titleRow.innerHTML = params.name;
|
1779 | }
|
1780 | }
|
1781 | },
|
1782 | closed: {
|
1783 | get: function get$$1() {
|
1784 | return params.closed;
|
1785 | },
|
1786 | set: function set$$1(v) {
|
1787 | params.closed = v;
|
1788 | if (params.closed) {
|
1789 | dom.addClass(_this.__ul, GUI.CLASS_CLOSED);
|
1790 | } else {
|
1791 | dom.removeClass(_this.__ul, GUI.CLASS_CLOSED);
|
1792 | }
|
1793 | this.onResize();
|
1794 | if (_this.__closeButton) {
|
1795 | _this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;
|
1796 | }
|
1797 | }
|
1798 | },
|
1799 | load: {
|
1800 | get: function get$$1() {
|
1801 | return params.load;
|
1802 | }
|
1803 | },
|
1804 | useLocalStorage: {
|
1805 | get: function get$$1() {
|
1806 | return useLocalStorage;
|
1807 | },
|
1808 | set: function set$$1(bool) {
|
1809 | if (SUPPORTS_LOCAL_STORAGE) {
|
1810 | useLocalStorage = bool;
|
1811 | if (bool) {
|
1812 | dom.bind(window, 'unload', saveToLocalStorage);
|
1813 | } else {
|
1814 | dom.unbind(window, 'unload', saveToLocalStorage);
|
1815 | }
|
1816 | localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool);
|
1817 | }
|
1818 | }
|
1819 | }
|
1820 | });
|
1821 | if (Common.isUndefined(params.parent)) {
|
1822 | this.closed = params.closed || false;
|
1823 | dom.addClass(this.domElement, GUI.CLASS_MAIN);
|
1824 | dom.makeSelectable(this.domElement, false);
|
1825 | if (SUPPORTS_LOCAL_STORAGE) {
|
1826 | if (useLocalStorage) {
|
1827 | _this.useLocalStorage = true;
|
1828 | var savedGui = localStorage.getItem(getLocalStorageHash(this, 'gui'));
|
1829 | if (savedGui) {
|
1830 | params.load = JSON.parse(savedGui);
|
1831 | }
|
1832 | }
|
1833 | }
|
1834 | this.__closeButton = document.createElement('div');
|
1835 | this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
|
1836 | dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
|
1837 | if (params.closeOnTop) {
|
1838 | dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_TOP);
|
1839 | this.domElement.insertBefore(this.__closeButton, this.domElement.childNodes[0]);
|
1840 | } else {
|
1841 | dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BOTTOM);
|
1842 | this.domElement.appendChild(this.__closeButton);
|
1843 | }
|
1844 | dom.bind(this.__closeButton, 'click', function () {
|
1845 | _this.closed = !_this.closed;
|
1846 | });
|
1847 | } else {
|
1848 | if (params.closed === undefined) {
|
1849 | params.closed = true;
|
1850 | }
|
1851 | var titleRowName = document.createTextNode(params.name);
|
1852 | dom.addClass(titleRowName, 'controller-name');
|
1853 | titleRow = addRow(_this, titleRowName);
|
1854 | var onClickTitle = function onClickTitle(e) {
|
1855 | e.preventDefault();
|
1856 | _this.closed = !_this.closed;
|
1857 | return false;
|
1858 | };
|
1859 | dom.addClass(this.__ul, GUI.CLASS_CLOSED);
|
1860 | dom.addClass(titleRow, 'title');
|
1861 | dom.bind(titleRow, 'click', onClickTitle);
|
1862 | if (!params.closed) {
|
1863 | this.closed = false;
|
1864 | }
|
1865 | }
|
1866 | if (params.autoPlace) {
|
1867 | if (Common.isUndefined(params.parent)) {
|
1868 | if (autoPlaceVirgin) {
|
1869 | autoPlaceContainer = document.createElement('div');
|
1870 | dom.addClass(autoPlaceContainer, CSS_NAMESPACE);
|
1871 | dom.addClass(autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER);
|
1872 | document.body.appendChild(autoPlaceContainer);
|
1873 | autoPlaceVirgin = false;
|
1874 | }
|
1875 | autoPlaceContainer.appendChild(this.domElement);
|
1876 | dom.addClass(this.domElement, GUI.CLASS_AUTO_PLACE);
|
1877 | }
|
1878 | if (!this.parent) {
|
1879 | setWidth(_this, params.width);
|
1880 | }
|
1881 | }
|
1882 | this.__resizeHandler = function () {
|
1883 | _this.onResizeDebounced();
|
1884 | };
|
1885 | dom.bind(window, 'resize', this.__resizeHandler);
|
1886 | dom.bind(this.__ul, 'webkitTransitionEnd', this.__resizeHandler);
|
1887 | dom.bind(this.__ul, 'transitionend', this.__resizeHandler);
|
1888 | dom.bind(this.__ul, 'oTransitionEnd', this.__resizeHandler);
|
1889 | this.onResize();
|
1890 | if (params.resizable) {
|
1891 | addResizeHandle(this);
|
1892 | }
|
1893 | saveToLocalStorage = function saveToLocalStorage() {
|
1894 | if (SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(_this, 'isLocal')) === 'true') {
|
1895 | localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject()));
|
1896 | }
|
1897 | };
|
1898 | this.saveToLocalStorageIfPossible = saveToLocalStorage;
|
1899 | function resetWidth() {
|
1900 | var root = _this.getRoot();
|
1901 | root.width += 1;
|
1902 | Common.defer(function () {
|
1903 | root.width -= 1;
|
1904 | });
|
1905 | }
|
1906 | if (!params.parent) {
|
1907 | resetWidth();
|
1908 | }
|
1909 | };
|
1910 | GUI.toggleHide = function () {
|
1911 | hide = !hide;
|
1912 | Common.each(hideableGuis, function (gui) {
|
1913 | gui.domElement.style.display = hide ? 'none' : '';
|
1914 | });
|
1915 | };
|
1916 | GUI.CLASS_AUTO_PLACE = 'a';
|
1917 | GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
|
1918 | GUI.CLASS_MAIN = 'main';
|
1919 | GUI.CLASS_CONTROLLER_ROW = 'cr';
|
1920 | GUI.CLASS_TOO_TALL = 'taller-than-window';
|
1921 | GUI.CLASS_CLOSED = 'closed';
|
1922 | GUI.CLASS_CLOSE_BUTTON = 'close-button';
|
1923 | GUI.CLASS_CLOSE_TOP = 'close-top';
|
1924 | GUI.CLASS_CLOSE_BOTTOM = 'close-bottom';
|
1925 | GUI.CLASS_DRAG = 'drag';
|
1926 | GUI.DEFAULT_WIDTH = 245;
|
1927 | GUI.TEXT_CLOSED = 'Close Controls';
|
1928 | GUI.TEXT_OPEN = 'Open Controls';
|
1929 | GUI._keydownHandler = function (e) {
|
1930 | if (document.activeElement.type !== 'text' && (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) {
|
1931 | GUI.toggleHide();
|
1932 | }
|
1933 | };
|
1934 | dom.bind(window, 'keydown', GUI._keydownHandler, false);
|
1935 | Common.extend(GUI.prototype,
|
1936 | {
|
1937 | add: function add(object, property) {
|
1938 | return _add(this, object, property, {
|
1939 | factoryArgs: Array.prototype.slice.call(arguments, 2)
|
1940 | });
|
1941 | },
|
1942 | addColor: function addColor(object, property) {
|
1943 | return _add(this, object, property, {
|
1944 | color: true
|
1945 | });
|
1946 | },
|
1947 | remove: function remove(controller) {
|
1948 | this.__ul.removeChild(controller.__li);
|
1949 | this.__controllers.splice(this.__controllers.indexOf(controller), 1);
|
1950 | var _this = this;
|
1951 | Common.defer(function () {
|
1952 | _this.onResize();
|
1953 | });
|
1954 | },
|
1955 | destroy: function destroy() {
|
1956 | if (this.parent) {
|
1957 | throw new Error('Only the root GUI should be removed with .destroy(). ' + 'For subfolders, use gui.removeFolder(folder) instead.');
|
1958 | }
|
1959 | if (this.autoPlace) {
|
1960 | autoPlaceContainer.removeChild(this.domElement);
|
1961 | }
|
1962 | var _this = this;
|
1963 | Common.each(this.__folders, function (subfolder) {
|
1964 | _this.removeFolder(subfolder);
|
1965 | });
|
1966 | dom.unbind(window, 'keydown', GUI._keydownHandler, false);
|
1967 | removeListeners(this);
|
1968 | },
|
1969 | addFolder: function addFolder(name) {
|
1970 | if (this.__folders[name] !== undefined) {
|
1971 | throw new Error('You already have a folder in this GUI by the' + ' name "' + name + '"');
|
1972 | }
|
1973 | var newGuiParams = { name: name, parent: this };
|
1974 | newGuiParams.autoPlace = this.autoPlace;
|
1975 | if (this.load &&
|
1976 | this.load.folders &&
|
1977 | this.load.folders[name]) {
|
1978 | newGuiParams.closed = this.load.folders[name].closed;
|
1979 | newGuiParams.load = this.load.folders[name];
|
1980 | }
|
1981 | var gui = new GUI(newGuiParams);
|
1982 | this.__folders[name] = gui;
|
1983 | var li = addRow(this, gui.domElement);
|
1984 | dom.addClass(li, 'folder');
|
1985 | return gui;
|
1986 | },
|
1987 | removeFolder: function removeFolder(folder) {
|
1988 | this.__ul.removeChild(folder.domElement.parentElement);
|
1989 | delete this.__folders[folder.name];
|
1990 | if (this.load &&
|
1991 | this.load.folders &&
|
1992 | this.load.folders[folder.name]) {
|
1993 | delete this.load.folders[folder.name];
|
1994 | }
|
1995 | removeListeners(folder);
|
1996 | var _this = this;
|
1997 | Common.each(folder.__folders, function (subfolder) {
|
1998 | folder.removeFolder(subfolder);
|
1999 | });
|
2000 | Common.defer(function () {
|
2001 | _this.onResize();
|
2002 | });
|
2003 | },
|
2004 | open: function open() {
|
2005 | this.closed = false;
|
2006 | },
|
2007 | close: function close() {
|
2008 | this.closed = true;
|
2009 | },
|
2010 | onResize: function onResize() {
|
2011 | var root = this.getRoot();
|
2012 | if (root.scrollable) {
|
2013 | var top = dom.getOffset(root.__ul).top;
|
2014 | var h = 0;
|
2015 | Common.each(root.__ul.childNodes, function (node) {
|
2016 | if (!(root.autoPlace && node === root.__save_row)) {
|
2017 | h += dom.getHeight(node);
|
2018 | }
|
2019 | });
|
2020 | if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) {
|
2021 | dom.addClass(root.domElement, GUI.CLASS_TOO_TALL);
|
2022 | root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px';
|
2023 | } else {
|
2024 | dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL);
|
2025 | root.__ul.style.height = 'auto';
|
2026 | }
|
2027 | }
|
2028 | if (root.__resize_handle) {
|
2029 | Common.defer(function () {
|
2030 | root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
|
2031 | });
|
2032 | }
|
2033 | if (root.__closeButton) {
|
2034 | root.__closeButton.style.width = root.width + 'px';
|
2035 | }
|
2036 | },
|
2037 | onResizeDebounced: Common.debounce(function () {
|
2038 | this.onResize();
|
2039 | }, 50),
|
2040 | remember: function remember() {
|
2041 | if (Common.isUndefined(SAVE_DIALOGUE)) {
|
2042 | SAVE_DIALOGUE = new CenteredDiv();
|
2043 | SAVE_DIALOGUE.domElement.innerHTML = saveDialogContents;
|
2044 | }
|
2045 | if (this.parent) {
|
2046 | throw new Error('You can only call remember on a top level GUI.');
|
2047 | }
|
2048 | var _this = this;
|
2049 | Common.each(Array.prototype.slice.call(arguments), function (object) {
|
2050 | if (_this.__rememberedObjects.length === 0) {
|
2051 | addSaveMenu(_this);
|
2052 | }
|
2053 | if (_this.__rememberedObjects.indexOf(object) === -1) {
|
2054 | _this.__rememberedObjects.push(object);
|
2055 | }
|
2056 | });
|
2057 | if (this.autoPlace) {
|
2058 | setWidth(this, this.width);
|
2059 | }
|
2060 | },
|
2061 | getRoot: function getRoot() {
|
2062 | var gui = this;
|
2063 | while (gui.parent) {
|
2064 | gui = gui.parent;
|
2065 | }
|
2066 | return gui;
|
2067 | },
|
2068 | getSaveObject: function getSaveObject() {
|
2069 | var toReturn = this.load;
|
2070 | toReturn.closed = this.closed;
|
2071 | if (this.__rememberedObjects.length > 0) {
|
2072 | toReturn.preset = this.preset;
|
2073 | if (!toReturn.remembered) {
|
2074 | toReturn.remembered = {};
|
2075 | }
|
2076 | toReturn.remembered[this.preset] = getCurrentPreset(this);
|
2077 | }
|
2078 | toReturn.folders = {};
|
2079 | Common.each(this.__folders, function (element, key) {
|
2080 | toReturn.folders[key] = element.getSaveObject();
|
2081 | });
|
2082 | return toReturn;
|
2083 | },
|
2084 | save: function save() {
|
2085 | if (!this.load.remembered) {
|
2086 | this.load.remembered = {};
|
2087 | }
|
2088 | this.load.remembered[this.preset] = getCurrentPreset(this);
|
2089 | markPresetModified(this, false);
|
2090 | this.saveToLocalStorageIfPossible();
|
2091 | },
|
2092 | saveAs: function saveAs(presetName) {
|
2093 | if (!this.load.remembered) {
|
2094 | this.load.remembered = {};
|
2095 | this.load.remembered[DEFAULT_DEFAULT_PRESET_NAME] = getCurrentPreset(this, true);
|
2096 | }
|
2097 | this.load.remembered[presetName] = getCurrentPreset(this);
|
2098 | this.preset = presetName;
|
2099 | addPresetOption(this, presetName, true);
|
2100 | this.saveToLocalStorageIfPossible();
|
2101 | },
|
2102 | revert: function revert(gui) {
|
2103 | Common.each(this.__controllers, function (controller) {
|
2104 | if (!this.getRoot().load.remembered) {
|
2105 | controller.setValue(controller.initialValue);
|
2106 | } else {
|
2107 | recallSavedValue(gui || this.getRoot(), controller);
|
2108 | }
|
2109 | if (controller.__onFinishChange) {
|
2110 | controller.__onFinishChange.call(controller, controller.getValue());
|
2111 | }
|
2112 | }, this);
|
2113 | Common.each(this.__folders, function (folder) {
|
2114 | folder.revert(folder);
|
2115 | });
|
2116 | if (!gui) {
|
2117 | markPresetModified(this.getRoot(), false);
|
2118 | }
|
2119 | },
|
2120 | listen: function listen(controller) {
|
2121 | var init = this.__listening.length === 0;
|
2122 | this.__listening.push(controller);
|
2123 | if (init) {
|
2124 | updateDisplays(this.__listening);
|
2125 | }
|
2126 | },
|
2127 | updateDisplay: function updateDisplay() {
|
2128 | Common.each(this.__controllers, function (controller) {
|
2129 | controller.updateDisplay();
|
2130 | });
|
2131 | Common.each(this.__folders, function (folder) {
|
2132 | folder.updateDisplay();
|
2133 | });
|
2134 | }
|
2135 | });
|
2136 | function addRow(gui, newDom, liBefore) {
|
2137 | var li = document.createElement('li');
|
2138 | if (newDom) {
|
2139 | li.appendChild(newDom);
|
2140 | }
|
2141 | if (liBefore) {
|
2142 | gui.__ul.insertBefore(li, liBefore);
|
2143 | } else {
|
2144 | gui.__ul.appendChild(li);
|
2145 | }
|
2146 | gui.onResize();
|
2147 | return li;
|
2148 | }
|
2149 | function removeListeners(gui) {
|
2150 | dom.unbind(window, 'resize', gui.__resizeHandler);
|
2151 | if (gui.saveToLocalStorageIfPossible) {
|
2152 | dom.unbind(window, 'unload', gui.saveToLocalStorageIfPossible);
|
2153 | }
|
2154 | }
|
2155 | function markPresetModified(gui, modified) {
|
2156 | var opt = gui.__preset_select[gui.__preset_select.selectedIndex];
|
2157 | if (modified) {
|
2158 | opt.innerHTML = opt.value + '*';
|
2159 | } else {
|
2160 | opt.innerHTML = opt.value;
|
2161 | }
|
2162 | }
|
2163 | function augmentController(gui, li, controller) {
|
2164 | controller.__li = li;
|
2165 | controller.__gui = gui;
|
2166 | Common.extend(controller, {
|
2167 | options: function options(_options) {
|
2168 | if (arguments.length > 1) {
|
2169 | var nextSibling = controller.__li.nextElementSibling;
|
2170 | controller.remove();
|
2171 | return _add(gui, controller.object, controller.property, {
|
2172 | before: nextSibling,
|
2173 | factoryArgs: [Common.toArray(arguments)]
|
2174 | });
|
2175 | }
|
2176 | if (Common.isArray(_options) || Common.isObject(_options)) {
|
2177 | var _nextSibling = controller.__li.nextElementSibling;
|
2178 | controller.remove();
|
2179 | return _add(gui, controller.object, controller.property, {
|
2180 | before: _nextSibling,
|
2181 | factoryArgs: [_options]
|
2182 | });
|
2183 | }
|
2184 | },
|
2185 | name: function name(_name) {
|
2186 | controller.__li.firstElementChild.firstElementChild.innerHTML = _name;
|
2187 | return controller;
|
2188 | },
|
2189 | listen: function listen() {
|
2190 | controller.__gui.listen(controller);
|
2191 | return controller;
|
2192 | },
|
2193 | remove: function remove() {
|
2194 | controller.__gui.remove(controller);
|
2195 | return controller;
|
2196 | }
|
2197 | });
|
2198 | if (controller instanceof NumberControllerSlider) {
|
2199 | var box = new NumberControllerBox(controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step });
|
2200 | Common.each(['updateDisplay', 'onChange', 'onFinishChange', 'step', 'min', 'max'], function (method) {
|
2201 | var pc = controller[method];
|
2202 | var pb = box[method];
|
2203 | controller[method] = box[method] = function () {
|
2204 | var args = Array.prototype.slice.call(arguments);
|
2205 | pb.apply(box, args);
|
2206 | return pc.apply(controller, args);
|
2207 | };
|
2208 | });
|
2209 | dom.addClass(li, 'has-slider');
|
2210 | controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild);
|
2211 | } else if (controller instanceof NumberControllerBox) {
|
2212 | var r = function r(returned) {
|
2213 | if (Common.isNumber(controller.__min) && Common.isNumber(controller.__max)) {
|
2214 | var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;
|
2215 | var wasListening = controller.__gui.__listening.indexOf(controller) > -1;
|
2216 | controller.remove();
|
2217 | var newController = _add(gui, controller.object, controller.property, {
|
2218 | before: controller.__li.nextElementSibling,
|
2219 | factoryArgs: [controller.__min, controller.__max, controller.__step]
|
2220 | });
|
2221 | newController.name(oldName);
|
2222 | if (wasListening) newController.listen();
|
2223 | return newController;
|
2224 | }
|
2225 | return returned;
|
2226 | };
|
2227 | controller.min = Common.compose(r, controller.min);
|
2228 | controller.max = Common.compose(r, controller.max);
|
2229 | } else if (controller instanceof BooleanController) {
|
2230 | dom.bind(li, 'click', function () {
|
2231 | dom.fakeEvent(controller.__checkbox, 'click');
|
2232 | });
|
2233 | dom.bind(controller.__checkbox, 'click', function (e) {
|
2234 | e.stopPropagation();
|
2235 | });
|
2236 | } else if (controller instanceof FunctionController) {
|
2237 | dom.bind(li, 'click', function () {
|
2238 | dom.fakeEvent(controller.__button, 'click');
|
2239 | });
|
2240 | dom.bind(li, 'mouseover', function () {
|
2241 | dom.addClass(controller.__button, 'hover');
|
2242 | });
|
2243 | dom.bind(li, 'mouseout', function () {
|
2244 | dom.removeClass(controller.__button, 'hover');
|
2245 | });
|
2246 | } else if (controller instanceof ColorController) {
|
2247 | dom.addClass(li, 'color');
|
2248 | controller.updateDisplay = Common.compose(function (val) {
|
2249 | li.style.borderLeftColor = controller.__color.toString();
|
2250 | return val;
|
2251 | }, controller.updateDisplay);
|
2252 | controller.updateDisplay();
|
2253 | }
|
2254 | controller.setValue = Common.compose(function (val) {
|
2255 | if (gui.getRoot().__preset_select && controller.isModified()) {
|
2256 | markPresetModified(gui.getRoot(), true);
|
2257 | }
|
2258 | return val;
|
2259 | }, controller.setValue);
|
2260 | }
|
2261 | function recallSavedValue(gui, controller) {
|
2262 | var root = gui.getRoot();
|
2263 | var matchedIndex = root.__rememberedObjects.indexOf(controller.object);
|
2264 | if (matchedIndex !== -1) {
|
2265 | var controllerMap = root.__rememberedObjectIndecesToControllers[matchedIndex];
|
2266 | if (controllerMap === undefined) {
|
2267 | controllerMap = {};
|
2268 | root.__rememberedObjectIndecesToControllers[matchedIndex] = controllerMap;
|
2269 | }
|
2270 | controllerMap[controller.property] = controller;
|
2271 | if (root.load && root.load.remembered) {
|
2272 | var presetMap = root.load.remembered;
|
2273 | var preset = void 0;
|
2274 | if (presetMap[gui.preset]) {
|
2275 | preset = presetMap[gui.preset];
|
2276 | } else if (presetMap[DEFAULT_DEFAULT_PRESET_NAME]) {
|
2277 | preset = presetMap[DEFAULT_DEFAULT_PRESET_NAME];
|
2278 | } else {
|
2279 | return;
|
2280 | }
|
2281 | if (preset[matchedIndex] && preset[matchedIndex][controller.property] !== undefined) {
|
2282 | var value = preset[matchedIndex][controller.property];
|
2283 | controller.initialValue = value;
|
2284 | controller.setValue(value);
|
2285 | }
|
2286 | }
|
2287 | }
|
2288 | }
|
2289 | function _add(gui, object, property, params) {
|
2290 | if (object[property] === undefined) {
|
2291 | throw new Error('Object "' + object + '" has no property "' + property + '"');
|
2292 | }
|
2293 | var controller = void 0;
|
2294 | if (params.color) {
|
2295 | controller = new ColorController(object, property);
|
2296 | } else {
|
2297 | var factoryArgs = [object, property].concat(params.factoryArgs);
|
2298 | controller = ControllerFactory.apply(gui, factoryArgs);
|
2299 | }
|
2300 | if (params.before instanceof Controller) {
|
2301 | params.before = params.before.__li;
|
2302 | }
|
2303 | recallSavedValue(gui, controller);
|
2304 | dom.addClass(controller.domElement, 'c');
|
2305 | var name = document.createElement('span');
|
2306 | dom.addClass(name, 'property-name');
|
2307 | name.innerHTML = controller.property;
|
2308 | var container = document.createElement('div');
|
2309 | container.appendChild(name);
|
2310 | container.appendChild(controller.domElement);
|
2311 | var li = addRow(gui, container, params.before);
|
2312 | dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);
|
2313 | if (controller instanceof ColorController) {
|
2314 | dom.addClass(li, 'color');
|
2315 | } else {
|
2316 | dom.addClass(li, _typeof(controller.getValue()));
|
2317 | }
|
2318 | augmentController(gui, li, controller);
|
2319 | gui.__controllers.push(controller);
|
2320 | return controller;
|
2321 | }
|
2322 | function getLocalStorageHash(gui, key) {
|
2323 | return document.location.href + '.' + key;
|
2324 | }
|
2325 | function addPresetOption(gui, name, setSelected) {
|
2326 | var opt = document.createElement('option');
|
2327 | opt.innerHTML = name;
|
2328 | opt.value = name;
|
2329 | gui.__preset_select.appendChild(opt);
|
2330 | if (setSelected) {
|
2331 | gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;
|
2332 | }
|
2333 | }
|
2334 | function showHideExplain(gui, explain) {
|
2335 | explain.style.display = gui.useLocalStorage ? 'block' : 'none';
|
2336 | }
|
2337 | function addSaveMenu(gui) {
|
2338 | var div = gui.__save_row = document.createElement('li');
|
2339 | dom.addClass(gui.domElement, 'has-save');
|
2340 | gui.__ul.insertBefore(div, gui.__ul.firstChild);
|
2341 | dom.addClass(div, 'save-row');
|
2342 | var gears = document.createElement('span');
|
2343 | gears.innerHTML = ' ';
|
2344 | dom.addClass(gears, 'button gears');
|
2345 | var button = document.createElement('span');
|
2346 | button.innerHTML = 'Save';
|
2347 | dom.addClass(button, 'button');
|
2348 | dom.addClass(button, 'save');
|
2349 | var button2 = document.createElement('span');
|
2350 | button2.innerHTML = 'New';
|
2351 | dom.addClass(button2, 'button');
|
2352 | dom.addClass(button2, 'save-as');
|
2353 | var button3 = document.createElement('span');
|
2354 | button3.innerHTML = 'Revert';
|
2355 | dom.addClass(button3, 'button');
|
2356 | dom.addClass(button3, 'revert');
|
2357 | var select = gui.__preset_select = document.createElement('select');
|
2358 | if (gui.load && gui.load.remembered) {
|
2359 | Common.each(gui.load.remembered, function (value, key) {
|
2360 | addPresetOption(gui, key, key === gui.preset);
|
2361 | });
|
2362 | } else {
|
2363 | addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);
|
2364 | }
|
2365 | dom.bind(select, 'change', function () {
|
2366 | for (var index = 0; index < gui.__preset_select.length; index++) {
|
2367 | gui.__preset_select[index].innerHTML = gui.__preset_select[index].value;
|
2368 | }
|
2369 | gui.preset = this.value;
|
2370 | });
|
2371 | div.appendChild(select);
|
2372 | div.appendChild(gears);
|
2373 | div.appendChild(button);
|
2374 | div.appendChild(button2);
|
2375 | div.appendChild(button3);
|
2376 | if (SUPPORTS_LOCAL_STORAGE) {
|
2377 | var explain = document.getElementById('dg-local-explain');
|
2378 | var localStorageCheckBox = document.getElementById('dg-local-storage');
|
2379 | var saveLocally = document.getElementById('dg-save-locally');
|
2380 | saveLocally.style.display = 'block';
|
2381 | if (localStorage.getItem(getLocalStorageHash(gui, 'isLocal')) === 'true') {
|
2382 | localStorageCheckBox.setAttribute('checked', 'checked');
|
2383 | }
|
2384 | showHideExplain(gui, explain);
|
2385 | dom.bind(localStorageCheckBox, 'change', function () {
|
2386 | gui.useLocalStorage = !gui.useLocalStorage;
|
2387 | showHideExplain(gui, explain);
|
2388 | });
|
2389 | }
|
2390 | var newConstructorTextArea = document.getElementById('dg-new-constructor');
|
2391 | dom.bind(newConstructorTextArea, 'keydown', function (e) {
|
2392 | if (e.metaKey && (e.which === 67 || e.keyCode === 67)) {
|
2393 | SAVE_DIALOGUE.hide();
|
2394 | }
|
2395 | });
|
2396 | dom.bind(gears, 'click', function () {
|
2397 | newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);
|
2398 | SAVE_DIALOGUE.show();
|
2399 | newConstructorTextArea.focus();
|
2400 | newConstructorTextArea.select();
|
2401 | });
|
2402 | dom.bind(button, 'click', function () {
|
2403 | gui.save();
|
2404 | });
|
2405 | dom.bind(button2, 'click', function () {
|
2406 | var presetName = prompt('Enter a new preset name.');
|
2407 | if (presetName) {
|
2408 | gui.saveAs(presetName);
|
2409 | }
|
2410 | });
|
2411 | dom.bind(button3, 'click', function () {
|
2412 | gui.revert();
|
2413 | });
|
2414 | }
|
2415 | function addResizeHandle(gui) {
|
2416 | var pmouseX = void 0;
|
2417 | gui.__resize_handle = document.createElement('div');
|
2418 | Common.extend(gui.__resize_handle.style, {
|
2419 | width: '6px',
|
2420 | marginLeft: '-3px',
|
2421 | height: '200px',
|
2422 | cursor: 'ew-resize',
|
2423 | position: 'absolute'
|
2424 | });
|
2425 | function drag(e) {
|
2426 | e.preventDefault();
|
2427 | gui.width += pmouseX - e.clientX;
|
2428 | gui.onResize();
|
2429 | pmouseX = e.clientX;
|
2430 | return false;
|
2431 | }
|
2432 | function dragStop() {
|
2433 | dom.removeClass(gui.__closeButton, GUI.CLASS_DRAG);
|
2434 | dom.unbind(window, 'mousemove', drag);
|
2435 | dom.unbind(window, 'mouseup', dragStop);
|
2436 | }
|
2437 | function dragStart(e) {
|
2438 | e.preventDefault();
|
2439 | pmouseX = e.clientX;
|
2440 | dom.addClass(gui.__closeButton, GUI.CLASS_DRAG);
|
2441 | dom.bind(window, 'mousemove', drag);
|
2442 | dom.bind(window, 'mouseup', dragStop);
|
2443 | return false;
|
2444 | }
|
2445 | dom.bind(gui.__resize_handle, 'mousedown', dragStart);
|
2446 | dom.bind(gui.__closeButton, 'mousedown', dragStart);
|
2447 | gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild);
|
2448 | }
|
2449 | function setWidth(gui, w) {
|
2450 | gui.domElement.style.width = w + 'px';
|
2451 | if (gui.__save_row && gui.autoPlace) {
|
2452 | gui.__save_row.style.width = w + 'px';
|
2453 | }
|
2454 | if (gui.__closeButton) {
|
2455 | gui.__closeButton.style.width = w + 'px';
|
2456 | }
|
2457 | }
|
2458 | function getCurrentPreset(gui, useInitialValues) {
|
2459 | var toReturn = {};
|
2460 | Common.each(gui.__rememberedObjects, function (val, index) {
|
2461 | var savedValues = {};
|
2462 | var controllerMap = gui.__rememberedObjectIndecesToControllers[index];
|
2463 | Common.each(controllerMap, function (controller, property) {
|
2464 | savedValues[property] = useInitialValues ? controller.initialValue : controller.getValue();
|
2465 | });
|
2466 | toReturn[index] = savedValues;
|
2467 | });
|
2468 | return toReturn;
|
2469 | }
|
2470 | function setPresetSelectIndex(gui) {
|
2471 | for (var index = 0; index < gui.__preset_select.length; index++) {
|
2472 | if (gui.__preset_select[index].value === gui.preset) {
|
2473 | gui.__preset_select.selectedIndex = index;
|
2474 | }
|
2475 | }
|
2476 | }
|
2477 | function updateDisplays(controllerArray) {
|
2478 | if (controllerArray.length !== 0) {
|
2479 | requestAnimationFrame$1.call(window, function () {
|
2480 | updateDisplays(controllerArray);
|
2481 | });
|
2482 | }
|
2483 | Common.each(controllerArray, function (c) {
|
2484 | c.updateDisplay();
|
2485 | });
|
2486 | }
|
2487 |
|
2488 | var color = {
|
2489 | Color: Color,
|
2490 | math: ColorMath,
|
2491 | interpret: interpret
|
2492 | };
|
2493 | var controllers = {
|
2494 | Controller: Controller,
|
2495 | BooleanController: BooleanController,
|
2496 | OptionController: OptionController,
|
2497 | StringController: StringController,
|
2498 | NumberController: NumberController,
|
2499 | NumberControllerBox: NumberControllerBox,
|
2500 | NumberControllerSlider: NumberControllerSlider,
|
2501 | FunctionController: FunctionController,
|
2502 | ColorController: ColorController
|
2503 | };
|
2504 | var dom$1 = { dom: dom };
|
2505 | var gui = { GUI: GUI };
|
2506 | var GUI$1 = GUI;
|
2507 | var index = {
|
2508 | color: color,
|
2509 | controllers: controllers,
|
2510 | dom: dom$1,
|
2511 | gui: gui,
|
2512 | GUI: GUI$1
|
2513 | };
|
2514 |
|
2515 | export { color, controllers, dom$1 as dom, gui, GUI$1 as GUI };
|
2516 | export default index;
|
2517 |
|