@vvfx/sdk 0.2.7 → 0.2.9

package/dist/exporter/exporter.js

@@ -0,0 +1,121 @@
+import JSZip from '@progress/jszip-esm';
+import { merge } from 'lodash-es';
+import { EventEmitter } from '../shared';
+import { logger, downloadBlob } from '../utils';
+import { ExportMedia } from './export-media';
+import { MEDIA_TYPE, EXPORT_STATUS_MAP } from './const';
+const EXPORT_MEDIA_MAP = {
+    [MEDIA_TYPE.MP4]: {
+        suffix: 'mp4',
+        error: 'export mp4 is error'
+    },
+    [MEDIA_TYPE.GIF]: {
+        suffix: 'gif',
+        error: 'export gif is error'
+    },
+    [MEDIA_TYPE.Images]: {
+        suffix: 'zip',
+        error: 'export Images is error'
+    },
+    [MEDIA_TYPE.APNG]: {
+        suffix: 'apng',
+        error: 'export APNG is error'
+    },
+    [MEDIA_TYPE.WebP]: {
+        suffix: 'webp',
+        error: 'export WebP is error'
+    },
+    [MEDIA_TYPE.AlphaMaskVideo]: {
+        suffix: 'mp4',
+        error: 'export AlphaMaskVideo is error'
+    },
+    [MEDIA_TYPE.WebM]: {
+        suffix: 'webm',
+        error: 'export WebM is error'
+    }
+};
+export class Exporter extends EventEmitter {
+    _options;
+    _status = EXPORT_STATUS_MAP.DEFAULT;
+    _exportMedia;
+    constructor(options) {
+        super();
+        this._options = options;
+        /**
+         * 这里是，导出多媒体物料，如 MP4 ...
+         * 如果是其他类型，如 JSON，则需要根据类型，实现对应的导出
+         */
+        this._exportMedia = new ExportMedia(options);
+    }
+    get status() {
+        return this._status;
+    }
+    setOptions(options) {
+        const newOptions = merge({}, this._options, options);
+        this._options = newOptions;
+        this._exportMedia.setOptions(newOptions);
+    }
+    downloadByMediaBuffers(params, buffers, extras) {
+        const { suffix, error } = EXPORT_MEDIA_MAP[this._options.mediaType];
+        if (!buffers?.length || !suffix) {
+            logger('info', ['@vvfx/sdk', 'downloadByMediaBuffers is error', 'buffers or suffix is empty']);
+            return;
+        }
+        const folderName = params[0]?.folderName;
+        const zip = new JSZip();
+        buffers.forEach((buffer, idx) => {
+            if (!buffer) {
+                return;
+            }
+            const { name } = params[idx] ?? {};
+            if (name) {
+                zip.file(`${name}.${suffix}`, buffer);
+                if (extras?.[idx]?.byteLength) {
+                    zip.file(`${name}.jpeg`, extras[idx]);
+                }
+            }
+        });
+        zip
+            .generateAsync({ type: 'blob' })
+            .then((blob) => {
+            downloadBlob(blob, `${folderName}.zip`, 'application/zip');
+        })
+            .catch((e) => {
+            const errMessage = error ?? 'export media is error';
+            logger('error', ['@vvfx/sdk'], errMessage, e);
+        });
+    }
+    onExportProgress(progress) {
+        this.emit('progress', progress);
+    }
+    onExportDone(current, success, buffer, extra) {
+        this.emit('done', current, success, buffer, extra);
+    }
+    onExportError(error) {
+        this._status = EXPORT_STATUS_MAP.ERROR;
+        logger('error', ['@vvfx/sdk'], 'export is error', error);
+    }
+    onExport(params) {
+        this._status = EXPORT_STATUS_MAP.EXPORTING;
+        void this._exportMedia.onExport(params);
+        this._exportMedia.on('progress', this.onExportProgress.bind(this));
+        this._exportMedia.on('done', this.onExportDone.bind(this));
+        this._exportMedia.once('finish', (success, taskInfos, buffers, extras) => {
+            this._status = success ? EXPORT_STATUS_MAP.SUCCESS : EXPORT_STATUS_MAP.ERROR;
+            this.emit('complete', success, taskInfos, buffers, extras);
+            if (this._options.isOutputBuffer || !buffers || buffers.length === 0) {
+                return;
+            }
+            this.downloadByMediaBuffers(params, buffers, extras);
+        });
+        this._exportMedia.on('error', this.onExportError.bind(this));
+    }
+    onCancel() {
+        this._status = EXPORT_STATUS_MAP.ERROR;
+        this._exportMedia.onCancel();
+        this.emit('complete', false, [], [], []);
+    }
+    dispose() {
+        this._exportMedia.dispose();
+    }
+}

