Skip to content
Permalink
Browse files

use rematrix

  • Loading branch information
aholachek committed Oct 20, 2019
1 parent a8d4f70 commit e0db946764169ed8cbdd202980cf5a66d05424dd
Showing with 64 additions and 41 deletions.
  1. +1 −0 package.json
  2. +56 −0 src/Flipper.js
  3. +2 −36 src/PhotoGrid/index.js
  4. +5 −5 yarn.lock
@@ -12,6 +12,7 @@
"react-scripts": "3.2.0",
"react-spring": "^8.0.27",
"react-use-gesture": "^6.0.3",
"rematrix": "^0.4.1",
"styled-components": "^4.4.0"
},
"scripts": {
@@ -0,0 +1,56 @@
import * as Rematrix from "rematrix"

class Flipper {
constructor({ ref, onFlip }) {
this.ref = ref
this.onFlip = onFlip
this.positions = {}
}

getEl = id => this.ref.current.querySelector(`[data-flip-key=${id}]`)

measure(id) {
const el = this.getEl(id)
if (el) return el.getBoundingClientRect()
}

beforeFlip(id) {
this.positions[id] = this.measure(id)
}

flip(id, data) {
const el = this.getEl(id)

const startTransform = Rematrix.fromString(el.style.transform)
el.style.transform = ""
const after = this.measure(id, true)
const before = this.positions[id]
const scaleX = before.width / after.width
const scaleY = before.height / after.height
const x = before.left - after.left
const y = before.top - after.top

const transformsArray = [
startTransform,
Rematrix.translateX(x),
Rematrix.translateY(y),
Rematrix.scaleX(scaleX),
Rematrix.scaleY(scaleY)
]

const matrix = transformsArray.reduce(Rematrix.multiply)

const diff = {
x: matrix[12],
y: matrix[13],
scaleX: matrix[0],
scaleY: matrix[5]
}

el.style.transform = `translate(${diff.x}px, ${diff.y}px) scaleX(${diff.scaleX}) scaleY(${diff.scaleY})`

this.onFlip(id, diff, data)
}
}

export default Flipper
@@ -5,6 +5,7 @@ import ImageGrid, { defaultSpringSettings, bounceConfig } from "./ImageGrid"
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"
import images from "../assets/index"
import usePrevious from "../usePrevious"
import Flipper from "../Flipper"

const Background = styled.div`
position: absolute;
@@ -34,37 +35,6 @@ const imageData = images

const imageIds = Object.keys(imageData)

const getEl = (ref, id) => ref.current.querySelector(`[data-flip-key=${id}]`)

class Flipper {
constructor({ ref, onFlip }) {
this.ref = ref
this.onFlip = onFlip
this.positions = {}
}
measure(id) {
const el = getEl(this.ref, id)
if (el) return el.getBoundingClientRect()
}

beforeFlip(id) {
this.positions[id] = this.measure(id)
}

flip(id, data) {
const after = this.measure(id, true)
const before = this.positions[id]
const diff = {
scaleX: before.width / after.width,
scaleY: before.height / after.height,
x: before.left - after.left,
y: before.top - after.top
}

this.onFlip(id, diff, data)
}
}

const DismissFullScreen = () => {
const containerRef = React.useRef(null)
const zIndexQueue = React.useRef([])
@@ -91,9 +61,7 @@ const DismissFullScreen = () => {
ref: containerRef,
onFlip(id, vals, data = {}) {
const set = springsRef.current[id].set

const el = getEl(containerRef, id)
el.style.transform = `translate(${vals.x}px, ${vals.y}px) scaleX(${vals.scaleX}) scaleY(${vals.scaleY})`
const el = this.getEl(id)
el.style.zIndex = 5
set({
...vals,
@@ -138,8 +106,6 @@ const DismissFullScreen = () => {
requestAnimationFrame(() => {
enableBodyScroll(containerRef.current)
})
const el = getEl(containerRef, previousSelectedImageId)
el.style.transform = ""
flipRef.current.flip(previousSelectedImageId, {
isLeaving: true
})
@@ -8433,6 +8433,11 @@ relateurl@0.2.x:
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=

rematrix@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/rematrix/-/rematrix-0.4.1.tgz#496d40b48c79dd3820bc40352b8d7bec44b32887"
integrity sha512-nH4OjL09zw4yhdBClK4B93kRWbHu+std7ZV6ljS2Zsgy2YrPcayL67axKLfMxoFool8mPyVY614m8SFE7sJQLw==

remove-trailing-separator@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8521,11 +8526,6 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

reset.css@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/reset.css/-/reset.css-2.0.2.tgz#9c01309c820b72e8f219ebcc8e1411949604f7d7"
integrity sha1-nAEwnIILcujyGevMjhQRlJYE99c=

resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

0 comments on commit e0db946

Please sign in to comment.
You can’t perform that action at this time.