fix rotation ctrl-drag by removing rotation input, group drag reconci…

…lliation, update useDrag source
justin-hackin · Sep 17, 2024 · 2893499 · 2893499
1 parent e423912
commit 2893499
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
@@ -52,6 +52,7 @@
     "@mui/styles": "^5.0.1",
     "@types/lodash": "^4.14.194",
     "@types/react-dom": "^17.0.9",
+    "@use-gesture/react": "^10.3.1",
     "canvg": "^3.0.6",
     "clsx": "^1.1.1",
     "disable-context-menu": "^1.0.1",
@@ -71,7 +72,6 @@
     "react-joyride": "^2.3.1",
     "react-number-format": "^4.7.3",
     "react-resize-detector": "^9.1.0",
-    "react-use-gesture": "^7.0.15",
     "svg-widget-studio": "*",
     "three": "^0.125.0",
     "threejs-orbit-controls": "^1.0.3",

diff --git a/...ents/TextureEditorDrawer/components/TextureEditor/components/TextureArrangement/index.tsx b/...ents/TextureEditorDrawer/components/TextureEditor/components/TextureArrangement/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useDrag, useGesture } from 'react-use-gesture';
+import { useDrag, useGesture } from '@use-gesture/react';
 import { clamp } from 'lodash-es';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -76,7 +76,7 @@ export const TextureArrangement = observer(() => {
         faceDecoration.setRotateDiff((movementPt.y / placementAreaDimensions.height) * 360);
       } else {
         faceDecoration.reconcileRotateDiff();
-        incrementTransformTracking(TRANSFORM_METHODS.DRAG, TRANSFORM_OPERATIONS.ROTATE_TEXTURE);
+        // incrementTransformTracking(TRANSFORM_METHODS.DRAG, TRANSFORM_OPERATIONS.ROTATE_TEXTURE);
       }
     } else if (dragMode === DRAG_MODES.SCALE_TEXTURE) {
       if (down) {

diff --git a/...ponents/TextureEditorDrawer/components/TextureEditor/components/TextureControls/index.tsx b/...ponents/TextureEditorDrawer/components/TextureEditor/components/TextureControls/index.tsx
@@ -4,18 +4,15 @@ import {
   Divider,
   FormControlLabel,
   IconButton,
-  InputAdornment,
   ListItemIcon,
   Menu,
   MenuItem,
   Switch,
-  TextField,
   Toolbar,
   Tooltip,
   Typography,
 } from '@mui/material';
 import { observer } from 'mobx-react';
-import CachedIcon from '@mui/icons-material/Cached';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -24,7 +21,6 @@ import SaveIcon from '@mui/icons-material/Save';
 import PublishIcon from '@mui/icons-material/Publish';
 import FilePicker from '@mavedev/react-file-picker';
 import HelpIcon from '@mui/icons-material/Help';
-import { isNaN, isNumber } from 'lodash-es';
 import NumberFormat from 'react-number-format';
 import clsx from 'clsx';
 
@@ -344,31 +340,31 @@ export const TextureControls = observer(() => {
               />
             </>
             )}
-
-            <TextField
-              className={clsx(classes.rotationInput, TOUR_ELEMENT_CLASSES.ROTATE_INPUT)}
-              label="Rotate"
-              value={faceDecoration.transform.rotate}
-              onChange={({ target: { value } = {} }) => {
-              // TODO: use onKeyPress for enter submission
-              // https://github.com/mui-org/material-ui/issues/5393#issuecomment-304707345
-              // TODO: once above is fixed, use textureRotateDragged as value
-                const numVal = +!value;
-                if (isNumber(numVal) && !isNaN(numVal)) {
-                  faceDecoration.transform.setRotate(numVal);
-                }
-              }}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <CachedIcon />
-                  </InputAdornment>
-                ),
-                // @ts-ignore
-                inputComponent: NumberFormatDecimalDegrees,
-              }}
-              variant="filled"
-            />
+            {/* TODO: why does this break rotation reconciliation? */}
+            {/* <TextField */}
+            {/*   className={clsx(classes.rotationInput, TOUR_ELEMENT_CLASSES.ROTATE_INPUT)} */}
+            {/*   label="Rotate" */}
+            {/*   value={faceDecoration.transform.rotate} */}
+            {/*   onChange={({ target: { value } = {} }) => { */}
+            {/*   // TODO: use onKeyPress for enter submission */}
+            {/*   // https://github.com/mui-org/material-ui/issues/5393#issuecomment-304707345 */}
+            {/*   // TODO: once above is fixed, use textureRotateDragged as value */}
+            {/*     const numVal = +!value; */}
+            {/*     if (isNumber(numVal) && !isNaN(numVal)) { */}
+            {/*       faceDecoration.transform.setRotate(numVal); */}
+            {/*     } */}
+            {/*   }} */}
+            {/*   InputProps={{ */}
+            {/*     startAdornment: ( */}
+            {/*       <InputAdornment position="start"> */}
+            {/*         <CachedIcon /> */}
+            {/*       </InputAdornment> */}
+            {/*     ), */}
+            {/*     // @ts-ignore */}
+            {/*     inputComponent: NumberFormatDecimalDegrees, */}
+            {/*   }} */}
+            {/*   variant="filled" */}
+            {/* /> */}
           </>
         )}
         <IconButton

