Add sequence diagram (#149)

* Add sequence diagram

Co-authored-by: simowaves <45812752+simowaves@users.noreply.github.com>

* fix tent marker fill

* revise destruction placement and lifeline adaption

* refractor

* revise behaviourExecution scaling & refractor

* revise combinedFragment containing components

* cleanup and limit sequence diagram to one interaction per model

* clean code and add lifeline autoAlignment

* cleanup

* cleanup workspace

* Centralize content of seq. diagram to respective folders

* resolve behaviourExecSpec deletion issue and edgeCreationFeedback reset issue

* Allow to use disabled property palette item

Co-authored-by: simowaves <45812752+simowaves@users.noreply.github.com>

* Introduce temp. workaround to send the model even after nothing has changed in the modelserver to prevent invalid states in the client

* Register OverrideActionHandlerRegistry as singleton

* Update README

---------

Co-authored-by: simowaves <45812752+simowaves@users.noreply.github.com>
Co-authored-by: Simone Andreetto <simone.andreetto@gmail.com>

.all-contributorsrc

@@ -199,6 +199,16 @@
         "code",
         "diagram"
       ]
+    },
+    {
+      "login": "simowaves",
+      "name": "Simone Andreetto",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45812752?v=4",
+      "profile": "https://github.com/simowaves",
+      "contributions": [
+        "code",
+        "diagram"
+      ]
     }
   ],
   "types": {

README.md

@@ -115,6 +115,16 @@ Coming Soon!
 
 </details>
 
+<!-- =========================== -->
+<details>
+<summary><strong>Sequence Diagram</strong></summary>
+
+Coming Soon!
+
+<em>Initial implementation provided by: [@simonwaves](https://github.com/simowaves)</em>
+
+</details>
+
 <!-- =========================== -->
 <details>
 <summary><strong>State Machine Diagram</strong></summary>
@@ -147,9 +157,9 @@ Coming Soon!
 
 ### Behavior Diagrams
 
-| Use Case | Activity | State Machine | Sequence                 | Communication | Interaction | Timing |
-| -------- | -------- | ------------- | ------------------------ | ------------- | ----------- | ------ |
-| Initial  | -        | Initial       | Contribution in progress | Initial       | -           | -      |
+| Use Case | Activity | State Machine | Sequence | Communication | Interaction | Timing |
+| -------- | -------- | ------------- | -------- | ------------- | ----------- | ------ |
+| Initial  | -        | Initial       | Initial  | Initial       | -           | -      |
 
 ### Extra
 
@@ -209,9 +219,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/MZeisler"><img src="https://avatars.githubusercontent.com/u/45333967?v=4?s=100" width="100px;" alt="MZeisler"/><br /><sub><b>MZeisler</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=MZeisler" title="Code">💻</a> <a href="#diagram-MZeisler" title="Worked on a diagram">↔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/H0oKd"><img src="https://avatars.githubusercontent.com/u/127870934?v=4?s=100" width="100px;" alt="Manuel Hude"/><br /><sub><b>Manuel Hude</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=H0oKd" title="Code">💻</a> <a href="#diagram-H0oKd" title="Worked on a diagram">↔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sschwantler"><img src="https://avatars.githubusercontent.com/u/52577060?v=4?s=100" width="100px;" alt="Simon Schwantler"/><br /><sub><b>Simon Schwantler</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=sschwantler" title="Code">💻</a> <a href="#diagram-sschwantler" title="Worked on a diagram">↔</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mrstexx"><img src="https://avatars.githubusercontent.com/u/18032955?v=4?s=100" width="100px;" alt="Stefan Miljevic"/><br /><sub><b>Stefan Miljevic</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=mrstexx" title="Code">💻</a> <a href="#diagram-mrstexx" title="Worked on a diagram">↔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/simowaves"><img src="https://avatars.githubusercontent.com/u/45812752?v=4?s=100" width="100px;" alt="Simone Andreetto"/><br /><sub><b>Simone Andreetto</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=simowaves" title="Code">💻</a> <a href="#diagram-simowaves" title="Worked on a diagram">↔</a></td>
     </tr>
     <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mrstexx"><img src="https://avatars.githubusercontent.com/u/18032955?v=4?s=100" width="100px;" alt="Stefan Miljevic"/><br /><sub><b>Stefan Miljevic</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=mrstexx" title="Code">💻</a> <a href="#diagram-mrstexx" title="Worked on a diagram">↔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/vladfreeze"><img src="https://avatars.githubusercontent.com/u/58890859?v=4?s=100" width="100px;" alt="Vlad Vifor"/><br /><sub><b>Vlad Vifor</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=vladfreeze" title="Code">💻</a> <a href="#diagram-vladfreeze" title="Worked on a diagram">↔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://model-engineering.info/"><img src="https://avatars.githubusercontent.com/u/60790671?v=4?s=100" width="100px;" alt="borkdominik"/><br /><sub><b>borkdominik</b></sub></a><br /><a href="#projectManagement-borkdominik" title="Project Management">📆</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/dellis66"><img src="https://avatars.githubusercontent.com/u/128014459?v=4?s=100" width="100px;" alt="dellis66"/><br /><sub><b>dellis66</b></sub></a><br /><a href="https://github.com/borkdominik/bigUML/commits?author=dellis66" title="Code">💻</a> <a href="#diagram-dellis66" title="Worked on a diagram">↔</a></td>

client/packages/uml-common/src/action-protocol/property-palette.model.ts

@@ -19,6 +19,7 @@ export interface ElementProperty {
     elementId: string;
     propertyId: string;
     type: 'TEXT' | 'BOOL' | 'CHOICE' | 'REFERENCE';
+    disabled: boolean;
 }
 
 export interface ElementTextProperty extends ElementProperty {

client/packages/uml-common/src/language/language.ts

@@ -33,6 +33,7 @@ export namespace UmlDiagramTypeUtil {
         UmlDiagramType.DEPLOYMENT,
         UmlDiagramType.INFORMATION_FLOW,
         UmlDiagramType.PACKAGE,
+        UmlDiagramType.SEQUENCE,
         UmlDiagramType.STATE_MACHINE,
         UmlDiagramType.USE_CASE
     ];

client/packages/uml-components/src/property-palette/property-palette.component.ts

@@ -146,7 +146,7 @@ export class PropertyPalette extends BigElement {
 
         return html`<div class="grid-label">${item.label}</div>
             <div class="grid-value grid-flex">
-                <vscode-text-field .value="${item.text}" @change="${onChange}"></vscode-text-field>
+                <vscode-text-field .value="${item.text}" @change="${onChange}" ?disabled="${item.disabled}"></vscode-text-field>
             </div>`;
     }
 
@@ -158,7 +158,12 @@ export class PropertyPalette extends BigElement {
 
         return html`<div class="grid-label">${item.label}</div>
             <div class="grid-value">
-                <vscode-checkbox class="bool-item" ?checked="${item.value}" @change="${onChange}"></vscode-checkbox>
+                <vscode-checkbox
+                    class="bool-item"
+                    ?checked="${item.value}"
+                    @change="${onChange}"
+                    ?disabled="${item.disabled}"
+                ></vscode-checkbox>
             </div>`;
     }
 
@@ -170,7 +175,7 @@ export class PropertyPalette extends BigElement {
 
         return html`<div class="grid-label">${item.label}</div>
             <div class="grid-value grid-flex">
-                <vscode-dropdown .value="${item.choice}" @change="${onChange}">
+                <vscode-dropdown .value="${item.choice}" @change="${onChange}" ?disabled="${item.disabled}">
                     <div slot="selected-value">${item.choices.find(c => c.value === item.choice)?.label}</div>
                     ${item.choices.map(
                         choice =>

client/packages/uml-glsp/css/base/marker.css

@@ -37,3 +37,11 @@
 .marker-diamond-empty-end {
     marker-end: var(--svg-def-marker-diamond-empty);
 }
+
+.marker-circle-start {
+    marker-start: url('#marker-circle');
+}
+
+.marker-circle-end {
+    marker-end: url('#marker-circle');
+}

client/packages/uml-glsp/css/colors/sequence/diagram.css

@@ -0,0 +1,28 @@
+/* SEQUENCE DIAGRAM*/
+.umlLifeline {
+    background-image: var(--uml-icon-lifeline);
+}
+
+.umlInteraction {
+    background-image: var(--uml-icon-interaction);
+}
+
+.umlMessage {
+    background-image: var(--uml-icon-message);
+}
+
+.umlMessageAsync {
+    background-image: var(--uml-icon-message-async);
+}
+
+.umlMessageSync {
+    background-image: var(--uml-icon-message-sync);
+}
+
+.umlassociation {
+    background-image: var(--uml-icon-association);
+}
+
+.umlproperty {
+    background-image: var(--uml-icon-property);
+}

client/packages/uml-glsp/css/colors/sequence/icons-dark.css

@@ -0,0 +1,8 @@
+:root {
+    --uml-icon-lifeline: url(../../../../../resources/icons/dark/sequence/Lifeline.gif);
+    --uml-icon-interaction: url(../../../../../resources/icons/dark/sequence/Interaction.gif);
+    --uml-icon-message: url(../../../../../resources/icons/dark/sequence/Message.gif);
+    --uml-icon-message-async: url(../../../../../resources/icons/dark/sequence/Message_asynchCall.gif);
+    --uml-icon-message-sync: url(../../../../../resources/icons/dark/sequence/Message_synchCall.gif);
+
+}

client/packages/uml-glsp/css/colors/sequence/icons-light.css

@@ -0,0 +1,7 @@
+:root {
+    --uml-icon-interaction: url(../../../../../resources/icons/dark/sequence/Interaction.gif);
+    --uml-icon-message: url(../../../../../resources/icons/dark/sequence/Message.gif);
+    --uml-icon-lifeline: url(../../../../../resources/icons/dark/sequence/Lifeline.gif);
+    --uml-icon-message-async: url(../../../../../resources/icons/dark/sequence/Message_asynchCall.gif);
+    --uml-icon-message-sync: url(../../../../../resources/icons/dark/sequence/Message_synchCall.gif);
+}

client/packages/uml-glsp/css/diagram/sequence/sequence-diagram.css

@@ -0,0 +1,65 @@
+/* SEQUENCE DIAGRAM */
+
+.abstract {
+    font-style: italic;
+}
+
+/* .sequence__Interaction rect {
+    fill-opacity: 0;
+} */
+
+.uml-node .sequence__Lifeline line {
+    stroke-dasharray: 8;
+}
+
+.uml-node .sequence__InteractionOperand line {
+    stroke-dasharray: 16;
+}
+
+.uml-node .sequence__DestructionOccurrenceSpecification line {
+    stroke-dasharray: none;
+    stroke-width: 2;
+}
+
+.uml-node .sequence__CombinedFragment {
+    fill: rgba(8, 255, 177, 0.5);
+}
+
+.uml-node .sequence__BehaviorExecutionSpecification {
+    fill: var(--uml-border);
+}
+
+.uml-node .sequence__InteractionUse {
+    fill: rgb(249, 254, 153);
+}
+
+.uml-node .sequence__InteractionOperand rect {
+    stroke-width: 1;
+    /* stroke-dasharray: 6; */
+    border-right: 0;
+    fill: rgba(8, 255, 177, 0.5);
+}
+
+.uml-node .sequence__MessageAnchor {
+    fill: var(--uml-border);
+}
+.uml-port {
+    stroke-width: 3;
+    stroke: transparent;
+    fill: #d4d4d49b;
+}
+
+.uml-port:hover {
+    stroke-width: 3;
+    stroke: #17fc2685;
+    fill: #00c40dcb;
+}
+
+.clickbound {
+    fill: #00c40dcb;
+    opacity: 0;
+}
+
+.uml-edge-dashed {
+    stroke-dasharray: 15 10;
+}

client/packages/uml-glsp/css/extensions/shift-tool.css

@@ -0,0 +1,8 @@
+line.shift-tool {
+    stroke: LightSlateGrey;
+}
+line.shift-tool-direction {
+    stroke: LightSlateGrey;
+    marker-end: url('#marker-triangle-shift-tool');
+}
+/* styling of marker is in view.tsx file */

client/packages/uml-glsp/css/style.css

@@ -18,5 +18,7 @@
 @import 'extensions/uml-tool-palette.css';
 @import 'extensions/uml-editor-panel.css';
 @import 'extensions/uml-property-palette.css';
+@import 'extensions/shift-tool.css';
 
 @import 'diagram/package/style.css';
+@import 'diagram//sequence/sequence-diagram.css';

client/packages/uml-glsp/src/di.config.ts

@@ -56,24 +56,25 @@ export default function createContainer(widgetId: string): Container {
     const coreDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
         const context = { bind, unbind, isBound, rebind };
 
+        // Common
         rebind(TYPES.ILogger).to(FixedLogger).inSingletonScope();
         rebind(TYPES.LogLevel).toConstantValue(LogLevel.info);
         rebind(GLSPActionDispatcher).to(UMLActionDispatcher).inSingletonScope();
-
         bind(TYPES.ISnapper).to(GridSnapper);
-        rebind(TYPES.ICopyPasteHandler).to(CustomCopyPasteHandler);
-
-        rebind(EditLabelUI).to(EditLabelUIAutocomplete);
 
+        // Common - Features
+        rebind(TYPES.ICopyPasteHandler).to(CustomCopyPasteHandler);
         bind(LastContainableElementTracker).toSelf().inSingletonScope();
         bind(TYPES.MouseListener).toService(LastContainableElementTracker);
+
+        // UI
+        rebind(EditLabelUI).to(EditLabelUIAutocomplete);
         // bind(TYPES.IVNodePostprocessor).to(IconLabelCompartmentSelectionFeedback);
         bind(SVGIdCreatorService).toSelf().inSingletonScope();
 
+        // Configuration
         configureLayout({ bind, isBound }, UmlFreeFormLayouter.KIND, UmlFreeFormLayouter);
-
         configureDefaultModelElements(context);
-
         configureModelElement(context, DefaultTypes.GRAPH, GLSPGraph, UmlGraphProjectionView);
 
         configureViewerOptions(context, {

client/packages/uml-glsp/src/di.types.ts

@@ -10,5 +10,6 @@ import { TYPES } from '@eclipse-glsp/client';
 
 export const UML_TYPES = {
     ...TYPES,
+    IShiftBehavior: Symbol('IShiftBehavior'),
     IOnceModelInitialized: Symbol('IOnceModelInitialized')
 };

client/packages/uml-glsp/src/features/copy-paste/index.ts

@@ -1,17 +1,10 @@
-/********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+/*********************************************************************************
+ * Copyright (c) 2023 borkdominik and others.
  *
  * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
+ * terms of the MIT License which is available at https://opensource.org/licenses/MIT.
  *
- * This Source Code may also be made available under the following Secondary
- * Licenses when the conditions for such availability set forth in the Eclipse
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
- * with the GNU Classpath Exception which is available at
- * https://www.gnu.org/software/classpath/license.html.
- *
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
- ********************************************************************************/
+ * SPDX-License-Identifier: MIT
+ *********************************************************************************/
 
 export * from './copy-paste';

client/packages/uml-glsp/src/features/tool-feedback/di.config.ts

@@ -27,6 +27,18 @@ import {
 import { DrawMarqueeCommand, RemoveMarqueeCommand } from '@eclipse-glsp/client/lib/features/tool-feedback/marquee-tool-feedback';
 import { FeedbackEdgeEndView, SResizeHandleView } from '@eclipse-glsp/client/lib/features/tool-feedback/view';
 import { ContainerModule } from 'inversify';
+import {
+    SDDrawFeedbackPositionedEdgeCommand,
+    SDRemoveFeedbackPositionedEdgeCommand
+} from '../../uml/diagram/sequence/features/tool-feedback/creation-tool-feedback.extension';
+import {
+    SDDrawHorizontalShiftCommand,
+    SDRemoveHorizontalShiftCommand
+} from '../../uml/diagram/sequence/features/tool-feedback/horizontal-shift-tool-feedback';
+import {
+    SDDrawVerticalShiftCommand,
+    SDRemoveVerticalShiftCommand
+} from '../../uml/diagram/sequence/features/tool-feedback/vertical-shift-tool-feedback';
 import { UmlDrawFeedbackEdgeSourceCommand } from './edge/edge-feedback.command';
 import { UmlFeedbackActionDispatcher } from './feedback-action-dispatcher';
 
@@ -62,4 +74,12 @@ export const umlToolFeedbackModule = new ContainerModule((bind, _unbind, isBound
     bind(LocationPostprocessor).toSelf().inSingletonScope();
     bind(TYPES.IVNodePostprocessor).toService(LocationPostprocessor);
     bind(TYPES.HiddenVNodePostprocessor).toService(LocationPostprocessor);
+
+    configureCommand({ bind, isBound }, SDDrawFeedbackPositionedEdgeCommand);
+    configureCommand({ bind, isBound }, SDRemoveFeedbackPositionedEdgeCommand);
+
+    configureCommand({ bind, isBound }, SDDrawVerticalShiftCommand);
+    configureCommand({ bind, isBound }, SDRemoveVerticalShiftCommand);
+    configureCommand({ bind, isBound }, SDDrawHorizontalShiftCommand);
+    configureCommand({ bind, isBound }, SDRemoveHorizontalShiftCommand);
 });