Skip to content
Permalink
Browse files

add back image scale adjustment on drag

  • Loading branch information
aholachek committed Oct 29, 2019
1 parent fa23e6b commit 29a03e6be4494d041d85a28592dfedd673a924d7
Showing with 33 additions and 11 deletions.
  1. +6 −3 src/PhotoGrid/ImageGrid.js
  2. +15 −6 src/PhotoGrid/drag.js
  3. +2 −1 src/usePrevious.js
  4. +1 −0 src/useWindowSize.js
  5. +9 −1 src/utilities.js
@@ -62,7 +62,8 @@ const GridImage = ({
isSelected,
setBackgroundSpring,
zIndexQueue,
height
height,
width
}) => {
const [{ y }, setY] = useVelocityTrackedSpring(() => ({
y: 0
@@ -91,7 +92,8 @@ const GridImage = ({
x,
y,
set,
setBackgroundSpring
setBackgroundSpring,
width
})
: dragUnselected({
setSelectedImage: () => setSelectedImage(id)
@@ -147,7 +149,7 @@ const GridImage = ({
const MemoizedGridImage = React.memo(GridImage)

const ImageGrid = ({ images, selectedImageId, ...rest }) => {
const { height } = useWindowSize()
const { height, width } = useWindowSize()
return (
<StyledGrid>
{images.map(({ id, img }) => {
@@ -158,6 +160,7 @@ const ImageGrid = ({ images, selectedImageId, ...rest }) => {
id={id}
img={img}
height={height}
width={width}
{...rest}
/>
)
@@ -2,13 +2,15 @@ import {
rubberBandIfOutOfBounds,
findNearestNumberInArray,
projection,
rangeMap
rangeMap,
clampedRangeMap
} from "../utilities"

const threshold = 10
const maxYTranslate = 150
export const yStops = [0, maxYTranslate]
const xStops = [-20, 20]
const scaleStops = [1, 0.75]

export const dragUnselected = ({ setSelectedImage }) => ({
last,
@@ -24,7 +26,8 @@ export const dragSelected = ({
x,
y,
set,
setBackgroundSpring
setBackgroundSpring,
width
}) => ({
vxvy: [, velocityY],
movement: [movementX, movementY],
@@ -64,20 +67,26 @@ export const dragSelected = ({
return set({
immediate: false,
y: 0,
x: 0
x: 0,
scaleY: 1,
scaleX: 1
})
}
}

const newY = rubberBandIfOutOfBounds(yStops[0], yStops[1], movementY + memo.y)
const newX = rubberBandIfOutOfBounds(xStops[0], xStops[1], movementX + memo.x)
const newY = rubberBandIfOutOfBounds(...yStops, movementY + memo.y)
const newX = rubberBandIfOutOfBounds(...xStops, movementX + memo.x)

// allow for interruption of enter animation
memo.immediate = memo.immediate || Math.abs(newY - y.value) < 1

const scale = clampedRangeMap(yStops, scaleStops, movementY + memo.y)

set({
y: newY,
x: newX,
x: newX + ((1 - scale) / 2) * width,
scaleY: scale,
scaleX: scale,
onFrame: null,
immediate: memo.immediate
})
@@ -1,4 +1,5 @@
import { useEffect, useRef } from "react"
// https://usehooks.com/usePrevious/
import { useEffect, useRef } from "react"

function usePrevious(value) {
// The ref object is a generic container whose current property is mutable ...
@@ -1,3 +1,4 @@
// https://usehooks.com/useWindowSize/
import { useState, useEffect } from "react"

// Hook
@@ -1,13 +1,21 @@
// 0 < percent < 1
// percent should be between 0 and 1
export const range = (start, end, percent) => (end - start) * percent + start

export const clamp = (min, max, val) => Math.max(Math.min(val, max), min)

// take a number ("val") in between the two numbers in arr1, and map it to a number in between the two numbers in arr2
export const rangeMap = (arr1, arr2, val) => {
const percent = (val - arr1[0]) / (arr1[1] - arr1[0])
return range(arr2[0], arr2[1], percent)
}

// rangeMap with a guarantee that the returned number will be inside the bounds of arr2
export const clampedRangeMap = (arr1, arr2, val) => {
const min = arr2[0] < arr2[1] ? arr2[0] : arr2[1]
const max = min === arr2[0] ? arr2[1] : arr2[0]
return clamp(min, max, rangeMap(arr1, arr2, val))
}

// https://twitter.com/chpwn/status/285540192096497664
// iOS constant = 0.55
export const rubberBand = (distance, dimension, constant = 0.15) => {

0 comments on commit 29a03e6

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