Fix jumpy shapes
This commit is contained in:
parent
d79f66da4e
commit
af81a98fa4
4 changed files with 8 additions and 37 deletions
|
@ -17,27 +17,6 @@ interface BoundsProps {
|
|||
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({
|
||||
zoom,
|
||||
bounds,
|
||||
|
|
|
@ -7,16 +7,6 @@ import { RenderedShape } from './rendered-shape'
|
|||
import { Container } from '+components/container'
|
||||
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>>({
|
||||
shape,
|
||||
utils,
|
||||
|
|
|
@ -9,11 +9,13 @@ export function usePosition(bounds: TLBounds, rotation = 0) {
|
|||
const elm = rBounds.current!
|
||||
const transform = `
|
||||
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('width', `calc(${bounds.width}px + (var(--tl-padding) * 2))`)
|
||||
elm.style.setProperty('height', `calc(${bounds.height}px + (var(--tl-padding) * 2))`)
|
||||
elm.style.setProperty('width', `calc(${Math.floor(bounds.width)}px + (var(--tl-padding) * 2))`)
|
||||
elm.style.setProperty(
|
||||
'height',
|
||||
`calc(${Math.floor(bounds.height)}px + (var(--tl-padding) * 2))`
|
||||
)
|
||||
}, [rBounds, bounds, rotation])
|
||||
|
||||
return rBounds
|
||||
|
|
|
@ -360,8 +360,8 @@ export class Vec {
|
|||
return Vec.isLeft(p1, pc, p2) > 0
|
||||
}
|
||||
|
||||
static round = (a: number[], d = 5): number[] => {
|
||||
return a.map((v) => +v.toPrecision(d))
|
||||
static round = (a: number[], d = 2): number[] => {
|
||||
return a.map((v) => +v.toFixed(d))
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue