scrawl-canvas/source/helper/shared-vars.js

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun

// # Shared variables
export const _abs = Math.abs;
export const _assign = Object.assign;
export const _acos = Math.acos;
export const _atan2 = Math.atan2;
export const _ceil = Math.ceil;
export const _computed = window.getComputedStyle;
export const _cos = Math.cos;
export const _create = Object.create;
export const _entries = Object.entries;
export const _floor = Math.floor;

// Note that, when developing in files that imports arrays from this file, those arrays should be frozen - `Object.freeze([...etc])`. This is to prevent any code adding attributes to it (`Object.seal({}) would also do the job). Sadly, Object freezing (and sealing) has a slight detriment to performance as the JS engine may perform additional checks when encountering frozen objects/arrays which are not required when we already know the code does not add any attributes to it
//
// export const _freeze = Object.freeze;
// export const _seal = Object.seal;

export const _hypot = Math.hypot;
export const _isArray = Array.isArray;
export const _isFinite = Number.isFinite;
export const _keys = Object.keys;
export const _max = Math.max;
export const _min = Math.min;
export const _now = Date.now;
export const _parse = JSON.parse;
export const _piDouble = Math.PI * 2;
export const _piHalf = Math.PI * 0.5;
export const _pow = Math.pow;
export const _radian = Math.PI / 180;
export const _random = Math.random;
export const _round = Math.round;
export const _setPrototypeOf = Object.setPrototypeOf;
export const _sin = Math.sin;
export const _sqrt = Math.sqrt;
export const _tan = Math.tan;
export const _tick = 16 / 1000;
export const _values = Object.values;

