Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Alex G (Velocity)

Floor Plan Setup - Draggable

Recommended Posts

Hey guys!


I have something I'd like to implement which you could consider to effectively be a floor plan for a venue. I've advocated GSAP for a while now and so thought I'd explore what was available for it. I like the look of draggable a lot. 


Effectively I'd like some advice. I want to create an area on the screen and that can zoom/pan and allow me to add elements to a grid in the form of differently shaped tables. The size of the floor can grow (ad infinitum) depending on the positioning of tables, but there will always in practical terms be boundaries to the floor. A table may have dimensions of let's say 5x5 (as in grid squares) and I would like to be able to drag & rotate them as part of Angular 2 app, with them snapping to the grid. Draggable has a lot of the features I require.


I'm wondering whether anyone thinks I could suitably achieve this solely with draggable and a bit of vanilla JS, whether using draggable alongside canvas/webGL would be more appropriate, or whether it wouldn't fit my needs at all. 


Any recommendations here would be greatly appreciated. I would love it if anyone knew of any examples like this too, I've searched around but not found anything too similar as yet.


Many thanks,


Share this post

Link to post
Share on other sites

Here's a demo using Draggable with canvas/WebGL (Pixi.js) with some of the functionality you described like and pan and zoom (mouse wheel)

See the Pen 04586ee6fe7a7dd2503e49380a7cfcb2?editors=0010 by osublake (@osublake) on CodePen


And here's something else I made with the Draggable. It's actually a simplied version of something much more complicated. I wanted to test out using Draggable to drag and drop something into an irregularly shaped object of a different coordinate space. So I got some ray-casting going on in there for hit-detection. I used SVG for that demo, but what I'm doing it for is actually canvas based.

See the Pen VmgNJB?editors=0010 by osublake (@osublake) on CodePen


So what you're building doesn't sound too far fetched.


Curious, is this a personal project? It sounds very interesting and useful.

  • Like 3

Share this post

Link to post
Share on other sites

Also, there are a couple of improvements coming to Draggable.



Point snapping...

See the Pen QdbQjN by osublake (@osublake) on CodePen


And new properties like delta...

See the Pen LxVaVw by osublake (@osublake) on CodePen

See the Pen GrJQMR by osublake (@osublake) on CodePen

  • Like 2

Share this post

Link to post
Share on other sites

Hey Blake!


Many thanks for the examples & info there, those are very useful. I'm in the exploratory phase at the minute but GSAP is always my go-to for any serious animation on the web. At this stage I'm thinking canvas and GSAP will be my first experiment and depending on performance possibly webGL.


To answer your question, it's for a professional project at the company I work at, I'm quite excited about it too actually. Although the project is closed source, I may be able to share some code for the controller I end up writing for our Angular 2 app if you're interested!


We've actually crossed paths before, but I was on my personal account, I had an idea for a UI pack for GSAP a long time ago: https://greensock.com/forums/topic/11690-qui-work-in-progress-front-end-ui-pack-for-use-with-gsap/. I've now been working commercially with angular and typescript for the last two years, and fortunately am a much more experienced programmer. I'm curious is it still in your roadmap to implement that? If not, I was weighing the idea of writing a library for that purpose in TypeScript!

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.