@vvfx/sdk 0.2.8 → 0.2.9

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

@@ -0,0 +1,491 @@
+import { Box2, getBoxByNormalizeBox, getNormalizeBoxByBoxes, Line2, RAD2DEG, Vector2 } from '../../math';
+import { SDK } from '../../sdk';
+import { assertExist } from '../../utils';
+import { Graphics } from '../../wireframe';
+import { Gizmo } from './gizmo';
+export class PictureExpandGizmo extends Gizmo {
+    result = {
+        type: 'invalid'
+    };
+    interactionParam = { type: 'none' };
+    graphics = new Graphics();
+    /**
+     * @description Shift按键是否按下，用于判断交互
+     */
+    isShiftDown = false;
+    /**
+     * @description 是否锁定宽高比缩放
+     */
+    _isLockScale = false;
+    _pageDataUtils;
+    _eventEmitter;
+    type = 'picture-expand';
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.pictureExpandGizmoEnabled;
+    }
+    set interactive(bool) {
+        if (bool === SDK.config.gestureHandlerConfig.pictureExpandGizmoEnabled) {
+            return;
+        }
+        if (this._pageDataUtils.getPageData()?.activeData.selectedItems?.length !== 1) {
+            console.warn('Selected items` length is not one, Picture expand gizmo can not open.');
+        }
+        else {
+            SDK.config.gestureHandlerConfig.pictureExpandGizmoEnabled = bool;
+        }
+    }
+    get isLockScale() {
+        return this._isLockScale;
+    }
+    set isLockScale(state) {
+        if (state === this.isLockScale) {
+            return;
+        }
+        this._isLockScale = state;
+    }
+    constructor(utils, eventEmitter) {
+        super();
+        this._pageDataUtils = utils;
+        this._eventEmitter = eventEmitter;
+    }
+    preparationAction(event) {
+        if (!this.interactive) {
+            return undefined;
+        }
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        const clinetMouse = new Vector2(event.clientX, event.clientY);
+        this.refreshInteractionType(mouse, clinetMouse);
+        return this.type;
+    }
+    preAction(event, isDoubleClick) {
+        if (!this.interactive || this.interactionParam.type === 'none') {
+            return undefined;
+        }
+        return this.type;
+    }
+    action(event) {
+        if (!this.interactive
+            || this.interactionParam.type === 'none'
+            || this.result.type === 'invalid') {
+            return;
+        }
+        const currentClientMouse = new Vector2(event.clientX, event.clientY);
+        const { startMouse, box } = this.interactionParam;
+        const shift = new Vector2().subtractVectors(currentClientMouse, startMouse);
+        const { itemBox } = this.result;
+        const { min: itemBoxMin, max: itemBoxMax } = itemBox;
+        switch (this.interactionParam.type) {
+            case 'move': {
+                const { min: originMin, max: originMax } = box;
+                const xMinShift = itemBoxMax.x - originMax.x;
+                const xMaxShift = itemBoxMin.x - originMin.x;
+                const yMinShift = itemBoxMax.y - originMax.y;
+                const yMaxShift = itemBoxMin.y - originMin.y;
+                shift.x = Math.min(Math.max(shift.x, xMinShift), xMaxShift);
+                shift.y = Math.min(Math.max(shift.y, yMinShift), yMaxShift);
+                const resultBox = box.clone().translate(shift);
+                this.result.normalizeExpandBox = getNormalizeBoxByBoxes(itemBox, resultBox);
+                this._eventEmitter.emit('expandBoxChange', this.getExpandBox());
+                break;
+            }
+            case 'scale': {
+                const { index } = this.interactionParam;
+                const { min, max } = box;
+                const startCorner = box.corners[index];
+                const anchor = box.corners[(index + 2) % 4];
+                const resultCorner = new Vector2(startCorner.x + shift.x, startCorner.y + shift.y);
+                // x位置校验
+                if (startCorner.x >= max.x) {
+                    resultCorner.x = Math.max(resultCorner.x, itemBoxMax.x);
+                }
+                else if (startCorner.x <= min.x) {
+                    resultCorner.x = Math.min(resultCorner.x, itemBoxMin.x);
+                }
+                else {
+                    console.warn('resultCorner has wrong, we have move it to the nearest corner');
+                    resultCorner.x = Math.abs(resultCorner.x - min.x) > Math.abs(resultCorner.x - max.x) ? max.x : min.x;
+                }
+                // y位置校验
+                if (startCorner.y >= max.y) {
+                    resultCorner.y = Math.max(resultCorner.y, itemBoxMax.y);
+                }
+                else if (startCorner.y <= min.y) {
+                    resultCorner.y = Math.min(resultCorner.y, itemBoxMin.y);
+                }
+                else {
+                    console.warn('resultCorner has wrong, we have move it to the nearest corner');
+                    resultCorner.y = Math.abs(resultCorner.y - min.y) > Math.abs(resultCorner.y - max.y) ? max.y : min.y;
+                }
+                // Shift键按下时，锁定缩放
+                if (this.isShiftDown || this.isLockScale) {
+                    const expandBox = this.getExpandBox();
+                    const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                    const { x: originWidth, y: originHeight } = box.getSize();
+                    this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                    if (Math.abs(resultCorner.x - anchor.x) / originWidth > Math.abs(resultCorner.y - anchor.y) / originHeight) {
+                        const resultHeight = Math.abs(resultCorner.x - anchor.x) / this.interactionParam.lockedAspect;
+                        resultCorner.y = (startCorner.y - anchor.y) / Math.abs((startCorner.y - anchor.y)) * resultHeight + anchor.y;
+                        // y位置校验
+                        if (startCorner.y >= max.y) {
+                            resultCorner.y = Math.max(resultCorner.y, itemBoxMax.y);
+                        }
+                        else if (startCorner.y <= min.y) {
+                            resultCorner.y = Math.min(resultCorner.y, itemBoxMin.y);
+                        }
+                        else {
+                            console.warn('resultCorner has wrong, we have move it to the nearest corner');
+                            resultCorner.y = Math.abs(resultCorner.y - min.y) > Math.abs(resultCorner.y - max.y) ? max.y : min.y;
+                        }
+                    }
+                    else {
+                        const resultWidth = Math.abs(resultCorner.y - anchor.y) * this.interactionParam.lockedAspect;
+                        resultCorner.x = (startCorner.x - anchor.x) / Math.abs((startCorner.x - anchor.x)) * resultWidth + anchor.x;
+                        // x位置校验
+                        if (startCorner.x >= max.x) {
+                            resultCorner.x = Math.max(resultCorner.x, itemBoxMax.x);
+                        }
+                        else if (startCorner.x <= min.x) {
+                            resultCorner.x = Math.min(resultCorner.x, itemBoxMin.x);
+                        }
+                        else {
+                            console.warn('resultCorner has wrong, we have move it to the nearest corner');
+                            resultCorner.x = Math.abs(resultCorner.x - min.x) > Math.abs(resultCorner.x - max.x) ? max.x : min.x;
+                        }
+                    }
+                }
+                this.result.normalizeExpandBox = getNormalizeBoxByBoxes(itemBox, new Box2().setFromVec2ArrayWithOutCorners([resultCorner, anchor]));
+                this._eventEmitter.emit('expandBoxChange', this.getExpandBox());
+                break;
+            }
+            case 'direction-scale': {
+                const { index } = this.interactionParam;
+                const startPoint = box.corners[index].clone();
+                const expandBox = this.getExpandBox();
+                const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                const nextCorner = box.corners[(index + 1) % 4].clone();
+                const shiftDirection = index % 2 === 0 ? 'x' : 'y';
+                if (shiftDirection === 'x') {
+                    if (index === 0) {
+                        shift.x = Math.max(box.corners[index].x + shift.x, itemBoxMax.x) - startPoint.x;
+                        if (this.isShiftDown || this.isLockScale) {
+                            const expandBox = this.getExpandBox();
+                            const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                            this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                            shift.y = shift.x / this.interactionParam.lockedAspect;
+                            const resuleTargetCornerY = nextCorner.y + shift.y;
+                            const clampResultCornerY = Math.max(resuleTargetCornerY, itemBoxMax.y);
+                            shift.y = clampResultCornerY - nextCorner.y;
+                            shift.x = shift.y * this.interactionParam.lockedAspect;
+                        }
+                        else {
+                            shift.y = 0;
+                        }
+                    }
+                    else if (index === 2) {
+                        shift.x = Math.min(box.corners[index].x + shift.x, itemBoxMin.x) - startPoint.x;
+                        if (this.isShiftDown || this.isLockScale) {
+                            const expandBox = this.getExpandBox();
+                            const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                            this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                            shift.y = shift.x / this.interactionParam.lockedAspect;
+                            const resuleTargetCornerY = nextCorner.y + shift.y;
+                            const clampResultCornerY = Math.min(resuleTargetCornerY, itemBoxMin.y);
+                            shift.y = clampResultCornerY - nextCorner.y;
+                            shift.x = shift.y * this.interactionParam.lockedAspect;
+                        }
+                        else {
+                            shift.y = 0;
+                        }
+                    }
+                }
+                else {
+                    if (index === 1) {
+                        shift.y = Math.max(box.corners[index].y + shift.y, itemBoxMax.y) - startPoint.y;
+                        if (this.isShiftDown || this.isLockScale) {
+                            const expandBox = this.getExpandBox();
+                            const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                            this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                            shift.x = -shift.y * this.interactionParam.lockedAspect;
+                            const resuleTargetCornerX = nextCorner.x + shift.x;
+                            const clampResultCornerX = Math.min(resuleTargetCornerX, itemBoxMin.x);
+                            shift.x = clampResultCornerX - nextCorner.x;
+                            shift.y = -shift.x / this.interactionParam.lockedAspect;
+                        }
+                        else {
+                            shift.x = 0;
+                        }
+                    }
+                    else if (index === 3) {
+                        shift.y = Math.min(box.corners[index].y + shift.y, itemBoxMin.y) - startPoint.y;
+                        if (this.isShiftDown || this.isLockScale) {
+                            const expandBox = this.getExpandBox();
+                            const { x: boxWidth, y: boxHeight } = expandBox.getSize();
+                            this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                            shift.x = -shift.y * this.interactionParam.lockedAspect;
+                            const resuleTargetCornerX = nextCorner.x + shift.x;
+                            const clampResultCornerX = Math.max(resuleTargetCornerX, itemBoxMax.x);
+                            shift.x = clampResultCornerX - nextCorner.x;
+                            shift.y = -shift.x / this.interactionParam.lockedAspect;
+                        }
+                        else {
+                            shift.x = 0;
+                        }
+                    }
+                }
+                const resultCorners = [];
+                box.corners.forEach((corner, i) => {
+                    const resultCorner = new Vector2();
+                    if (index === i) {
+                        if (shiftDirection === 'y') {
+                            resultCorner.copyFrom(corner.clone().add(new Vector2(0, shift.y)));
+                        }
+                        else {
+                            resultCorner.copyFrom(corner.clone().add(new Vector2(shift.x, 0)));
+                        }
+                    }
+                    else if (index === (i + 3) % 4) {
+                        resultCorner.copyFrom(corner.clone().add(shift));
+                    }
+                    else if (index === (i + 2) % 4) {
+                        if (shiftDirection === 'x') {
+                            resultCorner.copyFrom(corner.clone().add(new Vector2(0, shift.y)));
+                        }
+                        else {
+                            resultCorner.copyFrom(corner.clone().add(new Vector2(shift.x, 0)));
+                        }
+                    }
+                    else {
+                        resultCorner.copyFrom(corner.clone());
+                    }
+                    resultCorners.push(resultCorner);
+                });
+                this.result.normalizeExpandBox = getNormalizeBoxByBoxes(itemBox, new Box2().setFromVec2Array(resultCorners));
+                this._eventEmitter.emit('expandBoxChange', this.getExpandBox());
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    endAction(event) {
+        if (!this.interactive || this.interactionParam.type === 'none') {
+            return undefined;
+        }
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        const clinetMouse = new Vector2(event.clientX, event.clientY);
+        this.refreshInteractionType(mouse, clinetMouse);
+        return this.type;
+    }
+    interruption() {
+        this.interactionParam = { type: 'none' };
+        return undefined;
+    }
+    actionKey(keyCode) {
+        this.isShiftDown = keyCode.shiftKey;
+    }
+    endActionKey(keyCode) {
+        this.isShiftDown = keyCode.shiftKey;
+        if ('lockedAspect' in this.interactionParam) {
+            delete this.interactionParam.lockedAspect;
+        }
+    }
+    cancelPreparation() {
+        this.interactionParam = { type: 'none' };
+    }
+    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('Picture Expand Gizmo can edit one picture at a time.');
+            }
+            else {
+                if (this.result.type === 'invalid') {
+                    const itemViewBox = this._pageDataUtils.getViewBoxById(pageData.activeData.selectedItems[0]);
+                    this.result = {
+                        type: 'valid',
+                        itemBox: itemViewBox.clone(),
+                        normalizeExpandBox: new Box2(new Vector2(), new Vector2(1, 1)),
+                    };
+                }
+                else {
+                    const currentViewBox = this._pageDataUtils.getViewBoxById(pageData.activeData.selectedItems[0]);
+                    const shift = currentViewBox.getCenter().subtract(this.result.itemBox.getCenter());
+                    const scaleValue = currentViewBox.getSize().x / this.result.itemBox.getSize().x;
+                    this.result.itemBox.translate(shift);
+                    this.result.itemBox.scale(scaleValue);
+                }
+            }
+        }
+        else {
+            this.result = { type: 'invalid' };
+        }
+    }
+    refreshRenderObjects() {
+        this.graphics.clear();
+        if (!this.interactive || this.result.type === 'invalid') {
+            return [];
+        }
+        const { maskColor, maskAlpha, expandBoxLineWidth, expandBoxLineColor, expandBoxLineAlpha, expandBoxCornerRadius, expandBoxCornerFillColor, expandBoxCornerLineWidth, expandBoxCornerLineColor, expandBoxCornerLineAlpha, gridLineWidth, gridLineColor, gridLineAlpha, gridCount, } = SDK.config.gestureHandlerConfig.pictureExpandGizmoConfig;
+        const { normalizeExpandBox, itemBox } = this.result;
+        const expandBox = getBoxByNormalizeBox(itemBox, normalizeExpandBox);
+        // 绘制蒙版层
+        this.graphics.beginFill(maskColor, maskAlpha);
+        this.graphics.fillBox(expandBox);
+        this.graphics.endFill();
+        // 绘制网格线
+        const { min: expandMin, max: expandMax } = expandBox;
+        const xShift = expandBox.getSize().x / (gridCount + 1);
+        const yShift = expandBox.getSize().y / (gridCount + 1);
+        this.graphics.lineStyle(gridLineWidth, gridLineColor, gridLineAlpha);
+        for (let i = 1; i <= gridCount; i++) {
+            const xGridLine = new Line2(new Vector2(expandMin.x + xShift * i, expandMin.y), new Vector2(expandMin.x + xShift * i, expandMax.y));
+            const yGridLine = new Line2(new Vector2(expandMin.x, expandMin.y + yShift * i), new Vector2(expandMax.x, expandMin.y + yShift * i));
+            this.graphics.drawLine(xGridLine);
+            this.graphics.drawLine(yGridLine);
+        }
+        // 绘制扩边包围盒
+        this.graphics.lineStyle(expandBoxLineWidth, expandBoxLineColor, expandBoxLineAlpha);
+        this.graphics.drawBox(expandBox);
+        // 绘制角点
+        this.graphics.beginFill(expandBoxCornerFillColor);
+        this.graphics.lineStyle(expandBoxCornerLineWidth, expandBoxCornerLineColor, expandBoxCornerLineAlpha);
+        expandBox.corners.forEach(corner => {
+            this.graphics.drawCircle(corner.x, corner.y, expandBoxCornerRadius);
+        });
+        this.graphics.endFill();
+        return [this.graphics];
+    }
+    /**
+     * 刷新指针结果
+     * @param activeType 交互类型
+     * @param point 指针位置
+     * @param dir 指针方向
+     */
+    refreshCursorResult(activeType, angle = 0) {
+        switch (activeType) {
+            case 'scale': {
+                this.cursorResult = {
+                    type: 'scale',
+                    angle,
+                };
+                break;
+            }
+            case 'direction-scale': {
+                this.cursorResult = {
+                    type: 'scale',
+                    angle,
+                };
+                break;
+            }
+            case 'move':
+            case 'none': {
+                this.cursorResult = {
+                    type: 'normal',
+                    angle: 0,
+                };
+                break;
+            }
+        }
+    }
+    getRenderObjects() {
+        if (!this.interactive) {
+            return [];
+        }
+        else {
+            return this.refreshRenderObjects();
+        }
+    }
+    refreshInteractionType(point, clientMouse) {
+        this.interactionParam.type = 'none';
+        if (!this.interactive || this.result.type === 'invalid') {
+            return;
+        }
+        const { normalizeExpandBox, itemBox } = this.result;
+        const expandBox = getBoxByNormalizeBox(itemBox, normalizeExpandBox);
+        let hasInteractionType = false;
+        let angle = 0;
+        // 判定交互状态 - 缩放
+        expandBox.corners.forEach((corner, index) => {
+            if (hasInteractionType) {
+                return;
+            }
+            if (corner.distanceTo(point) < SDK.config.gestureHandlerConfig.pictureExpandGizmoConfig.scaleInteractionDistance) {
+                hasInteractionType = true;
+                this.interactionParam = {
+                    type: 'scale',
+                    index,
+                    box: expandBox.clone(),
+                    startMouse: clientMouse,
+                };
+                angle = Math.PI / 2 * index;
+            }
+        });
+        // 判定交互状态 - 单向缩放
+        expandBox.corners.forEach((corner, index) => {
+            if (hasInteractionType) {
+                return;
+            }
+            const edge = new Line2(corner.clone(), expandBox.corners[(index + 1) % 4]);
+            const dis = point.distanceToLine(edge);
+            const state = dis.d >= 0 && dis.d <= 8 && dis.t >= 0 && dis.t <= 1;
+            if (state) {
+                hasInteractionType = true;
+                this.interactionParam = {
+                    type: 'direction-scale',
+                    index,
+                    box: expandBox.clone(),
+                    startMouse: clientMouse,
+                };
+                angle = Math.PI / 2 * index + Math.PI / 4;
+            }
+        });
+        // 判定交互状态 - 移动
+        if (expandBox.containsPoint(point) && !hasInteractionType) {
+            this.interactionParam = { type: 'move', box: expandBox.clone(), startMouse: clientMouse };
+            hasInteractionType = true;
+        }
+        this.refreshCursorResult(this.interactionParam.type, angle * RAD2DEG);
+    }
+    getExpandInfo() {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        // 真实包围盒信息
+        return {
+            expandBox: this.getExpandBox(),
+            itemBox: this._pageDataUtils.getItemBoxById(item.id),
+        };
+    }
+    getExpandBox() {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        const originBox = this._pageDataUtils.getItemBoxById(item.id);
+        const { normalizeExpandBox } = this.result;
+        return getBoxByNormalizeBox(originBox, normalizeExpandBox);
+    }
+    setExpandBox(min, max) {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        const currentBox = new Box2(min, max);
+        const originBox = this._pageDataUtils.getItemBoxById(item.id);
+        const { min: expandBoxMin, max: expandBoxMax } = getNormalizeBoxByBoxes(originBox, currentBox);
+        this.result.normalizeExpandBox.set(new Vector2(Math.min(expandBoxMin.x, 0), Math.min(expandBoxMin.y, 0)), new Vector2(Math.max(expandBoxMax.x, 1), Math.max(expandBoxMax.y, 1)));
+        const expandBox = this.getExpandBox();
+        this._eventEmitter.emit('expandBoxChange', expandBox);
+        return expandBox;
+    }
+}

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

