I can't get you component to work

[FlyingApe]

He I'm interrested in trying out this component you've build but i'm having trouble getting it to work. I'm setting it up like you're saying in the README file. My editor tells me this statement "import Canvas from 'react-canvas-polygons';" has a problem:

module "d:/14.ReactDev/draw-testing/draw-test1/node_modules/react-canvas-polygons/build/index"
Could not find a declaration file for module 'react-canvas-polygons'. 'd:/14.ReactDev/draw-testing/draw-test1/node_modules/react-canvas-polygons/build/index.js' implicitly has an 'any' type.
Try npm install @types/react-canvas-polygons if it exists or add a new declaration (.d.ts) file containing declare module 'react-canvas-polygons';ts(7016)
No quick fixes available

I'm unable to fix this.

[FlyingApe]

So just an update and clarification. It does show me a canvas with the background image but I can't draw on it. Accourding to your readme I should be able to draw lines on the canvas with the following code:

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import type from 'prop-types';
import { CircularProgress } from '@material-ui/core';
import Canvas from 'react-canvas-polygons';

class DrawCanvas extends React.PureComponent {

    handleCleanCanva = () => this.canva.cleanCanvas();

    render() {
        const { imageInfo } = this.props;
        const imageInfoLength = Object.keys(imageInfo).length === 0;

        return(
            <Suspense fallback={<CircularProgress color="secondary" />}>
                <button variant="outlined" style={{ marginBottom: '20px' }}
                    onClick={this.handleCleanCanva}
                >
                    Clean Canvas
                </button>
                {imageInfoLength &&
                    <CircularProgress color="secondary" />
                }
                <Canvas
                    ref={canva => this.canva = canva}
                    imgSrc={imageInfo.url}
                    height={imageInfo.height}
                    width={imageInfo.width}
                />
            </Suspense>
        );
    }
}

export default DrawCanvas;

DrawCanvas.propTypes = {
    tool: type.string,
    imageInfo: type.object,
};

var test_image = {url:'https://wikitravel.org/upload/shared/thumb/c/cd/Map_of_East_Asia.png/500px-Map_of_East_Asia.png', width:500, height:300};

ReactDOM.render(<DrawCanvas imageInfo={test_image} />, document.getElementById('root'));

[FlyingApe]

Oke so I did get te storybook version of your component to run. I needed a component that could draw polygons over an image. I will cut the code down to that specific requirement and build other functionality from there.

[edisonmoy]

@FlyingApe I am using the same code as your snippet above. How were you able to draw lines on the canvas? For me, the code compiles properly but it does not allow me to draw any lines or polygons on the canvas.

[riccardolocci]

Hi @edisonmoy, I'm not sure if you still need help on this, but I was able to draw the polygons by wrapping the example in the README into the Input component that you can find in dev/src/stories/input.js as @FlyingApe previously wrote.

Changing the example like this should do the trick:

//components/DrawCanvas.js
import React, { Suspense } from 'react';
import type from 'prop-types';
import { CircularProgress } from '@material-ui/core';
import Canvas from 'react-canvas-polygons';

import Input from './input';
 
class DrawCanvas extends React.PureComponent {
 
    handleCleanCanva = () => this.canva.cleanCanvas();
 
    render() {
        const { imageInfo, initialData } = this.props;
        const imageInfoLength = Object.keys(imageInfo).length === 0;
 
        return(
            <Suspense fallback={<CircularProgress color="secondary" />}>
                <button variant="outlined" style={{ marginBottom: '20px' }}
                    onClick={this.handleCleanCanva}
                >
                    Clean Canvas
                </button>
                {imageInfoLength &&
                    <CircularProgress color="secondary" />
                }
                <Input render={ state => (
                    <Canvas
                        ref={canva => this.canva = canva}
                        height={240}
                        width={300}
                        imgSrc="https://ric-bucket.s3.amazonaws.com/device_5c05ee0cb669e165879e622a/sensorview.jpg"
                        brushSize={Number(state.brush)}
                        color={state.color}
                        tool={state.tool}
                        onDataUpdate={(data) => console.log('data updates: ', data)}
                        onFinishDraw={() => console.log('finish draw')}
                        initialData={initialData}
                    />
                )} />
            </Suspense>
        );
    }
}
export default DrawCanvas;
DrawCanvas.propTypes = {
    tool: type.string,
    imageInfo: type.object,
};

[kirill-konshin]

I've noticed that component starts to work when tool is changed. Like so:

import React, { useEffect, useState } from "react";
import Canvas from "react-canvas-polygons";

export const DrawCanvas = React.forwardRef(({ imageInfo }: any, ref) => {
  const [tool, setTool] = useState("Line");
  useEffect(() => {
    const timeout = setTimeout(() => setTool("Polygon"), 1000);
    return () => clearTimeout(timeout);
  }, []);
  return (
    <Canvas
      ref={ref}
      imgSrc="https://images.globalindustrial.com/images/enlarge/695511.jpg?t=1628284125430"
      height={800}
      width={800}
      tool={tool}
      onCompleteDraw={console.log.bind(console)}
    />
  );
});

But surprisingly, the onCompleteDraw (doc has it this way, but I can see that in the code it's onFinishDraw) is never called.

[love4bugs]

As suggested by @kirill-konshin tool is empty on mount. We have to update the tool after the intial rendering, then only we can start drawing. And also after drawing an Object, tool is set to null

[atikaakmal]

Hi @kirill-konshin @love4bugs,

I am trying to place the clean button but when I clean it I am getting the following error. Could you please help me wher I am doing mistakes.

My current code:
`import React, { useEffect, useState } from "react";
import Canvas from "react-canvas-polygons";

export const Draw2 = React.forwardRef(({ imageInfo }, ref) => {
const [tool, setTool] = useState("Line");

useEffect(() => {
    const timeout = setTimeout(() => setTool("Polygon"), 1000);
    return () => clearTimeout(timeout);
}, []);

const handleCleanCanva = () => {
    this.ref.cleanCanvas();
}
return (
    <div>
        <Canvas
            ref={ref}
            imgSrc="https://images.globalindustrial.com/images/enlarge/695511.jpg?t=1628284125430"
            height={800}
            width={800}
            tool={tool}
            onCompleteDraw={console.log.bind(console)}
            canUndo={true}
        />
        <button variant="outlined" style={{ marginBottom: '20px' }}
                onClick={handleCleanCanva}>
            Clean Canvas
        </button>
    </div>
);

});
`

Thank you

[RTae]

@atikaakmal It's too late for you. I wrote an example code for everyone who doesn't understand how this library work.
Code sandbox

@aeciolevy Your library works very well on my project. In my opinion you should rewrite your document and give more example

[aeciolevy]

I am so sorry guys, I have sent add a filter to GitHub e-mails in Gmail and I have never seen those issues.
@FlyingApe I am so sorry. I will definitely update the docs and probably reference @RTae (thanks a lot) code sandbox or enhance that.
This weekend I will revisit this project and catch up.