Skip to content

Instantly share code, notes, and snippets.

@dbismut
Last active April 9, 2018 15:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dbismut/fe9dba3799075b96b3aa02f07e2227f4 to your computer and use it in GitHub Desktop.
Save dbismut/fe9dba3799075b96b3aa02f07e2227f4 to your computer and use it in GitHub Desktop.
Part 3 - Setting scale for the preview node
getPreviewStyleAndPosition = () => {
const { top, width, height } = this.preview.getBoundingClientRect();
const transformMatrix = window.getComputedStyle(this.preview).transform;
// transformMatrix is either 'none', or a string in the form of
// matrix(0.965, 0, 0, 0.965, 0, 0)
const scale =
transformMatrix.indexOf('matrix') === 0
? parseFloat(transformMatrix.split(', ')[3])
: 1;
// scale above will actually be scaleY
// since our post node will also be scaled we need to
// compensate width, height, and top with the scale
// attribute
return {
top: top - height * (1 - scale) / 2,
width: width / scale,
height: height / scale,
borderRadius: 16,
scale // we add the scale attribute
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment