@leafer-in/film 0.0.0-stage → 2.3.2

package/package.json

@@ -1,6 +1,41 @@
 {
   "name": "@leafer-in/film",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.2",
+  "description": "@leafer-in/film",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/film.esm.min.js",
+  "exports": {
+    "import": "./dist/film.esm.min.js",
+    "require": "./dist/film.min.cjs",
+    "types": "./types/index.d.ts"
+  },
+  "types": "types/index.d.ts",
+  "unpkg": "dist/film.min.js",
+  "jsdelivr": "dist/film.min.js",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer-in.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer-in/tree/main/packages/film",
+  "bugs": "https://github.com/leaferjs/leafer-in/issues",
+  "keywords": [
+    "leafer film",
+    "leafer-film",
+    "leafer-in",
+    "film",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "peerDependencies": {
+    "@leafer-ui/draw": "^2.2.4",
+    "@leafer-ui/interface": "^2.2.4",
+    "@leafer-in/interface": "^2.2.4"
+  }
 }

package/src/Film.ts

@@ -0,0 +1,27 @@
+import { IFilm, IFilmInputData, IFilmData, } from '@leafer-ui/interface'
+import { Image, registerUI, dataProcessor, useModule } from '@leafer-ui/draw'
+
+import { FilmData } from './data/FilmData'
+import { PaintFilm } from './PaintFilm'
+
+
+@useModule(PaintFilm)
+@registerUI()
+export class Film<TInputData = IFilmInputData> extends Image<TInputData> implements IFilm {
+
+    public get __tag() { return 'Film' }
+
+    @dataProcessor(FilmData)
+    declare public __: IFilmData
+}
+
+export interface Film {
+
+    togglePlay(): void
+    play(): void
+    pause(): void
+    stop(): void
+
+    seekFrame(frameIndex: number): void
+
+}

package/src/FilmDecoder.ts

@@ -0,0 +1,201 @@
+import { isUndefined, Platform } from '@leafer-ui/draw'
+import { ICanvasContext2D, IFilmDecoder, IFilmFileType, IFilmFrame, ILeaf, IPointData, IBooleanMap, IFilmPlayOptions } from '@leafer-ui/interface'
+
+
+interface IFilmDecoderMap {
+    [name: string]: { Decoder: any, force?: boolean }
+}
+
+export class FilmDecoder implements IFilmDecoder {
+
+    public width: number // 宽度
+    public height: number // 高度
+
+    public total: number // 总的帧数
+    public loop: number // 循环次数，为0表示无限循环
+
+    public frames: IFilmFrame[] = [] // 帧数据
+    public decodedIndex = -1 // 当前解码到第几帧
+
+    public atlas?: any // 合并图
+    public atlasContext?: ICanvasContext2D // 合并图的上下文手柄
+    public atlasGrid?: IPointData // 横竖的排列数量
+
+    public decoder: ImageDecoder // 解码器
+
+    // 缓冲画布
+    public bufferCanvas?: any
+    public bufferContext?: ICanvasContext2D
+
+
+    static decoderMap: IFilmDecoderMap = {}
+    static supportMap: IBooleanMap = {}
+    static maxAtlasSize = Platform.image.maxPatternSize
+
+    static register(type: IFilmFileType, Decoder: any, force?: boolean): void {
+        FilmDecoder.decoderMap[type] = { Decoder, force }
+    }
+
+    static async canUse(mimeType: string) {
+        const { supportMap } = this
+        let canUse = supportMap[mimeType]
+        if (!isUndefined(canUse)) return canUse
+        if (typeof ImageDecoder === 'undefined') return false
+        canUse = await ImageDecoder.isTypeSupported(mimeType)
+        return supportMap[mimeType] = canUse
+    }
+
+
+    public createAtlas(): void {
+        const { width, height, 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 = Platform.origin.createCanvas(width * columns, height * rows)
+            this.atlasContext = this.atlas.getContext('2d')
+        }
+    }
+
+    public async decodeHeader(data: ArrayBuffer, type: string): Promise<void> {
+        this.decoder = new ImageDecoder({ data, type })
+
+        await this.decoder.tracks.ready
+        const first = await this.decodeFrame(0)
+
+        const { displayWidth, displayHeight } = first.image, { 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) // 因为已经读取了第一帧，存在合并图时，必须再次合并进去
+    }
+
+    public async decodeFrame(frameIndex: number): Promise<IFilmFrame> {
+        const { frames } = this, frame = frames[frameIndex]
+        if (frame && !frame.decoding) return frame
+
+        // 必须顺序解码
+        for (let i = this.decodedIndex + 1; i <= frameIndex; i++) {
+            await this.decodeOneFrame(i)
+            this.decodedIndex = i
+        }
+
+        return frames[frameIndex]
+    }
+
+    public async decodeOneFrame(frameIndex: number): Promise<IFilmFrame> {
+        return new Promise((resolve) => {
+            this.decoder.decode({ frameIndex }).then(result => {
+                const { image } = result
+                const frame: IFilmFrame = { image, duration: image.duration / 1000 / 1000 } // duration单位为秒
+                this.frames[frameIndex] = frame
+                if (this.atlas) this.mergeFrame(frameIndex)
+                resolve(frame)
+            })
+        })
+    }
+
+    // 绘制当前帧到atlas合并图中
+    public mergeFrame(frameIndex: number, destoryFrameImage: boolean = true): void {
+        const frame = this.frames[frameIndex], { atlasGrid, width, 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
+    }
+
+    public render(canvas: ICanvasContext2D, x: number, y: number, width: number, height: number, leaf: ILeaf, playOptions: IFilmPlayOptions, _imageScaleX: number, _imageScaleY: number): void {
+        let { nowIndex, paused, speed, pauseIndex, loop, frameTimer } = playOptions
+
+        if (isUndefined(nowIndex)) nowIndex = 0
+
+        const { frames } = this, frame = frames[nowIndex]
+
+        if (this.renderFrame(frame, canvas, x, y, width, height)) {
+
+            if (frameTimer) return // 避免重复等待下一帧
+            if (!isUndefined(pauseIndex) && nowIndex === pauseIndex) { // 播放到暂停帧为止
+                playOptions.paused = true
+                return
+            }
+
+            let nextIndex = nowIndex + 1
+
+            if (nextIndex >= this.total) {
+                if (this.loop && isFinite(this.loop)) { // 限制循环次数
+                    loop = (loop as number || 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) * 1000)
+
+        } else {
+
+            this.renderFrame(frames[nowIndex - 1], canvas, x, y, width, height) // 暂时渲染上一帧顶替
+            leaf.forceRender() // 防止停掉
+        }
+    }
+
+    private renderFrame(frame: IFilmFrame, canvas: ICanvasContext2D, x: number, y: number, width: number, height: number): boolean {
+        const canRender = frame && !frame.decoding, { 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
+    }
+
+    // 销毁单帧
+    public destoryFrame(frameIndex: number, deleteIndex: boolean = true): void {
+        const { frames } = this, frame = frames[frameIndex]
+        if (frame) {
+            this.destoryFrameImage(frame)
+            if (deleteIndex) delete frames[frameIndex]
+        }
+    }
+
+    // 销毁单帧内的VideoFrame或canvas对象
+    public destoryFrameImage(frame: IFilmFrame): void {
+        const { image } = frame
+        if (image && image.close) image.close()
+        delete frame.image
+    }
+
+    public destroyDecoder(): void {
+        if (this.decoder) {
+            this.decoder.close()
+            this.decoder = null
+        }
+    }
+
+    public close(): void {
+        if (this.atlas) this.atlas = this.atlasContext = null
+        this.frames.forEach((_item, index) => this.destoryFrame(index, false))
+        this.frames.length = 0
+        this.destroyDecoder()
+    }
+
+}

package/src/OmgFilmDecoder.ts

@@ -0,0 +1,143 @@
+import { IFilmFrame } from '@leafer-ui/interface'
+import { Platform } from '@leafer-ui/draw'
+
+import { GifReader } from 'omggif'
+
+import { FilmDecoder } from './FilmDecoder'
+
+
+export class OmgFilmDecoder extends FilmDecoder {
+
+    public decoder: GifReader | any
+
+    // 复用 RGBA buffer
+    private decodeBuffer!: Uint8ClampedArray
+
+    // 复用 ImageData（避免每帧 new）
+    private sharedImageData!: ImageData
+
+    // 只保留一个 restore 缓存（disposal=3）
+    private restoreImageData: ImageData | null = null
+
+    // --------------------------------------------------
+    // 1️⃣ decodeHeader
+    // --------------------------------------------------
+
+    public async decodeHeader(data: ArrayBuffer): Promise<void> {
+        const decoder = this.decoder = new GifReader(new Uint8Array(data))
+        const { width, height } = decoder
+
+        this.width = width
+        this.height = height
+        this.total = decoder.numFrames()
+        this.loop = decoder.loopCount() || 0
+
+        // 工作 canvas（永远只有一个）
+        this.bufferCanvas = Platform.origin.createCanvas(width, height)
+        this.bufferContext = this.bufferCanvas.getContext('2d')!
+
+        // 复用 RGBA buffer
+        this.decodeBuffer = new Uint8ClampedArray(width * height * 4)
+
+        // 复用 ImageData
+        this.sharedImageData = this.bufferContext.createImageData(width, height)
+
+        this.createAtlas()
+
+        // 首帧必须解
+        await this.decodeFrame(0)
+    }
+
+    // --------------------------------------------------
+    // 2️⃣ decodeFrame（顺序安全）
+    // --------------------------------------------------
+
+    public async decodeOneFrame(frameIndex: number): Promise<IFilmFrame> {
+        const { decoder, decodeBuffer, bufferCanvas, bufferContext, sharedImageData } = this
+        const info = decoder.frameInfo(frameIndex)
+
+        // disposal=3 需要保存当前完整状态
+        if (info.disposal === 3) this.restoreImageData = bufferContext.getImageData(0, 0, this.width, this.height)
+
+        // 解码到 decodeBuffer
+        decoder.decodeAndBlitFrameRGBA(frameIndex, decodeBuffer)
+
+        // 复用 ImageData
+        sharedImageData.data.set(decodeBuffer)
+
+        // 绘制到 buffer
+        bufferContext.putImageData(sharedImageData, 0, 0)
+
+        let image: any
+
+        if (this.atlas) {
+            image = bufferCanvas
+        } else {
+            image = Platform.origin.createCanvas(this.width, this.height)
+            const frameCtx = image.getContext('2d')!
+            frameCtx.drawImage(bufferCanvas, 0, 0)
+        }
+
+        const frame: IFilmFrame = { image, duration: (info.delay || 10) / 100 }
+
+        this.frames[frameIndex] = frame
+
+        if (this.atlas) this.mergeFrame(frameIndex, false) // false 表示不物理销毁frame.image
+
+        this.applyDisposal(info)
+
+        return frame
+    }
+
+    // --------------------------------------------------
+    // 3️⃣ disposal 处理
+    // --------------------------------------------------
+
+    private applyDisposal(info: any): void {
+        const { bufferContext, 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
+            }
+        }
+    }
+
+    // --------------------------------------------------
+    // 5️⃣ destoryFrameImage
+    // --------------------------------------------------
+
+    public destoryFrameImage(frame: IFilmFrame): void {
+        if (!frame.image) return
+
+        const canvas = frame.image as HTMLCanvasElement
+
+        // 强制释放 backing store
+        canvas.width = 0
+        canvas.height = 0
+
+        delete frame.image
+    }
+
+    // --------------------------------------------------
+    // 释放解码资源
+    // --------------------------------------------------
+
+    public destroyDecoder(): void {
+        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
+        }
+    }
+}

package/src/PaintFilm.ts

@@ -0,0 +1,56 @@
+import { ILeafPaint, IFilmDecoder, IUI } from '@leafer-ui/interface'
+import { isArray } from '@leafer-ui/draw'
+
+export class PaintFilm {
+
+    public element: IUI
+
+    public get playerOptions(): ILeafPaint { const { fill } = (this.element || this as any).__; return isArray(fill) && fill.find(item => item.type === 'film') }
+
+    public get decoder(): IFilmDecoder { const { playerOptions } = this; return playerOptions && playerOptions.image && playerOptions.image.view }
+
+
+    constructor(element: IUI) {
+        this.element = element
+    }
+
+
+    public togglePlay(): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            if (playerOptions.paused) this.play()
+            else this.pause()
+        }
+    }
+
+    public play(): void {
+        const { playerOptions } = this
+        if (playerOptions && playerOptions.paused) {
+            delete playerOptions.paused;
+            (this.element || this as any).forceRender()
+        }
+    }
+
+    public pause(): void {
+        const { playerOptions } = this
+        if (playerOptions) playerOptions.paused = true
+    }
+
+    public stop(): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            delete playerOptions.frameTime
+            playerOptions.nowIndex = 0
+            this.pause()
+        }
+    }
+
+    public seekFrame(frameIndex: number): void {
+        const { playerOptions } = this
+        if (playerOptions) {
+            playerOptions.nowIndex = frameIndex;
+            (this.element || this as any).forceRender()
+        }
+    }
+
+}

package/src/data/FilmData.ts

@@ -0,0 +1,9 @@
+import { IMultimediaType } from '@leafer-ui/interface'
+import { ImageData } from '@leafer-ui/draw'
+
+
+export class FilmData extends ImageData {
+
+    public get __urlType(): IMultimediaType { return 'film' }
+
+}

package/src/helper/ext.ts

@@ -0,0 +1,23 @@
+export function getFileExt(url: string): string {
+    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() : ''
+}

package/src/index.ts

@@ -0,0 +1,75 @@
+import { LeaferFilm, Platform, Creator, FileHelper, PaintImage, Resource, Plugin, isObject } from '@leafer-ui/draw'
+import { ILeaferFilm, ILeaferFilmConfig, IImageCrossOrigin, ILeaf, IFilmDecoder, ILeafPaint, IFilmFileType } from '@leafer-ui/interface'
+
+import { FilmDecoder } from './FilmDecoder'
+import { OmgFilmDecoder } from './OmgFilmDecoder'
+import { getFileExt } from './helper/ext'
+
+export { Film } from './Film'
+export { FilmData } from './data/FilmData'
+export { FilmDecoder } from './FilmDecoder'
+export { PaintFilm } from './PaintFilm'
+
+
+Plugin.add('flim')
+
+
+PaintImage.film = function (paint: ILeafPaint, oldPaint?: ILeafPaint): void {
+    paint.film = true
+    paint.nowIndex = 0
+    if (isObject(oldPaint)) {
+        paint.nowIndex = oldPaint.nowIndex
+        paint.pauseIndex = oldPaint.pauseIndex
+        paint.speed = oldPaint.speed
+        paint.paused = oldPaint.paused
+        paint.loop = oldPaint.loop
+    }
+}
+
+Creator.film = function (options?: ILeaferFilmConfig): ILeaferFilm {
+    return new LeaferFilm(options)
+}
+
+Resource.loadFilm = function (key: string, format?: IFilmFileType): Promise<ILeaferFilm> {
+    return new Promise((resolve, reject) => {
+        const config: ILeaferFilmConfig = { url: key }
+        if (format) config.format = format
+        const film = Creator.film(config)
+        Resource.set(key, film)
+        film.load(() => resolve(film), (e: any) => reject(e))
+    })
+}
+
+LeaferFilm.prototype.render = function (canvas: any, x: number, y: number, width: number, height: number, leaf: ILeaf, paint: any, imageScaleX: number, imageScaleY: number): void {
+    this.view.render(canvas, x, y, width, height, leaf, paint, imageScaleX, imageScaleY)
+}
+
+FilmDecoder.register('gif', OmgFilmDecoder) //  OmgFilmDecoder
+
+Platform.origin.loadFilm = async function (url: string, _crossOrigin?: IImageCrossOrigin, leaferFilm?: ILeaferFilm): Promise<any> {
+    const buffer = await Platform.origin.loadContent(url, 'arrayBuffer')
+
+    let ext = getFileExt(url)   // 获取文件后缀名
+
+    if (!ext) {
+        if (leaferFilm) ext = leaferFilm.config.format
+        if (!ext) ext = 'gif'
+    }
+
+    const mimeType = FileHelper.mimeType(ext)
+    const canUseFilmDecoder = await FilmDecoder.canUse(mimeType)
+
+    let Decoder: any
+    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: IFilmDecoder = new Decoder()
+    await decoder.decodeHeader(buffer, mimeType)
+
+    return decoder
+}
+

