maxGraph · gelvidge · Jan 8, 2022 · Mar 15, 2022 · Mar 22, 2022 · Mar 24, 2022
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@lerna/filter-options": "^4.0.0",
     "babel-loader": "^8.2.3",
     "better-docs": "^2.3.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",
     "jsdoc": "^3.6.7",
@@ -46,4 +47,5 @@
     "webpack-merge": "^5.8.0"
   },
   "sideEffects": true
+
 }
diff --git a/packages/core/css/common.css b/packages/core/css/common.css
@@ -42,7 +42,7 @@ table.MaxWindow {
   	font-family: Arial;
 	font-size: 8pt;
 }
-td.mxWindowTitle {
+td.MaxWindowTitle {
 	background: url(data:image/gif;base64,R0lGODlhFwAXAMQAANfX18rKyuHh4c7OzsDAwMHBwc/Pz+Li4uTk5NHR0dvb2+jo6O/v79/f3/n5+dnZ2dbW1uPj44yMjNPT0+Dg4N3d3ebm5szMzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAXABcAAAWQICESxWiW5Ck6bOu+MMvMdG3f86LvfO/rlqBwSCwaj8ikUohoOp/QaDNCrVqvWKpgezhsv+AwmEIum89ocmPNbrvf64p8Tq/b5Yq8fs/v5x+AgYKDhIAAh4iJiouHEI6PkJGSjhOVlpeYmZUJnJ2en6CcBqMDpaanqKgXq6ytrq+rAbKztLW2shK5uru8vbkhADs=)  repeat-x;
 	_background: url('../images/window-title.gif') repeat-x;
 	text-overflow: ellipsis;
@@ -56,27 +56,27 @@ td.mxWindowTitle {
  	padding-bottom: 6px;
  	color: black;
 }
-td.mxWindowPane {
+td.MaxWindowPane {
 	vertical-align: top;
 	padding: 0px;
 }
-div.mxWindowPane {
+div.MaxWindowPane {
 	overflow: hidden;
 	position: relative;
 }
-td.mxWindowPane td {
+td.MaxWindowPane td {
   	font-family: Arial;
 	font-size: 8pt;
 }
-td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio {
+td.MaxWindowPane input, td.MaxWindowPane select, td.MaxWindowPane textarea, td.MaxWindowPane radio {
   	border-color: #8C8C8C;
   	border-style: solid;
   	border-width: 1px;
   	font-family: Arial;
 	font-size: 8pt;
  	padding: 1px;
 }
-td.mxWindowPane button {
+td.MaxWindowPane button {
 	background: url(data:image/gif;base64,R0lGODlhCgATALMAAP7+/t7e3vj4+Ojo6OXl5e/v7/n5+fb29vPz8/39/e3t7fHx8e7u7v///wAAAAAAACH5BAAAAAAALAAAAAAKABMAAAQ2MMlJhb0Y6c2X/2AhjiRjnqiirizqMkEsz0Rt30Ou7y8K/ouDcEg0GI9IgHLJbDif0Kh06owAADs=) repeat-x;
 	_background: url('../images/button.gif') repeat-x;
   	font-family: Arial;

diff --git a/packages/core/images/check.png b/packages/core/images/check.png
diff --git a/packages/core/images/connector.gif b/packages/core/images/connector.gif
diff --git a/packages/core/images/dot.gif b/packages/core/images/dot.gif
diff --git a/packages/core/images/error.png b/packages/core/images/error.png
diff --git a/packages/core/images/fit_to_size.png b/packages/core/images/fit_to_size.png
diff --git a/packages/core/images/flash.png b/packages/core/images/flash.png
diff --git a/packages/core/images/forbidden.png b/packages/core/images/forbidden.png
diff --git a/packages/core/images/help.png b/packages/core/images/help.png
diff --git a/packages/core/images/house.png b/packages/core/images/house.png
diff --git a/packages/core/images/information.png b/packages/core/images/information.png
diff --git a/packages/core/images/lightbulb_on.png b/packages/core/images/lightbulb_on.png
diff --git a/packages/core/images/pencil.png b/packages/core/images/pencil.png
diff --git a/packages/core/images/plus.png b/packages/core/images/plus.png
diff --git a/packages/core/images/printer.png b/packages/core/images/printer.png
diff --git a/packages/core/images/users3.png b/packages/core/images/users3.png
diff --git a/packages/core/images/workplace.png b/packages/core/images/workplace.png
diff --git a/packages/core/src/gui/MaxWindow.ts b/packages/core/src/gui/MaxWindow.ts
@@ -177,7 +177,7 @@ class MaxWindow extends EventSource {
     minimizable: boolean=true,
     movable: boolean=true,
     replaceNode: HTMLElement | null=null,
-    style: string=''
+    style: string | undefined =undefined
   ) {
     super();
 

diff --git a/packages/core/src/serialization/Codec.ts b/packages/core/src/serialization/Codec.ts
@@ -13,6 +13,9 @@ import MaxLog from '../gui/MaxLog';
 import { getFunctionName } from '../util/StringUtils';
 import { importNode, isNode } from '../util/domUtils';
 import ObjectCodec from './ObjectCodec';
+import GraphDataModel from '../view/GraphDataModel';
+import Geometry from '../view/geometry/Geometry';
+import Point from '../view/geometry/Point';
 
 const createXmlDocument = () => {
   return document.implementation.createDocument('', '', null);
@@ -339,6 +342,20 @@ class Codec {
    * @param into Optional object to be decodec into.
    */
   decode(node: Element, into?: any): any {
+
+
+    //****Edit note - there may be other classes needed here????******
+    const classMap = {
+      "GraphDataModel": GraphDataModel,
+      "Geometry": Geometry,
+      "Point":Point,
+      "Array": Array,
+      "Object": Object,
+      "Boolean": Boolean,
+
+
+
+  }; 
     this.updateElements();
     let obj = null;
 
@@ -347,11 +364,11 @@ class Codec {
 
       try {
         // @ts-ignore
-        ctor = window[node.nodeName];
+        ctor = classMap[node.nodeName]
+        if (ctor == undefined) console.log(node.nodeName)
       } catch (err) {
-        // ignore
+        console.log(err)// ignore
       }
-
       const dec = CodecRegistry.getCodec(ctor);
 
       if (dec != null) {

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -82,6 +82,7 @@ export type CellStateStyle = {
   imageBorder?: ColorValue;
   imageHeight?: number;
   imageWidth?: number;
+  imageVerticalAlign?: VAlignValue;
   indicatorColor?: ColorValue;
   indicatorDirection?: DirectionValue;
   indicatorHeight?: number;

diff --git a/packages/core/src/util/Utils.ts b/packages/core/src/util/Utils.ts
@@ -60,6 +60,22 @@ export const mixInto = (dest: any) => (mixin: any) => {
   }
 };
 
+//getBBox of SVG element before rendered in DOM
+
+export function svgBBox (svgEl: SVGGElement){
+  let tempDiv = document.createElement('div')
+  tempDiv.setAttribute('style', "position:absolute; visibility:hidden; width:0, height:0")
+  document.body.appendChild(tempDiv)
+  let tempSvg = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
+  tempDiv.appendChild(tempSvg)
+  let tempEl = svgEl.cloneNode(true)
+  tempSvg.appendChild(tempEl)
+  let bb = (<SVGGElement>tempEl).getBBox()
+  document.body.removeChild(tempDiv)
+  return bb 
+
+}
+
 /**
  * Returns the value for the given key in the given associative array or
  * the given default value if the value is null.

diff --git a/packages/core/src/util/cloneUtils.ts b/packages/core/src/util/cloneUtils.ts
@@ -25,11 +25,11 @@ export const clone = function _clone(obj: any, transients: string[] | null=null,
         i != ObjectIdentity.FIELD_NAME &&
         (transients == null || transients.indexOf(i) < 0)
       ) {
-        if (!shallow && typeof obj[i] === 'object') {
+       if (!shallow && typeof obj[i] === 'object') {
           clone[i] = _clone(obj[i]);
         } else {
           clone[i] = obj[i];
-        }
+      }
       }
     }
   }

diff --git a/packages/core/src/util/styleUtils.ts b/packages/core/src/util/styleUtils.ts
@@ -19,8 +19,10 @@ import Rectangle from '../view/geometry/Rectangle';
 import Cell from '../view/cell/Cell';
 import GraphDataModel from '../view/GraphDataModel';
 import CellArray from '../view/cell/CellArray';
+import {clone} from './cloneUtils'
 import { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from 'src/types';
 
+
 /**
  * Removes the cursors from the style of the given DOM node and its
  * descendants.
@@ -438,9 +440,10 @@ export const setCellStyles = (
 
         if (cell) {
           const style = cell.getStyle();
-          style[key] = value;
+          const styleClone =clone(style)
+          styleClone[key] = value;
 
-          model.setStyle(cell, style);
+          model.setStyle(cell, styleClone);
         }
       }
     } finally {
@@ -490,6 +493,7 @@ export const setStyle = (style: string | null, key: string, value: any) => {
           next < 0 ? ';' : style.substring(next)
         }`;
       } else {
+
         style = style.substring(0, index) + (next < 0 ? ';' : style.substring(next));
       }
     }

diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts
@@ -580,10 +580,8 @@ class Graph extends EventSource {
       const newParent = change.child.getParent();
       this.view.invalidate(change.child, true, true);
 
-      if (
-        newParent &&
-        (!this.getDataModel().contains(newParent) || newParent.isCollapsed())
-      ) {
+      if (newParent == null || !this.getDataModel().contains(newParent) || newParent.isCollapsed())
+       {
         this.view.invalidate(change.child, true, true);
         this.removeStateForCell(change.child);
 
@@ -1370,7 +1368,7 @@ class Graph extends EventSource {
   setAllowLoops(value: boolean) {
     this.allowLoops = value;
   }
-
+  
   /**
    * Returns {@link recursiveResize}.
    *

diff --git a/packages/core/src/view/GraphDataModel.ts b/packages/core/src/view/GraphDataModel.ts
@@ -389,7 +389,7 @@ export class GraphDataModel extends EventSource {
    * @param {Cell} cell  that represents the possible layer.
    */
   isLayer(cell: Cell) {
-    return this.isRoot(cell.getParent());
+    return cell != null  && this.isRoot(cell.getParent());
   }
 
   /**

diff --git a/packages/core/src/view/GraphView.ts b/packages/core/src/view/GraphView.ts
@@ -801,7 +801,7 @@ export class GraphView extends EventSource {
 
     if (cell) {
       state = this.getState(cell);
-
+      
       if (state) {
         if (state.invalid) {
           state.invalid = false;
@@ -857,14 +857,14 @@ export class GraphView extends EventSource {
    * @param state {@link CellState} to be updated.
    */
   updateCellState(state: CellState) {
-    const absoluteOffset = state.absoluteOffset;
-    const origin = state.origin;
+  const absoluteOffset = state.absoluteOffset;
+  const origin = state.origin;
 
-    absoluteOffset.x = 0;
-    absoluteOffset.y = 0;
-    origin.x = 0;
-    origin.y = 0;
-    state.length = 0;
+  absoluteOffset.x = 0;
+  absoluteOffset.y = 0;
+  origin.x = 0;
+  origin.y = 0;
+  state.length = 0;
 
     if (state.cell !== this.currentRoot) {
       const parent = state.cell.getParent();
@@ -890,11 +890,11 @@ export class GraphView extends EventSource {
 
           if (geo.relative && pState) {
             if (pState.cell.isEdge()) {
-              const origin = this.getPoint(pState, geo);
+              const originP = this.getPoint(pState, geo);
 
-              if (origin) {
-                origin.x += origin.x / this.scale - pState.origin.x - this.translate.x;
-                origin.y += origin.y / this.scale - pState.origin.y - this.translate.y;
+              if (originP) {
+                origin.x += (originP.x / this.scale) - pState.origin.x - this.translate.x;
+                origin.y += (originP.y / this.scale) - pState.origin.y - this.translate.y;
               }
             } else {
               origin.x += geo.x * pState.unscaledWidth + offset.x;
@@ -1216,7 +1216,7 @@ export class GraphView extends EventSource {
     pts.push((<Point[]>edge.absolutePoints)[0]);
     const edgeStyle = this.getEdgeStyle(edge, points, source, target);
 
-    if (edgeStyle && source) {
+    if (edgeStyle) {
       // target can be null
       const src = this.getTerminalPort(edge, source, true);
       const trg = target ? this.getTerminalPort(edge, target, false) : null;
@@ -1387,16 +1387,16 @@ export class GraphView extends EventSource {
    */
   getFloatingTerminalPoint(
     edge: CellState,
-    start: CellState,
+    start: CellState| null,
     end: CellState | null,
     source: boolean
   ) {
     start = this.getTerminalPort(edge, start, source);
     let next = this.getNextPoint(edge, end, source);
 
     const orth = this.graph.isOrthogonal(edge);
-    const alpha = toRadians(start.style.rotation ?? 0);
-    const center = new Point(start.getCenterX(), start.getCenterY());
+    const alpha = toRadians(start?.style.rotation ?? 0);
+    const center = new Point(start?.getCenterX(), start?.getCenterY());
 
     if (alpha !== 0) {
       const cos = Math.cos(-alpha);
@@ -1427,7 +1427,7 @@ export class GraphView extends EventSource {
    * @param terminal {@link CellState} that represents the terminal.
    * @param source Boolean indicating if the given terminal is the source terminal.
    */
-  getTerminalPort(state: CellState, terminal: CellState, source: boolean = false) {
+  getTerminalPort(state: CellState, terminal: CellState|null, source: boolean = false) {
     const key = source ? 'sourcePort' : 'targetPort';
     const id = state.style[key];
 
@@ -1460,7 +1460,7 @@ export class GraphView extends EventSource {
    * @param border Optional border between the perimeter and the shape.
    */
   getPerimeterPoint(
-    terminal: CellState,
+    terminal: CellState|null,
     next: Point,
     orthogonal: boolean,
     border = 0
@@ -2193,7 +2193,7 @@ export class GraphView extends EventSource {
       }
     };
 
-    this.endHandler = (evt: MouseEvent) => {
+    this.endHandler = (evt: MouseEvent) => {      
       if (
         this.captureDocumentGesture &&
         graph.isMouseDown &&

diff --git a/packages/core/src/view/canvas/SvgCanvas2D.ts b/packages/core/src/view/canvas/SvgCanvas2D.ts
@@ -994,9 +994,10 @@ class SvgCanvas2D extends AbstractCanvas2D {
    * Private helper function to create SVG elements
    */
   roundrect(x: number, y: number, w: number, h: number, dx: number, dy: number) {
-    if (!this.node) return;
+
+    this.rect(x, y, w, h); //creates this.node
 
-    this.rect(x, y, w, h);
+    if(!this.node)return
 
     if (dx > 0) {
       this.node.setAttribute('rx', String(this.format(dx * this.state.scale)));
@@ -1559,7 +1560,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
       tr += `rotate(${rotation},${this.format(x * s.scale)},${this.format(y * s.scale)})`;
     }
 
-    if (dir != null) {
+    if (dir != '') {
       node.setAttribute('direction', dir);
     }
 
@@ -1819,9 +1820,9 @@ class SvgCanvas2D extends AbstractCanvas2D {
         }
 
         bbox = new Rectangle(
-          (x + 1) * s.scale,
+          x  * s.scale,
           (y + 2) * s.scale,
-          w * s.scale,
+          (w +1) * s.scale,
           (h + 1) * s.scale
         );
       }
@@ -1835,7 +1836,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
         n.setAttribute('width', String(Math.ceil(bbox.width + 2)));
         n.setAttribute('height', String(Math.ceil(bbox.height)));
 
-        const sw = s.fontBorderColor ? Math.max(1, this.format(s.scale)) : 0;
+        const sw = s.fontBorderColor !== 'none' ? Math.max(1, this.format(s.scale)) : 0;
         n.setAttribute('stroke-width', String(sw));
 
         // Workaround for crisp rendering - only required if not exporting

diff --git a/packages/core/src/view/cell/TemporaryCellStates.ts b/packages/core/src/view/cell/TemporaryCellStates.ts
@@ -57,11 +57,11 @@ class TemporaryCellStates {
 
     // Overrides doRedrawShape and paint shape to add links on shapes
     if (getLinkForCellState != null) {
-      (<Graph>view.graph).cellRenderer.doRedrawShape = (state: CellState) => {
+      (<Graph>view.graph).cellRenderer.doRedrawShape = function(state: CellState) {
         const shape = <Shape>state?.shape;
         const oldPaint = shape.paint;
 
-        shape.paint = (c) => {
+        shape.paint = function (c) {
           const link = getLinkForCellState(state);
           if (link != null) {
             c.setLink(link);
@@ -80,7 +80,7 @@ class TemporaryCellStates {
     // Overrides validateCellState to ignore invisible cells
     view.validateCellState = (cell, recurse) => {
       if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) {
-        return (<Function>self.oldDoRedrawShape).apply(view, [cell, recurse]);
+        return (<Function>self.oldValidateCellState).apply(view, [cell, recurse]);
       }
       return null;
     };

diff --git a/packages/core/src/view/geometry/edge/ConnectorShape.ts b/packages/core/src/view/geometry/edge/ConnectorShape.ts
@@ -100,7 +100,7 @@ class ConnectorShape extends PolylineShape {
 
       // 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 = Boolean(source ? this.style.startFill : this.style.endFill);
 
       result = MarkerShape.createMarker(
         c,