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
parent
3fff754cd6
commit
171c8f8134
|
@ -210,7 +210,7 @@ const SwimlaneMixin: PartialType = {
|
|||
const style = this.getCurrentCellStyle(swimlane, ignoreState);
|
||||
const size = style.startSize ?? DEFAULT_STARTSIZE;
|
||||
|
||||
if (style.horizontal === true) {
|
||||
if (style.horizontal ?? true) {
|
||||
result.height = size;
|
||||
} else {
|
||||
result.width = size;
|
||||
|
@ -225,7 +225,7 @@ const SwimlaneMixin: PartialType = {
|
|||
const dir = style.direction ?? DIRECTION.EAST;
|
||||
const flipH = style.flipH;
|
||||
const flipV = style.flipV;
|
||||
const h = style.horizontal;
|
||||
const h = style.horizontal ?? true;
|
||||
let n = h ? 0 : 3;
|
||||
|
||||
if (dir === DIRECTION.NORTH) {
|
||||
|
|
|
@ -16,7 +16,6 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import {
|
||||
Editor,
|
||||
ConnectionHandler,
|
||||
ImageBox,
|
||||
Perimeter,
|
||||
|
@ -28,6 +27,8 @@ import {
|
|||
SwimlaneManager,
|
||||
StackLayout,
|
||||
LayoutManager,
|
||||
Graph,
|
||||
Client,
|
||||
} from '@maxgraph/core';
|
||||
|
||||
import { globalTypes } from '../.storybook/preview';
|
||||
|
@ -40,6 +41,8 @@ export default {
|
|||
};
|
||||
|
||||
const Template = ({ label, ...args }) => {
|
||||
Client.setImageBasePath('/images');
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'relative';
|
||||
container.style.overflow = 'hidden';
|
||||
|
@ -48,6 +51,8 @@ const Template = ({ label, ...args }) => {
|
|||
container.style.background = 'url(/images/grid.gif)';
|
||||
container.style.cursor = 'default';
|
||||
|
||||
InternalEvent.disableContextMenu(container);
|
||||
|
||||
// Defines an icon for creating new connections in the connection handler.
|
||||
// This will automatically disable the highlighting of the source vertex.
|
||||
ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
|
||||
|
@ -59,9 +64,10 @@ const Template = ({ label, ...args }) => {
|
|||
// .load('editors/config/keyhandler-commons.xml')
|
||||
// .getDocumentElement();
|
||||
// const editor = new Editor(config);
|
||||
const editor = new Editor(null);
|
||||
editor.setGraphContainer(container);
|
||||
const { graph } = editor;
|
||||
// const editor = new Editor(null);
|
||||
// editor.setGraphContainer(container);
|
||||
// const { graph } = editor;
|
||||
const graph = new Graph(container);
|
||||
const model = graph.getDataModel();
|
||||
|
||||
// Auto-resizes the container
|
||||
|
@ -83,6 +89,7 @@ const Template = ({ label, ...args }) => {
|
|||
style.fontColor = 'black';
|
||||
style.strokeColor = 'black';
|
||||
// delete style.fillColor;
|
||||
style.foldable = true;
|
||||
|
||||
style = cloneUtils.clone(style);
|
||||
style.shape = constants.SHAPE.RECTANGLE;
|
||||
|
@ -118,7 +125,7 @@ const Template = ({ label, ...args }) => {
|
|||
graph.getStylesheet().putCellStyle('end', style);
|
||||
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style.edge = EdgeStyle.ElbowConnector;
|
||||
style.edgeStyle = constants.EDGESTYLE.ELBOW;
|
||||
style.endArrow = constants.ARROW.BLOCK;
|
||||
style.rounded = true;
|
||||
style.fontColor = 'black';
|
||||
|
@ -132,7 +139,7 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Installs double click on middle control point and
|
||||
// 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
|
||||
// graph is enabled
|
||||
|
@ -147,10 +154,8 @@ const Template = ({ label, ...args }) => {
|
|||
graph.isValidSource = function (cell) {
|
||||
if (previousIsValidSource.apply(this, arguments)) {
|
||||
const style = cell.getStyle();
|
||||
|
||||
return style == null || !(style == 'end' || style.indexOf('end') == 0);
|
||||
return style == null || !style.baseStyleNames.includes('end');
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
@ -162,11 +167,10 @@ const Template = ({ label, ...args }) => {
|
|||
// style below
|
||||
graph.isValidTarget = function (cell) {
|
||||
const style = cell.getStyle();
|
||||
|
||||
return (
|
||||
!cell.isEdge() &&
|
||||
!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 = {};
|
||||
|
||||
if (this.isCollapsed()) {
|
||||
style.horizontal = 1;
|
||||
style.horizontal = true;
|
||||
style.align = 'left';
|
||||
style.spacingLeft = 14;
|
||||
}
|
||||
|
@ -282,13 +286,15 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
const insertVertex = (options) => {
|
||||
const v = graph.insertVertex(options);
|
||||
v.getStyle = getStyle;
|
||||
// TODO find a way to restore
|
||||
// v.getStyle = getStyle;
|
||||
return v;
|
||||
};
|
||||
|
||||
const insertEdge = (options) => {
|
||||
const e = graph.insertEdge(options);
|
||||
e.getStyle = getStyle;
|
||||
// TODO find a way to restore
|
||||
// e.getStyle = getStyle;
|
||||
return e;
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue