Make eraser line scale to zoom (#710)

This commit is contained in:
Steve Ruiz 2022-06-02 17:14:27 +01:00 committed by GitHub
parent bba81eb71f
commit c959006144
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 7 deletions

View file

@ -137,7 +137,7 @@ export const Canvas = observer(function _Canvas<
{users && <Users userId={userId} users={users} />}
</div>
<Overlay camera={pageState.camera}>
{eraseLine && <EraseLine points={eraseLine} />}
{eraseLine && <EraseLine points={eraseLine} zoom={pageState.camera.zoom} />}
{snapLines && <SnapLines snapLines={snapLines} />}
</Overlay>
</div>

View file

@ -5,14 +5,17 @@ import Utils from '~utils'
export interface UiEraseLintProps {
points: number[][]
zoom: number
}
export type UiEraseLineComponent = (props: UiEraseLintProps) => any | null
export const EraseLine = observer(function EraserLine({ points }: UiEraseLintProps) {
export const EraseLine = observer(function EraserLine({ points, zoom }: UiEraseLintProps) {
if (points.length === 0) return null
const d = Utils.getSvgPathFromStroke(getStroke(points, { size: 16, start: { taper: true } }))
const d = Utils.getSvgPathFromStroke(
getStroke(points, { size: 16 / zoom, start: { taper: true } })
)
return <path d={d} className="tl-erase-line" />
})

View file

@ -30,11 +30,11 @@ export function alignShapes(app: TldrawApp, ids: string[], type: AlignType): Tld
{
prev: point,
next: {
[AlignType.CenterVertical]: [point[0], midY - bounds.height / 2],
[AlignType.CenterHorizontal]: [midX - bounds.width / 2, point[1]],
[AlignType.Top]: [point[0], commonBounds.minY],
[AlignType.CenterVertical]: [point[0], midY - bounds.height / 2],
[AlignType.Bottom]: [point[0], commonBounds.maxY - bounds.height],
[AlignType.Left]: [commonBounds.minX, point[1]],
[AlignType.CenterHorizontal]: [midX - bounds.width / 2, point[1]],
[AlignType.Right]: [commonBounds.maxX - bounds.width, point[1]],
}[type],
},

View file

@ -77,10 +77,10 @@ export class EraseSession extends BaseSession {
start = (): TldrawPatch | undefined => void null
update = (): TldrawPatch | undefined => {
const { page, shiftKey, originPoint, currentPoint } = this.app
const { page, shiftKey, originPoint, currentPoint, zoom } = this.app
if (shiftKey) {
if (!this.isLocked && Vec.dist(originPoint, currentPoint) > 4) {
if (!this.isLocked && Vec.dist(originPoint, currentPoint) > 4 / zoom) {
// If we're locking before knowing what direction we're in, set it
// early based on the bigger dimension.
if (!this.lockedDirection) {