var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)"; function buildProjectionTransform(delta, treeScale, latestTransform) { /** * 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. */ var xTranslate = delta.x.translate / treeScale.x; var yTranslate = delta.y.translate / treeScale.y; var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) "); /** * Apply scale correction for the tree transform. * This will apply scale to the screen-orientated axes. */ transform += "scale(".concat(1 / treeScale.x, ", ").concat(1 / treeScale.y, ") "); if (latestTransform) { var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY; if (rotate) transform += "rotate(".concat(rotate, "deg) "); if (rotateX) transform += "rotateX(".concat(rotateX, "deg) "); if (rotateY) transform += "rotateY(".concat(rotateY, "deg) "); } /** * Apply scale to match the size of the element to the size we want it. * This will apply scale to the element-orientated axes. */ var elementScaleX = delta.x.scale * treeScale.x; var elementScaleY = delta.y.scale * treeScale.y; transform += "scale(".concat(elementScaleX, ", ").concat(elementScaleY, ")"); return transform === identityProjection ? "none" : transform; } export { buildProjectionTransform, identityProjection };