@vvfx/sdk 0.2.8 → 0.2.10

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

@@ -0,0 +1,550 @@
+import { Box2, getBoxByNormalizeBox, getNormalizeBoxByBoxes, isEqual, Line2, RAD2DEG, Vector2 } from '../../math';
+import { SDK } from '../../sdk';
+import { GizmoUndoRedo } from '../../service/UndoRedo';
+import { assertExist } from '../../utils';
+import { Graphics } from '../../wireframe';
+import { Gizmo } from './gizmo';
+export class PictureCutGizmo extends Gizmo {
+    result = {
+        type: 'invalid'
+    };
+    interactionParam = { type: 'none' };
+    graphics = new Graphics();
+    /**
+     * @description Shift按键是否按下，用于判断交互
+     */
+    isShiftDown = false;
+    _isLockScale = false;
+    _pageDataUtils;
+    _eventEmitter;
+    type = 'picture-cut';
+    /**
+     * 图片裁切工具独立的撤销重做实例
+     */
+    _undoRedo = new GizmoUndoRedo();
+    /**
+     * 存储操作开始前的数据，用于 undoRedo
+     */
+    _oldNormalizeCutBox;
+    /**
+     * 鼠标状态绘制结果
+     */
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    /**
+     * 获取图片裁切工具的撤销重做实例
+     */
+    get undoRedo() {
+        return this._undoRedo;
+    }
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.pictureCutGizmoEnabled;
+    }
+    set interactive(bool) {
+        if (bool === SDK.config.gestureHandlerConfig.pictureCutGizmoEnabled) {
+            return;
+        }
+        if (this._pageDataUtils.getPageData()?.activeData.selectedItems?.length !== 1) {
+            console.warn('Selected items` length is not one, Picture cut gizmo can not open.');
+        }
+        else {
+            SDK.config.gestureHandlerConfig.pictureCutGizmoEnabled = 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() {
+        if (!this.interactive || this.interactionParam.type === 'none') {
+            return undefined;
+        }
+        // 存储操作前的数据用于 undoRedo
+        if (this.result.type === 'valid') {
+            this._oldNormalizeCutBox = {
+                normalizeCutBox: this.result.normalizeCutBox.clone(),
+            };
+        }
+        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 = itemBoxMin.x - originMin.x;
+                const xMaxShift = itemBoxMax.x - originMax.x;
+                const yMinShift = itemBoxMin.y - originMin.y;
+                const yMaxShift = itemBoxMax.y - originMax.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.normalizeCutBox = getNormalizeBoxByBoxes(itemBox, resultBox);
+                this._eventEmitter.emit('cutBoxChange', this.getCutBox());
+                break;
+            }
+            case 'scale': {
+                const { startCorner, anchor } = this.interactionParam;
+                const resultCorner = new Vector2();
+                resultCorner.x = Math.min(Math.max(startCorner.x + shift.x, itemBoxMin.x), itemBoxMax.x);
+                resultCorner.y = Math.min(Math.max(startCorner.y + shift.y, itemBoxMin.y), itemBoxMax.y);
+                // Shift键按下时，锁定缩放
+                if (this.isShiftDown || this.isLockScale) {
+                    const cutBox = this.getCutBox();
+                    const cornerSignFactor = (startCorner.x - anchor.x) * (startCorner.y - anchor.y) >= 0 ? 1 : -1;
+                    const { x: boxWidth, y: boxHeight } = cutBox.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 resultSignFactor = Math.abs(resultCorner.x - anchor.x) / (resultCorner.x - anchor.x);
+                        const resultHeight = Math.abs(resultCorner.x - anchor.x) / this.interactionParam.lockedAspect;
+                        if (isEqual(startCorner.y, anchor.y)) {
+                            resultCorner.y = startCorner.y;
+                        }
+                        else {
+                            resultCorner.y = resultSignFactor * cornerSignFactor * resultHeight + anchor.y;
+                        }
+                        resultCorner.y = Math.min(Math.max(resultCorner.y, itemBoxMin.y), itemBoxMax.y);
+                        const shiftY = resultCorner.y - anchor.y;
+                        if (isEqual(startCorner.y, anchor.y)) {
+                            resultCorner.x = startCorner.x;
+                        }
+                        else {
+                            resultCorner.x = cornerSignFactor * shiftY * this.interactionParam.lockedAspect + anchor.x;
+                        }
+                    }
+                    else {
+                        const resultWidth = Math.abs(resultCorner.y - anchor.y) * this.interactionParam.lockedAspect;
+                        const resultSignFactor = Math.abs(resultCorner.y - anchor.y) / (resultCorner.y - anchor.y);
+                        if (isEqual(startCorner.x, anchor.x)) {
+                            resultCorner.x = startCorner.x;
+                        }
+                        else {
+                            resultCorner.x = resultSignFactor * cornerSignFactor * resultWidth + anchor.x;
+                        }
+                        resultCorner.x = Math.min(Math.max(resultCorner.x, itemBoxMin.x), itemBoxMax.x);
+                        const shiftX = resultCorner.x - anchor.x;
+                        if (isEqual(startCorner.x, anchor.x)) {
+                            resultCorner.y = startCorner.y;
+                        }
+                        else {
+                            resultCorner.y = cornerSignFactor * shiftX / this.interactionParam.lockedAspect + anchor.y;
+                        }
+                    }
+                }
+                if (isEqual(startCorner.x, anchor.x) || isEqual(startCorner.y, anchor.y)) {
+                    const farthestCorner = box.corners[0].clone();
+                    let length = farthestCorner.distanceTo(startCorner);
+                    box.corners.forEach(corner => {
+                        if (corner.distanceTo(startCorner) > length) {
+                            farthestCorner.copyFrom(corner);
+                            length = corner.distanceTo(startCorner);
+                        }
+                    });
+                    this.result.normalizeCutBox = getNormalizeBoxByBoxes(itemBox, new Box2().setFromVec2Array([farthestCorner, resultCorner]));
+                }
+                else {
+                    const xScalar = (resultCorner.x - anchor.x) / (startCorner.x - anchor.x);
+                    const yScalar = (resultCorner.y - anchor.y) / (startCorner.y - anchor.y);
+                    const scalar = new Vector2(xScalar, yScalar);
+                    this.result.normalizeCutBox = getNormalizeBoxByBoxes(itemBox, box.clone().scale(scalar, anchor));
+                }
+                this._eventEmitter.emit('cutBoxChange', this.getCutBox());
+                break;
+            }
+            case 'direction-scale': {
+                const { index } = this.interactionParam;
+                const cutBox = this.getCutBox();
+                const { x: boxWidth, y: boxHeight } = cutBox.getSize();
+                this.interactionParam.lockedAspect ??= boxWidth / boxHeight;
+                const startPoint = box.corners[index].clone();
+                const nextCorner = box.corners[(index + 1) % 4].clone();
+                const shiftDirection = index % 2 === 0 ? 'x' : 'y';
+                if (index % 2 === 0) {
+                    shift.x = Math.min(Math.max(startPoint.x + shift.x, itemBoxMin.x), itemBoxMax.x) - startPoint.x;
+                    if (this.isShiftDown || this.isLockScale) {
+                        shift.y = shift.x / this.interactionParam.lockedAspect;
+                        const resuleTargetCornerY = nextCorner.y + shift.y;
+                        const clampResultCornerY = Math.min(Math.max(resuleTargetCornerY, itemBoxMin.y), itemBoxMax.y);
+                        shift.y = clampResultCornerY - nextCorner.y;
+                        shift.x = shift.y * this.interactionParam.lockedAspect;
+                    }
+                    else {
+                        shift.y = 0;
+                    }
+                }
+                else {
+                    shift.y = Math.min(Math.max(startPoint.y + shift.y, itemBoxMin.y), itemBoxMax.y) - startPoint.y;
+                    if (this.isShiftDown || this.isLockScale) {
+                        shift.x = -shift.y * this.interactionParam.lockedAspect;
+                        const resuleTargetCornerX = nextCorner.x + shift.x;
+                        const clampResultCornerX = Math.min(Math.max(resuleTargetCornerX, itemBoxMin.x), 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.normalizeCutBox = getNormalizeBoxByBoxes(itemBox, new Box2().setFromVec2Array(resultCorners));
+                this._eventEmitter.emit('cutBoxChange', this.getCutBox());
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    endAction(event) {
+        if (!this.interactive || this.interactionParam.type === 'none') {
+            return undefined;
+        }
+        // 记录操作到 undoRedo
+        if (this._oldNormalizeCutBox && this.result.type === 'valid') {
+            const operation = {
+                type: 'update',
+                oldData: this._oldNormalizeCutBox,
+                newData: {
+                    normalizeCutBox: this.result.normalizeCutBox.clone(),
+                },
+            };
+            this._undoRedo.push(operation);
+            this._eventEmitter.emit('pictureCutGizmoUndoRedoChange', operation);
+        }
+        this._oldNormalizeCutBox = 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 Cut 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(),
+                        normalizeCutBox: 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, cutBoxLineWidth, cutBoxLineColor, cutBoxLineAlpha, itemBoxLineWidth, itemBoxLineColor, itemBoxLineAlpha, cutBoxCornerRadius, cutBoxCornerFillColor, cutBoxCornerLineWidth, cutBoxCornerLineColor, cutBoxCornerLineAlpha, gridLineWidth, gridLineColor, gridLineAlpha, gridCount, } = SDK.config.gestureHandlerConfig.pictureCutGizmoConfig;
+        const { normalizeCutBox, itemBox, } = this.result;
+        const cutBox = getBoxByNormalizeBox(itemBox, normalizeCutBox);
+        const { min: cutMin, max: cutMax } = cutBox;
+        const { min: originMin, max: originMax } = itemBox;
+        // 绘制蒙版层
+        const topBox = new Box2(originMin.clone(), new Vector2(originMax.x, cutMin.y));
+        const leftBox = new Box2(new Vector2(originMin.x, cutMin.y), new Vector2(cutMin.x, originMax.y));
+        const rightBox = new Box2(new Vector2(cutMax.x, cutMin.y), new Vector2(originMax.x, cutMax.y));
+        const bottomBox = new Box2(new Vector2(cutMin.x, cutMax.y), originMax.clone());
+        this.graphics.beginFill(maskColor, maskAlpha);
+        this.graphics.fillBox(topBox);
+        this.graphics.fillBox(leftBox);
+        this.graphics.fillBox(rightBox);
+        this.graphics.fillBox(bottomBox);
+        this.graphics.endFill();
+        // 绘制网格线
+        const xShift = cutBox.getSize().x / (gridCount + 1);
+        const yShift = cutBox.getSize().y / (gridCount + 1);
+        this.graphics.lineStyle(gridLineWidth, gridLineColor, gridLineAlpha);
+        for (let i = 1; i <= gridCount; i++) {
+            const xGridLine = new Line2(new Vector2(cutMin.x + xShift * i, cutMin.y), new Vector2(cutMin.x + xShift * i, cutMax.y));
+            const yGridLine = new Line2(new Vector2(cutMin.x, cutMin.y + yShift * i), new Vector2(cutMax.x, cutMin.y + yShift * i));
+            this.graphics.drawLine(xGridLine);
+            this.graphics.drawLine(yGridLine);
+        }
+        // 绘制元素选包围盒
+        this.graphics.lineStyle(itemBoxLineWidth, itemBoxLineColor, itemBoxLineAlpha);
+        this.graphics.drawBox(itemBox);
+        // 绘制裁切包围盒
+        this.graphics.lineStyle(cutBoxLineWidth, cutBoxLineColor, cutBoxLineAlpha);
+        this.graphics.drawBox(cutBox);
+        // 绘制角点
+        this.graphics.beginFill(cutBoxCornerFillColor);
+        this.graphics.lineStyle(cutBoxCornerLineWidth, cutBoxCornerLineColor, cutBoxCornerLineAlpha);
+        cutBox.corners.forEach((corner, i) => {
+            this.graphics.drawCircle(corner.x, corner.y, cutBoxCornerRadius);
+        });
+        this.graphics.endFill();
+        return [this.graphics];
+    }
+    /**
+     * 刷新指针结果
+     * @param activeType 交互类型
+     * @param angle 指针方向
+     */
+    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 { normalizeCutBox, itemBox } = this.result;
+        const cutBox = getBoxByNormalizeBox(itemBox, normalizeCutBox);
+        let hasInteractionType = false;
+        let angle = 0;
+        // 判定交互状态 - 缩放
+        cutBox.corners.forEach((corner, index) => {
+            if (hasInteractionType) {
+                return;
+            }
+            if (corner.distanceTo(point) < SDK.config.gestureHandlerConfig.pictureCutGizmoConfig.scaleInteractionDistance) {
+                hasInteractionType = true;
+                this.interactionParam = {
+                    type: 'scale',
+                    box: cutBox.clone(),
+                    startMouse: clientMouse,
+                    startCorner: corner.clone(),
+                    anchor: cutBox.corners[(index + 2) % 4],
+                };
+                angle = Math.PI / 2 * index;
+            }
+        });
+        // 判定交互状态 - 单向缩放
+        cutBox.corners.forEach((corner, index) => {
+            if (hasInteractionType) {
+                return;
+            }
+            const edge = new Line2(corner.clone(), cutBox.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: cutBox.clone(),
+                    startMouse: clientMouse,
+                };
+                angle = Math.PI / 2 * index + Math.PI / 4;
+            }
+        });
+        // 判定交互状态 - 移动
+        if (cutBox.containsPoint(point) && !hasInteractionType) {
+            this.interactionParam = { type: 'move', box: cutBox.clone(), startMouse: clientMouse };
+            hasInteractionType = true;
+        }
+        this.refreshCursorResult(this.interactionParam.type, angle * RAD2DEG);
+    }
+    getCutInfo() {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        // 真实包围盒信息
+        return {
+            cutBox: this.getCutBox(),
+            itemBox: this._pageDataUtils.getItemBoxById(item.id),
+        };
+    }
+    getCutBox() {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        const originBox = this._pageDataUtils.getItemBoxById(item.id);
+        const { normalizeCutBox } = this.result;
+        return getBoxByNormalizeBox(originBox, normalizeCutBox);
+    }
+    setCutBox(min, max) {
+        const [item] = this._pageDataUtils.getSelectedItems();
+        if (!this.interactive || this.result.type === 'invalid' || !item) {
+            return undefined;
+        }
+        // 记录操作到 undoRedo
+        const oldNormalizeCutBox = this.result.normalizeCutBox.clone();
+        const currentBox = new Box2(min, max);
+        const originBox = this._pageDataUtils.getItemBoxById(item.id);
+        const { min: cutBoxMin, max: cutBoxMax } = getNormalizeBoxByBoxes(originBox, currentBox);
+        this.result.normalizeCutBox.set(new Vector2(Math.max(cutBoxMin.x, 0), Math.max(cutBoxMin.y, 0)), new Vector2(Math.min(cutBoxMax.x, 1), Math.min(cutBoxMax.y, 1)));
+        const operation = {
+            type: 'update',
+            oldData: {
+                normalizeCutBox: oldNormalizeCutBox,
+            },
+            newData: {
+                normalizeCutBox: this.result.normalizeCutBox.clone(),
+            },
+        };
+        this._undoRedo.push(operation);
+        this._eventEmitter.emit('pictureCutGizmoUndoRedoChange', operation);
+        const cutBox = this.getCutBox();
+        this._eventEmitter.emit('cutBoxChange', cutBox);
+        return cutBox;
+    }
+    /**
+     * 撤销操作
+     * @returns 是否成功撤销
+     */
+    undo() {
+        const operation = this._undoRedo.undo();
+        if (operation && this.result.type === 'valid') {
+            this.result.normalizeCutBox = operation.oldData.normalizeCutBox.clone();
+            this._eventEmitter.emit('cutBoxChange', this.getCutBox());
+            return true;
+        }
+        return false;
+    }
+    /**
+     * 重做操作
+     * @returns 是否成功重做
+     */
+    redo() {
+        const operation = this._undoRedo.redo();
+        if (operation && this.result.type === 'valid') {
+            this.result.normalizeCutBox = operation.newData.normalizeCutBox.clone();
+            this._eventEmitter.emit('cutBoxChange', this.getCutBox());
+            return true;
+        }
+        return false;
+    }
+    /**
+     * 检查是否可以撤销
+     */
+    get canUndo() {
+        return this._undoRedo.canUndo;
+    }
+    /**
+     * 检查是否可以重做
+     */
+    get canRedo() {
+        return this._undoRedo.canRedo;
+    }
+    /**
+     * 清空 undoRedo 历史
+     */
+    clearUndoRedo() {
+        this._undoRedo.clear();
+    }
+}