Merge pull request #231 from saksham-gera/dev

Added FullScreen Functionality

Author: pradeeban

package-lock.json

@@ -19,6 +19,7 @@
     "hotkeys-js": "^3.8.7",
     "jquery": "^3.0.0",
     "konva": "^7.0.3",
+    "lucide-react": "^0.487.0",
     "md5": "^2.3.0",
     "moment": "^2.29.4",
     "prismjs": "^1.30.0",

package.json

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Maximize, Minimize } from 'lucide-react';
+
+export default function FullScreenButton() {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    const toggleFullscreen = () => {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen();
+            setIsFullscreen(true);
+        } else {
+            document.exitFullscreen();
+            setIsFullscreen(false);
+        }
+    };
+
+    return (
+        <button type="button" onClick={toggleFullscreen}>
+            {isFullscreen ? <Minimize size={20} /> : <Maximize size={20} />}
+        </button>
+    );
+}

src/component/FullScreenButton.jsx

@@ -8,6 +8,7 @@ import {
     ActionButton, Vsep, Hsep, Space, TextBox, Switcher, DropDown, FileUploader,
 } from './HeaderComps';
 import 'rc-switch/assets/index.css';
+import FullScreenButton from './FullScreenButton';
 // import ServerActions from './serverActions/ServerActions';
 
 const setHotKeys = (actions) => {
@@ -38,13 +39,15 @@ const Header = ({ superState, dispatcher }) => {
 
     return (
         <header className="header">
-            <section className="middle titlebar">
-                {
-                    superState.curGraphInstance ? `${
-                        superState.curGraphInstance.projectName
-                    } - concore Editor` : 'untitled'
-                }
-            </section>
+            <div style={{ display: 'flex' }}>
+                <section className="middle titlebar">
+                    {
+                        superState.curGraphInstance ? `${superState.curGraphInstance.projectName
+                        } - concore Editor` : 'untitled'
+                    }
+                </section>
+                <FullScreenButton />
+            </div>
             <section className="toolbar">
                 {
                     actions.map(({
@@ -67,7 +70,7 @@ const Header = ({ superState, dispatcher }) => {
                         case 'menu': return <DropDown {...props} />;
                         case 'file-upload': return <FileUploader {...props} superState={superState} />;
                         case 'action': return <ActionButton {...props} />;
-                        // case 'serverActions': return <ServerActions superState={superState} />;
+                            // case 'serverActions': return <ServerActions superState={superState} />;
                         default: return <></>;
                         }
                     })