kopia lustrzana https://github.com/Tldraw/Tldraw
Removes brush updater
rodzic
c16f91c072
commit
faaa043ade
|
@ -9,7 +9,6 @@ This package contains the core of the [tldraw](https://tldraw.com) library. It i
|
|||
- [`Utils`](#utils)
|
||||
- [`Vec`](#vec)
|
||||
- [`Svg`](#svg)
|
||||
- [`brushUpdater`](#brushupdater)
|
||||
- [`Intersect`](#intersect)
|
||||
|
||||
## Installation
|
||||
|
@ -160,17 +159,6 @@ An object that describes a relationship between two shapes on the page.
|
|||
|
||||
The `TLShapeUtil` is an abstract class that you can extend to create utilities for your custom shapes. See [Guide: Create a Custom Shape](#create-a-custom-shape).
|
||||
|
||||
### `brushUpdater`
|
||||
|
||||
The `brushUpdater` is a special class instance that allows you to quickly update the selection brush rectangle.
|
||||
|
||||
| Method | Description |
|
||||
| ------- | --------------------------------------------------------------- |
|
||||
| `set` | a method that accepts either a `TLBounds` object or `undefined` |
|
||||
| `clear` | a method to hide the brush |
|
||||
|
||||
Normally, the renderer's brush will update in response to changes to `pageState.brush`; however, calling `brushUpdater.set` will produce a faster change in the brush rectangle. Calling `brushUpdater.set` will prevent the brush from any future updates from `pageState.brush`.
|
||||
|
||||
## `inputs`
|
||||
|
||||
A class instance that stores the current pointer position and pressed keys.
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
import * as React from 'react'
|
||||
import type { TLBounds } from '+types'
|
||||
|
||||
export class BrushUpdater {
|
||||
ref = React.createRef<SVGSVGElement>()
|
||||
|
||||
isControlled = false
|
||||
|
||||
set(bounds?: TLBounds) {
|
||||
if (!this.isControlled) this.isControlled = true
|
||||
|
||||
if (!bounds) {
|
||||
this.clear()
|
||||
return
|
||||
}
|
||||
|
||||
const elm = this.ref?.current
|
||||
if (!elm) return
|
||||
|
||||
elm.setAttribute('opacity', '1')
|
||||
elm.setAttribute('transform', `translate(${bounds.minX.toString()}, ${bounds.minY.toString()})`)
|
||||
elm.setAttribute('width', bounds.width.toString())
|
||||
elm.setAttribute('height', bounds.height.toString())
|
||||
}
|
||||
|
||||
clear() {
|
||||
const elm = this.ref?.current
|
||||
if (!elm) return
|
||||
elm.setAttribute('opacity', '0')
|
||||
elm.setAttribute('width', '0')
|
||||
elm.setAttribute('height', '0')
|
||||
}
|
||||
}
|
|
@ -1,12 +1,21 @@
|
|||
import { SVGContainer } from '+components'
|
||||
import { Container } from '+components/container'
|
||||
import type { TLBounds } from '+types'
|
||||
import * as React from 'react'
|
||||
import { BrushUpdater } from './BrushUpdater'
|
||||
|
||||
export const brushUpdater = new BrushUpdater()
|
||||
|
||||
export const Brush = React.memo((): JSX.Element | null => {
|
||||
export const Brush = React.memo(({ brush }: { brush: TLBounds }): JSX.Element | null => {
|
||||
return (
|
||||
<svg ref={brushUpdater.ref} opacity={0} width={0} height={0}>
|
||||
<rect className="tl-brush" x={0} y={0} width="100%" height="100%" />
|
||||
</svg>
|
||||
<Container bounds={brush} rotation={0}>
|
||||
<SVGContainer>
|
||||
<rect
|
||||
className="tl-brush"
|
||||
opacity={1}
|
||||
x={0}
|
||||
y={0}
|
||||
width={brush.width}
|
||||
height={brush.height}
|
||||
/>
|
||||
</SVGContainer>
|
||||
</Container>
|
||||
)
|
||||
})
|
||||
|
|
|
@ -1,2 +1 @@
|
|||
export * from './brush'
|
||||
export * from './BrushUpdater'
|
||||
|
|
|
@ -73,7 +73,7 @@ export function Canvas<T extends TLShape, M extends Record<string, unknown>>({
|
|||
hideHandles={hideHandles}
|
||||
meta={meta}
|
||||
/>
|
||||
<Brush />
|
||||
{pageState.brush && <Brush brush={pageState.brush} />}
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
export * from './renderer'
|
||||
export { brushUpdater } from './brush'
|
||||
export * from './svg-container'
|
||||
export * from './html-container'
|
||||
|
|
|
@ -22,7 +22,7 @@ export interface TLPageState {
|
|||
point: number[]
|
||||
zoom: number
|
||||
}
|
||||
brush?: TLBounds
|
||||
brush?: TLBounds | null
|
||||
pointedId?: string | null
|
||||
hoveredId?: string | null
|
||||
editingId?: string | null
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { brushUpdater, Utils } from '@tldraw/core'
|
||||
import { Utils } from '@tldraw/core'
|
||||
import { Vec } from '@tldraw/vec'
|
||||
import { Data, Session, TLDrawPatch, TLDrawStatus } from '~types'
|
||||
import { TLDR } from '~state/tldr'
|
||||
|
@ -23,14 +23,11 @@ export class BrushSession implements Session {
|
|||
// Create a bounding box between the origin and the new point
|
||||
const brush = Utils.getBoundsFromPoints([origin, point])
|
||||
|
||||
brushUpdater.set(brush)
|
||||
|
||||
// Find ids of brushed shapes
|
||||
const hits = new Set<string>()
|
||||
const selectedIds = new Set(snapshot.selectedIds)
|
||||
|
||||
const page = TLDR.getPage(data, currentPageId)
|
||||
const pageState = TLDR.getPageState(data, currentPageId)
|
||||
|
||||
snapshot.shapesToTest.forEach(({ id, util, selectId }) => {
|
||||
if (selectedIds.has(id)) return
|
||||
|
@ -55,17 +52,18 @@ export class BrushSession implements Session {
|
|||
}
|
||||
})
|
||||
|
||||
if (
|
||||
selectedIds.size === pageState.selectedIds.length &&
|
||||
pageState.selectedIds.every((id) => selectedIds.has(id))
|
||||
) {
|
||||
return {}
|
||||
}
|
||||
// if (
|
||||
// selectedIds.size === pageState.selectedIds.length &&
|
||||
// pageState.selectedIds.every((id) => selectedIds.has(id))
|
||||
// ) {
|
||||
// return {}
|
||||
// }
|
||||
|
||||
return {
|
||||
document: {
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
brush,
|
||||
selectedIds: Array.from(selectedIds.values()),
|
||||
},
|
||||
},
|
||||
|
@ -79,6 +77,7 @@ export class BrushSession implements Session {
|
|||
document: {
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
brush: null,
|
||||
selectedIds: this.snapshot.selectedIds,
|
||||
},
|
||||
},
|
||||
|
@ -89,10 +88,12 @@ export class BrushSession implements Session {
|
|||
complete(data: Data) {
|
||||
const { currentPageId } = data.appState
|
||||
const pageState = TLDR.getPageState(data, currentPageId)
|
||||
|
||||
return {
|
||||
document: {
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
brush: null,
|
||||
selectedIds: [...pageState.selectedIds],
|
||||
},
|
||||
},
|
||||
|
|
|
@ -6,13 +6,11 @@ import {
|
|||
TLBoundsEventHandler,
|
||||
TLBoundsHandleEventHandler,
|
||||
TLCanvasEventHandler,
|
||||
TLKeyboardInfo,
|
||||
TLPageState,
|
||||
TLPinchEventHandler,
|
||||
TLPointerEventHandler,
|
||||
TLWheelEventHandler,
|
||||
Utils,
|
||||
brushUpdater,
|
||||
TLPointerInfo,
|
||||
TLBounds,
|
||||
Inputs,
|
||||
|
@ -275,6 +273,10 @@ export class TLDrawState extends StateManager<Data> {
|
|||
...data.document.pageStates[pageId],
|
||||
}
|
||||
|
||||
if (!nextPageState.brush) {
|
||||
delete nextPageState.brush
|
||||
}
|
||||
|
||||
if (nextPageState.hoveredId && !page.shapes[nextPageState.hoveredId]) {
|
||||
delete nextPageState.hoveredId
|
||||
}
|
||||
|
@ -1365,10 +1367,10 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
if (!session) return this
|
||||
|
||||
const result = session.complete(this.state, ...args)
|
||||
|
||||
this.session = undefined
|
||||
|
||||
const result = session.complete(this.state, ...args)
|
||||
|
||||
if (result === undefined) {
|
||||
this.isCreating = false
|
||||
|
||||
|
@ -1458,6 +1460,7 @@ export class TLDrawState extends StateManager<Data> {
|
|||
document: {
|
||||
pageStates: {
|
||||
[this.currentPageId]: {
|
||||
...result.document?.pageStates?.[this.currentPageId],
|
||||
editingId: null,
|
||||
},
|
||||
},
|
||||
|
@ -1947,7 +1950,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
}
|
||||
case TLDrawStatus.Brushing: {
|
||||
this.cancelSession()
|
||||
brushUpdater.clear()
|
||||
break
|
||||
}
|
||||
case TLDrawStatus.Translating:
|
||||
|
@ -2375,7 +2377,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
}
|
||||
case TLDrawStatus.Brushing: {
|
||||
this.completeSession<Sessions.BrushSession>()
|
||||
brushUpdater.clear()
|
||||
break
|
||||
}
|
||||
case TLDrawStatus.Translating: {
|
||||
|
@ -2657,7 +2658,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
}
|
||||
case TLDrawStatus.Brushing: {
|
||||
this.completeSession<Sessions.BrushSession>()
|
||||
brushUpdater.clear()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue