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>
This commit is contained in:
parent
43a0dd83f8
commit
b7d9c8684c
618 changed files with 8939 additions and 11666 deletions
|
@ -1,4 +1,3 @@
|
|||
import { Matrix2d, toDomPrecision } from '@tldraw/primitives'
|
||||
import { react, track, useQuickReactor, useValue } from '@tldraw/state'
|
||||
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
|
||||
import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
|
||||
|
@ -12,10 +11,10 @@ import { useFixSafariDoubleTapZoomPencilEvents } from '../hooks/useFixSafariDoub
|
|||
import { useGestureEvents } from '../hooks/useGestureEvents'
|
||||
import { useHandleEvents } from '../hooks/useHandleEvents'
|
||||
import { useScreenBounds } from '../hooks/useScreenBounds'
|
||||
import { Matrix2d } from '../primitives/Matrix2d'
|
||||
import { toDomPrecision } from '../primitives/utils'
|
||||
import { debugFlags } from '../utils/debug-flags'
|
||||
import { LiveCollaborators } from './LiveCollaborators'
|
||||
import { SelectionBg } from './SelectionBg'
|
||||
import { SelectionFg } from './SelectionFg'
|
||||
import { Shape } from './Shape'
|
||||
import { ShapeIndicator } from './ShapeIndicator'
|
||||
|
||||
|
@ -97,7 +96,7 @@ export const Canvas = track(function Canvas() {
|
|||
{SvgDefs && <SvgDefs />}
|
||||
</defs>
|
||||
</svg>
|
||||
<SelectionBg />
|
||||
<SelectionBackgroundWrapper />
|
||||
<div className="tl-shapes">
|
||||
<ShapesToDisplay />
|
||||
</div>
|
||||
|
@ -110,7 +109,7 @@ export const Canvas = track(function Canvas() {
|
|||
<HoveredShapeIndicator />
|
||||
<HintedShapeIndicator />
|
||||
<SnapLinesWrapper />
|
||||
<SelectionFg />
|
||||
<SelectionForegroundWrapper />
|
||||
<LiveCollaborators />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -124,12 +123,13 @@ const GridWrapper = track(function GridWrapper() {
|
|||
|
||||
// get grid from context
|
||||
|
||||
const { gridSize } = editor.documentSettings
|
||||
const { x, y, z } = editor.camera
|
||||
const isGridMode = editor.isGridMode
|
||||
|
||||
if (!(Grid && isGridMode)) return null
|
||||
|
||||
return <Grid x={x} y={y} z={z} size={editor.gridSize} />
|
||||
return <Grid x={x} y={y} z={z} size={gridSize} />
|
||||
})
|
||||
|
||||
const ScribbleWrapper = track(function ScribbleWrapper() {
|
||||
|
@ -432,3 +432,15 @@ const UiLogger = track(() => {
|
|||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export function SelectionForegroundWrapper() {
|
||||
const { SelectionForeground } = useEditorComponents()
|
||||
if (!SelectionForeground) return null
|
||||
return <SelectionForeground />
|
||||
}
|
||||
|
||||
export function SelectionBackgroundWrapper() {
|
||||
const { SelectionBackground } = useEditorComponents()
|
||||
if (!SelectionBackground) return null
|
||||
return <SelectionBackground />
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue