pwambach / angular-canvas-painter

Angular.js directive to paint on a canvas on desktop or touch devices
MIT License
116 stars 35 forks source link

is possible to know when the canvas has been touched? #7

Open fabersheep opened 9 years ago

fabersheep commented 9 years ago

Hello, first of all thank you for this directive, you spared me a lot of troubles and it's very well done.

In my app, I have implemented the functionality of persisting the image (via toDataURL) server side. To do this I have a button that "confirms" the modifications done to the canvas and freeze them in the exported image.

I think that would be nice to have a variable that exposes if the canvas has been ever touched, so I can ng-enable my button to this var. Or better to pass an event to the directive that is fired every time a modification is done in the canvas (e.g. in the copyTmpImage function, if I understood well how the directive works).

What do you think about this? I can try to implement it if you're interested, even if I'm not very good with directives yet.

Thanks again Marco

pwambach commented 9 years ago

Hey, thanks for the feedback!

You can check if the canvas was touched by using the undo feature. Just enable it with undo: truein the options. It will expose a version property which is greater than 0 if the user draws something.

in template:

<div pw-canvas options="{undo: true, width: 400, height: 300, color: '#ff0'}" version="model.version"></div>

in controller:

$scope.model = {}

$scope.$watch('model.version', function(newVal){
  if(newVal && newVal > 0){
    //canvas has been touched - do stuff here
  }
});

This would be a way how it could work with the current version. But you are right, the best way would be if the directive exposes directly if it has been touched like all the other input directives do by using ngModel and the $dirty property. I think the whole directive should work like the other inpus and implement the ngModelController. Besides this has the advantage that the drawed image can be read/set via scope and the ng-model attribute. But i think this is a bigger change. Feel free to submit a PR if you are interested. I hope i can also have a look at it in the next days.

Cheers Phil

sebastientromp commented 9 years ago

I'd actually be very interested in being able to get/set the drawed image via scope, so +1 on this :)