fix(window): remove the use of global and window

packages/demo-app-ts/src/utils/useTopologyOptions.tsx

@@ -362,7 +362,7 @@ export const useTopologyOptions = (
   const saveModel = () => {
     setSavedModel(controller.toModel());
     setModelSaved(true);
-    window.setTimeout(() => {
+    setTimeout(() => {
       setModelSaved(false);
     }, 2000);
   };

packages/module/src/behavior/useDndDrag.tsx

@@ -118,7 +118,7 @@ export const useDndDrag = <
   React.useEffect(
     () => () => {
       if (canUseDOM) {
-        d3.select(window.document).on(createKeyHandlerId(), null);
+        d3.select(document).on(createKeyHandlerId(), null);
       }
       if (dndManager.isDragging() && dndManager.getSourceId() === monitor.getHandlerId()) {
         dndManager.endDrag();

packages/module/src/components/SVGArrowMarker.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
 import SVGDefs from './defs/SVGDefs';
 
-declare const global: any;
-
-// workaround to pass docs building
-if (!global.SVGElement) {
-  global.SVGElement = global.Element;
-}
-
 interface SVGArrowMarkerProps {
   id: string;
   nodeSize: number;

packages/module/src/components/nodes/DefaultNode.tsx

@@ -265,7 +265,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       setNodeScale(1);
       nodeScaled.current = false;
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     } else {
@@ -278,7 +278,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
         const nextScale = Math.min(scale + scaleDelta * scalePercent, scaleGoal.current);
         setNodeScale(nextScale);
         if (nextScale < scaleGoal.current) {
-          animationRef.current = window.requestAnimationFrame(bumpScale);
+          animationRef.current = requestAnimationFrame(bumpScale);
         } else {
           nodeScaled.current = true;
           animationRef.current = 0;
@@ -288,12 +288,12 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
       if (nodeScaled.current) {
         setNodeScale(scaleGoal.current);
       } else if (!animationRef.current) {
-        animationRef.current = window.requestAnimationFrame(bumpScale);
+        animationRef.current = requestAnimationFrame(bumpScale);
       }
     }
     return () => {
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     };

packages/module/src/components/svg/SvgDropShadowFilter.tsx

@@ -22,7 +22,7 @@ const SvgDropShadowFilter: React.FunctionComponent<SvgDropShadowFilterProps> = (
   floodColor = globalBlack1000.value,
   floodOpacity = 0.2
 }) => {
-  if (window.navigator.userAgent.includes('Edge')) {
+  if (navigator.userAgent.includes('Edge')) {
     // feDropShadow is not supported by Edge
     return (
       <SVGDefs id={id}>

packages/module/src/hooks/useScaleNode.tsx

@@ -11,7 +11,7 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
       setNodeScale(1);
       nodeScaled.current = false;
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     } else {
@@ -24,7 +24,7 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
         const nextScale = Math.min(scale + scaleDelta * scalePercent, scaleGoal.current);
         setNodeScale(nextScale);
         if (nextScale < scaleGoal.current) {
-          animationRef.current = window.requestAnimationFrame(bumpScale);
+          animationRef.current = requestAnimationFrame(bumpScale);
         } else {
           nodeScaled.current = true;
           animationRef.current = 0;
@@ -34,12 +34,12 @@ const useScaleNode = (scaleNode: boolean, scale: number, scaleUpTime: number = 2
       if (nodeScaled.current) {
         setNodeScale(scaleGoal.current);
       } else if (!animationRef.current) {
-        animationRef.current = window.requestAnimationFrame(bumpScale);
+        animationRef.current = requestAnimationFrame(bumpScale);
       }
     }
     return () => {
       if (animationRef.current) {
-        window.cancelAnimationFrame(animationRef.current);
+        cancelAnimationFrame(animationRef.current);
         animationRef.current = 0;
       }
     };

packages/module/src/layouts/BaseLayout.ts

@@ -192,7 +192,7 @@ export class BaseLayout implements Layout {
   private stopListening(): void {
     const controller = this.graph.getController();
     if (this.scheduleHandle) {
-      window.cancelAnimationFrame(this.scheduleHandle);
+      cancelAnimationFrame(this.scheduleHandle);
     }
     if (controller) {
       controller.removeEventListener(ADD_CHILD_EVENT, this.handleChildAdded);
@@ -234,7 +234,7 @@ export class BaseLayout implements Layout {
 
   private scheduleLayout = (): void => {
     if (!this.scheduleHandle) {
-      this.scheduleHandle = window.requestAnimationFrame(() => {
+      this.scheduleHandle = requestAnimationFrame(() => {
         delete this.scheduleHandle;
         try {
           this.runLayout(false, this.scheduleRestart);

packages/module/src/utils/svg-utils.ts

@@ -4,7 +4,7 @@ import { PointTuple } from '../types';
  * @param id
  */
 export function createSvgIdUrl(id: string): string {
-  return `url(${`${window.location.pathname}${window.location.search}`}#${id})`;
+  return `url(${`${location.pathname}${location.search}`}#${id})`;
 }
 
 export type HullPaddingGetter = (point: PointTuple) => number;

packages/module/src/utils/useHover.ts

@@ -17,7 +17,7 @@ const useHover = <T extends Element>(
   );
 
   // The unset handle needs to be referred by listeners in different closures.
-  const unsetHandle = React.useRef<number>();
+  const unsetHandle = React.useRef<any>();
 
   const callbackRef = useCallbackRef(
     React.useCallback(
@@ -31,7 +31,7 @@ const useHover = <T extends Element>(
             clearTimeout(delayHandle);
 
             if (delay != null) {
-              delayHandle = window.setTimeout(() => {
+              delayHandle = setTimeout(() => {
                 clearTimeout(unsetHandle.current);
                 setHover(newState);
               }, delay);
@@ -60,7 +60,7 @@ const useHover = <T extends Element>(
               // This can happen with layers. Rendering a node to a new layer will unmount the old node
               // and remount a new node at the same location. This will prevent flickering and getting
               // stuck in a hover state.
-              unsetHandle.current = window.setTimeout(() => {
+              unsetHandle.current = setTimeout(() => {
                 if (mountRef.current) {
                   setHover(false);
                 }