diff --git a/apps/dotcom/src/hooks/useUrlState.ts b/apps/dotcom/src/hooks/useUrlState.ts index 451408566..34dee4bbf 100644 --- a/apps/dotcom/src/hooks/useUrlState.ts +++ b/apps/dotcom/src/hooks/useUrlState.ts @@ -1,5 +1,6 @@ import { default as React, useEffect } from 'react' -import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw' +import { Editor, TLPageId, debounce, react, tldrawConstants, useEditor } from 'tldraw' +const { MAX_ZOOM, MIN_ZOOM } = tldrawConstants const PARAMS = { // deprecated diff --git a/apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx b/apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx index 5c2ebb941..e361c76b9 100644 --- a/apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx +++ b/apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx @@ -3,7 +3,6 @@ import { AssetRecordType, Box, Editor, - PORTRAIT_BREAKPOINT, SVGContainer, TLImageShape, TLShapeId, @@ -13,11 +12,13 @@ import { exportToBlob, getIndexBelow, react, + tldrawConstants, track, useBreakpoint, useEditor, } from 'tldraw' import { AnnotatorImage } from './types' +const { PORTRAIT_BREAKPOINT } = tldrawConstants // TODO: // - prevent changing pages (create page, change page, move shapes to new page) diff --git a/apps/examples/src/examples/pdf-editor/PdfEditor.tsx b/apps/examples/src/examples/pdf-editor/PdfEditor.tsx index 99086838e..72a9868de 100644 --- a/apps/examples/src/examples/pdf-editor/PdfEditor.tsx +++ b/apps/examples/src/examples/pdf-editor/PdfEditor.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useMemo } from 'react' import { Box, - PORTRAIT_BREAKPOINT, SVGContainer, TLImageShape, TLShapeId, @@ -12,12 +11,14 @@ import { getIndicesBetween, react, sortByIndex, + tldrawConstants, track, useBreakpoint, useEditor, } from 'tldraw' import { ExportPdfButton } from './ExportPdfButton' import { Pdf } from './PdfPicker' +const { PORTRAIT_BREAKPOINT } = tldrawConstants // TODO: // - prevent changing pages (create page, change page, move shapes to new page) diff --git a/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx b/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx index 1c0d3e1f0..05ef97d4e 100644 --- a/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx +++ b/apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx @@ -4,14 +4,11 @@ import { DefaultHorizontalAlignStyle, DefaultSizeStyle, DefaultVerticalAlignStyle, - FONT_FAMILIES, Geometry2d, - LABEL_FONT_SIZES, Polygon2d, ShapePropsType, ShapeUtil, T, - TEXT_PROPS, TLBaseShape, TLHandle, TLOnBeforeUpdateHandler, @@ -22,10 +19,12 @@ import { ZERO_INDEX_KEY, resizeBox, structuredClone, + tldrawConstants, useDefaultColorTheme, vecModelValidator, } from 'tldraw' import { getSpeechBubbleVertices, getTailIntersectionPoint } from './helpers' +const { FONT_FAMILIES, LABEL_FONT_SIZES, TEXT_PROPS } = tldrawConstants // Copied from tldraw/tldraw export const STROKE_SIZES = { diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 99c6779e9..37e02b94e 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -84,12 +84,6 @@ import { whyAmIRunning } from '@tldraw/state'; // @public export function angleDistance(fromAngle: number, toAngle: number, direction: number): number; -// @internal (undocumented) -export const ANIMATION_MEDIUM_MS = 320; - -// @internal (undocumented) -export const ANIMATION_SHORT_MS = 80; - // @internal (undocumented) export function applyRotationToSnapshotShapes({ delta, editor, snapshot, stage, }: { delta: number; @@ -308,9 +302,6 @@ export class Box { // @public (undocumented) export type BoxLike = Box | BoxModel; -// @internal (undocumented) -export const CAMERA_SLIDE_FRICTION = 0.09; - // @public (undocumented) export function canonicalizeRotation(a: number): number; @@ -455,12 +446,6 @@ export const debugFlags: { readonly throwToBlob: DebugFlag; }; -// @internal (undocumented) -export const DEFAULT_ANIMATION_OPTIONS: { - duration: number; - easing: (t: number) => number; -}; - // @public (undocumented) export function DefaultBackground(): JSX_2.Element; @@ -524,12 +509,6 @@ export const defaultUserPreferences: Readonly<{ // @public export function degreesToRadians(d: number): number; -// @internal (undocumented) -export const DOUBLE_CLICK_DURATION = 450; - -// @internal (undocumented) -export const DRAG_DISTANCE = 16; - // @public (undocumented) export const EASINGS: { readonly easeInCubic: (t: number) => number; @@ -964,6 +943,83 @@ export class Editor extends EventEmitter { zoomToSelection(animation?: TLAnimationOptions): this; } +// @public (undocumented) +export const editorConstants: { + readonly ANIMATION_MEDIUM_MS: 320; + readonly ANIMATION_SHORT_MS: 80; + readonly BOUND_ARROW_OFFSET: 10; + readonly CAMERA_MOVING_TIMEOUT: 64; + readonly CAMERA_SLIDE_FRICTION: 0.09; + readonly COARSE_DRAG_DISTANCE: 36; + readonly COARSE_HANDLE_RADIUS: 20; + readonly COARSE_POINTER_WIDTH: 12; + readonly COLLABORATOR_CHECK_INTERVAL: 1200; + readonly COLLABORATOR_IDLE_TIMEOUT: 3000; + readonly COLLABORATOR_INACTIVE_TIMEOUT: 60000; + readonly DEFAULT_ANIMATION_OPTIONS: { + readonly duration: 0; + readonly easing: (t: number) => number; + }; + readonly DOUBLE_CLICK_DURATION: 450; + readonly DRAG_DISTANCE: 16; + readonly EDGE_SCROLL_DISTANCE: 8; + readonly EDGE_SCROLL_SPEED: 20; + readonly FOLLOW_CHASE_PAN_SNAP: 0.1; + readonly FOLLOW_CHASE_PAN_UNSNAP: 0.2; + readonly FOLLOW_CHASE_PROPORTION: 0.5; + readonly FOLLOW_CHASE_ZOOM_SNAP: 0.005; + readonly FOLLOW_CHASE_ZOOM_UNSNAP: 0.05; + readonly GRID_STEPS: readonly [{ + readonly mid: 0.15; + readonly min: -1; + readonly step: 64; + }, { + readonly mid: 0.375; + readonly min: 0.05; + readonly step: 16; + }, { + readonly mid: 1; + readonly min: 0.15; + readonly step: 4; + }, { + readonly mid: 2.5; + readonly min: 0.7; + readonly step: 1; + }]; + readonly HANDLE_RADIUS: 12; + readonly HASH_PATTERN_ZOOM_NAMES: Record; + readonly HIT_TEST_MARGIN: 8; + readonly INTERNAL_POINTER_IDS: { + readonly CAMERA_MOVE: -10; + }; + readonly LONG_PRESS_DURATION: 500; + readonly MAX_CLICK_DISTANCE: 40; + readonly MAX_PAGES: 40; + readonly MAX_SHAPES_PER_PAGE: 2000; + readonly MAX_ZOOM: 8; + readonly MIN_ARROW_LENGTH: 10; + readonly MIN_ZOOM: 0.1; + readonly MULTI_CLICK_DURATION: 200; + readonly ROTATE_CORNER_TO_SELECTION_CORNER: { + readonly bottom_left_rotate: "bottom_left"; + readonly bottom_right_rotate: "bottom_right"; + readonly mobile_rotate: "top_left"; + readonly top_left_rotate: "top_left"; + readonly top_right_rotate: "top_right"; + }; + readonly SIDES: readonly ["top", "right", "bottom", "left"]; + readonly STROKE_SIZES: { + readonly l: 5; + readonly m: 3.5; + readonly s: 2; + readonly xl: 10; + }; + readonly SVG_PADDING: 32; + readonly TEXT_SHADOW_LOD: 0.35; + readonly WAY_TOO_BIG_ARROW_BEND_FACTOR: 10; + readonly ZOOMS: readonly [0.1, 0.25, 0.5, 1, 2, 4, 8]; +}; + // @internal (undocumented) export const EditorContext: React_2.Context; @@ -1135,13 +1191,6 @@ export function getSvgPathFromPoints(points: VecLike[], closed?: boolean): strin // @public (undocumented) export function getUserPreferences(): TLUserPreferences; -// @public (undocumented) -export const GRID_STEPS: { - mid: number; - min: number; - step: number; -}[]; - // @public (undocumented) export class Group2d extends Geometry2d { constructor(config: Omit & { @@ -1210,9 +1259,6 @@ export function hardReset({ shouldReload }?: { // @public (undocumented) export function hardResetEditor(): void; -// @internal (undocumented) -export const HASH_PATTERN_ZOOM_NAMES: Record; - // @public (undocumented) export class HistoryManager { constructor(opts: { @@ -1262,9 +1308,6 @@ export class HistoryManager { undo: () => this; } -// @public (undocumented) -export const HIT_TEST_MARGIN = 8; - // @public (undocumented) export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX_2.Element; @@ -1442,24 +1485,9 @@ export interface MatModel { f: number; } -// @internal (undocumented) -export const MAX_PAGES = 40; - -// @internal (undocumented) -export const MAX_SHAPES_PER_PAGE = 2000; - -// @internal (undocumented) -export const MAX_ZOOM = 8; - -// @internal (undocumented) -export const MIN_ZOOM = 0.1; - // @public export function moveCameraWhenCloseToEdge(editor: Editor): void; -// @internal (undocumented) -export const MULTI_CLICK_DURATION = 200; - // @internal (undocumented) export function normalizeWheel(event: React.WheelEvent | WheelEvent): { x: number; @@ -1643,15 +1671,6 @@ export type ResizeBoxOptions = Partial<{ minWidth: number; }>; -// @public (undocumented) -export const ROTATE_CORNER_TO_SELECTION_CORNER: { - readonly bottom_left_rotate: "bottom_left"; - readonly bottom_right_rotate: "bottom_right"; - readonly mobile_rotate: "top_left"; - readonly top_left_rotate: "top_left"; - readonly top_right_rotate: "top_right"; -}; - // @public (undocumented) export type RotateCorner = 'bottom_left_rotate' | 'bottom_right_rotate' | 'mobile_rotate' | 'top_left_rotate' | 'top_right_rotate'; @@ -1809,9 +1828,6 @@ export class SideEffectManager): () => void; } -// @public (undocumented) -export const SIDES: readonly ["top", "right", "bottom", "left"]; - export { Signal } // @public (undocumented) @@ -1944,9 +1960,6 @@ export abstract class StateNode implements Partial { // @public (undocumented) export const stopEventPropagation: (e: any) => any; -// @internal (undocumented) -export const SVG_PADDING = 32; - // @public (undocumented) export function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX_2.Element; @@ -3067,9 +3080,6 @@ export class WeakMapCache { export { whyAmIRunning } -// @internal (undocumented) -export const ZOOMS: number[]; - export * from "@tldraw/store"; export * from "@tldraw/tlschema"; diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index d89708f3e..2f88ea1f0 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -105,25 +105,7 @@ export { } from './lib/config/createTLStore' export { createTLUser } from './lib/config/createTLUser' export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes' -export { - ANIMATION_MEDIUM_MS, - ANIMATION_SHORT_MS, - CAMERA_SLIDE_FRICTION, - DEFAULT_ANIMATION_OPTIONS, - DOUBLE_CLICK_DURATION, - DRAG_DISTANCE, - GRID_STEPS, - HASH_PATTERN_ZOOM_NAMES, - HIT_TEST_MARGIN, - MAX_PAGES, - MAX_SHAPES_PER_PAGE, - MAX_ZOOM, - MIN_ZOOM, - MULTI_CLICK_DURATION, - SIDES, - SVG_PADDING, - ZOOMS, -} from './lib/constants' +export { editorConstants } from './lib/editor-constants' export { Editor, type TLAnimationOptions, @@ -256,7 +238,6 @@ export { useTLStore } from './lib/hooks/useTLStore' export { useTransform } from './lib/hooks/useTransform' export { Box, - ROTATE_CORNER_TO_SELECTION_CORNER, rotateSelectionHandle, type BoxLike, type RotateCorner, diff --git a/packages/editor/src/lib/components/LiveCollaborators.tsx b/packages/editor/src/lib/components/LiveCollaborators.tsx index 097f99de8..9d2c26ccb 100644 --- a/packages/editor/src/lib/components/LiveCollaborators.tsx +++ b/packages/editor/src/lib/components/LiveCollaborators.tsx @@ -1,16 +1,15 @@ import { track } from '@tldraw/state' import { TLInstancePresence } from '@tldraw/tlschema' import { useEffect, useRef, useState } from 'react' -import { - COLLABORATOR_CHECK_INTERVAL, - COLLABORATOR_IDLE_TIMEOUT, - COLLABORATOR_INACTIVE_TIMEOUT, -} from '../constants' +import { editorConstants } from '../editor-constants' import { useEditor } from '../hooks/useEditor' import { useEditorComponents } from '../hooks/useEditorComponents' import { usePeerIds } from '../hooks/usePeerIds' import { usePresence } from '../hooks/usePresence' +const { COLLABORATOR_CHECK_INTERVAL, COLLABORATOR_IDLE_TIMEOUT, COLLABORATOR_INACTIVE_TIMEOUT } = + editorConstants + export const LiveCollaborators = track(function Collaborators() { const peerIds = usePeerIds() return ( diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx index 2c8f38f58..fc239d42d 100644 --- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx @@ -3,7 +3,7 @@ import { TLHandle, TLShapeId } from '@tldraw/tlschema' import { dedupe, modulate, objectMapValues } from '@tldraw/utils' import classNames from 'classnames' import { Fragment, JSX, useEffect, useRef, useState } from 'react' -import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, TEXT_SHADOW_LOD } from '../../constants' +import { editorConstants } from '../../editor-constants' import { useCanvasEvents } from '../../hooks/useCanvasEvents' import { useCoarsePointer } from '../../hooks/useCoarsePointer' import { useContainer } from '../../hooks/useContainer' @@ -25,6 +25,8 @@ import { GeometryDebuggingView } from '../GeometryDebuggingView' import { LiveCollaborators } from '../LiveCollaborators' import { Shape } from '../Shape' +const { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, TEXT_SHADOW_LOD } = editorConstants + /** @public */ export type TLCanvasComponentProps = { className?: string } diff --git a/packages/editor/src/lib/components/default-components/DefaultGrid.tsx b/packages/editor/src/lib/components/default-components/DefaultGrid.tsx index 55dcee21e..788d5a100 100644 --- a/packages/editor/src/lib/components/default-components/DefaultGrid.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultGrid.tsx @@ -1,5 +1,6 @@ import { modulate } from '@tldraw/utils' -import { GRID_STEPS } from '../../constants' +import { editorConstants } from '../../editor-constants' +const { GRID_STEPS } = editorConstants /** @public */ export type TLGridProps = { diff --git a/packages/editor/src/lib/components/default-components/DefaultHandle.tsx b/packages/editor/src/lib/components/default-components/DefaultHandle.tsx index a0e97c93a..3670c3789 100644 --- a/packages/editor/src/lib/components/default-components/DefaultHandle.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultHandle.tsx @@ -1,6 +1,7 @@ import { TLHandle, TLShapeId } from '@tldraw/tlschema' import classNames from 'classnames' -import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants' +import { editorConstants } from '../../editor-constants' +const { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } = editorConstants /** @public */ export type TLHandleProps = { diff --git a/packages/editor/src/lib/constants.ts b/packages/editor/src/lib/constants.ts deleted file mode 100644 index d27456340..000000000 --- a/packages/editor/src/lib/constants.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { EASINGS } from './primitives/easings' - -/** @internal */ -export const MAX_SHAPES_PER_PAGE = 2000 -/** @internal */ -export const MAX_PAGES = 40 - -/** @internal */ -export const ANIMATION_SHORT_MS = 80 -/** @internal */ -export const ANIMATION_MEDIUM_MS = 320 - -/** @internal */ -export const ZOOMS = [0.1, 0.25, 0.5, 1, 2, 4, 8] -/** @internal */ -export const MIN_ZOOM = 0.1 -/** @internal */ -export const MAX_ZOOM = 8 - -/** @internal */ -export const FOLLOW_CHASE_PROPORTION = 0.5 -/** @internal */ -export const FOLLOW_CHASE_PAN_SNAP = 0.1 -/** @internal */ -export const FOLLOW_CHASE_PAN_UNSNAP = 0.2 -/** @internal */ -export const FOLLOW_CHASE_ZOOM_SNAP = 0.005 -/** @internal */ -export const FOLLOW_CHASE_ZOOM_UNSNAP = 0.05 - -/** @internal */ -export const DOUBLE_CLICK_DURATION = 450 -/** @internal */ -export const MULTI_CLICK_DURATION = 200 - -/** @internal */ -export const COARSE_DRAG_DISTANCE = 36 // 6 squared - -/** @internal */ -export const DRAG_DISTANCE = 16 // 4 squared - -/** @internal */ -export const SVG_PADDING = 32 - -/** @internal */ -export const HASH_PATTERN_ZOOM_NAMES: Record = {} - -for (let zoom = 1; zoom <= Math.ceil(MAX_ZOOM); zoom++) { - HASH_PATTERN_ZOOM_NAMES[zoom + '_dark'] = `hash_pattern_zoom_${zoom}_dark` - HASH_PATTERN_ZOOM_NAMES[zoom + '_light'] = `hash_pattern_zoom_${zoom}_light` -} - -/** @internal */ -export const DEFAULT_ANIMATION_OPTIONS = { - duration: 0, - easing: EASINGS.easeInOutCubic, -} - -/** @internal */ -export const CAMERA_SLIDE_FRICTION = 0.09 - -/** @public */ -export const GRID_STEPS = [ - { min: -1, mid: 0.15, step: 64 }, - { min: 0.05, mid: 0.375, step: 16 }, - { min: 0.15, mid: 1, step: 4 }, - { min: 0.7, mid: 2.5, step: 1 }, -] - -/** @internal */ -export const COLLABORATOR_INACTIVE_TIMEOUT = 60000 - -/** @internal */ -export const COLLABORATOR_IDLE_TIMEOUT = 3000 - -/** @internal */ -export const COLLABORATOR_CHECK_INTERVAL = 1200 - -/** - * Negative pointer ids are reserved for internal use. - * - * @internal */ -export const INTERNAL_POINTER_IDS = { - CAMERA_MOVE: -10, -} as const - -/** @internal */ -export const CAMERA_MOVING_TIMEOUT = 64 - -/** @public */ -export const HIT_TEST_MARGIN = 8 - -/** @internal */ -export const EDGE_SCROLL_SPEED = 20 - -/** @internal */ -export const EDGE_SCROLL_DISTANCE = 8 - -/** @internal */ -export const COARSE_POINTER_WIDTH = 12 - -/** @internal */ -export const COARSE_HANDLE_RADIUS = 20 - -/** @internal */ -export const HANDLE_RADIUS = 12 - -/** @public */ -export const SIDES = ['top', 'right', 'bottom', 'left'] as const - -/** @internal */ -export const LONG_PRESS_DURATION = 500 - -/** @internal */ -export const TEXT_SHADOW_LOD = 0.35 diff --git a/packages/editor/src/lib/editor-constants.ts b/packages/editor/src/lib/editor-constants.ts new file mode 100644 index 000000000..645842570 --- /dev/null +++ b/packages/editor/src/lib/editor-constants.ts @@ -0,0 +1,70 @@ +import { EASINGS } from './primitives/easings' + +const MAX_ZOOM = 8 +const HASH_PATTERN_ZOOM_NAMES = {} as Record +for (let zoom = 1; zoom <= Math.ceil(MAX_ZOOM); zoom++) { + HASH_PATTERN_ZOOM_NAMES[zoom + '_dark'] = `hash_pattern_zoom_${zoom}_dark` + HASH_PATTERN_ZOOM_NAMES[zoom + '_light'] = `hash_pattern_zoom_${zoom}_light` +} + +/** @public */ +export const editorConstants = { + MAX_CLICK_DISTANCE: 40, + MAX_SHAPES_PER_PAGE: 2000, + MAX_PAGES: 40, + ANIMATION_SHORT_MS: 80, + ANIMATION_MEDIUM_MS: 320, + ZOOMS: [0.1, 0.25, 0.5, 1, 2, 4, 8], + MIN_ZOOM: 0.1, + MAX_ZOOM, + HASH_PATTERN_ZOOM_NAMES, + FOLLOW_CHASE_PROPORTION: 0.5, + FOLLOW_CHASE_PAN_SNAP: 0.1, + FOLLOW_CHASE_PAN_UNSNAP: 0.2, + FOLLOW_CHASE_ZOOM_SNAP: 0.005, + FOLLOW_CHASE_ZOOM_UNSNAP: 0.05, + DOUBLE_CLICK_DURATION: 450, + MULTI_CLICK_DURATION: 200, + COARSE_DRAG_DISTANCE: 36, // 6 squared + DRAG_DISTANCE: 16, // 4 squared + SVG_PADDING: 32, + DEFAULT_ANIMATION_OPTIONS: { duration: 0, easing: EASINGS.easeInOutCubic }, + CAMERA_SLIDE_FRICTION: 0.09, + GRID_STEPS: [ + { min: -1, mid: 0.15, step: 64 }, + { min: 0.05, mid: 0.375, step: 16 }, + { min: 0.15, mid: 1, step: 4 }, + { min: 0.7, mid: 2.5, step: 1 }, + ], + COLLABORATOR_INACTIVE_TIMEOUT: 60000, + COLLABORATOR_IDLE_TIMEOUT: 3000, + COLLABORATOR_CHECK_INTERVAL: 1200, + // Negative pointer ids are reserved for internal use. + INTERNAL_POINTER_IDS: { CAMERA_MOVE: -10 } as const, + CAMERA_MOVING_TIMEOUT: 64, + HIT_TEST_MARGIN: 8, + EDGE_SCROLL_SPEED: 20, + EDGE_SCROLL_DISTANCE: 8, + COARSE_POINTER_WIDTH: 12, + COARSE_HANDLE_RADIUS: 20, + HANDLE_RADIUS: 12, + SIDES: ['top', 'right', 'bottom', 'left'] as const, + LONG_PRESS_DURATION: 500, + TEXT_SHADOW_LOD: 0.35, + MIN_ARROW_LENGTH: 10, + BOUND_ARROW_OFFSET: 10, + WAY_TOO_BIG_ARROW_BEND_FACTOR: 10, + STROKE_SIZES: { + s: 2, + m: 3.5, + l: 5, + xl: 10, + }, + ROTATE_CORNER_TO_SELECTION_CORNER: { + top_left_rotate: 'top_left', + top_right_rotate: 'top_right', + bottom_right_rotate: 'bottom_right', + bottom_left_rotate: 'bottom_left', + mobile_rotate: 'top_left', + } as const, +} as const diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 88e44208f..ce4fc4e16 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -61,28 +61,7 @@ import { flushSync } from 'react-dom' import { createRoot } from 'react-dom/client' import { TLUser, createTLUser } from '../config/createTLUser' import { checkShapesAndAddCore } from '../config/defaultShapes' -import { - ANIMATION_MEDIUM_MS, - CAMERA_MOVING_TIMEOUT, - CAMERA_SLIDE_FRICTION, - COARSE_DRAG_DISTANCE, - COLLABORATOR_IDLE_TIMEOUT, - DEFAULT_ANIMATION_OPTIONS, - DRAG_DISTANCE, - FOLLOW_CHASE_PAN_SNAP, - FOLLOW_CHASE_PAN_UNSNAP, - FOLLOW_CHASE_PROPORTION, - FOLLOW_CHASE_ZOOM_SNAP, - FOLLOW_CHASE_ZOOM_UNSNAP, - HIT_TEST_MARGIN, - INTERNAL_POINTER_IDS, - LONG_PRESS_DURATION, - MAX_PAGES, - MAX_SHAPES_PER_PAGE, - MAX_ZOOM, - MIN_ZOOM, - ZOOMS, -} from '../constants' +import { editorConstants } from '../editor-constants' import { Box } from '../primitives/Box' import { Mat, MatLike, MatModel } from '../primitives/Mat' import { Vec, VecLike } from '../primitives/Vec' @@ -132,6 +111,29 @@ import { TLHistoryBatchOptions } from './types/history-types' import { OptionalKeys, RequiredKeys, TLSvgOptions } from './types/misc-types' import { TLResizeHandle } from './types/selection-types' +const { + ANIMATION_MEDIUM_MS, + CAMERA_MOVING_TIMEOUT, + CAMERA_SLIDE_FRICTION, + COARSE_DRAG_DISTANCE, + COLLABORATOR_IDLE_TIMEOUT, + DEFAULT_ANIMATION_OPTIONS, + DRAG_DISTANCE, + FOLLOW_CHASE_PAN_SNAP, + FOLLOW_CHASE_PAN_UNSNAP, + FOLLOW_CHASE_PROPORTION, + FOLLOW_CHASE_ZOOM_SNAP, + FOLLOW_CHASE_ZOOM_UNSNAP, + HIT_TEST_MARGIN, + INTERNAL_POINTER_IDS, + LONG_PRESS_DURATION, + MAX_PAGES, + MAX_SHAPES_PER_PAGE, + MAX_ZOOM, + MIN_ZOOM, + ZOOMS, +} = editorConstants + /** @public */ export type TLAnimationOptions = Partial<{ duration: number @@ -2226,7 +2228,7 @@ export class Editor extends EventEmitter { const { x: cx, y: cy, z: cz } = this.getCamera() - let zoom = MAX_ZOOM + let zoom = MAX_ZOOM as number for (let i = 1; i < ZOOMS.length; i++) { const z1 = ZOOMS[i - 1] @@ -2264,7 +2266,7 @@ export class Editor extends EventEmitter { const { x: cx, y: cy, z: cz } = this.getCamera() - let zoom = MIN_ZOOM + let zoom = MIN_ZOOM as number for (let i = ZOOMS.length - 1; i > 0; i--) { const z1 = ZOOMS[i - 1] @@ -3085,7 +3087,7 @@ export class Editor extends EventEmitter { }[] = [] let nextIndex = MAX_SHAPES_PER_PAGE * 2 - let nextBackgroundIndex = MAX_SHAPES_PER_PAGE + let nextBackgroundIndex = MAX_SHAPES_PER_PAGE as number const erasingShapeIds = this.getErasingShapeIds() diff --git a/packages/editor/src/lib/editor/getSvgJsx.tsx b/packages/editor/src/lib/editor/getSvgJsx.tsx index f86bef475..929cb192e 100644 --- a/packages/editor/src/lib/editor/getSvgJsx.tsx +++ b/packages/editor/src/lib/editor/getSvgJsx.tsx @@ -6,10 +6,11 @@ import { getDefaultColorTheme, } from '@tldraw/tlschema' import { Fragment, ReactElement } from 'react' -import { SVG_PADDING } from '../constants' +import { editorConstants } from '../editor-constants' import { Editor } from './Editor' import { SvgExportContext, SvgExportContextProvider, SvgExportDef } from './types/SvgExportContext' import { TLSvgOptions } from './types/misc-types' +const { SVG_PADDING } = editorConstants export async function getSvgJsx( editor: Editor, diff --git a/packages/editor/src/lib/editor/managers/ClickManager.ts b/packages/editor/src/lib/editor/managers/ClickManager.ts index ef5e53b10..2449175ed 100644 --- a/packages/editor/src/lib/editor/managers/ClickManager.ts +++ b/packages/editor/src/lib/editor/managers/ClickManager.ts @@ -1,14 +1,12 @@ -import { - COARSE_DRAG_DISTANCE, - DOUBLE_CLICK_DURATION, - DRAG_DISTANCE, - MULTI_CLICK_DURATION, -} from '../../constants' +import { editorConstants } from '../../editor-constants' import { Vec } from '../../primitives/Vec' import { uniqueId } from '../../utils/uniqueId' import type { Editor } from '../Editor' import { TLClickEventInfo, TLPointerEventInfo } from '../types/event-types' +const { COARSE_DRAG_DISTANCE, DOUBLE_CLICK_DURATION, DRAG_DISTANCE, MULTI_CLICK_DURATION } = + editorConstants + type TLClickState = | 'idle' | 'pendingDouble' diff --git a/packages/editor/src/lib/editor/shapes/shared/arrow/curved-arrow.ts b/packages/editor/src/lib/editor/shapes/shared/arrow/curved-arrow.ts index a8a755df5..f41d391e6 100644 --- a/packages/editor/src/lib/editor/shapes/shared/arrow/curved-arrow.ts +++ b/packages/editor/src/lib/editor/shapes/shared/arrow/curved-arrow.ts @@ -1,4 +1,5 @@ import { TLArrowShape } from '@tldraw/tlschema' +import { editorConstants } from '../../../../editor-constants' import { Mat } from '../../../../primitives/Mat' import { Vec, VecLike } from '../../../../primitives/Vec' import { intersectCirclePolygon, intersectCirclePolyline } from '../../../../primitives/intersect' @@ -12,16 +13,15 @@ import { import type { Editor } from '../../../Editor' import { TLArcInfo, TLArrowInfo } from './arrow-types' import { - BOUND_ARROW_OFFSET, - MIN_ARROW_LENGTH, - STROKE_SIZES, - WAY_TOO_BIG_ARROW_BEND_FACTOR, getArrowTerminalsInArrowSpace, getBoundShapeInfoForTerminal, getBoundShapeRelationships, } from './shared' import { getStraightArrowInfo } from './straight-arrow' +const { BOUND_ARROW_OFFSET, MIN_ARROW_LENGTH, STROKE_SIZES, WAY_TOO_BIG_ARROW_BEND_FACTOR } = + editorConstants + export function getCurvedArrowInfo( editor: Editor, shape: TLArrowShape, diff --git a/packages/editor/src/lib/editor/shapes/shared/arrow/shared.ts b/packages/editor/src/lib/editor/shapes/shared/arrow/shared.ts index a42559ddb..f2c42ae46 100644 --- a/packages/editor/src/lib/editor/shapes/shared/arrow/shared.ts +++ b/packages/editor/src/lib/editor/shapes/shared/arrow/shared.ts @@ -114,21 +114,6 @@ export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShap return { start, end } } -/** @internal */ -export const MIN_ARROW_LENGTH = 10 -/** @internal */ -export const BOUND_ARROW_OFFSET = 10 -/** @internal */ -export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10 - -/** @public */ -export const STROKE_SIZES: Record = { - s: 2, - m: 3.5, - l: 5, - xl: 10, -} - /** * Get the relationships for an arrow that has two bound shape terminals. * If the arrow has only one bound shape, then it is always "safe" to apply diff --git a/packages/editor/src/lib/editor/shapes/shared/arrow/straight-arrow.ts b/packages/editor/src/lib/editor/shapes/shared/arrow/straight-arrow.ts index db2373c56..de1d7da87 100644 --- a/packages/editor/src/lib/editor/shapes/shared/arrow/straight-arrow.ts +++ b/packages/editor/src/lib/editor/shapes/shared/arrow/straight-arrow.ts @@ -1,4 +1,5 @@ import { TLArrowShape } from '@tldraw/tlschema' +import { editorConstants } from '../../../../editor-constants' import { Mat, MatModel } from '../../../../primitives/Mat' import { Vec, VecLike } from '../../../../primitives/Vec' import { @@ -8,14 +9,12 @@ import { import { Editor } from '../../../Editor' import { TLArrowInfo } from './arrow-types' import { - BOUND_ARROW_OFFSET, BoundShapeInfo, - MIN_ARROW_LENGTH, - STROKE_SIZES, getArrowTerminalsInArrowSpace, getBoundShapeInfoForTerminal, getBoundShapeRelationships, } from './shared' +const { BOUND_ARROW_OFFSET, MIN_ARROW_LENGTH, STROKE_SIZES } = editorConstants export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArrowInfo { const { start, end, arrowheadStart, arrowheadEnd } = shape.props diff --git a/packages/editor/src/lib/primitives/geometry/Arc2d.ts b/packages/editor/src/lib/primitives/geometry/Arc2d.ts index f3c5eeabf..b379829b1 100644 --- a/packages/editor/src/lib/primitives/geometry/Arc2d.ts +++ b/packages/editor/src/lib/primitives/geometry/Arc2d.ts @@ -2,7 +2,7 @@ import { Vec } from '../Vec' import { intersectLineSegmentCircle } from '../intersect' import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils' import { Geometry2d, Geometry2dOptions } from './Geometry2d' -import { getVerticesCountForLength } from './geometry-constants' +import { getVerticesCountForLength } from './getVerticesCountForLength' /** @public */ export class Arc2d extends Geometry2d { diff --git a/packages/editor/src/lib/primitives/geometry/Circle2d.ts b/packages/editor/src/lib/primitives/geometry/Circle2d.ts index c4abacefc..b0538cfcc 100644 --- a/packages/editor/src/lib/primitives/geometry/Circle2d.ts +++ b/packages/editor/src/lib/primitives/geometry/Circle2d.ts @@ -3,7 +3,7 @@ import { Vec } from '../Vec' import { intersectLineSegmentCircle } from '../intersect' import { PI2, getPointOnCircle } from '../utils' import { Geometry2d, Geometry2dOptions } from './Geometry2d' -import { getVerticesCountForLength } from './geometry-constants' +import { getVerticesCountForLength } from './getVerticesCountForLength' /** @public */ export class Circle2d extends Geometry2d { diff --git a/packages/editor/src/lib/primitives/geometry/Ellipse2d.ts b/packages/editor/src/lib/primitives/geometry/Ellipse2d.ts index acd7241e3..4f2a24f6e 100644 --- a/packages/editor/src/lib/primitives/geometry/Ellipse2d.ts +++ b/packages/editor/src/lib/primitives/geometry/Ellipse2d.ts @@ -3,7 +3,7 @@ import { Vec } from '../Vec' import { PI, PI2 } from '../utils' import { Edge2d } from './Edge2d' import { Geometry2d, Geometry2dOptions } from './Geometry2d' -import { getVerticesCountForLength } from './geometry-constants' +import { getVerticesCountForLength } from './getVerticesCountForLength' /** @public */ export class Ellipse2d extends Geometry2d { diff --git a/packages/editor/src/lib/primitives/geometry/geometry-constants.ts b/packages/editor/src/lib/primitives/geometry/geometry-constants.ts deleted file mode 100644 index 113715050..000000000 --- a/packages/editor/src/lib/primitives/geometry/geometry-constants.ts +++ /dev/null @@ -1,6 +0,0 @@ -const SPACING = 20 -const MIN_COUNT = 8 - -export function getVerticesCountForLength(length: number, spacing = SPACING) { - return Math.max(MIN_COUNT, Math.ceil(length / spacing)) -} diff --git a/packages/editor/src/lib/primitives/geometry/getVerticesCountForLength.ts b/packages/editor/src/lib/primitives/geometry/getVerticesCountForLength.ts new file mode 100644 index 000000000..4b2845851 --- /dev/null +++ b/packages/editor/src/lib/primitives/geometry/getVerticesCountForLength.ts @@ -0,0 +1,3 @@ +export function getVerticesCountForLength(length: number, spacing = 20) { + return Math.max(8, Math.ceil(length / spacing)) +} diff --git a/packages/editor/src/lib/utils/edgeScrolling.ts b/packages/editor/src/lib/utils/edgeScrolling.ts index b89e804fe..4cd3cab0c 100644 --- a/packages/editor/src/lib/utils/edgeScrolling.ts +++ b/packages/editor/src/lib/utils/edgeScrolling.ts @@ -1,4 +1,4 @@ -import { COARSE_POINTER_WIDTH, EDGE_SCROLL_DISTANCE, EDGE_SCROLL_SPEED } from '../constants' +import { editorConstants } from '../editor-constants' import { Editor } from '../editor/Editor' /** @@ -14,8 +14,8 @@ function getEdgeProximityFactor( insetStart: boolean, insetEnd: boolean ) { - const dist = EDGE_SCROLL_DISTANCE - const pw = isCoarse ? COARSE_POINTER_WIDTH : 0 // pointer width + const dist = editorConstants.EDGE_SCROLL_DISTANCE + const pw = isCoarse ? editorConstants.COARSE_POINTER_WIDTH : 0 // pointer width const pMin = position - pw const pMax = position + pw const min = insetStart ? 0 : dist @@ -62,7 +62,7 @@ export function moveCameraWhenCloseToEdge(editor: Editor) { if (proximityFactorX === 0 && proximityFactorY === 0) return // Determines the base speed of the scroll - const pxSpeed = editor.user.getEdgeScrollSpeed() * EDGE_SCROLL_SPEED + const pxSpeed = editor.user.getEdgeScrollSpeed() * editorConstants.EDGE_SCROLL_SPEED const scrollDeltaX = (pxSpeed * proximityFactorX * screenSizeFactorX) / zoomLevel const scrollDeltaY = (pxSpeed * proximityFactorY * screenSizeFactorY) / zoomLevel diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 85fbf14d2..133208979 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -414,7 +414,7 @@ export const DefaultQuickActions: NamedExoticComponent; export function DefaultQuickActionsContent(): JSX_2.Element | undefined; // @public (undocumented) -export const defaultShapeTools: (typeof ArrowShapeTool | typeof DrawShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[]; +export const defaultShapeTools: (typeof ArrowShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof HighlightShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[]; // @public (undocumented) export const defaultShapeUtils: TLAnyShapeUtilConstructor[]; @@ -460,7 +460,7 @@ export function downsizeImage(blob: Blob, width: number, height: number, opts?: // @public (undocumented) export class DrawShapeTool extends StateNode { // (undocumented) - static children: () => (typeof Drawing | typeof Idle_2)[]; + static children: () => (typeof Drawing | typeof Idle_3)[]; // (undocumented) static id: string; // (undocumented) @@ -622,9 +622,6 @@ export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: { // @public (undocumented) export function FitFrameToContentMenuItem(): JSX_2.Element | null; -// @public (undocumented) -export const FONT_FAMILIES: Record; - // @public (undocumented) export class FrameShapeTool extends BaseBoxShapeTool { // (undocumented) @@ -683,7 +680,7 @@ export function FrameToolbarItem(): JSX_2.Element; // @public (undocumented) export class GeoShapeTool extends StateNode { // (undocumented) - static children: () => (typeof Idle_3 | typeof Pointing_2)[]; + static children: () => (typeof Idle_2 | typeof Pointing_2)[]; // (undocumented) static id: string; // (undocumented) @@ -893,7 +890,7 @@ export function HexagonToolbarItem(): JSX_2.Element; // @public (undocumented) export class HighlightShapeTool extends StateNode { // (undocumented) - static children: () => (typeof Drawing | typeof Idle_2)[]; + static children: () => (typeof Drawing | typeof Idle_3)[]; // (undocumented) static id: string; // (undocumented) @@ -993,9 +990,6 @@ export function KeyboardShortcutsMenuItem(): JSX_2.Element | null; // @internal (undocumented) export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[]): void; -// @public (undocumented) -export const LABEL_FONT_SIZES: Record; - // @public (undocumented) export function LanguageMenu(): JSX_2.Element; @@ -1234,26 +1228,6 @@ export function parseTldrawJsonFile({ json, schema, }: { // @public (undocumented) export function PasteMenuItem(): JSX_2.Element; -// @public (undocumented) -export enum PORTRAIT_BREAKPOINT { - // (undocumented) - DESKTOP = 7, - // (undocumented) - MOBILE = 4, - // (undocumented) - MOBILE_SM = 3, - // (undocumented) - MOBILE_XS = 2, - // (undocumented) - MOBILE_XXS = 1, - // (undocumented) - TABLET = 6, - // (undocumented) - TABLET_SM = 5, - // (undocumented) - ZERO = 0 -} - // @public (undocumented) export function PreferencesGroup(): JSX_2.Element; @@ -1332,15 +1306,6 @@ export function StackMenuItems(): JSX_2.Element; // @public (undocumented) export function StarToolbarItem(): JSX_2.Element; -// @public (undocumented) -export const TEXT_PROPS: { - fontStyle: string; - fontVariant: string; - fontWeight: string; - lineHeight: number; - padding: string; -}; - // @public (undocumented) export const TextLabel: React_2.NamedExoticComponent; @@ -1480,6 +1445,339 @@ export function Tldraw(props: TldrawProps): JSX_2.Element; // @public (undocumented) export const TLDRAW_FILE_EXTENSION: ".tldr"; +// @public (undocumented) +export const tldrawConstants: { + ADJACENT_SHAPE_MARGIN: number; + ANIMATION_MEDIUM_MS: 320; + ANIMATION_SHORT_MS: 80; + ARROW_LABEL_FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>; + ARROW_LABEL_PADDING: number; + BOUND_ARROW_OFFSET: 10; + CAMERA_MOVING_TIMEOUT: 64; + CAMERA_SLIDE_FRICTION: 0.09; + COARSE_DRAG_DISTANCE: 36; + COARSE_HANDLE_RADIUS: 20; + COARSE_POINTER_WIDTH: 12; + COLLABORATOR_CHECK_INTERVAL: 1200; + COLLABORATOR_IDLE_TIMEOUT: 3000; + COLLABORATOR_INACTIVE_TIMEOUT: 60000; + DEFAULT_ANIMATION_OPTIONS: { + readonly duration: 0; + readonly easing: (t: number) => number; + }; + DOUBLE_CLICK_DURATION: 450; + DRAG_DISTANCE: 16; + EDGE_SCROLL_DISTANCE: 8; + EDGE_SCROLL_SPEED: 20; + FOLLOW_CHASE_PAN_SNAP: 0.1; + FOLLOW_CHASE_PAN_UNSNAP: 0.2; + FOLLOW_CHASE_PROPORTION: 0.5; + FOLLOW_CHASE_ZOOM_SNAP: 0.005; + FOLLOW_CHASE_ZOOM_UNSNAP: 0.05; + FONT_FAMILIES: { + draw: string; + mono: string; + sans: string; + serif: string; + }; + FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>; + GRID_STEPS: readonly [{ + readonly mid: 0.15; + readonly min: -1; + readonly step: 64; + }, { + readonly mid: 0.375; + readonly min: 0.05; + readonly step: 16; + }, { + readonly mid: 1; + readonly min: 0.15; + readonly step: 4; + }, { + readonly mid: 2.5; + readonly min: 0.7; + readonly step: 1; + }]; + HANDLE_RADIUS: 12; + HASH_PATTERN_ZOOM_NAMES: Record; + HIT_TEST_MARGIN: 8; + INTERNAL_POINTER_IDS: { + readonly CAMERA_MOVE: -10; + }; + LABEL_FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>; + LABEL_PADDING: number; + LABEL_TO_ARROW_PADDING: number; + LONG_PRESS_DURATION: 500; + MAX_CLICK_DISTANCE: 40; + MAX_PAGES: 40; + MAX_SHAPES_PER_PAGE: 2000; + MAX_ZOOM: 8; + MIN_ARROW_LENGTH: 10; + MIN_CROP_SIZE: number; + MIN_END_PRESSURE: number; + MIN_GEO_SIZE_WITH_LABEL: number; + MIN_START_PRESSURE: number; + MIN_ZOOM: 0.1; + MULTI_CLICK_DURATION: 200; + PORTRAIT_BREAKPOINT: { + DESKTOP: number; + MOBILE_SM: number; + MOBILE_XS: number; + MOBILE_XXS: number; + MOBILE: number; + TABLET_SM: number; + TABLET: number; + ZERO: number; + }; + PORTRAIT_BREAKPOINTS: number[]; + ROTATE_CORNER_TO_SELECTION_CORNER: { + readonly bottom_left_rotate: "bottom_left"; + readonly bottom_right_rotate: "bottom_right"; + readonly mobile_rotate: "top_left"; + readonly top_left_rotate: "top_left"; + readonly top_right_rotate: "top_right"; + }; + SIDES: readonly ["top", "right", "bottom", "left"]; + STROKE_SIZES: Record<"l" | "m" | "s" | "xl", number>; + STYLES: { + readonly arrowheadEnd: readonly [{ + readonly icon: "arrowhead-none"; + readonly value: "none"; + }, { + readonly icon: "arrowhead-arrow"; + readonly value: "arrow"; + }, { + readonly icon: "arrowhead-triangle"; + readonly value: "triangle"; + }, { + readonly icon: "arrowhead-square"; + readonly value: "square"; + }, { + readonly icon: "arrowhead-dot"; + readonly value: "dot"; + }, { + readonly icon: "arrowhead-diamond"; + readonly value: "diamond"; + }, { + readonly icon: "arrowhead-triangle-inverted"; + readonly value: "inverted"; + }, { + readonly icon: "arrowhead-bar"; + readonly value: "bar"; + }]; + readonly arrowheadStart: readonly [{ + readonly icon: "arrowhead-none"; + readonly value: "none"; + }, { + readonly icon: "arrowhead-arrow"; + readonly value: "arrow"; + }, { + readonly icon: "arrowhead-triangle"; + readonly value: "triangle"; + }, { + readonly icon: "arrowhead-square"; + readonly value: "square"; + }, { + readonly icon: "arrowhead-dot"; + readonly value: "dot"; + }, { + readonly icon: "arrowhead-diamond"; + readonly value: "diamond"; + }, { + readonly icon: "arrowhead-triangle-inverted"; + readonly value: "inverted"; + }, { + readonly icon: "arrowhead-bar"; + readonly value: "bar"; + }]; + readonly color: readonly [{ + readonly icon: "color"; + readonly value: "black"; + }, { + readonly icon: "color"; + readonly value: "grey"; + }, { + readonly icon: "color"; + readonly value: "light-violet"; + }, { + readonly icon: "color"; + readonly value: "violet"; + }, { + readonly icon: "color"; + readonly value: "blue"; + }, { + readonly icon: "color"; + readonly value: "light-blue"; + }, { + readonly icon: "color"; + readonly value: "yellow"; + }, { + readonly icon: "color"; + readonly value: "orange"; + }, { + readonly icon: "color"; + readonly value: "green"; + }, { + readonly icon: "color"; + readonly value: "light-green"; + }, { + readonly icon: "color"; + readonly value: "light-red"; + }, { + readonly icon: "color"; + readonly value: "red"; + }]; + readonly dash: readonly [{ + readonly icon: "dash-draw"; + readonly value: "draw"; + }, { + readonly icon: "dash-dashed"; + readonly value: "dashed"; + }, { + readonly icon: "dash-dotted"; + readonly value: "dotted"; + }, { + readonly icon: "dash-solid"; + readonly value: "solid"; + }]; + readonly fill: readonly [{ + readonly icon: "fill-none"; + readonly value: "none"; + }, { + readonly icon: "fill-semi"; + readonly value: "semi"; + }, { + readonly icon: "fill-solid"; + readonly value: "solid"; + }, { + readonly icon: "fill-pattern"; + readonly value: "pattern"; + }]; + readonly font: readonly [{ + readonly icon: "font-draw"; + readonly value: "draw"; + }, { + readonly icon: "font-sans"; + readonly value: "sans"; + }, { + readonly icon: "font-serif"; + readonly value: "serif"; + }, { + readonly icon: "font-mono"; + readonly value: "mono"; + }]; + readonly geo: readonly [{ + readonly icon: "geo-rectangle"; + readonly value: "rectangle"; + }, { + readonly icon: "geo-ellipse"; + readonly value: "ellipse"; + }, { + readonly icon: "geo-cloud"; + readonly value: "cloud"; + }, { + readonly icon: "geo-triangle"; + readonly value: "triangle"; + }, { + readonly icon: "geo-diamond"; + readonly value: "diamond"; + }, { + readonly icon: "geo-pentagon"; + readonly value: "pentagon"; + }, { + readonly icon: "geo-hexagon"; + readonly value: "hexagon"; + }, { + readonly icon: "geo-octagon"; + readonly value: "octagon"; + }, { + readonly icon: "geo-star"; + readonly value: "star"; + }, { + readonly icon: "geo-rhombus"; + readonly value: "rhombus"; + }, { + readonly icon: "geo-rhombus-2"; + readonly value: "rhombus-2"; + }, { + readonly icon: "geo-oval"; + readonly value: "oval"; + }, { + readonly icon: "geo-trapezoid"; + readonly value: "trapezoid"; + }, { + readonly icon: "geo-arrow-right"; + readonly value: "arrow-right"; + }, { + readonly icon: "geo-arrow-left"; + readonly value: "arrow-left"; + }, { + readonly icon: "geo-arrow-up"; + readonly value: "arrow-up"; + }, { + readonly icon: "geo-arrow-down"; + readonly value: "arrow-down"; + }, { + readonly icon: "geo-x-box"; + readonly value: "x-box"; + }, { + readonly icon: "geo-check-box"; + readonly value: "check-box"; + }]; + readonly horizontalAlign: readonly [{ + readonly icon: "text-align-left"; + readonly value: "start"; + }, { + readonly icon: "text-align-center"; + readonly value: "middle"; + }, { + readonly icon: "text-align-right"; + readonly value: "end"; + }]; + readonly size: readonly [{ + readonly icon: "size-small"; + readonly value: "s"; + }, { + readonly icon: "size-medium"; + readonly value: "m"; + }, { + readonly icon: "size-large"; + readonly value: "l"; + }, { + readonly icon: "size-extra-large"; + readonly value: "xl"; + }]; + readonly spline: readonly [{ + readonly icon: "spline-line"; + readonly value: "line"; + }, { + readonly icon: "spline-cubic"; + readonly value: "cubic"; + }]; + readonly verticalAlign: readonly [{ + readonly icon: "vertical-align-start"; + readonly value: "start"; + }, { + readonly icon: "vertical-align-center"; + readonly value: "middle"; + }, { + readonly icon: "vertical-align-end"; + readonly value: "end"; + }]; + }; + SVG_PADDING: 32; + TEXT_PROPS: { + fontStyle: string; + fontVariant: string; + fontWeight: string; + lineHeight: number; + padding: string; + }; + TEXT_SHADOW_LOD: 0.35; + WAY_TOO_BIG_ARROW_BEND_FACTOR: 10; + ZOOMS: readonly [0.1, 0.25, 0.5, 1, 2, 4, 8]; +}; + // @public (undocumented) export interface TldrawFile { // (undocumented) diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts index 03e5643ab..3619611af 100644 --- a/packages/tldraw/src/index.ts +++ b/packages/tldraw/src/index.ts @@ -46,11 +46,11 @@ export { getOccludedChildren, kickoutOccludedShapes } from './lib/tools/SelectTo export { ZoomTool } from './lib/tools/ZoomTool/ZoomTool' // UI export { useEditableText } from './lib/shapes/shared/useEditableText' +export { tldrawConstants } from './lib/tldraw-constants' export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/TldrawUi' export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls' export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator' export { Spinner } from './lib/ui/components/Spinner' -export { PORTRAIT_BREAKPOINT } from './lib/ui/constants' export { TldrawUiContextProvider, type TldrawUiContextProviderProps, @@ -433,11 +433,3 @@ export { TldrawUiMenuSubmenu, type TLUiMenuSubmenuProps, } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu' - -/* ----------------- Constants ---------------- */ - -export { - FONT_FAMILIES, - LABEL_FONT_SIZES, - TEXT_PROPS, -} from './lib/shapes/shared/default-shape-constants' diff --git a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts index d35def4c7..df7931c70 100644 --- a/packages/tldraw/src/lib/defaultExternalContentHandlers.ts +++ b/packages/tldraw/src/lib/defaultExternalContentHandlers.ts @@ -19,12 +19,13 @@ import { getHashForBuffer, getHashForString, } from '@tldraw/editor' -import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants' +import { tldrawConstants } from './tldraw-constants' import { TLUiToastsContextType } from './ui/context/toasts' import { useTranslation } from './ui/hooks/useTranslation/useTranslation' import { containBoxSize, downsizeImage, isGifAnimated } from './utils/assets/assets' import { getEmbedInfo } from './utils/embeds/embeds' import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text/text' +const { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } = tldrawConstants /** @public */ export type TLExternalContentProps = { diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx index 7036ee1b6..56a07247e 100644 --- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx @@ -34,9 +34,9 @@ import { useIsEditing, } from '@tldraw/editor' import React from 'react' +import { tldrawConstants } from '../../tldraw-constants' import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill' import { SvgTextLabel } from '../shared/SvgTextLabel' -import { ARROW_LABEL_FONT_SIZES, STROKE_SIZES } from '../shared/default-shape-constants' import { getFillDefForCanvas, getFillDefForExport, @@ -52,6 +52,7 @@ import { getStraightArrowHandlePath, } from './arrowpaths' import { ArrowTextLabel } from './components/ArrowTextLabel' +const { ARROW_LABEL_FONT_SIZES, STROKE_SIZES } = tldrawConstants let globalRenderIndex = 0 diff --git a/packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts b/packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts index edef80479..242f05942 100644 --- a/packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts +++ b/packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts @@ -16,14 +16,15 @@ import { intersectCirclePolygon, intersectLineSegmentPolygon, } from '@tldraw/editor' -import { +import { tldrawConstants } from '../../tldraw-constants' +const { ARROW_LABEL_FONT_SIZES, ARROW_LABEL_PADDING, FONT_FAMILIES, LABEL_TO_ARROW_PADDING, STROKE_SIZES, TEXT_PROPS, -} from '../shared/default-shape-constants' +} = tldrawConstants const labelSizeCache = new WeakMap() diff --git a/packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx b/packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx index f4f133c41..428f0a394 100644 --- a/packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx +++ b/packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx @@ -1,8 +1,9 @@ import { TLArrowShape, TLDefaultColorStyle, TLShapeId, VecLike } from '@tldraw/editor' import * as React from 'react' +import { tldrawConstants } from '../../../tldraw-constants' import { useDefaultColorTheme } from '../../shared/ShapeFill' import { TextLabel } from '../../shared/TextLabel' -import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../shared/default-shape-constants' +const { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } = tldrawConstants export const ArrowTextLabel = React.memo(function ArrowTextLabel({ id, diff --git a/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx b/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx index b4ffff97d..3415c286a 100644 --- a/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx @@ -18,14 +18,15 @@ import { rng, toFixed, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill' -import { STROKE_SIZES } from '../shared/default-shape-constants' import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs' import { getStrokePoints } from '../shared/freehand/getStrokePoints' import { getSvgPathFromStrokePoints } from '../shared/freehand/svg' import { svgInk } from '../shared/freehand/svgInk' import { useForceSolid } from '../shared/useForceSolid' import { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath' +const { STROKE_SIZES } = tldrawConstants /** @public */ export class DrawShapeUtil extends ShapeUtil { diff --git a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts index 2b049c675..1069e25d3 100644 --- a/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts +++ b/packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts @@ -1,5 +1,4 @@ import { - DRAG_DISTANCE, Mat, StateNode, TLDefaultSizeStyle, @@ -18,7 +17,8 @@ import { toFixed, uniqueId, } from '@tldraw/editor' -import { STROKE_SIZES } from '../../shared/default-shape-constants' +import { tldrawConstants } from '../../../tldraw-constants' +const { STROKE_SIZES, DRAG_DISTANCE } = tldrawConstants type DrawableShape = TLDrawShape | TLHighlightShape diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx index 420811938..25a716cee 100644 --- a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx @@ -27,17 +27,11 @@ import { getPolygonVertices, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' import { HyperlinkButton } from '../shared/HyperlinkButton' import { useDefaultColorTheme } from '../shared/ShapeFill' import { SvgTextLabel } from '../shared/SvgTextLabel' import { TextLabel } from '../shared/TextLabel' -import { - FONT_FAMILIES, - LABEL_FONT_SIZES, - LABEL_PADDING, - STROKE_SIZES, - TEXT_PROPS, -} from '../shared/default-shape-constants' import { getFillDefForCanvas, getFillDefForExport, @@ -50,7 +44,14 @@ import { GeoShapeBody } from './components/GeoShapeBody' import { getOvalIndicatorPath } from './components/SolidStyleOval' import { getLines } from './getLines' -const MIN_SIZE_WITH_LABEL = 17 * 3 +const { + MIN_GEO_SIZE_WITH_LABEL, + FONT_FAMILIES, + LABEL_FONT_SIZES, + LABEL_PADDING, + STROKE_SIZES, + TEXT_PROPS, +} = tldrawConstants /** @public */ export class GeoShapeUtil extends BaseBoxShapeUtil { @@ -526,15 +527,15 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { let overShrinkY = 0 if (shape.props.text.trim()) { - let newW = Math.max(Math.abs(w), MIN_SIZE_WITH_LABEL) - let newH = Math.max(Math.abs(h), MIN_SIZE_WITH_LABEL) + let newW = Math.max(Math.abs(w), MIN_GEO_SIZE_WITH_LABEL) + let newH = Math.max(Math.abs(h), MIN_GEO_SIZE_WITH_LABEL) - if (newW < MIN_SIZE_WITH_LABEL && newH === MIN_SIZE_WITH_LABEL) { - newW = MIN_SIZE_WITH_LABEL + if (newW < MIN_GEO_SIZE_WITH_LABEL && newH === MIN_GEO_SIZE_WITH_LABEL) { + newW = MIN_GEO_SIZE_WITH_LABEL } - if (newW === MIN_SIZE_WITH_LABEL && newH < MIN_SIZE_WITH_LABEL) { - newH = MIN_SIZE_WITH_LABEL + if (newW === MIN_GEO_SIZE_WITH_LABEL && newH < MIN_GEO_SIZE_WITH_LABEL) { + newH = MIN_GEO_SIZE_WITH_LABEL } const labelSize = getLabelSize(this.editor, { @@ -665,9 +666,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { let h = Math.max(prevHeight, nextHeight) // If both the width and height were less than the minimum size, make the shape square - if (prev.props.w < MIN_SIZE_WITH_LABEL && prev.props.h < MIN_SIZE_WITH_LABEL) { - w = Math.max(w, MIN_SIZE_WITH_LABEL) - h = Math.max(h, MIN_SIZE_WITH_LABEL) + if (prev.props.w < MIN_GEO_SIZE_WITH_LABEL && prev.props.h < MIN_GEO_SIZE_WITH_LABEL) { + w = Math.max(w, MIN_GEO_SIZE_WITH_LABEL) + h = Math.max(h, MIN_GEO_SIZE_WITH_LABEL) w = Math.max(w, h) h = Math.max(w, h) } diff --git a/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx b/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx index e5fe7e959..dde3d0b01 100644 --- a/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx +++ b/packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx @@ -1,5 +1,5 @@ import { Group2d, TLGeoShape, useEditor } from '@tldraw/editor' -import { STROKE_SIZES } from '../../shared/default-shape-constants' +import { tldrawConstants } from '../../../tldraw-constants' import { getLines } from '../getLines' import { DashStyleCloud } from './DashStyleCloud' import { DashStyleEllipse } from './DashStyleEllipse' @@ -12,6 +12,8 @@ import { SolidStyleEllipse } from './SolidStyleEllipse' import { SolidStyleOval } from './SolidStyleOval' import { SolidStylePolygon } from './SolidStylePolygon' +const { STROKE_SIZES } = tldrawConstants + export function GeoShapeBody({ shape }: { shape: TLGeoShape }) { const editor = useEditor() const { id, props } = shape diff --git a/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx b/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx index 771400cc1..44d1e6fb6 100644 --- a/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx @@ -13,9 +13,9 @@ import { last, rng, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath' import { useDefaultColorTheme } from '../shared/ShapeFill' -import { FONT_SIZES } from '../shared/default-shape-constants' import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints' import { getStrokePoints } from '../shared/freehand/getStrokePoints' import { setStrokePointRadii } from '../shared/freehand/setStrokePointRadii' @@ -23,6 +23,7 @@ import { getSvgPathFromStrokePoints } from '../shared/freehand/svg' import { useColorSpace } from '../shared/useColorSpace' import { useForceSolid } from '../shared/useForceSolid' +const { FONT_SIZES } = tldrawConstants const OVERLAY_OPACITY = 0.35 const UNDERLAY_OPACITY = 0.82 diff --git a/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx b/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx index 03158d50e..7d7dd0c26 100644 --- a/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx @@ -19,8 +19,8 @@ import { sortByIndex, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill' -import { STROKE_SIZES } from '../shared/default-shape-constants' import { getPerfectDashProps } from '../shared/getPerfectDashProps' import { getDrawLinePathData } from '../shared/polygon-helpers' import { getLineDrawPath, getLineIndicatorPath } from './components/getLinePath' @@ -30,6 +30,8 @@ import { getSvgPathForLineGeometry, } from './components/svg' +const { STROKE_SIZES } = tldrawConstants + const handlesCache = new WeakMapCache() /** @public */ diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index 109caf08e..e2b2382e8 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -27,16 +27,11 @@ import { HyperlinkButton } from '../shared/HyperlinkButton' import { useDefaultColorTheme } from '../shared/ShapeFill' import { SvgTextLabel } from '../shared/SvgTextLabel' import { TextLabel } from '../shared/TextLabel' -import { - FONT_FAMILIES, - LABEL_FONT_SIZES, - LABEL_PADDING, - TEXT_PROPS, -} from '../shared/default-shape-constants' + import { getFontDefForExport } from '../shared/defaultStyleDefs' +import { tldrawConstants } from '../../tldraw-constants' import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers' -import { ADJACENT_SHAPE_MARGIN } from '../../ui/constants' import { useForceSolid } from '../shared/useForceSolid' import { CLONE_HANDLE_MARGIN, @@ -45,6 +40,9 @@ import { getNoteShapeForAdjacentPosition, } from './noteHelpers' +const { ADJACENT_SHAPE_MARGIN, FONT_FAMILIES, LABEL_FONT_SIZES, LABEL_PADDING, TEXT_PROPS } = + tldrawConstants + /** @public */ export class NoteShapeUtil extends ShapeUtil { static override type = 'note' as const diff --git a/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx b/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx index dfc58ae3e..c9f0c9a26 100644 --- a/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx +++ b/packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx @@ -1,5 +1,4 @@ import { - HASH_PATTERN_ZOOM_NAMES, TLDefaultColorStyle, TLDefaultColorTheme, TLDefaultFillStyle, @@ -10,6 +9,8 @@ import { useValue, } from '@tldraw/editor' import React from 'react' +import { tldrawConstants } from '../../tldraw-constants' +const { HASH_PATTERN_ZOOM_NAMES } = tldrawConstants export interface ShapeFillProps { d: string diff --git a/packages/tldraw/src/lib/shapes/shared/SvgTextLabel.tsx b/packages/tldraw/src/lib/shapes/shared/SvgTextLabel.tsx index dcb4dd567..1be301562 100644 --- a/packages/tldraw/src/lib/shapes/shared/SvgTextLabel.tsx +++ b/packages/tldraw/src/lib/shapes/shared/SvgTextLabel.tsx @@ -6,10 +6,11 @@ import { TLDefaultVerticalAlignStyle, useEditor, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' import { useDefaultColorTheme } from './ShapeFill' import { createTextJsxFromSpans } from './createTextJsxFromSpans' -import { TEXT_PROPS } from './default-shape-constants' import { getLegacyOffsetX } from './legacyProps' +const { TEXT_PROPS } = tldrawConstants export function SvgTextLabel({ fontSize, diff --git a/packages/tldraw/src/lib/shapes/shared/default-shape-constants.ts b/packages/tldraw/src/lib/shapes/shared/default-shape-constants.ts deleted file mode 100644 index 1f64351b1..000000000 --- a/packages/tldraw/src/lib/shapes/shared/default-shape-constants.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { TLDefaultFontStyle, TLDefaultSizeStyle } from '@tldraw/editor' - -/** @public */ -export const TEXT_PROPS = { - lineHeight: 1.35, - fontWeight: 'normal', - fontVariant: 'normal', - fontStyle: 'normal', - padding: '0px', -} - -/** @public */ -export const STROKE_SIZES: Record = { - s: 2, - m: 3.5, - l: 5, - xl: 10, -} - -/** @public */ -export const FONT_SIZES: Record = { - s: 18, - m: 24, - l: 36, - xl: 44, -} - -/** @public */ -export const LABEL_FONT_SIZES: Record = { - s: 18, - m: 22, - l: 26, - xl: 32, -} - -/** @public */ -export const ARROW_LABEL_FONT_SIZES: Record = { - s: 18, - m: 20, - l: 24, - xl: 28, -} - -/** @public */ -export const FONT_FAMILIES: Record = { - draw: 'var(--tl-font-draw)', - sans: 'var(--tl-font-sans)', - serif: 'var(--tl-font-serif)', - mono: 'var(--tl-font-mono)', -} - -/** @internal */ -export const LABEL_TO_ARROW_PADDING = 20 -/** @internal */ -export const ARROW_LABEL_PADDING = 4.25 -/** @internal */ -export const LABEL_PADDING = 16 diff --git a/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx b/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx index 16e4495be..08077706c 100644 --- a/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx +++ b/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx @@ -3,8 +3,6 @@ import { DefaultFontFamilies, DefaultFontStyle, FileHelpers, - HASH_PATTERN_ZOOM_NAMES, - MAX_ZOOM, SvgExportDef, TLDefaultFillStyle, TLDefaultFontStyle, @@ -13,7 +11,9 @@ import { useEditor, } from '@tldraw/editor' import { useEffect, useMemo, useRef, useState } from 'react' +import { tldrawConstants } from '../../tldraw-constants' import { useDefaultColorTheme } from './ShapeFill' +const { HASH_PATTERN_ZOOM_NAMES, MAX_ZOOM } = tldrawConstants /** @public */ export function getFontDefForExport(fontStyle: TLDefaultFontStyle): SvgExportDef { diff --git a/packages/tldraw/src/lib/shapes/shared/freehand/getStrokePoints.ts b/packages/tldraw/src/lib/shapes/shared/freehand/getStrokePoints.ts index ae7b7b232..9e1d3eaa9 100644 --- a/packages/tldraw/src/lib/shapes/shared/freehand/getStrokePoints.ts +++ b/packages/tldraw/src/lib/shapes/shared/freehand/getStrokePoints.ts @@ -1,9 +1,7 @@ import { Vec, VecLike } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' import type { StrokeOptions, StrokePoint } from './types' - -const MIN_START_PRESSURE = 0.025 -const MIN_END_PRESSURE = 0.01 - +const { MIN_START_PRESSURE = 0.15, MIN_END_PRESSURE = 0.15 } = tldrawConstants /** * ## getStrokePoints * diff --git a/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx b/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx index 7378d16b6..a1c71ebf7 100644 --- a/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx @@ -20,14 +20,16 @@ import { useEditor, } from '@tldraw/editor' import { useCallback } from 'react' +import { tldrawConstants } from '../../tldraw-constants' import { useDefaultColorTheme } from '../shared/ShapeFill' import { SvgTextLabel } from '../shared/SvgTextLabel' import { TextHelpers } from '../shared/TextHelpers' import { TextLabel } from '../shared/TextLabel' -import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants' import { getFontDefForExport } from '../shared/defaultStyleDefs' import { resizeScaled } from '../shared/resizeScaled' +const { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } = tldrawConstants + const sizeCache = new WeakMapCache() /** @public */ diff --git a/packages/tldraw/src/lib/styles.tsx b/packages/tldraw/src/lib/styles.tsx deleted file mode 100644 index 6a4f2b684..000000000 --- a/packages/tldraw/src/lib/styles.tsx +++ /dev/null @@ -1,101 +0,0 @@ -export type StyleValuesForUi = readonly { - readonly value: T - readonly icon: string -}[] - -// todo: default styles prop? -export const STYLES = { - color: [ - { value: 'black', icon: 'color' }, - { value: 'grey', icon: 'color' }, - { value: 'light-violet', icon: 'color' }, - { value: 'violet', icon: 'color' }, - { value: 'blue', icon: 'color' }, - { value: 'light-blue', icon: 'color' }, - { value: 'yellow', icon: 'color' }, - { value: 'orange', icon: 'color' }, - { value: 'green', icon: 'color' }, - { value: 'light-green', icon: 'color' }, - { value: 'light-red', icon: 'color' }, - { value: 'red', icon: 'color' }, - ], - fill: [ - { value: 'none', icon: 'fill-none' }, - { value: 'semi', icon: 'fill-semi' }, - { value: 'solid', icon: 'fill-solid' }, - { value: 'pattern', icon: 'fill-pattern' }, - ], - dash: [ - { value: 'draw', icon: 'dash-draw' }, - { value: 'dashed', icon: 'dash-dashed' }, - { value: 'dotted', icon: 'dash-dotted' }, - { value: 'solid', icon: 'dash-solid' }, - ], - size: [ - { value: 's', icon: 'size-small' }, - { value: 'm', icon: 'size-medium' }, - { value: 'l', icon: 'size-large' }, - { value: 'xl', icon: 'size-extra-large' }, - ], - font: [ - { value: 'draw', icon: 'font-draw' }, - { value: 'sans', icon: 'font-sans' }, - { value: 'serif', icon: 'font-serif' }, - { value: 'mono', icon: 'font-mono' }, - ], - horizontalAlign: [ - { value: 'start', icon: 'text-align-left' }, - { value: 'middle', icon: 'text-align-center' }, - { value: 'end', icon: 'text-align-right' }, - ], - verticalAlign: [ - { value: 'start', icon: 'vertical-align-start' }, - { value: 'middle', icon: 'vertical-align-center' }, - { value: 'end', icon: 'vertical-align-end' }, - ], - geo: [ - { value: 'rectangle', icon: 'geo-rectangle' }, - { value: 'ellipse', icon: 'geo-ellipse' }, - { value: 'cloud', icon: 'geo-cloud' }, - { value: 'triangle', icon: 'geo-triangle' }, - { value: 'diamond', icon: 'geo-diamond' }, - { value: 'pentagon', icon: 'geo-pentagon' }, - { value: 'hexagon', icon: 'geo-hexagon' }, - { value: 'octagon', icon: 'geo-octagon' }, - { value: 'star', icon: 'geo-star' }, - { value: 'rhombus', icon: 'geo-rhombus' }, - { value: 'rhombus-2', icon: 'geo-rhombus-2' }, - { value: 'oval', icon: 'geo-oval' }, - { value: 'trapezoid', icon: 'geo-trapezoid' }, - { value: 'arrow-right', icon: 'geo-arrow-right' }, - { value: 'arrow-left', icon: 'geo-arrow-left' }, - { value: 'arrow-up', icon: 'geo-arrow-up' }, - { value: 'arrow-down', icon: 'geo-arrow-down' }, - { value: 'x-box', icon: 'geo-x-box' }, - { value: 'check-box', icon: 'geo-check-box' }, - ], - arrowheadStart: [ - { value: 'none', icon: 'arrowhead-none' }, - { value: 'arrow', icon: 'arrowhead-arrow' }, - { value: 'triangle', icon: 'arrowhead-triangle' }, - { value: 'square', icon: 'arrowhead-square' }, - { value: 'dot', icon: 'arrowhead-dot' }, - { value: 'diamond', icon: 'arrowhead-diamond' }, - { value: 'inverted', icon: 'arrowhead-triangle-inverted' }, - { value: 'bar', icon: 'arrowhead-bar' }, - ], - arrowheadEnd: [ - { value: 'none', icon: 'arrowhead-none' }, - { value: 'arrow', icon: 'arrowhead-arrow' }, - { value: 'triangle', icon: 'arrowhead-triangle' }, - { value: 'square', icon: 'arrowhead-square' }, - { value: 'dot', icon: 'arrowhead-dot' }, - { value: 'diamond', icon: 'arrowhead-diamond' }, - { value: 'inverted', icon: 'arrowhead-triangle-inverted' }, - { value: 'bar', icon: 'arrowhead-bar' }, - ], - spline: [ - { value: 'line', icon: 'spline-line' }, - { value: 'cubic', icon: 'spline-cubic' }, - ], -} as const satisfies Record> diff --git a/packages/tldraw/src/lib/tldraw-constants.ts b/packages/tldraw/src/lib/tldraw-constants.ts new file mode 100644 index 000000000..7db728999 --- /dev/null +++ b/packages/tldraw/src/lib/tldraw-constants.ts @@ -0,0 +1,160 @@ +import { TLDefaultSizeStyle, editorConstants } from '@tldraw/editor' +import { StyleValuesForUi } from './tldraw-types' + +/**@public */ +export const tldrawConstants = { + ...editorConstants, + ADJACENT_SHAPE_MARGIN: 20, + // Breakpoints for portrait, keep in sync with PORTRAIT_BREAKPOINT enum below! + PORTRAIT_BREAKPOINTS: [0, 390, 428, 468, 580, 640, 840, 1023], + // Mapping for PORTRAIT_BREAKPOINTS -- needs to be kept in sync! + PORTRAIT_BREAKPOINT: { + ZERO: 0, + MOBILE_XXS: 1, + MOBILE_XS: 2, + MOBILE_SM: 3, + MOBILE: 4, + TABLET_SM: 5, + TABLET: 6, + DESKTOP: 7, + }, + TEXT_PROPS: { + lineHeight: 1.35, + fontWeight: 'normal', + fontVariant: 'normal', + fontStyle: 'normal', + padding: '0px', + }, + STROKE_SIZES: { + s: 2, + m: 3.5, + l: 5, + xl: 10, + } as Record, + FONT_SIZES: { + s: 18, + m: 24, + l: 36, + xl: 44, + } as Record, + LABEL_FONT_SIZES: { + s: 18, + m: 22, + l: 26, + xl: 32, + } as Record, + ARROW_LABEL_FONT_SIZES: { + s: 18, + m: 20, + l: 24, + xl: 28, + } as Record, + FONT_FAMILIES: { + draw: 'var(--tl-font-draw)', + sans: 'var(--tl-font-sans)', + serif: 'var(--tl-font-serif)', + mono: 'var(--tl-font-mono)', + }, + LABEL_TO_ARROW_PADDING: 20, + ARROW_LABEL_PADDING: 4.25, + LABEL_PADDING: 16, + MIN_GEO_SIZE_WITH_LABEL: 17 * 3, + STYLES: { + color: [ + { value: 'black', icon: 'color' }, + { value: 'grey', icon: 'color' }, + { value: 'light-violet', icon: 'color' }, + { value: 'violet', icon: 'color' }, + { value: 'blue', icon: 'color' }, + { value: 'light-blue', icon: 'color' }, + { value: 'yellow', icon: 'color' }, + { value: 'orange', icon: 'color' }, + { value: 'green', icon: 'color' }, + { value: 'light-green', icon: 'color' }, + { value: 'light-red', icon: 'color' }, + { value: 'red', icon: 'color' }, + ], + fill: [ + { value: 'none', icon: 'fill-none' }, + { value: 'semi', icon: 'fill-semi' }, + { value: 'solid', icon: 'fill-solid' }, + { value: 'pattern', icon: 'fill-pattern' }, + ], + dash: [ + { value: 'draw', icon: 'dash-draw' }, + { value: 'dashed', icon: 'dash-dashed' }, + { value: 'dotted', icon: 'dash-dotted' }, + { value: 'solid', icon: 'dash-solid' }, + ], + size: [ + { value: 's', icon: 'size-small' }, + { value: 'm', icon: 'size-medium' }, + { value: 'l', icon: 'size-large' }, + { value: 'xl', icon: 'size-extra-large' }, + ], + font: [ + { value: 'draw', icon: 'font-draw' }, + { value: 'sans', icon: 'font-sans' }, + { value: 'serif', icon: 'font-serif' }, + { value: 'mono', icon: 'font-mono' }, + ], + horizontalAlign: [ + { value: 'start', icon: 'text-align-left' }, + { value: 'middle', icon: 'text-align-center' }, + { value: 'end', icon: 'text-align-right' }, + ], + verticalAlign: [ + { value: 'start', icon: 'vertical-align-start' }, + { value: 'middle', icon: 'vertical-align-center' }, + { value: 'end', icon: 'vertical-align-end' }, + ], + geo: [ + { value: 'rectangle', icon: 'geo-rectangle' }, + { value: 'ellipse', icon: 'geo-ellipse' }, + { value: 'cloud', icon: 'geo-cloud' }, + { value: 'triangle', icon: 'geo-triangle' }, + { value: 'diamond', icon: 'geo-diamond' }, + { value: 'pentagon', icon: 'geo-pentagon' }, + { value: 'hexagon', icon: 'geo-hexagon' }, + { value: 'octagon', icon: 'geo-octagon' }, + { value: 'star', icon: 'geo-star' }, + { value: 'rhombus', icon: 'geo-rhombus' }, + { value: 'rhombus-2', icon: 'geo-rhombus-2' }, + { value: 'oval', icon: 'geo-oval' }, + { value: 'trapezoid', icon: 'geo-trapezoid' }, + { value: 'arrow-right', icon: 'geo-arrow-right' }, + { value: 'arrow-left', icon: 'geo-arrow-left' }, + { value: 'arrow-up', icon: 'geo-arrow-up' }, + { value: 'arrow-down', icon: 'geo-arrow-down' }, + { value: 'x-box', icon: 'geo-x-box' }, + { value: 'check-box', icon: 'geo-check-box' }, + ], + arrowheadStart: [ + { value: 'none', icon: 'arrowhead-none' }, + { value: 'arrow', icon: 'arrowhead-arrow' }, + { value: 'triangle', icon: 'arrowhead-triangle' }, + { value: 'square', icon: 'arrowhead-square' }, + { value: 'dot', icon: 'arrowhead-dot' }, + { value: 'diamond', icon: 'arrowhead-diamond' }, + { value: 'inverted', icon: 'arrowhead-triangle-inverted' }, + { value: 'bar', icon: 'arrowhead-bar' }, + ], + arrowheadEnd: [ + { value: 'none', icon: 'arrowhead-none' }, + { value: 'arrow', icon: 'arrowhead-arrow' }, + { value: 'triangle', icon: 'arrowhead-triangle' }, + { value: 'square', icon: 'arrowhead-square' }, + { value: 'dot', icon: 'arrowhead-dot' }, + { value: 'diamond', icon: 'arrowhead-diamond' }, + { value: 'inverted', icon: 'arrowhead-triangle-inverted' }, + { value: 'bar', icon: 'arrowhead-bar' }, + ], + spline: [ + { value: 'line', icon: 'spline-line' }, + { value: 'cubic', icon: 'spline-cubic' }, + ], + } as const satisfies Record>, + MIN_START_PRESSURE: 0.025, + MIN_END_PRESSURE: 0.01, + MIN_CROP_SIZE: 8, +} diff --git a/packages/tldraw/src/lib/tldraw-types.tsx b/packages/tldraw/src/lib/tldraw-types.tsx new file mode 100644 index 000000000..a83edab77 --- /dev/null +++ b/packages/tldraw/src/lib/tldraw-types.tsx @@ -0,0 +1,4 @@ +export type StyleValuesForUi = readonly { + readonly value: T + readonly icon: string +}[] diff --git a/packages/tldraw/src/lib/tools/EraserTool/childStates/Erasing.ts b/packages/tldraw/src/lib/tools/EraserTool/childStates/Erasing.ts index c3367bef3..e9e2535d1 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/childStates/Erasing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/childStates/Erasing.ts @@ -1,5 +1,4 @@ import { - HIT_TEST_MARGIN, StateNode, TLEventHandlers, TLFrameShape, @@ -8,6 +7,8 @@ import { TLShapeId, pointInPolygon, } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' +const { HIT_TEST_MARGIN } = tldrawConstants export class Erasing extends StateNode { static override id = 'erasing' diff --git a/packages/tldraw/src/lib/tools/EraserTool/childStates/Pointing.ts b/packages/tldraw/src/lib/tools/EraserTool/childStates/Pointing.ts index bf46a8c01..95c6b6ce9 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/childStates/Pointing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/childStates/Pointing.ts @@ -1,5 +1,4 @@ import { - HIT_TEST_MARGIN, StateNode, TLEventHandlers, TLFrameShape, @@ -7,6 +6,8 @@ import { TLPointerEventInfo, TLShapeId, } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' +const { HIT_TEST_MARGIN } = tldrawConstants export class Pointing extends StateNode { static override id = 'pointing' diff --git a/packages/tldraw/src/lib/tools/HandTool/childStates/Dragging.ts b/packages/tldraw/src/lib/tools/HandTool/childStates/Dragging.ts index a0138ef0e..72ff2882d 100644 --- a/packages/tldraw/src/lib/tools/HandTool/childStates/Dragging.ts +++ b/packages/tldraw/src/lib/tools/HandTool/childStates/Dragging.ts @@ -1,4 +1,6 @@ -import { CAMERA_SLIDE_FRICTION, StateNode, TLEventHandlers, Vec } from '@tldraw/editor' +import { StateNode, TLEventHandlers, Vec } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' +const { CAMERA_SLIDE_FRICTION } = tldrawConstants export class Dragging extends StateNode { static override id = 'dragging' diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Crop/crop-constants.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Crop/crop-constants.ts deleted file mode 100644 index 16675752a..000000000 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/Crop/crop-constants.ts +++ /dev/null @@ -1,2 +0,0 @@ -/** @internal */ -export const MIN_CROP_SIZE = 8 diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts index c2e327bca..5c845f6bd 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts @@ -11,9 +11,10 @@ import { Vec, structuredClone, } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' import { kickoutOccludedShapes } from '../selectHelpers' -import { MIN_CROP_SIZE } from './Crop/crop-constants' import { CursorTypeMap } from './PointingResizeHandle' +const { MIN_CROP_SIZE } = tldrawConstants type Snapshot = ReturnType diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts index 3c9952e03..b7e957cff 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts @@ -1,7 +1,6 @@ import { Editor, Group2d, - HIT_TEST_MARGIN, StateNode, TLArrowShape, TLClickEventInfo, @@ -16,11 +15,13 @@ import { debugFlags, pointInPolygon, } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown' import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown' import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp' import { updateHoveredId } from '../../selection-logic/updateHoveredId' import { kickoutOccludedShapes, startEditingShapeWithLabel } from '../selectHelpers' +const { HIT_TEST_MARGIN } = tldrawConstants const SKIPPED_KEYS_FOR_AUTO_EDITING = [ 'Delete', diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts index 1355a8ac0..e8591fe61 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts @@ -1,12 +1,9 @@ -import { - HIT_TEST_MARGIN, - StateNode, - TLEventHandlers, - TLPointerEventInfo, - TLShape, -} from '@tldraw/editor' +import { StateNode, TLEventHandlers, TLPointerEventInfo, TLShape } from '@tldraw/editor' +import { tldrawConstants } from '../../../tldraw-constants' import { getTextLabels } from '../../../utils/shapes/shapes' +const { HIT_TEST_MARGIN } = tldrawConstants + export class PointingShape extends StateNode { static override id = 'pointing_shape' diff --git a/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts b/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts index d242ed302..4dd0d5299 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts @@ -1,5 +1,4 @@ import { - ANIMATION_MEDIUM_MS, Editor, Geometry2d, Mat, @@ -11,6 +10,8 @@ import { polygonIntersectsPolyline, polygonsIntersect, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' +const { ANIMATION_MEDIUM_MS } = tldrawConstants /** @internal */ export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[]) { diff --git a/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts b/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts index 6e47d8322..92e39f1a9 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts @@ -1,4 +1,6 @@ -import { Editor, HIT_TEST_MARGIN, TLShape } from '@tldraw/editor' +import { Editor, TLShape } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' +const { HIT_TEST_MARGIN } = tldrawConstants export function getHitShapeOnCanvasPointerDown( editor: Editor, diff --git a/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts b/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts index a77e92066..af49d7a60 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts @@ -1,4 +1,6 @@ -import { Editor, HIT_TEST_MARGIN, TLShape, isShapeId } from '@tldraw/editor' +import { Editor, TLShape, isShapeId } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' +const { HIT_TEST_MARGIN } = tldrawConstants export function selectOnCanvasPointerUp(editor: Editor) { const selectedShapeIds = editor.getSelectedShapeIds() diff --git a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts index f03d333c3..00f1d468e 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts @@ -1,4 +1,6 @@ -import { Editor, HIT_TEST_MARGIN, TLShape, throttle } from '@tldraw/editor' +import { Editor, TLShape, throttle } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' +const { HIT_TEST_MARGIN } = tldrawConstants function _updateHoveredId(editor: Editor) { // todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary diff --git a/packages/tldraw/src/lib/ui/TldrawUi.tsx b/packages/tldraw/src/lib/ui/TldrawUi.tsx index d701d4e4b..b51b832eb 100644 --- a/packages/tldraw/src/lib/ui/TldrawUi.tsx +++ b/packages/tldraw/src/lib/ui/TldrawUi.tsx @@ -2,13 +2,13 @@ import { ToastProvider } from '@radix-ui/react-toast' import { Expand, useEditor, useValue } from '@tldraw/editor' import classNames from 'classnames' import React, { ReactNode } from 'react' +import { tldrawConstants } from '../tldraw-constants' import { TLUiAssetUrlOverrides } from './assetUrls' import { Dialogs } from './components/Dialogs' import { FollowingIndicator } from './components/FollowingIndicator' import { ToastViewport, Toasts } from './components/Toasts' import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton' import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon' -import { PORTRAIT_BREAKPOINT } from './constants' import { TldrawUiContextProvider, TldrawUiContextProviderProps, @@ -22,6 +22,8 @@ import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts' import { useReadonly } from './hooks/useReadonly' import { useTranslation } from './hooks/useTranslation/useTranslation' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** * Base props for the {@link tldraw#Tldraw} and {@link TldrawUi} components. * diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx index d51d944b1..1420789a7 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx @@ -1,6 +1,6 @@ import { useEditor, useValue } from '@tldraw/editor' import { ReactNode, memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useReadonly } from '../../hooks/useReadonly' import { useTranslation } from '../../hooks/useTranslation/useTranslation' @@ -14,6 +14,8 @@ import { import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultActionsMenuContent } from './DefaultActionsMenuContent' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export type TLUiActionsMenuProps = { children?: ReactNode diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx index 6d055c2b8..ba0a1833b 100644 --- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx +++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx @@ -1,5 +1,5 @@ import { useEditor, useValue } from '@tldraw/editor' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useActions } from '../../context/actions' import { useBreakpoint } from '../../context/breakpoints' import { @@ -11,6 +11,8 @@ import { } from '../../hooks/menu-hooks' import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export function DefaultActionsMenuContent() { return ( diff --git a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx index 7724a3fc1..4f64ffaca 100644 --- a/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx @@ -1,5 +1,5 @@ import { ReactNode, memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' @@ -12,6 +12,8 @@ import { import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultHelpMenuContent } from './DefaultHelpMenuContent' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export type TLUiHelpMenuProps = { children?: ReactNode diff --git a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx index bbd9851d2..d148ec36c 100644 --- a/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx +++ b/packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { ReactNode, memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { TLUiDialogProps } from '../../context/dialogs' import { useTranslation } from '../../hooks/useTranslation/useTranslation' @@ -13,6 +13,8 @@ import { import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultKeyboardShortcutsDialogContent } from './DefaultKeyboardShortcutsDialogContent' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & { children?: ReactNode diff --git a/packages/tldraw/src/lib/ui/components/MenuZone.tsx b/packages/tldraw/src/lib/ui/components/MenuZone.tsx index 30e1911c2..12d33a683 100644 --- a/packages/tldraw/src/lib/ui/components/MenuZone.tsx +++ b/packages/tldraw/src/lib/ui/components/MenuZone.tsx @@ -1,8 +1,10 @@ import { memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../constants' +import { tldrawConstants } from '../../tldraw-constants' import { useBreakpoint } from '../context/breakpoints' import { useTldrawUiComponents } from '../context/components' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + export const MenuZone = memo(function MenuZone() { const breakpoint = useBreakpoint() diff --git a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx index db446a1eb..5b121d678 100644 --- a/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx +++ b/packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx @@ -1,5 +1,4 @@ import { - ANIMATION_MEDIUM_MS, Box, TLPointerEventInfo, Vec, @@ -12,8 +11,11 @@ import { useIsDarkMode, } from '@tldraw/editor' import * as React from 'react' +import { tldrawConstants } from '../../../tldraw-constants' import { MinimapManager } from './MinimapManager' +const { ANIMATION_MEDIUM_MS } = tldrawConstants + /** @public */ export function DefaultMinimap() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx b/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx index 2bae99298..0b7099f50 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx +++ b/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx @@ -1,5 +1,5 @@ import { memo, useCallback } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { unwrapLabel, useActions } from '../../context/actions' import { useBreakpoint } from '../../context/breakpoints' import { useTldrawUiComponents } from '../../context/components' @@ -8,7 +8,7 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { kbdStr } from '../../kbd-utils' import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' - +const { PORTRAIT_BREAKPOINT } = tldrawConstants /** @public */ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() { const actions = useActions() diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx index 9a6569566..0a00b981c 100644 --- a/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx @@ -1,5 +1,4 @@ import { - MAX_PAGES, PageRecordType, TLPageId, releasePointerCapture, @@ -8,7 +7,7 @@ import { useValue, } from '@tldraw/editor' import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' import { useReadonly } from '../../hooks/useReadonly' @@ -26,6 +25,8 @@ import { PageItemInput } from './PageItemInput' import { PageItemSubmenu } from './PageItemSubmenu' import { onMovePage } from './edit-pages-shared' +const { MAX_PAGES, PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export const DefaultPageMenu = memo(function DefaultPageMenu() { const editor = useEditor() diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx index ef0926af8..48538e7ca 100644 --- a/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx +++ b/packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx @@ -1,5 +1,6 @@ -import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor' +import { PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor' import { useCallback } from 'react' +import { tldrawConstants } from '../../../tldraw-constants' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' @@ -12,6 +13,9 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup' import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem' import { onMovePage } from './edit-pages-shared' + +const { MAX_PAGES } = tldrawConstants + /** @public */ export interface PageItemSubmenuProps { index: number diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx index ca2d48367..2d95dd5bc 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx @@ -21,7 +21,7 @@ import { useValue, } from '@tldraw/editor' import React from 'react' -import { STYLES } from '../../../styles' +import { tldrawConstants } from '../../../tldraw-constants' import { kickoutOccludedShapes } from '../../../tools/SelectTool/selectHelpers' import { useUiEvents } from '../../context/events' import { useRelevantStyles } from '../../hooks/useRelevantStyles' @@ -33,6 +33,8 @@ import { TldrawUiSlider } from '../primitives/TldrawUiSlider' import { DoubleDropdownPicker } from './DoubleDropdownPicker' import { DropdownPicker } from './DropdownPicker' +const { STYLES } = tldrawConstants + /** @public */ export type TLUiStylePanelContentProps = { styles: ReturnType diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx index 8a5dff9d6..70d629fd8 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx @@ -1,6 +1,6 @@ import { SharedStyle, StyleProp } from '@tldraw/editor' import * as React from 'react' -import { StyleValuesForUi } from '../../../styles' +import { StyleValuesForUi } from '../../../tldraw-types' import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx index 6f50ab854..90d1d2bc3 100644 --- a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx +++ b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx @@ -1,6 +1,6 @@ import { SharedStyle, StyleProp, useEditor } from '@tldraw/editor' import * as React from 'react' -import { StyleValuesForUi } from '../../../styles' +import { StyleValuesForUi } from '../../../tldraw-types' import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TLUiIconType } from '../../icon-types' diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx index 609d4f871..8ab63bb2c 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx @@ -1,6 +1,6 @@ import { useEditor, useValue } from '@tldraw/editor' import { ReactNode, memo } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useTldrawUiComponents } from '../../context/components' import { useReadonly } from '../../hooks/useReadonly' @@ -9,6 +9,8 @@ import { DefaultToolbarContent } from './DefaultToolbarContent' import { OverflowingToolbar } from './OverflowingToolbar' import { ToggleToolLockedButton } from './ToggleToolLockedButton' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export interface DefaultToolbarProps { children?: ReactNode diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx index 59c16c627..0dbbe9ac2 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx @@ -2,7 +2,7 @@ import { preventDefault, useEditor, useEvent, useSafeId } from '@tldraw/editor' import classNames from 'classnames' import hotkeys from 'hotkeys-js' import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts' import { TLUiToolItem } from '../../hooks/useTools' @@ -16,6 +16,8 @@ import { } from '../primitives/TldrawUiDropdownMenu' import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + export const IsInOverflowContext = createContext(false) export function OverflowingToolbar({ children }: { children: React.ReactNode }) { diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx index 4adb4bc72..c7bed086f 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx @@ -1,11 +1,13 @@ import { useEditor, useValue } from '@tldraw/editor' import classNames from 'classnames' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + interface ToggleToolLockedButtonProps { activeToolId?: string } diff --git a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx index 42e45f2b7..2c1f40c89 100644 --- a/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx +++ b/packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx @@ -1,7 +1,7 @@ import * as _Dropdown from '@radix-ui/react-dropdown-menu' -import { ANIMATION_MEDIUM_MS, useContainer, useEditor, useValue } from '@tldraw/editor' +import { useContainer, useEditor, useValue } from '@tldraw/editor' import { ReactNode, forwardRef, memo, useCallback } from 'react' -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { useMenuIsOpen } from '../../hooks/useMenuIsOpen' import { useTranslation } from '../../hooks/useTranslation/useTranslation' @@ -9,6 +9,8 @@ import { TldrawUiButton } from '../primitives/Button/TldrawUiButton' import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext' import { DefaultZoomMenuContent } from './DefaultZoomMenuContent' +const { PORTRAIT_BREAKPOINT, ANIMATION_MEDIUM_MS } = tldrawConstants + /** @public */ export type TLUiZoomMenuProps = { children?: ReactNode diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx index a1792463a..660e53e43 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx @@ -8,7 +8,7 @@ import { } from '@tldraw/editor' import classNames from 'classnames' import { memo, useMemo, useRef } from 'react' -import { StyleValuesForUi } from '../../../styles' +import { StyleValuesForUi } from '../../../tldraw-types' import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey' import { useTranslation } from '../../hooks/useTranslation/useTranslation' import { TldrawUiButton } from './Button/TldrawUiButton' diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx index 9e5a84751..7877900d3 100644 --- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx +++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx @@ -1,7 +1,9 @@ -import { PORTRAIT_BREAKPOINT } from '../../constants' +import { tldrawConstants } from '../../../tldraw-constants' import { useBreakpoint } from '../../context/breakpoints' import { kbd } from '../../kbd-utils' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export interface TLUiKbdProps { children: string diff --git a/packages/tldraw/src/lib/ui/constants.ts b/packages/tldraw/src/lib/ui/constants.ts deleted file mode 100644 index 9602b4507..000000000 --- a/packages/tldraw/src/lib/ui/constants.ts +++ /dev/null @@ -1,17 +0,0 @@ -// Breakpoints for portrait, keep in sync with PORTRAIT_BREAKPOINT enum below! -export const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023] - -// Mapping for above array -- needs to be kept in sync! -/** @public */ -export enum PORTRAIT_BREAKPOINT { - ZERO = 0, - MOBILE_XXS = 1, - MOBILE_XS = 2, - MOBILE_SM = 3, - MOBILE = 4, - TABLET_SM = 5, - TABLET = 6, - DESKTOP = 7, -} - -export const ADJACENT_SHAPE_MARGIN = 20 diff --git a/packages/tldraw/src/lib/ui/context/actions.tsx b/packages/tldraw/src/lib/ui/context/actions.tsx index da22fe0a8..695681632 100644 --- a/packages/tldraw/src/lib/ui/context/actions.tsx +++ b/packages/tldraw/src/lib/ui/context/actions.tsx @@ -1,5 +1,4 @@ import { - ANIMATION_MEDIUM_MS, Box, DefaultColorStyle, Editor, @@ -20,12 +19,12 @@ import { useEditor, } from '@tldraw/editor' import * as React from 'react' +import { tldrawConstants } from '../../tldraw-constants' import { kickoutOccludedShapes } from '../../tools/SelectTool/selectHelpers' import { getEmbedInfo } from '../../utils/embeds/embeds' import { fitFrameToContent, removeFrame } from '../../utils/frames/frames' import { EditLinkDialog } from '../components/EditLinkDialog' import { EmbedDialog } from '../components/EmbedDialog' -import { ADJACENT_SHAPE_MARGIN } from '../constants' import { useMenuClipboardEvents } from '../hooks/useClipboardEvents' import { useCopyAs } from '../hooks/useCopyAs' import { useExportAs } from '../hooks/useExportAs' @@ -38,6 +37,8 @@ import { useDialogs } from './dialogs' import { TLUiEventSource, useUiEvents } from './events' import { useToasts } from './toasts' +const { ADJACENT_SHAPE_MARGIN, ANIMATION_MEDIUM_MS } = tldrawConstants + /** @public */ export interface TLUiActionItem< TransationKey extends string = string, diff --git a/packages/tldraw/src/lib/ui/context/breakpoints.tsx b/packages/tldraw/src/lib/ui/context/breakpoints.tsx index 15ed5ad82..e7e4f74f1 100644 --- a/packages/tldraw/src/lib/ui/context/breakpoints.tsx +++ b/packages/tldraw/src/lib/ui/context/breakpoints.tsx @@ -1,6 +1,8 @@ import { useEditor, useValue } from '@tldraw/editor' import React, { ReactNode, useContext } from 'react' -import { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from '../constants' +import { tldrawConstants } from '../../tldraw-constants' + +const { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } = tldrawConstants const BreakpointContext = React.createContext(0) diff --git a/packages/tldraw/src/lib/ui/overrides.ts b/packages/tldraw/src/lib/ui/overrides.ts index b25483a6d..1d6fb582e 100644 --- a/packages/tldraw/src/lib/ui/overrides.ts +++ b/packages/tldraw/src/lib/ui/overrides.ts @@ -1,6 +1,6 @@ import { Editor, objectMapEntries } from '@tldraw/editor' import { useMemo } from 'react' -import { PORTRAIT_BREAKPOINT } from './constants' +import { tldrawConstants } from '../tldraw-constants' import { ActionsProviderProps } from './context/actions' import { useBreakpoint } from './context/breakpoints' import { useDialogs } from './context/dialogs' @@ -8,6 +8,8 @@ import { useToasts } from './context/toasts' import { TLUiToolsProviderProps } from './hooks/useTools' import { TLUiTranslationProviderProps, useTranslation } from './hooks/useTranslation/useTranslation' +const { PORTRAIT_BREAKPOINT } = tldrawConstants + /** @public */ export function useDefaultHelpers() { const { addToast, removeToast, clearToasts } = useToasts() diff --git a/packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts b/packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts index 1d894703d..61d98c1d5 100644 --- a/packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts +++ b/packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts @@ -1,7 +1,6 @@ import { AssetRecordType, Editor, - MAX_SHAPES_PER_PAGE, PageRecordType, TLArrowShape, TLArrowShapeArrowheadStyle, @@ -26,6 +25,9 @@ import { clamp, createShapeId, } from '@tldraw/editor' +import { tldrawConstants } from '../../tldraw-constants' + +const { MAX_SHAPES_PER_PAGE } = tldrawConstants const TLDRAW_V1_VERSION = 15.5 diff --git a/packages/tldraw/src/test/TestEditor.ts b/packages/tldraw/src/test/TestEditor.ts index 9bb3b527d..104fa76cb 100644 --- a/packages/tldraw/src/test/TestEditor.ts +++ b/packages/tldraw/src/test/TestEditor.ts @@ -6,7 +6,6 @@ import { IdOf, Mat, PageRecordType, - ROTATE_CORNER_TO_SELECTION_CORNER, RequiredKeys, RotateCorner, SelectionHandle, @@ -24,6 +23,7 @@ import { VecLike, createShapeId, createTLStore, + editorConstants, rotateSelectionHandle, } from '@tldraw/editor' import { defaultShapeTools } from '../lib/defaultShapeTools' @@ -31,6 +31,8 @@ import { defaultShapeUtils } from '../lib/defaultShapeUtils' import { defaultTools } from '../lib/defaultTools' import { shapesFromJsx } from './test-jsx' +const { ROTATE_CORNER_TO_SELECTION_CORNER } = editorConstants + jest.useFakeTimers() Object.assign(navigator, { diff --git a/packages/tldraw/src/test/commands/createPage.test.ts b/packages/tldraw/src/test/commands/createPage.test.ts index 73e461618..876040bd1 100644 --- a/packages/tldraw/src/test/commands/createPage.test.ts +++ b/packages/tldraw/src/test/commands/createPage.test.ts @@ -1,6 +1,8 @@ -import { MAX_PAGES, PageRecordType } from '@tldraw/editor' +import { editorConstants, PageRecordType } from '@tldraw/editor' import { TestEditor } from '../TestEditor' +const { MAX_PAGES } = editorConstants + let editor: TestEditor beforeEach(() => { diff --git a/packages/tldraw/src/test/commands/duplicatePage.test.ts b/packages/tldraw/src/test/commands/duplicatePage.test.ts index d247437ec..feb6ec5d3 100644 --- a/packages/tldraw/src/test/commands/duplicatePage.test.ts +++ b/packages/tldraw/src/test/commands/duplicatePage.test.ts @@ -1,6 +1,8 @@ -import { MAX_PAGES, createShapeId } from '@tldraw/editor' +import { createShapeId, editorConstants } from '@tldraw/editor' import { TestEditor } from '../TestEditor' +const { MAX_PAGES } = editorConstants + let editor: TestEditor beforeEach(() => { diff --git a/packages/tldraw/src/test/commands/getSvgString.test.ts b/packages/tldraw/src/test/commands/getSvgString.test.ts index 6ce16f0c9..4b5522109 100644 --- a/packages/tldraw/src/test/commands/getSvgString.test.ts +++ b/packages/tldraw/src/test/commands/getSvgString.test.ts @@ -1,6 +1,8 @@ -import { DefaultDashStyle, SVG_PADDING, createShapeId } from '@tldraw/editor' +import { DefaultDashStyle, createShapeId, editorConstants } from '@tldraw/editor' import { TestEditor } from '../TestEditor' +const { SVG_PADDING } = editorConstants + let editor: TestEditor const ids = { diff --git a/packages/tldraw/src/test/commands/zoomIn.test.ts b/packages/tldraw/src/test/commands/zoomIn.test.ts index f3cca8314..e9b0fe898 100644 --- a/packages/tldraw/src/test/commands/zoomIn.test.ts +++ b/packages/tldraw/src/test/commands/zoomIn.test.ts @@ -1,6 +1,8 @@ -import { ZOOMS } from '@tldraw/editor' +import { editorConstants } from '@tldraw/editor' import { TestEditor } from '../TestEditor' +const { ZOOMS } = editorConstants + let editor: TestEditor beforeEach(() => { diff --git a/packages/tldraw/src/test/commands/zoomOut.test.ts b/packages/tldraw/src/test/commands/zoomOut.test.ts index aec509e5f..3b6dd6552 100644 --- a/packages/tldraw/src/test/commands/zoomOut.test.ts +++ b/packages/tldraw/src/test/commands/zoomOut.test.ts @@ -1,6 +1,8 @@ -import { ZOOMS } from '@tldraw/editor' +import { editorConstants } from '@tldraw/editor' import { TestEditor } from '../TestEditor' +const { ZOOMS } = editorConstants + let editor: TestEditor beforeEach(() => { diff --git a/packages/tldraw/src/test/cropping.test.ts b/packages/tldraw/src/test/cropping.test.ts index dacfbfd9e..5cf5e5b62 100644 --- a/packages/tldraw/src/test/cropping.test.ts +++ b/packages/tldraw/src/test/cropping.test.ts @@ -1,6 +1,7 @@ import { createShapeId, TLImageShape } from '@tldraw/editor' -import { MIN_CROP_SIZE } from '../lib/tools/SelectTool/childStates/Crop/crop-constants' +import { tldrawConstants } from '../lib/tldraw-constants' import { TestEditor } from './TestEditor' +const { MIN_CROP_SIZE } = tldrawConstants jest.useFakeTimers()