Combine present and script button

code-slide · Apr 15, 2024 · 1b0a8bd · 1b0a8bd
1 parent ea67ad5
commit 1b0a8bd
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 149 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeslide.net",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.1",

diff --git a/src/wireframes/components/HeaderView.tsx b/src/wireframes/components/HeaderView.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
 import { Title } from '@app/core';
 import { getEditor, useStore } from '@app/wireframes/model';
 import { useLoading } from './actions';
-import { ArrangeHeader, FileHeader, PresentHeader, IdHeader, ModeHeader, ScriptHeader } from './headers';
+import { ArrangeHeader, FileHeader, PresentHeader, IdHeader, ModeHeader } from './headers';
 import './styles/HeaderView.scss'
 
 export const HeaderView = React.memo(() => {
@@ -65,8 +65,6 @@ export const HeaderView = React.memo(() => {
             <span style={{ float: 'right' }}>
                 <ModeHeader />
                 <span className='menu-separator' />
-                <ScriptHeader />
-                <span className='menu-span' />
                 <PresentHeader />
             </span>
         </div>

diff --git a/src/wireframes/components/headers/PresentHeader.tsx b/src/wireframes/components/headers/PresentHeader.tsx
@@ -9,127 +9,66 @@
 import { FundProjectionScreenOutlined } from "@ant-design/icons";
 import { Button, message } from "antd";
 import * as React from "react";
-import { getFilteredDiagrams, getEditor, useStore, Diagram, compileSlides } from "@app/wireframes/model";
+import { getFilteredDiagrams, getEditor, useStore, Diagram, compileSlides, EditorState, parseFrames, changeFrames } from "@app/wireframes/model";
 import { AbstractControl } from "@app/wireframes/shapes/utils/abstract-control";
 import * as svg from '@svgdotjs/svg.js';
 import { getPlugin } from "@app/wireframes/shapes/utils/abstract-plugin";
 import { Color } from "@app/core/utils/color";
 import { shapes } from "@app/const";
 import { useState } from "react";
+import { useDispatch } from "react-redux";
 
 export const PresentHeader = React.memo(() => {
-    const html = document.querySelector('.editor-diagram')?.innerHTML;
-    const messageKey = 'PRESENT';
-
+    const dispatch = useDispatch();
     const diagrams = useStore(getFilteredDiagrams);
     const editor = useStore(getEditor);
     const [messageApi, contextHolder] = message.useMessage();
     const [loading, setLoading] = useState<boolean>(false);
 
-    const getItem = (diagram: Diagram, str: string) => {
-        // Split text using `=` symbol, ignoring those inside curly brackets
-        const regex = /=(?![^{]*})/;
-        const [id, json] = str.split(regex);
-
-        // Get item
-        let item = diagram.items.get(id);
-        if (!item || !json) return { item: item, id: id };
-
-        // Parse str -> json
-        let corrected = json.replace(/'/g, '"');
-        let jsonObj: {[index: string]: string} = JSON.parse(corrected);      
-
-        // Modify appearance if there are valid specifications
-        // e.g. Shape1 = {'TEXT': 'Hello, world!'}
-        const allKeys = Object.values(shapes.key);
-        for (let [key, value] of Object.entries(jsonObj)) {
-            if (!allKeys.includes(key)) continue;      // Safe-check
-
-            if (key.endsWith('COLOR')) {
-                const color = Color.fromValue(value).toNumber();
-                item = item.setAppearance(key, color);
-            } else {
-                item = item.setAppearance(key, value);
-            }   
-        }
+    const messageKey = 'PRESENT';
 
-        return { item: item, id: id };
+    const fetchParser = async () => {
+        for (let diagram of diagrams) {
+            const script = diagram.script;
+            if (!script) continue;
+
+            const frames = await parseFrames(script);
+            dispatch(changeFrames(diagram.id, frames));
+        }
     }
 
-    const getSlides = () => {
-        let frame3D: string[][][] = new Array(diagrams.length);
-
-        // Get frames
-        diagrams.map((diagram, i) => {
-            const frames = diagram.frames ?? [];
-            frame3D[i] = [];
-
-            frames.map((frame, j) => {
-                const usedIDs: string[] = [];
-                frame3D[i][j] = [];
-
-                for (let k = frame.length; k > 0; k--) {
-                    const { item, id } = getItem(diagram, frame[k - 1]);
-                    if (!item || usedIDs.includes(id)) continue;
-                    usedIDs.push(id);
-
-                    // Get svg
-                    const svgControl = new AbstractControl(getPlugin(item.renderer));
-                    const svgElement: svg.Element = svgControl.render(item, undefined);
-                    const svgCode = svgElement.node.outerHTML;
-
-                    // Push object to the head of parent map
-                    frame3D[i][j] = [svgCode, ...frame3D[i][j]];
-                }
-            })
-        })
+    const fetchCompiler = async () => {
+        const { fileName, title, size, backgroundColor, config, frame } = getSlides(diagrams, editor);
 
-        // Reshape from 3D to 2D
-        let frame2D = [];
-        for (let row of frame3D) for (let e of row) frame2D.push(e);
-
-        return {
-            fileName: editor.id,
-            title: editor.name,
-            backgroundColor: editor.color.toString(),
-            size: [editor.size.x, editor.size.y],
-            config: editor.revealConfig,
-            frame: frame2D,
-        };
+        const linkPresentation = await compileSlides(fileName, title, size, backgroundColor, config, frame);
+
+        return linkPresentation;
     }
 
     const fetchApi = async () => {
-        const { fileName, title, size, backgroundColor, config, frame } = getSlides();
-
-        if (!html) {
-            messageApi.error('Empty slide. Cannot perform action');
-            return;
-        }
-
         // Start compiling
         setLoading(true);
-        messageApi.open({
-            key: messageKey,
-            type: 'loading', 
-            content: 'Preparing presentation...',
-        });
+        messageApi.open({ key: messageKey, type: 'loading', content: 'Preparing presentation...' });
 
         try {
-            const linkPresentation = await compileSlides(fileName, title, size, backgroundColor, config, frame);
-
+            // Fetch frames from parser
+            fetchParser();
+
+            // Fetch presentation from compiler
+            const link = fetchCompiler();
+            window.open(await link, '_blank');
+        } catch (err) {
+            messageApi.error(`${err}`);
+        } finally {
             messageApi.open({
                 key: messageKey,
                 type: 'success',
-                content: 'Preparing completed. Your presentation will be opened in a new tab.',
-                duration: 2,
+                content: `Preparing completed. Your presentation will be opened in a new tab.`,
+                duration: 1,
             });
-            setLoading(false);
-
-            window.open(linkPresentation);
-        } catch (err) {
-            messageApi.error(`${err}`);
-            setLoading(false);
         }
+
+        setLoading(false);
     }
 
     return (
@@ -147,3 +86,75 @@ export const PresentHeader = React.memo(() => {
         </>
     )
 });
+
+const getItem = (diagram: Diagram, str: string) => {
+    // Split text using `=` symbol, ignoring those inside curly brackets
+    const regex = /=(?![^{]*})/;
+    const [id, json] = str.split(regex);
+
+    // Get item
+    let item = diagram.items.get(id);
+    if (!item || !json) return { item: item, id: id };
+
+    // Parse str -> json
+    let corrected = json.replace(/'/g, '"');
+    let jsonObj: {[index: string]: string} = JSON.parse(corrected);      
+
+    // Modify appearance if there are valid specifications
+    // e.g. Shape1 = {'TEXT': 'Hello, world!'}
+    const allKeys = Object.values(shapes.key);
+    for (let [key, value] of Object.entries(jsonObj)) {
+        if (!allKeys.includes(key)) continue;      // Safe-check
+
+        if (key.endsWith('COLOR')) {
+            const color = Color.fromValue(value).toNumber();
+            item = item.setAppearance(key, color);
+        } else {
+            item = item.setAppearance(key, value);
+        }   
+    }
+
+    return { item: item, id: id };
+}
+
+const getSlides = (diagrams: Diagram[], editor: EditorState) => {
+    let frame3D: string[][][] = new Array(diagrams.length);
+
+    // Get frames
+    diagrams.map((diagram, i) => {
+        const frames = diagram.frames ?? [];
+        frame3D[i] = [];
+
+        frames.map((frame, j) => {
+            const usedIDs: string[] = [];
+            frame3D[i][j] = [];
+
+            for (let k = frame.length; k > 0; k--) {
+                const { item, id } = getItem(diagram, frame[k - 1]);
+                if (!item || usedIDs.includes(id)) continue;
+                usedIDs.push(id);
+
+                // Get svg
+                const svgControl = new AbstractControl(getPlugin(item.renderer));
+                const svgElement: svg.Element = svgControl.render(item, undefined);
+                const svgCode = svgElement.node.outerHTML;
+
+                // Push object to the head of parent map
+                frame3D[i][j] = [svgCode, ...frame3D[i][j]];
+            }
+        })
+    })
+
+    // Reshape from 3D to 2D
+    let frame2D = [];
+    for (let row of frame3D) for (let e of row) frame2D.push(e);
+
+    return {
+        fileName: editor.id,
+        title: editor.name,
+        backgroundColor: editor.color.toString(),
+        size: [editor.size.x, editor.size.y],
+        config: editor.revealConfig,
+        frame: frame2D,
+    };
+}
diff --git a/src/wireframes/components/headers/ScriptHeader.tsx b/src/wireframes/components/headers/ScriptHeader.tsx
diff --git a/src/wireframes/components/headers/index.ts b/src/wireframes/components/headers/index.ts
@@ -2,5 +2,4 @@ export * from './ArrangeHeader';
 export * from './FileHeader';
 export * from './IdHeader';
 export * from './ModeHeader';
-export * from './PresentHeader';
-export * from './ScriptHeader';
+export * from './PresentHeader';