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.

packages/core/src/view/mixins/SwimlaneMixin.ts

@@ -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) {

packages/html/stories/SwimLanes.stories.js

@@ -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;
   };