UNPKG

three-stdlib

Version:

stand-alone library of threejs examples

1,530 lines 469 kB
const lottie = /* @__PURE__ */ (() => { if (typeof navigator === "undefined" || typeof document === "undefined" || typeof CanvasRenderingContext2D === "undefined") return {}; const svgNS = "http://www.w3.org/2000/svg"; let locationHref = ""; let _useWebWorker = false; const initialDefaultFrame = -999999; const setWebWorker = (flag) => { _useWebWorker = !!flag; }; const getWebWorker = () => _useWebWorker; const setLocationHref = (value) => { locationHref = value; }; const getLocationHref = () => locationHref; function createTag(type) { return document.createElement(type); } function extendPrototype(sources, destination) { var i; var len = sources.length; var sourcePrototype; for (i = 0; i < len; i += 1) { sourcePrototype = sources[i].prototype; for (var attr in sourcePrototype) { if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr]; } } } function getDescriptor(object, prop) { return Object.getOwnPropertyDescriptor(object, prop); } function createProxyFunction(prototype) { function ProxyFunction() { } ProxyFunction.prototype = prototype; return ProxyFunction; } const audioControllerFactory = function() { function AudioController(audioFactory) { this.audios = []; this.audioFactory = audioFactory; this._volume = 1; this._isMuted = false; } AudioController.prototype = { addAudio: function(audio) { this.audios.push(audio); }, pause: function() { var i; var len = this.audios.length; for (i = 0; i < len; i += 1) { this.audios[i].pause(); } }, resume: function() { var i; var len = this.audios.length; for (i = 0; i < len; i += 1) { this.audios[i].resume(); } }, setRate: function(rateValue) { var i; var len = this.audios.length; for (i = 0; i < len; i += 1) { this.audios[i].setRate(rateValue); } }, createAudio: function(assetPath) { if (this.audioFactory) { return this.audioFactory(assetPath); } if (window.Howl) { return new window.Howl({ src: [assetPath] }); } return { isPlaying: false, play: function() { this.isPlaying = true; }, seek: function() { this.isPlaying = false; }, playing: function() { }, rate: function() { }, setVolume: function() { } }; }, setAudioFactory: function(audioFactory) { this.audioFactory = audioFactory; }, setVolume: function(value) { this._volume = value; this._updateVolume(); }, mute: function() { this._isMuted = true; this._updateVolume(); }, unmute: function() { this._isMuted = false; this._updateVolume(); }, getVolume: function() { return this._volume; }, _updateVolume: function() { var i; var len = this.audios.length; for (i = 0; i < len; i += 1) { this.audios[i].volume(this._volume * (this._isMuted ? 0 : 1)); } } }; return function() { return new AudioController(); }; }(); const createTypedArray = function() { function createRegularArray(type, len) { var i = 0; var arr = []; var value; switch (type) { case "int16": case "uint8c": value = 1; break; default: value = 1.1; break; } for (i = 0; i < len; i += 1) { arr.push(value); } return arr; } function createTypedArrayFactory(type, len) { if (type === "float32") { return new Float32Array(len); } if (type === "int16") { return new Int16Array(len); } if (type === "uint8c") { return new Uint8ClampedArray(len); } return createRegularArray(type, len); } if (typeof Uint8ClampedArray === "function" && typeof Float32Array === "function") { return createTypedArrayFactory; } return createRegularArray; }(); function createSizedArray(len) { return Array.apply(null, { length: len }); } let subframeEnabled = true; let expressionsPlugin = null; let idPrefix$1 = ""; const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); const bmPow = Math.pow; const bmSqrt = Math.sqrt; const bmFloor = Math.floor; const bmMin = Math.min; const BMMath = {}; (function() { var propertyNames = [ "abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "atan2", "ceil", "cbrt", "expm1", "clz32", "cos", "cosh", "exp", "floor", "fround", "hypot", "imul", "log", "log1p", "log2", "log10", "max", "min", "pow", "random", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "E", "LN10", "LN2", "LOG10E", "LOG2E", "PI", "SQRT1_2", "SQRT2" ]; var i; var len = propertyNames.length; for (i = 0; i < len; i += 1) { BMMath[propertyNames[i]] = Math[propertyNames[i]]; } })(); BMMath.random = Math.random; BMMath.abs = function(val) { var tOfVal = typeof val; if (tOfVal === "object" && val.length) { var absArr = createSizedArray(val.length); var i; var len = val.length; for (i = 0; i < len; i += 1) { absArr[i] = Math.abs(val[i]); } return absArr; } return Math.abs(val); }; let defaultCurveSegments = 150; const degToRads = Math.PI / 180; const roundCorner = 0.5519; function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) { this.type = type; this.currentTime = currentTime; this.totalTime = totalTime; this.direction = frameMultiplier < 0 ? -1 : 1; } function BMCompleteEvent(type, frameMultiplier) { this.type = type; this.direction = frameMultiplier < 0 ? -1 : 1; } function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) { this.type = type; this.currentLoop = currentLoop; this.totalLoops = totalLoops; this.direction = frameMultiplier < 0 ? -1 : 1; } function BMSegmentStartEvent(type, firstFrame, totalFrames) { this.type = type; this.firstFrame = firstFrame; this.totalFrames = totalFrames; } function BMDestroyEvent(type, target) { this.type = type; this.target = target; } function BMRenderFrameErrorEvent(nativeError, currentTime) { this.type = "renderFrameError"; this.nativeError = nativeError; this.currentTime = currentTime; } function BMConfigErrorEvent(nativeError) { this.type = "configError"; this.nativeError = nativeError; } const createElementID = function() { var _count = 0; return function createID() { _count += 1; return idPrefix$1 + "__lottie_element_" + _count; }; }(); function HSVtoRGB(h, s, v) { var r; var g; var b; var i; var f; var p; var q; var t; i = Math.floor(h * 6); f = h * 6 - i; p = v * (1 - s); q = v * (1 - f * s); t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; } return [r, g, b]; } function RGBtoHSV(r, g, b) { var max = Math.max(r, g, b); var min = Math.min(r, g, b); var d = max - min; var h; var s = max === 0 ? 0 : d / max; var v = max / 255; switch (max) { case min: h = 0; break; case r: h = g - b + d * (g < b ? 6 : 0); h /= 6 * d; break; case g: h = b - r + d * 2; h /= 6 * d; break; case b: h = r - g + d * 4; h /= 6 * d; break; } return [h, s, v]; } function addSaturationToRGB(color, offset) { var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255); hsv[1] += offset; if (hsv[1] > 1) { hsv[1] = 1; } else if (hsv[1] <= 0) { hsv[1] = 0; } return HSVtoRGB(hsv[0], hsv[1], hsv[2]); } function addBrightnessToRGB(color, offset) { var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255); hsv[2] += offset; if (hsv[2] > 1) { hsv[2] = 1; } else if (hsv[2] < 0) { hsv[2] = 0; } return HSVtoRGB(hsv[0], hsv[1], hsv[2]); } function addHueToRGB(color, offset) { var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255); hsv[0] += offset / 360; if (hsv[0] > 1) { hsv[0] -= 1; } else if (hsv[0] < 0) { hsv[0] += 1; } return HSVtoRGB(hsv[0], hsv[1], hsv[2]); } (function() { var colorMap = []; var i; var hex; for (i = 0; i < 256; i += 1) { hex = i.toString(16); colorMap[i] = hex.length === 1 ? "0" + hex : hex; } return function(r, g, b) { if (r < 0) { r = 0; } if (g < 0) { g = 0; } if (b < 0) { b = 0; } return "#" + colorMap[r] + colorMap[g] + colorMap[b]; }; })(); const setSubframeEnabled = (flag) => { subframeEnabled = !!flag; }; const getSubframeEnabled = () => subframeEnabled; const setExpressionsPlugin = (value) => { expressionsPlugin = value; }; const getExpressionsPlugin = () => expressionsPlugin; const setDefaultCurveSegments = (value) => { defaultCurveSegments = value; }; const getDefaultCurveSegments = () => defaultCurveSegments; const setIdPrefix = (value) => { idPrefix$1 = value; }; function createNS(type) { return document.createElementNS(svgNS, type); } const dataManager = function() { var _counterId = 1; var processes = []; var workerFn; var workerInstance; var workerProxy = { onmessage: function() { }, postMessage: function(path) { workerFn({ data: path }); } }; var _workerSelf = { postMessage: function(data) { workerProxy.onmessage({ data }); } }; function createWorker(fn) { if (window.Worker && window.Blob && getWebWorker()) { var blob = new Blob(["var _workerSelf = self; self.onmessage = ", fn.toString()], { type: "text/javascript" }); var url = URL.createObjectURL(blob); return new Worker(url); } workerFn = fn; return workerProxy; } function setupWorker() { if (!workerInstance) { workerInstance = createWorker(function workerStart(e) { function dataFunctionManager() { function completeLayers(layers, comps) { var layerData; var i; var len = layers.length; var j; var jLen; var k; var kLen; for (i = 0; i < len; i += 1) { layerData = layers[i]; if ("ks" in layerData && !layerData.completed) { layerData.completed = true; if (layerData.tt) { layers[i - 1].td = layerData.tt; } if (layerData.hasMask) { var maskProps = layerData.masksProperties; jLen = maskProps.length; for (j = 0; j < jLen; j += 1) { if (maskProps[j].pt.k.i) { convertPathsToAbsoluteValues(maskProps[j].pt.k); } else { kLen = maskProps[j].pt.k.length; for (k = 0; k < kLen; k += 1) { if (maskProps[j].pt.k[k].s) { convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]); } if (maskProps[j].pt.k[k].e) { convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]); } } } } } if (layerData.ty === 0) { layerData.layers = findCompLayers(layerData.refId, comps); completeLayers(layerData.layers, comps); } else if (layerData.ty === 4) { completeShapes(layerData.shapes); } else if (layerData.ty === 5) { completeText(layerData); } } } } function completeChars(chars, assets) { if (chars) { var i = 0; var len = chars.length; for (i = 0; i < len; i += 1) { if (chars[i].t === 1) { chars[i].data.layers = findCompLayers(chars[i].data.refId, assets); completeLayers(chars[i].data.layers, assets); } } } } function findComp(id, comps) { var i = 0; var len = comps.length; while (i < len) { if (comps[i].id === id) { return comps[i]; } i += 1; } return null; } function findCompLayers(id, comps) { var comp = findComp(id, comps); if (comp) { if (!comp.layers.__used) { comp.layers.__used = true; return comp.layers; } return JSON.parse(JSON.stringify(comp.layers)); } return null; } function completeShapes(arr) { var i; var len = arr.length; var j; var jLen; for (i = len - 1; i >= 0; i -= 1) { if (arr[i].ty === "sh") { if (arr[i].ks.k.i) { convertPathsToAbsoluteValues(arr[i].ks.k); } else { jLen = arr[i].ks.k.length; for (j = 0; j < jLen; j += 1) { if (arr[i].ks.k[j].s) { convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]); } if (arr[i].ks.k[j].e) { convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]); } } } } else if (arr[i].ty === "gr") { completeShapes(arr[i].it); } } } function convertPathsToAbsoluteValues(path) { var i; var len = path.i.length; for (i = 0; i < len; i += 1) { path.i[i][0] += path.v[i][0]; path.i[i][1] += path.v[i][1]; path.o[i][0] += path.v[i][0]; path.o[i][1] += path.v[i][1]; } } function checkVersion(minimum, animVersionString) { var animVersion = animVersionString ? animVersionString.split(".") : [100, 100, 100]; if (minimum[0] > animVersion[0]) { return true; } if (animVersion[0] > minimum[0]) { return false; } if (minimum[1] > animVersion[1]) { return true; } if (animVersion[1] > minimum[1]) { return false; } if (minimum[2] > animVersion[2]) { return true; } if (animVersion[2] > minimum[2]) { return false; } return null; } var checkText = function() { var minimumVersion = [4, 4, 14]; function updateTextLayer(textLayer) { var documentData = textLayer.t.d; textLayer.t.d = { k: [ { s: documentData, t: 0 } ] }; } function iterateLayers(layers) { var i; var len = layers.length; for (i = 0; i < len; i += 1) { if (layers[i].ty === 5) { updateTextLayer(layers[i]); } } } return function(animationData) { if (checkVersion(minimumVersion, animationData.v)) { iterateLayers(animationData.layers); if (animationData.assets) { var i; var len = animationData.assets.length; for (i = 0; i < len; i += 1) { if (animationData.assets[i].layers) { iterateLayers(animationData.assets[i].layers); } } } } }; }(); var checkChars = function() { var minimumVersion = [4, 7, 99]; return function(animationData) { if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) { var i; var len = animationData.chars.length; for (i = 0; i < len; i += 1) { var charData = animationData.chars[i]; if (charData.data && charData.data.shapes) { completeShapes(charData.data.shapes); charData.data.ip = 0; charData.data.op = 99999; charData.data.st = 0; charData.data.sr = 1; charData.data.ks = { p: { k: [0, 0], a: 0 }, s: { k: [100, 100], a: 0 }, a: { k: [0, 0], a: 0 }, r: { k: 0, a: 0 }, o: { k: 100, a: 0 } }; if (!animationData.chars[i].t) { charData.data.shapes.push({ ty: "no" }); charData.data.shapes[0].it.push({ p: { k: [0, 0], a: 0 }, s: { k: [100, 100], a: 0 }, a: { k: [0, 0], a: 0 }, r: { k: 0, a: 0 }, o: { k: 100, a: 0 }, sk: { k: 0, a: 0 }, sa: { k: 0, a: 0 }, ty: "tr" }); } } } } }; }(); var checkPathProperties = function() { var minimumVersion = [5, 7, 15]; function updateTextLayer(textLayer) { var pathData = textLayer.t.p; if (typeof pathData.a === "number") { pathData.a = { a: 0, k: pathData.a }; } if (typeof pathData.p === "number") { pathData.p = { a: 0, k: pathData.p }; } if (typeof pathData.r === "number") { pathData.r = { a: 0, k: pathData.r }; } } function iterateLayers(layers) { var i; var len = layers.length; for (i = 0; i < len; i += 1) { if (layers[i].ty === 5) { updateTextLayer(layers[i]); } } } return function(animationData) { if (checkVersion(minimumVersion, animationData.v)) { iterateLayers(animationData.layers); if (animationData.assets) { var i; var len = animationData.assets.length; for (i = 0; i < len; i += 1) { if (animationData.assets[i].layers) { iterateLayers(animationData.assets[i].layers); } } } } }; }(); var checkColors = function() { var minimumVersion = [4, 1, 9]; function iterateShapes(shapes) { var i; var len = shapes.length; var j; var jLen; for (i = 0; i < len; i += 1) { if (shapes[i].ty === "gr") { iterateShapes(shapes[i].it); } else if (shapes[i].ty === "fl" || shapes[i].ty === "st") { if (shapes[i].c.k && shapes[i].c.k[0].i) { jLen = shapes[i].c.k.length; for (j = 0; j < jLen; j += 1) { if (shapes[i].c.k[j].s) { shapes[i].c.k[j].s[0] /= 255; shapes[i].c.k[j].s[1] /= 255; shapes[i].c.k[j].s[2] /= 255; shapes[i].c.k[j].s[3] /= 255; } if (shapes[i].c.k[j].e) { shapes[i].c.k[j].e[0] /= 255; shapes[i].c.k[j].e[1] /= 255; shapes[i].c.k[j].e[2] /= 255; shapes[i].c.k[j].e[3] /= 255; } } } else { shapes[i].c.k[0] /= 255; shapes[i].c.k[1] /= 255; shapes[i].c.k[2] /= 255; shapes[i].c.k[3] /= 255; } } } } function iterateLayers(layers) { var i; var len = layers.length; for (i = 0; i < len; i += 1) { if (layers[i].ty === 4) { iterateShapes(layers[i].shapes); } } } return function(animationData) { if (checkVersion(minimumVersion, animationData.v)) { iterateLayers(animationData.layers); if (animationData.assets) { var i; var len = animationData.assets.length; for (i = 0; i < len; i += 1) { if (animationData.assets[i].layers) { iterateLayers(animationData.assets[i].layers); } } } } }; }(); var checkShapes = function() { var minimumVersion = [4, 4, 18]; function completeClosingShapes(arr) { var i; var len = arr.length; var j; var jLen; for (i = len - 1; i >= 0; i -= 1) { if (arr[i].ty === "sh") { if (arr[i].ks.k.i) { arr[i].ks.k.c = arr[i].closed; } else { jLen = arr[i].ks.k.length; for (j = 0; j < jLen; j += 1) { if (arr[i].ks.k[j].s) { arr[i].ks.k[j].s[0].c = arr[i].closed; } if (arr[i].ks.k[j].e) { arr[i].ks.k[j].e[0].c = arr[i].closed; } } } } else if (arr[i].ty === "gr") { completeClosingShapes(arr[i].it); } } } function iterateLayers(layers) { var layerData; var i; var len = layers.length; var j; var jLen; var k; var kLen; for (i = 0; i < len; i += 1) { layerData = layers[i]; if (layerData.hasMask) { var maskProps = layerData.masksProperties; jLen = maskProps.length; for (j = 0; j < jLen; j += 1) { if (maskProps[j].pt.k.i) { maskProps[j].pt.k.c = maskProps[j].cl; } else { kLen = maskProps[j].pt.k.length; for (k = 0; k < kLen; k += 1) { if (maskProps[j].pt.k[k].s) { maskProps[j].pt.k[k].s[0].c = maskProps[j].cl; } if (maskProps[j].pt.k[k].e) { maskProps[j].pt.k[k].e[0].c = maskProps[j].cl; } } } } } if (layerData.ty === 4) { completeClosingShapes(layerData.shapes); } } } return function(animationData) { if (checkVersion(minimumVersion, animationData.v)) { iterateLayers(animationData.layers); if (animationData.assets) { var i; var len = animationData.assets.length; for (i = 0; i < len; i += 1) { if (animationData.assets[i].layers) { iterateLayers(animationData.assets[i].layers); } } } } }; }(); function completeData(animationData) { if (animationData.__complete) { return; } checkColors(animationData); checkText(animationData); checkChars(animationData); checkPathProperties(animationData); checkShapes(animationData); completeLayers(animationData.layers, animationData.assets); completeChars(animationData.chars, animationData.assets); animationData.__complete = true; } function completeText(data) { if (data.t.a.length === 0 && !("m" in data.t.p)) ; } var moduleOb = {}; moduleOb.completeData = completeData; moduleOb.checkColors = checkColors; moduleOb.checkChars = checkChars; moduleOb.checkPathProperties = checkPathProperties; moduleOb.checkShapes = checkShapes; moduleOb.completeLayers = completeLayers; return moduleOb; } if (!_workerSelf.dataManager) { _workerSelf.dataManager = dataFunctionManager(); } if (!_workerSelf.assetLoader) { _workerSelf.assetLoader = function() { function formatResponse(xhr) { var contentTypeHeader = xhr.getResponseHeader("content-type"); if (contentTypeHeader && xhr.responseType === "json" && contentTypeHeader.indexOf("json") !== -1) { return xhr.response; } if (xhr.response && typeof xhr.response === "object") { return xhr.response; } if (xhr.response && typeof xhr.response === "string") { return JSON.parse(xhr.response); } if (xhr.responseText) { return JSON.parse(xhr.responseText); } return null; } function loadAsset(path, fullPath, callback, errorCallback) { var response; var xhr = new XMLHttpRequest(); try { xhr.responseType = "json"; } catch (err) { } xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { response = formatResponse(xhr); callback(response); } else { try { response = formatResponse(xhr); callback(response); } catch (err) { if (errorCallback) { errorCallback(err); } } } } }; try { xhr.open("GET", path, true); } catch (error) { xhr.open("GET", fullPath + "/" + path, true); } xhr.send(); } return { load: loadAsset }; }(); } if (e.data.type === "loadAnimation") { _workerSelf.assetLoader.load( e.data.path, e.data.fullPath, function(data) { _workerSelf.dataManager.completeData(data); _workerSelf.postMessage({ id: e.data.id, payload: data, status: "success" }); }, function() { _workerSelf.postMessage({ id: e.data.id, status: "error" }); } ); } else if (e.data.type === "complete") { var animation = e.data.animation; _workerSelf.dataManager.completeData(animation); _workerSelf.postMessage({ id: e.data.id, payload: animation, status: "success" }); } else if (e.data.type === "loadData") { _workerSelf.assetLoader.load( e.data.path, e.data.fullPath, function(data) { _workerSelf.postMessage({ id: e.data.id, payload: data, status: "success" }); }, function() { _workerSelf.postMessage({ id: e.data.id, status: "error" }); } ); } }); workerInstance.onmessage = function(event) { var data = event.data; var id = data.id; var process = processes[id]; processes[id] = null; if (data.status === "success") { process.onComplete(data.payload); } else if (process.onError) { process.onError(); } }; } } function createProcess(onComplete, onError) { _counterId += 1; var id = "processId_" + _counterId; processes[id] = { onComplete, onError }; return id; } function loadAnimation2(path, onComplete, onError) { setupWorker(); var processId = createProcess(onComplete, onError); workerInstance.postMessage({ type: "loadAnimation", path, fullPath: window.location.origin + window.location.pathname, id: processId }); } function loadData(path, onComplete, onError) { setupWorker(); var processId = createProcess(onComplete, onError); workerInstance.postMessage({ type: "loadData", path, fullPath: window.location.origin + window.location.pathname, id: processId }); } function completeAnimation(anim, onComplete, onError) { setupWorker(); var processId = createProcess(onComplete, onError); workerInstance.postMessage({ type: "complete", animation: anim, id: processId }); } return { loadAnimation: loadAnimation2, loadData, completeAnimation }; }(); const ImagePreloader = function() { var proxyImage = function() { var canvas = createTag("canvas"); canvas.width = 1; canvas.height = 1; var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgba(0,0,0,0)"; ctx.fillRect(0, 0, 1, 1); return canvas; }(); function imageLoaded() { this.loadedAssets += 1; if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) { if (this.imagesLoadedCb) { this.imagesLoadedCb(null); } } } function footageLoaded() { this.loadedFootagesCount += 1; if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) { if (this.imagesLoadedCb) { this.imagesLoadedCb(null); } } } function getAssetsPath(assetData, assetsPath, originalPath) { var path = ""; if (assetData.e) { path = assetData.p; } else if (assetsPath) { var imagePath = assetData.p; if (imagePath.indexOf("images/") !== -1) { imagePath = imagePath.split("/")[1]; } path = assetsPath + imagePath; } else { path = originalPath; path += assetData.u ? assetData.u : ""; path += assetData.p; } return path; } function testImageLoaded(img) { var _count = 0; var intervalId = setInterval( function() { var box = img.getBBox(); if (box.width || _count > 500) { this._imageLoaded(); clearInterval(intervalId); } _count += 1; }.bind(this), 50 ); } function createImageData(assetData) { var path = getAssetsPath(assetData, this.assetsPath, this.path); var img = createNS("image"); if (isSafari) { this.testImageLoaded(img); } else { img.addEventListener("load", this._imageLoaded, false); } img.addEventListener( "error", function() { ob.img = proxyImage; this._imageLoaded(); }.bind(this), false ); img.setAttributeNS("http://www.w3.org/1999/xlink", "href", path); if (this._elementHelper.append) { this._elementHelper.append(img); } else { this._elementHelper.appendChild(img); } var ob = { img, assetData }; return ob; } function createImgData(assetData) { var path = getAssetsPath(assetData, this.assetsPath, this.path); var img = createTag("img"); img.crossOrigin = "anonymous"; img.addEventListener("load", this._imageLoaded, false); img.addEventListener( "error", function() { ob.img = proxyImage; this._imageLoaded(); }.bind(this), false ); img.src = path; var ob = { img, assetData }; return ob; } function createFootageData(data) { var ob = { assetData: data }; var path = getAssetsPath(data, this.assetsPath, this.path); dataManager.loadData( path, function(footageData) { ob.img = footageData; this._footageLoaded(); }.bind(this), function() { ob.img = {}; this._footageLoaded(); }.bind(this) ); return ob; } function loadAssets(assets, cb) { this.imagesLoadedCb = cb; var i; var len = assets.length; for (i = 0; i < len; i += 1) { if (!assets[i].layers) { if (!assets[i].t || assets[i].t === "seq") { this.totalImages += 1; this.images.push(this._createImageData(assets[i])); } else if (assets[i].t === 3) { this.totalFootages += 1; this.images.push(this.createFootageData(assets[i])); } } } } function setPath(path) { this.path = path || ""; } function setAssetsPath(path) { this.assetsPath = path || ""; } function getAsset(assetData) { var i = 0; var len = this.images.length; while (i < len) { if (this.images[i].assetData === assetData) { return this.images[i].img; } i += 1; } return null; } function destroy() { this.imagesLoadedCb = null; this.images.length = 0; } function loadedImages() { return this.totalImages === this.loadedAssets; } function loadedFootages() { return this.totalFootages === this.loadedFootagesCount; } function setCacheType(type, elementHelper) { if (type === "svg") { this._elementHelper = elementHelper; this._createImageData = this.createImageData.bind(this); } else { this._createImageData = this.createImgData.bind(this); } } function ImagePreloaderFactory() { this._imageLoaded = imageLoaded.bind(this); this._footageLoaded = footageLoaded.bind(this); this.testImageLoaded = testImageLoaded.bind(this); this.createFootageData = createFootageData.bind(this); this.assetsPath = ""; this.path = ""; this.totalImages = 0; this.totalFootages = 0; this.loadedAssets = 0; this.loadedFootagesCount = 0; this.imagesLoadedCb = null; this.images = []; } ImagePreloaderFactory.prototype = { loadAssets, setAssetsPath, setPath, loadedImages, loadedFootages, destroy, getAsset, createImgData, createImageData, imageLoaded, footageLoaded, setCacheType }; return ImagePreloaderFactory; }(); function BaseEvent() { } BaseEvent.prototype = { triggerEvent: function(eventName, args) { if (this._cbs[eventName]) { var callbacks = this._cbs[eventName]; for (var i = 0; i < callbacks.length; i += 1) { callbacks[i](args); } } }, addEventListener: function(eventName, callback) { if (!this._cbs[eventName]) { this._cbs[eventName] = []; } this._cbs[eventName].push(callback); return function() { this.removeEventListener(eventName, callback); }.bind(this); }, removeEventListener: function(eventName, callback) { if (!callback) { this._cbs[eventName] = null; } else if (this._cbs[eventName]) { var i = 0; var len = this._cbs[eventName].length; while (i < len) { if (this._cbs[eventName][i] === callback) { this._cbs[eventName].splice(i, 1); i -= 1; len -= 1; } i += 1; } if (!this._cbs[eventName].length) { this._cbs[eventName] = null; } } } }; const markerParser = function() { function parsePayloadLines(payload) { var lines = payload.split("\r\n"); var keys = {}; var line; var keysCount = 0; for (var i = 0; i < lines.length; i += 1) { line = lines[i].split(":"); if (line.length === 2) { keys[line[0]] = line[1].trim(); keysCount += 1; } } if (keysCount === 0) { throw new Error(); } return keys; } return function(_markers) { var markers = []; for (var i = 0; i < _markers.length; i += 1) { var _marker = _markers[i]; var markerData = { time: _marker.tm, duration: _marker.dr }; try { markerData.payload = JSON.parse(_markers[i].cm); } catch (_) { try { markerData.payload = parsePayloadLines(_markers[i].cm); } catch (__) { markerData.payload = { name: _markers[i].cm }; } } markers.push(markerData); } return markers; }; }(); const ProjectInterface = function() { function registerComposition(comp) { this.compositions.push(comp); } return function() { function _thisProjectFunction(name) { var i = 0; var len = this.compositions.length; while (i < len) { if (this.compositions[i].data && this.compositions[i].data.nm === name) { if (this.compositions[i].prepareFrame && this.compositions[i].data.xt) { this.compositions[i].prepareFrame(this.currentFrame); } return this.compositions[i].compInterface; } i += 1; } return null; } _thisProjectFunction.compositions = []; _thisProjectFunction.currentFrame = 0; _thisProjectFunction.registerComposition = registerComposition; return _thisProjectFunction; }; }(); const renderers = {}; const registerRenderer = (key, value) => { renderers[key] = value; }; function getRenderer(key) { return renderers[key]; } const AnimationItem = function() { this._cbs = []; this.name = ""; this.path = ""; this.isLoaded = false; this.currentFrame = 0; this.currentRawFrame = 0; this.firstFrame = 0; this.totalFrames = 0; this.frameRate = 0; this.frameMult = 0; this.playSpeed = 1; this.playDirection = 1; this.playCount = 0; this.animationData = {}; this.assets = []; this.isPaused = true; this.autoplay = false; this.loop = true; this.renderer = null; this.animationID = createElementID(); this.assetsPath = ""; this.timeCompleted = 0; this.segmentPos = 0; this.isSubframeEnabled = getSubframeEnabled(); this.segments = []; this._idle = true; this._completedLoop = false; this.projectInterface = ProjectInterface(); this.imagePreloader = new ImagePreloader(); this.audioController = audioControllerFactory(); this.markers = []; this.configAnimation = this.configAnimation.bind(this); this.onSetupError = this.onSetupError.bind(this); this.onSegmentComplete = this.onSegmentComplete.bind(this); this.drawnFrameEvent = new BMEnterFrameEvent("drawnFrame", 0, 0, 0); }; extendPrototype([BaseEvent], AnimationItem); AnimationItem.prototype.setParams = function(params) { if (params.wrapper || params.container) { this.wrapper = params.wrapper || params.container; } var animType = "svg"; if (params.animType) { animType = params.animType; } else if (params.renderer) { animType = params.renderer; } const RendererClass = getRenderer(animType); this.renderer = new RendererClass(this, params.rendererSettings); this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs); this.renderer.setProjectInterface(this.projectInterface); this.animType = animType; if (params.loop === "" || params.loop === null || params.loop === void 0 || params.loop === true) { this.loop = true; } else if (params.loop === false) { this.loop = false; } else { this.loop = parseInt(params.loop, 10); } this.autoplay = "autoplay" in params ? params.autoplay : true; this.name = params.name ? params.name : ""; this.autoloadSegments = Object.prototype.hasOwnProperty.call(params, "autoloadSegments") ? params.autoloadSegments : true; this.assetsPath = params.assetsPath; this.initialSegment = params.initialSegment; if (params.audioFactory) { this.audioController.setAudioFactory(params.audioFactory); } if (params.animationData) { this.setupAnimation(params.animationData); } else if (params.path) { if (params.path.lastIndexOf("\\") !== -1) { this.path = params.path.substr(0, params.path.lastIndexOf("\\") + 1); } else { this.path = params.path.substr(0, params.path.lastIndexOf("/") + 1); } this.fileName = params.path.substr(params.path.lastIndexOf("/") + 1); this.fileName = this.fileName.substr(0, this.fileName.lastIndexOf(".json")); dataManager.loadAnimation(params.path, this.configAnimation, this.onSetupError); } }; AnimationItem.prototype.onSetupError = function() { this.trigger("data_failed"); }; AnimationItem.prototype.setupAnimation = function(data) { dataManager.completeAnimation(data, this.configAnimation); }; AnimationItem.prototype.setData = function(wrapper, animationData) { if (animationData) { if (typeof animationData !== "object") { animationData = JSON.parse(animationData); } } var params = { wrapper, animationData }; var wrapperAttributes = wrapper.attributes; params.path = wrapperAttributes.getNamedItem("data-animation-path") ? wrapperAttributes.getNamedItem("data-animation-path").value : wrapperAttributes.getNamedItem("data-bm-path") ? wrapperAttributes.getNamedItem("data-bm-path").value : wrapperAttributes.getNamedItem("bm-path") ? wrapperAttributes.getNamedItem("bm-path").value : ""; params.animType = wrapperAttributes.getNamedItem("data-anim-type") ? wrapperAttributes.getNamedItem("data-anim-type").value : wrapperAttributes.getNamedItem("data-bm-type") ? wrapperAttributes.getNamedItem("data-bm-type").value : wrapperAttributes.getNamedItem("bm-type") ? wrapperAttributes.getNamedItem("bm-type").value : wrapperAttributes.getNamedItem("data-bm-renderer") ? wrapperAttributes.getNamedItem("data-bm-renderer").value : wrapperAttributes.getNamedItem("bm-renderer") ? wrapperAttributes.getNamedItem("bm-renderer").value : "canvas"; var loop = wrapperAttributes.getNamedItem("data-anim-loop") ? wrapperAttributes.getNamedItem("data-anim-loop").value : wrapperAttributes.getNamedItem("data-bm-loop") ? wrapperAttributes.getNamedItem("data-bm-loop").value : wrapperAttributes.getNamedItem("bm-loop") ? wrapperAttributes.getNamedItem("bm-loop").value : ""; if (loop === "false") { params.loop = false; } else if (loop === "true") { params.loop = true; } else if (loop !== "") { params.loop = parseInt(loop, 10); } var autoplay = wrapperAttributes.getNamedItem("data-anim-autoplay") ? wrapperAttributes.getNamedItem("data-anim-autoplay").value : wrapperAttributes.getNamedItem("data-bm-autoplay") ? wrapperAttributes.getNamedItem("data-bm-autoplay").value : wrapperAttributes.getNamedItem("bm-autoplay") ? wrapperAttributes.getNamedItem("bm-autoplay").value : true; params.autoplay = autoplay !== "false"; params.name = wrapperAttributes.getNamedItem("data-name") ? wrapperAttributes.getNamedItem("data-name").value : wrapperAttributes.getNamedItem("data-bm-name") ? wrapperAttributes.getNamedItem("data-bm-name").value : wrapperAttributes.getNamedItem("bm-name") ? wrapperAttributes.getNamedItem("bm-name").value : ""; var prerender = wrapperAttributes.getNamedItem("data-anim-prerender") ? wrapperAttributes.getNamedItem("data-anim-prerender").value : wrapperAttributes.getNamedItem("data-bm-prerender") ? wrapperAttributes.getNamedItem("data-bm-prerender").value : wrapperAttributes.getNamedItem("bm-prerender") ? wrapperAttributes.getNamedItem("bm-prerender").value : ""; if (prerender === "false") { params.prerender = false; } this.setParams(params); }; AnimationItem.prototype.includeLayers = function(data) { if (data.op > this.animationData.op) { this.animationData.op = data.op; this.totalFrames = Math.floor(data.op - this.animationData.ip); } var layers = this.animationData.layers; var i; var len = layers.length; var newLayers = data.layers; var j; var jLen = newLayers.length; for (j = 0; j < jLen; j += 1) { i = 0; while (i < len) { if (layers[i].id === newLayers[j].id) { layers[i] = newLayers[j]; break; } i += 1; } } if (data.chars || data.fonts) { this.renderer.globalData.fontManager.addChars(data.chars); this.renderer.globalData.fontManager.addFonts(data.fonts, this.renderer.globalData.defs); } if (data.assets) { len = data.assets.length; for (i = 0; i < len; i += 1) { this.animationData.assets.push(data.assets[i]); } } this.animationData.__complete = false; dataManager.completeAnimation(this.animationData, this.onSegmentComplete); }; AnimationItem.prototype.onSegmentComplete = function(data) { this.animationData = data; var expressionsPlugin2 = getExpressionsPlugin(); if (expressionsPlugin2) { expressionsPlugin2.initExpressions(this); } this.loadNextSegment(); }; AnimationItem.prototype.loadNextSegment = function() { var segments = this.animationData.segments; if (!segments || segments.length === 0 || !this.autoloadSegments) { this.trigger("data_ready"); this.timeCompleted = this.totalFrames; return; } var segment = segm