import * as THREE from 'three';
import threeLine2d from 'three-line-2d';
import threeLine2dShader from 'three-line-2d-shader';

import COLOR from 'configs/colors';


export const ANIMATION = true;

export const ARRANGE_METRICS = [];

export const CELL_SIZE = 6;

export const CELL_SIZE_HALF = CELL_SIZE / 2;

export const CELL_THRESHOLD = 0.0;  // only cells above are shown

export const CLICK_DELAY_TIME = 300;

export const DBL_CLICK_DELAY_TIME = 250;

export const COLOR_LOW_QUALITY = [1, 0.890196078, 0.835294118];

/**
 * External config to initialize fragments.
 *
 * @description
 * The config is different from the visual state of the app.
 *
 * @type  {Object}
 */
export const CONFIG = {};

export const DIAGONAL_VALUE = 0.11;

export const DURATION = 250;

export const FONT_URL = 'src/assets/fonts/rubik-regular.json';

export const FPS = 25;

export const HIGHLIGHT_FRAME_LINE_WIDTH = 5;

export const LABEL_DIST = 60;

export const LABEL_WIDTH = 130;

export const LABEL_TEXT_SPEC = {
  size: 6,
  height: 1,
  curveSegments: 3
};

export const LASSO_IS_ROUND = false;

export const LASSO_LINE = threeLine2d(THREE);

export const LASSO_LINE_WIDTH = 2;

export const LASSO_MIN_MOVE = 0.033;

export const LASSO_SHADER = threeLine2dShader(THREE)({
  side: THREE.DoubleSide,
  diffuse: COLOR.PRIMARY,
  thickness: LASSO_LINE_WIDTH
});

export const LASSO_MATERIAL = new THREE.ShaderMaterial(LASSO_SHADER);

export const LETTER_SPACE = 6;

export const MARGIN_BOTTOM = 2;

export const MARGIN_LEFT = 2;

export const MARGIN_RIGHT = 2;

export const MARGIN_TOP = 2;

export const MATRIX_GAP_HORIZONTAL = 10;

export const MATRIX_GAP_VERTICAL = 20;

export const METRIC_DIST_DIAG = 'distToDiag';

export const METRIC_NOISE = 'noise';

export const METRIC_SHARPNESS = 'sharpness';

export const METRIC_SIZE = 'size';

/**
 * Harmonic Mean
 *
 * @type {Number}
 */
export const MODE_MEAN = 0;

/**
 * Not sure
 *
 * @type {Number}
 */
export const MODE_TREND = 1;

/**
 * Statistical variance
 *
 * @type {Number}
 */
export const MODE_VARIANCE = 2;

/**
 * Stuff
 *
 * @type {Number}
 */
export const MODE_DIFFERENCE = 3;

export const ORDER_DATA = 0;

export const ORDER_GLOBAL = 1;

export const ORDER_LOCAL = 2;

export const PILES = {};

export const PILING_DIRECTION = 'horizontal';

export const PREVIEW_SIZE = 3;

export const SHADER_ATTRIBUTES = {
  customColor: { type: 'c', value: [] }
};

export const SHOW_MATRICES = 1000;

export const SHOW_SPECIAL_CELLS = false;

export const SVG_MENU_HEIGHT = 30;

export const TIMELINE_HEIGHT = 130;

/**
 * Three.js's WebGL config
 *
 * @type  {Object}
 */
export const WEB_GL_CONFIG = {
  alpha: true,
  antialias: true
};

export const Z_BASE = 1;

export const Z_DRAG = 2;

export const Z_HIGHLIGHT = 1.5;

export const Z_LASSO = 2;

export const Z_MENU = 2;

export const Z_STACK_PILE_TARGET = 2;

@@ -1647,17 +1647,17 @@
 TICAL = 
-2
+1
 0;%0A%0Aexpo
@@ -2238,14 +2238,26 @@
 PILE
-S = %7B%7D
+_LABEL_HEIGHT = 10
 ;%0A%0Ae
@@ -2275,36 +2275,15 @@
  PIL
-ING_DIRECTION = 'horizontal'
+ES = %7B%7D
 ;%0A%0Ae
@@ -2305,32 +2305,63 @@
 VIEW_SIZE = 3;%0A%0A
+export const PREVIEW_MAX = 5;%0A%0A
 export const SHA

Add pile defaults. Remove unused vars.