Skip to content

Commit

Permalink
Move nudging to utils. Update deps
Browse files Browse the repository at this point in the history
  • Loading branch information
@sekoyo
sekoyo committed Jul 30, 2022
1 parent 744ae4c commit 29aef3e
Show file tree
Hide file tree
Showing 5 changed files with 254 additions and 353 deletions.
30 changes: 15 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,29 @@
],
"license": "ISC",
"devDependencies": {
"@types/react": "^18.0.11",
"@types/react-dom": "^18.0.5",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"babel-eslint": "^10.1.0",
"css-loader": "^6.7.1",
"eslint": "^8.17.0",
"eslint": "^8.20.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.30.0",
"mini-css-extract-plugin": "^2.6.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"sass": "^1.52.2",
"sass-loader": "^13.0.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"mini-css-extract-plugin": "^2.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.54.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.0",
"typescript": "^4.7.3",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"peerDependencies": {
"react": ">=16.13.1"
},
"dependencies": {
"clsx": "^1.1.1"
"clsx": "^1.2.1"
}
}
123 changes: 14 additions & 109 deletions src/ReactCrop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@ import React, { PureComponent, createRef } from 'react'
import clsx from 'clsx'

import { Ords, XYOrds, Crop, PixelCrop, PercentCrop } from './types'
import { defaultCrop, clamp, areCropsEqual, convertToPercentCrop, convertToPixelCrop, containCrop } from './utils'
import {
defaultCrop,
clamp,
areCropsEqual,
convertToPercentCrop,
convertToPixelCrop,
containCrop,
nudgeCrop,
} from './utils'

import './ReactCrop.scss'

Expand Down Expand Up @@ -234,7 +242,6 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
startCropX = pixelCrop.x + pixelCrop.width
startCropY = pixelCrop.y + pixelCrop.height
}

startClientX = startCropX + box.x
startClientY = startCropY + box.y
}
Expand Down Expand Up @@ -395,10 +402,7 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
}
}

