@vvfx/sdk 0.2.8 → 0.2.10

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

@@ -0,0 +1,320 @@
+import { EffectComponent, Geometry, glContext, Material, spec } from '@galacean/effects';
+import { getBoxByNormalizeBox, getNormalizeBoxByBoxes, Vector2 } from '../../math';
+import { Graphics, Text } from '../../wireframe';
+import { Gizmo } from './gizmo';
+import { VFXItemFactory } from '../../utils';
+import { SDK } from '../../sdk';
+const DEFAULT_LOADING_FRAGMENT = `
+// Shadertoy Fragment Shader
+// Diagonal background gradient + wider colorful transparent shimmer
+
+precision highp float;
+
+varying vec2 vUV;
+
+uniform vec4 _Time;
+
+// ------------------------------------------------------------
+// Background
+// ------------------------------------------------------------
+vec3 background(vec2 uv) {
+    vec3 topLeft     = vec3(0.88, 0.85, 1.00);
+    vec3 bottomRight = vec3(0.98, 0.98, 0.98);
+
+    float d = (uv.x + (1.0 - uv.y)) * 0.5;
+    d = smoothstep(0.0, 1.0, d);
+
+    vec3 col = mix(topLeft, bottomRight, d);
+
+    vec2 p1 = uv - vec2(1.13, 1.40);
+    float r1 = length(p1 / vec2(0.85, 0.85));
+    float g1 = 1.0 - smoothstep(0.0, 0.96, r1);
+    col += vec3(172.0/255.0, 183.0/255.0, 1.0) * g1 * 0.28;
+
+    vec2 p2 = uv - vec2(0.25, 0.23);
+    float r2 = length(p2 / vec2(0.74, 0.64));
+    float g2 = 1.0 - smoothstep(0.0, 1.0, r2);
+    col += vec3(147.0/255.0, 108.0/255.0, 1.0) * g2 * 0.10;
+
+    return col;
+}
+
+// ------------------------------------------------------------
+// Easing: slow at start, fast at end
+// ------------------------------------------------------------
+float easeInQuad(float x) {
+    return x * x;
+}
+
+// ------------------------------------------------------------
+// Color palette helper
+// ------------------------------------------------------------
+vec3 palette(float t) {
+    // 柔和的彩色条：蓝 -> 青 -> 紫 -> 粉 -> 蓝
+    vec3 a = vec3(0.62, 0.82, 1.00);
+    vec3 b = vec3(0.72, 0.95, 1.00);
+    vec3 c = vec3(0.83, 0.76, 1.00);
+    vec3 d = vec3(1.00, 0.82, 0.95);
+
+    t = fract(t);
+
+    if (t < 0.33) {
+        float k = smoothstep(0.0, 0.33, t);
+        return mix(a, b, k);
+    } else if (t < 0.66) {
+        float k = smoothstep(0.33, 0.66, t);
+        return mix(b, c, k);
+    } else {
+        float k = smoothstep(0.66, 1.0, t);
+        return mix(c, d, k);
+    }
+}
+
+// ------------------------------------------------------------
+// Wider colorful transparent left-to-right shimmer
+// ------------------------------------------------------------
+vec4 shimmerBand(vec2 uv, float t) {
+    float cycle = fract(t * 0.70);
+    cycle = easeInQuad(cycle);
+
+    float x = cycle * 1.55 - 0.25;   // sweep from left to right
+
+    float d = abs(uv.x - x);
+    float band = 1.0 - smoothstep(0.0, 0.30, d);
+    float core = 1.0 - smoothstep(0.0, 0.10, d);
+
+    float x2 = x + (uv.y - 0.5) * 0.18;
+    float d2 = abs(uv.x - x2);
+    float band2 = 1.0 - smoothstep(0.0, 0.20, d2);
+
+    float s = max(band * 0.85, band2 * 0.60);
+    s = max(s, core * 0.95);
+    s = clamp(s, 0.0, 1.0);
+
+    // 颜色沿条带变化，模拟彩色渐变
+    float hueT = uv.y * 0.25 + uv.x * 0.60 + t * 0.10;
+    vec3 color1 = palette(hueT);
+
+    // 中间更亮一点，边缘更淡
+    vec3 color2 = mix(color1, vec3(1.0), core * 0.35);
+
+    return vec4(color2, s);
+}
+
+// ------------------------------------------------------------
+// Main
+// ------------------------------------------------------------
+void main() {
+    vec2 uv = vUV;
+
+    vec3 col = background(uv);
+
+    vec4 sh = shimmerBand(uv, _Time.y);
+
+    // 可选：增加一点柔光感
+    col += sh.rgb * sh.a * 0.06;
+
+    gl_FragColor = vec4(col, 1.0);
+}`;
+export class LoadingGizmo extends Gizmo {
+    constructor(utils) {
+        super();
+        this._pageDataUtils = utils;
+    }
+    type = 'loading';
+    _pageDataUtils;
+    _idMap = new Map();
+    createLoadingVFXItem(loadingBox) {
+        const composition = this._pageDataUtils.player.getCompositions()[0];
+        const loadingVFXItem = VFXItemFactory.createVFXItem(composition, null, 'LoadingVFXItem', EffectComponent);
+        loadingVFXItem.type = spec.ItemType.effect;
+        const effects = loadingVFXItem.getComponent(EffectComponent);
+        const engine = this._pageDataUtils.player.engine;
+        const geometry = Geometry.create(engine, {
+            attributes: {
+                aPos: {
+                    size: 3,
+                    data: new Float32Array([
+                        -0.5, -0.5, 0,
+                        0.5, -0.5, 0,
+                        0.5, 0.5, 0,
+                        -0.5, 0.5, 0,
+                    ]),
+                },
+                aUV: {
+                    size: 2,
+                    data: new Float32Array([
+                        0, 0,
+                        1, 0,
+                        1, 1,
+                        0, 1,
+                    ]),
+                },
+            },
+            indices: { data: new Uint16Array([0, 1, 2, 0, 2, 3]) },
+            mode: glContext.TRIANGLES,
+            drawCount: 6,
+        });
+        const material = Material.create(engine, {
+            shader: {
+                vertex: `
+precision highp float;
+attribute vec3 aPos;
+attribute vec2 aUV;
+uniform mat4 effects_MatrixVP;
+uniform mat4 effects_ObjectToWorld;
+varying vec2 vUV;
+void main() {
+  vUV = aUV;
+  gl_Position = effects_MatrixVP * effects_ObjectToWorld * vec4(aPos, 1.0);
+}`,
+                fragment: SDK.config.gestureHandlerConfig.loadingGizmoConfig?.loadingFragment ?? DEFAULT_LOADING_FRAGMENT,
+            },
+        });
+        // @ts-expect-error 强制设置元素geometry
+        effects.geometry = geometry;
+        effects.material = material;
+        // 坐标转换
+        const viewBox = this._pageDataUtils.getViewBoxByBox(loadingBox);
+        const viewPosition = new Vector2((viewBox.max.x + viewBox.min.x) / 2, (viewBox.max.y + viewBox.min.y) / 2);
+        const worldPosition = this._pageDataUtils.interactionUtils.getWorldPositionByViewPoint(viewPosition);
+        const viewSize = new Vector2(viewBox.max.x - viewBox.min.x, viewBox.max.y - viewBox.min.y);
+        const pixelSize = this._pageDataUtils.interactionUtils.getPixelSizeByViewSize(viewSize);
+        const worldSize = this._pageDataUtils.getWorldSizeByPixelSize([pixelSize.x, pixelSize.y]);
+        loadingVFXItem.transform.setPosition(worldPosition.x, worldPosition.y, 0);
+        loadingVFXItem.transform.setScale(worldSize[0], worldSize[1], 1);
+        return loadingVFXItem;
+    }
+    add(id, options) {
+        const itemBox = this._pageDataUtils.getItemBoxById(id);
+        const currentBox = (options?.loadingBox ?? itemBox);
+        const normalizeLoadingBox = getNormalizeBoxByBoxes(itemBox, currentBox);
+        if (typeof id === 'string') {
+            const { tip = { text: '' } } = options ?? {};
+            const _tip = {
+                text: tip.text ?? '',
+                fontFamily: tip.fontFamily ?? '',
+                color: tip.color ?? 0x000000,
+                fontSize: tip.fontSize ?? 16,
+            };
+            const text = new Text(_tip.text, {
+                fontSize: _tip.fontSize,
+                fontFamily: _tip.fontFamily,
+                fill: _tip.color,
+                align: 'center',
+            });
+            const graphics = new Graphics();
+            graphics.addChild(text);
+            this._idMap.set(id, {
+                status: 'init',
+                loadingBox: normalizeLoadingBox,
+                loadingVFXItem: this.createLoadingVFXItem(currentBox),
+                graphics,
+                tip: _tip,
+            });
+            this._pageDataUtils.addLoadingItems([id]);
+            if (options?.clearSelected) {
+                this._pageDataUtils.removeSelectedItems([id]);
+            }
+        }
+    }
+    delete(id) {
+        const loadingItem = this._idMap.get(id);
+        if (loadingItem) {
+            const { graphics, loadingVFXItem } = loadingItem;
+            graphics.destroy();
+            loadingVFXItem.dispose();
+            this._idMap.delete(id);
+            this._pageDataUtils.removeLoadingItems([id]);
+        }
+    }
+    /**
+     * 更新指定 loading 元素的提示文案
+     */
+    update(id, options) {
+        const loadingItem = this._idMap.get(id);
+        if (!loadingItem) {
+            console.warn(`Loading item ${id} not found.`);
+            return;
+        }
+        const text = loadingItem.graphics.children[0];
+        // 更新存储的 tip 配置
+        if (text) {
+            loadingItem.tip = {
+                ...loadingItem.tip,
+                ...options.tip,
+            };
+            text.text = loadingItem.tip.text;
+            if (loadingItem.tip.fontFamily) {
+                text.style.fontFamily = loadingItem.tip.fontFamily;
+            }
+            if (loadingItem.tip.color !== undefined) {
+                text.style.fill = loadingItem.tip.color;
+            }
+        }
+    }
+    // 鼠标状态绘制结果
+    cursorResult = {
+        type: 'normal',
+        angle: 0,
+    };
+    initialize() { }
+    preparationAction() {
+        return undefined;
+    }
+    preAction() {
+        return undefined;
+    }
+    action() { }
+    endAction() {
+        return undefined;
+    }
+    interruption() {
+        return undefined;
+    }
+    actionKey() { }
+    endActionKey() { }
+    cancelPreparation() { }
+    refreshResults() { }
+    getRenderObjects() {
+        if (this._idMap.size === 0) {
+            return [];
+        }
+        else {
+            return this.refreshRenderObjects();
+        }
+    }
+    refreshRenderObjects() {
+        if (this._idMap.size === 0) {
+            return [];
+        }
+        const renderList = [];
+        // 绘制 Loading 蒙版
+        for (const id of this._idMap.keys()) {
+            const loadingItem = this._idMap.get(id);
+            if (!loadingItem) {
+                continue;
+            }
+            const itemBox = this._pageDataUtils.getViewBoxById(id);
+            const { min, max } = getBoxByNormalizeBox(itemBox, loadingItem.loadingBox);
+            const width = max.x - min.x;
+            const height = max.y - min.y;
+            // 更新提示文本位置（居中显示在 Loading 区域内）并跟随画布缩放
+            if (loadingItem.tip?.text) {
+                // 基础字体大小
+                const baseFontSize = loadingItem.tip.fontSize;
+                const text = loadingItem.graphics.children[0];
+                if (text) {
+                    text.style.fontWeight = 'bold';
+                    // 按图片尺寸缩放文本
+                    text.style.fontSize = Math.min(width / loadingItem.tip.text.length * 0.5, baseFontSize);
+                    // 计算居中位置
+                    text.x = min.x + (width - text.width) / 2;
+                    text.y = min.y + (height - text.height) / 2;
+                }
+            }
+            renderList.push(loadingItem.graphics);
+        }
+        return renderList;
+    }
+}