@vvfx/sdk 0.2.7 → 0.2.9

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

@@ -0,0 +1,648 @@
+import { Box2, Vector2 } from '../../math';
+import { SDK } from '../../sdk';
+import { GizmoUndoRedo } from '../../service/UndoRedo';
+import { assertExist } from '../../utils';
+import { BLEND_MODES, Container, Graphics, LINE_CAP, LINE_JOIN, RenderTexture, Sprite, Texture } from '../../wireframe';
+import { Gizmo } from './gizmo';
+export class MaskGizmo extends Gizmo {
+    constructor(utils, app, eventEmitter) {
+        super();
+        this._pageDataUtils = utils;
+        this._app = app;
+        this._eventEmitter = eventEmitter;
+    }
+    _pageDataUtils;
+    _eventEmitter;
+    _app;
+    /**
+     * 用于持久化蒙版状态的 RenderTexture
+     */
+    maskRenderTexture = null;
+    /**
+     * 用于显示 RenderTexture 的 Sprite
+     */
+    maskSprite = null;
+    _config = {};
+    boxGraphics = new Graphics();
+    type = 'mask';
+    mode = 'paint';
+    /**
+     * 蒙版工具独立的撤销重做实例
+     */
+    _undoRedo = new GizmoUndoRedo();
+    /**
+     * 存储绘画开始前的数据，用于 undoRedo
+     */
+    _oldLines;
+    /**
+     * 框选擦除进行中标记（按下到松开之间），用于实时选框描边的显示控制
+     */
+    _isBoxErasing = false;
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    result = {
+        status: 'init',
+        lines: [],
+    };
+    /**
+     * 获取蒙版工具的撤销重做实例
+     */
+    get undoRedo() {
+        return this._undoRedo;
+    }
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.maskGizmoEnabled;
+    }
+    set interactive(bool) {
+        if (bool === SDK.config.gestureHandlerConfig.maskGizmoEnabled) {
+            return;
+        }
+        if (!bool) {
+            this.result.status = 'init';
+        }
+        SDK.config.gestureHandlerConfig.maskGizmoEnabled = bool;
+    }
+    get config() {
+        return {
+            ...SDK.config.gestureHandlerConfig.maskGizmoConfig,
+            ...this._config,
+        };
+    }
+    set config(config) {
+        this._config = {
+            ...this._config,
+            ...config,
+        };
+    }
+    /**
+     * 设置模式
+     * @param mode 模式类型：'paint' 笔刷涂抹、'erase' 笔刷逐笔擦除、'box-erase' 框选擦除、'box-paint' 框选涂抹
+     */
+    setMode(mode) {
+        this.mode = mode;
+    }
+    /**
+     * @description 判断点是否在包围盒内
+     */
+    _isPointInBox(p, box) {
+        return p.x >= box.min.x && p.x <= box.max.x
+            && p.y >= box.min.y && p.y <= box.max.y;
+    }
+    /**
+     * @description 将屏幕坐标转换为包围盒内的归一化坐标 [0,1]（钳制在范围内）
+     */
+    _toNormalized(p, box) {
+        const x = Math.max(0, Math.min(1, (p.x - box.min.x) / (box.max.x - box.min.x)));
+        const y = Math.max(0, Math.min(1, (p.y - box.min.y) / (box.max.y - box.min.y)));
+        return new Vector2(x, y);
+    }
+    initialize() { }
+    preparationAction(event) {
+        if (!this.interactive) {
+            return undefined;
+        }
+        this.result.point = new Vector2(event.offsetX, event.offsetY);
+        return this.type;
+    }
+    preAction(event) {
+        if (!this.interactive) {
+            return undefined;
+        }
+        // 存储绘画前的数据用于 undoRedo
+        this._oldLines = {
+            lines: JSON.parse(JSON.stringify(this.result.lines)),
+        };
+        // 更新鼠标位置
+        this.result.point = new Vector2(event.offsetX, event.offsetY);
+        // 框选模式（框选擦除 / 框选涂抹）：仅在元素包围盒内按下才触发
+        if (this.mode === 'box-erase' || this.mode === 'box-paint') {
+            const box = this.result.box;
+            if (!box || !this._isPointInBox(this.result.point, box)) {
+                // 包围盒外按下：不触发框选，交由其它 gizmo
+                return undefined;
+            }
+            const start = this._toNormalized(this.result.point, box);
+            this.result.lines.push({
+                type: this.mode === 'box-paint' ? 'paint' : 'erase',
+                shape: 'rect',
+                brushSize: 0,
+                points: [start, start.clone()],
+            });
+            this._isBoxErasing = true;
+            return this.type;
+        }
+        // 开启新画笔
+        this.result.lines.push({
+            type: this.mode,
+            brushSize: this.config.brushSize,
+            points: [],
+        });
+        return this.type;
+    }
+    action(event) {
+        if (!this.interactive
+            || this.result.status === 'init') {
+            return;
+        }
+        // 更新鼠标位置
+        const box = this.result.box;
+        const point = new Vector2(event.offsetX, event.offsetY);
+        this.result.point = point;
+        const lastLine = this.result.lines[this.result.lines.length - 1];
+        // 框选擦除：更新框选终点（钳制到包围盒内）
+        if (lastLine?.shape === 'rect') {
+            lastLine.points[1] = this._toNormalized(point, box);
+            return;
+        }
+        // 记录鼠标划线位置（笔刷模式）
+        const np = new Vector2((event.offsetX - box.min.x) / (box.max.x - box.min.x), (event.offsetY - box.min.y) / (box.max.y - box.min.y));
+        lastLine?.points.push(np);
+    }
+    endAction() {
+        if (!this.interactive) {
+            return undefined;
+        }
+        const lastLine = this.result.lines[this.result.lines.length - 1];
+        // 框选擦除：起点==终点视为空框选，移除；否则提交 undoRedo
+        if (lastLine?.shape === 'rect') {
+            this._isBoxErasing = false;
+            const [a, b] = lastLine.points;
+            const isEmpty = !!a && !!b && a.x === b.x && a.y === b.y;
+            if (this._oldLines && !isEmpty) {
+                const operation = {
+                    type: 'update',
+                    oldData: this._oldLines,
+                    newData: {
+                        lines: JSON.parse(JSON.stringify(this.result.lines)),
+                    },
+                };
+                this._undoRedo.push(operation);
+                this._eventEmitter.emit('maskGizmoUndoRedoChange', operation);
+            }
+            else {
+                // 空框选移除
+                this.result.lines.pop();
+            }
+            this._oldLines = undefined;
+            return this.type;
+        }
+        // 记录操作到 undoRedo（仅当画线有实际点时才记录）
+        if (this._oldLines && lastLine && lastLine.points.length > 0) {
+            const operation = {
+                type: 'update',
+                oldData: this._oldLines,
+                newData: {
+                    lines: JSON.parse(JSON.stringify(this.result.lines)),
+                },
+            };
+            this._undoRedo.push(operation);
+            this._eventEmitter.emit('maskGizmoUndoRedoChange', operation);
+        }
+        else if (lastLine?.points.length === 0) {
+            // 如果没有实际绘制点，移除空的线条
+            this.result.lines.pop();
+        }
+        this._oldLines = undefined;
+        return this.type;
+    }
+    interruption() {
+        return undefined;
+    }
+    actionKey() { }
+    endActionKey() { }
+    cancelPreparation() { }
+    refreshResults() {
+        if (this.interactive) {
+            const pageData = this._pageDataUtils.getPageData();
+            assertExist(pageData, 'You must call SDK#run() first');
+            if (pageData.activeData.selectedItems.length !== 1) {
+                console.warn('Mask Gizmo can edit one picture at a time.');
+            }
+            else {
+                if (this.result.status === 'init') {
+                    const itemViewBox = this._pageDataUtils.getViewBoxById(pageData.activeData.selectedItems[0]);
+                    this.result = {
+                        status: 'done',
+                        box: itemViewBox.clone(),
+                        lines: [],
+                    };
+                }
+                else {
+                    const box = this.result.box;
+                    const currentViewBox = this._pageDataUtils.getViewBoxById(pageData.activeData.selectedItems[0]);
+                    const shift = currentViewBox.getCenter().subtract(box.getCenter());
+                    const scaleValue = currentViewBox.getSize().x / box.getSize().x;
+                    box.translate(shift);
+                    box.scale(scaleValue);
+                }
+                this.refreshCursorResult();
+            }
+        }
+        else {
+            this.result = { status: 'init', lines: [] };
+        }
+    }
+    getRenderObjects() {
+        if (!this.interactive) {
+            return [];
+        }
+        else {
+            return this.refreshRenderObjects();
+        }
+    }
+    /**
+     * 清理 RenderTexture
+     */
+    clearRenderObjects() {
+        this.boxGraphics.clear();
+        if (this.maskRenderTexture) {
+            this.maskRenderTexture.destroy(true);
+            this.maskRenderTexture = null;
+        }
+        if (this.maskSprite) {
+            this.maskSprite.destroy();
+            this.maskSprite = null;
+        }
+    }
+    refreshRenderObjects() {
+        this.clearRenderObjects();
+        if (!this.interactive || this.result.status === 'init') {
+            return [];
+        }
+        const { maskImage, brushColor, brushAlpha, boxLineWidth, boxLineColor, boxLineAlpha, } = this.config;
+        const box = this.result.box;
+        const { min, max } = box;
+        // 创建新的 RenderTexture，尺寸为包围盒的大小
+        const width = Math.ceil(max.x - min.x);
+        const height = Math.ceil(max.y - min.y);
+        this.maskRenderTexture = RenderTexture.create({
+            width,
+            height,
+        });
+        const viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+        // 创建 Sprite 用于显示画笔
+        this.maskSprite = new Sprite(this.maskRenderTexture);
+        this.maskSprite.width = width;
+        this.maskSprite.height = height;
+        this.maskSprite.position.set(min.x, min.y);
+        this.maskSprite.alpha = brushAlpha;
+        // 加载主体遮罩
+        if (maskImage) {
+            const container = new Container();
+            const mainPartTexture = Texture.from(maskImage);
+            const mainPartSprite = new Sprite(mainPartTexture);
+            // 设置 mask sprite 的尺寸与包围盒一致
+            mainPartSprite.width = width;
+            mainPartSprite.height = height;
+            // 创建要被遮罩的内容
+            const mainPartGraphics = new Graphics();
+            mainPartGraphics.beginFill(brushColor);
+            mainPartGraphics.drawRect(0, 0, width, height);
+            mainPartGraphics.endFill();
+            // 应用遮罩
+            mainPartGraphics.mask = mainPartSprite;
+            container.addChild(mainPartGraphics);
+            container.addChild(mainPartSprite);
+            this._app.renderer.render(container, {
+                renderTexture: this.maskRenderTexture,
+                clear: false,
+            });
+            container.destroy();
+            mainPartTexture.destroy();
+            mainPartSprite.destroy();
+        }
+        // 绘制外框
+        const topBox = new Box2(new Vector2(min.x, min.y), new Vector2(max.x, min.y));
+        const leftBox = new Box2(new Vector2(min.x, min.y), new Vector2(min.x, max.y));
+        const rightBox = new Box2(new Vector2(max.x, min.y), new Vector2(max.x, min.y));
+        const bottomBox = new Box2(new Vector2(min.x, max.y), new Vector2(max.x, max.y));
+        this.boxGraphics.fillBox(topBox);
+        this.boxGraphics.fillBox(leftBox);
+        this.boxGraphics.fillBox(rightBox);
+        this.boxGraphics.fillBox(bottomBox);
+        // 绘制元素选包围盒
+        this.boxGraphics.lineStyle(boxLineWidth, boxLineColor, boxLineAlpha);
+        this.boxGraphics.drawBox(box);
+        this.boxGraphics.endFill();
+        // 框选擦除进行中：叠加当前拖动矩形的可视描边
+        const lastLine = this.result.lines[this.result.lines.length - 1];
+        if (this._isBoxErasing && lastLine?.shape === 'rect' && lastLine.points.length >= 2) {
+            const [a, b] = lastLine.points;
+            if (a && b) {
+                const selBox = new Box2(new Vector2(box.min.x + Math.min(a.x, b.x) * (box.max.x - box.min.x), box.min.y + Math.min(a.y, b.y) * (box.max.y - box.min.y)), new Vector2(box.min.x + Math.max(a.x, b.x) * (box.max.x - box.min.x), box.min.y + Math.max(a.y, b.y) * (box.max.y - box.min.y)));
+                this.boxGraphics.lineStyle(boxLineWidth, boxLineColor, boxLineAlpha);
+                this.boxGraphics.drawBox(selBox);
+                this.boxGraphics.endFill();
+            }
+        }
+        // 1. 画线形（只用于遮罩，不直接显示
+        for (const line of this.result.lines) {
+            if (!line) {
+                continue;
+            }
+            const lineGraphics = new Graphics();
+            // 矩形框选：填充矩形，paint 用 NORMAL 叠加，erase 用 DST_OUT 抠除
+            if (line.shape === 'rect') {
+                const a = line.points[0];
+                const b = line.points[1];
+                if (a && b) {
+                    const w = box.max.x - box.min.x;
+                    const h = box.max.y - box.min.y;
+                    const x0 = Math.min(a.x, b.x) * w;
+                    const y0 = Math.min(a.y, b.y) * h;
+                    const x1 = Math.max(a.x, b.x) * w;
+                    const y1 = Math.max(a.y, b.y) * h;
+                    // 太小（纯点击）不渲染，避免 1px 擦除/涂抹点
+                    if (x1 - x0 > 0.5 || y1 - y0 > 0.5) {
+                        lineGraphics.beginFill(brushColor);
+                        lineGraphics.drawRect(x0, y0, x1 - x0, y1 - y0);
+                        lineGraphics.endFill();
+                        lineGraphics.blendMode = line.type === 'paint' ? BLEND_MODES.NORMAL : BLEND_MODES.DST_OUT;
+                        this._app.renderer.render(lineGraphics, {
+                            renderTexture: this.maskRenderTexture,
+                            clear: false,
+                        });
+                    }
+                }
+                lineGraphics.destroy();
+                continue;
+            }
+            lineGraphics.blendMode = line.type === 'paint' ? BLEND_MODES.NORMAL : BLEND_MODES.DST_OUT;
+            lineGraphics.lineStyle({
+                width: line.brushSize * viewportParam.scale,
+                color: brushColor,
+                cap: LINE_CAP.ROUND,
+                join: LINE_JOIN.ROUND,
+                native: false,
+                alignment: 0.5,
+            });
+            for (let j = 0; j < line.points.length; j++) {
+                const point = line.points[j];
+                if (!point) {
+                    continue;
+                }
+                const x = point.x * (box.max.x - box.min.x);
+                const y = point.y * (box.max.y - box.min.y);
+                if (j === 0) {
+                    lineGraphics.moveTo(x, y);
+                }
+                else {
+                    lineGraphics.lineTo(x, y);
+                }
+            }
+            lineGraphics.endFill();
+            this._app.renderer.render(lineGraphics, {
+                renderTexture: this.maskRenderTexture,
+                clear: false,
+            });
+            lineGraphics.destroy();
+        }
+        return [this.boxGraphics, this.maskSprite];
+    }
+    /** 刷新指针结果 */
+    refreshCursorResult() {
+        const { point, box } = this.result;
+        this.cursorResult = {
+            type: 'normal',
+            angle: 0,
+        };
+        if (!point || !box) {
+            return;
+        }
+        const inside = point.x >= box.min.x && point.x <= box.max.x
+            && point.y >= box.min.y && point.y <= box.max.y;
+        if (!inside) {
+            return;
+        }
+        // 框选模式（框选擦除 / 框选涂抹）：crosshair
+        if (this.mode === 'box-erase' || this.mode === 'box-paint') {
+            this.cursorResult = {
+                type: 'box-select',
+                angle: 0,
+            };
+            return;
+        }
+        const viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+        this.cursorResult = {
+            type: 'circle',
+            angle: 0,
+            radius: this.config.brushSize * viewportParam.scale / 2,
+        };
+    }
+    close() {
+        this._config.maskImage = undefined;
+        this.result.lines = [];
+        this._undoRedo.clear();
+    }
+    clearMask() {
+        // 记录清空操作到 undoRedo
+        if (this.result.lines.length > 0) {
+            const operation = {
+                type: 'update',
+                oldData: {
+                    lines: JSON.parse(JSON.stringify(this.result.lines)),
+                },
+                newData: {
+                    lines: [],
+                },
+            };
+            this._undoRedo.push(operation);
+            this._eventEmitter.emit('maskGizmoUndoRedoChange', operation);
+        }
+        this.result.lines = [];
+    }
+    /**
+     * 撤销操作
+     * @returns 是否成功撤销
+     */
+    undo() {
+        const operation = this._undoRedo.undo();
+        if (operation) {
+            this.result.lines = JSON.parse(JSON.stringify(operation.oldData.lines));
+            return true;
+        }
+        return false;
+    }
+    /**
+     * 重做操作
+     * @returns 是否成功重做
+     */
+    redo() {
+        const operation = this._undoRedo.redo();
+        if (operation) {
+            this.result.lines = JSON.parse(JSON.stringify(operation.newData.lines));
+            return true;
+        }
+        return false;
+    }
+    /**
+     * 检查是否可以撤销
+     */
+    get canUndo() {
+        return this._undoRedo.canUndo;
+    }
+    /**
+     * 检查是否可以重做
+     */
+    get canRedo() {
+        return this._undoRedo.canRedo;
+    }
+    /**
+     * 清空 undoRedo 历史
+     */
+    clearUndoRedo() {
+        this._undoRedo.clear();
+    }
+    /**
+     * 加载蒙版图片
+     * @param url 图片地址
+     * @returns Promise<HTMLImageElement>
+     */
+    loadMaskImage(url) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                resolve(img);
+            };
+            img.onerror = (err) => {
+                reject(new Error('Failed to load mask image.'));
+            };
+            img.src = url;
+        });
+    }
+    /**
+     * 获取蒙版 base64（异步版本，确保 maskImage 正确加载）
+     * @returns Promise<蒙版图像的 base64 字符串 | null>
+     * @description maskImage 是一张黑白蒙版图片，白色表示主体部分
+     *              输出蒙版：主体色为 maskColor，背景色为白色
+     */
+    getMask() {
+        const box = this.result.box;
+        if (!box) {
+            return null;
+        }
+        const width = Math.ceil(box.max.x - box.min.x);
+        const height = Math.ceil(box.max.y - box.min.y);
+        // 创建 Canvas 用于绘制蒙版
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return null;
+        }
+        // 获取蒙版配置
+        const { maskImage, maskColor, maskBackgroundColor } = this.config;
+        // 若无划线且无蒙版图片，则认为是无蒙版
+        if (this.result.lines.length === 0 && !maskImage) {
+            return null;
+        }
+        // 将数字颜色转换为十六进制字符串
+        const maskHexColor = '#' + maskColor.toString(16).padStart(6, '0');
+        const maskBackgroundHexColor = '#' + maskBackgroundColor.toString(16).padStart(6, '0');
+        // 填充白色背景（非主体部分）
+        ctx.fillStyle = maskBackgroundHexColor;
+        ctx.fillRect(0, 0, width, height);
+        // 如果配置了蒙版图片，先加载并绘制蒙版图片
+        if (maskImage) {
+            try {
+                ctx.drawImage(maskImage, 0, 0, width, height);
+                // 通过像素操作：将 maskImage 白色区域变为 maskColor，黑色区域变为白色背景
+                const imageData = ctx.getImageData(0, 0, width, height);
+                const data = imageData.data;
+                // 解析 maskColor
+                const mcR = (maskColor >> 16) & 0xFF;
+                const mcG = (maskColor >> 8) & 0xFF;
+                const mcB = maskColor & 0xFF;
+                // 解析 maskBackgroundColor
+                const mbcR = (maskBackgroundColor >> 16) & 0xFF;
+                const mbcG = (maskBackgroundColor >> 8) & 0xFF;
+                const mbcB = maskBackgroundColor & 0xFF;
+                for (let i = 0; i < data.length; i += 4) {
+                    const r = data[i];
+                    const g = data[i + 1];
+                    const b = data[i + 2];
+                    // 计算亮度，白色亮度高（主体），黑色亮度低（背景）
+                    const brightness = (r + g + b) / 3;
+                    if (brightness > 128) {
+                        // 白色区域（主体）-> maskColor
+                        data[i] = mcR;
+                        data[i + 1] = mcG;
+                        data[i + 2] = mcB;
+                    }
+                    else {
+                        // 黑色区域（背景）-> 白色
+                        data[i] = mbcR;
+                        data[i + 1] = mbcG;
+                        data[i + 2] = mbcB;
+                    }
+                }
+                ctx.putImageData(imageData, 0, 0);
+            }
+            catch (err) {
+                console.warn('Failed to load mask image:', err);
+            }
+        }
+        const viewportParam = this._pageDataUtils.interactionUtils.viewportParam;
+        const scale = viewportParam.scale;
+        // 绘制用户画笔线条
+        // paint: 添加主体色（maskColor）
+        // erase: 露出白色背景
+        for (const line of this.result.lines) {
+            if (!line || line.points.length === 0) {
+                continue;
+            }
+            // 矩形框选：填充矩形
+            if (line.shape === 'rect') {
+                const [a, b] = line.points;
+                if (!a || !b) {
+                    continue;
+                }
+                const x0 = Math.min(a.x, b.x) * width;
+                const y0 = Math.min(a.y, b.y) * height;
+                const x1 = Math.max(a.x, b.x) * width;
+                const y1 = Math.max(a.y, b.y) * height;
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.fillStyle = line.type === 'paint' ? maskHexColor : maskBackgroundHexColor;
+                ctx.fillRect(x0, y0, Math.max(1, x1 - x0), Math.max(1, y1 - y0));
+                continue;
+            }
+            ctx.lineWidth = line.brushSize * scale;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.globalCompositeOperation = 'source-over';
+            if (line.type === 'paint') {
+                // 涂抹：添加主体色
+                ctx.strokeStyle = maskHexColor;
+            }
+            else {
+                // 擦除：露出白色背景
+                ctx.strokeStyle = maskBackgroundHexColor;
+            }
+            ctx.beginPath();
+            for (let j = 0; j < line.points.length; j++) {
+                const point = line.points[j];
+                if (!point) {
+                    continue;
+                }
+                const x = point.x * width;
+                const y = point.y * height;
+                if (j === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+        }
+        // 生成 base64
+        return canvas.toDataURL('image/png');
+    }
+}