@dxos/plugin-tldraw 0.10.0

package/src/components/Canvas/theme.css

@@ -0,0 +1,23 @@
+:root {
+  .tl-theme__dark {
+    --color-background: transparent;
+
+    .tlui-toolbar__tools,
+    .tlui-menu,
+    .tlui-style-panel__wrapper {
+      box-shadow: none;
+      border: 1px solid var(--color-separator);
+    }
+  }
+
+  .tl-theme__light {
+    --color-background: transparent;
+
+    .tlui-toolbar__tools,
+    .tlui-menu,
+    .tlui-style-panel__wrapper {
+      box-shadow: none;
+      border: 1px solid var(--color-separator);
+    }
+  }
+}

package/src/components/actions.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { TLRecord } from '@tldraw/tldraw';
+import { isShape } from '@tldraw/tlschema';
+
+import { Doc } from '@dxos/echo-doc';
+import { getDeep } from '@dxos/util';
+
+import type { Tldraw } from '#types';
+
+/**
+ * Snap to grid.
+ */
+export const handleSnap = async (canvas: Tldraw.Canvas) => {
+  const snap = (value: number, tolerance = 40) => {
+    return Math.round(value / tolerance) * tolerance;
+  };
+
+  // TODO(burdon): Use context to access document.
+  const accessor = Doc.createAccessor(canvas, ['content']);
+  accessor.handle.change((doc) => {
+    const map = getDeep<Record<string, TLRecord>>(doc, accessor.path);
+    Object.entries(map ?? {}).forEach(([_id, item]) => {
+      if (isShape(item)) {
+        const { x, y, props } = item;
+        item.x = snap(x);
+        item.y = snap(y);
+        type Rect = { geo: string; w: number; h: number };
+        const { geo, w, h } = props as Rect;
+        switch (geo) {
+          case 'rectangle': {
+            const rect = props as Rect;
+            rect.w = snap(w);
+            rect.h = snap(h);
+          }
+        }
+      }
+    });
+  });
+};

package/src/components/custom/CustomGrid.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type TLGridProps } from '@tldraw/editor';
+import { useDefaultColorTheme } from '@tldraw/tldraw';
+import { modulate } from '@tldraw/utils';
+import React from 'react';
+
+export const GRID_STEPS = [
+  { min: -1, mid: 0.15, step: 64 },
+  { min: 0.05, mid: 0.375, step: 16 },
+  { min: 0.15, mid: 1, step: 4 },
+  { min: 0.7, mid: 2.5, step: 1 },
+];
+
+/**
+ * https://tldraw.dev/examples/ui/custom-grid
+ */
+export const CustomGrid = ({ x, y, z, size }: TLGridProps) => {
+  const theme = useDefaultColorTheme();
+
+  return (
+    <svg className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <defs>
+        {GRID_STEPS.map(({ min, mid, step }, i) => {
+          const s = step * size * z;
+          const xo = 0.5 + x * z;
+          const yo = 0.5 + y * z;
+          const gxo = xo > 0 ? xo % s : s + (xo % s);
+          const gyo = yo > 0 ? yo % s : s + (yo % s);
+          const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * 0.25;
+
+          return (
+            <pattern key={`grid-pattern-${i}`} id={`grid-${step}`} width={s} height={s} patternUnits='userSpaceOnUse'>
+              <line
+                style={{ stroke: theme.grey.solid }}
+                x1={gxo - s}
+                y1={gyo}
+                x2={gxo + s}
+                y2={gyo}
+                opacity={opacity}
+              />
+              <line
+                style={{ stroke: theme.grey.solid }}
+                x1={gxo}
+                y1={gyo - s}
+                x2={gxo}
+                y2={gyo + s}
+                opacity={opacity}
+              />
+            </pattern>
+          );
+        })}
+      </defs>
+      {GRID_STEPS.map(({ step }, i) => {
+        return <rect key={`grid-rect-${i}`} width='100%' height='100%' fill={`url(#grid-${step})`} />;
+      })}
+    </svg>
+  );
+};

