@likec4/diagram 1.1.0 → 1.2.0

package/src/ui/DiagramTitlePanel.tsx

@@ -0,0 +1,138 @@
+import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
+import { useLocalStorage } from '@mantine/hooks'
+import clsx from 'clsx'
+import { AnimatePresence, motion } from 'framer-motion'
+import { type DiagramState, useDiagramState } from '../state'
+import * as css from './DiagramTitlePanel.css'
+
+const selector = (s: DiagramState) => ({
+  id: s.view.id,
+  title: s.view.title ?? 'untitled',
+  description: s.view.description,
+  links: s.view.links
+})
+
+export default function DiagramTitlePanel() {
+  const { id, title, description, links } = useDiagramState(selector)
+  const [isCollapsed, setCollapsed] = useLocalStorage({
+    key: 'diagram-title-panel-collapsed',
+    defaultValue: false
+  })
+  const toggle = () => setCollapsed(v => !v)
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={id}
+        initial={{ opacity: 0.05, scale: 0.7 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{
+          opacity: 0.05,
+          scale: 0.6
+        }}
+        className={clsx('react-flow__panel', css.container)}
+        style={{
+          transformOrigin: 'left center'
+        }}
+      >
+        <Paper
+          radius="sm"
+          withBorder={!isCollapsed}
+          className={css.paper}
+          p={isCollapsed ? 'xs' : 'lg'}
+          onDoubleClick={e => e.stopPropagation()}>
+          <Stack gap={'sm'} justify="stretch" align="stretch">
+            <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
+              <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 && (
+              <>
+                {description && (
+                  <Spoiler
+                    maxHeight={42}
+                    showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
+                    hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
+                    <Text
+                      component={'div'}
+                      size="sm"
+                      className={css.description}>
+                      {description || 'no description'}
+                    </Text>
+                  </Spoiler>
+                )}
+                {!description && (
+                  <Text
+                    component={'div'}
+                    size="xs"
+                    c={'dimmed'}>
+                    no description
+                  </Text>
+                )}
+                {links && (
+                  <Stack
+                    gap={3}
+                    justify="stretch"
+                    align="stretch">
+                    {links.map((link) => (
+                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
+                        <Box flex={'1'} style={{ overflow: 'hidden' }}>
+                          <Anchor
+                            href={link}
+                            target="_blank"
+                            fz="xs"
+                            truncate="end"
+                            display={'inline-block'}
+                            w={'100%'}>
+                            {link}
+                          </Anchor>
+                        </Box>
+                        <CopyButton value={link}>
+                          {({ copied, copy }) => (
+                            <Button
+                              size="compact-xs"
+                              fz={'10'}
+                              variant="light"
+                              onClick={copy}
+                              color={copied
+                                ? 'teal'
+                                : 'gray'}>
+                              {copied ? 'copied' : 'copy'}
+                            </Button>
+                          )}
+                        </CopyButton>
+                      </Group>
+                    ))}
+                  </Stack>
+                )}
+              </>
+            )}
+          </Stack>
+        </Paper>
+      </motion.div>
+    </AnimatePresence>
+  )
+}

package/src/ui/DynamicViewWalkthrough.css.ts

@@ -0,0 +1,46 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+
+export const container = style({
+  position: 'absolute',
+  bottom: '0.5rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  padding: 0,
+  margin: 0
+})
+
+export const buttons = style({
+  backdropFilter: 'blur(8px)',
+  transition: 'all 175ms ease-in',
+  ':hover': {
+    transitionTimingFunction: 'ease-out',
+    transform: 'scale(1.1)'
+  },
+  ':active': {
+    transitionDuration: '100ms',
+    transform: 'scale(0.98) translateY(3px)'
+  }
+})
+
+var transparency = createVar()
+export const btn = style({
+  transition: 'all 175ms ease-in',
+  backgroundColor: 'var(--button-bg)',
+  vars: {
+    [transparency]: '35%',
+    ['--button-bg']: `color-mix(in srgb, ${mantine.colors.primaryColors.filled}, transparent ${transparency})`,
+    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`
+  },
+  selectors: {
+    [mantine.lightSelector]: {
+      vars: {
+        [transparency]: '15%'
+      }
+    }
+  }
+})
+
+globalStyle(`${btn} .tabler-icon`, {
+  width: '80%'
+})

package/src/ui/DynamicViewWalkthrough.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, Box, Button, rem, useComputedColorScheme } from '@mantine/core'
+import {
+  IconHeart,
+  IconPhoto,
+  IconPlayerPlayFilled,
+  IconPlayerSkipBackFilled,
+  IconPlayerSkipForwardFilled,
+  IconPlayerStopFilled,
+  IconSettings
+} from '@tabler/icons-react'
+import clsx from 'clsx'
+import { isNullish, isNumber } from 'remeda'
+import { useDiagramState } from '../state/useDiagramStore'
+import * as css from './DynamicViewWalkthrough.css'
+
+export function DynamicViewWalkthrough() {
+  const {
+    nextDynamicStep,
+    stopDynamicView,
+    activeDynamicViewStep,
+    hasNextSteps
+  } = useDiagramState(s => ({
+    nextDynamicStep: s.nextDynamicStep,
+    stopDynamicView: s.stopDynamicView,
+    activeDynamicViewStep: s.activeDynamicViewStep,
+    hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
+  }))
+
+  const buttonProps = {
+    className: css.btn,
+    size: 'compact-xl',
+    radius: 'xl'
+  }
+
+  const nextStep = (increment = 1) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    nextDynamicStep(increment)
+  }
+
+  return (
+    <Box
+      className={clsx('react-flow__panel', css.container)}
+    >
+      {isNullish(activeDynamicViewStep)
+        && (
+          <Button
+            {...buttonProps}
+            className={clsx(css.buttons, css.btn)}
+            rightSection={<IconPlayerPlayFilled />}
+            onClick={nextStep()}
+            px={'xl'}>
+            Start
+          </Button>
+        )}
+      {isNumber(activeDynamicViewStep) && (
+        <Button.Group className={css.buttons}>
+          <Button
+            {...buttonProps}
+            pl={'lg'}
+            disabled={activeDynamicViewStep === 1}
+            onClick={nextStep(-1)}>
+            <IconPlayerSkipBackFilled />
+          </Button>
+
+          <Button
+            {...buttonProps}
+            px={'sm'}
+            onClick={e => {
+              e.stopPropagation()
+              stopDynamicView()
+            }}>
+            <IconPlayerStopFilled />
+          </Button>
+
+          <Button
+            {...buttonProps}
+            pr={'lg'}
+            disabled={!hasNextSteps}
+            onClick={nextStep()}>
+            <IconPlayerSkipForwardFilled />
+          </Button>
+        </Button.Group>
+      )}
+    </Box>
+  )
+}

package/src/ui/OptionsPanel.tsx

@@ -3,11 +3,14 @@ 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 { useState } from 'react'
+import { isNullish, isTruthy } from 'remeda'
+import { useDiagramState } from '../state'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
+export default function OptionsPanel() {
+  const isFocusDisabled = useDiagramState(s => isNullish(s.focusedNodeId))
   const [selectedNodes, setSelectedNodes] = useState([] as string[])
 
   useOnSelectionChange({
@@ -16,30 +19,12 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
       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 && (
+      {isFocusDisabled && selectedNodes.length > 0 && (
         <motion.div
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -60,6 +45,4 @@ const OptionsPanelMemo = /* @__PURE__ */ memo(function OptionsPanel() {
       )}
     </AnimatePresence>
   )
-})
-
-export default OptionsPanelMemo
+}

package/src/ui/index.ts

@@ -1,2 +1,3 @@
 // export { default as Camera } from './Camera'
+export * from './DynamicViewWalkthrough'
 export { default as OptionsPanel } from './OptionsPanel'

package/src/ui/options/NodeOptions.tsx

@@ -1,8 +1,9 @@
 import {
+  type BorderStyle,
   defaultTheme,
   type ElementShape,
   ElementShapes,
-  type Fqn,
+  invariant,
   type NonEmptyArray,
   type ThemeColor
 } from '@likec4/core'
@@ -13,13 +14,17 @@ import {
   Divider,
   Flex,
   rem,
+  SegmentedControl,
   Select,
+  Slider,
   Stack,
   Text,
   Tooltip,
   TooltipGroup
 } from '@mantine/core'
+import { useEffect, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
+import type { Changes } from '../../LikeC4Diagram.props'
 import { useDiagramStoreApi } from '../../state'
 import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
@@ -52,15 +57,34 @@ export type ColorKey = typeof colors[0]['key']
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
 export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
+  // export function NodeOptions(props: { nodes: XYFlowNode[] }) {
   const diagramApi = useDiagramStoreApi()
+  // const nodes = useXYNodesData(props.nodes.map(node => node.id))
   const nodes = useXYNodesData(selectedNodeIds)
   if (!hasAtLeast(nodes, 1)) {
     return null
   }
+  if (nodes.length !== selectedNodeIds.length) {
+    throw new Error('NodeOptions: nodes and props.nodes should have the same length')
+  }
   // 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
+
+  // Makes sense to show opacity option only if there is at least one compound node
+  const showOpacityOption = rest.length === 0 && firstNode.type === 'compound'
+
+  const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
+    const targets = nodes.map(node => node.data.element.id)
+    invariant(hasAtLeast(targets, 1), 'At least one target is required')
+    diagramApi.getState().triggerOnChange([{
+      op: 'change-element-style',
+      style,
+      targets
+    }])
+  }
+
   return (
     <Stack>
       <Box maw={200}>
@@ -72,38 +96,31 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
         <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
-              }])
-            }
+            triggerChange({ shape })
           }} />
       )}
       <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
-            }])
-          }
+          triggerChange({ color })
         }} />
+
+      {showOpacityOption && (
+        <Box key={firstNode.id}>
+          <Divider label="opacity and border" labelPosition="left" />
+          <OpacityOption
+            node={firstNode}
+            onOpacityChange={(opacity: number) => {
+              triggerChange({ opacity })
+            }} />
+          <BorderStyleOption
+            node={firstNode}
+            onChange={(border: BorderStyle) => {
+              triggerChange({ border })
+            }}
+          />
+        </Box>
+      )}
       <NavigateToOption nodes={nodes} />
     </Stack>
   )
@@ -251,3 +268,62 @@ function NavigateToOption({
     </Box>
   )
 }
+
+function OpacityOption({
+  node,
+  onOpacityChange
+}: {
+  node: XYNodesData
+  onOpacityChange: (opacity: number) => void
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100
+  const [value, setValue] = useState(selectedOpacity)
+  useEffect(() => {
+    setValue(selectedOpacity)
+  }, [selectedOpacity])
+
+  return (
+    <Slider
+      mt={'xs'}
+      size={'sm'}
+      color={'dark'}
+      value={value}
+      onChange={setValue}
+      onChangeEnd={onOpacityChange} />
+  )
+}
+
+function BorderStyleOption({
+  node,
+  onChange
+}: {
+  node: XYNodesData
+  onChange: (borderStyle: BorderStyle) => void
+}) {
+  let selecteBorderStyle = node.data.element.style.border ?? 'dashed'
+  const [value, setValue] = useState(selecteBorderStyle)
+  useEffect(() => {
+    setValue(selecteBorderStyle)
+  }, [selecteBorderStyle])
+
+  return (
+    <Box mt={'md'}>
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        withItemsBorders={false}
+        value={value}
+        onChange={v => {
+          setValue(v as BorderStyle)
+          onChange(v as BorderStyle)
+        }}
+        data={[
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dashed', value: 'dashed' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'None', value: 'none' }
+        ]}
+      />
+    </Box>
+  )
+}