@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/theme.css.ts

@@ -0,0 +1,64 @@
+import { createGlobalThemeContract } from '@vanilla-extract/css'
+
+export const vars = createGlobalThemeContract({
+  default: {
+    font: 'default-font-family'
+  },
+  likec4: {
+    font: 'font-family',
+    background: {
+      color: 'background-color',
+      pattern: {
+        color: 'background-pattern-color'
+      }
+    }
+  },
+  compound: {
+    font: 'compound-font-family',
+    titleColor: 'compound-title-color'
+  },
+  element: {
+    font: 'element-font-family',
+    fill: 'element-fill',
+    stroke: 'element-stroke',
+    hiContrast: 'element-hiContrast',
+    loContrast: 'element-loContrast'
+  },
+  relation: {
+    lineColor: 'relation-lineColor',
+    labelColor: 'relation-labelColor',
+    labelBgColor: 'relation-labelBg'
+  },
+  optionsPanel: {
+    top: 'options-panel-top',
+    right: 'options-panel-right'
+  }
+}, (value) => `likec4-${value}`)
+
+export const xyvars = createGlobalThemeContract({
+  background: {
+    color: 'background-color',
+    pattern: {
+      color: 'background-pattern-color'
+      // dots: 'background-pattern-dots-color',
+      // lines: 'background-pattern-lines-color',
+      // cross: 'background-pattern-cross-color'
+    }
+  },
+  edge: {
+    stroke: 'edge-stroke',
+    strokeSelected: 'edge-stroke-selected',
+    labelColor: 'edge-label-color',
+    labelBgColor: 'edge-label-background-color',
+    strokeWidth: 'edge-stroke-width'
+  },
+  node: {
+    color: 'node-color',
+    border: 'node-border',
+    backgroundColor: 'node-background-color',
+    groupBackgroundColor: 'node-group-background-color',
+    boxshadowHover: 'node-boxshadow-hover',
+    boxshadowSelected: 'node-boxshadow-selected',
+    borderRadius: 'node-border-radius'
+  }
+}, (value) => `xy-${value}`)

package/src/ui/Camera.tsx

