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:
parent
15ce98b277
commit
e8bc114bf3
47 changed files with 1126 additions and 873 deletions
|
@ -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 />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue