@vvfx/sdk 0.1.19-alpha.8 → 0.2.0

package/dist/src/gesture-handler/gizmo/transform-gizmo.d.ts

@@ -0,0 +1,233 @@
+import { Graphics, Text, Sprite } from '../../wireframe';
+import { spec } from '../../shared';
+import type { PageDataUtils } from '../../utils/page-data-utils';
+import { Box2, Line2, Vector2, Vector3, Circle } from '../../math';
+import { Gizmo } from './gizmo';
+import type { GestureCursorResult, GizmoType, ScaleParam, TransformType } from './type';
+import type { AdsorptionGizmo } from './adsorption-gizmo';
+import { SelectorGizmo } from './selector-gizmo';
+import { SDKItemType } from '../../sdk-item/types';
+import { SDKItem } from '../../sdk-item';
+export declare class TransformGizmo extends Gizmo {
+    readonly type: GizmoType;
+    /**
+    * 变换框绘制结果
+    */
+    wireframe: TransfromWireframe;
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult: GestureCursorResult;
+    /**
+     * 视图起始交互坐标[用于绘制指针]
+     */
+    cursorPoint: Vector2;
+    /**
+     * 页面绘制 [通过页面绘制计算交互变换值，确保交互状态下移除页面也可以继续执行交互]
+     */
+    lastPoint: Vector2;
+    /**
+     * @description 交互起点，用于判断是否可以触发选中交互
+     */
+    startPoint: Vector2;
+    /**
+     * 单次旋转交互中z轴旋转角度[辅助计算鼠标位置]
+     */
+    rotationAngle: number;
+    /**
+     * 是否处于激活状态
+     */
+    active: boolean;
+    /**
+     * 吸附对齐功能开关
+     */
+    enableAdsorption: boolean;
+    /**
+     * @description 缩放方向
+     */
+    scaleParam?: ScaleParam;
+    /**
+     * 交互类型
+     */
+    activeType: TransformType;
+    /**
+     * 上一帧鼠标射线碰撞位置
+     */
+    lastWorldPosition: Vector3;
+    /**
+     * 是否忽视所有交互
+     */
+    private _ignoreInteraction;
+    /**
+     * @description 初次点击鼠标位置 - 用于触发双击时，子元素选中
+     */
+    firstClickPoint: Vector2;
+    /**
+     * @description 画板包围盒信息
+     */
+    frameBoxes: Map<string, Box2>;
+    /**
+     * @description
+     */
+    toAddedFrameId: string | undefined;
+    /**
+     * @description 自动布局插入指示器
+     */
+    private autoLayoutIndicator;
+    /**
+     * @description 是否在自动布局拖拽中
+     */
+    private isAutoLayoutDragging;
+    /**
+     * @description 被拖拽元素的原始行列位置（用于自动布局时调整其他元素）
+     */
+    private autoLayoutDragOriginalPosition;
+    /**
+     * @description 待应用的布局位置（用于延迟执行行列修改）
+     */
+    private pendingLayoutPosition;
+    /**
+     * @description 自动布局指示器 Graphics
+     */
+    private autoLayoutGraphics;
+    /**
+     * @description 需要处理子元素分离的组信息
+     * key: groupId, value: 需要分离的子元素信息
+     */
+    groupsNeedProcess: Map<string, {
+        groupId: string;
+        frameId: string;
+        childrenOutOfFrame: string[];
+    }>;
+    private _pageDataUtils;
+    private adsorptionGizmo;
+    private selectorGizmo;
+    /**
+     * @description 选中控制器待触发
+     */
+    onSelectorGizmoTrigger: boolean;
+    /**
+     * @description Graphics to render transform gizmo result.
+     */
+    private graphics;
+    /**
+     * @description 是否为锁定比例缩放
+     */
+    _isLockScale: boolean;
+    isShiftDown: boolean;
+    private nameText;
+    private sizeText;
+    private imageSprite;
+    private groupSprite;
+    private textSprite;
+    private videoSprite;
+    private frameSprite;
+    /**
+     * @description 卡片类型图标缓存（cardType → Sprite）
+     */
+    private cardSprites;
+    private effectsSprite;
+    get interactive(): boolean;
+    set interactive(bool: boolean);
+    get isLockScale(): boolean;
+    set isLockScale(state: boolean);
+    get infoType(): spec.ItemType.base | SDKItemType;
+    constructor(utils: PageDataUtils, adsorptionGizmo: AdsorptionGizmo, selectorGizmo: SelectorGizmo);
+    /**
+     * @description 根据卡片类型获取对应的图标 Sprite，带缓存
+     * @param cardType 卡片类型标识
+     * @returns 对应的 Sprite 实例
+     */
+    private getCardSprite;
+    get ignoreInteraction(): boolean;
+    set ignoreInteraction(state: boolean);
+    actionKey(keyCode: KeyboardEvent): void;
+    endActionKey(keyCode: KeyboardEvent): void;
+    getRenderObjects(): (Graphics | Text | Sprite)[];
+    /**
+     * @description 绘制自动布局指示线
+     */
+    private renderAutoLayoutIndicator;
+    cancelPreparation(): void;
+    /**
+     * 行动准备事件 - 获取鼠标交互状态
+     * @param event 鼠标事件
+     */
+    preparationAction(event: MouseEvent): GizmoType | undefined;
+    /**
+     * 行动前置事件 - 交互预备事件
+     * @param event 鼠标事件
+     */
+    preAction(event: MouseEvent, isDoubleClick?: boolean): GizmoType | undefined;
+    /**
+     * 行动事件 - 变换交互
+     * @param event 鼠标事件
+     */
+    action(event: MouseEvent): void;
+    /**
+     * 行动结束时间 - 交互结束
+     * @param event 鼠标事件
+     */
+    endAction(event: MouseEvent): undefined;
+    /**
+     * 交互中断事件 - 清空交互状态以及鼠标状态, 重新进行交互Gizmo选中
+     * @returns undefined
+     */
+    interruption(): GizmoType | undefined;
+    /**
+     * 刷新指针结果
+     * @param activeType 交互类型
+     * @param point 指针位置
+     * @param dir 指针方向
+     */
+    refreshCursorResult(activeType: TransformType, angle?: number): void;
+    /**
+     * 根据选中元素刷新交互框
+     */
+    refreshResults(): void;
+    initInteractionPlane(viewportPoint: Vector2): void;
+    refreshRenderObject(): void;
+    refreshTransformType(point: Vector2): void;
+    refreshWireframeBySelectedItems(): void;
+    setAdsorptionEnabled(state: boolean): void;
+    /**
+     * @description 处理需要断开父子关系的组
+     * 在拖拽结束时调用，将画板外的子元素从组中移除，并移出画板
+     */
+    private processGroupsNeedProcess;
+    refreshFrameBoxes(): void;
+    refreshItemFrameRelationShip(item: SDKItem, mouse: Vector2): string | undefined;
+    /**
+     * @description 更新自动布局指示器
+     * 基于鼠标位置实时更新被拖拽元素的 layoutInfos（row 和 column）
+     * 注意：移动过程中只更新被拖拽元素的布局信息，其他元素保持不动
+     * 等到交互结束时再执行整体排布
+     */
+    private updateAutoLayoutIndicator;
+    /**
+     * @description 执行自动布局重排序
+     * 基于更新后的 layoutInfos 重新排布所有元素
+     * @param draggedItem 被拖拽的元素
+     */
+    private executeAutoLayoutReorder;
+    refreshFrameChildren(): void;
+}
+type TransfromWireframe = {
+    edges: Line2[];
+    scaleCorners: Circle[];
+    rotationCorners: Circle[];
+    interactive: boolean;
+    cornerEnable: boolean;
+    directionEnable: boolean;
+    box: Box2;
+    rotationEnabled: boolean;
+    scaleEnabled: boolean;
+    anchor: Vector2;
+    totalBox: Box2;
+    childrenBoxes: Box2[];
+    activeType: TransformType;
+    interactiveDirection: Vector2;
+    scaleCorner?: Vector2;
+    scaleEdgeCorners?: Vector2[];
+};
+export {};

package/dist/src/gesture-handler/gizmo/type.d.ts

@@ -0,0 +1,402 @@
+import type { Region, spec } from '../../shared';
+import type { Box2, Ray, Vector2, Vector3 } from '../../math';
+export type TextResult = TextValidResult | TextEmptyResult;
+/**
+ * @description 文本编辑器有效结果
+ */
+export type TextValidResult = {
+    type: 'valid';
+    /**
+     * @description 包围盒
+     */
+    box: Box2;
+    /**
+     * @description 宽度缩放交互点
+     */
+    widthScaleCorners: [Vector2, Vector2];
+    /**
+     * @description 旋转交互点
+     */
+    rotationCorner: Vector2;
+    /**
+     * @description 旋转交互
+     */
+    rotation: number;
+};
+/**
+ * @description 文本编辑器无效结果
+ */
+export type TextEmptyResult = {
+    type: 'empty';
+};
+/**
+ * @description 文本编辑器交互参数
+ */
+export type TextInteractionParam = {
+    /**
+     * @description 是否可以交互
+     */
+    active: boolean;
+    /**
+     * @description 交互类型
+     */
+    type: 'none' | 'translation' | 'scale' | 'rotation' | 'edit' | 'width-scale';
+    /**
+     * @description 上一帧鼠标位置
+     */
+    lastPoint: Vector2;
+    /**
+     * @description 交互起点鼠标位置
+     */
+    startPoint: Vector2;
+    /**
+     * @description 上一帧交互世界坐标位置
+     */
+    lastWorldPosition: Vector3;
+    /**
+     * @description 交互锚点
+     */
+    anchor: Vector2;
+    /**
+     * @description textarea 初始状态
+    */
+    textareaType?: 'select' | 'focus';
+};
+/**
+ * @description 图片蒙版工具结果
+ */
+export type MaskResult = {
+    /**
+     * @description 状态
+    */
+    status: 'init' | 'done';
+    /**
+     * @description 包围盒
+     */
+    box?: Box2;
+    /**
+     * @description 鼠标位置
+     */
+    point?: Vector2;
+    /**
+     * @description 蒙版线条列表
+     */
+    lines: {
+        brushSize: number;
+        points: Vector2[];
+        type?: 'paint' | 'erase';
+    }[];
+};
+/**
+ * @description 图片裁切工具结果
+ */
+export type PictureCutResult = PictureCutValidResult | PictureCutEmptyResult;
+export type PictureCutValidResult = {
+    /**
+     * @description 类型 - 有效值
+     */
+    type: 'valid';
+    /**
+     * @description 原始包围盒
+     */
+    itemBox: Box2;
+    /**
+     * @description 当前包围盒
+     */
+    normalizeCutBox: Box2;
+};
+export type PictureCutEmptyResult = {
+    type: 'invalid';
+};
+/**
+ * @description 图片裁切交互参数
+ */
+export type PictureCutInteractionParam = PictureCutNoneParam | PictureCutScaleParam | PictureCutDirectionScaleParam | PictureCutMoveParam;
+export type PictureCutNoneParam = {
+    type: 'none';
+};
+export type PictureCutScaleParam = {
+    type: 'scale';
+    box: Box2;
+    anchor: Vector2;
+    startMouse: Vector2;
+    startCorner: Vector2;
+    lockedAspect?: number;
+};
+export type PictureCutDirectionScaleParam = {
+    type: 'direction-scale';
+    box: Box2;
+    index: number;
+    startMouse: Vector2;
+    lockedAspect?: number;
+};
+export type PictureCutMoveParam = {
+    type: 'move';
+    box: Box2;
+    startMouse: Vector2;
+};
+/**
+ * @description 裁剪工具交互类型
+ */
+export type PictureCutInteractionType = 'none' | 'scale' | 'direction-scale' | 'move';
+/**
+ * @description 图片扩边交互参数
+ */
+export type PictureExpandInteractionParam = PictureExpandNoneParam | PictureExpandScaleParam | PictureExpandDirectionScaleParam | PictureExpandMoveParam;
+export type PictureExpandNoneParam = {
+    type: 'none';
+};
+export type PictureExpandScaleParam = {
+    type: 'scale';
+    box: Box2;
+    index: number;
+    startMouse: Vector2;
+    lockedAspect?: number;
+};
+export type PictureExpandDirectionScaleParam = {
+    type: 'direction-scale';
+    box: Box2;
+    index: number;
+    startMouse: Vector2;
+    lockedAspect?: number;
+};
+export type PictureExpandMoveParam = {
+    type: 'move';
+    box: Box2;
+    startMouse: Vector2;
+};
+export type PictureExpandInteractionType = 'none' | 'scale' | 'direction-scale' | 'move';
+/**
+ * @description 图片扩边工具结果
+ */
+export type PictureExpandResult = PictureExpandValidResult | PictureExpandEmptyResult;
+export type PictureExpandValidResult = {
+    /**
+     * @description 类型 - 有效值
+     */
+    type: 'valid';
+    /**
+     * @description 原始包围盒
+     */
+    itemBox: Box2;
+    /**
+     * @description 当前包围盒
+     */
+    normalizeExpandBox: Box2;
+};
+export type PictureExpandEmptyResult = {
+    type: 'invalid';
+};
+export type SelectorResult = {
+    type: 'null' | 'region' | 'pre-select';
+    box: Box2;
+};
+/**
+ * @description 碰撞结果
+ */
+export type HitTestResult = {
+    /**
+     * @description  碰撞射线
+     */
+    ray: Ray;
+    /**
+     * @description 碰撞结果集合
+     */
+    regions: Region[];
+};
+/**
+ * 位移吸附结果
+ */
+export type TranslationAdsorptionResult = {
+    /**
+     * x方向吸附距离
+     */
+    x?: number;
+    /**
+     * y方向吸附距离
+     */
+    y?: number;
+    /**
+     * x方向点吸附信息
+     */
+    xPoints?: TranslationPointAdsorptionTarget[];
+    /**
+     * x方向点吸附信息
+     */
+    yPoints?: TranslationPointAdsorptionTarget[];
+};
+/**
+ * 平移点吸附信息
+ */
+export type TranslationPointAdsorptionTarget = {
+    /**
+     * 包围盒点
+     */
+    point: Vector2;
+    /**
+     * 吸附点
+     */
+    targets: Vector2[];
+};
+/**
+ * @description 缩放参数
+ */
+export type ScaleParam = {
+    /**
+     * @description 缩放中心
+     */
+    center: Vector3;
+    /**
+     * @description 缩放角点
+     */
+    corner: Vector3;
+    /**
+     * @description 角点偏移值
+     */
+    shift: Vector3;
+    /**
+     * @description 上一帧的缩放比例
+     */
+    lastScalar: Vector3;
+    /**
+     * @description 缩放初始化包围盒
+     */
+    farthestCorner: Vector2;
+};
+export type GestureCursorResult = {
+    /**
+     * 辅助面板交互指针类型
+     */
+    type: GestureCursorType;
+    /**
+     * 辅助面板交互指针角度
+     */
+    angle: number;
+    /**
+     * 半径
+    */
+    radius?: number;
+};
+export type SpriteTextEditInteractionParam = {
+    selected: number;
+    preSelected: number;
+};
+export type SpriteTextEditResult = SpriteTextInfo[];
+/**
+ * @description 图层文字信息
+ */
+export type SpriteTextInfo = {
+    /**
+     * @description 元素ID
+     */
+    id: string;
+    /**
+     * @description 文本框索引
+     */
+    index: number;
+    /**
+     * @description 文本包围盒
+     */
+    box: Box2;
+    /**
+     * @description 文本内容
+     */
+    text: string;
+    /**
+     * @description 是否被修改过
+     */
+    hasChanged: boolean;
+    /**
+     * @description 是否处于编辑态
+     */
+    isEditing: boolean;
+};
+/**
+ * @description 精准改字功能初始化信息
+ */
+export type SpriteTextInitParam = {
+    /**
+     * @description 元素ID
+     */
+    id: string;
+    /**
+     * @description 改字信息
+     */
+    info: SpriteTextInitInfo[];
+};
+export type SpriteTextInitInfo = {
+    /**
+     * @description 是否被修改过
+     */
+    hasChanged: boolean;
+    /**
+     * @description 文字内容
+     */
+    text: string;
+    /**
+     * @description 包围盒信息
+     */
+    box: [spec.vec2, spec.vec2, spec.vec2, spec.vec2];
+};
+/**
+ * @description 辅助渲染Icon类型
+ */
+export declare enum IconType {
+    /**
+     * @description 视频播放Icon
+     */
+    VIDEO_PLAY = "video-play",
+    /**
+     * @description 视频生成器Icon
+     */
+    VIDEO_GENERATOR = "video-generator",
+    /**
+     * @description 图片生成器Icon
+     */
+    IMAGE_GENERATOR = "image-generator"
+}
+/**
+ * @description 元素辅助Icon结果
+ */
+export type IconResult = {
+    /**
+     * @description 选中元素Id
+     */
+    id: string;
+    /**
+     * @description Icon类型
+     */
+    type: IconType;
+    /**
+     * @description 包围盒信息
+     */
+    box: Box2;
+};
+export type IconInteractionParam = {
+    type: IconInteractionType;
+    hoverVideoId?: string;
+};
+export type IconInteractionType = 'preSelected' | 'none';
+export type ItemCreateType = 'none' | 'text' | 'video-generator' | 'sprite-generator' | 'frame';
+/**
+ * @description 自动布局插入位置
+ */
+export type InsertPosition = {
+    /**
+     * @description 插入位置索引
+     */
+    index: number;
+    /**
+     * @description 插入方向（在目标元素前还是后）
+     */
+    direction: 'before' | 'after';
+    /**
+     * @description 目标相邻元素ID
+     */
+    siblingId?: string;
+};
+export type GizmoType = 'null' | 'selector' | 'transform' | 'control' | 'adsorption' | 'preference' | 'picture-cut' | 'text' | 'mask' | 'loading' | 'picture-expand' | 'sprite-text-edit' | 'icon' | 'item-create';
+export type GestureCursorType = 'normal' | 'rotation' | 'scale' | 'text-rotation' | 'circle' | 'hand' | 'active-hand' | 'pointer' | 'text-create' | 'frame-create';
+export type TransformType = 'null' | 'translation' | 'rotation' | 'scale';
+export type GestureHandlerInteractType = 'select' | 'hand';
+export type ControlGizmoInteractionType = 'mouse' | 'wheel';

package/dist/src/gesture-handler/index.d.ts

@@ -0,0 +1,3 @@
+export * from './gizmo';
+export * from './src/gesture-handler';
+export * from './utils';