export const $BODY = 'BODY';
export const $IMAGE = 'image_';
export const $VIDEO = 'video_';
export const _2D = '2d';
export const ABSOLUTE = 'absolute';
export const ACCEPTED_WRAPPERS = ['Canvas', 'Stack'];
export const ADD_EVENT_LISTENER = 'addEventListener';
export const ADD_EASE = 'add-ease';
export const ADD_MAP_CONTOUR = 'add-map-contour';
export const ADD_MAP_DISPLACE = 'add-map-displace';
export const ADD_MAP_EASE = 'add-map-ease';
export const ADD_MAP_FLOW = 'add-map-flow';
export const ADD_MAP_ROTATE = 'add-map-rotate';
export const ADD_MAP_THRESHOLD = 'add-map-threshold';
export const ADD_MAP_WARP = 'add-map-warp';
export const ADD_NOISE = 'add-noise';
export const ADD_RIPPLE = 'add-ripple';
export const ADD_WAVE = 'add-wave';
export const AFTER_SPREAD = 'after-spread';
export const ALPHA_TO_CHANNELS = 'alpha-to-channels';
export const ALPHA_TO_LUMINANCE = 'alpha-to-luminance';
export const ALPHABETIC = 'alphabetic';
export const ANCHOR = 'anchor';
export const ANIMATION = 'animation';
export const ANONYMOUS = 'anonymous';
export const AREA_ALPHA = 'area-alpha';
export const ARG_SPLITTER = ',';
export const ARIA_HIDDEN = 'aria-hidden';
export const ARIA_LIVE = 'aria-live';
export const ASSET = 'asset';
export const ASSET_IMPORT_REGEX = /.*\/(.*?)\./;
export const AUTO = 'auto';
export const AUTOFOCUS = 'autofocus';
export const AVERAGE_CHANNELS = 'average-channels';
export const BEFORE_SPREAD = 'before-spread';
export const BEZIER = 'bezier';
export const BLACK = 'rgb(0 0 0 / 1)';
export const BLACK_WHITE = 'black-white';
export const BLANK = 'rgb(0 0 0 / 0)';
export const BLEND = 'blend';
export const BLOCK = 'block';
export const BLUENOISE = 'bluenoise';
export const BLUR = 'blur';
export const BLUR_ACTION = 'blurAction';
export const BORDER_BOX = 'border-box';
export const BOTTOM = 'bottom';
export const CANVAS = 'canvas';
export const CENTER = 'center';
export const CHANNELS_TO_ALPHA = 'channels-to-alpha';
export const CHROMA = 'chroma';
export const CLAMP_CHANNELS = 'clamp-channels';
export const CLAMP_VALUES = ['down', 'round', 'up'];
export const CLEAR = 'clear';
export const CLICK = 'click';
export const CLICK_ACTION = 'clickAction';
export const CLOSE = 'close';
export const COLOR = 'color';
export const COLORS_TO_ALPHA = 'colors-to-alpha';
export const COMPOSE = 'compose';
export const CONTROL = 'control';
export const COORD = 'coord';
export const CORNER_LABELS = ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'];
export const CORNER_SELECTOR = '[data-scrawl-corner-div="sc"]';
export const CORRODE = 'corrode';
export const DATA_SCRAWL_GROUP = 'data-scrawl-group';
export const DATA_TAB_ORDER = 'data-tab-order';
export const DEFAULT_FONT = '12px sans-serif';
export const DEFAULT_SEED = 'any_random_string_will_do';
export const DESCRIPTION = 'description';
export const DESTINATION_OUT = 'destination-out';
export const DESTINATION_OVER = 'destination-over';
export const DIMENSIONS = 'dimensions';
export const DISABLED = 'disabled';
export const DISPLACE = 'displace';
export const DISPLAY_P3 = 'display-p3';
export const DIV = 'div';
export const DOWN = 'down';
export const DOWNLOAD = 'download';
export const DRAW = 'draw';
export const ELEMENT = 'element';
export const EMBOSS = 'emboss';
export const END = 'end';
export const END_CONTROL = 'endControl';
export const ENTER = 'enter';
export const ENTITY = 'entity';
export const EULER = 'euler';
export const FILL = 'fill';
export const FILTER = 'filter';
export const FLOOD = 'flood';
export const FOCUS = 'focus';
export const FOCUS_ACTION = 'focusAction';
export const FONT_USERS = ['Label', 'EnhancedLabel'];
export const FORM = 'form';
export const FUNCTION = 'function';
export const GAUSSIAN_BLUR = 'gaussian-blur';
export const GLITCH = 'glitch';
export const GOOD_HOST = ['Cell', 'CellFragment'];
export const GRADIENTS_ARR = ['Gradient', 'RadialGradient', 'ConicGradient'];
export const GRAYSCALE = 'grayscale';
export const GREEN = 'green';
export const HANGING = 'hanging';
export const HEIGHT = 'height';
export const HIGH = 'high';
export const HREF = 'href';
export const HREFLANG = 'hreflang';
export const IDEOGRAPHIC = 'ideographic';
export const IMG = 'img';
export const INT_COLOR_SPACES = ['rgb', 'hsl', 'hwb', 'xyz', 'lab', 'lch', 'oklab', 'oklch'];
export const INVERT_CHANNELS = 'invert-channels';
export const LEAVE = 'leave';
export const LEFT = 'left';
export const LINE_DASH = 'lineDash';
export const LINEAR = 'linear';
export const LOCK_CHANNELS_TO_LEVELS = 'lock-channels-to-levels';
export const LTR = 'ltr';
export const LUMINANCE_TO_ALPHA = 'luminance-to-alpha';
export const MAP_TO_GRADIENT = 'map-to-gradient';
export const MATRIX = 'matrix';
export const MEAN = 'mean';
export const MIDDLE = 'middle';
export const MIMIC = 'mimic';
export const MODIFY_OK_CHANNELS = 'modify-ok-channels';
export const MODULATE_CHANNELS = 'modulate-channels';
export const MODULATE_OK_CHANNELS = 'modulate-ok-channels';
export const MOUSE = 'mouse';
export const MOUSE_DOWN = 'mousedown';
export const MOUSE_ENTER = 'mouseenter';
export const MOUSE_LEAVE = 'mouseleave';
export const MOUSE_MOVE = 'mousemove';
export const MOUSE_UP = 'mouseup';
export const MOVE = 'move';
export const MULTIPLY = 'multiply';
export const NAME = 'name';
export const NEGATIVE = 'negative';
export const NEWSPRINT = 'newsprint';
export const NONE = 'none';
export const NORMAL = 'normal';
export const OFFSET = 'offset';
export const OK_PERCEPTUAL_CURVES = 'ok-perceptual-curves';
export const ON_COORDINATES = 'on-coordinates';
export const ORDERED = 'ordered';
export const PAD = 'pad';
export const PARTICLE = 'particle';
export const PATH = 'path';
export const PATH_ENTITY = ['Bezier', 'Cog', 'Line', 'LineSpiral', 'Oval', 'Polygon', 'Polyline', 'Quadratic', 'Rectangle', 'Shape', 'Spiral', 'Star', 'Tetragon'];
export const PC = '%';
export const PC0 = '0%';
export const PC100 = '100%';
export const PC50 = '50%';
export const PERMITTED_NOISE = ['random', 'bluenoise', 'ordered'];
export const PING = 'ping';
export const PIVOT = 'pivot';
export const PIXELATE = 'pixelate';
export const POINTER_DOWN = 'pointerdown';
export const POINTER_ENTER = 'pointerenter';
export const POINTER_LEAVE = 'pointerleave';
export const POINTER_MOVE = 'pointermove';
export const POINTER_UP = 'pointerup';
export const POLITE = 'polite';
export const PROCESS_IMAGE = 'process-image';
export const PX0 = '0px';
export const QUADRATIC = 'quadratic';
export const RADIUS_X = ['radiusX'];
export const RADIUS_XY = ['radiusX', 'radiusY'];
export const RADIUS_Y = ['radiusY'];
export const RANDOM = 'random';
export const RANDOM_NOISE = 'random-noise';
export const RECT = 'rect';
export const RECTANGLE = 'rectangle';
export const RED = 'red';
export const REDUCE_PALETTE = 'reduce-palette';
export const REFERRERPOLICY = 'referrerpolicy';
export const REFLECT = 'reflect';
export const REL = 'rel';
export const RELATIVE = 'relative';
export const REMOVE_EVENT_LISTENER = 'removeEventListener';
export const REPEAT = 'repeat';
export const REVERSE_BY_DELTA = 'reverseByDelta';
export const RGB = 'rgb';
export const RIGHT = 'right';
export const ROLE = 'role';
export const ROOT = 'root';
export const ROTATE_HUE = 'rotate-hue';
export const ROUND = 'round';
export const SET_CHANNEL_TO_LEVEL = 'set-channel-to-level';
export const SOURCE = 'source';
export const SOURCE_IN = 'source-in';
export const SOURCE_OUT = 'source-out';
export const SOURCE_OVER = 'source-over';
export const SPACE = ' ';
export const SRGB = 'srgb';
export const START = 'start';
export const START_CONTROL = 'startControl';
export const STATE_ALL_KEYS = ['direction', 'fillStyle', 'filter', 'font', 'fontKerning', 'fontStretch', 'fontVariantCaps', 'globalAlpha', 'globalCompositeOperation', 'imageSmoothingEnabled', 'imageSmoothingQuality', 'letterSpacing', 'lineCap', 'lineDash', 'lineDashOffset', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseline', 'textRendering', 'wordSpacing'];
export const STATE_KEYS = ['fillStyle', 'filter', 'globalAlpha', 'globalCompositeOperation', 'imageSmoothingEnabled', 'imageSmoothingQuality', 'lineCap', 'lineDash', 'lineDashOffset', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'strokeStyle'];
export const STATE_LABEL_KEYS = ['direction', 'font', 'fontKerning', 'fontStretch', 'fontVariantCaps', 'letterSpacing', 'textRendering', 'wordSpacing'];
export const STEP_CHANNELS = 'step-channels';
export const STYLES = 'styles';
export const SUBSCRIBE = 'subscribe';
export const SWIRL = 'swirl';
export const T_ACTION = 'Action';
export const T_BEZIER = 'Bezier';
export const T_CANVAS = 'Canvas';
export const T_CELL = 'Cell';
export const T_COLOR = 'Color';
export const T_COLOR_ENGINE = 'ColorEngine';
export const T_CONIC_GRADIENT = 'ConicGradient';
export const T_COORDINATE = 'Coordinate';
export const T_ENHANCED_LABEL = 'EnhancedLabel';
export const T_FILTER = 'Filter';
export const T_GRADIENT = 'Gradient';
export const T_GRID = 'Grid';
export const T_GROUP = 'Group';
export const T_IMAGE = 'Image';
export const T_LABEL = 'Label';
export const T_LINE = 'Line';
export const T_NET = 'Net';
export const T_NOISE = 'Noise';
export const T_PALETTE = 'Palette';
export const T_PARTICLE = 'Particle';
export const T_PICTURE = 'Picture';
export const T_POLYLINE = 'Polyline';
export const T_QUADRATIC = 'Quadratic';
export const T_QUATERNION = 'Quaternion';
export const T_RADIAL_GRADIENT = 'RadialGradient';
export const T_RAW_ASSET = 'RawAsset';
export const T_RD_ASSET = 'RdAsset';
export const T_RENDER_ANIMATION = 'RenderAnimation';
export const T_SPRITE = 'Sprite';
export const T_STACK = 'Stack';
export const T_TICKER = 'Ticker';
export const T_TWEEN = 'Tween';
export const T_VECTOR = 'Vector';
export const T_VIDEO = 'Video';
export const T_WORLD = 'World';
export const TAB_ORDER = 'tabOrder';
export const TARGET = 'target';
export const THRESHOLD = 'threshold';
export const TILE_MODES = ['rect', 'hex', 'random', 'points'];
export const TILES = 'tiles';
export const TINT_CHANNELS = 'tint-channels';
export const TOP = 'top';
export const TOUCH_CANCEL = 'touchcancel';
export const TOUCH_END = 'touchend';
export const TOUCH_MOVE = 'touchmove';
export const TOUCH_START = 'touchstart';
export const TRANSPARENT = 'transparent';
export const TRUE = 'true';
export const TWEEN = 'tween';
export const TYPE = 'type';
export const UNDEF = 'undefined';
export const UNKNOWN = 'unknown';
export const UNSHARP = 'unsharp';
export const UP = 'up';
export const UPDATE_BY_DELTA = 'updateByDelta';
export const USER_DEFINED_LEGACY = 'user-defined-legacy';
export const VALUE = 'value';
export const VARY_CHANNELS_BY_WEIGHTS = 'vary-channels-by-weights';
export const VIDEO = 'video';
export const WHITE = 'rgb(255 255 255 / 1)';
export const WIDTH = 'width';
export const ZERO_PATH = 'M0,0';
export const ZERO_STR = '';
export const ZOOM_BLUR = 'zoom-blur';