Ensure focal point tool can be used without dragging motion

src/web/assets/cp/src/js/AssetImageEditor.js

@@ -53,6 +53,7 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
     draggingCropper: false,
     scalingCropper: false,
     draggingFocal: false,
+    clickToMoveFocal: false,
     previousMouseX: 0,
     previousMouseY: 0,
     shiftKeyHeld: false,
@@ -2406,6 +2407,10 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
         } else if (move) {
           this.draggingCropper = true;
         }
+      } else {
+        if (this.focalPoint) {
+          this.clickToMoveFocal = true;
+        }
       }
     },
 
@@ -2454,7 +2459,11 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
     /**
      * Handle mouse being released.
      */
-    _handleMouseUp: function () {
+    _handleMouseUp: function (ev) {
+      if (!this.draggingFocal && this.clickToMoveFocal) {
+        this._handleFocalClickToMove(ev);
+      }
+
       this.draggingCropper = false;
       this.scalingCropper = false;
       this.draggingFocal = false;
@@ -2471,6 +2480,62 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
       this._handleMouseMoveInternal();
     },
 
+    /**
+     * Handle focal point being moved via click.
+     *
+     * @param {Object} ev
+     */
+    _handleFocalClickToMove: function (ev) {
+      if (typeof this._handleFocalClickToMove._ === 'undefined') {
+        this._handleFocalClickToMove._ = {};
+      }
+
+      if (!this.focalPoint) return;
+
+      const left = this.focalPoint.get('left');
+      const top = this.focalPoint.get('top');
+
+      const canvasOffset = this.$croppingCanvas.offset();
+      const canvasOffsetX = canvasOffset.left;
+      const canvasOffsetY = canvasOffset.top;
+
+      this._handleFocalClickToMove._.newX = ev.pageX - canvasOffsetX;
+      this._handleFocalClickToMove._.newY = ev.pageY - canvasOffsetY;
+
+      if (this.currentView === 'crop') {
+        if (
+          !this.arePointsInsideRectangle(
+            [
+              {
+                x: this._handleFocalClickToMove._.newX,
+                y: this._handleFocalClickToMove._.newY,
+              },
+            ],
+            this.imageVerticeCoords
+          )
+        ) {
+          return;
+        }
+      } else {
+        if (
+          !this.isPointInsideViewport({
+            x: this._handleFocalClickToMove._.newX,
+            y: this._handleFocalClickToMove._.newY,
+          })
+        ) {
+          return;
+        }
+      }
+
+      this.focalPoint.set({
+        left: this._handleFocalClickToMove._.newX,
+        top: this._handleFocalClickToMove._.newY,
+      });
+
+      this.storeFocalPointState();
+      this.renderImage();
+    },
+
     /**
      * Handle cropper being dragged.
      *
@@ -2635,24 +2700,10 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
           }
         } else {
           if (
-            !(
-              this.viewport.left -
-                this.viewport.width / 2 -
-                this._handleFocalDrag._.newX <
-                0 &&
-              this.viewport.left +
-                this.viewport.width / 2 -
-                this._handleFocalDrag._.newX >
-                0 &&
-              this.viewport.top -
-                this.viewport.height / 2 -
-                this._handleFocalDrag._.newY <
-                0 &&
-              this.viewport.top +
-                this.viewport.height / 2 -
-                this._handleFocalDrag._.newY >
-                0
-            )
+            !this.isPointInsideViewport({
+              x: this._handleFocalDrag._.newX,
+              y: this._handleFocalDrag._.newY,
+            })
           ) {
             return;
           }
@@ -2665,6 +2716,24 @@ Craft.AssetImageEditor = Garnish.Modal.extend(
       }
     },
 
+    /**
+     * Given point coordinates in the form {x: int, y:int}, returns true
+     * if the points are inside the viewport
+     *
+     * Adapted from: http://stackoverflow.com/a/2763387/2040791
+     *
+     * @param {Object} points
+     * @param {Object} rectangle
+     */
+    isPointInsideViewport(coordinateSet) {
+      return (
+        this.viewport.left - this.viewport.width / 2 - coordinateSet.x < 0 &&
+        this.viewport.left + this.viewport.width / 2 - coordinateSet.x > 0 &&
+        this.viewport.top - this.viewport.height / 2 - coordinateSet.y < 0 &&
+        this.viewport.top + this.viewport.height / 2 - coordinateSet.y > 0
+      );
+    },
+
     /**
      * Set the cropping constraint
      * @param {string} constraint

src/web/assets/focalpoint/src/FocalPoint.ts

@@ -1,6 +1,7 @@
 import './focal.scss';
 
 import JQEvent = JQuery.Event;
+import TriggeredEvent = JQuery.TriggeredEvent;
 
 export class FocalPoint {
   private readonly $target: JQuery;
@@ -62,6 +63,7 @@ export class FocalPoint {
   protected addFocalMoveListeners() {
     this.$focal.on('mousedown touchstart', this.handleDragStart.bind(this));
     $(window).on('mouseup touchend', this.handleDragEnd.bind(this));
+    $(window).on('mouseup touchend', this.handleClickToMove.bind(this));
     $(window).on('mousemove touchmove', this.handleMove.bind(this));
   }
 
@@ -72,6 +74,7 @@ export class FocalPoint {
 
     this.$focal.off('mousedown touchstart', this.handleDragStart.bind(this));
     $(window).off('mouseup touchend', this.handleDragEnd.bind(this));
+    $(window).off('mouseup touchend', this.handleClickToMove.bind(this));
     $(window).off('mousemove touchmove', this.handleMove.bind(this));
   }
 
@@ -89,6 +92,31 @@ export class FocalPoint {
     this.dragging = false;
   }
 
+  protected handleClickToMove(ev: TriggeredEvent) {
+    ev.preventDefault();
+    const {target} = ev;
+    const targetIsImage = target.tagName === 'IMG';
+
+    if (this.dragging || this.saving || !targetIsImage) return;
+
+    const newX = ev.pageX!;
+    const newY = ev.pageY!;
+
+    // Calculate the relative position within the target container
+    const containerOffset = this.$target.offset()!;
+    const relativeX = newX - containerOffset.left;
+    const relativeY = newY - containerOffset.top;
+
+    // Update focalPos with the new relative coordinates as percentages
+    const containerWidth = this.$target.width()!;
+    const containerHeight = this.$target.height()!;
+    this.focalPos = [relativeX / containerWidth, relativeY / containerHeight];
+
+    // Update the focal point's position
+    this.debouncedSave();
+    this.positionFocal();
+  }
+
   protected handleMove(ev: JQEvent) {
     ev.preventDefault();