package/dist/exporter/index.js

@@ -0,0 +1 @@
+export * from './exporter';

package/dist/exporter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/exporter/utils.js

@@ -0,0 +1,190 @@
+import { asserts, loadScriptAsync } from '../utils';
+import { HELPER_CONFIG } from './config';
+export function getTwoDecimal(num) {
+    return Math.round(num * 100) / 100;
+}
+export async function loadImageAsync(img, noCrossOrigin = false) {
+    const imgEl = typeof img === 'string' ? (() => {
+        const imgEl = new Image();
+        if (!noCrossOrigin && !img.startsWith('data:')) {
+            imgEl.crossOrigin = '*';
+        }
+        imgEl.src = img;
+        return imgEl;
+    })() : img;
+    return imgEl.complete
+        ? imgEl
+        : new Promise((resolve, reject) => {
+            imgEl.addEventListener('load', () => {
+                resolve(imgEl);
+            });
+            imgEl.addEventListener('error', e => {
+                reject(e);
+            });
+        });
+}
+export function drawToOutputCanvas(playerCanvas, canvas, backgroundColor, backgroundCanvas) {
+    const ctx = canvas.getContext('2d');
+    asserts(ctx);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // 绘制背景颜色与背景图片
+    if (backgroundColor) {
+        ctx.save();
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.restore();
+    }
+    if (backgroundCanvas) {
+        ctx.drawImage(backgroundCanvas, 0, 0, backgroundCanvas.width, backgroundCanvas.height, 0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(playerCanvas, 0, 0, playerCanvas.width, playerCanvas.height, 0, 0, canvas.width, canvas.height);
+}
+const threshold = 5;
+export function getAlphaMaskImage(inputCanvas, outputCanvas) {
+    outputCanvas.width = inputCanvas.width * 2;
+    outputCanvas.height = inputCanvas.height;
+    const inputCtx = inputCanvas.getContext('2d');
+    if (!inputCtx) {
+        throw new Error('inputCtx is null');
+    }
+    const canvas = outputCanvas;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('ctx is null');
+    }
+    ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+    // 拆分 rgb 和 alpha 通道
+    // 这里实际上不用处理 rgb 通道，在合成视频的时候，ffmpeg 会自动把 a 通道去掉
+    const imageData1 = inputCtx.getImageData(0, 0, inputCanvas.width, inputCanvas.height);
+    // 只用处理 alpha 通道
+    const imageData2 = inputCtx.getImageData(0, 0, inputCanvas.width, inputCanvas.height);
+    //
+    const data1 = imageData1.data;
+    for (let i = 0; i < data1.length; i += 4) {
+        const alpha = Math.max(0, (data1[i + 3] ?? 0) - threshold) / (255 - threshold) * 255;
+        if (alpha <= 0) {
+            data1[i] = 0;
+            data1[i + 1] = 0;
+            data1[i + 2] = 0;
+            data1[i + 3] = 255;
+        }
+        else {
+            data1[i] = (data1[i] ?? 0) * alpha / 255;
+            data1[i + 1] = (data1[i + 1] ?? 0) * alpha / 255;
+            data1[i + 2] = (data1[i + 2] ?? 0) * alpha / 255;
+            data1[i + 3] = 255;
+        }
+    }
+    ctx.putImageData(imageData1, 0, 0);
+    //
+    const data2 = imageData2.data;
+    for (let i = 0; i < data2.length; i += 4) {
+        const alpha = Math.max(0, (data2[i + 3] ?? 0) - threshold) / (255 - threshold) * 255;
+        data2[i] = alpha;
+        data2[i + 1] = alpha;
+        data2[i + 2] = alpha;
+        data2[i + 3] = 255;
+    }
+    ctx.putImageData(imageData2, inputCanvas.width, 0);
+}
+export function parseArgs(Core, args) {
+    const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
+    args.forEach((s, idx) => {
+        const buf = Core._malloc(s.length + 1);
+        Core.writeAsciiToMemory(s, buf);
+        Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
+    });
+    return [args.length, argsPtr];
+}
+export async function canvasToArrayBuffer(canvas, mime, quality) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob(blob => {
+            if (!blob) {
+                reject('toBlob failed');
+            }
+            else {
+                resolve(blob.arrayBuffer());
+            }
+        }, mime, quality);
+    });
+}
+export function sleepForOneFrame() {
+    return new Promise(resolve => {
+        window.requestAnimationFrame(resolve);
+    });
+}
+export function padZero(num, length) {
+    return String(num).padStart(length, '0');
+}
+export async function loadWebpHelper() {
+    return new Promise(async (resolve, reject) => {
+        try {
+            await loadScriptAsync(HELPER_CONFIG.WEBP.SCRIPT, {
+                crossOrigin: 'anonymous',
+            });
+            const webpOptions = {
+                locateFile: (path, prefix) => {
+                    if (path.endsWith('createWebPCore.wasm')) {
+                        return HELPER_CONFIG.WEBP.WASM;
+                    }
+                    return prefix + path;
+                },
+            };
+            const core = await window.createWebPCore(webpOptions);
+            resolve(core);
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+}
+export async function loadFFmpegHelper(options) {
+    try {
+        // 动态导入 FFmpeg 相关模块
+        const [{ FFmpeg }, { toBlobURL }] = await Promise.all([
+            import('@ffmpeg/ffmpeg').catch((err) => {
+                const message = err instanceof Error ? err.message : 'Unknown error';
+                throw new Error(`Failed to load @ffmpeg/ffmpeg: ${message}`);
+            }),
+            import('@ffmpeg/util').catch((err) => {
+                const message = err instanceof Error ? err.message : 'Unknown error';
+                throw new Error(`Failed to load @ffmpeg/util: ${message}`);
+            }),
+        ]);
+        const { multiThreading } = options ?? {};
+        const ffmpeg = new FFmpeg();
+        const isSupportMultiThreading = !!multiThreading;
+        const config = {
+            classWorkerURL: await toBlobURL(HELPER_CONFIG.FFMPEG.CLASSWORKER, 'text/javascript'),
+            coreURL: '',
+            wasmURL: '',
+        };
+        if (isSupportMultiThreading) {
+            config.coreURL = await toBlobURL(HELPER_CONFIG.FFMPEG.MT.CORE, 'text/javascript');
+            config.wasmURL = await toBlobURL(HELPER_CONFIG.FFMPEG.MT.WASM, 'application/wasm');
+            config.workerURL = await toBlobURL(HELPER_CONFIG.FFMPEG.MT.WORKER, 'text/javascript');
+        }
+        else {
+            config.coreURL = await toBlobURL(HELPER_CONFIG.FFMPEG.DEFAULT.CORE, 'text/javascript');
+            config.wasmURL = await toBlobURL(HELPER_CONFIG.FFMPEG.DEFAULT.WASM, 'application/wasm');
+        }
+        await ffmpeg.load(config);
+        return ffmpeg;
+    }
+    catch (error) {
+        throw error instanceof Error ? error : new Error(`Unknown error occurred while loading FFmpeg: ${String(error)}`);
+    }
+}
+export function clearPlayerAssets(player) {
+    for (const composition of player.getCompositions()) {
+        for (const texture of composition.textures) {
+            if (!texture.isDestroyed) {
+                texture.dispose();
+            }
+        }
+    }
+    //@ts-expect-error @赤芍 to fix
+    if (!player.disposed) {
+        player.destroyCurrentCompositions();
+    }
+}

package/dist/exporter/wav-audio.js

@@ -0,0 +1,50 @@
+export class WavAudio {
+    sampleRate;
+    duration;
+    channels;
+    constructor(options) {
+        const { sampleRate = 44100, duration = 1, channels = 2 } = options ?? {};
+        this.sampleRate = sampleRate;
+        this.duration = duration;
+        this.channels = channels;
+    }
+    getBuffer() {
+        const numSamples = this.sampleRate * this.duration;
+        const bytesPerSample = 2;
+        const dataLength = numSamples * this.channels * bytesPerSample;
+        const fileSize = 44 + dataLength;
+        const buffer = new ArrayBuffer(fileSize);
+        const view = new DataView(buffer);
+        let pos = 0;
+        const writeString = (str) => {
+            for (let i = 0; i < str.length; i++) {
+                view.setUint8(pos++, str.charCodeAt(i));
+            }
+        };
+        const writeUint32 = (v) => {
+            view.setUint32(pos, v, true);
+            pos += 4;
+        };
+        const writeUint16 = (v) => {
+            view.setUint16(pos, v, true);
+            pos += 2;
+        };
+        writeString('RIFF');
+        writeUint32(fileSize - 8);
+        writeString('WAVE');
+        writeString('fmt ');
+        writeUint32(16);
+        writeUint16(1);
+        writeUint16(this.channels);
+        writeUint32(this.sampleRate);
+        writeUint32(this.sampleRate * this.channels * bytesPerSample);
+        writeUint16(this.channels * bytesPerSample);
+        writeUint16(16);
+        writeString('data');
+        writeUint32(dataLength);
+        for (let i = 0; i < dataLength; i++) {
+            view.setUint8(pos++, 0);
+        }
+        return new Uint8Array(buffer);
+    }
+}

package/dist/gesture-handler/gizmo/adsorption-gizmo.js

@@ -0,0 +1,227 @@
+import { Graphics } from '@pixi/graphics';
+import { SDK } from '../../sdk';
+import { Gizmo } from './gizmo';
+import { Line2, Vector2 } from '../../math';
+export class AdsorptionGizmo extends Gizmo {
+    /**
+     * @description 吸附对齐结果
+     */
+    results = [];
+    /**
+     * @description 绘制图形
+     */
+    graphics = new Graphics();
+    /**
+     * @description 吸附结果
+     */
+    absorptionResult = {};
+    type = 'adsorption';
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.adsorptionGizmoEnabled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.adsorptionGizmoEnabled = bool;
+    }
+    preparationAction() {
+        return undefined;
+    }
+    getCursorState() {
+        return undefined;
+    }
+    preAction() {
+        return undefined;
+    }
+    action() { }
+    cancelPreparation() { }
+    actionKey() { }
+    endActionKey() { }
+    endAction() {
+        return undefined;
+    }
+    interruption() {
+        return undefined;
+    }
+    /**
+     * @description 包围盒位移吸附功能
+     * @param shift 偏移值
+     * @param box 目标包围盒
+     * @param otherBoxes 吸附包围盒
+     * @param xEnabled 是否进行x轴吸附
+     * @param yEnabled 是否进行y周吸附
+     * @returns 无
+     */
+    boxTranslationAdsorption(shift, box, otherBoxes, xEnabled = true, yEnabled = true) {
+        this.results = [];
+        if (!this.interactive) {
+            console.warn('Adsorption gizmo is not opened, use #SDK.setAdsorptionConfig() open this feature.');
+            return;
+        }
+        if (box.isEmpty()) {
+            return;
+        }
+        const absorptionShift = new Vector2(this.absorptionResult?.x ?? 0, this.absorptionResult?.y ?? 0).add(shift);
+        const targetBox = box.clone().translate(absorptionShift);
+        const targetBoxCenter = targetBox.getCenter();
+        this.absorptionResult = {};
+        // 对包围盒进行点对齐判断，以及获得可以做居中对齐判断的四个方向的包围盒
+        otherBoxes.forEach(box => {
+            if (box.isEmpty()) {
+                return;
+            }
+            box.corners.forEach(boxCorner => {
+                targetBox.corners.forEach(targetCorner => {
+                    this.getPointAbsorption(targetCorner, boxCorner, xEnabled, yEnabled);
+                });
+                this.getPointAbsorption(targetBoxCenter, boxCorner, xEnabled, yEnabled);
+            });
+            const boxCenter = box.getCenter();
+            this.getPointAbsorption(targetBoxCenter, boxCenter, xEnabled, yEnabled);
+            targetBox.corners.forEach(targetCorner => {
+                this.getPointAbsorption(targetCorner, boxCenter, xEnabled, yEnabled);
+            });
+        });
+    }
+    /**
+     * @description 点位移吸附功能
+     * @param shift 偏移值
+     * @param point 目标点
+     * @param otherPoints 吸附点集合
+     * @returns 无
+     */
+    pointTranslationAdsorption(shift, point, otherPoints, xEnabled = true, yEnabled = true) {
+        this.results = [];
+        if (!this.interactive) {
+            console.warn('Adsorption is not opened, use #SDK.setAdsorptionConfig() open this feature.');
+            return;
+        }
+        const absorptionShift = new Vector2(this.absorptionResult?.x ?? 0, this.absorptionResult?.y ?? 0).add(shift);
+        const targetPoint = point.clone().add(absorptionShift);
+        this.absorptionResult = {};
+        otherPoints.forEach(otherPoint => {
+            this.getPointAbsorption(targetPoint, otherPoint, xEnabled, yEnabled);
+        });
+    }
+    /**
+     * @description 获取点吸附结果
+     * @param point 目标点
+     * @param other 吸附点
+     */
+    getPointAbsorption(point, other, xEnabled = true, yEnabled = true) {
+        if (xEnabled && Math.abs(point.x - other.x) < SDK.config.gestureHandlerConfig.adsorptionGizmoConfig.distance) {
+            this.refreshPointAbsorptionResult(point, other, 'x');
+        }
+        if (yEnabled && Math.abs(point.y - other.y) < SDK.config.gestureHandlerConfig.adsorptionGizmoConfig.distance) {
+            this.refreshPointAbsorptionResult(point, other, 'y');
+        }
+    }
+    /**
+     * 刷新吸附结果
+     * @param point 目标点
+     * @param other 吸附点
+     * @param direction 吸附方向
+     */
+    refreshPointAbsorptionResult(point, other, direction) {
+        const distance = point[direction] - other[direction];
+        const targetPointProperty = direction === 'x' ? 'xPoints' : 'yPoints';
+        // 吸附结果不存在时
+        if (this.absorptionResult && this.absorptionResult[direction] === undefined) {
+            this.absorptionResult[direction] = distance;
+            this.absorptionResult[targetPointProperty] = [{
+                    point,
+                    targets: [other],
+                }];
+            // 当 吸附距离绝对值 小于 Math.abs(this.absorptionResult[direction]!) + 0.05 时，需要进行判断【0.05为容差，防止点逆投影运算带来的偏差】
+        }
+        else if (Math.abs(distance) - Math.abs(this.absorptionResult[direction] ?? 0) <= 0.005) {
+            // 如果distance与吸附距离之间差值绝对值小于0.1  表示属于同一对齐线
+            if (Math.abs(Math.abs(distance) - Math.abs(this.absorptionResult[direction] ?? 0)) < 0.05 && (distance * (this.absorptionResult[direction] ?? 0) > 0)) {
+                // 做兼容
+                if (this.absorptionResult[targetPointProperty] === undefined) {
+                    this.absorptionResult[direction] = distance;
+                    this.absorptionResult[targetPointProperty] = [{
+                            point,
+                            targets: [other],
+                        }];
+                }
+                else {
+                    const result = this.absorptionResult[targetPointProperty].filter(info => info.point.equals(point));
+                    if (result === undefined || result.length === 0) {
+                        this.absorptionResult[targetPointProperty]?.push({
+                            point,
+                            targets: [other],
+                        });
+                    }
+                    else {
+                        result[0]?.targets.push(other);
+                    }
+                }
+                // 当吸附距离绝对值 小于 Math.abs(this.absorptionResult[direction]!) 且 大于 0.1时，替换原有吸附信息
+            }
+            else {
+                this.absorptionResult[direction] = distance;
+                this.absorptionResult[targetPointProperty] = [{
+                        point,
+                        targets: [other],
+                    }];
+            }
+        }
+    }
+    /**
+     * 基于吸附结果生成对齐结果
+     */
+    refreshResults() {
+        if (this.absorptionResult === undefined) {
+            return;
+        }
+        const { x, y, xPoints, yPoints } = this.absorptionResult;
+        const absorptionDistance = new Vector2(x ?? 0, y ?? 0);
+        if (x !== undefined && xPoints !== undefined) {
+            xPoints.forEach(xPointInfo => {
+                const point = xPointInfo.point.clone().subtract(absorptionDistance);
+                const startPoint = point.clone();
+                const endPoint = point.clone();
+                xPointInfo.targets.forEach(target => {
+                    startPoint.x = target.x;
+                    startPoint.y = Math.min(startPoint.y, target.y);
+                    endPoint.x = target.x;
+                    endPoint.y = Math.max(endPoint.y, target.y);
+                });
+                this.results.push(new Line2(startPoint, endPoint));
+            });
+        }
+        if (y !== undefined && yPoints !== undefined) {
+            yPoints.forEach(yPointInfo => {
+                const point = yPointInfo.point.clone().subtract(absorptionDistance);
+                const startPoint = point.clone();
+                const endPoint = point.clone();
+                yPointInfo.targets.forEach(target => {
+                    startPoint.y = target.y;
+                    startPoint.x = Math.min(startPoint.x, target.x);
+                    endPoint.y = target.y;
+                    endPoint.x = Math.max(endPoint.x, target.x);
+                });
+                this.results.push(new Line2(startPoint, endPoint));
+            });
+        }
+    }
+    refreshRenderObject() {
+        this.graphics.clear();
+        const { lineWidth, lineColor } = SDK.config.gestureHandlerConfig.adsorptionGizmoConfig;
+        this.results.forEach(adsorptionLine => {
+            this.graphics.lineStyle(lineWidth, lineColor);
+            this.graphics.drawLine(adsorptionLine);
+        });
+    }
+    getRenderObjects() {
+        if (!this.interactive) {
+            return [];
+        }
+        this.refreshResults();
+        this.refreshRenderObject();
+        return [this.graphics];
+    }
+    clearAbsorptionResult() {
+        this.results = [];
+        this.absorptionResult = {};
+    }
+}