PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Roundup fixes (#2862)

Browse source 
This one is a roundup of superficial changes, apologies for having them
in a single PR.

This PR:
- does some chair re-arranging for one of our hotter paths related to
updating shapes
- changes our type exports for editor components
- adds shape indicator to editor components
- moves canvas to be an editor component
- fixes a CSS bug with hinted buttons
- fixes CSS bugs with the menus
- fixes bad imports in examples

### Change Type

- [x] `major`
This commit is contained in:
Steve Ruiz 2024-02-19 14:52:43 +00:00 committed by GitHub
parent b3d6af4454
commit 9fc5f4459f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
57 changed files with 2191 additions and 1825 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx
View file

@ -8,6 +8,7 @@ import {
TldrawUiButton,
TldrawUiButtonLabel,
useEditor,
useRelevantStyles,
} from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
@ -16,6 +17,8 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
// Styles are complex, sorry. Check our DefaultStylePanel for an example.
const styles = useRelevantStyles()
return (
<DefaultStylePanel {...props}>
<TldrawUiButton
@ -34,7 +37,7 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
>
<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
</TldrawUiButton>
<DefaultStylePanelContent relevantStyles={props.relevantStyles} />
<DefaultStylePanelContent styles={styles} />
</DefaultStylePanel>
)
}

3
apps/examples/src/examples/custom-toolbar/CustomToolbarExample.tsx
View file

