1

I have the following situation... I have to draw a bunch of rectangles within a region of the viewport. The sizes of those rectangles (divs really) are based on some data.

The controller reaches out to the server, grabs the data, and sizes the divs based on the available space allocated to it in the viewport.

Roughly:

<div ng-init="main.init();">   
   <div ng-repeat="icon in main.icons"
     style="top: {{icon.top}}px;
            left: {{icon.left}}px;
            width: {{icon.width}}px;
            height: {{icon.height}}px;"></div>
</div>

The main.init() function reaches into the DOM using angular.element() calls, gets the width and height of the available space and calls a service that does some complicated calculation (basically a packing algorithm to position & size) the rectangles in the best way possible given the area given.

My only problem is on screen resize. If the user resizes the screen, my available space (which is defined in %) also changes and I need to redraw those rectangles.

I am currently resorting to reloading the whole page on re-size of the window, but that's obviously not what I want.

One more thing... There are A LOT of those data points that translate into the rectangles: 10K-20K.

How do I do this properly in Angular so my window size causes them to be calculated and redrawn. Simply updating the main.icons in the controller doesn't seem to trigger ng-repeat to redraw everything. Not sure why.

Any help would be appreciated.

user1902183
  • 3,203
  • 9
  • 31
  • 48
  • You could use the `$window` service and add a watch to the height and width and then check if you should update the divs. – Mihail Stancescu Jan 11 '16 at 20:48
  • you're using inline styles that are populated by angular? goda say it looks and feels very wrong. I would find an alternative for this whole thing. – Joe Lloyd Jan 11 '16 at 20:51
  • @MihailStancescu How would I do that? Can you give an example? – user1902183 Jan 11 '16 at 20:56
  • @JoeLloyd And that would be? – user1902183 Jan 11 '16 at 20:57
  • i don't know exactly what your trying to achieve but if its something graphical use a canvas and a drawing library like paper.js or something. you can still do all you calculation with js but not moding the dom with an angular controller. – Joe Lloyd Jan 11 '16 at 21:02
  • You can use ng-style for dynamic styles. I also noticed you have 'no-repeat' instead of 'ng-repeat' - but I'm guessing that's just a typo. – matmo Jan 11 '16 at 21:46
  • @JoeLloyd Canvas? These are just rectagles that are sized and colorized based on some data. Why would I use a canvas for something so simple and so easily styled with CSS? I use D3.js where I really need it, i.e., on some hover over of some of the rectangles that show complex graphs. Pretty sure Canvas is the wrong tool to employ here. It's just absolute positioning of a bunch of divs. – user1902183 Jan 12 '16 at 01:10
  • @matmo So, are you saying that if I use ng-style, then if in my controller I update the values of data inside main.icons array, Angular will update the view? – user1902183 Jan 12 '16 at 01:12
  • @user1902183 Yes, thats the basic idea. You'll have to change your code a little bit, but ng-style can do that. Have a look at [this](http://stackoverflow.com/questions/22322567/how-to-get-multi-css-rule-for-ng-style-by-function) to see how you can use ng-style to return dynamic values by using a function. – matmo Jan 12 '16 at 01:31
  • Check out this [answer](http://stackoverflow.com/questions/21626357/angularjs-event-on-window-innerwidth-size-change) for more information – Mihail Stancescu Jan 12 '16 at 08:08

0 Answers0