ls1intum / apollon Goto Github PK

Assumption: Editor is already destroyed when we try to emit an action -> maybe redrawing mechanism in Artemis is causing that. Fix: when comparing old model with current model in debounce, check if the editor still exists. Interrupt check and do safe cancel (no error needs to be emitted)

To Reproduce

Couldn't reproduce, assumption: connected to team exercises

User wants to make method abstract

Is your feature request related to a problem?

The user can't differenciate between implemented and abstract methods.

Describe the solution you'd like

It's possible to define abstract methods (possibly with a checkbox?)

Describe alternatives you've considered

There is no real alternative in Apollon

Problem with multiplicities in Firefox

Firefox version: 60.0.2

Multiplicities are shown on the association and therefore hard to read

Timestamp in "Load Diagram" not displayed correctly for long diagram names

Describe the bug

Timestamp in "Load Diagram" not displayed correctly for long diagram names

To Reproduce

Create new diagram with long name
Click on 'File' - 'Load'

Screenshots

Environment

 - OS: macOS 10.15.5 (19F101)
 - Browser Chrome
 - Version 84.0.4147.89 (Official Build) (64-bit)

[very minor] [UI] Reduce the Actor's vertical Scale by 1 'Box'

Describe the bug

When adding an actor to an usecase diagramm, the Alignment of the vertical contactpoint is of by 1/2 'Box', due to the standard height of the actor being an uneven number..

To Reproduce

Add an Actor to an UseCase Diagramm
Connect the Actor to another Object
see screenshot above

Expected behavior

no crooked arrows

Screenshots

Environment

 - OS: Windows
 - Browser Chrome
 - Version latest included in Artemis

Feature Request / Allow coloring of diagram attributes/methods

