@vvfx/sdk 0.2.7 → 0.2.9

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

@@ -0,0 +1,149 @@
+import { SDK } from '../../sdk';
+import { Vector2 } from '../../math';
+import { Gizmo } from './gizmo';
+export class ControlGizmo extends Gizmo {
+    type = 'control';
+    _interactionType = 'mouse';
+    /**
+     * @description 是否处于交互态
+     */
+    active = false;
+    /**
+     * 上一时刻鼠标交互位置
+     */
+    lastPoint = new Vector2();
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    SDKUtils;
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.controlGizmoEnabled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.controlGizmoEnabled = true;
+    }
+    get interactionType() {
+        return this._interactionType;
+    }
+    set interactionType(type) {
+        if (type !== this._interactionType) {
+            return;
+        }
+        this._interactionType = type;
+        this.refreshCursorResult();
+    }
+    constructor(utils) {
+        super();
+        this.SDKUtils = utils;
+    }
+    get useCameraControl() {
+        return SDK.config.mode === 'editor';
+    }
+    /**
+     * 行动准备事件[当buttons === 0，且在mouseMove时触发]
+     * @param event 鼠标事件
+     */
+    preparationAction() {
+        return undefined;
+    }
+    cancelPreparation() { }
+    refreshResults() { }
+    /**
+     * 行动前置事件[在mouseDown时触发]
+     * @param event 鼠标事件
+     */
+    preAction(event) {
+        if (this.interactionType === 'mouse') {
+            this.active = true;
+            this.lastPoint = new Vector2(event.clientX, event.clientY);
+        }
+        this.refreshCursorResult();
+        return this.interactionType === 'mouse' ? this.type : undefined;
+    }
+    /**
+     * 行动事件[当buttons !== 0，且在mouseMove时触发 || 2D模式下仅在onWheel中触发]
+     * @param event 鼠标事件
+     */
+    action(event) {
+        if (!SDK.config.gestureHandlerConfig.controlGizmoEnabled) {
+            console.warn('Control gizmo is not opened, use #SDK.setControlConfig() open this feature.');
+            return;
+        }
+        // 二维场景
+        const { metaKey, ctrlKey, shiftKey } = event;
+        if (event.buttons === 0) {
+            const { deltaX, deltaY, offsetX, offsetY } = event;
+            const shift = new Vector2(deltaX, deltaY);
+            // 缩放场景
+            if (metaKey || ctrlKey) {
+                const dollyCenter = this.useCameraControl ? new Vector2(offsetX, offsetY) : new Vector2();
+                const zoomFactor = -shift.y * SDK.config.gestureHandlerConfig.controlGizmoConfig.zoomStep;
+                this.SDKUtils.pageZoom(zoomFactor, dollyCenter);
+            }
+            else {
+                // 平移场景
+                // 支持触控板
+                shift.x = shiftKey && shift.y !== 0 ? Math.sqrt(shift.x ** 2 + shift.y ** 2) * shift.y / Math.abs(shift.y) : shift.x;
+                shift.y = shiftKey ? 0 : shift.y;
+                this.SDKUtils.pageMove(shift.negate());
+            }
+        }
+        else if (this.active && event instanceof MouseEvent && [1, 4].includes(event.buttons)) {
+            const { clientX, clientY } = event;
+            const currentPoint = new Vector2(clientX, clientY);
+            const shift = new Vector2().subtractVectors(currentPoint, this.lastPoint);
+            shift.x = shiftKey && shift.y !== 0 ? Math.sqrt(shift.x ** 2 + shift.y ** 2) * shift.y / Math.abs(shift.y) : shift.x;
+            shift.y = shiftKey ? 0 : shift.y;
+            this.SDKUtils.pageMove(shift);
+            this.lastPoint.copyFrom(currentPoint);
+        }
+    }
+    /**
+     * 行动结束事件[在mouseUp时触发]
+     * @param event 鼠标事件
+     */
+    endAction() {
+        this.active = false;
+        this.refreshCursorResult();
+        return this.interactionType === 'mouse' ? this.type : undefined;
+    }
+    /**
+     * 交互中断事件 - ControlGizmo交互不会被中断
+     * @returns this
+     */
+    interruption() {
+        return this.type;
+    }
+    /**
+     * @description 键盘交互事件
+     * @param keyCode 键位信息
+     */
+    actionKey() { }
+    /**
+     * @description 键盘交互结束事件
+     * @param keyCode 键位信息
+     */
+    endActionKey() { }
+    refreshCursorResult() {
+        if (this.interactionType === 'mouse') {
+            this.cursorResult = {
+                type: this.active ? 'active-hand' : 'hand',
+                angle: 0,
+            };
+        }
+        else {
+            this.cursorResult = {
+                type: 'normal',
+                angle: 0,
+            };
+        }
+    }
+    /**
+     * 获取辅助层渲染对象
+     * @returns 空
+     */
+    getRenderObjects() {
+        return [];
+    }
+}

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

