zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Refactored the stories for storybook to work

development
Junsik Shim 2021-08-30 23:20:26 +09:00
parent 61648e43ce
commit 0adb9fa1d3
107 changed files with 2266 additions and 3203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/core/src/editor/mxEditor.js
View File

@ -13,7 +13,7 @@ import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout';
import mxDefaultToolbar from './mxDefaultToolbar';
import StackLayout from '../view/layout/layout/StackLayout';
import EventObject from '../view/event/EventObject';
import utils, { getOffset } from '../util/Utils';
import { getOffset } from '../util/Utils';
import mxCodec from '../util/serialization/mxCodec';
import mxWindow, { error } from '../util/gui/mxWindow';
import mxForm from '../util/gui/mxForm';
@ -40,7 +40,7 @@ import RootChange from '../view/model/RootChange';
import ValueChange from '../view/cell/ValueChange';
import CellAttributeChange from '../view/cell/CellAttributeChange';
import PrintPreview from '../view/printing/PrintPreview';
import mxClipboard from '../util/storage/mxClipboard';
import mxClipboard from '../util/storage/Clipboard';
import mxLog from '../util/gui/mxLog';
import { isNode } from '../util/DomUtils';
import { getViewXml, getXml } from '../util/XmlUtils';
@ -1292,10 +1292,7 @@ class mxEditor extends EventSource {
const current = editor.graph.getView().scale * 100;
const scale =
parseFloat(
prompt(
Resources.get(editor.askZoomResource) || editor.askZoomResource,
current
)
prompt(Resources.get(editor.askZoomResource) || editor.askZoomResource, current)
) / 100;
if (!isNaN(scale)) {
@ -1362,8 +1359,7 @@ class mxEditor extends EventSource {
*/
// resetFirstTime(): void;
resetFirstTime() {
document.cookie =
'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
document.cookie = 'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
}
/**
@ -1677,10 +1673,8 @@ class mxEditor extends EventSource {
if (
change instanceof RootChange ||
(change instanceof ValueChange &&
change.cell === this.graph.model.root) ||
(change instanceof CellAttributeChange &&
change.cell === this.graph.model.root)
(change instanceof ValueChange && change.cell === this.graph.model.root) ||
(change instanceof CellAttributeChange && change.cell === this.graph.model.root)
) {
this.fireEvent(new EventObject(InternalEvent.ROOT));
break;
@ -1801,9 +1795,7 @@ class mxEditor extends EventSource {
this.addListener(InternalEvent.SAVE, () => {
const tstamp = new Date().toLocaleString();
this.setStatus(
`${
Resources.get(this.lastSavedResource) || this.lastSavedResource
}: ${tstamp}`
`${Resources.get(this.lastSavedResource) || this.lastSavedResource}: ${tstamp}`
);
});
@ -1811,10 +1803,9 @@ class mxEditor extends EventSource {
// when new files are opened
this.addListener(InternalEvent.OPEN, () => {
this.setStatus(
`${
Resources.get(this.currentFileResource) ||
this.currentFileResource
}: ${this.filename}`
`${Resources.get(this.currentFileResource) || this.currentFileResource}: ${
this.filename
}`
);
});
}
@ -2045,15 +2036,7 @@ class mxEditor extends EventSource {
post(url, `${this.postParameterName}=${data}`, (req) => {
this.fireEvent(
new EventObject(
InternalEvent.POST,
'request',
req,
'url',
url,
'data',
data
)
new EventObject(InternalEvent.POST, 'request', req, 'url', url, 'data', data)
);
});
}
@ -2292,11 +2275,7 @@ class mxEditor extends EventSource {
// model, which will also make the change
// part of the current transaction
for (let i = 0; i < attrs.length; i += 1) {
const edit = new CellAttributeChange(
cell,
attrs[i].nodeName,
texts[i].value
);
const edit = new CellAttributeChange(cell, attrs[i].nodeName, texts[i].value);
model.execute(edit);
}
@ -2446,8 +2425,7 @@ class mxEditor extends EventSource {
frame.style.backgroundColor = 'white';
const w = document.body.clientWidth;
const h =
document.body.clientHeight || document.documentElement.clientHeight;
const h = document.body.clientHeight || document.documentElement.clientHeight;
const wnd = new mxWindow(
Resources.get(this.helpResource) || this.helpResource,
@ -2716,13 +2694,7 @@ class mxEditor extends EventSource {
this.cycleAttribute(vertex);
this.fireEvent(
new EventObject(
InternalEvent.BEFORE_ADD_VERTEX,
'vertex',
vertex,
'parent',
parent
)
new EventObject(InternalEvent.BEFORE_ADD_VERTEX, 'vertex', vertex, 'parent', parent)
);
model.beginUpdate();
@ -2741,9 +2713,7 @@ class mxEditor extends EventSource {
if (vertex != null) {
this.graph.setSelectionCell(vertex);
this.graph.scrollCellToVisible(vertex);
this.fireEvent(
new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex)
);
this.fireEvent(new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex));
}
return vertex;

271
packages/core/src/index.ts
View File

@ -104,28 +104,28 @@ import RhombusShape from './view/geometry/shape/node/RhombusShape';
import StencilShape from './view/geometry/shape/node/StencilShape';
import StencilShapeRegistry from './view/geometry/shape/node/StencilShapeRegistry';
import * as mxConstants from './util/Constants';
import mxGuide from './util/Guide';
import * as Constants from './util/Constants';
import Guide from './util/Guide';
import Resources from './util/Resources';
import utils from './util/Utils';
import * as mxCloneUtils from './util/CloneUtils';
import * as mxDomUtils from './util/DomUtils';
import * as mxEventUtils from './util/EventUtils';
import * as mxGestureUtils from './util/GestureUtils';
import * as mxStringUtils from './util/StringUtils';
import * as mxXmlUtils from './util/XmlUtils';
import * as CloneUtils from './util/CloneUtils';
import * as DomUtils from './util/DomUtils';
import * as EventUtils from './util/EventUtils';
import * as GestureUtils from './util/GestureUtils';
import * as StringUtils from './util/StringUtils';
import * as XmlUtils from './util/XmlUtils';
import mxAnimation from './util/animate/mxAnimation';
import mxEffects from './util/animate/mxEffects';
import mxMorphing from './util/animate/mxMorphing';
import mxAbstractCanvas2D from './util/canvas/AbstractCanvas2D';
import mxSvgCanvas2D from './util/canvas/SvgCanvas2D';
import AbstractCanvas2D from './util/canvas/AbstractCanvas2D';
import SvgCanvas2D from './util/canvas/SvgCanvas2D';
import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D';
import Dictionary from './util/Dictionary';
import Geometry from './view/geometry/Geometry';
import mxObjectIdentity from './util/mxObjectIdentity';
import ObjectIdentity from './util/ObjectIdentity';
import Point from './view/geometry/Point';
import Rectangle from './view/geometry/Rectangle';
@ -147,11 +147,11 @@ import InternalMouseEvent from './view/event/InternalMouseEvent';
import mxForm from './util/gui/mxForm';
import mxLog from './util/gui/mxLog';
import mxPopupMenu from './util/gui/mxPopupMenu';
import PopupMenu from './util/gui/PopupMenu';
import mxToolbar from './util/gui/mxToolbar';
import mxWindow from './util/gui/mxWindow';
import Image from './view/image/ImageBox';
import ImageBox from './view/image/ImageBox';
import ImageBundle from './view/image/ImageBundle';
import ImageExport from './view/image/ImageExport';
@ -159,7 +159,7 @@ import mxUrlConverter from './util/network/mxUrlConverter';
import mxXmlRequest from './util/network/mxXmlRequest';
import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
import mxClipboard from './util/storage/mxClipboard';
import Clipboard from './util/storage/Clipboard';
import UndoableEdit from './view/model/UndoableEdit';
import mxUndoManager from './util/mxUndoManager';
@ -176,9 +176,8 @@ import TemporaryCellStates from './view/cell/TemporaryCellStates';
import ConnectionConstraint from './view/connection/ConnectionConstraint';
import Multiplicity from './view/validation/Multiplicity';
import graph from './view/Graph';
import Graph from './view/Graph';
import Model from './view/model/Model';
import mxGraphSelectionModel from './view/selection/mxGraphSelectionModel';
import GraphView from './view/view/GraphView';
import LayoutManager from './view/layout/LayoutManager';
import Outline from './view/Outline';
@ -190,124 +189,124 @@ import '../css/common.css';
export default {
mxClient,
mxLog,
mxObjectIdentity,
mxDictionary: Dictionary,
mxResources: Resources,
mxPoint: Point,
mxRectangle: Rectangle,
ObjectIdentity,
Dictionary,
Resources,
Point,
Rectangle,
mxEffects,
mxUtils: utils,
mxConstants,
mxEventObject: EventObject,
mxMouseEvent: InternalMouseEvent,
mxEventSource: EventSource,
mxEvent: InternalEvent,
utils,
Constants,
EventObject,
InternalMouseEvent,
EventSource,
InternalEvent,
mxXmlRequest,
mxClipboard,
Clipboard,
mxWindow,
mxForm,
mxImage: Image,
Image,
mxDivResizer,
mxDragSource: DragSource,
DragSource,
mxToolbar,
mxUndoableEdit: UndoableEdit,
UndoableEdit,
mxUndoManager,
mxUrlConverter,
mxPanningManager: PanningManager,
mxPopupMenu,
PanningManager,
PopupMenu,
mxAutoSaveManager,
mxAnimation,
mxMorphing,
mxImageBundle: ImageBundle,
mxImageExport: ImageExport,
mxAbstractCanvas2D,
ImageBox,
ImageBundle,
ImageExport,
AbstractCanvas2D,
mxXmlCanvas2D,
mxSvgCanvas2D,
mxGuide,
mxShape: Shape,
mxStencil: StencilShape,
mxStencilRegistry: StencilShapeRegistry,
mxMarker: Marker,
mxActor: Actor,
mxCloud: CloudShape,
mxRectangleShape: RectangleShape,
mxEllipse: EllipseShape,
mxDoubleEllipse: DoubleEllipseShape,
mxRhombus: RhombusShape,
mxPolyline: Polyline,
mxArrow: Arrow,
mxArrowConnector: ArrowConnector,
mxText: TextShape,
mxTriangle: TriangleShape,
mxHexagon: HexagonShape,
mxLine: Line,
mxImageShape: ImageShape,
mxLabel: Label,
mxCylinder: CylinderShape,
mxConnector: Connector,
mxSwimlane: SwimlaneShape,
mxGraphLayout: GraphLayout,
mxStackLayout: StackLayout,
mxPartitionLayout: PartitionLayout,
mxCompactTreeLayout: CompactTreeLayout,
mxRadialTreeLayout: RadialTreeLayout,
mxFastOrganicLayout: MxFastOrganicLayout,
mxCircleLayout: CircleLayout,
mxParallelEdgeLayout: ParallelEdgeLayout,
mxCompositeLayout: CompositeLayout,
mxEdgeLabelLayout: EdgeLabelLayout,
mxGraphAbstractHierarchyCell: MxGraphAbstractHierarchyCell,
mxGraphHierarchyNode: GraphHierarchyNode,
mxGraphHierarchyEdge: GraphHierarchyEdge,
mxGraphHierarchyModel: GraphHierarchyModel,
mxSwimlaneModel: SwimlaneModel,
mxHierarchicalLayoutStage: MxHierarchicalLayoutStage,
mxMedianHybridCrossingReduction: MedianHybridCrossingReduction,
mxMinimumCycleRemover: MinimumCycleRemover,
mxCoordinateAssignment: CoordinateAssignment,
SvgCanvas2D,
Guide,
Shape,
StencilShape,
StencilShapeRegistry,
Marker,
Actor,
CloudShape,
RectangleShape,
EllipseShape,
DoubleEllipseShape,
RhombusShape,
Polyline,
Arrow,
ArrowConnector,
TextShape,
TriangleShape,
HexagonShape,
Line,
ImageShape,
Label,
CylinderShape,
Connector,
SwimlaneShape,
GraphLayout,
StackLayout,
PartitionLayout,
CompactTreeLayout,
RadialTreeLayout,
MxFastOrganicLayout,
CircleLayout,
ParallelEdgeLayout,
CompositeLayout,
EdgeLabelLayout,
MxGraphAbstractHierarchyCell,
GraphHierarchyNode,
GraphHierarchyEdge,
GraphHierarchyModel,
SwimlaneModel,
MxHierarchicalLayoutStage,
MedianHybridCrossingReduction,
MinimumCycleRemover,
CoordinateAssignment,
mxSwimlaneOrdering,
mxHierarchicalLayout,
mxSwimlaneLayout: SwimlaneLayout,
mxGraphModel: Model,
mxCell: Cell,
mxGeometry: Geometry,
mxCellPath: CellPath,
mxPerimeter: Perimeter,
mxPrintPreview: PrintPreview,
mxStylesheet: Stylesheet,
mxCellState: CellState,
mxGraphSelectionModel,
mxCellEditor: CellEditor,
mxCellRenderer: CellRenderer,
mxEdgeStyle: EdgeStyle,
mxStyleRegistry: StyleRegistry,
mxGraphView: GraphView,
mxGraph: graph,
mxCellOverlay: CellOverlay,
mxOutline: Outline,
mxMultiplicity: Multiplicity,
mxLayoutManager: LayoutManager,
mxSwimlaneManager: SwimlaneManager,
mxTemporaryCellStates: TemporaryCellStates,
mxCellStatePreview: CellStatePreview,
mxConnectionConstraint: ConnectionConstraint,
mxGraphHandler: GraphHandler,
mxPanningHandler: PanningHandler,
mxPopupMenuHandler: PopupMenuHandler,
mxCellMarker: CellMarker,
mxSelectionCellsHandler: SelectionCellsHandler,
mxConnectionHandler: ConnectionHandler,
mxConstraintHandler: ConstraintHandler,
mxRubberband: RubberBand,
mxHandle: VertexHandle,
mxVertexHandler: VertexHandler,
mxEdgeHandler: EdgeHandler,
mxElbowEdgeHandler: ElbowEdgeHandler,
mxEdgeSegmentHandler: EdgeSegmentHandler,
SwimlaneLayout,
Model,
Cell,
Geometry,
CellPath,
Perimeter,
PrintPreview,
Stylesheet,
CellState,
CellEditor,
CellRenderer,
EdgeStyle,
StyleRegistry,
GraphView,
Graph,
CellOverlay,
Outline,
Multiplicity,
LayoutManager,
SwimlaneManager,
TemporaryCellStates,
CellStatePreview,
ConnectionConstraint,
GraphHandler,
PanningHandler,
PopupMenuHandler,
CellMarker,
SelectionCellsHandler,
ConnectionHandler,
ConstraintHandler,
RubberBand,
VertexHandle,
VertexHandler,
EdgeHandler,
ElbowEdgeHandler,
EdgeSegmentHandler,
mxKeyHandler,
mxTooltipHandler: TooltipHandler,
mxCellTracker: CellTracker,
mxCellHighlight: CellHighlight,
TooltipHandler,
CellTracker,
CellHighlight,
mxDefaultKeyHandler,
mxDefaultPopupMenu,
mxDefaultToolbar,
@ -328,22 +327,22 @@ export default {
// mxDefaultToolbarCodec,
// mxDefaultPopupMenuCodec,
// mxEditorCodec,
mxCloneUtils,
mxDomUtils,
mxEventUtils,
mxGestureUtils,
mxStringUtils,
mxXmlUtils,
CloneUtils,
DomUtils,
EventUtils,
GestureUtils,
StringUtils,
XmlUtils,
mxDomHelpers,
mxCellAttributeChange: CellAttributeChange,
mxChildChange: ChildChange,
mxCollapseChange: CollapseChange,
mxCurrentRootChange: CurrentRootChange,
mxGeometryChange: GeometryChange,
mxRootChange: RootChange,
mxSelectionChange: SelectionChange,
mxStyleChange: StyleChange,
mxTerminalChange: TerminalChange,
mxValueChange: ValueChange,
mxVisibleChange: VisibleChange,
CellAttributeChange,
ChildChange,
CollapseChange,
CurrentRootChange,
GeometryChange,
RootChange,
SelectionChange,
StyleChange,
TerminalChange,
ValueChange,
VisibleChange,
};

6
packages/core/src/util/CloneUtils.js
View File

@ -1,4 +1,4 @@
import mxObjectIdentity from "./mxObjectIdentity";
import ObjectIdentity from './ObjectIdentity';
/**
* Function: clone
@ -26,7 +26,7 @@ export const clone = function _clone(obj, transients, shallow) {
for (const i in obj) {
if (
i != mxObjectIdentity.FIELD_NAME &&
i != ObjectIdentity.FIELD_NAME &&
(transients == null || transients.indexOf(i) < 0)
) {
if (!shallow && typeof obj[i] === 'object') {
@ -39,4 +39,4 @@ export const clone = function _clone(obj, transients, shallow) {
}
return clone;
};
};

22
packages/core/src/util/gui/mxToolbar.js
View File

@ -5,10 +5,9 @@
* Type definitions from the typed-mxgraph project
*/
import utils from '../Utils';
import InternalEvent from '../../view/event/InternalEvent';
import Point from '../../view/geometry/Point';
import mxPopupMenu from './mxPopupMenu';
import PopupMenu from './PopupMenu';
import EventSource from '../../view/event/EventSource';
import EventObject from '../../view/event/EventObject';
import mxClient from '../../mxClient';
@ -109,7 +108,7 @@ class mxToolbar extends EventSource {
}
}
const mouseHandler = evt => {
const mouseHandler = (evt) => {
if (pressedIcon != null) {
img.setAttribute('src', icon);
} else {
@ -121,7 +120,7 @@ class mxToolbar extends EventSource {
// while it is being clicked with the mouse
InternalEvent.addGestureListeners(
img,
evt => {
(evt) => {
if (pressedIcon != null) {
img.setAttribute('src', pressedIcon);
} else {
@ -131,7 +130,7 @@ class mxToolbar extends EventSource {
// Popup Menu
if (factoryMethod != null) {
if (this.menu == null) {
this.menu = new mxPopupMenu();
this.menu = new PopupMenu();
this.menu.init();
}
@ -146,10 +145,7 @@ class mxToolbar extends EventSource {
this.currentImg = img;
this.menu.factoryMethod = factoryMethod;
const point = new Point(
img.offsetLeft,
img.offsetTop + img.offsetHeight
);
const point = new Point(img.offsetLeft, img.offsetTop + img.offsetHeight);
this.menu.popup(point.x, point.y, null, evt);
// Sets and overrides to restore classname
@ -209,7 +205,7 @@ class mxToolbar extends EventSource {
select.className = style || 'mxToolbarCombo';
this.addOption(select, title, null);
InternalEvent.addListener(select, 'change', evt => {
InternalEvent.addListener(select, 'change', (evt) => {
const value = select.options[select.selectedIndex];
select.selectedIndex = 0;
@ -266,7 +262,7 @@ class mxToolbar extends EventSource {
img.setAttribute('title', title);
}
InternalEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', (evt) => {
let tmp = this.selectedMode.altIcon;
if (tmp != null) {
@ -333,12 +329,12 @@ class mxToolbar extends EventSource {
}
if (this.enabled && toggle) {
InternalEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', (evt) => {
this.selectMode(img, funct);
this.noReset = false;
});
InternalEvent.addListener(img, 'dblclick', evt => {
InternalEvent.addListener(img, 'dblclick', (evt) => {
this.selectMode(img, funct);
this.noReset = true;
});

26
packages/core/src/util/serialization/mxObjectCodec.js
View File

@ -5,12 +5,12 @@
* Type definitions from the typed-mxgraph project
*/
import mxObjectIdentity from '../mxObjectIdentity';
import ObjectIdentity from '../ObjectIdentity';
import mxLog from '../gui/mxLog';
import Geometry from '../../view/geometry/Geometry';
import Point from '../../view/geometry/Point';
import { NODETYPE_ELEMENT } from '../Constants';
import utils, { isInteger, isNumeric } from '../Utils';
import { isInteger, isNumeric } from '../Utils';
import { getTextContent } from '../DomUtils';
import { load } from '../network/mxXmlRequest';
@ -303,7 +303,7 @@ class mxObjectCodec {
/**
* Returns true if the given attribute is to be ignored by the codec. This
* implementation returns true if the given fieldname is in {@link exclude} or
* if the fieldname equals {@link mxObjectIdentity.FIELD_NAME}.
* if the fieldname equals {@link ObjectIdentity.FIELD_NAME}.
*
* @param obj Object instance that contains the field.
* @param attr Fieldname of the field.
@ -313,9 +313,7 @@ class mxObjectCodec {
*/
// isExcluded(obj: any, attr: string, value: any, write?: boolean): boolean;
isExcluded(obj, attr, value, write) {
return (
attr == mxObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0
);
return attr == ObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0;
}
/**
@ -495,9 +493,7 @@ class mxObjectCodec {
node.appendChild(child);
} else {
mxLog.warn(
`mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`
);
mxLog.warn(`mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`);
}
}
@ -532,9 +528,7 @@ class mxObjectCodec {
*/
// isBooleanAttribute(enc: mxCodec, obj: any, name: string, value: any): boolean;
isBooleanAttribute(enc, obj, name, value) {
return (
typeof value.length === 'undefined' && (value == true || value == false)
);
return typeof value.length === 'undefined' && (value == true || value == false);
}
/**
@ -576,8 +570,7 @@ class mxObjectCodec {
attr.name === 'y' ||
attr.name === 'width' ||
attr.name === 'height')) ||
(obj.constructor === Point &&
(attr.name === 'x' || attr.name === 'y')) ||
(obj.constructor === Point && (attr.name === 'x' || attr.name === 'y')) ||
isNumeric(attr.value);
return result;
@ -782,10 +775,7 @@ class mxObjectCodec {
while (child != null) {
const tmp = child.nextSibling;
if (
child.nodeType === NODETYPE_ELEMENT &&
!this.processInclude(dec, child, obj)
) {
if (child.nodeType === NODETYPE_ELEMENT && !this.processInclude(dec, child, obj)) {
this.decodeChild(dec, child, obj);
}

5
packages/core/src/view/Graph.ts
View File

@ -203,6 +203,10 @@ type PartialDragDrop = Pick<
'isDropEnabled' | 'isAutoScroll' | 'isAutoExtend' | 'isSplitEnabled' | 'isSplitTarget'
>;
type PartialSwimlane = Pick<GraphSwimlane, 'getDropTarget'>;
type PartialPorts = Pick<
GraphPorts,
'isPort' | 'getTerminalForPort' | 'isPortsEnabled' | 'setPortsEnabled'
>;
type PartialClass = PartialEvents &
PartialSelection &
PartialCells &
@ -220,6 +224,7 @@ type PartialClass = PartialEvents &
PartialZoom &
PartialDragDrop &
PartialSwimlane &
PartialPorts &
EventSource;
export type MaxGraph = Graph & PartialClass;

11
packages/core/src/view/Outline.ts
View File

@ -15,7 +15,7 @@ import {
import Point from './geometry/Point';
import Rectangle from './geometry/Rectangle';
import RectangleShape from './geometry/shape/node/RectangleShape';
import graph from './Graph';
import graph, { MaxGraph } from './Graph';
import ImageShape from './geometry/shape/node/ImageShape';
import InternalEvent from './event/InternalEvent';
import utils from '../util/Utils';
@ -71,7 +71,7 @@ import EventSource from './event/EventSource';
* ```
*/
class Outline {
constructor(source: graph, container: HTMLElement | null = null) {
constructor(source: MaxGraph, container: HTMLElement | null = null) {
this.source = source;
if (container != null) {
@ -224,7 +224,7 @@ class Outline {
/**
* Reference to the source {@link graph}.
*/
source: graph;
source: MaxGraph;
/**
* Reference to the {@link graph} that renders the outline.
@ -576,10 +576,7 @@ class Outline {
this.active = true;
const sourceContainer = <HTMLElement>this.source.container;
if (
this.source.useScrollbarsForPanning &&
hasScrollbars(this.source.container)
) {
if (this.source.useScrollbarsForPanning && hasScrollbars(this.source.container)) {
this.dx0 = sourceContainer.scrollLeft;
this.dy0 = sourceContainer.scrollTop;
} else {

2
packages/core/src/view/cell/datatypes/CellState.ts
View File

@ -13,7 +13,7 @@ import Shape from '../../geometry/shape/Shape';
import TextShape from '../../geometry/shape/node/TextShape';
import Dictionary from '../../../util/Dictionary';
import { NONE } from '../../../util/Constants';
import { CellStateStyles } from 'packages/core/src/types';
import { CellStateStyles } from 'core/types';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
import CellOverlay from '../CellOverlay';

2
packages/core/src/view/cell/edge/EdgeHandler.ts
View File

@ -59,7 +59,7 @@ import {
import Graph, { MaxGraph } from '../../Graph';
import CellState from '../datatypes/CellState';
import Shape from '../../geometry/shape/Shape';
import { CellHandle, ColorValue, Listenable } from 'packages/core/src/types';
import { CellHandle, ColorValue, Listenable } from 'core/types';
import InternalMouseEvent from '../../event/InternalMouseEvent';
import Cell from '../datatypes/Cell';
import ImageBox from '../../image/ImageBox';

3
packages/core/src/view/cell/vertex/GraphVertex.ts
View File

@ -1,7 +1,6 @@
import Cell from '../datatypes/Cell';
import Geometry from '../../geometry/Geometry';
import CellArray from '../datatypes/CellArray';
import { autoImplement } from 'packages/core/src/util/Utils';
import { autoImplement } from 'core/util/Utils';
import type GraphCells from '../GraphCells';

2
packages/core/src/view/cell/vertex/VertexHandle.ts
View File

@ -26,7 +26,7 @@ import CellState from '../datatypes/CellState';
import CellArray from '../datatypes/CellArray';
import type { MaxGraph } from '../../Graph';
import type { CellHandle, CellStateStyles } from 'packages/core/src/types';
import type { CellHandle, CellStateStyles } from 'core/types';
/**
* Implements a single custom handle for vertices.

2
packages/core/src/view/cell/vertex/VertexHandler.ts
View File

@ -33,7 +33,7 @@ import Graph, { MaxGraph } from '../../Graph';
import CellState from '../datatypes/CellState';
import Image from '../../image/ImageBox';
import Cell from '../datatypes/Cell';
import { CellHandle, Listenable } from 'packages/core/src/types';
import { CellHandle, Listenable } from 'core/types';
import Shape from '../../geometry/shape/Shape';
import InternalMouseEvent from '../../event/InternalMouseEvent';
import VertexHandle from './VertexHandle';

4
packages/core/src/view/geometry/shape/Actor.ts
View File

@ -7,8 +7,8 @@
import Rectangle from '../Rectangle';
import Shape from './Shape';
import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D';
import { ColorValue } from 'packages/core/src/types';
import { NONE } from 'packages/core/src/util/Constants';
import { ColorValue } from 'core/types';
import { NONE } from 'core/util/Constants';
/**
* Extends {@link Shape} to implement an actor shape. If a custom shape with one

2
packages/core/src/view/geometry/shape/Shape.ts
View File

@ -23,7 +23,7 @@ import {
SHADOW_OFFSET_Y,
} from '../../../util/Constants';
import Point from '../Point';
import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D';
import InternalEvent from '../../event/InternalEvent';
import mxClient from '../../../mxClient';

2
packages/core/src/view/geometry/shape/edge/Arrow.ts
View File

@ -9,7 +9,7 @@ import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../../../util/Constan
import Rectangle from '../../Rectangle';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Point from '../../Point';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices.

2
packages/core/src/view/geometry/shape/edge/ArrowConnector.ts
View File

@ -11,7 +11,7 @@ import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Point from '../../Point';
import Rectangle from '../../Rectangle';
import CellState from '../../../cell/datatypes/CellState';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Extends {@link Shape} to implement an new rounded arrow shape with support for waypoints and double arrows. The

2
packages/core/src/view/geometry/shape/edge/Connector.ts
View File

@ -11,7 +11,7 @@ import Marker from './Marker';
import Point from '../../Point';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Rectangle from '../../Rectangle';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Extends {@link mxShape} to implement a connector shape.

2
packages/core/src/view/geometry/shape/edge/Line.ts
View File

@ -7,7 +7,7 @@
import Shape from '../Shape';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Rectangle from '../../Rectangle';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Extends {@link Shape} to implement a horizontal line shape.

4
packages/core/src/view/geometry/shape/edge/Marker.ts
View File

@ -4,8 +4,8 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import { ArrowType } from 'packages/core/src/types';
import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
import { ArrowType } from 'core/types';
import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
import {
ARROW_CLASSIC,
ARROW_CLASSIC_THIN,

2
packages/core/src/view/geometry/shape/edge/Polyline.ts
View File

@ -8,7 +8,7 @@ import Shape from '../Shape';
import { LINE_ARCSIZE } from '../../../../util/Constants';
import Point from '../../Point';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Class: mxPolyline

2
packages/core/src/view/geometry/shape/node/CylinderShape.ts
View File

@ -7,7 +7,7 @@
import Shape from '../Shape';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Rectangle from '../../Rectangle';
import { NONE } from 'packages/core/src/util/Constants';
import { NONE } from 'core/util/Constants';
/**
* Extends {@link Shape} to implement an cylinder shape. If a custom shape with one filled area and an overlay path is

2
packages/core/src/view/geometry/shape/node/ImageShape.ts
View File

@ -10,7 +10,7 @@ import Rectangle from '../../Rectangle';
import CellState from '../../../cell/datatypes/CellState';
import AbstractCanvas2D from '../../../../util/canvas/SvgCanvas2D';
import CellOverlay from '../../../cell/CellOverlay';
import { NONE } from 'packages/core/src/util/Constants';
import { NONE } from 'core/util/Constants';
/**
* Extends {@link mxShape} to implement an image shape.

4
packages/core/src/view/geometry/shape/node/LabelShape.ts
View File

@ -16,8 +16,8 @@ import {
NONE,
} from '../../../../util/Constants';
import RectangleShape from './RectangleShape';
import { ColorValue } from 'packages/core/src/types';
import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
import { ColorValue } from 'core/types';
import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
/**
* Class: mxLabel

2
packages/core/src/view/geometry/shape/node/RectangleShape.ts
View File

@ -13,7 +13,7 @@ import {
import Shape from '../Shape';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import Rectangle from '../../Rectangle';
import { ColorValue } from 'packages/core/src/types';
import { ColorValue } from 'core/types';
/**
* Extends {@link Shape} to implement a rectangle shape.

2
packages/core/src/view/geometry/shape/node/StencilShape.ts
View File

@ -24,7 +24,7 @@ import StencilShapeRegistry from './StencilShapeRegistry';
import { getChildNodes, getTextContent } from '../../../../util/DomUtils';
import Point from '../../Point';
import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
import { AlignValue, ColorValue, VAlignValue } from 'packages/core/src/types';
import { AlignValue, ColorValue, VAlignValue } from 'core/types';
/**
* Implements a generic shape which is based on a XML node as a description.

4
packages/core/src/view/geometry/shape/node/SwimlaneShape.ts
View File

@ -15,8 +15,8 @@ import {
NONE,
RECTANGLE_ROUNDING_FACTOR,
} from '../../../../util/Constants';
import { ColorValue } from 'packages/core/src/types';
import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
import { ColorValue } from 'core/types';
import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
/**
* Extends {@link Shape} to implement a swimlane shape.

4
packages/core/src/view/geometry/shape/node/TextShape.ts
View File

@ -47,8 +47,8 @@ import {
OverflowValue,
TextDirectionValue,
VAlignValue,
} from 'packages/core/src/types';
import SvgCanvas2D from 'packages/core/src/util/canvas/SvgCanvas2D';
} from 'core/types';
import SvgCanvas2D from 'core/util/canvas/SvgCanvas2D';
/**
* Extends mxShape to implement a text shape.

2
packages/core/src/view/geometry/shape/node/TriangleShape.ts
View File

@ -8,7 +8,7 @@
import Point from '../../Point';
import Actor from '../Actor';
import { LINE_ARCSIZE } from '../../../../util/Constants';
import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
/**
* Implementation of the triangle shape.

142
packages/core/src/view/grouping_ordering/GraphGrouping.ts
View File

@ -1,20 +1,53 @@
import Cell from "../cell/datatypes/Cell";
import CellArray from "../cell/datatypes/CellArray";
import {sortCells} from "../../util/Utils";
import Geometry from "../geometry/Geometry";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import Rectangle from "../geometry/Rectangle";
import Point from "../geometry/Point";
import Graph from "../Graph";
import Cell from '../cell/datatypes/Cell';
import CellArray from '../cell/datatypes/CellArray';
import { autoImplement, sortCells } from '../../util/Utils';
import Geometry from '../geometry/Geometry';
import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent';
import Rectangle from '../geometry/Rectangle';
import Point from '../geometry/Point';
import Graph from '../Graph';
import GraphSelection from '../selection/GraphSelection';
import GraphCells from '../cell/GraphCells';
import GraphSwimlane from '../swimlane/GraphSwimlane';
import GraphEdge from '../cell/edge/GraphEdge';
class GraphGrouping {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
type PartialGraph = Pick<
Graph,
| 'getModel'
| 'fireEvent'
| 'getView'
| 'getDefaultParent'
| 'batchUpdate'
| 'isValidRoot'
| 'getCurrentRoot'
>;
type PartialCells = Pick<
GraphCells,
| 'cellsAdded'
| 'cellsMoved'
| 'cellsResized'
| 'getBoundingBoxFromGeometry'
| 'cellsRemoved'
| 'getChildCells'
| 'moveCells'
>;
type PartialEdge = Pick<GraphEdge, 'addAllEdges'>;
type PartialSelection = Pick<
GraphSelection,
'getSelectionCells' | 'getSelectionCell' | 'clearSelection' | 'setSelectionCell'
>;
type PartialSwimlane = Pick<
GraphSwimlane,
'isSwimlane' | 'getStartSize' | 'getActualStartSize'
>;
type PartialClass = PartialGraph &
PartialCells &
PartialEdge &
PartialSelection &
PartialSwimlane;
class GraphGrouping extends autoImplement<PartialClass>() {
/*****************************************************************************
* Group: Grouping
*****************************************************************************/
@ -55,12 +88,12 @@ class GraphGrouping {
parent = <Cell>cells[0].getParent();
}
this.graph.model.beginUpdate();
this.getModel().beginUpdate();
try {
// Checks if the group has a geometry and
// creates one if one does not exist
if (group.getGeometry() == null) {
this.graph.model.setGeometry(group, new Geometry());
this.getModel().setGeometry(group, new Geometry());
}
// Adds the group into the parent
@ -84,7 +117,7 @@ class GraphGrouping {
// Resizes the group
this.cellsResized(new CellArray(group), [bounds], false);
this.graph.fireEvent(
this.fireEvent(
new EventObject(
InternalEvent.GROUP_CELLS,
'group',
@ -96,7 +129,7 @@ class GraphGrouping {
)
);
} finally {
this.graph.model.endUpdate();
this.getModel().endUpdate();
}
}
return group;
@ -125,10 +158,11 @@ class GraphGrouping {
/**
* Returns the bounds to be used for the given group and children.
*/
getBoundsForGroup(group: Cell,
children: CellArray,
border: number | null): Rectangle | null {
getBoundsForGroup(
group: Cell,
children: CellArray,
border: number | null
): Rectangle | null {
const result = this.getBoundingBoxFromGeometry(children, true);
if (result != null) {
if (this.isSwimlane(group)) {
@ -193,7 +227,7 @@ class GraphGrouping {
}
if (cells != null && cells.length > 0) {
this.graph.model.beginUpdate();
this.getModel().beginUpdate();
try {
for (let i = 0; i < cells.length; i += 1) {
let children = cells[i].getChildren();
@ -208,7 +242,7 @@ class GraphGrouping {
// Fix relative child cells
for (const child of children) {
const state = this.graph.view.getState(child);
const state = this.getView().getState(child);
let geo = child.getGeometry();
if (state != null && geo != null && geo.relative) {
@ -217,18 +251,16 @@ class GraphGrouping {
geo.y = (<Point>state.origin).y;
geo.relative = false;
this.graph.model.setGeometry(child, geo);
this.getModel().setGeometry(child, geo);
}
}
}
}
this.removeCellsAfterUngroup(cells);
this.graph.fireEvent(
new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells)
);
this.fireEvent(new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells));
} finally {
this.graph.model.endUpdate();
this.getModel().endUpdate();
}
}
return result;
@ -272,7 +304,7 @@ class GraphGrouping {
if (cells == null) {
cells = this.getSelectionCells();
}
this.graph.model.beginUpdate();
this.getModel().beginUpdate();
try {
const parent = this.getDefaultParent();
const index = parent.getChildCount();
@ -282,7 +314,7 @@ class GraphGrouping {
new EventObject(InternalEvent.REMOVE_CELLS_FROM_PARENT, 'cells', cells)
);
} finally {
this.graph.model.endUpdate();
this.getModel().endUpdate();
}
return cells;
}
@ -317,7 +349,7 @@ class GraphGrouping {
leftBorder: number = 0
): CellArray {
if (cells == null) {
cells = this.graph.selection.getSelectionCells();
cells = this.getSelectionCells();
}
border = border != null ? border : 0;
@ -327,7 +359,7 @@ class GraphGrouping {
bottomBorder = bottomBorder != null ? bottomBorder : 0;
leftBorder = leftBorder != null ? leftBorder : 0;
this.graph.batchUpdate(() => {
this.batchUpdate(() => {
for (let i = cells.length - 1; i >= 0; i--) {
let geo = cells[i].getGeometry();
if (geo == null) {
@ -348,32 +380,18 @@ class GraphGrouping {
geo = <Geometry>geo.clone();
if (moveGroup) {
geo.x = Math.round(
geo.x + bounds.x - border - size.x - leftBorder
);
geo.y = Math.round(
geo.y + bounds.y - border - size.y - topBorder
);
geo.x = Math.round(geo.x + bounds.x - border - size.x - leftBorder);
geo.y = Math.round(geo.y + bounds.y - border - size.y - topBorder);
}
geo.width = Math.round(
bounds.width +
2 * border +
size.x +
leftBorder +
rightBorder +
size.width
bounds.width + 2 * border + size.x + leftBorder + rightBorder + size.width
);
geo.height = Math.round(
bounds.height +
2 * border +
size.y +
topBorder +
bottomBorder +
size.height
bounds.height + 2 * border + size.y + topBorder + bottomBorder + size.height
);
this.graph.model.setGeometry(cells[i], geo);
this.getModel().setGeometry(cells[i], geo);
this.moveCells(
children,
border + size.x - bounds.x + leftBorder,
@ -402,7 +420,7 @@ class GraphGrouping {
cell = cell || this.getSelectionCell();
if (cell != null && this.isValidRoot(cell)) {
this.view.setCurrentRoot(cell);
this.getView().setCurrentRoot(cell);
this.clearSelection();
}
}
@ -416,30 +434,26 @@ class GraphGrouping {
const current = this.getCurrentRoot();
if (current != null) {
let next = <Cell>current.getParent();
let next = current.getParent();
// Finds the next valid root in the hierarchy
while (
next !== root &&
!this.isValidRoot(next) &&
next.getParent() !== root
) {
while (next !== root && !this.isValidRoot(next) && next.getParent() !== root) {
next = <Cell>next.getParent();
}
// Clears the current root if the new root is
// the model's root or one of the layers.
if (next === root || next.getParent() === root) {
this.view.setCurrentRoot(null);
this.getView().setCurrentRoot(null);
} else {
this.view.setCurrentRoot(next);
this.getView().setCurrentRoot(next);
}
const state = this.view.getState(current);
const state = this.getView().getState(current);
// Selects the previous root in the graph
if (state != null) {
this.selection.setSelectionCell(current);
this.setSelectionCell(current);
}
}
}

54
packages/core/src/view/grouping_ordering/GraphOrder.ts
View File

@ -1,16 +1,15 @@
import CellArray from "../cell/datatypes/CellArray";
import {sortCells} from "../../util/Utils";
import EventObject from "../event/EventObject";
import InternalEvent from "../event/InternalEvent";
import Graph from "../Graph";
import CellArray from '../cell/datatypes/CellArray';
import { autoImplement, sortCells } from '../../util/Utils';
import EventObject from '../event/EventObject';
import InternalEvent from '../event/InternalEvent';
import Graph from '../Graph';
import GraphSelection from '../selection/GraphSelection';
class GraphOrder {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
type PartialGraph = Pick<Graph, 'fireEvent' | 'batchUpdate' | 'getModel'>;
type PartialSelection = Pick<GraphSelection, 'getSelectionCells'>;
type PartialClass = PartialGraph & PartialSelection;
class GraphOrder extends autoImplement<PartialClass>() {
/*****************************************************************************
* Group: Order
*****************************************************************************/
@ -26,17 +25,22 @@ class GraphOrder {
*/
orderCells(
back: boolean = false,
cells: CellArray = this.graph.selection.getSelectionCells()
cells: CellArray = this.getSelectionCells()
): CellArray {
if (cells == null) {
cells = sortCells(this.graph.selection.getSelectionCells(), true);
cells = sortCells(this.getSelectionCells(), true);
}
this.graph.batchUpdate(() => {
this.batchUpdate(() => {
this.cellsOrdered(cells, back);
const event = new EventObject(InternalEvent.ORDER_CELLS, 'back', back, 'cells', cells);
this.graph.events.fireEvent(event);
const event = new EventObject(
InternalEvent.ORDER_CELLS,
'back',
back,
'cells',
cells
);
this.fireEvent(event);
});
return cells;
@ -49,25 +53,19 @@ class GraphOrder {
* @param cells Array of {@link mxCell} whose order should be changed.
* @param back Boolean that specifies if the cells should be moved to back.
*/
cellsOrdered(cells: CellArray,
back: boolean = false) {
this.graph.batchUpdate(() => {
cellsOrdered(cells: CellArray, back: boolean = false) {
this.batchUpdate(() => {
for (let i = 0; i < cells.length; i += 1) {
const parent = cells[i].getParent();
if (back) {
this.graph.model.add(parent, cells[i], i);
this.getModel().add(parent, cells[i], i);
} else {
this.graph.model.add(
parent,
cells[i],
parent ? parent.getChildCount() - 1 : 0
);
this.getModel().add(parent, cells[i], parent ? parent.getChildCount() - 1 : 0);
}
}
this.graph.events.fireEvent(
this.fireEvent(
new EventObject(InternalEvent.CELLS_ORDERED, 'back', back, 'cells', cells)
);
});

3
packages/core/src/view/image/ImageExport.ts
View File

@ -75,7 +75,8 @@ class ImageExport {
for (let i = 0; i < childCount; i += 1) {
const childState = graph.view.getState(state.cell.getChildAt(i));
this.visitStatesRecursive(childState, canvas, visitor);
if (childState) this.visitStatesRecursive(childState, canvas, visitor);
}
}
}

30
packages/core/src/view/layout/layout/FastOrganicLayout.ts
View File

@ -4,7 +4,7 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import mxObjectIdentity from '../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../util/ObjectIdentity';
import GraphLayout from './GraphLayout';
import Graph from '../../Graph';
import Cell from '../../cell/datatypes/Cell';
@ -186,8 +186,7 @@ class MxFastOrganicLayout extends GraphLayout {
*/
isVertexIgnored(vertex: Cell) {
return (
super.isVertexIgnored(vertex) ||
this.graph.getConnections(vertex).length === 0
super.isVertexIgnored(vertex) || this.graph.getConnections(vertex).length === 0
);
}
@ -237,7 +236,7 @@ class MxFastOrganicLayout extends GraphLayout {
this.cellLocation[i] = [];
// Set up the mapping from array indices to cells
const id = mxObjectIdentity.get(vertex);
const id = ObjectIdentity.get(vertex);
this.indices[id] = i;
const bounds = this.getVertexBounds(vertex);
@ -283,7 +282,7 @@ class MxFastOrganicLayout extends GraphLayout {
}
// Looks the cell up in the indices dictionary
const id = mxObjectIdentity.get(cells[j]);
const id = ObjectIdentity.get(cells[j]);
const index = this.indices[id];
// Check the connected cell in part of the vertex list to be
@ -309,11 +308,7 @@ class MxFastOrganicLayout extends GraphLayout {
}
// Main iteration loop
for (
this.iteration = 0;
this.iteration < this.maxIterations;
this.iteration += 1
) {
for (this.iteration = 0; this.iteration < this.maxIterations; this.iteration += 1) {
if (!this.allowedToRun) {
return;
}
@ -391,8 +386,7 @@ class MxFastOrganicLayout extends GraphLayout {
// Get the distance of displacement for this node for this
// iteration
let deltaLength = Math.sqrt(
this.dispX[index] * this.dispX[index] +
this.dispY[index] * this.dispY[index]
this.dispX[index] * this.dispX[index] + this.dispY[index] * this.dispY[index]
);
if (deltaLength < 0.001) {
@ -402,12 +396,10 @@ class MxFastOrganicLayout extends GraphLayout {
// Scale down by the current temperature if less than the
// displacement distance
const newXDisp =
(this.dispX[index] / deltaLength) *
Math.min(deltaLength, this.temperature);
(this.dispX[index] / deltaLength) * Math.min(deltaLength, this.temperature);
const newYDisp =
(this.dispY[index] / deltaLength) *
Math.min(deltaLength, this.temperature);
(this.dispY[index] / deltaLength) * Math.min(deltaLength, this.temperature);
// reset displacements
this.dispX[index] = 0;
@ -495,8 +487,7 @@ class MxFastOrganicLayout extends GraphLayout {
// Distance between nodes
const deltaLength = Math.sqrt(xDelta * xDelta + yDelta * yDelta);
let deltaLengthWithRadius =
deltaLength - this.radius[i] - this.radius[j];
let deltaLengthWithRadius = deltaLength - this.radius[i] - this.radius[j];
if (deltaLengthWithRadius > this.maxDistanceLimit) {
// Ignore vertices too far apart
@ -529,8 +520,7 @@ class MxFastOrganicLayout extends GraphLayout {
* fashion to zero.
*/
reduceTemperature() {
this.temperature =
this.initialTemp * (1.0 - this.iteration / this.maxIterations);
this.temperature = this.initialTemp * (1.0 - this.iteration / this.maxIterations);
}
}

8
packages/core/src/view/layout/layout/ParallelEdgeLayout.ts
View File

@ -7,7 +7,7 @@
import Point from '../../geometry/Point';
import GraphLayout from './GraphLayout';
import mxObjectIdentity from '../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../util/ObjectIdentity';
import Graph from '../../Graph';
import CellArray from '../../cell/datatypes/CellArray';
import Cell from '../../cell/datatypes/Cell';
@ -105,7 +105,7 @@ class ParallelEdgeLayout extends GraphLayout {
findParallels(parent: Cell, cells: CellArray) {
const lookup = [];
const addCell = cell => {
const addCell = (cell) => {
if (!this.isEdgeIgnored(cell)) {
const id = this.getEdgeId(cell);
@ -151,8 +151,8 @@ class ParallelEdgeLayout extends GraphLayout {
let pts = '';
if (src != null && trg != null) {
src = mxObjectIdentity.get(src);
trg = mxObjectIdentity.get(trg);
src = ObjectIdentity.get(src);
trg = ObjectIdentity.get(trg);
if (this.checkOverlap) {
const state = this.graph.view.getState(edge);

6
packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts
View File

@ -11,7 +11,7 @@ import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary';
import Rectangle from '../../../geometry/Rectangle';
import SwimlaneModel from './model/SwimlaneModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../../util/ObjectIdentity';
import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import CoordinateAssignment from './stage/CoordinateAssignment';
@ -694,7 +694,7 @@ class SwimlaneLayout extends GraphLayout {
cell.getParent() !== this.parent &&
cell.isVisible()
) {
result[mxObjectIdentity.get(cell)] = cell;
result[ObjectIdentity.get(cell)] = cell;
}
if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
@ -792,7 +792,7 @@ class SwimlaneLayout extends GraphLayout {
// Has this vertex been seen before in any traversal
// And if the filled vertex set is populated, only
// process vertices in that it contains
const vertexID = mxObjectIdentity.get(vertex);
const vertexID = ObjectIdentity.get(vertex);
if (
allVertices[vertexID] == null &&

46
packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts
View File

@ -4,65 +4,65 @@
* Updated to ES9 syntax by David Morrissey 2021
* Type definitions from the typed-mxgraph project
*/
import CellArray from 'core/view/cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
import CellArray from '../../../../cell/datatypes/CellArray';
class MxGraphAbstractHierarchyCell {
class GraphAbstractHierarchyCell extends Cell {
/**
* Variable: maxRank
*
* The maximum rank this cell occupies. Default is -1.
*/
maxRank: number = -1;
maxRank = -1;
/**
* Variable: minRank
*
* The minimum rank this cell occupies. Default is -1.
*/
minRank: number = -1;
minRank = -1;
/**
* Variable: x
*
* The x position of this cell for each layer it occupies
*/
x: number = null;
x: number[];
/**
* Variable: y
*
* The y position of this cell for each layer it occupies
*/
y: number = null;
y: number[];
/**
* Variable: width
*
* The width of this cell. Default is 0.
*/
width: number = 0;
width = 0;
/**
* Variable: height
*
* The height of this cell. Default is 0.
*/
height: number = 0;
height = 0;
/**
* Variable: nextLayerConnectedCells
*
* A cached version of the cells this cell connects to on the next layer up
*/
nextLayerConnectedCells: CellArray | null = null;
nextLayerConnectedCells: CellArray[] | null = null;
/**
* Variable: previousLayerConnectedCells
*
* A cached version of the cells this cell connects to on the next layer down
*/
previousLayerConnectedCells: CellArray | null = null;
previousLayerConnectedCells: CellArray[] | null = null;
/**
* Variable: temp
@ -74,7 +74,7 @@ class MxGraphAbstractHierarchyCell {
* be used for hashing the nodes in the model dfs and so hashCode
* was created
*/
temp: any = null;
temp: number[];
/**
* Class: mxGraphAbstractHierarchyCell
@ -86,6 +86,8 @@ class MxGraphAbstractHierarchyCell {
* Constructs a new hierarchical layout algorithm.
*/
constructor() {
super();
this.x = [];
this.y = [];
this.temp = [];
@ -96,7 +98,7 @@ class MxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells(layer: number): Cell | null {
getNextLayerConnectedCells(layer: number): CellArray | null {
return null;
}
@ -105,7 +107,7 @@ class MxGraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells(layer: number): Cell | null {
getPreviousLayerConnectedCells(layer: number): CellArray | null {
return null;
}
@ -114,7 +116,7 @@ class MxGraphAbstractHierarchyCell {
*
* Returns whether or not this cell is an edge
*/
isEdge(): boolean {
isEdge() {
return false;
}
@ -123,7 +125,7 @@ class MxGraphAbstractHierarchyCell {
*
* Returns whether or not this cell is a node
*/
isVertex(): boolean {
isVertex() {
return false;
}
@ -132,7 +134,7 @@ class MxGraphAbstractHierarchyCell {
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable(layer: number): null | number {
getGeneralPurposeVariable(layer: number): number | null {
return null;
}
@ -141,16 +143,14 @@ class MxGraphAbstractHierarchyCell {
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable(layer: number, value: number): null | void {
return null;
}
setGeneralPurposeVariable(layer: number, value: number) {}
/**
* Function: setX
*
* Set the value of x for the specified layer
*/
setX(layer: number, value: number): void {
setX(layer: number, value: number) {
if (this.isVertex()) {
this.x[0] = value;
} else if (this.isEdge()) {
@ -163,7 +163,7 @@ class MxGraphAbstractHierarchyCell {
*
* Gets the value of x on the specified layer
*/
getX(layer: number): number {
getX(layer: number) {
if (this.isVertex()) {
return this.x[0];
}
@ -178,7 +178,7 @@ class MxGraphAbstractHierarchyCell {
*
* Set the value of y for the specified layer
*/
setY(layer: number, value: number): void {
setY(layer: number, value: number) {
if (this.isVertex()) {
this.y[0] = value;
} else if (this.isEdge()) {
@ -187,4 +187,4 @@ class MxGraphAbstractHierarchyCell {
}
}
export default MxGraphAbstractHierarchyCell;
export default GraphAbstractHierarchyCell;

32
packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import GraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../../../util/ObjectIdentity';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
@ -23,7 +23,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* The object identities of the wrapped cells
*/
ids = null;
ids: string[];
/**
* Variable: source
@ -61,12 +61,12 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
* edges - a list of real graph edges this abstraction represents
*/
constructor(edges: CellArray) {
super(edges);
super();
this.edges = edges;
this.ids = [];
for (let i = 0; i < edges.length; i += 1) {
this.ids.push(mxObjectIdentity.get(edges[i]));
this.ids.push(ObjectIdentity.get(edges[i]));
}
}
@ -75,7 +75,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Inverts the direction of this internal edge(s)
*/
invert(layer) {
invert() {
const temp = this.source;
this.source = this.target;
this.target = temp;
@ -87,15 +87,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer up
*/
getNextLayerConnectedCells(layer: Cell): CellArray {
getNextLayerConnectedCells(layer: number) {
if (this.nextLayerConnectedCells == null) {
this.nextLayerConnectedCells = [];
for (let i = 0; i < this.temp.length; i += 1) {
this.nextLayerConnectedCells[i] = [];
this.nextLayerConnectedCells[i] = new CellArray();
if (i === this.temp.length - 1) {
this.nextLayerConnectedCells[i].push(this.source);
this.nextLayerConnectedCells[i].push(this.source as Cell);
} else {
this.nextLayerConnectedCells[i].push(this);
}
@ -109,15 +109,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Returns the cells this cell connects to on the next layer down
*/
getPreviousLayerConnectedCells(layer: Cell): CellArray {
getPreviousLayerConnectedCells(layer: number) {
if (this.previousLayerConnectedCells == null) {
this.previousLayerConnectedCells = [];
for (let i = 0; i < this.temp.length; i += 1) {
this.previousLayerConnectedCells[i] = [];
this.previousLayerConnectedCells[i] = new CellArray();
if (i === 0) {
this.previousLayerConnectedCells[i].push(this.target);
this.previousLayerConnectedCells[i].push(this.target as Cell);
} else {
this.previousLayerConnectedCells[i].push(this);
}
@ -131,7 +131,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Returns true.
*/
isEdge(): boolean {
isEdge() {
return true;
}
@ -140,7 +140,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Gets the value of temp for the specified layer
*/
getGeneralPurposeVariable(layer: number): any {
getGeneralPurposeVariable(layer: number) {
return this.temp[layer - this.minRank - 1];
}
@ -149,7 +149,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Set the value of temp for the specified layer
*/
setGeneralPurposeVariable(layer: number, value: any): void {
setGeneralPurposeVariable(layer: number, value: number) {
this.temp[layer - this.minRank - 1] = value;
}
@ -158,8 +158,8 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
*
* Gets the first core edge associated with this wrapper
*/
getCoreCell(): Cell | null {
if (this.edges != null && this.edges.length > 0) {
getCoreCell() {
if (this.edges.length > 0) {
return this.edges[0];
}
return null;

8
packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts
View File

@ -5,7 +5,7 @@
* Type definitions from the typed-mxgraph project
*/
import MxGraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../../../util/ObjectIdentity';
import CellArray from '../../../../cell/datatypes/CellArray';
import Cell from '../../../../cell/datatypes/Cell';
@ -26,9 +26,9 @@ class GraphHierarchyNode extends MxGraphAbstractHierarchyCell {
constructor(cell) {
super(cell);
this.cell = cell;
this.id = mxObjectIdentity.get(cell);
this.connectsAsTarget: CellArray = [];
this.connectsAsSource: CellArray = [];
this.id = ObjectIdentity.get(cell);
this.connectsAsTarget = [];
this.connectsAsSource = [];
}
/**

15
packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js
View File

@ -9,7 +9,7 @@ import { DIRECTION_NORTH } from '../../../../util/Constants';
import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
import Dictionary from '../../../../util/Dictionary';
import GraphHierarchyModel from './model/GraphHierarchyModel';
import mxObjectIdentity from '../../../../util/mxObjectIdentity';
import ObjectIdentity from '../../../../util/ObjectIdentity';
import MinimumCycleRemover from './stage/MinimumCycleRemover';
import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
import CoordinateAssignment from './stage/CoordinateAssignment';
@ -249,8 +249,7 @@ class mxHierarchicalLayout extends GraphLayout {
const rootsCopy = [];
for (let i = 0; i < roots.length; i += 1) {
const ancestor =
parent != null ? model.isAncestor(parent, roots[i]) : true;
const ancestor = parent != null ? model.isAncestor(parent, roots[i]) : true;
if (ancestor && roots[i].isVertex()) {
rootsCopy.push(roots[i]);
@ -265,11 +264,7 @@ class mxHierarchicalLayout extends GraphLayout {
this.run(parent);
if (this.resizeParent && !parent.isCollapsed()) {
this.graph.updateGroupBounds(
[parent],
this.parentBorder,
this.moveParent
);
this.graph.updateGroupBounds([parent], this.parentBorder, this.moveParent);
}
// Maintaining parent location
@ -574,7 +569,7 @@ class mxHierarchicalLayout extends GraphLayout {
const { model } = this.graph;
if (cell.isVertex() && cell !== this.parent && cell.isVisible()) {
result[mxObjectIdentity.get(cell)] = cell;
result[ObjectIdentity.get(cell)] = cell;
}
if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
@ -672,7 +667,7 @@ class mxHierarchicalLayout extends GraphLayout {
// Has this vertex been seen before in any traversal
// And if the filled vertex set is populated, only
// process vertices in that it contains
const vertexID = mxObjectIdentity.get(vertex);
const vertexID = ObjectIdentity.get(vertex);
if (
allVertices[vertexID] == null &&

7
packages/core/src/view/ports/GraphPorts.ts
View File

@ -1,13 +1,6 @@
import Cell from '../cell/datatypes/Cell';
import Graph from '../Graph';
class GraphPorts {
constructor(graph: Graph) {
this.graph = graph;
}
graph: Graph;
/**
* Specifies if ports are enabled. This is used in {@link cellConnected} to update
* the respective style.

20
packages/core/webpack.config.js
View File

@ -1,6 +1,6 @@
const path = require('path');
const webpack = require('webpack');
const {merge} = require('webpack-merge');
const { merge } = require('webpack-merge');
const base = require('../../webpack.config');
const CircularDependencyPlugin = require('circular-dependency-plugin');
@ -8,20 +8,20 @@ module.exports = merge(base, {
entry: './src/index.ts',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
'@': path.resolve(__dirname, 'src'),
},
},
output: {
filename: 'mxgraph.js',
path: path.resolve(__dirname, 'dist'),
library: 'mxgraph',
libraryTarget: 'umd'
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader']
use: ['style-loader', 'css-loader'],
},
{
test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
@ -30,8 +30,8 @@ module.exports = merge(base, {
name: 'images/[hash].[ext]',
limit: 10000,
},
}
]
},
],
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
@ -49,6 +49,6 @@ module.exports = merge(base, {
allowAsyncCycles: false,
// set the current working directory for displaying module paths
cwd: process.cwd(),
})
]
});
}),
],
});

75
packages/html/stories/Anchors.stories.js
View File

@ -8,22 +8,22 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxConnectionHandler,
mxConnectionConstraint,
mxGeometry,
mxPolyline,
mxPoint,
mxCellState
Graph,
InternalEvent,
Rubberband,
ConnectionHandler,
ConnectionConstraint,
Geometry,
Polyline,
Point,
CellState,
} = mxgraph;
const container = document.createElement('div');
@ -34,22 +34,17 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
class MyCustomConnectionHandler extends mxConnectionHandler {
class MyCustomConnectionHandler extends ConnectionHandler {
// Enables connect preview for the default edge style
createEdgeState(me) {
const edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(
this.graph.view,
edge,
this.graph.getCellStyle(edge)
);
return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
getAllConnectionConstraints(terminal, source) {
// Overridden to define per-shape connection points
if (terminal != null && terminal.shape != null) {
@ -69,38 +64,36 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomGeometryClass extends mxGeometry {
class MyCustomGeometryClass extends Geometry {
// Defines the default constraints for the vertices
constraints = [
new mxConnectionConstraint(new mxPoint(0.25, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
new ConnectionConstraint(new Point(0.25, 0), true),
new ConnectionConstraint(new Point(0.5, 0), true),
new ConnectionConstraint(new Point(0.75, 0), true),
new ConnectionConstraint(new Point(0, 0.25), true),
new ConnectionConstraint(new Point(0, 0.5), true),
new ConnectionConstraint(new Point(0, 0.75), true),
new ConnectionConstraint(new Point(1, 0.25), true),
new ConnectionConstraint(new Point(1, 0.5), true),
new ConnectionConstraint(new Point(1, 0.75), true),
new ConnectionConstraint(new Point(0.25, 1), true),
new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(0.75, 1), true),
];
}
// Edges have no connection points
mxPolyline.prototype.constraints = null;
Polyline.prototype.constraints = null;
// Creates the graph inside the given container
const graph = new MyCustomGraph(container);
graph.setConnectable(true);
// Specifies the default edge style
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
'orthogonalEdgeStyle';
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle';
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -131,6 +124,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

35
packages/html/stories/Animation.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -7,15 +7,12 @@ import './css/animation.css';
export default {
title: 'Effects/Animation',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxPoint
} = mxgraph;
const { Graph, Point } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -25,7 +22,7 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setEnabled(false);
const parent = graph.getDefaultParent();
@ -67,26 +64,18 @@ const Template = ({ label, ...args }) => {
style:
'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;',
});
e1.geometry.points = [new mxPoint(230, 50)];
e1.geometry.points = [new Point(230, 50)];
graph.orderCells(true, [e1]);
});
// Adds animation to edge shape and makes "pipe" visible
const state = graph.view.getState(e1);
state.shape.node
.getElementsByTagName('path')[0]
.removeAttribute('visibility');
state.shape.node
.getElementsByTagName('path')[0]
.setAttribute('stroke-width', '6');
state.shape.node
.getElementsByTagName('path')[0]
.setAttribute('stroke', 'lightGray');
state.shape.node
.getElementsByTagName('path')[1]
.setAttribute('class', 'flow');
state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

92
packages/html/stories/AutoLayout.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,32 +8,32 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxEvent,
mxUtils,
mxCellRenderer,
mxEdgeHandler,
Graph,
Rubberband,
InternalEvent,
utils,
CellRenderer,
EdgeHandler,
mxHierarchicalLayout,
mxConstants,
mxCellOverlay,
mxImage,
Constants,
CellOverlay,
ImageBox,
mxClient,
mxMorphing,
mxEventObject,
mxEventUtils
} = mxgraph;
EventObject,
EventUtils,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -43,41 +43,36 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
class MyCustomCellRenderer extends mxCellRenderer {
class MyCustomCellRenderer extends CellRenderer {
installCellOverlayListeners(state, overlay, shape) {
super.installCellOverlayListeners(state, overlay, shape);
mxEvent.addListener(
InternalEvent.addListener(
shape.node,
mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
evt => {
overlay.fireEvent(
new mxEventObject('pointerdown', 'event', evt, 'state', state)
);
(evt) => {
overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state));
}
);
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
mxEvent.addListener(shape.node, 'touchstart', evt => {
overlay.fireEvent(
new mxEventObject('pointerdown', 'event', evt, 'state', state)
);
InternalEvent.addListener(shape.node, 'touchstart', (evt) => {
overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state));
});
}
}
}
class MyCustomEdgeHandler extends mxEdgeHandler {
class MyCustomEdgeHandler extends EdgeHandler {
connect(edge, terminal, isSource, isClone, me) {
super.connect(edge, terminal, isSource, isClone, me);
executeLayout();
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createEdgeHandler(state, edgeStyle) {
return new MyCustomEdgeHandler(state, edgeStyle);
}
@ -96,14 +91,13 @@ const Template = ({ label, ...args }) => {
graph.view.setTranslate(20, 20);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(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();
const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
const layout = new mxHierarchicalLayout(graph, Constants.DIRECTION_WEST);
let v1;
const executeLayout = (change, post) => {
@ -118,7 +112,7 @@ const Template = ({ label, ...args }) => {
} finally {
// New API for animating graph layout results asynchronously
const morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, () => {
morph.addListener(InternalEvent.DONE, () => {
graph.getModel().endUpdate();
if (post != null) {
post();
@ -128,16 +122,16 @@ const Template = ({ label, ...args }) => {
}
};
const addOverlay = cell => {
const addOverlay = (cell) => {
// Creates a new overlay with an image and a tooltip
const overlay = new mxCellOverlay(
new mxImage('images/add.png', 24, 24),
const overlay = new CellOverlay(
new ImageBox('images/add.png', 24, 24),
'Add outgoing'
);
overlay.cursor = 'hand';
// Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, (sender, evt2) => {
overlay.addListener(InternalEvent.CLICK, (sender, evt2) => {
graph.clearSelection();
const geo = graph.getCellGeometry(cell);
@ -173,15 +167,15 @@ const Template = ({ label, ...args }) => {
graph.popupMenuHandler.hideMenu();
graph.stopEditing(false);
const pt = mxUtils.convertPoint(
const pt = utils.convertPoint(
graph.container,
mxEventUtils.getClientX(evt2),
mxEventUtils.getClientY(evt2)
EventUtils.getClientX(evt2),
EventUtils.getClientY(evt2)
);
graph.connectionHandler.start(state, pt.x, pt.y);
graph.isMouseDown = true;
graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt2);
mxEvent.consume(evt2);
graph.isMouseTrigger = EventUtils.isMouseEvent(evt2);
InternalEvent.consume(evt2);
});
// Sets the overlay for the cell in the graph
@ -199,16 +193,16 @@ const Template = ({ label, ...args }) => {
addOverlay(v1);
});
graph.resizeCell = function() {
mxGraph.prototype.resizeCell.apply(this, arguments);
graph.resizeCell = function () {
Graph.prototype.resizeCell.apply(this, arguments);
executeLayout();
};
graph.connectionHandler.addListener(mxEvent.CONNECT, function() {
graph.connectionHandler.addListener(InternalEvent.CONNECT, function () {
executeLayout();
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

72
packages/html/stories/Boundary.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,24 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxPoint,
mxGraphHandler,
mxUtils
} = mxgraph;
const { Graph, InternalEvent, Rubberband, Point, GraphHandler, utils } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -36,10 +29,9 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
// Enables moving of relative children
isCellLocked(cell) {
return false;
@ -94,7 +86,7 @@ const Template = ({ label, ...args }) => {
y = y > 0.5 ? 1 : 0;
}
return new mxPoint(x, y);
return new Point(x, y);
}
}
}
@ -122,7 +114,7 @@ const Template = ({ label, ...args }) => {
this.model.setGeometry(cell, geo);
}
} else {
mxGraph.prototype.translateCell.apply(this, arguments);
Graph.prototype.translateCell.apply(this, arguments);
}
}
}
@ -142,29 +134,19 @@ const Template = ({ label, ...args }) => {
graph.getStylesheet().putDefaultVertexStyle(style);
// Replaces move preview for relative children
graph.graphHandler.getDelta = function(me) {
const point = mxUtils.convertPoint(
this.graph.container,
me.getX(),
me.getY()
);
let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);
graph.graphHandler.getDelta = function (me) {
const point = utils.convertPoint(this.graph.container, me.getX(), me.getY());
let delta = new Point(point.x - this.first.x, point.y - this.first.y);
if (
this.cells != null &&
this.cells.length > 0 &&
this.cells[0] != null
) {
if (this.cells != null && this.cells.length > 0 && this.cells[0] != null) {
const state = this.graph.view.getState(this.cells[0]);
const rel = graph.getRelativePosition(state, delta.x, delta.y);
if (rel != null) {
const pstate = this.graph.view.getState(
state.cell.getParent()
);
const pstate = this.graph.view.getState(state.cell.getParent());
if (pstate != null) {
delta = new mxPoint(
delta = new Point(
pstate.x + pstate.width * rel.x - state.getCenterX(),
pstate.y + pstate.height * rel.y - state.getCenterY()
);
@ -176,24 +158,16 @@ const Template = ({ label, ...args }) => {
};
// Relative children cannot be removed from parent
graph.graphHandler.shouldRemoveCellsFromParent = function(
parent,
cells,
evt
) {
graph.graphHandler.shouldRemoveCellsFromParent = function (parent, cells, evt) {
return (
cells.length === 0 &&
!cells[0].geometry.relative &&
mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(
this,
arguments
)
GraphHandler.prototype.shouldRemoveCellsFromParent.apply(this, arguments)
);
};
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -215,7 +189,7 @@ const Template = ({ label, ...args }) => {
size: [20, 20],
style: 'fontSize=9;shape=ellipse;resizable=0;',
});
v2.geometry.offset = new mxPoint(-10, -10);
v2.geometry.offset = new Point(-10, -10);
v2.geometry.relative = true;
const v3 = graph.insertVertex({
@ -225,11 +199,11 @@ const Template = ({ label, ...args }) => {
size: [20, 20],
style: 'fontSize=9;shape=ellipse;resizable=0;',
});
v3.geometry.offset = new mxPoint(-10, -10);
v3.geometry.offset = new Point(-10, -10);
v3.geometry.relative = true;
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

146
packages/html/stories/Clipboard.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,28 +8,28 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
Graph,
InternalEvent,
Rubberband,
mxClipboard,
mxUtils,
mxEventUtils,
utils,
EventUtils,
mxClient,
mxCodec,
mxGraphModel,
mxStringUtils
} = mxgraph;
GraphModel,
mxStringUtils,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -40,28 +40,27 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given this.el
const graph = new mxGraph(container);
const graph = new Graph(container);
// Public helper method for shared clipboard.
mxClipboard.cellsToString = function(cells) {
mxClipboard.cellsToString = function (cells) {
const codec = new mxCodec();
const model = new mxGraphModel();
const model = new GraphModel();
const parent = model.getRoot().getChildAt(0);
for (let i = 0; i < cells.length; i++) {
model.add(parent, cells[i]);
}
return mxUtils.getXml(codec.encode(model));
return utils.getXml(codec.encode(model));
};
// Focused but invisible textarea during control or meta key events
const textInput = document.createElement('textarea');
mxUtils.setOpacity(textInput, 0);
utils.setOpacity(textInput, 0);
textInput.style.width = '1px';
textInput.style.height = '1px';
let restoreFocus = false;
@ -74,9 +73,9 @@ const Template = ({ label, ...args }) => {
textInput.value = ' ';
// Shows a textare when control/cmd is pressed to handle native clipboard actions
mxEvent.addListener(document, 'keydown', function(evt) {
InternalEvent.addListener(document, 'keydown', function (evt) {
// No dialog visible
const source = mxEventUtils.getSource(evt);
const source = EventUtils.getSource(evt);
if (
graph.isEnabled() &&
@ -107,11 +106,11 @@ const Template = ({ label, ...args }) => {
});
// Restores focus on graph this.el and removes text input from DOM
mxEvent.addListener(document, 'keyup', function(evt) {
InternalEvent.addListener(document, 'keyup', function (evt) {
if (
restoreFocus &&
(evt.keyCode === 224 /* FF */ ||
evt.keyCode === 17 /* Control */ ||
evt.keyCode === 17 /* Control */ ||
evt.keyCode === 91 ||
evt.keyCode === 93) /* Meta */
) {
@ -126,7 +125,7 @@ const Template = ({ label, ...args }) => {
});
// Inserts the XML for the given cells into the text input for copy
const copyCells = function(graph, cells) {
const copyCells = function (graph, cells) {
if (cells.length > 0) {
const clones = graph.cloneCells(cells);
@ -153,48 +152,38 @@ const Template = ({ label, ...args }) => {
};
// Handles copy event by putting XML for current selection into text input
mxEvent.addListener(
textInput,
'copy',
(evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(
graph,
mxUtils.sortCells(
graph.model.getTopmostCells(graph.getSelectionCells())
)
);
dx = 0;
dy = 0;
}
InternalEvent.addListener(textInput, 'copy', (evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(
graph,
utils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells()))
);
dx = 0;
dy = 0;
}
);
});
// Handles cut event by removing cells putting XML into text input
mxEvent.addListener(
textInput,
'cut',
(evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(graph, graph.removeCells());
dx = -gs;
dy = -gs;
}
InternalEvent.addListener(textInput, 'cut', (evt) => {
if (graph.isEnabled() && !graph.isSelectionEmpty()) {
copyCells(graph, graph.removeCells());
dx = -gs;
dy = -gs;
}
);
});
// Merges XML into existing graph and layers
const importXml = function(xml, dx, dy) {
const importXml = function (xml, dx, dy) {
dx = dx != null ? dx : 0;
dy = dy != null ? dy : 0;
let cells = [];
try {
const doc = mxUtils.parseXml(xml);
const doc = utils.parseXml(xml);
const node = doc.documentElement;
if (node != null) {
const model = new mxGraphModel();
const model = new GraphModel();
const codec = new mxCodec(node.ownerDocument);
codec.decode(node, model);
@ -217,18 +206,11 @@ const Template = ({ label, ...args }) => {
if (!graph.isCellLocked(target)) {
const children = parent.getChildren();
cells = cells.concat(
graph.importCells(children, dx, dy, target)
);
cells = cells.concat(graph.importCells(children, dx, dy, target));
}
} else {
// Delta is non cascading, needs separate move for layers
parent = graph.importCells(
[parent],
0,
0,
graph.model.getRoot()
)[0];
parent = graph.importCells([parent], 0, 0, graph.model.getRoot())[0];
const children = parent.getChildren();
graph.moveCells(children, dx, dy);
cells = cells.concat(children);
@ -247,12 +229,10 @@ const Template = ({ label, ...args }) => {
};
// Parses and inserts XML into graph
const pasteText = function(text) {
const pasteText = function (text) {
const xml = mxStringUtils.trim(text);
const x =
graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
const y =
graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
const x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
const y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
if (xml.length > 0) {
if (lastPaste !== xml) {
@ -273,23 +253,17 @@ const Template = ({ label, ...args }) => {
};
// Function to fetch text from paste events
const extractGraphModelFromEvent = function(evt) {
const extractGraphModelFromEvent = function (evt) {
let data = null;
if (evt != null) {
const provider =
evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
const provider = evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
if (provider != null) {
data =
provider.types.indexOf('text/html') >= 0
? provider.getData('text/html')
: null;
provider.types.indexOf('text/html') >= 0 ? provider.getData('text/html') : null;
if (
provider.types.indexOf('text/plain')
&& (data == null || data.length === 0)
) {
if (provider.types.indexOf('text/plain') && (data == null || data.length === 0)) {
data = provider.getData('text/plain');
}
}
@ -299,7 +273,7 @@ const Template = ({ label, ...args }) => {
};
// Handles paste event by parsing and inserting XML
mxEvent.addListener(textInput, 'paste', function(evt) {
InternalEvent.addListener(textInput, 'paste', function (evt) {
// Clears existing contents before paste - should not be needed
// because all text is selected, but doesn't hurt since the
// actual pasting of the new text is delayed in all cases.
@ -312,12 +286,9 @@ const Template = ({ label, ...args }) => {
pasteText(xml);
} else {
// Timeout for new value to appear
window.setTimeout(
() => {
pasteText(textInput.value);
},
0
);
window.setTimeout(() => {
pasteText(textInput.value);
}, 0);
}
}
@ -325,8 +296,7 @@ const Template = ({ label, ...args }) => {
});
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -350,6 +320,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

23
packages/html/stories/Collapse.stories.js
View File

@ -1,19 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/Collapse',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRectangle
} = mxgraph;
const { Graph, Rectangle } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -23,10 +20,10 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
const graph = new mxGraph(container);
const graph = new Graph(container);
const parent = graph.getDefaultParent();
const getStyle = function() {
const getStyle = function () {
// Extends Transactions.getStyle to show an image when collapsed
// TODO cannot use super without a parent class
// let style = super.getStyle();
@ -37,7 +34,7 @@ const Template = ({ label, ...args }) => {
`noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
}
return style;
}
};
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
@ -47,7 +44,7 @@ const Template = ({ label, ...args }) => {
size: [200, 200],
style: 'shape=swimlane;startSize=20;',
});
v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
v1.geometry.alternateBounds = new Rectangle(0, 0, 110, 70);
v1.getStyle = getStyle;
const v11 = graph.insertVertex({
@ -60,6 +57,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

29
packages/html/stories/Constituent.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,22 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxGraphHandler,
mxRubberband
} = mxgraph;
const { Graph, InternalEvent, GraphHandler, Rubberband } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -34,9 +29,9 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
InternalEvent.disableContextMenu(container);
class MyCustomGraphHandler extends mxGraphHandler {
class MyCustomGraphHandler extends GraphHandler {
/**
* Redirects start drag to parent.
*/
@ -49,7 +44,7 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
foldingEnabled = false;
recursiveResize = true;
@ -76,7 +71,7 @@ const Template = ({ label, ...args }) => {
const graph = new MyCustomGraph(container);
// Enables rubberband selection
new mxRubberband(graph);
new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -99,6 +94,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

72
packages/html/stories/ContextIcons.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,20 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxEventUtils,
mxUtils,
mxVertexHandler
} = mxgraph;
const { Graph, InternalEvent, Rubberband, EventUtils, utils, VertexHandler } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -31,8 +24,8 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
class mxVertexToolHandler extends mxVertexHandler {
// Defines a subclass for mxVertexHandler that adds a set of clickable
class mxVertexToolHandler extends VertexHandler {
// Defines a subclass for VertexHandler that adds a set of clickable
// icons to every selected vertex.
domNode = null;
@ -49,8 +42,8 @@ const Template = ({ label, ...args }) => {
this.domNode.style.whiteSpace = 'nowrap';
// Workaround for event redirection via image tag in quirks and IE8
const createImage = src => {
return mxUtils.createImage(src);
const createImage = (src) => {
return utils.createImage(src);
};
// Delete
@ -59,13 +52,13 @@ const Template = ({ label, ...args }) => {
img.style.cursor = 'pointer';
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img, evt => {
InternalEvent.addGestureListeners(img, (evt) => {
// Disables dragging the image
mxEvent.consume(evt);
InternalEvent.consume(evt);
});
mxEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', (evt) => {
this.graph.removeCells([this.state.cell]);
mxEvent.consume(evt);
InternalEvent.consume(evt);
});
this.domNode.appendChild(img);
@ -76,11 +69,11 @@ const Template = ({ label, ...args }) => {
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img, evt => {
this.start(mxEventUtils.getClientX(evt), mxEventUtils.getClientY(evt), 7);
InternalEvent.addGestureListeners(img, (evt) => {
this.start(EventUtils.getClientX(evt), EventUtils.getClientY(evt), 7);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
mxEvent.consume(evt);
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
InternalEvent.consume(evt);
});
this.domNode.appendChild(img);
@ -91,16 +84,16 @@ const Template = ({ label, ...args }) => {
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img, evt => {
InternalEvent.addGestureListeners(img, (evt) => {
this.graph.graphHandler.start(
this.state.cell,
mxEventUtils.getClientX(evt),
mxEventUtils.getClientY(evt)
EventUtils.getClientX(evt),
EventUtils.getClientY(evt)
);
this.graph.graphHandler.cellWasClicked = true;
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
mxEvent.consume(evt);
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
InternalEvent.consume(evt);
});
this.domNode.appendChild(img);
@ -111,16 +104,16 @@ const Template = ({ label, ...args }) => {
img.style.width = '16px';
img.style.height = '16px';
mxEvent.addGestureListeners(img, evt => {
const pt = mxUtils.convertPoint(
InternalEvent.addGestureListeners(img, (evt) => {
const pt = utils.convertPoint(
this.graph.container,
mxEventUtils.getClientX(evt),
mxEventUtils.getClientY(evt)
EventUtils.getClientX(evt),
EventUtils.getClientY(evt)
);
this.graph.connectionHandler.start(this.state, pt.x, pt.y);
this.graph.isMouseDown = true;
this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
mxEvent.consume(evt);
this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
InternalEvent.consume(evt);
});
this.domNode.appendChild(img);
@ -151,7 +144,7 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createHandler(state) {
if (state != null && state.cell.isVertex()) {
return new mxVertexToolHandler(state);
@ -170,8 +163,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -199,6 +191,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

65
packages/html/stories/Control.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,22 +8,22 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxDomHelpers,
mxImageShape,
mxRectangle,
mxCellRenderer,
mxImage
} = mxgraph;
Graph,
InternalEvent,
Rubberband,
mxDomHelpers,
ImageShape,
Rectangle,
CellRenderer,
ImageBox,
} = maxgraph;
const div = document.createElement('div');
@ -37,13 +37,9 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Specifies the URL and size of the new control
const deleteImage = new mxImage(
'/images/forbidden.png',
16,
16
);
const deleteImage = new ImageBox('/images/forbidden.png', 16, 16);
class MyCustomCellRenderer extends mxCellRenderer {
class MyCustomCellRenderer extends CellRenderer {
createControl(state) {
super.createControl(state);
@ -51,20 +47,15 @@ const Template = ({ label, ...args }) => {
if (state.cell.isVertex()) {
if (state.deleteControl == null) {
const b = new mxRectangle(
0,
0,
deleteImage.width,
deleteImage.height
);
state.deleteControl = new mxImageShape(b, deleteImage.src);
const b = new Rectangle(0, 0, deleteImage.width, deleteImage.height);
state.deleteControl = new ImageShape(b, deleteImage.src);
state.deleteControl.dialect = graph.dialect;
state.deleteControl.preserveImageAspect = false;
this.initControl(state, state.deleteControl, false, function(evt) {
this.initControl(state, state.deleteControl, false, function (evt) {
if (graph.isEnabled()) {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
});
}
@ -83,18 +74,13 @@ const Template = ({ label, ...args }) => {
const s = state.view.scale;
return state.cell.isEdge()
? new mxRectangle(
? new Rectangle(
state.x + state.width / 2 - (w / 2) * s,
state.y + state.height / 2 - (h / 2) * s,
w * s,
h * s
)
: new mxRectangle(
state.x + state.width - w * s,
state.y,
w * s,
h * s
);
: new Rectangle(state.x + state.width - w * s, state.y, w * s, h * s);
}
return null;
}
@ -129,7 +115,7 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createCellRenderer() {
return new MyCustomCellRenderer();
}
@ -144,8 +130,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -194,6 +179,6 @@ const Template = ({ label, ...args }) => {
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

65
packages/html/stories/DragSource.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,26 +8,26 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomUtils,
mxRubberband,
mxDragSource,
mxUtils,
mxGestureUtils,
mxEdgeHandler,
mxGraphHandler,
mxGuide,
mxEventUtils,
mxCell,
mxGeometry
} = mxgraph;
Graph,
mxDomUtils,
Rubberband,
DragSource,
utils,
GestureUtils,
EdgeHandler,
GraphHandler,
Guide,
EventUtils,
Cell,
Geometry,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -36,14 +36,14 @@ const Template = ({ label, ...args }) => {
container.style.height = `${args.height}px`;
container.style.cursor = 'default';
class MyCustomGuide extends mxGuide {
class MyCustomGuide extends Guide {
isEnabledForEvent(evt) {
// Alt disables guides
return !mxEventUtils.isAltDown(evt);
return !EventUtils.isAltDown(evt);
}
}
class MyCustomGraphHandler extends mxGraphHandler {
class MyCustomGraphHandler extends GraphHandler {
// Enables guides
guidesEnabled = true;
@ -52,12 +52,12 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomEdgeHandler extends mxEdgeHandler {
class MyCustomEdgeHandler extends EdgeHandler {
// Enables snapping waypoints to terminals
snapToTerminals = true;
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createGraphHandler() {
return new MyCustomGraphHandler(this);
}
@ -89,8 +89,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -121,9 +120,9 @@ const Template = ({ label, ...args }) => {
}
// Returns the graph under the mouse
const graphF = evt => {
const x = mxEventUtils.getClientX(evt);
const y = mxEventUtils.getClientY(evt);
const graphF = (evt) => {
const x = EventUtils.getClientX(evt);
const y = EventUtils.getClientY(evt);
const elt = document.elementFromPoint(x, y);
for (const graph of graphs) {
@ -137,7 +136,7 @@ const Template = ({ label, ...args }) => {
// Inserts a cell at the given location
const funct = (graph, evt, target, x, y) => {
const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
const cell = new Cell('Test', new Geometry(0, 0, 120, 40));
cell.vertex = true;
const cells = graph.importCells([cell], x, y, target);
@ -148,7 +147,7 @@ const Template = ({ label, ...args }) => {
};
// Creates a DOM node that acts as the drag source
const img = mxUtils.createImage('images/icons48/gear.png');
const img = utils.createImage('images/icons48/gear.png');
img.style.width = '48px';
img.style.height = '48px';
container.appendChild(img);
@ -163,7 +162,7 @@ const Template = ({ label, ...args }) => {
// if scalePreview (last) argument is true. Dx and dy are null to force
// the use of the defaults. Note that dx and dy are only used for the
// drag icon but not for the preview.
const ds = mxGestureUtils.makeDraggable(
const ds = GestureUtils.makeDraggable(
img,
graphF,
funct,
@ -181,9 +180,9 @@ const Template = ({ label, ...args }) => {
};
// Restores original drag icon while outside of graph
ds.createDragElement = mxDragSource.prototype.createDragElement;
ds.createDragElement = DragSource.prototype.createDragElement;
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

59
packages/html/stories/Drop.stories.js
View File

@ -1,7 +1,7 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
import { getXml, parseXml } from '@mxgraph/core/src/util/XmlUtils';
import { getXml, parseXml } from '@maxgraph/core/util/XmlUtils';
export default {
title: 'DnD_CopyPaste/Drop',
@ -9,24 +9,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxUtils,
mxEventUtils,
mxEvent,
mxClient
} = mxgraph;
const { Graph, Rubberband, utils, EventUtils, InternalEvent, mxClient } = maxgraph;
const div = document.createElement('div');
div.innerHTML = 'Drag & drop your images below:<br>';
@ -42,42 +35,38 @@ const Template = ({ label, ...args }) => {
// Checks if the browser is supported
const fileSupport =
window.File != null &&
window.FileReader != null &&
window.FileList != null;
window.File != null && window.FileReader != null && window.FileList != null;
if (!fileSupport || !mxClient.isBrowserSupported()) {
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
utils.error('Browser is not supported!', 200, false);
} else {
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given this.el
const graph = new mxGraph(container);
const graph = new Graph(container);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
mxEvent.addListener(container, 'dragover', function(evt) {
InternalEvent.addListener(container, 'dragover', function (evt) {
if (graph.isEnabled()) {
evt.stopPropagation();
evt.preventDefault();
}
});
mxEvent.addListener(container, 'drop', evt => {
InternalEvent.addListener(container, 'drop', (evt) => {
if (graph.isEnabled()) {
evt.stopPropagation();
evt.preventDefault();
// Gets drop location point for vertex
const pt = mxUtils.convertPoint(
const pt = utils.convertPoint(
graph.container,
mxEventUtils.getClientX(evt),
mxEventUtils.getClientY(evt)
EventUtils.getClientX(evt),
EventUtils.getClientY(evt)
);
const tr = graph.view.translate;
const { scale } = graph.view;
@ -95,7 +84,7 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
function handleDrop(graph, file, x, y) {
// Handles each file as a separate insert for simplicity.
@ -104,7 +93,7 @@ function handleDrop(graph, file, x, y) {
if (file.type.substring(0, 5) === 'image') {
const reader = new FileReader();
reader.onload = function(e) {
reader.onload = function (e) {
// Gets size of image for vertex
let data = e.target.result;
@ -144,9 +133,7 @@ function handleDrop(graph, file, x, y) {
w = Math.max(1, Math.round(w));
h = Math.max(1, Math.round(h));
data = `data:image/svg+xml,${btoa(
getXml(svgs[0], '\n')
)}`;
data = `data:image/svg+xml,${btoa(getXml(svgs[0], '\n'))}`;
graph.insertVertex({
position: [x, y],
size: [w, h],
@ -165,9 +152,7 @@ function handleDrop(graph, file, x, y) {
const semi = data.indexOf(';');
if (semi > 0) {
data =
data.substring(0, semi) +
data.substring(data.indexOf(',', semi + 1));
data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
}
graph.insertVertex({
@ -185,4 +170,4 @@ function handleDrop(graph, file, x, y) {
}
}
export const Default = Template.bind({});
export const Default = Template.bind({});

52
packages/html/stories/DynamicLoading.stories.js
View File

@ -1,26 +1,26 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Misc/DynamicLoading',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxText,
Graph,
Text,
mxEffects,
mxEvent,
mxConstants,
mxPerimeter,
InternalEvent,
Constants,
Perimeter,
mxCodec,
mxUtils,
mxXmlUtils
} = mxgraph;
utils,
mxXmlUtils,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -33,16 +33,16 @@ const Template = ({ label, ...args }) => {
let requestId = 0;
// Speedup the animation
mxText.prototype.enableBoundingBox = false;
Text.prototype.enableBoundingBox = false;
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables all built-in interactions
graph.setEnabled(false);
// Handles clicks on cells
graph.addListener(mxEvent.CLICK, function(sender, evt) {
graph.addListener(InternalEvent.CLICK, function (sender, evt) {
const cell = evt.getProperty('cell');
if (cell != null) {
@ -52,8 +52,8 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place
const style = graph.getStylesheet().getDefaultVertexStyle();
style.shape = mxConstants.SHAPE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style.shape = Constants.SHAPE_ELLIPSE;
style.perimiter = Perimeter.EllipsePerimeter;
style.gradientColor = 'white';
// Gets the default parent for inserting new cells. This
@ -63,18 +63,10 @@ const Template = ({ label, ...args }) => {
const cx = graph.container.clientWidth / 2;
const cy = graph.container.clientHeight / 2;
const cell = graph.insertVertex(
parent,
'0-0',
'0-0',
cx - 20,
cy - 15,
60,
40
);
const cell = graph.insertVertex(parent, '0-0', '0-0', cx - 20, cy - 15, 60, 40);
// Animates the changes in the graph model
graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt) {
graph.getModel().addListener(InternalEvent.CHANGE, function (sender, evt) {
const { changes } = evt.getProperty('edit');
mxEffects.animateChanges(graph, changes);
});
@ -180,7 +172,7 @@ const Template = ({ label, ...args }) => {
requestId++;
// Creates a local graph with no display
const graph = new mxGraph();
const graph = new Graph();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -206,12 +198,12 @@ const Template = ({ label, ...args }) => {
const enc = new mxCodec();
const node = enc.encode(graph.getModel());
return mxUtils.getXml(node);
return utils.getXml(node);
}
load(graph, cell);
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

33
packages/html/stories/DynamicStyle.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,18 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxUtils,
mxConstants,
mxRubberband
} = mxgraph;
const { Graph, utils, Constants, Rubberband } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -30,25 +25,24 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables moving of edge labels in this examples
graph.edgeLabelsMovable = false;
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Needs to set a flag to check for dynamic style changes,
// that is, changes to styles on cells where the style was
// not explicitely changed using mxStyleChange
graph.getView().updateStyle = true;
// Overrides mxCell.getStyle to return a specific style
// Overrides Cell.getStyle to return a specific style
// for edges that reflects their target terminal (in this case
// the strokeColor will be equal to the target's fillColor).
const getStyle = function() {
const getStyle = function () {
// TODO super cannot be used here
// let style = super.getStyle();
let style;
@ -58,10 +52,7 @@ const Template = ({ label, ...args }) => {
if (target != null) {
const targetStyle = graph.getCurrentCellStyle(target);
const fill = mxUtils.getValue(
targetStyle,
'fillColor'
);
const fill = utils.getValue(targetStyle, 'fillColor');
if (fill != null) {
style += `;strokeColor=${fill}`;
@ -120,6 +111,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

75
packages/html/stories/DynamicToolbar.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,26 +8,26 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxConnectionHandler,
mxImage,
Graph,
Rubberband,
ConnectionHandler,
ImageBox,
mxToolbar,
mxGraphModel,
GraphModel,
mxKeyHandler,
mxCell,
mxGeometry,
mxEvent,
mxUtils,
mxGestureUtils
} = mxgraph;
Cell,
Geometry,
InternalEvent,
utils,
GestureUtils,
} = maxgraph;
const div = document.createElement('div');
@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage(
ConnectionHandler.prototype.connectImage = new ImageBox(
'/images/connector.gif',
16,
16
@ -66,8 +66,8 @@ const Template = ({ label, ...args }) => {
// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
const model = new mxGraphModel();
const graph = new mxGraph(container, model);
const model = new GraphModel();
const graph = new Graph(container, model);
// Enables new connections in the graph
graph.setConnectable(true);
@ -76,8 +76,7 @@ const Template = ({ label, ...args }) => {
// Stops editing on enter or escape keypress
const keyHandler = new mxKeyHandler(graph);
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
addVertex('/images/rectangle.gif', 100, 40, '');
addVertex('/images/rounded.gif', 100, 40, 'shape=rounded');
@ -88,60 +87,60 @@ const Template = ({ label, ...args }) => {
addVertex('/images/actor.gif', 30, 40, 'shape=actor');
function addVertex(icon, w, h, style) {
const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
const vertex = new Cell(null, new Geometry(0, 0, w, h), style);
vertex.setVertex(true);
const img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, () => {
graph.getSelectionModel().addListener(InternalEvent.CHANGE, () => {
const tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, tmp ? 100 : 20);
utils.setOpacity(img, tmp ? 100 : 20);
img.enabled = tmp;
});
}
function addToolbarItem(graph, toolbar, prototype, image) {
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
const funct = (graph, evt, cell, x, y) => {
graph.stopEditing(false);
const vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;
graph.addCell(vertex);
graph.setSelectionCell(vertex);
};
// Creates the image which is used as the drag icon (preview)
const img = toolbar.addMode(null, image, (evt, cell) => {
const pt = graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});
// Disables dragging if element is disabled. This is a workaround
// for wrong event order in IE. Following is a dummy listener that
// is invoked as the last listener in IE.
mxEvent.addListener(img, 'mousedown', evt => {
InternalEvent.addListener(img, 'mousedown', (evt) => {
// do nothing
});
// This listener is always called first before any other listener
// in all browsers.
mxEvent.addListener(img, 'mousedown', evt => {
InternalEvent.addListener(img, 'mousedown', (evt) => {
if (img.enabled == false) {
mxEvent.consume(evt);
InternalEvent.consume(evt);
}
});
mxGestureUtils.makeDraggable(img, graph, funct);
GestureUtils.makeDraggable(img, graph, funct);
return img;
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

27
packages/html/stories/EdgeTolerance.stories.js
View File

@ -1,19 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Connections/EdgeTolerance',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxUtils
} = mxgraph;
const { Graph, utils } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -23,7 +20,7 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
fireMouseEvent(evtName, me, sender) {
// Overrides the mouse event dispatching mechanism to update the
// cell which is associated with the event in case the native hit
@ -35,14 +32,14 @@ const Template = ({ label, ...args }) => {
// them here. Storing them in the event means the overridden
// method doesn't have to do this again.
if (me.graphX == null || me.graphY == null) {
const pt = mxUtils.convertPoint(container, me.getX(), me.getY());
const pt = utils.convertPoint(container, me.getX(), me.getY());
me.graphX = pt.x;
me.graphY = pt.y;
}
const cell = this.getCellAt(me.graphX, me.graphY);
if (cell?.isEdge()) {
me.state = this.view.getState(cell);
@ -62,10 +59,10 @@ const Template = ({ label, ...args }) => {
dblClick(evt, cell) {
// Overrides double click handling to use the tolerance
if (cell == null) {
const pt = mxUtils.convertPoint(
const pt = utils.convertPoint(
el,
mxEventUtils.getClientX(evt),
mxEventUtils.getClientY(evt)
EventUtils.getClientX(evt),
EventUtils.getClientY(evt)
);
cell = this.getCellAt(pt.x, pt.y);
}
@ -110,6 +107,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

29
packages/html/stories/Editing.stories.js
View File

@ -1,23 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Editing/Editing',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxKeyHandler,
mxUtils,
mxDomUtils,
mxCloneUtils,
mxEventUtils
} = mxgraph;
const { Graph, mxKeyHandler, utils, mxDomUtils, CloneUtils, EventUtils } = maxgraph;
const div = document.createElement('div');
div.innerHTML = `
@ -34,7 +27,7 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
div.appendChild(container);
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
getLabel(cell) {
// Returns a HTML representation of the cell where the
// upper half is the first value, lower half is second
@ -79,10 +72,10 @@ const Template = ({ label, ...args }) => {
// a mouse event
if (evt != null) {
// Finds the relative coordinates inside the cell
const point = mxUtils.convertPoint(
const point = utils.convertPoint(
this.container,
mxEventUtils.getClientX(evt),
mxEventUtils.getClientY(evt)
EventUtils.getClientX(evt),
EventUtils.getClientY(evt)
);
const state = this.getView().getState(cell);
@ -106,7 +99,7 @@ const Template = ({ label, ...args }) => {
if (name != null) {
// Clones the user object for correct undo and puts
// the new value in the correct field.
const value = mxCloneUtils.clone(cell.value);
const value = CloneUtils.clone(cell.value);
value[name] = newValue;
newValue = value;
@ -143,6 +136,6 @@ const Template = ({ label, ...args }) => {
});
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

92
packages/html/stories/Events.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,28 +8,28 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxConnectionHandler,
mxLayoutManager,
Graph,
InternalEvent,
Rubberband,
ConnectionHandler,
LayoutManager,
mxParallelEdgeLayout,
mxImage,
ImageBox,
mxKeyHandler,
mxConstants,
mxEdgeStyle
} = mxgraph;
Constants,
EdgeStyle,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -39,15 +39,15 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
class MyCustomConnectionHandler extends mxConnectionHandler {
class MyCustomConnectionHandler extends ConnectionHandler {
// Sets the image to be used for creating new connections
connectImage = new mxImage('/images/green-dot.gif', 14, 14);
connectImage = new ImageBox('/images/green-dot.gif', 14, 14);
}
// Disables built-in context menu
mxEvent.disableContextMenu(container);
InternalEvent.disableContextMenu(container);
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
alternateEdgeStyle = 'elbow=vertical';
getTooltipForCell(cell) {
@ -64,7 +64,7 @@ const Template = ({ label, ...args }) => {
// Optionally you can enable panning, tooltips and connections
// using graph.setPanning(), setTooltips() & setConnectable().
// To enable rubberband selection and basic keyboard events,
// use new mxRubberband(graph) and new mxKeyHandler(graph).
// use new Rubberband(graph) and new mxKeyHandler(graph).
const graph = new MyCustomGraph(container);
// Enables tooltips, new connections and panning
@ -74,9 +74,9 @@ const Template = ({ label, ...args }) => {
// Automatically handle parallel edges
const layout = new mxParallelEdgeLayout(graph);
const layoutMgr = new mxLayoutManager(graph);
const layoutMgr = new LayoutManager(graph);
layoutMgr.getLayout = function(cell) {
layoutMgr.getLayout = function (cell) {
if (cell.getChildCount() > 0) {
return layout;
}
@ -84,17 +84,17 @@ const Template = ({ label, ...args }) => {
// Enables rubberband (marquee) selection and a handler
// for basic keystrokes (eg. return, escape during editing).
const rubberband = new mxRubberband(graph);
const rubberband = new Rubberband(graph);
const keyHandler = new mxKeyHandler(graph);
// Changes the default style for edges "in-place" and assigns
// an alternate edge style which is applied in mxGraph.flip
// an alternate edge style which is applied in Graph.flip
// when the user double clicks on the adjustment control point
// of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle();
style.rounded = true;
style.edge = mxEdgeStyle.ElbowConnector;
style.edge = EdgeStyle.ElbowConnector;
// Installs a popupmenu handler using local function (see below).
graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
@ -108,42 +108,10 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'Doubleclick',
20,
20,
80,
30
);
const v2 = graph.insertVertex(
parent,
null,
'Right-/Shiftclick',
200,
150,
120,
30
);
const v3 = graph.insertVertex(
parent,
null,
'Connect/Reconnect',
200,
20,
120,
30
);
const v4 = graph.insertVertex(
parent,
null,
'Control-Drag',
20,
150,
100,
30
);
const v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30);
const v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30);
const v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30);
const e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);
const e2 = graph.insertEdge(parent, null, '', v2, v3);
} finally {
@ -152,7 +120,7 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
function createPopupMenu(graph, menu, cell, evt) {
// Function to create the entries in the popupmenu
@ -171,4 +139,4 @@ function createPopupMenu(graph, menu, cell, evt) {
});
}
export const Default = Template.bind({});
export const Default = Template.bind({});

411
packages/html/stories/ExtendCanvas.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,24 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxRectangle,
mxPoint,
mxUtils
} = mxgraph;
const { Graph, InternalEvent, Rubberband, Rectangle, Point, utils } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -35,233 +28,209 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
container.style.background = 'url(/images/grid.gif)';
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
/**
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
* Specifies the size of the size for "tiles" to be used for a graph with
* scrollbars but no visible background page. A good value is large
* enough to reduce the number of repaints that is caused for auto-
* translation, which depends on this value, and small enough to give
* a small empty buffer around the graph. Default is 400x400.
*/
const scrollTileSize = new Rectangle(0, 0, 400, 400);
class MyCustomGraph extends Graph {
/**
* Returns the padding for pages in page view with scrollbars.
*/
const scrollTileSize = new mxRectangle(0, 0, 400, 400);
getPagePadding() {
return new Point(
Math.max(0, Math.round(this.container.offsetWidth - 34)),
Math.max(0, Math.round(this.container.offsetHeight - 34))
);
}
class MyCustomGraph extends mxGraph {
/**
* Returns the padding for pages in page view with scrollbars.
*/
getPagePadding() {
return new mxPoint(
Math.max(0, Math.round(this.container.offsetWidth - 34)),
Math.max(0, Math.round(this.container.offsetHeight - 34))
);
}
/**
* Returns the size of the page format scaled with the page size.
*/
getPageSize() {
return this.pageVisible
? new mxRectangle(
/**
* Returns the size of the page format scaled with the page size.
*/
getPageSize() {
return this.pageVisible
? new Rectangle(
0,
0,
this.pageFormat.width * this.pageScale,
this.pageFormat.height * this.pageScale
)
: scrollTileSize;
}
/**
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
getPageLayout() {
const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
const bounds = this.getGraphBounds();
if (bounds.width === 0 || bounds.height === 0) {
return new mxRectangle(0, 0, 1, 1);
}
// Computes untransformed graph bounds
const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w = Math.floor(bounds.width / this.view.scale);
const h = Math.floor(bounds.height / this.view.scale);
const x0 = Math.floor(x / size.width);
const y0 = Math.floor(y / size.height);
const w0 = Math.ceil((x + w) / size.width) - x0;
const h0 = Math.ceil((y + h) / size.height) - y0;
return new mxRectangle(x0, y0, w0, h0);
}
getPreferredPageSize(bounds, width, height) {
const pages = this.getPageLayout();
const size = this.getPageSize();
return new mxRectangle(
0,
0,
pages.width * size.width,
pages.height * size.height
);
}
sizeDidChange() {
if (this.container != null && mxUtils.hasScrollbars(this.container)) {
const pages = this.getPageLayout();
const pad = this.getPagePadding();
const size = this.getPageSize();
// Updates the minimum graph size
const minw = Math.ceil(
(2 * pad.x) / this.view.scale + pages.width * size.width
);
const minh = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min = this.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx = pad.x / this.view.scale - pages.x * size.width;
const dy = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx = this.view.translate.x;
const ty = this.view.translate.y;
this.view.setTranslate(dx, dy);
this.container.scrollLeft += (dx - tx) * this.view.scale;
this.container.scrollTop += (dy - ty) * this.view.scale;
this.autoTranslate = false;
return;
}
super.sizeDidChange();
}
}
this.pageFormat.height * this.pageScale
)
: scrollTileSize;
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(container);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
// Fits the number of background pages to the graph
graph.view.getBackgroundPageBounds = function() {
const layout = this.graph.getPageLayout();
const page = this.graph.getPageSize();
return new mxRectangle(
this.scale * (this.translate.x + layout.x * page.width),
this.scale * (this.translate.y + layout.y * page.height),
this.scale * layout.width * page.width,
this.scale * layout.height * page.height
);
};
/**
* Guesses autoTranslate to avoid another repaint (see below).
* Works if only the scale of the graph changes or if pages
* are visible and the visible pages do not change.
* Returns a rectangle describing the position and count of the
* background pages, where x and y are the position of the top,
* left page and width and height are the vertical and horizontal
* page count.
*/
const graphViewValidate = graph.view.validate;
graph.view.validate = function() {
if (
this.graph.container != null &&
mxUtils.hasScrollbars(this.graph.container)
) {
const pad = this.graph.getPagePadding();
const size = this.graph.getPageSize();
getPageLayout() {
const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
const bounds = this.getGraphBounds();
// Updating scrollbars here causes flickering in quirks and is not needed
// if zoom method is always used to set the current scale on the graph.
const tx = this.translate.x;
const ty = this.translate.y;
this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
if (bounds.width === 0 || bounds.height === 0) {
return new Rectangle(0, 0, 1, 1);
}
graphViewValidate.apply(this, arguments);
};
// Computes untransformed graph bounds
const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
const w = Math.floor(bounds.width / this.view.scale);
const h = Math.floor(bounds.height / this.view.scale);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
const x0 = Math.floor(x / size.width);
const y0 = Math.floor(y / size.height);
const w0 = Math.ceil((x + w) / size.width) - x0;
const h0 = Math.ceil((y + h) / size.height) - y0;
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
return new Rectangle(x0, y0, w0, h0);
}
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
source: v1,
target: v2,
});
getPreferredPageSize(bounds, width, height) {
const pages = this.getPageLayout();
const size = this.getPageSize();
return new Rectangle(0, 0, pages.width * size.width, pages.height * size.height);
}
sizeDidChange() {
if (this.container != null && utils.hasScrollbars(this.container)) {
const pages = this.getPageLayout();
const pad = this.getPagePadding();
const size = this.getPageSize();
// Updates the minimum graph size
const minw = Math.ceil((2 * pad.x) / this.view.scale + pages.width * size.width);
const minh = Math.ceil(
(2 * pad.y) / this.view.scale + pages.height * size.height
);
const min = this.minimumGraphSize;
// LATER: Fix flicker of scrollbar size in IE quirks mode
// after delayed call in window.resize event handler
if (min == null || min.width !== minw || min.height !== minh) {
this.minimumGraphSize = new Rectangle(0, 0, minw, minh);
}
// Updates auto-translate to include padding and graph size
const dx = pad.x / this.view.scale - pages.x * size.width;
const dy = pad.y / this.view.scale - pages.y * size.height;
if (
!this.autoTranslate &&
(this.view.translate.x !== dx || this.view.translate.y !== dy)
) {
this.autoTranslate = true;
this.view.x0 = pages.x;
this.view.y0 = pages.y;
// NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
// BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
// SHOULD MOVE TRANSLATE/SCALE TO VIEW.
const tx = this.view.translate.x;
const ty = this.view.translate.y;
this.view.setTranslate(dx, dy);
this.container.scrollLeft += (dx - tx) * this.view.scale;
this.container.scrollTop += (dy - ty) * this.view.scale;
this.autoTranslate = false;
return;
}
super.sizeDidChange();
}
}
}
// Creates the graph inside the given container
const graph = new MyCustomGraph(container);
graph.panningHandler.ignoreCell = true;
graph.setPanning(true);
// Fits the number of background pages to the graph
graph.view.getBackgroundPageBounds = function () {
const layout = this.graph.getPageLayout();
const page = this.graph.getPageSize();
return new Rectangle(
this.scale * (this.translate.x + layout.x * page.width),
this.scale * (this.translate.y + layout.y * page.height),
this.scale * layout.width * page.width,
this.scale * layout.height * page.height
);
};
/**
* Guesses autoTranslate to avoid another repaint (see below).
* Works if only the scale of the graph changes or if pages
* are visible and the visible pages do not change.
*/
const graphViewValidate = graph.view.validate;
graph.view.validate = function () {
if (this.graph.container != null && utils.hasScrollbars(this.graph.container)) {
const pad = this.graph.getPagePadding();
const size = this.graph.getPageSize();
// Updating scrollbars here causes flickering in quirks and is not needed
// if zoom method is always used to set the current scale on the graph.
const tx = this.translate.x;
const ty = this.translate.y;
this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
}
graphViewValidate.apply(this, arguments);
};
// Enables rubberband selection
if (args.rubberBand) new Rubberband(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.batchUpdate(() => {
const v1 = graph.insertVertex({
parent,
value: 'Hello,',
position: [20, 20],
size: [80, 30],
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 30],
});
const e1 = graph.insertEdge({
parent,
source: v1,
target: v2,
});
});
// Sets initial scrollbar positions
window.setTimeout(() => {
const bounds = graph.getGraphBounds();
const width = Math.max(
bounds.width,
scrollTileSize.width * graph.view.scale
);
const height = Math.max(
bounds.height,
scrollTileSize.height * graph.view.scale
);
graph.container.scrollTop = Math.floor(
Math.max(
0,
bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
)
);
graph.container.scrollLeft = Math.floor(
Math.max(
0,
bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
)
);
}, 0);
// Sets initial scrollbar positions
window.setTimeout(() => {
const bounds = graph.getGraphBounds();
const width = Math.max(bounds.width, scrollTileSize.width * graph.view.scale);
const height = Math.max(bounds.height, scrollTileSize.height * graph.view.scale);
graph.container.scrollTop = Math.floor(
Math.max(0, bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4))
);
graph.container.scrollLeft = Math.floor(
Math.max(0, bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2))
);
}, 0);
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

57
packages/html/stories/FileIO.stories.js
View File

@ -1,23 +1,20 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
import { error } from '@mxgraph/core/src/util/mxDomUtils';
import { clone } from '@mxgraph/core/src/util/CloneUtils';
import { button } from '@mxgraph/core/src/util/dom/mxDomHelpers';
import { load } from '@mxgraph/core/src/util/network/mxXmlRequest';
import { error } from '@maxgraph/core/util/DomUtils';
import { clone } from '@maxgraph/core/util/CloneUtils';
import { button } from '@maxgraph/core/util/dom/mxDomHelpers';
import { load } from '@maxgraph/core/util/network/mxXmlRequest';
export default {
title: 'Xml_Json/FileIO',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConstants
} = mxgraph;
const { Graph, Constants } = maxgraph;
const div = document.createElement('div');
@ -41,7 +38,7 @@ const Template = ({ label, ...args }) => {
error('Browser is not supported!', 200, false);
} else {
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setEnabled(false);
graph.setPanning(true);
@ -53,7 +50,7 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style.shape = mxConstants.SHAPE_ROUNDED;
style.shape = Constants.SHAPE_ROUNDED;
style.perimiter = Perimeter.RectanglePerimeter;
style.gradientColor = 'white';
style.perimeterSpacing = 4;
@ -63,10 +60,10 @@ const Template = ({ label, ...args }) => {
style.labelBackgroundColor = 'white';
style = clone(style);
style.startArrow = mxConstants.ARROW_CLASSIC;
style.startArrow = Constants.ARROW_CLASSIC;
graph.getStylesheet().putCellStyle('2way', style);
graph.isHtmlLabel = function(cell) {
graph.isHtmlLabel = function (cell) {
return true;
};
@ -82,7 +79,7 @@ const Template = ({ label, ...args }) => {
// Adds a button to execute the layout
this.el2.appendChild(
button('Arrange', function(evt) {
button('Arrange', function (evt) {
const parent = graph.getDefaultParent();
layout.execute(parent);
})
@ -94,7 +91,7 @@ const Template = ({ label, ...args }) => {
// Loads the custom file format (TXT file)
parse(graph, 'fileio.txt');
// Loads the mxGraph file format (XML file)
// Loads the Graph file format (XML file)
// read(graph, 'fileio.xml');
// Gets the default parent for inserting new cells. This
@ -108,9 +105,9 @@ const Template = ({ label, ...args }) => {
graph.getModel().endUpdate();
}
graph.dblClick = function(evt, cell) {
graph.dblClick = function (evt, cell) {
const mxe = new EventObject(
mxEvent.DOUBLE_CLICK,
InternalEvent.DOUBLE_CLICK,
'event',
evt,
'cell',
@ -120,13 +117,11 @@ const Template = ({ label, ...args }) => {
if (
this.isEnabled() &&
!mxEvent.isConsumed(evt) &&
!InternalEvent.isConsumed(evt) &&
!mxe.isConsumed() &&
cell != null
) {
alert(
`Show properties for cell ${cell.customId || cell.getId()}`
);
alert(`Show properties for cell ${cell.customId || cell.getId()}`);
}
};
}
@ -163,15 +158,7 @@ const Template = ({ label, ...args }) => {
const key = lines[i].substring(0, colon);
if (key.length > 0) {
vertices[key] = graph.insertVertex(
parent,
null,
value,
0,
0,
80,
70
);
vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70);
}
} else if (comma < colon) {
// Looks up the vertices in the lookup table
@ -194,7 +181,7 @@ const Template = ({ label, ...args }) => {
}
}
// Parses the mxGraph XML file format
// Parses the Graph XML file format
function read(graph, filename) {
const req = load(filename);
const root = req.getDocumentElement();
@ -204,6 +191,6 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

44
packages/html/stories/FixedIcons.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,20 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxRectangle,
mxConstants,
mxUtils,
mxLabel
} = mxgraph;
const { Graph, Rubberband, Rectangle, Constants, utils, mxLabel } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -32,38 +25,29 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Overrides the image bounds code to change the position
mxLabel.prototype.getImageBounds = function(x, y, w, h) {
const iw = mxUtils.getValue(
this.style,
'imageWidth',
mxConstants.DEFAULT_IMAGESIZE
);
const ih = mxUtils.getValue(
this.style,
'imageHeight',
mxConstants.DEFAULT_IMAGESIZE
);
mxLabel.prototype.getImageBounds = function (x, y, w, h) {
const iw = utils.getValue(this.style, 'imageWidth', Constants.DEFAULT_IMAGESIZE);
const ih = utils.getValue(this.style, 'imageHeight', Constants.DEFAULT_IMAGESIZE);
// Places the icon
const ix = (w - iw) / 2;
const iy = h - ih;
return new mxRectangle(x + ix, y + iy, iw, ih);
return new Rectangle(x + ix, y + iy, iw, ih);
};
// Makes the shadow brighter
mxConstants.SHADOWCOLOR = '#C0C0C0';
Constants.SHADOWCOLOR = '#C0C0C0';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Uncomment the following if you want the container
// to fit the size of the graph
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -89,6 +73,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

93
packages/html/stories/FixedPoints.stories.js
View File

@ -1,7 +1,7 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
import { intersects } from '@mxgraph/core/src/util/Utils';
import { intersects } from '@maxgraph/core/util/Utils';
export default {
title: 'Connections/FixedPoints',
@ -9,22 +9,22 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxConnectionHandler,
mxConnectionConstraint,
mxConstraintHandler,
mxPoint,
mxCellState,
mxEdgeHandler
} = mxgraph;
Graph,
Rubberband,
ConnectionHandler,
ConnectionConstraint,
ConstraintHandler,
Point,
CellState,
EdgeHandler,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -34,17 +34,15 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
class MyCustomConstraintHandler extends mxConstraintHandler {
class MyCustomConstraintHandler extends ConstraintHandler {
// Snaps to fixed points
intersects(icon, point, source, existingEdge) {
return (
!source || existingEdge || intersects(icon.bounds, point)
);
return !source || existingEdge || intersects(icon.bounds, point);
}
}
class MyCustomConnectionHandler extends mxConnectionHandler {
// connectImage = new mxImage('images/connector.gif', 16, 16);
class MyCustomConnectionHandler extends ConnectionHandler {
// connectImage = new ImageBox('images/connector.gif', 16, 16);
isConnectableCell(cell) {
return false;
@ -59,21 +57,15 @@ const Template = ({ label, ...args }) => {
*/
updateEdgeState(pt, constraint) {
if (pt != null && this.previous != null) {
const constraints = this.graph.getAllConnectionConstraints(
this.previous
);
const constraints = this.graph.getAllConnectionConstraints(this.previous);
let nearestConstraint = null;
let dist = null;
for (let i = 0; i < constraints.length; i++) {
const cp = this.graph.getConnectionPoint(
this.previous,
constraints[i]
);
const cp = this.graph.getConnectionPoint(this.previous, constraints[i]);
if (cp != null) {
const tmp =
(cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
const tmp = (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
if (dist == null || tmp < dist) {
nearestConstraint = constraints[i];
@ -90,7 +82,7 @@ const Template = ({ label, ...args }) => {
// this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle';
// And to use the new edge style in the new edge inserted into the graph,
// update the cell style as follows:
// this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
// this.edgeState.cell.style = utils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
}
return super.updateEdgeState(pt, constraint);
}
@ -106,22 +98,18 @@ const Template = ({ label, ...args }) => {
'edgeStyle=orthogonalEdgeStyle'
);
return new mxCellState(
this.graph.view,
edge,
this.graph.getCellStyle(edge)
);
return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
}
}
class MyCustomEdgeHandler extends mxEdgeHandler {
class MyCustomEdgeHandler extends EdgeHandler {
// Disables floating connections (only use with no connect image)
isConnectableCell(cell) {
return graph.connectionHandler.isConnectableCell(cell);
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createConnectionHandler() {
const r = new MyCustomConnectionHandler();
r.constraintHandler = new MyCustomConstraintHandler(this);
@ -137,14 +125,14 @@ const Template = ({ label, ...args }) => {
getAllConnectionConstraints(terminal) {
if (terminal != null && terminal.cell.isVertex()) {
return [
new mxConnectionConstraint(new mxPoint(0, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(1, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(1, 1), true),
new ConnectionConstraint(new Point(0, 0), true),
new ConnectionConstraint(new Point(0.5, 0), true),
new ConnectionConstraint(new Point(1, 0), true),
new ConnectionConstraint(new Point(0, 0.5), true),
new ConnectionConstraint(new Point(1, 0.5), true),
new ConnectionConstraint(new Point(0, 1), true),
new ConnectionConstraint(new Point(0.5, 1), true),
new ConnectionConstraint(new Point(1, 1), true),
];
}
return null;
@ -156,8 +144,7 @@ const Template = ({ label, ...args }) => {
graph.setConnectable(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -208,16 +195,16 @@ const Template = ({ label, ...args }) => {
// Use this code to snap the source point for new connections without a connect preview,
// ie. without an overridden graph.connectionHandler.createEdgeState
/*
let mxConnectionHandlerMouseMove = mxConnectionHandler.prototype.mouseMove;
mxConnectionHandler.prototype.mouseMove = function(sender, me)
let mxConnectionHandlerMouseMove = ConnectionHandler.prototype.mouseMove;
ConnectionHandler.prototype.mouseMove = function(sender, me)
{
this.sourceConstraint = null;
mxConnectionHandlerMouseMove.apply(this, arguments);
};
let mxConnectionHandlerGetSourcePerimeterPoint = mxConnectionHandler.prototype.getSourcePerimeterPoint;
mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)
let mxConnectionHandlerGetSourcePerimeterPoint = ConnectionHandler.prototype.getSourcePerimeterPoint;
ConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)
{
let result = null;
@ -262,6 +249,6 @@ const Template = ({ label, ...args }) => {
*/
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

32
packages/html/stories/Folding.stories.js
View File

@ -1,22 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/Folding',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConstants,
mxEdgeStyle,
mxStackLayout,
mxLayoutManager
} = mxgraph;
const { Graph, Constants, EdgeStyle, StackLayout, LayoutManager } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -27,10 +21,10 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Enables crisp rendering of rectangles in SVG
mxConstants.ENTITY_SEGMENT = 20;
Constants.ENTITY_SEGMENT = 20;
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setDropEnabled(true);
// Disables global features
@ -43,7 +37,7 @@ const Template = ({ label, ...args }) => {
// Sets global styles
let style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.EntityRelation;
style.edge = EdgeStyle.EntityRelation;
style.rounded = true;
style = graph.getStylesheet().getDefaultVertexStyle();
@ -52,17 +46,17 @@ const Template = ({ label, ...args }) => {
style.startSize = 30;
style = [];
style.shape = mxConstants.SHAPE_RECTANGLE;
style.shape = Constants.SHAPE_RECTANGLE;
style.strokeColor = 'none';
style.fillColor = 'none';
style.foldable = false;
graph.getStylesheet().putCellStyle('column', style);
// Installs auto layout for all levels
const layout = new mxStackLayout(graph, true);
const layout = new StackLayout(graph, true);
layout.border = graph.border;
const layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell) {
const layoutMgr = new LayoutManager(graph);
layoutMgr.getLayout = function (cell) {
if (!cell.collapsed) {
if (cell.parent !== graph.model.root) {
layout.resizeParent = true;
@ -140,6 +134,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

154
packages/html/stories/Grid.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,26 +8,26 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxLog,
mxGraphView,
mxPoint,
Graph,
InternalEvent,
Rubberband,
mxLog,
GraphView,
Point,
mxDomHelpers,
mxEventUtils
} = mxgraph;
EventUtils,
} = maxgraph;
const div = document.createElement('div');
@ -39,73 +39,69 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
div.appendChild(container);
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
var graph = new Graph(container);
graph.graphHandler.scaleGrid = true;
graph.setPanning(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
let repaintGrid;
// Create grid dynamically (requires canvas)
(function()
{
try
{
(function () {
try {
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.zIndex = -1;
graph.container.appendChild(canvas);
var ctx = canvas.getContext('2d');
// Modify event filtering to accept canvas as container
var mxGraphViewIsContainerEvent = mxGraphView.prototype.isContainerEvent;
mxGraphView.prototype.isContainerEvent = function(evt)
{
return mxGraphViewIsContainerEvent.apply(this, arguments) ||
mxEventUtils.getSource(evt) == canvas;
var mxGraphViewIsContainerEvent = GraphView.prototype.isContainerEvent;
GraphView.prototype.isContainerEvent = function (evt) {
return (
mxGraphViewIsContainerEvent.apply(this, arguments) ||
EventUtils.getSource(evt) == canvas
);
};
var s = 0;
var gs = 0;
var tr = new mxPoint();
var tr = new Point();
var w = 0;
var h = 0;
repaintGrid = function()
{
if (ctx != null)
{
repaintGrid = function () {
if (ctx != null) {
var bounds = graph.getGraphBounds();
var width = Math.max(bounds.x + bounds.width, graph.container.clientWidth);
var height = Math.max(bounds.y + bounds.height, graph.container.clientHeight);
var sizeChanged = width != w || height != h;
if (graph.view.scale != s || graph.view.translate.x != tr.x || graph.view.translate.y != tr.y ||
gs != graph.gridSize || sizeChanged)
{
if (
graph.view.scale != s ||
graph.view.translate.x != tr.x ||
graph.view.translate.y != tr.y ||
gs != graph.gridSize ||
sizeChanged
) {
tr = graph.view.translate.clone();
s = graph.view.scale;
gs = graph.gridSize;
w = width;
h = height;
// Clears the background if required
if (!sizeChanged)
{
if (!sizeChanged) {
ctx.clearRect(0, 0, w, h);
}
else
{
} else {
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
}
@ -117,8 +113,7 @@ const Template = ({ label, ...args }) => {
var minStepping = graph.gridSize;
var stepping = minStepping * s;
if (stepping < minStepping)
{
if (stepping < minStepping) {
var count = Math.round(Math.ceil(minStepping / stepping) / 2) * 2;
stepping = count * stepping;
}
@ -139,21 +134,19 @@ const Template = ({ label, ...args }) => {
// Draws the actual grid
ctx.strokeStyle = '#f6f6f6';
ctx.beginPath();
for (var x = xs; x <= xe; x += stepping)
{
for (var x = xs; x <= xe; x += stepping) {
x = Math.round((x - tx) / stepping) * stepping + tx;
var ix = Math.round(x);
ctx.moveTo(ix + 0.5, iys + 0.5);
ctx.lineTo(ix + 0.5, iye + 0.5);
}
for (var y = ys; y <= ye; y += stepping)
{
for (var y = ys; y <= ye; y += stepping) {
y = Math.round((y - ty) / stepping) * stepping + ty;
var iy = Math.round(y);
ctx.moveTo(ixs + 0.5, iy + 0.5);
ctx.lineTo(ixe + 0.5, iy + 0.5);
}
@ -163,58 +156,53 @@ const Template = ({ label, ...args }) => {
}
}
};
}
catch (e)
{
} catch (e) {
mxLog.show();
mxLog.debug('Using background image');
container.style.backgroundImage = 'url(\'editors/images/grid.gif\')';
container.style.backgroundImage = "url('editors/images/grid.gif')";
}
var mxGraphViewValidateBackground = mxGraphView.prototype.validateBackground;
mxGraphView.prototype.validateBackground = function()
{
var mxGraphViewValidateBackground = GraphView.prototype.validateBackground;
GraphView.prototype.validateBackground = function () {
mxGraphViewValidateBackground.apply(this, arguments);
repaintGrid();
};
})();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
try {
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
} finally {
// Updates the display
graph.getModel().endUpdate();
}
graph.centerZoom = false;
const controller = document.createElement('div');
div.appendChild(controller);
controller.appendChild(mxDomHelpers.button('+', function()
{
graph.zoomIn();
}));
controller.appendChild(mxDomHelpers.button('-', function()
{
graph.zoomOut();
}));
controller.appendChild(
mxDomHelpers.button('+', function () {
graph.zoomIn();
})
);
controller.appendChild(
mxDomHelpers.button('-', function () {
graph.zoomOut();
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

48
packages/html/stories/Groups.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,18 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxGraphHandler,
mxPopupMenuHandler
} = mxgraph;
const { Graph, Rubberband, GraphHandler, mxPopupMenuHandler } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -30,27 +25,24 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Overrides check for valid roots
mxGraph.prototype.isValidRoot = function() {
Graph.prototype.isValidRoot = function () {
return false;
};
// Don't clear selection if multiple cells selected
const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
mxGraphHandler.prototype.mouseDown = function(sender, me) {
const graphHandlerMouseDown = GraphHandler.prototype.mouseDown;
GraphHandler.prototype.mouseDown = function (sender, me) {
graphHandlerMouseDown.apply(this, arguments);
if (
this.graph.isCellSelected(me.getCell()) &&
this.graph.getSelectionCount() > 1
) {
if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1) {
this.delayedSelection = false;
}
};
// Selects descendants before children selection mode
const graphHandlerGetInitialCellForEvent =
mxGraphHandler.prototype.getInitialCellForEvent;
mxGraphHandler.prototype.getInitialCellForEvent = function(me) {
GraphHandler.prototype.getInitialCellForEvent;
GraphHandler.prototype.getInitialCellForEvent = function (me) {
const model = this.graph.getModel();
const psel = this.graph.getSelectionCell().getParent();
let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
@ -72,9 +64,8 @@ const Template = ({ label, ...args }) => {
};
// Selection is delayed to mouseup if child selected
const graphHandlerIsDelayedSelection =
mxGraphHandler.prototype.isDelayedSelection;
mxGraphHandler.prototype.isDelayedSelection = function(cell) {
const graphHandlerIsDelayedSelection = GraphHandler.prototype.isDelayedSelection;
GraphHandler.prototype.isDelayedSelection = function (cell) {
let result = graphHandlerIsDelayedSelection.apply(this, arguments);
const model = this.graph.getModel();
const psel = this.graph.getSelectionCell().getParent();
@ -94,7 +85,7 @@ const Template = ({ label, ...args }) => {
};
// Delayed selection of parent group
mxGraphHandler.prototype.selectDelayed = function(me) {
GraphHandler.prototype.selectDelayed = function (me) {
let cell = me.getCell();
if (cell == null) {
@ -117,7 +108,7 @@ const Template = ({ label, ...args }) => {
};
// Returns last selected ancestor
mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {
mxPopupMenuHandler.prototype.getCellForPopupEvent = function (me) {
let cell = me.getCell();
const model = this.graph.getModel();
let parent = cell.getParent();
@ -134,7 +125,7 @@ const Template = ({ label, ...args }) => {
};
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.constrainChildren = false;
graph.extendParents = false;
graph.extendParentsOnAdd = false;
@ -144,8 +135,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -162,6 +152,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

61
packages/html/stories/Guides.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,21 +8,21 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxGraphHandler,
mxEvent,
mxConstants,
mxEdgeHandler,
mxEdgeStyle,
mxRubberband
} = mxgraph;
Graph,
GraphHandler,
InternalEvent,
Constants,
EdgeHandler,
EdgeStyle,
Rubberband,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -33,40 +33,39 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
GraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGraphHandler.prototype.useGuidesForEvent = function(me) {
return !mxEvent.isAltDown(me.getEvent());
GraphHandler.prototype.useGuidesForEvent = function (me) {
return !InternalEvent.isAltDown(me.getEvent());
};
// Defines the guides to be red (default)
mxConstants.GUIDE_COLOR = '#FF0000';
Constants.GUIDE_COLOR = '#FF0000';
// Defines the guides to be 1 pixel (default)
mxConstants.GUIDE_STROKEWIDTH = 1;
Constants.GUIDE_STROKEWIDTH = 1;
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
EdgeHandler.prototype.snapToTerminals = true;
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
graph.gridSize = 30;
// Changes the default style for edges "in-place" and assigns
// an alternate edge style which is applied in mxGraph.flip
// an alternate edge style which is applied in Graph.flip
// when the user double clicks on the adjustment control point
// of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle();
style.rounded = true;
style.edge = mxEdgeStyle.ElbowConnector;
style.edge = EdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -85,7 +84,7 @@ const Template = ({ label, ...args }) => {
}
// Handles cursor keys
const nudge = function(keyCode) {
const nudge = function (keyCode) {
if (!graph.isSelectionEmpty()) {
let dx = 0;
let dy = 0;
@ -111,26 +110,26 @@ const Template = ({ label, ...args }) => {
// Ignores enter keystroke. Remove this line if you want the
// enter keystroke to stop editing
keyHandler.enter = function() {};
keyHandler.enter = function () {};
keyHandler.bindKey(37, function() {
keyHandler.bindKey(37, function () {
nudge(37);
});
keyHandler.bindKey(38, function() {
keyHandler.bindKey(38, function () {
nudge(38);
});
keyHandler.bindKey(39, function() {
keyHandler.bindKey(39, function () {
nudge(39);
});
keyHandler.bindKey(40, function() {
keyHandler.bindKey(40, function () {
nudge(40);
});
};
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

122
packages/html/stories/Handles.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,29 +8,29 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxCylinder,
Graph,
CylinderShape,
mxDomHelpers,
mxCellRenderer,
mxPoint,
mxRectangle,
mxVertexHandler,
mxEvent,
mxRubberband,
mxUtils,
mxHandle
} = mxgraph;
CellRenderer,
Point,
Rectangle,
VertexHandler,
InternalEvent,
Rubberband,
utils,
VertexHandle,
} = maxgraph;
const div = document.createElement('div');
@ -43,17 +43,15 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
div.appendChild(container);
class MyShape extends mxCylinder {
class MyShape extends CylinderShape {
defaultPos1 = 20;
defaultPos2 = 60;
getLabelBounds(rect) {
const pos1 =
mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
const pos2 =
mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
return new mxRectangle(
const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
return new Rectangle(
rect.x,
rect.y + pos1,
rect.width,
@ -62,8 +60,8 @@ const Template = ({ label, ...args }) => {
}
redrawPath(path, x, y, w, h, isForeground) {
const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1);
const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2);
if (isForeground) {
if (pos1 < h) {
@ -80,9 +78,9 @@ const Template = ({ label, ...args }) => {
}
}
}
mxCellRenderer.registerShape('myShape', MyShape);
CellRenderer.registerShape('myShape', MyShape);
class MyCustomVertexHandler extends mxVertexHandler {
class MyCustomVertexHandler extends VertexHandler {
livePreview = true;
rotationEnabled = true;
@ -90,19 +88,15 @@ const Template = ({ label, ...args }) => {
createCustomHandles() {
if (this.state.style.shape === 'myShape') {
// Implements the handle for the first divider
const firstHandle = new mxHandle(this.state);
const firstHandle = new VertexHandle(this.state);
firstHandle.getPosition = function(bounds) {
firstHandle.getPosition = function (bounds) {
const pos2 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
)
)
);
@ -111,29 +105,21 @@ const Template = ({ label, ...args }) => {
Math.min(
pos2,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
)
)
);
return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
return new Point(bounds.getCenterX(), bounds.y + pos1);
};
firstHandle.setPosition = function(bounds, pt) {
firstHandle.setPosition = function (bounds, pt) {
const pos2 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
)
)
);
@ -143,26 +129,22 @@ const Template = ({ label, ...args }) => {
);
};
firstHandle.execute = function() {
firstHandle.execute = function () {
this.copyStyle('pos1');
};
firstHandle.ignoreGrid = true;
// Implements the handle for the second divider
const secondHandle = new mxHandle(this.state);
const secondHandle = new VertexHandle(this.state);
secondHandle.getPosition = function(bounds) {
secondHandle.getPosition = function (bounds) {
const pos1 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
)
)
);
@ -171,29 +153,21 @@ const Template = ({ label, ...args }) => {
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos2',
MyShape.prototype.defaultPos2
)
utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
)
)
);
return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
return new Point(bounds.getCenterX(), bounds.y + pos2);
};
secondHandle.setPosition = function(bounds, pt) {
secondHandle.setPosition = function (bounds, pt) {
const pos1 = Math.max(
0,
Math.min(
bounds.height,
parseFloat(
mxUtils.getValue(
this.state.style,
'pos1',
MyShape.prototype.defaultPos1
)
utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
)
)
);
@ -203,7 +177,7 @@ const Template = ({ label, ...args }) => {
);
};
secondHandle.execute = function() {
secondHandle.execute = function () {
this.copyStyle('pos2');
};
@ -216,15 +190,14 @@ const Template = ({ label, ...args }) => {
}
}
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
createVertexHandler(state) {
return new MyCustomVertexHandler(state);
}
}
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
const graph = new MyCustomGraph(container);
@ -234,8 +207,7 @@ const Template = ({ label, ...args }) => {
graph.centerZoom = false;
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -263,17 +235,17 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('+', function() {
mxDomHelpers.button('+', function () {
graph.zoomIn();
})
);
buttons.appendChild(
mxDomHelpers.button('-', function() {
mxDomHelpers.button('-', function () {
graph.zoomOut();
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

55
packages/html/stories/HelloPort.stories.js
View File

@ -1,8 +1,8 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
import { getPrettyXml } from '@mxgraph/core/src/util/XmlUtils';
import { popup } from '@maxgraph/core/util/gui/mxWindow';
import { getPrettyXml } from '@maxgraph/core/util/XmlUtils';
export default {
title: 'Connections/HelloPort',
@ -10,21 +10,21 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxEdgeStyle,
mxPoint,
mxConstants,
Graph,
Rubberband,
EdgeStyle,
Point,
Constants,
mxDomHelpers,
mxClient
} = mxgraph;
mxClient,
} = maxgraph;
mxClient.setImageBasePath('/images');
@ -40,17 +40,17 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
graph.setTooltips(true);
// Sets the default edge style
const style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.ElbowConnector;
style.edge = EdgeStyle.ElbowConnector;
// Ports are not used as terminals for edges, they are
// only used to compute the graphical connection point
graph.isPort = function(cell) {
graph.isPort = function (cell) {
const geo = this.getCellGeometry(cell);
return geo != null ? geo.relative : false;
@ -58,26 +58,23 @@ const Template = ({ label, ...args }) => {
// Implements a tooltip that shows the actual
// source and target of an edge
graph.getTooltipForCell = function(cell) {
graph.getTooltipForCell = function (cell) {
if (cell.isEdge()) {
return `${this.convertValueToString(
cell.getTerminal(true)
)} => ${this.convertValueToString(
cell.getTerminal(false)
)}`;
)} => ${this.convertValueToString(cell.getTerminal(false))}`;
}
return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
return Graph.prototype.getTooltipForCell.apply(this, arguments);
};
// Removes the folding icon and disables any folding
graph.isCellFoldable = function(cell) {
graph.isCellFoldable = function (cell) {
return false;
};
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -89,10 +86,10 @@ const Template = ({ label, ...args }) => {
const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
v1.setConnectable(false);
const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
v11.geometry.offset = new mxPoint(-5, -5);
v11.geometry.offset = new Point(-5, -5);
v11.geometry.relative = true;
const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
v12.geometry.offset = new mxPoint(-5, -5);
v12.geometry.offset = new Point(-5, -5);
v12.geometry.relative = true;
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
@ -106,7 +103,7 @@ const Template = ({ label, ...args }) => {
const controller = document.createElement('div');
div.appendChild(controller);
const button = mxDomHelpers.button('View XML', function() {
const button = mxDomHelpers.button('View XML', function () {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
popup(getPrettyXml(node), true);
@ -115,6 +112,6 @@ const Template = ({ label, ...args }) => {
controller.appendChild(button);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

12
packages/html/stories/HelloWorld.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -18,8 +18,8 @@ export default {
};
const Template = ({ label, ...args }) => {
const { mxGraph, mxEvent, mxRubberband } = mxgraph;
const { Graph, InternalEvent, Rubberband } = maxgraph;
console.log(maxgraph, Graph);
const container = document.createElement('div');
container.style.position = 'relative';
container.style.overflow = 'hidden';
@ -28,11 +28,11 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
if (!args.contextMenu) mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
const graph = new mxGraph(container);
const graph = new Graph(container);
if (args.rubberBand) new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
const parent = graph.getDefaultParent();

37
packages/html/stories/HierarchicalLayout.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,26 +8,26 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
Graph,
mxDomUtils,
mxFastOrganicLayout,
mxHierarchicalLayout,
mxPerimeter,
mxEvent,
mxRubberband,
mxConstants
} = mxgraph;
Perimeter,
InternalEvent,
Rubberband,
Constants,
} = maxgraph;
const div = document.createElement('div');
@ -41,15 +41,14 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Adds rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style.perimiter = mxPerimeter.RectanglePerimeter;
style.perimiter = Perimeter.RectanglePerimeter;
style.gradientColor = 'white';
style.perimeterSpacing = 6;
style.rounded = true;
@ -72,7 +71,7 @@ const Template = ({ label, ...args }) => {
// Adds a button to execute the layout
let button = document.createElement('button');
mxDomUtils.write(button, 'Hierarchical');
mxEvent.addListener(button, 'click', function(evt) {
InternalEvent.addListener(button, 'click', function (evt) {
layout.execute(parent);
});
buttons.appendChild(button);
@ -81,7 +80,7 @@ const Template = ({ label, ...args }) => {
button = document.createElement('button');
mxDomUtils.write(button, 'Organic');
mxEvent.addListener(button, 'click', function(evt) {
InternalEvent.addListener(button, 'click', function (evt) {
organic.execute(parent);
});
@ -122,6 +121,6 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

64
packages/html/stories/HoverIcons.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,21 +8,21 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEvent,
mxRubberband,
mxImage,
mxRectangle,
mxUtils,
mxConnectionHandler
} = mxgraph;
Graph,
InternalEvent,
Rubberband,
ImageBox,
Rectangle,
utils,
ConnectionHandler,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -34,11 +34,7 @@ const Template = ({ label, ...args }) => {
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
// Defines a new class for all icons
class mxIconSet {
@ -47,7 +43,7 @@ const Template = ({ label, ...args }) => {
const { graph } = state.view;
// Icon1
let img = mxUtils.createImage('images/copy.png');
let img = utils.createImage('images/copy.png');
img.setAttribute('title', 'Duplicate');
Object.assign(img.style, {
cursor: 'pointer',
@ -58,10 +54,10 @@ const Template = ({ label, ...args }) => {
top: `${state.y + state.height}px`,
});
mxEvent.addGestureListeners(img, evt => {
InternalEvent.addGestureListeners(img, (evt) => {
const s = graph.gridSize;
graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
mxEvent.consume(evt);
InternalEvent.consume(evt);
this.destroy();
});
@ -69,7 +65,7 @@ const Template = ({ label, ...args }) => {
this.images.push(img);
// Delete
img = mxUtils.createImage('images/delete2.png');
img = utils.createImage('images/delete2.png');
img.setAttribute('title', 'Delete');
Object.assign(img.style, {
cursor: 'pointer',
@ -80,14 +76,14 @@ const Template = ({ label, ...args }) => {
top: `${state.y - 16}px`,
});
mxEvent.addGestureListeners(img, evt => {
InternalEvent.addGestureListeners(img, (evt) => {
// Disables dragging the image
mxEvent.consume(evt);
InternalEvent.consume(evt);
});
mxEvent.addListener(img, 'click', evt => {
InternalEvent.addListener(img, 'click', (evt) => {
graph.removeCells([state.cell]);
mxEvent.consume(evt);
InternalEvent.consume(evt);
this.destroy();
});
@ -106,12 +102,11 @@ const Template = ({ label, ...args }) => {
}
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Defines the tolerance before removing the icons
const ICON_TOLERANCE = 20;
@ -135,13 +130,13 @@ const Template = ({ label, ...args }) => {
(me.getState() === this.currentState || me.getState() == null)
) {
const tol = ICON_TOLERANCE;
const tmp = new mxRectangle(
const tmp = new Rectangle(
me.getGraphX() - tol,
me.getGraphY() - tol,
2 * tol,
2 * tol
);
if (mxUtils.intersects(tmp, this.currentState)) {
if (utils.intersects(tmp, this.currentState)) {
return;
}
}
@ -149,10 +144,7 @@ const Template = ({ label, ...args }) => {
let tmp = graph.view.getState(me.getCell());
// Ignore everything but vertices
if (
graph.isMouseDown ||
(tmp != null && !tmp.cell.isVertex())
) {
if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) {
tmp = null;
}
@ -210,6 +202,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

35
packages/html/stories/HoverStyle.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,18 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConstants,
mxRubberband,
mxCloneUtils
} = mxgraph;
const { Graph, Constants, Rubberband, CloneUtils } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -30,7 +25,7 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
function updateStyle(state, hover) {
if (hover) {
@ -42,9 +37,7 @@ const Template = ({ label, ...args }) => {
// once it is set, whereas the above overrides the default value
state.style.rounded = hover ? '1' : '0';
state.style.strokeWidth = hover ? '4' : '1';
state.style.fontStyle = hover
? mxConstants.FONT_BOLD
: '0';
state.style.fontStyle = hover ? Constants.FONT_BOLD : '0';
}
// Changes fill color to red on mouseover
@ -65,10 +58,7 @@ const Template = ({ label, ...args }) => {
let tmp = graph.view.getState(me.getCell());
// Ignores everything but vertices
if (
graph.isMouseDown ||
(tmp != null && !tmp.cell.isVertex())
) {
if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) {
tmp = null;
}
@ -88,7 +78,7 @@ const Template = ({ label, ...args }) => {
dragEnter(evt, state) {
if (state != null) {
this.previousStyle = state.style;
state.style = mxCloneUtils.clone(state.style);
state.style = CloneUtils.clone(state.style);
updateStyle(state, true);
state.shape.apply(state);
state.shape.redraw();
@ -115,8 +105,7 @@ const Template = ({ label, ...args }) => {
});
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -134,6 +123,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

65
packages/html/stories/Images.stories.js
View File

@ -1,23 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Icon_Images/Images',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxCloneUtils,
mxImage,
mxRectangle,
mxConstants,
mxPerimeter
} = mxgraph;
const { Graph, CloneUtils, ImageBox, Rectangle, Constants, Perimeter } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -28,16 +21,14 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Sets a background image and restricts child movement to its bounds
graph.setBackgroundImage(
new mxImage('images/gradient_background.jpg', 360, 200)
);
graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
graph.setBackgroundImage(new ImageBox('images/gradient_background.jpg', 360, 200));
graph.maximumGraphBounds = new Rectangle(0, 0, 360, 200);
// Resizes the container but never make it bigger than the background
graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
graph.minimumContainerSize = new Rectangle(0, 0, 360, 200);
graph.setResizeContainer(true);
// Disables basic selection and cell handling
@ -99,19 +90,19 @@ const Template = ({ label, ...args }) => {
function configureStylesheet(graph) {
let style = {};
style.shape = mxConstants.SHAPE_IMAGE;
style.perimiter = mxPerimeter.RectanglePerimeter;
style.shape = Constants.SHAPE_IMAGE;
style.perimiter = Perimeter.RectanglePerimeter;
style.image = 'images/icons48/keys.png';
style.fontColor = '#FFFFFF';
graph.getStylesheet().putCellStyle('image', style);
style = mxCloneUtils.clone(style);
style.shape = mxConstants.SHAPE_LABEL;
style = CloneUtils.clone(style);
style.shape = Constants.SHAPE_LABEL;
style.strokeColor = '#000000';
style.align = mxConstants.ALIGN_CENTER;
style.verticalAlign = mxConstants.ALIGN_TOP;
style.imageAlign = mxConstants.ALIGN_CENTER;
style.imageVerticalAlign = mxConstants.ALIGN_TOP;
style.align = Constants.ALIGN_CENTER;
style.verticalAlign = Constants.ALIGN_TOP;
style.imageAlign = Constants.ALIGN_CENTER;
style.imageVerticalAlign = Constants.ALIGN_TOP;
style.image = 'images/icons48/gear.png';
style.imageWidth = '48';
style.imageHeight = '48';
@ -119,31 +110,31 @@ const Template = ({ label, ...args }) => {
style.spacing = '8';
graph.getStylesheet().putCellStyle('bottom', style);
style = mxCloneUtils.clone(style);
style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM;
style = CloneUtils.clone(style);
style.imageVerticalAlign = Constants.ALIGN_BOTTOM;
style.image = 'images/icons48/server.png';
delete style.spacingTop;
graph.getStylesheet().putCellStyle('top', style);
style = mxCloneUtils.clone(style);
style.align = mxConstants.ALIGN_LEFT;
style.imageAlign = mxConstants.ALIGN_LEFT;
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE;
style = CloneUtils.clone(style);
style.align = Constants.ALIGN_LEFT;
style.imageAlign = Constants.ALIGN_LEFT;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.imageVerticalAlign = Constants.ALIGN_MIDDLE;
style.image = 'images/icons48/earth.png';
style.spacingLeft = '55';
style.spacing = '4';
graph.getStylesheet().putCellStyle('right', style);
style = mxCloneUtils.clone(style);
style.align = mxConstants.ALIGN_RIGHT;
style.imageAlign = mxConstants.ALIGN_RIGHT;
style = CloneUtils.clone(style);
style.align = Constants.ALIGN_RIGHT;
style.imageAlign = Constants.ALIGN_RIGHT;
delete style.spacingLeft;
style.spacingRight = '55';
graph.getStylesheet().putCellStyle('left', style);
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

23
packages/html/stories/Indicators.stories.js
View File

@ -1,21 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Icon_Images/Indicators',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEdgeStyle,
mxConstants,
mxKeyHandler
} = mxgraph;
const { Graph, EdgeStyle, Constants, mxKeyHandler } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -26,7 +21,7 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
new mxKeyHandler(graph);
@ -50,8 +45,8 @@ const Template = ({ label, ...args }) => {
// Creates a style with an indicator
style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.ElbowConnector;
style.elbow = mxConstants.ELBOW_VERTICAL;
style.edge = EdgeStyle.ElbowConnector;
style.elbow = Constants.ELBOW_VERTICAL;
style.rounded = true;
// Gets the default parent for inserting new cells. This
@ -88,6 +83,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

36
packages/html/stories/JsonData.stories.js
View File

@ -1,27 +1,27 @@
import mxgraph from '@mxgraph/core';
import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
import maxgraph from '@maxgraph/core';
import { popup } from '@maxgraph/core/util/gui/mxWindow';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Xml_Json/JsonData',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
Graph,
mxObjectCodec,
mxDomHelpers,
mxCodecRegistry,
mxEvent,
InternalEvent,
mxClient,
mxCodec,
mxDomUtils,
mxUtils
} = mxgraph;
utils,
} = maxgraph;
mxClient.setImageBasePath('/images');
@ -41,12 +41,12 @@ const Template = ({ label, ...args }) => {
this.value = value;
}
const codec = new mxObjectCodec(new CustomData());
codec.encode = function(enc, obj) {
codec.encode = function (enc, obj) {
const node = enc.document.createElement('CustomData');
mxDomUtils.setTextContent(node, JSON.stringify(obj));
return node;
};
codec.decode = function(dec, node, into) {
codec.decode = function (dec, node, into) {
const obj = JSON.parse(mxDomUtils.getTextContent(node));
obj.constructor = CustomData;
@ -55,15 +55,13 @@ const Template = ({ label, ...args }) => {
mxCodecRegistry.register(codec);
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Enables rubberband selection
if (args.rubberBand)
new RubberBand(graph);
if (args.rubberBand) new RubberBand(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -86,14 +84,14 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('Show JSON', function() {
mxDomHelpers.button('Show JSON', function () {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
popup(mxUtils.getXml(node), true);
popup(utils.getXml(node), true);
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

18
packages/html/stories/LabelPosition.stories.js
View File

@ -1,18 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Labels/LabelPosition',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph
} = mxgraph;
const { Graph } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -23,7 +21,7 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -36,7 +34,7 @@ const Template = ({ label, ...args }) => {
// label positions using the label position styles. Vertical
// and horizontal label position styles can be combined.
// Note: Alternatively, vertex labels can be set be overriding
// mxCellRenderer.getLabelBounds.
// CellRenderer.getLabelBounds.
graph.getModel().beginUpdate();
try {
graph.insertVertex(
@ -85,6 +83,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

104
packages/html/stories/Labels.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,19 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxKeyHandler,
mxConstants,
mxRectangle
} = mxgraph;
const { Graph, Rubberband, mxKeyHandler, Constants, Rectangle } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -31,13 +25,12 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setTooltips(true);
graph.htmlLabels = true;
graph.vertexLabelsMovable = true;
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
new mxKeyHandler(graph);
@ -48,32 +41,30 @@ const Template = ({ label, ...args }) => {
graph.autoSizeCellsOnAdd = true;
// Allows moving of relative cells
graph.isCellLocked = function(cell) {
graph.isCellLocked = function (cell) {
return this.isCellsLocked();
};
graph.isCellResizable = function(cell) {
graph.isCellResizable = function (cell) {
const geo = cell.getGeometry();
return geo == null || !geo.relative;
};
// Truncates the label to the size of the vertex
graph.getLabel = function(cell) {
graph.getLabel = function (cell) {
const label = this.labelsVisible ? this.convertValueToString(cell) : '';
const geometry = cell.getGeometry();
if (
!cell.isCollapsed() &&
geometry != null &&
(geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0)) &&
(geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) &&
cell.isVertex() &&
geometry.width >= 2
) {
const style = this.getCellStyle(cell);
const fontSize =
style.fontSize || mxConstants.DEFAULT_FONTSIZE;
const fontSize = style.fontSize || Constants.DEFAULT_FONTSIZE;
const max = geometry.width / (fontSize * 0.625);
if (max < label.length) {
@ -85,19 +76,18 @@ const Template = ({ label, ...args }) => {
};
// Enables wrapping for vertex labels
graph.isWrapping = function(cell) {
graph.isWrapping = function (cell) {
return cell.isCollapsed();
};
// Enables clipping of vertex labels if no offset is defined
graph.isLabelClipped = function(cell) {
graph.isLabelClipped = function (cell) {
const geometry = cell.getGeometry();
return (
geometry != null &&
!geometry.relative &&
(geometry.offset == null ||
(geometry.offset.x == 0 && geometry.offset.y == 0))
(geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0))
);
};
@ -108,39 +98,11 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'vertexLabelsMovable',
20,
20,
80,
30
);
const v1 = graph.insertVertex(parent, null, 'vertexLabelsMovable', 20, 20, 80, 30);
// Places sublabels inside the vertex
const label11 = graph.insertVertex(
v1,
null,
'Label1',
0.5,
1,
0,
0,
null,
true
);
const label12 = graph.insertVertex(
v1,
null,
'Label2',
0.5,
0,
0,
0,
null,
true
);
const label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true);
const label12 = graph.insertVertex(v1, null, 'Label2', 0.5, 0, 0, 0, null, true);
const v2 = graph.insertVertex(
parent,
@ -151,38 +113,18 @@ const Template = ({ label, ...args }) => {
80,
30
);
v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);
v2.geometry.alternateBounds = new Rectangle(0, 0, 80, 30);
const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);
// Places sublabels inside the vertex
const label21 = graph.insertVertex(
v2,
null,
'Label1',
0.5,
1,
0,
0,
null,
true
);
const label22 = graph.insertVertex(
v2,
null,
'Label2',
0.5,
0,
0,
0,
null,
true
);
const label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true);
const label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true);
} finally {
// Updates the display
graph.getModel().endUpdate();
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

51
packages/html/stories/Layers.stories.js
View File

@ -1,22 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/Layers',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomHelpers,
mxCell,
mxGraphModel,
mxPoint
} = mxgraph;
const { Graph, mxDomHelpers, Cell, GraphModel, Point } = maxgraph;
const div = document.createElement('div');
@ -31,13 +25,13 @@ const Template = ({ label, ...args }) => {
// Creates the graph inside the given container using a model
// with a custom root and two layers. Layers can also be added
// dynamically using let layer = model.add(root, new mxCell()).
const root = new mxCell();
const layer0 = root.insert(new mxCell());
const layer1 = root.insert(new mxCell());
const model = new mxGraphModel(root);
// dynamically using let layer = model.add(root, new Cell()).
const root = new Cell();
const layer0 = root.insert(new Cell());
const layer1 = root.insert(new Cell());
const model = new GraphModel(root);
const graph = new mxGraph(container, model);
const graph = new Graph(container, model);
// Disables basic selection and cell handling
graph.setEnabled(false);
@ -70,17 +64,10 @@ const Template = ({ label, ...args }) => {
'fillColor=#C0C0C0'
);
const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);
const e1 = graph.insertEdge(
layer1,
null,
'',
v1,
v3,
'strokeColor=#0C0C0C'
);
e1.geometry.points = [new mxPoint(60, 165)];
const e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C');
e1.geometry.points = [new Point(60, 165)];
const e2 = graph.insertEdge(layer0, null, '', v2, v3);
e2.geometry.points = [new mxPoint(240, 165)];
e2.geometry.points = [new Point(240, 165)];
const e3 = graph.insertEdge(
layer0,
null,
@ -89,7 +76,7 @@ const Template = ({ label, ...args }) => {
v2,
'edgeStyle=topToBottomEdgeStyle'
);
e3.geometry.points = [new mxPoint(150, 30)];
e3.geometry.points = [new Point(150, 30)];
const e4 = graph.insertEdge(
layer1,
null,
@ -98,7 +85,7 @@ const Template = ({ label, ...args }) => {
v1,
'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'
);
e4.geometry.points = [new mxPoint(150, 40)];
e4.geometry.points = [new Point(150, 40)];
} finally {
// Updates the display
model.endUpdate();
@ -108,18 +95,18 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('Layer 0', function() {
mxDomHelpers.button('Layer 0', function () {
model.setVisible(layer0, !layer0.isVisible());
})
);
buttons.appendChild(
mxDomHelpers.button('Layer 1', function() {
mxDomHelpers.button('Layer 1', function () {
model.setVisible(layer1, !layer1.isVisible());
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

23
packages/html/stories/LoD.stories.js
View File

@ -1,19 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Zoom_OffPage/LoD',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomHelpers
} = mxgraph;
const { Graph, mxDomHelpers } = maxgraph;
const div = document.createElement('div');
@ -27,11 +24,11 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.centerZoom = false;
// Links level of detail to zoom level but can be independent of zoom
const isVisible = function() {
const isVisible = function () {
return this.lod == null || this.lod / 2 < graph.view.scale;
};
@ -74,18 +71,18 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('+', function() {
mxDomHelpers.button('+', function () {
graph.zoomIn();
})
);
buttons.appendChild(
mxDomHelpers.button('-', function() {
mxDomHelpers.button('-', function () {
graph.zoomOut();
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

81
packages/html/stories/Markers.stories.js
View File

@ -1,25 +1,25 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Icon_Images/Markers',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEdgeHandler,
mxGraphHandler,
mxCellRenderer,
mxMarker,
mxCylinder,
mxArrow,
mxPoint
} = mxgraph;
Graph,
EdgeHandler,
GraphHandler,
CellRenderer,
Marker,
CylinderShape,
Arrow,
Point,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -30,38 +30,27 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
mxEdgeHandler.prototype.snapToTerminals = true;
GraphHandler.prototype.guidesEnabled = true;
EdgeHandler.prototype.snapToTerminals = true;
// Registers and defines the custom marker
mxMarker.addMarker('dash', function(
canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled
) {
const nx = unitX * (size + sw + 1);
const ny = unitY * (size + sw + 1);
Marker.addMarker(
'dash',
function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
const nx = unitX * (size + sw + 1);
const ny = unitY * (size + sw + 1);
return function() {
canvas.begin();
canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
canvas.lineTo(
pe.x + ny / 2 - (3 * nx) / 2,
pe.y - (3 * ny) / 2 - nx / 2
);
canvas.stroke();
};
});
return function () {
canvas.begin();
canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
canvas.lineTo(pe.x + ny / 2 - (3 * nx) / 2, pe.y - (3 * ny) / 2 - nx / 2);
canvas.stroke();
};
}
);
// Defines custom message shape
class MessageShape extends mxCylinder {
class MessageShape extends CylinderShape {
redrawPath(path, x, y, w, h, isForeground) {
if (isForeground) {
path.moveTo(0, 0);
@ -76,10 +65,10 @@ const Template = ({ label, ...args }) => {
}
}
}
mxCellRenderer.registerShape('message', MessageShape);
CellRenderer.registerShape('message', MessageShape);
// Defines custom edge shape
class LinkShape extends mxArrow {
class LinkShape extends Arrow {
paintEdgeShape(c, pts) {
const width = 10;
@ -121,10 +110,10 @@ const Template = ({ label, ...args }) => {
c.stroke();
}
}
mxCellRenderer.registerShape('link', LinkShape);
CellRenderer.registerShape('link', LinkShape);
// Creates the graph
const graph = new mxGraph(container);
const graph = new Graph(container);
// Sets default styles
let style = graph.getStylesheet().getDefaultVertexStyle();
@ -167,7 +156,7 @@ const Template = ({ label, ...args }) => {
14,
'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'
);
e11.geometry.offset = new mxPoint(-10, -7);
e11.geometry.offset = new Point(-10, -7);
e11.geometry.relative = true;
e11.connectable = false;
@ -215,6 +204,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

124
packages/html/stories/Merge.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,18 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxPerimeter,
mxConstants,
mxRubberband
} = mxgraph;
const { Graph, Perimeter, Constants, Rubberband } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -29,34 +24,33 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default';
mxConstants.SHADOWCOLOR = '#c0c0c0';
Constants.SHADOWCOLOR = '#c0c0c0';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// No size handles, please...
graph.setCellsResizable(false);
// Makes all cells round with a white, bold label
let style = graph.stylesheet.getDefaultVertexStyle();
style.shape = mxConstants.SHAPE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style.shape = Constants.SHAPE_ELLIPSE;
style.perimiter = Perimeter.EllipsePerimeter;
style.fontColor = 'white';
style.gradientColor = 'white';
style.fontStyle = mxConstants.FONT_BOLD;
style.fontStyle = Constants.FONT_BOLD;
style.fontSize = 14;
style.shadow = true;
// Makes all edge labels gray with a white background
style = graph.stylesheet.getDefaultEdgeStyle();
style.fontColor = 'gray';
style.fontStyle = mxConstants.FONT_BOLD;
style.fontStyle = Constants.FONT_BOLD;
style.fontColor = 'black';
style.strokeWidth = 2;
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -69,46 +63,10 @@ const Template = ({ label, ...args }) => {
graph.getModel().beginUpdate();
try {
const a = graph.insertVertex(
parent,
'a',
'A',
20,
20,
w,
h,
'fillColor=blue'
);
const b = graph.insertVertex(
parent,
'b',
'B',
20,
200,
w,
h,
'fillColor=blue'
);
const c = graph.insertVertex(
parent,
'c',
'C',
200,
20,
w,
h,
'fillColor=red'
);
const d = graph.insertVertex(
parent,
'd',
'D',
200,
200,
w,
h,
'fillColor=red'
);
const a = graph.insertVertex(parent, 'a', 'A', 20, 20, w, h, 'fillColor=blue');
const b = graph.insertVertex(parent, 'b', 'B', 20, 200, w, h, 'fillColor=blue');
const c = graph.insertVertex(parent, 'c', 'C', 200, 20, w, h, 'fillColor=red');
const d = graph.insertVertex(parent, 'd', 'D', 200, 200, w, h, 'fillColor=red');
const ac = graph.insertEdge(
parent,
'ac',
@ -139,7 +97,7 @@ const Template = ({ label, ...args }) => {
}
// Creates the second graph model (without a container)
const graph2 = new mxGraph();
const graph2 = new Graph();
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -149,46 +107,10 @@ const Template = ({ label, ...args }) => {
// using custom ids for the vertices
graph2.getModel().beginUpdate();
try {
const c = graph2.insertVertex(
parent2,
'c',
'C',
200,
20,
w,
h,
'fillColor=green'
);
const d = graph2.insertVertex(
parent2,
'd',
'D',
200,
200,
w,
h,
'fillColor=green'
);
const e = graph2.insertVertex(
parent2,
'e',
'E',
400,
20,
w,
h,
'fillColor=green'
);
const f = graph2.insertVertex(
parent2,
'f',
'F',
400,
200,
w,
h,
'fillColor=green'
);
const c = graph2.insertVertex(parent2, 'c', 'C', 200, 20, w, h, 'fillColor=green');
const d = graph2.insertVertex(parent2, 'd', 'D', 200, 200, w, h, 'fillColor=green');
const e = graph2.insertVertex(parent2, 'e', 'E', 400, 20, w, h, 'fillColor=green');
const f = graph2.insertVertex(parent2, 'f', 'F', 400, 200, w, h, 'fillColor=green');
const ce = graph2.insertEdge(
parent2,
'ce',
@ -227,6 +149,6 @@ const Template = ({ label, ...args }) => {
graph.getModel().mergeChildren(parent2, parent /* , false */);
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

162
packages/html/stories/Monitor.stories.js
View File

@ -1,26 +1,26 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Misc/Monitor',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxEdgeStyle,
Graph,
EdgeStyle,
mxDomHelpers,
mxXmlUtils,
mxPerimeter,
mxUtils,
mxConstants,
mxCloneUtils,
mxCodec
} = mxgraph;
Perimeter,
utils,
Constants,
CloneUtils,
mxCodec,
} = maxgraph;
const div = document.createElement('div');
@ -33,50 +33,50 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
div.appendChild(container);
mxConstants.SHADOWCOLOR = '#e0e0e0';
Constants.SHADOWCOLOR = '#e0e0e0';
// Creates the graph inside the given container
const graph = createGraph(container);
// Creates a process display using the activity names as IDs to refer to the elements
const xml =
'<Transactions><root><mxCell id="0"/><mxCell id="1" parent="0"/>' +
'<mxCell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><mxGeometry x="1" width="850" height="400" as="geometry"/></mxCell>' +
'<mxCell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" as="geometry"/></mxCell>' +
'<mxCell id="5" value="" style="start" vertex="1" parent="3"><mxGeometry x="40" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="6" value="X" style="step" vertex="1" parent="3"><mxGeometry x="210" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="7" value="X" style="step" vertex="1" parent="3"><mxGeometry x="380" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="140" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="22" value="X" style="step" vertex="1" parent="3"><mxGeometry x="600" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><mxGeometry x="650" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="27" value="X" style="step" vertex="1" parent="3"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"><mxPoint x="740" y="100" as="sourcePoint"/><mxPoint x="760" y="100" as="targetPoint"/></mxGeometry></mxCell>' +
'<mxCell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="665" y="160"/></Array></mxGeometry></mxCell>' +
'<mxCell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" as="geometry"/></mxCell>' +
'<mxCell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><mxGeometry x="430" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><mxGeometry x="600" y="80" width="100" height="40" as="geometry"/></mxCell>' +
'<mxCell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="17" value="X" style="step" vertex="1" parent="4"><mxGeometry x="720" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="19" value="" style="end" vertex="1" parent="4"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
'<mxCell id="20" value="" edge="1" parent="4" source="17" target="19"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="625" y="160"/></Array></mxGeometry></mxCell>' +
'<mxCell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
'<mxCell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="595" y="180"/><mxPoint x="480" y="180"/><mxPoint x="480" y="100"/></Array></mxGeometry></mxCell>' +
'<mxCell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
'<mxCell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="255" y="200"/></Array></mxGeometry></mxCell>' +
'<Transactions><root><Cell id="0"/><Cell id="1" parent="0"/>' +
'<Cell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><Geometry x="1" width="850" height="400" as="geometry"/></Cell>' +
'<Cell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><Geometry x="30" width="820" height="200" as="geometry"/></Cell>' +
'<Cell id="5" value="" style="start" vertex="1" parent="3"><Geometry x="40" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><Geometry x="90" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="6" value="X" style="step" vertex="1" parent="3"><Geometry x="210" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><Geometry x="260" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="7" value="X" style="step" vertex="1" parent="3"><Geometry x="380" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><Geometry relative="1" as="geometry"><Array as="points"><Point x="140" y="40"/></Array></Geometry></Cell>' +
'<Cell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><Geometry x="480" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="22" value="X" style="step" vertex="1" parent="3"><Geometry x="600" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><Geometry x="650" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="27" value="X" style="step" vertex="1" parent="3"><Geometry x="770" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><Geometry relative="1" as="geometry"><Point x="740" y="100" as="sourcePoint"/><Point x="760" y="100" as="targetPoint"/></Geometry></Cell>' +
'<Cell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><Geometry relative="1" as="geometry"><Array as="points"><Point x="665" y="160"/></Array></Geometry></Cell>' +
'<Cell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><Geometry x="30" y="200" width="820" height="200" as="geometry"/></Cell>' +
'<Cell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><Geometry x="430" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="14" value="X" style="step" vertex="1" parent="4"><Geometry x="550" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><Geometry x="600" y="80" width="100" height="40" as="geometry"/></Cell>' +
'<Cell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="17" value="X" style="step" vertex="1" parent="4"><Geometry x="720" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="19" value="" style="end" vertex="1" parent="4"><Geometry x="770" y="85" width="30" height="30" as="geometry"/></Cell>' +
'<Cell id="20" value="" edge="1" parent="4" source="17" target="19"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="625" y="160"/></Array></Geometry></Cell>' +
'<Cell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><Geometry relative="1" as="geometry"/></Cell>' +
'<Cell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><Geometry relative="1" as="geometry"><Array as="points"><Point x="595" y="180"/><Point x="480" y="180"/><Point x="480" y="100"/></Array></Geometry></Cell>' +
'<Cell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="469" y="40"/></Array></Geometry></Cell>' +
'<Cell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="469" y="40"/></Array></Geometry></Cell>' +
'<Cell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="255" y="200"/></Array></Geometry></Cell>' +
'</root></Transactions>';
const doc = mxXmlUtils.parseXml(xml);
const codec = new mxCodec(doc);
@ -87,8 +87,8 @@ const Template = ({ label, ...args }) => {
// Creates a button to invoke the refresh function
buttons.appendChild(
mxDomHelpers.button('Update', function(evt) {
// XML is normally fetched from URL at server using mxUtils.get - this is a client-side
mxDomHelpers.button('Update', function (evt) {
// XML is normally fetched from URL at server using utils.get - this is a client-side
// string with randomized states to demonstrate the idea of the workflow monitor
const xml =
`<process><update id="ApproveClaim" state="${getState()}"/><update id="AuthorizeClaim" state="${getState()}"/>` +
@ -124,30 +124,16 @@ const Template = ({ label, ...args }) => {
// Updates the cell color and adds some tooltip information
if (cell != null) {
// Resets the fillcolor and the overlay
graph.setCellStyles('fillColor', 'white', [
cell,
]);
graph.setCellStyles('fillColor', 'white', [cell]);
graph.removeCellOverlays(cell);
// Changes the cell color for the known states
if (state == 'Running') {
graph.setCellStyles(
'fillColor',
'#f8cecc',
[cell]
);
graph.setCellStyles('fillColor', '#f8cecc', [cell]);
} else if (state == 'Waiting') {
graph.setCellStyles(
'fillColor',
'#fff2cc',
[cell]
);
graph.setCellStyles('fillColor', '#fff2cc', [cell]);
} else if (state == 'Completed') {
graph.setCellStyles(
'fillColor',
'#d4e1f5',
[cell]
);
graph.setCellStyles('fillColor', '#d4e1f5', [cell]);
}
// Adds tooltip information using an overlay icon
@ -176,8 +162,8 @@ const Template = ({ label, ...args }) => {
const overlay = new CellOverlay(image, tooltip);
// Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, function(sender, evt) {
mxUtils.alert(`${tooltip}\nLast update: ${new Date()}`);
overlay.addListener(InternalEvent.CLICK, function (sender, evt) {
utils.alert(`${tooltip}\nLast update: ${new Date()}`);
});
return overlay;
@ -187,12 +173,12 @@ const Template = ({ label, ...args }) => {
* Creates and returns an empty graph inside the given container.
*/
function createGraph(container) {
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setTooltips(true);
graph.setEnabled(false);
// Disables folding
graph.isCellFoldable = function(cell, collapse) {
graph.isCellFoldable = function (cell, collapse) {
return false;
};
@ -203,20 +189,20 @@ const Template = ({ label, ...args }) => {
style.strokeColor = '#808080';
style.fillColor = 'white';
style.gradientColor = 'white';
style.gradientDirection = mxConstants.DIRECTION_EAST;
style.gradientDirection = Constants.DIRECTION_EAST;
style.rounded = true;
style.shadow = true;
style.fontStyle = 1;
style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.ElbowConnector;
style.edge = EdgeStyle.ElbowConnector;
style.strokeColor = '#808080';
style.rounded = true;
style.shadow = true;
style = [];
style.shape = mxConstants.SHAPE_SWIMLANE;
style.perimiter = mxPerimeter.RectanglePerimeter;
style.shape = Constants.SHAPE_SWIMLANE;
style.perimiter = Perimeter.RectanglePerimeter;
style.strokeColor = '#a0a0a0';
style.fontColor = '#606060';
style.fillColor = '#E0E0DF';
@ -232,30 +218,30 @@ const Template = ({ label, ...args }) => {
graph.getStylesheet().putCellStyle('swimlane', style);
style = [];
style.shape = mxConstants.SHAPE_RHOMBUS;
style.perimiter = mxPerimeter.RhombusPerimeter;
style.shape = Constants.SHAPE_RHOMBUS;
style.perimiter = Perimeter.RhombusPerimeter;
style.strokeColor = '#91BCC0';
style.fontColor = 'gray';
style.fillColor = '#91BCC0';
style.gradientColor = 'white';
style.align = mxConstants.ALIGN_CENTER;
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.align = Constants.ALIGN_CENTER;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.fontSize = 16;
graph.getStylesheet().putCellStyle('step', style);
style = [];
style.shape = mxConstants.SHAPE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style.shape = Constants.SHAPE_ELLIPSE;
style.perimiter = Perimeter.EllipsePerimeter;
style.fontColor = 'gray';
style.fillColor = '#A0C88F';
style.gradientColor = 'white';
style.strokeColor = '#A0C88F';
style.align = mxConstants.ALIGN_CENTER;
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.align = Constants.ALIGN_CENTER;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.fontSize = 16;
graph.getStylesheet().putCellStyle('start', style);
style = mxCloneUtils.clone(style);
style = CloneUtils.clone(style);
style.fillColor = '#DACCBC';
style.strokeColor = '#AF7F73';
graph.getStylesheet().putCellStyle('end', style);
@ -282,6 +268,6 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

34
packages/html/stories/Morph.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,23 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxDomHelpers,
mxMorphing,
mxEvent,
mxRubberband
} = mxgraph;
const { Graph, mxDomHelpers, mxMorphing, InternalEvent, Rubberband } = maxgraph;
const div = document.createElement('div');
@ -38,15 +32,13 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Disables the built-in context menu
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -71,7 +63,7 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('Morph', function() {
mxDomHelpers.button('Morph', function () {
graph.clearSelection();
graph.getModel().beginUpdate();
@ -88,7 +80,7 @@ const Template = ({ label, ...args }) => {
} finally {
// Arguments are number of steps, ease and delay
const morph = new mxMorphing(graph, 20, 1.2, 20);
morph.addListener(mxEvent.DONE, function() {
morph.addListener(InternalEvent.DONE, function () {
graph.getModel().endUpdate();
});
morph.startAnimation();
@ -99,6 +91,6 @@ const Template = ({ label, ...args }) => {
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

67
packages/html/stories/OffPage.stories.js
View File

@ -1,21 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Zoom_OffPage/OffPage',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxCellTracker,
mxConstants,
mxEvent
} = mxgraph;
const { Graph, CellTracker, Constants, InternalEvent } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -26,21 +21,17 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Use complete cell as highlight region
mxConstants.ACTIVE_REGION = 1;
Constants.ACTIVE_REGION = 1;
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setEnabled(false);
// Highlights offpage connectors
const highlight = new mxCellTracker(graph, null, function(me) {
const highlight = new CellTracker(graph, null, function (me) {
const cell = me.getCell();
if (
cell != null &&
cell.value != null &&
typeof cell.value.create === 'function'
) {
if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
return cell;
}
@ -49,26 +40,18 @@ const Template = ({ label, ...args }) => {
// Handles clicks on offpage connectors and
// executes function in user object
graph.addListener(mxEvent.CLICK, function(source, evt) {
graph.addListener(InternalEvent.CLICK, function (source, evt) {
const cell = evt.getProperty('cell');
if (
cell != null &&
cell.value != null &&
typeof cell.value.create === 'function'
) {
if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
cell.value.create();
}
});
// Handles clicks on offpage connectors and
// executes function in user object
graph.getCursorForCell = function(cell) {
if (
cell != null &&
cell.value != null &&
typeof cell.value.create === 'function'
) {
graph.getCursorForCell = function (cell) {
if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
return 'pointer';
}
};
@ -78,7 +61,7 @@ const Template = ({ label, ...args }) => {
let first = null;
let second = null;
first = function() {
first = function () {
const value = {
toString() {
return 'Next';
@ -122,21 +105,14 @@ const Template = ({ label, ...args }) => {
40,
'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
);
const e1 = graph.insertEdge(
parent,
null,
null,
v1,
v2,
'strokeColor=#FF1A00'
);
const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00');
} finally {
// Updates the display
graph.getModel().endUpdate();
}
};
second = function() {
second = function () {
const value = {
toString() {
return 'Prev';
@ -180,14 +156,7 @@ const Template = ({ label, ...args }) => {
40,
'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
);
const e1 = graph.insertEdge(
parent,
null,
null,
v1,
v2,
'strokeColor=#008C00'
);
const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00');
} finally {
// Updates the display
graph.getModel().endUpdate();
@ -197,6 +166,6 @@ const Template = ({ label, ...args }) => {
first();
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

152
packages/html/stories/OrgChart.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,28 +8,28 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
}
}
defaultValue: false,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConstants,
mxEvent,
Graph,
Constants,
InternalEvent,
mxClient,
mxPoint,
mxOutline,
mxEdgeStyle,
Point,
Outline,
EdgeStyle,
mxKeyHandler,
mxCompactTreeLayout,
mxLayoutManager,
mxCellOverlay,
mxImage,
mxUtils,
mxToolbar
} = mxgraph;
CompactTreeLayout,
LayoutManager,
CellOverlay,
ImageBox,
utils,
mxToolbar,
} = maxgraph;
const div = document.createElement('div');
@ -43,24 +43,22 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Makes the shadow brighter
mxConstants.SHADOWCOLOR = '#C0C0C0';
Constants.SHADOWCOLOR = '#C0C0C0';
const outline = document.getElementById('outlineContainer');
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Sets a gradient background
if (mxClient.IS_GC || mxClient.IS_SF) {
container.style.background =
'-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
} else if (mxClient.IS_NS) {
container.style.background =
'-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
container.style.background = '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
}
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Enables automatic sizing for vertices after editing and
// panning by using the left mouse button.
@ -78,7 +76,7 @@ const Template = ({ label, ...args }) => {
// Creates the outline (navigator, overview) for moving
// around the graph in the top, right corner of the window.
const outln = new mxOutline(graph, outline);
const outln = new Outline(graph, outline);
// Disables tooltips on touch devices
graph.setTooltips(!mxClient.IS_TOUCH);
@ -87,8 +85,8 @@ const Template = ({ label, ...args }) => {
let style = graph.getStylesheet().getDefaultVertexStyle();
style.shape = 'label';
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.align = mxConstants.ALIGN_LEFT;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.align = Constants.ALIGN_LEFT;
style.spacingLeft = 54;
style.gradientColor = '#7d85df';
@ -121,7 +119,7 @@ const Template = ({ label, ...args }) => {
style.entryPerimeter = 0; // disabled
// Disable the following for straight lines
style.edge = mxEdgeStyle.TopToBottom;
style.edge = EdgeStyle.TopToBottom;
// Stops editing on enter or escape keypress
const keyHandler = new mxKeyHandler(graph);
@ -129,7 +127,7 @@ const Template = ({ label, ...args }) => {
// Enables automatic layout on the graph and installs
// a tree layout for all groups who's children are
// being changed, added or removed.
const layout = new mxCompactTreeLayout(graph, false);
const layout = new CompactTreeLayout(graph, false);
layout.useBoundingBox = false;
layout.edgeRouting = false;
layout.levelDistance = 60;
@ -137,26 +135,26 @@ const Template = ({ label, ...args }) => {
// Allows the layout to move cells even though cells
// aren't movable in the graph
layout.isVertexMovable = function(cell) {
layout.isVertexMovable = function (cell) {
return true;
};
const layoutMgr = new mxLayoutManager(graph);
const layoutMgr = new LayoutManager(graph);
layoutMgr.getLayout = function(cell) {
layoutMgr.getLayout = function (cell) {
if (cell.getChildCount() > 0) {
return layout;
}
};
// Installs a popupmenu handler using local function (see below).
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
return createPopupMenu(graph, menu, cell, evt);
};
// Fix for wrong preferred size
const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
graph.getPreferredSizeForCell = function(cell) {
graph.getPreferredSizeForCell = function (cell) {
const result = oldGetPreferredSizeForCell.apply(this, arguments);
if (result != null) {
@ -167,13 +165,13 @@ const Template = ({ label, ...args }) => {
};
// Sets the maximum text scale to 1
graph.cellRenderer.getTextScale = function(state) {
graph.cellRenderer.getTextScale = function (state) {
return Math.min(1, state.view.scale);
};
// Dynamically adds text to the label as we zoom in
// (without affecting the preferred size for new cells)
graph.cellRenderer.getLabelValue = function(state) {
graph.cellRenderer.getLabelValue = function (state) {
let result = state.cell.value;
if (state.cell.isVertex()) {
@ -219,28 +217,28 @@ const Template = ({ label, ...args }) => {
div.appendChild(content);
const tb = new mxToolbar(content);
tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
tb.addItem('Zoom In', 'images/zoom_in32.png', function (evt) {
graph.zoomIn();
});
tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) {
tb.addItem('Zoom Out', 'images/zoom_out32.png', function (evt) {
graph.zoomOut();
});
tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) {
tb.addItem('Actual Size', 'images/view_1_132.png', function (evt) {
graph.zoomActual();
});
tb.addItem('Print', 'images/print32.png', function(evt) {
tb.addItem('Print', 'images/print32.png', function (evt) {
const preview = new PrintPreview(graph, 1);
preview.open();
});
tb.addItem('Poster Print', 'images/press32.png', function(evt) {
const pageCount = mxUtils.prompt('Enter maximum page count', '1');
tb.addItem('Poster Print', 'images/press32.png', function (evt) {
const pageCount = utils.prompt('Enter maximum page count', '1');
if (pageCount != null) {
const scale = mxUtils.getScaleForPageCount(pageCount, graph);
const scale = utils.getScaleForPageCount(pageCount, graph);
const preview = new PrintPreview(graph, scale);
preview.open();
}
@ -252,21 +250,17 @@ const Template = ({ label, ...args }) => {
if (cell != null) {
if (cell.isVertex()) {
menu.addItem(
'Add child',
'/images/overlays/check.png',
function() {
addChild(graph, cell);
}
);
menu.addItem('Add child', '/images/overlays/check.png', function () {
addChild(graph, cell);
});
}
menu.addItem('Edit label', '/images/text.gif', function() {
menu.addItem('Edit label', '/images/text.gif', function () {
graph.startEditingAtCell(cell);
});
if (cell.id != 'treeRoot' && cell.isVertex()) {
menu.addItem('Delete', '/images/delete.gif', function() {
menu.addItem('Delete', '/images/delete.gif', function () {
deleteSubtree(graph, cell);
});
}
@ -274,26 +268,26 @@ const Template = ({ label, ...args }) => {
menu.addSeparator();
}
menu.addItem('Fit', '/images/zoom.gif', function() {
menu.addItem('Fit', '/images/zoom.gif', function () {
graph.fit();
});
menu.addItem('Actual', '/images/zoomactual.gif', function() {
menu.addItem('Actual', '/images/zoomactual.gif', function () {
graph.zoomActual();
});
menu.addSeparator();
menu.addItem('Print', '/images/print.gif', function() {
menu.addItem('Print', '/images/print.gif', function () {
const preview = new PrintPreview(graph, 1);
preview.open();
});
menu.addItem('Poster Print', '/images/print.gif', function() {
const pageCount = mxUtils.prompt('Enter maximum page count', '1');
menu.addItem('Poster Print', '/images/print.gif', function () {
const pageCount = utils.prompt('Enter maximum page count', '1');
if (pageCount != null) {
const scale = mxUtils.getScaleForPageCount(pageCount, graph);
const scale = utils.getScaleForPageCount(pageCount, graph);
const preview = new PrintPreview(graph, scale);
preview.open();
}
@ -301,36 +295,24 @@ const Template = ({ label, ...args }) => {
}
function addOverlays(graph, cell, addDeleteIcon) {
let overlay = new mxCellOverlay(
new mxImage('images/add.png', 24, 24),
'Add child'
);
let overlay = new CellOverlay(new ImageBox('images/add.png', 24, 24), 'Add child');
overlay.cursor = 'hand';
overlay.align = mxConstants.ALIGN_CENTER;
overlay.addListener(
mxEvent.CLICK,
(sender, evt) => {
addChild(graph, cell);
}
);
overlay.align = Constants.ALIGN_CENTER;
overlay.addListener(InternalEvent.CLICK, (sender, evt) => {
addChild(graph, cell);
});
graph.addCellOverlay(cell, overlay);
if (addDeleteIcon) {
overlay = new mxCellOverlay(
new mxImage('images/close.png', 30, 30),
'Delete'
);
overlay = new CellOverlay(new ImageBox('images/close.png', 30, 30), 'Delete');
overlay.cursor = 'hand';
overlay.offset = new mxPoint(-4, 8);
overlay.align = mxConstants.ALIGN_RIGHT;
overlay.verticalAlign = mxConstants.ALIGN_TOP;
overlay.addListener(
mxEvent.CLICK,
(sender, evt) => {
deleteSubtree(graph, cell);
}
);
overlay.offset = new Point(-4, 8);
overlay.align = Constants.ALIGN_RIGHT;
overlay.verticalAlign = Constants.ALIGN_TOP;
overlay.addListener(InternalEvent.CLICK, (sender, evt) => {
deleteSubtree(graph, cell);
});
graph.addCellOverlay(cell, overlay);
}
@ -362,7 +344,7 @@ const Template = ({ label, ...args }) => {
// of 20 pixels in negative, vertical direction.
edge.geometry.x = 1;
edge.geometry.y = 0;
edge.geometry.offset = new mxPoint(0, -20);
edge.geometry.offset = new Point(0, -20);
addOverlays(graph, vertex, true);
} finally {
@ -375,7 +357,7 @@ const Template = ({ label, ...args }) => {
function deleteSubtree(graph, cell) {
// Gets the subtree from cell downwards
const cells = [];
graph.traverse(cell, true, function(vertex) {
graph.traverse(cell, true, function (vertex) {
cells.push(vertex);
return true;
@ -385,6 +367,6 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

84
packages/html/stories/Orthogonal.stories.js
View File

@ -1,27 +1,27 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Connections/Orthogonal',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxConnectionHandler,
mxGraphHandler,
mxGuide,
mxPoint,
mxCellState,
mxEdgeHandler,
mxGraphView,
mxEvent
} = mxgraph;
Graph,
Rubberband,
ConnectionHandler,
GraphHandler,
Guide,
Point,
CellState,
EdgeHandler,
GraphView,
InternalEvent,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -32,21 +32,21 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Enables guides
mxGraphHandler.prototype.guidesEnabled = true;
GraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt) {
return !mxEvent.isAltDown(evt);
Guide.prototype.isEnabledForEvent = function (evt) {
return !InternalEvent.isAltDown(evt);
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
EdgeHandler.prototype.snapToTerminals = true;
// Enables orthogonal connect preview in IE
mxConnectionHandler.prototype.movePreviewAway = false;
ConnectionHandler.prototype.movePreviewAway = false;
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.disconnectOnMove = false;
graph.foldingEnabled = false;
graph.cellsResizable = false;
@ -54,46 +54,29 @@ const Template = ({ label, ...args }) => {
graph.setConnectable(true);
// Implements perimeter-less connection points as fixed points (computed before the edge style).
graph.view.updateFixedTerminalPoint = function(
edge,
terminal,
source,
constraint
) {
mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
graph.view.updateFixedTerminalPoint = function (edge, terminal, source, constraint) {
GraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
const pts = edge.absolutePoints;
const pt = pts[source ? 0 : pts.length - 1];
if (
terminal != null &&
pt == null &&
this.getPerimeterFunction(terminal) == null
) {
if (terminal != null && pt == null && this.getPerimeterFunction(terminal) == null) {
edge.setAbsoluteTerminalPoint(
new mxPoint(
this.getRoutingCenterX(terminal),
this.getRoutingCenterY(terminal)
),
new Point(this.getRoutingCenterX(terminal), this.getRoutingCenterY(terminal)),
source
);
}
};
// Changes the default edge style
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
'orthogonalEdgeStyle';
graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle';
delete graph.getStylesheet().getDefaultEdgeStyle().endArrow;
// Implements the connect preview
graph.connectionHandler.createEdgeState = function(me) {
graph.connectionHandler.createEdgeState = function (me) {
const edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(
this.graph.view,
edge,
this.graph.getCellStyle(edge)
);
return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
// Uncomment the following if you want the container
@ -101,8 +84,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -124,7 +106,7 @@ const Template = ({ label, ...args }) => {
'portConstraint=northsouth;',
true
);
v11.geometry.offset = new mxPoint(-5, -5);
v11.geometry.offset = new Point(-5, -5);
const v12 = graph.insertVertex(
v1,
null,
@ -137,7 +119,7 @@ const Template = ({ label, ...args }) => {
'routingCenterX=-0.5;routingCenterY=0;',
true
);
v12.geometry.offset = new mxPoint(-10, -5);
v12.geometry.offset = new Point(-10, -5);
const v13 = graph.insertVertex(
v1,
null,
@ -150,7 +132,7 @@ const Template = ({ label, ...args }) => {
'routingCenterX=0.5;routingCenterY=0;',
true
);
v13.geometry.offset = new mxPoint(0, -5);
v13.geometry.offset = new Point(0, -5);
const v2 = graph.addCell(graph.getModel().cloneCell(v1));
v2.geometry.x = 200;
@ -173,6 +155,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

35
packages/html/stories/Overlays.stories.js
View File

@ -1,23 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Effects/Overlays',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxCellOverlay,
mxEvent,
mxCellTracker,
mxUtils,
mxImage
} = mxgraph;
const { Graph, CellOverlay, InternalEvent, CellTracker, utils, ImageBox } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -28,20 +21,20 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables basic selection and cell handling
graph.setEnabled(false);
// Highlights the vertices when the mouse enters
const highlight = new mxCellTracker(graph, '#00FF00');
const highlight = new CellTracker(graph, '#00FF00');
// Enables tooltips for the overlays
graph.setTooltips(true);
// Installs a handler for click events in the graph
// that toggles the overlay for the respective cell
graph.addListener(mxEvent.CLICK, (sender, evt) => {
graph.addListener(InternalEvent.CLICK, (sender, evt) => {
const cell = evt.getProperty('cell');
if (cell != null) {
@ -49,14 +42,14 @@ const Template = ({ label, ...args }) => {
if (overlays == null) {
// Creates a new overlay with an image and a tooltip
const overlay = new mxCellOverlay(
new mxImage('/images/check.png', 16, 16),
const overlay = new CellOverlay(
new ImageBox('/images/check.png', 16, 16),
'Overlay tooltip'
);
// Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, (sender, evt2) => {
mxUtils.alert('Overlay clicked');
overlay.addListener(InternalEvent.CLICK, (sender, evt2) => {
utils.alert('Overlay clicked');
});
// Sets the overlay for the cell in the graph
@ -69,7 +62,7 @@ const Template = ({ label, ...args }) => {
// Installs a handler for double click events in the graph
// that shows an alert box
graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {
graph.addListener(InternalEvent.DOUBLE_CLICK, (sender, evt) => {
const cell = evt.getProperty('cell');
alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);
evt.consume();
@ -101,6 +94,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

48
packages/html/stories/PageBreaks.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,23 +8,17 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRectangle,
mxRubberband,
mxDomHelpers,
mxEvent
} = mxgraph;
const { Graph, Rectangle, Rubberband, mxDomHelpers, InternalEvent } = maxgraph;
const div = document.createElement('div');
@ -37,11 +31,10 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
div.appendChild(container);
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.view.setScale(0.15);
graph.pageBreaksVisible = true;
graph.pageBreakDashed = true;
@ -60,8 +53,7 @@ const Template = ({ label, ...args }) => {
graph.graphHandler.scaleGrid = true;
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -90,38 +82,38 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('Toggle Page Breaks', function(evt) {
mxDomHelpers.button('Toggle Page Breaks', function (evt) {
graph.pageBreaksVisible = !graph.pageBreaksVisible;
graph.sizeDidChange();
})
);
buttons.appendChild(
mxDomHelpers.button('Zoom In', function(evt) {
mxDomHelpers.button('Zoom In', function (evt) {
graph.zoomIn();
})
);
buttons.appendChild(
mxDomHelpers.button('Zoom Out', function(evt) {
mxDomHelpers.button('Zoom Out', function (evt) {
graph.zoomOut();
})
);
buttons.appendChild(
mxDomHelpers.button('Print', function(evt) {
mxDomHelpers.button('Print', function (evt) {
// Matches actual printer paper size and avoids blank pages
const scale = 0.5;
// Applies scale to page
const pf = mxRectangle.fromRectangle(
graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT
const pf = Rectangle.fromRectangle(
graph.pageFormat || Constants.PAGE_FORMAT_A4_PORTRAIT
);
pf.width = Math.round(pf.width * scale * graph.pageScale);
pf.height = Math.round(pf.height * scale * graph.pageScale);
// Finds top left corner of top left page
const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
const bounds = Rectangle.fromRectangle(graph.getGraphBounds());
bounds.x -= graph.view.translate.x * graph.view.scale;
bounds.y -= graph.view.translate.y * graph.view.scale;
@ -134,7 +126,7 @@ const Template = ({ label, ...args }) => {
preview.autoOrigin = false;
const oldRenderPage = preview.renderPage;
preview.renderPage = function(w, h, x, y, content, pageNumber) {
preview.renderPage = function (w, h, x, y, content, pageNumber) {
const div = oldRenderPage.apply(this, arguments);
const header = document.createElement('div');
@ -172,12 +164,12 @@ const Template = ({ label, ...args }) => {
);
buttons.appendChild(
mxDomHelpers.button('Reset View', function(evt) {
mxDomHelpers.button('Reset View', function (evt) {
graph.view.scaleAndTranslate(0.15, 0, 0);
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

36
packages/html/stories/Perimeter.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,18 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxGraphView,
mxUtils
} = mxgraph;
const { Graph, Rubberband, GraphView, utils } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -31,14 +26,8 @@ const Template = ({ label, ...args }) => {
// 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
) {
const mxGraphViewGetPerimeterPoint = GraphView.prototype.getPerimeterPoint;
GraphView.prototype.getPerimeterPoint = function (terminal, next, orthogonal, border) {
let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
if (point != null) {
@ -49,7 +38,7 @@ const Template = ({ label, ...args }) => {
const b = terminal.text.boundingBox.clone();
b.grow(3);
if (mxUtils.rectangleIntersectsSegment(b, point, next)) {
if (utils.rectangleIntersectsSegment(b, point, next)) {
point = perimeter(b, terminal, next, orthogonal);
}
}
@ -59,7 +48,7 @@ const Template = ({ label, ...args }) => {
};
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setVertexLabelsMovable(true);
graph.setConnectable(true);
@ -68,8 +57,7 @@ const Template = ({ label, ...args }) => {
// graph.setResizeContainer(true);
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -116,6 +104,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

96
packages/html/stories/Permissions.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,20 +8,20 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConnectionHandler,
mxImage,
mxRubberband,
Graph,
ConnectionHandler,
ImageBox,
Rubberband,
mxKeyHandler,
mxDomHelpers
} = mxgraph;
mxDomHelpers,
} = maxgraph;
const div = document.createElement('div');
@ -36,27 +36,22 @@ const Template = ({ label, ...args }) => {
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Enable tooltips, disables mutligraphs, enable loops
graph.setMultigraph(false);
graph.setAllowLoops(true);
// Enables rubberband selection and key handling
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
const keyHandler = new mxKeyHandler(graph);
// Assigns the delete key
keyHandler.bindKey(46, function(evt) {
keyHandler.bindKey(46, function (evt) {
if (graph.isEnabled()) {
graph.removeCells();
}
@ -66,7 +61,7 @@ const Template = ({ label, ...args }) => {
// aka "private" variable
let currentPermission = null;
const apply = function(permission) {
const apply = function (permission) {
graph.clearSelection();
permission.apply(graph);
graph.setEnabled(true);
@ -83,37 +78,37 @@ const Template = ({ label, ...args }) => {
const buttons = document.createElement('div');
div.appendChild(buttons);
let button = mxDomHelpers.button('Allow All', function(evt) {
let button = mxDomHelpers.button('Allow All', function (evt) {
apply(new Permission());
});
buttons.appendChild(button);
button = mxDomHelpers.button('Connect Only', function(evt) {
button = mxDomHelpers.button('Connect Only', function (evt) {
apply(new Permission(false, true, false, false, true));
});
buttons.appendChild(button);
button = mxDomHelpers.button('Edges Only', function(evt) {
button = mxDomHelpers.button('Edges Only', function (evt) {
apply(new Permission(false, false, true, false, false));
});
buttons.appendChild(button);
button = mxDomHelpers.button('Vertices Only', function(evt) {
button = mxDomHelpers.button('Vertices Only', function (evt) {
apply(new Permission(false, false, false, true, false));
});
buttons.appendChild(button);
button = mxDomHelpers.button('Select Only', function(evt) {
button = mxDomHelpers.button('Select Only', function (evt) {
apply(new Permission(false, false, false, false, false));
});
buttons.appendChild(button);
button = mxDomHelpers.button('Locked', function(evt) {
button = mxDomHelpers.button('Locked', function (evt) {
apply(new Permission(true, false));
});
buttons.appendChild(button);
button = mxDomHelpers.button('Disabled', function(evt) {
button = mxDomHelpers.button('Disabled', function (evt) {
graph.clearSelection();
graph.setEnabled(false);
graph.setTooltips(false);
@ -128,48 +123,37 @@ const Template = ({ label, ...args }) => {
// specification for more functions to extend (eg.
// isSelectable).
const oldDisconnectable = graph.isCellDisconnectable;
graph.isCellDisconnectable = function(cell, terminal, source) {
return (
oldDisconnectable.apply(this, arguments) && currentPermission.editEdges
);
graph.isCellDisconnectable = function (cell, terminal, source) {
return oldDisconnectable.apply(this, arguments) && currentPermission.editEdges;
};
const oldTerminalPointMovable = graph.isTerminalPointMovable;
graph.isTerminalPointMovable = function(cell) {
return (
oldTerminalPointMovable.apply(this, arguments) &&
currentPermission.editEdges
);
graph.isTerminalPointMovable = function (cell) {
return oldTerminalPointMovable.apply(this, arguments) && currentPermission.editEdges;
};
const oldBendable = graph.isCellBendable;
graph.isCellBendable = function(cell) {
graph.isCellBendable = function (cell) {
return oldBendable.apply(this, arguments) && currentPermission.editEdges;
};
const oldLabelMovable = graph.isLabelMovable;
graph.isLabelMovable = function(cell) {
return (
oldLabelMovable.apply(this, arguments) && currentPermission.editEdges
);
graph.isLabelMovable = function (cell) {
return oldLabelMovable.apply(this, arguments) && currentPermission.editEdges;
};
const oldMovable = graph.isCellMovable;
graph.isCellMovable = function(cell) {
return (
oldMovable.apply(this, arguments) && currentPermission.editVertices
);
graph.isCellMovable = function (cell) {
return oldMovable.apply(this, arguments) && currentPermission.editVertices;
};
const oldResizable = graph.isCellResizable;
graph.isCellResizable = function(cell) {
return (
oldResizable.apply(this, arguments) && currentPermission.editVertices
);
graph.isCellResizable = function (cell) {
return oldResizable.apply(this, arguments) && currentPermission.editVertices;
};
const oldEditable = graph.isCellEditable;
graph.isCellEditable = function(cell) {
graph.isCellEditable = function (cell) {
return (
(oldEditable.apply(this, arguments) &&
cell.isVertex() &&
@ -179,7 +163,7 @@ const Template = ({ label, ...args }) => {
};
const oldDeletable = graph.isCellDeletable;
graph.isCellDeletable = function(cell) {
graph.isCellDeletable = function (cell) {
return (
(oldDeletable.apply(this, arguments) &&
cell.isVertex() &&
@ -189,10 +173,8 @@ const Template = ({ label, ...args }) => {
};
const oldCloneable = graph.isCellCloneable;
graph.isCellCloneable = function(cell) {
return (
oldCloneable.apply(this, arguments) && currentPermission.cloneCells
);
graph.isCellCloneable = function (cell) {
return oldCloneable.apply(this, arguments) && currentPermission.cloneCells;
};
// Gets the default parent for inserting new cells. This
@ -212,7 +194,7 @@ const Template = ({ label, ...args }) => {
}
return div;
}
};
class Permission {
constructor(locked, createEdges, editEdges, editVertices, cloneCells) {
@ -229,4 +211,4 @@ class Permission {
}
}
export const Default = Template.bind({});
export const Default = Template.bind({});

120
packages/html/stories/PortRefs.stories.js
View File

@ -1,28 +1,28 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Connections/PortRefs',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxPoint,
mxEdgeHandler,
mxConstraintHandler,
mxImage,
mxShape,
mxTriangle,
mxConstants,
mxConnectionConstraint,
mxClient
} = mxgraph;
Graph,
Rubberband,
Point,
EdgeHandler,
ConstraintHandler,
ImageBox,
Shape,
TriangleShape,
Constants,
ConnectionConstraint,
mxClient,
} = maxgraph;
mxClient.setImageBasePath('/images');
@ -35,22 +35,18 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Replaces the port image
mxConstraintHandler.prototype.pointImage = new mxImage(
'/images/dot.gif',
10,
10
);
ConstraintHandler.prototype.pointImage = new ImageBox('/images/dot.gif', 10, 10);
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
// Disables automatic handling of ports. This disables the reset of the
// respective style in mxGraph.cellConnected. Note that this feature may
// respective style in Graph.cellConnected. Note that this feature may
// be useful if floating and fixed connections are combined.
graph.setPortsEnabled(false);
// Enables rubberband selection
new mxRubberband(graph);
new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -94,34 +90,30 @@ const Template = ({ label, ...args }) => {
};
// Extends shapes classes to return their ports
mxShape.prototype.getPorts = function() {
Shape.prototype.getPorts = function () {
return ports;
};
mxTriangle.prototype.getPorts = function() {
TriangleShape.prototype.getPorts = function () {
return ports2;
};
// Disables floating connections (only connections via ports allowed)
graph.connectionHandler.isConnectableCell = function(cell) {
graph.connectionHandler.isConnectableCell = function (cell) {
return false;
};
mxEdgeHandler.prototype.isConnectableCell = function(cell) {
EdgeHandler.prototype.isConnectableCell = function (cell) {
return graph.connectionHandler.isConnectableCell(cell);
};
// Disables existing port functionality
graph.view.getTerminalPort = function(state, terminal, source) {
graph.view.getTerminalPort = function (state, terminal, source) {
return terminal;
};
// Returns all possible ports for a given terminal
graph.getAllConnectionConstraints = function(terminal, source) {
if (
terminal != null &&
terminal.shape != null &&
terminal.shape.stencil != null
) {
graph.getAllConnectionConstraints = function (terminal, source) {
if (terminal != null && terminal.shape != null && terminal.shape.stencil != null) {
// for stencils with existing constraints...
if (terminal.shape.stencil != null) {
return terminal.shape.stencil.constraints;
@ -134,8 +126,8 @@ const Template = ({ label, ...args }) => {
for (const id in ports) {
const port = ports[id];
const cstr = new mxConnectionConstraint(
new mxPoint(port.x, port.y),
const cstr = new ConnectionConstraint(
new Point(port.x, port.y),
port.perimeter
);
cstr.id = id;
@ -150,16 +142,9 @@ const Template = ({ label, ...args }) => {
};
// Sets the port for the given connection
graph.setConnectionConstraint = function(
edge,
terminal,
source,
constraint
) {
graph.setConnectionConstraint = function (edge, terminal, source, constraint) {
if (constraint != null) {
const key = source
? 'sourcePort'
: 'targetPort';
const key = source ? 'sourcePort' : 'targetPort';
if (constraint == null || constraint.id == null) {
this.setCellStyles(key, null, [edge]);
@ -170,14 +155,12 @@ const Template = ({ label, ...args }) => {
};
// Returns the port for the given connection
graph.getConnectionConstraint = function(edge, terminal, source) {
const key = source
? 'sourcePort'
: 'targetPort';
graph.getConnectionConstraint = function (edge, terminal, source) {
const key = source ? 'sourcePort' : 'targetPort';
const id = edge.style[key];
if (id != null) {
const c = new mxConnectionConstraint(null, null);
const c = new ConnectionConstraint(null, null);
c.id = id;
return c;
@ -188,15 +171,12 @@ const Template = ({ label, ...args }) => {
// Returns the actual point for a port by redirecting the constraint to the port
const graphGetConnectionPoint = graph.getConnectionPoint;
graph.getConnectionPoint = function(vertex, constraint) {
graph.getConnectionPoint = function (vertex, constraint) {
if (constraint.id != null && vertex != null && vertex.shape != null) {
const port = vertex.shape.getPorts()[constraint.id];
if (port != null) {
constraint = new mxConnectionConstraint(
new mxPoint(port.x, port.y),
port.perimeter
);
constraint = new ConnectionConstraint(new Point(port.x, port.y), port.perimeter);
}
}
@ -227,22 +207,8 @@ const Template = ({ label, ...args }) => {
60,
'shape=triangle;perimeter=trianglePerimeter;direction=south'
);
const e1 = graph.insertEdge(
parent,
null,
'',
v1,
v2,
'sourcePort=s;targetPort=nw'
);
const e2 = graph.insertEdge(
parent,
null,
'',
v1,
v3,
'sourcePort=e;targetPort=out3'
);
const e1 = graph.insertEdge(parent, null, '', v1, v2, 'sourcePort=s;targetPort=nw');
const e2 = graph.insertEdge(parent, null, '', v1, v3, 'sourcePort=e;targetPort=out3');
} finally {
// Updates the display
graph.getModel().endUpdate();
@ -251,10 +217,10 @@ const Template = ({ label, ...args }) => {
// Comming soon... Integration with orthogonal edge style
// Sets default edge style to use port constraints (needs to be moved up when uncommented)
// graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
/* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints;
mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue)
/* let mxUtilsGetPortConstraints = utils.getPortConstraints;
utils.getPortConstraints = function(terminal, edge, source, defaultValue)
{
let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT;
let key = (source) ? Constants.STYLE_SOURCE_PORT : Constants.STYLE_TARGET_PORT;
let id = edge.style[key];
let port = terminal.shape.getPorts()[id];
@ -272,11 +238,11 @@ const Template = ({ label, ...args }) => {
{
let edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
*/
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

27
packages/html/stories/RadialTreeLayout.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,19 +8,13 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxConstants,
mxRadialTreeLayout,
mxPerimeter
} = mxgraph;
const { Graph, Rubberband, Constants, mxRadialTreeLayout, Perimeter } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -31,15 +25,14 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Adds rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style.perimiter = mxPerimeter.RectanglePerimeter;
style.perimiter = Perimeter.RectanglePerimeter;
style.gradientColor = 'white';
style.perimeterSpacing = 6;
style.rounded = true;
@ -100,6 +93,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

83
packages/html/stories/SecondLabel.stories.js
View File

@ -1,24 +1,24 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Labels/SecondLabel',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRectangleShape,
Graph,
RectangleShape,
mxDomHelpers,
mxText,
mxPoint,
mxRectangle,
mxConstants
} = mxgraph;
Text,
Point,
Rectangle,
Constants,
} = maxgraph;
const div = document.createElement('div');
@ -32,19 +32,14 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Simple solution to add additional text to the rectangle shape definition:
(function() {
const mxRectangleShapeIsHtmlAllowed =
mxRectangleShape.prototype.isHtmlAllowed;
mxRectangleShape.prototype.isHtmlAllowed = function() {
return (
mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&
this.state == null
);
(function () {
const mxRectangleShapeIsHtmlAllowed = RectangleShape.prototype.isHtmlAllowed;
RectangleShape.prototype.isHtmlAllowed = function () {
return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null;
};
const mxRectangleShapePaintForeground =
mxRectangleShape.prototype.paintForeground;
mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) {
const mxRectangleShapePaintForeground = RectangleShape.prototype.paintForeground;
RectangleShape.prototype.paintForeground = function (c, x, y, w, h) {
if (
this.state != null &&
this.state.cell.geometry != null &&
@ -59,17 +54,17 @@ const Template = ({ label, ...args }) => {
})();
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables the folding icon
graph.isCellFoldable = function(cell) {
graph.isCellFoldable = function (cell) {
return false;
};
let secondLabelVisible = true;
// Hook for returning shape number for a given cell
graph.getSecondLabel = function(cell) {
graph.getSecondLabel = function (cell) {
if (!cell.isEdge()) {
// Possible to return any string here
return `The ID of this cell is ${cell.id}`;
@ -82,7 +77,7 @@ const Template = ({ label, ...args }) => {
// Overrides method to hide relative child vertices
// TODO this function is not used
const isVisible = function() {
const isVisible = function () {
return (
!cell.isVertex() ||
cell.geometry == null ||
@ -93,7 +88,7 @@ const Template = ({ label, ...args }) => {
// Creates the shape for the shape number and puts it into the draw pane
const { redrawShape } = graph.cellRenderer;
graph.cellRenderer.redrawShape = function(state, force, rendering) {
graph.cellRenderer.redrawShape = function (state, force, rendering) {
const result = redrawShape.apply(this, arguments);
if (
@ -104,28 +99,24 @@ const Template = ({ label, ...args }) => {
) {
const secondLabel = graph.getSecondLabel(state.cell);
if (
secondLabel != null &&
state.shape != null &&
state.secondLabel == null
) {
state.secondLabel = new mxText(
if (secondLabel != null && state.shape != null && state.secondLabel == null) {
state.secondLabel = new Text(
secondLabel,
new mxRectangle(),
mxConstants.ALIGN_LEFT,
mxConstants.ALIGN_BOTTOM
new Rectangle(),
Constants.ALIGN_LEFT,
Constants.ALIGN_BOTTOM
);
// Styles the label
state.secondLabel.color = 'black';
state.secondLabel.family = 'Verdana';
state.secondLabel.size = 8;
state.secondLabel.fontStyle = mxConstants.FONT_ITALIC;
state.secondLabel.fontStyle = Constants.FONT_ITALIC;
state.secondLabel.background = 'yellow';
state.secondLabel.border = 'black';
state.secondLabel.valign = 'bottom';
state.secondLabel.dialect = state.shape.dialect;
state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;
state.secondLabel.dialect = Constants.DIALECT_STRICTHTML;
state.secondLabel.wrap = true;
graph.cellRenderer.initializeLabel(state, state.secondLabel);
}
@ -133,7 +124,7 @@ const Template = ({ label, ...args }) => {
if (state.secondLabel != null) {
const scale = graph.getView().getScale();
const bounds = new mxRectangle(
const bounds = new Rectangle(
state.x + state.width - 8 * scale,
state.y + 8 * scale,
35,
@ -151,7 +142,7 @@ const Template = ({ label, ...args }) => {
// Destroys the shape number
const { destroy } = graph.cellRenderer;
graph.cellRenderer.destroy = function(state) {
graph.cellRenderer.destroy = function (state) {
destroy.apply(this, arguments);
if (state.secondLabel != null) {
@ -160,7 +151,7 @@ const Template = ({ label, ...args }) => {
}
};
graph.cellRenderer.getShapesForState = function(state) {
graph.cellRenderer.getShapesForState = function (state) {
return [state.shape, state.text, state.secondLabel, state.control];
};
@ -186,7 +177,7 @@ const Template = ({ label, ...args }) => {
'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',
true
);
v11.geometry.offset = new mxPoint(-8, -8);
v11.geometry.offset = new Point(-8, -8);
const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
// Another alternative solution of creating a second label as a relative child vertex
// but this time with an automatic size so that the cell is actually selectable and
@ -202,7 +193,7 @@ const Template = ({ label, ...args }) => {
'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',
true
);
v21.geometry.offset = new mxPoint(-8, -8);
v21.geometry.offset = new Point(-8, -8);
graph.updateCellSize(v21);
const e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
@ -215,7 +206,7 @@ const Template = ({ label, ...args }) => {
// Adds a button to execute the layout
buttons.appendChild(
mxDomHelpers.button('Toggle Child Vertices', function(evt) {
mxDomHelpers.button('Toggle Child Vertices', function (evt) {
relativeChildVerticesVisible = !relativeChildVerticesVisible;
graph.refresh();
})
@ -223,13 +214,13 @@ const Template = ({ label, ...args }) => {
// Adds a button to execute the layout
buttons.appendChild(
mxDomHelpers.button('Toggle IDs', function(evt) {
mxDomHelpers.button('Toggle IDs', function (evt) {
secondLabelVisible = !secondLabelVisible;
graph.refresh();
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

25
packages/html/stories/Shape.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -6,16 +6,11 @@ export default {
title: 'Shapes/Shape',
argTypes: {
...globalTypes,
}
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxCylinder,
mxConstants,
mxCellRenderer
} = mxgraph;
const { Graph, CylinderShape, Constants, CellRenderer } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -36,17 +31,17 @@ const Template = ({ label, ...args }) => {
The code below defines the shape. The BoxShape function
it the constructor which creates a new object instance.
The next lines use an mxCylinder instance to augment the
The next lines use an CylinderShape instance to augment the
prototype of the shape ("inheritance") and reset the
constructor to the topmost function of the c'tor chain.
*/
class BoxShape extends mxCylinder {
class BoxShape extends CylinderShape {
// Defines the extrusion of the box as a "static class variable"
extrude = 10;
/*
Next, the mxCylinder's redrawPath method is "overridden".
Next, the CylinderShape's redrawPath method is "overridden".
This method has a isForeground argument to separate two
paths, one for the background (which must be closed and
might be filled) and one for the foreground, which is
@ -85,10 +80,10 @@ const Template = ({ label, ...args }) => {
}
}
}
mxCellRenderer.registerShape('box', BoxShape);
CellRenderer.registerShape('box', BoxShape);
// Creates the graph inside the DOM node.
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables basic selection and cell handling
graph.setEnabled(false);
@ -123,6 +118,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

173
packages/html/stories/Stencils.stories.js
View File

@ -1,5 +1,5 @@
import mxgraph from '@mxgraph/core';
import { load } from "@mxgraph/core/src/util/network/mxXmlRequest";
import maxgraph from '@maxgraph/core';
import { load } from '@mxgraph/core/src/util/network/mxXmlRequest';
import { globalTypes } from '../.storybook/preview';
@ -9,33 +9,33 @@ export default {
...globalTypes,
contextMenu: {
type: 'boolean',
defaultValue: false
defaultValue: false,
},
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConnectionHandler,
Graph,
ConnectionHandler,
mxDomHelpers,
mxEdgeHandler,
mxEvent,
mxPoint,
mxCellHighlight,
mxConstants,
mxVertexHandler,
mxRubberband,
mxShape,
mxStencil,
mxStencilRegistry,
mxCellRenderer,
mxUtils
} = mxgraph;
EdgeHandler,
InternalEvent,
Point,
CellHighlight,
Constants,
VertexHandler,
Rubberband,
Shape,
StencilShape,
StencilRegistry,
CellRenderer,
utils,
} = maxgraph;
const div = document.createElement('div');
@ -49,31 +49,31 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Sets the global shadow color
mxConstants.SHADOWCOLOR = '#C0C0C0';
mxConstants.SHADOW_OPACITY = 0.5;
mxConstants.SHADOW_OFFSET_X = 4;
mxConstants.SHADOW_OFFSET_Y = 4;
mxConstants.HANDLE_FILLCOLOR = '#99ccff';
mxConstants.HANDLE_STROKECOLOR = '#0088cf';
mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';
Constants.SHADOWCOLOR = '#C0C0C0';
Constants.SHADOW_OPACITY = 0.5;
Constants.SHADOW_OFFSET_X = 4;
Constants.SHADOW_OFFSET_Y = 4;
Constants.HANDLE_FILLCOLOR = '#99ccff';
Constants.HANDLE_STROKECOLOR = '#0088cf';
Constants.VERTEX_SELECTION_COLOR = '#00a8ff';
// Enables connections along the outline
mxConnectionHandler.prototype.outlineConnect = true;
mxEdgeHandler.prototype.manageLabelHandle = true;
mxEdgeHandler.prototype.outlineConnect = true;
mxCellHighlight.prototype.keepOnTop = true;
ConnectionHandler.prototype.outlineConnect = true;
EdgeHandler.prototype.manageLabelHandle = true;
EdgeHandler.prototype.outlineConnect = true;
CellHighlight.prototype.keepOnTop = true;
// Enable rotation handle
mxVertexHandler.prototype.rotationEnabled = true;
VertexHandler.prototype.rotationEnabled = true;
// Uses the shape for resize previews
mxVertexHandler.prototype.createSelectionShape = function(bounds) {
VertexHandler.prototype.createSelectionShape = function (bounds) {
const key = this.state.style.shape;
const stencil = mxStencilRegistry.getStencil(key);
const stencil = StencilRegistry.getStencil(key);
let shape = null;
if (stencil != null) {
shape = new mxShape(stencil);
shape = new Shape(stencil);
shape.apply(this.state);
} else {
shape = new this.state.shape.constructor();
@ -81,7 +81,7 @@ const Template = ({ label, ...args }) => {
shape.outline = true;
shape.bounds = bounds;
shape.stroke = mxConstants.HANDLE_STROKECOLOR;
shape.stroke = Constants.HANDLE_STROKECOLOR;
shape.strokewidth = this.getSelectionStrokeWidth();
shape.isDashed = this.isSelectionDashed();
shape.isShadow = false;
@ -92,7 +92,7 @@ const Template = ({ label, ...args }) => {
// Defines a custom stencil via the canvas API as defined here:
// http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html
class CustomShape extends mxShape {
class CustomShape extends Shape {
paintBackground(c, x, y, w, h) {
c.translate(x, y);
@ -122,7 +122,7 @@ const Template = ({ label, ...args }) => {
}
// Replaces existing actor shape
mxCellRenderer.registerShape('customShape', CustomShape);
CellRenderer.registerShape('customShape', CustomShape);
// Loads the stencils into the registry
const req = load('stencils.xml');
@ -130,26 +130,22 @@ const Template = ({ label, ...args }) => {
let shape = root.firstChild;
while (shape != null) {
if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
mxStencilRegistry.addStencil(
shape.getAttribute('name'),
new mxStencil(shape)
);
if (shape.nodeType === Constants.NODETYPE_ELEMENT) {
StencilRegistry.addStencil(shape.getAttribute('name'), new StencilShape(shape));
}
shape = shape.nextSibling;
}
if (!args.contextMenu)
mxEvent.disableContextMenu(container);
if (!args.contextMenu) InternalEvent.disableContextMenu(container);
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
graph.setConnectable(true);
graph.setTooltips(true);
graph.setPanning(true);
graph.getTooltipForCell = function(cell) {
graph.getTooltipForCell = function (cell) {
if (cell != null) {
return cell.style;
}
@ -166,8 +162,7 @@ const Template = ({ label, ...args }) => {
style.shadow = '1';
// Enables rubberband selection
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
@ -176,40 +171,13 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'A1',
20,
20,
40,
80,
'shape=and'
);
const v2 = graph.insertVertex(
parent,
null,
'A2',
20,
220,
40,
80,
'shape=and'
);
const v3 = graph.insertVertex(
parent,
null,
'X1',
160,
110,
80,
80,
'shape=xor'
);
const v1 = graph.insertVertex(parent, null, 'A1', 20, 20, 40, 80, 'shape=and');
const v2 = graph.insertVertex(parent, null, 'A2', 20, 220, 40, 80, 'shape=and');
const v3 = graph.insertVertex(parent, null, 'X1', 160, 110, 80, 80, 'shape=xor');
const e1 = graph.insertEdge(parent, null, '', v1, v3);
e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)];
e1.geometry.points = [new Point(90, 60), new Point(90, 130)];
const e2 = graph.insertEdge(parent, null, '', v2, v3);
e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)];
e2.geometry.points = [new Point(90, 260), new Point(90, 170)];
const v4 = graph.insertVertex(
parent,
@ -242,9 +210,9 @@ const Template = ({ label, ...args }) => {
'shape=xor;flipH=1'
);
const e3 = graph.insertEdge(parent, null, '', v4, v6);
e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)];
e3.geometry.points = [new Point(490, 60), new Point(130, 130)];
const e4 = graph.insertEdge(parent, null, '', v5, v6);
e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)];
e4.geometry.points = [new Point(490, 260), new Point(130, 170)];
const v7 = graph.insertVertex(
parent,
@ -257,12 +225,12 @@ const Template = ({ label, ...args }) => {
'shape=or;direction=south'
);
const e5 = graph.insertEdge(parent, null, '', v6, v7);
e5.geometry.points = [new mxPoint(310, 150)];
e5.geometry.points = [new Point(310, 150)];
const e6 = graph.insertEdge(parent, null, '', v3, v7);
e6.geometry.points = [new mxPoint(270, 150)];
e6.geometry.points = [new Point(270, 150)];
const e7 = graph.insertEdge(parent, null, '', v7, v5);
e7.geometry.points = [new mxPoint(290, 370)];
e7.geometry.points = [new Point(290, 370)];
} finally {
// Updates the display
graph.getModel().endUpdate();
@ -272,13 +240,13 @@ const Template = ({ label, ...args }) => {
div.appendChild(buttons);
buttons.appendChild(
mxDomHelpers.button('FlipH', function() {
mxDomHelpers.button('FlipH', function () {
graph.toggleCellStyles('flipH');
})
);
buttons.appendChild(
mxDomHelpers.button('FlipV', function() {
mxDomHelpers.button('FlipV', function () {
graph.toggleCellStyles('flipV');
})
);
@ -289,7 +257,7 @@ const Template = ({ label, ...args }) => {
buttons.appendChild(document.createTextNode('\u00a0'));
buttons.appendChild(
mxDomHelpers.button('Rotate', function() {
mxDomHelpers.button('Rotate', function () {
const cell = graph.getSelectionCell();
if (cell != null) {
@ -311,9 +279,7 @@ const Template = ({ label, ...args }) => {
const state = graph.view.getState(cell);
if (state != null) {
let dir =
state.style.direction ||
'east'; /* default */
let dir = state.style.direction || 'east'; /* default */
if (dir === 'east') {
dir = 'south';
@ -341,17 +307,17 @@ const Template = ({ label, ...args }) => {
buttons.appendChild(document.createTextNode('\u00a0'));
buttons.appendChild(
mxDomHelpers.button('And', function() {
mxDomHelpers.button('And', function () {
graph.setCellStyles('shape', 'and');
})
);
buttons.appendChild(
mxDomHelpers.button('Or', function() {
mxDomHelpers.button('Or', function () {
graph.setCellStyles('shape', 'or');
})
);
buttons.appendChild(
mxDomHelpers.button('Xor', function() {
mxDomHelpers.button('Xor', function () {
graph.setCellStyles('shape', 'xor');
})
);
@ -362,14 +328,11 @@ const Template = ({ label, ...args }) => {
buttons.appendChild(document.createTextNode('\u00a0'));
buttons.appendChild(
mxDomHelpers.button('Style', function() {
mxDomHelpers.button('Style', function () {
const cell = graph.getSelectionCell();
if (cell != null) {
const style = mxUtils.prompt(
'Style',
cell.getStyle()
);
const style = utils.prompt('Style', cell.getStyle());
if (style != null) {
graph.getModel().setStyle(cell, style);
@ -379,17 +342,17 @@ const Template = ({ label, ...args }) => {
);
buttons.appendChild(
mxDomHelpers.button('+', function() {
mxDomHelpers.button('+', function () {
graph.zoomIn();
})
);
buttons.appendChild(
mxDomHelpers.button('-', function() {
mxDomHelpers.button('-', function () {
graph.zoomOut();
})
);
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

93
packages/html/stories/Stylesheet.stories.js
View File

@ -1,21 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Styles/Stylesheet',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxPerimeter,
mxConstants,
mxEdgeStyle
} = mxgraph;
const { Graph, Perimeter, Constants, EdgeStyle } = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -26,15 +21,15 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the DOM node.
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables basic selection and cell handling
graph.setEnabled(false);
// Returns a special label for edges. Note: This does
// a supercall to use the default implementation.
graph.getLabel = function(cell) {
const label = mxGraph.prototype.getLabel.apply(this, arguments);
graph.getLabel = function (cell) {
const label = Graph.prototype.getLabel.apply(this, arguments);
if (cell.isEdge()) {
return `Transfer ${label}`;
@ -44,7 +39,7 @@ const Template = ({ label, ...args }) => {
// Installs a custom global tooltip
graph.setTooltips(true);
graph.getTooltip = function(state) {
graph.getTooltip = function (state) {
const { cell } = state;
const model = this.getModel();
@ -59,27 +54,27 @@ const Template = ({ label, ...args }) => {
// Creates the default style for vertices
let style = [];
style.shape = mxConstants.SHAPE_RECTANGLE;
style.perimiter = mxPerimeter.RectanglePerimeter;
style.shape = Constants.SHAPE_RECTANGLE;
style.perimiter = Perimeter.RectanglePerimeter;
style.strokeColor = 'gray';
style.rounded = true;
style.fillColor = '#EEEEEE';
style.gradientColor = 'white';
style.fontColor = '#774400';
style.align = mxConstants.ALIGN_CENTER;
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.align = Constants.ALIGN_CENTER;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.fontSize = '12';
style.fontStyle = 1;
graph.getStylesheet().putDefaultVertexStyle(style);
// Creates the default style for edges
style = [];
style.shape = mxConstants.SHAPE_CONNECTOR;
style.shape = Constants.SHAPE_CONNECTOR;
style.strokeColor = '#6482B9';
style.align = mxConstants.ALIGN_CENTER;
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style.edge = mxEdgeStyle.ElbowConnector;
style.endArrow = mxConstants.ARROW_CLASSIC;
style.align = Constants.ALIGN_CENTER;
style.verticalAlign = Constants.ALIGN_MIDDLE;
style.edge = EdgeStyle.ElbowConnector;
style.endArrow = Constants.ARROW_CLASSIC;
style.fontSize = '10';
graph.getStylesheet().putDefaultEdgeStyle(style);
@ -90,51 +85,11 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
const v1 = graph.insertVertex(
parent,
null,
'Interval 1',
20,
20,
180,
30
);
const v2 = graph.insertVertex(
parent,
null,
'Interval 2',
140,
80,
280,
30
);
const v3 = graph.insertVertex(
parent,
null,
'Interval 3',
200,
140,
360,
30
);
const v4 = graph.insertVertex(
parent,
null,
'Interval 4',
480,
200,
120,
30
);
const v5 = graph.insertVertex(
parent,
null,
'Interval 5',
60,
260,
400,
30
);
const v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30);
const v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30);
const v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30);
const v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30);
const v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30);
const e1 = graph.insertEdge(parent, null, '1', v1, v2);
e1.getGeometry().points = [{ x: 160, y: 60 }];
const e2 = graph.insertEdge(parent, null, '2', v1, v5);
@ -151,6 +106,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

117
packages/html/stories/SwimLanes.stories.js
View File

@ -1,29 +1,29 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/SwimLanes',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxEditor,
mxConnectionHandler,
mxImage,
mxPerimeter,
mxPoint,
mxConstants,
mxCloneUtils,
mxEdgeStyle,
mxEvent,
mxSwimlaneManager,
mxStackLayout,
mxLayoutManager
} = mxgraph;
ConnectionHandler,
ImageBox,
Perimeter,
Point,
Constants,
CloneUtils,
EdgeStyle,
InternalEvent,
SwimlaneManager,
StackLayout,
LayoutManager,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -35,16 +35,12 @@ const Template = ({ label, ...args }) => {
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage(
'images/connector.gif',
16,
16
);
ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
// Creates a wrapper editor around a new graph inside
// the given container using an XML config for the
// keyboard bindings
// const config = mxUtils
// const config = utils
// .load('editors/config/keyhandler-commons.xml')
// .getDocumentElement();
// const editor = new mxEditor(config);
@ -55,13 +51,13 @@ const Template = ({ label, ...args }) => {
// Auto-resizes the container
graph.border = 80;
graph.getView().translate = new mxPoint(graph.border / 2, graph.border / 2);
graph.getView().translate = new Point(graph.border / 2, graph.border / 2);
graph.setResizeContainer(true);
graph.graphHandler.setRemoveCellsFromParent(false);
// Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle();
style.shape = mxConstants.SHAPE_SWIMLANE;
style.shape = Constants.SHAPE_SWIMLANE;
style.verticalAlign = 'middle';
style.labelBackgroundColor = 'white';
style.fontSize = 11;
@ -71,8 +67,8 @@ const Template = ({ label, ...args }) => {
style.strokeColor = 'black';
delete style.fillColor;
style = mxCloneUtils.clone(style);
style.shape = mxConstants.SHAPE_RECTANGLE;
style = CloneUtils.clone(style);
style.shape = Constants.SHAPE_RECTANGLE;
style.fontSize = 10;
style.rounded = true;
style.horizontal = true;
@ -81,23 +77,23 @@ const Template = ({ label, ...args }) => {
style.labelBackgroundColor = 'none';
graph.getStylesheet().putCellStyle('process', style);
style = mxCloneUtils.clone(style);
style.shape = mxConstants.SHAPE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style = CloneUtils.clone(style);
style.shape = Constants.SHAPE_ELLIPSE;
style.perimiter = Perimeter.EllipsePerimeter;
delete style.rounded;
graph.getStylesheet().putCellStyle('state', style);
style = mxCloneUtils.clone(style);
style.shape = mxConstants.SHAPE_RHOMBUS;
style.perimiter = mxPerimeter.RhombusPerimeter;
style = CloneUtils.clone(style);
style.shape = Constants.SHAPE_RHOMBUS;
style.perimiter = Perimeter.RhombusPerimeter;
style.verticalAlign = 'top';
style.spacingTop = 40;
style.spacingRight = 64;
graph.getStylesheet().putCellStyle('condition', style);
style = mxCloneUtils.clone(style);
style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style = CloneUtils.clone(style);
style.shape = Constants.SHAPE_DOUBLE_ELLIPSE;
style.perimiter = Perimeter.EllipsePerimeter;
style.spacingTop = 28;
style.fontSize = 14;
style.fontStyle = 1;
@ -105,16 +101,16 @@ const Template = ({ label, ...args }) => {
graph.getStylesheet().putCellStyle('end', style);
style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.ElbowConnector;
style.endArrow = mxConstants.ARROW_BLOCK;
style.edge = EdgeStyle.ElbowConnector;
style.endArrow = Constants.ARROW_BLOCK;
style.rounded = true;
style.fontColor = 'black';
style.strokeColor = 'black';
style = mxCloneUtils.clone(style);
style = CloneUtils.clone(style);
style.dashed = true;
style.endArrow = mxConstants.ARROW_OPEN;
style.startArrow = mxConstants.ARROW_OVAL;
style.endArrow = Constants.ARROW_OPEN;
style.startArrow = Constants.ARROW_OVAL;
graph.getStylesheet().putCellStyle('crossover', style);
// Installs double click on middle control point and
@ -131,13 +127,11 @@ const Template = ({ label, ...args }) => {
// End-states are no valid sources
const previousIsValidSource = graph.isValidSource;
graph.isValidSource = function(cell) {
graph.isValidSource = function (cell) {
if (previousIsValidSource.apply(this, arguments)) {
const style = cell.getStyle();
return (
style == null || !(style == 'end' || style.indexOf('end') == 0)
);
return style == null || !(style == 'end' || style.indexOf('end') == 0);
}
return false;
@ -149,7 +143,7 @@ const Template = ({ label, ...args }) => {
// Note: All states are start states in
// the example below, so we use the state
// style below
graph.isValidTarget = function(cell) {
graph.isValidTarget = function (cell) {
const style = cell.getStyle();
return (
@ -166,7 +160,7 @@ const Template = ({ label, ...args }) => {
graph.setSplitEnabled(false);
// Returns true for valid drop operations
graph.isValidDropTarget = function(target, cells, evt) {
graph.isValidDropTarget = function (target, cells, evt) {
if (this.isSplitEnabled() && this.isSplitTarget(target, cells, evt)) {
return true;
}
@ -188,13 +182,12 @@ const Template = ({ label, ...args }) => {
return (
!pool &&
cell != lane &&
((lane && this.isPool(target)) ||
(cell && this.isPool(target.getParent())))
((lane && this.isPool(target)) || (cell && this.isPool(target.getParent())))
);
};
// Adds new method for identifying a pool
graph.isPool = function(cell) {
graph.isPool = function (cell) {
const model = this.getModel();
const parent = cell.getParent();
@ -202,7 +195,7 @@ const Template = ({ label, ...args }) => {
};
// Keeps widths on collapse/expand
const foldingHandler = function(sender, evt) {
const foldingHandler = function (sender, evt) {
const cells = evt.getProperty('cells');
for (let i = 0; i < cells.length; i++) {
@ -214,11 +207,11 @@ const Template = ({ label, ...args }) => {
}
};
graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);
graph.addListener(InternalEvent.FOLD_CELLS, foldingHandler);
}
// Changes swimlane orientation while collapsed
const getStyle = function() {
const getStyle = function () {
// TODO super cannot be used here
// let style = super.getStyle();
let style;
@ -234,10 +227,10 @@ const Template = ({ label, ...args }) => {
};
// Applies size changes to siblings and parents
new mxSwimlaneManager(graph);
new SwimlaneManager(graph);
// Creates a stack depending on the orientation of the swimlane
const layout = new mxStackLayout(graph, false);
const layout = new StackLayout(graph, false);
// Makes sure all children fit into the parent swimlane
layout.resizeParent = true;
@ -246,14 +239,14 @@ const Template = ({ label, ...args }) => {
layout.fill = true;
// Only update the size of swimlanes
layout.isVertexIgnored = function(vertex) {
layout.isVertexIgnored = function (vertex) {
return !graph.isSwimlane(vertex);
};
// Keeps the lanes and pools stacked
const layoutMgr = new mxLayoutManager(graph);
const layoutMgr = new LayoutManager(graph);
layoutMgr.getLayout = function(cell) {
layoutMgr.getLayout = function (cell) {
if (
!cell.isEdge() &&
cell.getChildCount() > 0 &&
@ -271,13 +264,13 @@ const Template = ({ label, ...args }) => {
// is normally the first child of the root (ie. layer 0).
const parent = graph.getDefaultParent();
const insertVertex = options => {
const insertVertex = (options) => {
const v = graph.insertVertex(options);
v.getStyle = getStyle;
return v;
};
const insertEdge = options => {
const insertEdge = (options) => {
const e = graph.insertEdge(options);
e.getStyle = getStyle;
return e;
@ -518,7 +511,7 @@ const Template = ({ label, ...args }) => {
});
e.geometry.points = [
new mxPoint(
new Point(
step444.geometry.x + step444.geometry.width / 2,
end3.geometry.y + end3.geometry.height / 2
),
@ -544,7 +537,7 @@ const Template = ({ label, ...args }) => {
});
e.geometry.points = [
new mxPoint(
new Point(
step33.geometry.x + step33.geometry.width / 2 + 20,
step11.geometry.y + (step11.geometry.height * 4) / 5
),
@ -563,6 +556,6 @@ const Template = ({ label, ...args }) => {
});
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

17
packages/html/stories/Thread.stories.js
View File

@ -1,19 +1,16 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Misc/Thread',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxClient
} = mxgraph;
const { Graph, mxClient } = maxgraph;
mxClient.setImageBasePath('/images');
@ -26,7 +23,7 @@ const Template = ({ label, ...args }) => {
container.style.cursor = 'default';
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Disables basic selection and cell handling
graph.setEnabled(false);
@ -66,6 +63,6 @@ const Template = ({ label, ...args }) => {
f();
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

99
packages/html/stories/Toolbar.stories.js
View File

@ -1,4 +1,4 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -8,26 +8,26 @@ export default {
...globalTypes,
rubberBand: {
type: 'boolean',
defaultValue: true
}
}
defaultValue: true,
},
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRubberband,
mxConnectionHandler,
mxImage,
Graph,
Rubberband,
ConnectionHandler,
ImageBox,
mxToolbar,
mxGraphModel,
GraphModel,
mxKeyHandler,
mxCell,
mxGeometry,
mxDragSource,
Cell,
Geometry,
DragSource,
mxDomHelpers,
mxGestureUtils
} = mxgraph;
GestureUtils,
} = maxgraph;
const div = document.createElement('div');
@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage(
ConnectionHandler.prototype.connectImage = new ImageBox(
'/images/connector.gif',
16,
16
@ -66,12 +66,12 @@ const Template = ({ label, ...args }) => {
// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
const model = new mxGraphModel();
const graph = new mxGraph(container, model);
const model = new GraphModel();
const graph = new Graph(container, model);
graph.dropEnabled = true;
// Matches DnD inside the graph
mxDragSource.prototype.getDropTarget = function(graph, x, y) {
DragSource.prototype.getDropTarget = function (graph, x, y) {
let cell = graph.getCellAt(x, y);
if (!graph.isValidDropTarget(cell)) {
cell = null;
@ -86,22 +86,16 @@ const Template = ({ label, ...args }) => {
// Stops editing on enter or escape keypress
const keyHandler = new mxKeyHandler(graph);
if (args.rubberBand)
new mxRubberband(graph);
if (args.rubberBand) new Rubberband(graph);
const addVertex = (icon, w, h, style) => {
const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
const vertex = new Cell(null, new Geometry(0, 0, w, h), style);
vertex.setVertex(true);
addToolbarItem(graph, toolbar, vertex, icon);
};
addVertex(
'/images/swimlane.gif',
120,
160,
'shape=swimlane;startSize=20;'
);
addVertex('/images/swimlane.gif', 120, 160, 'shape=swimlane;startSize=20;');
addVertex('/images/rectangle.gif', 100, 40, '');
addVertex('/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('/images/ellipse.gif', 40, 40, 'shape=ellipse');
@ -111,37 +105,30 @@ const Template = ({ label, ...args }) => {
addVertex('/images/actor.gif', 30, 40, 'shape=actor');
toolbar.addLine();
const button = mxDomHelpers.button(
'Create toolbar entry from selection',
evt => {
if (!graph.isSelectionEmpty()) {
// Creates a copy of the selection array to preserve its state
const cells = graph.getSelectionCells();
const bounds = graph.getView().getBounds(cells);
const button = mxDomHelpers.button('Create toolbar entry from selection', (evt) => {
if (!graph.isSelectionEmpty()) {
// Creates a copy of the selection array to preserve its state
const cells = graph.getSelectionCells();
const bounds = graph.getView().getBounds(cells);
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
const funct = (graph, evt, cell) => {
graph.stopEditing(false);
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
const funct = (graph, evt, cell) => {
graph.stopEditing(false);
const pt = graph.getPointForEvent(evt);
const dx = pt.x - bounds.x;
const dy = pt.y - bounds.y;
const pt = graph.getPointForEvent(evt);
const dx = pt.x - bounds.x;
const dy = pt.y - bounds.y;
graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
};
graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
};
// Creates the image which is used as the drag icon (preview)
const img = toolbar.addMode(
null,
'/images/outline.gif',
funct
);
mxGestureUtils.makeDraggable(img, graph, funct);
}
// Creates the image which is used as the drag icon (preview)
const img = toolbar.addMode(null, '/images/outline.gif', funct);
GestureUtils.makeDraggable(img, graph, funct);
}
);
});
tbContainer.appendChild(button);
@ -162,10 +149,10 @@ const Template = ({ label, ...args }) => {
// Creates the image which is used as the drag icon (preview)
const img = toolbar.addMode(null, image, funct);
mxGestureUtils.makeDraggable(img, graph, funct);
GestureUtils.makeDraggable(img, graph, funct);
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

110
packages/html/stories/Tree.stories.js
View File

@ -1,30 +1,30 @@
import mxgraph from '@mxgraph/core';
import maxgraph from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Layouts/Tree',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxConstants,
mxCylinder,
mxCellRenderer,
mxGraphView,
mxImage,
Graph,
Constants,
CylinderShape,
CellRenderer,
GraphView,
ImageBox,
mxClient,
mxEdgeStyle,
EdgeStyle,
mxKeyHandler,
mxCompactTreeLayout,
mxLayoutManager,
mxRectangle,
mxPoint
} = mxgraph;
CompactTreeLayout,
LayoutManager,
Rectangle,
Point,
} = maxgraph;
const container = document.createElement('div');
container.style.position = 'relative';
@ -40,7 +40,7 @@ const Template = ({ label, ...args }) => {
Defines a custom shape for the tree node that includes the
upper half of the outgoing edge(s).
*/
class TreeNodeShape extends mxCylinder {
class TreeNodeShape extends CylinderShape {
// Defines the length of the upper edge segment.
static segment = 20;
@ -56,8 +56,7 @@ const Template = ({ label, ...args }) => {
redrawPath(path, x, y, w, h, isForeground) {
const { graph } = this.state.view;
const hasChildren =
graph.model.getOutgoingEdges(this.state.cell).length > 0;
const hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
if (isForeground) {
if (hasChildren) {
@ -75,27 +74,27 @@ const Template = ({ label, ...args }) => {
}
}
}
mxCellRenderer.registerShape('treenode', TreeNodeShape);
CellRenderer.registerShape('treenode', TreeNodeShape);
class MyCustomGraphView extends mxGraphView {
class MyCustomGraphView extends GraphView {
updateFloatingTerminalPoint(edge, start, end, source) {
// Defines a custom perimeter for the nodes in the tree
let pt = null;
if (source) {
pt = new mxPoint(
pt = new Point(
start.x + start.width / 2,
start.y + start.height + TreeNodeShape.segment
);
} else {
pt = new mxPoint(start.x + start.width / 2, start.y);
pt = new Point(start.x + start.width / 2, start.y);
}
edge.setAbsoluteTerminalPoint(pt, source);
}
}
class MyCustomCellRenderer extends mxCellRenderer {
class MyCustomCellRenderer extends CellRenderer {
getControlBounds(state) {
// Defines the position of the folding icon
if (state.control != null) {
@ -104,12 +103,9 @@ const Template = ({ label, ...args }) => {
const h = state.control.bounds.height / oldScale;
const s = state.view.scale;
return new mxRectangle(
return new Rectangle(
state.x + state.width / 2 - (w / 2) * s,
state.y +
state.height +
TreeNodeShape.segment * s -
(h / 2) * s,
state.y + state.height + TreeNodeShape.segment * s - (h / 2) * s,
w * s,
h * s
);
@ -121,20 +117,12 @@ const Template = ({ label, ...args }) => {
// Make the layout instance accessible by MyCustomGraph
let layout;
class MyCustomGraph extends mxGraph {
class MyCustomGraph extends Graph {
// Sets the collapse and expand icons. The values below are the default
// values, but this is how to replace them if you need to.
collapsedImage = new mxImage(
`${mxClient.imageBasePath}/collapsed.gif`,
9,
9
);
collapsedImage = new ImageBox(`${mxClient.imageBasePath}/collapsed.gif`, 9, 9);
expandedImage = new mxImage(
`${mxClient.imageBasePath}/expanded.gif`,
9,
9
);
expandedImage = new ImageBox(`${mxClient.imageBasePath}/expanded.gif`, 9, 9);
isCellFoldable(cell) {
// Defines the condition for showing the folding icon
@ -171,7 +159,7 @@ const Template = ({ label, ...args }) => {
show = show != null ? show : true;
const cells = [];
this.traverse(cell, true, function(vertex) {
this.traverse(cell, true, function (vertex) {
if (vertex !== cell) {
cells.push(vertex);
}
@ -200,7 +188,7 @@ const Template = ({ label, ...args }) => {
style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = mxEdgeStyle.TopToBottom;
style.edge = EdgeStyle.TopToBottom;
style.rounded = true;
// Enables automatic sizing for vertices after editing and
@ -215,15 +203,15 @@ const Template = ({ label, ...args }) => {
// Enables automatic layout on the graph and installs
// a tree layout for all groups who's children are
// being changed, added or removed.
layout = new mxCompactTreeLayout(graph, false);
layout = new CompactTreeLayout(graph, false);
layout.useBoundingBox = false;
layout.edgeRouting = false;
layout.levelDistance = 30;
layout.nodeDistance = 10;
const layoutMgr = new mxLayoutManager(graph);
const layoutMgr = new LayoutManager(graph);
layoutMgr.getLayout = function(cell) {
layoutMgr.getLayout = function (cell) {
if (cell.getChildCount() > 0) {
return layout;
}
@ -237,15 +225,7 @@ const Template = ({ label, ...args }) => {
graph.getModel().beginUpdate();
try {
const w = graph.container.offsetWidth;
const root = graph.insertVertex(
parent,
'treeRoot',
'Root',
w / 2 - 30,
20,
60,
40
);
const root = graph.insertVertex(parent, 'treeRoot', 'Root', w / 2 - 30, 20, 60, 40);
const v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);
graph.insertEdge(parent, null, '', root, v1);
@ -268,26 +248,10 @@ const Template = ({ label, ...args }) => {
const v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);
graph.insertEdge(parent, null, '', v2, v22);
const v221 = graph.insertVertex(
parent,
'v221',
'Child 2.2.1',
0,
0,
60,
40
);
const v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40);
graph.insertEdge(parent, null, '', v22, v221);
const v222 = graph.insertVertex(
parent,
'v222',
'Child 2.2.2',
0,
0,
60,
40
);
const v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40);
graph.insertEdge(parent, null, '', v22, v222);
const v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);
@ -298,6 +262,6 @@ const Template = ({ label, ...args }) => {
}
return container;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

95
packages/html/stories/UserObject.stories.js
View File

@ -1,31 +1,31 @@
import mxgraph from '@mxgraph/core';
import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
import maxgraph from '@maxgraph/core';
import { popup } from '@maxgraph/core/util/gui/mxWindow';
import { globalTypes } from '../.storybook/preview';
export default {
title: 'Xml_Json/UserObject',
argTypes: {
...globalTypes
}
...globalTypes,
},
};
const Template = ({ label, ...args }) => {
const {
mxGraph,
mxRectangle,
Graph,
Rectangle,
mxDomHelpers,
mxKeyHandler,
mxEvent,
InternalEvent,
mxXmlUtils,
mxCodec,
mxConstants,
mxUtils,
mxEdgeStyle,
Constants,
utils,
EdgeStyle,
mxDomUtils,
mxForm,
mxCellAttributeChange
} = mxgraph;
CellAttributeChange,
} = maxgraph;
const div = document.createElement('div');
@ -39,7 +39,7 @@ const Template = ({ label, ...args }) => {
div.appendChild(container);
// Note that these XML nodes will be enclosing the
// mxCell nodes for the model cells in the output
// Cell nodes for the model cells in the output
const doc = mxXmlUtils.createXmlDocument();
const person1 = doc.createElement('Person');
@ -54,7 +54,7 @@ const Template = ({ label, ...args }) => {
relation.setAttribute('since', '1985');
// Creates the graph inside the given container
const graph = new mxGraph(container);
const graph = new Graph(container);
// Optional disabling of sizing
graph.setCellsResizable(false);
@ -62,19 +62,19 @@ const Template = ({ label, ...args }) => {
// Configures the graph contains to resize and
// add a border at the bottom, right
graph.setResizeContainer(true);
graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
graph.minimumContainerSize = new Rectangle(0, 0, 500, 380);
graph.setBorder(60);
// Stops editing on enter key, handles escape
new mxKeyHandler(graph);
// Overrides method to disallow edge label editing
graph.isCellEditable = function(cell) {
graph.isCellEditable = function (cell) {
return !cell.isEdge();
};
// Overrides method to provide a cell label in the display
graph.convertValueToString = function(cell) {
graph.convertValueToString = function (cell) {
if (mxDomUtils.isNode(cell.value)) {
if (cell.value.nodeName.toLowerCase() == 'person') {
const firstName = cell.getAttribute('firstName', '');
@ -87,10 +87,7 @@ const Template = ({ label, ...args }) => {
return firstName;
}
if (cell.value.nodeName.toLowerCase() == 'knows') {
return `${cell.value.nodeName} (Since ${cell.getAttribute(
'since',
''
)})`;
return `${cell.value.nodeName} (Since ${cell.getAttribute('since', '')})`;
}
}
@ -99,16 +96,12 @@ const Template = ({ label, ...args }) => {
// Overrides method to store a cell label in the model
const { cellLabelChanged } = graph;
graph.cellLabelChanged = function(cell, newValue, autoSize) {
if (
mxDomUtils.isNode(cell.value) &&
cell.value.nodeName.toLowerCase() == 'person'
) {
graph.cellLabelChanged = function (cell, newValue, autoSize) {
if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
const pos = newValue.indexOf(' ');
const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;
const lastName =
pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';
const lastName = pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';
// Clones the value for correct undo/redo
const elt = cell.value.cloneNode(true);
@ -125,11 +118,8 @@ const Template = ({ label, ...args }) => {
// Overrides method to create the editing value
const { getEditingValue } = graph;
graph.getEditingValue = function(cell) {
if (
mxDomUtils.isNode(cell.value) &&
cell.value.nodeName.toLowerCase() == 'person'
) {
graph.getEditingValue = function (cell) {
if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
const firstName = cell.getAttribute('firstName', '');
const lastName = cell.getAttribute('lastName', '');
@ -141,7 +131,7 @@ const Template = ({ label, ...args }) => {
graph.setTooltips(true);
const { getTooltipForCell } = graph;
graph.getTooltipForCell = function(cell) {
graph.getTooltipForCell = function (cell) {
// Adds some relation details for edges
if (cell.isEdge()) {
const src = this.getLabel(cell.getTerminal(true));
@ -154,8 +144,7 @@ const Template = ({ label, ...args }) => {
};
// Enables rubberband selection
if (args.rubberBand)
new RubberBand(graph);
if (args.rubberBand) new RubberBand(graph);
const buttons = document.createElement('div');
div.appendChild(buttons);
@ -165,10 +154,10 @@ const Template = ({ label, ...args }) => {
// Adds an option to view the XML of the graph
buttons.appendChild(
mxDomHelpers.button('View XML', function() {
mxDomHelpers.button('View XML', function () {
const encoder = new mxCodec();
const node = encoder.encode(graph.getModel());
popup(mxUtils.getPrettyXml(node), true);
popup(utils.getPrettyXml(node), true);
})
);
@ -188,7 +177,7 @@ const Template = ({ label, ...args }) => {
style = graph.getStylesheet().getDefaultEdgeStyle();
style.strokeColor = '#0C0C0C';
style.labelBackgroundColor = 'white';
style.edge = mxEdgeStyle.ElbowConnector;
style.edge = EdgeStyle.ElbowConnector;
style.rounded = true;
style.fontColor = 'black';
style.fontSize = '10';
@ -209,12 +198,10 @@ const Template = ({ label, ...args }) => {
}
// Implements a properties panel that uses
// mxCellAttributeChange to change properties
graph
.getSelectionModel()
.addListener(mxEvent.CHANGE, function(sender, evt) {
selectionChanged(graph);
});
// CellAttributeChange to change properties
graph.getSelectionModel().addListener(InternalEvent.CHANGE, function (sender, evt) {
selectionChanged(graph);
});
selectionChanged(graph);
@ -262,7 +249,7 @@ const Template = ({ label, ...args }) => {
function createTextField(graph, form, cell, attribute) {
const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue);
const applyHandler = function() {
const applyHandler = function () {
const newValue = input.value || '';
const oldValue = cell.getAttribute(attribute.nodeName, '');
@ -270,11 +257,7 @@ const Template = ({ label, ...args }) => {
graph.getModel().beginUpdate();
try {
const edit = new mxCellAttributeChange(
cell,
attribute.nodeName,
newValue
);
const edit = new CellAttributeChange(cell, attribute.nodeName, newValue);
graph.getModel().execute(edit);
graph.updateCellSize(cell);
} finally {
@ -283,9 +266,9 @@ const Template = ({ label, ...args }) => {
}
};
mxEvent.addListener(input, 'keypress', function(evt) {
InternalEvent.addListener(input, 'keypress', function (evt) {
// Needs to take shift into account for textareas
if (evt.keyCode == /* enter */ 13 && !mxEvent.isShiftDown(evt)) {
if (evt.keyCode == /* enter */ 13 && !InternalEvent.isShiftDown(evt)) {
input.blur();
}
});
@ -296,10 +279,10 @@ const Template = ({ label, ...args }) => {
// As a workaround you should use a local variable
// that stores the focused field and invoke blur
// explicitely where we do the graph.focus above.
mxEvent.addListener(input, 'blur', applyHandler);
InternalEvent.addListener(input, 'blur', applyHandler);
}
return div;
}
};
export const Default = Template.bind({});
export const Default = Template.bind({});

Some files were not shown because too many files have changed in this diff Show More