Trying to run HelloWorld...

packages/core/src/view/GraphHandler.ts

@@ -659,18 +659,30 @@ class GraphHandler implements GraphPlugin {
 
         if (this.isMoveEnabled()) {
           const geo = cell.getGeometry();
-
+          console.log(
+            'if',
+            this.graph.isCellMovable(cell),
+            !cell.isEdge(),
+            this.graph.getSelectionCount() > 1,
+            geo!.points.length > 0,
+            !cell.getTerminal(true),
+            !cell.getTerminal(false),
+            this.graph.isAllowDanglingEdges(),
+            this.graph.isCloneEvent(me.getEvent()),
+            this.graph.isCellsCloneable()
+          );
           if (
             geo &&
             this.graph.isCellMovable(cell) &&
             (!cell.isEdge() ||
               this.graph.getSelectionCount() > 1 ||
-              (geo.points != null && geo.points.length > 0) ||
+              geo.points.length > 0 ||
-              cell.getTerminal(true) == null ||
+              !cell.getTerminal(true) ||
-              cell.getTerminal(false) == null ||
+              !cell.getTerminal(false) ||
               this.graph.isAllowDanglingEdges() ||
               (this.graph.isCloneEvent(me.getEvent()) && this.graph.isCellsCloneable()))
           ) {
+            console.log('before start', cell, me.getX(), me.getY());
             this.start(cell, me.getX(), me.getY());
           } else if (this.delayedSelection) {
             this.cell = cell;

packages/core/src/view/cell/CellMarker.ts

@@ -401,11 +401,11 @@ class CellMarker extends EventSource {
     const x = me.getGraphX();
     const y = me.getGraphY();
 
-    if (this.hotspotEnabled && isNumeric(x) && isNumeric(y)) {
+    if (this.hotspotEnabled) {
       return intersectsHotspot(
         state,
-        x as number,
+        x,
-        y as number,
+        y,
         this.hotspot,
         MIN_HOTSPOT_SIZE,
         MAX_HOTSPOT_SIZE

packages/core/src/view/cell/CellStatePreview.ts

@@ -9,7 +9,7 @@ import Point from '../geometry/Point';
 import Dictionary from '../../util/Dictionary';
 import CellState from './datatypes/CellState';
 import Cell from './datatypes/Cell';
-import graph from '../Graph';
+import { Graph } from '../Graph';
 import GraphView from '../view/GraphView';
 
 /**
@@ -19,7 +19,7 @@ import GraphView from '../view/GraphView';
  * Implements a live preview for moving cells.
  */
 class CellStatePreview {
-  constructor(graph: graph) {
+  constructor(graph: Graph) {
     this.deltas = new Dictionary();
     this.graph = graph;
   }
@@ -27,12 +27,12 @@ class CellStatePreview {
   /**
    * Reference to the enclosing <mxGraph>.
    */
-  graph: graph;
+  graph: Graph;
 
   /**
    * Reference to the enclosing <mxGraph>.
    */
-  deltas: Dictionary<Cell, {point: Point, state: CellState }>;
+  deltas: Dictionary<Cell, { point: Point; state: CellState }>;
 
   /**
    * Contains the number of entries in the map.

packages/core/src/view/cell/GraphCellsMixin.ts

@@ -2741,7 +2741,7 @@ const GraphCellsMixin: PartialType = {
   isCellMovable(cell) {
     const style = this.getCurrentCellStyle(cell);
 
-    return this.isCellsMovable() && !this.isCellLocked(cell) && style.movable;
+    return this.isCellsMovable() && !this.isCellLocked(cell) && !style.movable;
   },
 
   /**

packages/core/src/view/event/CellTracker.ts

@@ -10,6 +10,8 @@ import { Graph } from '../Graph';
 import Cell from '../cell/datatypes/Cell';
 import EventSource from './EventSource';
 
+import type { ColorValue } from '../../types';
+
 /**
  * Event handler that highlights cells
  *
@@ -68,7 +70,7 @@ import EventSource from './EventSource';
 class CellTracker extends CellMarker {
   constructor(
     graph: Graph,
-    color: string,
+    color: ColorValue,
     funct: ((me: InternalMouseEvent) => Cell) | null = null
   ) {
     super(graph, color);

packages/core/src/view/selection/CellHighlight.ts

@@ -15,7 +15,8 @@ import Rectangle from '../geometry/Rectangle';
 import CellState from '../cell/datatypes/CellState';
 import { Graph } from '../Graph';
 import Shape from '../geometry/shape/Shape';
-import { ColorValue } from '../../types';
+
+import type { ColorValue } from '../../types';
 
 /**
  * A helper class to highlight cells. Here is an example for a given cell.
@@ -29,24 +30,23 @@ import { ColorValue } from '../../types';
 class CellHighlight {
   constructor(
     graph: Graph,
-    highlightColor: ColorValue = DEFAULT_VALID_COLOR,
+    highlightColor: ColorValue,
-    strokeWidth = HIGHLIGHT_STROKEWIDTH,
+    strokeWidth: number,
-    dashed = false
+    dashed?: boolean
   ) {
     this.graph = graph;
-    this.highlightColor = highlightColor;
+    this.highlightColor = highlightColor ?? DEFAULT_VALID_COLOR;
-    this.strokeWidth = strokeWidth;
+    this.strokeWidth = strokeWidth ?? HIGHLIGHT_STROKEWIDTH;
-    this.dashed = dashed;
+    this.dashed = dashed ?? false;
     this.opacity = HIGHLIGHT_OPACITY;
 
     // Updates the marker if the graph changes
     this.repaintHandler = () => {
       // Updates reference to state
-      if (this.state != null) {
+      if (this.state) {
-        // @ts-ignore
         const tmp = this.graph.view.getState(this.state.cell);
 
-        if (tmp == null) {
+        if (!tmp) {
           this.hide();
         } else {
           this.state = tmp;
@@ -163,7 +163,7 @@ class CellHighlight {
     shape.init(this.graph.getView().getOverlayPane());
     InternalEvent.redirectMouseEvents(shape.node, this.graph, this.state);
 
-    if ((<Graph>this.graph).dialect !== DIALECT_SVG) {
+    if (this.graph.dialect !== DIALECT_SVG) {
       shape.pointerEvents = false;
     } else {
       shape.svgPointerEvents = 'stroke';
@@ -183,7 +183,7 @@ class CellHighlight {
    * Updates the highlight after a change of the model or view.
    */
   repaint(): void {
-    if (this.state != null && this.shape != null) {
+    if (this.state && this.shape) {
       this.shape.scale = this.state.view.scale;
 
       if (this.state.cell.isEdge()) {
@@ -198,12 +198,12 @@ class CellHighlight {
           this.state.height + 2 * this.spacing
         );
         this.shape.rotation = this.state.style.rotation ?? 0;
-        this.shape.strokeWidth = <number>this.getStrokeWidth() / this.state.view.scale;
+        this.shape.strokeWidth = this.getStrokeWidth() / this.state.view.scale;
         this.shape.outline = true;
       }
 
       // Uses cursor from shape in highlight
-      if (this.state.shape != null) {
+      if (this.state.shape) {
         this.shape.setCursor(this.state.shape.getCursor());
       }
 
@@ -223,13 +223,13 @@ class CellHighlight {
    */
   highlight(state: CellState | null = null): void {
     if (this.state !== state) {
-      if (this.shape != null) {
+      if (this.shape) {
         this.shape.destroy();
         this.shape = null;
       }
 
       this.state = state;
-      if (this.state != null) {
+      if (this.state) {
         this.drawHighlight();
       }
     }
@@ -240,10 +240,10 @@ class CellHighlight {
    */
   isHighlightAt(x: number, y: number): boolean {
     let hit = false;
-    if (this.shape != null && document.elementFromPoint != null) {
+    if (this.shape && document.elementFromPoint) {
       let elt: (Node & ParentNode) | null = document.elementFromPoint(x, y);
 
-      while (elt != null) {
+      while (elt) {
         if (elt === this.shape.node) {
           hit = true;
           break;