package/src/components/custom/CustomMenu.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  DefaultQuickActions,
+  DefaultQuickActionsContent,
+  TldrawUiMenuItem,
+  type TLUiStylePanelProps,
+  useActions,
+  useReadonly,
+} from '@tldraw/tldraw';
+import React from 'react';
+
+export const CustomMenu = ({ isMobile }: TLUiStylePanelProps) => {
+  const actions = useActions();
+  const isReadonlyMode = useReadonly();
+
+  return (
+    <div className='tlui-style-panel__wrapper'>
+      <div className='tlui-menu'>
+        <div className='tlui-buttons__horizontal' data-ismobile={isMobile}>
+          <DefaultQuickActions>
+            <DefaultQuickActionsContent />
+            <TldrawUiMenuItem {...actions.snap} disabled={isReadonlyMode} />
+          </DefaultQuickActions>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/custom/CustomStylePanel.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEditor } from '@tldraw/editor';
+import { DefaultStylePanelContent, type TLUiStylePanelProps, useRelevantStyles } from '@tldraw/tldraw';
+import React, { memo, useCallback } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+export const CustomStylePanel = memo(({ isMobile }: TLUiStylePanelProps) => {
+  const editor = useEditor();
+  const styles = useRelevantStyles();
+  const handlePointerLeave = useCallback(() => {
+    if (!isMobile) {
+      editor.updateInstanceState({ isChangingStyle: false });
+    }
+  }, [editor, isMobile]);
+
+  if (!styles) {
+    return null;
+  }
+
+  // TODO(burdon): Currently the global STYLES (fonts, colors, etc.) are not pluggable.
+  // TODO(burdon): Implement custom style panel to replace fonts.
+  // https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
+  return (
+    <div
+      className={mx('tlui-style-panel', !isMobile && 'tlui-style-panel__wrapper')}
+      data-ismobile={isMobile}
+      onPointerLeave={handlePointerLeave}
+    >
+      {/* <CommonStylePickerSet theme={theme} styles={styles} /> */}
+      {/* {!hideText && <TextStylePickerSet theme={theme} styles={styles} />} */}
+      <DefaultStylePanelContent styles={styles} />
+    </div>
+  );
+});

package/src/components/custom/CustomToolbar.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  ArrowDownToolbarItem,
+  ArrowLeftToolbarItem,
+  ArrowRightToolbarItem,
+  ArrowToolbarItem,
+  ArrowUpToolbarItem,
+  AssetToolbarItem,
+  CheckBoxToolbarItem,
+  CloudToolbarItem,
+  DiamondToolbarItem,
+  DrawToolbarItem,
+  EllipseToolbarItem,
+  EraserToolbarItem,
+  FrameToolbarItem,
+  HandToolbarItem,
+  HexagonToolbarItem,
+  HighlightToolbarItem,
+  LaserToolbarItem,
+  LineToolbarItem,
+  NoteToolbarItem,
+  OvalToolbarItem,
+  RectangleToolbarItem,
+  RhombusToolbarItem,
+  SelectToolbarItem,
+  StarToolbarItem,
+  TextToolbarItem,
+  TldrawUiMenuItem,
+  TriangleToolbarItem,
+  XBoxToolbarItem,
+  useTools,
+} from '@tldraw/tldraw';
+import React, { memo } from 'react';
+
+type ToolSplice = { toolId: string; position: number };
+
+const DefaultToolbarContent = memo(({ toolsToSplice }: { toolsToSplice: ToolSplice[] }) => {
+  const tools = useTools();
+
+  const toolNodes = [
+    <SelectToolbarItem key='select' />,
+    <HandToolbarItem key='hand' />,
+    <DrawToolbarItem key='draw' />,
+    <EraserToolbarItem key='eraser' />,
+    <ArrowToolbarItem key='arrow' />,
+    <TextToolbarItem key='text' />,
+    <NoteToolbarItem key='note' />,
+    <AssetToolbarItem key='asset' />,
+    <RectangleToolbarItem key='rectangle' />,
+    <EllipseToolbarItem key='ellipse' />,
+    <TriangleToolbarItem key='triangle' />,
+    <DiamondToolbarItem key='diamond' />,
+    <HexagonToolbarItem key='hexagon' />,
+    <OvalToolbarItem key='oval' />,
+    <RhombusToolbarItem key='rhombus' />,
+    <StarToolbarItem key='star' />,
+    <CloudToolbarItem key='cloud' />,
+    <XBoxToolbarItem key='xbox' />,
+    <CheckBoxToolbarItem key='checkbox' />,
+    <ArrowLeftToolbarItem key='arrowLeft' />,
+    <ArrowUpToolbarItem key='arrowUp' />,
+    <ArrowDownToolbarItem key='arrowDown' />,
+    <ArrowRightToolbarItem key='arrowRight' />,
+    <LineToolbarItem key='line' />,
+    <HighlightToolbarItem key='highlight' />,
+    <LaserToolbarItem key='laser' />,
+    <FrameToolbarItem key='frame' />,
+  ];
+
+  toolsToSplice.forEach((splice) => {
+    if (splice.position >= 0 && splice.position <= toolNodes.length) {
+      toolNodes.splice(
+        splice.position,
+        0,
+        <TldrawUiMenuItem key={splice.toolId} {...tools[splice.toolId as keyof typeof tools]} />,
+      );
+    }
+  });
+
+  return <>{toolNodes}</>;
+});
+
+DefaultToolbarContent.displayName = 'DefaultToolbarContent';
+
+export { DefaultToolbarContent };

