avokicchi / jquery-drawr Goto Github PK

If we zoom out in mobile device and adjust image using mdi-cursor-move Tool from tool bar.
Image is disappear from editor.
Can any please help on this

Steps to reproduce, draw some, then draw with marker tool, then undo, then draw some, then undo - it seems to undo multiple steps at once.

testing needed with force values on iPad - oddly enough the fairphone 3 reports working "force" values as well, but they are unusably low. maybe this is standard? in that case I can multiply and implement.

//TODO: add support for 3D touch of apple and other devices (oddly enough, the fairphone 3 seems to support this) /*if(typeof event.originalEvent.touches[0].force!=="undefined" && force > 0){ this.pen_pressure=true;//this works, but at least on fairphone, the values are too low. testing needed on iOS devices. }*/

Implement faux scrolling with css translations.

1. its faster
2. it allows you to scroll outside of the parent area which any decent drawing application lets you do
3. lets us implement things like pinch to zoom and mousewheel scrolling easier
   here's an example http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Support galaxy note pencil

canvas outlines are misplaced when running canvas in modal.
within a table this issue is even worse.

the features, options, etc.

• Toolwindows are not showing up when running canvas in modal
• mouse positioning is wrong in modal
• helper lines are wrong in modal
• drawing offsets are calculated wrong in modal
• everything is wrong in modal

Just a matter of drawing canvasses on top of eachother. maybe use offscreen canvas.
Could even implement a couple of blend modes like lighten, multiply, darken using whatever we can support with globalCompositeOperation.
Given that we're talking about webbased stuff and mobile support, maybe have a sanity limit of like three layers max.

It seems drawEnd is never called, or at least plugin.record_undo_entry is never reached. some remote debugging is needed.

should unbind events, remove components, undo css changes, etc

Hey, I'm trying to use this app in a modal on my page but when I do it, it definitely goes crazy with where I'm clicking and where it's drawing. It is something that would match my expectations so if there's any solution that I can apply, I want to know.

There are left and top parameters for many things in code but not every one of them works okay after I change their left-top value to x-left which left in that line is the left offset of my modal body. Pencil works fine now but it goes crazy when I try to use zoom.

Helpp please

Events are currently not namespaced, that's sloppy

Drawing positions of marker-like tools are off when running canvas in modal

On desktop it works. On mobile, it works too, but for every 10 pixels scrolled vertically, only 5 seem to happen. Might have to do with cancelled touchmove events and the odd behaviour of rubberbanding on the whole page. maybe I can catch that with document.body.scrollTop and use that as adjustment or something, if that is the case. testing is needed.

zip file and website files on the package is kinda dumb and takes unneeded space. instead, create a tests folder, make some seperate demos in there for developers

can anybody tell me how to clear whole canvas drawings without calling destroy in function?!

Hello!
First of all, congratulations @lieuweprins for the pluguin, it is awesome and help me a lot.
I used it in a web aplication that I need it can be used by mobile devices. The problem is that seems the plugin is blocking the links and the button of the page... It is rare, you can see it by watching your own web demo (https://rawrfl.es/jquery-drawr/ ) in a mobile device or by toogle device toolbar inside de F12 mode of Chrome. Click in "Download" or "View on github" or the links in the page and you will see it.
Do you know why is this happening?

Thanks you in advance!

The button on all the examples and the website don't work.

If you scroll the text placement indictator doesnt move along. to fix this, i need a new brush event for when the scroll pos changes. and hide the text thinger on scroll.

it initializes as black.

the fake scrollbars are incorrect in height and position, and completely break when you zoom.

take the first demo on https://rawrfl.es/jquery-drawr/ . it keeps drawing on top of the active canvas without clearing it first. because of the clear on init setting being active.

You could use this to create simple networking functionality, I don't know, seems useful.

Hi,

Would be really nice to see this lib on npm.

An actual decent color picker is needed. Since I don't wanna include another library because of where I'm using this library, I'll have to make something myself.
Preferrably something like this: https://i.imgur.com/qTMpBqt.png

implement several things (using dropdown)

canvas options: flipx, flipy, rotate, adjust size, crop, background (drop alpha channel)
effects: blur, sepia, grayscale
tools: flood fill, smudge, redo
polygon/rectangular selection

Maybe adjust the default to only have a very small subset of these enabled.

right click or multi touch drag should move canvas.

Ignore multitouch when drawing with pen, if it is possible to detect the difference between a wrist touch/pencil draw.
Some pointers here. https://stackoverflow.com/questions/34986373/javascript-touch-event-distinguishing-finger-vs-apple-pencil

reproduce, draw 6 text strings, press undo once, they all dissapear.

a three item undo buffer should be fine for most purposes

drawing is kinda messed up due to pressure value. It's like that phone always pretends to be a stylus with low pressure. not sure. investigate.

Steps to reproduce a bug:

1. Open https://rawrfl.es/jquery-drawr/
2. In the first example draw line with pencil, pen or brush.
3. Select eraser and erase part of the line you drew in previous step.
4. Select filled square tool and draw a rectangle into canvas (partly overlapping the line) .

Expected result:

Filled (black) square should be visible in the canvas.

Actual result:

No filled square is visible after your release mouse. Instead, filled square tool functions as an eraser.

Using https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent ? Maybe? Testing with my tablets is needed.

Hi,
Hope you are doing well.
I want image rotate tool in our plugin

for others and my future self's sanity

if you scribble with pen, then scribble some with touch, it ignores the first few as expected, but then draws a straight line from the last pencil position to the new touch position.

Ability to maximize to fullscreen (using a tool - so optional)

zooming needs to adjust the scroll position so you keep looking at the same section of the canvas at least on the top left, every drawing program does that.

inactive/outside drawing bounds area should be gray, probably. on small images especially it is unclear where the bounds are.

Like, effects, which would then offer: lighen, grayscale, etc

Pinch to zoom on mobile, dragging with two fingers

Since last update all positioning might be right, but if you scroll to the right, it doesn't let you start draw events for some reason.
will fix this later today, should be simple. In order to debug this better, make some indicator that the drawing area is active. change the grid lines color to highlighted, maybe?

even when drawing, the cursor seems struck on move

All the TOOL items are buttons and the same have been creating an issue.
Say I have a field marked as 'required'. If I choose/click any of the TOOL, the browser pops up the required message for that field.

To easier debug modal issues

Ability to pass an array of tools, as well as having a default toolset rather than loading them automatically
additionally, making ALL tool buttons configurable, currently zoom and undo are not removable
this requires updating all examples

I was trying to implement it but found this bug.
My HTML structure is tables based and DIVs have been nested within TDs.
Now say I am trying to implement this at 3rd row i.e 3rd TR.
First, 2 rows have already taken some height, assume some 400px!
So, this drawing tool starts from 400px, and there I found the issue.
I have managed to set the CANVAS, TOOLs everything, but once I tried drawing something, that didn't happen!
So, I started scratching the reason and I found the mouse events have been starting from 0,0 of the parent instead of 400,0. Or better to say, mouse events don't work at the 3rd TR or the CANVAS I had put inside.
Let me know if it's not clear!