@eventcatalog/visualiser 5.0.1 → 5.1.0

package/dist/styles.css

@@ -160,7 +160,6 @@
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --animate-spin: spin 1s linear infinite;
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --blur-sm: 8px;
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -185,6 +184,9 @@
 .eventcatalog-visualizer .relative {
   position: relative;
 }
+.eventcatalog-visualizer .static {
+  position: static;
+}
 .eventcatalog-visualizer .sticky {
   position: sticky;
 }
@@ -230,9 +232,6 @@
 .eventcatalog-visualizer .top-\[-14px\] {
   top: -14px;
 }
-.eventcatalog-visualizer .top-\[10px\] {
-  top: 10px;
-}
 .eventcatalog-visualizer .top-\[34px\] {
   top: 34px;
 }
@@ -281,12 +280,12 @@
 .eventcatalog-visualizer .bottom-0 {
   bottom: calc(var(--spacing) * 0);
 }
-.eventcatalog-visualizer .bottom-4 {
-  bottom: calc(var(--spacing) * 4);
-}
 .eventcatalog-visualizer .bottom-\[2px\] {
   bottom: 2px;
 }
+.eventcatalog-visualizer .bottom-\[15px\] {
+  bottom: 15px;
+}
 .eventcatalog-visualizer .bottom-\[68px\] {
   bottom: 68px;
 }
@@ -323,9 +322,6 @@
 .eventcatalog-visualizer .left-3\.5 {
   left: calc(var(--spacing) * 3.5);
 }
-.eventcatalog-visualizer .left-4 {
-  left: calc(var(--spacing) * 4);
-}
 .eventcatalog-visualizer .left-\[-14px\] {
   left: -14px;
 }
@@ -728,6 +724,9 @@
 .eventcatalog-visualizer .w-\[360px\] {
   width: 360px;
 }
+.eventcatalog-visualizer .w-\[calc\(100\%-2rem\)\] {
+  width: calc(100% - 2rem);
+}
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
@@ -833,6 +832,9 @@
 .eventcatalog-visualizer .grow {
   flex-grow: 1;
 }
+.eventcatalog-visualizer .origin-top-left {
+  transform-origin: 0 0;
+}
 .eventcatalog-visualizer .-translate-x-1\/2 {
   --tw-translate-x: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -849,12 +851,6 @@
   --tw-translate-y: calc(2px * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
-.eventcatalog-visualizer .scale-110 {
-  --tw-scale-x: 110%;
-  --tw-scale-y: 110%;
-  --tw-scale-z: 110%;
-  scale: var(--tw-scale-x) var(--tw-scale-y);
-}
 .eventcatalog-visualizer .-rotate-90 {
   rotate: calc(90deg * -1);
 }
@@ -885,6 +881,9 @@
 .eventcatalog-visualizer .cursor-pointer {
   cursor: pointer;
 }
+.eventcatalog-visualizer .touch-none {
+  touch-action: none;
+}
 .eventcatalog-visualizer .resize {
   resize: both;
 }
@@ -1539,6 +1538,9 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent-subtle\)\)\] {
   background-color: rgb(var(--ec-accent-subtle));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent-subtle\)\/0\.5\)\] {
+  background-color: rgb(var(--ec-accent-subtle)/0.5);
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-gray-background\)\)\] {
   background-color: rgb(var(--ec-badge-color-gray-background));
 }
@@ -1569,12 +1571,6 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\)\)\] {
   background-color: rgb(var(--ec-card-bg));
 }
-.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\)\)\]\/90 {
-  background-color: rgb(var(--ec-card-bg));
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, rgb(var(--ec-card-bg)) 90%, transparent);
-  }
-}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\,var\(--ec-page-bg\)\)\)\] {
   background-color: rgb(var(--ec-card-bg,var(--ec-page-bg)));
 }
@@ -2191,9 +2187,6 @@
 .eventcatalog-visualizer .p-2 {
   padding: calc(var(--spacing) * 2);
 }
-.eventcatalog-visualizer .p-2\.5 {
-  padding: calc(var(--spacing) * 2.5);
-}
 .eventcatalog-visualizer .p-3 {
   padding: calc(var(--spacing) * 3);
 }
@@ -3001,9 +2994,6 @@
     color: var(--color-yellow-600);
   }
 }
