@likec4/diagram 1.19.1 → 1.20.0

package/dist/xyflow/useXYFlowEvents.js

@@ -1,275 +0,0 @@
-import { DiagramNode } from "@likec4/core";
-import { useRef, useMemo } from "react";
-import { isTruthy, isNonNullish, first } from "remeda";
-import { useDiagramStoreApi } from "../hooks/useDiagramState.js";
-function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi();
-  const lastClickTimestamp = useRef();
-  const dblclickTimeout = useRef();
-  return useMemo(() => {
-    const dbclickLock = () => {
-      if (dblclickTimeout.current !== void 0) {
-        return true;
-      }
-      dblclickTimeout.current = window.setTimeout(() => {
-        dblclickTimeout.current = void 0;
-      }, 300);
-      return false;
-    };
-    const lastClickWasRecent = (ms = 2e3) => {
-      const prevTimestamp = lastClickTimestamp.current ?? 0;
-      const now = lastClickTimestamp.current = Date.now();
-      return prevTimestamp + ms > now;
-    };
-    return {
-      onDoubleClick: (event) => {
-        const {
-          onCanvasDblClick,
-          zoomable,
-          viewportChanged,
-          fitDiagram,
-          resetFocusAndLastClicked
-        } = diagramApi.getState();
-        resetFocusAndLastClicked();
-        if (zoomable && viewportChanged) {
-          fitDiagram();
-        }
-        if (!onCanvasDblClick) {
-          event.stopPropagation();
-        }
-        onCanvasDblClick == null ? void 0 : onCanvasDblClick(event);
-      },
-      onPaneClick: (event) => {
-        if (dbclickLock()) {
-          return;
-        }
-        const {
-          focusedNodeId,
-          activeWalkthrough,
-          fitDiagram,
-          onCanvasClick,
-          resetFocusAndLastClicked
-        } = diagramApi.getState();
-        if ((focusedNodeId ?? activeWalkthrough) !== null) {
-          fitDiagram();
-          if (!onCanvasClick) {
-            event.stopPropagation();
-          }
-        }
-        resetFocusAndLastClicked();
-        onCanvasClick == null ? void 0 : onCanvasClick(event);
-      },
-      onNodeContextMenu: (event, xynode) => {
-        var _a, _b;
-        diagramApi.getState().setLastClickedNode(xynode.id);
-        (_b = (_a = diagramApi.getState()).onNodeContextMenu) == null ? void 0 : _b.call(
-          _a,
-          xynode.data.element,
-          event
-        );
-      },
-      onPaneContextMenu: (event) => {
-        var _a, _b;
-        diagramApi.getState().resetFocusAndLastClicked();
-        (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null ? void 0 : _b.call(_a, event);
-      },
-      onEdgeContextMenu: (event, xyedge) => {
-        var _a, _b;
-        diagramApi.getState().setLastClickedEdge(xyedge.id);
-        (_b = (_a = diagramApi.getState()).onEdgeContextMenu) == null ? void 0 : _b.call(
-          _a,
-          xyedge.data.edge,
-          event
-        );
-      },
-      onNodeClick: (event, xynode) => {
-        const {
-          focusedNodeId,
-          fitDiagram,
-          focusOnNode,
-          onNodeClick,
-          xystore,
-          enableFocusMode,
-          lastClickedNodeId,
-          nodesSelectable,
-          enableElementDetails,
-          setLastClickedNode,
-          onOpenSource,
-          openOverlay
-        } = diagramApi.getState();
-        const modelRef = DiagramNode.modelRef(xynode.data.element);
-        const deploymentRef = DiagramNode.deploymentRef(xynode.data.element);
-        setLastClickedNode(xynode.id);
-        const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id;
-        const clickedRecently = lastClickWasRecent() && lastClickedNodeId === xynode.id;
-        let stopPropagation = false;
-        if (clickedRecently && !!onOpenSource && (modelRef || deploymentRef)) {
-          if (modelRef) {
-            onOpenSource({
-              element: modelRef
-            });
-          } else if (deploymentRef) {
-            onOpenSource({
-              deployment: deploymentRef
-            });
-          }
-          stopPropagation = true;
-        }
-        if (enableFocusMode) {
-          switch (true) {
-            case (shallChangeFocus || clickedRecently && !focusedNodeId): {
-              focusOnNode(xynode.id);
-              stopPropagation = true;
-              break;
-            }
-            case (clickedRecently && focusedNodeId === xynode.id): {
-              focusOnNode(false);
-              fitDiagram();
-              stopPropagation = true;
-              break;
-            }
-            case (!clickedRecently && modelRef && focusedNodeId === xynode.id && enableElementDetails): {
-              openOverlay({
-                elementDetails: xynode.data.element.id
-              });
-              stopPropagation = true;
-              break;
-            }
-          }
-        } else if (enableElementDetails && modelRef && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
-          openOverlay({
-            elementDetails: xynode.data.element.id
-          });
-          stopPropagation = true;
-        } else if (nodesSelectable) {
-          xystore.getState().addSelectedNodes([xynode.id]);
-          stopPropagation = true;
-        }
-        if (!onNodeClick && stopPropagation) {
-          event.stopPropagation();
-          return;
-        }
-        onNodeClick == null ? void 0 : onNodeClick(
-          xynode.data.element,
-          event
-        );
-      },
-      onNodeDoubleClick: (event, xynode) => {
-        const {
-          setLastClickedNode
-        } = diagramApi.getState();
-        setLastClickedNode(xynode.id);
-        lastClickWasRecent();
-        event.stopPropagation();
-      },
-      onEdgeClick: (event, xyedge) => {
-        const {
-          lastClickedEdgeId,
-          isDynamicView,
-          enableDynamicViewWalkthrough,
-          activateWalkthrough,
-          activeWalkthrough,
-          focusedNodeId,
-          xystore,
-          nodesSelectable,
-          onOpenSource,
-          focusOnNode,
-          onEdgeClick,
-          setLastClickedEdge
-        } = diagramApi.getState();
-        if (lastClickedEdgeId !== xyedge.id) {
-          setLastClickedEdge(xyedge.id);
-        }
-        const isNotAFirstClick = lastClickedEdgeId === xyedge.id;
-        const connectedToFocusedNode = isTruthy(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
-        if (isDynamicView && enableDynamicViewWalkthrough && (connectedToFocusedNode || isNotAFirstClick || isNonNullish(activeWalkthrough))) {
-          const nextStep = xyedge.data.edge.id;
-          if ((activeWalkthrough == null ? void 0 : activeWalkthrough.stepId) !== nextStep) {
-            activateWalkthrough(nextStep);
-            event.stopPropagation();
-            return;
-          }
-        }
-        if (isTruthy(focusedNodeId)) {
-          if (connectedToFocusedNode) {
-            focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source);
-          } else {
-            focusOnNode(xyedge.source);
-          }
-          if (!onEdgeClick) {
-            event.stopPropagation();
-            return;
-          }
-        } else if (onOpenSource && !onEdgeClick) {
-          onOpenSource({
-            relation: first(xyedge.data.edge.relations)
-          });
-          event.stopPropagation();
-          return;
-        } else if (nodesSelectable) {
-          xystore.getState().addSelectedEdges([xyedge.id]);
-          if (!onEdgeClick) {
-            event.stopPropagation();
-            return;
-          }
-        }
-        onEdgeClick == null ? void 0 : onEdgeClick(
-          xyedge.data.edge,
-          event
-        );
-      },
-      onEdgeDoubleClick: (event, xyedge) => {
-        diagramApi.getState().setLastClickedEdge(xyedge.id);
-        const {
-          enableFocusMode,
-          isDynamicView,
-          enableDynamicViewWalkthrough,
-          focusOnNode,
-          activeWalkthrough,
-          activateWalkthrough,
-          openOverlay,
-          enableRelationshipDetails
-        } = diagramApi.getState();
-        if (isDynamicView && enableDynamicViewWalkthrough) {
-          const nextStep = xyedge.data.edge.id;
-          if ((activeWalkthrough == null ? void 0 : activeWalkthrough.stepId) !== nextStep) {
-            activateWalkthrough(nextStep);
-            event.stopPropagation();
-          }
-          return;
-        }
-        if (enableRelationshipDetails) {
-          openOverlay({
-            edgeDetails: xyedge.data.edge.id
-          });
-          event.stopPropagation();
-          return;
-        }
-        if (enableFocusMode) {
-          focusOnNode(xyedge.source);
-          event.stopPropagation();
-          return;
-        }
-      },
-      onMoveEnd: (event, _viewport) => {
-        const viewportChanged = !!event;
-        if (viewportChanged !== diagramApi.getState().viewportChanged) {
-          diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`);
-        }
-      },
-      onEdgeMouseEnter: (_event, { id }) => {
-        const { setHoveredEdge } = diagramApi.getState();
-        setHoveredEdge(id);
-      },
-      onEdgeMouseLeave: (_event, xyedge) => {
-        const { hoveredEdgeId, setHoveredEdge } = diagramApi.getState();
-        if (hoveredEdgeId === xyedge.id) {
-          setHoveredEdge(null);
-        }
-      }
-    };
-  }, [diagramApi]);
-}
-export {
-  useXYFlowEvents
-};

package/src/controls/Text.ts

@@ -1,5 +0,0 @@
-import { Text as MantineText } from '@mantine/core'
-
-export const Text = MantineText.withProps({
-  component: 'div'
-})

package/src/controls/action-button-bar/ActionButtonBar.css.ts

@@ -1,13 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const container = style({
-  zIndex: 100,
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
-  gap: 2,
-  justifyContent: 'center',
-  pointerEvents: 'none',
-})

package/src/controls/action-button-bar/ActionButtonBar.tsx

@@ -1,138 +0,0 @@
-import { Box } from '@mantine/core'
-import { useId } from '@mantine/hooks'
-import clsx from 'clsx'
-import { type Variants } from 'framer-motion'
-import type { PropsWithChildren } from 'react'
-import * as css from './ActionButtonBar.css'
-import { ActionButtonBarContext } from './useActionButtonBarCtx'
-
-const TRANSLATE_DIFF = 5
-
-type ShiftX = 'left' | 'spread' | 'right'
-type ShiftY = 'top' | 'spread' | 'bottom'
-type ShiftMode = number | 'spread'
-
-type ActionButtonBarProps = PropsWithChildren<{
-  shiftX?: ShiftX
-  shiftY?: ShiftY
-}>
-
-const elementVariants = (prefix: string, index: number, count: number, shiftX: ShiftMode, shiftY: ShiftMode) => {
-  const name = `${prefix}${index + 1}`
-  const translation = count > 1
-    ? {
-      x: shiftX === 'spread' ? 1 - count + index * 2 : shiftX,
-      y: shiftY === 'spread' ? 1 - count + index * 2 : shiftY,
-    }
-    : {
-      x: 0,
-      y: 1,
-    }
-
-  const variants = {
-    idle: {
-      '--icon-scale': 'scale(1)',
-      '--ai-bg': 'var(--ai-bg-idle)',
-      scale: 1,
-      opacity: 0.8,
-      translateX: 0,
-      translateY: 0,
-      originX: 0.5,
-      originY: 0.5,
-      // translateY: 0,
-      // ...align === 'left' && {
-      //   originX: 0.75,
-      //   translateX: -1
-      // },
-      // ...align === 'right' && {
-      //   originX: 0.25,
-      //   translateX: 1
-      // }
-    },
-    hovered: {
-      '--ai-bg': 'var(--ai-bg-hover)',
-      '--icon-scale': 'scale(1)',
-      // translateY: 3,
-      scale: 1.28,
-      opacity: 1,
-      translateX: translation.x * TRANSLATE_DIFF,
-      translateY: translation.y * TRANSLATE_DIFF,
-      // ...align === 'left' && {
-      //   translateX: -4
-      // },
-      // ...align === 'right' && {
-      //   translateX: 4
-      // }
-    },
-    [`hovered:${name}`]: {
-      '--ai-bg': 'var(--ai-hover)',
-      '--icon-scale': 'scale(1.08)',
-      scale: 1.45,
-    },
-    [`tap:${name}`]: {
-      '--icon-scale': 'scale(1)',
-      scale: 1.15,
-    },
-    selected: {},
-  } satisfies Variants
-  variants['selected'] = variants['hovered']
-  variants['hovered:details'] = variants['idle']
-  return {
-    variants,
-    ['data-animate-target']: name,
-  }
-}
-
-export const ActionButtonBar = ({
-  shiftX = 'spread',
-  shiftY = 'spread',
-  children,
-}: ActionButtonBarProps) => {
-  const id = useId()
-  const childrenArray = Array.isArray(children) ? children : [children]
-
-  // determine offsets for shifting
-  let shiftDiffX: ShiftMode = 'spread'
-  if (shiftX == 'left') {
-    shiftDiffX = -1
-  }
-  else if (shiftX == 'right') {
-    shiftDiffX = 1
-  }
-
-  let shiftDiffY: ShiftMode = 'spread'
-  if (shiftY == 'top') {
-    shiftDiffY = -1
-  }
-  else if (shiftY == 'bottom') {
-    shiftDiffY = 1
-  }
-
-  return (
-    <Box className={clsx(css.container)}>
-      {childrenArray.map((child, i, all) => (
-        <ActionButtonBarContext.Provider
-          value={elementVariants(id, i, all.length, shiftDiffX, shiftDiffY)}>
-          {child}
-        </ActionButtonBarContext.Provider>
-        // <>{cloneElement(child, {
-        //   key: i,
-        //   variants: elementVariants(i, all.length, shiftDiffX, shiftDiffY),
-        //   ['data-animate-target']: `i${i + 1}`,
-        //   ...props
-        // })}</>
-      ))}
-      {
-        /* {childrenArray.filter(child => !!child).map((child, i) => (
-        <m.div
-          key={i}
-          variants={elementVariants(i, childrenArray.length, shiftDiffX, shiftDiffY)}
-          {...props}
-          >
-          {child}
-        </m.div>
-      ))} */
-      }
-    </Box>
-  )
-}

package/src/controls/action-button-bar/useActionButtonBarCtx.ts

@@ -1,13 +0,0 @@
-import type { Variants } from 'framer-motion'
-import { createContext, useContext } from 'react'
-
-export const ActionButtonBarContext = createContext<
-  {
-    variants: Variants
-    ['data-animate-target']?: string
-  } | null
->(null)
-
-export function useActionButtonBarCtx() {
-  return useContext(ActionButtonBarContext)
-}

package/src/controls/action-buttons/ActionButton.css.ts

@@ -1,29 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { mantine, vars, whereLight } from '../../theme-vars'
-
-export const btn = style({
-  pointerEvents: 'all',
-  color: vars.element.loContrast,
-  cursor: 'pointer',
-  backgroundColor: 'var(--ai-bg)',
-  'vars': {
-    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-    '--ai-bg': `var(--ai-bg-idle)`,
-    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
-    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
-  },
-  ':hover': {
-    boxShadow: mantine.shadows.md,
-  },
-  selectors: {
-    [`${whereLight} .likec4-compound-transparent &`]: {
-      color: vars.element.stroke,
-      opacity: 0.85,
-      vars: {
-        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
-        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-      },
-    },
-  },
-})

package/src/controls/action-buttons/ActionButton.tsx

@@ -1,66 +0,0 @@
-import { type ActionIconProps, ActionIcon, Tooltip } from '@mantine/core'
-import clsx from 'clsx'
-import { type HTMLMotionProps, type Variants, m } from 'framer-motion'
-import type { PropsWithoutRef } from 'react'
-import { stopPropagation } from '../../xyflow/utils'
-import { useActionButtonBarCtx } from '../action-button-bar/useActionButtonBarCtx'
-import * as css from './ActionButton.css'
-
-export type ActionButtonProps = PropsWithoutRef<
-  Omit<ActionIconProps & HTMLMotionProps<'div'>, 'onClick' | 'children'> & {
-    onClick: (e: React.MouseEvent) => void
-    IconComponent: React.ComponentType<any>
-    tooltipLabel?: string
-  }
->
-
-const variants = {
-  idle: {
-    '--icon-scale': 'scale(1)',
-    '--ai-bg': 'var(--ai-bg-idle)',
-  },
-  hovered: {
-    '--icon-scale': 'scale(1)',
-    '--ai-bg': 'var(--ai-bg-hover)',
-  },
-  selected: {},
-} satisfies Variants
-variants['selected'] = variants['hovered']
-
-export const ActionButton = ({
-  onClick: action,
-  IconComponent,
-  tooltipLabel,
-  ...props
-}: ActionButtonProps) => {
-  const ctx = useActionButtonBarCtx() ?? {
-    variants: variants,
-  }
-  return (
-    <Tooltip
-      fz="xs"
-      color="dark"
-      label={tooltipLabel ?? ''}
-      disabled={!tooltipLabel}
-      withinPortal={false}
-      offset={2}
-      openDelay={600}>
-      <ActionIcon
-        component={m.div}
-        className={clsx('nodrag nopan', css.btn)}
-        radius="md"
-        role="button"
-        onClick={action}
-        onDoubleClick={stopPropagation}
-        {...ctx}
-        {...props}
-      >
-        <IconComponent
-          style={{
-            width: '70%',
-            transform: 'var(--icon-scale)',
-          }} />
-      </ActionIcon>
-    </Tooltip>
-  )
-}

package/src/controls/action-buttons/ActionButtons.tsx

@@ -1,138 +0,0 @@
-import type { Fqn } from '@likec4/core'
-import { IconFileSymlink, IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { useCallback } from 'react'
-import { useDiagramState, useDiagramStoreApi } from '../../hooks'
-import { type ActionButtonProps, ActionButton } from './ActionButton'
-
-export type NodeActionButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
-  fqn: Fqn
-}
-
-// Browse Relationships
-
-export const BrowseRelationshipsButton = ({
-  fqn,
-  ...props
-}: NodeActionButtonProps) => {
-  const {
-    openOverlay,
-  } = useDiagramState(s => ({
-    openOverlay: s.openOverlay,
-  }))
-
-  const onBrowseRelationships = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ relationshipsOf: fqn })
-  }, [openOverlay, fqn])
-
-  return (
-    <ActionButton
-      {...props}
-      onClick={onBrowseRelationships}
-      IconComponent={IconTransform}
-      tooltipLabel="Browse relationships"
-    />
-  )
-}
-
-// Navigate to
-// It triggers the onNavigateTo event from the xynode (node should have a navigateTo property)
-export type NavigateToButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
-  xynodeId: string
-}
-export const NavigateToButton = ({
-  xynodeId,
-  ...props
-}: NavigateToButtonProps) => {
-  const store = useDiagramStoreApi()
-
-  const onNavigateTo = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    store.getState().triggerOnNavigateTo(xynodeId, e)
-  }, [store, xynodeId])
-
-  return (
-    <ActionButton
-      {...props}
-      onClick={onNavigateTo}
-      IconComponent={IconZoomScan}
-      tooltipLabel="Open scoped view"
-    />
-  )
-}
-
-// Open details
-const VariantsDetailsBtn = {
-  idle: {
-    '--ai-bg': 'var(--ai-bg-idle)',
-    scale: 1,
-    opacity: 0.5,
-    originX: 0.45,
-    originY: 0.55,
-  },
-  selected: {},
-  hovered: {
-    scale: 1.2,
-    opacity: 0.7,
-  },
-  'hovered:details': {
-    scale: 1.44,
-    opacity: 1,
-  },
-  'tap:details': {
-    scale: 1.15,
-  },
-}
-VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
-
-export const OpenDetailsButton = ({
-  fqn,
-  ...props
-}: NodeActionButtonProps) => {
-  const {
-    openOverlay,
-  } = useDiagramState(s => ({
-    openOverlay: s.openOverlay,
-  }))
-
-  const onOpenDetails = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    openOverlay({ elementDetails: fqn })
-  }, [openOverlay, fqn])
-
-  return (
-    <ActionButton
-      variants={VariantsDetailsBtn}
-      onClick={onOpenDetails}
-      IconComponent={IconId}
-      tooltipLabel="Open details"
-      data-animate-target="details"
-      {...props}
-    />
-  )
-}
-
-// Open element source
-
-export const OpenSourceButton = ({
-  fqn,
-  ...props
-}: NodeActionButtonProps) => {
-  const diagramApi = useDiagramStoreApi()
-
-  const onOpenSource = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    diagramApi.getState().onOpenSource?.({
-      element: fqn,
-    })
-  }, [diagramApi, fqn])
-
-  return (
-    <ActionButton
-      {...props}
-      onClick={onOpenSource}
-      IconComponent={IconFileSymlink}
-      tooltipLabel="Open source"
-    />
-  )
-}