@@ -0,0 +1,174 @@
+import { shallowEqual } from '@mantine/hooks'
+import { useDebouncedEffect, useIsMounted } from '@react-hookz/web'
+import {
+  type ReactFlowState,
+  useOnSelectionChange,
+  useOnViewportChange,
+  useStore,
+  useUpdateNodeInternals,
+  type Viewport
+} from '@xyflow/react'
+import { memo, useEffect, useRef, useState } from 'react'
+import { uniq } from 'remeda'
+import { useXYFlow } from '../xyflow/hooks'
+import type { XYFlowNode } from '../xyflow/types'
+import { distance } from '../xyflow/utils'
+
+const selector = (state: ReactFlowState) => {
+  return {
+    isUserSelectionActive: state.userSelectionActive,
+    isDragging: state.paneDragging || state.nodes.some(n => n.dragging ?? false)
+  }
+}
+
+const CameraMemo = /* @__PURE__ */ memo(function Camera() {
+  const isMounted = useIsMounted()
+  // const isUserSelectionActive = useStore(selectUserSelectionActive)
+  const {
+    isUserSelectionActive,
+    isDragging
+  } = useStore(selector, shallowEqual)
+  const reactflow = useXYFlow()
+  const updateNd = useUpdateNodeInternals()
+
+  const padding = 0 // editor.fitViewPadding
+  const viewId = '' // editor.viewId
+  const fitOnSelect: boolean = false // editor.fitOnSelect
+
+  const previousViewport = useRef<Viewport | null>(null)
+  const isZoomPendingRef = useRef(false)
+
+  const viewportChangeStart = useRef<Viewport | null>(null)
+  const prevViewId = useRef(viewId)
+  const isReady = reactflow.viewportInitialized
+  const selectedNodesRef = useRef([] as string[])
+
+  const [selectedNodes, setSelectedNodes] = useState([] as XYFlowNode[])
+
+  // WORKAROUND
+
+  useOnViewportChange({
+    onStart: (viewport) => {
+      viewportChangeStart.current = { ...viewport }
+    },
+    onEnd: (end) => {
+      if (!previousViewport.current) {
+        viewportChangeStart.current = null
+      }
+      if (!viewportChangeStart.current) {
+        return
+      }
+      const start = {
+        ...viewportChangeStart.current
+      }
+      const d = distance(start, end)
+      if (d > 15) {
+        previousViewport.current = null
+      }
+      viewportChangeStart.current = null
+    }
+  })
+
+  const fixUseOnViewportChange = () => {
+    // WORKAROUND:
+    // react-flow triggers useOnViewportChange
+    // We reset the viewportChangeStart, before useOnViewportChange.onEnd called
+    setTimeout(() => {
+      viewportChangeStart.current = null
+    }, 50)
+  }
+
+  useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      if (!isMounted() || fitOnSelect === false) {
+        return
+      }
+      if (nodes.length === 0 && edges.length === 0) {
+        setSelectedNodes([])
+        return
+      }
+      const selected = new Set([
+        ...nodes.map(({ id }) => reactflow.getNode(id)),
+        ...edges.flatMap((edge) => [
+          reactflow.getNode(edge.source),
+          reactflow.getNode(edge.target)
+        ])
+      ].filter(Boolean))
+      setSelectedNodes([...selected])
+    }
+  })
+
+  const selectedNodesHash = selectedNodes.map((node) => node.id).sort().join('\n')
+  useEffect(() => {
+    isZoomPendingRef.current = selectedNodesHash !== ''
+  }, [selectedNodesHash])
+
+  useDebouncedEffect(
+    () => {
+      if (isUserSelectionActive || isDragging || !isReady) {
+        return
+      }
+      if (selectedNodes.length === 0) {
+        if (previousViewport.current) {
+          console.log(`Camera: revert viewport`)
+          reactflow.setViewport(previousViewport.current, {
+            duration: 300
+          })
+          previousViewport.current = null
+        }
+        return
+      }
+      if (!isZoomPendingRef.current) {
+        return
+      }
+      isZoomPendingRef.current = false
+      previousViewport.current ??= { ...reactflow.getViewport() }
+      const zoom = previousViewport.current.zoom
+      reactflow.fitView({
+        duration: 350,
+        maxZoom: Math.max(1, zoom),
+        padding,
+        nodes: selectedNodes
+      })
+      fixUseOnViewportChange()
+    },
+    [selectedNodesHash, isReady, isDragging, isUserSelectionActive],
+    previousViewport.current ? 100 : 1500
+    // previousViewport.current ? 200 : 2500
+  )
+
+  useEffect(() => {
+    const ids = selectedNodes.map((node) => node.id)
+    for (const id of uniq([...selectedNodesRef.current, ...ids])) {
+      try {
+        updateNd(id)
+      } catch (e) {
+        console.warn(`Camera: failed useUpdateNodeInternals`, e)
+      }
+    }
+    selectedNodesRef.current = ids
+  }, [selectedNodesHash, updateNd])
+
+  useDebouncedEffect(
+    () => {
+      if (!isReady || prevViewId.current === viewId) {
+        return
+      }
+      const zoom = previousViewport.current?.zoom ?? reactflow.getZoom()
+      reactflow.fitView({
+        duration: 400,
+        maxZoom: Math.max(1, zoom),
+        padding
+      })
+      previousViewport.current = null
+      prevViewId.current = viewId
+    },
+    [isReady, viewId],
+    50,
+    500
+  )
+
+  return null
+})
+
+export default CameraMemo

package/src/ui/KeepAspectRatio.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+export const wrapper = style({
+  width: '100%',
+  height: '100%',
+  padding: 0
+})

package/src/ui/KeepAspectRatio.tsx

@@ -0,0 +1,35 @@
+import { Box } from '@mantine/core'
+import clsx from 'clsx'
+import type { HTMLAttributes } from 'react'
+import { wrapper } from './KeepAspectRatio.css'
+
+type KeepAspectRatioProps = HTMLAttributes<HTMLDivElement> & {
+  enabled: boolean
+  width: number
+  height: number
+}
+
+export function KeepAspectRatio({
+  children,
+  width,
+  height,
+  enabled,
+  className,
+  style,
+  ...rest
+}: KeepAspectRatioProps) {
+  return (
+    <Box
+      {...rest}
+      className={clsx(wrapper, className)}
+      style={enabled
+        ? {
+          ...style,
+          aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
+          maxHeight: Math.ceil(height)
+        }
+        : style}>
+      {children}
+    </Box>
+  )
+}

package/src/ui/OptionsPanel.css.ts

