Add DRAG mode, this let you move object with the handlers and nothing else (ok) #371

themacboy · 2019-07-31T21:55:49Z

New feature, non fixes.

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updates
@mention the original creator of the issue in a comment below for help or for a review

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

themacboy · 2019-07-31T21:58:49Z

With this enhancement you can set objects to only drag by default.
It works great if you are placing little objects in the map, handlers help a lot.

Sorry to duplicate the pull (last one can be removed, not sure how from my side). This push looks more correct and without conflicts.

sashadev-sky · 2019-08-01T02:51:23Z

@themacboy woah I love the visual its kind of stunning! Ill pull this right now!

sashadev-sky · 2019-08-01T03:20:59Z

@themacboy so i've attempted to make this a mode before too, but heres where I got stuck: each mode does something the others can't, but drag is available in every mode. So it doesn't fit the category right?

If we wanted to make it a mode, it would only make sense to disable the ability to drag in every other mode right? I personally like this idea, I have wanted to separate out all the modes from the toolbar api completely, and maybe make each mode accessible via a button on the top of the screen or something. Our react offshoot does this well: https://github.com/ChrisLowe-Takor/react-leaflet-distortable-imageoverlay

Let me know your thoughts on this!

themacboy · 2019-08-01T12:35:07Z

Sorry my english is realy poor and not sdure to understand all your comment, but i think the next image can justify the interest of drag mode:

Try to drag that mini object hahaha that's the problem I found while doing my sketch of car accident. Im in max zoom, and some object are incredible small and I dont know how to drag it to correct position.

That's help to make my understand better? I hope so, my english is very poor.

sashadev-sky · 2019-08-01T18:59:08Z

no problem! I understand what you are saying completely.

I was basically saying I agree there should be a drag mode, but its a little complicated, because currently we can drag in every mode. So if we made it its own mode, then it would only make sense to disable dragging if you're in rotate, distort, mode etc.

I am ok with this idea. We are a small group of contributors so we make our decisions based on if everyone agrees.

any thoughts here @jywarren @rexagod ?

themacboy · 2019-08-01T23:07:24Z

I think it is good to have a simply drag mode, acording your thoughts we can express your idea in other way, more near to my concept :

If we have a full set of modes, then we miss a NONE mode hehehe, and thats my drag mode hehehe.

rexagod · 2019-08-02T14:49:39Z

This could be a big leap for any newcomer's familiarity with the toolbar, but I don't see it as not implementable. If anything, this actually makes sense, and I can imagine a number of scenarios we'll use this in.

Also, the "drag" in "all" buttons will now be replaced by the lock functionality, right @themacboy?

@sashadev-sky I'm okay with this, but otherwise is fine too since I can understand the repeated drag enables the user will have to press every time they want to drag an image. Thanks!

jywarren · 2019-08-14T19:16:25Z

Aha, so this would be a "Drag by handles" mode, perhaps, to make it more clear? I think this may be preferable to changing all other modes. That way, everything else stays as it is, but we have a new tool called "DragByHandles" (so named to distinguish it from the existing default behavior of dragging the image itself). This new tool would be off/invisible by default, like the separate Rotate and Scale tools. But for use cases like @themacboy's, it could be enabled.

How does that sound?

jywarren · 2019-08-14T19:17:14Z

I think such a new tool (and not changing any other behaviors) would be the least disruptive to the library, you know?

themacboy · 2019-08-26T06:42:34Z

@jywarren, Im with you.

imo it is more usefull (and easy to manage) as a separate mode and not change any other.

themacboy · 2019-08-29T08:39:17Z

(sorry for my low english skill).

I like to know if there is something else I can do or is needed to do in order to incorporate that change to general code.

Otherwise I will do a separate script to modify original code in runtime, due I really need it in my project.

Thanks in advance

jywarren · 2019-08-30T17:17:03Z

Can you take a look at how the current tools are implemented, and perhaps try making a copy of one in order to add your "DragOnly" tool, in a PR? We can then help you get that running smoothly, i think!

…

On Thu, Aug 29, 2019 at 4:39 AM themacboy ***@***.***> wrote: (sorry for my low english skill). I like to know if there is something else I can do or is needed to do in order to incorporate that change to general code. Otherwise I will do a separate script to modify original code in runtime, due I really need it in my project. Thanks in advance — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#371?email_source=notifications&email_token=AAAF6J6BPNHPICXQR7SALYDQG6DLLA5CNFSM4IIK4ICKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5NXFIA#issuecomment-526086816>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6JZYWGWO7NBAFKJXKNTQG6DLLANCNFSM4IIK4ICA> .

