Inital commit demo site

[rowanwins]

Gday @mfogel

I've finally had a bit of time to create a demo site.

A bit of explanation

• The site uses VueJS and webpack to compile everything.
  • Because of the way the code is currently structured is you'll need to run it through something like babel to get it be browser friendly (eg the spread operator and arrow syntax you've used isn't also cross-browser friendly)
  • The webpack config isn't optimal at the moment but it does the job
• To get the site going you'll need to do an npm install, this will install a few more dev dependencies
• To run the demo site locally just run npm run dev, this'll start a site at localhost:8080
  • This looks at the vue template in debug/App.vue
  • It will also live watch for any changes in the src directory which is kinda handy
• you can then build the docs so they are ready to deploy to the web by running npm run build:docs
  • The output of this process lands in the docs directory
  • You should then be able to have a demo site running at https:// mfogel.github.io/polygon-clipping/docs

Hopefully if you're a little bit familiar with Vue or React it'll make sense, although if you're not terribly familiar with modern front-end dev it might all seem a bit weird!

Let me know what you think.

[coveralls]

Pull Request Test Coverage Report for Build 130

• 0 of 0 (NaN%) changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.0005%) to 99.386%

---

Totals
Change from base Build 126:	-0.0005%
Covered Lines:	727
Relevant Lines:	728

---

💛 - Coveralls

[coveralls]

Pull Request Test Coverage Report for Build 132

• 0 of 0 (NaN%) changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.0005%) to 99.386%

---

Totals
Change from base Build 126:	-0.0005%
Covered Lines:	727
Relevant Lines:	728

---

💛 - Coveralls

[mfogel]

Good morning @rowanwins - thanks much for the contribution! Appreciate you setting this up.

I would like to, as much as possible, contain stuff for the demo site in the docs/ folder. Once this is merged in, I will set the repository settings to use this folder. So along that thought - the index.html - does that need to be in the directory root or will it work if it's at docs/index.html ? Is there anything else that could be moved within the docs/ dir?

I will do a more complete pass over this within the week. Again, thanks for setting it up.

[rowanwins]

Hey @mfogel

i think that should mostly be doable, I'll take a look tonight and report back

[rowanwins]

Hi @mfogel

Everything is now in the docs folder, except the following config files - webpack config file, babelrc file, and an eslintrc file.

I just picked a few random test cases to show but you could show any which you think a good. I've also included some performance stats against other libs in there but that can be easily dropped out at some stage.

If you'd like to add actual API docs (eg more than what's in the README.md) at some stage let me know.

[mfogel]

Kinda confused by this change... assuming it's intentional - do you know why splaytree needs to be imported like this and the other modules are ok with the require() ?

[rowanwins]

Yeah I need to look into that further, it's probably a webpack config thing which I should be able to fix. ES6 modules and bundling tools are still a bit complicated sometimes.

[mfogel]

I think what's going on is that webpack is loading the es module for splaytree because it sees the module definition in splaytree's package.json This is conflicting with the require('splaytree') call - which expects a common JS module.

I don't think this is the 'right' solution, but another way to avoid this conflict for the purposes of this PR is to make a change to the webpack.config.js to force the splaytree import to load the common JS version of splaytree rather than the es6 module. This is one way to get webpack to do that (maybe not the best way?):

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,6 +42,7 @@ module.exports = {
   },
   resolve: {
     alias: {
+      'splaytree$': 'splaytree/dist/splay.js',
       'vue$': 'vue/dist/vue.esm.js'
     },
     extensions: ['*', '.js', '.vue', '.json']

Applying this change to webpack.config.js then makes this change from require() to import in src/sweep-line.js unnecessary, which I like because then these source files can all still be loaded directly by node with no intermediate compile/build step. Down the road, I would like to add npm run build step to build both common JS and es modules, but I think better to address that separately and not mixed in with this PR.

Thoughts?

[rowanwins]

I'll try and take a look into this tonight, been away for the weekend sorry

[mfogel]

seems this package isn't a real package... unintentional add?

[rowanwins]

My bad!

[rowanwins]

Have updating that splaytree handling @mfogel - sorry for the delay :)

[mfogel]

@rowanwins thanks for making those changes, I merged this all in in a squash commit.

It's now available at http://mike.fogel.ca/polygon-clipping/ - but stay tuned I will get this set up at a js.org subdomain.

[mfogel]

Now live at https://polygon-clipping.js.org/