Skip to content

Web workers

Ghost User requested to merge feature/web-workers into develop

Created by: bartwesselink

This PR changes the way visualizations are drawn significantly!

From now on, all computing will take place in a separate thread. But, the translation to OpenGL still takes place on the main thread, which might result in a frozen UI after all. I cannot test this yet, because I only implemented the OpenGL Demo Tree. @S4K4YUME was updating his Simple Tree Map so this would result in a loss of work, and @teards will look at the generalized pythagoras tree.

Like I said, this is work in progress and I'm not sure if we will be able to merge this. This PR adds loaders to the visualization tool. When a new tab is loaded (when the canvas is empty), the loader is shown as a modal. When settings are changed, a small loader in the top right corner is shown.

From now on, all visualizations must have a self-contained draw method. This means, that it cannot reference any variables outside of this function! No class methods or variables, nothing. It receives 1 argument as an input, namely VisualizerInput. This interface contains the tree, and it contains the settings object, from the start on. Instead of drawing directly to OpenGL, it now first has to create an array of Draw[]. The Draw contains a type, and options. Types are defined as an enum in draw-type.ts, BUT because the method is self-contained, it cannot reference any enums. Therefore, numbers have to be used. I propose to add the type of draw call in a small comment behind the number.

Once this entire array of draws is created, it is returned from the thread and then passed on to the main thread, which converts it to OpenGL calls.

Here is a list of all draw calls:

  • draws.push({ type: 1 /** FillRotatedQuad **/, options: { x: , y: , width: , height: , rotation: , color: } });
  • draws.push({ type: 2 /** DrawRotatedQuad **/, options: { x: , y: , width: , height: , rotation: , color: } });
  • draws.push({ type: 3 /** FillLinedRotatedQuad **/, options: { x: , y: , width: , height: , rotation: , fillColor: , lineColor: } });
  • draws.push({ type: 4 /** FillAAQuad **/, options: { x: , y: , width: , height: , color: } });
  • draws.push({ type: 5 /** DrawAAQuad **/, options: { x: , y: , width: , height: , color: } });
  • draws.push({ type: 6/** FillLinedAAQuad **/, options: { x: , y: , width: , height: , fillColor: , lineColor: } });
  • draws.push({ type: 7 /** FillEllipsoid **/, options: { x: , y: , radx: , rady: ,rotation: , color: } });
  • draws.push({ type: 8 /** DrawEllipsoid **/, options: { x: , y: , radx: , rady: , rotation: , color: } });
  • draws.push({ type: 9 /** FillLinedEllipsoid **/, options: { x: , y: , radx: , rady: , rotation: , fillColor: , lineColor: } });
  • draws.push({ type: 10 /** FillCircle **/, options: { x: , y: , radius: , color: } });
  • draws.push({ type: 11 /** DrawCircle **/, options: { x: , y: , radius: , color: } });
  • draws.push({ type: 12 /** FillLinedCircle **/, options: { x: , y: , radius: , fillColor: lineColor: } });

As one can observe, all draw/fill calls take the color attribute, and all fill lined calls take the fillColor and lineColor attributes.

I hope everything is clear, and if there are any questions, please ask! If it appears that this does significantly slow down the app, I propose not to merge this. But, we have to find this out!

@S4K4YUME is your update tree-map almost ready? Then I will merge this into this branch and change it to the (new?) format.

TODO:

  • Convert Pythagoras tree implementation
  • Convert Simple Tree Map implementation

Merge request reports