Add initial pool and swimlane implementation (#314)

.eslintrc.js

@@ -5,13 +5,14 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   root: true,
   rules: {
+    'no-case-declarations': 'off',
+    'no-console': ['error', { allow: ['warn', 'error'] }],
     'no-constant-condition': 'off',
     'no-empty': 'off',
     'no-extra-boolean-cast': 'off',
     'no-prototype-builtins': 'off',
     'no-useless-escape': 'off',
     'prefer-const': 'off',
-    'no-case-declarations': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',

src/main/apollon-editor.ts

@@ -13,8 +13,8 @@ import { ApollonMode, ApollonView, Locale } from './services/editor/editor-types
 import { UMLDiagram } from './services/uml-diagram/uml-diagram';
 import { UMLElementRepository } from './services/uml-element/uml-element-repository';
 import * as Apollon from './typings';
-import { Dispatch } from './utils/actions/actions';
 import { UMLDiagramType, UMLModel } from './typings';
+import { Dispatch } from './utils/actions/actions';
 import { debounce } from './utils/debounce';
 import { delay } from './utils/delay';
 import { ErrorBoundary } from './components/controls/error-boundary/ErrorBoundary';

src/main/compat/index.ts

@@ -1,5 +1,5 @@
 import { UMLModel } from '../typings';
-import { isV2, v2ModeltoV3Model, UMLModelCompat as UMLModelCompatV2 } from './v2';
+import { isV2, UMLModelCompat as UMLModelCompatV2, v2ModeltoV3Model } from './v2';
 
 /**
  *

src/main/compat/v2/transform.ts

@@ -1,5 +1,5 @@
-import { UMLCommunicationLink, UMLModel, UMLRelationshipType } from '../../typings';
-import { UMLModelV2, isCommunicationLink } from './typings';
+import { UMLCommunicationLink, UMLModel } from '../../typings';
+import { isCommunicationLink, UMLModelV2 } from './typings';
 
 /**
  *

src/main/compat/v2/typings.ts

@@ -1,12 +1,4 @@
-import {
-  UMLModel,
-  UMLDiagramType,
-  UMLElement,
-  UMLRelationship,
-  Assessment,
-  UMLCommunicationLink,
-  UMLRelationshipType,
-} from '../../typings';
+import { Assessment, UMLDiagramType, UMLElement, UMLModel, UMLRelationship, UMLRelationshipType } from '../../typings';
 
 /**
  *

src/main/components/create-pane/create-pane.tsx

@@ -29,6 +29,7 @@ import { composeFlowchartPreview } from '../../packages/flowchart/flowchart-diag
 import { ColorLegend } from '../../packages/common/color-legend/color-legend';
 import { Separator } from './create-pane-styles';
 import { composeBPMNPreview } from '../../packages/bpmn/bpmn-diagram-preview';
+
 type OwnProps = {};
 
 type StateProps = {

src/main/components/root/with-root.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ComponentType, forwardRef } from 'react';
-import { RootContext, RootConsumer } from './root-context';
+import { RootConsumer, RootContext } from './root-context';
 
 export const withRoot = <P extends RootContext, C extends Component>(WrappedComponent: ComponentType<P>) =>
   forwardRef<C, Pick<P, Exclude<keyof P, keyof RootContext>>>((props, ref) => (

src/main/components/sidebar/sidebar-component.tsx

@@ -10,6 +10,7 @@ import { localized } from '../i18n/localized';
 import { ModelState } from '../store/model-state';
 import { Container } from './sidebar-styles';
 import { SelectableState } from '../../services/uml-element/selectable/selectable-types';
+
 type OwnProps = {};
 
 type StateProps = {

src/main/components/store/model-state.ts

@@ -20,10 +20,10 @@ import { ReconnectableState } from '../../services/uml-relationship/reconnectabl
 import { IUMLRelationship, UMLRelationship } from '../../services/uml-relationship/uml-relationship';
 import { UMLRelationshipRepository } from '../../services/uml-relationship/uml-relationship-repository';
 import * as Apollon from '../../typings';
+import { UMLDiagramType } from '../../typings';
 import { backwardsCompatibleModel, UMLModelCompat } from '../../compat';
 import { computeBoundingBoxForElements } from '../../utils/geometry/boundary';
 import { UMLDiagram } from '../../services/uml-diagram/uml-diagram';
-import { UMLDiagramType } from '../../typings';
 import { CopyState } from '../../services/copypaste/copy-types';
 import { LastActionState } from '../../services/last-action/last-action-types';
 import { arrayToInclusionMap, inclusionMapToArray } from './util';

src/main/components/style-pane/style-pane.tsx

@@ -9,7 +9,8 @@ import { I18nContext } from '../i18n/i18n-context';
 import { localized } from '../i18n/localized';
 import { ModelState } from '../store/model-state';
 import { ColorSelector } from './color-selector';
-import { Row, Container, Color, Divider } from './style-pane-styles';
+import { Color, Container, Divider, Row } from './style-pane-styles';
+
 type OwnProps = {
   open: boolean;
   element: IUMLElement;

src/main/components/theme/styles.ts

@@ -1,4 +1,5 @@
 import baseStyled, { css as baseCss, ThemedCssFunction, ThemedStyledInterface } from 'styled-components';
+
 export { withTheme } from 'styled-components';
 
 export type Styles = typeof apollonTheme;

src/main/components/uml-element/assessable/assessable.tsx

@@ -7,7 +7,7 @@ import { IPath, Path } from '../../../utils/geometry/path';
 import { Point } from '../../../utils/geometry/point';
 import { ModelState } from '../../store/model-state';
 import { UMLElementComponentProps } from '../uml-element-component-props';
-import { ICON_SIZE, Container, CorrectIcon, FeedbackIcon, Triangle, WarningIcon, WrongIcon } from './assessment-styles';
+import { Container, CorrectIcon, FeedbackIcon, ICON_SIZE, Triangle, WarningIcon, WrongIcon } from './assessment-styles';
 import { findDOMNode } from 'react-dom';
 import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
 import { AsyncDispatch } from '../../../utils/actions/actions';

src/main/components/uml-element/canvas-element.tsx

@@ -23,6 +23,7 @@ type StateProps = {
   interactive: boolean;
   interactable: boolean;
   element: IUMLElement;
+  zoomFactor: number;
 };
 
 type DispatchProps = {};
@@ -39,6 +40,7 @@ const enhance = compose<ComponentClass<OwnProps>>(
       interactive: state.interactive.includes(props.id),
       interactable: state.editor.view === ApollonView.Exporting || state.editor.view === ApollonView.Highlight,
       element: state.elements[props.id],
+      zoomFactor: state.editor.zoomFactor,
     }),
     {},
   ),
@@ -56,6 +58,7 @@ class CanvasElementComponent extends Component<Props> {
       child: ChildComponent,
       children,
       theme,
+      zoomFactor: _,
       ...props
     } = this.props;
 

src/main/components/uml-element/resizable/resizable.tsx

@@ -131,7 +131,7 @@ export const resizable =
         if (width === 0 && height === 0) return;
 
         this.setState((state) => ({ offset: state.offset.add(width, height) }));
-        this.props.resize({ width, height }, resizeFrom);
+        this.props.resize({ width, height }, resizeFrom, this.props.id);
       };
 
       private onPointerDown = (event: React.PointerEvent<SVGElement>, resizeFrom: ResizeFrom) => {

src/main/i18n/de.json

@@ -132,7 +132,6 @@
       "BPMNComplexGateway": "Komplex",
       "BPMNEventBasedGateway": "Ereignis-basiert",
       "BPMNExclusiveGateway": "Exklusiv",
-      "BPMNExclusiveEventBasedGateway": "Exklusiv Ereignis-basiert",
       "BPMNInclusiveGateway": "Inklusiv",
       "BPMNParallelGateway": "Parallel",
       "BPMNParallelEventBasedGateway": "Parallel Ereignis-basiert",
@@ -142,6 +141,9 @@
       "BPMNMessageFlow": "Nachricht",
       "BPMNAssociationFlow": "Assoziation",
       "BPMNDataObject": "Datenobjekt",
+      "BPMNPool": "Pool",
+      "BPMNSwimlane": "Bahn",
+      "BPMNSwimlanes": "Bahnen",
       "BPMNGroup": "Gruppe"
     }
   }

src/main/i18n/en.json

@@ -133,7 +133,6 @@
       "BPMNEventBasedGateway": "Event-based",
       "BPMNInclusiveGateway": "Inclusive",
       "BPMNExclusiveGateway": "Exclusive",
-      "BPMNExclusiveEventBasedGateway": "Exclusive Event-based",
       "BPMNParallelGateway": "Parallel",
       "BPMNParallelEventBasedGateway": "Parallel Event-based",
       "BPMNConversation": "Conversation",
@@ -142,6 +141,9 @@
       "BPMNMessageFlow": "Message",
       "BPMNAssociationFlow": "Association",
       "BPMNDataObject": "Data Object",
+      "BPMNPool": "Pool",
+      "BPMNSwimlane": "Lane",
+      "BPMNSwimlanes": "Lanes",
       "BPMNGroup": "Group"
     }
   }

src/main/packages/bpmn/bpmn-data-object/bpmn-data-object-component.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { ThemedPath, ThemedPolyline, ThemedRect } from '../../../components/theme/themedComponents';
+import { ThemedPolyline } from '../../../components/theme/themedComponents';
 import { Multiline } from '../../../utils/svg/multiline';
 import { BPMNDataObject } from './bpmn-data-object';
 

src/main/packages/bpmn/bpmn-data-object/bpmn-data-object.ts

@@ -4,7 +4,6 @@ import { ILayoutable } from '../../../services/layouter/layoutable';
 import { calculateNameBounds } from '../../../utils/name-bounds';
 import { UMLElementType } from '../../uml-element-type';
 import { UMLElementFeatures } from '../../../services/uml-element/uml-element-features';
-import { UMLElement } from '../../../services/uml-element/uml-element';
 import { UMLContainer } from '../../../services/uml-container/uml-container';
 
 export class BPMNDataObject extends UMLContainer {

src/main/packages/bpmn/bpmn-diagram-preview.ts

@@ -1,5 +1,5 @@
 import { ILayer } from '../../services/layouter/layer';
-import { computeDimension, IBoundary } from '../../utils/geometry/boundary';
+import { IBoundary } from '../../utils/geometry/boundary';
 import { ComposePreview, PreviewElement } from '../compose-preview';
 import { BPMNTask } from './bpmn-task/bpmn-task';
 import { BPMNSubprocess } from './bpmn-subprocess/bpmn-subprocess';
@@ -10,7 +10,7 @@ import { BPMNGateway } from './bpmn-gateway/bpmn-gateway';
 import { BPMNTransaction } from './bpmn-transaction/bpmn-transaction';
 import { BPMNCallActivity } from './bpmn-call-activity/bpmn-call-activity';
 import { BPMNAnnotation } from './bpmn-annotation/bpmn-annotation';
-import { BPMNConversation } from './bpmn-conversation/bpmn-conversation';
+import { BPMNPool } from './bpmn-pool/bpmn-pool';
 import { BPMNDataObject } from './bpmn-data-object/bpmn-data-object';
 import { BPMNGroup } from './bpmn-group/bpmn-group';
 
@@ -19,7 +19,7 @@ export const composeBPMNPreview: ComposePreview = (
   translate: (id: string) => string,
 ): PreviewElement[] => {
   const elements: PreviewElement[] = [];
-  const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: computeDimension(1.0, 60) };
+  const defaultBounds: IBoundary = { x: 0, y: 0, width: 150, height: 60 };
 
   elements.push(
     new BPMNTask({
@@ -64,28 +64,24 @@ export const composeBPMNPreview: ComposePreview = (
 
   elements.push(
     new BPMNStartEvent({
-      name: translate('packages.BPMN.BPMNStartEvent'),
       bounds: { x: 0, y: 0, width: 40, height: 40 },
     }),
   );
 
   elements.push(
     new BPMNIntermediateEvent({
-      name: translate('packages.BPMN.BPMNIntermediateEvent'),
       bounds: { x: 0, y: 0, width: 40, height: 40 },
     }),
   );
 
   elements.push(
     new BPMNEndEvent({
-      name: translate('packages.BPMN.BPMNEndEvent'),
       bounds: { x: 0, y: 0, width: 40, height: 40 },
     }),
   );
 
   elements.push(
     new BPMNGateway({
-      name: translate('packages.BPMN.BPMNGateway'),
       bounds: { x: 0, y: 0, width: 40, height: 40 },
     }),
   );
@@ -96,5 +92,12 @@ export const composeBPMNPreview: ComposePreview = (
     }),
   );
 
+  elements.push(
+    new BPMNPool({
+      name: translate('packages.BPMN.BPMNPool'),
+      bounds: { x: 0, y: 0, width: 160, height: 80 },
+    }),
+  );
+
   return elements;
 };

src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts

@@ -14,7 +14,6 @@ export class BPMNEndEvent extends UMLContainer {
 
   type: UMLElementType = BPMNElementType.BPMNEndEvent;
   bounds: IBoundary = { ...this.bounds, width: 40, height: 40 };
-  name = 'End Event';
 
   constructor(values?: DeepPartial<UMLContainer>) {
     super(values);

src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-component.tsx

@@ -5,7 +5,6 @@ import { BPMNExclusiveGatewayComponent } from './gateways-components/bpmn-exclus
 import { BPMNInclusiveGatewayComponent } from './gateways-components/bpmn-inclusive-gateway-component';
 import { BPMNParallelGatewayComponent } from './gateways-components/bpmn-parallel-gateway-component';
 import { BPMNComplexGatewayComponent } from './gateways-components/bpmn-complex-gateway-component';
-import { BPMNExclusiveEventBasedGatewayComponent } from './gateways-components/bpmn-exclusive-event-based-gateway-component';
 import { BPMNParallelEventBasedGatewayComponent } from './gateways-components/bpmn-parallel-event-based-gateway-component';
 
 export const BPMNGatewayComponent: FunctionComponent<Props> = (props) => {
@@ -21,9 +20,6 @@ export const BPMNGatewayComponent: FunctionComponent<Props> = (props) => {
     case 'exclusive':
       GatewayComponent = BPMNExclusiveGatewayComponent;
       break;
-    case 'exclusive-event-based':
-      GatewayComponent = BPMNExclusiveEventBasedGatewayComponent;
-      break;
     case 'inclusive':
       GatewayComponent = BPMNInclusiveGatewayComponent;
       break;

src/main/packages/bpmn/bpmn-gateway/bpmn-gateway-update.tsx

@@ -64,9 +64,6 @@ class BPMNGatewayUpdateComponent extends Component<Props> {
             <Dropdown.Item value={'exclusive'}>
               {this.props.translate('packages.BPMN.BPMNExclusiveGateway')}
             </Dropdown.Item>
-            <Dropdown.Item value={'exclusive-event-based'}>
-              {this.props.translate('packages.BPMN.BPMNExclusiveEventBasedGateway')}
-            </Dropdown.Item>
             <Dropdown.Item value={'inclusive'}>
               {this.props.translate('packages.BPMN.BPMNInclusiveGateway')}
             </Dropdown.Item>

src/main/packages/bpmn/bpmn-gateway/bpmn-gateway.ts

@@ -13,7 +13,6 @@ export type BPMNGatewayType =
   | 'complex'
   | 'event-based'
   | 'exclusive'
-  | 'exclusive-event-based'
   | 'inclusive'
   | 'parallel'
   | 'parallel-event-based';