package/src/components/custom/DottedGrid.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TLGridProps, useDefaultColorTheme } from '@tldraw/tldraw';
+import { modulate } from '@tldraw/utils';
+import React, { useId } from 'react';
+
+const GRID_STEPS = [
+  { min: -1, mid: 0.15, step: 64 },
+  { min: 0.05, mid: 0.375, step: 16 },
+  { min: 0.15, mid: 1, step: 4 },
+  { min: 0.7, mid: 2.5, step: 1 },
+];
+
+// This is a modified version of the default grid from tldraw:
+// https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/components/default-components/DefaultGrid.tsx
+//
+// We're overriding it to work around a state coupling bug in tldraw where multiple grid instances
+// on the same page interfere with each other due to shared IDs. Our solution uses React.useId()
+// to generate unique IDs for each grid instance, preventing conflicts.
+//
+// TODO(Zan): Revert this to the default implementation once the issue has been fixed upstream in tldraw.
+export const DottedGrid = ({ x, y, z, size }: TLGridProps) => {
+  const theme = useDefaultColorTheme();
+  const stroke = theme.grey.solid;
+  const id = useId();
+
+  return (
+    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <defs>
+        {GRID_STEPS.map(({ min, mid, step }) => {
+          const s = step * size * z;
+          const xo = 0.5 + x * z;
+          const yo = 0.5 + y * z;
+          const gxo = xo > 0 ? xo % s : s + (xo % s);
+          const gyo = yo > 0 ? yo % s : s + (yo % s);
+          const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;
+          const patternId = `${id}-step-${step}`;
+          return (
+            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>
+              <circle className='tl-grid-dot' cx={gxo} cy={gyo} r={1} opacity={opacity} fill={stroke} stroke={stroke} />
+            </pattern>
+          );
+        })}
+      </defs>
+      {GRID_STEPS.map(({ step }) => {
+        const patternId = `${id}-step-${step}`;
+        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;
+      })}
+    </svg>
+  );
+};