@@ -0,0 +1,10 @@
+import { fallbackVar, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+import { vars } from '../theme.css'
+
+export const panel = style({
+  top: fallbackVar(vars.optionsPanel.top, '1rem'),
+  right: fallbackVar(vars.optionsPanel.right, '1rem'),
+  margin: 0,
+  boxShadow: mantine.shadows.xl
+})

package/src/ui/OptionsPanel.tsx

@@ -0,0 +1,65 @@
+import { Card } from '@mantine/core'
+import { useOnSelectionChange } from '@xyflow/react'
+import clsx from 'clsx'
+import { shallowEqual } from 'fast-equals'
+import { AnimatePresence, motion } from 'framer-motion'
+import { memo, useState } from 'react'
+import { NodeOptions } from './options/NodeOptions'
+import * as styles from './OptionsPanel.css'
+
+const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
+  const [selectedNodes, setSelectedNodes] = useState([] as string[])
+
+  useOnSelectionChange({
+    onChange: ({ nodes }) => {
+      const next = nodes.map(n => n.id).sort()
+      setSelectedNodes(prev => {
+        return shallowEqual(prev, next) ? prev : next
+      })
+      // if (nodes.length === 0 && edges.length === 0) {
+      //   setSelectedNodes([])
+      //   // setSelectedEdges([])
+      //   return
+      // }
+      // const selected = new Set([
+      //   ...nodes.map((n) => n.id),
+      //   ...edges.flatMap((edge) => [
+      //     edge.source,
+      //     edge.target
+      //   ])
+      // ])
+      // setSelectedNodes([...selected])
+      // setSelectedEdges(edges.map(e => e.id))
+    }
+  })
+
+  // useUpdateEffect(() => {
+  //   setSelectedNodes([])
+  // }, [viewId])
+
+  return (
+    <AnimatePresence mode="wait">
+      {selectedNodes.length > 0 && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.85 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{
+            opacity: 0,
+            scale: 0.85
+          }}
+          transition={{ duration: 0.14 }}
+          className={clsx('react-flow__panel', styles.panel)}
+          style={{
+            transformOrigin: 'center right'
+          }}
+        >
+          <Card shadow="sm">
+            <NodeOptions selectedNodeIds={selectedNodes} />
+          </Card>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+})
+
+export default OptionsPanelMemo

package/src/ui/index.ts

@@ -0,0 +1,3 @@
+// export { default as Camera } from './Camera'
+export { KeepAspectRatio } from './KeepAspectRatio'
+export { default as OptionsPanel } from './OptionsPanel'

package/src/ui/options/NodeOptions.tsx