onHandlerKeyDown = (
e: React.KeyboardEvent<HTMLDivElement>,
ord: 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
) => {
onHandlerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, ord: Ords) => {
const {
aspect = 0,
crop,
Expand All @@ -424,114 +428,17 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
return
}

const tmpCrop = convertToPixelCrop(crop, box.width, box.height)
const ctrlCmdPressed = navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey
const offset = ctrlCmdPressed
? ReactCrop.nudgeStepLarge
: e.shiftKey
? ReactCrop.nudgeStepMedium
: ReactCrop.nudgeStep

if (e.key === 'ArrowLeft') {
if (ord === 'nw') {
tmpCrop.x -= offset
tmpCrop.y -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 'w') {
tmpCrop.x -= offset
tmpCrop.width += offset
} else if (ord === 'sw') {
tmpCrop.x -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 'ne') {
tmpCrop.y += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 'e') {
tmpCrop.width -= offset
} else if (ord === 'se') {
tmpCrop.width -= offset
tmpCrop.height -= offset
}
} else if (e.key === 'ArrowRight') {
if (ord === 'nw') {
tmpCrop.x += offset
tmpCrop.y += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 'w') {
// Niche: Will move right if minWidth hit.
tmpCrop.x += offset
tmpCrop.width -= offset
} else if (ord === 'sw') {
tmpCrop.x += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 'ne') {
tmpCrop.y -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 'e') {
tmpCrop.width += offset
} else if (ord === 'se') {
tmpCrop.width += offset
tmpCrop.height += offset
}
}

if (e.key === 'ArrowUp') {
if (ord === 'nw') {
tmpCrop.x -= offset
tmpCrop.y -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 'n') {
tmpCrop.y -= offset
tmpCrop.height += offset
} else if (ord === 'ne') {
tmpCrop.y -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 'sw') {
tmpCrop.x += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 's') {
tmpCrop.height -= offset
} else if (ord === 'se') {
tmpCrop.width -= offset
tmpCrop.height -= offset
}
} else if (e.key === 'ArrowDown') {
if (ord === 'nw') {
tmpCrop.x += offset
tmpCrop.y += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 'n') {
// Niche: Will move down if minHeight hit.
tmpCrop.y += offset
tmpCrop.height -= offset
} else if (ord === 'ne') {
tmpCrop.y += offset
tmpCrop.width -= offset
tmpCrop.height -= offset
} else if (ord === 'sw') {
tmpCrop.x -= offset
tmpCrop.width += offset
tmpCrop.height += offset
} else if (ord === 's') {
tmpCrop.height += offset
} else if (ord === 'se') {
tmpCrop.width += offset
tmpCrop.height += offset
}
}

const pixelCrop = convertToPixelCrop(crop, box.width, box.height)
const nudgedCrop = nudgeCrop(pixelCrop, e.key, offset, ord)
const containedCrop = containCrop(
tmpCrop,
nudgedCrop,
aspect,
ord,
box.width,
Expand Down Expand Up @@ -580,9 +487,7 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {

onDragFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => {
// Fixes #491
if (this.componentRef.current) {
this.componentRef.current.scrollTo(0, 0)
}
this.componentRef.current?.scrollTo(0, 0)
}

getCropStyle() {
Expand Down
104 changes: 104 additions & 0 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,3 +218,107 @@ export function containCrop(

return containedCrop
}

export function nudgeCrop(pixelCrop: PixelCrop, key: string, offset: number, ord: Ords) {
const nextCrop = { ...pixelCrop }

if (key === 'ArrowLeft') {
if (ord === 'nw') {
nextCrop.x -= offset
nextCrop.y -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 'w') {
nextCrop.x -= offset
nextCrop.width += offset
} else if (ord === 'sw') {
nextCrop.x -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 'ne') {
nextCrop.y += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 'e') {
nextCrop.width -= offset
} else if (ord === 'se') {
nextCrop.width -= offset
nextCrop.height -= offset
}
} else if (key === 'ArrowRight') {
if (ord === 'nw') {
nextCrop.x += offset
nextCrop.y += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 'w') {
// Niche: Will move right if minWidth hit.
nextCrop.x += offset
nextCrop.width -= offset
} else if (ord === 'sw') {
nextCrop.x += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 'ne') {
nextCrop.y -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 'e') {
nextCrop.width += offset
} else if (ord === 'se') {
nextCrop.width += offset
nextCrop.height += offset
}
}

if (key === 'ArrowUp') {
if (ord === 'nw') {
nextCrop.x -= offset
nextCrop.y -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 'n') {
nextCrop.y -= offset
nextCrop.height += offset
} else if (ord === 'ne') {
nextCrop.y -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 'sw') {
nextCrop.x += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 's') {
nextCrop.height -= offset
} else if (ord === 'se') {
nextCrop.width -= offset
nextCrop.height -= offset
}
} else if (key === 'ArrowDown') {
if (ord === 'nw') {
nextCrop.x += offset
nextCrop.y += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 'n') {
// Niche: Will move down if minHeight hit.
nextCrop.y += offset
nextCrop.height -= offset
} else if (ord === 'ne') {
nextCrop.y += offset
nextCrop.width -= offset
nextCrop.height -= offset
} else if (ord === 'sw') {
nextCrop.x -= offset
nextCrop.width += offset
nextCrop.height += offset
} else if (ord === 's') {
nextCrop.height += offset
} else if (ord === 'se') {
nextCrop.width += offset
nextCrop.height += offset
}
}

return nextCrop
}
5 changes: 3 additions & 2 deletions test/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ReactDOM from 'react-dom'
import { createRoot } from 'react-dom/client'
import React, { useState, useRef } from 'react'
import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from '../src'
import { cropPreview } from './cropPreview'
Expand Down Expand Up @@ -119,4 +119,5 @@ function App() {
)
}

ReactDOM.render(<App />, document.getElementById('root'))
const root = createRoot(document.getElementById('root')!)
root.render(<App />)
Loading

0 comments on commit 29aef3e

Please sign in to comment.