UIScrollView Canvas Equivalent?

Question

I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.

I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.

I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.

My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.

My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.

Answer 1

1. This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.

2. Here's another beautiful live demo: Source code for JS Flowchart here

3. Also take a look at this Dragon drop fiddle

And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.

Hope this should get you started.