Initial commit since forking.

jayantbh · Apr 2, 2020 · 39be059 · 39be059
commit 39be059
Show file tree

Hide file tree

Showing 24 changed files with 10,206 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+.cache
+/dist
+/lib
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+.idea
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,27 @@
+coverage
+src
+test
+lib/types.js
+node_modules
+scripts
+.eslintignore
+.travis.yml
+codecov.yml
+yarn.lock
+yarn-error.log
+.nyc_output
+.vscode
+.eslintrc
+babel-preset-env-*.tgz
+flow-typed
+.github
+.idea
+dist
+.babelrc
+.eslint*
+jsconfig.json
+.npmignore
+.cache
+examples
+docs
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Jayant Bhawal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# React Multi Cropper
+A component for allowing multiple cropping regions on a single image.
+
+It's a fork of [this repo](https://github.com/beizhedenglong/react-multi-crops), but with several improvements.
+- Typescript
+- Smaller bundle size
+- A bit better styling
+- Better code design
+- More features
+
+![screenshot](https://snipboard.io/aWJHFU.jpg)
+
+
+## Installation
+```
+yarn add react-multi-cropper
+```
+
+## Usage
+
+See the examples/index.tsx file.
+
+## Functionality
+
+Draw rectangular regions on an image to obtain the selected area as a base64 encoded data URL.  
+Multiple regions can be obtained by drawing multiple boxes.
+
+The component is responsive, so the image dimensions can use relative units (like %), and the cropping regions/rectangles should stay in place w.r.t. the image.
+
+The cropping logic is aware of the device pixel ratio, so you won't get blurry crops on a MacBook or phone.
diff --git a/examples/imgs/sample.jpg b/examples/imgs/sample.jpg
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -0,0 +1,61 @@
+import React, { useCallback, useState } from 'react';
+import ReactDOM from 'react-dom';
+import MultiCrops from '../dist';
+import img from './imgs/sample.jpg';
+import { CropperBox, CropperBoxDataMap } from '../dist';
+
+const App = () => {
+  const [boxes, setBoxes] = useState<CropperBox[]>([
+    {
+      x: 178,
+      y: 91,
+      width: 120,
+      height: 178,
+      id: 'SJxb6YpuG',
+    },
+    {
+      x: 436,
+      y: 97,
+      width: 170,
+      height: 168,
+      id: 'SJMZ6YTdf',
+    },
+  ]);
+
+  const [imageMap, setImageMap] = useState<CropperBoxDataMap>({});
+
+  const updateBoxes = useCallback((box, index, _boxes) => setBoxes(_boxes), []);
+
+  return (
+    <div>
+      <h1 style={{ fontFamily: 'sans-serif' }}>
+        Dragging, Drawing, Resizing rectangles on the image
+      </h1>
+      <MultiCrops
+        src={img}
+        width={'100%'}
+        boxes={boxes}
+        onChange={updateBoxes}
+        onCrop={(e, map) => {
+          console.log('Crop', e, map);
+          setImageMap(map);
+        }}
+        onLoad={(e, map) => {
+          console.log(
+            'Loaded: ',
+            e.currentTarget.height,
+            e.currentTarget.width
+          );
+          setImageMap(map);
+        }}
+      />
+      {boxes.map((box, i) =>
+        imageMap[box.id] ? (
+          <img src={imageMap[box.id]} key={i} alt='image' />
+        ) : null
+      )}
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['node_modules', 'dist']
+};
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+          "src": ["src/**/*"]
+      },
+      "experimentalDecorators": true,
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "react-multi-cropper",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "author": {
+    "name": "Jayant Bhawal",
+    "email": "[email protected]"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jayantbh/react-multi-cropper"
+  },
+  "browser": "dist/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "prepare": "yarn run build",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,scss}\"",
+    "test": "yarn jest",
+    "serve": "parcel ./examples/index.html -p 3000"
+  },
+  "keywords": [
+    "react-crop",
+    "img-crop",
+    "cropping",
+    "react-img-crop",
+    "react-multi-crops",
+    "react"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@interactjs/types": "^1.9.7",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.0",
+    "@rollup/plugin-url": "^4.0.2",
+    "@svgr/rollup": "^5.3.0",
+    "@types/jest": "^25.1.4",
+    "@types/react": "^16.9.31",
+    "@types/react-dom": "^16.9.6",
+    "@types/shortid": "^0.0.29",
+    "@types/use-resize-observer": "^6.0.0",
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "jest": "^25.2.4",
+    "node-sass": "^4.13.1",
+    "parcel": "^1.12.4",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rimraf": "^2.6.2",
+    "rollup": "^2.3.2",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^2.5.0",
+    "rollup-plugin-sass": "^1.2.2",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-typescript2": "^0.25.3",
+    "ts-jest": "^25.3.0",
+    "tslib": "^1.11.1",
+    "typescript": "^3.8.3"
+  },
+  "peerDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "dependencies": {
+    "interactjs": "^1.9.7",
+    "shortid": "^2.2.15",
+    "use-resize-observer": "^6.0.0"
+  }
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,70 @@
+import typescript from 'rollup-plugin-typescript2';
+import commonjs from '@rollup/plugin-commonjs';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import resolve from '@rollup/plugin-node-resolve';
+import url from '@rollup/plugin-url';
+import svgr from '@svgr/rollup';
+import json from '@rollup/plugin-json';
+import builtins from 'rollup-plugin-node-builtins';
+import globals from 'rollup-plugin-node-globals';
+import { terser } from 'rollup-plugin-terser';
+
+import pkg from './package.json';
+
+process.env.SASS_PATH = 'src';
+
+// Plugin order matters
+const plugins = [
+  external(),
+  commonjs(),
+  resolve({
+    preferBuiltins: false,
+    browser: true,
+  }),
+  postcss({
+    autoModules: true,
+  }),
+  url(),
+  svgr(),
+  globals(),
+  builtins(),
+  json(),
+  terser(),
+];
+
+const pluginsTsExt = [
+  ...plugins,
+  typescript({
+    rollupCommonJSResolveHack: true,
+    clean: true,
+  }),
+];
+
+const commonExternal = [
+  'react',
+  'react-dom',
+];
+const commonConfig = {
+  exports: 'named',
+  sourcemap: true,
+  globals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+  },
+};
+
+export default [
+  {
+    external: commonExternal,
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.browser,
+        format: 'cjs',
+        ...commonConfig,
+      },
+    ],
+    plugins: pluginsTsExt,
+  }
+];