package/types/index.d.ts

@@ -0,0 +1,69 @@
+import { IFilmInputData, IFilm, IFilmData, IMultimediaType, IFilmDecoder, IFilmFrame, ICanvasContext2D, IPointData, IBooleanMap, IFilmFileType, ILeaf, IFilmPlayOptions, IUI, ILeafPaint } from '@leafer-ui/interface';
+import { Image, ImageData } from '@leafer-ui/draw';
+
+declare class Film<TInputData = IFilmInputData> extends Image<TInputData> implements IFilm {
+    get __tag(): string;
+    __: IFilmData;
+}
+interface Film {
+    togglePlay(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seekFrame(frameIndex: number): void;
+}
+
+declare class FilmData extends ImageData {
+    get __urlType(): IMultimediaType;
+}
+
+interface IFilmDecoderMap {
+    [name: string]: {
+        Decoder: any;
+        force?: boolean;
+    };
+}
+declare class FilmDecoder implements IFilmDecoder {
+    width: number;
+    height: number;
+    total: number;
+    loop: number;
+    frames: IFilmFrame[];
+    decodedIndex: number;
+    atlas?: any;
+    atlasContext?: ICanvasContext2D;
+    atlasGrid?: IPointData;
+    decoder: ImageDecoder;
+    bufferCanvas?: any;
+    bufferContext?: ICanvasContext2D;
+    static decoderMap: IFilmDecoderMap;
+    static supportMap: IBooleanMap;
+    static maxAtlasSize: number;
+    static register(type: IFilmFileType, Decoder: any, force?: boolean): void;
+    static canUse(mimeType: string): Promise<boolean>;
+    createAtlas(): void;
+    decodeHeader(data: ArrayBuffer, type: string): Promise<void>;
+    decodeFrame(frameIndex: number): Promise<IFilmFrame>;
+    decodeOneFrame(frameIndex: number): Promise<IFilmFrame>;
+    mergeFrame(frameIndex: number, destoryFrameImage?: boolean): void;
+    render(canvas: ICanvasContext2D, x: number, y: number, width: number, height: number, leaf: ILeaf, playOptions: IFilmPlayOptions, _imageScaleX: number, _imageScaleY: number): void;
+    private renderFrame;
+    destoryFrame(frameIndex: number, deleteIndex?: boolean): void;
+    destoryFrameImage(frame: IFilmFrame): void;
+    destroyDecoder(): void;
+    close(): void;
+}
+
+declare class PaintFilm {
+    element: IUI;
+    get playerOptions(): ILeafPaint;
+    get decoder(): IFilmDecoder;
+    constructor(element: IUI);
+    togglePlay(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    seekFrame(frameIndex: number): void;
+}
+
+export { Film, FilmData, FilmDecoder, PaintFilm };