I have a feature request for Apollon (related ArTEMiS ls1intum/Artemis#539):

Background

For the interactive instructions of the programming exercises I want to switch from plantUML to the more user friendly Apollon.
The instructions are updated with the build result, indicating in the UML which implementations are successful, are false, etc.:

planUML is using markup, so I set up a placeholder for the test color:

class Context {
-color:testsColor(testAttributes[Context])dates: List
+color:testsColor(testMethods[Context])sort()
}

The placeholder is then replaced on parsing with the appropriate color (red if failed, etc.).

Feature Request

To switch to Apollon I would need the following functionality:

I need to be able to address an attribute/method of an element by an id that I can define (that is the name of the test case for me). Multiple elements could have the same id.
I need to be able to set the color (green, red, grey) of an attribute/method of an element

Ideally for both I would not have to go through the element, but could just query the diagram:
E.g.
attributes = diagram.get('testAttributes[Context]');
diagram.setColor(attributes, 'red')

Import and Export of Diagram Representation

Is your feature request related to a problem?

Right now its not possible to share diagrams with other users. A simple Import + Export could solve this problem.

Describe the solution you'd like

Export:
User can click a button to export diagram. Once clicked a .json file is downloaded which represents the current depicted UML diagram.

Import:
A user can click a button to import a diagram. Once clicked a file uploader popup opens in which the user can select a .json file to be imported. When an exported diagram .json file is selected, the representation of the diagram must be the same!

Describe alternatives you've considered

Include a server for Apollon and make it possible to share diagrams with other users over the server

More flexible layout

Is your feature request related to a problem?

When creating a diagram, the relationship between UML elements are sometimes not layouted in a good looking way

Describe the solution you'd like

Make layout of relationships between UML elements more flexible (not drawn automatically). Use layout from current algorithm as default position for elements. Add possibility to add waypoints, similar to screenshot.

Saving diagram as .png doesn't work at all

Describe the bug

After saving a diagram (in my case - activity diagram) as .png, it doesn't save about 30% of the diagram and other 70% are depicted in the wrong way.

To Reproduce

Open Appolon and create activity diagram
File -> Export -> As PNG -> Save
Open saved .png.

Expected behavior

It's expected that the diagram in .png is the same as in the tab of the browser.

Screenshots

After step 1.

After step 2.

After step 3.

Environment

 - OS: Win10
 - Browser Chrome
 - Version 83

Stereotypes vanish if arrow is to small

To Reproduce

Draw an include relationship
move one usecase towards the other until the stereotype vanishes

Expected behavior

It is stated somewhere what kind of relation this is. If you are provided with a non editable diagram (e.g. in an assessing situation) you can't move the usecase in order to see the stereotype.

Screenshots

Working:

Not anymore:

Environment

 - OS: Windows 10 Pro
 - Browser: Chrome v81.0.4044.138

[Error] Exporting Image as .png throws error if any text contains "<"

Describe the bug

When a text area contains a "<", the "File" tab stops working. (Also an error is thrown in the background)

To Reproduce

Open Apollon
add Class (this works with all boxes).
add method: "<" (this works in all text areas).
Apollon "File" stops working.
(
when using chrome:
press ctrl + shift + i
go to "sources"
rightclick on the generated image and select "open in new tab"
open console for more information
)

Expected behavior

The image saves normally and displays "<" properly.

Screenshots

Environment

 - OS: [Windows]
 - Browser [chromei]
 - Version [84]

Additional context

Output in Web Console

vendors.431d7ea33266092bf838.js:69 Uncaught Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: [img]returnValue: truesrcElement: nulltarget: nulltimeStamp: 625033.1900000019type: "error"__proto__: Event (anonymous) @ vendors.431d7ea33266092bf838.js:69 setTimeout (async) r @ vendors.431d7ea33266092bf838.js:69 t.error @ vendors.431d7ea33266092bf838.js:85 t._error @ vendors.431d7ea33266092bf838.js:85 t.error @ vendors.431d7ea33266092bf838.js:85 t.notifyError @ vendors.431d7ea33266092bf838.js:111 t._error @ vendors.431d7ea33266092bf838.js:274 t.error @ vendors.431d7ea33266092bf838.js:85 e.observe @ vendors.431d7ea33266092bf838.js:37 t.dispatch @ vendors.431d7ea33266092bf838.js:243 t._execute @ vendors.431d7ea33266092bf838.js:213 t.execute @ vendors.431d7ea33266092bf838.js:327 t.flush @ vendors.431d7ea33266092bf838.js:63 t.schedule @ vendors.431d7ea33266092bf838.js:327 e.schedule @ vendors.431d7ea33266092bf838.js:278 t.schedule @ vendors.431d7ea33266092bf838.js:63 t.scheduleMessage @ vendors.431d7ea33266092bf838.js:243 t._error @ vendors.431d7ea33266092bf838.js:243 t.error @ vendors.431d7ea33266092bf838.js:85 t.notifyError @ vendors.431d7ea33266092bf838.js:111 t._error @ vendors.431d7ea33266092bf838.js:274 t.error @ vendors.431d7ea33266092bf838.js:85 t.notifyError @ vendors.431d7ea33266092bf838.js:111 t._error @ vendors.431d7ea33266092bf838.js:274 t.error @ vendors.431d7ea33266092bf838.js:85 t.notifyError @ vendors.431d7ea33266092bf838.js:111 t._error @ vendors.431d7ea33266092bf838.js:274 t.error @ vendors.431d7ea33266092bf838.js:85 (anonymous) @ vendors.431d7ea33266092bf838.js:87 Promise.then (async) t @ vendors.431d7ea33266092bf838.js:87 e._trySubscribe @ vendors.431d7ea33266092bf838.js:39 e.subscribe @ vendors.431d7ea33266092bf838.js:39 o @ vendors.431d7ea33266092bf838.js:327 t._innerSub @ vendors.431d7ea33266092bf838.js:264 t._tryNext @ vendors.431d7ea33266092bf838.js:264 t._next @ vendors.431d7ea33266092bf838.js:264 t.next @ vendors.431d7ea33266092bf838.js:85 t._next @ vendors.431d7ea33266092bf838.js:37 t.next @ vendors.431d7ea33266092bf838.js:85 t._next @ vendors.431d7ea33266092bf838.js:37 t.next @ vendors.431d7ea33266092bf838.js:85 t._next @ vendors.431d7ea33266092bf838.js:161 t.next @ vendors.431d7ea33266092bf838.js:85 e.observe @ vendors.431d7ea33266092bf838.js:37 t.dispatch @ vendors.431d7ea33266092bf838.js:243 t._execute @ vendors.431d7ea33266092bf838.js:213 t.execute @ vendors.431d7ea33266092bf838.js:327 t.flush @ vendors.431d7ea33266092bf838.js:63 t.schedule @ vendors.431d7ea33266092bf838.js:327 e.schedule @ vendors.431d7ea33266092bf838.js:278 t.schedule @ vendors.431d7ea33266092bf838.js:63 t.scheduleMessage @ vendors.431d7ea33266092bf838.js:243 t._next @ vendors.431d7ea33266092bf838.js:243 t.next @ vendors.431d7ea33266092bf838.js:85 t.next @ vendors.431d7ea33266092bf838.js:105 t.next @ vendors.431d7ea33266092bf838.js:105 (anonymous) @ vendors.431d7ea33266092bf838.js:116 (anonymous) @ vendors.431d7ea33266092bf838.js:53 t.exportDiagram @ main.3072832468657050d596.js:1 onClick @ main.3072832468657050d596.js:1 (anonymous) @ vendors.431d7ea33266092bf838.js:294 (anonymous) @ vendors.431d7ea33266092bf838.js:294 c @ vendors.431d7ea33266092bf838.js:294 s @ vendors.431d7ea33266092bf838.js:323 p @ vendors.431d7ea33266092bf838.js:323 (anonymous) @ vendors.431d7ea33266092bf838.js:323 y @ vendors.431d7ea33266092bf838.js:323 ot @ vendors.431d7ea33266092bf838.js:323 it @ vendors.431d7ea33266092bf838.js:323 st @ vendors.431d7ea33266092bf838.js:323 pt @ vendors.431d7ea33266092bf838.js:323 N @ vendors.431d7ea33266092bf838.js:323 F @ vendors.431d7ea33266092bf838.js:323 $t @ vendors.431d7ea33266092bf838.js:323 Xt @ vendors.431d7ea33266092bf838.js:323 t.unstable_runWithPriority @ vendors.431d7ea33266092bf838.js:11 zi @ vendors.431d7ea33266092bf838.js:323 A @ vendors.431d7ea33266092bf838.js:323 Jt @ vendors.431d7ea33266092bf838.js:323 Show 49 more frames [apollon.ase.in.tum.de-1595765286813.log](https://github.com/ls1intum/Apollon/files/4977546/apollon.ase.in.tum.de-1595765286813.log)

Unsaved changes not recognised when dismissing popover

Current behaviour

If a popover contains unsaved changes, like a new attribute or method for UML class elements, and the user dismisses the popover by clicking anywhere outside the popover, the changes are not saved.

Expected behaviour

Save the changes on dismissing the popover.

Environment

Apollon 2.0.0-rc.4

[Bug] in all Apollon Diagram types Box-Snapping doen't behave as expected

Describe the bug

The "Snapping Feature" of all Diagram-Boxes is bugged. They don't snap onto the background grid. It is sometimes impossible to align multiple boxes on the same grid-line, because there often is a misalignment by ~1-5 pixels. This is certainly a bug and it doesn't look right.
This Problem affects the Firefox Browser, the Chrome Brower and probably other Browsers as well.
This Problem affects Artemis-Diagrams.

To Reproduce

Open Apollon.
Put multiple Boxes on the grid next to each other, without using copy & paste.
Try to align them on a vertical or horizontal gridline (Background).
Some or all of them will be not aligned on the gridline. Their x/y values will differ by 1- pixels. It will be impossible to align them properly, because the boxes jump around 10 pixels when moving.

Expected behavior

When placing the boxes on the board, they should snap to the little boxes in the background.

Screenshots

See Screenshots below.

Environment

 - OS: Windows
 - Browser: Firefox
 - Version 78.0.2 (64-bit)

 - OS: Windows
 - Browser: Chrome
 - Version 84.0.4147.89 (Offizieller Build) (64-Bit)

Additional context

Output in Web Console

  [REPLACE THIS WITH YOUR INFORMATION]

![Boxes_snapping](https://user-images.githubusercontent.com/9354898/88457186-a8219700-ce84-11ea-8b62-3396cbb62745.PNG) ![Boxes_snapping_edit](https://user-images.githubusercontent.com/9354898/88457188-abb51e00-ce84-11ea-9eaf-d9767e1c7333.png)

Storing and Loading of UML Diagrams in Browser storage

Is your feature request related to a problem?

Currently only the current diagram is saved in browser storage, but if I want to load former created UML diagrams, there's no possibility

Describe the solution you'd like

The user should have the possibility to store a diagram by clicking a save button. It then lives in the local browser storage until that is cleared or the user deletes a diagram from the history. There should also be a loading functionality, so that the user can select which former created diagram he/she wants to load.

Describe alternatives you've considered

Adding a server to Apollon which stores the UML diagrams in a database

No straight lines on certain component sizes

Describe the bug

Not able to create a straight line with certain component sizes.

To Reproduce

Create a component
Resize this component to match a hight of 5 small grid boxes and therefore one big box
Add a interface an connect it with the component
Try to drag it to a straight line

Expected behavior

Straight line.

Screenshots

Additional context

This might actually be the issue of #100
(see second screenshot). This always happens when a resizable UML element has an odd hight and the other one an even height. (Same v.v. and regarding the width).

Clipboard item diagram type not checked before pasting

Describe the bug

When copying items via the clipboard and pasting in to a diagram, the type of the item is not checked before inserting it into the document. It is thus possible to paste, for example, UMLUseCaseActors into class diagrams, or UMLComponents into activity diagrams, etc.

To Reproduce

Create a diagram of any type.
Copy one of the elements of the diagram to the clipboard.
Create a new diagram of another type.
Paste the illegal diagram element into the new diagram.

Expected behavior

Diagram elements of other types are not pasted.

Screenshots

Environment

 - OS: macOS 10.15 Catalina
 - Browser Chrome 84.0.4147.89

[Feature]: Enable resize on each corner of an element

Right now, resize is only available in the bottom right corner of an element. This can be frustrating with resizing packages. Therefore enable resize handlers on each corner of an element.

Cannot delete multiple components using keyboard-only input

Describe the bug

When trying to delete multiple component using keyboard-only input (DELETE/BACKSPACE key), it only deletes the currently selected component. When it is deleted, the previous component looks like it is in focus but cannot be deleted using DELETE/BACKSPACE.

To Reproduce

Tested within communication diagram, should be the same across all diagrams

Add component (e.g. class)
Duplicate component (I'm using CMD+C and CMD+V
Delete duplicate (I'm using DELETE/BACKSPACE)
Try to delete original (again using DELETE/BACKSPACE)

although the original component is highlighted after the duplicate has been deleted, it cannot be deleted using the keyboard. I have to click the component before I can delete it. I assume, this is due to incorrect focus / focus not being updated after deletion.

Expected behavior

When hitting DELETE/BACKSPACE multiple times, components should be deleted one after one. The order might be the order in which they were in focus last.

Screenshots

Environment

 - OS: macOS 10.15.5 (19F101)
 - Browser Chrome
 - Version 84.0.4147.89 (Official Build) (64-bit)

Cannot read property 'element' of undefined

Describe the bug

When connecting elements this error sometimes occurs. It happens on pointer up (when letting connection go on target)

Could not reproduce more information: https://sentry.io/organizations/ls1intum/issues/1619864501/?environment=prod&project=1440029&query=is%3Aunresolved&sort=freq&statsPeriod=14d

happend for the very first time on 19.04.2020 - Artemis 4.0.0

Environment

 - OS: windows
 - Browser chrome
 - Version [e.g. 22]

Additional context

Output in Web Console

  [REPLACE THIS WITH YOUR INFORMATION]

Activity Diagrams Fork & Join Nodes

Describe the bug

It is not possible to rescale the fork and join nodes in activity diagrams.

To Reproduce

Create an Activity Diagram in Apollon
Add a join/fork node
try to resize it

Expected behavior

Length of join/fork node is changed

Screenshots

Environment

 - OS: macOs 10.15.5
 - Browser latest Safari Version

OS: Win10
Browser : Chrome
Version  83.0.4103.116 (Official Build) (64-bit)

Copy and paste Apollon UML Diagrams in Multiple Formats to clipboard

Is your feature request related to a problem?

Currently its not possible to copy and paste a diagram from one application to another e.g. one browser window to another.

Describe the solution you'd like

"Copy" should copy a diagram representation in different formats to the clipboard so that it can be pasted to any application.
Supported formats:

Apollon diagram representation
SVG + png
Microsoft Power Point Vector Graphic (optional)
Apple Keynote Vector Graphic (optional)

can't increase the height of "condition" node in activity diagram

Describe the bug

I can increase only the length of the "condition" node. But i also would like to increase the height of it.

To Reproduce

Create new activity diagram
Add "Condition" node
Try to increase its height.

Expected behavior

After dragging up/down, it's expected that the height of this node will also change.

Screenshots

After step 3.
https://gyazo.com/32138cba84e761b1bd504b86ad2d7cf9

Environment

 - OS: Win10
 - Browser Chrome
 - Version 83

Wrong positions of labels/multiplicities

Describe the bug

If two nodes are positioned under each other, labels/multiplicities of connectors between the nodes overlap with the connector making them difficult to read.

To Reproduce

See screenshots.

Expected behavior

Display label beside the connector, not on top of it.

Screenshots

Use case diagram:

Petri net:

[Feature]: Ability to include Apollon in other systems via LTI

Ability to include Apollon via LTI (Learning Tools Interoperability) in other systems

Methods and Attributes not added when pressing enter

Caused by cdb97e1#r34443788.

This was one issue I had this morning with the L13E03: Adding new methods and attributes to a UML Class does not work when pressing enter.

Browser: Safari and Chrome on macOS Catalina and Mojave.

Stereotype brackets shown on empty field in deployment diagram node

Describe the bug

It's not possible to remove a sterotype from a node within a deployment diagram by leaving the input field empty.

To Reproduce

Create a node within a deployment diagram
Empty the stereotype input field
Above the name it still states "<<>>"

Expected behavior

"<<>>" is not shown when the field is empty

Screenshots

Environment

 - OS: Windows 10 Pro
 - Browser: Chrome v83.0.4103.97

Dragging connections results in wrong connection

Describe the bug

When dragging one of the blue connection corners to that of another element, the resulting connection is not between those two connection corners but instead between two seemingly random ones.

To Reproduce

Create two elements (e.g. class)
Start dragging from one of the blue connection corners
Let go at another blue connection corner
Often times, the resulting connection is different than expected

Expected behavior

The connection to consistently match the one provided when dragging.

Screenshots

Environment

 - OS: elementary OS 5.1.4 Hera, Built on Ubuntu 18.04.4 LTS, Linux 4.15.0-99-generic
 - Browser Firefox 75.0

Output in Web Console

none

It is possible to select invalid relation types for some diagram elements

Describe the bug

Deployment diagram: It is possible to select Deployment-Association for an interface. In fact it's the default for that diagram so users who do not change that selected the wrong association by default. This is not desired, it should be impossible for users to select invalid relationship types. As a side effect it also causes a weird visual representation

To Reproduce

Create a Deployment diagram
Draw a connection between an interface and another element
Deployment Association is the default relationship type, which is wrong

Expected behavior

Select one correct interface type: Provided Interface or Required Interface

Screenshots

Environment

 - OS: [e.g. iOS]
 - Browser [e.g. chrome, safari]
 - Version [e.g. 22]

Additional context

Output in Web Console

  [REPLACE THIS WITH YOUR INFORMATION]

[Feature]: Allow custom position for ports

It should be possible to override the default position of ports (blue half circles allowing to create relationships). Right now, the default is the middle of each edge of the bounding box.

[UI] Minor UI Issues

I hope you don't mind me reporting tiny nitpicks like this. :-)

When trying out Apollon, I notices the following minor UI issues:

The content of the "Diagram Type" Dropdown goes past its boundary.
I would recommend extending the sidebar or using ... to indicate overflowing content.
Image for "Schnittstelle" overlays "Komponente"
"Readonly" checkbox seems very close to the Mode Dropdown Menu.
Also, would write read-only

Best Regards,
Jannis

Support max count in score feature of SGI in Apollon

Is your feature request related to a problem?

Instructors have the option in Artemis to add a max number of how often the score of a grading instruction should be counted in the total score.
The property is called usageCount in Artemis.
In order to correctly calculate the total score in respect of this property, we must reference the instruction in the feedback on which the instruction was applied.
This was done for text and file upload exercises as the feedback is created in Artemis but as for modelling exercises the feedback is created in Apollon so the reference must be created in Apollon (on drop of an instruction in Apollon's assessment editor) in order to support this feature.

Additional context

For more context please review updateFeedbackWithStructuredGradingInstructionEvent method in Artemis where the above explained solution is already implemented for text and file upload exercises.

Underscores are not rendered correctly under object names in Firefox

Describe the bug

Underscores under object names are being overlapped by the characters above. This only occures in Firefox.

To Reproduce

Switch the Diagram Type to 'Object Diagram'

Expected behavior

Underscores are completly visible.

Screenshots

Environment

 - OS: Windows 10
 - Browser: Firefox
 - Version: 76.0

Drag State doesn't update in Firefox

When dragging an entity while not dragging it far enough for it to update its position, the entity retains its opacity as if it is still being dragged, although it was dropped and the mouse click is no longer held.
The problem couldn't be reproduced deterministically and only occurs in Firefox (Version 61.0.1).
It can be fixed if the entity is moved by at least a square of the grid.

The opacity is dependent on the variable isDragging and is set in the file src/gui/components/Canvas/Entity/index.tsx in the function computeContainerStyle().

Required interfaces overlap and make it difficult to read

Describe the bug

The required interface in a component/deloyment diagram has exactly a semicircle however if you have two required interfaces attached on opposite directions on a provided interface it becomes a full circle and makes it hard to see what the actual provided and that the required ones are.

To Reproduce

See screenshots, if not reproducable let me know then I'll provide more details

Expected behavior

You can clearly see the differences. The solution would be to make the line length shorter to probably one quarter of a circle.

Screenshots

[Feature]: Create Header similar to Artemis

Create header similar to the one in Artemis, which includes the application name and the current version of Apollon.

Add Auto-Layout Functionality

Is your feature request related to a problem?

Large graphs can quickly become unorganized and confusing. Restructuring takes a lot of effort, especially if the graph is still changing. Thus, some editors support the automatic restructuring of graphs, which makes the graph planar (if possible) and minimizes edge bends.

Describe the solution you'd like

Implement different auto-layout functions. An overview of graph drawing algorithms can be found here:
http://cs.brown.edu/people/rtamassi/papers/gd-tutorial/gd-constraints.pdf

An example of such functionality is shown here:
https://www.visual-paradigm.com/support/documents/vpuserguide/1283/28/6047_automaticdia.html

Update Typescript from 3.8.3 to 3.9.7

Is your feature request related to a problem?

Updating the typescript version, brings compiler errors with it. Currently we have a lot to do in Apollon, so this ticket is used to describe the changes which need to be done at a later point.

Describe the problems

For breaking changes, see: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#breaking-changes
Especially relevant for us: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html#stricter-checks-on-intersections-and-optional-properties
With this change we have 56 compiler errors at first sight related to transpiling typescript to javascript. There are more issues, because fixing one of the issues resolves often in a chain of issues which need to be resolved

Causes:

stricter checks on intersections and optional properties
more type inference, so that previously made type annotations are not correct anymore

Examples

Example 1: stricter checks on intersections and optional properties

This brings some problems, e.g. multiline.tsx:

The problem here is, that we have the property x and y coming multiple times in the tsx, one time from textProps and directly specified in the tsx. This should be easily solvable by manually handling the default value

The same problem applies to various places, where we have intersection types which include properties from different types with different type annotations for certain properties

Example 2: more type inference / different type inference

Also the types of event annotations have changed:

so e.g. FormEvent<HTMLInputElement> -> ChangeEvent<HTMLTextAreaElement> for onChange of text input fields

Example 2: more type inference / different type inference

in StyledTextfield

we now have to give a manual type declaration, because the inferred is marked as a compiler error . Be careful, just using type any will not solve the issue, because we want to achieve type safety and not disable typechecking use something like props: Props & { theme: Styles }

Associations of different types draw on top of each other

Describe the bug

With overlapping connections between components in class diagrams, it is possible to have associations with different connection types drawn on top of each other.

This is a non-issue for connections of the same type (e.g. 2x aggregation with overlapping diamonds), but can be problematic when an aggregation connection including the diamond is drawn on top of e. g. a regular association - it makes the association look like an aggregation.

To Reproduce

Create a class diagram
Create three components laid out in a triangle
Connect two of them to the third so that the arrows overlap
Choose different connection types

Expected behavior

Connections of different types do not get drawn on top of each other, but rather offset to the side. The behaviour can sometimes be mitigated by choosing a different orientation/layout of the components, but this is not always practical or possible.

Screenshots

See this example:
The GameBoardUI's association arrow is drawn underneath the Player's aggregation diamond, making it unclear what is being modelled here. It looks like both classes are connected via aggregation, when in fact only the Player is.

Of course, in this example, we can easily reorder, but this is not always the case.
Expected:

Environment

 - OS: macOS 10.15.5 Catalina
 - Browser Chrome 83.0.4103.116

Add support for Petri Nets

Is your feature request related to a problem?

A few courses cover modeling with Petri nets, which currently needs to be done by pen and paper. It would be great if Petri nets could be modeled directly in Artemis (Apollon).

Example:

Describe the solution you'd like

Petri-nets only consists of 3 components:

places (dt. Stellen): circle containing markers. Markers should be indicated by black dots. If the number of markers exceeds a threshold value (maybe ~5), a number instead of dots should be displayed. The max. number of markers inside is determined by a capacity that is indicated by a number written nearby the circle. Adjusting markers and capacities should be implemented by a number input. The default capacity depends on the type of the Petri net. For boolean Petri nets, the capacity is fixed to 1, for Petri nets over natural numbers the default value is infinite. The type of the Petri net should be selectable (maybe a checkbox or dropdown menu in the editor).
transitions: a simple rectangle, accepting in and outgoing arcs
arcs: Connectors between places and transitions. Arcs are characterized by multiplicities (contrary to UML, there is only one multiplicity per arc). The default multiplicity is 1 and doesn't need to be displayed in this case.

Places and transitions should support the addition of comments (see red text in the example).

Further semantics are extensively described in the literature and the internet.

Although the example uses different colors, a black and white version with only the comments displayed in another color would be the preferred realization.

Additional context

We only require basic support for Petri nets over natural numbers and boolean Petri nets. Advanced semantics, like colored Petri nets, are not required (at least not by our lecture).

It would be great if this feature could be realized until mid-November 2020

Required Interface in Component and Deployment Diagrams

Describe the bug

Unclean representation of multiple required interfaces on an interface in deployment or component diagram

Motivation

Everything worked for me as well!

I have one suggestions:

is it possible for 3 or 4 required interfaces to keep the ones across to each other like they are and add an extra space to the other so that it looks like this?

Usability for interfaces
Working as intended however since this only applied when having three required interfaces this means that you still have the issue with two required interfaces.
It's not a big deal but as you can see in the screenshot the required interface intersects the line from the provided interface (right):

To Reproduce

Create a component or deployment diagram with an interface
add multiple interfaces to one port

Expected behavior

Clean representation

Screenshots

[Bugfix]: Feedback Icons are rendered at wrong position

Currently, the feedback icons are rendered at the top right corner of the bounding box of an element. This leads to bad positioning of icons for relationships. See ls1intum/Artemis#445 for more details.

[Feature]: Update dependencies of Apollon

Update all dependencies to highest available version

Support Reachability Graphs

Is your feature request related to a problem?

In the context of Petri nets, a second diagram type is needed to describe the reachability of states within a Petri net. A reachability graph is a simple graph consisting of nodes containing a numeric vector (comma separated list) connected by simple arrows. No multiplicities are needed, but instead, an annotation of the arrows should be possible to show which transition caused the state change. The start state is marked by an arrow pointing to the node representing the start state. Since dangling arrows are probably difficult to realize using drawing tools, I suggest implementing this as an attribute (checkbox) of the nodes.

Describe the solution you'd like

Create a new diagram type for reachability graphs. I suggest using activity diagrams as a baseline and only use the action node type.

[Bugfix] Exception when deleting elements with assessment

TypeError: Cannot read property 'type' of undefined in apollon-editor.ts 0:47

var umlAssessments = Object.keys(assessments).map(function (id) {
  return ({
    modelElementId: id,
    elementType: elements[id].type,
    score: assessments[id].score,
    feedback: assessments[id].feedback,
  });
});

Deleting Messages of Communication Links

Describe the bug

When deleting messages of communication links the popup does not match the displayed values

To Reproduce

Create a communication diagram
add objects with a communication link
add multiple messages to the link in one direction
delete messages from top to bottom (displayed wrongly)

Expected behavior

popup content matches displayed values in diagram

Screenshots

Environment

 - OS: Linux Mint 19
 - Browser: chrome
 - Version 83.0.4103.61

Additional context

Output in Web Console

  [REPLACE THIS WITH YOUR INFORMATION]

[Feature]: Automatic deployment to vm

Create a bamboo build plan for automatic deployment to production server

CommunicationLink + Messages

Describe the bug

CommunicationLink + Messages are currently implemented in a way, that they are not kept normalized in the application state.
This does not cause a problem right now, but potentially in the future.

Usually the application state is normalized. So CommunicationLink should reference its CommunicationLinkMessages by id. Currently the CommunicationLink has a full refernce to the element. This leads to inconsistency in the application state, e.g.:
If a CommunicationLinkMessage is updated via the UMLElementRepository.update function,
the changes are not communicated to the parent, i.e. the CommunicationLink. Thus when accessing the message later again via the CommunicationMessage, it will not contain the messages.

Expected implementation

CommunicationLink should update CommunicationLinkMessages by id. The drawback of this is, that it would change the data model and we would lose backwards compatibility, meaning previous created CommunicationDiagrams may not work anymore

At some point in the future this should be fixed, when we need to change the DataModel anyway

[Bug] connecting UML elements with each other does not work in lower right corner of fireforx

Connecting UML elements does not work in Firefox in the lower right corner of the drawing area -> pointer event coordinates which should be relative to viewports, are incorrect -> wrong target port of connection is calculated

Editor in Artemis not drawn correctly if scrolling is needed

Describe the bug

To Reproduce

Go to modeling editor in example solution
Make window smaller than side bar with elements -> drawing error

Expected behavior

Screenshots

Environment

Chrome

Additional context

Output in Web Console

  [REPLACE THIS WITH YOUR INFORMATION]