@likec4/diagram 1.7.3 → 1.7.4

package/dist/index.mjs

@@ -55,7 +55,7 @@ const useXYStoreApi = useStoreApi, ZIndexes = {
   Compound: 2,
   Edge: 4,
   Element: 6
-}, MinZoom = 0.1;
+}, MinZoom = 0.1, MaxZoom = 2;
 function toDomPrecision(v) {
   return v === null ? 0.01 : Math.round(v * 100) / 100;
 }
@@ -2016,10 +2016,13 @@ function useXYFlowEvents() {
       onDoubleClick: (event) => {
         const {
           onCanvasDblClick,
+          zoomable,
           xystore,
+          viewportChanged,
+          fitDiagram,
           resetLastClicked
         } = diagramApi.getState();
-        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), onCanvasDblClick == null || onCanvasDblClick(event);
+        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), zoomable && viewportChanged && fitDiagram(), onCanvasDblClick == null || onCanvasDblClick(event);
       },
       onPaneClick: (event) => {
         if (dbclickLock())
@@ -2233,11 +2236,11 @@ function XYFlow({
     hasOnEdgeContextMenu,
     translateX,
     translateY
-  } = useDiagramState(selector$1, shallowEqual), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+  } = useDiagramState(selector$1, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x, y, zoom }) => {
       const roundedX = Math.round(x), roundedY = Math.round(y);
-      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
+      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] }), setZoomOnDoubleClick(zoomable && zoom < 1.1);
     }
   }), /* @__PURE__ */ jsx(
     ReactFlow,
@@ -2254,7 +2257,7 @@ function XYFlow({
       ...!zoomable && {
         zoomActivationKeyCode: null
       },
-      maxZoom: zoomable ? 1.9 : 1,
+      maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
       fitViewOptions: useMemo(() => ({
@@ -2289,7 +2292,7 @@ function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       },
       nodeDragThreshold: 3,
-      zoomOnDoubleClick: zoomable,
+      zoomOnDoubleClick,
       elevateNodesOnSelect: !1,
       selectNodesOnDrag: !1,
       onNodesChange,
@@ -2350,62 +2353,75 @@ function DiagramTitlePanel() {
           radius: "sm",
           className: card,
           withBorder: !0,
-          p: "md",
-          pb: isCollapsed ? "sm" : "md",
+          p: isCollapsed ? "sm" : "md",
           onDoubleClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx(CardSection, { mb: isCollapsed ? 10 : "sm", children: /* @__PURE__ */ jsx(
+            isCollapsed && /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(
               Button,
               {
                 fullWidth: !0,
-                size: "xs",
-                h: "sm",
+                justify: "stretch",
+                size: "sm",
                 py: 2,
                 radius: "0",
-                variant: isCollapsed ? "light" : "subtle",
-                color: "gray",
+                variant: "subtle",
+                color: "dark",
                 onClick: toggle,
-                children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
+                children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fw: 500, fz: "xs", c: "gray", children: title$12 })
               }
             ) }),
-            /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: isCollapsed ? 0 : "sm", children: [
-              /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  flex: "1",
-                  size: isCollapsed ? "sm" : "lg",
-                  fw: 500,
-                  lh: 1.1,
-                  className: title,
-                  children: title$12
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Text$1,
+            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CardSection, { mb: "sm", children: /* @__PURE__ */ jsx(
+                Button,
                 {
-                  hidden: isCollapsed,
-                  component: "div",
-                  flex: "0 0 auto",
-                  inline: !0,
+                  fullWidth: !0,
                   size: "xs",
-                  fz: 9,
-                  fw: 500,
-                  c: "dimmed",
-                  style: {
-                    userSelect: "all"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                      "id:",
-                      " "
-                    ] }),
-                    id
-                  ]
+                  h: "sm",
+                  py: 2,
+                  radius: "0",
+                  variant: "subtle",
+                  color: "gray",
+                  onClick: toggle,
+                  children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
                 }
-              )
-            ] }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              ) }),
+              /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
+                /* @__PURE__ */ jsx(
+                  Text$1,
+                  {
+                    component: "div",
+                    flex: "1",
+                    size: "md",
+                    fw: 500,
+                    lh: 1.1,
+                    className: title,
+                    children: title$12
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Text$1,
+                  {
+                    hidden: isCollapsed,
+                    component: "div",
+                    flex: "0 0 auto",
+                    inline: !0,
+                    size: "xs",
+                    fz: 9,
+                    fw: 500,
+                    c: "dimmed",
+                    style: {
+                      userSelect: "all"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
+                        "id:",
+                        " "
+                      ] }),
+                      id
+                    ]
+                  }
+                )
+              ] }),
               description$12 && /* @__PURE__ */ jsx(
                 Spoiler,
                 {

package/dist/style.css

@@ -1992,13 +1992,13 @@ drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
 }
 @media (min-width: 48em) {
   .hbkbtj1 {
-    min-width: 300px;
+    min-width: 250px;
     max-width: 90vw;
   }
 }
 @media (min-width: 62em) {
   .hbkbtj1 {
-    min-width: 400px;
+    min-width: 350px;
     max-width: 70vw;
   }
 }._2jkb2y0 {

package/dist/xyflow/const.d.ts

@@ -4,3 +4,4 @@ export declare const ZIndexes: {
     readonly Element: 6;
 };
 export declare const MinZoom = 0.1;
+export declare const MaxZoom = 2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -66,15 +66,15 @@
     "zustand": "^4.5.4"
   },
   "peerDependencies": {
-    "@likec4/core": "1.7.3",
+    "@likec4/core": "1.7.4",
     "@mantine/core": "^7.11.2",
     "@mantine/hooks": "^7.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/core": "1.7.3",
-    "@likec4/tsconfig": "1.7.3",
+    "@likec4/core": "1.7.4",
+    "@likec4/tsconfig": "1.7.4",
     "@mantine/core": "7.11.2",
     "@mantine/hooks": "7.11.2",
     "@mantine/vanilla-extract": "7.11.2",

package/src/ui/DiagramTitlePanel.css.ts

@@ -18,11 +18,11 @@ export const card = style({
   backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   '@media': {
     [mantine.largerThan('sm')]: {
-      minWidth: 300,
+      minWidth: 250,
       maxWidth: '90vw'
     },
     [mantine.largerThan('md')]: {
-      minWidth: 400,
+      minWidth: 350,
       maxWidth: '70vw'
     }
   },

package/src/ui/DiagramTitlePanel.tsx

@@ -40,52 +40,70 @@ export default function DiagramTitlePanel() {
           radius="sm"
           className={css.card}
           withBorder
-          p={'md'}
-          pb={isCollapsed ? 'sm' : 'md'}
+          p={isCollapsed ? 'sm' : 'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <CardSection mb={isCollapsed ? 10 : 'sm'}>
-            <Button
-              fullWidth
-              size="xs"
-              h={'sm'}
-              py={2}
-              radius={'0'}
-              variant={isCollapsed ? 'light' : 'subtle'}
-              color="gray"
-              onClick={toggle}
-            >
-              <IconMenu size={11} opacity={0.7} />
-            </Button>
-          </CardSection>
-          <Group justify="stretch" wrap="nowrap" mb={isCollapsed ? 0 : 'sm'}>
-            <Text
-              component={'div'}
-              flex={'1'}
-              size={isCollapsed ? 'sm' : 'lg'}
-              fw={500}
-              lh={1.1}
-              className={css.title}
-            >
-              {title}
-            </Text>
-            <Text
-              hidden={isCollapsed}
-              component={'div'}
-              flex={'0 0 auto'}
-              inline
-              size="xs"
-              fz={9}
-              fw={500}
-              c={'dimmed'}
-              style={{
-                userSelect: 'all'
-              }}>
-              <span style={{ userSelect: 'none' }}>id:{' '}</span>
-              {id}
-            </Text>
-          </Group>
+          {isCollapsed && (
+            <CardSection>
+              <Button
+                fullWidth
+                justify="stretch"
+                size="sm"
+                py={2}
+                radius={'0'}
+                variant={'subtle'}
+                color="dark"
+                onClick={toggle}
+              >
+                <Text inline fw={500} fz={'xs'} c="gray">
+                  {title}
+                </Text>
+              </Button>
+            </CardSection>
+          )}
           {!isCollapsed && (
             <>
+              <CardSection mb={'sm'}>
+                <Button
+                  fullWidth
+                  size="xs"
+                  h={'sm'}
+                  py={2}
+                  radius={'0'}
+                  variant={'subtle'}
+                  color="gray"
+                  onClick={toggle}
+                >
+                  <IconMenu size={11} opacity={0.7} />
+                </Button>
+              </CardSection>
+
+              <Group justify="stretch" wrap="nowrap" mb={'sm'}>
+                <Text
+                  component={'div'}
+                  flex={'1'}
+                  size={'md'}
+                  fw={500}
+                  lh={1.1}
+                  className={css.title}
+                >
+                  {title}
+                </Text>
+                <Text
+                  hidden={isCollapsed}
+                  component={'div'}
+                  flex={'0 0 auto'}
+                  inline
+                  size="xs"
+                  fz={9}
+                  fw={500}
+                  c={'dimmed'}
+                  style={{
+                    userSelect: 'all'
+                  }}>
+                  <span style={{ userSelect: 'none' }}>id:{' '}</span>
+                  {id}
+                </Text>
+              </Group>
               {description && (
                 <Spoiler
                   maxHeight={42}

package/src/xyflow/XYFlow.tsx

@@ -1,10 +1,10 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useMemo } from 'react'
+import { type CSSProperties, type PropsWithChildren, useMemo, useState } from 'react'
 import { useDiagramState } from '../hooks/useDiagramState'
 import { useXYStoreApi } from '../hooks/useXYFlow'
 import type { DiagramState } from '../state/diagramStore'
-import { MinZoom } from './const'
+import { MaxZoom, MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
@@ -87,6 +87,7 @@ export function XYFlow({
     translateX,
     translateY
   } = useDiagramState(selector, shallowEqual)
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
 
   // useLogger('XYFlow',[
   //   nodes,
@@ -110,6 +111,7 @@ export function XYFlow({
       if (x !== roundedX || y !== roundedY) {
         xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
+      setZoomOnDoubleClick(zoomable && zoom < 1.1)
     }
   })
 
@@ -127,7 +129,7 @@ export function XYFlow({
       {...(!zoomable && {
         zoomActivationKeyCode: null
       })}
-      maxZoom={zoomable ? 1.9 : 1}
+      maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
       fitViewOptions={useMemo(() => ({
@@ -162,7 +164,7 @@ export function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
       nodeDragThreshold={3}
-      zoomOnDoubleClick={zoomable}
+      zoomOnDoubleClick={zoomOnDoubleClick}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}

package/src/xyflow/XYFlowEvents.tsx

@@ -58,7 +58,10 @@ export function useXYFlowEvents() {
       onDoubleClick: (event) => {
         const {
           onCanvasDblClick,
+          zoomable,
           xystore,
+          viewportChanged,
+          fitDiagram,
           resetLastClicked
         } = diagramApi.getState()
         resetLastClicked()
@@ -66,6 +69,9 @@ export function useXYFlowEvents() {
         if (!onCanvasDblClick) {
           event.stopPropagation()
         }
+        if (zoomable && viewportChanged) {
+          fitDiagram()
+        }
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {

package/src/xyflow/const.ts

@@ -5,3 +5,4 @@ export const ZIndexes = {
 } as const
 
 export const MinZoom = 0.1
+export const MaxZoom = 2