tbolis / react-sketch Goto Github PK

I have node 9.4 installed and failed to add the module.
The error message is

The engine "node" is incompatible with this module. Expected version ">= 6 <9.0.0"

Would there be an interest in having a polyline tool in react-sketch? It is something I can contribute if others are interested (using http://fabricjs.com/docs/fabric.Polyline.html).

Hi there,

Thanks a lot for this fantastic package. I would like to let my sketch stretch the whole height of the parent component. The width has this functionality and it would be nice if it was possible also for the height.
If this is already possible, then please let me know. I've filled in "100%" or "auto" for they height, but those are not working.

A nice feature would be to able to control the sketch-data from the parent-component/props. This way two persons can draw together by sharing and mutating external data for example.

Adding this to componentWillReceiveProps, could be a quick solution:

if(defaultData) {
            if ('json' === defaultDataType) {
                this.fromJSON(defaultData);
            }
            if ('url' === defaultDataType) {
                this.fromDataURL(defaultData);
            }
}

or maybe have another prop?

I want to build an app to paint outline images. These images have transparent background, and I want the outline to be above the pencil drawings. Is that possible?

Recently updated to 0.4.2, it removed my lib folder from node_modules/react-sketch and I can't get it back. I tried to downgrade to 0.4.0 and it still won't install a lib folder. I have duplicated this on two computers. Has anyone else seen this issue? Thanks

Hi Team,

We have an issue like we have to render number of images (base64) and Lines/polylines/circle together on the load of sketch field , how we can achieve this =as you have only one option we can load either Lines/Polylines/Cirlcels etc or Image using your defaultData and defaultDatatype props.

Can you please help

how to achieve the customized PopUp editor in Ag-Grid using ReactJs. I have used customized editor but I need a pop up my editor like modal.

Refer to the REPL for details https://stackblitz.com/edit/react-cfaavh?embed=1&file=index.js

Thanks for a great package! I have been using react-sketch for building image processing applications, such as http://dash-canvas.herokuapp.com/. My app is a component which has a SketchField child component, as in the demo for this repo.
After performing some image processing operation, I'm updating the image through props using this._sketch.addImg, but I also would like to keep the same zoom factor which was used just before firing the image processing operation. My problem is that I cannot make the canvas zoom just after addImg, in the same function: the image is updated, but no zoom is performed. Surprisingly, if I add a breakpoint between the two operations and I run the function in the debugger, the zoom operation is performed as expected. Here is the code of the
componentDidUpdate function (I checked that the problem is still there if the two operations -- addImg and zoom-- are in another function, no zoom is performed).

   componentDidUpdate(prevProps) {
   let sketch = this._sketch;
      if (
          (this.props.image_content !== prevProps.image_content)){
          let opts = {left:0,
                      top:0,
                      scale:this.props.scale}
          sketch.addImg(this.props.image_content, opts); // OK, the image updates
          sketch.zoom(this.props.zoom); // not OK, nothing happens, except in the debugger
      };
      };

Any idea of how I can force the zoom to be performed?

Hello and thanks for your work.

I would like to ask what is the suggested way of saving a drawn image, for example using a submit button.

Thank you.

Hi bro, is possible put collaborative mode, if two or more users enter then all view same canvas?

Upgraded to React 16, getting this error and react-sketch will not load. Any advice on this? Thanks!

I would like to copy the results of one canvas into this one. How can I achieve this. Which method on this.sketch do I have to call for this?

handleClickTool(event) {
    const value = event.target.innerText;
    this.setState({
      selectedTool: value
    });
  }
render() {
  console.log(this.state.selectedTool);
  const width = window.innerWidth;
  const height = window.innerHeight;
  return (
    <div>
      <ToolPanel handleClickTool={this.handleClickTool} selectedTool={this.state.selectedTool} />
      <SketchField
        ref={(c) => this._sketch = c} 
        style={{position: 'absolute'}}
        width={width} 
        height={height} 
        tool={this.state.selectedTool}
        color='black'
        lineWidth={3}
      />
    </div>
  );
}

Selected tool always has a valid string value but the tool will randomly end up being a pencil even when the valid tool is supplied.

Wouldn't it be cleaner for the sketch component to have a background prop instead of calling a method on the ref ?

I want to get mouse coordinates onMouseUp and onMouseDown events, so that i can replicate the design in another screen. @tbolis @karlvr @shafy @afilp

Hi,

is there currectly any way to use image as an canvas background?

I was using React-Sketch for an app that runs on Socket.io to transfer drawings on multiple devices at a time. Your library is a great one but it lacks such a simple function that when a user draws something on the whiteboard, some callback event must be triggered.

I tried using onChange() for this purpose but it gets a lot of calls at once, even when nothing is done on the whiteboard.

Hi! Is it possible to support multiple SketchField components?
Currently, it seems like the second one does not get initialized.

class SketchFieldDemo extends React.Component {
     render() {
        return (
            <div>
                 <SketchField width='1024px' 
                              height='768px' 
                              tool={Tools.Pencil} 
                              color='black'
                              lineWidth={3}/>
                 <SketchField width='1024px' 
                              height='768px' 
                              tool={Tools.Pencil} 
                              color='black'
                              lineWidth={3}/>
            </div>
        )
     }
}

Is there a technique I could use to keep the resolution of the original image in tact? Each time I draw on the image it appears to lose a bit of resolution. I am also using cropperjs for rotation and cropping and that control does maintain the resolution.

BTW: Thanks for all the great work on this. It is surprising that there are not more components available for image manipulation.

if (defaultData) { if ('json' === defaultDataType) { this.fromJSON(defaultData); } if ('url' === defaultDataType) { this.fromDataURL(defaultData); // there in no method named "fromDataURL"， is it "setBackgroundFromDataUrl"? } }

sorry , my English is poor.

Will you add fabric.group later?Select some object,and group them to use.Thank you!

Right now the text color doesn't change when I change Line Color or Fill Color in the example app. Is there any possibility I can do so?

hi thanks for the awesome package for sketch I wan to integrate undo/redo but I unable to know how can i do this.

While it works fine locally, when I try to deploy to production on Heroku it throws the following error:

PhantomJS not found on PATH
remote:        Phantom installation failed TypeError: Path must be a string. Received undefined

I use react-create-app and the https://github.com/mars/create-react-app-buildpack.git build pack on Heroku with yarn.

Any ideas?

Great tool, thanks.

How to access mouse events with current data.
Eg onMouseUp?

I wanted to have a resizable sketch field but when I resize it (change height and width props of SketchField) the canvas stays the same size. To make it work I had to manually trigger the resize event of window. Like this:

    componentDidUpdate: function () {
        var sketch = this.refs.sketch;
        var style = this.props.style;
        if (style.width !== sketch._canvas.clientWidth || style.height !== sketch._canvas.clientHeight) {
            window.dispatchEvent(new Event("resize"));
        }
    },

First of all, it is a great package in drawing in react.
I wonder how can I upload an image which is larger than the sketch area.
Let say I need to put a 600x400 image as a background of 300x300 area

I follow the example to use the code below to change background image:

reader.addEventListener(
'load',
() =>
sketch.setBackgroundFromDataUrl(reader.result, {
stretched: stretched,
stretchedX: stretchedX,
stretchedY: stretchedY,
originX: originX,
originY: originY,
}),
false,
);

I assume the stretched props will make something different. However, it didnt. Even the example in http://tbolis.github.io/showcase/react-sketch/ , I cannot see the whole image when a upload a large background image.
Please Help, Thanks

I suppose a string shouldn't fail ?

Hey there,

I just noticed when I was building my app to production mode that this module is not being uglified? Do you have any idea why this could be?

Is there a way to have animated gif images as sample background?

I need something like this to teach kids to draw letters on their device

regards

Hi, I'm using react-sketch as a dependency in my JS project (thanks for a really cool tool :-)). I tried updating to version 0.5.1, and now webpack crashes with the following error.

ERROR in ./node_modules/react-sketch/dist/index.js
Module not found: Error: Can't resolve 'jsdom' in '/home/emma/sandbox/dash-canvas/node_modules/react-sketch/dist'
 @ ./node_modules/react-sketch/dist/index.js 1:85-101
 @ ./src/lib/components/DashCanvas.react.js
 @ ./src/lib/index.js

If I add jsdom to the list of devdependencies in the package.json file, then there a lots of new "Module not found" error (for 'tls', 'fs', 'net'...).

I didn't have the problem with version 0.4.4.

Any ideas about what's going on? I'm not a Javascript expert, so any help will be very welcome...

Which methods to perform if I want to delete a selected item in the canvas. I can acces undo and redo, so I guess it should be possible to delete a selected item. But how?

This is working in firefox and chrome desktop & mac safari. But in surface pro, in chrome nothing is happening. Works fine in firefox. Is there any workaround for this?

It will be very helpful if there was an eraser tool.

First of all, thank you for this library.

I'm just wondering if I can attach an event listener for when an object is added, updated, or deleted from the canvas? I'm using this library to create a collaborative whiteboard app, so I'll need to listen for those events.

I created a fork here: https://github.com/anchetaWern/react-sketch But I don't really know how to compile so I couldn't get the changes I've made to work.

Hi, when do you plan of releasing a new version?

imageFormat add image url can't use .why?

Hey there! Awesome library you got here. I'm trying to use this library on large scale (5000px by 5000px) but I've found the performance to be lacking for a production release. Do you have any tips on increasing the performance?

Thanks in advance!

Hi,

I've install the npm package directly and have my canvas display perfectly.

I'd like to display the color swatch ont eh side a bit like the demo ( but only need the color swatches).

How is this possible ?

Many thanks

Hi,
I am having an issue.
TypeError: __webpack_require__(...).jsdom is not a function

I got a problem when I draw a line. The line will become blur just like the image below. It will not appear everytime but it easy to reproduce when drawing a line which is not horizontal or vertical. Anyone faced this issue and have a fix on it ?

I am currently trying to resolve an issue where react-sketch causes jsdom to be included in my web app's webpack bundle. I can of course ignore jsdom using the webpack.IgnorePlugin however react-sketch also requires jsdom at runtime.

I am going to investigate this further.

DependencyNotFoundError
Could not find dependency: 'react-hot-loader' relative to '/node_modules/react-sketch/dist/index.js'
I get this error when I used the SketchField component in my React app

I have recreated the error here in CodeSandbox

https://codesandbox.io/s/nr969jxy6l

Thanks for a great package! Is there a way to resize automatically the canvas when a background image is loaded, so that the dimensions of the canvas (width and height) match the ones of the background image? One solution I can see is to retrieve the content using the toJSON method, and then accessing the width and height of the background image. Or is there another recommended way to do this?

As soon as you add an image to the canvas, download stops working

Hi. Thank you for you work

I dont't know how to using react-sketch on mobile platform, or it have support mobile ?

Adding Text to the Canvas