@likec4/diagram 1.9.0 → 1.12.1

package/src/xyflow/nodes/shared/Toolbar.tsx

@@ -0,0 +1,426 @@
+import {
+  type BorderStyle,
+  defaultTheme,
+  type Element,
+  ElementShapes,
+  type Fqn,
+  type NonEmptyArray,
+  type ThemeColor,
+  type ViewChange
+} from '@likec4/core'
+import {
+  ActionIcon,
+  Box,
+  Button,
+  CheckIcon,
+  ColorSwatch,
+  Divider,
+  Flex,
+  Group,
+  keys,
+  Menu,
+  MenuDropdown,
+  MenuItem,
+  MenuTarget,
+  Paper,
+  Popover,
+  PopoverDropdown,
+  type PopoverProps,
+  PopoverTarget,
+  rem,
+  SegmentedControl,
+  Slider,
+  Space,
+  Stack,
+  Text,
+  Tooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconCheck, IconFileSymlink, IconSelector } from '@tabler/icons-react'
+import { NodeToolbar, type NodeToolbarProps } from '@xyflow/react'
+import clsx from 'clsx'
+import { useEffect, useState } from 'react'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps, useUpdateEffect } from '../../../hooks'
+
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements
+
+const themedColors = [
+  { key: 'primary', value: primary.fill },
+  { key: 'secondary', value: secondary.fill },
+  { key: 'muted', value: muted.fill }
+] satisfies Array<{ key: ThemeColor; value: string }>
+
+const colors = keys(otherColors).map(key => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}))
+
+type ThemeColorKey = typeof themedColors[0]['key']
+type ColorKey = typeof colors[0]['key']
+
+const stopEventPropagation = (e: React.MouseEvent) => e.stopPropagation()
+
+type ToolbarProps = NodeToolbarProps & {
+  element: Element
+  onColorPreview: (color: ThemeColor | null) => void
+}
+
+type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void
+
+export function CompoundToolbar({
+  element,
+  onColorPreview,
+  ...props
+}: ToolbarProps) {
+  const targets = [element.id] as NonEmptyArray<Fqn>
+  const diagramApi = useDiagramStoreApi()
+  const { hasGoToSource } = useDiagramState(s => ({
+    hasGoToSource: !!s.onOpenSourceElement
+  }))
+
+  const onChange: OnStyleChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: 'change-element-style',
+      style,
+      targets
+    })
+  }
+
+  return (
+    <Toolbar element={element} {...props}>
+      <ColorButton
+        element={element}
+        isOpacityEditable
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="left-start"
+      />
+      <BorderStyleOption
+        elementBorderStyle={element.style?.border}
+        onChange={onChange}
+      />
+      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+    </Toolbar>
+  )
+}
+
+function Toolbar({ element, children, ...props }: Omit<ToolbarProps, 'onColorPreview'>) {
+  return (
+    <NodeToolbar {...props}>
+      <Paper
+        className={clsx('nodrag', 'nopan')}
+        px={5}
+        pb={8}
+        pt={4}
+        radius={'sm'}
+        shadow="xl"
+        onDoubleClickCapture={stopEventPropagation}
+        onPointerDown={stopEventPropagation}
+        onClick={stopEventPropagation}
+        onDoubleClick={stopEventPropagation}
+        withBorder>
+        <Stack gap={4}>
+          <Box pl={2}>
+            <Text c="dimmed" fz={10} fw={500}>{element.id}</Text>
+          </Box>
+          <Group gap={3}>
+            {children}
+          </Group>
+        </Stack>
+      </Paper>
+    </NodeToolbar>
+  )
+}
+
+export function ElementToolbar({
+  element,
+  onColorPreview,
+  ...props
+}: ToolbarProps) {
+  const targets = [element.id] as NonEmptyArray<Fqn>
+  const diagramApi = useDiagramStoreApi()
+  const { hasGoToSource } = useDiagramState(s => ({
+    hasGoToSource: !!s.onOpenSourceElement
+  }))
+  const portalProps = useMantinePortalProps()
+
+  const onChange: OnStyleChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: 'change-element-style',
+      style,
+      targets
+    })
+  }
+
+  return (
+    <Toolbar element={element} {...props}>
+      <Menu
+        openDelay={300}
+        closeDelay={450}
+        floatingStrategy={'fixed'}
+        closeOnClickOutside
+        clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+        closeOnEscape
+        closeOnItemClick={false}
+        position="bottom-start"
+        offset={2}
+        styles={{
+          item: {
+            padding: 'calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)'
+          }
+        }}
+        {...portalProps}
+      >
+        <MenuTarget>
+          <Button
+            variant="light"
+            color="gray"
+            size="compact-xs"
+            rightSection={<IconSelector size={12} />}
+          >
+            {element.shape}
+          </Button>
+        </MenuTarget>
+        <MenuDropdown
+          // className={css.menuDropdown}
+          // onPointerDownCapture={stopEventPropagation}
+          // onPointerDown={stopEventPropagation}
+          onDoubleClick={stopEventPropagation}
+          onClick={stopEventPropagation}
+        >
+          {ElementShapes.map(shape => (
+            <MenuItem
+              fz={12}
+              fw={500}
+              key={shape}
+              value={shape}
+              rightSection={element.shape === shape ? <IconCheck size={12} /> : undefined}
+              onClick={e => {
+                e.stopPropagation()
+                onChange({ shape })
+              }}
+            >
+              {shape}
+            </MenuItem>
+          ))}
+        </MenuDropdown>
+      </Menu>
+      <ColorButton
+        element={element}
+        onColorPreview={onColorPreview}
+        onChange={onChange}
+        position="right-end"
+      />
+      {hasGoToSource && <GoToSourceButton elementId={element.id} />}
+    </Toolbar>
+  )
+}
+
+type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
+  element: Element
+  isOpacityEditable?: boolean
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: OnStyleChange
+}
+
+function GoToSourceButton({ elementId }: { elementId: Fqn }) {
+  const diagramApi = useDiagramStoreApi()
+  return (
+    <ActionIcon
+      size={'sm'}
+      variant="subtle"
+      color="gray"
+      onClick={e => {
+        e.stopPropagation()
+        diagramApi.getState().onOpenSourceElement?.(elementId)
+      }}>
+      <IconFileSymlink size={'70%'} stroke={1.8} />
+    </ActionIcon>
+  )
+}
+
+function ColorButton({
+  element,
+  onColorPreview,
+  isOpacityEditable = false,
+  onChange,
+  ...props
+}: ColorButtonProps) {
+  const elementColor: ThemeColor = (element.color as ThemeColor) ?? 'primary'
+  return (
+    <Popover
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      position="right-end"
+      offset={2}
+      {...props}
+    >
+      <PopoverTarget>
+        <Button variant="subtle" color="gray" size="compact-xs" px={3}>
+          <ColorSwatch
+            color={defaultTheme.elements[elementColor]?.fill}
+            size={14}
+            withShadow
+            style={{ color: '#fff', cursor: 'pointer' }}
+          />
+        </Button>
+      </PopoverTarget>
+      <PopoverDropdown p={'xs'}>
+        <ColorSwatches
+          elementColor={elementColor}
+          onColorPreview={onColorPreview}
+          onChange={(color) => onChange({ color })}
+        />
+        {isOpacityEditable && (
+          <>
+            <Space h={'xs'} />
+            <Divider label="opacity" labelPosition="left" />
+            <Space h={'xs'} />
+            <OpacityOption
+              elementOpacity={element.style?.opacity}
+              onOpacityChange={(opacity) => {
+                onChange({ opacity })
+              }} />
+          </>
+        )}
+      </PopoverDropdown>
+    </Popover>
+  )
+}
+
+function ColorSwatches({
+  elementColor,
+  onColorPreview,
+  onChange
+}: {
+  elementColor: ThemeColor
+  onColorPreview: (color: ThemeColor | null) => void
+  onChange: (color: ThemeColor) => void
+}) {
+  const changeColor = (color: ColorKey | ThemeColorKey) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onColorPreview(null)
+    if (elementColor === color) {
+      return
+    }
+    onChange(color)
+  }
+  return (
+    <Stack gap={2} onMouseLeave={() => onColorPreview(null)}>
+      <TooltipGroup openDelay={1000} closeDelay={300}>
+        <Flex maw={120} gap="6" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
+          {themedColors.map(({ key, value }) => (
+            <Tooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                withShadow
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+
+        <Flex
+          mt="sm"
+          maw={110}
+          gap="6"
+          justify="flex-start"
+          align="flex-start"
+          direction="row"
+          wrap="wrap">
+          {colors.map(({ key, value }) => (
+            <Tooltip
+              key={key}
+              label={key}
+              fz={'xs'}
+              color="dark"
+              offset={2}
+              transitionProps={{ duration: 140, transition: 'slide-up' }}>
+              <ColorSwatch
+                color={value}
+                size={18}
+                onMouseEnter={() => onColorPreview(key)}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {elementColor === key && <CheckIcon style={{ width: rem(10), height: rem(10) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+      </TooltipGroup>
+    </Stack>
+  )
+}
+
+function BorderStyleOption({
+  elementBorderStyle = 'dashed',
+  onChange
+}: {
+  elementBorderStyle: BorderStyle | undefined
+  onChange: OnStyleChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle)
+  useEffect(() => {
+    setValue(elementBorderStyle)
+  }, [elementBorderStyle])
+
+  return (
+    <Box>
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        withItemsBorders={false}
+        value={value}
+        onChange={v => {
+          const border = v as BorderStyle
+          setValue(border)
+          onChange({ border })
+        }}
+        data={[
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dashed', value: 'dashed' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'None', value: 'none' }
+        ]}
+      />
+    </Box>
+  )
+}
+
+function OpacityOption({
+  elementOpacity = 100,
+  onOpacityChange
+}: {
+  elementOpacity: number | undefined
+  onOpacityChange: (opacity: number) => void
+}) {
+  const [value, setValue] = useState(elementOpacity)
+  useUpdateEffect(() => {
+    setValue(elementOpacity)
+  }, [elementOpacity])
+
+  return (
+    <Slider
+      size={'sm'}
+      color={'dark'}
+      value={value}
+      onChange={setValue}
+      onChangeEnd={onOpacityChange} />
+  )
+}

package/src/xyflow/types.ts

@@ -1,17 +1,6 @@
 import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPoint } from '@likec4/core'
-import type {
-  Edge,
-  EdgeMouseHandler,
-  InternalNode,
-  Node,
-  NodeMouseHandler,
-  OnMoveEnd,
-  OnMoveStart,
-  ReactFlowInstance,
-  ReactFlowState
-} from '@xyflow/react'
+import type { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
 import { isNode } from '@xyflow/react'
-import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 
@@ -44,7 +33,6 @@ export type RelationshipData = {
   edge: DiagramEdge
   // if set - edge was changed by user
   controlPoints: XYPoint[] | null
-  stepNum: number | null
   label: null | {
     bbox: BBox
     text: string
@@ -69,14 +57,3 @@ export namespace XYFlowEdge {
 
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
 export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
-
-export type XYFlowEventHandlers = {
-  onPanelClick: (event: ReactMouseEvent) => void
-  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
-  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
-  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
-  onNodeClick: NodeMouseHandler<XYFlowNode>
-  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
-  onMoveStart: OnMoveStart
-  onMoveEnd: OnMoveEnd
-}

package/src/xyflow/useLayoutConstraints.ts

@@ -181,12 +181,16 @@ function createLayoutConstraints(
     }
   }
 
+  const draggingNodes = new Set(nodeLookup.values()
+    .filter(x => x.dragging === true || x.id === draggingNodeId || x.selected)
+    .map(x => x.id))
+
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
-    const isDragging = xynode.dragging === true || xynode.id === draggingNodeId
+    const isDragging = draggingNodes.has(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isDragging && xynode.type === 'compound' && isAncestor(xynode.id, draggingNodeId)
+    const shouldTraverse = !isDragging && xynode.type === 'compound' && draggingNodes.values().some(x => isAncestor(xynode.id, x))
 
     const rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging)
     rects.set(xynode.id, rect)
@@ -203,8 +207,7 @@ function createLayoutConstraints(
 
   solver.updateVariables()
   solver.maxIterations = 1000
-
-  const rectsToUpdate = [...rects.values()].filter(r => r.id !== draggingNodeId)
+  const rectsToUpdate = [...rects.values()].filter(r => !draggingNodes.has(r.id))  
 
   function updateXYFlowNodes() {
     solver.updateVariables()
@@ -243,8 +246,8 @@ function createLayoutConstraints(
       animationFrameId = null
       const pos = nodeLookup.get(xynode.id)!.internals.positionAbsolute
       const rect = nonNullable(rects.get(xynode.id))
-      solver.suggestValue(rect.minX, Math.ceil(pos.x))
-      solver.suggestValue(rect.minY, Math.ceil(pos.y))
+      solver.suggestValue(rect.minX, Math.floor(pos.x))
+      solver.suggestValue(rect.minY, Math.floor(pos.y))
       updateXYFlowNodes()
     })
   }
@@ -273,6 +276,7 @@ export function useLayoutConstraints(): LayoutConstraints {
       solverRef.current?.onNodeDrag(xynode)
     },
     onNodeDragStop: (_event, _xynode) => {
+      solverRef.current?.updateXYFlowNodes()
       diagramApi.getState().scheduleSaveManualLayout()
       solverRef.current = undefined
     }

package/dist/LikeC4CustomColors.d.ts

@@ -1,3 +0,0 @@
-import { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props';
-
-export declare function LikeC4CustomColors({ customColors }: LikeC4CustomColorsProperties): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4CustomColors.props.d.ts

@@ -1,5 +0,0 @@
-import { CustomColorDefinitions } from '@likec4/core';
-
-export interface LikeC4CustomColorsProperties {
-    customColors: CustomColorDefinitions;
-}

package/dist/LikeC4Diagram.css.d.ts

@@ -1,4 +0,0 @@
-export declare const cssReactFlow: string;
-export declare const cssDisablePan: string;
-export declare const cssTransparentBg: string;
-export declare const cssNoControls: string;

package/dist/LikeC4Diagram.d.ts

@@ -1,7 +0,0 @@
-import { LikeC4DiagramEventHandlers, LikeC4DiagramProperties } from './LikeC4Diagram.props';
-
-export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers;
-export declare function LikeC4Diagram({ view, className, fitView, fitViewPadding, readonly, pannable, zoomable, nodesSelectable, nodesDraggable, background, controls, showElementLinks, showDiagramTitle, showNotations, enableDynamicViewWalkthrough, enableFocusMode, initialWidth, initialHeight, keepAspectRatio, experimentalEdgeEditing, onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSourceElement, onOpenSourceView, onOpenSourceRelation, onBurgerMenuClick, renderIcon, where, showNavigationButtons }: LikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace LikeC4Diagram {
-    var displayName: string;
-}

package/dist/LikeC4Diagram.props.d.ts

@@ -1,154 +0,0 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationID, ViewChange, ViewID, WhereOperator } from '@likec4/core';
-import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { XYFlowEdge, XYFlowNode } from './xyflow/types';
-import { XYBackground } from './xyflow/XYFlowBackground';
-
-export type { WhereOperator };
-export type DiagramNodeWithNavigate = Omit<DiagramNode, 'navigateTo'> & {
-    navigateTo: ViewID;
-};
-type ElementIconNodeProps = {
-    id: string;
-    title: string;
-    icon?: string | undefined;
-};
-export type ElementIconRenderer = (props: {
-    node: ElementIconNodeProps;
-}) => ReactNode;
-export type OnNavigateTo = {
-    (to: ViewID, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate, xynode?: XYFlowNode): void;
-};
-export type OnNodeClick = (event: {
-    element: DiagramNode;
-    xynode: XYFlowNode;
-    event: ReactMouseEvent;
-}) => void;
-export type OnEdgeClick = (event: {
-    edge: DiagramEdge;
-    xyedge: XYFlowEdge;
-    event: ReactMouseEvent;
-}) => void;
-/**
- * On pane/canvas click (not on any node or edge)
- */
-export type OnCanvasClick = (event: ReactMouseEvent) => void;
-export type ChangeEvent = {
-    change: ViewChange;
-};
-export type OnChange = {
-    (event: ChangeEvent): void;
-};
-export type LikeC4ColorScheme = 'light' | 'dark';
-export interface LikeC4DiagramProperties {
-    view: DiagramView;
-    className?: string | undefined;
-    /**
-     * Controls color scheme used for styling the flow
-     * By default inherits from system or surrounding MantineProvider
-     *
-     * @example 'light' | 'dark'
-     */
-    /**
-     * Show/hide controls menu
-     * @default false
-     */
-    controls?: boolean | undefined;
-    /**
-     * Enable/disable panning
-     * @default true
-     */
-    pannable?: boolean | undefined;
-    /**
-     * Enable/disable zooming
-     * @default true
-     */
-    zoomable?: boolean | undefined;
-    /**
-     * Disable any editing (dragging still can be enabled with `nodesDraggable`)
-     * @default true
-     */
-    readonly?: boolean | undefined;
-    /**
-     * If set, initial viewport will show all nodes & edges
-     * @default true
-     */
-    fitView?: boolean | undefined;
-    /**
-     * Seems like this is percentage of the view size
-     * @default 0
-     */
-    fitViewPadding?: number | undefined;
-    nodesSelectable?: boolean | undefined;
-    /**
-     * @default false
-     */
-    nodesDraggable?: boolean | undefined;
-    initialWidth?: number | undefined;
-    initialHeight?: number | undefined;
-    /**
-     * Keep aspect ratio of the diagram
-     * @default false
-     */
-    keepAspectRatio?: boolean | undefined;
-    /**
-     * Background pattern
-     * @default 'dots'
-     */
-    background?: 'transparent' | 'solid' | XYBackground | undefined;
-    /**
-     * Display hovercards with element links
-     * @default true
-     */
-    showElementLinks?: boolean | undefined;
-    /**
-     * Display panel with diagram title / description
-     * @default true
-     */
-    showDiagramTitle?: boolean | undefined;
-    /**
-     * Show back/forward navigation buttons
-     * @default false
-     */
-    showNavigationButtons?: undefined | boolean;
-    /**
-     * Display notations of the view
-     * @default true
-     */
-    showNotations?: boolean | undefined;
-    /**
-     * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-     * @default true
-     */
-    enableFocusMode?: boolean | undefined;
-    /**
-     * If Walkthrough for dynamic views should be enabled
-     * @default false
-     */
-    enableDynamicViewWalkthrough?: boolean | undefined;
-    /**
-     * Experimental feature to enable edge editing
-     * @default false
-     */
-    experimentalEdgeEditing?: boolean | undefined;
-    /**
-     * Render custom icon for a node
-     * By default, if icon is http:// or https://, it will be rendered as an image
-     */
-    renderIcon?: ElementIconRenderer | undefined;
-    where?: WhereOperator<string, string> | undefined;
-}
-export interface LikeC4DiagramEventHandlers {
-    onChange?: OnChange | null | undefined;
-    onNavigateTo?: OnNavigateTo | null | undefined;
-    onNodeClick?: OnNodeClick | null | undefined;
-    onNodeContextMenu?: OnNodeClick | null | undefined;
-    onCanvasContextMenu?: OnCanvasClick | null | undefined;
-    onEdgeClick?: OnEdgeClick | null | undefined;
-    onEdgeContextMenu?: OnEdgeClick | null | undefined;
-    onCanvasClick?: OnCanvasClick | null | undefined;
-    onCanvasDblClick?: OnCanvasClick | null | undefined;
-    onBurgerMenuClick?: null | undefined | (() => void);
-    onOpenSourceView?: null | undefined | (() => void);
-    onOpenSourceElement?: null | undefined | ((fqn: Fqn) => void);
-    onOpenSourceRelation?: null | undefined | ((id: RelationID) => void);
-}

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +0,0 @@
-import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-
-export type StaticLikeC4DiagramProps = Pick<LikeC4DiagramProperties, 'view' | 'keepAspectRatio' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'where'>;
-export declare function StaticLikeC4Diagram({ view, fitView, fitViewPadding, background, ...rest }: StaticLikeC4DiagramProps): import("react/jsx-runtime").JSX.Element;

package/dist/globals.css.d.ts

@@ -1 +0,0 @@
-export declare const rootClassName = "likec4-diagram-root";