@@ -0,0 +1,17 @@
+export class Gizmo {
+    type;
+    /**
+     * @description 是否处于交互态
+     */
+    active;
+    get interactive() {
+        return this.active;
+    }
+    set interactive(bool) {
+        this.active = bool;
+    }
+    constructor() {
+        this.type = 'null';
+        this.active = false;
+    }
+}

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

@@ -0,0 +1,189 @@
+import { Sprite } from '@pixi/sprite';
+import { Gizmo } from './gizmo';
+import { IconType } from './type';
+import { Box2, Vector2 } from '../../math';
+import { SDK } from '../../sdk';
+import { SDKItemType } from '../../sdk-item/types';
+import { isGeneratorItem } from '../../sdk-item';
+import { Texture } from '../../wireframe';
+/**
+ * @description 用于渲染元素辅助Icon
+ */
+export class IconGizmo extends Gizmo {
+    type = 'icon';
+    results = [];
+    interactionParam = {
+        type: 'none'
+    };
+    textureMap;
+    videoPlaySpriteTexture;
+    videoGeneratorTexture;
+    imageGeneratorTexture;
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    renderSprites = [];
+    _pageDataUtils;
+    _eventEmitter;
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.iconGizmoEnabled;
+    }
+    set interactive(state) {
+        if (state === SDK.config.gestureHandlerConfig.iconGizmoEnabled) {
+            return;
+        }
+        SDK.config.gestureHandlerConfig.iconGizmoEnabled = state;
+    }
+    constructor(pageDataUtils, emitter) {
+        super();
+        this._pageDataUtils = pageDataUtils;
+        this._eventEmitter = emitter;
+    }
+    async init() {
+        const { imageGeneratorUrl, videoGeneratorUrl, videoPlayUrl } = SDK.config.gestureHandlerConfig.iconGizmoConfig;
+        this.imageGeneratorTexture = await Texture.fromURL(imageGeneratorUrl);
+        this.videoGeneratorTexture = await Texture.fromURL(videoGeneratorUrl);
+        this.videoPlaySpriteTexture = await Texture.fromURL(videoPlayUrl);
+        this.textureMap = {
+            [IconType.VIDEO_PLAY]: this.videoPlaySpriteTexture,
+            [IconType.IMAGE_GENERATOR]: this.imageGeneratorTexture,
+            [IconType.VIDEO_GENERATOR]: this.videoGeneratorTexture,
+        };
+    }
+    preparationAction(event) {
+        if (!this.interactive) {
+            return undefined;
+        }
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        this.refreshVideoIconId(mouse);
+        const videoPlayResult = this.results.find(result => result.type === IconType.VIDEO_PLAY);
+        if (videoPlayResult?.box.containsPoint(mouse)) {
+            this.interactionParam.type = 'preSelected';
+        }
+        else {
+            this.interactionParam.type = 'none';
+        }
+        this.refreshCursorResult();
+        return this.interactionParam.type === 'none' ? undefined : this.type;
+    }
+    preAction(event, isDoubleClick) {
+        const videoPlayResult = this.results.find(result => result.type === IconType.VIDEO_PLAY);
+        if (videoPlayResult) {
+            const time = this._pageDataUtils.getVideoItemPlayTime(videoPlayResult.id);
+            this._eventEmitter.emit('videoPlay', { id: videoPlayResult.id, time });
+            this.interactionParam.type = 'none';
+            this.refreshCursorResult();
+        }
+        return this.type;
+    }
+    action(event) { }
+    endAction(event) {
+        return undefined;
+    }
+    interruption() {
+        return undefined;
+    }
+    actionKey(keyCode) { }
+    endActionKey(keyCode) { }
+    cancelPreparation() { }
+    refreshCursorResult() {
+        switch (this.interactionParam.type) {
+            case 'none': {
+                this.cursorResult = {
+                    type: 'normal',
+                    angle: 0,
+                };
+                break;
+            }
+            case 'preSelected': {
+                this.cursorResult = {
+                    type: 'pointer',
+                    angle: 0
+                };
+                break;
+            }
+        }
+    }
+    /**
+     * @description 根据鼠标位置，刷新视频播放Icon的状态
+     * @param mouse 鼠标位置
+     */
+    refreshVideoIconId(mouse) {
+        this.interactionParam.hoverVideoId = undefined;
+        const pageData = this._pageDataUtils.getPageData();
+        if (!this.interactive || !pageData) {
+            return;
+        }
+        const videoItems = pageData.items.filter(item => item.type === SDKItemType.VIDEO).reverse();
+        videoItems.forEach(item => {
+            if (this.interactionParam.hoverVideoId) {
+                return;
+            }
+            const itemViewBox = this._pageDataUtils.getViewBoxById(item.id);
+            if (itemViewBox.containsPoint(mouse)) {
+                this.interactionParam.hoverVideoId = item.id;
+            }
+        });
+        this.refreshResults();
+    }
+    refreshResults() {
+        const pageData = this._pageDataUtils.getPageData();
+        if (!this.interactive || !pageData) {
+            return;
+        }
+        this.results = [];
+        const generatorItems = pageData.items.filter(item => isGeneratorItem(item));
+        const viewScale = this._pageDataUtils.interactionUtils.viewportParam.scale;
+        const { videoPlayWidth, videoPlayHeight, videoPlayShift, generatorHeight, generatorWidth } = SDK.config.gestureHandlerConfig.iconGizmoConfig;
+        if (this.interactionParam.hoverVideoId) {
+            const itemViewBox = this._pageDataUtils.getViewBoxById(this.interactionParam.hoverVideoId);
+            const size = itemViewBox.getSize();
+            if (!(size.x < 50 || size.y < 100)) {
+                const { max } = itemViewBox;
+                const position = new Vector2(max.x - videoPlayShift[0], max.y - videoPlayShift[1]);
+                const boxSize = new Vector2(videoPlayWidth, videoPlayHeight);
+                this.results.push({
+                    id: this.interactionParam.hoverVideoId,
+                    type: IconType.VIDEO_PLAY,
+                    box: new Box2().setFromCenterAndSize(position, boxSize)
+                });
+            }
+        }
+        generatorItems.forEach(item => {
+            const itemViewBox = this._pageDataUtils.getViewBoxById(item.id);
+            const position = itemViewBox.getCenter();
+            const size = new Vector2(generatorWidth, generatorHeight).multiply(viewScale);
+            this.results.push({
+                id: item.id,
+                type: item.generatorType === 'image' ? IconType.IMAGE_GENERATOR : IconType.VIDEO_GENERATOR,
+                box: new Box2().setFromCenterAndSize(position, size)
+            });
+        });
+    }
+    getRenderObjects() {
+        if (!this.interactive || !this.results.length) {
+            return [];
+        }
+        this.renderSprites.forEach(sprite => {
+            sprite.destroy();
+        });
+        this.renderSprites = [];
+        if (!this.textureMap) {
+            void this.init();
+        }
+        this.results.forEach(result => {
+            const texture = this.textureMap[result.type];
+            const sprite = Sprite.from(texture);
+            const position = result.box.getCenter();
+            const size = result.box.getSize();
+            sprite.anchor.set(0.5, 0.5);
+            sprite.x = position.x;
+            sprite.y = position.y;
+            sprite.width = size.x;
+            sprite.height = size.y;
+            this.renderSprites.push(sprite);
+        });
+        return this.renderSprites;
+    }
+}

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

