Fixing stories...

development
Junsik Shim 2021-09-12 23:39:02 +09:00
parent e3562c8a08
commit eda54946bb
29 changed files with 112 additions and 109 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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