Fixing stories...

packages/core/src/index.ts

@@ -112,19 +112,19 @@ export { default as mxRootChangeCodec } from './util/serialization/mxRootChangeC
 export { default as mxStylesheetCodec } from './util/serialization/mxStylesheetCodec';
 export { default as mxTerminalChangeCodec } from './util/serialization/mxTerminalChangeCodec';
 
-export { default as Actor } from './view/geometry/shape/Actor';
+export { default as ActorShape } from './view/geometry/shape/ActorShape';
 export { default as LabelShape } from './view/geometry/shape/node/LabelShape';
 export { default as Shape } from './view/geometry/shape/Shape';
 export { default as SwimlaneShape } from './view/geometry/shape/node/SwimlaneShape';
 export { default as TextShape } from './view/geometry/shape/node/TextShape';
 export { default as TriangleShape } from './view/geometry/shape/node/TriangleShape';
 
-export { default as Arrow } from './view/geometry/shape/edge/Arrow';
+export { default as ArrowShape } from './view/geometry/shape/edge/ArrowShape';
-export { default as ArrowConnector } from './view/geometry/shape/edge/ArrowConnector';
+export { default as ArrowConnectorShape } from './view/geometry/shape/edge/ArrowConnectorShape';
-export { default as Connector } from './view/geometry/shape/edge/Connector';
+export { default as ConnectorShape } from './view/geometry/shape/edge/ConnectorShape';
-export { default as Line } from './view/geometry/shape/edge/Line';
+export { default as LineShape } from './view/geometry/shape/edge/LineShape';
-export { default as Marker } from './view/geometry/shape/edge/Marker';
+export { default as MarkerShape } from './view/geometry/shape/edge/MarkerShape';
-export { default as Polyline } from './view/geometry/shape/edge/Polyline';
+export { default as PolylineShape } from './view/geometry/shape/edge/PolylineShape';
 
 export { default as CloudShape } from './view/geometry/shape/node/CloudShape';
 export { default as CylinderShape } from './view/geometry/shape/node/CylinderShape';

packages/core/src/types.ts

@@ -103,7 +103,7 @@ export type CellStateStyles = {
   perimeter: Function | string | null;
   perimeterSpacing: number;
   pointerEvents: boolean;
-  resizeable: boolean;
+  resizable: boolean;
   resizeHeight: boolean;
   resizeWidth: boolean;
   rotatable: boolean;

packages/core/src/util/Guide.ts

@@ -7,14 +7,11 @@
 
 import { DIALECT_SVG, GUIDE_COLOR, GUIDE_STROKEWIDTH } from './Constants';
 import Point from '../view/geometry/Point';
-import Polyline from '../view/geometry/shape/edge/Polyline';
+import PolylineShape from '../view/geometry/shape/edge/PolylineShape';
 import CellState from '../view/cell/datatypes/CellState';
 import Shape from '../view/geometry/shape/Shape';
 import Rectangle from '../view/geometry/Rectangle';
 import { Graph } from '../view/Graph';
-import EventObject from '../view/event/EventObject';
-import GraphView from '../view/view/GraphView';
-import { ColorValue } from '../types';
 
 /**
  * Class: mxGuide
@@ -130,7 +127,7 @@ class Guide {
    */
   createGuideShape(horizontal = false) {
     // TODO: Should vertical guides be supported here?? ============================
-    const guide = new Polyline([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
+    const guide = new PolylineShape([], GUIDE_COLOR, GUIDE_STROKEWIDTH);
     guide.isDashed = true;
     return guide;
   }

packages/core/src/util/Utils.ts

@@ -2364,6 +2364,6 @@ export const mixInto = (dest: any) => (mixin: any) => {
       });
     }
   } catch (e) {
-    console.log('Error while mixing', e);
+    console.error('Error while mixing', e);
   }
 };

packages/core/src/util/canvas/SvgCanvas2D.ts

@@ -974,7 +974,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
       if (flipH ? !flipV : flipV) {
         theta *= -1;
       }
