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

Trying to run HelloWorld...

development
Junsik Shim 2021-09-09 10:14:59 +09:00
parent 65d800d5be
commit a7429b2a54
12 changed files with 67 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/core/src/util/ObjectIdentity.ts
View File

@ -44,17 +44,21 @@ class ObjectIdentity {
/**
* Returns the ID for the given object or function.
*/
static get(obj: IdentityObject | IdentityFunction) {
if (isNullish(obj[FIELD_NAME])) {
if (typeof obj === 'object') {
const ctor = getFunctionName(obj.constructor);
obj[FIELD_NAME] = `${ctor}#${ObjectIdentity.counter++}`;
} else if (typeof obj === 'function') {
obj[FIELD_NAME] = `Function#${ObjectIdentity.counter++}`;
static get(obj: IdentityObject | IdentityFunction | null) {
if (obj) {
if (isNullish(obj[FIELD_NAME])) {
if (typeof obj === 'object') {
const ctor = getFunctionName(obj.constructor);
obj[FIELD_NAME] = `${ctor}#${ObjectIdentity.counter++}`;
} else if (typeof obj === 'function') {
obj[FIELD_NAME] = `Function#${ObjectIdentity.counter++}`;
}
}
return obj[FIELD_NAME] as string;
}
return obj[FIELD_NAME] as string;
return null;
}
/**

38
packages/core/src/util/canvas/SvgCanvas2D.ts
View File

@ -26,6 +26,7 @@ import {
FONT_STRIKETHROUGH,
FONT_UNDERLINE,
LINE_HEIGHT,
NONE,
NS_SVG,
NS_XLINK,
WORD_WRAP,
@ -666,37 +667,37 @@ class SvgCanvas2D extends AbstractCanvas2D {
const { node } = this;
const s = this.state;
if (node != null) {
if (node) {
if (node.nodeName === 'path') {
// Checks if the path is not empty
if (this.path != null && this.path.length > 0) {
if (this.path && this.path.length > 0) {
node.setAttribute('d', this.path.join(' '));
} else {
return;
}
}
if (filled && s.fillColor != null) {
if (filled && s.fillColor !== NONE) {
this.updateFill();
} else if (!this.styleEnabled) {
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=814952
if (node.nodeName === 'ellipse' && mxClient.IS_FF) {
node.setAttribute('fill', 'transparent');
} else {
node.setAttribute('fill', 'none');
node.setAttribute('fill', NONE);
}
// Sets the actual filled state for stroke tolerance
filled = false;
}
if (stroked && s.strokeColor != null) {
if (stroked && s.strokeColor !== NONE) {
this.updateStroke();
} else if (!this.styleEnabled) {
node.setAttribute('stroke', 'none');
node.setAttribute('stroke', NONE);
}
if (s.transform != null && s.transform.length > 0) {
if (s.transform && s.transform.length > 0) {
node.setAttribute('transform', s.transform);
}
@ -714,8 +715,8 @@ class SvgCanvas2D extends AbstractCanvas2D {
node.setAttribute('pointer-events', this.pointerEventsValue);
}
// Enables clicks for nodes inside a link element
else if (!this.pointerEvents && this.originalRoot == null) {
node.setAttribute('pointer-events', 'none');
else if (!this.pointerEvents && !this.originalRoot) {
node.setAttribute('pointer-events', NONE);
}
// Removes invisible nodes from output if they don't handle events
@ -723,10 +724,10 @@ class SvgCanvas2D extends AbstractCanvas2D {
(node.nodeName !== 'rect' &&
node.nodeName !== 'path' &&
node.nodeName !== 'ellipse') ||
(node.getAttribute('fill') !== 'none' &&
(node.getAttribute('fill') !== NONE &&
node.getAttribute('fill') !== 'transparent') ||
node.getAttribute('stroke') !== 'none' ||
node.getAttribute('pointer-events') !== 'none'
node.getAttribute('stroke') !== NONE ||
node.getAttribute('pointer-events') !== NONE
) {
// LATER: Update existing DOM for performance
this.root.appendChild(node);
@ -748,8 +749,8 @@ class SvgCanvas2D extends AbstractCanvas2D {
this.node.setAttribute('fill-opacity', String(s.alpha * s.fillAlpha));
}
if (s.fillColor) {
if (s.gradientColor) {
if (s.fillColor !== NONE) {
if (s.gradientColor !== NONE) {
const id = this.getSvgGradient(
s.fillColor,
s.gradientColor,
@ -790,7 +791,8 @@ class SvgCanvas2D extends AbstractCanvas2D {
const s = this.state;
if (s.strokeColor) this.node.setAttribute('stroke', s.strokeColor.toLowerCase());
if (s.strokeColor !== NONE)
this.node.setAttribute('stroke', s.strokeColor.toLowerCase());
if (s.alpha < 1 || s.strokeAlpha < 1) {
this.node.setAttribute('stroke-opacity', String(s.alpha * s.strokeAlpha));
@ -894,10 +896,10 @@ class SvgCanvas2D extends AbstractCanvas2D {
shadow.getAttribute('fill') !== 'none' &&
(!mxClient.IS_FF || shadow.getAttribute('fill') !== 'transparent')
) {
shadow.setAttribute('fill', String(s.shadowColor));
shadow.setAttribute('fill', s.shadowColor);
}
if (shadow.getAttribute('stroke') !== 'none' && s.shadowColor) {
if (shadow.getAttribute('stroke') !== 'none' && s.shadowColor !== NONE) {
shadow.setAttribute('stroke', s.shadowColor);
}
@ -1725,7 +1727,7 @@ class SvgCanvas2D extends AbstractCanvas2D {
updateFont(node: SVGElement) {
const s = this.state;
if (s.fontColor) node.setAttribute('fill', s.fontColor);
if (s.fontColor !== NONE) node.setAttribute('fill', s.fontColor);
if (!this.styleEnabled || s.fontFamily !== DEFAULT_FONTFAMILY) {
node.setAttribute('font-family', s.fontFamily);

2
packages/core/src/view/cell/CellMarker.ts
View File

@ -287,7 +287,7 @@ class CellMarker extends EventSource {
if (state !== this.markedState || color !== this.currentColor) {
this.currentColor = color;
if (state && this.currentColor) {
if (state && this.currentColor !== NONE) {
this.markedState = state;
this.mark();
} else if (this.markedState) {

14
packages/core/src/view/cell/CellRenderer.ts
View File

@ -359,7 +359,6 @@ class CellRenderer {
if (value === 'inherit') {
referenced = state.cell.getParent();
/* disable swimlane for now
} else if (value === 'swimlane') {
// @ts-ignore
shape[field] =
@ -371,9 +370,8 @@ class CellRenderer {
referenced = state.cell;
}
referenced = graph.swimlane.getSwimlane(<Cell>referenced);
key = graph.swimlane.swimlaneIndicatorColorAttribute;
*/
referenced = graph.getSwimlane(<Cell>referenced);
key = graph.swimlaneIndicatorColorAttribute;
} else if (value === 'indicated' && state.shape) {
// @ts-ignore
shape[field] = state.shape.indicatorColor;
@ -437,7 +435,7 @@ class CellRenderer {
state.text = new this.defaultTextShape(
value,
new Rectangle(),
state.style.align || ALIGN_CENTER,
state.style.align ?? ALIGN_CENTER,
state.getVerticalAlign(),
state.style.fontColor,
state.style.fontFamily,
@ -455,9 +453,9 @@ class CellRenderer {
graph.isLabelClipped(state.cell),
state.style.overflow,
state.style.labelPadding,
state.style.textDirection || DEFAULT_TEXT_DIRECTION
state.style.textDirection ?? DEFAULT_TEXT_DIRECTION
);
state.text.opacity = state.style.textOpacity;
state.text.opacity = state.style.textOpacity ?? 100;
state.text.dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
state.text.style = state.style;
state.text.state = state;
@ -928,7 +926,7 @@ class CellRenderer {
const isForceHtml =
state.view.graph.isHtmlLabel(state.cell) || (value && isNode(value));
const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
const overflow = state.style.overflow || 'visible';
const overflow = state.style.overflow ?? 'visible';
if (
state.text &&

6
packages/core/src/view/cell/GraphCellsMixin.ts
View File

@ -1409,7 +1409,7 @@ const GraphCellsMixin: PartialType = {
this.getModel().setStyle(cell, cellStyle);
} else {*/
const state = this.getView().createState(cell);
const align = state.style.align || ALIGN_CENTER;
const align = state.style.align ?? ALIGN_CENTER;
if (align === ALIGN_RIGHT) {
geo.x += geo.width - size.width;
@ -2377,7 +2377,7 @@ const GraphCellsMixin: PartialType = {
const state = this.getView().getState(cell);
if (state && cell.isVisible() && (!ignoreFn || !ignoreFn(state))) {
const deg = state.style.rotation;
const deg = state.style.rotation ?? 0;
let box: CellState | Rectangle = state; // TODO: CHECK ME!!!! ==========================================================
if (deg !== 0) {
@ -2486,7 +2486,7 @@ const GraphCellsMixin: PartialType = {
pt = next;
}
} else {
const alpha = toRadians(state.style.rotation);
const alpha = toRadians(state.style.rotation ?? 0);
if (alpha !== 0) {
const cos = Math.cos(-alpha);

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

@ -12,7 +12,7 @@ import GraphView from '../../view/GraphView';
import Shape from '../../geometry/shape/Shape';
import TextShape from '../../geometry/shape/node/TextShape';
import Dictionary from '../../../util/Dictionary';
import { NONE } from '../../../util/Constants';
import { ALIGN_MIDDLE, NONE } from '../../../util/Constants';
import { CellStateStyles } from '../../../types';
import RectangleShape from '../../geometry/shape/node/RectangleShape';
import CellOverlay from '../CellOverlay';
@ -466,7 +466,7 @@ class CellState extends Rectangle {
* returned.
*/
getVerticalAlign() {
return this.style.verticalAlign;
return this.style.verticalAlign ?? ALIGN_MIDDLE;
}
/**
@ -477,8 +477,8 @@ class CellState extends Rectangle {
isTransparentState() {
let result = false;
const stroke = this.style.strokeColor;
const fill = this.style.fillColor;
const stroke = this.style.strokeColor ?? NONE;
const fill = this.style.fillColor ?? NONE;
result = stroke === NONE && fill === NONE && !this.getImageSrc();

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

@ -1046,7 +1046,7 @@ class VertexHandler {
*/
resizeVertex(me: InternalMouseEvent) {
const ct = new Point(this.state.getCenterX(), this.state.getCenterY());
const alpha = toRadians(this.state.style.rotation);
const alpha = toRadians(this.state.style.rotation ?? 0);
const point = new Point(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate;
const { scale } = this.graph.view;
@ -1334,7 +1334,7 @@ class VertexHandler {
}
} else if (index === InternalEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) {
const delta = this.currentAlpha - (this.state.style.rotation || 0);
const delta = this.currentAlpha - (this.state.style.rotation ?? 0);
if (delta !== 0) {
this.rotateCell(this.state.cell, delta);
@ -1344,7 +1344,7 @@ class VertexHandler {
}
} else {
const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
const alpha = toRadians(this.state.style.rotation);
const alpha = toRadians(this.state.style.rotation ?? 0);
const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha);
@ -1523,7 +1523,7 @@ class VertexHandler {
if (geo && this.labelShape && this.labelShape.bounds) {
if (index === InternalEvent.LABEL_HANDLE) {
const alpha = -toRadians(this.state.style.rotation);
const alpha = -toRadians(this.state.style.rotation ?? 0);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const { scale } = this.graph.view;
@ -1923,7 +1923,7 @@ class VertexHandler {
'w-resize',
];
const alpha = toRadians(this.state.style.rotation);
const alpha = toRadians(this.state.style.rotation ?? 0);
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const da = Math.round((alpha * 4) / Math.PI);

13
packages/core/src/view/connection/ConstraintHandler.ts
View File

@ -76,7 +76,7 @@ class ConstraintHandler {
focusIcons: ImageShape[] = [];
constraints: ConnectionConstraint[] = [];
constraints: ConnectionConstraint[] | null = null;
currentConstraint: ConnectionConstraint | null = null;
@ -275,6 +275,7 @@ class ConstraintHandler {
2 * tol,
2 * tol
);
const state = this.graph.view.getState(this.getCellForEvent(me, point) as Cell);
// Keeps focus icons visible while over vertex bounds and no other cell under mouse or shift is pressed
@ -396,16 +397,16 @@ class ConstraintHandler {
* the handler is not enabled then the outline is painted, but the constraints
* are ignored.
*/
setFocus(me: InternalMouseEvent, state: CellState, source: boolean) {
setFocus(me: InternalMouseEvent, state: CellState | null, source: boolean) {
this.constraints =
state != null && !this.isStateIgnored(state, source) && state.cell.isConnectable()
state && !this.isStateIgnored(state, source) && state.cell.isConnectable()
? this.isEnabled()
? this.graph.getAllConnectionConstraints(state, source) || []
? this.graph.getAllConnectionConstraints(state, source) ?? []
: []
: [];
: null;
// Only uses cells which have constraints
if (this.constraints != null) {
if (this.constraints && state) {
this.currentFocus = state;
this.currentFocusArea = new Rectangle(state.x, state.y, state.width, state.height);

3
packages/core/src/view/selection/CellHighlight.ts
View File

@ -186,8 +186,7 @@ class CellHighlight {
if (this.state != null && this.shape != null) {
this.shape.scale = this.state.view.scale;
// @ts-ignore
if (this.graph.model.isEdge(this.state.cell)) {
if (this.state.cell.isEdge()) {
this.shape.strokeWidth = this.getStrokeWidth();
this.shape.points = this.state.absolutePoints;
this.shape.outline = false;

11
packages/html/.storybook/preview.js
View File

@ -1,21 +1,22 @@
import '@maxgraph/css/common.css';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
};
export const globalTypes = {
width: {
type: 'number',
defaultValue: 800
defaultValue: 800,
},
height: {
type: 'number',
defaultValue: 600
}
defaultValue: 600,
},
};

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

@ -1,4 +1,5 @@
import { Graph, InternalEvent, RubberBand } from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview';
export default {

1
packages/html/webpack.config.js
View File

@ -6,6 +6,7 @@ module.exports = merge(base, {
resolve: {
alias: {
'@maxgraph/core': path.resolve(__dirname, '../core/src'),
'@maxgraph/css': path.resolve(__dirname, '../core/css'),
},
},
});