@likec4/diagram 1.0.0-rc.1 → 1.0.1

package/src/xyflow/nodes/element/ElementIcon.tsx

@@ -12,8 +12,6 @@ type ElementIconProps = {
 
 export function ElementIcon({
   node,
-  maxWidth,
-  paddingX = 32,
   paddingY = 32
 }: ElementIconProps) {
   if (!node.icon) {
@@ -26,7 +24,7 @@ export function ElementIcon({
 
   const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25)
   const maxIconHeight = Math.floor(firstLabelY - paddingY - 16)
-  const maxIconWidth = maxWidth ?? node.width - paddingX * 2
+  // const maxIconWidth = maxWidth ?? node.width - paddingX * 2
 
   // const centerY = paddingY + Math.floor(maxIconHeight / 2)
   // const centerX = Math.floor(node.width / 2)

package/src/xyflow/nodes/element/ElementLink.css.ts

@@ -19,8 +19,8 @@ export const elementLink = style({
   }
   // fontSize: rem(10),
   // height: 12,
-  // width: ['100%', '-webkit-fill-available'],
-  // height: ['100%', '-webkit-fill-available'],
+  // width: '100%',
+  // height: '100%',
   // vars: {
   //   [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
   // }

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -68,9 +68,9 @@ export function ElementLink({
             <span>links</span>
           </UnstyledButton>
         </HoverCardTarget>
-        <HoverCardDropdown p={'xs'}>
-          <Stack onClick={e => e.stopPropagation()} gap={'xs'}>
-            {element.links.map((link, i) => (
+        <HoverCardDropdown onClick={e => e.stopPropagation()} p={'xs'}>
+          <Stack gap={'xs'}>
+            {element.links.map((link) => (
               <Group key={link} wrap="nowrap" gap={'sm'}>
                 <Box flex={'1'} style={{ overflow: 'clip', maxWidth: clamp(element.width, { min: 200, max: 400 }) }}>
                   <Anchor href={link} target="_blank" fz="13" truncate="end">

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -157,7 +157,6 @@ export function ElementNode({
       ))} */
       }
       <Handle
-        // @ts-expect-error
         type="target"
         position={Position.Top}
         style={{ visibility: 'hidden' }}
@@ -204,7 +203,6 @@ export function ElementNode({
         )}
       </div>
       <Handle
-        // @ts-expect-error
         type="source"
         position={Position.Bottom}
         style={{ visibility: 'hidden' }}

package/src/xyflow/nodes/element/element.css.ts

@@ -9,8 +9,8 @@ const elPadding = createVar('el-padding')
 
 export const container = style({
   position: 'relative',
-  width: ['100%', '-webkit-fill-available'],
-  height: ['100%', '-webkit-fill-available'],
+  width: '100%',
+  height: '100%',
   padding: 0,
   margin: 0,
   vars: {
@@ -121,8 +121,8 @@ export const technology = style({
 
 export const cssElement = style({
   position: 'relative',
-  width: ['100%', '-webkit-fill-available'],
-  height: ['100%', '-webkit-fill-available'],
+  width: '100%',
+  height: '100%',
   padding: elPadding,
   display: 'flex',
   flexDirection: 'column',

package/src/xyflow/types.ts

@@ -1,7 +1,16 @@
 import type { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core'
+import type {
+  Edge,
+  EdgeMouseHandler,
+  InternalNode,
+  Node,
+  NodeMouseHandler,
+  OnMoveEnd,
+  OnMoveStart,
+  ReactFlowInstance,
+  ReactFlowState
+} from '@xyflow/react'
 import { isNode } from '@xyflow/react'
-import type { Edge, InternalNode, Node, ReactFlowInstance, ReactFlowState } from '@xyflow/react'
-import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd, OnMoveStart, OnNodeDrag, Viewport } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
 import type { SetReadonly, SetRequired, Simplify } from 'type-fest'

package/dist/EmbeddedLikeC4Diagram.css.d.ts

@@ -1,5 +0,0 @@
-export declare const modalContent: string;
-export declare const modalBody: string;
-export declare const modalHeader: string;
-export declare const modalCloseButtonBox: string;
-export declare const modalCloseButton: string;

package/dist/EmbeddedLikeC4Diagram.d.ts

@@ -1,17 +0,0 @@
-import { LikeC4ColorScheme } from './LikeC4Diagram.props';
-import { DiagramView } from '@likec4/core';
-
-export type EmbeddedLikeC4DiagramProps = {
-    viewId: string;
-    views: Record<string, DiagramView>;
-    /**
-     * Controls color scheme used for styling the flow
-     * By default inherits from system or surrounding MantineProvider
-     *
-     * @example 'light' | 'dark'
-     */
-    colorScheme?: LikeC4ColorScheme | undefined;
-};
-declare function EmbeddedLikeC4DiagramCmp({ viewId, views, colorScheme }: EmbeddedLikeC4DiagramProps): JSX.Element;
-export declare const EmbeddedLikeC4Diagram: typeof EmbeddedLikeC4DiagramCmp;
-export {};

package/src/EmbeddedLikeC4Diagram.css.ts

@@ -1,35 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { mantine } from './mantine.css'
-
-export const modalContent = style({
-  backgroundColor: 'transparent'
-  // backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[7]}, transparent 50%)`,
-  // backdropFilter: 'blur(2px)',
-})
-
-export const modalBody = style({
-  padding: 0,
-  height: '100%'
-})
-
-export const modalHeader = style({
-  position: 'absolute',
-  top: '1rem',
-  left: '1rem'
-})
-
-export const modalCloseButtonBox = style({
-  position: 'absolute',
-  top: '1rem',
-  right: '1rem'
-})
-
-export const modalCloseButton = style({
-  '@media': {
-    [mantine.largerThan('md')]: {
-      vars: {
-        ['--cb-size']: 'var(--cb-size-lg)'
-      }
-    }
-  }
-})

package/src/EmbeddedLikeC4Diagram.tsx

@@ -1,101 +0,0 @@
-import { type DiagramView, invariant } from '@likec4/core'
-import { Box, CloseButton, ModalBody, ModalContent, ModalOverlay, ModalRoot, Title } from '@mantine/core'
-import { useToggle } from '@react-hookz/web'
-import { shallowEqual } from 'fast-equals'
-import { memo, useState } from 'react'
-import {
-  modalBody,
-  modalCloseButton,
-  modalCloseButtonBox,
-  modalContent,
-  modalHeader
-} from './EmbeddedLikeC4Diagram.css'
-import { useUpdateEffect } from './hooks'
-import { LikeC4Diagram } from './LikeC4Diagram'
-import { type LikeC4ColorScheme } from './LikeC4Diagram.props'
-import { EnsureMantine } from './mantine/EnsureMantine'
-import { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
-import { KeepAspectRatio } from './ui/KeepAspectRatio'
-
-export type EmbeddedLikeC4DiagramProps = {
-  viewId: string
-  views: Record<string, DiagramView>
-  /**
-   * Controls color scheme used for styling the flow
-   * By default inherits from system or surrounding MantineProvider
-   *
-   * @example 'light' | 'dark'
-   */
-  colorScheme?: LikeC4ColorScheme | undefined
-}
-
-function EmbeddedLikeC4DiagramCmp({
-  viewId,
-  views,
-  colorScheme
-}: EmbeddedLikeC4DiagramProps) {
-  const [isOpened, toggleOpened] = useToggle(false)
-  const [browserViewId, setBrowserViewId] = useState(viewId)
-
-  const view = views[viewId]
-  invariant(view, `View with id ${viewId} not found`)
-  const browserView = views[browserViewId]
-  invariant(browserView, `View with id ${browserViewId} not found`)
-
-  const closeBrowser = () => {
-    toggleOpened(false)
-    setBrowserViewId(viewId)
-  }
-
-  useUpdateEffect(closeBrowser, [viewId])
-  return (
-    <EnsureMantine colorScheme={colorScheme}>
-      <KeepAspectRatio
-        enabled
-        height={view.height}
-        width={view.width}
-        onClick={e => {
-          e.stopPropagation()
-          toggleOpened(true)
-        }}
-      >
-        <StaticLikeC4Diagram
-          colorScheme={colorScheme}
-          view={view}
-          fitView
-          fitViewPadding={0.01}
-          background={'transparent'}
-          keepAspectRatio={false}
-        />
-      </KeepAspectRatio>
-      <ModalRoot opened={isOpened} onClose={closeBrowser} fullScreen>
-        <ModalOverlay blur={16} />
-        <ModalContent className={modalContent}>
-          <ModalBody className={modalBody}>
-            <Box className={modalHeader}>
-              <Title order={4}>{browserView.title || browserView.id}</Title>
-            </Box>
-            {isOpened && (
-              <LikeC4Diagram
-                readonly
-                view={browserView}
-                colorScheme={colorScheme}
-                background={'transparent'}
-                fitViewPadding={0.09}
-                onCanvasDblClick={closeBrowser}
-                onNavigateTo={(to) => {
-                  setBrowserViewId(to)
-                }}
-              />
-            )}
-            <Box className={modalCloseButtonBox}>
-              <CloseButton className={modalCloseButton} onClick={closeBrowser} />
-            </Box>
-          </ModalBody>
-        </ModalContent>
-      </ModalRoot>
-    </EnsureMantine>
-  )
-}
-
-export const EmbeddedLikeC4Diagram = memo(EmbeddedLikeC4DiagramCmp, shallowEqual) as typeof EmbeddedLikeC4DiagramCmp