package/src/components/custom/MeshGrid.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type TLGridProps } from '@tldraw/editor';
+import { useDefaultColorTheme } from '@tldraw/tldraw';
+import { modulate } from '@tldraw/utils';
+import React, { useId } from 'react';
+
+const GRID_STEPS = [
+  { min: -1, mid: 0.15, step: 64 },
+  { min: 0.05, mid: 0.375, step: 16 },
+  { min: 0.15, mid: 1, step: 4 },
+  { min: 0.7, mid: 2.5, step: 1 },
+];
+
+export const MeshGrid = ({ x, y, z, size }: TLGridProps) => {
+  const theme = useDefaultColorTheme();
+  const stroke = theme.grey.solid;
+  const id = useId();
+
+  return (
+    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <defs id={id}>
+        {GRID_STEPS.map(({ min, mid, step }, i) => {
+          const s = step * size * z;
+          const xo = 0.5 + x * z;
+          const yo = 0.5 + y * z;
+          const gxo = xo > 0 ? xo % s : s + (xo % s);
+          const gyo = yo > 0 ? yo % s : s + (yo % s);
+          const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * 0.15;
+          const patternId = `${id}-step-${step}`;
+          return (
+            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>
+              <line style={{ stroke }} x1={gxo - s} y1={gyo} x2={gxo + s} y2={gyo} opacity={opacity} />
+              <line style={{ stroke }} x1={gxo} y1={gyo - s} x2={gxo} y2={gyo + s} opacity={opacity} />
+            </pattern>
+          );
+        })}
+      </defs>
+      {GRID_STEPS.map(({ step }) => {
+        const patternId = `${id}-step-${step}`;
+        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;
+      })}
+    </svg>
+  );
+};

package/src/components/custom/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CustomMenu';
+export * from './CustomStylePanel';
+export * from './CustomToolbar';
+export * from './DottedGrid';
+export * from './MeshGrid';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Canvas';

