@eventcatalog/core 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @eventcatalog/core
 
+## 2.8.1
+
+### Patch Changes
+
+- 16c6a28: feat(core): added api path and http verb in openapi viewer
+- c8118b7: fix(core): downloading images in visualizer now shows the whole diagram
+
 ## 2.8.0
 
 ### Minor Changes

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { Panel, useReactFlow, getRectOfNodes } from 'reactflow';
+import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from 'reactflow';
 import { toPng } from 'html-to-image';
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 
@@ -16,7 +16,10 @@ const imageHeight = 768;
 function DownloadButton({ filename, addPadding = true }: { filename?: string; addPadding?: boolean }) {
   const { getNodes } = useReactFlow();
   const onClick = () => {
-    const nodesBounds = getRectOfNodes(getNodes());
+    const nodesBounds = getNodesBounds(getNodes());
+    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
+    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2);
 
     // Hide the button
     // @ts-ignore
@@ -25,13 +28,14 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
     document.querySelector('.react-flow__controls').style.display = 'none';
 
     // @ts-ignore
-    toPng(document.querySelector('.react-flow'), {
+    toPng(document.querySelector('.react-flow__viewport'), {
       backgroundColor: '#f1f1f1',
-      width: imageWidth * 1.2,
-      height: imageHeight,
+      width,
+      height,
       style: {
-        width: imageWidth * 1.2,
-        height: imageHeight,
+        width,
+        height,
+        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
       },
     }).then((dataUrl: string) => {
       downloadImage(dataUrl, filename);

package/src/pages/docs/[type]/[id]/[version]/spec/index.astro

@@ -53,24 +53,26 @@ const fileExists = fs.existsSync(pathOnDisk);
     ) : (
       <rapi-doc
         spec-url={buildUrl(pathToSpec, true)}
+        render-style="read"
         show-header="false"
         allow-authentication="true"
         allow-try="true"
+        default-schema-tab="schema"
+        show-curl-before-try="true"
+        use-path-in-nav-bar="true"
+        show-method-in-nav-bar="as-colored-block"
+        theme="light"
+        schema-style="table"
         class="relative top-0"
         style={{ height: '100vh', width: '100%', zIndex: 100 }}
         regular-font="ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
-        schema-style="table"
-        default-schema-tab="schema"
         bg-color="#ffffff"
-        text-color=""
+        primary-color="#6b21a8"
         nav-bg-color="#fff"
         nav-text-color=""
         nav-hover-bg-color="#fff"
         nav-hover-text-color="#6b21a8"
         nav-accent-color=""
-        primary-color="#6b21a8"
-        theme="light"
-        render-style="read"
       />
     )
   }