@vvfx/sdk 0.2.8 → 0.2.10

package/dist/gesture-handler/gizmo/sprite-text-edit-gizmo.js

@@ -0,0 +1,247 @@
+import { Graphics, Text } from '../../wireframe';
+import { Gizmo } from './gizmo';
+import { Box2, getBoxByNormalizeBox, getNormalizeBoxByBoxes, RAD2DEG, Vector2 } from '../../math';
+import { SDK } from '../../sdk';
+import { processText } from '../utils';
+const defuleTextStyle = {
+    fontSize: 14,
+    fill: 0xFFFFFF,
+    align: 'center',
+    lineHeight: 16,
+};
+export class SpriteTextEditGizmo extends Gizmo {
+    type = 'sprite-text-edit';
+    _pageDataUtils;
+    _eventEmitter;
+    graphics = new Graphics();
+    editGraphics = new Graphics();
+    preSelectedText = new Text('', defuleTextStyle);
+    result = [];
+    interactionParam = { preSelected: -1, selected: -1 };
+    clearPreSelected = false;
+    constructor(pageDataUtils, emitter) {
+        super();
+        this._pageDataUtils = pageDataUtils;
+        this._eventEmitter = emitter;
+        this.preSelectedText.resolution = 3;
+    }
+    get interactive() {
+        return SDK.config.gestureHandlerConfig.spriteTextEditGizmoEnabled;
+    }
+    set interactive(state) {
+        if (state === SDK.config.gestureHandlerConfig.spriteTextEditGizmoEnabled) {
+            return;
+        }
+        SDK.config.gestureHandlerConfig.spriteTextEditGizmoEnabled = state;
+    }
+    preparationAction(event) {
+        const mouse = new Vector2(event.offsetX, event.offsetY);
+        // const selected = this.result[this.interactionParam.selected]
+        this.interactionParam.preSelected = -1;
+        this.result.forEach((textInfo, i) => {
+            if (this.interactionParam.preSelected >= 0) {
+                return;
+            }
+            const originBox = this._pageDataUtils.getViewBoxById(textInfo.id);
+            const textInfoBox = getBoxByNormalizeBox(originBox, textInfo.box);
+            // if (selected?.id === textInfo.id) {
+            //   const selectedBox = getBoxByNormalizeBox(originBox, selected.box)
+            //   if ((!selectedBox.containsPoint(mouse) || textInfo.index < selected.index) && textInfoBox.containsPoint(mouse)) {
+            //     this.interactionParam.preSelected = i
+            //   }
+            // } else {
+            //   if (textInfoBox.containsPoint(mouse)) {
+            //     this.interactionParam.preSelected = i
+            //   }
+            // }
+            if (textInfoBox.containsPoint(mouse)) {
+                this.interactionParam.preSelected = i;
+            }
+        });
+        return this.type;
+    }
+    preAction() {
+        const targetInfo = this.result[this.interactionParam.preSelected];
+        if (targetInfo) {
+            const emitInfo = targetInfo ? { id: targetInfo.id, index: targetInfo.index, text: targetInfo.text } : undefined;
+            this._eventEmitter.emit('spriteTextClick', emitInfo);
+        }
+        this.result.forEach(info => {
+            info.isEditing = info.id === targetInfo?.id && info.index === targetInfo.index;
+        });
+        this.interactionParam.preSelected = -1;
+        return this.type;
+    }
+    action(event) { }
+    endAction(event) {
+        return this.type;
+    }
+    interruption() {
+        return this.type;
+    }
+    actionKey(keyCode) { }
+    endActionKey(keyCode) { }
+    cancelPreparation() { }
+    initResult(initParams) {
+        initParams.forEach(param => {
+            const originBox = this._pageDataUtils.getItemBoxById(param.id);
+            param.info.forEach((initInfo, index) => {
+                const { text, box, hasChanged } = initInfo;
+                const corners = box.map(corner => new Vector2(...corner).add(originBox.min));
+                const targetBox = new Box2().setFromVec2Array(corners);
+                const normalizeBox = getNormalizeBoxByBoxes(originBox, targetBox);
+                this.result.push({
+                    id: param.id,
+                    index,
+                    hasChanged,
+                    text: text,
+                    box: normalizeBox,
+                    isEditing: false
+                });
+            });
+        });
+    }
+    clearResult() {
+        this.result = [];
+    }
+    setSelected(id, index) {
+        const selected = this.result.findIndex(info => info.id === id && info.index === index);
+        if (selected < 0) {
+            console.warn(`item ${id} does not have index ${index} text info.`);
+            return;
+        }
+        else {
+            this.interactionParam.selected = selected;
+            const targetInfo = this.result[this.interactionParam.selected];
+            const emitInfo = targetInfo ? { id: targetInfo.id, index: targetInfo.index, text: targetInfo.text } : undefined;
+            this._eventEmitter.emit('spriteTextClick', emitInfo);
+        }
+    }
+    setText(id, index, text) {
+        const targetInfo = this.result.find(info => info.id === id && info.index === index);
+        if (!targetInfo) {
+            console.warn(`item ${id} does not have index ${index} text info.`);
+            return;
+        }
+        targetInfo.text = text;
+    }
+    setChangedState(id, index, hasChanged) {
+        const targetInfo = this.result.find(info => info.id === id && info.index === index);
+        if (!targetInfo) {
+            console.warn(`item ${id} does not have index ${index} text info.`);
+            return;
+        }
+        targetInfo.hasChanged = hasChanged;
+    }
+    setEditState(id, index, isEditing) {
+        const targetInfo = this.result.find(info => info.id === id && info.index === index);
+        if (!targetInfo) {
+            console.warn(`item ${id} does not have index ${index} text info.`);
+            return;
+        }
+        targetInfo.isEditing = isEditing;
+    }
+    refreshResults() {
+        this.graphics.clear();
+        this.editGraphics.clear();
+        this.preSelectedText.text = '';
+        if (!this.interactive || this.result.length === 0) {
+            return;
+        }
+        const { scale } = this._pageDataUtils.interactionUtils.viewportParam;
+        const { editBoxColor, editBoxAlpha, editBoxPreSelectedColor, editBoxPreSelectedAlpha, hasChangedEditBoxColor, hasChangedEditBoxAlpha, hasChangedEditBoxPreSelectedColor, hasChangedEditBoxPreSelectedAlpha, 
+        // boxLineWidth,
+        // dashLineDash,
+        // dashLineGap,
+        editBoxLineColor, editBoxLineAlpha, editBoxLinePreSelectedAlpha, editBoxLinePreSelectedColor, hasChangedEditBoxLineColor, hasChangedEditBoxLineAlpha, hasChangedEditBoxLinePreSelectedColor, hasChangedEditBoxLinePreSelectedAlpha, } = SDK.config.gestureHandlerConfig.spriteTextEditGizmoConfig;
+        this.result.forEach((value, index) => {
+            const isPreSelecetd = index === this.interactionParam.preSelected && !this.clearPreSelected;
+            const { box, id, hasChanged, isEditing } = value;
+            const originBox = this._pageDataUtils.getViewBoxById(id);
+            const viewBox = getBoxByNormalizeBox(originBox, box);
+            if (hasChanged) {
+                const boxColor = !hasChanged ? (!isPreSelecetd ? editBoxColor : editBoxPreSelectedColor) : (!isPreSelecetd ? hasChangedEditBoxColor : hasChangedEditBoxPreSelectedColor);
+                const boxAlpha = !hasChanged ? (!isPreSelecetd ? editBoxAlpha : editBoxPreSelectedAlpha) : (!isPreSelecetd ? hasChangedEditBoxAlpha : hasChangedEditBoxPreSelectedAlpha);
+                this.editGraphics.beginFill(boxColor, boxAlpha);
+                this.editGraphics.fillBox(viewBox);
+                this.editGraphics.endFill();
+            }
+            else {
+                const boxColor = !hasChanged ? (!isPreSelecetd ? editBoxColor : editBoxPreSelectedColor) : (!isPreSelecetd ? hasChangedEditBoxColor : hasChangedEditBoxPreSelectedColor);
+                const boxAlpha = !hasChanged ? (!isPreSelecetd ? editBoxAlpha : editBoxPreSelectedAlpha) : (!isPreSelecetd ? hasChangedEditBoxAlpha : hasChangedEditBoxPreSelectedAlpha);
+                this.graphics.beginFill(boxColor, boxAlpha);
+                this.graphics.fillBox(viewBox);
+                this.graphics.endFill();
+            }
+            const textPosition = viewBox.getCenter();
+            const textSize = viewBox.getSize();
+            if (isEditing) {
+                const text = processText(value.text, defuleTextStyle, textSize.x / scale, Math.floor(textSize.y / scale / 16));
+                this.preSelectedText.style.wordWrapWidth = textSize.x / scale;
+                this.preSelectedText.text = text;
+                this.preSelectedText.scale.x = scale;
+                this.preSelectedText.scale.y = scale;
+                this.preSelectedText.anchor.set(0.5, 0.5);
+                this.preSelectedText.x = textPosition.x;
+                this.preSelectedText.y = textPosition.y;
+            }
+        });
+        // 绘制DashLine
+        this.result.forEach((value, index) => {
+            const isPreSelecetd = index === this.interactionParam.preSelected && !this.clearPreSelected;
+            const { box, id, hasChanged } = value;
+            const originBox = this._pageDataUtils.getViewBoxById(id);
+            const viewBox = getBoxByNormalizeBox(originBox, box);
+            if (hasChanged) {
+                const boxLineColor = !hasChanged ? (!isPreSelecetd ? editBoxLineColor : editBoxLinePreSelectedColor) : (!isPreSelecetd ? hasChangedEditBoxLineColor : hasChangedEditBoxLinePreSelectedColor);
+                const boxLineAlpha = !hasChanged ? (!isPreSelecetd ? editBoxLineAlpha : editBoxLinePreSelectedAlpha) : (!isPreSelecetd ? hasChangedEditBoxLineAlpha : hasChangedEditBoxLinePreSelectedAlpha);
+                viewBox.corners.forEach((corner, _i) => {
+                    const start = corner.clone();
+                    const end = viewBox.corners[(_i + 1) % 4].clone();
+                    const angle = new Vector2().subtractVectors(end, start).angle() * RAD2DEG;
+                    if ([180, 270].includes(angle)) {
+                        const endClone = end.clone();
+                        end.copyFrom(start);
+                        start.copyFrom(endClone);
+                    }
+                    this.editGraphics.lineStyle(1, boxLineColor, boxLineAlpha);
+                    this.editGraphics.moveTo(...start.toArray());
+                    this.editGraphics.lineTo(...end.toArray());
+                    // this.editGraphics.drawDashLine(...end.toArray(), dashLineDash, dashLineGap)
+                });
+            }
+            else {
+                const boxLineColor = !hasChanged ? (!isPreSelecetd ? editBoxLineColor : editBoxLinePreSelectedColor) : (!isPreSelecetd ? hasChangedEditBoxLineColor : hasChangedEditBoxLinePreSelectedColor);
+                const boxLineAlpha = !hasChanged ? (!isPreSelecetd ? editBoxLineAlpha : editBoxLinePreSelectedAlpha) : (!isPreSelecetd ? hasChangedEditBoxLineAlpha : hasChangedEditBoxLinePreSelectedAlpha);
+                viewBox.corners.forEach((corner, _i) => {
+                    const start = corner.clone();
+                    const end = viewBox.corners[(_i + 1) % 4].clone();
+                    const angle = new Vector2().subtractVectors(end, start).angle() * RAD2DEG;
+                    if ([180, 270].includes(angle)) {
+                        const endClone = end.clone();
+                        end.copyFrom(start);
+                        start.copyFrom(endClone);
+                    }
+                    this.graphics.lineStyle(1, boxLineColor, boxLineAlpha);
+                    this.graphics.moveTo(...start.toArray());
+                    this.graphics.lineTo(...end.toArray());
+                    // this.graphics.drawDashLine(...end.toArray(), dashLineDash, dashLineGap)
+                });
+            }
+        });
+    }
+    getRenderObjects() {
+        const hasEditingText = !!this.result.find(info => info.isEditing);
+        // const hasSelected = this.interactionParam.selected >= 0
+        this.clearPreSelected = false;
+        const result = [];
+        if (!this.interactive) {
+            return result;
+        }
+        result.push(this.graphics, this.editGraphics);
+        if (hasEditingText) {
+            result.push(this.preSelectedText);
+        }
+        return result;
+    }
+}