@@ -0,0 +1,148 @@
+import { SDK } from '../../sdk';
+import { Box2, Vector2 } from '../../math';
+import { assertExist } from '../../shared';
+import { Graphics, Sprite } from '../../wireframe';
+import { Gizmo } from './gizmo';
+export class PreferenceGizmo extends Gizmo {
+    safeAreaSprites = new Map();
+    preparationAction() {
+        return undefined;
+    }
+    preAction() {
+        return undefined;
+    }
+    action() { }
+    endAction() {
+        return undefined;
+    }
+    interruption() {
+        return undefined;
+    }
+    actionKey() { }
+    endActionKey() { }
+    cancelPreparation() { }
+    refreshResults() {
+        this.box = new Box2();
+        if (!this.interactive) {
+            console.warn('Preference gizmo is not opened, use #SDK.setAdsorptionConfig() open this feature.');
+            return;
+        }
+        if (SDK.config.mode === 'editor') {
+            return;
+        }
+        const pageData = this.PageDataUtils.getPageData();
+        assertExist(pageData);
+        const { container } = this.PageDataUtils;
+        if (container) {
+            const { zoom } = pageData.property;
+            const { offsetWidth, offsetHeight } = container;
+            const playerViewSize = new Vector2(offsetWidth, offsetHeight).multiply(zoom);
+            const center = this.PageDataUtils.getViewportLeftTopPosition().add(playerViewSize.clone().divide(2));
+            this.box = new Box2().setFromCenterAndSize(center, playerViewSize);
+        }
+    }
+    refreshRenderObjects() {
+        if (SDK.config.mode === 'editor') {
+            return;
+        }
+        const { boxWidth, boxColor, markColor, markAlpha, safeAreaEnabled, safeAreaBoxColor, safeAreaBoxAlpha, } = SDK.config.gestureHandlerConfig.preferenceGizmoConfig;
+        this.graphics = new Graphics();
+        const { offsetWidth: width, offsetHeight: height } = this.PageDataUtils.container.parentElement;
+        const box1 = new Box2(new Vector2(0, 0), new Vector2(width, this.box.min.y));
+        const box2 = new Box2(new Vector2(0, this.box.min.y), new Vector2(this.box.min.x, height));
+        const box3 = new Box2(new Vector2(this.box.min.x, this.box.max.y), new Vector2(width, height));
+        const box4 = new Box2(new Vector2(this.box.max.x, this.box.min.y), new Vector2(width, this.box.max.y));
+        // 绘制渲染外区域
+        this.graphics.beginFill(markColor, markAlpha);
+        this.graphics.fillBox(box1);
+        this.graphics.fillBox(box2);
+        this.graphics.fillBox(box3);
+        this.graphics.fillBox(box4);
+        this.graphics.endFill();
+        // 绘制出血区域
+        if (safeAreaEnabled) {
+            const viewProperty = this.PageDataUtils.getViewProperty();
+            if (viewProperty) {
+                const { size, safeArea, previewSafeAreas } = viewProperty;
+                const [top, bottom, left, right] = safeArea;
+                const boxSize = this.box.getSize();
+                const topHeight = top / size[1] * boxSize.y;
+                const leftWidth = left / size[0] * boxSize.x;
+                const rightWidth = right / size[0] * boxSize.x;
+                const bottomHeight = bottom / size[1] * boxSize.y;
+                const { min, max } = this.box;
+                this.graphics.beginFill(safeAreaBoxColor, safeAreaBoxAlpha);
+                const topBox = new Box2(min, new Vector2(max.x, min.y + topHeight));
+                const leftBox = new Box2(new Vector2(min.x, min.y + topHeight), new Vector2(min.x + leftWidth, max.y));
+                const rightBox = new Box2(new Vector2(max.x - rightWidth, min.y + topHeight), new Vector2(max.x, max.y));
+                const bottomBox = new Box2(new Vector2(min.x + leftWidth, max.y - bottomHeight), new Vector2(max.x - rightWidth, max.y));
+                this.graphics.fillBox(topBox);
+                this.graphics.fillBox(leftBox);
+                this.graphics.fillBox(rightBox);
+                this.graphics.fillBox(bottomBox);
+                this.graphics.endFill();
+                previewSafeAreas.forEach(previewSafeArea => {
+                    const { box: [left, top, safeAreaWidth, safeAreaHeight], color, url, visible } = previewSafeArea;
+                    if (visible === false) {
+                        return;
+                    }
+                    const previewSize = this.box.getSize();
+                    const safeAreaSize = new Vector2(safeAreaWidth / size[0] * previewSize.x, safeAreaHeight / size[1] * previewSize.y);
+                    const center = new Vector2(left / size[0] * previewSize.x + safeAreaSize.x / 2, top / size[1] * previewSize.y + safeAreaSize.y / 2).add(min);
+                    const safeBox = new Box2().setFromCenterAndSize(center, safeAreaSize);
+                    if (url) {
+                        let sprite = this.safeAreaSprites.get(url);
+                        if (!sprite) {
+                            sprite = Sprite.from(url);
+                            sprite.anchor.set(0.5, 0.5);
+                            this.safeAreaSprites.set(url, sprite);
+                        }
+                        sprite.x = center.x;
+                        sprite.y = center.y;
+                        sprite.width = safeAreaSize.x;
+                        sprite.height = safeAreaSize.y;
+                        this.graphics.addChild(sprite);
+                    }
+                    else {
+                        const alpha = color?.[3] ?? 0.3;
+                        const colorValue = (color?.slice(0, 3) ?? [255, 0, 0]);
+                        const resultColor = colorValue[0] << 16 | colorValue[1] << 8 | colorValue[2];
+                        this.graphics.beginFill(resultColor, alpha);
+                        this.graphics.fillBox(safeBox);
+                        this.graphics.endFill();
+                    }
+                });
+            }
+        }
+        // 绘制渲染边缘框
+        this.graphics.lineStyle(boxWidth, boxColor);
+        this.graphics.drawBox(this.box);
+    }
+    getRenderObjects() {
+        if (!SDK.config.gestureHandlerConfig.preferenceGizmoEnabled || SDK.config.mode === 'editor') {
+            return [];
+        }
+        this.refreshRenderObjects();
+        return [this.graphics];
+    }
+    /**
+    * 遮挡层绘制结果
+    */
+    box = new Box2();
+    /**
+     * 视图框图形
+     */
+    graphics = new Graphics();
+    PageDataUtils;
+    type = 'preference';
+    constructor(utils) {
+        super();
+        this.PageDataUtils = utils;
+    }
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.preferenceGizmoEnabled;
+    }
+    set interactive(bool) {
+        SDK.config.gestureHandlerConfig.preferenceGizmoEnabled = bool;
+    }
+}

package/dist/gesture-handler/gizmo/selector-gizmo.d.ts

@@ -1,6 +1,6 @@
 import { Graphics } from '@pixi/graphics';
 import '../../wireframe/common/pixi-ext';
-import { Composition } from '../../shared/player';
+import { Composition } from '../../shared';
 import { Gizmo } from './gizmo';
 import type { GizmoType, HitTestResult, SelectorResult } from './type';
 import type { PageDataUtils } from '../../utils/page-data-utils';