quintuple flushable rect cashing

Author: goldst

blocks/button/ButtonAbstract.js

@@ -36,7 +36,7 @@ export default class ButtonAbstract {
      */
     static _shadowFunction(args) {
         const
-            rect = args.eventControlElement.domElement.getBoundingClientRect(),
+            rect = args.eventControlElement.rect,
             hover = [
                 args.event.clientX - rect.left,
                 args.event.clientY - rect.top

blocks/card/CardAbstract.js

@@ -8,7 +8,7 @@ import LA from '../../js/math/LinearAlgebra.js';
  * the effects
  * @abstract
  */
-export default class cardAbstract {
+export default class CardAbstract {
     /**
      * @param {String} [modifier = ''] Modifier of the card block.
      *   Default '' means mo modifier.
@@ -21,8 +21,8 @@ export default class cardAbstract {
         modifier = '',
         postTransformFunction,
         postShadowFunction,
-        transformationFunction = cardAbstract._transformationFunction,
-        shadowFunction = cardAbstract._shadowFunction
+        transformationFunction = CardAbstract._transformationFunction,
+        shadowFunction = CardAbstract._shadowFunction
     ) {
 
         this._throwIfAbstractClass();
@@ -40,6 +40,11 @@ export default class cardAbstract {
         );
     }
 
+    flushRectCaches() {
+        this._ct.flushRectCaches();
+        this._cm.flushRectCaches();
+    }
+
     /**
      * function which returns the correct transformation for a standard
      * card block depending on the absolute position on screen and the
@@ -84,7 +89,7 @@ export default class cardAbstract {
      */
     static _shadowFunction(args) {
         const
-            rect = args.eventControlElement.domElement.getBoundingClientRect(),
+            rect = args.eventControlElement.rect,
             hover = [
                 args.event.clientX - rect.left,
                 args.event.clientY - rect.top

blocks/card/card.js

@@ -19,4 +19,14 @@ window.addEventListener('load', () => {
         // TODO: do i need this? In which case?
         // C.doEvent(e);
     });
+
+    const onMove = () => {
+        CP.flushRectCaches();
+        CM.flushRectCaches();
+        //C.flushRectCaches();
+    }
+
+    window.addEventListener('pushstate', onMove);
+    window.addEventListener('popstate', onMove);
+    window.addEventListener('replacestate', onMove);
 });

blocks/graphic/Graphic.js

@@ -37,7 +37,7 @@ class Graphic extends MC {
      */
     _shadowFunction(args) {
         const
-            rect = args.eventControlElement.domElement.getBoundingClientRect(),
+            rect = args.eventControlElement.rect,
             hover = [
                 args.event.clientX - rect.left,
                 args.event.clientY - rect.top

blocks/page/Page.js

@@ -39,7 +39,7 @@ class Page extends MC {
      */
     _shadowFunction(args) {
         const
-            rect = args.eventControlElement.domElement.getBoundingClientRect(),
+            rect = args.eventControlElement.rect,
             hover = [
                 args.event.clientX - rect.left,
                 args.event.clientY - rect.top

index.html

@@ -10,7 +10,7 @@
     <!-- htmllint attr-bans="false" -->
     <a class="link-to" href="#">zum Start/go to start</a>
     <a id="to-qr" class="link-to" href="#to-qr">zum QR code/go to the QR code</a>
-    <a id="to-projects" class="link-to" href="#to-prjoects">zur Projekseite/go to the project page</a>
+    <a id="to-projects" class="link-to" href="#to-projects">zur Projektseite/go to the project page</a>
     <!-- htmllint attr-bans="$previous" -->
     <div class="main-container main-container--initial">
         <div class="card card--main main-card main-card--initial">

js/eventControl/EventControlElement.js

@@ -40,6 +40,46 @@ export default class EventControlElement {
         return this.__size;
     }
 
+    /**
+     * clientBoundingRect of the domElement, cached after it has been the
+     * same for 5 calls. Cache can be flushed using {flushRectCache}
+     */
+    get rect() {
+        if(this._rectSafe === undefined) {
+            this._rectSafe = 5;
+        }
+
+        if(this._rect === undefined || this._rectSafe !== 0) {
+            const newRect = this.domElement.getBoundingClientRect();
+
+            if(this._rect !== undefined) { 
+                this._rectSafe--;
+                for(let a in newRect) {
+                    if(newRect[a] !== this._rect) {
+                        this._rectSafe = 5;
+                        break;
+                    }
+                }
+            }
+
+            this._rect = newRect;
+            console.log('neql');
+        } else {
+            console.log('equal');
+        }
+
+        return this._rect;
+    }
+
+    /**
+     * flushes the rect cache from {get rect}
+     * @returns {void}
+     */
+    flushRectCache() {
+        this._rect = undefined;
+        this._rectSafe = 5;
+    }
+
     /**
      * adds the given css classes to the DOM element so that it can be
      * recognized as transformable when looking at the DOM

js/eventControl/EventController.js

@@ -120,6 +120,11 @@ export default class EventController {
         });
     }
 
+    flushRectCaches() {
+        this.eventControlElements
+            .forEach(ece => ece.flushRectCache());
+    }
+
     /**
      * _mutates() calls this method when there might have been a CSS
      * change. This method makes sure that the EventControlElements of

js/transformation/TransformableElement.js

@@ -634,7 +634,7 @@ export default class TransformableElement extends ECE {
             'transform', this.initialTransform
         );
 
-        const rect = this.domElement.getBoundingClientRect();
+        const rect = this.rect;
 
         this._setProperty('transform', '');