PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix jumpy shapes

Browse source
This commit is contained in:
Steve Ruiz 2021-09-12 00:12:43 +01:00
parent d79f66da4e
commit af81a98fa4
4 changed files with 8 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/core/src/components/bounds/bounds.tsx
View file

@ -17,27 +17,6 @@ interface BoundsProps {
viewportWidth: number viewportWidth: number
} }
// function setTransform(elm: SVGSVGElement, padding: number, bounds: TLBounds, rotation: number) {
// const center = Utils.getBoundsCenter(bounds)
// const transform = `
// rotate(${rotation * (180 / Math.PI)},${center})
// translate(${bounds.minX - padding},${bounds.minY - padding})
// rotate(${(bounds.rotation || 0) * (180 / Math.PI)},0,0)`
// elm.setAttribute('transform', transform)
// elm.setAttribute('width', bounds.width + padding * 2 + 'px')
// elm.setAttribute('height', bounds.height + padding * 2 + 'px')
// }
// function setTransform(elm: HTMLDivElement, bounds: TLBounds, rotation = 0) {
// const transform = `
// translate(calc(${bounds.minX}px - var(--tl-padding)),calc(${bounds.minY}px - var(--tl-padding)))
// rotate(${rotation + (bounds.rotation || 0)}rad)
// `
// elm.style.setProperty('transform', transform)
// elm.style.setProperty('width', `calc(${bounds.width}px + (var(--tl-padding) * 2))`)
// elm.style.setProperty('height', `calc(${bounds.height}px + (var(--tl-padding) * 2))`)
// }
export function Bounds({ export function Bounds({
zoom, zoom,
bounds, bounds,

10
packages/core/src/components/shape/shape.tsx
View file

@ -7,16 +7,6 @@ import { RenderedShape } from './rendered-shape'
import { Container } from '+components/container' import { Container } from '+components/container'
import { useTLContext } from '+hooks' import { useTLContext } from '+hooks'
// function setTransform(elm: HTMLDivElement, bounds: TLBounds, rotation = 0) {
// const transform = `
// translate(calc(${bounds.minX}px - var(--tl-padding)),calc(${bounds.minY}px - var(--tl-padding)))
// rotate(${rotation + (bounds.rotation || 0)}rad)
// `
// elm.style.setProperty('transform', transform)
// elm.style.setProperty('width', `calc(${bounds.width}px + (var(--tl-padding) * 2))`)
// elm.style.setProperty('height', `calc(${bounds.height}px + (var(--tl-padding) * 2))`)
// }
export const Shape = <T extends TLShape, E extends Element, M extends Record<string, unknown>>({ export const Shape = <T extends TLShape, E extends Element, M extends Record<string, unknown>>({
shape, shape,
utils, utils,

10
packages/core/src/hooks/usePosition.ts
View file

@ -9,11 +9,13 @@ export function usePosition(bounds: TLBounds, rotation = 0) {
const elm = rBounds.current! const elm = rBounds.current!
const transform = ` const transform = `
translate(calc(${bounds.minX}px - var(--tl-padding)),calc(${bounds.minY}px - var(--tl-padding))) translate(calc(${bounds.minX}px - var(--tl-padding)),calc(${bounds.minY}px - var(--tl-padding)))
rotate(${rotation + (bounds.rotation || 0)}rad) rotate(${rotation + (bounds.rotation || 0)}rad)`
`
elm.style.setProperty('transform', transform) elm.style.setProperty('transform', transform)
elm.style.setProperty('width', `calc(${bounds.width}px + (var(--tl-padding) * 2))`) elm.style.setProperty('width', `calc(${Math.floor(bounds.width)}px + (var(--tl-padding) * 2))`)
elm.style.setProperty('height', `calc(${bounds.height}px + (var(--tl-padding) * 2))`) elm.style.setProperty(
'height',
`calc(${Math.floor(bounds.height)}px + (var(--tl-padding) * 2))`
)
}, [rBounds, bounds, rotation]) }, [rBounds, bounds, rotation])
return rBounds return rBounds

4
packages/core/src/utils/vec.tsx
View file

@ -360,8 +360,8 @@ export class Vec {
return Vec.isLeft(p1, pc, p2) > 0 return Vec.isLeft(p1, pc, p2) > 0
} }
static round = (a: number[], d = 5): number[] => { static round = (a: number[], d = 2): number[] => {
return a.map((v) => +v.toPrecision(d)) return a.map((v) => +v.toFixed(d))
} }
/** /**