implement panning of canvas

src/frontend/rountangleEditor/RountangleEditor.css

@@ -2,6 +2,10 @@
     position: relative;
     font-family: sans-serif;
 }
+.re-background.dragging {
+    cursor: move;
+}
+
 .re-div-wrapper {
     filter: drop-shadow(.1rem .1rem .1em deeppink);
 }

src/frontend/rountangleEditor/RountangleEditor.tsx

@@ -86,6 +86,8 @@ interface RountangleEditorState {
     translateX: number;
     translateY: number;
     zoom:       number;
+    dragging:   boolean;
+    moved:      boolean;
 }
 
 export class RountangleEditor extends React.Component<RountangleEditorProps, RountangleEditorState> {
@@ -99,7 +101,9 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
         this.state = {
             translateX: 0,
             translateY: 0,
-            zoom: 1.0
+            zoom: 1.0,
+            dragging: false,
+            moved: false
         }
     }
 
@@ -193,9 +197,42 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
         this.onDispatchListeners.add(newListener);
     }
 
+    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) {
+            this.setState({dragging: true, moved: false});
+        }
+    }
+
+    onPointerMove = (event: React.PointerEvent<SVGSVGElement>) => {
+        if (!this.state.dragging) return;
+        this.setState({
+            translateX: this.state.translateX - event.movementX,
+            translateY: this.state.translateY - event.movementY,
+            moved:      true
+        });
+
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
     onPointerUp = (event: React.PointerEvent<SVGSVGElement>) => {
         event.stopPropagation();
         event.preventDefault();
+        event.currentTarget.releasePointerCapture(event.pointerId);
+
+        console.log('hier');
+
+        this.setState({
+            dragging: false,
+            moved:    false
+        });
+
         // add new state on left mouse button and ALT-Key pressed
         if (event.button === 0 && event.altKey && this.canvasRef.current) {
             // point transformation adapted from https://stackoverflow.com/a/70595400
@@ -237,9 +274,13 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
     render() {
         return(
             <svg
-                   className="re-background canvas"
+                   className={`re-background canvas ${this.state.dragging ? 'dragging' : ''}`}
+                   onPointerDown={this.onPointerDown}
+                   onPointerMove={this.onPointerMove}
                    onPointerUp={this.onPointerUp}
-                   viewBox={`${this.state.translateX} ${this.state.translateY} 350px 100%`}
+                   width='350px'
+                   height='100%'
+                   viewBox={`${this.state.translateX} ${this.state.translateY} 350 ${this.canvasRef.current?.viewBox.baseVal.width ?? 100}`}
                    ref={this.canvasRef}
                >
                    {