@vvfx/sdk 0.2.8 → 0.2.10

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

@@ -0,0 +1,468 @@
+import { Graphics } from '@pixi/graphics';
+import '../../wireframe/common/pixi-ext';
+import { SDK } from '../../sdk';
+import { Box2 } from '../../math/box2';
+import { spec, SpriteComponent, TextComponent, VideoComponent, RichTextComponent } from '../../shared';
+import { Gizmo } from './gizmo';
+import { Ray, Vector2 } from '../../math';
+import { arrAdd } from '../../utils/common-utils';
+import { isCardItem, isEffectsItem, isFrameItem, SDKItemType } from '../../sdk-item';
+/**
+ * @description 画板元素左上角点击交互区域尺寸
+ */
+const FRAME_INTERACTION_WIDTH = 40;
+const FRAME_INTERACTION_HEIGHT = 20;
+export class SelectorGizmo extends Gizmo {
+    /**
+     * @description 点选绘制结果
+     */
+    result = {
+        type: 'null',
+        box: new Box2(),
+    };
+    /**
+     * @description 选中元素ID
+     */
+    selectedItemIds = [];
+    /**
+     * @description 可选择子元素父节点序号
+     */
+    activeParentIds = [];
+    /**
+     * @description 框选鼠标起始点
+     */
+    cursorPoint = new Vector2();
+    /**
+     * @description 交互起始点
+     */
+    startPoint = new Vector2();
+    /**
+     * @description 预处理鼠标位置
+     */
+    firstClickPoint = new Vector2();
+    /**
+     * @description 选择器图形
+     */
+    graphics = new Graphics();
+    pageDataUtils;
+    clearResult = false;
+    type = 'selector';
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.selectorGizmoEnabled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.selectorGizmoEnabled = true;
+    }
+    constructor(utils) {
+        super();
+        this.pageDataUtils = utils;
+    }
+    actionKey() { }
+    endActionKey() { }
+    /**
+     * 获取选择器交互绘制结果
+     * @returns 点选交互信息
+     */
+    getRenderObjects() {
+        if (!this.interactive) {
+            return [];
+        }
+        if (!this.clearResult) {
+            this.refreshResults();
+            return [this.graphics];
+        }
+        else {
+            this.result = {
+                type: 'null',
+                box: new Box2()
+            };
+            this.clearResult = false;
+            return [];
+        }
+    }
+    /**
+     * 取消预备状态
+     */
+    cancelPreparation() {
+        this.result.type = 'null';
+    }
+    /**
+     * 准备行动事件 - 预选
+     * @param event 鼠标事件
+     */
+    preparationAction(event, targetType) {
+        this.result.box = new Box2();
+        if (!this.interactive) {
+            console.warn('Selector gizmo is not opened, use #SDK.setSelectorConfig() open this feature.');
+            return undefined;
+        }
+        // 获取鼠标位置
+        // 根据鼠标位置进行射线碰撞
+        const mousePoint = new Vector2(event.offsetX, event.offsetY);
+        const originSelectedItemIDs = this.hitTest(mousePoint);
+        this.selectedItemIds = this.filterSelectedItems(originSelectedItemIDs);
+        const id = this.selectedItemIds[0] ?? '';
+        this.resetActiveParentIds(id);
+        const allSelected = [...this.pageDataUtils.getPageData().activeData.selectedItems, ...this.pageDataUtils.getPageData().activeData.selectedItems.flatMap(id => this.pageDataUtils.getChildrenIds(id))];
+        const hasPreSelectedId = this.pageDataUtils.getPageData()?.activeData.preSelectedItem;
+        if ((id.length && (targetType && !allSelected.includes(id))) || !targetType) {
+            // 根据碰撞结果获取预选结果
+            // 当预选结果存在且未被选中时，添加辅助绘制结果 && 当不是直接触发预选时，筛选掉子元素
+            if (id.length
+                && !this.pageDataUtils.isItemSelected(id)
+                && !allSelected.includes(id)) {
+                this.pageDataUtils.addPreSelectedItem(id);
+                if (id !== hasPreSelectedId) {
+                    this.pageDataUtils.playVideoItem(id);
+                    this.pageDataUtils.playEffectsItem(id);
+                    this.pageDataUtils.pauseVideoItem(hasPreSelectedId);
+                    this.pageDataUtils.pauseEffectsItem(hasPreSelectedId);
+                }
+            }
+            else {
+                this.pageDataUtils.pauseVideoItem(hasPreSelectedId);
+                this.pageDataUtils.pauseEffectsItem(hasPreSelectedId);
+                this.pageDataUtils.clearPreSelectedItem();
+            }
+            return this.type;
+        }
+        else {
+            this.pageDataUtils.pauseVideoItem(hasPreSelectedId);
+            this.pageDataUtils.pauseEffectsItem(hasPreSelectedId);
+            this.pageDataUtils.clearPreSelectedItem();
+            return targetType;
+        }
+    }
+    /**
+     * 行动前置事件
+     *   - 二维模式 设置框选起始状态 || 选中元素
+     *   - 三维模式 设置交互起始态 || 选中元素
+     * @description 当未处于预选态时，表明触发框选交互，设置起始点；当处于预选态时，表明触发 transformGizmo.
+     * @param event 鼠标事件
+     */
+    preAction(event, isDoubleClick = false, firstClickPoint) {
+        if (!this.interactive) {
+            console.warn('Selector gizmo is not opened, use #SDK.setSelectorConfig() open this feature.');
+            return undefined;
+        }
+        const hasPreSelectedId = this.pageDataUtils.getPageData()?.activeData.preSelectedItem;
+        this.pageDataUtils.pauseVideoItem(hasPreSelectedId);
+        this.pageDataUtils.pauseEffectsItem(hasPreSelectedId);
+        this.pageDataUtils.clearPreSelectedItem();
+        // 根据左右键来区分点选交互逻辑
+        switch (event.button) {
+            // 左键前置事件
+            case 0: {
+                // 未触发多选逻辑时，清空原有选中元素，添加当前选中元素
+                const currentMousePoint = new Vector2(event.offsetX, event.offsetY);
+                firstClickPoint ??= this.firstClickPoint;
+                if (isDoubleClick && currentMousePoint.distanceTo(firstClickPoint) < 4) {
+                    const mousePosition = new Vector2(event.offsetX, event.offsetY);
+                    const originSelectedItemIDs = this.hitTest(mousePosition);
+                    this.selectedItemIds = this.filterSelectedItems(originSelectedItemIDs);
+                }
+                if (!isDoubleClick) {
+                    this.firstClickPoint.set(event.offsetX, event.offsetY);
+                }
+                if (!event.shiftKey) {
+                    this.pageDataUtils.clearSelectedItems(this.selectedItemIds.length === 0);
+                }
+                else if (isDoubleClick) {
+                    // 清除选中元素父级的选中态
+                    const selected = this.selectedItemIds[0];
+                    if (selected) {
+                        const viewItem = this.pageDataUtils.getSDKItem(selected);
+                        if (viewItem?.parentId) {
+                            this.pageDataUtils.removeSelectedItems([viewItem.parentId]);
+                        }
+                    }
+                }
+                // 框选逻辑
+                if (this.selectedItemIds.length === 0) {
+                    this.startPoint = new Vector2(event.clientX, event.clientY);
+                    this.cursorPoint = new Vector2(event.offsetX, event.offsetY);
+                    this.activeParentIds = [];
+                    this.active = true;
+                    return this.type;
+                }
+                else {
+                    const selectedIds = this.addSelectedItem(this.selectedItemIds[0]);
+                    if (selectedIds?.length === 1 && this.pageDataUtils.getSDKItem(selectedIds[0])?.type === SDKItemType.TEXT) {
+                        return 'text';
+                    }
+                    return 'transform';
+                }
+            }
+            // 右键前置事件
+            case 2: {
+                // 仅当存在预选中元素时刷新选中元素，否则不刷新
+                const allSelected = [...this.pageDataUtils.getPageData().activeData.selectedItems, ...this.pageDataUtils.getPageData().activeData.selectedItems.flatMap(id => this.pageDataUtils.getChildrenIds(id))];
+                if (this.selectedItemIds.length && !allSelected.includes(this.selectedItemIds[0])) {
+                    if (!event.shiftKey) {
+                        this.pageDataUtils.clearSelectedItems();
+                    }
+                    this.pageDataUtils.addSelectedItems([this.selectedItemIds[0]]);
+                    this.clearResult = true;
+                }
+                // 存储变更前的值
+                this.pageDataUtils.saveUndoRedoOldData();
+                return undefined;
+            }
+            // 其它按键
+            default: {
+                return undefined;
+            }
+        }
+    }
+    /**
+     * 行动事件 - 框选[仅支持2D框选]
+     * @param event 鼠标事件
+     */
+    action(event) {
+        const endPoint = new Vector2().addVectors(this.cursorPoint, new Vector2().subtractVectors(new Vector2(event.clientX, event.clientY), this.startPoint));
+        const size = new Vector2().subtractVectors(this.cursorPoint, endPoint);
+        const center = new Vector2().addVectors(this.cursorPoint, endPoint).multiply(0.5);
+        size.x = Math.abs(size.x);
+        size.y = Math.abs(size.y);
+        const box = new Box2().setFromCenterAndSize(center, size);
+        this.result.type = 'region';
+        this.result.box = box;
+        this.pageDataUtils.clearSelectedItems();
+        const items = this.pageDataUtils.getPageData().items?.filter(item => this.pageDataUtils.getItemEditEnable(item.id));
+        const toAddItems = [];
+        // 进行框选判断时，跳过locked或不可见状态元素
+        if (size.length() > 0) {
+            items?.forEach(item => {
+                if (box.intersectsBox(this.pageDataUtils.getViewBoxById(item.id), false)) {
+                    toAddItems.push(item.id);
+                }
+            });
+        }
+        const resultSelectedIds = this.filterSelectedItems(toAddItems);
+        this.pageDataUtils.addSelectedItems(resultSelectedIds);
+    }
+    endAction() {
+        this.active = false;
+        this.result.type = 'null';
+        return undefined;
+    }
+    addSelectedItem(id) {
+        this.pageDataUtils.addSelectedItems([id]);
+        const selectedIds = this.pageDataUtils.getPageData()?.activeData?.selectedItems;
+        this.addActiveParentIds(selectedIds);
+        this.clearResult = true;
+        // 存储变更前的值
+        this.pageDataUtils.saveUndoRedoOldData();
+        return selectedIds;
+    }
+    /**
+     * 交互中断事件 - 清空交互状态, 重新进行交互Gizmo选中
+     * @returns undefined
+     */
+    interruption() {
+        this.active = false;
+        this.result.type = 'null';
+        return undefined;
+    }
+    /**
+     * 射线碰撞结果
+     * @param point 屏幕点坐标
+     * @param cameraState 相机状态
+     * @param isLeftDown 是否为左键
+     * @returns 射线碰撞结果
+     */
+    hitTest(point) {
+        const playerComposition = this.pageDataUtils.getCurrentComposition();
+        if (!playerComposition?.items) {
+            return [];
+        }
+        const { x, y } = this.pageDataUtils.getViewportByViewPoint(point);
+        const result = {
+            ray: new Ray(),
+            regions: [],
+        };
+        try {
+            result.regions = playerComposition.hitTest(x, y, true);
+            result.ray = playerComposition.getHitTestRay(x, y);
+        }
+        catch (e) {
+            console.warn(e);
+        }
+        this.refreshResultRegions(result);
+        const selectedIds = this.reorderHitTestResult(result, playerComposition).filter(id => id !== 'extra-camera' && this.pageDataUtils.getItemEditEnable(id));
+        // 新增画板元素强制选中规则
+        const resultSelectedIds = this.preSelectedFrameOutBound(point, selectedIds);
+        return resultSelectedIds;
+    }
+    refreshResultRegions(hitTestResult) {
+        const effectsItems = this.pageDataUtils.getPageData()?.items.filter(item => isEffectsItem(item));
+        const effectsItemMap = new Map();
+        effectsItems?.forEach(item => {
+            item.property.children?.forEach(id => {
+                effectsItemMap.set(id, item.id);
+            });
+        });
+        hitTestResult.regions.forEach(region => {
+            region.id = effectsItemMap.get(region.id) ?? region.id;
+        });
+    }
+    reorderHitTestResult(hitTestResult, playerComposition) {
+        if (hitTestResult.regions.length === 0 || !playerComposition) {
+            return [];
+        }
+        // 碰撞射线
+        const { ray } = hitTestResult;
+        // player碰撞元素顺序与编辑器列表相反，所以需要做一个顺序取反
+        const regions = hitTestResult.regions.reverse();
+        const results = [];
+        regions.forEach(region => {
+            let item;
+            const dfsItem = (items, id) => {
+                for (const i of items) {
+                    if (i.getInstanceId() === id) {
+                        item = i;
+                    }
+                    if (item) {
+                        return;
+                    }
+                    dfsItem(i.children, id);
+                }
+            };
+            dfsItem(playerComposition.items, region.id);
+            if (item === undefined) {
+                return;
+            }
+            const targetItemId = item.getInstanceId();
+            const distance = ray.origin.clone().distance(region.position.clone());
+            // 是否需要深度判断[当元素开启深度遮挡以及为mesh元素时]
+            const isNeedDepthTest = item.type === spec.ItemType.mesh
+                || item.getComponent(SpriteComponent)?.renderer?.occlusion
+                || item.getComponent(TextComponent)?.renderer?.occlusion
+                || item.getComponent(VideoComponent)?.renderer?.occlusion
+                || item.getComponent(RichTextComponent)?.renderer?.occlusion;
+            // 当需要进行深度检测并且结果长度大于0时，进行判断
+            if (isNeedDepthTest && results.length > 0) {
+                // 添加状态 - 当添加状态为true时才会继续进行判断
+                let tryAdd = true;
+                results.forEach((result, i) => {
+                    if (!tryAdd) {
+                        return;
+                    }
+                    // 如果当前distance小于或者等于结果distance时，表示当前结果会被优先选择，测试将当前值插入该位置，并且关闭添加状态，不继续进行判断
+                    if (distance <= result[1]) {
+                        results.splice(i, 0, [targetItemId, distance]);
+                        tryAdd = false;
+                        return;
+                    }
+                    // 如果当前distance大于所有结果distance时，直接将当前值加入结果
+                    if (i === results.length - 1) {
+                        results.push([targetItemId, distance]);
+                    }
+                });
+            }
+            else {
+                // 当不需要进行深度检测或结果长度等于0时，直接将当前值加入结果
+                results.push([targetItemId, distance]);
+            }
+        });
+        // 返回元素顺序
+        return results.map(result => {
+            return result[0];
+        });
+    }
+    filterSelectedItems(selectedIds) {
+        const resultSelectedIds = [];
+        const getFinalSelectedId = (id) => {
+            const sdkItem = this.pageDataUtils.getSDKItem(id);
+            if (!sdkItem.parentId || this.pageDataUtils.getSDKItem(sdkItem.parentId)?.type === SDKItemType.FRAME || this.activeParentIds.includes(sdkItem.parentId)) {
+                return sdkItem.id;
+            }
+            else {
+                return getFinalSelectedId(sdkItem.parentId);
+            }
+        };
+        const loadingItems = this.pageDataUtils.getPageData()?.activeData.loadingItems ?? [];
+        selectedIds.forEach(id => {
+            const finalSelectedId = getFinalSelectedId(id);
+            if (!loadingItems.includes(finalSelectedId)) {
+                arrAdd(resultSelectedIds, finalSelectedId);
+            }
+        });
+        return resultSelectedIds;
+    }
+    addActiveParentIds(selectedIds) {
+        this.activeParentIds = [];
+        selectedIds?.forEach(id => {
+            const sdkItem = this.pageDataUtils.getSDKItem(id);
+            if (!sdkItem) {
+                return;
+            }
+            const addAllLayerParent = (id) => {
+                this.activeParentIds.push(id);
+                const sdkItem = this.pageDataUtils.getSDKItem(id);
+                if (sdkItem.parentId) {
+                    addAllLayerParent(sdkItem.parentId);
+                }
+            };
+            addAllLayerParent(id);
+        });
+    }
+    resetActiveParentIds(id) {
+        const viewItem = this.pageDataUtils.getSDKItem(id);
+        if (!viewItem) {
+            return;
+        }
+        this.activeParentIds = this.activeParentIds.filter(id => id === viewItem.parentId);
+    }
+    refreshResults() {
+        const { box } = this.result;
+        this.graphics.clear();
+        const preSelectedItem = this.pageDataUtils.getPreSelectedItem();
+        const preSelectedItemBox = this.pageDataUtils.getViewBoxById(preSelectedItem?.id ?? '');
+        const { regionBoxColor, regionBoxAlpha, preSelectedWidth, preSelectedColor, regionWireframeWidth, regionWireframeColor, regionWireframeAlpha, } = SDK.config.gestureHandlerConfig.selectorGizmoConfig;
+        if (!preSelectedItemBox?.isEmpty() && !isCardItem(preSelectedItem)) {
+            this.graphics.lineStyle(preSelectedWidth, preSelectedColor);
+            this.graphics.drawBox(preSelectedItemBox);
+        }
+        if (!box.isEmpty()) {
+            switch (this.result.type) {
+                case 'region': {
+                    this.graphics.lineStyle(regionWireframeWidth, regionWireframeColor, regionWireframeAlpha);
+                    this.graphics.drawBox(box);
+                    this.graphics.beginFill(regionBoxColor, regionBoxAlpha);
+                    this.graphics.fillBox(box);
+                    this.graphics.endFill();
+                    break;
+                }
+            }
+        }
+    }
+    /**
+     * 画板元素点击区域优先处理
+     * 当点击画板左上角 40x20 区域时，强制优先选中画板
+     * @param mouse 鼠标位置
+     * @param currentSelectedIds 当前选中的元素ID列表
+     * @returns 处理后的选中ID列表
+     */
+    preSelectedFrameOutBound(mouse, currentSelectedIds) {
+        const frameBoxInfoes = this.pageDataUtils.getPageData()?.items.filter(item => isFrameItem(item)).map(item => {
+            return { id: item.id, box: this.pageDataUtils.getViewBoxById(item.id) };
+        });
+        if (!frameBoxInfoes?.length) {
+            return currentSelectedIds;
+        }
+        let hasSelectedFrame = false;
+        frameBoxInfoes.forEach(frameBoxInfo => {
+            if (hasSelectedFrame) {
+                return;
+            }
+            const { min } = frameBoxInfo.box;
+            const interactionBox = new Box2().setFromVec2Array([min.clone(), min.clone().add(new Vector2(FRAME_INTERACTION_WIDTH, -FRAME_INTERACTION_HEIGHT))]);
+            if (interactionBox.containsPoint(mouse)) {
+                hasSelectedFrame = true;
+                currentSelectedIds.splice(0, 0, frameBoxInfo.id);
+            }
+        });
+        return currentSelectedIds;
+    }
+}