tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw
At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.
## Library changes
@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.
- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.
- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw
Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.
## API Changes
The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.
All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.
You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.
The `components` prop now also accepts `SelectionForeground`.
The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.
Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.
The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.
- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`
### Change Type
- [x] `major` — Breaking change
### Test Plan
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw
---------
Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
|
|
|
import { TLDefaultFontStyle, TLDefaultSizeStyle } from '@tldraw/editor'
|
2023-06-16 10:33:47 +00:00
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const TEXT_PROPS = {
|
|
|
|
lineHeight: 1.35,
|
|
|
|
fontWeight: 'normal',
|
|
|
|
fontVariant: 'normal',
|
|
|
|
fontStyle: 'normal',
|
|
|
|
padding: '0px',
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const STROKE_SIZES: Record<TLDefaultSizeStyle, number> = {
|
|
|
|
s: 2,
|
|
|
|
m: 3.5,
|
|
|
|
l: 5,
|
|
|
|
xl: 10,
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
|
|
|
|
s: 18,
|
|
|
|
m: 24,
|
|
|
|
l: 36,
|
|
|
|
xl: 44,
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
|
|
|
|
s: 18,
|
|
|
|
m: 22,
|
|
|
|
l: 26,
|
|
|
|
xl: 32,
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const ARROW_LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
|
|
|
|
s: 18,
|
|
|
|
m: 20,
|
|
|
|
l: 24,
|
|
|
|
xl: 28,
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @public */
|
|
|
|
export const FONT_FAMILIES: Record<TLDefaultFontStyle, string> = {
|
|
|
|
draw: 'var(--tl-font-draw)',
|
|
|
|
sans: 'var(--tl-font-sans)',
|
|
|
|
serif: 'var(--tl-font-serif)',
|
|
|
|
mono: 'var(--tl-font-mono)',
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
2024-01-24 10:19:20 +00:00
|
|
|
export const LABEL_TO_ARROW_PADDING = 20
|
|
|
|
/** @internal */
|
|
|
|
export const ARROW_LABEL_PADDING = 4.25
|
|
|
|
/** @internal */
|
2024-02-13 15:07:16 +00:00
|
|
|
export const LABEL_PADDING = 16
|