@@ -0,0 +1,6 @@
+export * from './type';
+export * from './gizmo';
+export * from './control-gizmo';
+export * from './selector-gizmo';
+export * from './transform-gizmo';
+export * from './adsorption-gizmo';

package/dist/gesture-handler/gizmo/item-create-gizmo.js

@@ -0,0 +1,256 @@
+import { Graphics } from '@pixi/graphics';
+import { Gizmo } from './gizmo';
+import { SDK } from '../../sdk';
+import { generateGUID } from '@galacean/effects';
+import { Box2, Vector2 } from '../../math';
+import { FrameLayoutMode } from '../../types';
+import { SDKItemType } from '../../sdk-item/types';
+import { isEffectsItem, isFrameItem } from '../../sdk-item';
+export class ItemCreateGizmo extends Gizmo {
+    type = 'item-create';
+    _createType = 'none';
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    _pageDataUtils;
+    _eventEmitter;
+    // ===== Frame 拖拽绘制相关 =====
+    graphics = new Graphics();
+    dragStartPoint = null;
+    dragCurrentPoint = null;
+    dragStartViewPoint = null;
+    isDragging = false;
+    frameBox = null;
+    frameChildren = [];
+    interactiveChildrenBoxes = new Map();
+    constructor(utils, emitter) {
+        super();
+        this._pageDataUtils = utils;
+        this._eventEmitter = emitter;
+    }
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.itemCreateGizmoEnabled;
+    }
+    set interactive(bool) {
+        if (bool === SDK.config.gestureHandlerConfig.itemCreateGizmoEnabled) {
+            return;
+        }
+        if (bool) {
+            this._pageDataUtils.clearSelectedItems();
+        }
+        SDK.config.gestureHandlerConfig.itemCreateGizmoEnabled = bool;
+        this._createType = bool ? this._createType : 'none';
+    }
+    get createType() {
+        return this._createType;
+    }
+    set createType(type) {
+        if (type === this._createType) {
+            return;
+        }
+        this._createType = type;
+        this.refreshCursorResult();
+    }
+    preparationAction(event) {
+        return this.interactive ? this.type : undefined;
+    }
+    preAction(event, isDoubleClick) {
+        if (!this.interactive) {
+            return undefined;
+        }
+        // Frame 类型：启动拖拽模式
+        if (this._createType === 'frame') {
+            this.dragStartViewPoint = new Vector2(event.offsetX, event.offsetY);
+            this.dragStartPoint = new Vector2(event.clientX, event.clientY);
+            this.dragCurrentPoint = this.dragStartPoint.clone();
+            this.isDragging = true;
+            this.frameBox = null;
+            this.frameChildren = [];
+            this.refreshInteractiveChildrenBoxes();
+        }
+        return this.type;
+    }
+    action(event) {
+        this.frameChildren = [];
+        // Frame 类型：处理拖拽绘制
+        if (this._createType === 'frame' && this.isDragging && this.dragStartPoint && this.dragStartViewPoint) {
+            this.dragCurrentPoint = new Vector2(event.clientX, event.clientY);
+            const shift = new Vector2().subtractVectors(this.dragCurrentPoint, this.dragStartPoint);
+            const endPoint = this.dragStartViewPoint?.clone().add(shift);
+            // 计算矩形框（屏幕坐标系）
+            const minX = Math.min(this.dragStartViewPoint.x, endPoint.x);
+            const minY = Math.min(this.dragStartViewPoint.y, endPoint.y);
+            const maxX = Math.max(this.dragStartViewPoint.x, endPoint.x);
+            const maxY = Math.max(this.dragStartViewPoint.y, endPoint.y);
+            this.frameBox = new Box2(new Vector2(minX, minY), new Vector2(maxX, maxY));
+            this.interactiveChildrenBoxes.forEach((box, id) => {
+                if (this.frameBox?.containsBox(box)) {
+                    this.frameChildren.push(id);
+                }
+            });
+        }
+    }
+    endAction(event) {
+        const createItemId = generateGUID();
+        // Frame 类型：创建画板元素
+        if (this._createType === 'frame') {
+            // 判断是否触发拖拽（鼠标按下与松开距离超过10）
+            let isDragged = false;
+            if (this.isDragging && this.dragStartViewPoint) {
+                const dragDistance = this.dragStartViewPoint.distanceTo(new Vector2(event.offsetX, event.offsetY));
+                isDragged = dragDistance >= 10;
+            }
+            const pixelPosition = isDragged && this.frameBox && !this.frameBox.isEmpty() ?
+                this._pageDataUtils.interactionUtils.getPixelPositionByViewPoint(this.frameBox.getCenter())
+                : this._pageDataUtils.interactionUtils.getPixelPositionByViewPoint(new Vector2(event.offsetX, event.offsetY));
+            if (isDragged && this.frameBox && !this.frameBox.isEmpty()) {
+                // 有拖拽：根据拖拽范围创建
+                const size = this.frameBox.getSize();
+                const pixelSize = this._pageDataUtils.interactionUtils.getPixelSizeByViewSize(size);
+                const createInfo = {
+                    type: SDKItemType.FRAME,
+                    id: createItemId,
+                    name: '画板',
+                    property: {
+                        width: pixelSize.x,
+                        height: pixelSize.y,
+                        position: [pixelPosition.x, pixelPosition.y],
+                        layoutMode: FrameLayoutMode.FREE,
+                        children: this.frameChildren,
+                    }
+                };
+                void this._pageDataUtils.addFrameItem(createInfo);
+            }
+            else {
+                // 无拖拽：创建默认大小 1048*1048 的画布元素
+                const createInfo = {
+                    type: SDKItemType.FRAME,
+                    id: createItemId,
+                    name: '画板',
+                    property: {
+                        width: 1048,
+                        height: 1048,
+                        position: [pixelPosition.x, pixelPosition.y],
+                        layoutMode: FrameLayoutMode.FREE,
+                        children: this.frameChildren,
+                    }
+                };
+                void this._pageDataUtils.addFrameItem(createInfo);
+            }
+            this.resetDragState();
+            // 单次创建完成后，触发 itemCreate 事件通知 SDK 关闭 Gizmo
+            this._eventEmitter.emit('itemCreate', { type: this._createType, id: createItemId, position: pixelPosition.toArray() });
+            return undefined;
+        }
+        // 文本类型：在鼠标松开位置创建文本
+        if (this._createType === 'text') {
+            const position = this._pageDataUtils.interactionUtils.getPixelPositionByViewPoint(new Vector2(event.offsetX, event.offsetY)).toArray();
+            this._eventEmitter.emit('itemCreate', { type: this.createType, id: createItemId, position });
+            return undefined;
+        }
+        // 其他类型：保持原有逻辑
+        if (this._createType !== 'none') {
+            const position = this._pageDataUtils.interactionUtils.getPixelPositionByViewPoint(new Vector2(event.offsetX, event.offsetY)).toArray();
+            this._eventEmitter.emit('itemCreate', { type: this.createType, id: createItemId, position });
+        }
+        return undefined;
+    }
+    interruption() {
+        this.resetDragState();
+        return this.type;
+    }
+    resetDragState() {
+        this.isDragging = false;
+        this.dragStartPoint = null;
+        this.dragCurrentPoint = null;
+        this.dragStartViewPoint = null;
+        this.frameBox = null;
+        this.graphics.clear();
+    }
+    actionKey(keyCode) { }
+    endActionKey(keyCode) { }
+    cancelPreparation() { }
+    refreshResults() {
+        this.graphics.clear();
+        // Frame 类型：绘制拖拽矩形
+        if (this._createType === 'frame' && this.isDragging && this.frameBox && !this.frameBox.isEmpty()) {
+            const { min, max } = this.frameBox;
+            const width = max.x - min.x;
+            const height = max.y - min.y;
+            const { frameFillAlpha, frameFillColor, frameBorderAlpha, frameBorderColor, frameBorderWidth, frameChildBoxAlpha, frameChildBoxColor, } = SDK.config.gestureHandlerConfig.itemCreateGizmoConfig;
+            // 绘制边框
+            this.graphics.lineStyle(frameBorderWidth, frameBorderColor, frameBorderAlpha);
+            this.graphics.drawRect(min.x, min.y, width, height);
+            // 绘制半透明填充
+            this.graphics.beginFill(frameFillColor, frameFillAlpha);
+            this.graphics.drawRect(min.x, min.y, width, height);
+            this.graphics.endFill();
+            this.frameChildren.forEach(id => {
+                const box = this.interactiveChildrenBoxes.get(id);
+                if (!box) {
+                    return;
+                }
+                const { min, max } = box;
+                const width = max.x - min.x;
+                const height = max.y - min.y;
+                this.graphics.beginFill(frameChildBoxColor, frameChildBoxAlpha);
+                this.graphics.drawRect(min.x, min.y, width, height);
+                this.graphics.endFill();
+            });
+        }
+    }
+    getRenderObjects() {
+        // Frame 类型：返回绘制对象
+        if (this._createType === 'frame' && this.isDragging) {
+            this.refreshResults();
+            return [this.graphics];
+        }
+        return [];
+    }
+    refreshCursorResult() {
+        switch (this._createType) {
+            case 'text': {
+                this.cursorResult = {
+                    type: 'text-create',
+                    angle: 0,
+                };
+                break;
+            }
+            case 'frame': {
+                this.cursorResult = {
+                    type: 'frame-create',
+                    angle: 0,
+                };
+                break;
+            }
+            case 'none':
+            case 'sprite-generator':
+            case 'video-generator': {
+                this.cursorResult = {
+                    type: 'normal',
+                    angle: 0,
+                };
+                break;
+            }
+        }
+    }
+    refreshInteractiveChildrenBoxes() {
+        const items = this._pageDataUtils.getPageData()?.items;
+        if (!items?.length) {
+            return [];
+        }
+        const filterItemIds = items.flatMap(item => isEffectsItem(item) ? [item.id] : isFrameItem(item) ? [item.id, ...item.children] : []);
+        items.forEach(item => {
+            // 特效元素与画板元素以及画板元素中的子元素不可以被添加到画板
+            if (filterItemIds.includes(item.id)) {
+                return;
+            }
+            const box = this._pageDataUtils.getViewBoxById(item.id);
+            this.interactiveChildrenBoxes.set(item.id, box);
+        });
+    }
+}