Demo: Connect Edit R2

[theo-armour]

@opentecture/the-brains

Story

Connect Edit R2

• Almost no connection with R1. Solving different issues.

The problem / the need is that every node needs to have character and be quickly recognizable. The SVG file used in previous are large files that take a long time to load. And there's only a small number available. At least we know we can use SVG files. You are encouraged to come up with new SVG files.

So this demo uses bitmaps as textures applied to Three.js primitives. In order to build good demos, we need a good number of textures. This particular demo responds to a long-standing need: where can you get lots of textures online, for free, that load fast and have no licensing issues? The items on the left are GitHub emoji icons - over 800 - the icons on the right are corporate logos - over 500 - used for link icons. The center bitmaps are 16 images that have been floating around my computer for a while.

• Loads 50 boxes on the left with Emoji icons
• Loads 5 cylinders in the middle
• Load 30 boxes on the right with SVG files
• Two buttons allow you to connect the left boxes to the center boxes and the right boxes to the center boxes
• You can also turn on rotation

The boxes are not editable and contain no text data. The demo is only about speed of loading lots of images.

[afomi]

@theo-armour - awesome! The lines look great!

I couldn't tell if clicking on draw re-drew new lines, or drew additional lines. Small implementation detail.

Regarding .svg's, I think they are a nice-to-have. Solving for making each icon meaningful is a distinct issue. I think text is sufficient for now.

Creating additional .svgs is a distinct task, so I created #19.

I think these straight lines are sufficient as an initial take on #6. But this work will need to be merged/incorporated into the main build. How would you like to handle that? I can likely help with some refactoring, hopefully make some of the functions more legible and re-usable.

[afomi]

@theo-armour - #23 very roughly incorporates the polyline drawing in /connect-edit/r2 with R5 (now /index.html)

[afomi]

@theo-armour - I've incorporated drawing lines between nodes in the Demo.

I opened an Issue #29 to tackle selecting objects to draw.