package/src/containers/TldrawArticle/TldrawArticle.tsx

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { useActions } from '@dxos/plugin-graph';
+import { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { Flex, Panel } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { isTauri } from '@dxos/util';
+
+import { CanvasComponent } from '#components';
+import { Tldraw, TldrawCapabilities } from '#types';
+
+export type TldrawArticleProps = SketchVariantSurfaceProps;
+
+export const TldrawArticle = ({ role, attendableId, sketch, canvas, extrinsic }: TldrawArticleProps) => {
+  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
+  const settings = useAtomCapability(TldrawCapabilities.Settings);
+  const id = Obj.getURI(sketch as Obj.Any);
+  const { hasAttention } = useAttention(attendableId);
+  const section = role === AppSurface.Section.role;
+
+  const props = {
+    readonly: role === AppSurface.Slide.role,
+    autoCenter: section ? true : undefined,
+  };
+
+  // TODO(wittjosiah): Genericize tldraw toolbar actions w/ graph.
+  const { graph } = useAppGraph();
+  const actions = useActions(graph, id);
+  const handleThreadCreate = actions.find((action) => action.id === `${id}/comment`)?.data;
+
+  const content = (
+    <CanvasComponent
+      // Force instance per canvas object. Otherwise, sketches share the same instance.
+      key={id}
+      classNames='dx-attention-surface'
+      canvas={canvas}
+      settings={settings}
+      // Section embeds render read-only (no controls/grid) until focused, on every platform; the
+      // isTauri allowance (always-on UI) applies only to the full article/slide roles.
+      // TODO(wittjosiah): Ensure attention works as expected on the mobile app.
+      hideUi={section ? !hasAttention : !hasAttention && !isTauri()}
+      onThreadCreate={handleThreadCreate}
+      {...props}
+    />
+  );
+
+  // An extrinsically-sized embed fills its (possibly non-square) box; otherwise it falls back to a
+  // square so the intrinsic embed has a sensible height.
+  return section ? <Container fill={extrinsic}>{content}</Container> : <Article>{content}</Article>;
+};
+
+const Article = composable<HTMLDivElement, PropsWithChildren>((props, forwardedRef) => (
+  <Panel.Root {...composableProps(props, { classNames: 'aspect-square' })} ref={forwardedRef}>
+    <Panel.Content>{props.children}</Panel.Content>
+  </Panel.Root>
+));
+
+const Container = composable<HTMLDivElement, PropsWithChildren<{ fill?: boolean }>>(
+  ({ fill, ...props }, forwardedRef) => (
+    <Flex
+      {...composableProps(props, { classNames: [fill ? 'h-full w-full' : 'aspect-square', 'overflow-hidden'] })}
+      ref={forwardedRef}
+    >
+      {props.children}
+    </Flex>
+  ),
+);
+
+TldrawArticle.displayName = 'TldrawArticle';

package/src/containers/TldrawArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { TldrawArticle as default } from './TldrawArticle';

package/src/containers/TldrawCard/TldrawCard.stories.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { Sketch } from '@dxos/plugin-illustrator/types';
+import { CardContainer } from '@dxos/react-ui-mosaic/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { meta as pluginMeta } from '#meta';
+import { TldrawBuilder } from '#model';
+import { Tldraw } from '#types';
+
+import { TldrawCard } from './TldrawCard';
+
+const CardStory = () => {
+  const { sketch, canvas } = useMemo(() => {
+    const canvas = Tldraw.makeCanvas({
+      content: new TldrawBuilder()
+        .rectangle({ id: 'a', x: 0, y: 0, text: 'DXOS', color: 'blue', fill: 'solid' })
+        .ellipse({ id: 'b', x: 360, y: 0, text: 'ECHO', color: 'green' })
+        .geo('star', { id: 'c', x: 180, y: 280, text: 'EDGE', color: 'yellow' })
+        .arrow({ from: 'a', to: 'b' })
+        .arrow({ from: 'b', to: 'c' })
+        .build(),
+    });
+    return { sketch: Sketch.make({ canvas }), canvas };
+  }, []);
+
+  return (
+    <CardContainer role='popover' icon={pluginMeta.profile.icon?.key}>
+      <TldrawCard role='card--content' sketch={sketch} canvas={canvas} />
+    </CardContainer>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-tldraw/containers/TldrawCard',
+  render: () => <CardStory />,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['cards'],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Popover: Story = {};

package/src/containers/TldrawCard/TldrawCard.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';
+import { Card } from '@dxos/react-ui';
+
+import { CanvasComponent } from '#components';
+import { Tldraw } from '#types';
+
+export type TldrawCardProps = SketchVariantSurfaceProps;
+
+export const TldrawCard = ({ canvas, editable = false }: TldrawCardProps) => {
+  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));
+  return (
+    <Card.Body>
+      <Card.Section classNames='aspect-square'>
+        <Card.Row fullWidth>
+          <CanvasComponent canvas={canvas} autoCenter readonly={!editable} hideUi={!editable} />
+        </Card.Row>
+      </Card.Section>
+    </Card.Body>
+  );
+};
+
+export default TldrawCard;
+
+TldrawCard.displayName = 'TldrawCard';

package/src/containers/TldrawCard/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { TldrawCard as default } from './TldrawCard';

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const TldrawArticle: ComponentType<any> = lazy(() => import('./TldrawArticle'));
+export const TldrawCard: ComponentType<any> = lazy(() => import('./TldrawCard'));

package/src/hooks/adapter.test.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(burdon): Doesn't work with vitest.
+// import { createTLStore, defaultShapeUtils } from '@tldraw/tldraw';
+
+import { describe, expect, test } from 'vitest';
+
+// TODO(burdon): Named export 'EventEmitter' not found. (running vitest).
+// TODO(burdon): TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" (running p test).
+// TODO(burdon): Storybook broken: Cannot read properties of undefined (reading 'getDocAccessor')
+
+describe('storage adapter', () => {
+  test('migration', async () => {
+    // const store = createTLStore({ shapeUtils: defaultShapeUtils });
+    // expect(store.schema.currentStoreVersion).to.eq(4);
+    expect(true).to.be.true;
+  });
+});