diff --git a/packages/widgets/src/widgets/PyramidNet/models/PositionableFaceDecorationModel.ts b/packages/widgets/src/widgets/PyramidNet/models/PositionableFaceDecorationModel.ts
@@ -3,7 +3,7 @@ import {
   Model, model, modelAction, prop,
 } from 'mobx-keystone';
 
-import { computed, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { getBoundingBoxAttrs, getDestinationPoints, PathData } from 'fluent-svg-path-ts';
 import { Dimensions, getNearestHistoryFromAncestorNode } from 'svg-widget-studio';
 import {
@@ -104,8 +104,10 @@ export class PositionableFaceDecorationModel extends Model({
 
   @modelAction
   reconcileScaleDiff() {
-    this.transform.scale *= this.transformDiff.scale;
-    this.transformDiff.setScale(1);
+    this.parentHistoryManager.withGroup(() => {
+      this.transform.scale *= this.transformDiff.scale;
+      this.transformDiff.setScale(1);
+    });
   }
 
   @modelAction
@@ -117,8 +119,10 @@ export class PositionableFaceDecorationModel extends Model({
 
   @modelAction
   reconcileTranslateDiff() {
-    this.transform.setTranslate(sumPoints(this.transform.translate, this.transformDiff.translate));
-    this.transformDiff.setTranslate(getOriginPoint());
+    this.parentHistoryManager.withGroup(() => {
+      this.transform.setTranslate(sumPoints(this.transform.translate, this.transformDiff.translate));
+      this.transformDiff.setTranslate(getOriginPoint());
+    });
   }
 
   @modelAction
@@ -128,10 +132,12 @@ export class PositionableFaceDecorationModel extends Model({
     });
   }
 
-  @modelAction
+  @action
   reconcileRotateDiff() {
-    this.transform.setRotate(wrapDegrees(this.transform.rotate + this.transformDiff.rotate));
-    this.transformDiff.setRotate(0);
+    this.parentHistoryManager.withGroup(() => {
+      this.transform.setRotate(wrapDegrees(this.transform.rotate + this.transformDiff.rotate));
+      this.transformDiff.setRotate(0.0);
+    });
   }
 
   @modelAction
@@ -150,8 +156,11 @@ export class PositionableFaceDecorationModel extends Model({
       this.rotateDragged,
       this.translateDragged,
     );
-    this.transform.setTransformOrigin(this.transformOriginDragged);
-    this.transform.setTranslate(sumPoints(this.transform.translate, scalePoint(relativeDifference, -1)));
-    this.transformDiff.setTransformOrigin(getOriginPoint());
+
+    this.parentHistoryManager.withGroup(() => {
+      this.transform.setTransformOrigin(this.transformOriginDragged);
+      this.transform.setTranslate(sumPoints(this.transform.translate, scalePoint(relativeDifference, -1)));
+      this.transformDiff.setTransformOrigin(getOriginPoint());
+    });
   }
 }