Repository: maxGraph/maxGraph
Pull request #426 (2024-05-27 13:46:35)

fix: remove unused `Graph.isFoldingEnabled` property
The property is no longer used to configure folding since version 0.1.0, and the property in the "options" property must be used instead.
It should therefore be deleted to avoid any configuration problems.



Patch:
diff --git a/packages/core/src/util/xmlUtils.ts b/packages/core/src/util/xmlUtils.ts
index 9dc3b2aaa..6a71785a4 100644
--- a/packages/core/src/util/xmlUtils.ts
+++ b/packages/core/src/util/xmlUtils.ts
@@ -108,8 +108,7 @@ export const getViewXml = (
  * no linefeed is defined.
  *
  * @param node DOM node to return the XML for.
- * @param linefeed Optional string that linefeeds are converted into. Default is
- * &#xa;
+ * @param linefeed Optional string that linefeeds are converted into. Default is `\&#xa;`.
  */
 export const getXml = (node: Element, linefeed = '&#xa;'): string => {
   const xmlSerializer = new XMLSerializer();
diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts
index 5bb040be8..0ce493483 100644
--- a/packages/core/src/view/Graph.ts
+++ b/packages/core/src/view/Graph.ts
@@ -96,7 +96,6 @@ class Graph extends EventSource {
 
   graphModelChangeListener: Function | null = null;
   paintBackground: Function | null = null;
-  foldingEnabled: null | boolean = null;
   isConstrainedMoving = false;
 
   // ===================================================================================================================
diff --git a/packages/core/src/view/canvas/XmlCanvas2D.ts b/packages/core/src/view/canvas/XmlCanvas2D.ts
index 2b49b8f66..0c77a5bcb 100644
--- a/packages/core/src/view/canvas/XmlCanvas2D.ts
+++ b/packages/core/src/view/canvas/XmlCanvas2D.ts
@@ -42,7 +42,7 @@ import { DirectionValue, TextDirectionValue } from '../../types';
  *   <setFontFamily>, <setFontStyle>
  * - <setShadow>, <setShadowColor>, <setShadowAlpha>, <setShadowOffset>
  * - <rect>, <roundrect>, <ellipse>, <image>, <text>
- * - <begin>, {@link oveTo}, <lineTo>, <quadTo>, <curveTo>
+ * - <begin>, {@link moveTo}, <lineTo>, <quadTo>, <curveTo>
  * - <stroke>, <fill>, <fillAndStroke>
  *
  * <AbstractCanvas2D.arcTo> is an additional method for drawing paths. This is
@@ -53,8 +53,8 @@ import { DirectionValue, TextDirectionValue } from '../../types';
  *
  * Constructs a new abstract canvas.
  */
-class mxXmlCanvas2D extends AbstractCanvas2D {
-  constructor(root: SVGElement) {
+class XmlCanvas2D extends AbstractCanvas2D {
+  constructor(root: Element) {
     super();
 
     this.root = root;
@@ -66,7 +66,7 @@ class mxXmlCanvas2D extends AbstractCanvas2D {
   /**
    * Reference to the container for the SVG content.
    */
-  root: SVGElement;
+  root: Element;
 
   /**
    * Specifies if text output should be enabled.
@@ -991,4 +991,4 @@ class mxXmlCanvas2D extends AbstractCanvas2D {
   }
 }
 
-export default mxXmlCanvas2D;
+export default XmlCanvas2D;
diff --git a/packages/core/src/view/image/ImageExport.ts b/packages/core/src/view/image/ImageExport.ts
index 4f2d05721..7786a8734 100644
--- a/packages/core/src/view/image/ImageExport.ts
+++ b/packages/core/src/view/image/ImageExport.ts
@@ -22,30 +22,29 @@ import Shape from '../geometry/Shape';
 import { Graph } from '../Graph';
 
 /**
- * Creates a new image export instance to be used with an export canvas. Here
- * is an example that uses this class to create an image via a backend using
- * {@link XmlExportCanvas}.
+ * Creates a new image export instance to be used with an export canvas.
+ *
+ * Here is an example that uses this class to create an image via a backend using {@link XmlCanvas2D}.
  *
  * ```javascript
- * var xmlDoc = mxUtils.createXmlDocument();
- * var root = xmlDoc.createElement('output');
+ * const xmlDoc = xmlUtils.createXmlDocument();
+ * const root = xmlDoc.createElement('output');
  * xmlDoc.appendChild(root);
  *
- * var xmlCanvas = new mxXmlCanvas2D(root);
- * var imgExport = new mxImageExport();
+ * const xmlCanvas = new XmlCanvas2D(root);
+ * const imgExport = new ImageExport();
+ *
  * imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
+ * const xml = xmlUtils.getXml(root);
  *
- * var bounds = graph.getGraphBounds();
- * var w = Math.ceil(bounds.x + bounds.width);
- * var h = Math.ceil(bounds.y + bounds.height);
+ * const bounds = graph.getGraphBounds();
+ * const w = Math.ceil(bounds.x + bounds.width);
+ * const h = Math.ceil(bounds.y + bounds.height);
  *
- * var xml = mxUtils.getXml(root);
  * new MaxXmlRequest('export', 'format=png&w=' + w +
  * 		'&h=' + h + '&bg=#F9F7ED&xml=' + encodeURIComponent(xml))
  * 		.simulate(document, '_blank');
  * ```
- *
- * @class ImageExport
  */
 class ImageExport {
   /**
diff --git a/packages/core/src/view/other/Outline.ts b/packages/core/src/view/other/Outline.ts
index 49e258213..739f8bd22 100644
--- a/packages/core/src/view/other/Outline.ts
+++ b/packages/core/src/view/other/Outline.ts
@@ -325,7 +325,7 @@ class Outline {
       defaultPlugins,
       this.source.getStylesheet()
     );
-    graph.foldingEnabled = false;
+    graph.options.foldingEnabled = false;
     graph.autoScroll = false;
     return graph;
   }
diff --git a/packages/html/stories/Constituent.stories.js b/packages/html/stories/Constituent.stories.js
index 83c03c689..977dec5f9 100644
--- a/packages/html/stories/Constituent.stories.js
+++ b/packages/html/stories/Constituent.stories.js
@@ -54,9 +54,11 @@ const Template = ({ label, ...args }) => {
   }
 
   class MyCustomGraph extends Graph {
-    foldingEnabled = false;
-
-    recursiveResize = true;
+    constructor(container) {
+      super(container);
+      this.options.foldingEnabled = false;
+      this.recursiveResize = true;
+    }
 
     isPart(cell) {
       // Helper method to mark parts with constituent=1 in the style
diff --git a/packages/html/stories/Orthogonal.stories.js b/packages/html/stories/Orthogonal.stories.js
index c13b43a49..3fbac6e85 100644
--- a/packages/html/stories/Orthogonal.stories.js
+++ b/packages/html/stories/Orthogonal.stories.js
@@ -69,7 +69,7 @@ const Template = ({ label, ...args }) => {
   // Creates the graph inside the given container
   const graph = new Graph(container);
   graph.disconnectOnMove = false;
-  graph.foldingEnabled = false;
+  graph.options.foldingEnabled = false;
   graph.cellsResizable = false;
   graph.extendParents = false;
   graph.setConnectable(true);
diff --git a/packages/html/stories/Wires.stories.js b/packages/html/stories/Wires.stories.js
index 3d882ad99..24b79285a 100644
--- a/packages/html/stories/Wires.stories.js
+++ b/packages/html/stories/Wires.stories.js
@@ -721,7 +721,7 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
   graph.setConnectableEdges(true);
   graph.setDisconnectOnMove(false);
-  graph.foldingEnabled = false;
+  graph.options.foldingEnabled = false;
 
   //Maximum size
   graph.maximumGraphBounds = new Rectangle(0, 0, 800, 600);


Test patch:
diff --git a/packages/core/__tests__/view/image/ImageExport.test.ts b/packages/core/__tests__/view/image/ImageExport.test.ts
new file mode 100644
index 000000000..1ab461434
--- /dev/null
+++ b/packages/core/__tests__/view/image/ImageExport.test.ts
@@ -0,0 +1,71 @@
+/*
+Copyright 2024-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test } from '@jest/globals';
+import { ImageExport, Point, XmlCanvas2D } from '../../../src';
+import { createXmlDocument, getPrettyXml } from '../../../src/util/xmlUtils';
+import { createGraphWithoutContainer } from '../../utils';
+
+test('export with XmlCanvas2D', () => {
+  const graph = createGraphWithoutContainer();
+  const parent = graph.getDefaultParent();
+
+  graph.batchUpdate(() => {
+    const v1 = graph.insertVertex({
+      parent,
+      id: 'v1',
+      value: 'vertex 1',
+      position: [0, 0],
+      size: [80, 30],
+    });
+    const v2 = graph.insertVertex({
+      parent,
+      id: 'v2',
+      value: 'vertex 2',
+      position: [100, 100],
+      size: [80, 30],
+    });
+
+    graph.insertEdge(parent, null, '', v1, v2);
+    const e1 = graph.insertEdge({
+      parent,
+      id: 'e1',
+      value: 'edge 1',
+      source: v1,
+      target: v2,
+    });
+    e1.geometry!.points = [new Point(50, 50)];
+  });
+
+  const xmlDoc = createXmlDocument();
+  const root = xmlDoc.createElement('data');
+  xmlDoc.appendChild(root);
+
+  const xmlCanvas = new XmlCanvas2D(root);
+  const imgExport = new ImageExport();
+
+  imgExport.drawState(graph.getView().getState(graph.model.root!)!, xmlCanvas);
+  const xml = getPrettyXml(root);
+
+  expect(xml).toBe(`<data>
+  <fontfamily family="Arial,Helvetica" />
+  <fontsize size="11" />
+  <shadowcolor color="gray" />
+  <shadowalpha alpha="1" />
+  <shadowoffset dx="2" dy="3" />
+</data>
+`);
+});