viewbox support and other missing features

README.md

@@ -1,189 +1,7 @@
-<p style="text-align: center;">
-  <img src="https://i.imgur.com/ajs39FC.png" height="150" alt="React Sketch Canvas" />
-</p>
-<br/>
-<h3 style="text-align: center;">
-  Freehand vector drawing component for React using SVG as canvas 🖌
-</h3>
-<br/>
-<br/>
-<div style="text-align: center;">
+THIS IS JUST A FORK  TO FIX A SINGLE BUG, PLEASE USE THE ORIGINAL INSTEAD. SEE:
+https://github.com/vinothpandian/react-sketch-canvas/pull/178
 
-![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 built using [Turborepo](https://turbo.build/).
 
-</div>
-
-## Overview
-
-### Features
-
-- **Supports Desktop and Mobile.**
-- **Accepts input from Mouse, touch, and graphic tablets.**
-
-### Requirements
-
-- **<span style="color:red">**Requires React >= 16.8**</span>**
-
-### Wanna test React Sketch Canvas before using it?
-
-- **Try [here](https://vinoth.info/react-sketch-canvas)**
-
-## Installation
-
-If you use npm
-
-```sh
-npm i react-sketch-canvas
-```
-
-or with yarn
-
-```sh
-yarn add react-sketch-canvas
-```
-
-## Example
-
-Common usage example
-
-```javascript
-import * as React from "react";
-import { ReactSketchCanvas } from "react-sketch-canvas";
-
-const styles = {
-  border: "0.0625rem solid #9c9c9c",
-  borderRadius: "0.25rem",
-};
-
-const Canvas = () => {
-  return <ReactSketchCanvas style={styles} width="600" height="400" strokeWidth={4} strokeColor="red" />;
-};
-```
-
-To export Data URL of your sketch use ref
-
-```javascript
-import * as React from "react";
-import { ReactSketchCanvas } from "react-sketch-canvas";
-
-const styles = {
-  border: "0.0625rem solid #9c9c9c",
-  borderRadius: "0.25rem",
-};
-
-const Canvas = class extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.canvas = React.createRef();
-  }
-
-  render() {
-    return (
-      <div>
-        <ReactSketchCanvas ref={this.canvas} strokeWidth={5} strokeColor="black" />
-        <button
-          onClick={() => {
-            this.canvas.current
-              .exportImage("png")
-              .then((data) => {
-                console.log(data);
-              })
-              .catch((e) => {
-                console.log(e);
-              });
-          }}
-        >
-          Get Image
-        </button>
-      </div>
-    );
-  }
-};
-```
-
-## List of Props
-
-| Props                              | Expected datatype | Default value         | Description                                                                                        |
-|------------------------------------| ----------------- | --------------------- |----------------------------------------------------------------------------------------------------|
-| width                              | PropTypes.string  | 100%                  | canvas width (em/rem/px)                                                                           |
-| height                             | PropTypes.string  | 100%                  | canvas width (em/rem/px)                                                                           |
-| id                                 | PropTypes.string  | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page)           |
-| className                          | PropTypes.string  | ""                    | Class for using with CSS selectors                                                                 |
-| strokeColor                        | PropTypes.string  | black                 | Pen color                                                                                          |
-| canvasColor                        | PropTypes.string  | white                 | canvas color (HTML colors)                                                                         |
-| backgroundImage                    | PropTypes.string  | ''                    | Set SVG background with image URL                                                                  |
-| exportWithBackgroundImage          | PropTypes.bool    | false                 | Keep background image on image/SVG export (on false, canvasColor will be set as background)        |
-| preserveBackgroundImageAspectRatio | PropTypes.string  | none                  | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
-| strokeWidth                        | PropTypes.number  | 4                     | Pen stroke size                                                                                    |
-| eraserWidth                        | PropTypes.number  | 8                     | Erase size                                                                                         |
-| allowOnlyPointerType               | PropTypes.string  | all                   | allow pointer type ("all"/"mouse"/"pen"/"touch")                                                   |
-| onChange                           | PropTypes.func    |                       | Returns the current sketch path in `CanvasPath` type on every path change                          |
-| onStroke                           | PropTypes.func    |                       | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event      |
-| style                              | PropTypes.object  | false                 | Add CSS styling as CSS-in-JS object                                                                |
-| svgStyle                           | PropTypes.object  | {}                    | Add CSS styling as CSS-in-JS object for the SVG                                                    |
-| withTimestamp                      | PropTypes.bool    | false                 | Add timestamp to individual strokes for measuring sketching time                                   |
-| readOnly                           | PropTypes.bool    | false                 | Disable drawing on the canvas (undo/redo, clear & reset will still work.)                          |
-
-Set SVG background using CSS [background][css-bg] value
-
-You can specify width and height values in em or rem. It fills the parent element space if width and height are not set
-
-<br />
-
-## Methods
-
-You can export the sketch as an image or as a svg
-
-_Use ref to access the element and call the following functions to export image_
-
-| Props                        | Expected datatype                                                                                                                                |
-| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| eraseMode(boolean)           | Switch to eraser mode by passing true. You can switch back to pen mode by passing false                                                          |
-| clearCanvas()                | Clears the canvas.                                                                                                                               |
-| resetCanvas()                | Resets the canvas and clears the undo/redo stack along with it.                                                                                  |
-| undo()                       | Undo the last action.                                                                                                                            |
-| redo()                       | Redo the previous action.                                                                                                                        |
-| exportImage(imageTypeString) | Accepts an image type as argument (`ExportImageType`) and returns a Promise which resolves to base64 data url of the sketch.                     |
-| exportSvg()                  | returns a Promise which resolves to an inline SVG element.                                                                                       |
-| exportPaths()                | returns a Promise which resolves to an instance of `CanvasPath`.                                                                                 |
-| loadPaths(CanvasPath)        | Accepts an `CanvasPath` exported from exportPaths() and loads it on the canvas.                                                                  |
-| getSketchingTime()           | returns a Promise which resolves the time that user sketched in the canvas (considers only when the user made the strokes or erased the strokes) |
-
-## Types
-
-```ts
-type ExportImageType = "jpeg" | "png";
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-interface CanvasPath {
-  paths: Point[];
-  strokeWidth: number;
-  strokeColor: string;
-  drawMode: boolean;
-  startTimestamp?: number;
-  endTimestamp?: number;
-}
-```
-
----
-
-## Thanks to
-
-- Philipp Spiess' [tutorial][based-on]
-- Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]
-
----
-
-[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
-[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
-[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
-[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
+1. Added viewbox magic
+2. Added getEl() to the imperative handle
+3. Added the stroke preview stuff in .7

packages/react-sketch-canvas/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-sketch-canvas",
-  "version": "7.0.0-next.4",
+  "name": "@xjamundx/react-sketch-canvas",
+  "version": "7.0.0-viewbox.7",
   "description": "react-sketch-canvas - Freehand vector drawing tool for React using SVG as canvas",
   "author": "Vinoth Pandian",
   "homepage": "https://vinoth.info/react-sketch-canvas",

packages/react-sketch-canvas/src/Canvas/index.tsx

@@ -69,6 +69,8 @@ export const Canvas = React.forwardRef<CanvasRef, CanvasProps>((props, ref) => {
     },
     svgStyle = {},
     withViewBox = false,
+    viewBoxHeight = 0,
+    viewBoxWidth = 0,
     readOnly = false,
   } = props;
 
@@ -78,30 +80,42 @@ export const Canvas = React.forwardRef<CanvasRef, CanvasProps>((props, ref) => {
   );
 
   // Converts mouse coordinates to relative coordinate based on the absolute position of svg
-  const getCoordinates = useCallback(
-    (pointerEvent: React.PointerEvent<HTMLDivElement>): Point => {
-      const boundingArea = canvasRef.current?.getBoundingClientRect();
-      canvasSizeRef.current = boundingArea
-        ? {
-            width: boundingArea.width,
-            height: boundingArea.height,
-          }
-        : null;
+  const getCoordinates = (
+    pointerEvent: React.PointerEvent<HTMLDivElement>,
+  ): Point => {
+    const boundingArea = canvasRef.current?.getBoundingClientRect();
+    canvasSizeRef.current = boundingArea
+      ? {
+          width: boundingArea.width,
+          height: boundingArea.height,
+        }
+      : null;
 
-      const scrollLeft = window.scrollX ?? 0;
-      const scrollTop = window.scrollY ?? 0;
+    const scrollLeft = window.scrollX ?? 0;
+    const scrollTop = window.scrollY ?? 0;
 
-      if (!boundingArea) {
-        return { x: 0, y: 0 };
-      }
+    if (!boundingArea) {
+      return { x: 0, y: 0 };
+    }
+
+    const coordinates = {
+      x: pointerEvent.pageX - boundingArea.left - scrollLeft,
+      y: pointerEvent.pageY - boundingArea.top - scrollTop,
+    };
 
-      return {
-        x: pointerEvent.pageX - boundingArea.left - scrollLeft,
-        y: pointerEvent.pageY - boundingArea.top - scrollTop,
+    if (props.withViewBox && props.viewBoxHeight && props.viewBoxWidth) {
+      const scaleX = boundingArea.width / props.viewBoxWidth;
+      const scaleY = boundingArea.height / props.viewBoxHeight;
+      // Height scaling factor
+      const viewBoxCoordinates = {
+        x: coordinates.x / scaleX,
+        y: coordinates.y / scaleY,
       };
-    },
-    [],
-  );
+      return viewBoxCoordinates;
+    } else {
+      return coordinates;
+    }
+  };
 
   /* Mouse Handlers - Mouse down, move and up */
 
@@ -234,6 +248,9 @@ export const Canvas = React.forwardRef<CanvasRef, CanvasProps>((props, ref) => {
           reject(e);
         }
       }),
+    getEl: (): HTMLDivElement | null => {
+      return canvasRef.current ?? null;
+    },
     exportSvg: (): Promise<string> =>
       new Promise<string>((resolve, reject) => {
         try {
@@ -327,9 +344,11 @@ release drawing even when point goes out of canvas */
         viewBox={
           // eslint-disable-next-line no-nested-ternary
           withViewBox
-            ? canvasSizeRef.current === null
-              ? undefined
-              : `0 0 ${canvasSizeRef.current.width} ${canvasSizeRef.current.height}`
+            ? viewBoxWidth && viewBoxHeight
+              ? `0 0 ${viewBoxWidth} ${viewBoxHeight}`
+              : canvasSizeRef.current !== null
+                ? `0 0 ${canvasSizeRef.current.width} ${canvasSizeRef.current.height}`
+                : undefined
             : undefined
         }
       >

packages/react-sketch-canvas/src/Canvas/types.ts

@@ -105,6 +105,13 @@ export interface CanvasProps {
    * @defaultValue false
    */
   withViewBox?: boolean;
+
+  /**
+   * When using the viewbox, we set the specific height and width
+   */
+  viewBoxWidth?: number;
+  viewBoxHeight?: number;
+
   /**
    * Width of the canvas.
    * @defaultValue 100%
@@ -140,4 +147,5 @@ export interface CanvasRef {
    * @returns A promise that resolves to a string of the SVG.
    */
   exportSvg: () => Promise<string>;
+  getEl: () => HTMLDivElement | null;
 }

packages/react-sketch-canvas/src/ReactSketchCanvas/index.tsx

@@ -102,6 +102,9 @@ export const ReactSketchCanvas = React.forwardRef<
       setCurrentPaths((paths) => [...paths, ...undoStack.slice(-1)]);
       setUndoStack((paths) => paths.slice(0, -1));
     },
+    getEl: (): HTMLDivElement | null => {
+      return svgCanvas.current?.getEl() ?? null;
+    },
     exportImage: (
       imageType: ExportImageType,
       options?: ExportImageOptions,
@@ -250,6 +253,8 @@ export const ReactSketchCanvas = React.forwardRef<
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
       withViewBox={withViewBox}
+      viewBoxWidth={props.viewBoxWidth}
+      viewBoxHeight={props.viewBoxHeight}
       readOnly={readOnly}
     />
   );