themacboy · 2019-09-04T03:45:14Z

Can you take a look at how the current tools are implemented, and perhaps try making a copy of one in order to add your "DragOnly" tool, in a PR? We can then help you get that running smoothly, i think!

I think that now is all done.
I hope everything is correct and you are satisfied

themacboy · 2019-09-12T07:17:55Z

Here an advancement how my project is working. ;)

This is a imaginary sketch of a traffic accident, where a car run over a person and stop, then a truck crash with the car.

I hope you enjoy it !

sashadev-sky · 2019-09-15T12:32:48Z

@themacboy this visuals are amazing like the way you designed it woah

I merged huge pull request #393 I think you saw but do not worry I will take a look at this today and we will get this implemented!!

sashadev-sky · 2019-09-15T13:45:54Z

@themacboy okay its rebased! Sorry there are commits all over the place... you were 46 commits behind main! Luckily nothing has changed as far as handles go. Now you just need to add your handler as a toolbar action. that is what you wanted right?

first things first pick an icon! I will explain from there. I have been meaning to add a demo for how to add a custom tb action

sashadev-sky · 2019-09-15T13:50:14Z

I see ur mode works perfectly already if you set it as mode: drag option on initialization. where did you want to go from here?

Some issues you face while it is not a toolbar icon is that you cannot access it again if you switch to another mode at any point

sashadev-sky · 2019-09-15T14:10:52Z

@themacboy oh ive got an idea and I think I understand what we are doing here. you want this to be the resting state of the image, as in technically not a mode. So it doesn't need a button. Instead I can add code to the toolbar buttons to toggle out of each mode as well, and into the image's default "drag" state.

For our purposes we don't want a resting state with green star handles its a little confusing, but I can definitely help you finish it and when its done build a mode API around it to allow us to set it as non-default handle, similar to what we do with toolbar actions. It will be documented in README as addon :)

I think I was already starting to try to do this anyways in #365

themacboy · 2019-09-16T05:12:38Z

I see ur mode works perfectly already if you set it as mode: drag option on initialization. where did you want to go from here?
* Some issues you face while it is not a toolbar icon is that you cannot access it again if you switch to another mode at any point

Hello Sahsa, I tryed to add the toolbar action in you Hotkeys branch, I love the changes you made there. Can you check if all is correct there? Or is needed I add this to this old branch?

themacboy · 2019-09-16T05:29:39Z

Here and example how I do my accident skecth:

Here you can see how I draw and accident sketch, step by step, it is a few confusing due there are usually a lot of elements, hidden handlers and other hehehe.

As you see I only let rotation on the elements, due all other is in the correct scale, and when I set the letters I only let people to drag it (no rotation needed here).

I hope that show you what Im doing, better than my words hehehe

Is incredible what Leaflet and DistortableImage let me do !
Thanks and thanks for your patiente with me hehehe

.

sashadev-sky · 2019-09-16T07:42:29Z

@themacboy I rebased you to 0.8.0, then i noticed I made a small bug with the lock, export and delete actions, so I just published to 0.8.1. Sorry for the bug! I will rebase you again if you dont :) also you need to add it here! the hotkeys branch is merged already

themacboy · 2019-09-16T15:16:44Z

@themacboy I rebased you to 0.8.0, then i noticed I made a small bug with the lock, export and delete actions, so I just published to 0.8.1. Sorry for the bug! I will rebase you again if you dont :) also you need to add it here! the hotkeys branch is merged already

I have noticed when I test after rebase hehehe but thought that was and error in my code hahaha

Now I see there is a conflict with:
src/mapmixins/BoxSelector.js
but I don't have acces to resolve the conflict, and not sure what I can do to resolve that conflict or how to rebase in my side (I still dont understand git tools :) )

themacboy · 2019-09-19T08:57:03Z

Sorry guys, Im still confused with GIT functions and broke a lot of thing trying to merge/rebase hahaha now I will try make it work again

---> 2 hours later

Just added Action to toolbar. Looks working fine ! Yeah !!!

Code is more readeable with your last changes !!! Thx

themacboy · 2019-09-19T09:12:12Z

ummm rotate is not working?

I get the message:

"MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead."

I supose thats the bug, you comment before.

sashadev-sky · 2019-09-21T03:57:23Z

@themacboy so happy its more readable!! I will pull this PR right now.

I don't remember seeing this deprecation message, but a deprecation usually doesn't just break something. I will check it out. What version of Leaflet of using? I don't see that code in their source code for the latest version