-      console.log('theta', theta);
+
       if (theta !== 0) {
         s.transform += `rotate(${this.format(theta)},${this.format(cx)},${this.format(
           cy

packages/core/src/view/GraphHandler.ts

@@ -7,7 +7,13 @@
 
 import mxClient from '../mxClient';
 import InternalEvent from './event/InternalEvent';
-import { contains, convertPoint, getRotatedPoint, toRadians } from '../util/Utils';
+import {
+  contains,
+  convertPoint,
+  getRotatedPoint,
+  isNumeric,
+  toRadians,
+} from '../util/Utils';
 import RectangleShape from './geometry/shape/node/RectangleShape';
 import mxGuide from '../util/Guide';
 import Point from './geometry/Point';
@@ -1562,8 +1568,8 @@ class GraphHandler implements GraphPlugin {
         this.cell &&
         this.first &&
         (this.shape || this.livePreviewUsed) &&
-        this.currentDx &&
+        isNumeric(this.currentDx) &&
-        this.currentDy
+        isNumeric(this.currentDy)
       ) {
         const { graph } = this;
         const cell = me.getCell();
@@ -1607,7 +1613,6 @@ class GraphHandler implements GraphPlugin {
               me.getGraphY()
             );
           } else if (this.cells) {
-            console.log('move', this.cells, dx, dy, clone, this.target, me.getEvent());
             this.moveCells(this.cells, dx, dy, clone, this.target, me.getEvent());
           }
         }
@@ -1714,7 +1719,7 @@ class GraphHandler implements GraphPlugin {
 
     // Removes cells from parent
     const parent = this.cell.getParent();
-    console.log('parent', parent);
+
     if (
       !target &&
       parent &&
@@ -1725,7 +1730,7 @@ class GraphHandler implements GraphPlugin {
     }
 
     // Cloning into locked cells is not allowed
-    clone = clone && !this.graph.isCellLocked(target || this.graph.getDefaultParent());
+    clone = !!clone && !this.graph.isCellLocked(target || this.graph.getDefaultParent());
 
     this.graph.getModel().beginUpdate();
     try {
@@ -1750,7 +1755,7 @@ class GraphHandler implements GraphPlugin {
           }
         }
       }
-      console.log('moveCells', cells, dx, dy, clone, target, evt);
+
       // Passes all selected cells in order to correctly clone or move into
       // the target cell. The method checks for each cell if its movable.
       cells = this.graph.moveCells(cells, dx, dy, clone, target, evt);

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

@@ -365,9 +365,9 @@ class CellMarker extends EventSource {
 
     if (!cell) return null;
 
-    const state = this.getStateToMark(view.getState(cell) as CellState);
+    const state = this.getStateToMark(view.getState(cell));
 
-    return this.intersects(state, me) ? state : null;
+    return state && this.intersects(state, me) ? state : null;
   }
 
   /**
@@ -386,7 +386,7 @@ class CellMarker extends EventSource {
    * Returns the <mxCellState> to be marked for the given <mxCellState> under
    * the mouse. This returns the given state.
    */
-  getStateToMark(state: CellState) {
+  getStateToMark(state: CellState | null) {
     return state;
   }
 

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

@@ -7,18 +7,18 @@ import RectangleShape from '../geometry/shape/node/RectangleShape';
 import EllipseShape from '../geometry/shape/node/EllipseShape';
 import RhombusShape from '../geometry/shape/node/RhombusShape';
 import CylinderShape from '../geometry/shape/node/CylinderShape';
-import Connector from '../geometry/shape/edge/Connector';
+import ConnectorShape from '../geometry/shape/edge/ConnectorShape';
-import Actor from '../geometry/shape/Actor';
+import ActorShape from '../geometry/shape/ActorShape';
 import TriangleShape from '../geometry/shape/node/TriangleShape';
 import HexagonShape from '../geometry/shape/node/HexagonShape';
 import CloudShape from '../geometry/shape/node/CloudShape';
-import Line from '../geometry/shape/edge/Line';
+import LineShape from '../geometry/shape/edge/LineShape';
-import Arrow from '../geometry/shape/edge/Arrow';
+import ArrowShape from '../geometry/shape/edge/ArrowShape';
-import ArrowConnector from '../geometry/shape/edge/ArrowConnector';
+import ArrowConnectorShape from '../geometry/shape/edge/ArrowConnectorShape';
 import DoubleEllipseShape from '../geometry/shape/node/DoubleEllipseShape';
 import SwimlaneShape from '../geometry/shape/node/SwimlaneShape';
 import ImageShape from '../geometry/shape/node/ImageShape';
-import Label from '../geometry/shape/node/LabelShape';
+import LabelShape from '../geometry/shape/node/LabelShape';
 import TextShape from '../geometry/shape/node/TextShape';
 import {
   ALIGN_CENTER,
@@ -121,7 +121,7 @@ class CellRenderer {
    * Defines the default shape for edges. Default is <mxConnector>.
    */
   // @ts-expect-error The constructors for Shape and Connector are different.
-  defaultEdgeShape: typeof Shape = Connector;
+  defaultEdgeShape: typeof Shape = ConnectorShape;
 
   /**
    * Variable: defaultVertexShape
@@ -1637,8 +1637,9 @@ class CellRenderer {
     return (
       shape.bounds == null ||
       shape.scale !== state.view.scale ||
-      (state.absolutePoints == null && !shape.bounds.equals(state)) ||
+      (state.absolutePoints.length === 0 && !shape.bounds.equals(state)) ||
-      (state.absolutePoints != null && !equalPoints(shape.points, state.absolutePoints))
+      (state.absolutePoints.length > 0 &&
+        !equalPoints(shape.points, state.absolutePoints))
     );
   }
 
@@ -1685,19 +1686,19 @@ CellRenderer.registerShape(SHAPE_RHOMBUS, RhombusShape);
 // @ts-ignore
 CellRenderer.registerShape(SHAPE_CYLINDER, CylinderShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_CONNECTOR, Connector);
+CellRenderer.registerShape(SHAPE_CONNECTOR, ConnectorShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_ACTOR, Actor);
+CellRenderer.registerShape(SHAPE_ACTOR, ActorShape);
 CellRenderer.registerShape(SHAPE_TRIANGLE, TriangleShape);
 CellRenderer.registerShape(SHAPE_HEXAGON, HexagonShape);
 // @ts-ignore
 CellRenderer.registerShape(SHAPE_CLOUD, CloudShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_LINE, Line);
+CellRenderer.registerShape(SHAPE_LINE, LineShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_ARROW, Arrow);
+CellRenderer.registerShape(SHAPE_ARROW, ArrowShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, ArrowConnector);
+CellRenderer.registerShape(SHAPE_ARROW_CONNECTOR, ArrowConnectorShape);
 // @ts-ignore
 CellRenderer.registerShape(SHAPE_DOUBLE_ELLIPSE, DoubleEllipseShape);
 // @ts-ignore
@@ -1705,6 +1706,6 @@ CellRenderer.registerShape(SHAPE_SWIMLANE, SwimlaneShape);
 // @ts-ignore
 CellRenderer.registerShape(SHAPE_IMAGE, ImageShape);
 // @ts-ignore
-CellRenderer.registerShape(SHAPE_LABEL, Label);
+CellRenderer.registerShape(SHAPE_LABEL, LabelShape);
 
 export default CellRenderer;

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

@@ -1997,7 +1997,6 @@ const GraphCellsMixin: PartialType = {
    * <mxEvent.CELLS_MOVED> while the transaction is in progress.
    */
   cellsMoved(cells, dx, dy, disconnect = false, constrain = false, extend = false) {
-    console.log('cellsMoved', cells, dx, dy, disconnect, constrain, extend);
     if (dx !== 0 || dy !== 0) {
       this.batchUpdate(() => {
         if (disconnect) {
@@ -2031,7 +2030,7 @@ const GraphCellsMixin: PartialType = {
    */
   translateCell(cell, dx, dy) {
     let geometry = cell.getGeometry();
-    console.log('begin', geometry);
+
     if (geometry) {
       geometry = geometry.clone();
       geometry.translate(dx, dy);
@@ -2066,7 +2065,7 @@ const GraphCellsMixin: PartialType = {
           geometry.offset.y = geometry.offset.y + dy;
         }
       }
-      console.log('end', geometry);
+
       this.getModel().setGeometry(cell, geometry);
     }
   },
@@ -2773,7 +2772,8 @@ const GraphCellsMixin: PartialType = {
   isCellResizable(cell) {
     const style = this.getCurrentCellStyle(cell);
 
-    const r = this.isCellsResizable() && !this.isCellLocked(cell) && style.resizeable;
+    const r =
+      this.isCellsResizable() && !this.isCellLocked(cell) && (style.resizable ?? true);
 
     return r;
   },
@@ -2806,7 +2806,7 @@ const GraphCellsMixin: PartialType = {
   isCellBendable(cell) {
     const style = this.getCurrentCellStyle(cell);
 
-    return this.isCellsBendable() && !this.isCellLocked(cell) && style.bendable;
+    return this.isCellsBendable() && !this.isCellLocked(cell) && !!style.bendable;
   },
 
   /**
@@ -2838,7 +2838,7 @@ const GraphCellsMixin: PartialType = {
   isAutoSizeCell(cell) {
     const style = this.getCurrentCellStyle(cell);
 
-    return this.isAutoSizeCells() || style.autosize;
+    return this.isAutoSizeCells() || !!style.autosize;
   },
 
   /**

packages/core/src/view/cell/vertex/VertexHandler.ts

@@ -58,8 +58,6 @@ import SelectionCellsHandler from '../../selection/SelectionCellsHandler';
  * state - <mxCellState> of the cell to be resized.
  */
 class VertexHandler {
-  dependencies = ['selection', 'cells'];
-
   constructor(state: CellState) {
     this.state = state;
     this.graph = this.state.view.graph;

packages/core/src/view/connection/ConnectionHandler.ts

@@ -25,7 +25,7 @@ import InternalMouseEvent from '../event/InternalMouseEvent';
 import ImageShape from '../geometry/shape/node/ImageShape';
 import CellMarker from '../cell/CellMarker';
 import ConstraintHandler from './ConstraintHandler';
-import Polyline from '../geometry/shape/edge/Polyline';
+import PolylineShape from '../geometry/shape/edge/PolylineShape';
 import EventSource from '../event/EventSource';
 import Rectangle from '../geometry/Rectangle';
 import mxLog from '../../util/gui/mxLog';
@@ -322,9 +322,9 @@ class ConnectionHandler extends EventSource implements GraphPlugin {
   /**
    * Variable: enabled
    *
-   * Specifies if events are handled. Default is true.
+   * Specifies if events are handled. Default is false.
    */
-  enabled = true;
+  enabled = false;
 
   /**
    * Variable: select
@@ -555,7 +555,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin {
     const shape =
       this.livePreview && this.edgeState
         ? this.graph.cellRenderer.createShape(this.edgeState)
-        : new Polyline([], INVALID_COLOR);
+        : new PolylineShape([], INVALID_COLOR);
 
     if (shape && shape.node) {
       shape.dialect = DIALECT_SVG;

packages/core/src/view/geometry/shape/ActorShape.ts

@@ -33,7 +33,7 @@ import { NONE } from '../../../util/Constants';
  * }
  * ```
  */
-class Actor extends Shape {
+class ActorShape extends Shape {
   constructor(
     bounds: Rectangle | null = null,
     fill: ColorValue = NONE,
@@ -71,4 +71,4 @@ class Actor extends Shape {
   }
 }
 
-export default Actor;
+export default ActorShape;

packages/core/src/view/geometry/shape/Shape.ts

@@ -738,7 +738,7 @@ class Shape {
    * Sets the state of the canvas for drawing the shape.
    */
   configureCanvas(c: AbstractCanvas2D, x: number, y: number, w: number, h: number) {
-    let dash = NONE;
+    let dash: string | null = null;
 
     if (this.style) {
       dash = this.style.dashPattern;
@@ -758,7 +758,9 @@ class Shape {
       c.setDashed(this.isDashed, this.style?.fixDash ?? false);
     }
 
-    c.setDashPattern(dash);
+    if (dash) {
+      c.setDashPattern(dash);
+    }
 
     if (this.fill !== NONE && this.gradient !== NONE) {
       const b = this.getGradientBounds(c, x, y, w, h);

packages/core/src/view/geometry/shape/edge/ArrowConnectorShape.ts

@@ -19,7 +19,7 @@ import { ColorValue } from '../../../../types';
  *
  * This shape is registered under {@link mxConstants.SHAPE_ARROW_CONNECTOR} in {@link mxCellRenderer}.
  */
-class ArrowConnector extends Shape {
+class ArrowConnectorShape extends Shape {
   constructor(
     points: Point[],
     fill: ColorValue,
@@ -483,4 +483,4 @@ class ArrowConnector extends Shape {
   }
 }
 
-export default ArrowConnector;
+export default ArrowConnectorShape;

packages/core/src/view/geometry/shape/edge/ArrowShape.ts

@@ -16,7 +16,7 @@ import { ColorValue } from '../../../../types';
  *
  * This shape is registered under {@link mxConstants.SHAPE_ARROW} in {@link mxCellRenderer}.
  */
-class Arrow extends Shape {
+class ArrowShape extends Shape {
   constructor(
     points: Point[],
     fill: ColorValue,
@@ -100,4 +100,4 @@ class Arrow extends Shape {
   }
 }
 
-export default Arrow;
+export default ArrowShape;

packages/core/src/view/geometry/shape/edge/ConnectorShape.ts

@@ -5,9 +5,8 @@
  * Type definitions from the typed-mxgraph project
  */
 import { DEFAULT_MARKERSIZE, NONE } from '../../../../util/Constants';
-import Polyline from './Polyline';
+import PolylineShape from './PolylineShape';
-import { getNumber } from '../../../../util/Utils';
+import MarkerShape from './MarkerShape';
-import Marker from './Marker';
 import Point from '../../Point';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
@@ -18,10 +17,10 @@ import { ColorValue } from '../../../../types';
  * The connector shape allows for arrow heads on either side.
  * This shape is registered under {@link mxConstants.SHAPE_CONNECTOR} in {@link mxCellRenderer}.
  *
- * @class Connector
+ * @class ConnectorShape
- * @extends {Polyline}
+ * @extends {PolylineShape}
  */
-class Connector extends Polyline {
+class ConnectorShape extends PolylineShape {
   constructor(points: Point[], stroke: ColorValue, strokewidth: number) {
     super(points, stroke, strokewidth);
   }
@@ -101,9 +100,9 @@ class Connector extends Polyline {
 
       // Allow for stroke width in the end point used and the
       // orthogonal vectors describing the direction of the marker
-      const filled = source ? this.style.startFill : this.style.endFill;
+      const filled = !(source ? this.style.startFill : this.style.endFill);
 
-      result = Marker.createMarker(
+      result = MarkerShape.createMarker(
         c,
         this,
         type,
@@ -143,4 +142,4 @@ class Connector extends Polyline {
   }
 }
 
-export default Connector;
+export default ConnectorShape;

packages/core/src/view/geometry/shape/edge/LineShape.ts

@@ -15,7 +15,7 @@ import { ColorValue } from '../../../../types';
  * @class Line
  * @extends {Shape}
  */
-class Line extends Shape {
+class LineShape extends Shape {
   constructor(bounds: Rectangle, stroke: ColorValue, strokeWidth = 1, vertical = false) {
     super();
     this.bounds = bounds;
@@ -56,4 +56,4 @@ class Line extends Shape {
   }
 }
 
-export default Line;
+export default LineShape;

packages/core/src/view/geometry/shape/edge/MarkerShape.ts

@@ -17,9 +17,9 @@ import Shape from '../Shape';
 /**
  * A static class that implements all markers for VML and SVG using a registry.
  * NOTE: The signatures in this class will change.
- * @class Marker
+ * @class MarkerShape
  */
-class Marker {
+class MarkerShape {
   /**
    * Maps from markers names to functions to paint the markers.
    *
@@ -32,7 +32,7 @@ class Marker {
    * function to paint the marker onto the given canvas.
    */
   static addMarker(type: string, funct: Function) {
-    Marker.markers[type] = funct;
+    MarkerShape.markers[type] = funct;
   }
 
   /**
@@ -52,7 +52,7 @@ class Marker {
     sw: number,
     filled: boolean
   ) {
-    const funct = Marker.markers[type];
+    const funct = MarkerShape.markers[type];
     return funct
       ? funct(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
       : null;
@@ -120,10 +120,10 @@ class Marker {
     };
   }
 
-  Marker.addMarker('classic', createArrow(2));
+  MarkerShape.addMarker('classic', createArrow(2));
-  Marker.addMarker('classicThin', createArrow(3));
+  MarkerShape.addMarker('classicThin', createArrow(3));
-  Marker.addMarker('block', createArrow(2));
+  MarkerShape.addMarker('block', createArrow(2));
-  Marker.addMarker('blockThin', createArrow(3));
+  MarkerShape.addMarker('blockThin', createArrow(3));
 
   function createOpenArrow(widthFactor = 2) {
     return (
@@ -170,10 +170,10 @@ class Marker {
     };
   }
 
-  Marker.addMarker('open', createOpenArrow(2));
+  MarkerShape.addMarker('open', createOpenArrow(2));
-  Marker.addMarker('openThin', createOpenArrow(3));
+  MarkerShape.addMarker('openThin', createOpenArrow(3));
 
-  Marker.addMarker(
+  MarkerShape.addMarker(
     'oval',
     (
       canvas: AbstractCanvas2D,
@@ -255,8 +255,8 @@ class Marker {
     };
   }
 
-  Marker.addMarker('diamond', diamond);
+  MarkerShape.addMarker('diamond', diamond);
-  Marker.addMarker('diamondThin', diamond);
+  MarkerShape.addMarker('diamondThin', diamond);
 })();
 
-export default Marker;
+export default MarkerShape;

packages/core/src/view/geometry/shape/edge/PolylineShape.ts

@@ -30,7 +30,7 @@ import { ColorValue } from '../../../../types';
  * strokewidth - Optional integer that defines the stroke width. Default is
  * 1. This is stored in <strokewidth>.
  */
-class Polyline extends Shape {
+class PolylineShape extends Shape {
   constructor(points: Point[], stroke: ColorValue, strokeWidth = 1) {
     super();
     this.points = points;
@@ -111,4 +111,4 @@ class Polyline extends Shape {
   }
 }
 
-export default Polyline;
+export default PolylineShape;

packages/core/src/view/geometry/shape/node/CloudShape.ts

@@ -4,16 +4,16 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
-import Actor from '../Actor';
+import ActorShape from '../ActorShape';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
 
 /**
- * Extends {@link Actor} to implement a cloud shape.
+ * Extends {@link ActorShape} to implement a cloud shape.
  *
  * This shape is registered under {@link mxConstants.SHAPE_CLOUD} in {@link cellRenderer}.
  */
-class CloudShape extends Actor {
+class CloudShape extends ActorShape {
   constructor(bounds: Rectangle, fill: string, stroke: string, strokeWidth = 1) {
     super();
     this.bounds = bounds;

packages/core/src/view/geometry/shape/node/HexagonShape.ts

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
-import Actor from '../Actor';
+import ActorShape from '../ActorShape';
 import Point from '../../Point';
 import { LINE_ARCSIZE } from '../../../../util/Constants';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
@@ -12,9 +12,9 @@ import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 /**
  * Implementation of the hexagon shape.
  * @class HexagonShape
- * @extends {Actor}
+ * @extends {ActorShape}
  */
-class HexagonShape extends Actor {
+class HexagonShape extends ActorShape {
   constructor() {
     super();
   }

packages/core/src/view/geometry/shape/node/TriangleShape.ts

@@ -6,16 +6,16 @@
  */
 
 import Point from '../../Point';
-import Actor from '../Actor';
+import ActorShape from '../ActorShape';
 import { LINE_ARCSIZE } from '../../../../util/Constants';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 
 /**
  * Implementation of the triangle shape.
  * @class TriangleShape
- * @extends {Actor}
+ * @extends {ActorShape}
  */
-class TriangleShape extends Actor {
+class TriangleShape extends ActorShape {
   constructor() {
     super();
   }

packages/core/src/view/page_breaks/GraphPageBreaksMixin.ts

@@ -1,6 +1,6 @@
 import Rectangle from '../geometry/Rectangle';
 import Point from '../geometry/Point';
-import Polyline from '../geometry/shape/edge/Polyline';
+import PolylineShape from '../geometry/shape/edge/PolylineShape';
 import { Graph } from '../Graph';
 import { mixInto } from '../../util/Utils';
 
@@ -111,7 +111,7 @@ const GraphPageBreaksMixin: PartialType = {
             breaks[i].points = pts;
             breaks[i].redraw();
           } else {
-            const pageBreak = new Polyline(pts, this.getPageBreakColor());
+            const pageBreak = new PolylineShape(pts, this.getPageBreakColor());
             pageBreak.dialect = this.getDialect();
             pageBreak.pointerEvents = false;
             pageBreak.isDashed = this.isPageBreakDashed();

packages/core/src/view/panning/PanningHandler.ts

@@ -164,9 +164,9 @@ class PanningHandler extends EventSource implements GraphPlugin {
   /**
    * Variable: panningEnabled
    *
-   * Specifies if panning should be enabled. Default is true.
+   * Specifies if panning should be enabled. Default is false.
    */
-  panningEnabled = true;
+  panningEnabled = false;
 
   /**
    * Variable: pinchEnabled

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

@@ -253,6 +253,7 @@ const GraphSelectionMixin: PartialType = {
         tmp.push(cells[i]);
       }
     }
+
     this.changeSelection(tmp, this.cells);
   },
 

packages/core/src/view/tooltip/TooltipHandler.ts

@@ -131,9 +131,9 @@ class TooltipHandler implements GraphPlugin {
   /**
    * Variable: enabled
    *
-   * Specifies if events are handled. Default is true.
+   * Specifies if events are handled. Default is false.
    */
-  enabled = true;
+  enabled = false;
 
   /**
    * Function: isEnabled

packages/core/src/view/zoom/GraphZoomMixin.ts

@@ -10,7 +10,7 @@ declare module '../Graph' {
     zoomIn: () => void;
     zoomOut: () => void;
     zoomActual: () => void;
-    zoomTo: (scale: number, center: boolean) => void;
+    zoomTo: (scale: number, center?: boolean) => void;
     zoom: (factor: number, center?: boolean) => void;
     zoomToRect: (rect: Rectangle) => void;
   }

packages/html/stories/Anchors.stories.js

@@ -5,7 +5,7 @@ import {
   ConnectionHandler,
   ConnectionConstraint,
   Geometry,
-  Polyline,
+  PolylineShape,
   Point,
   CellState,
 } from '@maxgraph/core';
@@ -81,7 +81,7 @@ const Template = ({ label, ...args }) => {
   }
 
   // Edges have no connection points
-  Polyline.prototype.constraints = null;
+  PolylineShape.prototype.constraints = null;
 
   // Creates the graph inside the given container
   const graph = new MyCustomGraph(container);

packages/html/stories/Markers.stories.js

@@ -3,9 +3,9 @@ import {
   EdgeHandler,
   GraphHandler,
   CellRenderer,
-  Marker,
+  MarkerShape,
   CylinderShape,
-  Arrow,
+  ArrowShape,
   Point,
 } from '@maxgraph/core';
 
@@ -32,7 +32,7 @@ const Template = ({ label, ...args }) => {
   EdgeHandler.prototype.snapToTerminals = true;
 
   // Registers and defines the custom marker
-  Marker.addMarker(
+  MarkerShape.addMarker(
     'dash',
     function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
       const nx = unitX * (size + sw + 1);
@@ -66,7 +66,7 @@ const Template = ({ label, ...args }) => {
   CellRenderer.registerShape('message', MessageShape);
 
   // Defines custom edge shape
-  class LinkShape extends Arrow {
+  class LinkShape extends ArrowShape {
     paintEdgeShape(c, pts) {
       const width = 10;