Merge pull request #3 from CarstenWickner/code-clean-up

Author: CarstenWickner

…omponent/flow-element/ContentElement.tsx src/component/ContentElement.tsxsrc/component/flow-element/ContentElement.tsx renamed to src/component/ContentElement.tsx src/component/flow-element/ContentElement.tsx renamed to src/component/ContentElement.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
+import { HorizontalStroke } from "./HorizontalStroke";
 
 export const ContentElement: React.FunctionComponent<{
-    children: React.ReactChild;
+    children: React.ReactNode;
 }> = ({ children }) => (
     <>
         <div className="arrow" />
         <div className="flow-element content-element">{children}</div>
+        <HorizontalStroke className="optional" />
     </>
 );

src/component/FlowModeler.scss

@@ -46,7 +46,6 @@
                 border-radius: 0.25em;
                 min-width: $standardElementSize;
                 min-height: $standardElementSize / 2;
-                flex-grow: 1;
             }
             &.gateway-element {
                 border: ($strokeStrength / 2) solid $standardElementColor;

src/component/FlowModeler.tsx

@@ -1,7 +1,9 @@
 import * as PropTypes from "prop-types";
 import * as React from "react";
 
-import { Start, ContentElement, Gateway, GatewayToElementConnector, ElementToGatewayConnector, StrokeExtension, End } from "./flow-element";
+import { ContentElement } from "./ContentElement";
+import { Gateway } from "./Gateway";
+import { HorizontalStroke } from "./HorizontalStroke";
 import { GridCell } from "./GridCell";
 import { buildRenderData } from "./renderDataUtils";
 import { GridCellData, ElementType } from "../types/GridCellData";
@@ -10,10 +12,10 @@ import { FlowModelerProps } from "../types/FlowModelerProps";
 import "./FlowModeler.scss";
 
 export class FlowModeler extends React.Component<FlowModelerProps> {
-    renderFlowElement(cellData: GridCellData): React.ReactChild {
+    renderFlowElement(cellData: GridCellData): React.ReactNode {
         switch (cellData.type) {
             case ElementType.Start:
-                return <Start />;
+                return <div className="flow-element start-element" />;
             case ElementType.Content:
                 const { renderContent } = this.props;
                 return (
@@ -35,30 +37,35 @@ export class FlowModeler extends React.Component<FlowModelerProps> {
                             })}
                     </Gateway>
                 );
+            case ElementType.GatewayConverging:
+                return <Gateway type="converging" />;
             case ElementType.ConnectGatewayToElement:
                 const { renderGatewayConditionValue } = this.props;
                 return (
-                    <GatewayToElementConnector connectionType={cellData.connectionType}>
+                    <HorizontalStroke incomingConnection={cellData.connectionType}>
                         {renderGatewayConditionValue &&
                             renderGatewayConditionValue({
                                 conditionData: cellData.data,
                                 branchElementId: cellData.elementId,
                                 gatewayElementId: cellData.gatewayId
                             })}
-                    </GatewayToElementConnector>
+                    </HorizontalStroke>
                 );
             case ElementType.ConnectElementToGateway:
-                return <ElementToGatewayConnector connectionType={cellData.connectionType} />;
-            case ElementType.GatewayConverging:
-                return <Gateway type="converging" />;
+                return <HorizontalStroke outgoingConnection={cellData.connectionType} />;
             case ElementType.StrokeExtension:
-                return <StrokeExtension />;
+                return <div className="stroke-horizontal" />;
             case ElementType.End:
-                return <End />;
+                return (
+                    <>
+                        <div className="arrow" />
+                        <div className="flow-element end-element" />
+                    </>
+                );
         }
     }
 
-    renderGridCell = ((cellData: GridCellData): React.ReactChild => {
+    renderGridCell = ((cellData: GridCellData): React.ReactNode => {
         const { options } = this.props;
         const verticalAlign = options && options.verticalAlign;
         const { colStartIndex, colEndIndex, rowStartIndex, rowEndIndex } = cellData;
@@ -76,8 +83,9 @@ export class FlowModeler extends React.Component<FlowModelerProps> {
     }).bind(this);
 
     render(): React.ReactElement {
-        const { flow } = this.props;
-        const { gridCellData, columnCount } = buildRenderData(flow);
+        const { flow, options } = this.props;
+        const verticalModelAlign = options && options.verticalAlign === "bottom" ? "bottom" : "top";
+        const { gridCellData, columnCount } = buildRenderData(flow, verticalModelAlign);
         return (
             <div className="flow-modeler" style={{ gridTemplateColumns: `repeat(${columnCount}, max-content)` }}>
                 {gridCellData.map(this.renderGridCell)}

src/component/flow-element/Gateway.tsx src/component/Gateway.tsxsrc/component/flow-element/Gateway.tsx renamed to src/component/Gateway.tsx

@@ -2,7 +2,10 @@ import * as React from "react";
 
 import { HorizontalStroke } from "./HorizontalStroke";
 
-export const Gateway: React.FunctionComponent<{ type: "converging" } | { type: "diverging"; children?: React.ReactChild }> = ({ type, children }) => (
+export const Gateway: React.FunctionComponent<{ type: "converging"; children?: never } | { type: "diverging"; children?: React.ReactNode }> = ({
+    type,
+    children
+}) => (
     <>
         <div className="arrow" />
         <div className={`flow-element gateway-element ${type}`} />

src/component/GridCell.tsx

@@ -5,7 +5,7 @@ export const GridCell: React.FunctionComponent<{
     colEndIndex?: number;
     rowStartIndex: number;
     rowEndIndex?: number;
-    children: React.ReactChild;
+    children: React.ReactNode;
 }> = ({ colStartIndex, colEndIndex, rowStartIndex, rowEndIndex, children }) => (
     <div
         className="grid-cell"

…ponent/flow-element/HorizontalStroke.tsx src/component/HorizontalStroke.tsxsrc/component/flow-element/HorizontalStroke.tsx renamed to src/component/HorizontalStroke.tsx src/component/flow-element/HorizontalStroke.tsx renamed to src/component/HorizontalStroke.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ConnectionType } from "../../types/GridCellData";
+import { ConnectionType } from "../types/GridCellData";
 
 const getConnectionClassName = (connectionType: ConnectionType): string => {
     switch (connectionType) {
@@ -14,9 +14,10 @@ const getConnectionClassName = (connectionType: ConnectionType): string => {
 };
 
 export class HorizontalStroke extends React.Component<
-    { className?: string } & (
-        | { incomingConnection: null | ConnectionType; outgoingConnection: null; children?: React.ReactChild }
-        | { incomingConnection: null; outgoingConnection: ConnectionType }
+    { className?: string; children?: React.ReactNode } & (
+        | { incomingConnection: ConnectionType; outgoingConnection?: never }
+        | { incomingConnection?: never; outgoingConnection?: never }
+        | { incomingConnection?: never; outgoingConnection: ConnectionType }
     ),
     { wrapperTopHeight: number }
 > {
@@ -35,12 +36,12 @@ export class HorizontalStroke extends React.Component<
         }
     }
 
-    render(): React.ReactChild {
+    render(): React.ReactNode {
         const { className, incomingConnection, outgoingConnection, children } = this.props;
         const classNameSuffix = className ? ` ${className}` : "";
         return (
             <>
-                {incomingConnection !== null && <div className={`stroke-vertical ${getConnectionClassName(incomingConnection)}${classNameSuffix}`} />}
+                {incomingConnection && <div className={`stroke-vertical ${getConnectionClassName(incomingConnection)}${classNameSuffix}`} />}
                 {!children && <div className={`stroke-horizontal${classNameSuffix}`} />}
                 {children && (
                     <div className={`centered-line-wrapper${classNameSuffix}`}>
@@ -54,16 +55,8 @@ export class HorizontalStroke extends React.Component<
                         />
                     </div>
                 )}
-                {outgoingConnection !== null && <div className={`stroke-vertical ${getConnectionClassName(outgoingConnection)}${classNameSuffix}`} />}
+                {outgoingConnection && <div className={`stroke-vertical ${getConnectionClassName(outgoingConnection)}${classNameSuffix}`} />}
             </>
         );
     }
-
-    static defaultProps: {
-        incomingConnection: null;
-        outgoingConnection: null;
-    } = {
-        incomingConnection: null,
-        outgoingConnection: null
-    };
 }