@likec4/diagram 1.27.1 → 1.27.3

package/dist/LikeC4Diagram.js

@@ -30,7 +30,7 @@ function LikeC4Diagram({
   view,
   className,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = "8px",
   readonly = true,
   pannable = true,
   zoomable = true,

package/dist/LikeC4Diagram.props.d.ts

@@ -27,6 +27,8 @@ export type ChangeEvent = {
 export type OnChange = (event: ChangeEvent) => void;
 export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
+export type PaddingUnit = 'px' | '%';
+export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
 export interface LikeC4DiagramProperties {
     view: DiagramView;
     className?: string | undefined;
@@ -57,10 +59,10 @@ export interface LikeC4DiagramProperties {
      */
     fitView?: boolean | undefined;
     /**
-     * Seems like this is percentage of the view size
-     * @default 0
+     * Padding around the diagram
+     * @default '8px'
      */
-    fitViewPadding?: number | undefined;
+    fitViewPadding?: PaddingWithUnit | undefined;
     /**
      * @default false if readonly
      */

package/dist/StaticLikeC4Diagram.js

@@ -4,7 +4,7 @@ import { LikeC4Diagram } from './LikeC4Diagram.js';
 function StaticLikeC4Diagram({
   view,
   fitView = true,
-  fitViewPadding = 0,
+  fitViewPadding = "8px",
   enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,

package/dist/_virtual/set.js

@@ -0,0 +1,5 @@
+import { __require as requireSet } from '../node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/set.js';
+
+var setExports = /*@__PURE__*/ requireSet();
+
+export { setExports as s };

package/dist/_virtual/set2.js

@@ -0,0 +1,3 @@
+var set = {};
+
+export { set as __exports };

package/dist/base/BaseXYFlow.d.ts

@@ -1,5 +1,6 @@
 import { ReactFlowProps } from '@xyflow/react';
 import { SetRequired, Simplify } from 'type-fest';
+import { PaddingWithUnit } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { Base } from './types';
 export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
@@ -8,7 +9,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean;
     nodesDraggable?: boolean;
     background?: 'transparent' | 'solid' | XYBackground;
-    fitViewPadding?: number;
+    fitViewPadding?: PaddingWithUnit | undefined;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/primitives/compound/CompoundNodeContainer.d.ts

@@ -2,7 +2,7 @@ import { DiagramNode } from '@likec4/core';
 import { HTMLMotionProps } from 'framer-motion';
 import { PropsWithChildren } from 'react';
 import { NodeProps } from '../../types';
-type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'shape' | 'style'>;
+type RequiredData = Pick<DiagramNode, 'color' | 'depth' | 'style'>;
 type CompoundNodeContainerProps = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -54,7 +54,6 @@ function CompoundNodeContainer({
       "data-likec4-hovered": isHovered,
       "data-likec4-color": data.color,
       "data-compound-depth": depth,
-      "data-likec4-shape": data.shape,
       ...isTransparent && {
         "data-compound-transparent": true,
         "data-compound-title-inverse": opacity < 0.5

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -74,9 +74,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: css({
+          style: {
             display: "contents"
-          }),
+          },
+          // Work around to keep same global selector data-likec4-dimmed
           ...isDimmed !== false && {
             "data-likec4-dimmed": isDimmed
           },

package/dist/base/primitives/element/ElementActionButtons.js

@@ -56,22 +56,19 @@ function ElementActionButtons({
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan", actionButtons),
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-        m.div,
+        ActionIcon,
         {
+          component: m.button,
+          layout: true,
+          className: actionBtn({}),
           initial: false,
           whileTap: { scale: 1 },
           whileHover: {
-            scale: 1.35
+            scale: 1.3
           },
-          children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              className: actionBtn({}),
-              onClick: button.onClick,
-              onDoubleClick: stopPropagation,
-              children: button.icon
-            }
-          )
+          onClick: button.onClick,
+          onDoubleClick: stopPropagation,
+          children: button.icon
         },
         `action-button-${id}-${button.key ?? index}`
       ))

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -10,12 +10,12 @@ const container = css({
   alignItems: "center",
   justifyContent: "center",
   pointerEvents: "none",
-  _after: {
+  _before: {
     content: '" "',
     position: "absolute",
-    top: "100%",
+    top: "calc(100% - 4px)",
     left: 0,
-    right: 0,
+    width: "100%",
     height: "24px",
     background: "[transparent]",
     pointerEvents: "all"
@@ -39,7 +39,7 @@ const container = css({
   //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   // },
   _reduceGraphicsOnPan: {
-    _after: {
+    _before: {
       display: "none"
     }
   },

package/dist/base/updateEdges.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined } from 'remeda';
 
 function _update(current, update) {
   return update.map((next) => {
@@ -8,14 +8,6 @@ function _update(current, update) {
       if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data)) {
         return existing;
       }
-      return {
-        ...omit(existing, ["hidden", "zIndex"]),
-        ...next,
-        data: {
-          ...existing.data,
-          ...next.data
-        }
-      };
     }
     return next;
   });

package/dist/base/updateNodes.js

@@ -1,6 +1,6 @@
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { isDefined, omit } from 'remeda';
+import { isDefined } from 'remeda';
 
 function _update(current, updated) {
   return updated.map((update) => {
@@ -10,17 +10,6 @@ function _update(current, updated) {
       if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data)) {
         return existing;
       }
-      return {
-        ...omit(existing, ["measured", "parentId", "hidden", "zIndex"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: {
-          ...existing.data,
-          ...update.data
-        }
-      };
     }
     return update;
   });

package/dist/bundle/LikeC4View.js

@@ -40,7 +40,7 @@ const LikeC4ViewInner = memo(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = 0.1,
+  fitViewPadding = "8px",
   background = "transparent",
   browser = true,
   showDiagramTitle = false,
@@ -147,7 +147,7 @@ const LikeC4ViewInner = memo(({
                 controls: true,
                 readonly: true,
                 fitView: true,
-                fitViewPadding,
+                fitViewPadding: "16px",
                 ...props,
                 ...browserProps,
                 showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.elements.length ?? 0) > 0

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,6 +1,6 @@
 import { WhereOperator } from '@likec4/core';
 import { CSSProperties } from 'react';
-import { ElementIconRenderer, OverrideReactFlowProps } from '../LikeC4Diagram.props';
+import { ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props';
 export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
     /**
      * View to display.
@@ -55,10 +55,10 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
      */
     fitView?: boolean | undefined;
     /**
-     * Seems like this is percentage of the view size
-     * @default 0.1
+     * Padding around the diagram
+     * @default '8px'
      */
-    fitViewPadding?: number | undefined;
+    fitViewPadding?: PaddingWithUnit | undefined;
     /**
      * Display diagram title / description
      *
@@ -135,10 +135,10 @@ export interface LikeC4BrowserProps {
      */
     background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined;
     /**
-     * Seems like this is percentage of the view size
-     * @default 0.1
+     * Padding around the diagram
+     * @default '16px'
      */
-    fitViewPadding?: number | undefined;
+    fitViewPadding?: PaddingWithUnit | undefined;
     /**
      * Show/hide panel with top left controls,
      * @default true

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +1,14 @@
-import { useDiagramActorSnapshot } from './useDiagram.js';
+import { useSelector } from '@xstate/react';
+import '@likec4/core';
+import '@mantine/hooks';
+import 'fast-equals';
+import 'react';
+import { useDiagramActorRef } from './safeContext.js';
 
 const selectViewId = (s) => s.context.view.id;
 function useCurrentViewId() {
-  return useDiagramActorSnapshot(selectViewId);
+  const actorRef = useDiagramActorRef();
+  return useSelector(actorRef, selectViewId);
 }
 
 export { useCurrentViewId };