Styles API follow-ups (#1636)

tldraw-zero themed follow-ups to the styles API added in #1580.

- Removed style related helpers from `ShapeUtil`
- `editor.css` no longer includes the tldraw default color palette.
Instead, a global `DefaultColorPalette` is defined as part of the color
style. If developers wish to cusomise the colors, they can mutate that
global.
- `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an
"svg export context" that can be used to add `<defs>` to the exported
SVG element. Converting e.g. fonts to inlined data urls is now the
responsibility of the shapes that use them rather than the Editor.
- `usePattern` is not longer a core part of the editor. Instead,
`ShapeUtil` has a `getCanvasSvgDefs` method for returning react
components representing anything a shape needs included in `<defs>` for
the canvas.
- The shape-specific cleanup logic in `setStyle` has been deleted. It
turned out that none of that logic has been running anyway, and instead
the relevant logic lives in shape `onBeforeChange` callbacks already.

### Change Type
- [x] `minor` — New feature

### Test Plan


- [x] Unit Tests
- [x] End to end tests

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
alex 2023-06-24 14:46:04 +01:00 committed by GitHub
parent 15ce98b277
commit e8bc114bf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 1126 additions and 873 deletions

View file

@ -1,7 +1,7 @@
import { Matrix2d, toDomPrecision } from '@tldraw/primitives'
import { react, track, useQuickReactor, useValue } from '@tldraw/state'
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
import { dedupe, modulate } from '@tldraw/utils'
import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
import React from 'react'
import { useCanvasEvents } from '../hooks/useCanvasEvents'
import { useCoarsePointer } from '../hooks/useCoarsePointer'
@ -11,7 +11,6 @@ import { useEditorComponents } from '../hooks/useEditorComponents'
import { useFixSafariDoubleTapZoomPencilEvents } from '../hooks/useFixSafariDoubleTapZoomPencilEvents'
import { useGestureEvents } from '../hooks/useGestureEvents'
import { useHandleEvents } from '../hooks/useHandleEvents'
import { usePattern } from '../hooks/usePattern'
import { useScreenBounds } from '../hooks/useScreenBounds'
import { debugFlags } from '../utils/debug-flags'
import { LiveCollaborators } from './LiveCollaborators'
@ -60,32 +59,28 @@ export const Canvas = track(function Canvas() {
[editor]
)
const { context: patternContext, isReady: patternIsReady } = usePattern()
const events = useCanvasEvents()
React.useEffect(() => {
if (patternIsReady && editor.isSafari) {
const htmlElm = rHtmlLayer.current
if (htmlElm) {
// Wait for `patternContext` to be picked up
requestAnimationFrame(() => {
htmlElm.style.display = 'none'
// Wait for 'display = "none"' to take effect
requestAnimationFrame(() => {
htmlElm.style.display = ''
})
})
const shapeSvgDefs = useValue(
'shapeSvgDefs',
() => {
const shapeSvgDefsByKey = new Map<string, JSX.Element>()
for (const util of objectMapValues(editor.shapeUtils)) {
if (!util) return
const defs = util.getCanvasSvgDefs()
for (const { key, component: Component } of defs) {
if (shapeSvgDefsByKey.has(key)) continue
shapeSvgDefsByKey.set(key, <Component key={key} />)
}
}
}
}, [editor, patternIsReady])
return [...shapeSvgDefsByKey.values()]
},
[editor]
)
React.useEffect(() => {
rCanvas.current?.focus()
}, [])
return (
<div ref={rCanvas} draggable={false} className="tl-canvas" data-testid="canvas" {...events}>
{Background && <Background />}
@ -94,7 +89,7 @@ export const Canvas = track(function Canvas() {
<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
<svg className="tl-svg-context">
<defs>
{patternContext}
{shapeSvgDefs}
{Cursor && <Cursor />}
<CollaboratorHint />
<ArrowheadDot />