@react-three/fiber 8.0.26 → 8.2.0

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-7af14ac8.cjs.dev.js → index-0499a96a.cjs.dev.js}

@@ -855,7 +855,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1071,10 +1071,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1093,10 +1093,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1113,7 +1113,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1124,13 +1124,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1143,13 +1143,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1177,20 +1175,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree.');
+    },
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : constants.DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1211,7 +1212,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1221,6 +1224,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1234,6 +1239,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1250,7 +1257,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE__namespace.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1293,6 +1300,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1300,6 +1309,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1310,11 +1321,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1388,6 +1401,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1429,15 +1443,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1458,7 +1474,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1500,7 +1518,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1512,11 +1530,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1695,8 +1713,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1765,12 +1781,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1836,11 +1850,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

package/dist/{index-bfdbf5d7.esm.js → index-6279214a.esm.js}

@@ -828,7 +828,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1044,10 +1044,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1066,10 +1066,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1086,7 +1086,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1097,13 +1097,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1116,13 +1116,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1150,20 +1148,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree.');
+    },
     hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1184,7 +1185,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1194,6 +1197,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1207,6 +1212,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1223,7 +1230,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1266,6 +1273,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1273,6 +1282,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1283,11 +1294,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1361,6 +1374,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1402,15 +1416,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1431,7 +1447,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1473,7 +1491,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1485,11 +1503,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1668,8 +1686,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1738,12 +1754,10 @@ function createRoot(canvas) {
 
 
         const handleSessionChange = () => {
-          const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
-          // WebXRManager's signature is incorrect.
-          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+          const state = store.getState();
+          state.gl.xr.enabled = state.gl.xr.isPresenting;
+          state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+          if (!state.gl.xr.isPresenting) invalidate(state);
         }; // WebXR session manager
 
 
@@ -1809,11 +1823,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed