Make eraser line scale to zoom (#710)
This commit is contained in:
parent
bba81eb71f
commit
c959006144
4 changed files with 10 additions and 7 deletions
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
})
|
||||
|
|
|
@ -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],
|
||||
},
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue