fix: SwimlaneMixin handles the 'style.horizontal' `undefined` value (#156)

The horizontal value was considered as true only if was set to true.
It is now also considered as true when set to undefined, as everywhere
else in maxGraph.

SwimLanes.stories.js: update configuration to display nodes.
This update is just a starting point. There is still much to do to match the previous mxGraph example.
development
Thomas Bouffard 2023-01-06 16:59:18 +01:00 committed by GitHub
parent 3fff754cd6
commit 171c8f8134
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions

View File

@ -210,7 +210,7 @@ const SwimlaneMixin: PartialType = {
const style = this.getCurrentCellStyle(swimlane, ignoreState); const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = style.startSize ?? DEFAULT_STARTSIZE; const size = style.startSize ?? DEFAULT_STARTSIZE;
if (style.horizontal === true) { if (style.horizontal ?? true) {
result.height = size; result.height = size;
} else { } else {
result.width = size; result.width = size;
@ -225,7 +225,7 @@ const SwimlaneMixin: PartialType = {
const dir = style.direction ?? DIRECTION.EAST; const dir = style.direction ?? DIRECTION.EAST;
const flipH = style.flipH; const flipH = style.flipH;
const flipV = style.flipV; const flipV = style.flipV;
const h = style.horizontal; const h = style.horizontal ?? true;
let n = h ? 0 : 3; let n = h ? 0 : 3;
if (dir === DIRECTION.NORTH) { if (dir === DIRECTION.NORTH) {

View File

@ -16,7 +16,6 @@ limitations under the License.
*/ */
import { import {
Editor,
ConnectionHandler, ConnectionHandler,
ImageBox, ImageBox,
Perimeter, Perimeter,
@ -28,6 +27,8 @@ import {
SwimlaneManager, SwimlaneManager,
StackLayout, StackLayout,
LayoutManager, LayoutManager,
Graph,
Client,
} from '@maxgraph/core'; } from '@maxgraph/core';
import { globalTypes } from '../.storybook/preview'; import { globalTypes } from '../.storybook/preview';
@ -40,6 +41,8 @@ export default {
}; };
const Template = ({ label, ...args }) => { const Template = ({ label, ...args }) => {
Client.setImageBasePath('/images');
const container = document.createElement('div'); const container = document.createElement('div');
container.style.position = 'relative'; container.style.position = 'relative';
container.style.overflow = 'hidden'; container.style.overflow = 'hidden';
@ -48,6 +51,8 @@ const Template = ({ label, ...args }) => {
container.style.background = 'url(/images/grid.gif)'; container.style.background = 'url(/images/grid.gif)';
container.style.cursor = 'default'; container.style.cursor = 'default';
InternalEvent.disableContextMenu(container);
// Defines an icon for creating new connections in the connection handler. // Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex. // This will automatically disable the highlighting of the source vertex.
ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16); ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
@ -59,9 +64,10 @@ const Template = ({ label, ...args }) => {
// .load('editors/config/keyhandler-commons.xml') // .load('editors/config/keyhandler-commons.xml')
// .getDocumentElement(); // .getDocumentElement();
// const editor = new Editor(config); // const editor = new Editor(config);
const editor = new Editor(null); // const editor = new Editor(null);
editor.setGraphContainer(container); // editor.setGraphContainer(container);
const { graph } = editor; // const { graph } = editor;
const graph = new Graph(container);
const model = graph.getDataModel(); const model = graph.getDataModel();
// Auto-resizes the container // Auto-resizes the container
@ -83,6 +89,7 @@ const Template = ({ label, ...args }) => {
style.fontColor = 'black'; style.fontColor = 'black';
style.strokeColor = 'black'; style.strokeColor = 'black';
// delete style.fillColor; // delete style.fillColor;
style.foldable = true;
style = cloneUtils.clone(style); style = cloneUtils.clone(style);
style.shape = constants.SHAPE.RECTANGLE; style.shape = constants.SHAPE.RECTANGLE;
@ -118,7 +125,7 @@ const Template = ({ label, ...args }) => {
graph.getStylesheet().putCellStyle('end', style); graph.getStylesheet().putCellStyle('end', style);
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style.edge = EdgeStyle.ElbowConnector; style.edgeStyle = constants.EDGESTYLE.ELBOW;
style.endArrow = constants.ARROW.BLOCK; style.endArrow = constants.ARROW.BLOCK;
style.rounded = true; style.rounded = true;
style.fontColor = 'black'; style.fontColor = 'black';
@ -132,7 +139,7 @@ const Template = ({ label, ...args }) => {
// Installs double click on middle control point and // Installs double click on middle control point and
// changes style of edges between empty and this value // changes style of edges between empty and this value
graph.alternateEdgeStyle = 'elbow=vertical'; graph.alternateEdgeStyle = { elbow: 'vertical' };
// Adds automatic layout and various switches if the // Adds automatic layout and various switches if the
// graph is enabled // graph is enabled
@ -147,10 +154,8 @@ const Template = ({ label, ...args }) => {
graph.isValidSource = function (cell) { graph.isValidSource = function (cell) {
if (previousIsValidSource.apply(this, arguments)) { if (previousIsValidSource.apply(this, arguments)) {
const style = cell.getStyle(); const style = cell.getStyle();
return style == null || !style.baseStyleNames.includes('end');
return style == null || !(style == 'end' || style.indexOf('end') == 0);
} }
return false; return false;
}; };
@ -162,11 +167,10 @@ const Template = ({ label, ...args }) => {
// style below // style below
graph.isValidTarget = function (cell) { graph.isValidTarget = function (cell) {
const style = cell.getStyle(); const style = cell.getStyle();
return ( return (
!cell.isEdge() && !cell.isEdge() &&
!this.isSwimlane(cell) && !this.isSwimlane(cell) &&
(style == null || !(style == 'state' || style.indexOf('state') == 0)) (style == null || !!style.baseStyleNames.includes('state'))
); );
}; };
@ -234,7 +238,7 @@ const Template = ({ label, ...args }) => {
let style = {}; let style = {};
if (this.isCollapsed()) { if (this.isCollapsed()) {
style.horizontal = 1; style.horizontal = true;
style.align = 'left'; style.align = 'left';
style.spacingLeft = 14; style.spacingLeft = 14;
} }
@ -282,13 +286,15 @@ const Template = ({ label, ...args }) => {
const insertVertex = (options) => { const insertVertex = (options) => {
const v = graph.insertVertex(options); const v = graph.insertVertex(options);
v.getStyle = getStyle; // TODO find a way to restore
// v.getStyle = getStyle;
return v; return v;
}; };
const insertEdge = (options) => { const insertEdge = (options) => {
const e = graph.insertEdge(options); const e = graph.insertEdge(options);
e.getStyle = getStyle; // TODO find a way to restore
// e.getStyle = getStyle;
return e; return e;
}; };