Merge pull request #9 from CarstenWickner/improve-selection-handling

Author: CarstenWickner

package.json

@@ -42,6 +42,7 @@
         "@types/prop-types": "^15.7.2",
         "@types/react": "^16.9.20",
         "@types/react-dom": "^16.9.5",
+        "@types/react-outside-click-handler": "^1.3.0",
         "@types/uuid": "^3.4.7",
         "@typescript-eslint/eslint-plugin": "^2.20.0",
         "@typescript-eslint/parser": "^2.20.0",
@@ -79,11 +80,12 @@
         "stylelint-config-recommended-scss": "^4.2.0",
         "stylelint-scss": "^3.13.0",
         "ts-jest": "^24.2.0",
-        "typescript": "^3.6.5"
+        "typescript": "~3.6.2"
     },
     "dependencies": {
         "react-dnd": "~10.0.2",
         "react-dnd-html5-backend": "~10.0.2",
+        "react-outside-click-handler": "~1.3.0",
         "uuid": "~3.4.0"
     },
     "peerDependencies": {

src/component/FlowModeler.scss

@@ -126,6 +126,9 @@
             }
         }
     }
+    & .gateway-element.diverging + .menu {
+        top: ($strokeStrength * 3) + (1.1em / 2);
+    }
     & .stroke-horizontal::before,
     & .stroke-vertical::before {
         background-color: $strokeColor;
@@ -171,7 +174,7 @@
             z-index: -1;
         }
         &.can-drop::before {
-            background-color: $dropStrokeColor;
+            background: linear-gradient(90deg, $strokeColor 0%, $dropStrokeColor 62%);
         }
         & > .top-label {
             display: flex;
@@ -183,7 +186,14 @@
             min-height: $strokeStrength * 4;
         }
         & > .bottom-spacing {
-            margin-top: $strokeStrength / 2;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: $strokeStrength / 2;
+        }
+        & .clickable-spacing {
+            min-height: $strokeStrength * 4;
+            max-height: $strokeStrength * 8;
+            width: 100%;
         }
     }
     & .stroke-vertical {
@@ -212,12 +222,14 @@
     }
     &.editable {
         & .flow-element,
-        & .top-label {
+        & .top-label,
+        & .clickable-spacing {
             cursor: context-menu;
         }
         & .flow-element.end-element,
         & .selected.flow-element,
-        & .selected > .top-label {
+        & .selected .top-label,
+        & .selected .clickable-spacing {
             cursor: inherit;
         }
         & .start-element.selected,

src/component/FlowModeler.tsx

@@ -1,5 +1,6 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
+import OutsideClickHandler from "react-outside-click-handler";
 import { DndProvider } from "react-dnd";
 import Backend from "react-dnd-html5-backend";
 
@@ -96,6 +97,12 @@ export class FlowModeler extends React.Component<FlowModelerProps, FlowModelerSt
         event.stopPropagation();
     };
 
+    handleOnOutsideClick = (): void => {
+        if (this.state.selection !== null) {
+            this.onSelect(null);
+        }
+    };
+
     handleOnChange = (change: (originalFlow: FlowModelerProps["flow"]) => EditActionResult): void => {
         const { flow, onChange } = this.props;
         const { changedFlow } = change(flow);
@@ -216,22 +223,32 @@ export class FlowModeler extends React.Component<FlowModelerProps, FlowModelerSt
         };
     };
 
-    render(): React.ReactElement {
+    renderMain(): React.ReactElement {
         const { flow, options, onChange } = this.props;
         const { gridCellData, columnCount } = buildRenderData(flow, options && options.verticalAlign === "bottom" ? "bottom" : "top");
         return (
-            <DndProvider backend={Backend}>
-                <div
-                    className={`flow-modeler${onChange ? " editable" : ""}`}
-                    onClick={onChange ? this.clearSelection : undefined}
-                    style={{ gridTemplateColumns: `repeat(${columnCount}, max-content)` }}
-                >
-                    {gridCellData.map(this.renderGridCell(!!onChange))}
-                </div>
-            </DndProvider>
+            <div
+                className={`flow-modeler${onChange ? " editable" : ""}`}
+                onClick={onChange ? this.clearSelection : undefined}
+                style={{ gridTemplateColumns: `repeat(${columnCount}, max-content)` }}
+            >
+                {gridCellData.map(this.renderGridCell(!!onChange))}
+            </div>
         );
     }
 
+    render(): React.ReactElement {
+        const { onChange, options } = this.props;
+        if (onChange) {
+            return (
+                <OutsideClickHandler onOutsideClick={this.handleOnOutsideClick}>
+                    {options && options.omitDndProvider ? this.renderMain() : <DndProvider backend={Backend}>{this.renderMain()}</DndProvider>}
+                </OutsideClickHandler>
+            );
+        }
+        return this.renderMain();
+    }
+
     static propTypes = {
         flow: PropTypes.shape({
             firstElementId: PropTypes.string,
@@ -254,7 +271,8 @@ export class FlowModeler extends React.Component<FlowModelerProps, FlowModelerSt
             ).isRequired
         }).isRequired,
         options: PropTypes.shape({
-            verticalAlign: PropTypes.oneOf(["top", "middle", "bottom"])
+            verticalAlign: PropTypes.oneOf(["top", "middle", "bottom"]),
+            omitDndProvider: PropTypes.bool
         }),
         renderStep: PropTypes.func.isRequired,
         renderGatewayConditionType: PropTypes.func,

src/component/HorizontalStroke.tsx

@@ -64,7 +64,9 @@ export class HorizontalStroke extends React.Component<
                             <div
                                 className="bottom-spacing"
                                 style={(children && this.topLabelRef.current && { minHeight: `${this.state.wrapperTopHeight}px` }) || undefined}
-                            />
+                            >
+                                <div className="clickable-spacing" onClick={this.onTopLabelClick} />
+                            </div>
                         </>
                     )}
                 </div>

