Allow to move link source or target with LinkActionMoveEndpoint on touchscreen (#135)

Author: AlexeyMz

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
   * Allow to manipulate link vertices on touchscreen (only in Firefox for now due to [bug](https://gsap.com/community/forums/topic/15870-svg-draggable-chrome-android-problems/));
   * Allow to select multiple elements with `Selection` with touch when `CanvasApi.pointerMode` is `selection`;
   * Allow to establish new links with `SelectionActionEstablishLink` on touchscreen;
+  * Allow to move link source or target with `LinkActionMoveEndpoint` on touchscreen;
   * Enable `showPointerModeToggle` on `ZoomControl` by default (can be disabled by passing `false`).
 - Allow to customize how resource anchors and asset URLs (e.g. images or downloadable files) are resolved via `DataLocaleProvider.{prepareAnchor, resolveAssetUrl}`:
   * Resolve anchors and image thumbnail URLs in `StandardEntity`, `ClassicEntity` and `SelectionActionAnchor`;

src/widgets/linkAction.tsx

@@ -119,6 +119,10 @@ export interface LinkActionProps extends LinkActionStyleProps {
      * Raw handler for mouse down event on the action button.
      */
     onMouseDown?: (e: React.MouseEvent) => void;
+    /**
+     * Raw handler for pointer down event on the action button.
+     */
+    onPointerDown?: (e: React.PointerEvent) => void;
     /**
      * Action content.
      */
@@ -135,7 +139,7 @@ const CLASS_NAME = 'reactodia-link-action';
 export function LinkAction(props: LinkActionProps) {
     const {
         dockSide, dockIndex, disabled, className, title, hotkey,
-        onSelect, onMouseDown, children,
+        onSelect, onMouseDown, onPointerDown, children,
     } = props;
 
     const {getPosition} = useLinkActionContext();
@@ -149,7 +153,8 @@ export function LinkAction(props: LinkActionProps) {
             disabled={disabled}
             title={titleWithHotkey}
             onClick={onSelect}
-            onMouseDown={onMouseDown}>
+            onMouseDown={onMouseDown}
+            onPointerDown={onPointerDown}>
             {children}
         </button>
     );
@@ -448,7 +453,8 @@ function LinkActionMoveRelationEndpoint(
                     : t.text('link_action.move_relation.move_target_title')
             )}
             disabled={linkIsDeleted}
-            onMouseDown={e => {
+            onPointerDown={e => {
+                e.preventDefault();
                 const point = canvas.metrics.pageToPaperCoords(e.pageX, e.pageY);
                 getCommandBus(VisualAuthoringTopic)
                     .trigger('startDragEdit', {
@@ -494,7 +500,8 @@ function LinkActionMoveAnnotationEndpoint(
                     ? t.text('link_action.move_relation.move_source_title')
                     : t.text('link_action.move_relation.move_target_title')
             )}
-            onMouseDown={e => {
+            onPointerDown={e => {
+                e.preventDefault();
                 const point = canvas.metrics.pageToPaperCoords(e.pageX, e.pageY);
                 getCommandBus(AnnotationTopic)
                     .trigger('startDragOperation', {

styles/widgets/_linkAction.scss

@@ -36,6 +36,7 @@
   }
 
   &__endpoint {
+    touch-action: none;
     color: theme.$color-primary;
     background: transparent;
   }