x_ite
Version:
X_ITE X3D Browser — View and Manipulate X3D, VRML, glTF and Other 3D Sources in HTML
1,451 lines (1,210 loc) • 3.18 MB
JavaScript
/* X_ITE v15.0.3 */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["X3D"] = factory();
else
root["X3D"] = factory();
})(self, () => {
return /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 447
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
const Namespace = { };
Object .defineProperty (Namespace, "add",
{
value (name, module)
{
if (Namespace .hasOwnProperty (name))
{
console .error (new Error (`Namespace: "${name}" already exists.`));
return module;
}
const X3D = window [Symbol .for ("X_ITE.X3D")];
if (X3D)
X3D [name] = module;
// For x_ite.js:
return Namespace [name] = module;
},
});
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Namespace .add ("Namespace", Namespace));
/***/ },
/***/ 143
(module, exports) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*
SuperGif
Example usage:
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" />
<script type="text/javascript">
$$('img').each(function (img_tag) {
if (/.*\.gif/.test(img_tag.src)) {
var rub = new SuperGif({ gif: img_tag } );
rub.load();
}
});
</script>
Image tag attributes:
rel:animated_src - If this url is specified, it's loaded into the player instead of src.
This allows a preview frame to be shown until animated gif data is streamed into the canvas
rel:auto_play - Defaults to 1 if not specified. If set to zero, a call to the play() method is needed
Constructor options args
gif Required. The DOM element of an img tag.
loop_mode Optional. Setting this to false will force disable looping of the gif.
auto_play Optional. Same as the rel:auto_play attribute above, this arg overrides the img tag info.
max_width Optional. Scale images over max_width down to max_width. Helpful with mobile.
on_end Optional. Add a callback for when the gif reaches the end of a single loop (one iteration). The first argument passed will be the gif HTMLElement.
loop_delay Optional. The amount of time to pause (in ms) after each single loop (iteration).
draw_while_loading Optional. Determines whether the gif will be drawn to the canvas whilst it is loaded.
show_progress_bar Optional. Only applies when draw_while_loading is set to true.
on_error Optional. Add a callback for when a load error occurs.
Instance methods
// loading
load( callback ) Loads the gif specified by the src or rel:animated_src sttributie of the img tag into a canvas element and then calls callback if one is passed
load_url( src, callback ) Loads the gif file specified in the src argument into a canvas element and then calls callback if one is passed
// play controls
play - Start playing the gif
pause - Stop playing the gif
move_to(i) - Move to frame i of the gif
move_relative(i) - Move i frames ahead (or behind if i < 0)
// getters
get_canvas The canvas element that the gif is playing in. Handy for assigning event handlers to.
get_playing Whether or not the gif is currently playing
get_loading Whether or not the gif has finished loading/parsing
get_auto_play Whether or not the gif is set to play automatically
get_length The number of frames in the gif
get_current_frame The index of the currently displayed frame of the gif
get_frames An array containing the data for all parsed frames
get_duration Returns the duration of the gif in hundredths of a second (standard for GIF spec)
get_duration_ms Returns the duration of the gif in milliseconds
For additional customization (viewport inside iframe) these params may be passed:
c_w, c_h - width and height of canvas
vp_t, vp_l, vp_ w, vp_h - top, left, width and height of the viewport
A bonus: few articles to understand what is going on
http://enthusiasms.org/post/16976438906
http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
http://humpy77.deviantart.com/journal/Frame-Delay-Times-for-Animated-GIFs-214150546
*/
(function (root, factory) {
if (true) {
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else // removed by dead control flow
{}
}(this, function () {
// Generic functions
var bitsToNum = function (ba) {
return ba.reduce(function (s, n) {
return s * 2 + n;
}, 0);
};
var byteToBitArr = function (bite) {
var a = [];
for (var i = 7; i >= 0; i--) {
a.push( !! (bite & (1 << i)));
}
return a;
};
// Stream
/**
* @constructor
*/
// Make compiler happy.
var Stream = function (data) {
this.data = data;
this.len = this.data.length;
this.pos = 0;
this.readByte = function () {
if (this.pos >= this.data.length) {
throw new Error('Attempted to read past end of stream.');
}
if (data instanceof Uint8Array)
return data[this.pos++];
else
return data.charCodeAt(this.pos++) & 0xFF;
};
this.readBytes = function (n) {
var bytes = [];
for (var i = 0; i < n; i++) {
bytes.push(this.readByte());
}
return bytes;
};
this.read = function (n) {
var s = '';
for (var i = 0; i < n; i++) {
s += String.fromCharCode(this.readByte());
}
return s;
};
this.readUnsigned = function () { // Little-endian.
var a = this.readBytes(2);
return (a[1] << 8) + a[0];
};
};
var lzwDecode = function (minCodeSize, data) {
// TODO: Now that the GIF parser is a bit different, maybe this should get an array of bytes instead of a String?
var pos = 0; // Maybe this streaming thing should be merged with the Stream?
var readCode = function (size) {
var code = 0;
for (var i = 0; i < size; i++) {
if (data.charCodeAt(pos >> 3) & (1 << (pos & 7))) {
code |= 1 << i;
}
pos++;
}
return code;
};
var output = [];
var clearCode = 1 << minCodeSize;
var eoiCode = clearCode + 1;
var codeSize = minCodeSize + 1;
var dict = [];
var clear = function () {
dict = [];
codeSize = minCodeSize + 1;
for (var i = 0; i < clearCode; i++) {
dict[i] = [i];
}
dict[clearCode] = [];
dict[eoiCode] = null;
};
var code;
var last;
while (true) {
last = code;
code = readCode(codeSize);
if (code === clearCode) {
clear();
continue;
}
if (code === eoiCode) break;
if (code < dict.length) {
if (last !== clearCode) {
dict.push(dict[last].concat(dict[code][0]));
}
}
else {
if (code !== dict.length) throw new Error('Invalid LZW code.');
dict.push(dict[last].concat(dict[last][0]));
}
output.push.apply(output, dict[code]);
if (dict.length === (1 << codeSize) && codeSize < 12) {
// If we're at the last code and codeSize is 12, the next code will be a clearCode, and it'll be 12 bits long.
codeSize++;
}
}
// I don't know if this is technically an error, but some GIFs do it.
//if (Math.ceil(pos / 8) !== data.length) throw new Error('Extraneous LZW bytes.');
return output;
};
// The actual parsing; returns an object with properties.
var parseGIF = function (st, handler) {
handler || (handler = {});
// LZW (GIF-specific)
var parseCT = function (entries) { // Each entry is 3 bytes, for RGB.
var ct = [];
for (var i = 0; i < entries; i++) {
ct.push(st.readBytes(3));
}
return ct;
};
var readSubBlocks = function () {
var size, data;
data = '';
do {
size = st.readByte();
data += st.read(size);
} while (size !== 0);
return data;
};
var parseHeader = function () {
var hdr = {};
hdr.sig = st.read(3);
hdr.ver = st.read(3);
if (hdr.sig !== 'GIF') throw new Error('Not a GIF file.'); // XXX: This should probably be handled more nicely.
hdr.width = st.readUnsigned();
hdr.height = st.readUnsigned();
var bits = byteToBitArr(st.readByte());
hdr.gctFlag = bits.shift();
hdr.colorRes = bitsToNum(bits.splice(0, 3));
hdr.sorted = bits.shift();
hdr.gctSize = bitsToNum(bits.splice(0, 3));
hdr.bgColor = st.readByte();
hdr.pixelAspectRatio = st.readByte(); // if not 0, aspectRatio = (pixelAspectRatio + 15) / 64
if (hdr.gctFlag) {
hdr.gct = parseCT(1 << (hdr.gctSize + 1));
}
handler.hdr && handler.hdr(hdr);
};
var parseExt = function (block) {
var parseGCExt = function (block) {
var blockSize = st.readByte(); // Always 4
var bits = byteToBitArr(st.readByte());
block.reserved = bits.splice(0, 3); // Reserved; should be 000.
block.disposalMethod = bitsToNum(bits.splice(0, 3));
block.userInput = bits.shift();
block.transparencyGiven = bits.shift();
block.delayTime = st.readUnsigned();
block.transparencyIndex = st.readByte();
block.terminator = st.readByte();
handler.gce && handler.gce(block);
};
var parseComExt = function (block) {
block.comment = readSubBlocks();
handler.com && handler.com(block);
};
var parsePTExt = function (block) {
// No one *ever* uses this. If you use it, deal with parsing it yourself.
var blockSize = st.readByte(); // Always 12
block.ptHeader = st.readBytes(12);
block.ptData = readSubBlocks();
handler.pte && handler.pte(block);
};
var parseAppExt = function (block) {
var parseNetscapeExt = function (block) {
var blockSize = st.readByte(); // Always 3
block.unknown = st.readByte(); // ??? Always 1? What is this?
block.iterations = st.readUnsigned();
block.terminator = st.readByte();
handler.app && handler.app.NETSCAPE && handler.app.NETSCAPE(block);
};
var parseUnknownAppExt = function (block) {
block.appData = readSubBlocks();
// FIXME: This won't work if a handler wants to match on any identifier.
handler.app && handler.app[block.identifier] && handler.app[block.identifier](block);
};
var blockSize = st.readByte(); // Always 11
block.identifier = st.read(8);
block.authCode = st.read(3);
switch (block.identifier) {
case 'NETSCAPE':
parseNetscapeExt(block);
break;
default:
parseUnknownAppExt(block);
break;
}
};
var parseUnknownExt = function (block) {
block.data = readSubBlocks();
handler.unknown && handler.unknown(block);
};
block.label = st.readByte();
switch (block.label) {
case 0xF9:
block.extType = 'gce';
parseGCExt(block);
break;
case 0xFE:
block.extType = 'com';
parseComExt(block);
break;
case 0x01:
block.extType = 'pte';
parsePTExt(block);
break;
case 0xFF:
block.extType = 'app';
parseAppExt(block);
break;
default:
block.extType = 'unknown';
parseUnknownExt(block);
break;
}
};
var parseImg = function (img) {
var deinterlace = function (pixels, width) {
// Of course this defeats the purpose of interlacing. And it's *probably*
// the least efficient way it's ever been implemented. But nevertheless...
var newPixels = new Array(pixels.length);
var rows = pixels.length / width;
var cpRow = function (toRow, fromRow) {
var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
};
// See appendix E.
var offsets = [0, 4, 2, 1];
var steps = [8, 8, 4, 2];
var fromRow = 0;
for (var pass = 0; pass < 4; pass++) {
for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
cpRow(toRow, fromRow)
fromRow++;
}
}
return newPixels;
};
img.leftPos = st.readUnsigned();
img.topPos = st.readUnsigned();
img.width = st.readUnsigned();
img.height = st.readUnsigned();
var bits = byteToBitArr(st.readByte());
img.lctFlag = bits.shift();
img.interlaced = bits.shift();
img.sorted = bits.shift();
img.reserved = bits.splice(0, 2);
img.lctSize = bitsToNum(bits.splice(0, 3));
if (img.lctFlag) {
img.lct = parseCT(1 << (img.lctSize + 1));
}
img.lzwMinCodeSize = st.readByte();
var lzwData = readSubBlocks();
img.pixels = lzwDecode(img.lzwMinCodeSize, lzwData);
if (img.interlaced) { // Move
img.pixels = deinterlace(img.pixels, img.width);
}
handler.img && handler.img(img);
};
var parseBlock = function () {
var block = {};
block.sentinel = st.readByte();
switch (String.fromCharCode(block.sentinel)) { // For ease of matching
case '!':
block.type = 'ext';
parseExt(block);
break;
case ',':
block.type = 'img';
parseImg(block);
break;
case ';':
block.type = 'eof';
handler.eof && handler.eof(block);
break;
default:
throw new Error('Unknown block: 0x' + block.sentinel.toString(16)); // TODO: Pad this with a 0.
}
if (block.type !== 'eof') setTimeout(parseBlock, 0);
};
var parse = function () {
parseHeader();
setTimeout(parseBlock, 0);
};
parse();
};
var SuperGif = function ( opts ) {
var options = {
//viewport position
vp_l: 0,
vp_t: 0,
vp_w: null,
vp_h: null,
//canvas sizes
c_w: null,
c_h: null
};
for (var i in opts ) { options[i] = opts[i] }
if (options.vp_w && options.vp_h) options.is_vp = true;
var stream;
var hdr;
var loadError = null;
var loading = false;
var transparency = null;
var delay = null;
var disposalMethod = null;
var disposalRestoreFromIdx = null;
var lastDisposalMethod = null;
var frame = null;
var lastImg = null;
var playing = true;
var forward = true;
var ctx_scaled = false;
var frames = [];
var frameOffsets = []; // elements have .x and .y properties
var gif = options.gif;
if (typeof options.auto_play == 'undefined')
options.auto_play = (!gif.getAttribute('rel:auto_play') || gif.getAttribute('rel:auto_play') == '1');
var onEndListener = (options.hasOwnProperty('on_end') ? options.on_end : null);
var onErrorListener = (options.hasOwnProperty('on_error') ? options.on_error : null);
var loopDelay = (options.hasOwnProperty('loop_delay') ? options.loop_delay : 0);
var overrideLoopMode = (options.hasOwnProperty('loop_mode') ? options.loop_mode : 'auto');
var drawWhileLoading = (options.hasOwnProperty('draw_while_loading') ? options.draw_while_loading : true);
var showProgressBar = drawWhileLoading ? (options.hasOwnProperty('show_progress_bar') ? options.show_progress_bar : true) : false;
var progressBarHeight = (options.hasOwnProperty('progressbar_height') ? options.progressbar_height : 25);
var progressBarBackgroundColor = (options.hasOwnProperty('progressbar_background_color') ? options.progressbar_background_color : 'rgba(255,255,255,0.4)');
var progressBarForegroundColor = (options.hasOwnProperty('progressbar_foreground_color') ? options.progressbar_foreground_color : 'rgba(255,0,22,.8)');
var clear = function () {
transparency = null;
delay = null;
lastDisposalMethod = disposalMethod;
disposalMethod = null;
frame = null;
};
// XXX: There's probably a better way to handle catching exceptions when
// callbacks are involved.
var doParse = function () {
try {
parseGIF(stream, handler);
}
catch (err) {
doLoadError('parse');
}
};
var doText = function (text) {
toolbar.innerHTML = text; // innerText? Escaping? Whatever.
toolbar.style.visibility = 'visible';
};
var setSizes = function(w, h) {
canvas.width = w * get_canvas_scale();
canvas.height = h * get_canvas_scale();
toolbar.style.minWidth = ( w * get_canvas_scale() ) + 'px';
tmpCanvas.width = w;
tmpCanvas.height = h;
tmpCanvas.style.width = w + 'px';
tmpCanvas.style.height = h + 'px';
tmpCanvas.getContext('2d', { willReadFrequently: true }).setTransform(1, 0, 0, 1, 0, 0);
};
var setFrameOffset = function(frame, offset) {
if (!frameOffsets[frame]) {
frameOffsets[frame] = offset;
return;
}
if (typeof offset.x !== 'undefined') {
frameOffsets[frame].x = offset.x;
}
if (typeof offset.y !== 'undefined') {
frameOffsets[frame].y = offset.y;
}
};
var doShowProgress = function (pos, length, draw) {
if (draw && showProgressBar) {
var height = progressBarHeight;
var left, mid, top, width;
if (options.is_vp) {
if (!ctx_scaled) {
top = (options.vp_t + options.vp_h - height);
height = height;
left = options.vp_l;
mid = left + (pos / length) * options.vp_w;
width = canvas.width;
} else {
top = (options.vp_t + options.vp_h - height) / get_canvas_scale();
height = height / get_canvas_scale();
left = (options.vp_l / get_canvas_scale() );
mid = left + (pos / length) * (options.vp_w / get_canvas_scale());
width = canvas.width / get_canvas_scale();
}
//some debugging, draw rect around viewport
if (false) // removed by dead control flow
{ var w, h, l, t; }
}
else {
top = (canvas.height - height) / (ctx_scaled ? get_canvas_scale() : 1);
mid = ((pos / length) * canvas.width) / (ctx_scaled ? get_canvas_scale() : 1);
width = canvas.width / (ctx_scaled ? get_canvas_scale() : 1 );
height /= ctx_scaled ? get_canvas_scale() : 1;
}
ctx.fillStyle = progressBarBackgroundColor;
ctx.fillRect(mid, top, width - mid, height);
ctx.fillStyle = progressBarForegroundColor;
ctx.fillRect(0, top, mid, height);
}
};
var doLoadError = function (originOfError) {
var drawError = function () {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.moveTo(0, 0);
ctx.lineTo(options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);
ctx.moveTo(0, options.c_h ? options.c_h : hdr.height);
ctx.lineTo(options.c_w ? options.c_w : hdr.width, 0);
ctx.stroke();
};
loadError = originOfError;
hdr = {
width: gif.width,
height: gif.height
}; // Fake header.
frames = [];
drawError();
if (originOfError)
onErrorListener ?.(originOfError);
};
var doHdr = function (_hdr) {
hdr = _hdr;
setSizes(hdr.width, hdr.height)
};
var doGCE = function (gce) {
pushFrame();
clear();
transparency = gce.transparencyGiven ? gce.transparencyIndex : null;
delay = gce.delayTime;
disposalMethod = gce.disposalMethod;
// We don't have much to do with the rest of GCE.
};
var pushFrame = function () {
if (!frame) return;
frames.push({
data: frame.getImageData(0, 0, hdr.width, hdr.height),
delay: delay
});
frameOffsets.push({ x: 0, y: 0 });
};
var doImg = function (img) {
if (!frame) frame = tmpCanvas.getContext('2d', { willReadFrequently: true });
var currIdx = frames.length;
//ct = color table, gct = global color table
var ct = img.lctFlag ? img.lct : hdr.gct; // TODO: What if neither exists?
/*
Disposal method indicates the way in which the graphic is to
be treated after being displayed.
Values : 0 - No disposal specified. The decoder is
not required to take any action.
1 - Do not dispose. The graphic is to be left
in place.
2 - Restore to background color. The area used by the
graphic must be restored to the background color.
3 - Restore to previous. The decoder is required to
restore the area overwritten by the graphic with
what was there prior to rendering the graphic.
Importantly, "previous" means the frame state
after the last disposal of method 0, 1, or 2.
*/
if (currIdx > 0) {
if (lastDisposalMethod === 3) {
// Restore to previous
// If we disposed every frame including first frame up to this point, then we have
// no composited frame to restore to. In this case, restore to background instead.
if (disposalRestoreFromIdx !== null) {
frame.putImageData(frames[disposalRestoreFromIdx].data, 0, 0);
} else {
frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);
}
} else {
disposalRestoreFromIdx = currIdx - 1;
}
if (lastDisposalMethod === 2) {
// Restore to background color
// Browser implementations historically restore to transparent; we do the same.
// http://www.wizards-toolkit.org/discourse-server/viewtopic.php?f=1&t=21172#p86079
frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);
}
}
// else, Undefined/Do not dispose.
// frame contains final pixel data from the last frame; do nothing
//Get existing pixels for img region after applying disposal method
var imgData = frame.getImageData(img.leftPos, img.topPos, img.width, img.height);
//apply color table colors
img.pixels.forEach(function (pixel, i) {
// imgData.data === [R,G,B,A,R,G,B,A,...]
if (pixel !== transparency) {
imgData.data[i * 4 + 0] = ct[pixel][0];
imgData.data[i * 4 + 1] = ct[pixel][1];
imgData.data[i * 4 + 2] = ct[pixel][2];
imgData.data[i * 4 + 3] = 255; // Opaque.
}
});
frame.putImageData(imgData, img.leftPos, img.topPos);
if (!ctx_scaled) {
ctx.scale(get_canvas_scale(),get_canvas_scale());
ctx_scaled = true;
}
// We could use the on-page canvas directly, except that we draw a progress
// bar for each image chunk (not just the final image).
if (drawWhileLoading) {
ctx.drawImage(tmpCanvas, 0, 0);
drawWhileLoading = options.auto_play;
}
lastImg = img;
};
var player = (function () {
var i = -1;
var iterationCount = 0;
var showingInfo = false;
var pinned = false;
/**
* Gets the index of the frame "up next".
* @returns {number}
*/
var getNextFrameNo = function () {
var delta = (forward ? 1 : -1);
return (i + delta + frames.length) % frames.length;
};
var stepFrame = function (amount) { // XXX: Name is confusing.
i = i + amount;
putFrame();
};
var step = (function () {
var stepping = false;
var completeLoop = function () {
if (onEndListener !== null)
onEndListener(gif);
iterationCount++;
if (overrideLoopMode !== false || iterationCount < 0) {
doStep();
} else {
stepping = false;
playing = false;
}
};
var doStep = function () {
stepping = playing;
if (!stepping) return;
stepFrame(1);
var delay = frames[i].delay * 10;
if (!delay) delay = 100; // FIXME: Should this even default at all? What should it be?
var nextFrameNo = getNextFrameNo();
if (nextFrameNo === 0) {
delay += loopDelay;
setTimeout(completeLoop, delay);
} else {
setTimeout(doStep, delay);
}
};
return function () {
if (!stepping) setTimeout(doStep, 0);
};
}());
var putFrame = function () {
var offset;
i = parseInt(i, 10);
if (i > frames.length - 1){
i = 0;
}
if (i < 0){
i = 0;
}
offset = frameOffsets[i];
tmpCanvas.getContext("2d", { willReadFrequently: true }).putImageData(frames[i].data, offset.x, offset.y);
ctx.globalCompositeOperation = "copy";
ctx.drawImage(tmpCanvas, 0, 0);
};
var play = function () {
playing = true;
step();
};
var pause = function () {
playing = false;
};
return {
init: function () {
if (loadError) return;
if ( ! (options.c_w && options.c_h) ) {
ctx.scale(get_canvas_scale(),get_canvas_scale());
}
if (options.auto_play) {
step();
}
else {
i = 0;
putFrame();
}
},
step: step,
play: play,
pause: pause,
playing: playing,
move_relative: stepFrame,
current_frame: function() { return i; },
length: function() { return frames.length },
move_to: function ( frame_idx ) {
i = frame_idx;
putFrame();
}
}
}());
var doDecodeProgress = function (draw) {
doShowProgress(stream.pos, stream.data.length, draw);
};
var doNothing = function () {};
/**
* @param{boolean=} draw Whether to draw progress bar or not; this is not idempotent because of translucency.
* Note that this means that the text will be unsynchronized with the progress bar on non-frames;
* but those are typically so small (GCE etc.) that it doesn't really matter. TODO: Do this properly.
*/
var withProgress = function (fn, draw) {
return function (block) {
fn(block);
doDecodeProgress(draw);
};
};
var handler = {
hdr: withProgress(doHdr),
gce: withProgress(doGCE),
com: withProgress(doNothing),
// I guess that's all for now.
app: {
// TODO: Is there much point in actually supporting iterations?
NETSCAPE: withProgress(doNothing)
},
img: withProgress(doImg, true),
eof: function (block) {
//toolbar.style.display = '';
pushFrame();
doDecodeProgress(false);
if ( ! (options.c_w && options.c_h) ) {
canvas.width = hdr.width * get_canvas_scale();
canvas.height = hdr.height * get_canvas_scale();
}
player.init();
loading = false;
if (load_callback) {
load_callback(gif);
}
}
};
var init = function () {
var parent = gif.parentNode;
var div = document.createElement('div');
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d', { willReadFrequently: true });
toolbar = document.createElement('div');
tmpCanvas = document.createElement('canvas');
div.width = canvas.width = gif.width;
div.height = canvas.height = gif.height;
toolbar.style.minWidth = gif.width + 'px';
div.className = 'jsgif';
toolbar.className = 'jsgif_toolbar';
div.appendChild(canvas);
div.appendChild(toolbar);
parent.insertBefore(div, gif);
parent.removeChild(gif);
if (options.c_w && options.c_h) setSizes(options.c_w, options.c_h);
initialized=true;
};
var get_canvas_scale = function() {
var scale;
if (options.max_width && hdr && hdr.width > options.max_width) {
scale = options.max_width / hdr.width;
}
else {
scale = 1;
}
return scale;
}
var canvas, ctx, toolbar, tmpCanvas;
var initialized = false;
var load_callback = false;
var load_setup = function(callback) {
if (loading) return false;
if (callback) load_callback = callback;
else load_callback = false;
loading = true;
frames = [];
clear();
disposalRestoreFromIdx = null;
lastDisposalMethod = null;
frame = null;
lastImg = null;
return true;
}
var calculateDuration = function() {
return frames.reduce(function(duration, frame) {
return duration + frame.delay;
}, 0);
}
return {
// play controls
play: player.play,
pause: player.pause,
move_relative: player.move_relative,
move_to: player.move_to,
// getters for instance vars
get_playing : function() { return playing },
get_canvas : function() { return canvas },
get_canvas_scale : function() { return get_canvas_scale() },
get_loading : function() { return loading },
get_auto_play : function() { return options.auto_play },
get_length : function() { return player.length() },
get_frames : function() { return frames },
get_duration : function() { return calculateDuration() },
get_duration_ms : function() { return calculateDuration() * 10 },
get_current_frame: function() { return player.current_frame() },
load_url: function(src,callback){
if (!load_setup(callback)) return;
var h = new XMLHttpRequest();
// new browsers (XMLHttpRequest2-compliant)
h.open('GET', src, true);
if ('overrideMimeType' in h) {
h.overrideMimeType('text/plain; charset=x-user-defined');
}
// old browsers (XMLHttpRequest-compliant)
else if ('responseType' in h) {
h.responseType = 'arraybuffer';
}
// IE9 (Microsoft.XMLHTTP-compliant)
else {
h.setRequestHeader('Accept-Charset', 'x-user-defined');
}
h.onloadstart = function() {
// Wait until connection is opened to replace the gif element with a canvas to avoid a blank img
if (!initialized) init();
};
h.onload = function(e) {
if (this.status != 200) {
doLoadError('xhr - response');
}
// emulating response field for IE9
if (!('response' in this)) {
this.response = new VBArray(this.responseText).toArray().map(String.fromCharCode).join('');
}
var data = this.response;
if (data.toString().indexOf("ArrayBuffer") > 0) {
data = new Uint8Array(data);
}
stream = new Stream(data);
setTimeout(doParse, 0);
};
h.onprogress = function (e) {
if (e.lengthComputable) doShowProgress(e.loaded, e.total, true);
};
h.onerror = function() { doLoadError('xhr'); };
h.send();
},
load: function (callback) {
this.load_url(gif.getAttribute('rel:animated_src') || gif.src,callback);
},
load_raw: function(arr, callback) {
if (!load_setup(callback)) return;
if (!initialized) init();
stream = new Stream(arr);
setTimeout(doParse, 0);
},
set_frame_offset: setFrameOffset
};
};
return SuperGif;
}));
/***/ },
/***/ 949
(module) {
(function webpackUniversalModuleDefinition(root, factory) {
if(true)
module.exports = factory();
else // removed by dead control flow
{}
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __nested_webpack_require_529__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_529__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __nested_webpack_require_529__.m = modules;
/******/ // expose the module cache
/******/ __nested_webpack_require_529__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __nested_webpack_require_529__.p = "";
/******/ // Load entry module and return exports
/******/ return __nested_webpack_require_529__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __nested_webpack_require_1730__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isNotPNG = isNotPNG;
exports.isNotAPNG = isNotAPNG;
exports.default = parseAPNG;
var _crc = __nested_webpack_require_1730__(1);
var _crc2 = _interopRequireDefault(_crc);
var _structs = __nested_webpack_require_1730__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var errNotPNG = new Error('Not a PNG');
var errNotAPNG = new Error('Not an animated PNG');
function isNotPNG(err) {
return err === errNotPNG;
}
function isNotAPNG(err) {
return err === errNotAPNG;
}
// '\x89PNG\x0d\x0a\x1a\x0a'
var PNGSignature = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
/**
* Parse APNG data
* @param {ArrayBuffer} buffer
* @return {APNG|Error}
*/
function parseAPNG(buffer) {
var bytes = new Uint8Array(buffer);
if (Array.prototype.some.call(PNGSignature, function (b, i) {
return b !== bytes[i];
})) {
return errNotPNG;
}
// fast animation test
var isAnimated = false;
eachChunk(bytes, function (type) {
return !(isAnimated = type === 'acTL');
});
if (!isAnimated) {
return errNotAPNG;
}
var preDataParts = [],
postDataParts = [];
var headerDataBytes = null,
frame = null,
frameNumber = 0,
apng = new _structs.APNG();
eachChunk(bytes, function (type, bytes, off, length) {
var dv = new DataView(bytes.buffer);
switch (type) {
case 'IHDR':
headerDataBytes = bytes.subarray(off + 8, off + 8 + length);
apng.width = dv.getUint32(off + 8);
apng.height = dv.getUint32(off + 12);
break;
case 'acTL':
apng.numPlays = dv.getUint32(off + 8 + 4);
break;
case 'fcTL':
if (frame) {
apng.frames.push(frame);
frameNumber++;
}
frame = new _structs.Frame();
frame.width = dv.getUint32(off + 8 + 4);
frame.height = dv.getUint32(off + 8 + 8);
frame.left = dv.getUint32(off + 8 + 12);
frame.top = dv.getUint32(off + 8 + 16);
var delayN = dv.getUint16(off + 8 + 20);
var delayD = dv.getUint16(off + 8 + 22);
if (delayD === 0) {
delayD = 100;
}
frame.delay = 1000 * delayN / delayD;
// https://bugzilla.mozilla.org/show_bug.cgi?id=125137
// https://bugzilla.mozilla.org/show_bug.cgi?id=139677
// https://bugzilla.mozilla.org/show_bug.cgi?id=207059
if (frame.delay <= 10) {
frame.delay = 100;
}
apng.playTime += frame.delay;
frame.disposeOp = dv.getUint8(off + 8 + 24);
frame.blendOp = dv.getUint8(off + 8 + 25);
frame.dataParts = [];
if (frameNumber === 0 && frame.disposeOp === 2) {
frame.disposeOp = 1;
}
break;
case 'fdAT':
if (frame) {
frame.dataParts.push(bytes.subarray(off + 8 + 4, off + 8 + length));
}
break;
case 'IDAT':
if (frame) {
frame.dataParts.push(bytes.subarray(off + 8, off + 8 + length));
}
break;
case 'IEND':
postDataParts.push(subBuffer(bytes, off, 12 + length));
break;
default:
preDataParts.push(subBuffer(bytes, off, 12 + length));
}
});
if (frame) {
apng.frames.push(frame);
}
if (apng.frames.length == 0) {
return errNotAPNG;
}
var preBlob = new Blob(preDataParts),
postBlob = new Blob(postDataParts);
apng.frames.forEach(function (frame) {
var bb = [];
bb.push(PNGSignature);
headerDataBytes.set(makeDWordArray(frame.width), 0);
headerDataBytes.set(makeDWordArray(frame.height), 4);
bb.push(makeChunkBytes('IHDR', headerDataBytes));
bb.push(preBlob);
frame.dataParts.forEach(function (p) {
return bb.push(makeChunkBytes('IDAT', p));
});
bb.push(postBlob);
frame.imageData = new Blob(bb, { 'type': 'image/png' });
delete frame.dataParts;
bb = null;
});
return apng;
}
/**
* @param {Uint8Array} bytes
* @param {function(string, Uint8Array, int, int): boolean} callback
*/
function eachChunk(bytes, callback) {
var dv = new DataView(bytes.buffer);
var off = 8,
type = void 0,
length = void 0,
res = void 0;
do {
length = dv.getUint32(off);
type = readString(bytes, off + 4, 4);
res = callback(type, bytes, off, length);
off += 12 + length;
} while (res !== false && type != 'IEND' && off < bytes.length);
}
/**
*
* @param {Uint8Array} bytes
* @param {number} off
* @param {number} length
* @return {string}
*/
function readString(bytes, off, length) {
var chars = Array.prototype.slice.call(bytes.subarray(off, off + length));
return String.fromCharCode.apply(String, chars);
}
/**
*
* @param {string} x
* @return {Uint8Array}
*/
function makeStringArray(x) {
var res = new Uint8Array(x.length);
for (var i = 0; i < x.length; i++) {
res[i] = x.charCodeAt(i);
}
return res;
}
/**
* @param {Uint8Array} bytes
* @param {int} start
* @param {int} length
* @return {Uint8Array}
*/
function subBuffer(bytes, start, length) {
var a = new Uint8Array(length);
a.set(bytes.subarray(start, start + length));
return a;
}
/**
* @param {string} type
* @param {Uint8Array} dataBytes
* @return {Uint8Array}
*/
var makeChunkBytes = function makeChunkBytes(type, dataBytes) {
var crcLen = type.length + dataBytes.length;
var bytes = new Uint8Array(crcLen + 8);
var dv = new DataView(bytes.buffer);
dv.setUint32(0, dataBytes.length);
bytes.set(makeStringArray(type), 4);
bytes.set(dataBytes, 8);
var crc = (0, _crc2.default)(bytes, 4, crcLen);
dv.setUint32(crcLen + 4, crc);
return bytes;
};
var makeDWordArray = function makeDWordArray(x) {
return new Uint8Array([x >>> 24 & 0xff, x >>> 16 & 0xff, x >>> 8 & 0xff, x & 0xff]);
};
/***/ }),
/* 1 */
/***/ (function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (bytes) {
var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var length = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : bytes.length - start;
var crc = -1;
for (var _i = start, l = start + length; _i < l; _i++) {
crc = crc >>> 8 ^ table[(crc ^ bytes[_i]) & 0xFF];
}
return crc ^ -1;
};
var table = new Uint32Array(256);
for (var i = 0; i < 256; i++) {
var c = i;
for (var k = 0; k < 8; k++) {
c = (c & 1) !== 0 ? 0xEDB88320 ^ c >>> 1 : c >>> 1;
}
table[i] = c;
}
/**
*
* @param {Uint8Array} bytes
* @param {number} start
* @param {number} length
* @return {number}
*/
/***/ }),
/* 2 */
/***/ (function(module, exports, __nested_webpack_require_9403__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Frame = exports.APNG = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _player = __nested_webpack_require_9403__(3);
var _player2 = _interopRequireDefault(_player);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* @property {number} currFrameNumber
* @property {Frame} currFrame
* @property {boolean} paused
* @property {boolean} ended
*/
var APNG = exports.APNG = function () {
function APNG() {
_classCallCheck(this, APNG);
this.width = 0;
this.height = 0;
this.numPlays = 0;
this.playTime = 0;
this.frames = [];
}
/** @type {number} */
/** @type {number} */
/** @type {number} */
/** @type {number} */
/** @type {Frame[]} */
_createClass(APNG, [{
key: 'createImages',
/**
*
* @return {Promise.<*>}
*/
value: function createImages() {
return Promise.all(this.frames.map(function (f) {
return f.createImage();
}));
}
/**
*
* @param {CanvasRenderingContext2D} context
* @param {boolean} autoPlay
* @return {Promise.<Player>}
*/
}, {
key: 'getPlayer',
value: function getPlayer(context) {
var _this = this;
var autoPlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return this.createImages().then(function () {
return new _player2.default(_this, contex