src/types/FlowModelerProps.ts

@@ -20,6 +20,7 @@ export interface FlowModelerProps {
     };
     options?: {
         verticalAlign?: "top" | "middle" | "bottom";
+        omitDndProvider?: boolean;
     };
     renderStep: (target: StepNode) => React.ReactNode;
     renderGatewayConditionType?: (target: DivergingGatewayNode) => React.ReactNode;

test/component/FlowModeler.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 
 import { FlowModeler } from "../../src/component/FlowModeler";
 
@@ -35,4 +35,32 @@ describe("renders correctly", () => {
         );
         expect(component).toMatchSnapshot();
     });
+    it.each`
+        elementType             | cssSelector
+        ${"start node"}         | ${".start-element"}
+        ${"step node"}          | ${".step-element"}
+        ${"diverging gateway"}  | ${".gateway-element.diverging"}
+        ${"converging gateway"} | ${".gateway-element.converging"}
+    `("when selecting $elementType", ({ cssSelector }) => {
+        const component = mount(
+            <FlowModeler
+                flow={simpleFlow}
+                renderStep={({ data }): React.ReactNode => <>{data.label}</>}
+                renderGatewayConditionType={({ data }): React.ReactNode => <>{data.label}</>}
+                renderGatewayConditionValue={({ data }): React.ReactNode => <>{data.label}</>}
+                onChange={(): void => {}}
+            />
+        );
+        let targetNode = component.find(cssSelector).at(0);
+        expect(targetNode.hasClass("selected")).toBe(false);
+        expect(component.find(".menu").exists()).toBe(false);
+
+        const onClick = targetNode.prop("onClick") as (event: React.MouseEvent) => void;
+        onClick({ stopPropagation: (): void => {} } as React.MouseEvent);
+        component.update();
+
+        targetNode = component.find(cssSelector).at(0);
+        expect(targetNode.hasClass("selected")).toBe(true);
+        expect(component.find(".menu").exists()).toBe(true);
+    });
 });