Merge pull request #3 from DaAnda97/feat/scroll-on-touch-sync

feat(scroll-on-touch): syncs head

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["documentation", "tests"]
+}

.changeset/pre.json

@@ -0,0 +1,14 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "documentation": "1.0.0",
+    "eslint-config-custom": "0.0.0",
+    "react-sketch-canvas": "6.2.0",
+    "tests": "1.0.0",
+    "tsconfig": "0.0.0"
+  },
+  "changesets": [
+    "serious-bobcats-burn"
+  ]
+}

.changeset/serious-bobcats-burn.md

@@ -0,0 +1,6 @@
+---
+"react-sketch-canvas": major
+---
+
+- Add option to use Windows surface pen button as eraser
+- Memoize functions to reduce re-rendering

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ["custom"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+  ignorePatterns: ["*.config.js"],
+};

.gitignore

@@ -11,3 +11,9 @@ coverage/
 jest-coverage/
 cypress-coverage/
 reports/
+packages/tests/cypress/screenshots/
+packages/tests/cypress/videos/
+packages/tests/.nyc_output/
+packages/tests/coverage/
+packages/tests/cypress/downloads/
+.idea/

.hintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["development"],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

.nycrc

@@ -0,0 +1,5 @@
+{
+  "report-dir": "packages/tests/coverage",
+  "temp-dir": "packages/tests/.nyc_output",
+  "reporter": ["lcov", "text"]
+}

README.md

@@ -1,19 +1,19 @@
-<p align="center">
+<p style="text-align: center;">
   <img src="https://i.imgur.com/ajs39FC.png" height="150" alt="React Sketch Canvas" />
 </p>
 <br/>
-<h3 align="center">
+<h3 style="text-align: center;">
   Freehand vector drawing component for React using SVG as canvas 🖌
 </h3>
 <br/>
 <br/>
-<div align="center">
+<div style="text-align: center;">
 
 ![npm](https://img.shields.io/npm/v/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![NPM](https://img.shields.io/npm/l/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![npm](https://img.shields.io/npm/dm/react-sketch-canvas?style=flat-square) <br/>
 ![npm bundle size](https://img.shields.io/bundlephobia/min/react-sketch-canvas?style=flat-square) &nbsp;&nbsp; ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-sketch-canvas?style=flat-square) <br/>
 [![codecov](https://codecov.io/gh/vinothpandian/react-sketch-canvas/branch/master/graph/badge.svg?token=NJcqGRgbSa)](https://codecov.io/gh/vinothpandian/react-sketch-canvas)
 <br/>
-This project was generated using [DTS](https://github.com/weiran-zsd/dts-cli).
+This project was built using [Turborepo](https://turbo.build/).
 
 </div>
 
@@ -26,7 +26,7 @@ This project was generated using [DTS](https://github.com/weiran-zsd/dts-cli).
 
 ### Requirements
 
-- **<span style="color:red">**Requires React >= 16.4**</span>**
+- **<span style="color:red">**Requires React >= 16.8**</span>**
 
 ### Wanna test React Sketch Canvas before using it?
 
@@ -51,12 +51,12 @@ yarn add react-sketch-canvas
 Common usage example
 
 ```javascript
-import * as React from 'react';
-import { ReactSketchCanvas } from 'react-sketch-canvas';
+import * as React from "react";
+import { ReactSketchCanvas } from "react-sketch-canvas";
 
 const styles = {
-  border: '0.0625rem solid #9c9c9c',
-  borderRadius: '0.25rem',
+  border: "0.0625rem solid #9c9c9c",
+  borderRadius: "0.25rem",
 };
 
 const Canvas = () => {
@@ -80,7 +80,7 @@ import { ReactSketchCanvas } from "react-sketch-canvas";
 
 const styles = {
   border: "0.0625rem solid #9c9c9c",
-  borderRadius: "0.25rem"
+  borderRadius: "0.25rem",
 };
 
 const Canvas = class extends React.Component {
@@ -100,12 +100,12 @@ const Canvas = class extends React.Component {
         />
         <button
           onClick={() => {
-            this.canvas.current.
+            this.canvas.current
               .exportImage("png")
-              .then(data => {
+              .then((data) => {
                 console.log(data);
               })
-              .catch(e => {
+              .catch((e) => {
                 console.log(e);
               });
           }}
@@ -169,7 +169,7 @@ _Use ref to access the element and call the following functions to export image_
 ## Types
 
 ```ts
-type ExportImageType = 'jpeg' | 'png';
+type ExportImageType = "jpeg" | "png";
 
 interface Point {
   x: number;

apps/documentation/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/documentation/index.html

@@ -0,0 +1,19 @@
+<!--suppress HtmlUnknownTarget -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link href="/vite.svg" rel="icon" type="image/svg+xml" />
+  <link crossorigin="anonymous"
+        href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
+        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+        rel="stylesheet">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>ReactSketchCanvas</title>
+</head>
+<body>
+<div id="root"></div>
+<script src="/src/main.tsx" type="module"></script>
+</body>
+</html>

apps/documentation/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "documentation",
+  "private": true,
+  "version": "1.0.0",
+  "homepage": "http://vinoth.info/react-sketch-canvas",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "ci:build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-sketch-canvas": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "eslint-config-custom": "workspace:*",
+    "tsconfig": "workspace:*"
+  }
+}