From 10b75af53eff2d50215a9279883116a755bdaf33 Mon Sep 17 00:00:00 2001 From: Valentin Hervieu Date: Mon, 4 Oct 2021 14:49:11 +0200 Subject: [PATCH 1/6] Add video tutorials --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index c086676..da4b0a4 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,10 @@ Check out the examples: - Supports any videos format supported in HTML5 - Mobile friendly +## Video tutorials from the community +- [Create an image gallery with live cropping](https://www.youtube.com/watch?v=E_AHkWHhUz4) +- [Crop an avatar and download the result](https://www.youtube.com/watch?v=RmiP1AY5HFM) + ## Installation ```shell From 08872c0e31aae608f02e945520c6f62e08015bab Mon Sep 17 00:00:00 2001 From: CodingWith-Adam <62483230+CodingWith-Adam@users.noreply.github.com> Date: Mon, 4 Oct 2021 11:54:12 -0600 Subject: [PATCH 2/6] Update readme video tutorials section (#300) with youtube channel names --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index da4b0a4..137b143 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ Check out the examples: - Mobile friendly ## Video tutorials from the community -- [Create an image gallery with live cropping](https://www.youtube.com/watch?v=E_AHkWHhUz4) -- [Crop an avatar and download the result](https://www.youtube.com/watch?v=RmiP1AY5HFM) +- [Create an image gallery with live cropping](https://www.youtube.com/watch?v=E_AHkWHhUz4) By [Coding With Adam](https://youtube.com/c/codingwithadam) +- [Crop an avatar and download the result](https://www.youtube.com/watch?v=RmiP1AY5HFM) By [Manish Boro](https://www.youtube.com/channel/UCyq81Ac-Ir4WIhFUgb_kyRw) ## Installation From 8810713d4bb45a99e64267b8619d4e362d581133 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 5 Oct 2021 17:21:48 +0200 Subject: [PATCH 3/6] Bump tmpl from 1.0.4 to 1.0.5 (#296) Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5. - [Release notes](https://github.com/daaku/nodejs-tmpl/releases) - [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5) --- updated-dependencies: - dependency-name: tmpl dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 58b51f5..c8fcb2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10974,9 +10974,9 @@ tmp@~0.2.1: rimraf "^3.0.0" tmpl@1.0.x: - version "1.0.4" - resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1" - integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE= + version "1.0.5" + resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" + integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw== to-arraybuffer@^1.0.0: version "1.0.1" From 0f492cdef68b288116ea4552a9fe04d859663347 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 5 Oct 2021 17:21:59 +0200 Subject: [PATCH 4/6] Bump object-path from 0.11.7 to 0.11.8 in /docs (#295) Bumps [object-path](https://github.com/mariocasciaro/object-path) from 0.11.7 to 0.11.8. - [Release notes](https://github.com/mariocasciaro/object-path/releases) - [Commits](https://github.com/mariocasciaro/object-path/commits) --- updated-dependencies: - dependency-name: object-path dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- docs/yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/yarn.lock b/docs/yarn.lock index 2c651af..535d563 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -10243,9 +10243,9 @@ object-keys@^1.0.12, object-keys@^1.1.1: integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== object-path@^0.11.2, object-path@^0.11.4: - version "0.11.7" - resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.7.tgz#5f211161f34bb395e4b13a5f565b79d933b6f65d" - integrity sha512-T4evaK9VfGGQskXBDILcn6F90ZD+WO3OwRFFQ2rmZdUH4vQeDBpiolTpVlPY2yj5xSepyILTjDyM6UvbbdHMZw== + version "0.11.8" + resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.8.tgz#ed002c02bbdd0070b78a27455e8ae01fc14d4742" + integrity sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA== object-visit@^1.0.0: version "1.0.1" From ff7c8053310cdd4e2e5a8d0bd13a0d3f60e09c33 Mon Sep 17 00:00:00 2001 From: Ivan Galiatin Date: Mon, 29 Nov 2021 22:08:26 +0100 Subject: [PATCH 5/6] Change rotated crop area output (#312) Co-authored-by: Valentin Hervieu --- .eslintrc.json | 5 +- .gitignore | 3 +- README.md | 67 ++++----- cypress/integration/basic_spec.js | 38 ++--- cypress/integration/mouse_spec.js | 36 ++--- cypress/integration/touch_spec.js | 56 +++++--- docs/src/components/Demo/cropImage.ts | 49 +++---- docs/src/components/Demo/index.tsx | 18 ++- examples/src/images/1000x600.jpeg | Bin 0 -> 191550 bytes examples/src/images/2000x1200.jpeg | Bin 0 -> 605595 bytes examples/src/images/flower.jpeg | Bin 0 -> 463265 bytes examples/src/index.tsx | 186 +++++++++++++++++++++--- examples/src/styles.css | 12 ++ package.json | 3 + src/helpers.test.ts | 100 ++++++++----- src/helpers.ts | 194 ++++++++++++++++---------- src/index.tsx | 119 ++++++++++++---- yarn.lock | 26 +++- 18 files changed, 630 insertions(+), 282 deletions(-) create mode 100644 examples/src/images/1000x600.jpeg create mode 100644 examples/src/images/2000x1200.jpeg create mode 100644 examples/src/images/flower.jpeg diff --git a/.eslintrc.json b/.eslintrc.json index a429bcb..8f3beb0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,9 +4,10 @@ "react-app", "prettier", "prettier/@typescript-eslint", - "prettier/react" + "prettier/react", + "plugin:cypress/recommended" ], - "plugins": ["@typescript-eslint/eslint-plugin"], + "plugins": ["@typescript-eslint/eslint-plugin", "cypress"], "rules": { "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/ban-ts-ignore": 0, diff --git a/.gitignore b/.gitignore index dc918d7..ecc7fb8 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,5 @@ docs/public .idea *.iml .yalc -yalc.lock \ No newline at end of file +yalc.lock +.DS_Store diff --git a/README.md b/README.md index 137b143..4695789 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ Check out the examples: - Mobile friendly ## Video tutorials from the community + - [Create an image gallery with live cropping](https://www.youtube.com/watch?v=E_AHkWHhUz4) By [Coding With Adam](https://youtube.com/c/codingwithadam) - [Crop an avatar and download the result](https://www.youtube.com/watch?v=RmiP1AY5HFM) By [Manish Boro](https://www.youtube.com/channel/UCyq81Ac-Ir4WIhFUgb_kyRw) @@ -80,39 +81,39 @@ This component requires some styles to be available in the document. By default, ## Props -| Prop | Type | Required | Description | -| :------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `image` | string | | The image to be cropped. `image` or `video` is required. | -| `video` | string or `Array<{ src: string; type?: string }>` | | The video to be cropped. `image` or `video` is required. | -| `crop` | `{ x: number, y: number }` | ✓ | Position of the media. `{ x: 0, y: 0 }` will center the media under the cropper. | -| `zoom` | number | | Zoom of the media between `minZoom` and `maxZoom`. Defaults to 1. | -| `rotation` | number (in degrees) | | Rotation of the media. Defaults to 0. | -| `aspect` | number | | Aspect of the cropper. The value is the ratio between its width and its height. The default value is `4/3` | -| `minZoom` | number | | Minimum zoom of the media. Defaults to 1. | -| `maxZoom` | number | | Maximum zoom of the media. Defaults to 3. | -| `zoomWithScroll` | boolean | | Enable zoom by scrolling. Defaults to `true` | -| `cropShape` | 'rect' \| 'round' | | Shape of the crop area. Defaults to 'rect'. | -| `cropSize` | `{ width: number, height: number }` | | Size of the crop area (in pixels). If you don't provide it, it will be computed automatically using the `aspect` prop and the media size. **You should probably not use this option and should rely on aspect instead. See https://github.com/ricardo-ch/react-easy-crop/issues/186.** | -| `showGrid` | boolean | | Whether to show or not the grid (third-lines). Defaults to `true`. | -| `zoomSpeed` | number | | Multiplies the value by which the zoom changes. Defaults to 1. | -| `objectFit` [demo](https://codesandbox.io/s/react-easy-crop-forked-p9r34) | 'contain', 'horizontal-cover' or 'vertical-cover' | | Specifies how the image is shown in the cropper:. `contain`: the image will be adjusted to be fully visible, `horizontal-cover`: the image will horizontally fill the cropper, `vertical-cover`: the image will vertically fill the cropper. Defaults to "contain". | -| `onCropChange` | crop => void | ✓ | Called everytime the crop is changed. Use it to update your `crop` state. | -| `onZoomChange` | zoom => void | | Called everytime the zoom is changed. Use it to update your `zoom` state. | -| `onRotationChange` | rotation => void | | Called everytime the rotation is changed (with mobile gestures). Use it to update your `rotation` state. | -| `onCropSizeChange` | cropSize => void | | Called when a change in either the cropSize width or the cropSize height occurs. | -| [`onCropComplete`](#onCropCompleteProp) | Function | | Called when the user stops moving the media or stops zooming. It will be passed the corresponding cropped area on the media in percentages and pixels | -| [`onCropAreaChange`](#onCropAreaChangeProp) | Function | | Very similar to [`onCropComplete`](#onCropCompleteProp) but is triggered for every user interaction instead of waiting for the user to stop. | -| `transform` | string | | CSS transform to apply to the image in the editor. Defaults to `translate(${crop.x}px, ${crop.y}px) rotate(${rotation}deg) scale(${zoom})` with variables being pulled from props. | -| `style` | `{ containerStyle: object, mediaStyle: object, cropAreaStyle: object }` | | Custom styles to be used with the Cropper. Styles passed via the style prop are merged with the defaults. | -| `classes` | `{ containerClassName: string, mediaClassName: string, cropAreaClassName: string }` | | Custom class names to be used with the Cropper. Classes passed via the classes prop are merged with the defaults. If you have CSS specificity issues, you should probably use the `disableAutomaticStylesInjection` prop. | -| `mediaProps` | object | | The properties you want to apply to the media tag ( or