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

Changed the type of cell style from string to CellStyle.

development
Junsik Shim 2022-04-17 15:58:35 +09:00
parent 0340b72c10
commit b51504d7bb
40 changed files with 2704 additions and 1135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/core/src/types.ts
View File

@ -1,3 +1,4 @@
import { DIRECTION } from './util/Constants';
import type Cell from './view/cell/Cell';
import type CellState from './view/cell/CellState';
import EventSource from './view/event/EventSource';
@ -88,12 +89,14 @@ export type CellStateStyle = {
indicatorShape?: string;
indicatorStrokeColor?: ColorValue;
indicatorWidth?: number;
jettySize?: number | 'auto';
labelBackgroundColor?: ColorValue;
labelBorderColor?: ColorValue;
labelPadding?: number;
labelPosition?: AlignValue;
labelWidth?: number;
loop?: Function;
loopStyle?: Function;
margin?: number;
movable?: boolean;
noEdgeStyle?: boolean;
@ -105,6 +108,8 @@ export type CellStateStyle = {
perimeter?: Function | string | null;
perimeterSpacing?: number;
pointerEvents?: boolean;
portConstraint?: DIRECTION;
portConstraintRotation?: DIRECTION;
resizable?: boolean;
resizeHeight?: boolean;
resizeWidth?: boolean;
@ -113,11 +118,14 @@ export type CellStateStyle = {
rounded?: boolean;
routingCenterX?: number;
routingCenterY?: number;
segment?: number;
separatorColor?: ColorValue;
shadow?: boolean;
shape?: ShapeValue;
sourceJettySize?: number | 'auto';
sourcePerimeterSpacing?: number;
sourcePort?: string;
sourcePortConstraint?: DIRECTION;
spacing?: number;
spacingBottom?: number;
spacingLeft?: number;
@ -131,8 +139,10 @@ export type CellStateStyle = {
strokeWidth?: number;
swimlaneFillColor?: ColorValue;
swimlaneLine?: boolean;
targetJettySize: number | 'auto';
targetPerimeterSpacing?: number;
targetPort?: string;
targetPortConstraint?: DIRECTION;
textDirection?: TextDirectionValue;
textOpacity?: number;
verticalAlign?: VAlignValue;
@ -189,12 +199,12 @@ export type CanvasState = {
alpha: number;
fillAlpha: number;
strokeAlpha: number;
fillColor: ColorValue | null;
fillColor: ColorValue;
gradientFillAlpha: number;
gradientColor: ColorValue;
gradientAlpha: number;
gradientDirection: DirectionValue;
strokeColor: ColorValue | null;
strokeColor: ColorValue;
strokeWidth: number;
dashed: boolean;
dashPattern: string;
@ -202,14 +212,14 @@ export type CanvasState = {
lineCap: string;
lineJoin: string;
miterLimit: number;
fontColor: ColorValue | null;
fontBackgroundColor: ColorValue | null;
fontBorderColor: ColorValue | null;
fontColor: ColorValue;
fontBackgroundColor: ColorValue;
fontBorderColor: ColorValue;
fontSize: number;
fontFamily: string;
fontStyle: number;
shadow: boolean;
shadowColor: ColorValue | null;
shadowColor: ColorValue;
shadowAlpha: number;
shadowDx: number;
shadowDy: number;

12
packages/core/src/view/canvas/AbstractCanvas2D.ts
View File

@ -280,7 +280,7 @@ class AbstractCanvas2D {
* Sets the current fill color.
*/
setFillColor(value: ColorValue | null) {
this.state.fillColor = value;
this.state.fillColor = value ?? NONE;
this.state.gradientColor = NONE;
}
@ -310,7 +310,7 @@ class AbstractCanvas2D {
* Sets the current stroke color.
*/
setStrokeColor(value: ColorValue | null) {
this.state.strokeColor = value;
this.state.strokeColor = value ?? NONE;
}
/**
@ -360,21 +360,21 @@ class AbstractCanvas2D {
* Sets the current font color.
*/
setFontColor(value: ColorValue | null) {
this.state.fontColor = value;
this.state.fontColor = value ?? NONE;
}
/**
* Sets the current font background color.
*/
setFontBackgroundColor(value: ColorValue | null) {
this.state.fontBackgroundColor = value;
this.state.fontBackgroundColor = value ?? NONE;
}
/**
* Sets the current font border color.
*/
setFontBorderColor(value: ColorValue | null) {
this.state.fontBorderColor = value;
this.state.fontBorderColor = value ?? NONE;
}
/**
@ -409,7 +409,7 @@ class AbstractCanvas2D {
* Enables or disables and configures the current shadow.
*/
setShadowColor(value: ColorValue | null) {
this.state.shadowColor = value;
this.state.shadowColor = value ?? NONE;
}
/**

10
packages/core/src/view/canvas/SvgCanvas2D.ts
View File

@ -728,7 +728,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
if (s.fillColor !== NONE) {
if (s.gradientColor !== NONE) {
const id = this.getSvgGradient(
<string>s.fillColor,
s.fillColor,
s.gradientColor,
s.gradientFillAlpha,
s.gradientAlpha,
@ -743,7 +743,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
this.node.setAttribute('fill', `url(#${id})`);
}
} else {
this.node.setAttribute('fill', (<string>s.fillColor).toLowerCase());
this.node.setAttribute('fill', s.fillColor.toLowerCase());
}
}
}
@ -875,7 +875,11 @@ class SvgCanvas2D extends AbstractCanvas2D {
shadow.setAttribute('fill', <string>(s.shadowColor ? s.shadow : SHADOWCOLOR));
}
if (shadow.getAttribute('stroke') !== 'none' && s.shadowColor && s.shadowColor !== NONE) {
if (
shadow.getAttribute('stroke') !== 'none' &&
s.shadowColor &&
s.shadowColor !== NONE
) {
shadow.setAttribute('stroke', s.shadowColor);
}

23
packages/core/src/view/mixins/CellsMixin.ts
View File

@ -557,26 +557,18 @@ export const CellsMixin: PartialType = {
* @param cell {@link mxCell} whose style should be returned as an array.
*/
getCellStyle(cell) {
const stylename = cell.getStyle();
let style;
const cellStyle = cell.getStyle();
const stylesheet = this.getStylesheet();
// Gets the default style for the cell
if (cell.isEdge()) {
style = stylesheet.getDefaultEdgeStyle();
} else {
style = stylesheet.getDefaultVertexStyle();
}
const defaultStyle = cell.isEdge()
? stylesheet.getDefaultEdgeStyle()
: stylesheet.getDefaultVertexStyle();
// Resolves the stylename using the above as the default
if (style && stylename) {
style = this.postProcessCellStyle(stylesheet.getCellStyle(stylename, style));
}
// Returns a non-null value if no style can be found
if (!style) {
style = {} as CellStateStyle;
}
const style = this.postProcessCellStyle(
stylesheet.getCellStyle(cellStyle, defaultStyle ?? {})
);
return style;
},
@ -615,6 +607,7 @@ export const CellsMixin: PartialType = {
style.image = image;
}
return style;
},

16
packages/core/src/view/mixins/EdgeMixin.ts
View File

@ -51,7 +51,7 @@ declare module '../Graph' {
value: any,
source: Cell | null,
target: Cell | null,
style: any
style: CellStyle
) => Cell;
addEdge: (
edge: Cell,
@ -404,7 +404,7 @@ const EdgeMixin: PartialType = {
let value: any; // note me - can be a string or a class instance!!!
let source: Cell;
let target: Cell;
let style: string = ''; // TODO: Also allow for an object or class instance??
let style: CellStyle;
if (args.length === 1) {
// If only a single parameter, treat as an object
@ -421,6 +421,9 @@ const EdgeMixin: PartialType = {
[parent, id, value, source, target, style] = args;
}
if (typeof style === 'string')
throw new Error(`String-typed style is no longer supported: ${style}`);
const edge = this.createEdge(parent, id, value, source, target, style);
return this.addEdge(edge, parent, source, target);
},
@ -431,7 +434,14 @@ const EdgeMixin: PartialType = {
* are set when the edge is added to the model.
*
*/
createEdge(parent = null, id, value, source = null, target = null, style) {
createEdge(
parent = null,
id,
value,
source = null,
target = null,
style: CellStyle = {}
) {
// Creates the edge
const edge = new Cell(value, new Geometry(), style);
edge.setId(id);

8
packages/core/src/view/mixins/VertexMixin.ts
View File

@ -3,6 +3,7 @@ import Geometry from '../geometry/Geometry';
import { Graph } from '../Graph';
import CellArray from '../cell/CellArray';
import { mixInto } from '../../util/Utils';
import { CellStyle } from 'src/types';
declare module '../Graph' {
interface Graph {
@ -20,7 +21,7 @@ declare module '../Graph' {
y: number,
width: number,
height: number,
style: any,
style: CellStyle,
relative: boolean,
geometryClass: typeof Geometry
) => Cell;
@ -120,7 +121,7 @@ const VertexMixin: PartialType = {
let y;
let width;
let height;
let style;
let style: CellStyle;
let relative;
let geometryClass;
@ -145,6 +146,9 @@ const VertexMixin: PartialType = {
[parent, id, value, x, y, width, height, style, relative, geometryClass] = args;
}
if (typeof style === 'string')
throw new Error(`String-typed style is no longer supported: ${style}`);
const vertex = this.createVertex(
parent,
id,

17
packages/core/src/view/style/EdgeStyle.ts
View File

@ -1028,8 +1028,6 @@ class EdgeStyle {
let sourceBuffer = EdgeStyle.getJettySize(state, true);
let targetBuffer = EdgeStyle.getJettySize(state, false);
// console.log('sourceBuffer', sourceBuffer);
// console.log('targetBuffer', targetBuffer);
// Workaround for loop routing within buffer zone
if (source != null && target === source) {
targetBuffer = Math.max(sourceBuffer, targetBuffer);
@ -1037,7 +1035,7 @@ class EdgeStyle {
}
const totalBuffer = targetBuffer + sourceBuffer;
// console.log('totalBuffer', totalBuffer);
let tooShort = false;
// Checks minimum distance for fixed points and falls back to segment connector
@ -1069,8 +1067,6 @@ class EdgeStyle {
portConstraint[0] = getPortConstraints(source, state, true, DIRECTION_MASK.ALL);
rotation = source.style.rotation ?? 0;
// console.log('source rotation', rotation);
if (rotation !== 0) {
const newRect = <Rectangle>(
getBoundingBox(
@ -1089,8 +1085,6 @@ class EdgeStyle {
portConstraint[1] = getPortConstraints(target, state, false, DIRECTION_MASK.ALL);
rotation = target.style.rotation ?? 0;
// console.log('target rotation', rotation);
if (rotation !== 0) {
const newRect = <Rectangle>(
getBoundingBox(
@ -1105,9 +1099,6 @@ class EdgeStyle {
}
}
// console.log('source' , sourceX, sourceY, sourceWidth, sourceHeight);
// console.log('targetX' , targetX, targetY, targetWidth, targetHeight);
const dir = [0, 0];
// Work out which faces of the vertices present against each other
@ -1157,8 +1148,6 @@ class EdgeStyle {
}
}
// console.log('quad', quad);
// Check for connection constraints
let currentTerm = null;
@ -1351,8 +1340,6 @@ class EdgeStyle {
const routePattern = EdgeStyle.routePatterns[sourceIndex - 1][targetIndex - 1];
// console.log('routePattern', routePattern);
EdgeStyle.wayPoints1[0][0] = geo[0][0];
EdgeStyle.wayPoints1[0][1] = geo[0][1];
@ -1499,8 +1486,6 @@ class EdgeStyle {
);
}
// console.log(result);
// Removes duplicates
let index = 1;

37
packages/core/src/view/style/Stylesheet.ts
View File

@ -14,9 +14,9 @@ import MaxLog from '../../gui/MaxLog';
import StyleRegistry from './StyleRegistry';
import ObjectCodec from '../../serialization/ObjectCodec';
import { getTextContent } from '../../util/domUtils';
import Codec from '../../serialization/Codec';
import type { CellStateStyle, CellStyle } from '../../types';
import Codec from '../../serialization/Codec';
/**
* @class Stylesheet
@ -175,7 +175,7 @@ export class Stylesheet {
* @param name Name for the style to be stored.
* @param style Key, value pairs that define the style.
*/
putCellStyle(name: keyof CellStateStyle, style: CellStateStyle) {
putCellStyle(name: string, style: CellStateStyle) {
this.styles.set(name, style);
}
@ -187,27 +187,24 @@ export class Stylesheet {
* @param defaultStyle Default style to be returned if no style can be found.
*/
getCellStyle(cellStyle: CellStyle, defaultStyle: CellStateStyle) {
let style = defaultStyle;
let style;
if (Object.keys(cellStyle).length > 0) {
if (style && cellStyle.baseStyleName) {
style = clone(style);
} else {
style = {} as CellStateStyle;
}
// Merges the entries from a named style
if (cellStyle.baseStyleName) {
style = { ...this.styles.get(cellStyle.baseStyleName) };
}
// Merges cellStyle into style
style = {
...style,
...cellStyle,
};
if (cellStyle.baseStyleName) {
// creates style with the given baseStyleName.
style = { ...this.styles.get(cellStyle.baseStyleName) };
} else if (cellStyle.baseStyleName === null) {
// baseStyleName is explicitly null, so don't use any default styles.
style = {};
} else {
style = { ...defaultStyle };
}
// Merges cellStyle into style
style = {
...style,
...cellStyle,
};
return style;
}
}

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

@ -24,11 +24,7 @@ const Template = ({ label, ...args }) => {
graph.setEnabled(false);
const parent = graph.getDefaultParent();
const vertexStyle =
'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
/*const vertexStyle = {
const vertexStyle = {
shape: 'cylinder',
strokeWidth: 2,
fillColor: '#ffffff',
@ -37,7 +33,7 @@ const Template = ({ label, ...args }) => {
fontColor: 'black',
fontStyle: 1,
spacingTop: 14,
};*/
};
let e1;
graph.batchUpdate(() => {
@ -59,8 +55,14 @@ const Template = ({ label, ...args }) => {
parent,
source: v1,
target: v2,
style:
'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;',
style: {
strokeWidth: 3,
endArrow: 'block',
endSize: 2,
endFill: 1,
strokeColor: 'black',
rounded: 1,
},
});
e1.geometry.points = [new Point(230, 50)];
graph.orderCells(true, [e1]);

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

@ -194,14 +194,11 @@ const Template = ({ label, ...args }) => {
value: 'in',
position: [0, 0.5],
size: [20, 20],
style: 'fontSize=9;shape=ellipse;resizable=0;',
/*style: {
fontSize: 9,
shape: 'ellipse',
resizable: false,
top: 0, left: 0.5,
width: 20, height: 20
},*/
style: {
fontSize: 9,
shape: 'ellipse',
resizable: false,
},
});
v2.geometry.offset = new Point(-10, -10);
v2.geometry.relative = true;
@ -211,7 +208,7 @@ const Template = ({ label, ...args }) => {
value: 'out',
position: [1, 0.5],
size: [20, 20],
style: 'fontSize=9;shape=ellipse;resizable=0;',
style: { fontSize: 9, shape: 'ellipse', resizable: false },
});
v3.geometry.offset = new Point(-10, -10);
v3.geometry.relative = true;

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

@ -27,9 +27,14 @@ const Template = ({ label, ...args }) => {
// let style = super.getStyle();
let style = '';
if (this.isCollapsed()) {
style =
`${style};shape=image;image=http://www.jgraph.com/images/mxgraph.gif;` +
`noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
style = {
...style,
shape: 'image',
image: 'http://www.jgraph.com/images/mxgraph.gif',
noLabel: 1,
imageBackground: '#C3D9FF',
imageBorder: '#6482B9',
};
}
return style;
};
@ -40,7 +45,7 @@ const Template = ({ label, ...args }) => {
value: 'Container',
position: [20, 20],
size: [200, 200],
style: 'shape=swimlane;startSize=20;',
style: { shape: 'swimlane', startSize: 20 },
});
v1.geometry.alternateBounds = new Rectangle(0, 0, 110, 70);
v1.getStyle = getStyle;

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

@ -1,4 +1,9 @@
import { Graph, InternalEvent, SelectionHandler, RubberBandHandler } from '@maxgraph/core';
import {
Graph,
InternalEvent,
SelectionHandler,
RubberBandHandler,
} from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -87,7 +92,9 @@ const Template = ({ label, ...args }) => {
value: 'Constituent',
position: [20, 20],
size: [80, 30],
style: 'constituent=1;',
style: {
constituent: 1,
},
});
});

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

@ -142,7 +142,10 @@ function handleDrop(graph, file, x, y) {
graph.insertVertex({
position: [x, y],
size: [w, h],
style: `shape=image;image=${data};`,
style: {
shape: 'image',
image: data,
},
});
}
}
@ -163,7 +166,7 @@ function handleDrop(graph, file, x, y) {
graph.insertVertex({
position: [x, y],
size: [w, h],
style: `shape=image;image=${data};`,
style: { shape: 'image', image: data },
});
};

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

@ -43,7 +43,7 @@ const Template = ({ label, ...args }) => {
const getStyle = function () {
// TODO super cannot be used here
// let style = super.getStyle();
let style;
let style = {};
if (this.isEdge()) {
const target = this.getTerminal(false);
@ -53,13 +53,13 @@ const Template = ({ label, ...args }) => {
const fill = utils.getValue(targetStyle, 'fillColor');
if (fill != null) {
style += `;strokeColor=${fill}`;
style.strokeColor = fill;
}
}
} else if (this.isVertex()) {
const geometry = this.getGeometry();
if (geometry != null && geometry.width > 80) {
style += ';fillColor=green';
style.fillColor = 'green';
}
}
return style;
@ -76,7 +76,7 @@ const Template = ({ label, ...args }) => {
value: 'Hello,',
position: [20, 20],
size: [80, 30],
style: 'fillColor=green',
style: { fillColor: 'green' },
});
v1.getStyle = getStyle;
@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => {
value: 'World!',
position: [200, 150],
size: [80, 30],
style: 'fillColor=blue',
style: { fillColor: 'blue' },
});
v2.getStyle = getStyle;
@ -94,7 +94,7 @@ const Template = ({ label, ...args }) => {
value: 'World!',
position: [20, 150],
size: [80, 30],
style: 'fillColor=red',
style: { fillColor: 'red' },
});
v3.getStyle = getStyle;
@ -103,7 +103,12 @@ const Template = ({ label, ...args }) => {
value: 'Connect',
source: v1,
target: v2,
style: 'perimeterSpacing=4;strokeWidth=4;labelBackgroundColor=white;fontStyle=1',
style: {
perimeterSpacing: 4,
strokeWidth: 4,
labelBackgroundColor: 'white',
fontStyle: 1,
},
});
e1.getStyle = getStyle;
});

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

@ -94,13 +94,17 @@ const Template = ({ label, ...args }) => {
parent,
source: v1,
target: v2,
style: 'edgeStyle=orthogonalEdgeStyle;',
style: {
edgeStyle: 'orthogonalEdgeStyle',
},
});
const e2 = graph.insertEdge({
parent,
source: v2,
target: v1,
style: 'edgeStyle=orthogonalEdgeStyle;',
style: {
edgeStyle: 'orthogonalEdgeStyle',
},
});
});

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

@ -136,7 +136,7 @@ const Template = ({ label, ...args }) => {
value,
position: [100, 60],
size: [120, 80],
style: 'overflow=fill;',
style: { overflow: 'fill' },
});
});

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

@ -61,17 +61,18 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex(
parent,
null,
'Fixed icon',
20,
20,
80,
50,
'shape=label;image=images/plus.png;imageWidth=16;imageHeight=16;spacingBottom=10;' +
'fillColor=#adc5ff;gradientColor=#7d85df;glass=1;rounded=1;shadow=1;'
);
const v1 = graph.insertVertex(parent, null, 'Fixed icon', 20, 20, 80, 50, {
shape: 'label',
image: 'images/plus.png',
imageWidth: 16,
imageHeight: 16,
spacingBottom: 10,
fillColor: '#adc5ff',
gradientColor: '#7d85df',
glass: true,
rounded: true,
shadow: true,
});
});
return container;

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

@ -87,14 +87,9 @@ const Template = ({ label, ...args }) => {
createEdgeState(me) {
// Connect preview
const edge = this.graph.createEdge(
null,
null,
null,
null,
null,
'edgeStyle=orthogonalEdgeStyle'
);
const edge = this.graph.createEdge(null, null, null, null, null, {
edgeStyle: 'orthogonalEdgeStyle',
});
return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
}
@ -155,14 +150,14 @@ const Template = ({ label, ...args }) => {
value: 'Hello,',
position: [20, 20],
size: [80, 60],
style: 'shape=triangle;perimeter=trianglePerimeter',
style: { shape: 'triangle', perimeter: 'trianglePerimeter' },
});
const v2 = graph.insertVertex({
parent,
value: 'World!',
position: [200, 150],
size: [80, 60],
style: 'shape=ellipse;perimeter=ellipsePerimeter',
style: { shape: 'ellipse', perimeter: 'ellipsePerimeter' },
});
const v3 = graph.insertVertex({
parent,
@ -175,18 +170,30 @@ const Template = ({ label, ...args }) => {
value: '',
source: v1,
target: v2,
style:
'edgeStyle=elbowEdgeStyle;elbow=horizontal;' +
'exitX=0.5;exitY=1;exitPerimeter=1;entryX=0;entryY=0;entryPerimeter=1;',
style: {
edgeStyle: 'elbowEdgeStyle',
elbow: 'horizontal',
exitX: 0.5,
exitY: 1,
exitPerimeter: 1,
entryX: 0,
entryY: 0,
entryPerimeter: 1,
},
});
const e2 = graph.insertEdge({
parent,
value: '',
source: v3,
target: v2,
style:
'edgeStyle=elbowEdgeStyle;elbow=horizontal;orthogonal=0;' +
'entryX=0;entryY=0;entryPerimeter=1;',
style: {
edgeStyle: 'elbowEdgeStyle',
elbow: 'horizontal',
orthogonal: 0,
entryX: 0,
entryY: 0,
entryPerimeter: 1,
},
});
});

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

@ -82,7 +82,9 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const col1 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, 'column');
const col1 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, {
baseStyleName: 'column',
});
const v1 = graph.insertVertex(col1, null, '1', 0, 0, 100, 30);
v1.collapsed = true;
@ -95,7 +97,9 @@ const Template = ({ label, ...args }) => {
const v12 = graph.insertVertex(v1, null, '1.2', 0, 0, 80, 30);
const col2 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, 'column');
const col2 = graph.insertVertex(parent, null, '', 0, 0, 120, 0, {
baseStyleName: 'column',
});
const v2 = graph.insertVertex(col2, null, '2', 0, 0, 100, 30);
v2.collapsed = true;

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

@ -221,7 +221,7 @@ const Template = ({ label, ...args }) => {
20,
240,
120,
'shape=myShape;whiteSpace=wrap;overflow=hidden;pos1=30;pos2=80;'
{ shape: 'myShape', whiteSpace: 'wrap', overflow: 'hidden', pos1: 30, pos2: 80 }
);
});

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

@ -54,7 +54,7 @@ const Template = ({ label, ...args }) => {
10,
80,
100,
'bottom'
{ baseStyleName: 'bottom' }
);
var v1 = graph.insertVertex(
parent,
@ -64,9 +64,11 @@ const Template = ({ label, ...args }) => {
10,
80,
100,
'top'
{ baseStyleName: 'top' }
);
var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, 'image');
var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, {
baseStyleName: 'image',
});
var v2 = graph.insertVertex(
parent,
null,
@ -75,7 +77,7 @@ const Template = ({ label, ...args }) => {
130,
140,
60,
'right'
{ baseStyleName: 'right' }
);
var v2 = graph.insertVertex(
parent,
@ -85,7 +87,7 @@ const Template = ({ label, ...args }) => {
130,
140,
60,
'left'
{ baseStyleName: 'left' }
);
});

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

@ -54,26 +54,23 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
graph.insertVertex(parent, null, 'Bottom Label', 80, 80, 80, 60);
graph.insertVertex(
parent,
null,
'Top Label',
200,
80,
60,
60,
'indicatorShape=actor;indicatorWidth=28;indicatorColor=blue;imageVerticalAlign=bottom;verticalAlign=top'
);
graph.insertVertex(
parent,
null,
'Right Label',
300,
80,
120,
60,
'indicatorShape=cloud;indicatorWidth=40;indicatorColor=#00FFFF;imageVerticalAlign=center;verticalAlign=middle;imageAlign=left;align=left;spacingLeft=44'
);
graph.insertVertex(parent, null, 'Top Label', 200, 80, 60, 60, {
indicatorShape: 'actor',
indicatorWidth: 28,
indicatorColor: 'blue',
imageVerticalAlign: 'bottom',
verticalAlign: 'top',
});
graph.insertVertex(parent, null, 'Right Label', 300, 80, 120, 60, {
indicatorShape: 'cloud',
indicatorWidth: 40,
indicatorColor: '#00FFFF',
imageVerticalAlign: 'center',
verticalAlign: 'middle',
imageAlign: 'left',
align: 'left',
spacingLeft: 44,
});
});
return container;

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

@ -26,7 +26,7 @@ const Template = ({ label, ...args }) => {
const parent = graph.getDefaultParent();
// Defines the common part of all cell styles as a string-prefix
const prefix = 'shape=image;image=images/icons48/keys.png;';
const prefix = { shape: 'image', image: 'images/icons48/keys.png' };
// Adds cells to the model in a single step and set the vertex
// label positions using the label position styles. Vertical
@ -34,46 +34,26 @@ const Template = ({ label, ...args }) => {
// Note: Alternatively, vertex labels can be set be overriding
// CellRenderer.getLabelBounds.
graph.batchUpdate(() => {
graph.insertVertex(
parent,
null,
'Bottom',
60,
60,
60,
60,
`${prefix}verticalLabelPosition=bottom;verticalAlign=top`
);
graph.insertVertex(
parent,
null,
'Top',
140,
60,
60,
60,
`${prefix}verticalLabelPosition=top;verticalAlign=bottom`
);
graph.insertVertex(
parent,
null,
'Left',
60,
160,
60,
60,
`${prefix}labelPosition=left;align=right`
);
graph.insertVertex(
parent,
null,
'Right',
140,
160,
60,
60,
`${prefix}labelPosition=right;align=left`
);
graph.insertVertex(parent, null, 'Bottom', 60, 60, 60, 60, {
...prefix,
verticalLabelPosition: 'bottom',
verticalAlign: 'top',
});
graph.insertVertex(parent, null, 'Top', 140, 60, 60, 60, {
...prefix,
verticalLabelPosition: 'top',
verticalAlign: 'bottom',
});
graph.insertVertex(parent, null, 'Left', 60, 160, 60, 60, {
...prefix,
labelPosition: 'left',
align: 'right',
});
graph.insertVertex(parent, null, 'Right', 140, 160, 60, 60, {
...prefix,
labelPosition: 'right',
align: 'left',
});
});
return container;

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

@ -1,4 +1,10 @@
import { Graph, RubberBandHandler, KeyHandler, constants, Rectangle } from '@maxgraph/core';
import {
Graph,
RubberBandHandler,
KeyHandler,
constants,
Rectangle,
} from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
@ -100,8 +106,28 @@ const Template = ({ label, ...args }) => {
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,
{ baseStyleName: null },
true
);
const label12 = graph.insertVertex(
v1,
null,
'Label2',
0.5,
0,
0,
0,
{ baseStyleName: null },
true
);
const v2 = graph.insertVertex(
parent,
@ -116,8 +142,28 @@ const Template = ({ label, ...args }) => {
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,
{ baseStyleName: null },
true
);
const label22 = graph.insertVertex(
v2,
null,
'Label2',
0.5,
0,
0,
0,
{ baseStyleName: null },
true
);
});
return container;

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

@ -41,48 +41,25 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
model.beginUpdate();
try {
const v1 = graph.insertVertex(
layer1,
null,
'Hello,',
20,
20,
80,
30,
'fillColor=#C0C0C0'
);
const v2 = graph.insertVertex(
layer1,
null,
'Hello,',
200,
20,
80,
30,
'fillColor=#C0C0C0'
);
const v1 = graph.insertVertex(layer1, null, 'Hello,', 20, 20, 80, 30, {
fillColor: '#C0C0C0',
});
const v2 = graph.insertVertex(layer1, null, 'Hello,', 200, 20, 80, 30, {
fillColor: '#C0C0C0',
});
const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);
const e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C');
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 Point(240, 165)];
const e3 = graph.insertEdge(
layer0,
null,
'',
v1,
v2,
'edgeStyle=topToBottomEdgeStyle'
);
const e3 = graph.insertEdge(layer0, null, '', v1, v2, {
edgeStyle: 'topToBottomEdgeStyle',
});
e3.geometry.points = [new Point(150, 30)];
const e4 = graph.insertEdge(
layer1,
null,
'',
v2,
v1,
'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'
);
const e4 = graph.insertEdge(layer1, null, '', v2, v1, {
strokeColor: '#0C0C0C',
edgeStyle: 'topToBottomEdgeStyle',
});
e4.geometry.points = [new Point(150, 40)];
} finally {
// Updates the display

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

@ -52,15 +52,15 @@ const Template = ({ label, ...args }) => {
v4.lod = 3;
v4.isVisible = isVisible;
const e1 = graph.insertEdge(parent, null, '2', v1, v2, 'strokeWidth=2');
const e1 = graph.insertEdge(parent, null, '2', v1, v2, { strokeWidth: 2 });
e1.lod = 2;
e1.isVisible = isVisible;
const e2 = graph.insertEdge(parent, null, '2', v3, v4, 'strokeWidth=2');
const e2 = graph.insertEdge(parent, null, '2', v3, v4, { strokeWidth: 2 });
e2.lod = 2;
e2.isVisible = isVisible;
const e3 = graph.insertEdge(parent, null, '3', v1, v4, 'strokeWidth=1');
const e3 = graph.insertEdge(parent, null, '3', v1, v4, { strokeWidth: 1 });
e3.lod = 3;
e3.isVisible = isVisible;
});

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

@ -134,68 +134,47 @@ const Template = ({ label, ...args }) => {
graph.batchUpdate(() => {
const v1 = graph.insertVertex(parent, null, 'v1', 20, 20, 80, 30);
const v2 = graph.insertVertex(parent, null, 'v2', 440, 20, 80, 30);
const e1 = graph.insertEdge(
parent,
null,
'',
v1,
v2,
'dashed=1;' +
'startArrow=oval;endArrow=block;sourcePerimeterSpacing=4;startFill=0;endFill=0;'
);
const e11 = graph.insertVertex(
e1,
null,
'Label',
0,
0,
20,
14,
'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'
);
const e1 = graph.insertEdge(parent, null, '', v1, v2, {
dashed: 1,
startArrow: 'oval',
endArrow: 'block',
sourcePerimeterSpacing: 4,
startFill: 0,
endFill: 0,
});
const e11 = graph.insertVertex(e1, null, 'Label', 0, 0, 20, 14, {
shape: 'message',
labelBackgroundColor: '#ffffff',
labelPosition: 'left',
spacingRight: 2,
align: 'right',
fontStyle: 0,
});
e11.geometry.offset = new Point(-10, -7);
e11.geometry.relative = true;
e11.connectable = false;
const v3 = graph.insertVertex(parent, null, 'v3', 20, 120, 80, 30);
const v4 = graph.insertVertex(parent, null, 'v4', 440, 120, 80, 30);
const e2 = graph.insertEdge(
parent,
null,
'Label',
v3,
v4,
'startArrow=dash;startSize=12;endArrow=block;labelBackgroundColor=#FFFFFF;'
);
const e2 = graph.insertEdge(parent, null, 'Label', v3, v4, {
startArrow: 'dash',
startSize: 12,
endArrow: 'block',
labelBackgroundColor: '#FFFFFF',
});
const v5 = graph.insertVertex(
parent,
null,
'v5',
40,
220,
40,
40,
'shape=ellipse;perimeter=ellipsePerimeter;'
);
const v6 = graph.insertVertex(
parent,
null,
'v6',
460,
220,
40,
40,
'shape=doubleEllipse;perimeter=ellipsePerimeter;'
);
const e3 = graph.insertEdge(
parent,
null,
'Link',
v5,
v6,
'shape=link;labelBackgroundColor=#FFFFFF;'
);
const v5 = graph.insertVertex(parent, null, 'v5', 40, 220, 40, 40, {
shape: 'ellipse',
perimeter: 'ellipsePerimeter',
});
const v6 = graph.insertVertex(parent, null, 'v6', 460, 220, 40, 40, {
shape: 'doubleEllipse',
perimeter: 'ellipsePerimeter',
});
const e3 = graph.insertEdge(parent, null, 'Link', v5, v6, {
shape: 'link',
labelBackgroundColor: '#FFFFFF',
});
});
return container;

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

@ -61,34 +61,23 @@ const Template = ({ label, ...args }) => {
const h = 40;
graph.batchUpdate(() => {
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',
'ac',
a,
c,
'strokeColor=blue;verticalAlign=bottom'
);
const ad = graph.insertEdge(
parent,
'ad',
'ad',
a,
d,
'strokeColor=blue;align=left;verticalAlign=bottom'
);
const bd = graph.insertEdge(
parent,
'bd',
'bd',
b,
d,
'strokeColor=blue;verticalAlign=bottom'
);
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', 'ac', a, c, {
strokeColor: 'blue',
verticalAlign: 'bottom',
});
const ad = graph.insertEdge(parent, 'ad', 'ad', a, d, {
strokeColor: 'blue',
align: 'left',
verticalAlign: 'bottom',
});
const bd = graph.insertEdge(parent, 'bd', 'bd', b, d, {
strokeColor: 'blue',
verticalAlign: 'bottom',
});
});
// Creates the second graph model (without a container)
@ -101,34 +90,31 @@ const Template = ({ label, ...args }) => {
// Adds cells to the target model in a single step
// using custom ids for the vertices
graph2.batchUpdate(() => {
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',
'ce',
c,
e,
'strokeColor=green;verticalAlign=bottom'
);
const ed = graph2.insertEdge(
parent2,
'ed',
'ed',
e,
d,
'strokeColor=green;align=right;verticalAlign=bottom'
);
const fd = graph2.insertEdge(
parent2,
'bd',
'fd',
f,
d,
'strokeColor=green;verticalAlign=bottom'
);
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', 'ce', c, e, {
strokeColor: 'green',
verticalAlign: 'bottom',
});
const ed = graph2.insertEdge(parent2, 'ed', 'ed', e, d, {
strokeColor: 'green',
align: 'right',
verticalAlign: 'bottom',
});
const fd = graph2.insertEdge(parent2, 'bd', 'fd', f, d, {
strokeColor: 'green',
verticalAlign: 'bottom',
});
});
// Merges the model from the second graph into the model of

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

@ -72,37 +72,21 @@ const Template = ({ label, ...args }) => {
graph.getDataModel().setRoot(graph.getDataModel().createRoot());
const parent = graph.getDefaultParent();
const v1 = graph.insertVertex(
parent,
null,
'Click',
30,
20,
80,
30,
'fillColor=#FFFF88;strokeColor=#FF1A00'
);
const v2 = graph.insertVertex(
parent,
null,
'Next',
20,
150,
100,
30,
'fillColor=#FFFF88;strokeColor=#FF1A00'
);
const v3 = graph.insertVertex(
parent,
null,
value,
200,
150,
40,
40,
'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
);
const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00');
const v1 = graph.insertVertex(parent, null, 'Click', 30, 20, 80, 30, {
fillColor: '#FFFF88',
strokeColor: '#FF1A00',
});
const v2 = graph.insertVertex(parent, null, 'Next', 20, 150, 100, 30, {
fillColor: '#FFFF88',
strokeColor: '#FF1A00',
});
const v3 = graph.insertVertex(parent, null, value, 200, 150, 40, 40, {
shape: 'triangle',
align: 'left',
fillColor: '#C3D9FF',
strokeColor: '#4096EE',
});
const e1 = graph.insertEdge(parent, null, null, v1, v2, { strokeColor: '#FF1A00' });
});
};
@ -119,37 +103,22 @@ const Template = ({ label, ...args }) => {
graph.getDataModel().setRoot(graph.getDataModel().createRoot());
const parent = graph.getDefaultParent();
const v1 = graph.insertVertex(
parent,
null,
'Click',
30,
20,
80,
30,
'fillColor=#CDEB8B;strokeColor=#008C00'
);
const v2 = graph.insertVertex(
parent,
null,
'Prev',
220,
20,
100,
30,
'fillColor=#CDEB8B;strokeColor=#008C00'
);
const v3 = graph.insertVertex(
parent,
null,
value,
30,
150,
40,
40,
'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
);
const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00');
const v1 = graph.insertVertex(parent, null, 'Click', 30, 20, 80, 30, {
fillColor: '#CDEB8B',
strokeColor: '#008C00',
});
const v2 = graph.insertVertex(parent, null, 'Prev', 220, 20, 100, 30, {
fillColor: '#CDEB8B',
strokeColor: '#008C00',
});
const v3 = graph.insertVertex(parent, null, value, 30, 150, 40, 40, {
shape: 'triangle',
align: 'right',
fillColor: '#C3D9FF',
strokeColor: '#4096EE',
direction: 'west',
});
const e1 = graph.insertEdge(parent, null, null, v1, v2, { strokeColor: '#008C00' });
});
};

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

@ -206,7 +206,7 @@ const Template = ({ label, ...args }) => {
20,
140,
60,
'image=/images/house.png'
{ image: '/images/house.png' }
);
graph.updateCellSize(v1);
addOverlays(graph, v1, false);

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

@ -102,7 +102,7 @@ const Template = ({ label, ...args }) => {
0,
10,
40,
'portConstraint=northsouth;',
{ portConstraint: 'northsouth' },
true
);
v11.geometry.offset = new Point(-5, -5);
@ -114,8 +114,14 @@ const Template = ({ label, ...args }) => {
0.5,
10,
10,
'portConstraint=west;shape=triangle;direction=west;perimeter=none;' +
'routingCenterX=-0.5;routingCenterY=0;',
{
portConstraint: 'west',
shape: 'triangle',
direction: 'west',
perimeter: 'none',
routingCenterX: -0.5,
routingCenterY: 0,
},
true
);
v12.geometry.offset = new Point(-10, -5);
@ -127,8 +133,14 @@ const Template = ({ label, ...args }) => {
0.5,
10,
10,
'portConstraint=east;shape=triangle;direction=east;perimeter=none;' +
'routingCenterX=0.5;routingCenterY=0;',
{
portConstraint: 'east',
shape: 'triangle',
direction: 'east',
perimeter: 'none',
routingCenterX: 0.5,
routingCenterY: 0,
},
true
);
v13.geometry.offset = new Point(0, -5);

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

@ -63,36 +63,15 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex(
parent,
null,
'Label',
20,
20,
80,
30,
'verticalLabelPosition=bottom'
);
const v2 = graph.insertVertex(
parent,
null,
'Label',
200,
20,
80,
30,
'verticalLabelPosition=bottom'
);
const v3 = graph.insertVertex(
parent,
null,
'Label',
20,
150,
80,
30,
'verticalLabelPosition=bottom'
);
const v1 = graph.insertVertex(parent, null, 'Label', 20, 20, 80, 30, {
verticalLabelPosition: 'bottom',
});
const v2 = graph.insertVertex(parent, null, 'Label', 200, 20, 80, 30, {
verticalLabelPosition: 'bottom',
});
const v3 = graph.insertVertex(parent, null, 'Label', 20, 150, 80, 30, {
verticalLabelPosition: 'bottom',
});
var e1 = graph.insertEdge(parent, null, '', v1, v2);
var e1 = graph.insertEdge(parent, null, '', v1, v3);
});

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

@ -186,28 +186,23 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
const v1 = graph.insertVertex(parent, null, 'A', 20, 20, 100, 40);
const v2 = graph.insertVertex(
parent,
null,
'B',
80,
100,
100,
100,
'shape=ellipse;perimeter=ellipsePerimeter'
);
const v3 = graph.insertVertex(
parent,
null,
'C',
190,
30,
100,
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 v2 = graph.insertVertex(parent, null, 'B', 80, 100, 100, 100, {
shape: 'ellipse',
perimeter: 'ellipsePerimeter',
});
const v3 = graph.insertVertex(parent, null, 'C', 190, 30, 100, 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',
});
});
// Comming soon... Integration with orthogonal edge style

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

@ -171,7 +171,12 @@ const Template = ({ label, ...args }) => {
1,
0,
0,
'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',
{
align: 'left',
verticalAlign: 'top',
labelBackgroundColor: 'red',
labelBorderColor: 'black',
},
true
);
v11.geometry.offset = new Point(-8, -8);
@ -187,7 +192,14 @@ const Template = ({ label, ...args }) => {
1,
0,
0,
'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',
{
align: 'left',
verticalAlign: 'top',
fillColor: 'red',
rounded: true,
spacingLeft: 4,
spacingRight: 4,
},
true
);
v21.geometry.offset = new Point(-8, -8);

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

@ -171,59 +171,35 @@ const Template = ({ label, ...args }) => {
// Adds cells to the model in a single step
graph.batchUpdate(() => {
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 Point(90, 60), new Point(90, 130)];
const e2 = graph.insertEdge(parent, null, '', v2, v3);
e2.geometry.points = [new Point(90, 260), new Point(90, 170)];
const v4 = graph.insertVertex(
parent,
null,
'A3',
520,
20,
40,
80,
'shape=customShape;flipH=1'
);
const v5 = graph.insertVertex(
parent,
null,
'A4',
520,
220,
40,
80,
'shape=and;flipH=1'
);
const v6 = graph.insertVertex(
parent,
null,
'X2',
340,
110,
80,
80,
'shape=xor;flipH=1'
);
const v4 = graph.insertVertex(parent, null, 'A3', 520, 20, 40, 80, {
shape: 'customShape',
flipH: true,
});
const v5 = graph.insertVertex(parent, null, 'A4', 520, 220, 40, 80, {
shape: 'and',
flipH: true,
});
const v6 = graph.insertVertex(parent, null, 'X2', 340, 110, 80, 80, {
shape: 'xor',
flipH: true,
});
const e3 = graph.insertEdge(parent, null, '', v4, v6);
e3.geometry.points = [new Point(490, 60), new Point(130, 130)];
const e4 = graph.insertEdge(parent, null, '', v5, v6);
e4.geometry.points = [new Point(490, 260), new Point(130, 170)];
const v7 = graph.insertVertex(
parent,
null,
'O1',
250,
260,
80,
60,
'shape=or;direction=south'
);
const v7 = graph.insertVertex(parent, null, 'O1', 250, 260, 80, 60, {
shape: 'or',
direction: 'south',
});
const e5 = graph.insertEdge(parent, null, '', v6, v7);
e5.geometry.points = [new Point(310, 150)];
const e6 = graph.insertEdge(parent, null, '', v3, v7);

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

@ -214,15 +214,14 @@ const Template = ({ label, ...args }) => {
const getStyle = function () {
// TODO super cannot be used here
// let style = super.getStyle();
let style;
let style = {};
if (this.isCollapsed()) {
if (style != null) {
style += ';';
} else {
style = '';
}
style += 'horizontal=1;align=left;spacingLeft=14;';
style.horizontal = 1;
style.align = 'left';
style.spacingLeft = 14;
}
return style;
};
@ -330,14 +329,14 @@ const Template = ({ label, ...args }) => {
parent: lane1a,
position: [40, 40],
size: [30, 30],
style: 'state',
style: { baseStyleName: 'state' },
});
const end1 = insertVertex({
parent: lane1a,
value: 'A',
position: [560, 40],
size: [30, 30],
style: 'end',
style: { baseStyleName: 'end' },
});
const step1 = insertVertex({
@ -345,28 +344,28 @@ const Template = ({ label, ...args }) => {
value: 'Contact\nProvider',
position: [90, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step11 = insertVertex({
parent: lane1a,
value: 'Complete\nAppropriate\nRequest',
position: [190, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step111 = insertVertex({
parent: lane1a,
value: 'Receive and\nAcknowledge',
position: [385, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const start2 = insertVertex({
parent: lane2b,
position: [40, 40],
size: [30, 30],
style: 'state',
style: { baseStyleName: 'state' },
});
const step2 = insertVertex({
@ -374,14 +373,14 @@ const Template = ({ label, ...args }) => {
value: 'Receive\nRequest',
position: [90, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step22 = insertVertex({
parent: lane2b,
value: 'Refer to Tap\nSystems\nCoordinator',
position: [190, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step3 = insertVertex({
@ -389,14 +388,14 @@ const Template = ({ label, ...args }) => {
value: 'Request 1st-\nGate\nInformation',
position: [190, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step33 = insertVertex({
parent: lane1b,
value: 'Receive 1st-\nGate\nInformation',
position: [290, 30],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step4 = insertVertex({
@ -404,21 +403,21 @@ const Template = ({ label, ...args }) => {
value: 'Receive and\nAcknowledge',
position: [290, 20],
size: [80, 50],
style: 'process',
style: { baseStyleName: 'process' },
});
const step44 = insertVertex({
parent: lane2a,
value: 'Contract\nConstraints?',
position: [400, 20],
size: [50, 50],
style: 'condition',
style: { baseStyleName: 'condition' },
});
const step444 = insertVertex({
parent: lane2a,
value: 'Tap for gas\ndelivery?',
position: [480, 20],
size: [50, 50],
style: 'condition',
style: { baseStyleName: 'condition' },
});
const end2 = insertVertex({
@ -426,14 +425,14 @@ const Template = ({ label, ...args }) => {
value: 'B',
position: [560, 30],
size: [30, 30],
style: 'end',
style: { baseStyleName: 'end' },
});
const end3 = insertVertex({
parent: lane2a,
value: 'C',
position: [560, 84],
size: [30, 30],
style: 'end',
style: { baseStyleName: 'end' },
});
let e = null;
@ -485,14 +484,14 @@ const Template = ({ label, ...args }) => {
value: 'No',
source: step44,
target: step444,
style: 'verticalAlign=bottom',
style: { verticalAlign: 'bottom' },
});
insertEdge({
parent,
value: 'Yes',
source: step44,
target: step111,
style: 'verticalAlign=bottom;horizontal=0;labelBackgroundColor=white;',
style: { verticalAlign: 'bottom', horizontal: 0, labelBackgroundColor: 'white' },
});
insertEdge({
@ -500,14 +499,14 @@ const Template = ({ label, ...args }) => {
value: 'Yes',
source: step444,
target: end2,
style: 'verticalAlign=bottom',
style: { verticalAlign: 'bottom' },
});
e = insertEdge({
parent: lane2a,
value: 'No',
source: step444,
target: end3,
style: 'verticalAlign=top',
style: { verticalAlign: 'top' },
});
e.geometry.points = [
@ -521,19 +520,19 @@ const Template = ({ label, ...args }) => {
parent,
source: step1,
target: step2,
style: 'crossover',
style: { baseStyleName: 'crossover' },
});
insertEdge({
parent,
source: step3,
target: step11,
style: 'crossover',
style: { baseStyleName: 'crossover' },
});
e = insertEdge({
parent: lane1a,
source: step11,
target: step33,
style: 'crossover',
style: { baseStyleName: 'crossover' },
});
e.geometry.points = [

6
packages/html/stories/Wrapping.stories.js
View File

@ -40,21 +40,21 @@ const Template = ({ label, ...args }) => {
value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
position: [20, 20],
size: [100, 70],
style: 'whiteSpace=wrap;',
style: { whiteSpace: 'wrap' },
});
const v2 = graph.insertVertex({
parent,
value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
position: [220, 150],
size: [80, 70],
style: 'whiteSpace=wrap;',
style: { whiteSpace: 'wrap' },
});
const e1 = graph.insertEdge({
parent,
value: 'Cum Caesar vidisset, portum plenum esse, iuxta navigavit.',
source: v1,
target: v2,
style: 'whiteSpace=wrap;',
style: { whiteSpace: 'wrap' },
});
e1.geometry.width = 100;
});

165
packages/html/stories/stashed/JQuery.js
View File

@ -1,8 +1,8 @@
/**
* Copyright (c) 2006-2013, JGraph Ltd
*
*
* JQuery plugin for labels
*
*
* This example demonstrates using
* a JQuery plugin to generate labels for vertices on the fly.
*/
@ -12,7 +12,6 @@ import mxEvent from '../mxgraph/util/mxEvent';
import mxGraph from '../mxgraph/view/mxGraph';
import mxRubberband from '../mxgraph/handler/mxRubberband';
const HTML_TEMPLATE = `
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
@ -23,8 +22,7 @@ const HTML_TEMPLATE = `
</div>
</body>
`
`;
// Fixes possible clipping issues in Chrome
Client.NO_FO = true;
@ -45,53 +43,69 @@ let chartColors = {
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
grey: 'rgb(201, 203, 207)',
};
let randomScalingFactor = function() {
let randomScalingFactor = function () {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
let MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
let MONTHS = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
let config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: chartColors.red,
borderColor: chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
fill: false,
}, {
label: "My Second dataset",
fill: false,
backgroundColor: chartColors.blue,
borderColor: chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}]
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: chartColors.red,
borderColor: chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
fill: false,
},
{
label: 'My Second dataset',
fill: false,
backgroundColor: chartColors.blue,
borderColor: chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
},
],
},
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
title: {
display: true,
text: 'Chart.js Line Chart',
},
tooltips: {
mode: 'index',
@ -99,30 +113,34 @@ let config = {
},
hover: {
mode: 'nearest',
intersect: true
intersect: true,
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
xAxes: [
{
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
scaleLabel: {
display: true,
labelString: 'Month',
},
},
],
yAxes: [
{
display: true,
labelString: 'Value'
}
}]
}
}
scaleLabel: {
display: true,
labelString: 'Value',
},
},
],
},
},
};
// Returns canvas with dynamic chart for vertex labels
let graphConvertValueToString = graph.convertValueToString;
graph.convertValueToString = function(cell) {
graph.convertValueToString = function (cell) {
if (cell.isVertex()) {
let node = document.createElement('canvas');
node.setAttribute('width', cell.geometry.width);
@ -131,7 +149,7 @@ graph.convertValueToString = function(cell) {
// Document for empty output if not in DOM
document.body.appendChild(node);
let ctx = node.getContext("2d");
let ctx = node.getContext('2d');
new Chart(ctx, config);
return node;
@ -148,18 +166,27 @@ let parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.batchUpdate(() => {
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 300, 240,
'overflow=fill;fillColor=none;fontColor=#000000;');
var v2 = graph.insertVertex(parent, null, 'Hello,', 480, 320, 300, 240,
'overflow=fill;fillColor=none;fontColor=#000000;');
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 300, 240, {
overflow: 'fill',
fillColor: 'none',
fontColor: '#000000',
});
var v2 = graph.insertVertex(parent, null, 'Hello,', 480, 320, 300, 240, {
overflow: 'fill',
fillColor: 'none',
fontColor: '#000000',
});
var e1 = graph.insertEdge(parent, null, '', v1, v2);
});
document.body.appendChild(mxUtils.button('+', function() {
graph.zoomIn();
}));
document.body.appendChild(mxUtils.button('-', function() {
graph.zoomOut();
}));
document.body.appendChild(
mxUtils.button('+', function () {
graph.zoomIn();
})
);
document.body.appendChild(
mxUtils.button('-', function () {
graph.zoomOut();
})
);

294
packages/html/stories/stashed/Wires.js
View File

@ -56,7 +56,6 @@ export default {
},
};
const HTML_TEMPLATE = `
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"
@ -64,8 +63,7 @@ const HTML_TEMPLATE = `
</div>
</body>
</html>
`
`;
// If connect preview is not moved away then getCellAt is used to detect the cell under
// the mouse if the mouse is over the preview shape in IE (no event transparency), ie.
@ -84,9 +82,9 @@ mxConstraintHandler.prototype.pointImage = new mxImage('images/dot.gif', 10, 10)
mxGraphHandler.prototype.guidesEnabled = true;
// Alt disables guides
mxGuide.prototype.isEnabledForEvent = function(evt) {
mxGuide.prototype.isEnabledForEvent = function (evt) {
return !mxEvent.isAltDown(evt);
}
};
// Enables snapping waypoints to terminals
mxEdgeHandler.prototype.snapToTerminals = true;
@ -100,12 +98,14 @@ graph.setDisconnectOnMove(false);
graph.foldingEnabled = false;
//Maximum size
graph.maximumGraphBounds = new mxRectangle(0, 0, 800, 600)
graph.maximumGraphBounds = new mxRectangle(0, 0, 800, 600);
graph.border = 50;
// Panning handler consumed right click so this must be
// disabled if right click should stop connection handler.
graph.getPlugin('PanningHandler').isPopupTrigger = function() { return false; };
graph.getPlugin('PanningHandler').isPopupTrigger = function () {
return false;
};
// Enables return key to stop editing (use shift-enter for newlines)
graph.setEnterStopsCellEditing(true);
@ -116,36 +116,40 @@ new mxRubberband(graph);
// Alternative solution for implementing connection points without child cells.
// This can be extended as shown in portrefs.html example to allow for per-port
// incoming/outgoing direction.
graph.getAllConnectionConstraints = function(terminal) {
let geo = (terminal != null) ? terminal.cell.getGeometry() : null;
graph.getAllConnectionConstraints = function (terminal) {
let geo = terminal != null ? terminal.cell.getGeometry() : null;
if ((geo != null ? !geo.relative : false) && terminal.cell.isVertex() && this.getDataModel().getChildCount(terminal.cell) == 0) {
if (
(geo != null ? !geo.relative : false) &&
terminal.cell.isVertex() &&
this.getDataModel().getChildCount(terminal.cell) == 0
) {
return [
new mxConnectionConstraint(new mxPoint(0, 0.5), false),
new mxConnectionConstraint(new mxPoint(1, 0.5), false)
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
];
}
return null;
};
// Makes sure non-relative cells can only be connected via constraints
graph.getPlugin('ConnectionHandler').isConnectableCell = function(cell) {
graph.getPlugin('ConnectionHandler').isConnectableCell = function (cell) {
if (this.graph.getDataModel().isEdge(cell)) {
return true;
} else {
let geo = (cell != null) ? cell.getGeometry() : null;
return (geo != null) ? geo.relative : false;
let geo = cell != null ? cell.getGeometry() : null;
return geo != null ? geo.relative : false;
}
}
mxEdgeHandler.prototype.isConnectableCell = function(cell) {
};
mxEdgeHandler.prototype.isConnectableCell = function (cell) {
return graph.getPlugin('ConnectionHandler').isConnectableCell(cell);
}
};
// Adds a special tooltip for edges
graph.setTooltips(true);
let getTooltipForCell = graph.getTooltipForCell;
graph.getTooltipForCell = function(cell) {
graph.getTooltipForCell = function (cell) {
let tip = '';
if (cell != null) {
@ -181,8 +185,7 @@ if (invert) {
mxCellEditor.prototype.startEditing = (cell, trigger) => {
mxCellEditorStartEditing.apply(this, arguments);
if (this.textarea != null)
{
if (this.textarea != null) {
this.textarea.style.color = '#FFFFFF';
}
};
@ -190,10 +193,10 @@ if (invert) {
mxGraphHandler.prototype.previewColor = 'white';
}
let labelBackground = (invert) ? '#000000' : '#FFFFFF';
let fontColor = (invert) ? '#FFFFFF' : '#000000';
let strokeColor = (invert) ? '#C0C0C0' : '#000000';
let fillColor = (invert) ? 'none' : '#FFFFFF';
let labelBackground = invert ? '#000000' : '#FFFFFF';
let fontColor = invert ? '#FFFFFF' : '#000000';
let strokeColor = invert ? '#C0C0C0' : '#000000';
let fillColor = invert ? 'none' : '#FFFFFF';
let style = graph.getStylesheet().getDefaultEdgeStyle();
delete style.endArrow;
@ -227,13 +230,24 @@ let parent = graph.getDefaultParent();
graph.getDataModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, null, 'J1', 80, 40, 40, 80,
'verticalLabelPosition=top;verticalAlign=bottom;shadow=1;fillColor=' + fillColor);
var v1 = graph.insertVertex(parent, null, 'J1', 80, 40, 40, 80, {
verticalLabelPosition: 'top',
verticalAlign: 'bottom',
shadow: true,
fillColor,
});
v1.setConnectable(false);
var v11 = graph.insertVertex(v1, null, '1', 0, 0, 10, 16,
'shape=line;align=left;verticalAlign=middle;fontSize=10;routingCenterX=-0.5;'+
'spacingLeft=12;fontColor=' + fontColor + ';strokeColor=' + strokeColor);
var v11 = graph.insertVertex(v1, null, '1', 0, 0, 10, 16, {
shape: 'line',
align: 'left',
verticalAlign: 'middle',
fontSize: 10,
routingCenterX: -0.5,
spacingLeft: 12,
fontColor,
strokeColor,
});
v11.geometry.relative = true;
v11.geometry.offset = new mxPoint(-v11.geometry.width, 2);
var v12 = v11.clone();
@ -252,8 +266,16 @@ try {
var v15 = v11.clone();
v15.value = '5';
v15.geometry.x = 1;
v15.style = 'shape=line;align=right;verticalAlign=middle;fontSize=10;routingCenterX=0.5;'+
'spacingRight=12;fontColor=' + fontColor + ';strokeColor=' + strokeColor;
v15.style = {
shape: 'line',
align: 'right',
verticalAlign: 'middle',
fontSize: 10,
routingCenterX: 0.5,
spacingRight: 12,
fontColor,
strokeColor,
};
v15.geometry.offset = new mxPoint(0, 2);
v1.insert(v15);
var v16 = v15.clone();
@ -276,18 +298,29 @@ try {
v19.geometry.width = 10;
v19.geometry.height = 4;
// NOTE: portConstraint is defined for east direction, so must be inverted here
v19.style = 'shape=triangle;direction=north;spacingBottom=12;align=center;portConstraint=horizontal;'+
'fontSize=8;strokeColor=' + strokeColor + ';routingCenterY=0.5;';
v19.style = {
shape: 'triangle',
direction: 'north',
spacingBottom: 12,
align: 'center',
portConstraint: 'horizontal',
fontSize: 8,
strokeColor,
routingCenterY: 0.5,
};
v19.geometry.offset = new mxPoint(-4, -4);
v1.insert(v19);
var v2 = graph.insertVertex(parent, null, 'R1', 220, 220, 80, 20,
'shape=resistor;verticalLabelPosition=top;verticalAlign=bottom;');
var v2 = graph.insertVertex(parent, null, 'R1', 220, 220, 80, 20, {
shape: 'resistor',
verticalLabelPosition: 'top',
verticalAlign: 'bottom',
});
// Uses implementation of connection points via constraints (see above)
//v2.setConnectable(false);
/*var v21 = graph.insertVertex(v2, null, 'A', 0, 0.5, 10, 1,
/*var v21 = graph.insertVertex(v2, null, 'A', 0, 0.5, 10, 1,
'shape=none;spacingBottom=11;spacingLeft=1;align=left;fontSize=8;'+
'fontColor=#4c4c4c;strokeColor=#909090;');
v21.geometry.relative = true;
@ -306,30 +339,39 @@ try {
// Connection constraints implemented in edges, alternatively this
// can be implemented using references, see: portrefs.html
var e1 = graph.insertEdge(parent, null, 'e1', v1.getChildAt(7), v2,
'entryX=0;entryY=0.5;entryPerimeter=0;');
var e1 = graph.insertEdge(parent, null, 'e1', v1.getChildAt(7), v2, {
entryX: 0,
entryY: 0.5,
entryPerimeter: 0,
});
e1.geometry.points = [new mxPoint(180, 110)];
var e2 = graph.insertEdge(parent, null, 'e2', v1.getChildAt(4), v2,
'entryX=1;entryY=0.5;entryPerimeter=0;');
var e2 = graph.insertEdge(parent, null, 'e2', v1.getChildAt(4), v2, {
entryX: 1,
entryY: 0.5,
entryPerimeter: 0,
});
e2.geometry.points = [new mxPoint(320, 50), new mxPoint(320, 230)];
var e3 = graph.insertEdge(parent, null, 'crossover', e1, e2);
e3.geometry.setTerminalPoint(new mxPoint(180, 140), true);
e3.geometry.setTerminalPoint(new mxPoint(320, 140), false);
// var e1 = graph.insertEdge(parent, null, 'e1', v1.getChildAt(7), v2.getChildAt(0));
// e1.geometry.points = [new mxPoint(180, 140)];
// var e1 = graph.insertEdge(parent, null, 'e1', v1.getChildAt(7), v2.getChildAt(0));
// e1.geometry.points = [new mxPoint(180, 140)];
// var e2 = graph.insertEdge(parent, null, '', v1.getChildAt(4), v2.getChildAt(1));
// e2.geometry.points = [new mxPoint(320, 80)];
// var e2 = graph.insertEdge(parent, null, '', v1.getChildAt(4), v2.getChildAt(1));
// e2.geometry.points = [new mxPoint(320, 80)];
// var e3 = graph.insertEdge(parent, null, 'crossover', e1, e2);
// e3.geometry.setTerminalPoint(new mxPoint(180, 160), true);
// e3.geometry.setTerminalPoint(new mxPoint(320, 160), false);
// var e3 = graph.insertEdge(parent, null, 'crossover', e1, e2);
// e3.geometry.setTerminalPoint(new mxPoint(180, 160), true);
// e3.geometry.setTerminalPoint(new mxPoint(320, 160), false);
var e4 = graph.insertEdge(parent, null, 'e4', v2, v3.getChildAt(0),
'exitX=1;exitY=0.5;entryPerimeter=0;');
var e4 = graph.insertEdge(parent, null, 'e4', v2, v3.getChildAt(0), {
exitX: 1,
exitY: 0.5,
entryPerimeter: 0,
});
e4.geometry.points = [new mxPoint(380, 230)];
var e5 = graph.insertEdge(parent, null, 'e5', v3.getChildAt(5), v1.getChildAt(0));
@ -346,34 +388,44 @@ try {
graph.getDataModel().endUpdate();
}
document.body.appendChild(mxUtils.button('Zoom In', function() {
graph.zoomIn();
}));
document.body.appendChild(
mxUtils.button('Zoom In', function () {
graph.zoomIn();
})
);
document.body.appendChild(mxUtils.button('Zoom Out', function() {
graph.zoomOut();
}));
document.body.appendChild(
mxUtils.button('Zoom Out', function () {
graph.zoomOut();
})
);
// Undo/redo
let undoManager = new UndoManager();
let listener = function(sender, evt) {
let listener = function (sender, evt) {
undoManager.undoableEditHappened(evt.getProperty('edit'));
};
graph.getDataModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);
document.body.appendChild(mxUtils.button('Undo', function() {
undoManager.undo();
}));
document.body.appendChild(
mxUtils.button('Undo', function () {
undoManager.undo();
})
);
document.body.appendChild(mxUtils.button('Redo', function() {
undoManager.redo();
}));
document.body.appendChild(
mxUtils.button('Redo', function () {
undoManager.redo();
})
);
// Shows XML for debugging the actual model
document.body.appendChild(mxUtils.button('Delete', function() {
graph.removeCells();
}));
document.body.appendChild(
mxUtils.button('Delete', function () {
graph.removeCells();
})
);
// Wire-mode
let checkbox = document.createElement('input');
@ -384,14 +436,14 @@ mxUtils.write(document.body, 'Wire Mode');
// Starts connections on the background in wire-mode
let connectionHandlerIsStartEvent = graph.getPlugin('ConnectionHandler').isStartEvent;
graph.getPlugin('ConnectionHandler').isStartEvent = function(me) {
graph.getPlugin('ConnectionHandler').isStartEvent = function (me) {
return checkbox.checked || connectionHandlerIsStartEvent.apply(this, arguments);
};
// Avoids any connections for gestures within tolerance except when in wire-mode
// or when over a port
let connectionHandlerMouseUp = graph.getPlugin('ConnectionHandler').mouseUp;
graph.getPlugin('ConnectionHandler').mouseUp = function(sender, me) {
graph.getPlugin('ConnectionHandler').mouseUp = function (sender, me) {
if (this.first != null && this.previous != null) {
let point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY());
let dx = Math.abs(point.x - this.first.x);
@ -417,19 +469,24 @@ checkbox2.setAttribute('checked', 'true');
document.body.appendChild(checkbox2);
mxUtils.write(document.body, 'Grid');
mxEvent.addListener(checkbox2, 'click', function(evt) {
mxEvent.addListener(checkbox2, 'click', function (evt) {
if (checkbox2.checked) {
container.style.background = 'url(\'images/wires-grid.gif\')';
container.style.background = "url('images/wires-grid.gif')";
} else {
container.style.background = '';
}
container.style.backgroundColor = (invert) ? 'black' : 'white';
container.style.backgroundColor = invert ? 'black' : 'white';
});
mxEvent.disableContextMenu(container);
// Updates connection points before the routing is called.
// Computes the position of edge to edge connection points.
mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source, constraint) {
mxGraphView.prototype.updateFixedTerminalPoint = function (
edge,
terminal,
source,
constraint
) {
let pt = null;
if (constraint != null) {
@ -451,8 +508,7 @@ mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source
// Computes edge-to-edge connection point
if (pt != null) {
pt = new mxPoint(s * (tr.x + pt.x + orig.x),
s * (tr.y + pt.y + orig.y));
pt = new mxPoint(s * (tr.x + pt.x + orig.x), s * (tr.y + pt.y + orig.y));
// Finds nearest segment on edge and computes intersection
if (terminal != null && terminal.absolutePoints != null) {
@ -461,11 +517,11 @@ mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source
// Finds orientation of the segment
var p0 = terminal.absolutePoints[seg];
let pe = terminal.absolutePoints[seg + 1];
let horizontal = (p0.x - pe.x == 0);
let horizontal = p0.x - pe.x == 0;
// Stores the segment in the edge state
let key = (source) ? 'sourceConstraint' : 'targetConstraint';
let value = (horizontal) ? 'horizontal' : 'vertical';
let key = source ? 'sourceConstraint' : 'targetConstraint';
let value = horizontal ? 'horizontal' : 'vertical';
edge.style[key] = value;
// Keeps the coordinate within the segment bounds
@ -505,18 +561,26 @@ mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source
// Overrides methods to preview and create new edges.
// Sets source terminal point for edge-to-edge connections.
mxConnectionHandler.prototype.createEdgeState = function(me) {
mxConnectionHandler.prototype.createEdgeState = function (me) {
let edge = this.graph.createEdge();
if (this.sourceConstraint != null && this.previous != null) {
edge.style = 'exitX'+'='+this.sourceConstraint.point.x+';'+
'exitY'+'='+this.sourceConstraint.point.y+';';
}
else if (this.graph.model.isEdge(me.getCell())) {
edge.style =
'exitX' +
'=' +
this.sourceConstraint.point.x +
';' +
'exitY' +
'=' +
this.sourceConstraint.point.y +
';';
} else if (this.graph.model.isEdge(me.getCell())) {
let scale = this.graph.view.scale;
let tr = this.graph.view.translate;
let pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
this.graph.snap(me.getGraphY() / scale) - tr.y);
let pt = new mxPoint(
this.graph.snap(me.getGraphX() / scale) - tr.x,
this.graph.snap(me.getGraphY() / scale) - tr.y
);
edge.geometry.setTerminalPoint(pt, true);
}
@ -524,34 +588,36 @@ mxConnectionHandler.prototype.createEdgeState = function(me) {
};
// Uses right mouse button to create edges on background (see also: lines 67 ff)
mxConnectionHandler.prototype.isStopEvent = function(me) {
mxConnectionHandler.prototype.isStopEvent = function (me) {
return me.getState() != null || mxEvent.isRightMouseButton(me.getEvent());
};
// Updates target terminal point for edge-to-edge connections.
mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState;
mxConnectionHandler.prototype.updateCurrentState = function(me){
mxConnectionHandler.prototype.updateCurrentState = function (me) {
mxConnectionHandlerUpdateCurrentState.apply(this, arguments);
if (this.edgeState != null) {
this.edgeState.cell.geometry.setTerminalPoint(null, false);
if (
this.shape != null &&
this.shape != null &&
this.currentState != null &&
this.currentState.view.graph.model.isEdge(this.currentState.cell)
) {
let scale = this.graph.view.scale;
let tr = this.graph.view.translate;
let pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x,
this.graph.snap(me.getGraphY() / scale) - tr.y);
let pt = new mxPoint(
this.graph.snap(me.getGraphX() / scale) - tr.x,
this.graph.snap(me.getGraphY() / scale) - tr.y
);
this.edgeState.cell.geometry.setTerminalPoint(pt, false);
}
}
};
// Updates the terminal and control points in the cloned preview.
mxEdgeSegmentHandler.prototype.clonePreviewState = function(point, terminal) {
mxEdgeSegmentHandler.prototype.clonePreviewState = function (point, terminal) {
let clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments);
clone.cell = clone.cell.clone();
@ -571,7 +637,7 @@ mxEdgeSegmentHandler.prototype.clonePreviewState = function(point, terminal) {
};
let mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect;
mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me) {
mxEdgeHandler.prototype.connect = function (edge, terminal, isSource, isClone, me) {
let result = null;
let model = this.graph.getDataModel();
let parent = model.getParent(edge);
@ -586,12 +652,13 @@ mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me
let pt = null;
if (model.isEdge(terminal)) {
pt = this.abspoints[(this.isSource) ? 0 : this.abspoints.length - 1];
pt = this.abspoints[this.isSource ? 0 : this.abspoints.length - 1];
pt.x = pt.x / this.graph.view.scale - this.graph.view.translate.x;
pt.y = pt.y / this.graph.view.scale - this.graph.view.translate.y;
let pstate = this.graph.getView().getState(
this.graph.getDataModel().getParent(edge));
let pstate = this.graph
.getView()
.getState(this.graph.getDataModel().getParent(edge));
if (pstate != null) {
pt.x -= pstate.origin.x;
@ -615,17 +682,17 @@ mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me
// Adds in-place highlighting for complete cell area (no hotspot).
mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker;
mxConnectionHandler.prototype.createMarker = function() {
mxConnectionHandler.prototype.createMarker = function () {
let marker = mxConnectionHandlerCreateMarker.apply(this, arguments);
// Uses complete area of cell for new connections (no hotspot)
marker.intersects = function(state, evt) {
marker.intersects = function (state, evt) {
return true;
};
// Adds in-place highlighting
mxCellHighlightHighlight = mxCellHighlight.prototype.highlight;
marker.highlight.highlight = function(state) {
marker.highlight.highlight = function (state) {
if (this.state != state) {
if (this.state != null) {
this.state.style = this.lastStyle;
@ -640,13 +707,13 @@ mxConnectionHandler.prototype.createMarker = function() {
}
}
if (state != null){
if (state != null) {
this.lastStyle = state.style;
state.style = mxUtils.clone(state.style);
state.style.strokeColor = '#00ff00';
state.style.strokeWidth = '3';
if (state.shape != null){
if (state.shape != null) {
state.view.graph.cellRenderer.configureShape(state);
state.shape.redraw();
}
@ -659,17 +726,18 @@ mxConnectionHandler.prototype.createMarker = function() {
};
mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker;
mxEdgeHandler.prototype.createMarker = function() {
mxEdgeHandler.prototype.createMarker = function () {
let marker = mxEdgeHandlerCreateMarker.apply(this, arguments);
// Adds in-place highlighting when reconnecting existing edges
marker.highlight.highlight = this.graph.getPlugin('ConnectionHandler').marker.highlight.highlight;
marker.highlight.highlight =
this.graph.getPlugin('ConnectionHandler').marker.highlight.highlight;
return marker;
}
};
// Adds oval markers for edge-to-edge connections.
mxGraphGetCellStyle = mxGraph.prototype.getCellStyle;
mxGraph.prototype.getCellStyle = function(cell) {
mxGraph.prototype.getCellStyle = function (cell) {
let style = mxGraphGetCellStyle.apply(this, arguments);
if (style != null && this.model.isEdge(cell)) {
@ -688,11 +756,11 @@ mxGraph.prototype.getCellStyle = function(cell) {
// Imlements a custom resistor shape. Direction currently ignored here.
function ResistorShape() { };
function ResistorShape() {}
ResistorShape.prototype = new mxCylinder();
ResistorShape.prototype.constructor = ResistorShape;
ResistorShape.prototype.redrawPath = function(path, x, y, w, h, isForeground) {
ResistorShape.prototype.redrawPath = function (path, x, y, w, h, isForeground) {
let dx = w / 16;
if (isForeground) {
@ -714,7 +782,7 @@ mxCellRenderer.registerShape('resistor', ResistorShape);
// Imlements a custom resistor shape. Direction currently ignored here.
mxEdgeStyle.WireConnector = function(state, source, target, hints, result) {
mxEdgeStyle.WireConnector = function (state, source, target, hints, result) {
// Creates array of all way- and terminalpoints
let pts = state.absolutePoints;
let horizontal = true;
@ -739,7 +807,10 @@ mxEdgeStyle.WireConnector = function(state, source, target, hints, result) {
let pt = pts[0];
if (pt == null && source != null) {
pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source));
pt = new mxPoint(
state.view.getRoutingCenterX(source),
state.view.getRoutingCenterY(source)
);
} else if (pt != null) {
pt = pt.clone();
}
@ -787,15 +858,17 @@ mxEdgeStyle.WireConnector = function(state, source, target, hints, result) {
// TODO: Should move along connected segment
if (pt == null && target != null) {
pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target));
pt = new mxPoint(
state.view.getRoutingCenterX(target),
state.view.getRoutingCenterY(target)
);
}
if (horizontal) {
if (pt.y != hint.y && first.x != pt.x) {
result.push(new mxPoint(pt.x, hint.y));
}
}
else if (pt.x != hint.x && first.y != pt.y) {
} else if (pt.x != hint.x && first.y != pt.y) {
result.push(new mxPoint(hint.x, pt.y));
}
};
@ -804,7 +877,7 @@ mxStyleRegistry.putValue('wireEdgeStyle', mxEdgeStyle.WireConnector);
// This connector needs an mxEdgeSegmentHandler
mxGraphCreateHandler = mxGraph.prototype.createHandler;
mxGraph.prototype.createHandler = function(state) {
mxGraph.prototype.createHandler = function (state) {
let result = null;
if (state != null) {
@ -819,4 +892,3 @@ mxGraph.prototype.createHandler = function(state) {
return mxGraphCreateHandler.apply(this, arguments);
};

2323
packages/html/stories/stashed/grapheditor/www/js/Graph.js
View File

File diff suppressed because it is too large Load Diff