@@ -0,0 +1,253 @@
+import {
+  defaultTheme,
+  type ElementShape,
+  ElementShapes,
+  type Fqn,
+  type NonEmptyArray,
+  type ThemeColor
+} from '@likec4/core'
+import {
+  Box,
+  CheckIcon,
+  ColorSwatch,
+  Divider,
+  Flex,
+  rem,
+  Select,
+  Stack,
+  Text,
+  Tooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { hasAtLeast, keys, takeWhile } from 'remeda'
+import { useDiagramStoreApi } from '../../state'
+import { useXYNodesData } from '../../xyflow/hooks'
+import { XYFlowNode } from '../../xyflow/types'
+
+// const ColorPanel = () => {
+//   const selectedNodes = useStore(state => state.nodeInternals
+// }
+
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements
+
+export const themedColors = [
+  { key: 'primary', value: primary.fill },
+  { key: 'secondary', value: secondary.fill },
+  { key: 'muted', value: muted.fill }
+] satisfies Array<{ key: ThemeColor; value: string }>
+
+export const colors = keys.strict(otherColors).map(key => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}))
+
+export type ThemeColorKey = typeof themedColors[0]['key']
+export type ColorKey = typeof colors[0]['key']
+
+type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
+
+export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
+  const diagramApi = useDiagramStoreApi()
+  const nodes = useXYNodesData(selectedNodeIds)
+  if (!hasAtLeast(nodes, 1)) {
+    return null
+  }
+  // Makes sense to show shape option only if there is at least one element node
+  const showShapeOption = nodes.some(node => node.type === 'element')
+
+  const [firstNode, ...rest] = nodes
+  return (
+    <Stack>
+      <Box maw={200}>
+        <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
+          {rest.length === 0 ? firstNode.data.element.title : `[ multiple ]`}
+        </Text>
+      </Box>
+      {showShapeOption && (
+        <ShapeOption
+          nodes={nodes}
+          onShapeChange={(shape: ElementShape) => {
+            const targets = [] as Fqn[]
+            for (const nd of nodes) {
+              if (nd.data.element.shape !== shape) {
+                targets.push(nd.data.element.id)
+              }
+            }
+            if (hasAtLeast(targets, 1)) {
+              diagramApi.getState().triggerOnChange([{
+                op: 'change-shape',
+                shape,
+                targets
+              }])
+            }
+          }} />
+      )}
+      <Colors
+        nodes={nodes}
+        onColorChange={(color: ColorKey | ThemeColorKey) => {
+          const targets = [] as Fqn[]
+          for (const nd of nodes) {
+            if (nd.data.element.color !== color) {
+              targets.push(nd.data.element.id)
+            }
+          }
+          if (hasAtLeast(targets, 1)) {
+            diagramApi.getState().triggerOnChange([{
+              op: 'change-color',
+              color,
+              targets
+            }])
+          }
+        }} />
+      <NavigateToOption nodes={nodes} />
+    </Stack>
+  )
+}
+
+function Colors({
+  nodes: [firstNode, ...nodes],
+  onColorChange
+}: {
+  nodes: NonEmptyArray<XYNodesData>
+  onColorChange: (color: ColorKey | ThemeColorKey) => void
+}) {
+  let selectedColor = firstNode.data.element.color as ThemeColor | null
+  takeWhile(nodes, node => {
+    if (node.data.element.color !== selectedColor) {
+      selectedColor = null
+      return false
+    }
+    return true
+  })
+  const changeColor = (color: ColorKey | ThemeColorKey) => () => {
+    if (selectedColor === color) {
+      return
+    }
+    onColorChange(color)
+  }
+  return (
+    <Box>
+      <TooltipGroup openDelay={400} closeDelay={300}>
+        <Divider label="color" labelPosition="left" />
+        <Flex mt={'xs'} maw={150} gap="xs" 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={20}
+                withShadow
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+
+        <Flex mt="sm" maw={150} gap="xs" 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={20}
+                onClick={changeColor(key)}
+                style={{ color: '#fff', cursor: 'pointer' }}
+              >
+                {selectedColor === key && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
+              </ColorSwatch>
+            </Tooltip>
+          ))}
+        </Flex>
+      </TooltipGroup>
+    </Box>
+  )
+}
+
+function ShapeOption({
+  nodes: [firstNode, ...nodes],
+  onShapeChange
+}: {
+  nodes: NonEmptyArray<XYNodesData>
+  onShapeChange: (shape: ElementShape) => void
+}) {
+  let selectedShape = firstNode.data.element.shape as ElementShape | null
+  takeWhile(nodes, node => {
+    if (node.data.element.shape !== selectedShape) {
+      selectedShape = null
+      return false
+    }
+    return true
+  })
+
+  return (
+    <Box>
+      <Divider label="shape" labelPosition="left" />
+      <Select
+        mt={'xs'}
+        size="xs"
+        variant="filled"
+        value={selectedShape}
+        placeholder={'[ multiple ]'}
+        data={ElementShapes}
+        allowDeselect={false}
+        checkIconPosition="right"
+        onChange={(value) => {
+          if (!value || value === selectedShape) {
+            return
+          }
+          onShapeChange(value as ElementShape)
+        }} />
+    </Box>
+  )
+}
+
+function NavigateToOption({
+  nodes: [node, ...nodes]
+}: {
+  nodes: NonEmptyArray<XYNodesData>
+}) {
+  const isMultiple = nodes.length >= 1
+  return (
+    <Box>
+      <Divider label="navigate to" labelPosition="left" />
+      <Select
+        mt={'xs'}
+        size="xs"
+        variant="filled"
+        value={!isMultiple ? (node.data.element.navigateTo ?? null) : null}
+        disabled={isMultiple}
+        placeholder={isMultiple ? '[ multiple ]' : 'select'}
+        data={node.data.element.navigateTo
+          ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }]
+          : []}
+        // data={ElementShapes}
+        allowDeselect={true}
+        checkIconPosition="right"
+        // onChange={(value) => {
+        //   if (!value || value === selectedShape) {
+        //     return
+        //   }
+        //   onShapeChange(value as ElementShape)
+        // }} />
+      />
+    </Box>
+  )
+}