Activity diagrams: Add horizontal fork node

src/main/packages/components.ts

@@ -6,6 +6,7 @@ import { UMLActivityActionNodeComponent } from './uml-activity-diagram/uml-activ
 import { UMLActivityControlFlowComponent } from './uml-activity-diagram/uml-activity-control-flow/uml-activity-control-flow-component';
 import { UMLActivityFinalNodeComponent } from './uml-activity-diagram/uml-activity-final-node/uml-activity-final-node-component';
 import { UMLActivityForkNodeComponent } from './uml-activity-diagram/uml-activity-fork-node/uml-activity-fork-node-component';
+import { UMLActivityForkNodeHorizontalComponent } from './uml-activity-diagram/uml-activity-fork-node-horizontal/uml-activity-fork-node-horizontal-component';
 import { UMLActivityInitialNodeComponent } from './uml-activity-diagram/uml-activity-initial-node/uml-activity-initial-node-component';
 import { UMLActivityMergeNodeComponent } from './uml-activity-diagram/uml-activity-merge-node/uml-activity-merge-node-component';
 import { UMLActivityObjectNodeComponent } from './uml-activity-diagram/uml-activity-object-node/uml-activity-object-node-component';
@@ -66,6 +67,7 @@ export const Components: {
   [UMLElementType.ActivityActionNode]: UMLActivityActionNodeComponent,
   [UMLElementType.ActivityFinalNode]: UMLActivityFinalNodeComponent,
   [UMLElementType.ActivityForkNode]: UMLActivityForkNodeComponent,
+  [UMLElementType.ActivityForkNodeHorizontal]: UMLActivityForkNodeHorizontalComponent,
   [UMLElementType.ActivityInitialNode]: UMLActivityInitialNodeComponent,
   [UMLElementType.ActivityMergeNode]: UMLActivityMergeNodeComponent,
   [UMLElementType.ActivityObjectNode]: UMLActivityObjectNodeComponent,

src/main/packages/popups.ts

@@ -44,6 +44,7 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT
   [UMLElementType.ActivityActionNode]: DefaultPopup,
   [UMLElementType.ActivityFinalNode]: DefaultPopup,
   [UMLElementType.ActivityForkNode]: DefaultPopup,
+  [UMLElementType.ActivityForkNodeHorizontal]: DefaultPopup,
   [UMLElementType.ActivityInitialNode]: DefaultPopup,
   [UMLElementType.ActivityMergeNode]: UMLActivityMergeNodeUpdate,
   [UMLElementType.ActivityObjectNode]: DefaultPopup,

src/main/packages/uml-activity-diagram/activity-preview.ts

@@ -3,6 +3,7 @@ import { UMLElement } from '../../services/uml-element/uml-element';
 import { ComposePreview } from '../compose-preview';
 import { UMLActivityActionNode } from './uml-activity-action-node/uml-activity-action-node';
 import { UMLActivityFinalNode } from './uml-activity-final-node/uml-activity-final-node';
+import { UMLActivityForkNodeHorizontal } from './uml-activity-fork-node-horizontal/uml-activity-fork-node-horizontal';
 import { UMLActivityForkNode } from './uml-activity-fork-node/uml-activity-fork-node';
 import { UMLActivityInitialNode } from './uml-activity-initial-node/uml-activity-initial-node';
 import { UMLActivityMergeNode } from './uml-activity-merge-node/uml-activity-merge-node';
@@ -17,6 +18,8 @@ export const composeActivityPreview: ComposePreview = (
   const elements: UMLElement[] = [];
   UMLActivityForkNode.defaultWidth = 20 * scale;
   UMLActivityForkNode.defaultHeight = 60 * scale;
+  UMLActivityForkNodeHorizontal.defaultWidth = 60 * scale;
+  UMLActivityForkNodeHorizontal.defaultHeight = 20 * scale;
   // Activity
   const activity = new UMLActivity({ name: translate('packages.ActivityDiagram.Activity') });
   activity.bounds = {
@@ -74,5 +77,9 @@ export const composeActivityPreview: ComposePreview = (
   const activityForkNode = new UMLActivityForkNode();
   elements.push(activityForkNode);
 
+  // Activity Fork Node Horizontal
+  const activityForkNodeHorizontal = new UMLActivityForkNodeHorizontal();
+  elements.push(activityForkNodeHorizontal);
+
   return elements;
 };

src/main/packages/uml-activity-diagram/index.ts

@@ -3,6 +3,7 @@ export const ActivityElementType = {
   ActivityActionNode: 'ActivityActionNode',
   ActivityFinalNode: 'ActivityFinalNode',
   ActivityForkNode: 'ActivityForkNode',
+  ActivityForkNodeHorizontal: 'ActivityForkNodeHorizontal',
   ActivityInitialNode: 'ActivityInitialNode',
   ActivityMergeNode: 'ActivityMergeNode',
   ActivityObjectNode: 'ActivityObjectNode',

src/main/packages/uml-activity-diagram/uml-activity-fork-node-horizontal/uml-activity-fork-node-horizontal-component.tsx

@@ -0,0 +1,42 @@
+import React, { ComponentType, FunctionComponent } from 'react';
+import { UMLActivityForkNodeHorizontal } from './uml-activity-fork-node-horizontal';
+import { withTheme, withThemeProps } from '../../../components/theme/styles';
+import { compose } from 'redux';
+import { connect, ConnectedComponent } from 'react-redux';
+import { ModelState } from '../../../components/store/model-state';
+import { ApollonView } from '../../../services/editor/editor-types';
+import { ThemedRectContrast } from '../../../components/theme/themedComponents';
+
+type OwnProps = {
+  element: UMLActivityForkNodeHorizontal;
+};
+
+type StateProps = { interactive: boolean; interactable: boolean };
+
+type DispatchProps = {};
+
+type Props = OwnProps & StateProps & DispatchProps & withThemeProps;
+
+const enhance = compose<ConnectedComponent<ComponentType<Props>, OwnProps>>(
+  withTheme,
+  connect<StateProps, DispatchProps, OwnProps, ModelState>((state, props) => ({
+    interactive: state.interactive.includes(props.element.id),
+    interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight,
+  })),
+);
+
+const UMLActivityForkNodeHorizontalC: FunctionComponent<Props> = ({ element, interactive, interactable, theme }) => {
+  return (
+    <g>
+      <ThemedRectContrast
+        width={element.bounds.width}
+        height={element.bounds.height}
+        strokeColor="none"
+        fillColor={interactive && interactable ? theme.interactive.normal : element.fillColor}
+        fillOpacity={1}
+      />
+    </g>
+  );
+};
+
+export const UMLActivityForkNodeHorizontalComponent = enhance(UMLActivityForkNodeHorizontalC);

src/main/packages/uml-activity-diagram/uml-activity-fork-node-horizontal/uml-activity-fork-node-horizontal.ts

@@ -0,0 +1,31 @@
+import { ActivityElementType, ActivityRelationshipType } from '..';
+import { ILayer } from '../../../services/layouter/layer';
+import { ILayoutable } from '../../../services/layouter/layoutable';
+import { IUMLElement, UMLElement } from '../../../services/uml-element/uml-element';
+import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features';
+import { IBoundary } from '../../../utils/geometry/boundary';
+import { UMLElementType } from '../../uml-element-type';
+import { DeepPartial } from 'redux';
+
+export class UMLActivityForkNodeHorizontal extends UMLElement {
+  static supportedRelationships = [ActivityRelationshipType.ActivityControlFlow];
+  static features: UMLElementFeatures = { ...UMLElement.features, updatable: false };
+  static defaultWidth = 60;
+  static defaultHeight = 20;
+
+  type: UMLElementType = ActivityElementType.ActivityForkNodeHorizontal;
+  bounds: IBoundary = {
+    ...this.bounds,
+  };
+
+  constructor(values?: DeepPartial<IUMLElement>) {
+    super(values);
+    this.bounds.width = (values && values.bounds && values.bounds.width) || UMLActivityForkNodeHorizontal.defaultWidth;
+    this.bounds.height = UMLActivityForkNodeHorizontal.defaultHeight;
+  }
+
+  render(layer: ILayer): ILayoutable[] {
+    this.bounds.width = Math.max(this.bounds.width, UMLActivityForkNodeHorizontal.defaultWidth);
+    return [this];
+  }
+}

src/main/packages/uml-elements.ts

@@ -1,6 +1,7 @@
 import { UMLActivityActionNode } from './uml-activity-diagram/uml-activity-action-node/uml-activity-action-node';
 import { UMLActivityFinalNode } from './uml-activity-diagram/uml-activity-final-node/uml-activity-final-node';
 import { UMLActivityForkNode } from './uml-activity-diagram/uml-activity-fork-node/uml-activity-fork-node';
+import { UMLActivityForkNodeHorizontal } from './uml-activity-diagram/uml-activity-fork-node-horizontal/uml-activity-fork-node-horizontal';
 import { UMLActivityInitialNode } from './uml-activity-diagram/uml-activity-initial-node/uml-activity-initial-node';
 import { UMLActivityMergeNode } from './uml-activity-diagram/uml-activity-merge-node/uml-activity-merge-node';
 import { UMLActivityObjectNode } from './uml-activity-diagram/uml-activity-object-node/uml-activity-object-node';
@@ -55,6 +56,7 @@ export const UMLElements = {
   [UMLElementType.ActivityActionNode]: UMLActivityActionNode,
   [UMLElementType.ActivityObjectNode]: UMLActivityObjectNode,
   [UMLElementType.ActivityForkNode]: UMLActivityForkNode,
+  [UMLElementType.ActivityForkNodeHorizontal]: UMLActivityForkNodeHorizontal,
   [UMLElementType.ActivityMergeNode]: UMLActivityMergeNode,
   [UMLElementType.UseCase]: UMLUseCase,
   [UMLElementType.UseCaseActor]: UMLUseCaseActor,