-.eventcatalog-visualizer .opacity-0 {
-  opacity: 0%;
-}
 .eventcatalog-visualizer .opacity-10 {
   opacity: 10%;
 }
@@ -3243,11 +3233,6 @@
 .eventcatalog-visualizer .filter {
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
-.eventcatalog-visualizer .backdrop-blur-sm {
-  --tw-backdrop-blur: blur(var(--blur-sm));
-  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-}
 .eventcatalog-visualizer .transition {
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3342,13 +3327,6 @@
     }
   }
 }
-.eventcatalog-visualizer .group-hover\:opacity-100 {
-  .eventcatalog-visualizer &:is(:where(.group):hover *) {
-    @media (hover: hover) {
-      opacity: 100%;
-    }
-  }
-}
 .eventcatalog-visualizer .placeholder\:text-\[rgb\(var\(--ec-page-text-muted\)\)\] {
   .eventcatalog-visualizer &::placeholder {
     color: rgb(var(--ec-page-text-muted));
@@ -3372,16 +3350,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:scale-105 {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      --tw-scale-x: 105%;
-      --tw-scale-y: 105%;
-      --tw-scale-z: 105%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:border-\[color-mix\(in_srgb\,rgb\(var\(--ec-accent\)\)_45\%\,transparent\)\]\! {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3486,13 +3454,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\)\/0\.5\] {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      background-color: rgb(var(--ec-page-border))/0.5;
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\/0\.2\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -4386,6 +4347,23 @@
   --ec-group-bg: rgba(250, 248, 255, 0.35);
   --ec-group-header-bg: rgba(237, 233, 254, 0.7);
   --ec-group-text: #5b21b6;
+  --ec-minimap-event: 234, 88, 12;
+  --ec-minimap-command: 37, 99, 235;
+  --ec-minimap-query: 22, 163, 74;
+  --ec-minimap-service: 219, 39, 119;
+  --ec-minimap-channel: 107, 114, 128;
+  --ec-minimap-data: 79, 70, 229;
+  --ec-minimap-agent: 2, 132, 199;
+  --ec-minimap-view: 14, 165, 233;
+  --ec-minimap-message-group: 124, 58, 237;
+  --ec-minimap-system: 139, 92, 246;
+  --ec-minimap-external: 147, 51, 234;
+  --ec-minimap-domain: 234, 179, 8;
+  --ec-minimap-actor: 202, 138, 4;
+  --ec-minimap-flow: 13, 148, 136;
+  --ec-minimap-entity: 59, 130, 246;
+  --ec-minimap-note: 253, 224, 71;
+  --ec-minimap-other: 156, 163, 175;
 }
 [data-theme="dark"] .eventcatalog-visualizer {
   --ec-page-bg: 22, 27, 34;
@@ -4407,6 +4385,23 @@
   --ec-group-bg: #1e1533;
   --ec-group-header-bg: #2d1f4e;
   --ec-group-text: #c084fc;
+  --ec-minimap-event: 251, 146, 60;
+  --ec-minimap-command: 96, 165, 250;
+  --ec-minimap-query: 74, 222, 128;
+  --ec-minimap-service: 244, 114, 182;
+  --ec-minimap-channel: 156, 163, 175;
+  --ec-minimap-data: 129, 140, 248;
+  --ec-minimap-agent: 56, 189, 248;
+  --ec-minimap-view: 125, 211, 252;
+  --ec-minimap-message-group: 196, 181, 253;
+  --ec-minimap-system: 167, 139, 250;
+  --ec-minimap-external: 192, 132, 252;
+  --ec-minimap-domain: 250, 204, 21;
+  --ec-minimap-actor: 234, 179, 8;
+  --ec-minimap-flow: 45, 212, 191;
+  --ec-minimap-entity: 147, 197, 253;
+  --ec-minimap-note: 202, 138, 4;
+  --ec-minimap-other: 107, 114, 128;
 }
 .eventcatalog-visualizer .ec-download-btn {
   display: none;
@@ -4748,6 +4743,76 @@
 .eventcatalog-visualizer .react-flow__minimap {
   background-color: rgb(var(--ec-card-bg));
   border: 1px solid rgb(var(--ec-page-border));
+  --xy-minimap-mask-background-color: rgba(var(--ec-page-text), 0.08);
+}
+.eventcatalog-visualizer .ec-minimap-node {
+  fill: rgb(var(--ec-minimap-color));
+}
+.eventcatalog-visualizer .ec-minimap-container {
+  fill: rgba(var(--ec-minimap-color), 0.08);
+  stroke: rgb(var(--ec-minimap-color));
+  stroke-width: 1.5px;
+  vector-effect: non-scaling-stroke;
+}
+.eventcatalog-visualizer .ec-minimap-external {
+  stroke: rgb(var(--ec-minimap-color));
+  stroke-width: 1.5px;
+  stroke-dasharray: 3 2;
+  vector-effect: non-scaling-stroke;
+}
+.eventcatalog-visualizer .ec-minimap-external:not(.ec-minimap-container) {
+  fill: rgba(var(--ec-minimap-color), 0.25);
+}
+.eventcatalog-visualizer .ec-minimap-event {
+  --ec-minimap-color: var(--ec-minimap-event);
+}
+.eventcatalog-visualizer .ec-minimap-command {
+  --ec-minimap-color: var(--ec-minimap-command);
+}
+.eventcatalog-visualizer .ec-minimap-query {
+  --ec-minimap-color: var(--ec-minimap-query);
+}
+.eventcatalog-visualizer .ec-minimap-service {
+  --ec-minimap-color: var(--ec-minimap-service);
+}
+.eventcatalog-visualizer .ec-minimap-channel {
+  --ec-minimap-color: var(--ec-minimap-channel);
+}
+.eventcatalog-visualizer .ec-minimap-data {
+  --ec-minimap-color: var(--ec-minimap-data);
+}
+.eventcatalog-visualizer .ec-minimap-agent {
+  --ec-minimap-color: var(--ec-minimap-agent);
+}
+.eventcatalog-visualizer .ec-minimap-view {
+  --ec-minimap-color: var(--ec-minimap-view);
+}
+.eventcatalog-visualizer .ec-minimap-message-group {
+  --ec-minimap-color: var(--ec-minimap-message-group);
+}
+.eventcatalog-visualizer .ec-minimap-system {
+  --ec-minimap-color: var(--ec-minimap-system);
+}
+.eventcatalog-visualizer .ec-minimap-external {
+  --ec-minimap-color: var(--ec-minimap-external);
+}
+.eventcatalog-visualizer .ec-minimap-domain {
+  --ec-minimap-color: var(--ec-minimap-domain);
+}
+.eventcatalog-visualizer .ec-minimap-actor {
+  --ec-minimap-color: var(--ec-minimap-actor);
+}
+.eventcatalog-visualizer .ec-minimap-flow {
+  --ec-minimap-color: var(--ec-minimap-flow);
+}
+.eventcatalog-visualizer .ec-minimap-entity {
+  --ec-minimap-color: var(--ec-minimap-entity);
+}
+.eventcatalog-visualizer .ec-minimap-note {
+  --ec-minimap-color: var(--ec-minimap-note);
+}
+.eventcatalog-visualizer .ec-minimap-other {
+  --ec-minimap-color: var(--ec-minimap-other);
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -4764,21 +4829,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -5016,42 +5066,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -5075,9 +5089,6 @@
     --tw-translate-x: 0;
     --tw-translate-y: 0;
     --tw-translate-z: 0;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    --tw-scale-z: 1;
     --tw-rotate-x: initial;
     --tw-rotate-y: initial;
     --tw-rotate-z: initial;
@@ -5132,15 +5143,6 @@
     --tw-drop-shadow-color: initial;
     --tw-drop-shadow-alpha: 100%;
     --tw-drop-shadow-size: initial;
-    --tw-backdrop-blur: initial;
-    --tw-backdrop-brightness: initial;
-    --tw-backdrop-contrast: initial;
-    --tw-backdrop-grayscale: initial;
-    --tw-backdrop-hue-rotate: initial;
-    --tw-backdrop-invert: initial;
-    --tw-backdrop-opacity: initial;
-    --tw-backdrop-saturate: initial;
-    --tw-backdrop-sepia: initial;
     --tw-duration: initial;
     --tw-ease: initial;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -57,7 +57,6 @@
     "lucide-react": "^0.510.0",
     "marked": "^16.1.2",
     "mermaid": "^11.16.1",
-    "svg-pan-zoom": "^3.6.2",
     "zod": "^4.6.6"
   },
   "devDependencies": {