Move constants to options prop (#3799)

Another go at #3628 & #3783. This moves (most) constants into
`editor.options`, configurable by the `options` prop on the tldraw
component.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Release Notes

You can now override many options which were previously hard-coded
constants. Pass an `options` prop into the tldraw component to change
the maximum number of pages, grid steps, or other previously hard-coded
values. See `TldrawOptions` for more
This commit is contained in:
alex 2024-05-28 15:22:03 +01:00 committed by GitHub
parent 19f8d4248c
commit a457a39081
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 347 additions and 267 deletions

View file

@ -3,7 +3,6 @@ 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 { useCanvasEvents } from '../../hooks/useCanvasEvents'
import { useCoarsePointer } from '../../hooks/useCoarsePointer'
import { useContainer } from '../../hooks/useContainer'
@ -65,9 +64,9 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
// If we're below the lod distance for text shadows, turn them off
if (
rMemoizedStuff.current.allowTextOutline &&
z < TEXT_SHADOW_LOD !== rMemoizedStuff.current.lodDisableTextOutline
z < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline
) {
const lodDisableTextOutline = z < TEXT_SHADOW_LOD
const lodDisableTextOutline = z < editor.options.textShadowLod
container.style.setProperty(
'--tl-text-outline',
lodDisableTextOutline
@ -297,7 +296,8 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
if (!handles) return null
const minDistBetweenVirtualHandlesAndRegularHandles =
((isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoomLevel) * 2
((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *
2
return (
handles