Merge pull request #154 from Exabyte-io/feature/SOF-7438

Feature/SOF-7438 GIF recording

Author: timurbazhirov

dist/components/ThreeDEditor.d.ts

@@ -59,6 +59,8 @@ export class ThreeDEditor extends React.Component<any, any, any> {
     onMeasurementParam(param: any, offParam: any): void;
     addHotKeyListener(): void;
     removeHotKeyListener(): void;
+    handleStartGifRecording(downloadPath: any, rotationSpeed?: number, frameDuration?: number): Promise<void>;
+    doWaveFunc(funcStr: any): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     UNSAFE_componentWillReceiveProps(nextProps: any, nextContext: any): void;

dist/components/ThreeDEditor.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import "../MuiClassNameSetup";
 import { DarkMaterialUITheme } from "@exabyte-io/cove.js/dist/theme";
 import ThemeProvider from "@exabyte-io/cove.js/dist/theme/provider";
+import { exportToDisk } from "@exabyte-io/cove.js/dist/utils/downloader";
+import { AlertProvider } from "@exabyte-io/cove.js/src/theme/provider";
 import { Made } from "@mat3ra/made";
 import Article from "@mui/icons-material/Article";
 import Autorenew from "@mui/icons-material/Autorenew";
@@ -30,7 +32,6 @@ import $ from "jquery";
 import PropTypes from "prop-types";
 import React from "react";
 import settings from "../settings";
-import { exportToDisk } from "../utils";
 import IconsToolbar from "./IconsToolbar";
 import ParametersMenu from "./ParametersMenu";
 import { ThreejsEditorModal } from "./ThreejsEditorModal";
@@ -234,6 +235,13 @@ export class ThreeDEditor extends React.Component {
                 },
             ];
             return [
+                {
+                    id: "StartGif",
+                    title: "Auto Rotate GIF",
+                    content: "Auto Rotate GIF",
+                    leftIcon: _jsx(PictureInPicture, {}),
+                    onClick: () => this.handleStartGifRecording(),
+                },
                 {
                     id: "Screenshot",
                     title: "Screenshot",
@@ -318,6 +326,8 @@ export class ThreeDEditor extends React.Component {
         this.onMeasurementParam = this.onMeasurementParam.bind(this);
         this.addHotKeyListener = this.addHotKeyListener.bind(this);
         this.removeHotKeyListener = this.removeHotKeyListener.bind(this);
+        this.handleStartGifRecording = this.handleStartGifRecording.bind(this);
+        this.doWaveFunc = this.doWaveFunc.bind(this);
     }
     componentDidMount() {
         this.addHotKeyListener();
@@ -587,6 +597,14 @@ export class ThreeDEditor extends React.Component {
         }
         return toolbarConfig;
     }
+    async handleStartGifRecording(downloadPath, rotationSpeed = 60, frameDuration = 0.05) {
+        await this.WaveComponent.wave.takeGifScreenshot({
+            downloadPath,
+            rotationSpeed,
+            frameDuration,
+        });
+        console.log("Recorded gif");
+    }
     onThreejsEditorModalHide(material) {
         let { isThreejsEditorModalShown } = this.state;
         isThreejsEditorModalShown = !isThreejsEditorModalShown;
@@ -619,14 +637,29 @@ export class ThreeDEditor extends React.Component {
         return (_jsxs("div", { className: "wave-component-holder", style: { position: "relative", height: "100%" }, children: [this.renderCoverDiv(), _jsx(IconsToolbar, { toolbarConfig: this.getToolbarConfig(), isInteractive: isInteractive, handleToggleInteractive: this.handleToggleInteractive }), this.renderWaveComponent()] }));
     }
     render() {
-        return (_jsx(ThemeProvider, { theme: DarkMaterialUITheme, children: _jsx(ScopedCssBaseline, { enableColorScheme: true, style: { height: "100%" }, children: this.renderWaveOrThreejsEditorModal() }) }));
+        return (_jsx(ThemeProvider, { theme: DarkMaterialUITheme, children: _jsx(ScopedCssBaseline, { enableColorScheme: true, style: { height: "100%" }, children: _jsx(AlertProvider, { children: this.renderWaveOrThreejsEditorModal() }) }) }));
+    }
+    doWaveFunc(funcStr) {
+        if (!this.WaveComponent || !this.WaveComponent.wave) {
+            console.error("Wave component not initialized");
+            return;
+        }
+        const { wave } = this.WaveComponent;
+        try {
+            // eslint-disable-next-line no-new-func
+            const func = new Function("wave", `return wave.${funcStr}`);
+            func(wave);
+            this.WaveComponent.wave.rebuildScene();
+        }
+        catch (error) {
+            console.error("Error executing wave function:", error);
+        }
     }
 }
 ThreeDEditor.propTypes = {
     material: PropTypes.instanceOf(Made.Material).isRequired,
     editable: PropTypes.bool,
-    isConventionalCellShown: PropTypes.bool,
-    // eslint-disable-next-line react/forbid-prop-types
+    isConventionalCellShown: PropTypes.bool, // eslint-disable-next-line react/forbid-prop-types
     boundaryConditions: PropTypes.object,
     onUpdate: PropTypes.func,
 };

dist/mixins/controls.js

@@ -19,6 +19,8 @@ const OrbitControlsMixin = (superclass) => class extends superclass {
         this.disableOrbitControlsAnimation = this.disableOrbitControlsAnimation.bind(this);
         this.initSecondAxes = this.initSecondAxes.bind(this);
         this.updateSecondAxes = this.updateSecondAxes.bind(this);
+        // Bind methods to context to avoid losing `this` reference in requestAnimationFrame
+        this.performOrbitControlsAnimation = this.performOrbitControlsAnimation.bind(this);
     }
     initOrbitControls(enabled = false) {
         this.initSecondAxes();
@@ -65,14 +67,22 @@ const OrbitControlsMixin = (superclass) => class extends superclass {
         if (!this.orbitControls)
             return;
         this.orbitControls.autoRotate = true;
-        this.animationFrameId = window.requestAnimationFrame(this.enableOrbitControlsAnimation);
+        this.performOrbitControlsAnimation();
+    }
+    // eslint-disable-next-line class-methods-use-this
+    performOrbitControlsAnimation(action = () => { }) {
+        this.animationFrameId = window.requestAnimationFrame(this.performOrbitControlsAnimation);
         // required if controls.enableDamping or controls.autoRotate are set to true
         this.orbitControls.update();
         this.render();
+        if (typeof action === "function") {
+            action();
+        }
     }
     disableOrbitControlsAnimation() {
         if (!this.orbitControls)
             return;
+        this.orbitControls.autoRotate = false;
         window.cancelAnimationFrame(this.animationFrameId);
         this.animationFrameId = null;
     }

dist/mixins/image.d.ts

@@ -0,0 +1,11 @@
+export function ImageMixin(superclass: any): {
+    new (): {
+        [x: string]: any;
+        takeScreenshot(): void;
+        getScreenshotImage(): any;
+        updateScene(): Promise<any>;
+        createRotatingGifData(options?: {}): Promise<any>;
+        takeGifScreenshot(options?: {}): Promise<void>;
+    };
+    [x: string]: any;
+};

dist/mixins/image.js

@@ -0,0 +1,69 @@
+import { showInfoAlert, showSuccessAlert, showWarningAlert, } from "@exabyte-io/cove.js/dist/other/alerts";
+import { saveImageDataToFile } from "@exabyte-io/cove.js/dist/utils/downloader";
+import { createGIFAsync } from "./utils";
+export const ImageMixin = (superclass) => class extends superclass {
+    takeScreenshot() {
+        saveImageDataToFile(this.getScreenshotImage());
+    }
+    getScreenshotImage() {
+        const canvas = this.renderer.domElement;
+        canvas.getContext("2d", { willReadFrequently: true });
+        return canvas.toDataURL("image/png");
+    }
+    async updateScene() {
+        return new Promise((resolve) => {
+            const checkRender = () => {
+                this.renderer.render(this.scene, this.camera); // Ensure scene updates
+                requestAnimationFrame(() => resolve()); // Wait for the next frame
+            };
+            checkRender();
+        });
+    }
+    async createRotatingGifData(options = {}) {
+        const sampleInterval = options.sampleInterval || 20; // Parts of image in pixels
+        const totalGifDuration = options.totalDuration || 3; // Seconds
+        const animationDuration = options.animationDuration || 1; // Seconds
+        const totalFrames = options.totalFrames || 60; // Number of frames in GIF
+        const autoRotateSpeed = 60 / animationDuration; // RPM
+        const frameDuration = totalGifDuration / totalFrames;
+        const canvas = this.renderer.domElement;
+        canvas.willReadFrequently = true;
+        const { width, height } = canvas;
+        if (this.orbitControls.autoRotate) {
+            showWarningAlert("Please disable auto-rotation before creating a GIF.");
+            return null;
+        }
+        // Store original auto-rotate settings
+        const originalSpeed = this.orbitControls.autoRotateSpeed;
+        this.orbitControls.autoRotateSpeed = autoRotateSpeed;
+        this.orbitControls.autoRotate = true;
+        const frames = [];
+        for (let i = 0; i < totalFrames; i += 1) {
+            this.orbitControls.update(); // Move scene to new position
+            // eslint-disable-next-line no-await-in-loop
+            await this.updateScene(); // Wait for rendering to finish
+            frames.push(this.getScreenshotImage()); // Capture screenshot
+        }
+        showInfoAlert("GIF is being created. Please wait...");
+        const gifData = await createGIFAsync({
+            images: frames,
+            gifWidth: width,
+            gifHeight: height,
+            sampleInterval,
+            frameDuration,
+        });
+        // Restore original rotation settings
+        this.orbitControls.autoRotateSpeed = originalSpeed;
+        this.orbitControls.autoRotate = false;
+        canvas.willReadFrequently = false;
+        return gifData;
+    }
+    async takeGifScreenshot(options = {}) {
+        const gifDataUrl = await this.createRotatingGifData(options);
+        if (!gifDataUrl)
+            return;
+        const fileName = (this._structure.name || this._structure.formula || "wave-visualization") + ".gif";
+        showSuccessAlert("GIF is created. Proceeding to download.");
+        saveImageDataToFile(gifDataUrl, fileName);
+    }
+};

dist/mixins/labels.js

@@ -6,7 +6,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 import * as THREE from "three";
 import { ATOM_GROUP_NAME, LABELS_GROUP_NAME } from "../enums";
 // eslint-disable-next-line import/no-cycle
-import { setParameters } from "../utils";
 /*
  * Mixin containing the logic for dealing with atom labels.
  * Dynamically draws labels over atoms.
@@ -35,9 +34,9 @@ export const LabelsMixin = (superclass) => { var _texturesCache, _a; return _a =
             const basicTextSize = textWidth > fontSize ? textWidth : fontSize;
             const textSizePowOf2 = 2 ** Math.floor(Math.log2(basicTextSize));
             const scaledFontSize = (fontSize * textSizePowOf2) / basicTextSize;
-            setParameters(canvas, { width: textSizePowOf2, height: textSizePowOf2 });
+            Object.assign(canvas, { width: textSizePowOf2, height: textSizePowOf2 });
             const scaledFont = `${fontWeight} ${scaledFontSize}px ${fontFace}`;
-            setParameters(context, { font: scaledFont, ...textParams });
+            Object.assign(context, { font: scaledFont, ...textParams });
             context.fillText(text, context.canvas.width / 2, (context.canvas.height / 2) * 1.15);
             context.strokeText(text, context.canvas.width / 2, (context.canvas.height / 2) * 1.15);
             const texture = new THREE.Texture(canvas);

dist/mixins/utils.d.ts

@@ -1,3 +1,11 @@
+export function createGIFAsync({ images, gifWidth, gifHeight, numFrames, frameDuration, sampleInterval, }: {
+    images: any;
+    gifWidth: any;
+    gifHeight: any;
+    numFrames: any;
+    frameDuration: any;
+    sampleInterval: any;
+}): Promise<any>;
 export function UtilsMixin(superclass: any): {
     new (): {
         [x: string]: any;

dist/mixins/utils.js

@@ -1,3 +1,4 @@
+import gifshot from "gifshot";
 import * as THREE from "three";
 export const UtilsMixin = (superclass) => class extends superclass {
     // toggles a boolean variable and optionally sets all variables in the antagonists array to the opposite value
@@ -58,3 +59,15 @@ export const ApplyGlow = (meshObjet, baseColor, offset = 0) => {
         meshObjet.material.emissive.setHSL(hue, saturation, atomHSL.l);
     }
 };
+export function createGIFAsync({ images, gifWidth, gifHeight, numFrames, frameDuration, sampleInterval, }) {
+    return new Promise((resolve, reject) => {
+        gifshot.createGIF({ images, gifWidth, gifHeight, numFrames, frameDuration, sampleInterval }, (obj) => {
+            if (!obj.error) {
+                resolve(obj.image); // Resolve with the GIF data URL
+            }
+            else {
+                reject(obj.error); // Reject with the error
+            }
+        });
+    });
+}