@ -1,5 +1,4 @@
import { TLComponents, Tldraw } from '@tldraw/tldraw'
import { DefaultToolbar } from '@tldraw/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar'
import { DefaultToolbar, TLComponents, Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
function CustomToolbar() {

3
apps/examples/src/examples/exploded/ExplodedExample.tsx
View file

@ -1,5 +1,4 @@
import {
Canvas,
ContextMenu,
DefaultContextMenuContent,
TldrawEditor,
@ -39,7 +38,7 @@ export default function ExplodedExample() {
persistenceKey="exploded-example"
>
<TldrawUi>
<ContextMenu canvas={<Canvas />}>
<ContextMenu>
<DefaultContextMenuContent />
</ContextMenu>
</TldrawUi>

2
apps/examples/src/index.tsx
View file

@ -21,7 +21,7 @@ setDefaultEditorAssetUrls(assetUrls)
setDefaultUiAssetUrls(assetUrls)
const gettingStartedExamples = examples.find((e) => e.id === 'Getting Started')
if (!gettingStartedExamples) throw new Error('Could not find getting started exmaples')
const basicExample = gettingStartedExamples.value.find((e) => e.priority === 1)
const basicExample = gettingStartedExamples.value.find((e) => e.title === 'Persistence key')
if (!basicExample) throw new Error('Could not find initial example')
const router = createBrowserRouter([

144
packages/editor/api-report.md
View file

@ -306,11 +306,6 @@ export const CAMERA_SLIDE_FRICTION = 0.09;
// @public (undocumented)
export function canonicalizeRotation(a: number): number;
// @public (undocumented)
export function Canvas({ className }: {
className?: string;
}): JSX_2.Element;
// @public (undocumented)
export class Circle2d extends Geometry2d {
constructor(config: Omit<Geometry2dOptions, 'isClosed'> & {
@ -449,50 +444,49 @@ export const DEFAULT_ANIMATION_OPTIONS: {
export function DefaultBackground(): JSX_2.Element;
// @public (undocumented)
export const DefaultBrush: TLBrushComponent;
export const DefaultBrush: ({ brush, color, opacity, className }: TLBrushProps) => JSX_2.Element;
// @public (undocumented)
export const DefaultCollaboratorHint: TLCollaboratorHintComponent;
export function DefaultCanvas({ className }: TLCanvasComponentProps): JSX_2.Element;
// @public (undocumented)
export const DefaultCursor: NamedExoticComponent< {
className?: string | undefined;
point: null | VecModel;
zoom: number;
color?: string | undefined;
name: null | string;
chatMessage: string;
}>;
export function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity, }: TLCollaboratorHintProps): JSX_2.Element;
// @public (undocumented)
export const DefaultCursor: NamedExoticComponent<TLCursorProps>;
// @public (undocumented)
export const DefaultErrorFallback: TLErrorFallbackComponent;
// @public (undocumented)
export const DefaultGrid: TLGridComponent;
export function DefaultGrid({ x, y, z, size }: TLGridProps): JSX_2.Element;
// @public (undocumented)
export const DefaultHandle: TLHandleComponent;
export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps): JSX_2.Element;
// @public (undocumented)
export const DefaultHandles: TLHandlesComponent;
export const DefaultHandles: ({ children }: TLHandlesProps) => JSX_2.Element;
// @public (undocumented)
export const DefaultHoveredShapeIndicator: TLHoveredShapeIndicatorComponent;
export function DefaultHoveredShapeIndicator({ shapeId }: TLHoveredShapeIndicatorProps): JSX_2.Element | null;
// @public (undocumented)
export const DefaultScribble: TLScribbleComponent;
export function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX_2.Element | null;
// @public (undocumented)
export const DefaultSelectionBackground: TLSelectionBackgroundComponent;
export function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX_2.Element;
// @public (undocumented)
export const DefaultSelectionForeground: TLSelectionForegroundComponent;
export function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps): JSX_2.Element;
// @public (undocumented)
export const DefaultSnapIndicator: TLSnapIndicatorComponent;
export const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
// @public (undocumented)
export const DefaultSpinner: TLSpinnerComponent;
export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX_2.Element;
// @public (undocumented)
export function DefaultSpinner(): JSX_2.Element;
// @public (undocumented)
export const DefaultSvgDefs: () => null;
@ -1587,14 +1581,6 @@ export function setRuntimeOverrides(input: Partial<typeof runtime>): void;
// @public (undocumented)
export function setUserPreferences(user: TLUserPreferences): void;
// @public (undocumented)
export const ShapeIndicator: React_3.NamedExoticComponent<{
id: TLShapeId;
color?: string | undefined;
opacity?: number | undefined;
className?: string | undefined;
}>;
// @public (undocumented)
export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
constructor(editor: Editor);
@ -1898,9 +1884,6 @@ export type TLArrowPoint = {
arrowhead: TLArrowShapeArrowheadStyle;
};
// @public (undocumented)
export type TLBackgroundComponent = ComponentType;
// @public (undocumented)
export type TLBaseBoxShape = TLBaseShape<string, {
w: number;
@ -1932,12 +1915,12 @@ export type TLBeforeCreateHandler<R extends TLRecord> = (record: R, source: 'rem
export type TLBeforeDeleteHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => false | void;
// @public (undocumented)
export type TLBrushComponent = ComponentType<{
export type TLBrushProps = {
brush: BoxModel;
color?: string;
opacity?: number;
className?: string;
}>;
};
// @public (undocumented)
export type TLCancelEvent = (info: TLCancelEventInfo) => void;
@ -1965,14 +1948,14 @@ export type TLClickEventInfo = TLBaseEventInfo & {
export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
// @public (undocumented)
export type TLCollaboratorHintComponent = ComponentType<{
export type TLCollaboratorHintProps = {
className?: string;
point: VecModel;
viewport: Box;
zoom: number;
opacity?: number;
color: string;
}>;
};
// @public (undocumented)
export type TLCommand<Name extends string = any, Data = any> = {
@ -2020,14 +2003,14 @@ export interface TLContent {
}
// @public (undocumented)
export type TLCursorComponent = ComponentType<{
export type TLCursorProps = {
className?: string;
point: null | VecModel;
zoom: number;
color?: string;
name: null | string;
chatMessage: string;
}>;
};
// @public (undocumented)
export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
@ -2224,27 +2207,26 @@ export type TLExternalContentSource = {
};
// @public (undocumented)
export type TLGridComponent = ComponentType<{
export type TLGridProps = {
x: number;
y: number;
z: number;
size: number;
}>;
};
// @public (undocumented)
export type TLHandleComponent = ComponentType<{
export type TLHandleProps = {
shapeId: TLShapeId;
handle: TLHandle;
zoom: number;
isCoarse: boolean;
className?: string;
}>;
};
// @public (undocumented)
export type TLHandlesComponent = ComponentType<{
className?: string;
export type TLHandlesProps = {
children: any;
}>;
};
// @public (undocumented)
export type TLHistoryEntry = TLCommand | TLHistoryMark;
@ -2258,12 +2240,9 @@ export type TLHistoryMark = {
};
// @public (undocumented)
export type TLHoveredShapeIndicatorComponent = ComponentType<{
export type TLHoveredShapeIndicatorProps = {
shapeId: TLShapeId;
}>;
// @public (undocumented)
export type TLInFrontOfTheCanvas = ComponentType<object>;
};
// @public (undocumented)
export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
@ -2343,9 +2322,6 @@ export type TLOnRotateHandler<T extends TLShape> = TLEventChangeHandler<T>;
// @public (undocumented)
export type TLOnRotateStartHandler<T extends TLShape> = TLEventStartHandler<T>;
// @public (undocumented)
export type TLOnTheCanvas = ComponentType<object>;
// @public (undocumented)
export type TLOnTranslateEndHandler<T extends TLShape> = TLEventChangeHandler<T>;
@ -2442,25 +2418,25 @@ export type TLRotationSnapshot = {
};
// @public (undocumented)
export type TLScribbleComponent = ComponentType<{
export type TLScribbleProps = {
scribble: TLScribble;
zoom: number;
color?: string;
opacity?: number;
className?: string;
}>;
};
// @public (undocumented)
export type TLSelectionBackgroundComponent = React_3.ComponentType<{
export type TLSelectionBackgroundProps = {
bounds: Box;
rotation: number;
}>;
};
// @public (undocumented)
export type TLSelectionForegroundComponent = ComponentType<{
export type TLSelectionForegroundProps = {
bounds: Box;
rotation: number;
}>;
};
// @public (undocumented)
export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
@ -2495,12 +2471,12 @@ export interface TLSessionStateSnapshot {
}
// @public (undocumented)
export type TLShapeIndicatorComponent = React_3.ComponentType<{
id: TLShapeId;
export type TLShapeIndicatorProps = {
shapeId: TLShapeId;
color?: string | undefined;
opacity?: number;
className?: string;
}>;
};
// @public (undocumented)
export interface TLShapeUtilCanvasSvgDef {
@ -2526,14 +2502,11 @@ export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends Shap
export type TLShapeUtilFlag<T> = (shape: T) => boolean;
// @public (undocumented)
export type TLSnapIndicatorComponent = React_3.ComponentType<{
export type TLSnapIndicatorProps = {
className?: string;
line: SnapIndicator;
zoom: number;
}>;
// @public (undocumented)
export type TLSpinnerComponent = ComponentType<object>;
};
// @public (undocumented)
export interface TLStateNodeConstructor {
@ -2584,9 +2557,6 @@ export type TLStoreWithStatus = {
readonly error?: undefined;
};
// @public (undocumented)
export type TLSvgDefsComponent = React.ComponentType;
// @public (undocumented)
export type TLSvgOptions = {
bounds: Box;
@ -2672,6 +2642,34 @@ export function useContainer(): HTMLDivElement;
// @public (undocumented)
export function useEditor(): Editor;
// @public (undocumented)
export function useEditorComponents(): Partial<{
Background: ComponentType | null;
SvgDefs: ComponentType | null;
Brush: ComponentType<TLBrushProps> | null;
ZoomBrush: ComponentType<TLBrushProps> | null;
ShapeIndicator: ComponentType<TLShapeIndicatorProps> | null;
Cursor: ComponentType<TLCursorProps> | null;
Canvas: ComponentType<TLCanvasComponentProps> | null;
CollaboratorBrush: ComponentType<TLBrushProps> | null;
CollaboratorCursor: ComponentType<TLCursorProps> | null;
CollaboratorHint: ComponentType<TLCollaboratorHintProps> | null;
CollaboratorShapeIndicator: ComponentType<TLShapeIndicatorProps> | null;
Grid: ComponentType<TLGridProps> | null;
Scribble: ComponentType<TLScribbleProps> | null;
CollaboratorScribble: ComponentType<TLScribbleProps> | null;
SnapIndicator: ComponentType<TLSnapIndicatorProps> | null;
Handles: ComponentType<TLHandlesProps> | null;
Handle: ComponentType<TLHandleProps> | null;
Spinner: ComponentType | null;
SelectionForeground: ComponentType<TLSelectionForegroundProps> | null;
SelectionBackground: ComponentType<TLSelectionBackgroundProps> | null;
HoveredShapeIndicator: ComponentType<TLHoveredShapeIndicatorProps> | null;
OnTheCanvas: ComponentType | null;
InFrontOfTheCanvas: ComponentType | null;
LoadingScreen: ComponentType | null;
} & ErrorComponents> & ErrorComponents;
// @public (undocumented)
export function useIsCropping(shapeId: TLShapeId): boolean;

1380
packages/editor/api/api.json
View file

File diff suppressed because it is too large Load diff

50
packages/editor/src/index.ts
View file

@ -34,7 +34,6 @@ export {
type TldrawEditorBaseProps,
type TldrawEditorProps,
} from './lib/TldrawEditor'
export { Canvas } from './lib/components/Canvas'
export {
ErrorBoundary,
OptionalErrorBoundary,
@ -42,63 +41,53 @@ export {
} from './lib/components/ErrorBoundary'
export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
export { ShapeIndicator, type TLShapeIndicatorComponent } from './lib/components/ShapeIndicator'
export {
DefaultBackground,
type TLBackgroundComponent,
} from './lib/components/default-components/DefaultBackground'
export {
DefaultBrush,
type TLBrushComponent,
} from './lib/components/default-components/DefaultBrush'
export { DefaultBackground } from './lib/components/default-components/DefaultBackground'
export { DefaultBrush, type TLBrushProps } from './lib/components/default-components/DefaultBrush'
export { DefaultCanvas } from './lib/components/default-components/DefaultCanvas'
export {
DefaultCollaboratorHint,
type TLCollaboratorHintComponent,
type TLCollaboratorHintProps,
} from './lib/components/default-components/DefaultCollaboratorHint'
export {
DefaultCursor,
type TLCursorComponent,
type TLCursorProps,
} from './lib/components/default-components/DefaultCursor'
export { DefaultErrorFallback } from './lib/components/default-components/DefaultErrorFallback'
export { DefaultGrid, type TLGridComponent } from './lib/components/default-components/DefaultGrid'
export { DefaultGrid, type TLGridProps } from './lib/components/default-components/DefaultGrid'
export {
DefaultHandle,
type TLHandleComponent,
type TLHandleProps,
} from './lib/components/default-components/DefaultHandle'
export {
DefaultHandles,
type TLHandlesComponent,
type TLHandlesProps,
} from './lib/components/default-components/DefaultHandles'
export {
DefaultHoveredShapeIndicator,
type TLHoveredShapeIndicatorComponent,
type TLHoveredShapeIndicatorProps,
} from './lib/components/default-components/DefaultHoveredShapeIndicator'
export { type TLInFrontOfTheCanvas } from './lib/components/default-components/DefaultInFrontOfTheCanvas'
export { type TLOnTheCanvas } from './lib/components/default-components/DefaultOnTheCanvas'
export {
DefaultScribble,
type TLScribbleComponent,
type TLScribbleProps,
} from './lib/components/default-components/DefaultScribble'
export {
DefaultSelectionBackground,
type TLSelectionBackgroundComponent,
type TLSelectionBackgroundProps,
} from './lib/components/default-components/DefaultSelectionBackground'
export {
DefaultSelectionForeground,
type TLSelectionForegroundComponent,
type TLSelectionForegroundProps,
} from './lib/components/default-components/DefaultSelectionForeground'
export {
DefaultShapeIndicator,
type TLShapeIndicatorProps,
} from './lib/components/default-components/DefaultShapeIndicator'
export {
DefaultSnapIndicator,
type TLSnapIndicatorComponent,
type TLSnapIndicatorProps,
} from './lib/components/default-components/DefaultSnapIndictor'
export {
DefaultSpinner,
type TLSpinnerComponent,
} from './lib/components/default-components/DefaultSpinner'
export {
DefaultSvgDefs,
type TLSvgDefsComponent,
} from './lib/components/default-components/DefaultSvgDefs'
export { DefaultSpinner } from './lib/components/default-components/DefaultSpinner'
export { DefaultSvgDefs } from './lib/components/default-components/DefaultSvgDefs'
export {
TAB_ID,
createSessionStateSnapshotSignal,
@ -256,6 +245,7 @@ export { type TLResizeHandle, type TLSelectionHandle } from './lib/editor/types/
export { ContainerProvider, useContainer } from './lib/hooks/useContainer'
export { getCursor } from './lib/hooks/useCursor'
export { EditorContext, useEditor } from './lib/hooks/useEditor'
export { useEditorComponents } from './lib/hooks/useEditorComponents'
export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
export { useShallowArrayIdentity, useShallowObjectIdentity } from './lib/hooks/useIdentity'
export { useIsCropping } from './lib/hooks/useIsCropping'

7
packages/editor/src/lib/TldrawEditor.tsx
View file

@ -11,7 +11,6 @@ import React, {
} from 'react'
import classNames from 'classnames'
import { Canvas } from './components/Canvas'
import { OptionalErrorBoundary } from './components/ErrorBoundary'
import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
import { DefaultLoadingScreen } from './components/default-components/DefaultLoadingScreen'
@ -309,6 +308,8 @@ function TldrawEditorWithReadyStore({
() => editor?.getCrashingError() ?? null
)
const { Canvas } = useEditorComponents()
if (!editor) {
return null
}
@ -331,7 +332,7 @@ function TldrawEditorWithReadyStore({
) : (
<EditorContext.Provider value={editor}>
<Layout autoFocus={autoFocus} onMount={onMount}>
{children}
{children ?? (Canvas ? <Canvas /> : null)}
</Layout>
</EditorContext.Provider>
)}
@ -356,7 +357,7 @@ function Layout({
useFocusEvents(autoFocus)
useOnMount(onMount)
return children ?? <Canvas />
return <>{children}</>
}
function Crash({ crashingError }: { crashingError: unknown }): null {

2
packages/editor/src/lib/components/LiveCollaborators.tsx
View file

@ -144,7 +144,7 @@ const Collaborator = track(function Collaborator({
<CollaboratorShapeIndicator
className="tl-collaborator__shape-indicator"
key={userId + '_' + shapeId}
id={shapeId}
shapeId={shapeId}
color={color}
opacity={0.5}
/>

5
packages/editor/src/lib/components/default-components/DefaultBackground.tsx
View file

@ -1,8 +1,3 @@
import { ComponentType } from 'react'
/** @public */
export type TLBackgroundComponent = ComponentType
/** @public */
export function DefaultBackground() {
return <div className="tl-background" />

8
packages/editor/src/lib/components/default-components/DefaultBrush.tsx
View file

@ -1,18 +1,18 @@
import { BoxModel } from '@tldraw/tlschema'
import { ComponentType, useRef } from 'react'
import { useRef } from 'react'
import { useTransform } from '../../hooks/useTransform'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLBrushComponent = ComponentType<{
export type TLBrushProps = {
brush: BoxModel
color?: string
opacity?: number
className?: string
}>
}
/** @public */
export const DefaultBrush: TLBrushComponent = ({ brush, color, opacity, className }) => {
export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {
const rSvg = useRef<SVGSVGElement>(null)
useTransform(rSvg, brush.x, brush.y)

53
packages/editor/src/lib/components/Canvas.tsx → packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
View file

@ -3,27 +3,29 @@ import { TLHandle, TLShapeId } from '@tldraw/tlschema'
import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
import classNames from 'classnames'
import React from 'react'
import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS } from '../constants'
import { useCanvasEvents } from '../hooks/useCanvasEvents'
import { useCoarsePointer } from '../hooks/useCoarsePointer'
import { useDocumentEvents } from '../hooks/useDocumentEvents'
import { useEditor } from '../hooks/useEditor'
import { useEditorComponents } from '../hooks/useEditorComponents'
import { useFixSafariDoubleTapZoomPencilEvents } from '../hooks/useFixSafariDoubleTapZoomPencilEvents'
import { useGestureEvents } from '../hooks/useGestureEvents'
import { useHandleEvents } from '../hooks/useHandleEvents'
import { useScreenBounds } from '../hooks/useScreenBounds'
import { Mat } from '../primitives/Mat'
import { Vec } from '../primitives/Vec'
import { toDomPrecision } from '../primitives/utils'
import { debugFlags } from '../utils/debug-flags'
import { GeometryDebuggingView } from './GeometryDebuggingView'
import { LiveCollaborators } from './LiveCollaborators'
import { Shape } from './Shape'
import { ShapeIndicator } from './ShapeIndicator'
import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS } from '../../constants'
import { useCanvasEvents } from '../../hooks/useCanvasEvents'
import { useCoarsePointer } from '../../hooks/useCoarsePointer'
import { useDocumentEvents } from '../../hooks/useDocumentEvents'
import { useEditor } from '../../hooks/useEditor'
import { useEditorComponents } from '../../hooks/useEditorComponents'
import { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'
import { useGestureEvents } from '../../hooks/useGestureEvents'
import { useHandleEvents } from '../../hooks/useHandleEvents'
import { useScreenBounds } from '../../hooks/useScreenBounds'
import { Mat } from '../../primitives/Mat'
import { Vec } from '../../primitives/Vec'
import { toDomPrecision } from '../../primitives/utils'
import { debugFlags } from '../../utils/debug-flags'
import { GeometryDebuggingView } from '../GeometryDebuggingView'
import { LiveCollaborators } from '../LiveCollaborators'
import { Shape } from '../Shape'
/** @public */
export function Canvas({ className }: { className?: string }) {
export type TLCanvasComponentProps = { className?: string }
/** @public */
export function DefaultCanvas({ className }: TLCanvasComponentProps) {
const editor = useEditor()
const { Background, SvgDefs } = useEditorComponents()
@ -378,12 +380,19 @@ function SelectedIdIndicators() {
[editor]
)
const { ShapeIndicator } = useEditorComponents()
if (!ShapeIndicator) return null
if (!shouldDisplay) return null
return (
<>
{selectedShapeIds.map((id) => (
<ShapeIndicator key={id + '_indicator'} className="tl-user-indicator__selected" id={id} />
<ShapeIndicator
key={id + '_indicator'}
className="tl-user-indicator__selected"
shapeId={id}
/>
))}
</>
)
@ -413,15 +422,17 @@ const HoveredShapeIndicator = function HoveredShapeIndicator() {
const HintedShapeIndicator = track(function HintedShapeIndicator() {
const editor = useEditor()
const { ShapeIndicator } = useEditorComponents()
const ids = dedupe(editor.getHintingShapeIds())
if (!ids.length) return null
if (!ShapeIndicator) return null
return (
<>
{ids.map((id) => (
<ShapeIndicator className="tl-user-indicator__hint" id={id} key={id + '_hinting'} />
<ShapeIndicator className="tl-user-indicator__hint" shapeId={id} key={id + '_hinting'} />
))}
</>
)

10
packages/editor/src/lib/components/default-components/DefaultCollaboratorHint.tsx
View file

@ -1,30 +1,30 @@
import { VecModel } from '@tldraw/tlschema'
import classNames from 'classnames'
import { ComponentType, useRef } from 'react'
import { useRef } from 'react'
import { useTransform } from '../../hooks/useTransform'
import { Box } from '../../primitives/Box'
import { Vec } from '../../primitives/Vec'
import { clamp } from '../../primitives/utils'
/** @public */
export type TLCollaboratorHintComponent = ComponentType<{
export type TLCollaboratorHintProps = {
className?: string
point: VecModel
viewport: Box
zoom: number
opacity?: number
color: string
}>
}
/** @public */
export const DefaultCollaboratorHint: TLCollaboratorHintComponent = ({
export function DefaultCollaboratorHint({
className,
zoom,
point,
color,
viewport,
opacity = 1,
}) => {
}: TLCollaboratorHintProps) {
const rSvg = useRef<SVGSVGElement>(null)
useTransform(

21
packages/editor/src/lib/components/default-components/DefaultCursor.tsx
View file

@ -1,19 +1,27 @@
import { VecModel } from '@tldraw/tlschema'
import classNames from 'classnames'
import { ComponentType, memo, useRef } from 'react'
import { memo, useRef } from 'react'
import { useTransform } from '../../hooks/useTransform'
/** @public */
export type TLCursorComponent = ComponentType<{
export type TLCursorProps = {
className?: string
point: VecModel | null
zoom: number
color?: string
name: string | null
chatMessage: string
}>
}
const _Cursor: TLCursorComponent = ({ className, zoom, point, color, name, chatMessage }) => {
/** @public */
export const DefaultCursor = memo(function DefaultCursor({
className,
zoom,
point,
color,
name,
chatMessage,
}: TLCursorProps) {
const rCursor = useRef<HTMLDivElement>(null)
useTransform(rCursor, point?.x, point?.y, 1 / zoom)
@ -44,7 +52,4 @@ const _Cursor: TLCursorComponent = ({ className, zoom, point, color, name, chatM
)}
</div>
)
}
/** @public */
export const DefaultCursor = memo(_Cursor)
})

8
packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
View file

@ -3,9 +3,9 @@ import classNames from 'classnames'
import { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { Editor } from '../../editor/Editor'
import { EditorContext } from '../../hooks/useEditor'
import { useEditorComponents } from '../../hooks/useEditorComponents'
import { hardResetEditor } from '../../utils/hardResetEditor'
import { refreshPage } from '../../utils/refreshPage'
import { Canvas } from '../Canvas'
import { ErrorBoundary } from '../ErrorBoundary'
const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
@ -23,6 +23,8 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
const [didCopy, setDidCopy] = useState(false)
const [shouldShowResetConfirmation, setShouldShowResetConfirmation] = useState(false)
const { Canvas } = useEditorComponents()
const errorMessage = error instanceof Error ? error.message : String(error)
const errorStack = error instanceof Error ? error.stack : null
@ -135,9 +137,7 @@ My browser: ${navigator.userAgent}`
// a plain grey background.
<ErrorBoundary onError={noop} fallback={() => null}>
<EditorContext.Provider value={editor}>
<div className="tl-overlay tl-error-boundary__canvas">
<Canvas />
</div>
<div className="tl-overlay tl-error-boundary__canvas">{Canvas ? <Canvas /> : null}</div>
</EditorContext.Provider>
</ErrorBoundary>
)}

7
packages/editor/src/lib/components/default-components/DefaultGrid.tsx
View file

@ -1,17 +1,16 @@
import { modulate } from '@tldraw/utils'
import { ComponentType } from 'react'
import { GRID_STEPS } from '../../constants'
/** @public */
export type TLGridComponent = ComponentType<{
export type TLGridProps = {
x: number
y: number
z: number
size: number
}>
}
/** @public */
export const DefaultGrid: TLGridComponent = ({ x, y, z, size }) => {
export function DefaultGrid({ x, y, z, size }: TLGridProps) {
return (
<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>

7
packages/editor/src/lib/components/default-components/DefaultHandle.tsx
View file

@ -1,19 +1,18 @@
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
import classNames from 'classnames'
import { ComponentType } from 'react'
import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS } from '../../constants'
/** @public */
export type TLHandleComponent = ComponentType<{
export type TLHandleProps = {
shapeId: TLShapeId
handle: TLHandle
zoom: number
isCoarse: boolean
className?: string
}>
}
/** @public */
export const DefaultHandle: TLHandleComponent = ({ handle, isCoarse, className, zoom }) => {
export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {
const bgRadius = (isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoom
const fgRadius = (handle.type === 'create' && isCoarse ? 3 : 4) / zoom

9
packages/editor/src/lib/components/default-components/DefaultHandles.tsx
View file

@ -1,12 +1,9 @@
import { ComponentType } from 'react'
/** @public */
export type TLHandlesComponent = ComponentType<{
className?: string
export type TLHandlesProps = {
children: any
}>
}
/** @public */
export const DefaultHandles: TLHandlesComponent = ({ children }) => {
export const DefaultHandles = ({ children }: TLHandlesProps) => {
return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
}

13
packages/editor/src/lib/components/default-components/DefaultHoveredShapeIndicator.tsx
View file

@ -1,13 +1,14 @@
import { TLShapeId } from '@tldraw/tlschema'
import { ComponentType } from 'react'
import { ShapeIndicator } from '../ShapeIndicator'
import { useEditorComponents } from '../../hooks/useEditorComponents'
/** @public */
export type TLHoveredShapeIndicatorComponent = ComponentType<{
export type TLHoveredShapeIndicatorProps = {
shapeId: TLShapeId
}>
}
/** @public */
export const DefaultHoveredShapeIndicator: TLHoveredShapeIndicatorComponent = ({ shapeId }) => {
return <ShapeIndicator className="tl-user-indicator__hovered" id={shapeId} />
export function DefaultHoveredShapeIndicator({ shapeId }: TLHoveredShapeIndicatorProps) {
const { ShapeIndicator } = useEditorComponents()
if (!ShapeIndicator) return null
return <ShapeIndicator className="tl-user-indicator__hovered" shapeId={shapeId} />
}

4
packages/editor/src/lib/components/default-components/DefaultInFrontOfTheCanvas.tsx
View file

@ -1,4 +0,0 @@
import { ComponentType } from 'react'
/** @public */
export type TLInFrontOfTheCanvas = ComponentType<object>

6
packages/editor/src/lib/components/default-components/DefaultLoadingScreen.tsx
View file

@ -1,10 +1,6 @@
import { ComponentType } from 'react'
import { LoadingScreen } from '../../TldrawEditor'
/** @public */
export type TLLoadingScreenComponent = ComponentType<object>
/** @public */
export const DefaultLoadingScreen: TLLoadingScreenComponent = () => {
export const DefaultLoadingScreen = () => {
return <LoadingScreen>Connecting...</LoadingScreen>
}

4
packages/editor/src/lib/components/default-components/DefaultOnTheCanvas.tsx
View file

@ -1,4 +0,0 @@
import { ComponentType } from 'react'
/** @public */
export type TLOnTheCanvas = ComponentType<object>

13
packages/editor/src/lib/components/default-components/DefaultScribble.tsx
View file

@ -1,25 +1,18 @@
import { TLScribble } from '@tldraw/tlschema'
import classNames from 'classnames'
import { ComponentType } from 'react'
import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
/** @public */
export type TLScribbleComponent = ComponentType<{
export type TLScribbleProps = {
scribble: TLScribble
zoom: number
color?: string
opacity?: number
className?: string
}>
}
/** @public */
export const DefaultScribble: TLScribbleComponent = ({
scribble,
zoom,
color,
opacity,
className,
}) => {
export function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {
if (!scribble.points.length) return null
return (

9
packages/editor/src/lib/components/default-components/DefaultSelectionBackground.tsx
View file

@ -4,16 +4,13 @@ import { Box } from '../../primitives/Box'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLSelectionBackgroundComponent = React.ComponentType<{
export type TLSelectionBackgroundProps = {
bounds: Box
rotation: number
}>
}
/** @public */
export const DefaultSelectionBackground: TLSelectionBackgroundComponent = ({
bounds,
rotation,
}) => {
export function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps) {
const rDiv = React.useRef<HTMLDivElement>(null)
useTransform(rDiv, bounds.x, bounds.y, 1, rotation)

11
packages/editor/src/lib/components/default-components/DefaultSelectionForeground.tsx
View file

@ -1,22 +1,19 @@
import { useValue } from '@tldraw/state'
import classNames from 'classnames'
import { ComponentType, useRef } from 'react'
import { useRef } from 'react'
import { useEditor } from '../../hooks/useEditor'
import { useTransform } from '../../hooks/useTransform'
import { Box } from '../../primitives/Box'
import { toDomPrecision } from '../../primitives/utils'
/** @public */
export type TLSelectionForegroundComponent = ComponentType<{
export type TLSelectionForegroundProps = {
bounds: Box
rotation: number
}>
}
/** @public */
export const DefaultSelectionForeground: TLSelectionForegroundComponent = ({
bounds,
rotation,
}) => {
export function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {
const editor = useEditor()
const rSvg = useRef<SVGSVGElement>(null)

37
packages/editor/src/lib/components/ShapeIndicator.tsx → packages/editor/src/lib/components/default-components/DefaultShapeIndicator.tsx
View file

@ -1,12 +1,12 @@
import { useStateTracking, useValue } from '@tldraw/state'
import { TLShape, TLShapeId } from '@tldraw/tlschema'
import classNames from 'classnames'
import * as React from 'react'
import type { Editor } from '../editor/Editor'
import { ShapeUtil } from '../editor/shapes/ShapeUtil'
import { useEditor } from '../hooks/useEditor'
import { useEditorComponents } from '../hooks/useEditorComponents'
import { OptionalErrorBoundary } from './ErrorBoundary'
import { memo } from 'react'
import type { Editor } from '../../editor/Editor'
import { ShapeUtil } from '../../editor/shapes/ShapeUtil'
import { useEditor } from '../../hooks/useEditor'
import { useEditorComponents } from '../../hooks/useEditorComponents'
import { OptionalErrorBoundary } from '../ErrorBoundary'
class ShapeWithPropsEquality {
constructor(public shape: TLShape | undefined) {}
@ -51,24 +51,30 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
}
/** @public */
export type TLShapeIndicatorComponent = React.ComponentType<{
id: TLShapeId
export type TLShapeIndicatorProps = {
shapeId: TLShapeId
color?: string | undefined
opacity?: number
className?: string
}>
}
const _ShapeIndicator: TLShapeIndicatorComponent = ({ id, className, color, opacity }) => {
/** @public */
export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
shapeId,
className,
color,
opacity,
}: TLShapeIndicatorProps) {
const editor = useEditor()
const transform = useValue(
'transform',
() => {
const pageTransform = editor.getShapePageTransform(id)
const pageTransform = editor.getShapePageTransform(shapeId)
if (!pageTransform) return ''
return pageTransform.toCssString()
},
[editor, id]
[editor, shapeId]
)
return (
@ -79,11 +85,8 @@ const _ShapeIndicator: TLShapeIndicatorComponent = ({ id, className, color, opac
stroke={color ?? 'var(--color-selected)'}
opacity={opacity}
>
<InnerIndicator editor={editor} id={id} />
<InnerIndicator editor={editor} id={shapeId} />
</g>
</svg>
)
}
/** @public */
export const ShapeIndicator = React.memo(_ShapeIndicator)
})

6
packages/editor/src/lib/components/default-components/DefaultSnapIndictor.tsx
View file

@ -154,14 +154,14 @@ function GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSna
}
/** @public */
export type TLSnapIndicatorComponent = React.ComponentType<{
export type TLSnapIndicatorProps = {
className?: string
line: SnapIndicator
zoom: number
}>
}
/** @public */
export const DefaultSnapIndicator: TLSnapIndicatorComponent = ({ className, line, zoom }) => {
export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
return (
<svg className={classNames('tl-overlays__item', className)}>
{line.type === 'points' ? (

7
packages/editor/src/lib/components/default-components/DefaultSpinner.tsx
View file

@ -1,10 +1,5 @@
import { ComponentType } from 'react'
/** @public */
export type TLSpinnerComponent = ComponentType<object>
/** @public */
export const DefaultSpinner: TLSpinnerComponent = () => {
export function DefaultSpinner() {
return (
<svg width={16} height={16} viewBox="0 0 16 16">
<g strokeWidth={2} fill="none" fillRule="evenodd">

3
packages/editor/src/lib/components/default-components/DefaultSvgDefs.tsx
View file

@ -1,6 +1,3 @@
/** @public */
export type TLSvgDefsComponent = React.ComponentType
/** @public */
export const DefaultSvgDefs = () => {
return null

176
packages/editor/src/lib/editor/Editor.ts
View file

@ -53,6 +53,7 @@ import {
getIndicesBetween,
getOwnProperty,
hasOwnProperty,
objectMapValues,
sortById,
sortByIndex,
structuredClone,
@ -6723,23 +6724,27 @@ export class Editor extends EventEmitter<TLEventMap> {
let remaining = duration
let t: number
type FromTo = { prop: string; from: number; to: number }
type ShapeAnimation = { partial: TLShapePartial; values: FromTo[] }
type ShapeAnimation = {
partial: TLShapePartial
values: { prop: string; from: number; to: number }[]
}
const animations: ShapeAnimation[] = []
partials.forEach((partial) => {
if (!partial) return
let partial: TLShapePartial | null | undefined, result: ShapeAnimation
for (let i = 0, n = partials.length; i < n; i++) {
partial = partials[i]
if (!partial) continue
const result: ShapeAnimation = {
result = {
partial,
values: [],
}
const shape = this.getShape(partial.id)!
if (!shape) continue
if (!shape) return
// We only support animations for certain props
for (const key of ['x', 'y', 'rotation'] as const) {
if (partial[key] !== undefined && shape[key] !== partial[key]) {
result.values.push({ prop: key, from: shape[key], to: partial[key] as number })
@ -6748,7 +6753,7 @@ export class Editor extends EventEmitter<TLEventMap> {
animations.push(result)
this.animatingShapes.set(shape.id, animationId)
})
}
let value: ShapeAnimation
@ -6773,14 +6778,17 @@ export class Editor extends EventEmitter<TLEventMap> {
const { animatingShapes } = this
try {
const tPartials: TLShapePartial[] = []
const updates: TLShapePartial[] = []
for (let i = 0; i < animations.length; i++) {
let animationIdForShape: string | undefined
for (let i = 0, n = animations.length; i < n; i++) {
value = animations[i]
// Is the animation for this shape still active?
animationIdForShape = animatingShapes.get(value.partial.id)
if (animationIdForShape !== animationId) continue
if (animatingShapes.get(value.partial.id) === animationId) {
tPartials.push({
// Create the update
updates.push({
id: value.partial.id,
type: value.partial.type,
...value.values.reduce((acc, { prop, from, to }) => {
@ -6789,12 +6797,8 @@ export class Editor extends EventEmitter<TLEventMap> {
}, {} as any),
})
}
}
this._updateShapes(tPartials, { squashing: true })
} catch (e) {
// noop
}
this._updateShapes(updates, { squashing: true })
}
this.addListener('tick', handleTick)
@ -6968,20 +6972,24 @@ export class Editor extends EventEmitter<TLEventMap> {
partials: (TLShapePartial<T> | null | undefined)[],
historyOptions?: TLCommandHistoryOptions
) {
let compactedPartials = compact(partials)
if (this.animatingShapes.size > 0) {
compactedPartials.forEach((p) => this.animatingShapes.delete(p.id))
const compactedPartials: TLShapePartial<T>[] = Array(partials.length)
for (let i = 0, n = partials.length; i < n; i++) {
const partial = partials[i]
if (!partial) continue
// Get the current shape referenced by the partial
const shape = this.getShape(partial.id)
if (!shape) continue
// If the shape is locked and we're not setting isLocked to true, continue
if (this.isShapeOrAncestorLocked(shape) && !Object.hasOwn(partial, 'isLocked')) continue
// Remove any animating shapes from the list of partials
this.animatingShapes.delete(partial.id)
compactedPartials.push(partial)
}
compactedPartials = compactedPartials.filter((p) => {
const shape = this.getShape(p.id)
if (!shape) return false
// Only allow changes to unlocked shapes or changes to the isLocked property (otherwise we cannot unlock a shape)
if (this.isShapeOrAncestorLocked(shape) && !Object.hasOwn(p, 'isLocked')) return false
return true
})
this._updateShapes(compactedPartials, historyOptions)
return this
}
@ -6995,45 +7003,49 @@ export class Editor extends EventEmitter<TLEventMap> {
) => {
if (this.getInstanceState().isReadonly) return null
const partials = compact(_partials)
const snapshots: Record<string, TLShape> = {}
const updates: Record<string, TLShape> = {}
const snapshots = Object.fromEntries(
compact(partials.map(({ id }) => this.getShape(id))).map((shape) => {
return [shape.id, shape]
})
)
let shape: TLShape | undefined
let updated: TLShape
if (partials.length <= 0) return null
for (let i = 0, n = _partials.length; i < n; i++) {
const partial = _partials[i]
// Skip nullish partials (sometimes created by map fns returning undefined)
if (!partial) continue
const updated = compact(
partials.map((partial) => {
const prev = snapshots[partial.id]
if (!prev) return null
return applyPartialToShape(prev, partial)
})
)
// Get the current shape referenced by the partial
// If there is no current shape, we'll skip this update
shape = this.getShape(partial.id)
if (!shape) continue
const updates = Object.fromEntries(updated.map((shape) => [shape.id, shape]))
// Get the updated version of the shape
// If the update had no effect, we'll skip this update
updated = applyPartialToShape(shape, partial)
if (updated === shape) continue
snapshots[shape.id] = shape
updates[shape.id] = updated
}
return { data: { snapshots, updates }, ...historyOptions }
},
{
do: ({ updates }) => {
// Iterate through array; if any shape has an onUpdate handler, call it
// Iterate through array; if any shape has an onBeforeUpdate handler, call it
// and, if the handler returns a new shape, replace the old shape with
// the new one. This is used for example when repositioning a text shape
// based on its new text content.
const result = Object.values(updates)
for (let i = 0; i < result.length; i++) {
const shape = result[i]
this.store.put(
objectMapValues(updates).map((shape) => {
const current = this.store.get(shape.id)
if (!current) continue
if (current) {
const next = this.getShapeUtil(shape).onBeforeUpdate?.(current, shape)
if (next) {
result[i] = next
if (next) return next
}
}
this.store.put(result)
return shape
})
)
},
undo: ({ snapshots }) => {
this.store.put(Object.values(snapshots))
@ -8954,44 +8966,34 @@ function alertMaxShapes(editor: Editor, pageId = editor.getCurrentPageId()) {
function applyPartialToShape<T extends TLShape>(prev: T, partial?: TLShapePartial<T>): T {
if (!partial) return prev
let next = null as null | T
for (const [k, v] of Object.entries(partial)) {
const entries = Object.entries(partial)
for (let i = 0, n = entries.length; i < n; i++) {
const [k, v] = entries[i]
if (v === undefined) continue
switch (k) {
case 'id':
case 'type':
// Is the key a special key? We don't update those
if (k === 'id' || k === 'type' || k === 'typeName') continue
// Is the value the same as it was before?
if (v === (prev as any)[k]) continue
// There's a new value, so create the new shape if we haven't already (should we be cloning this?)
if (!next) next = { ...prev }
// for props / meta properties, we support updates with partials of this object
if (k === 'props' || k === 'meta') {
next[k] = { ...prev[k] } as JsonObject
for (const [nextKey, nextValue] of Object.entries(v as object)) {
if (nextValue !== undefined) {
;(next[k] as JsonObject)[nextKey] = nextValue
}
}
continue
default: {
if (v !== (prev as any)[k]) {
if (!next) {
next = { ...prev }
}
if (k === 'props') {
// props property
const nextProps = { ...prev.props } as JsonObject
for (const [propKey, propValue] of Object.entries(v as object)) {
if (propValue !== undefined) {
nextProps[propKey] = propValue
}
}
next!.props = nextProps
} else if (k === 'meta') {
// meta property
const nextMeta = { ...prev.meta } as JsonObject
for (const [metaKey, metaValue] of Object.entries(v as object)) {
if (metaValue !== undefined) {
nextMeta[metaKey] = metaValue
}
}
next!.meta = nextMeta
} else {
// base property
;(next as any)[k] = v
}
}
}
}
}
return next ?? prev
if (!next) return prev
return next
}

96
packages/editor/src/lib/hooks/useEditorComponents.tsx
View file

@ -1,80 +1,80 @@
import { createContext, useContext, useMemo } from 'react'
import { ShapeIndicator, TLShapeIndicatorComponent } from '../components/ShapeIndicator'
import { ComponentType, createContext, useContext, useMemo } from 'react'
import { DefaultBackground } from '../components/default-components/DefaultBackground'
import { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'
import {
DefaultBackground,
TLBackgroundComponent,
} from '../components/default-components/DefaultBackground'
import { DefaultBrush, TLBrushComponent } from '../components/default-components/DefaultBrush'
DefaultCanvas,
TLCanvasComponentProps,
} from '../components/default-components/DefaultCanvas'
import {
DefaultCollaboratorHint,
TLCollaboratorHintComponent,
TLCollaboratorHintProps,
} from '../components/default-components/DefaultCollaboratorHint'
import { DefaultCursor, TLCursorComponent } from '../components/default-components/DefaultCursor'
import { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'
import {
DefaultErrorFallback,
TLErrorFallbackComponent,
} from '../components/default-components/DefaultErrorFallback'
import { DefaultGrid, TLGridComponent } from '../components/default-components/DefaultGrid'
import { DefaultHandle, TLHandleComponent } from '../components/default-components/DefaultHandle'
import { DefaultHandles, TLHandlesComponent } from '../components/default-components/DefaultHandles'
import { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'
import { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'
import { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'
import {
DefaultHoveredShapeIndicator,
TLHoveredShapeIndicatorComponent,
TLHoveredShapeIndicatorProps,
} from '../components/default-components/DefaultHoveredShapeIndicator'
import { TLInFrontOfTheCanvas } from '../components/default-components/DefaultInFrontOfTheCanvas'
import { TLLoadingScreenComponent } from '../components/default-components/DefaultLoadingScreen'
import { TLOnTheCanvas } from '../components/default-components/DefaultOnTheCanvas'
import {
DefaultScribble,
TLScribbleComponent,
} from '../components/default-components/DefaultScribble'
import { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'
import {
DefaultSelectionBackground,
TLSelectionBackgroundComponent,
TLSelectionBackgroundProps,
} from '../components/default-components/DefaultSelectionBackground'
import {
DefaultSelectionForeground,
TLSelectionForegroundComponent,
TLSelectionForegroundProps,
} from '../components/default-components/DefaultSelectionForeground'
import {
DefaultShapeErrorFallback,
TLShapeErrorFallbackComponent,
} from '../components/default-components/DefaultShapeErrorFallback'
import {
DefaultShapeIndicator,
TLShapeIndicatorProps,
} from '../components/default-components/DefaultShapeIndicator'
import {
DefaultShapeIndicatorErrorFallback,
TLShapeIndicatorErrorFallbackComponent,
} from '../components/default-components/DefaultShapeIndicatorErrorFallback'
import {
DefaultSnapIndicator,
TLSnapIndicatorComponent,
TLSnapIndicatorProps,
} from '../components/default-components/DefaultSnapIndictor'
import { DefaultSpinner, TLSpinnerComponent } from '../components/default-components/DefaultSpinner'
import { DefaultSvgDefs, TLSvgDefsComponent } from '../components/default-components/DefaultSvgDefs'
import { DefaultSpinner } from '../components/default-components/DefaultSpinner'
import { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'
import { useShallowObjectIdentity } from './useIdentity'
export interface BaseEditorComponents {
Background: TLBackgroundComponent
SvgDefs: TLSvgDefsComponent
Brush: TLBrushComponent
ZoomBrush: TLBrushComponent
Cursor: TLCursorComponent
CollaboratorBrush: TLBrushComponent
CollaboratorCursor: TLCursorComponent
CollaboratorHint: TLCollaboratorHintComponent
CollaboratorShapeIndicator: TLShapeIndicatorComponent
Grid: TLGridComponent
Scribble: TLScribbleComponent
CollaboratorScribble: TLScribbleComponent
SnapIndicator: TLSnapIndicatorComponent
Handles: TLHandlesComponent
Handle: TLHandleComponent
Spinner: TLSpinnerComponent
SelectionForeground: TLSelectionForegroundComponent
SelectionBackground: TLSelectionBackgroundComponent
HoveredShapeIndicator: TLHoveredShapeIndicatorComponent
OnTheCanvas: TLOnTheCanvas
InFrontOfTheCanvas: TLInFrontOfTheCanvas
LoadingScreen: TLLoadingScreenComponent
Background: ComponentType
SvgDefs: ComponentType
Brush: ComponentType<TLBrushProps>
ZoomBrush: ComponentType<TLBrushProps>
ShapeIndicator: ComponentType<TLShapeIndicatorProps>
Cursor: ComponentType<TLCursorProps>
Canvas: ComponentType<TLCanvasComponentProps>
CollaboratorBrush: ComponentType<TLBrushProps>
CollaboratorCursor: ComponentType<TLCursorProps>
CollaboratorHint: ComponentType<TLCollaboratorHintProps>
CollaboratorShapeIndicator: ComponentType<TLShapeIndicatorProps>
Grid: ComponentType<TLGridProps>
Scribble: ComponentType<TLScribbleProps>
CollaboratorScribble: ComponentType<TLScribbleProps>
SnapIndicator: ComponentType<TLSnapIndicatorProps>
Handles: ComponentType<TLHandlesProps>
Handle: ComponentType<TLHandleProps>
Spinner: ComponentType
SelectionForeground: ComponentType<TLSelectionForegroundProps>
SelectionBackground: ComponentType<TLSelectionBackgroundProps>
HoveredShapeIndicator: ComponentType<TLHoveredShapeIndicatorProps>
OnTheCanvas: ComponentType
InFrontOfTheCanvas: ComponentType
LoadingScreen: ComponentType
}
// These will always have defaults
@ -116,7 +116,7 @@ export function EditorComponentsProvider({
Cursor: DefaultCursor,
CollaboratorCursor: DefaultCursor,
CollaboratorHint: DefaultCollaboratorHint,
CollaboratorShapeIndicator: ShapeIndicator,
CollaboratorShapeIndicator: DefaultShapeIndicator,
Grid: DefaultGrid,
Scribble: DefaultScribble,
SnapIndicator: DefaultSnapIndicator,
@ -130,8 +130,10 @@ export function EditorComponentsProvider({
SelectionBackground: DefaultSelectionBackground,
SelectionForeground: DefaultSelectionForeground,
HoveredShapeIndicator: DefaultHoveredShapeIndicator,
ShapeIndicator: DefaultShapeIndicator,
OnTheCanvas: null,
InFrontOfTheCanvas: null,
Canvas: DefaultCanvas,
..._overrides,
}),
[_overrides]

57
packages/tldraw/api-report.md
View file

@ -74,9 +74,9 @@ import { TLExitEventHandler } from '@tldraw/editor';
import { TLFrameShape } from '@tldraw/editor';
import { TLGeoShape } from '@tldraw/editor';
import { TLHandle } from '@tldraw/editor';
import { TLHandlesComponent } from '@tldraw/editor';
import { TLHandlesProps } from '@tldraw/editor';
import { TLHighlightShape } from '@tldraw/editor';
import { TLHoveredShapeIndicatorComponent } from '@tldraw/editor';
import { TLHoveredShapeIndicatorProps } from '@tldraw/editor';
import { TLImageShape } from '@tldraw/editor';
import { TLInterruptEvent } from '@tldraw/editor';
import { TLKeyboardEvent } from '@tldraw/editor';
@ -100,9 +100,9 @@ import { TLPointerEventName } from '@tldraw/editor';
import { TLRecord } from '@tldraw/editor';
import { TLRotationSnapshot } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
import { TLScribbleComponent } from '@tldraw/editor';
import { TLSelectionBackgroundComponent } from '@tldraw/editor';
import { TLSelectionForegroundComponent } from '@tldraw/editor';
import { TLScribbleProps } from '@tldraw/editor';
import { TLSelectionBackgroundProps } from '@tldraw/editor';
import { TLSelectionForegroundProps } from '@tldraw/editor';
import { TLSelectionHandle } from '@tldraw/editor';
import { TLShape } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
@ -347,7 +347,7 @@ export const defaultShapeUtils: TLAnyShapeUtilConstructor[];
export const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
// @public (undocumented)
export function DefaultStylePanelContent({ relevantStyles }: TLUiStylePanelContentProps): JSX_2.Element | null;
export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
// @public (undocumented)
export const DefaultToolbar: React_2.NamedExoticComponent<object>;
@ -1173,21 +1173,6 @@ export function Tldraw(props: TldrawProps): JSX_2.Element;
// @public (undocumented)
export const TLDRAW_FILE_EXTENSION: ".tldr";
// @public (undocumented)
export function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX_2.Element;
// @public (undocumented)
export interface TldrawCropHandlesProps {
// (undocumented)
height: number;
// (undocumented)
hideAlternateHandles: boolean;
// (undocumented)
size: number;
// (undocumented)
width: number;
}
// @public (undocumented)
export interface TldrawFile {
// (undocumented)
@ -1199,10 +1184,10 @@ export interface TldrawFile {
}
// @public (undocumented)
export const TldrawHandles: TLHandlesComponent;
export function TldrawHandles({ children }: TLHandlesProps): JSX_2.Element | null;
// @public (undocumented)
export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent;
export function TldrawHoveredShapeIndicator({ shapeId }: TLHoveredShapeIndicatorProps): JSX_2.Element | null;
// @public
export const TldrawImage: NamedExoticComponent< {
@ -1240,13 +1225,13 @@ export type TldrawProps = (Omit<TldrawUiProps, 'components'> & Omit<TldrawEditor
});
// @public (undocumented)
export const TldrawScribble: TLScribbleComponent;
export function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX_2.Element | null;
// @public (undocumented)
export const TldrawSelectionBackground: TLSelectionBackgroundComponent;
export const TldrawSelectionBackground: ({ bounds, rotation }: TLSelectionBackgroundProps) => JSX_2.Element | null;
// @public (undocumented)
export const TldrawSelectionForeground: TLSelectionForegroundComponent;
export const TldrawSelectionForeground: MemoExoticComponent<({ bounds, rotation, }: TLSelectionForegroundProps) => JSX_2.Element | null>;
// @public (undocumented)
export const TldrawUi: React_2.NamedExoticComponent<TldrawUiProps>;
@ -1313,7 +1298,7 @@ export function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }
export function TldrawUiDropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element;
// @public (undocumented)
export function TldrawUiDropdownMenuGroup({ children, size, }: TLUiDropdownMenuGroupProps): JSX_2.Element;
export function TldrawUiDropdownMenuGroup({ children }: TLUiDropdownMenuGroupProps): JSX_2.Element;
// @public (undocumented)
export function TldrawUiDropdownMenuIndicator(): JSX_2.Element;
@ -1349,7 +1334,7 @@ export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string,
export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
// @public (undocumented)
export function TldrawUiMenuGroup({ id, label, small, children }: TLUiMenuGroupProps): any;
export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps): any;
// @public (undocumented)
export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
@ -1459,8 +1444,6 @@ export type TLUiComponentsProviderProps = {
// @public (undocumented)
export interface TLUiContextMenuProps {
// (undocumented)
canvas: any;
// (undocumented)
children?: any;
}
@ -1549,7 +1532,6 @@ export type TLUiDropdownMenuContentProps = {
// @public (undocumented)
export type TLUiDropdownMenuGroupProps = {
children: any;
size?: 'medium' | 'small' | 'tiny' | 'wide';
};
// @public (undocumented)
@ -1866,7 +1848,6 @@ export type TLUiMenuGroupProps<TranslationKey extends string = string> = {
label?: {
[key: string]: TranslationKey;
} | TranslationKey;
small?: boolean;
children?: any;
};
@ -1894,7 +1875,7 @@ export type TLUiMenuSubmenuProps<Translation extends string = string> = {
} | Translation;
disabled?: boolean;
children: any;
size?: 'large' | 'medium' | 'small' | 'tiny';
size?: 'medium' | 'small' | 'tiny' | 'wide';
};
// @public (undocumented)
@ -1951,7 +1932,7 @@ export interface TLUiSliderProps {
// @public (undocumented)
export type TLUiStylePanelContentProps = {
relevantStyles: ReturnType<typeof useRelevantStyles>;
styles: ReturnType<typeof useRelevantStyles>;
};
// @public (undocumented)
@ -1960,11 +1941,6 @@ export interface TLUiStylePanelProps {
children?: any;
// (undocumented)
isMobile?: boolean;
// (undocumented)
relevantStyles: {
styles: ReadonlySharedStyleMap;
opacity: SharedStyle<number>;
} | null;
}
// @public (undocumented)
@ -2136,6 +2112,9 @@ export function useNativeClipboardEvents(): void;
// @public (undocumented)
export function useReadonly(): boolean;
// @public (undocumented)
export function useRelevantStyles(stylesToCheck?: readonly (EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow"> | EnumStyleProp<"dashed" | "dotted" | "draw" | "solid"> | EnumStyleProp<"l" | "m" | "s" | "xl"> | EnumStyleProp<"none" | "pattern" | "semi" | "solid">)[]): null | ReadonlySharedStyleMap;
// @public (undocumented)
export function useTldrawUiComponents(): Partial<{
ContextMenu: ComponentType<TLUiContextMenuProps> | null;

558
packages/tldraw/api/api.json
View file

@ -3185,7 +3185,7 @@
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function DefaultStylePanelContent({ relevantStyles }: "
"text": "export declare function DefaultStylePanelContent({ styles }: "
},
{
"kind": "Reference",
@ -3223,7 +3223,7 @@
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ relevantStyles }",
"parameterName": "{ styles }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
@ -13722,183 +13722,6 @@
],
"name": "Tldraw"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandles:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: "
},
{
"kind": "Reference",
"text": "TldrawCropHandlesProps",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps:interface"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 5
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ size, width, height, hideAlternateHandles, }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
}
],
"name": "TldrawCropHandles"
},
{
"kind": "Interface",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps:interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface TldrawCropHandlesProps "
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx",
"releaseTag": "Public",
"name": "TldrawCropHandlesProps",
"preserveMemberOrder": false,
"members": [
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#height:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "height: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "height",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#hideAlternateHandles:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "hideAlternateHandles: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "hideAlternateHandles",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#size:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "size: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "size",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TldrawCropHandlesProps#width:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "width: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "width",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
}
],
"extendsTokenRanges": []
},
{
"kind": "Interface",
"canonicalReference": "@tldraw/tldraw!TldrawFile:interface",
@ -14005,52 +13828,114 @@
"extendsTokenRanges": []
},
{
"kind": "Variable",
"canonicalReference": "@tldraw/tldraw!TldrawHandles:var",
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!TldrawHandles:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "TldrawHandles: "
"text": "export declare function TldrawHandles({ children }: "
},
{
"kind": "Reference",
"text": "TLHandlesComponent",
"canonicalReference": "@tldraw/editor!TLHandlesComponent:type"
"text": "TLHandlesProps",
"canonicalReference": "@tldraw/editor!TLHandlesProps:type"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawHandles.tsx",
"isReadonly": true,
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 6
},
"releaseTag": "Public",
"name": "TldrawHandles",
"variableTypeTokenRange": {
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ children }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
}
],
"name": "TldrawHandles"
},
{
"kind": "Variable",
"canonicalReference": "@tldraw/tldraw!TldrawHoveredShapeIndicator:var",
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!TldrawHoveredShapeIndicator:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "TldrawHoveredShapeIndicator: "
"text": "export declare function TldrawHoveredShapeIndicator({ shapeId }: "
},
{
"kind": "Reference",
"text": "TLHoveredShapeIndicatorComponent",
"canonicalReference": "@tldraw/editor!TLHoveredShapeIndicatorComponent:type"
"text": "TLHoveredShapeIndicatorProps",
"canonicalReference": "@tldraw/editor!TLHoveredShapeIndicatorProps:type"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawHoveredShapeIndicator.tsx",
"isReadonly": true,
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 6
},
"releaseTag": "Public",
"name": "TldrawHoveredShapeIndicator",
"variableTypeTokenRange": {
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ shapeId }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
}
],
"name": "TldrawHoveredShapeIndicator"
},
{
"kind": "Variable",
@ -14340,28 +14225,59 @@
}
},
{
"kind": "Variable",
"canonicalReference": "@tldraw/tldraw!TldrawScribble:var",
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!TldrawScribble:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "TldrawScribble: "
"text": "export declare function TldrawScribble({ scribble, zoom, color, opacity, className }: "
},
{
"kind": "Reference",
"text": "TLScribbleComponent",
"canonicalReference": "@tldraw/editor!TLScribbleComponent:type"
"text": "TLScribbleProps",
"canonicalReference": "@tldraw/editor!TLScribbleProps:type"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawScribble.tsx",
"isReadonly": true,
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 6
},
"releaseTag": "Public",
"name": "TldrawScribble",
"variableTypeTokenRange": {
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ scribble, zoom, color, opacity, className }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
}
],
"name": "TldrawScribble"
},
{
"kind": "Variable",
@ -14372,10 +14288,27 @@
"kind": "Content",
"text": "TldrawSelectionBackground: "
},
{
"kind": "Content",
"text": "({ bounds, rotation }: "
},
{
"kind": "Reference",
"text": "TLSelectionBackgroundComponent",
"canonicalReference": "@tldraw/editor!TLSelectionBackgroundComponent:type"
"text": "TLSelectionBackgroundProps",
"canonicalReference": "@tldraw/editor!TLSelectionBackgroundProps:type"
},
{
"kind": "Content",
"text": ") => import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawSelectionBackground.tsx",
@ -14384,7 +14317,7 @@
"name": "TldrawSelectionBackground",
"variableTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
"endIndex": 6
}
},
{
@ -14396,10 +14329,36 @@
"kind": "Content",
"text": "TldrawSelectionForeground: "
},
{
"kind": "Content",
"text": "import(\"react\")."
},
{
"kind": "Reference",
"text": "TLSelectionForegroundComponent",
"canonicalReference": "@tldraw/editor!TLSelectionForegroundComponent:type"
"text": "MemoExoticComponent",
"canonicalReference": "@types/react!React.MemoExoticComponent:type"
},
{
"kind": "Content",
"text": "<({ bounds, rotation, }: "
},
{
"kind": "Reference",
"text": "TLSelectionForegroundProps",
"canonicalReference": "@tldraw/editor!TLSelectionForegroundProps:type"
},
{
"kind": "Content",
"text": ") => import(\"react/jsx-runtime\")."
},
{
"kind": "Reference",
"text": "JSX.Element",
"canonicalReference": "@types/react!JSX.Element:interface"
},
{
"kind": "Content",
"text": " | null>"
}
],
"fileUrlPath": "packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx",
@ -14408,7 +14367,7 @@
"name": "TldrawSelectionForeground",
"variableTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
"endIndex": 8
}
},
{
@ -15525,7 +15484,7 @@
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function TldrawUiDropdownMenuGroup({ children, size, }: "
"text": "export declare function TldrawUiDropdownMenuGroup({ children }: "
},
{
"kind": "Reference",
@ -15559,7 +15518,7 @@
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ children, size, }",
"parameterName": "{ children }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
@ -16181,7 +16140,7 @@
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function TldrawUiMenuGroup({ id, label, small, children }: "
"text": "export declare function TldrawUiMenuGroup({ id, label, children }: "
},
{
"kind": "Reference",
@ -16210,7 +16169,7 @@
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ id, label, small, children }",
"parameterName": "{ id, label, children }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
@ -17518,34 +17477,6 @@
"name": "TLUiContextMenuProps",
"preserveMemberOrder": false,
"members": [
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TLUiContextMenuProps#canvas:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "canvas: "
},
{
"kind": "Content",
"text": "any"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx",
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "canvas",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TLUiContextMenuProps#children:member",
@ -18144,7 +18075,7 @@
},
{
"kind": "Content",
"text": "{\n children: any;\n size?: 'medium' | 'small' | 'tiny' | 'wide';\n}"
"text": "{\n children: any;\n}"
},
{
"kind": "Content",
@ -21351,7 +21282,7 @@
},
{
"kind": "Content",
"text": "{\n id: string;\n label?: {\n [key: string]: TranslationKey;\n } | TranslationKey;\n small?: boolean;\n children?: any;\n}"
"text": "{\n id: string;\n label?: {\n [key: string]: TranslationKey;\n } | TranslationKey;\n children?: any;\n}"
},
{
"kind": "Content",
@ -21506,7 +21437,7 @@
},
{
"kind": "Content",
"text": "{\n id: string;\n label?: {\n [key: string]: Translation;\n } | Translation;\n disabled?: boolean;\n children: any;\n size?: 'large' | 'medium' | 'small' | 'tiny';\n}"
"text": "{\n id: string;\n label?: {\n [key: string]: Translation;\n } | Translation;\n disabled?: boolean;\n children: any;\n size?: 'medium' | 'small' | 'tiny' | 'wide';\n}"
},
{
"kind": "Content",
@ -21808,7 +21739,7 @@
},
{
"kind": "Content",
"text": "{\n relevantStyles: "
"text": "{\n styles: "
},
{
"kind": "Reference",
@ -21822,7 +21753,7 @@
{
"kind": "Reference",
"text": "useRelevantStyles",
"canonicalReference": "@tldraw/tldraw!~useRelevantStyles:function"
"canonicalReference": "@tldraw/tldraw!useRelevantStyles:function"
},
{
"kind": "Content",
@ -21851,7 +21782,7 @@
"text": "export interface TLUiStylePanelProps "
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx",
"fileUrlPath": "packages/tldraw/.tsbuild-api/lib/ui/components/StylePanel/DefaultStylePanel.d.ts",
"releaseTag": "Public",
"name": "TLUiStylePanelProps",
"preserveMemberOrder": false,
@ -21874,6 +21805,7 @@
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx",
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
@ -21901,6 +21833,7 @@
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx",
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
@ -21909,51 +21842,6 @@
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tldraw!TLUiStylePanelProps#relevantStyles:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "relevantStyles: "
},
{
"kind": "Content",
"text": "{\n styles: "
},
{
"kind": "Reference",
"text": "ReadonlySharedStyleMap",
"canonicalReference": "@tldraw/editor!ReadonlySharedStyleMap:class"
},
{
"kind": "Content",
"text": ";\n opacity: "
},
{
"kind": "Reference",
"text": "SharedStyle",
"canonicalReference": "@tldraw/editor!SharedStyle:type"
},
{
"kind": "Content",
"text": "<number>;\n } | null"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "relevantStyles",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 6
}
}
],
"extendsTokenRanges": []
@ -23678,6 +23566,92 @@
"parameters": [],
"name": "useReadonly"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!useRelevantStyles:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function useRelevantStyles(stylesToCheck?: "
},
{
"kind": "Content",
"text": "readonly (import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "EnumStyleProp",
"canonicalReference": "@tldraw/tlschema!EnumStyleProp:class"
},
{
"kind": "Content",
"text": "<\"black\" | \"blue\" | \"green\" | \"grey\" | \"light-blue\" | \"light-green\" | \"light-red\" | \"light-violet\" | \"orange\" | \"red\" | \"violet\" | \"yellow\"> | import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "EnumStyleProp",
"canonicalReference": "@tldraw/tlschema!EnumStyleProp:class"
},
{
"kind": "Content",
"text": "<\"dashed\" | \"dotted\" | \"draw\" | \"solid\"> | import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "EnumStyleProp",
"canonicalReference": "@tldraw/tlschema!EnumStyleProp:class"
},
{
"kind": "Content",
"text": "<\"l\" | \"m\" | \"s\" | \"xl\"> | import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "EnumStyleProp",
"canonicalReference": "@tldraw/tlschema!EnumStyleProp:class"
},
{
"kind": "Content",
"text": "<\"none\" | \"pattern\" | \"semi\" | \"solid\">)[]"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "null | "
},
{
"kind": "Reference",
"text": "ReadonlySharedStyleMap",
"canonicalReference": "@tldraw/editor!ReadonlySharedStyleMap:class"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts",
"returnTypeTokenRange": {
"startIndex": 11,
"endIndex": 13
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "stylesToCheck",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 10
},
"isOptional": true
}
],
"name": "useRelevantStyles"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!useTldrawUiComponents:function(1)",

2
packages/tldraw/src/index.ts
View file

@ -4,7 +4,6 @@
export * from '@tldraw/editor'
export { Tldraw, type TldrawProps } from './lib/Tldraw'
export { TldrawImage, type TldrawImageProps } from './lib/TldrawImage'
export { TldrawCropHandles, type TldrawCropHandlesProps } from './lib/canvas/TldrawCropHandles'
export { TldrawHandles } from './lib/canvas/TldrawHandles'
export { TldrawHoveredShapeIndicator } from './lib/canvas/TldrawHoveredShapeIndicator'
export { TldrawScribble } from './lib/canvas/TldrawScribble'
@ -82,6 +81,7 @@ export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
export { useReadonly } from './lib/ui/hooks/useReadonly'
export { useRelevantStyles } from './lib/ui/hooks/useRevelantStyles'
export {
toolbarItem,
useToolbarSchema,

8
packages/tldraw/src/lib/Tldraw.test.tsx
View file

@ -9,7 +9,8 @@ describe('<Tldraw />', () => {
await renderTldrawComponent(
<Tldraw>
<div data-testid="canvas-1" />
</Tldraw>
</Tldraw>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
@ -26,7 +27,7 @@ describe('<Tldraw />', () => {
)
}
await renderTldrawComponent(<TestComponent />)
await renderTldrawComponent(<TestComponent />, { waitForPatterns: false })
await screen.findByTestId('canvas-1')
})
@ -59,7 +60,8 @@ describe('<Tldraw />', () => {
const rendered = await renderTldrawComponent(
<Tldraw shapeUtils={[FakeShapeUtil1]}>
<div data-testid="canvas-1" />
</Tldraw>
</Tldraw>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')

21
packages/tldraw/src/lib/Tldraw.tsx
View file

@ -1,5 +1,4 @@
import {
Canvas,
Editor,
ErrorScreen,
LoadingScreen,
@ -13,6 +12,7 @@ import {
TldrawEditorBaseProps,
assert,
useEditor,
useEditorComponents,
useShallowArrayIdentity,
useShallowObjectIdentity,
} from '@tldraw/editor'
@ -125,7 +125,7 @@ export function Tldraw(props: TldrawProps) {
tools={toolsWithDefaults}
>
<TldrawUi {...rest} components={componentsWithDefault}>
<InsideOfEditorContext
<InsideOfEditorAndUiContext
maxImageDimension={maxImageDimension}
maxAssetSize={maxAssetSize}
acceptedImageMimeTypes={acceptedImageMimeTypes}
@ -147,8 +147,8 @@ const defaultAcceptedImageMimeTypes = Object.freeze([
const defaultAcceptedVideoMimeTypes = Object.freeze(['video/mp4', 'video/quicktime'])
// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor.
function InsideOfEditorContext({
// We put these hooks into a component here so that they can run inside of the context provided by TldrawEditor and TldrawUi.
function InsideOfEditorAndUiContext({
maxImageDimension = 1000,
maxAssetSize = 10 * 1024 * 1024, // 10mb
acceptedImageMimeTypes = defaultAcceptedImageMimeTypes,
@ -182,10 +182,19 @@ function InsideOfEditorContext({
if (editor) return onMountEvent?.(editor)
}, [editor, onMountEvent])
const { Canvas } = useEditorComponents()
const { ContextMenu } = useTldrawUiComponents()
if (!ContextMenu) return <Canvas />
return <ContextMenu canvas={<Canvas />} />
if (ContextMenu) {
// should wrap canvas
return <ContextMenu />
}
if (Canvas) {
return <Canvas />
}
return null
}
// duped from tldraw editor

2
packages/tldraw/src/lib/canvas/TldrawCropHandles.tsx
View file

@ -1,7 +1,6 @@
import { toDomPrecision } from '@tldraw/editor'
import classNames from 'classnames'
/** @public */
export interface TldrawCropHandlesProps {
size: number
width: number
@ -9,7 +8,6 @@ export interface TldrawCropHandlesProps {
hideAlternateHandles: boolean
}
/** @public */
export function TldrawCropHandles({
size,
width,

4
packages/tldraw/src/lib/canvas/TldrawHandles.tsx
View file

@ -1,7 +1,7 @@
import { TLHandlesComponent, useEditor, useValue } from '@tldraw/editor'
import { TLHandlesProps, useEditor, useValue } from '@tldraw/editor'
/** @public */
export const TldrawHandles: TLHandlesComponent = ({ children }) => {
export function TldrawHandles({ children }: TLHandlesProps) {
const editor = useEditor()
const shouldDisplayHandles = useValue(
'shouldDisplayHandles',

10
packages/tldraw/src/lib/canvas/TldrawHoveredShapeIndicator.tsx
View file

@ -1,13 +1,14 @@
import {
ShapeIndicator,
TLHoveredShapeIndicatorComponent,
TLHoveredShapeIndicatorProps,
useEditor,
useEditorComponents,
useValue,
} from '@tldraw/editor'
/** @public */
export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent = ({ shapeId }) => {
export function TldrawHoveredShapeIndicator({ shapeId }: TLHoveredShapeIndicatorProps) {
const editor = useEditor()
const { ShapeIndicator } = useEditorComponents()
const showHoveredShapeIndicator = useValue(
'show hovered',
() => {
@ -23,8 +24,9 @@ export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent = ({
},
[editor]
)
if (!ShapeIndicator) return null
if (!showHoveredShapeIndicator) return null
return <ShapeIndicator className="tl-user-indicator__hovered" id={shapeId} />
return <ShapeIndicator className="tl-user-indicator__hovered" shapeId={shapeId} />
}
//

10
packages/tldraw/src/lib/canvas/TldrawScribble.tsx
View file

@ -1,15 +1,9 @@
import { EASINGS, TLScribbleComponent, getSvgPathFromPoints } from '@tldraw/editor'
import { EASINGS, TLScribbleProps, getSvgPathFromPoints } from '@tldraw/editor'
import classNames from 'classnames'
import { getStroke } from '../shapes/shared/freehand/getStroke'
/** @public */
export const TldrawScribble: TLScribbleComponent = ({
scribble,
zoom,
color,
opacity,
className,
}) => {
export function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {
if (!scribble.points.length) return null
const stroke = getStroke(scribble.points, {

4
packages/tldraw/src/lib/canvas/TldrawSelectionBackground.tsx
View file

@ -1,12 +1,12 @@
import {
DefaultSelectionBackground,
TLSelectionBackgroundComponent,
TLSelectionBackgroundProps,
useEditor,
useValue,
} from '@tldraw/editor'
/** @public */
export const TldrawSelectionBackground: TLSelectionBackgroundComponent = ({ bounds, rotation }) => {
export const TldrawSelectionBackground = ({ bounds, rotation }: TLSelectionBackgroundProps) => {
const editor = useEditor()
const shouldDisplay = useValue(

15
packages/tldraw/src/lib/canvas/TldrawSelectionForeground.tsx
View file

@ -1,8 +1,7 @@
import {
Box,
RotateCorner,
TLEmbedShape,
TLSelectionForegroundComponent,
TLSelectionForegroundProps,
TLTextShape,
getCursor,
toDomPrecision,
@ -18,8 +17,10 @@ import { useReadonly } from '../ui/hooks/useReadonly'
import { TldrawCropHandles } from './TldrawCropHandles'
/** @public */
export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
function TldrawSelectionForeground({ bounds, rotation }: { bounds: Box; rotation: number }) {
export const TldrawSelectionForeground = track(function TldrawSelectionForeground({
bounds,
rotation,
}: TLSelectionForegroundProps) {
const editor = useEditor()
const rSvg = useRef<SVGSVGElement>(null)
@ -154,8 +155,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
const hideMobileRotateHandle = !shouldDisplayControls || !showMobileRotateHandle
const hideTopLeftCorner = !shouldDisplayControls || !showHandles
const hideTopRightCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles
const hideBottomLeftCorner =
!shouldDisplayControls || !showHandles || hideAlternateCornerHandles
const hideBottomLeftCorner = !shouldDisplayControls || !showHandles || hideAlternateCornerHandles
const hideBottomRightCorner =
!shouldDisplayControls || !showHandles || (showOnlyOneHandle && !showCropHandles)
@ -438,8 +438,7 @@ export const TldrawSelectionForeground: TLSelectionForegroundComponent = track(
</g>
</svg>
)
}
)
})
export const RotateCornerHandle = function RotateCornerHandle({
cx,

34
packages/tldraw/src/lib/ui.css
View file

@ -79,6 +79,16 @@
margin-left: var(--space-2);
}
.tlui-button[data-state='hinted']::after {
background-color: var(--color-hint);
opacity: 1;
}
.tlui-button[data-state='hinted']:not(:disabled, :focus-visible):active:after {
background: var(--color-hint);
opacity: 1;
}
@media (hover: hover) {
.tlui-button::after {
background-color: var(--color-muted-2);
@ -136,7 +146,6 @@
.tlui-button__menu {
height: 40px;
min-height: 40px;
min-width: 128px;
width: 100%;
gap: 8px;
margin: -4px 0px;
@ -929,6 +938,10 @@
stroke-width: 1px;
}
.tlui-menu__group {
width: 100%;
}
.tlui-menu__group:empty {
display: none;
}
@ -952,25 +965,22 @@
/* Menu Sizes */
.tlui-menu[data-size='large'] > .tlui-menu__group,
.tlui-menu__submenu__content[data-size='large'] > .tlui-menu__group {
.tlui-menu[data-size='large'] > .tlui-menu__group {
min-width: initial;
}
.tlui-menu[data-size='medium'] > .tlui-menu__group,
.tlui-menu__submenu__content[data-size='medium'] > .tlui-menu__group {
.tlui-menu[data-size='medium'] > .tlui-menu__group {
min-width: 144px;
}
.tlui-menu[data-size='small'] > .tlui-menu__group,
.tlui-menu__submenu__content[data-size='small'] > .tlui-menu__group {
min-width: 96px;
}
.tlui-menu[data-size='tiny'] > .tlui-menu__group,
.tlui-menu__submenu__content[data-size='tiny'] > .tlui-menu__group {
.tlui-menu[data-size='small'] > .tlui-menu__group {
min-width: 0px;
}
.tlui-menu[data-size='tiny'] > .tlui-menu__group {
min-width: 0px;
}
/* ------------------ Actions Menu ------------------ */
.tlui-actions-menu {

11
packages/tldraw/src/lib/ui/TldrawUi.tsx
View file

@ -21,7 +21,6 @@ import { useNativeClipboardEvents } from './hooks/useClipboardEvents'
import { useEditorEvents } from './hooks/useEditorEvents'
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
import { useReadonly } from './hooks/useReadonly'
import { useRelevantStyles } from './hooks/useRevelantStyles'
import { useTranslation } from './hooks/useTranslation/useTranslation'
/**
@ -159,7 +158,7 @@ const TldrawUiContent = React.memo(function TldrawUI() {
<div className="tlui-layout__top__right">
{SharePanel && <SharePanel />}
{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
<_StylePanel />
<StylePanel />
)}
</div>
</div>
@ -181,11 +180,3 @@ const TldrawUiContent = React.memo(function TldrawUI() {
</ToastProvider>
)
})
function _StylePanel() {
const { StylePanel } = useTldrawUiComponents()
const relevantStyles = useRelevantStyles()
if (!StylePanel) return null
return <StylePanel relevantStyles={relevantStyles} />
}

8
packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx
View file

@ -1,5 +1,5 @@
import * as _ContextMenu from '@radix-ui/react-context-menu'
import { preventDefault, useContainer, useEditor } from '@tldraw/editor'
import { preventDefault, useContainer, useEditor, useEditorComponents } from '@tldraw/editor'
import { memo, useCallback } from 'react'
import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
@ -7,17 +7,17 @@ import { DefaultContextMenuContent } from './DefaultContextMenuContent'
/** @public */
export interface TLUiContextMenuProps {
canvas: any
children?: any
}
/** @public */
export const DefaultContextMenu = memo(function DefaultContextMenu({
canvas,
children,
}: TLUiContextMenuProps) {
const editor = useEditor()
const { Canvas } = useEditorComponents()
const cb = useCallback(
(isOpen: boolean) => {
if (!isOpen) {
@ -68,7 +68,7 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
return (
<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange} modal={false}>
<_ContextMenu.Trigger onContextMenu={undefined} dir="ltr">
{canvas}
{Canvas ? <Canvas /> : null}
</_ContextMenu.Trigger>
{isOpen && (
<_ContextMenu.Portal container={container}>

14
packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx
View file

@ -22,14 +22,14 @@ export function MobileStylePanel() {
const msg = useTranslation()
const relevantStyles = useRelevantStyles()
const color = relevantStyles?.styles.get(DefaultColorStyle)
const color = relevantStyles?.get(DefaultColorStyle)
const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })
const currentColor = (
color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
).solid
const disableStylePanel = useValue(
'isHandOrEraserToolActive',
'disable style panel',
() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),
[editor]
)
@ -64,16 +64,8 @@ export function MobileStylePanel() {
</TldrawUiButton>
</TldrawUiPopoverTrigger>
<TldrawUiPopoverContent side="top" align="end">
<_StylePanel />
{StylePanel && <StylePanel isMobile />}
</TldrawUiPopoverContent>
</TldrawUiPopover>
)
}
function _StylePanel() {
const { StylePanel } = useTldrawUiComponents()
const relevantStyles = useRelevantStyles()
if (!StylePanel) return null
return <StylePanel relevantStyles={relevantStyles} isMobile />
}

14
packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx
View file

@ -1,35 +1,31 @@
import { ReadonlySharedStyleMap, SharedStyle, useEditor } from '@tldraw/editor'
import { useEditor } from '@tldraw/editor'
import classNames from 'classnames'
import { memo, useCallback } from 'react'
import { useRelevantStyles } from '../../hooks/useRevelantStyles'
import { DefaultStylePanelContent } from './DefaultStylePanelContent'
/** @public */
export interface TLUiStylePanelProps {
isMobile?: boolean
children?: any
relevantStyles: {
styles: ReadonlySharedStyleMap
opacity: SharedStyle<number>
} | null
}
/** @public */
export const DefaultStylePanel = memo(function DefaultStylePanel({
isMobile,
children,
relevantStyles,
}: TLUiStylePanelProps) {
const editor = useEditor()
const styles = useRelevantStyles()
const handlePointerOut = useCallback(() => {
if (!isMobile) {
editor.updateInstanceState({ isChangingStyle: false })
}
}, [editor, isMobile])
if (!relevantStyles) return null
const content = children ?? <DefaultStylePanelContent relevantStyles={relevantStyles} />
const content = children ?? <DefaultStylePanelContent styles={styles} />
return (
<div

122
packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
View file

@ -11,10 +11,10 @@ import {
GeoShapeGeoStyle,
LineShapeSplineStyle,
ReadonlySharedStyleMap,
SharedStyle,
StyleProp,
minBy,
useEditor,
useValue,
} from '@tldraw/editor'
import React from 'react'
import { STYLES } from '../../../styles'
@ -30,14 +30,13 @@ import { DropdownPicker } from './DropdownPicker'
/** @public */
export type TLUiStylePanelContentProps = {
relevantStyles: ReturnType<typeof useRelevantStyles>
styles: ReturnType<typeof useRelevantStyles>
}
/** @public */
export function DefaultStylePanelContent({ relevantStyles }: TLUiStylePanelContentProps) {
if (!relevantStyles) return null
export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps) {
if (!styles) return null
const { styles, opacity } = relevantStyles
const geo = styles.get(GeoShapeGeoStyle)
const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)
const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)
@ -51,7 +50,7 @@ export function DefaultStylePanelContent({ relevantStyles }: TLUiStylePanelConte
return (
<>
<CommonStylePickerSet styles={styles} opacity={opacity} />
<CommonStylePickerSet styles={styles} />
{!hideText && <TextStylePickerSet styles={styles} />}
{!(hideGeo && hideArrowHeads && hideSpline) && (
<div className="tlui-style-panel__section" aria-label="style panel styles">
@ -68,8 +67,9 @@ function useStyleChangeCallback() {
const editor = useEditor()
const trackEvent = useUiEvents()
return React.useMemo(() => {
return function handleStyleChange<T>(style: StyleProp<T>, value: T, squashing: boolean) {
return React.useMemo(
() =>
function handleStyleChange<T>(style: StyleProp<T>, value: T, squashing: boolean) {
editor.batch(() => {
if (editor.isIn('select')) {
editor.setStyleForSelectedShapes(style, value, { squashing })
@ -79,40 +79,15 @@ function useStyleChangeCallback() {
})
trackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })
}
}, [editor, trackEvent])
}
const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
function CommonStylePickerSet({
styles,
opacity,
}: {
styles: ReadonlySharedStyleMap
opacity: SharedStyle<number>
}) {
const editor = useEditor()
const trackEvent = useUiEvents()
const msg = useTranslation()
const handleValueChange = useStyleChangeCallback()
const handleOpacityValueChange = React.useCallback(
(value: number, ephemeral: boolean) => {
const item = tldrawSupportedOpacities[value]
editor.batch(() => {
if (editor.isIn('select')) {
editor.setOpacityForSelectedShapes(item, { ephemeral })
}
editor.setOpacityForNextShapes(item, { ephemeral })
editor.updateInstanceState({ isChangingStyle: true })
})
trackEvent('set-style', { source: 'style-panel', id: 'opacity', value })
},
[editor, trackEvent]
)
}
function CommonStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
const msg = useTranslation()
const handleValueChange = useStyleChangeCallback()
const color = styles.get(DefaultColorStyle)
const fill = styles.get(DefaultFillStyle)
@ -121,15 +96,6 @@ function CommonStylePickerSet({
const showPickers = fill !== undefined || dash !== undefined || size !== undefined
const opacityIndex =
opacity.type === 'mixed'
? -1
: tldrawSupportedOpacities.indexOf(
minBy(tldrawSupportedOpacities, (supportedOpacity) =>
Math.abs(supportedOpacity - opacity.value)
)!
)
return (
<>
<div
@ -148,18 +114,7 @@ function CommonStylePickerSet({
onValueChange={handleValueChange}
/>
)}
{opacity === undefined ? null : (
<TldrawUiSlider
data-testid="style.opacity"
value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
label={
opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`
}
onValueChange={handleOpacityValueChange}
steps={tldrawSupportedOpacities.length - 1}
title={msg('style-panel.opacity')}
/>
)}
<OpacitySlider />
</div>
{showPickers && (
<div className="tlui-style-panel__section" aria-label="style panel styles">
@ -331,3 +286,50 @@ function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap })
/>
)
}
const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
function OpacitySlider() {
const editor = useEditor()
const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
const trackEvent = useUiEvents()
const msg = useTranslation()
const handleOpacityValueChange = React.useCallback(
(value: number, ephemeral: boolean) => {
const item = tldrawSupportedOpacities[value]
editor.batch(() => {
if (editor.isIn('select')) {
editor.setOpacityForSelectedShapes(item, { ephemeral })
}
editor.setOpacityForNextShapes(item, { ephemeral })
editor.updateInstanceState({ isChangingStyle: true })
})
trackEvent('set-style', { source: 'style-panel', id: 'opacity', value })
},
[editor, trackEvent]
)
if (opacity === undefined) return null
const opacityIndex =
opacity.type === 'mixed'
? -1
: tldrawSupportedOpacities.indexOf(
minBy(tldrawSupportedOpacities, (supportedOpacity) =>
Math.abs(supportedOpacity - opacity.value)
)!
)
return (
<TldrawUiSlider
data-testid="style.opacity"
value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
onValueChange={handleOpacityValueChange}
steps={tldrawSupportedOpacities.length - 1}
title={msg('style-panel.opacity')}
/>
)
}

2
packages/tldraw/src/lib/ui/components/menu-items.tsx
View file

@ -282,7 +282,7 @@ export function ArrangeMenuSubmenu() {
if (!(twoSelected || onlyFlippableShapeSelected)) return null
return (
<TldrawUiMenuSubmenu id="arrange" label="context-menu.arrange">
<TldrawUiMenuSubmenu id="arrange" label="context-menu.arrange" size="small">
{twoSelected && (
<TldrawUiMenuGroup id="align">
<TldrawUiMenuItem {...actions['align-left']} />

11
packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx
View file

@ -139,6 +139,7 @@ export type TLUiDropdownMenuSubContentProps = {
id?: string
alignOffset?: number
sideOffset?: number
size?: 'tiny' | 'small' | 'medium' | 'wide'
children: any
}
@ -146,6 +147,7 @@ export type TLUiDropdownMenuSubContentProps = {
export function TldrawUiDropdownMenuSubContent({
alignOffset = -1,
sideOffset = -4,
size = 'small',
children,
}: TLUiDropdownMenuSubContentProps) {
const container = useContainer()
@ -156,6 +158,7 @@ export function TldrawUiDropdownMenuSubContent({
alignOffset={alignOffset}
sideOffset={sideOffset}
collisionPadding={4}
data-size={size}
>
{children}
</_DropdownMenu.SubContent>
@ -166,16 +169,12 @@ export function TldrawUiDropdownMenuSubContent({
/** @public */
export type TLUiDropdownMenuGroupProps = {
children: any
size?: 'tiny' | 'small' | 'medium' | 'wide'
}
/** @public */
export function TldrawUiDropdownMenuGroup({
children,
size = 'medium',
}: TLUiDropdownMenuGroupProps) {
export function TldrawUiDropdownMenuGroup({ children }: TLUiDropdownMenuGroupProps) {
return (
<_DropdownMenu.Group dir="ltr" className="tlui-menu__group" data-size={size}>
<_DropdownMenu.Group dir="ltr" className="tlui-menu__group">
{children}
</_DropdownMenu.Group>
)

9
packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx
View file

@ -12,12 +12,11 @@ export type TLUiMenuGroupProps<TranslationKey extends string = string> = {
* The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.
*/
label?: TranslationKey | { [key: string]: TranslationKey }
small?: boolean
children?: any
}
/** @public */
export function TldrawUiMenuGroup({ id, label, small = false, children }: TLUiMenuGroupProps) {
export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps) {
const { type: menuType, sourceId } = useTldrawUiMenuContext()
const msg = useTranslation()
const labelToUse = unwrapLabel(label, menuType)
@ -33,10 +32,7 @@ export function TldrawUiMenuGroup({ id, label, small = false, children }: TLUiMe
}
case 'menu': {
return (
<TldrawUiDropdownMenuGroup
data-testid={`${sourceId}-group.${id}`}
size={small ? 'tiny' : 'medium'}
>
<TldrawUiDropdownMenuGroup data-testid={`${sourceId}-group.${id}`}>
{children}
</TldrawUiDropdownMenuGroup>
)
@ -46,7 +42,6 @@ export function TldrawUiMenuGroup({ id, label, small = false, children }: TLUiMe
<ContextMenuGroup
dir="ltr"
className="tlui-menu__group"
data-size={small ? 'tiny' : 'medium'}
data-testid={`${sourceId}-group.${id}`}
>
{children}

6
packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx
View file

@ -24,7 +24,7 @@ export type TLUiMenuSubmenuProps<Translation extends string = string> = {
label?: Translation | { [key: string]: Translation }
disabled?: boolean
children: any
size?: 'tiny' | 'small' | 'medium' | 'large'
size?: 'tiny' | 'small' | 'medium' | 'wide'
}
/** @public */
@ -32,7 +32,7 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
id,
disabled = false,
label,
size,
size = 'small',
children,
}: TLUiMenuSubmenuProps<Translation>) {
const { type: menuType, sourceId } = useTldrawUiMenuContext()
@ -55,7 +55,7 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
label={labelStr!}
title={labelStr!}
/>
<TldrawUiDropdownMenuSubContent id={`${sourceId}-sub-content.${id}`} data-size={size}>
<TldrawUiDropdownMenuSubContent id={`${sourceId}-sub-content.${id}`} size={size}>
{children}
</TldrawUiDropdownMenuSubContent>
</TldrawUiDropdownMenuSub>

18
packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts
View file

@ -4,18 +4,20 @@ import {
DefaultFillStyle,
DefaultSizeStyle,
ReadonlySharedStyleMap,
SharedStyle,
SharedStyleMap,
useEditor,
useValue,
} from '@tldraw/editor'
const selectToolStyles = [DefaultColorStyle, DefaultDashStyle, DefaultFillStyle, DefaultSizeStyle]
const selectToolStyles = Object.freeze([
DefaultColorStyle,
DefaultDashStyle,
DefaultFillStyle,
DefaultSizeStyle,
])
export function useRelevantStyles(): {
styles: ReadonlySharedStyleMap
opacity: SharedStyle<number>
} | null {
/** @public */
export function useRelevantStyles(stylesToCheck = selectToolStyles): ReadonlySharedStyleMap | null {
const editor = useEditor()
return useValue(
'getRelevantStyles',
@ -25,13 +27,13 @@ export function useRelevantStyles(): {
editor.getSelectedShapeIds().length > 0 || !!editor.root.getCurrent()?.shapeType
if (styles.size === 0 && editor.isIn('select') && editor.getSelectedShapeIds().length === 0) {
for (const style of selectToolStyles) {
for (const style of stylesToCheck) {
styles.applyValue(style, editor.getStyleForNextShape(style))
}
}
if (styles.size === 0 && !hasShape) return null
return { styles, opacity: editor.getSharedOpacity() }
return styles
},
[editor]
)

53
packages/tldraw/src/test/TldrawEditor.test.tsx
View file

@ -2,7 +2,6 @@ import { act, render, screen } from '@testing-library/react'
import {
BaseBoxShapeTool,
BaseBoxShapeUtil,
Canvas,
Editor,
HTMLContainer,
TLBaseShape,
@ -26,13 +25,10 @@ function checkAllShapes(editor: Editor, shapes: string[]) {
describe('<TldrawEditor />', () => {
it('Renders without crashing', async () => {
await renderTldrawComponent(
<TldrawEditor tools={defaultTools} autoFocus initialState="select">
<div data-testid="canvas-1" />
<Canvas />
</TldrawEditor>,
<TldrawEditor tools={defaultTools} autoFocus initialState="select" />,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
await screen.findByTestId('canvas')
})
it('Creates its own store with core shapes', async () => {
@ -45,12 +41,9 @@ describe('<TldrawEditor />', () => {
initialState="select"
tools={defaultTools}
autoFocus
>
<div data-testid="canvas-1" />
</TldrawEditor>,
/>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
checkAllShapes(editor!, ['group'])
})
@ -65,13 +58,9 @@ describe('<TldrawEditor />', () => {
editor = e
}}
autoFocus
>
<div data-testid="canvas-1" />
<Canvas />
</TldrawEditor>,
/>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
expect(editor!).toBeTruthy()
checkAllShapes(editor!, ['group'])
@ -88,13 +77,9 @@ describe('<TldrawEditor />', () => {
expect(editor.store).toBe(store)
}}
autoFocus
>
<div data-testid="canvas-1" />
<Canvas />
</TldrawEditor>,
/>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
})
it('throws if the store has different shapes to the ones passed in', async () => {
@ -148,11 +133,8 @@ describe('<TldrawEditor />', () => {
store={initialStore}
onMount={onMount}
autoFocus
>
<div data-testid="canvas-1" />
</TldrawEditor>
/>
)
await screen.findByTestId('canvas-1')
const initialEditor = onMount.mock.lastCall[0]
jest.spyOn(initialEditor, 'dispose')
expect(initialEditor.store).toBe(initialStore)
@ -164,11 +146,8 @@ describe('<TldrawEditor />', () => {
store={initialStore}
onMount={onMount}
autoFocus
>
<div data-testid="canvas-2" />
</TldrawEditor>
/>
)
await screen.findByTestId('canvas-2')
// not called again:
expect(onMount).toHaveBeenCalledTimes(1)
// re-render with a new store:
@ -180,11 +159,8 @@ describe('<TldrawEditor />', () => {
store={newStore}
onMount={onMount}
autoFocus
>
<div data-testid="canvas-3" />
</TldrawEditor>
/>
)
await screen.findByTestId('canvas-3')
expect(initialEditor.dispose).toHaveBeenCalledTimes(1)
expect(onMount).toHaveBeenCalledTimes(2)
expect(onMount.mock.lastCall[0].store).toBe(newStore)
@ -201,12 +177,9 @@ describe('<TldrawEditor />', () => {
onMount={(editorApp) => {
editor = editorApp
}}
>
<Canvas />
<div data-testid="canvas-1" />
</TldrawEditor>
/>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
expect(editor).toBeTruthy()
await act(async () => {
@ -325,13 +298,9 @@ describe('Custom shapes', () => {
onMount={(editorApp) => {
editor = editorApp
}}
>
<Canvas />
<div data-testid="canvas-1" />
</TldrawEditor>,
/>,
{ waitForPatterns: false }
)
await screen.findByTestId('canvas-1')
expect(editor).toBeTruthy()
await act(async () => {

10
packages/tldraw/src/test/commands/lockShapes.test.ts
View file

@ -165,12 +165,10 @@ describe('Locked shapes', () => {
describe('Unlocking', () => {
it('Can unlock shapes', () => {
editor.setSelectedShapes([ids.lockedShapeA, ids.lockedShapeB])
let lockedStatus = [ids.lockedShapeA, ids.lockedShapeB].map(
(id) => editor.getShape(id)!.isLocked
)
expect(lockedStatus).toStrictEqual([true, true])
const getLockedStatus = () =>
[ids.lockedShapeA, ids.lockedShapeB].map((id) => editor.getShape(id)!.isLocked)
expect(getLockedStatus()).toStrictEqual([true, true])
editor.toggleLock(editor.getSelectedShapeIds())
lockedStatus = [ids.lockedShapeA, ids.lockedShapeB].map((id) => editor.getShape(id)!.isLocked)
expect(lockedStatus).toStrictEqual([false, false])
expect(getLockedStatus()).toStrictEqual([false, false])
})
})

4
packages/tldraw/src/test/testutils/renderTldrawComponent.tsx
View file

@ -15,7 +15,7 @@ import { ReactElement } from 'react'
*/
export async function renderTldrawComponent(
element: ReactElement,
{ waitForPatterns = true } = {}
{ waitForPatterns }: { waitForPatterns: boolean }
) {
const result = render(element)
if (waitForPatterns) await result.findByTestId('ready-pattern-fill-defs')
@ -24,7 +24,7 @@ export async function renderTldrawComponent(
export async function renderTldrawComponentWithEditor(
cb: (onMount: (editor: Editor) => void) => ReactElement,
opts?: { waitForPatterns?: boolean }
opts: { waitForPatterns: boolean }
) {
const editorPromise = promiseWithResolve<Editor>()
const element = cb((editor) => {

6
packages/tldraw/src/test/ui/ContextMenu.test.tsx
View file

@ -10,7 +10,8 @@ it('opens on right-click', async () => {
onMount={(editor) => {
editor.createShape({ id: createShapeId(), type: 'geo' })
}}
/>
/>,
{ waitForPatterns: false }
)
const canvas = await screen.findByTestId('canvas')
@ -38,7 +39,8 @@ it('tunnels context menu', async () => {
editor.createShape({ id: createShapeId(), type: 'geo' })
}}
components={components}
/>
/>,
{ waitForPatterns: false }
)
const canvas = await screen.findByTestId('canvas')