All files / src/projection/styles transform.ts

53.33% Statements 8/15
30% Branches 3/10
100% Functions 1/1
66.67% Lines 8/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32      38x   38x                     3x 3x 3x   3x             3x   3x    
import { ResolvedValues } from "../../render/types"
import { Delta, Point } from "../geometry/types"
 
export const identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)"
 
export function buildProjectionTransform(
    delta: Delta,
    treeScale: Point,
    latestTransform?: ResolvedValues
): string {
    /**
     * The translations we use to calculate are always relative to the viewport coordinate space.
     * But when we apply scales, we also scale the coordinate space of an element and its children.
     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
     */
    const xTranslate = delta.x.translate / treeScale.x
    const yTranslate = delta.y.translate / treeScale.y
    let transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `
 
    Iif (latestTransform) {
        const { rotate, rotateX, rotateY } = latestTransform
        if (rotate) transform += `rotate(${rotate}deg) `
        if (rotateX) transform += `rotateX(${rotateX}deg) `
        if (rotateY) transform += `rotateY(${rotateY}deg) `
    }
 
    transform += `scale(${delta.x.scale}, ${delta.y.scale})`
 
    return transform === identityProjection ? "none" : transform
}