@leafer-in/film 0.0.0-stage → 2.3.2

package/dist/film.cjs

@@ -0,0 +1,962 @@
+"use strict";
+
+var draw = require("@leafer-ui/draw");
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+class FilmDecoder {
+    constructor() {
+        this.frames = [];
+        this.decodedIndex = -1;
+    }
+    static register(type, Decoder, force) {
+        FilmDecoder.decoderMap[type] = {
+            Decoder: Decoder,
+            force: force
+        };
+    }
+    static canUse(mimeType) {
+        return __awaiter(this, void 0, void 0, function*() {
+            const {supportMap: supportMap} = this;
+            let canUse = supportMap[mimeType];
+            if (!draw.isUndefined(canUse)) return canUse;
+            if (typeof ImageDecoder === "undefined") return false;
+            canUse = yield ImageDecoder.isTypeSupported(mimeType);
+            return supportMap[mimeType] = canUse;
+        });
+    }
+    createAtlas() {
+        const {width: width, height: height, total: total} = this;
+        if (width * height * total <= FilmDecoder.maxAtlasSize) {
+            const columns = Math.ceil(Math.sqrt(total * height / width));
+            const rows = Math.ceil(total / columns);
+            this.atlasGrid = {
+                x: columns,
+                y: rows
+            };
+            this.atlas = draw.Platform.origin.createCanvas(width * columns, height * rows);
+            this.atlasContext = this.atlas.getContext("2d");
+        }
+    }
+    decodeHeader(data, type) {
+        return __awaiter(this, void 0, void 0, function*() {
+            this.decoder = new ImageDecoder({
+                data: data,
+                type: type
+            });
+            yield this.decoder.tracks.ready;
+            const first = yield this.decodeFrame(0);
+            const {displayWidth: displayWidth, displayHeight: displayHeight} = first.image, {selectedTrack: selectedTrack} = this.decoder.tracks;
+            this.width = displayWidth;
+            this.height = displayHeight;
+            this.total = selectedTrack.frameCount;
+            this.loop = selectedTrack.repetitionCount;
+            this.createAtlas();
+            if (this.atlas) this.mergeFrame(0);
+        });
+    }
+    decodeFrame(frameIndex) {
+        return __awaiter(this, void 0, void 0, function*() {
+            const {frames: frames} = this, frame = frames[frameIndex];
+            if (frame && !frame.decoding) return frame;
+            for (let i = this.decodedIndex + 1; i <= frameIndex; i++) {
+                yield this.decodeOneFrame(i);
+                this.decodedIndex = i;
+            }
+            return frames[frameIndex];
+        });
+    }
+    decodeOneFrame(frameIndex) {
+        return __awaiter(this, void 0, void 0, function*() {
+            return new Promise(resolve => {
+                this.decoder.decode({
+                    frameIndex: frameIndex
+                }).then(result => {
+                    const {image: image} = result;
+                    const frame = {
+                        image: image,
+                        duration: image.duration / 1e3 / 1e3
+                    };
+                    this.frames[frameIndex] = frame;
+                    if (this.atlas) this.mergeFrame(frameIndex);
+                    resolve(frame);
+                });
+            });
+        });
+    }
+    mergeFrame(frameIndex, destoryFrameImage = true) {
+        const frame = this.frames[frameIndex], {atlasGrid: atlasGrid, width: width, height: height} = this;
+        frame.x = frameIndex % atlasGrid.x * width;
+        frame.y = Math.floor(frameIndex / atlasGrid.x) * height;
+        this.atlasContext.drawImage(frame.image, frame.x, frame.y);
+        if (destoryFrameImage) this.destoryFrameImage(frame); else delete frame.image;
+    }
+    render(canvas, x, y, width, height, leaf, playOptions, _imageScaleX, _imageScaleY) {
+        let {nowIndex: nowIndex, paused: paused, speed: speed, pauseIndex: pauseIndex, loop: loop, frameTimer: frameTimer} = playOptions;
+        if (draw.isUndefined(nowIndex)) nowIndex = 0;
+        const {frames: frames} = this, frame = frames[nowIndex];
+        if (this.renderFrame(frame, canvas, x, y, width, height)) {
+            if (frameTimer) return;
+            if (!draw.isUndefined(pauseIndex) && nowIndex === pauseIndex) {
+                playOptions.paused = true;
+                return;
+            }
+            let nextIndex = nowIndex + 1;
+            if (nextIndex >= this.total) {
+                if (this.loop && isFinite(this.loop)) {
+                    loop = (loop || 0) + 1;
+                    if (loop > this.loop) return;
+                    playOptions.loop = loop;
+                }
+                nextIndex = 0;
+            }
+            if (nextIndex < this.total && !frames[nextIndex]) {
+                frames[nextIndex] = {
+                    duration: 0,
+                    decoding: true
+                };
+                this.decodeFrame(nextIndex).finally(() => {
+                    if (this.decodedIndex === this.total - 1) this.destroyDecoder();
+                });
+            }
+            if (paused) return;
+            playOptions.frameTimer = setTimeout(() => {
+                playOptions.nowIndex = nextIndex;
+                delete playOptions.frameTimer;
+                leaf.forceRender();
+            }, frame.duration * (speed || 1) * 1e3);
+        } else {
+            this.renderFrame(frames[nowIndex - 1], canvas, x, y, width, height);
+            leaf.forceRender();
+        }
+    }
+    renderFrame(frame, canvas, x, y, width, height) {
+        const canRender = frame && !frame.decoding, {atlas: atlas} = this;
+        if (canRender) {
+            if (atlas) canvas.drawImage(atlas, frame.x, frame.y, this.width, this.height, x, y, width, height); else canvas.drawImage(frame.image, x, y, width, height);
+        }
+        return canRender;
+    }
+    destoryFrame(frameIndex, deleteIndex = true) {
+        const {frames: frames} = this, frame = frames[frameIndex];
+        if (frame) {
+            this.destoryFrameImage(frame);
+            if (deleteIndex) delete frames[frameIndex];
+        }
+    }
+    destoryFrameImage(frame) {
+        const {image: image} = frame;
+        if (image && image.close) image.close();
+        delete frame.image;
+    }
+    destroyDecoder() {
+        if (this.decoder) {
+            this.decoder.close();
+            this.decoder = null;
+        }
+    }
+    close() {
+        if (this.atlas) this.atlas = this.atlasContext = null;
+        this.frames.forEach((_item, index) => this.destoryFrame(index, false));
+        this.frames.length = 0;
+        this.destroyDecoder();
+    }
+}
+
+FilmDecoder.decoderMap = {};
+
+FilmDecoder.supportMap = {};
+
+FilmDecoder.maxAtlasSize = draw.Platform.image.maxPatternSize;
+
+var omggif = {};
+
+var GifReader_1;
+
+var GifWriter_1;
+
+function GifWriter(buf, width, height, gopts) {
+    var p = 0;
+    var gopts = gopts === undefined ? {} : gopts;
+    var loop_count = gopts.loop === undefined ? null : gopts.loop;
+    var global_palette = gopts.palette === undefined ? null : gopts.palette;
+    if (width <= 0 || height <= 0 || width > 65535 || height > 65535) throw new Error("Width/Height invalid.");
+    function check_palette_and_num_colors(palette) {
+        var num_colors = palette.length;
+        if (num_colors < 2 || num_colors > 256 || num_colors & num_colors - 1) {
+            throw new Error("Invalid code/color length, must be power of 2 and 2 .. 256.");
+        }
+        return num_colors;
+    }
+    buf[p++] = 71;
+    buf[p++] = 73;
+    buf[p++] = 70;
+    buf[p++] = 56;
+    buf[p++] = 57;
+    buf[p++] = 97;
+    var gp_num_colors_pow2 = 0;
+    var background = 0;
+    if (global_palette !== null) {
+        var gp_num_colors = check_palette_and_num_colors(global_palette);
+        while (gp_num_colors >>= 1) ++gp_num_colors_pow2;
+        gp_num_colors = 1 << gp_num_colors_pow2;
+        --gp_num_colors_pow2;
+        if (gopts.background !== undefined) {
+            background = gopts.background;
+            if (background >= gp_num_colors) throw new Error("Background index out of range.");
+            if (background === 0) throw new Error("Background index explicitly passed as 0.");
+        }
+    }
+    buf[p++] = width & 255;
+    buf[p++] = width >> 8 & 255;
+    buf[p++] = height & 255;
+    buf[p++] = height >> 8 & 255;
+    buf[p++] = (global_palette !== null ? 128 : 0) | gp_num_colors_pow2;
+    buf[p++] = background;
+    buf[p++] = 0;
+    if (global_palette !== null) {
+        for (var i = 0, il = global_palette.length; i < il; ++i) {
+            var rgb = global_palette[i];
+            buf[p++] = rgb >> 16 & 255;
+            buf[p++] = rgb >> 8 & 255;
+            buf[p++] = rgb & 255;
+        }
+    }
+    if (loop_count !== null) {
+        if (loop_count < 0 || loop_count > 65535) throw new Error("Loop count invalid.");
+        buf[p++] = 33;
+        buf[p++] = 255;
+        buf[p++] = 11;
+        buf[p++] = 78;
+        buf[p++] = 69;
+        buf[p++] = 84;
+        buf[p++] = 83;
+        buf[p++] = 67;
+        buf[p++] = 65;
+        buf[p++] = 80;
+        buf[p++] = 69;
+        buf[p++] = 50;
+        buf[p++] = 46;
+        buf[p++] = 48;
+        buf[p++] = 3;
+        buf[p++] = 1;
+        buf[p++] = loop_count & 255;
+        buf[p++] = loop_count >> 8 & 255;
+        buf[p++] = 0;
+    }
+    var ended = false;
+    this.addFrame = function(x, y, w, h, indexed_pixels, opts) {
+        if (ended === true) {
+            --p;
+            ended = false;
+        }
+        opts = opts === undefined ? {} : opts;
+        if (x < 0 || y < 0 || x > 65535 || y > 65535) throw new Error("x/y invalid.");
+        if (w <= 0 || h <= 0 || w > 65535 || h > 65535) throw new Error("Width/Height invalid.");
+        if (indexed_pixels.length < w * h) throw new Error("Not enough pixels for the frame size.");
+        var using_local_palette = true;
+        var palette = opts.palette;
+        if (palette === undefined || palette === null) {
+            using_local_palette = false;
+            palette = global_palette;
+        }
+        if (palette === undefined || palette === null) throw new Error("Must supply either a local or global palette.");
+        var num_colors = check_palette_and_num_colors(palette);
+        var min_code_size = 0;
+        while (num_colors >>= 1) ++min_code_size;
+        num_colors = 1 << min_code_size;
+        var delay = opts.delay === undefined ? 0 : opts.delay;
+        var disposal = opts.disposal === undefined ? 0 : opts.disposal;
+        if (disposal < 0 || disposal > 3) throw new Error("Disposal out of range.");
+        var use_transparency = false;
+        var transparent_index = 0;
+        if (opts.transparent !== undefined && opts.transparent !== null) {
+            use_transparency = true;
+            transparent_index = opts.transparent;
+            if (transparent_index < 0 || transparent_index >= num_colors) throw new Error("Transparent color index.");
+        }
+        if (disposal !== 0 || use_transparency || delay !== 0) {
+            buf[p++] = 33;
+            buf[p++] = 249;
+            buf[p++] = 4;
+            buf[p++] = disposal << 2 | (use_transparency === true ? 1 : 0);
+            buf[p++] = delay & 255;
+            buf[p++] = delay >> 8 & 255;
+            buf[p++] = transparent_index;
+            buf[p++] = 0;
+        }
+        buf[p++] = 44;
+        buf[p++] = x & 255;
+        buf[p++] = x >> 8 & 255;
+        buf[p++] = y & 255;
+        buf[p++] = y >> 8 & 255;
+        buf[p++] = w & 255;
+        buf[p++] = w >> 8 & 255;
+        buf[p++] = h & 255;
+        buf[p++] = h >> 8 & 255;
+        buf[p++] = using_local_palette === true ? 128 | min_code_size - 1 : 0;
+        if (using_local_palette === true) {
+            for (var i = 0, il = palette.length; i < il; ++i) {
+                var rgb = palette[i];
+                buf[p++] = rgb >> 16 & 255;
+                buf[p++] = rgb >> 8 & 255;
+                buf[p++] = rgb & 255;
+            }
+        }
+        p = GifWriterOutputLZWCodeStream(buf, p, min_code_size < 2 ? 2 : min_code_size, indexed_pixels);
+        return p;
+    };
+    this.end = function() {
+        if (ended === false) {
+            buf[p++] = 59;
+            ended = true;
+        }
+        return p;
+    };
+    this.getOutputBuffer = function() {
+        return buf;
+    };
+    this.setOutputBuffer = function(v) {
+        buf = v;
+    };
+    this.getOutputBufferPosition = function() {
+        return p;
+    };
+    this.setOutputBufferPosition = function(v) {
+        p = v;
+    };
+}
+
+function GifWriterOutputLZWCodeStream(buf, p, min_code_size, index_stream) {
+    buf[p++] = min_code_size;
+    var cur_subblock = p++;
+    var clear_code = 1 << min_code_size;
+    var code_mask = clear_code - 1;
+    var eoi_code = clear_code + 1;
+    var next_code = eoi_code + 1;
+    var cur_code_size = min_code_size + 1;
+    var cur_shift = 0;
+    var cur = 0;
+    function emit_bytes_to_buffer(bit_block_size) {
+        while (cur_shift >= bit_block_size) {
+            buf[p++] = cur & 255;
+            cur >>= 8;
+            cur_shift -= 8;
+            if (p === cur_subblock + 256) {
+                buf[cur_subblock] = 255;
+                cur_subblock = p++;
+            }
+        }
+    }
+    function emit_code(c) {
+        cur |= c << cur_shift;
+        cur_shift += cur_code_size;
+        emit_bytes_to_buffer(8);
+    }
+    var ib_code = index_stream[0] & code_mask;
+    var code_table = {};
+    emit_code(clear_code);
+    for (var i = 1, il = index_stream.length; i < il; ++i) {
+        var k = index_stream[i] & code_mask;
+        var cur_key = ib_code << 8 | k;
+        var cur_code = code_table[cur_key];
+        if (cur_code === undefined) {
+            cur |= ib_code << cur_shift;
+            cur_shift += cur_code_size;
+            while (cur_shift >= 8) {
+                buf[p++] = cur & 255;
+                cur >>= 8;
+                cur_shift -= 8;
+                if (p === cur_subblock + 256) {
+                    buf[cur_subblock] = 255;
+                    cur_subblock = p++;
+                }
+            }
+            if (next_code === 4096) {
+                emit_code(clear_code);
+                next_code = eoi_code + 1;
+                cur_code_size = min_code_size + 1;
+                code_table = {};
+            } else {
+                if (next_code >= 1 << cur_code_size) ++cur_code_size;
+                code_table[cur_key] = next_code++;
+            }
+            ib_code = k;
+        } else {
+            ib_code = cur_code;
+        }
+    }
+    emit_code(ib_code);
+    emit_code(eoi_code);
+    emit_bytes_to_buffer(1);
+    if (cur_subblock + 1 === p) {
+        buf[cur_subblock] = 0;
+    } else {
+        buf[cur_subblock] = p - cur_subblock - 1;
+        buf[p++] = 0;
+    }
+    return p;
+}
+
+function GifReader(buf) {
+    var p = 0;
+    if (buf[p++] !== 71 || buf[p++] !== 73 || buf[p++] !== 70 || buf[p++] !== 56 || (buf[p++] + 1 & 253) !== 56 || buf[p++] !== 97) {
+        throw new Error("Invalid GIF 87a/89a header.");
+    }
+    var width = buf[p++] | buf[p++] << 8;
+    var height = buf[p++] | buf[p++] << 8;
+    var pf0 = buf[p++];
+    var global_palette_flag = pf0 >> 7;
+    var num_global_colors_pow2 = pf0 & 7;
+    var num_global_colors = 1 << num_global_colors_pow2 + 1;
+    buf[p++];
+    buf[p++];
+    var global_palette_offset = null;
+    var global_palette_size = null;
+    if (global_palette_flag) {
+        global_palette_offset = p;
+        global_palette_size = num_global_colors;
+        p += num_global_colors * 3;
+    }
+    var no_eof = true;
+    var frames = [];
+    var delay = 0;
+    var transparent_index = null;
+    var disposal = 0;
+    var loop_count = null;
+    this.width = width;
+    this.height = height;
+    while (no_eof && p < buf.length) {
+        switch (buf[p++]) {
+          case 33:
+            switch (buf[p++]) {
+              case 255:
+                if (buf[p] !== 11 || buf[p + 1] == 78 && buf[p + 2] == 69 && buf[p + 3] == 84 && buf[p + 4] == 83 && buf[p + 5] == 67 && buf[p + 6] == 65 && buf[p + 7] == 80 && buf[p + 8] == 69 && buf[p + 9] == 50 && buf[p + 10] == 46 && buf[p + 11] == 48 && buf[p + 12] == 3 && buf[p + 13] == 1 && buf[p + 16] == 0) {
+                    p += 14;
+                    loop_count = buf[p++] | buf[p++] << 8;
+                    p++;
+                } else {
+                    p += 12;
+                    while (true) {
+                        var block_size = buf[p++];
+                        if (!(block_size >= 0)) throw Error("Invalid block size");
+                        if (block_size === 0) break;
+                        p += block_size;
+                    }
+                }
+                break;
+
+              case 249:
+                if (buf[p++] !== 4 || buf[p + 4] !== 0) throw new Error("Invalid graphics extension block.");
+                var pf1 = buf[p++];
+                delay = buf[p++] | buf[p++] << 8;
+                transparent_index = buf[p++];
+                if ((pf1 & 1) === 0) transparent_index = null;
+                disposal = pf1 >> 2 & 7;
+                p++;
+                break;
+
+              case 254:
+                while (true) {
+                    var block_size = buf[p++];
+                    if (!(block_size >= 0)) throw Error("Invalid block size");
+                    if (block_size === 0) break;
+                    p += block_size;
+                }
+                break;
+
+              default:
+                throw new Error("Unknown graphic control label: 0x" + buf[p - 1].toString(16));
+            }
+            break;
+
+          case 44:
+            var x = buf[p++] | buf[p++] << 8;
+            var y = buf[p++] | buf[p++] << 8;
+            var w = buf[p++] | buf[p++] << 8;
+            var h = buf[p++] | buf[p++] << 8;
+            var pf2 = buf[p++];
+            var local_palette_flag = pf2 >> 7;
+            var interlace_flag = pf2 >> 6 & 1;
+            var num_local_colors_pow2 = pf2 & 7;
+            var num_local_colors = 1 << num_local_colors_pow2 + 1;
+            var palette_offset = global_palette_offset;
+            var palette_size = global_palette_size;
+            var has_local_palette = false;
+            if (local_palette_flag) {
+                var has_local_palette = true;
+                palette_offset = p;
+                palette_size = num_local_colors;
+                p += num_local_colors * 3;
+            }
+            var data_offset = p;
+            p++;
+            while (true) {
+                var block_size = buf[p++];
+                if (!(block_size >= 0)) throw Error("Invalid block size");
+                if (block_size === 0) break;
+                p += block_size;
+            }
+            frames.push({
+                x: x,
+                y: y,
+                width: w,
+                height: h,
+                has_local_palette: has_local_palette,
+                palette_offset: palette_offset,
+                palette_size: palette_size,
+                data_offset: data_offset,
+                data_length: p - data_offset,
+                transparent_index: transparent_index,
+                interlaced: !!interlace_flag,
+                delay: delay,
+                disposal: disposal
+            });
+            break;
+
+          case 59:
+            no_eof = false;
+            break;
+
+          default:
+            throw new Error("Unknown gif block: 0x" + buf[p - 1].toString(16));
+        }
+    }
+    this.numFrames = function() {
+        return frames.length;
+    };
+    this.loopCount = function() {
+        return loop_count;
+    };
+    this.frameInfo = function(frame_num) {
+        if (frame_num < 0 || frame_num >= frames.length) throw new Error("Frame index out of range.");
+        return frames[frame_num];
+    };
+    this.decodeAndBlitFrameBGRA = function(frame_num, pixels) {
+        var frame = this.frameInfo(frame_num);
+        var num_pixels = frame.width * frame.height;
+        var index_stream = new Uint8Array(num_pixels);
+        GifReaderLZWOutputIndexStream(buf, frame.data_offset, index_stream, num_pixels);
+        var palette_offset = frame.palette_offset;
+        var trans = frame.transparent_index;
+        if (trans === null) trans = 256;
+        var framewidth = frame.width;
+        var framestride = width - framewidth;
+        var xleft = framewidth;
+        var opbeg = (frame.y * width + frame.x) * 4;
+        var opend = ((frame.y + frame.height) * width + frame.x) * 4;
+        var op = opbeg;
+        var scanstride = framestride * 4;
+        if (frame.interlaced === true) {
+            scanstride += width * 4 * 7;
+        }
+        var interlaceskip = 8;
+        for (var i = 0, il = index_stream.length; i < il; ++i) {
+            var index = index_stream[i];
+            if (xleft === 0) {
+                op += scanstride;
+                xleft = framewidth;
+                if (op >= opend) {
+                    scanstride = framestride * 4 + width * 4 * (interlaceskip - 1);
+                    op = opbeg + (framewidth + framestride) * (interlaceskip << 1);
+                    interlaceskip >>= 1;
+                }
+            }
+            if (index === trans) {
+                op += 4;
+            } else {
+                var r = buf[palette_offset + index * 3];
+                var g = buf[palette_offset + index * 3 + 1];
+                var b = buf[palette_offset + index * 3 + 2];
+                pixels[op++] = b;
+                pixels[op++] = g;
+                pixels[op++] = r;
+                pixels[op++] = 255;
+            }
+            --xleft;
+        }
+    };
+    this.decodeAndBlitFrameRGBA = function(frame_num, pixels) {
+        var frame = this.frameInfo(frame_num);
+        var num_pixels = frame.width * frame.height;
+        var index_stream = new Uint8Array(num_pixels);
+        GifReaderLZWOutputIndexStream(buf, frame.data_offset, index_stream, num_pixels);
+        var palette_offset = frame.palette_offset;
+        var trans = frame.transparent_index;
+        if (trans === null) trans = 256;
+        var framewidth = frame.width;
+        var framestride = width - framewidth;
+        var xleft = framewidth;
+        var opbeg = (frame.y * width + frame.x) * 4;
+        var opend = ((frame.y + frame.height) * width + frame.x) * 4;
+        var op = opbeg;
+        var scanstride = framestride * 4;
+        if (frame.interlaced === true) {
+            scanstride += width * 4 * 7;
+        }
+        var interlaceskip = 8;
+        for (var i = 0, il = index_stream.length; i < il; ++i) {
+            var index = index_stream[i];
+            if (xleft === 0) {
+                op += scanstride;
+                xleft = framewidth;
+                if (op >= opend) {
+                    scanstride = framestride * 4 + width * 4 * (interlaceskip - 1);
+                    op = opbeg + (framewidth + framestride) * (interlaceskip << 1);
+                    interlaceskip >>= 1;
+                }
+            }
+            if (index === trans) {
+                op += 4;
+            } else {
+                var r = buf[palette_offset + index * 3];
+                var g = buf[palette_offset + index * 3 + 1];
+                var b = buf[palette_offset + index * 3 + 2];
+                pixels[op++] = r;
+                pixels[op++] = g;
+                pixels[op++] = b;
+                pixels[op++] = 255;
+            }
+            --xleft;
+        }
+    };
+}
+
+function GifReaderLZWOutputIndexStream(code_stream, p, output, output_length) {
+    var min_code_size = code_stream[p++];
+    var clear_code = 1 << min_code_size;
+    var eoi_code = clear_code + 1;
+    var next_code = eoi_code + 1;
+    var cur_code_size = min_code_size + 1;
+    var code_mask = (1 << cur_code_size) - 1;
+    var cur_shift = 0;
+    var cur = 0;
+    var op = 0;
+    var subblock_size = code_stream[p++];
+    var code_table = new Int32Array(4096);
+    var prev_code = null;
+    while (true) {
+        while (cur_shift < 16) {
+            if (subblock_size === 0) break;
+            cur |= code_stream[p++] << cur_shift;
+            cur_shift += 8;
+            if (subblock_size === 1) {
+                subblock_size = code_stream[p++];
+            } else {
+                --subblock_size;
+            }
+        }
+        if (cur_shift < cur_code_size) break;
+        var code = cur & code_mask;
+        cur >>= cur_code_size;
+        cur_shift -= cur_code_size;
+        if (code === clear_code) {
+            next_code = eoi_code + 1;
+            cur_code_size = min_code_size + 1;
+            code_mask = (1 << cur_code_size) - 1;
+            prev_code = null;
+            continue;
+        } else if (code === eoi_code) {
+            break;
+        }
+        var chase_code = code < next_code ? code : prev_code;
+        var chase_length = 0;
+        var chase = chase_code;
+        while (chase > clear_code) {
+            chase = code_table[chase] >> 8;
+            ++chase_length;
+        }
+        var k = chase;
+        var op_end = op + chase_length + (chase_code !== code ? 1 : 0);
+        if (op_end > output_length) {
+            console.log("Warning, gif stream longer than expected.");
+            return;
+        }
+        output[op++] = k;
+        op += chase_length;
+        var b = op;
+        if (chase_code !== code) output[op++] = k;
+        chase = chase_code;
+        while (chase_length--) {
+            chase = code_table[chase];
+            output[--b] = chase & 255;
+            chase >>= 8;
+        }
+        if (prev_code !== null && next_code < 4096) {
+            code_table[next_code++] = prev_code << 8 | k;
+            if (next_code >= code_mask + 1 && cur_code_size < 12) {
+                ++cur_code_size;
+                code_mask = code_mask << 1 | 1;
+            }
+        }
+        prev_code = code;
+    }
+    if (op !== output_length) {
+        console.log("Warning, gif stream shorter than expected.");
+    }
+    return output;
+}
+
+try {
+    GifWriter_1 = omggif.GifWriter = GifWriter;
+    GifReader_1 = omggif.GifReader = GifReader;
+} catch (e) {}
+
+class OmgFilmDecoder extends FilmDecoder {
+    constructor() {
+        super(...arguments);
+        this.restoreImageData = null;
+    }
+    decodeHeader(data) {
+        return __awaiter(this, void 0, void 0, function*() {
+            const decoder = this.decoder = new GifReader_1(new Uint8Array(data));
+            const {width: width, height: height} = decoder;
+            this.width = width;
+            this.height = height;
+            this.total = decoder.numFrames();
+            this.loop = decoder.loopCount() || 0;
+            this.bufferCanvas = draw.Platform.origin.createCanvas(width, height);
+            this.bufferContext = this.bufferCanvas.getContext("2d");
+            this.decodeBuffer = new Uint8ClampedArray(width * height * 4);
+            this.sharedImageData = this.bufferContext.createImageData(width, height);
+            this.createAtlas();
+            yield this.decodeFrame(0);
+        });
+    }
+    decodeOneFrame(frameIndex) {
+        return __awaiter(this, void 0, void 0, function*() {
+            const {decoder: decoder, decodeBuffer: decodeBuffer, bufferCanvas: bufferCanvas, bufferContext: bufferContext, sharedImageData: sharedImageData} = this;
+            const info = decoder.frameInfo(frameIndex);
+            if (info.disposal === 3) this.restoreImageData = bufferContext.getImageData(0, 0, this.width, this.height);
+            decoder.decodeAndBlitFrameRGBA(frameIndex, decodeBuffer);
+            sharedImageData.data.set(decodeBuffer);
+            bufferContext.putImageData(sharedImageData, 0, 0);
+            let image;
+            if (this.atlas) {
+                image = bufferCanvas;
+            } else {
+                image = draw.Platform.origin.createCanvas(this.width, this.height);
+                const frameCtx = image.getContext("2d");
+                frameCtx.drawImage(bufferCanvas, 0, 0);
+            }
+            const frame = {
+                image: image,
+                duration: (info.delay || 10) / 100
+            };
+            this.frames[frameIndex] = frame;
+            if (this.atlas) this.mergeFrame(frameIndex, false);
+            this.applyDisposal(info);
+            return frame;
+        });
+    }
+    applyDisposal(info) {
+        const {bufferContext: bufferContext, restoreImageData: restoreImageData} = this;
+        const disposal = info.disposal;
+        if (disposal === 2) {
+            bufferContext.clearRect(info.x, info.y, info.width, info.height);
+        } else if (disposal === 3) {
+            if (restoreImageData) {
+                bufferContext.putImageData(restoreImageData, 0, 0);
+                this.restoreImageData = null;
+            }
+        }
+    }
+    destoryFrameImage(frame) {
+        if (!frame.image) return;
+        const canvas = frame.image;
+        canvas.width = 0;
+        canvas.height = 0;
+        delete frame.image;
+    }
+    destroyDecoder() {
+        if (this.bufferCanvas) {
+            this.bufferCanvas.width = 0;
+            this.bufferCanvas.height = 0;
+            this.decoder = null;
+            this.bufferCanvas = null;
+            this.bufferContext = null;
+            this.decodeBuffer = null;
+            this.sharedImageData = null;
+            this.restoreImageData = null;
+        }
+    }
+}
+
+function getFileExt(url) {
+    if (!url) return "";
+    if (url.startsWith("data:")) {
+        const head = url.slice(5, url.indexOf(","));
+        const slash = head.indexOf("/");
+        const semi = head.indexOf(";");
+        return slash > -1 ? head.slice(slash + 1, semi > -1 ? semi : undefined).toLowerCase() : "";
+    }
+    let end = url.length;
+    const q = url.indexOf("?");
+    const h = url.indexOf("#");
+    if (q > -1 && q < end) end = q;
+    if (h > -1 && h < end) end = h;
+    const dot = url.lastIndexOf(".", end);
+    const slash = url.lastIndexOf("/", end);
+    return dot > slash ? url.slice(dot + 1, end).toLowerCase() : "";
+}
+
+class FilmData extends draw.ImageData {
+    get __urlType() {
+        return "film";
+    }
+}
+
+class PaintFilm {
+    get playerOptions() {
+        const {fill: fill} = (this.element || this).__;
+        return draw.isArray(fill) && fill.find(item => item.type === "film");
+    }
+    get decoder() {
+        const {playerOptions: playerOptions} = this;
+        return playerOptions && playerOptions.image && playerOptions.image.view;
+    }
+    constructor(element) {
+        this.element = element;
+    }
+    togglePlay() {
+        const {playerOptions: playerOptions} = this;
+        if (playerOptions) {
+            if (playerOptions.paused) this.play(); else this.pause();
+        }
+    }
+    play() {
+        const {playerOptions: playerOptions} = this;
+        if (playerOptions && playerOptions.paused) {
+            delete playerOptions.paused;
+            (this.element || this).forceRender();
+        }
+    }
+    pause() {
+        const {playerOptions: playerOptions} = this;
+        if (playerOptions) playerOptions.paused = true;
+    }
+    stop() {
+        const {playerOptions: playerOptions} = this;
+        if (playerOptions) {
+            delete playerOptions.frameTime;
+            playerOptions.nowIndex = 0;
+            this.pause();
+        }
+    }
+    seekFrame(frameIndex) {
+        const {playerOptions: playerOptions} = this;
+        if (playerOptions) {
+            playerOptions.nowIndex = frameIndex;
+            (this.element || this).forceRender();
+        }
+    }
+}
+
+exports.Film = class Film extends draw.Image {
+    get __tag() {
+        return "Film";
+    }
+};
+
+__decorate([ draw.dataProcessor(FilmData) ], exports.Film.prototype, "__", void 0);
+
+exports.Film = __decorate([ draw.useModule(PaintFilm), draw.registerUI() ], exports.Film);
+
+draw.Plugin.add("flim");
+
+draw.PaintImage.film = function(paint, oldPaint) {
+    paint.film = true;
+    paint.nowIndex = 0;
+    if (draw.isObject(oldPaint)) {
+        paint.nowIndex = oldPaint.nowIndex;
+        paint.pauseIndex = oldPaint.pauseIndex;
+        paint.speed = oldPaint.speed;
+        paint.paused = oldPaint.paused;
+        paint.loop = oldPaint.loop;
+    }
+};
+
+draw.Creator.film = function(options) {
+    return new draw.LeaferFilm(options);
+};
+
+draw.Resource.loadFilm = function(key, format) {
+    return new Promise((resolve, reject) => {
+        const config = {
+            url: key
+        };
+        if (format) config.format = format;
+        const film = draw.Creator.film(config);
+        draw.Resource.set(key, film);
+        film.load(() => resolve(film), e => reject(e));
+    });
+};
+
+draw.LeaferFilm.prototype.render = function(canvas, x, y, width, height, leaf, paint, imageScaleX, imageScaleY) {
+    this.view.render(canvas, x, y, width, height, leaf, paint, imageScaleX, imageScaleY);
+};
+
+FilmDecoder.register("gif", OmgFilmDecoder);
+
+draw.Platform.origin.loadFilm = function(url, _crossOrigin, leaferFilm) {
+    return __awaiter(this, void 0, void 0, function*() {
+        const buffer = yield draw.Platform.origin.loadContent(url, "arrayBuffer");
+        let ext = getFileExt(url);
+        if (!ext) {
+            if (leaferFilm) ext = leaferFilm.config.format;
+            if (!ext) ext = "gif";
+        }
+        const mimeType = draw.FileHelper.mimeType(ext);
+        const canUseFilmDecoder = yield FilmDecoder.canUse(mimeType);
+        let Decoder;
+        const tool = FilmDecoder.decoderMap[ext];
+        if (!tool || canUseFilmDecoder && !tool.force) Decoder = FilmDecoder; else Decoder = tool.Decoder;
+        if (!Decoder) throw new Error("no decoder: " + mimeType);
+        const decoder = new Decoder;
+        yield decoder.decodeHeader(buffer, mimeType);
+        return decoder;
+    });
+};
+
+exports.FilmData = FilmData;
+
+exports.FilmDecoder = FilmDecoder;
+
+exports.PaintFilm = PaintFilm;