sashadev-sky · 2019-09-21T04:55:55Z

@themacboy this is really awesome!! After trying it out it made sense to me that it is different from other modes in that its the only marker that we can drag, so I think lets add it as a default action?
@jywarren Thinking potentially we can use it to easily implement autoPan and other cool ideas will come out of it!

Not seeing any issues with rotate -- but I saw from a previous PR that I left the class name of the _freeRotateHandles as L.RotateScaleHandle so if you were trying to call L.FreeRotateHandle in your own code it didn't exist. I updated this here!
Besides that my commit is just rebasing, linting fixes, also I made your tool first in the toolbar and by default there. -- sorry turned into a million commits the rebase was v hard
Also instead of updating each corner with setCorner I refactored so it used setCorners because then we don't have to run the update logic 4x. Is this ok or was there a reason for doing 1 corner at a time?

sashadev-sky · 2019-09-21T04:58:35Z

Also question where are all of the marker handle icons coming from? I've never added one myself and still don't know

else (ok)

sashadev-sky · 2019-09-22T07:51:01Z

@themacboy ok this is all cleaned up! Lets go over a few small things that need to be done before merge?

themacboy · 2019-09-23T06:25:42Z

excuse ... I'm not sure how this works

Do you think that we have made all the work relative to drag mode? or there is neede to do something else?

If all is done, we can close the pull request? Sorry sorry sorry Im very noob in all relative to Git and cooperative coding.

sashadev-sky · 2019-09-23T10:51:54Z

@themacboy haha its ok u did an awesome job with this PR! It had like 200 commits on it from other commits on the repo I had to rebase it. In order to move forward with my changes you have to
git pull origin modes to get all of the updates before making your own changes after

Here are the things we must fix first:

run git pull origin modes first!
gitignore should not have ./projects in it this is not on of our files - when you run git pull origin modes just immediately do a force push back to get rid of it since I had removed it in a previous PR already (git push -f origin modes)
you added the icon correctly code-wise but the icon is not present in the assets folder - the icon there was a different one. Please try readding the svg file to svg folder, and running grunt icons so that it also appears in svg-min and in the symbol folder.

After these 2 things are complete I will make a final push updating the documentation and bumping the version number of LDI :)

…leImage.git into modes

themacboy · 2019-09-24T05:36:58Z

Ok Sahs, trying to do ! but ...

A din't found force push in Eclipse (my current ID). Im pretty sure that option is there, but I must learn where. Then I pushed a neew commint removing "/.project" from gitignore (sorry my fault)

Now just added svg drag icon in svg folder, but when trying to run grunt icons I always receive grunt-cli is not installed locally (and is there for sure, i have checked.

Currently I have reinstalled a lot of times grunt system, but not succes, Im reading about this problem in other forums, will see If i can correct it.
Just checked that grunt-svgmin is installed (and re-installed it too hehehe). But problem is still there

At the moment I do a commint with the drag icon in svg.

themacboy · 2019-09-24T07:06:49Z

Ok, finally i run manually grunt-svg_sprite to get file added to sprite system.

And grunt-svgmin still not working, then I created the minified version using svgo with same params used in icons task.

I hope thats looks ok now hehehe

p.d: It was a hard learning for me hahaha fortunatelly now I understand a bit more how all that works.

sashadev-sky

@themacboy you did $ npm install -g grunt-cli and didn't work for you?` but yes that is fine, whatever works for you!!

Ok so I checked out the files that shouldn't be there for you. In case useful for you again later, to checkout a file you accidentally committed, you do, for ex with .project:

$ git rm --cached .project
$ gcm "Checkout .project"
$ git push origin modes

This is ready for merge now :) I'll just document in a follow-up honestly. Bumped to 0.8.5 and merging to main! and tomorrow if I get to update the docs ill publish to npm

Thank you for the awesome contribution

welcome · 2019-09-26T09:17:11Z

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will likely be published to https://mapknitter.org in the next few days.
In the meantime, can you tell us your Twitter handle so we can thank you properly?
Now that you've completed this, you can help someone else take their first step!
See: Public Lab's coding community!

themacboy · 2019-09-26T09:41:02Z

A lot of thanks Sasha !!!

Im old but im trying to learning fast, and very fast with all you help and your personal example !

Very happy !!!

sashadev-sky added the needs-review label Sep 12, 2019

sashadev-sky force-pushed the modes branch from fa080f6 to e181bd5 Compare September 15, 2019 13:09

Add DRAG mode, this let you move object with the handlers and nothing

819d5f3

