small performance tweaks

src/frontend/rountangleEditor/RountangleComponent.tsx

@@ -19,8 +19,6 @@ export interface RountangleState {
 }
 
 export class RountangleComponent extends React.Component<RountangleProps, RountangleState> {
-    private readonly rountangleRef: React.RefObject<HTMLDivElement>
-
     shouldComponentUpdate(nextProps: Readonly<RountangleProps>, nextState: Readonly<RountangleState>, nextContext: any): boolean {
         return this.props.posX       !== nextProps.posX
             || this.props.posY       !== nextProps.posY
@@ -45,8 +43,6 @@ export class RountangleComponent extends React.Component<RountangleProps, Rounta
             resizeWidth: 0,
             resizeHeight: 0
         }
-
-        this.rountangleRef = React.createRef<HTMLDivElement>();
     }
 
     onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -62,11 +58,14 @@ export class RountangleComponent extends React.Component<RountangleProps, Rounta
 
     onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
         if (!this.state.dragging) return;
-        this.setState({
-            moved: true,
-            movementsX: this.state.movementsX + event.movementX,
-            movementsY: this.state.movementsY + event.movementY
-        });
+
+        if (event.movementX !== 0 || event.movementY !== 0) {
+            this.setState({
+                moved: true,
+                movementsX: this.state.movementsX + event.movementX,
+                movementsY: this.state.movementsY + event.movementY
+            });
+        }
 
         event.stopPropagation();
         event.preventDefault();
@@ -110,10 +109,12 @@ export class RountangleComponent extends React.Component<RountangleProps, Rounta
     }
 
     onResize = (deltaHeight: number, deltaWidth: number) => {
-        this.setState({
-            resizeWidth:  this.state.resizeWidth  + deltaHeight,
-            resizeHeight: this.state.resizeHeight + deltaWidth
-        })
+        if (deltaHeight !== 0 || deltaWidth !== 0) {
+            this.setState({
+                resizeWidth:  this.state.resizeWidth  + deltaHeight,
+                resizeHeight: this.state.resizeHeight + deltaWidth
+            });
+        }
     }
 
     onResizeComplete = () => {
@@ -140,7 +141,6 @@ export class RountangleComponent extends React.Component<RountangleProps, Rounta
                 className={'re-div-wrapper'}
             >
             <div
-              ref={this.rountangleRef}
               className={`re-rountangle ${this.state.dragging ? 'dragging' : ''}`}
               onPointerDown={this.onPointerDown}
               onPointerMove={this.onPointerMove}

src/frontend/rountangleEditor/RountangleEditor.tsx

@@ -211,11 +211,14 @@ export class RountangleEditor extends React.Component<RountangleEditorProps, Rou
 
     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
-        });
+
+        if (event.movementY !== 0 ||event.movementX !== 0) {
+            this.setState({
+                translateX: this.state.translateX - event.movementX,
+                translateY: this.state.translateY - event.movementY,
+                moved:      true
+            });
+        }
 
         event.stopPropagation();
         event.preventDefault();