search

taataa / tapspace

Zoomable user interface library for web apps.
https://taataa.github.io/tapspace/
MIT License
58 stars 8 forks source link

How to add html elements outside the infinite canvas? #144

Open danielvianna opened 3 years ago

danielvianna commented 3 years ago

I'm trying to build a menu (left), submenu (top in between) and inspector (right), so something similar to Figma. The only way I've done was with absolute positioning, is there a way to wrap the canvas so I don't need to break the browser's flow? basically a div instead of full screen

axelpale commented 3 years ago

Currently the absolute positioning is the way to go if you like to keep the SpaceView as large as possible, kind of a map browser.

On the other hand, the SpaceView is rendered in plain HTML element and therefore it can be only a small portion of the host page. You can do this by styling the space container element (the one mounted to SpaceView, usually with id space in examples) something else than width: 100%; height: 100%. Also relax html and body element styles: remove height: 100%. What should happen after that is that the page scrolls as a normal web page, yet on the space container the scroll, mouse, and touch events are captured by Tapspace instead.

Unfortunately we do not have a good example app to properly show this behavior. Any feedback on what you would like to see example-wise are welcome. Also if I misunderstood your question, please feel free to elaborate :)

axelpale commented 2 years ago

Update: tapspace v2 will introduce viewport controls and provide API to add custom controls layered on top of the viewport. Expect v2 alpha release in Sep-Oct 2022.