@eventcatalog/core 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.0.0-beta.1";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-M6QG3NPM.js";
-import "../chunk-FH5AN4Z6.js";
+} from "../chunk-JSONCD7V.js";
+import "../chunk-H4QHE5YZ.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.0.0-beta.1";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-KE2IUVK6.js";
-import "../chunk-M6QG3NPM.js";
-import "../chunk-FH5AN4Z6.js";
+} from "../chunk-PQL6O5YA.js";
+import "../chunk-JSONCD7V.js";
+import "../chunk-H4QHE5YZ.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-FH5AN4Z6.js → chunk-H4QHE5YZ.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.0.0-beta.1";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-M6QG3NPM.js → chunk-JSONCD7V.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-FH5AN4Z6.js";
+} from "./chunk-H4QHE5YZ.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-KE2IUVK6.js → chunk-PQL6O5YA.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-M6QG3NPM.js";
+} from "./chunk-JSONCD7V.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.0.0-beta.1";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-FH5AN4Z6.js";
+} from "./chunk-H4QHE5YZ.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.0.0-beta.1";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-KE2IUVK6.js";
-import "./chunk-M6QG3NPM.js";
+} from "./chunk-PQL6O5YA.js";
+import "./chunk-JSONCD7V.js";
 import {
   runMigrations
 } from "./chunk-BH3JMNAV.js";
@@ -19,7 +19,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-FH5AN4Z6.js";
+} from "./chunk-H4QHE5YZ.js";
 import {
   isAuthEnabled,
   isOutputServer

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -19,7 +19,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import { ExternalLink, HistoryIcon } from 'lucide-react';
 import { toPng } from 'html-to-image';
-import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -135,6 +135,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
@@ -349,6 +350,30 @@ const NodeGraphBuilder = ({
     setIsStudioModalOpen(true);
   };
 
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setTimeout(() => {
+        fitView({ duration: 800 });
+      }, 100);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [fitView]);
+
   const handleExportVisual = useCallback(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
@@ -563,7 +588,7 @@ const NodeGraphBuilder = ({
   const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
 
   return (
-    <div ref={reactFlowWrapperRef} className="w-full h-full">
+    <div ref={reactFlowWrapperRef} className="w-full h-full bg-gray-50">
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -583,7 +608,7 @@ const NodeGraphBuilder = ({
         <Panel position="top-center" className="w-full pr-6 ">
           <div className="flex space-x-2 justify-between items-center">
             <div className="flex space-x-2 ml-4">
-              <div>
+              <div className="relative group">
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                   className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
@@ -591,6 +616,23 @@ const NodeGraphBuilder = ({
                 >
                   <CogIcon className="h-5 w-5 text-gray-600" />
                 </button>
+                <div className="absolute top-full left-0 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  Settings
+                </div>
+              </div>
+              <div className="relative group">
+                <button
+                  onClick={toggleFullScreen}
+                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
+                    isFullscreen ? 'bg-purple-50 text-purple-600' : ''
+                  }`}
+                  aria-label={isFullscreen ? 'Exit presentation mode' : 'Enter presentation mode'}
+                >
+                  <PresentationChartLineIcon className={`h-5 w-5 ${isFullscreen ? 'text-purple-600' : 'text-gray-600'}`} />
+                </button>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  {isFullscreen ? 'Exit Presentation Mode' : 'Presentation Mode'}
+                </div>
               </div>
 
               {title && (

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "publishConfig": {
     "access": "public"
   },