isolate all tools into separate .js files

[katjaq]

What is the current behavior?

Currently, all of MicroDraw's tools functions are inside one big microdraw.js file. We would like to create one .js file for each tool. (so that in the end we could even work towards a configurable toolbar)

What is the expected or desired behaviour?

We would like to create one .js file for each tool. (so that in the end we could even work towards a configurable toolbar)

Join us! 😃 To help us, you can find details for the two extraction cases below our list of tools.

Please reply here as soon as you start working on one tool to avoid redundant effort :)

These are all the tools we want to separate:

• navigate
• home
• zoomIn
• zoomOut
• previous
• next
• select
• draw
• drawPolygon
• simplify
• addPoint
• deletePoint
• addRegion
• deleteRegion
• splitRegion
• rotate
• flip
• toPolygon
• toBezier
• copy
• paste
• save
• screenshot
• delete
• closeMenu
• openMenu
• undo (is that separable? would be ideal)

To jump in helping us, have a look at the first tool separation in this pull request #74 by @r03ert0 and follow this example to separate more tools.
For all tools that simply require a click, this is the way to go:

• 1. find the function you would like to separate inside public/js/microdraw.js
• 2. extract the function's code from microdraw.js and add your separated tool to the /public/js/tools/yourTool.js
• 3. add your tool to the Microdraw object's extension (search inside public/js/microdraw.js for

// extend Microdraw with tools

• and add the two according lines there
• 4. and change it in the switch case for your tool by finding your tool inside public/js/microdraw.js

switch(me.selectedTool) {

and you are done 😃
\ö/ thank youuuu

For all tools that require mouseDown and mouseUp handler you can follow the example in pull request #76 and see how to encapsulate tools like draw and draw polygon. This should help encapsulating some other tools. It doesn't work for tools that require the mouseDrag handler, such as rotate.

[katjaq]

i am separating the bezierToPolygon function!

[r03ert0]

in pull request #76 you can see how to encapsulate tools like draw and draw polygon that require a mouseDown and a mouseUp handler. This should help encapsulating some other tools. It doesn't work for tools that require the mouseDrag handler, such as rotate.

The encapsulation is not complete, and there are still references to the "draw" and "drawPolygon" tool in microdraw.js. These should be completely removed when the encapsulation will be finished.

[katjaq]

for all tools that simply require a click, this is the way to go:

1. find the function you would like to separate inside public/js/microdraw.js

2. extract the function's code from microdraw.js and add your separated tool to the /public/js/tools/yourTool.js

3. add your tool to the Microdraw object's extension (search inside public/js/microdraw.js for

// extend Microdraw with tools

and add the two according lines there

4. and change it in the switch case for your tool by finding your tool inside public/js/microdraw.js

switch(me.selectedTool) {

and you are done 😃
\ö/ thank youuuu

[geoffdavis92]

@katjaq are there any more tools that need extraction? I can't readily identify any remaining tools.

Also, is there any desire to migrate to using ES Modules and Webpack? It seems like this issue and #59 would greatly benefit from having explicitly-listed module imports/exports in each file, and would likely make debugging/adding features easier. (Take with a grain of salt, I'm just looking through the codebase, so there's likely nuances I'm missing)

[xgui3783]

ES module would be a godsent.

Was going to make a snarky remark about the complexity of webpack, but after some mental gymnastics, I came to the conclusion that it definitely could work.

If there are enough interest we could implement.

[geoffdavis92]

@xgui3783 cool. I'm not sure what the unique challenges are since I haven't looked at this codebase very in-depth, but wanted to offer this as an option, since that's essentially what this is asking for.

I'd be willing to help migrate these global functions towards Webpack and setup the config; I'm in no way a master but have been using it frequently on a number of side projects.

[xgui3783]

Feel free to raise a new issue/PR. I am somewhat interested to see this happen, too.

…

On 15 Oct 2017 04:33, "Geoff Davis" ***@***.***> wrote: @xgui3783 <https://github.com/xgui3783> cool. I'm not sure what the unique challenges are since I haven't looked at this codebase very in-depth, but wanted to offer this as an option, since that's essentially what this is asking for. I'd be willing to help migrate these global functions towards Webpack and setup the config; I'm in no way a master but have been using it frequently on a number of side projects. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#75 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ASe-F2UGQq_ZKgmAs0_d5cn29ZAQT8iaks5ssW7egaJpZM4P5br3> .

[katjaq]

@geoffdavis92 : Thank you very much for your contribution! 😃
We updated the first entry in this issue to include the list of tools that exist and would ideally be extracted into their own files.
Also, it sounds great to aim at migrating these global functions towards Webpack. Once the tools are extracted, that should be easier and could be our aim? :) I agree with @xgui3783 !!! 😃

[r03ert0]

i'll work on splitRegion! done :D

[katjaq]

cool! :)
I'll work on select! done :D