@vvfx/sdk 0.2.7 → 0.2.9

package/dist/gesture-handler/src/gesture-handler.js

@@ -0,0 +1,770 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { Application } from '@pixi/app';
+import { AdsorptionGizmo, ControlGizmo, SelectorGizmo, TransformGizmo } from '../gizmo';
+import { PreferenceGizmo } from '../gizmo/preference-gizmo';
+import { cursorMap, loadCursorIcons } from './icons';
+import { PictureCutGizmo } from '../gizmo/picture-cut-gizmo';
+import { SDK } from '../../sdk';
+import { TextGizmo } from '../gizmo/text-gizmo';
+import { Texture } from '@pixi/core';
+import { MaskGizmo } from '../gizmo/mask-gizmo';
+import { LoadingGizmo } from '../gizmo/loading-gizmo';
+import { PictureExpandGizmo } from '../gizmo/picture-expand-gizmo';
+import { SpriteTextEditGizmo } from '../gizmo/sprite-text-edit-gizmo';
+import { IconGizmo } from '../gizmo/icon-gizmo';
+import { ItemCreateGizmo } from '../gizmo/item-create-gizmo';
+export class GestureHandler {
+    wireframeApplication;
+    gizmos = [];
+    activeGizmo;
+    selectorGizmo;
+    transformGizmo;
+    controlGizmo;
+    preferenceGizmo;
+    pictureCutGizmo;
+    pictureExpandGizmo;
+    textGizmo;
+    maskGizmo;
+    loadingGizmo;
+    spriteTextEditGizmo;
+    iconGizmo;
+    itemCreateGizmo;
+    _ignoreInteraction = false;
+    clickButtons = 0;
+    container;
+    _emitter;
+    /**
+     * @description Current time when mouse down is first trigger.
+     */
+    clickTime = 0;
+    /**
+     * @description Is first click.
+     */
+    firstClick = true;
+    /**
+     * @description The maximum span duration a double click interact. - 500ms 操作是 windows 默认的双击时间间隔
+     */
+    dblclickTimeSpan = 500;
+    /**
+     * @description 是否按下空格键
+     */
+    spaceEmit = false;
+    /**
+     * @description 辅助面板交互状态
+     */
+    interactType = 'select';
+    constructor(container) {
+        this.gizmos = [];
+        const { width, height } = container.getBoundingClientRect();
+        this.wireframeApplication = new Application({
+            backgroundAlpha: 0,
+            width,
+            height,
+            resolution: 2,
+            autoDensity: true,
+            antialias: true,
+        });
+        this.container = container;
+        this.wireframeApplication.view.style.position = 'absolute';
+        this.wireframeApplication.view.id = 'wireframeApplicationCanvas';
+        container.appendChild(this.wireframeApplication.view);
+        this.wireframeApplication.stage.sortableChildren = true;
+        void loadCursorIcons();
+    }
+    set ignoreInteraction(state) {
+        if (state === this._ignoreInteraction) {
+            return;
+        }
+        this._ignoreInteraction = state;
+        if (state) {
+            this.activeGizmo?.cancelPreparation();
+            this.activeGizmo = undefined;
+        }
+    }
+    get ignoreInteraction() {
+        return this._ignoreInteraction;
+    }
+    resize() {
+        if (!this.wireframeApplication) {
+            return;
+        }
+        this.wireframeApplication.resizeTo = this.container;
+        this.render();
+    }
+    refresh() {
+        this.gizmos.forEach(gizmo => {
+            gizmo.refreshResults();
+        });
+    }
+    render() {
+        this.refresh();
+        if (!this.wireframeApplication?.stage) {
+            return;
+        }
+        this.wireframeApplication?.stage?.removeChildren();
+        const resultGizmos = this.ignoreInteraction ? [this.preferenceGizmo] : this.gizmos;
+        const results = resultGizmos.flatMap(gizmo => gizmo.getRenderObjects());
+        this.wireframeApplication?.stage?.addChild(...results);
+        // 绘制
+        this.wireframeApplication?.render();
+        // 获取鼠标指针样式 [移除屏幕时也持续绘制，因为其不可见]
+        const cursorResult = (this.activeGizmo instanceof TransformGizmo ||
+            this.activeGizmo instanceof PictureCutGizmo ||
+            this.activeGizmo instanceof PictureExpandGizmo ||
+            this.activeGizmo instanceof MaskGizmo ||
+            this.activeGizmo instanceof TextGizmo ||
+            this.activeGizmo instanceof ControlGizmo ||
+            this.activeGizmo instanceof IconGizmo ||
+            this.activeGizmo instanceof ItemCreateGizmo) ? this.activeGizmo.cursorResult : undefined;
+        this.setCursor(cursorResult);
+    }
+    async init(pageDataUtils, emitter) {
+        if (this.wireframeApplication === null) {
+            setTimeout(async () => {
+                await this.init(pageDataUtils, emitter);
+            }, 50);
+            return;
+        }
+        this.gizmos = [];
+        this.controlGizmo = new ControlGizmo(pageDataUtils);
+        this.selectorGizmo = new SelectorGizmo(pageDataUtils);
+        const adsorptionGizmo = new AdsorptionGizmo();
+        this.transformGizmo = new TransformGizmo(pageDataUtils, adsorptionGizmo, this.selectorGizmo);
+        this.preferenceGizmo = new PreferenceGizmo(pageDataUtils);
+        this.pictureCutGizmo = new PictureCutGizmo(pageDataUtils, emitter);
+        this.pictureExpandGizmo = new PictureExpandGizmo(pageDataUtils, emitter);
+        this.textGizmo = new TextGizmo(pageDataUtils, adsorptionGizmo, this.selectorGizmo, emitter, this.wireframeApplication?.view.parentElement);
+        this.textGizmo.rotationSprite.texture = await Texture.fromURL(SDK.config.gestureHandlerConfig.textGizmoConfig.rotationCornerTexture);
+        this.maskGizmo = new MaskGizmo(pageDataUtils, this.wireframeApplication, emitter);
+        this.loadingGizmo = new LoadingGizmo(pageDataUtils);
+        this.spriteTextEditGizmo = new SpriteTextEditGizmo(pageDataUtils, emitter);
+        this.iconGizmo = new IconGizmo(pageDataUtils, emitter);
+        await this.iconGizmo.init();
+        this.itemCreateGizmo = new ItemCreateGizmo(pageDataUtils, emitter);
+        this.gizmos.push(this.itemCreateGizmo, this.maskGizmo, this.spriteTextEditGizmo, this.pictureCutGizmo, this.pictureExpandGizmo, this.loadingGizmo, this.iconGizmo, this.transformGizmo, this.textGizmo, this.selectorGizmo, this.controlGizmo, this.preferenceGizmo, adsorptionGizmo);
+        this._emitter = emitter;
+        this.initEvents();
+        this.registerViewEvent();
+    }
+    initEvents() {
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
+    }
+    registerViewEvent() {
+        this.wireframeApplication.view.onmousedown = (event) => {
+            this.onMouseDown(event);
+        };
+        this.wireframeApplication.view.onmousemove = (event) => {
+            if (event.buttons === 0) {
+                this.onMouseMove(event);
+            }
+        };
+        this.wireframeApplication.view.onmouseout = () => {
+            this.selectorGizmo?.cancelPreparation();
+            // 鼠标跳出屏幕
+            this.render();
+        };
+        this.wireframeApplication.view.onwheel = (event) => {
+            this.onWheel(event);
+        };
+        this.wireframeApplication.view.oncontextmenu = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+        };
+    }
+    /**
+     * 鼠标按下事件
+     * @param event 鼠标事件
+     */
+    onMouseDown(event) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        this.clickButtons = event.buttons;
+        switch (this.interactType) {
+            case 'select': {
+                if (this.clickButtons === 4) {
+                    this.activeGizmo = this.controlGizmo;
+                    this.controlGizmo.preAction(event);
+                }
+                this.firstClick = this.firstClick ? Date.now() - this.clickTime < this.dblclickTimeSpan : false;
+                if (!this.firstClick) {
+                    // 当mouseUp后未进行mouseMove时，前置进行获取一次activeGizmo
+                    if (this.activeGizmo === undefined) {
+                        this.gizmos.forEach(gizmo => {
+                            if (!gizmo.interactive || this.activeGizmo) {
+                                return;
+                            }
+                            const activeType = gizmo.preparationAction(event);
+                            this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+                        });
+                    }
+                    const activeType = this.activeGizmo?.preAction(event);
+                    if (activeType && !['selector', 'transform'].includes(activeType) && this.selectorGizmo) {
+                        this.selectorGizmo.clearResult = true;
+                    }
+                    this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+                    this.clickTime = Date.now();
+                    this.firstClick = true;
+                }
+                else {
+                    this.gizmos.forEach(gizmo => {
+                        if (!gizmo.interactive) {
+                            return;
+                        }
+                        if (this.activeGizmo === undefined) {
+                            const activeType = gizmo.preparationAction(event);
+                            this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+                        }
+                        else {
+                            gizmo.cancelPreparation();
+                        }
+                    });
+                    if (this.activeGizmo && ['transform', 'text'].includes(this.activeGizmo.type)) {
+                        const activeType = this.activeGizmo.preAction(event, true);
+                        this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === (activeType ?? 'null'));
+                    }
+                    else if (this.activeGizmo && !['picture-cut', 'picture-expand', 'mask', 'sprite-text-edit', 'icon'].includes(this.activeGizmo.type)) {
+                        this.activeGizmo = undefined;
+                        const activeType = this.selectorGizmo?.preAction(event, true);
+                        this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === (activeType ?? 'null'));
+                    }
+                    this.firstClick = false;
+                }
+                break;
+            }
+            case 'hand': {
+                this.activeGizmo = this.controlGizmo;
+                this.activeGizmo.preAction(event);
+            }
+        }
+        this.render();
+        this._emitter?.emit('itemOnDragStart', this.activeGizmo?.type ?? 'null');
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    /**
+     * 鼠标移动事件
+     * @param event 鼠标事件
+     */
+    onMouseMove(event) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        // 无鼠标按下时，执行交互准备事件
+        if (event.buttons !== 0) {
+            this.activeGizmo?.action(event);
+            if (this.activeGizmo?.type !== 'selector' && this.selectorGizmo) {
+                this.selectorGizmo.clearResult = true;
+            }
+            this._emitter?.emit('itemOnDrag', this.activeGizmo?.type ?? 'null');
+        }
+        else {
+            switch (this.interactType) {
+                case 'select': {
+                    this.activeGizmo = undefined;
+                    if (this.spaceEmit) {
+                        this.activeGizmo = this.controlGizmo;
+                        this.controlGizmo.interactionType = 'mouse';
+                    }
+                    else {
+                        this.gizmos.forEach(gizmo => {
+                            if (!gizmo.interactive) {
+                                return;
+                            }
+                            if (this.activeGizmo === undefined) {
+                                const activeType = gizmo.preparationAction(event);
+                                if (activeType && !['selector', 'transform'].includes(activeType) && this.selectorGizmo) {
+                                    this.selectorGizmo.clearResult = true;
+                                }
+                                this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+                            }
+                            else {
+                                gizmo.cancelPreparation();
+                            }
+                        });
+                    }
+                    break;
+                }
+                case 'hand': {
+                    this.activeGizmo = this.controlGizmo;
+                    this.activeGizmo.preparationAction(event);
+                    break;
+                }
+            }
+        }
+        this.render();
+    }
+    /**
+     * 鼠标滚轮事件
+     * @param event 鼠标事件
+     */
+    onWheel(event) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        event.preventDefault();
+        if (this.selectorGizmo) {
+            this.selectorGizmo.clearResult = true;
+        }
+        if (this.spriteTextEditGizmo) {
+            this.spriteTextEditGizmo.clearPreSelected = true;
+        }
+        this.controlGizmo?.action(event);
+    }
+    /**
+     * 鼠标松开事件
+     * @param event 鼠标事件
+     */
+    onMouseUp(event) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        // 结束交互
+        const activeType = this.activeGizmo?.endAction(event);
+        this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+        // 当左键结束交互返回活跃Gizmo为空时，根据当前位置触发行动准备事件[以刷新鼠标状态]
+        if (this.activeGizmo === undefined && this.clickButtons === 1) {
+            this.gizmos.forEach(gizmo => {
+                if (!gizmo.interactive) {
+                    return;
+                }
+                if (this.activeGizmo === undefined) {
+                    const activeType = gizmo.preparationAction(event);
+                    this.activeGizmo = this.gizmos.find(gizmo => gizmo.type === activeType);
+                }
+                else {
+                    gizmo.cancelPreparation();
+                }
+            });
+        }
+        this.clickButtons = 0;
+        this._emitter?.emit('itemOnDragEnd', this.activeGizmo?.type ?? 'null');
+        this.render();
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+    }
+    onKeyDown(keyCode) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        if (keyCode.code.toLocaleLowerCase() === 'escape' && this.interactType !== 'select') {
+            this.setInteractType('select');
+        }
+        if (keyCode.code.toLocaleLowerCase() === 'space' && !this.activeGizmo?.active) {
+            this.spaceEmit = true;
+            this.activeGizmo = this.controlGizmo;
+            this.controlGizmo.interactionType = this.interactType === 'hand' || this.spaceEmit ? 'mouse' : 'wheel';
+        }
+        else {
+            this.gizmos.forEach(gizmo => {
+                gizmo.actionKey(keyCode);
+            });
+        }
+        this.render();
+    }
+    onKeyUp(keyCode) {
+        if (this.ignoreInteraction) {
+            return;
+        }
+        this.gizmos.forEach(gizmo => {
+            gizmo.endActionKey(keyCode);
+        });
+        if (keyCode.code.toLocaleLowerCase() === 'space') {
+            this.spaceEmit = false;
+            this.controlGizmo.interactionType = this.interactType === 'hand' || this.spaceEmit ? 'mouse' : 'wheel';
+        }
+        this.render();
+    }
+    dispose() {
+        this.container.removeChild(this.wireframeApplication.view);
+        this.wireframeApplication.destroy();
+        this.gizmos = [];
+        this.activeGizmo = undefined;
+    }
+    setCursor(result) {
+        let cssCursor = 'default';
+        if (result?.type === 'circle') {
+            const strokeWidth = 1;
+            const radius = (result.radius || 10);
+            const svgStr = encodeURIComponent(`<svg width="${radius * 2}" height="${radius * 2}" xmlns="http://www.w3.org/2000/svg"><circle cx="${radius}" cy="${radius}" r="${radius}" fill="rgba(255, 255, 255, 0.6)" stroke="#6A34FF" stroke-width="${strokeWidth}" /></svg>`);
+            cssCursor = `url("data:image/svg+xml,${svgStr}") ${radius} ${radius}, auto`;
+        }
+        else if (result?.type && ['scale', 'rotation', 'hand', 'active-hand', 'pointer', 'text-create', 'frame-create', 'box-select'].includes(result.type)) {
+            const cursor = cursorMap[result.type];
+            if (cursor.type === 'svg') {
+                const pointerShift = 16; // svg大小固定为32 * 32
+                // （旋转会导致CSS图标变糊）
+                cssCursor = encodeURIComponent(cursor.content.replace('rotate(0.00)', `rotate(${result.angle ?? 0})`));
+                cssCursor = `url("data:image/svg+xml,${cssCursor}") ${pointerShift} ${pointerShift}, auto`;
+            }
+            else { // cursor.type == preset
+                cssCursor = cursor.content;
+            }
+        }
+        this.wireframeApplication.view.style.cursor = cssCursor;
+    }
+    openPictureCutGizmo() {
+        if (!this.pictureCutGizmo) {
+            return;
+        }
+        this.setInteractType('select');
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.pictureCutGizmo.interactive = true;
+        if (this.pictureCutGizmo.interactive) {
+            this.pictureExpandGizmo.interactive = false;
+            this.maskGizmo.interactive = false;
+            this.selectorGizmo.interactive = false;
+            this.transformGizmo.interactive = false;
+            this.textGizmo.interactive = false;
+            this.itemCreateGizmo.interactive = false;
+        }
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    closePictureCutGizmo() {
+        if (!this.pictureCutGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.pictureCutGizmo.interactive = false;
+        this.transformGizmo.interactive = true;
+        this.selectorGizmo.interactive = true;
+        this.textGizmo.interactive = true;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    setInteractType(type) {
+        if (type === this.interactType) {
+            return;
+        }
+        this.interactType = type;
+        this.controlGizmo.interactionType = this.interactType === 'hand' || this.spaceEmit ? 'mouse' : 'wheel';
+    }
+    getCutInfo() {
+        return this.pictureCutGizmo?.getCutInfo();
+    }
+    setCutBox(min, max) {
+        const cutBox = this.pictureCutGizmo?.setCutBox(min, max);
+        this.render();
+        return cutBox;
+    }
+    openPictureExpandGizmo() {
+        if (!this.pictureExpandGizmo) {
+            return;
+        }
+        this.setInteractType('select');
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.pictureExpandGizmo.interactive = true;
+        if (this.pictureExpandGizmo.interactive) {
+            this.pictureCutGizmo.interactive = false;
+            this.maskGizmo.interactive = false;
+            this.selectorGizmo.interactive = false;
+            this.transformGizmo.interactive = false;
+            this.textGizmo.interactive = false;
+            this.itemCreateGizmo.interactive = false;
+        }
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    closePictureExpandGizmo() {
+        if (!this.pictureExpandGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.pictureExpandGizmo.interactive = false;
+        this.transformGizmo.interactive = true;
+        this.selectorGizmo.interactive = true;
+        this.textGizmo.interactive = true;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    getExpandInfo() {
+        return this.pictureExpandGizmo?.getExpandInfo();
+    }
+    setExpandBox(min, max) {
+        const cutBox = this.pictureExpandGizmo?.setExpandBox(min, max);
+        this.render();
+        return cutBox;
+    }
+    openMaskGizmo(brushSize) {
+        if (!this.maskGizmo) {
+            return;
+        }
+        this.setInteractType('select');
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.maskGizmo.interactive = true;
+        this.maskGizmo.config = {
+            brushSize,
+        };
+        if (this.maskGizmo.interactive) {
+            this.pictureCutGizmo.interactive = false;
+            this.pictureExpandGizmo.interactive = false;
+            this.transformGizmo.interactive = false;
+            this.selectorGizmo.interactive = false;
+            this.itemCreateGizmo.interactive = false;
+        }
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    clearMaskGizmo() {
+        if (!this.maskGizmo) {
+            return;
+        }
+        this.maskGizmo.clearMask();
+        this.render();
+    }
+    closeMaskGizmo() {
+        if (!this.maskGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.maskGizmo.interactive = false;
+        this.maskGizmo.close();
+        this.transformGizmo.interactive = true;
+        this.selectorGizmo.interactive = true;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    setMaskGizmoConfig(config) {
+        if (!this.maskGizmo) {
+            return;
+        }
+        this.maskGizmo.config = config;
+        this.render();
+    }
+    getMask() {
+        if (!this.maskGizmo) {
+            return;
+        }
+        return this.maskGizmo.getMask();
+    }
+    setMaskGizmoMode(mode) {
+        if (!this.maskGizmo) {
+            return;
+        }
+        this.maskGizmo.setMode(mode);
+        this.render();
+    }
+    openLoadingGizmo(id, options) {
+        if (!this.loadingGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.loadingGizmo.add(id, options);
+        if (this.loadingGizmo.interactive) {
+            this.maskGizmo.interactive = false;
+            this.pictureCutGizmo.interactive = false;
+            this.pictureExpandGizmo.interactive = false;
+            this.itemCreateGizmo.interactive = false;
+        }
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    updateLoadingGizmo(id, options) {
+        if (!this.loadingGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.loadingGizmo.update(id, options);
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    closeLoadingGizmo(id) {
+        if (!this.loadingGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.loadingGizmo.delete(id);
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    setPictureCutGizmoLockScale(state) {
+        this.pictureCutGizmo.isLockScale = state;
+    }
+    setPictureExpandGizmoLockScale(state) {
+        this.pictureExpandGizmo.isLockScale = state;
+    }
+    setTransformGizmoLockScale(state) {
+        this.transformGizmo.isLockScale = state;
+    }
+    // Mask Gizmo UndoRedo
+    maskGizmoUndo() {
+        if (!this.maskGizmo) {
+            return false;
+        }
+        const result = this.maskGizmo.undo();
+        if (result) {
+            this.render();
+        }
+        return result;
+    }
+    maskGizmoRedo() {
+        if (!this.maskGizmo) {
+            return false;
+        }
+        const result = this.maskGizmo.redo();
+        if (result) {
+            this.render();
+        }
+        return result;
+    }
+    get maskGizmoCanUndo() {
+        return this.maskGizmo?.canUndo ?? false;
+    }
+    get maskGizmoCanRedo() {
+        return this.maskGizmo?.canRedo ?? false;
+    }
+    clearMaskGizmoUndoRedo() {
+        this.maskGizmo?.clearUndoRedo();
+    }
+    // PictureCut Gizmo UndoRedo
+    pictureCutGizmoUndo() {
+        if (!this.pictureCutGizmo) {
+            return false;
+        }
+        const result = this.pictureCutGizmo.undo();
+        if (result) {
+            this.render();
+        }
+        return result;
+    }
+    pictureCutGizmoRedo() {
+        if (!this.pictureCutGizmo) {
+            return false;
+        }
+        const result = this.pictureCutGizmo.redo();
+        if (result) {
+            this.render();
+        }
+        return result;
+    }
+    get pictureCutGizmoCanUndo() {
+        return this.pictureCutGizmo?.canUndo ?? false;
+    }
+    get pictureCutGizmoCanRedo() {
+        return this.pictureCutGizmo?.canRedo ?? false;
+    }
+    clearPictureCutGizmoUndoRedo() {
+        this.pictureCutGizmo?.clearUndoRedo();
+    }
+    openSpriteTextGizmo(initParam) {
+        if (!this.spriteTextEditGizmo) {
+            return;
+        }
+        this.setInteractType('select');
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.spriteTextEditGizmo.interactive = true;
+        this.spriteTextEditGizmo.initResult(initParam);
+        if (this.spriteTextEditGizmo.interactive) {
+            this.maskGizmo.interactive = false;
+            this.pictureCutGizmo.interactive = false;
+            this.pictureExpandGizmo.interactive = false;
+            this.transformGizmo.interactive = false;
+            this.selectorGizmo.interactive = false;
+            this.itemCreateGizmo.interactive = false;
+        }
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    closeSpriteTextEditGizmo() {
+        if (!this.spriteTextEditGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.spriteTextEditGizmo.interactive = false;
+        this.spriteTextEditGizmo.clearResult();
+        this.transformGizmo.interactive = true;
+        this.selectorGizmo.interactive = true;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    setSpriteTextSelectedIndex(id, index) {
+        this.spriteTextEditGizmo?.setSelected(id, index);
+    }
+    setSpriteTextSelectedText(id, index, text) {
+        this.spriteTextEditGizmo?.setText(id, index, text);
+    }
+    setSpriteTextChangedState(id, index, hasChanged) {
+        this.spriteTextEditGizmo?.setChangedState(id, index, hasChanged);
+    }
+    setSpriteTextEditState(id, index, isEditing) {
+        this.spriteTextEditGizmo?.setEditState(id, index, isEditing);
+    }
+    openItemCreateGizmo(type) {
+        if (!this.itemCreateGizmo) {
+            return;
+        }
+        this.setInteractType('select');
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.itemCreateGizmo.interactive = true;
+        this.itemCreateGizmo.createType = type;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        if (this.itemCreateGizmo.interactive) {
+            this.maskGizmo.interactive = false;
+            this.pictureCutGizmo.interactive = false;
+            this.pictureExpandGizmo.interactive = false;
+            this.transformGizmo.interactive = false;
+            this.selectorGizmo.interactive = false;
+            this.spriteTextEditGizmo.interactive = false;
+        }
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    closeItemCreateGizmo() {
+        if (!this.itemCreateGizmo) {
+            return;
+        }
+        const preConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.itemCreateGizmo.interactive = false;
+        this.transformGizmo.interactive = true;
+        this.selectorGizmo.interactive = true;
+        const currentConfig = JSON.parse(JSON.stringify(SDK.config));
+        this.render();
+        this._emitter?.emit('sdkConfigChange', preConfig, currentConfig);
+    }
+    openTextGizmo(textItemId, mode = 'select') {
+        if (!this.textGizmo) {
+            return;
+        }
+        const pageDataUtils = this.selectorGizmo?.pageDataUtils;
+        // 如果指定了文本元素ID，则先选中该元素
+        if (textItemId !== undefined && pageDataUtils) {
+            pageDataUtils.clearSelectedItems();
+            pageDataUtils.addSelectedItems([textItemId]);
+        }
+        this.setInteractType('select');
+        this.textGizmo.interactionParam.type = 'edit';
+        this.textGizmo.interactionParam.textareaType = mode;
+        this.textGizmo.interactive = true;
+        if (this.textGizmo.interactive) {
+            this.maskGizmo.interactive = false;
+            this.pictureCutGizmo.interactive = false;
+            this.pictureExpandGizmo.interactive = false;
+            this.spriteTextEditGizmo.interactive = false;
+        }
+        this.render();
+    }
+    closeTextGizmo() {
+        if (!this.textGizmo) {
+            return;
+        }
+        this.textGizmo.interactive = false;
+        this.render();
+    }
+}