diff --git a/src/mxgraph/layout/mxCompactTreeLayout.js b/src/mxgraph/layout/mxCompactTreeLayout.js
index 1f4b1f132..e34c2b96a 100644
--- a/src/mxgraph/layout/mxCompactTreeLayout.js
+++ b/src/mxgraph/layout/mxCompactTreeLayout.js
@@ -7,6 +7,10 @@
import mxDictionary from '../util/mxDictionary';
import mxPoint from '../util/mxPoint';
import mxGraphLayout from './mxGraphLayout';
+import mxCellPath from "../model/mxCellPath";
+import mxRectangle from "../util/mxRectangle";
+import mxUtils from "../util/mxUtils";
+import WeightedCellSorter from "./WeightedCellSorter";
class mxCompactTreeLayout extends mxGraphLayout {
/**
diff --git a/src/mxgraph/shape/mxRhombus.js b/src/mxgraph/shape/mxRhombus.js
index 26ce8f79c..719f2cebb 100644
--- a/src/mxgraph/shape/mxRhombus.js
+++ b/src/mxgraph/shape/mxRhombus.js
@@ -5,6 +5,8 @@
*/
import mxShape from './mxShape';
import mxPoint from '../util/mxPoint';
+import mxUtils from "../util/mxUtils";
+import mxConstants from "../util/mxConstants";
class mxRhombus extends mxShape {
/**
diff --git a/src/mxgraph/util/mxWindow.js b/src/mxgraph/util/mxWindow.js
index 25de418ff..98f57e6d5 100644
--- a/src/mxgraph/util/mxWindow.js
+++ b/src/mxgraph/util/mxWindow.js
@@ -9,6 +9,9 @@ import mxEventObject from './mxEventObject';
import mxEventSource from './mxEventSource';
import mxUtils from './mxUtils';
import mxEvent from './mxEvent';
+import mxClient from "../mxClient";
+import mxConstants from "./mxConstants";
+
class mxWindow extends mxEventSource {
/**
diff --git a/src/mxgraph/view/mxPerimeter.js b/src/mxgraph/view/mxPerimeter.js
index b068afd01..b1b3655a9 100644
--- a/src/mxgraph/view/mxPerimeter.js
+++ b/src/mxgraph/view/mxPerimeter.js
@@ -6,6 +6,7 @@
import mxUtils from '../util/mxUtils';
import mxPoint from '../util/mxPoint';
+import mxConstants from "../util/mxConstants";
const mxPerimeter = {
/**
diff --git a/src/mxgraph/view/mxSwimlaneManager.js b/src/mxgraph/view/mxSwimlaneManager.js
index 975ea2311..8a001285a 100644
--- a/src/mxgraph/view/mxSwimlaneManager.js
+++ b/src/mxgraph/view/mxSwimlaneManager.js
@@ -4,6 +4,12 @@
* Updated to ES9 syntax by David Morrissey 2021
*/
+import mxEventSource from "../util/mxEventSource";
+import mxUtils from "../util/mxUtils";
+import mxEvent from "../util/mxEvent";
+import mxConstants from "../util/mxConstants";
+import mxRectangle from "../util/mxRectangle";
+
class mxSwimlaneManager extends mxEventSource {
/**
* Variable: graph
diff --git a/src/pages/DragSource.js b/src/pages/DragSource.js
index 20cbb3a7b..6bcfb36cb 100644
--- a/src/pages/DragSource.js
+++ b/src/pages/DragSource.js
@@ -123,7 +123,7 @@ class DragSource extends React.Component {
const img = mxUtils.createImage('images/icons48/gear.png');
img.style.width = '48px';
img.style.height = '48px';
- document.body.appendChild(img);
+ this.el.appendChild(img);
// Creates the element that is being for the actual preview.
const dragElt = document.createElement('div');
diff --git a/src/pages/Perimeter.js b/src/pages/Perimeter.js
index ca4db47ff..06c5bc185 100644
--- a/src/pages/Perimeter.js
+++ b/src/pages/Perimeter.js
@@ -9,8 +9,10 @@ import React from 'react';
import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
+import mxUtils from "../mxgraph/util/mxUtils";
+import mxGraphView from "../mxgraph/view/mxGraphView";
-class MYNAMEHERE extends React.Component {
+class Perimeter extends React.Component {
constructor(props) {
super(props);
}
@@ -20,106 +22,109 @@ class MYNAMEHERE extends React.Component {
return (
<>
{
this.el = el;
}}
style={{
-
+ overflow: 'hidden',
+ position: 'relative',
+ width: '321px',
+ height: '241px',
+ background: "url('editors/images/grid.gif')",
+ cursor: 'default',
}}
/>
>
);
- };
+ }
componentDidMount() {
+ // Redirects the perimeter to the label bounds if intersection
+ // between edge and label is found
+ const mxGraphViewGetPerimeterPoint =
+ mxGraphView.prototype.getPerimeterPoint;
+ mxGraphView.prototype.getPerimeterPoint = function(
+ terminal,
+ next,
+ orthogonal,
+ border
+ ) {
+ let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
- };
+ if (point != null) {
+ const perimeter = this.getPerimeterFunction(terminal);
+
+ if (terminal.text != null && terminal.text.boundingBox != null) {
+ // Adds a small border to the label bounds
+ const b = terminal.text.boundingBox.clone();
+ b.grow(3);
+
+ if (mxUtils.rectangleIntersectsSegment(b, point, next)) {
+ point = perimeter(b, terminal, next, orthogonal);
+ }
+ }
+ }
+
+ return point;
+ };
+
+ // Creates the graph inside the given container
+ const graph = new mxGraph(this.el);
+ graph.setVertexLabelsMovable(true);
+ graph.setConnectable(true);
+
+ // Uncomment the following if you want the container
+ // to fit the size of the graph
+ // graph.setResizeContainer(true);
+
+ // Enables rubberband selection
+ new mxRubberband(graph);
+
+ // Gets the default parent for inserting new cells. This
+ // is normally the first child of the root (ie. layer 0).
+ const parent = graph.getDefaultParent();
+
+ // Adds cells to the model in a single step
+ graph.getModel().beginUpdate();
+ try {
+ const v1 = graph.insertVertex(
+ parent,
+ null,
+ 'Label',
+ 20,
+ 20,
+ 80,
+ 30,
+ 'verticalLabelPosition=bottom'
+ );
+ const v2 = graph.insertVertex(
+ parent,
+ null,
+ 'Label',
+ 200,
+ 20,
+ 80,
+ 30,
+ 'verticalLabelPosition=bottom'
+ );
+ const v3 = graph.insertVertex(
+ parent,
+ null,
+ 'Label',
+ 20,
+ 150,
+ 80,
+ 30,
+ 'verticalLabelPosition=bottom'
+ );
+ var e1 = graph.insertEdge(parent, null, '', v1, v2);
+ var e1 = graph.insertEdge(parent, null, '', v1, v3);
+ } finally {
+ // Updates the display
+ graph.getModel().endUpdate();
+ }
+ }
}
-export default MYNAMEHERE;
-
-
- function main(container)
- {
- // Checks if the browser is supported
- if (!mxClient.isBrowserSupported())
- {
- // Displays an error message if the browser is not supported.
- mxUtils.error('Browser is not supported!', 200, false);
- }
- else
- {
- // Redirects the perimeter to the label bounds if intersection
- // between edge and label is found
- mxGraphViewGetPerimeterPoint = mxGraphView.prototype.getPerimeterPoint;
- mxGraphView.prototype.getPerimeterPoint = function(terminal, next, orthogonal, border)
- {
- let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
-
- if (point != null)
- {
- let perimeter = this.getPerimeterFunction(terminal);
-
- if (terminal.text != null && terminal.text.boundingBox != null)
- {
- // Adds a small border to the label bounds
- let b = terminal.text.boundingBox.clone();
- b.grow(3)
-
- if (mxUtils.rectangleIntersectsSegment(b, point, next))
- {
- point = perimeter(b, terminal, next, orthogonal);
- }
- }
- }
-
- return point;
- };
-
- // Creates the graph inside the given container
- let graph = new mxGraph(container);
- graph.setVertexLabelsMovable(true);
- graph.setConnectable(true);
-
- // Uncomment the following if you want the container
- // to fit the size of the graph
- //graph.setResizeContainer(true);
-
- // Enables rubberband selection
- new mxRubberband(graph);
-
- // Gets the default parent for inserting new cells. This
- // is normally the first child of the root (ie. layer 0).
- let parent = graph.getDefaultParent();
-
- // Adds cells to the model in a single step
- graph.getModel().beginUpdate();
- try
- {
- var v1 = graph.insertVertex(parent, null, 'Label', 20, 20, 80, 30, 'verticalLabelPosition=bottom');
- var v2 = graph.insertVertex(parent, null, 'Label', 200, 20, 80, 30, 'verticalLabelPosition=bottom');
- var v3 = graph.insertVertex(parent, null, 'Label', 20, 150, 80, 30, 'verticalLabelPosition=bottom');
- var e1 = graph.insertEdge(parent, null, '', v1, v2);
- var e1 = graph.insertEdge(parent, null, '', v1, v3);
- }
- finally
- {
- // Updates the display
- graph.getModel().endUpdate();
- }
- }
- };
-
-
-
-
-
-
-
-
-
-
-