Create rountangle on right-click (instead of alt + left-click)

src/frontend/demo_editor.tsx

@@ -18,7 +18,7 @@ export const demo_Editor_description =
         <Text>
             Next to this text you can see three columns <strong>Rountangle Editor</strong>, <strong>Deltas</strong>,
             and <strong>State Graph</strong>. In the Rountangle Editor, you can create (unnamed) rountangles by
-            left-clicking on the grey area with the alt-key pressed (see also the small info in the upper right corner
+            right-clicking on the grey area (see also the small info in the upper right corner
             of each canvas). You can move these rountangle around and resize them.
         </Text>
         <Text>
@@ -31,7 +31,7 @@ export const demo_Editor_description =
         </Text>
         <Image src={editor}/>
         <Actionblock>
-            1. Create a rountangle!
+            1. Create a rountangle by right-clicking the grey area in the left column!
         </Actionblock>
         <Resultblock>
             In the center column, one composite delta (or L1 delta) "createRountangle" was created.

src/frontend/rountangleEditor/RountangleEditor.tsx

@@ -163,13 +163,12 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
     }
 
     onPointerDown = (event: React.PointerEvent<SVGSVGElement>) => {
-        // only left mouse button
-        if (event.button !== 0) return;
         event.stopPropagation();
         event.preventDefault();
-        event.currentTarget.setPointerCapture(event.pointerId);
 
-        if (!event.altKey) {
+        // only left mouse button
+        if (event.button === 0) {
+            event.currentTarget.setPointerCapture(event.pointerId);
             this.setState({dragging: true, moved: false});
         }
     }
@@ -200,6 +199,11 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
         return refPoint.matrixTransform(screenCTM.inverse());
     }
 
+    onContextMenu = (event: React.PointerEvent<SVGSVGElement>) => {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
     onPointerUp = (event: React.PointerEvent<SVGSVGElement>) => {
         event.stopPropagation();
         event.preventDefault();
@@ -211,7 +215,7 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
         });
 
         // add new state on left mouse button and ALT-Key pressed
-        if (event.button === 0 && event.altKey) {
+        if (event.button === 2) {
             const cursorPoint = this.clickToSVGPos(event.clientX, event.clientY);
 
             if (cursorPoint) {
@@ -252,6 +256,7 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
                    onPointerDown={this.onPointerDown}
                    onPointerMove={this.onPointerMove}
                    onPointerUp={this.onPointerUp}
+                   onContextMenu={this.onContextMenu}
                    width='350px'
                    height='100%'
                    viewBox={`${this.state.translateX} ${this.state.translateY} ${this.state.currentWidth} ${this.state.currentHeight}`}

src/frontend/versioned_model.tsx

@@ -73,7 +73,8 @@ const helpText = {
   rountangleEditor: <>
     <Mantine.Divider label="Controls" labelPosition="center"/>
     <Mantine.Text>
-      <b>Alt + Left-Click</b>: Create/Delete Rountangle<br/>
+      <b>Right-Click</b>: Create Rountangle<br/>
+      <b>Alt + Left-Click</b>: Delete Rountangle<br/>
       <b>Left-Drag</b>: Move/Resize Rountangle / Pan Canvas<br/>
       <b>Wheel</b>: Zoom<br/>
     </Mantine.Text>