chore: enable strict mode for workspace-minimap

plugins/workspace-minimap/src/focus_region.ts

@@ -28,9 +28,9 @@ const borderRadius = 6;
  */
 export class FocusRegion {
   private onChangeWrapper: (e: Blockly.Events.Abstract) => void;
-  private svgGroup: SVGElement;
-  private rect: SVGElement;
-  private background: SVGElement;
+  private svgGroup: SVGElement | null = null;
+  private rect: SVGElement | null = null;
+  private background: SVGElement | null = null;
   private id: string;
   private initialized = false;
 
@@ -45,6 +45,7 @@ export class FocusRegion {
     private minimapWorkspace: Blockly.WorkspaceSvg,
   ) {
     this.id = String(Math.random()).substring(2);
+    this.onChangeWrapper = this.onChange.bind(this); 
   }
 
   /**
@@ -129,7 +130,7 @@ export class FocusRegion {
   dispose() {
     if (this.onChangeWrapper) {
       this.primaryWorkspace.removeChangeListener(this.onChangeWrapper);
-      this.onChangeWrapper = null;
+      this.onChangeWrapper = () => null;
     }
     if (this.svgGroup) {
       Blockly.utils.dom.removeNode(this.svgGroup);
@@ -187,9 +188,13 @@ export class FocusRegion {
     top += (minimapSvg.height - minimapContent.height) / 2;
 
     // Set the svg attributes.
-    this.rect.setAttribute('transform', `translate(${left},${top})`);
-    this.rect.setAttribute('width', width.toString());
-    this.rect.setAttribute('height', height.toString());
+    if (!this.rect) {
+      throw new Error('The focus region must be initialized (`init`) before calling `update`');
+    } else {
+      this.rect.setAttribute('transform', `translate(${left},${top})`);
+      this.rect.setAttribute('width', width.toString());
+      this.rect.setAttribute('height', height.toString());
+    }
   }
 
   /**
@@ -206,4 +211,4 @@ Blockly.Css.register(`
 .blockly-focus-region {
   fill: #e6e6e6;
 }
-`);
+`);

plugins/workspace-minimap/src/minimap.ts

@@ -32,10 +32,10 @@ export class Minimap {
   protected primaryWorkspace: Blockly.WorkspaceSvg;
   protected minimapWorkspace: Blockly.WorkspaceSvg;
   protected focusRegion: FocusRegion;
-  protected onMouseMoveWrapper: Blockly.browserEvents.Data;
-  protected onMouseDownWrapper: Blockly.browserEvents.Data;
-  protected onMouseUpWrapper: Blockly.browserEvents.Data;
-  protected minimapWrapper: HTMLDivElement;
+  protected onMouseMoveWrapper: Blockly.browserEvents.Data | null = null;
+  protected onMouseDownWrapper: Blockly.browserEvents.Data | null = null;
+  protected onMouseUpWrapper: Blockly.browserEvents.Data | null = null;
+  protected minimapWrapper: HTMLDivElement | null = null;
 
   /**
    * Constructor for a minimap.
@@ -44,6 +44,8 @@ export class Minimap {
    */
   constructor(workspace: Blockly.WorkspaceSvg) {
     this.primaryWorkspace = workspace;
+    this.minimapWorkspace = new Blockly.WorkspaceSvg(new Blockly.Options({}));
+    this.focusRegion = new FocusRegion(this.primaryWorkspace, this.minimapWorkspace);
   }
 
   /**
@@ -58,58 +60,62 @@ export class Minimap {
     // Make the wrapper a sibling to the primary injection div.
     const primaryInjectParentDiv =
       this.primaryWorkspace.getInjectionDiv().parentNode;
-    primaryInjectParentDiv.appendChild(this.minimapWrapper);
+    primaryInjectParentDiv?.appendChild(this.minimapWrapper);
 
-    // Inject the minimap workspace.
-    this.minimapWorkspace = Blockly.inject(this.minimapWrapper.id, {
-      // Inherit the layout of the primary workspace.
-      rtl: this.primaryWorkspace.RTL,
-      // Include the scrollbars so that internal scrolling is enabled and
-      // remove direct interaction with the minimap workspace.
-      move: {
-        scrollbars: true,
-        drag: false,
-        wheel: false,
-      },
-      // Remove the scale bounds of the minimap so that it can
-      // correctly zoomToFit.
-      zoom: {
-        maxScale: null,
-        minScale: null,
-      },
-      readOnly: true,
-      theme: this.primaryWorkspace.getTheme(),
-      renderer: this.primaryWorkspace.options.renderer,
-    });
+    if (!primaryInjectParentDiv) {
+      throw new Error('The workspace must be injected into the page before the minimap can be initalized');
+    } else {
+      // Inject the minimap workspace.
+      this.minimapWorkspace = Blockly.inject(this.minimapWrapper.id, {
+        // Inherit the layout of the primary workspace.
+        rtl: this.primaryWorkspace.RTL,
+        // Include the scrollbars so that internal scrolling is enabled and
+        // remove direct interaction with the minimap workspace.
+        move: {
+          scrollbars: true,
+          drag: false,
+          wheel: false,
+        },
+        // Remove the scale bounds of the minimap so that it can
+        // correctly zoomToFit.
+        zoom: {
+          maxScale: Infinity,
+          minScale: 0,
+        },
+        readOnly: true,
+        theme: this.primaryWorkspace.getTheme(),
+        renderer: this.primaryWorkspace.options.renderer,
+      });
 
-    this.minimapWorkspace.scrollbar.setContainerVisible(false);
-    this.primaryWorkspace.addChangeListener((e) => void this.mirror(e));
-    window.addEventListener('resize', () => {
-      this.minimapWorkspace.zoomToFit();
-    });
+      this.minimapWorkspace.scrollbar?.setContainerVisible(false);
+      this.primaryWorkspace.addChangeListener((e) => void this.mirror(e));
+      window.addEventListener('resize', () => {
+        this.minimapWorkspace.zoomToFit();
+      });
 
-    // The mouseup binds to the parent container div instead of the minimap
-    // because if a drag begins on the minimap and ends outside of it the
-    // mousemove should still unbind.
-    this.onMouseDownWrapper = Blockly.browserEvents.bind(
-      this.minimapWorkspace.svgGroup_,
-      'mousedown',
-      this,
-      this.onClickDown,
-    );
-    this.onMouseUpWrapper = Blockly.browserEvents.bind(
-      primaryInjectParentDiv,
-      'mouseup',
-      this,
-      this.onClickUp,
-    );
+      // The mouseup binds to the parent container div instead of the minimap
+      // because if a drag begins on the minimap and ends outside of it the
+      // mousemove should still unbind.
+      this.onMouseDownWrapper = Blockly.browserEvents.bind(
+        this.minimapWorkspace.svgGroup_,
+        'mousedown',
+        this,
+        this.onClickDown,
+      );
+      this.onMouseUpWrapper = Blockly.browserEvents.bind(
+        primaryInjectParentDiv,
+        'mouseup',
+        this,
+        this.onClickUp,
+      );
 
-    // Initializes the focus region.
-    this.focusRegion = new FocusRegion(
-      this.primaryWorkspace,
-      this.minimapWorkspace,
-    );
-    this.enableFocusRegion();
+      // Initializes the focus region.
+      this.focusRegion = new FocusRegion(
+        this.primaryWorkspace,
+        this.minimapWorkspace,
+      );
+      this.enableFocusRegion();
+    }
   }
 
   /**
@@ -270,4 +276,4 @@ export class Minimap {
   isFocusEnabled(): boolean {
     return this.focusRegion.isEnabled();
   }
-}
+}

plugins/workspace-minimap/src/positioned_minimap.ts

@@ -179,19 +179,22 @@ export class PositionedMinimap
    */
   private setAttributes(): void {
     const injectDiv = this.minimapWorkspace.getInjectionDiv();
-    const style = injectDiv.parentElement.style;
-    style.zIndex = '2';
-    style.position = 'absolute';
-    style.width = `${this.width}px`;
-    style.height = `${this.height}px`;
-    style.top = `${this.top}px`;
-    style.left = `${this.left}px`;
-    Blockly.svgResize(this.minimapWorkspace);
+    if(injectDiv.parentElement === null) {
+      return;
+    }
+      const style = injectDiv.parentElement.style;
+      style.zIndex = '2';
+      style.position = 'absolute';
+      style.width = `${this.width}px`;
+      style.height = `${this.height}px`;
+      style.top = `${this.top}px`;
+      style.left = `${this.left}px`;
+      Blockly.svgResize(this.minimapWorkspace);
   }
 }
 
 Blockly.Css.register(`
 .blockly-minimap {
   box-shadow: 2px 2px 10px grey;
 }
-`);
+`);

plugins/workspace-minimap/test/index.ts

@@ -12,8 +12,7 @@ import * as Blockly from 'blockly';
 import {toolboxCategories, createPlayground} from '@blockly/dev-tools';
 import {PositionedMinimap} from '../src/index';
 
-let minimap = null;
-let workspace = null;
+let minimap: PositionedMinimap | null = null;
 
 /**
  * Create a workspace.
@@ -30,15 +29,22 @@ function createWorkspace(
   if (minimap) {
     minimap.dispose();
   }
-  workspace = Blockly.inject(blocklyDiv, options);
+  const workspace = Blockly.inject(blocklyDiv, options);
   minimap = new PositionedMinimap(workspace);
   minimap.init();
 
   return workspace;
 }
 
+
 document.addEventListener('DOMContentLoaded', function () {
-  createPlayground(document.getElementById('root'), createWorkspace, {
+  const rootElement = document.getElementById('root');
+  if (rootElement === null) {
+    console.error("No element with id 'root' found");
+    return;
+  }
+  createPlayground(rootElement, createWorkspace, {
     toolbox: toolboxCategories,
   });
 });
+

plugins/workspace-minimap/test/minimap_tests.mocha.js

@@ -9,6 +9,11 @@ const assert = chai.assert;
 const Blockly = require('blockly');
 const {Minimap} = require('../src/minimap');
 const {PositionedMinimap} = require('../src/positioned_minimap');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+
+const { document } = (new JSDOM('')).window;
+global.document = document;
 
 suite(
   'Converting click coordinates from minimap to primary workspace',

plugins/workspace-minimap/tsconfig.json

@@ -8,7 +8,7 @@
     "module": "es2015",
     "moduleResolution": "bundler",
     "target": "es6",
-    "strict": false,
+    "strict": true,
     // Point at the local Blockly. See #1934. Remove if we add hoisting.
     "paths": {
       "blockly/*": ["node_modules/blockly/*"]