feat: display other formats

likec4 · Nov 29, 2023 · c2f5823 · c2f5823
1 parent e71abfe
commit c2f5823
Show file tree

Hide file tree

Showing 20 changed files with 264 additions and 169 deletions.
diff --git a/packages/likec4/app/src/App.tsx b/packages/likec4/app/src/App.tsx
@@ -44,7 +44,12 @@ const Routes = () => {
   }
 
   return (
-    <Theme hasBackground={!!theme} accentColor='indigo' radius='small' appearance={theme}>
+    <Theme
+      hasBackground={!!theme}
+      accentColor='indigo'
+      radius='small'
+      appearance={theme ?? 'inherit'}
+    >
       {page}
       <Fragment key='ui'>{r.showUI && <Sidebar />}</Fragment>
     </Theme>

diff --git a/packages/likec4/app/src/data/atoms.ts b/packages/likec4/app/src/data/atoms.ts
@@ -2,7 +2,7 @@ import type { DiagramView } from '@likec4/core'
 import { atom } from 'jotai'
 import { atomFamily, atomWithReducer } from 'jotai/utils'
 import { equals, mapObject, values } from 'rambdax'
-import { LikeC4Views } from '~likec4'
+import { LikeC4Views } from 'virtual:likec4/views'
 import { buildDiagramTreeAtom } from './sidebar-diagram-tree'
 
 function atomWithCompare<Value>(initialValue: Value) {
@@ -65,8 +65,8 @@ if (import.meta.hot) {
     }
   }
 
-  import.meta.hot.accept('/@vite-plugin-likec4/likec4-generated.ts', md => {
-    const update = md?.LikeC4Views as typeof LikeC4Views | undefined
+  import.meta.hot.accept('/@likec4-plugin/likec4-views.js', md => {
+    const update = md?.LikeC4Views
     if (update) {
       $updateViews?.(update)
     }

diff --git a/packages/likec4/app/src/likec4-views.ts b/packages/likec4/app/src/likec4-views.ts
@@ -1,7 +1,7 @@
 /**
  * Script for embedding LikeC4Views in a web page.
  */
-import { LikeC4Views } from '~likec4-dimensions'
+import { LikeC4Views } from 'virtual:likec4/dimensions'
 
 let BASE = import.meta.env.BASE_URL
 if (!BASE.endsWith('/')) {

diff --git a/packages/likec4/app/src/likec4.d.ts b/packages/likec4/app/src/likec4.d.ts
@@ -1,12 +1,10 @@
-declare module '~likec4' {
+declare module 'virtual:likec4/views' {
   import type { DiagramView, ViewID } from '@likec4/core'
 
-  export type { ViewID }
-
   export const LikeC4Views: Record<LikeC4ViewId, DiagramView>
 }
 
-declare module '~likec4-dimensions' {
+declare module 'virtual:likec4/dimensions' {
   interface DiagramViewDimensions {
     width: number
     height: number
@@ -15,18 +13,14 @@ declare module '~likec4-dimensions' {
   export const LikeC4Views: Record<string, DiagramViewDimensions>
 }
 
-declare module '~likec4-dot-sources' {
-  import type { FC } from 'react'
+declare module 'virtual:likec4/dot-sources' {
   export function dotSource(viewId: string): string
-  export const DotSource: FC<{ viewId: string }>
+
+  export function svgSource(viewId: string): string
 }
-declare module '~likec4-d2-sources' {
-  import type { FC } from 'react'
+declare module 'virtual:likec4/d2-sources' {
   export function d2Source(viewId: string): string
-  export const D2Source: FC<{ viewId: string }>
 }
-declare module '~likec4-mmd-sources' {
-  import type { FC } from 'react'
+declare module 'virtual:likec4/mmd-sources' {
   export function mmdSource(viewId: string): string
-  export const MmdSource: FC<{ viewId: string }>
 }
diff --git a/packages/likec4/app/src/pages/index-page/index.tsx b/packages/likec4/app/src/pages/index-page/index.tsx
@@ -65,7 +65,7 @@ const ViewCard = ({ atom }: { atom: ViewCardAtom }) => {
             <DiagramPreview diagram={diagram} />
           </Inset>
           <Text as='div' size='2' weight='bold' trim='start'>
-            {title}
+            {title || id}
           </Text>
           <Text
             as='div'
@@ -92,8 +92,7 @@ function ViewsGroup({ atom }: { atom: Atom<IViewsGroup> }) {
       <Section size='2'>
         <Flex gap='2'>
           <Heading
-            color='gray'
-            highContrast={isRoot}
+            color={isRoot ? undefined : 'gray'}
             className={cn(isRoot || styles.dimmed)}
             trim='end'
           >

diff --git a/packages/likec4/app/src/pages/view-page/other-formats.tsx b/packages/likec4/app/src/pages/view-page/other-formats.tsx
@@ -0,0 +1,62 @@
+import { Box, Flex, Tabs } from '@radix-ui/themes'
+import { updateSearchParams, type ViewMode } from '../../router'
+import ViewAsD2 from './other-formats/ViewAsD2'
+import ViewAsDot from './other-formats/ViewAsDot'
+import ViewAsMmd from './other-formats/ViewAsMmd'
+import styles from './view-page.module.css'
+
+type Props = {
+  viewMode: Exclude<ViewMode, 'react'>
+  viewId: string
+}
+export default function ViewDiagramInOtherFormats({ viewId, viewMode }: Props) {
+  return (
+    <Flex
+      asChild
+      position={'fixed'}
+      inset={'0'}
+      pt={'8'}
+      align={'stretch'}
+      px={'2'}
+      direction={'column'}
+    >
+      <Tabs.Root
+        value={viewMode}
+        onValueChange={mode => mode !== viewMode && updateSearchParams({ mode: mode as ViewMode })}
+      >
+        <Box asChild shrink={'0'} grow={'0'}>
+          <Tabs.List>
+            <Tabs.Trigger value='dot'>Graphviz</Tabs.Trigger>
+            <Tabs.Trigger value='mmd'>Mermaid</Tabs.Trigger>
+            <Tabs.Trigger value='d2'>D2</Tabs.Trigger>
+          </Tabs.List>
+        </Box>
+
+        <Box p='2' className={styles.otherFormats}>
+          <Tabs.Content value='dot'>
+            <ViewAsDot viewId={viewId} />
+          </Tabs.Content>
+
+          <Tabs.Content value='mmd'>
+            <ViewAsMmd viewId={viewId} />
+          </Tabs.Content>
+
+          <Tabs.Content value='d2'>
+            <ViewAsD2 viewId={viewId} />
+          </Tabs.Content>
+        </Box>
+      </Tabs.Root>
+    </Flex>
+  )
+
+  // switch (viewMode) {
+  //   case 'dot':
+  //     return <ViewAsDot viewId={viewId} />
+  //   case 'd2':
+  //     return <ViewAsD2 viewId={viewId} />
+  //   case 'mmd':
+  //     return <ViewAsMmd viewId={viewId} />
+  //   default:
+  //     nonexhaustive(viewMode)
+  // }
+}
diff --git a/packages/likec4/app/src/pages/view-page/other-formats/ViewAsD2.tsx b/packages/likec4/app/src/pages/view-page/other-formats/ViewAsD2.tsx
@@ -1,37 +1,25 @@
 import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes'
-import { D2Source } from '~likec4-d2-sources'
+import { d2Source } from 'virtual:likec4/d2-sources'
 
 type ViewAsDotProps = {
   viewId: string
 }
 
 export default function ViewAsD2({ viewId }: ViewAsDotProps) {
   return (
-    <Flex position={'fixed'} inset='0' pt={'8'} align={'stretch'} direction={'row'} px={'2'}>
+    <ScrollArea scrollbars='both'>
       <Box
-        grow={'1'}
-        shrink={'1'}
-        py={'3'}
+        asChild
+        display={'block'}
+        p='2'
         style={{
-          overflow: 'scroll'
+          whiteSpace: 'pre'
         }}
       >
-        <ScrollArea scrollbars='both'>
-          <Box
-            asChild
-            display={'block'}
-            p='2'
-            style={{
-              whiteSpace: 'pre'
-            }}
-          >
-            <Code variant='soft' autoFocus>
-              <D2Source viewId={viewId} />
-            </Code>
-          </Box>
-        </ScrollArea>
+        <Code variant='soft' autoFocus>
+          {d2Source(viewId)}
+        </Code>
       </Box>
-      <Box grow={'1'}>...</Box>
-    </Flex>
+    </ScrollArea>
   )
 }
diff --git a/packages/likec4/app/src/pages/view-page/other-formats/ViewAsDot.tsx b/packages/likec4/app/src/pages/view-page/other-formats/ViewAsDot.tsx
@@ -1,17 +1,28 @@
 import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes'
-import { DotSource } from '~likec4-dot-sources'
+import { dotSource, svgSource } from 'virtual:likec4/dot-sources'
+import styles from '../view-page.module.css'
 
 type ViewAsDotProps = {
   viewId: string
 }
 
 export default function ViewAsDot({ viewId }: ViewAsDotProps) {
   return (
-    <Flex position={'fixed'} inset='0' pt={'8'} align={'stretch'} direction={'row'} px={'2'}>
+    <Flex
+      grow={'1'}
+      align={'stretch'}
+      justify={'start'}
+      direction={'row'}
+      px={'2'}
+      gap={'2'}
+      style={{
+        overflow: 'scroll'
+      }}
+    >
       <Box
-        grow={'1'}
+        grow={'0'}
         shrink={'1'}
-        py={'3'}
+        py={'2'}
         style={{
           overflow: 'scroll'
         }}
@@ -26,12 +37,24 @@ export default function ViewAsDot({ viewId }: ViewAsDotProps) {
             }}
           >
             <Code variant='soft' autoFocus>
-              <DotSource viewId={viewId} />
+              {dotSource(viewId)}
             </Code>
           </Box>
         </ScrollArea>
       </Box>
-      <Box grow={'1'}>...</Box>
+      <Box
+        grow={'1'}
+        shrink={'1'}
+        py={'2'}
+        style={{
+          overflow: 'scroll',
+          overscrollBehavior: 'none'
+        }}
+      >
+        <Box asChild position={'relative'} className={styles.dotSvg}>
+          <div dangerouslySetInnerHTML={{ __html: svgSource(viewId) }}></div>
+        </Box>
+      </Box>
     </Flex>
   )
 }
diff --git a/packages/likec4/app/src/pages/view-page/other-formats/ViewAsMmd.tsx b/packages/likec4/app/src/pages/view-page/other-formats/ViewAsMmd.tsx
@@ -1,13 +1,13 @@
 import { Box, Code, Flex, ScrollArea } from '@radix-ui/themes'
-import { MmdSource } from '~likec4-mmd-sources'
+import { mmdSource } from 'virtual:likec4/mmd-sources'
 
 type ViewAsMmdProps = {
   viewId: string
 }
 
 export default function ViewAsMmd({ viewId }: ViewAsMmdProps) {
   return (
-    <Flex position={'fixed'} inset='0' pt={'8'} align={'stretch'} direction={'row'} px={'2'}>
+    <Flex align={'stretch'} direction={'row'} px={'2'}>
       <Box
         grow={'1'}
         shrink={'1'}
@@ -26,7 +26,7 @@ export default function ViewAsMmd({ viewId }: ViewAsMmdProps) {
             }}
           >
             <Code variant='soft' autoFocus>
-              <MmdSource viewId={viewId} />
+              {mmdSource(viewId)}
             </Code>
           </Box>
         </ScrollArea>

diff --git a/packages/likec4/app/src/pages/view-page/other-formats/index.tsx b/packages/likec4/app/src/pages/view-page/other-formats/index.tsx
diff --git a/packages/likec4/app/src/pages/view-page/view-page.module.css b/packages/likec4/app/src/pages/view-page/view-page.module.css
@@ -55,3 +55,28 @@
     background: var(--color-overlay);
   }
 } */
+
+.dotSvg {
+  & > svg {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.otherFormats {
+  display: flex;
+  align-items: stretch;
+  flex: 1 1 auto;
+  overflow: scroll;
+  position: relative;
+
+  & > :global(.rt-TabsContent) {
+    display: flex;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow: scroll;
+    &[hidden] {
+      display: none;
+    }
+  }
+}
diff --git a/packages/likec4/app/src/pages/view.page.tsx b/packages/likec4/app/src/pages/view.page.tsx
@@ -19,21 +19,15 @@ export function ViewPage({ viewId, viewMode, showUI = true }: ViewPageProps) {
     return <DiagramNotFound viewId={viewId} />
   }
 
-  if (viewMode === 'react') {
-    return (
-      <Fragment key='react'>
-        <ViewAsReact diagram={diagram} />
-        {showUI && <Header diagram={diagram} />}
-      </Fragment>
-    )
-  }
-
   return (
-    <Fragment key={'view-as'}>
-      <Suspense>
-        <ViewAs viewMode={viewMode} viewId={viewId} />
-      </Suspense>
-      {showUI && <Header diagram={diagram} />}
-    </Fragment>
+    <>
+      {viewMode === 'react' && <ViewAsReact diagram={diagram} />}
+      {viewMode !== 'react' && (
+        <Suspense>
+          <ViewAs viewMode={viewMode} viewId={viewId} />
+        </Suspense>
+      )}
+      <Header diagram={diagram} />
+    </>
   )
 }