Support for subsystems in component diagrams (#291)

Co-authored-by: Alexander Görtzen <[email protected]> Co-authored-by: Matthias Lehner <[email protected]>
ls1intum · Oct 26, 2023 · 1ad5da8 · 1ad5da8
1 parent a872c94
commit 1ad5da8
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 15 deletions.
diff --git a/src/main/i18n/de.json b/src/main/i18n/de.json
@@ -79,6 +79,7 @@
     },
     "ComponentDiagram": {
       "Component": "Komponente",
+      "Subsystem": "Teilsystem",
       "ComponentDependency": "Abhängigkeit",
       "ComponentInterface": "Schnittstelle",
       "ComponentInterfaceProvided": "Bereitgestellte Schnittstelle",

diff --git a/src/main/i18n/en.json b/src/main/i18n/en.json
@@ -79,6 +79,7 @@
     },
     "ComponentDiagram": {
       "Component": "Component",
+      "Subsystem": "Subsystem",
       "ComponentDependency": "Dependency",
       "ComponentInterface": "Interface",
       "ComponentInterfaceProvided": "Provided Interface",

diff --git a/src/main/packages/common/uml-component/uml-component-component.tsx b/src/main/packages/common/uml-component/uml-component-component.tsx
@@ -11,9 +11,6 @@ export const UMLComponentComponent: FunctionComponent<Props> = ({ element, child
       strokeColor={element.strokeColor}
       fillColor={fillColor || element.fillColor}
     />
-    <Text fill={element.textColor} y={'25px'} dominantBaseline="auto">
-      {element.name}
-    </Text>
     <g transform={`translate(${element.bounds.width - 31}, 7)`}>
       <ThemedPath
         d="M 4.8 0 L 24 0 L 24 24 L 4.8 24 L 4.8 19.2 L 0 19.2 L 0 14.4 L 4.8 14.4 L 4.8 9.6 L 0 9.6 L 0 4.8 L 4.8 4.8 Z"
@@ -30,6 +27,16 @@ export const UMLComponentComponent: FunctionComponent<Props> = ({ element, child
         strokeMiterlimit="10"
       />
     </g>
+    <Text fill={element.textColor}>
+      {element.stereotype && (
+        <tspan x="50%" dy={-8} textAnchor="middle" fontSize="85%">
+          {`«${element.stereotype}»`}
+        </tspan>
+      )}
+      <tspan x="50%" dy={element.stereotype ? 18 : 10} textAnchor="middle">
+        {element.name}
+      </tspan>
+    </Text>
     {children}
   </g>
 );

diff --git a/src/main/packages/common/uml-component/uml-component.ts b/src/main/packages/common/uml-component/uml-component.ts
@@ -1,3 +1,9 @@
 import { UMLPackage } from '../uml-package/uml-package';
 
-export abstract class UMLComponent extends UMLPackage {}
+export interface IUMLComponent {
+  stereotype: string;
+}
+
+export abstract class UMLComponent extends UMLPackage implements IUMLComponent {
+  stereotype = 'component';
+}
diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts
@@ -37,6 +37,7 @@ import { UMLPetriNetArcComponent } from './uml-petri-net/uml-petri-net-arc/uml-p
 import { UMLReachabilityGraphArcComponent } from './uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc-component';
 import { UMLReachabilityGraphMarkingComponent } from './uml-reachability-graph/uml-reachability-graph-marking/uml-reachability-graph-marking-component';
 import { UMLComponentComponent } from './common/uml-component/uml-component-component';
+import { UMLComponentSubsystem } from './uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component';
 import { SyntaxTreeTerminalComponent } from './syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
 import { SyntaxTreeNonterminalComponent } from './syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal-component';
 import { SyntaxTreeLinkComponent } from './syntax-tree/syntax-tree-link/syntax-tree-link-component';
@@ -86,6 +87,7 @@ export const Components: {
   [UMLElementType.UseCaseActor]: UMLUseCaseActorComponent,
   [UMLElementType.UseCaseSystem]: UMLUseCaseSystemComponent,
   [UMLElementType.Component]: UMLComponentComponent,
+  [UMLElementType.Subsystem]: UMLComponentSubsystem,
   [UMLElementType.ComponentInterface]: UMLInterfaceComponent,
   [UMLElementType.DeploymentNode]: UMLDeploymentNodeComponent,
   [UMLElementType.DeploymentComponent]: UMLComponentComponent,

diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts
@@ -55,6 +55,7 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT
   [UMLElementType.UseCaseActor]: DefaultPopup,
   [UMLElementType.UseCaseSystem]: DefaultPopup,
   [UMLElementType.Component]: DefaultPopup,
+  [UMLElementType.Subsystem]: DefaultPopup,
   [UMLElementType.ComponentInterface]: DefaultPopup,
   [UMLElementType.DeploymentNode]: UMLDeploymentNodeUpdate,
   [UMLElementType.DeploymentComponent]: DefaultPopup,

diff --git a/src/main/packages/uml-component-diagram/component-preview.ts b/src/main/packages/uml-component-diagram/component-preview.ts
@@ -3,6 +3,7 @@ import { UMLElement } from '../../services/uml-element/uml-element';
 import { ComposePreview } from '../compose-preview';
 import { UMLComponentInterface } from './uml-component-interface/uml-component-interface';
 import { UMLComponentComponent } from './uml-component/uml-component-component';
+import { UMLSubsystem } from './uml-component-subsystem/uml-component-subsystem';
 
 export const composeComponentPreview: ComposePreview = (
   layer: ILayer,
@@ -19,7 +20,16 @@ export const composeComponentPreview: ComposePreview = (
   };
   elements.push(umlComponent);
 
-  // UML Deployment Artifact
+  // UML Subsystem
+  const umlSubsystem = new UMLSubsystem({ name: translate('packages.ComponentDiagram.Subsystem') });
+  umlSubsystem.bounds = {
+    ...umlSubsystem.bounds,
+    width: umlSubsystem.bounds.width,
+    height: umlSubsystem.bounds.height,
+  };
+  elements.push(umlSubsystem);
+
+  // UML Component Interface
   const umlComponentInterface = new UMLComponentInterface({
     name: translate('packages.ComponentDiagram.ComponentInterface'),
   });

diff --git a/src/main/packages/uml-component-diagram/index.ts b/src/main/packages/uml-component-diagram/index.ts
@@ -1,5 +1,6 @@
 export const ComponentElementType = {
   Component: 'Component',
+  Subsystem: 'Subsystem',
   ComponentInterface: 'ComponentInterface',
 } as const;
 

diff --git a/...kages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx b/...kages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem-component.tsx
@@ -0,0 +1,48 @@
+import React, { FunctionComponent } from 'react';
+import { Text } from '../../../components/controls/text/text';
+import { UMLSubsystem } from './uml-component-subsystem';
+import { ThemedPath, ThemedRect } from '../../../components/theme/themedComponents';
+
+export const UMLComponentSubsystem: FunctionComponent<Props> = ({ element, children, fillColor }) => (
+  <g data-cy="uml-subsystem">
+    <ThemedRect
+      width="100%"
+      height="100%"
+      strokeColor={element.strokeColor}
+      fillColor={fillColor || element.fillColor}
+    />
+    <g transform={`translate(${element.bounds.width - 31}, 7)`}>
+      <ThemedPath
+        d="M 4.8 0 L 24 0 L 24 24 L 4.8 24 L 4.8 19.2 L 0 19.2 L 0 14.4 L 4.8 14.4 L 4.8 9.6 L 0 9.6 L 0 4.8 L 4.8 4.8 Z"
+        fillColor={fillColor || element.fillColor}
+        strokeColor={element.strokeColor}
+        strokeWidth="1.2"
+        strokeMiterlimit="10"
+      />
+      <ThemedPath
+        d="M 4.8 4.8 L 9.6 4.8 L 9.6 9.6 L 4.8 9.6 M 4.8 14.4 L 9.6 14.4 L 9.6 19.2 L 4.8 19.2"
+        fillColor="none"
+        strokeColor={element.strokeColor}
+        strokeWidth="1.2"
+        strokeMiterlimit="10"
+      />
+    </g>
+    <Text fill={element.textColor} y={`${25}px`}>
+      {element.stereotype && (
+        <tspan x="50%" dy={-8} textAnchor="middle" fontSize="85%">
+          {`«${element.stereotype}»`}
+        </tspan>
+      )}
+      <tspan x="50%" dy={element.stereotype ? 18 : 10} textAnchor="middle">
+        {element.name}
+      </tspan>
+    </Text>
+    {children}
+  </g>
+);
+
+interface Props {
+  element: UMLSubsystem;
+  fillColor?: string;
+  children?: React.ReactNode;
+}
diff --git a/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts b/src/main/packages/uml-component-diagram/uml-component-subsystem/uml-component-subsystem.ts
@@ -0,0 +1,16 @@
+import { UMLPackage } from '../../common/uml-package/uml-package';
+import { ComponentElementType, ComponentRelationshipType } from '..';
+
+export interface IUMLSubsystem {
+  stereotype: string;
+}
+
+export class UMLSubsystem extends UMLPackage implements IUMLSubsystem {
+  static supportedRelationships = [
+    ComponentRelationshipType.ComponentDependency,
+    ComponentRelationshipType.ComponentInterfaceProvided,
+    ComponentRelationshipType.ComponentInterfaceRequired,
+  ];
+  stereotype = 'subsystem';
+  type = ComponentElementType.Subsystem;
+}
diff --git a/src/main/packages/uml-elements.ts b/src/main/packages/uml-elements.ts
@@ -30,6 +30,7 @@ import { UMLReachabilityGraphMarking } from './uml-reachability-graph/uml-reacha
 import { CommunicationLinkMessage } from './uml-communication-diagram/uml-communication-link/uml-communiction-link-message';
 import { UMLDeploymentComponent } from './uml-deployment-diagram/uml-deployment-component/uml-component';
 import { UMLComponentComponent } from './uml-component-diagram/uml-component/uml-component-component';
+import { UMLSubsystem } from './uml-component-diagram/uml-component-subsystem/uml-component-subsystem';
 import { SyntaxTreeTerminal } from './syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
 import { SyntaxTreeNonterminal } from './syntax-tree/syntax-tree-nonterminal/syntax-tree-nonterminal';
 import { FlowchartTerminal } from './flowchart/flowchart-terminal/flowchart-terminal';
@@ -72,6 +73,7 @@ export const UMLElements = {
   [UMLElementType.UseCaseActor]: UMLUseCaseActor,
   [UMLElementType.UseCaseSystem]: UMLUseCaseSystem,
   [UMLElementType.Component]: UMLComponentComponent,
+  [UMLElementType.Subsystem]: UMLSubsystem,
   [UMLElementType.ComponentInterface]: UMLComponentInterface,
   [UMLElementType.DeploymentNode]: UMLDeploymentNode,
   [UMLElementType.DeploymentComponent]: UMLDeploymentComponent,

diff --git a/...s/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap b/...s/uml-component-diagram/uml-component/__snapshots__/uml-component-component-test.tsx.snap
@@ -14,16 +14,6 @@ exports[`render the uml-component-component 1`] = `
           stroke="black"
           width="100%"
         />
-        <text
-          dominant-baseline="auto"
-          font-weight="bold"
-          pointer-events="none"
-          text-anchor="middle"
-          x="50%"
-          y="25px"
-        >
-          TestComponentComponent
-        </text>
         <g
           transform="translate(169, 7)"
         >
@@ -44,6 +34,30 @@ exports[`render the uml-component-component 1`] = `
             stroke-width="1.2"
           />
         </g>
+        <text
+          dominant-baseline="middle"
+          font-weight="bold"
+          pointer-events="none"
+          text-anchor="middle"
+          x="50%"
+          y="50%"
+        >
+          <tspan
+            dy="-8"
+            font-size="85%"
+            text-anchor="middle"
+            x="50%"
+          >
+            «component»
+          </tspan>
+          <tspan
+            dy="18"
+            text-anchor="middle"
+            x="50%"
+          >
+            TestComponentComponent
+          </tspan>
+        </text>
       </g>
     </svg>
   </div>