else (ok)

themacboy and others added 7 commits September 21, 2019 03:03

resolve conflict 3

bf205e1

resolve conflict 4

f2710fd

resolve conflict 5

c0b9f41

resolve conflit 6

eeda606

resolve conflict 7

d6635e9

delete

baa0618

clean branch commits parse assets

788bf1c

sashadev-sky force-pushed the modes branch from 6e06ce6 to 788bf1c Compare September 21, 2019 07:29

sashadev-sky added 2 commits September 21, 2019 03:34

finish rebase

9fe4171

checkout accidental files

d42d699

sashadev-sky force-pushed the modes branch from 72b6f90 to d42d699 Compare September 21, 2019 08:29

checkout extra file

525e099

gitignore update

0c71344

themacboy added 2 commits September 24, 2019 05:59

Merge branch 'main' of https://github.com/publiclab/Leaflet.Distortab…

c0ce517

…leImage.git into modes

remove .project

98e82cc

themacboy added 2 commits September 24, 2019 07:37

add Drag icon in assets/icons/svgdrag.svg

55e54f5

add drag.svg to assets/icon/svg-min and addre drag ocon to sprite system

c90b8cc

themacboy and others added 3 commits September 24, 2019 09:14

correction on sprite creation

8c99254

bump version

801869f

Checkout .project

7d79dd3

sashadev-sky approved these changes Sep 26, 2019

View reviewed changes

sashadev-sky merged commit 8aa8d8b into publiclab:main Sep 26, 2019

sashadev-sky mentioned this pull request Sep 26, 2019

Add DRAG mode, this let you move object with the handlers and nothing else. #369

Closed

5 tasks

Add DRAG mode, this let you move object with the handlers and nothing else (ok) #371

Add DRAG mode, this let you move object with the handlers and nothing else (ok) #371

Conversation

themacboy commented Jul 31, 2019 • edited Loading

themacboy commented Jul 31, 2019

sashadev-sky commented Aug 1, 2019

sashadev-sky commented Aug 1, 2019

themacboy commented Aug 1, 2019

sashadev-sky commented Aug 1, 2019

themacboy commented Aug 1, 2019 • edited Loading

rexagod commented Aug 2, 2019 • edited Loading

jywarren commented Aug 14, 2019

jywarren commented Aug 14, 2019

themacboy commented Aug 26, 2019

themacboy commented Aug 29, 2019

jywarren commented Aug 30, 2019 via email

themacboy commented Sep 4, 2019 • edited Loading

themacboy commented Sep 12, 2019 • edited Loading

sashadev-sky commented Sep 15, 2019

sashadev-sky commented Sep 15, 2019

sashadev-sky commented Sep 15, 2019 • edited Loading

sashadev-sky commented Sep 15, 2019

themacboy commented Sep 16, 2019

themacboy commented Sep 16, 2019 • edited Loading

sashadev-sky commented Sep 16, 2019

themacboy commented Sep 16, 2019 • edited Loading

themacboy commented Sep 19, 2019 • edited Loading

themacboy commented Sep 19, 2019 • edited Loading

sashadev-sky commented Sep 21, 2019

sashadev-sky commented Sep 21, 2019 • edited Loading

sashadev-sky commented Sep 21, 2019

sashadev-sky commented Sep 22, 2019

themacboy commented Sep 23, 2019 • edited Loading

sashadev-sky commented Sep 23, 2019

themacboy commented Sep 24, 2019 • edited Loading

themacboy commented Sep 24, 2019 • edited Loading

sashadev-sky left a comment

Choose a reason for hiding this comment

welcome bot commented Sep 26, 2019

themacboy commented Sep 26, 2019

themacboy commented Jul 31, 2019 •

edited

Loading

themacboy commented Aug 1, 2019 •

edited

Loading

rexagod commented Aug 2, 2019 •

edited

Loading

themacboy commented Sep 4, 2019 •

edited

Loading

themacboy commented Sep 12, 2019 •

edited

Loading

sashadev-sky commented Sep 15, 2019 •

edited

Loading

themacboy commented Sep 16, 2019 •

edited

Loading

themacboy commented Sep 16, 2019 •

edited

Loading

themacboy commented Sep 19, 2019 •

edited

Loading

themacboy commented Sep 19, 2019 •

edited

Loading

sashadev-sky commented Sep 21, 2019 •

edited

Loading

themacboy commented Sep 23, 2019 •

edited

Loading

themacboy commented Sep 24, 2019 •

edited

Loading

themacboy commented Sep 24, 2019 •

edited

Loading