Split generic scrollable paper component Paper from diagram-specific state and logic

CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to the Reactodia will be documented in this document.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+#### 🚀 New Features
+- Support proper graph manipulation on touchscreen devices:
+  * Allow to move and resize elements on touchscreen;
+  * 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;
+  * Enable `showPointerModeToggle` on `ZoomControl` by default (can be disabled by passing `false`).
+
+#### 💅 Polish
+- Provide `onlySelected` property to link templates the same way as for element templates.
+
+#### 🔧 Maintenance
+- Preparations to extract generic scrollable paper component `Paper` from diagram-specific state and logic:
+  * Replace `reactodia-paper-area` CSS class by `reactodia-canvas-area` and `reactodia-paper`.
+  * Deprecate `CanvasMetrics.area` in favor of `CanvasMetrics.pane`.
 
 ## [0.33.0] - 2026-03-16
 #### 🚀 New Features

src/coreUtils/scheduler.ts

@@ -103,57 +103,3 @@ export class BufferingQueue<Key extends string> {
         onFetch(keys);
     };
 }
-
-/**
- * Runs specified callback on each rendered frame for the `duration` interval
- * using [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame).
- *
- * @category Utilities
- */
-export function animateInterval(
-    duration: number,
-    onProgress: (progress: number) => void,
-    signal?: AbortSignal
-): Promise<void> {
-    return new Promise(resolve => {
-        let animationFrameId: number;
-        let start: number;
-        let cleanupAbort: (() => void) | undefined;
-
-        const animate = (time: number) => {
-            if (signal && signal.aborted) { return; }
-
-            start = start || time;
-            let timePassed = time - start;
-            if (timePassed > duration) { timePassed = duration; }
-
-            onProgress(timePassed / duration);
-
-            if (timePassed < duration) {
-                animationFrameId = requestAnimationFrame(animate);
-            } else {
-                cleanupAbort?.();
-                resolve();
-            }
-        };
-
-        if (signal) {
-            const onAbort = () => {
-                cancelAnimationFrame(animationFrameId);
-                cleanupAbort?.();
-                resolve();
-            };
-            cleanupAbort = () => {
-                signal.removeEventListener('abort', onAbort);
-            };
-            signal.addEventListener('abort', onAbort);
-        }
-        animationFrameId = requestAnimationFrame(animate);
-    });
-}
-
-export function easeInOutBezier(t: number) {
-    if (t < 0) { return 0; }
-    if (t > 1) { return 1; }
-    return t * t * (3.0 - 2.0 * t);
-}

src/diagram/canvasApi.ts

@@ -2,12 +2,18 @@ import * as React from 'react';
 
 import { Events, PropertyChange } from '../coreUtils/events';
 
+import type {
+    CanvasMetrics, CanvasPaneMetrics, CenterToOptions, ScaleOptions, ViewportOptions,
+} from '../paper/paperApi';
+import type { PaperTransform } from '../paper/paperLayers';
+import type { ToDataURLOptions } from '../paper/toSvg';
+
 import type { RenderingState } from './renderingState';
 import type { Cell } from './elements';
-import type { Vector, Rect, Size } from './geometry';
+import type { Vector, Rect } from './geometry';
 import type { DiagramModel } from './model';
-import type { PaperTransform } from './paper';
-import type { ToDataURLOptions } from './toSvg';
+
+export type { CanvasMetrics, CanvasPaneMetrics, CenterToOptions, ScaleOptions, ViewportOptions };
 
 /**
  * Describes an API to interact with a scrollable graph canvas.
@@ -356,93 +362,6 @@ export interface CanvasKeyboardEvent {
     readonly sourceEvent: React.KeyboardEvent;
 }
 
-/**
- * Represents canvas viewport size and transformation.
- *
- * Allows to convert between different canvas coordinate types.
- */
-export interface CanvasMetrics {
-    /**
-     * Sizes and offsets for the canvas area DOM element.
-     */
-    readonly area: CanvasAreaMetrics;
-    /**
-     * Returns transformation data between paper and scrollable pane coordinates.
-     */
-    getTransform(): PaperTransform;
-    /**
-     * Returns a immutable instance of this metrics which is guaranteed to
-     * never change even if original canvas viewport changes.
-     */
-    snapshot(): CanvasMetrics;
-    /**
-     * Returns paper size in paper coordinates.
-     */
-    getPaperSize(): Size;
-    /**
-     * Returns viewport bounds in page coordinates.
-     */
-    getViewportPageRect(): Rect;
-    /**
-     * Translates page to paper coordinates.
-     */
-    pageToPaperCoords(pageX: number, pageY: number): Vector;
-    /**
-     * Translates paper to page coordinates.
-     */
-    paperToPageCoords(paperX: number, paperY: number): Vector;
-    /**
-     * Translates client (viewport) to paper coordinates.
-     */
-    clientToPaperCoords(areaClientX: number, areaClientY: number): Vector;
-    /**
-     * Translates client (viewport) to scrollable pane coordinates.
-     */
-    clientToScrollablePaneCoords(areaClientX: number, areaClientY: number): Vector;
-    /**
-     * Translates scrollable pane to client (viewport) coordinates.
-     */
-    scrollablePaneToClientCoords(paneX: number, paneY: number): Vector;
-    /**
-     * Translates scrollable pane to paper coordinates.
-     */
-    scrollablePaneToPaperCoords(paneX: number, paneY: number): Vector;
-    /**
-     * Translates paper to scrollable pane coordinates.
-     */
-    paperToScrollablePaneCoords(paperX: number, paperY: number): Vector;
-}
-
-/**
- * Contains sizes and offsets for the canvas area DOM element.
- */
-export interface CanvasAreaMetrics {
-    /**
-     * Canvas area [client width](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth).
-     */
-    readonly clientWidth: number;
-    /**
-     * Canvas area [client height](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight).
-     */
-    readonly clientHeight: number;
-    /**
-     * Canvas area [offset width](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth).
-     */
-    readonly offsetWidth: number;
-    /**
-     * Canvas area [offset height](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight).
-     */
-    readonly offsetHeight: number;
-    /**
-     * Canvas area [scroll width](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth).
-     */
-    readonly scrollLeft: number;
-    /**
-     * Canvas area [scroll height](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight).
-     */
-    readonly scrollTop: number;
-}
-
 /**
  * Action on moving pointer with pressed main button:
  *   - `panning` - pans the viewport over canvas;
@@ -454,47 +373,6 @@ export interface CanvasAreaMetrics {
  */
 export type CanvasPointerMode = 'panning' | 'selection';
 
-/**
- * Options for {@link CanvasApi} methods affecting the viewport.
- */
-export interface ViewportOptions {
-    /**
-     * True if operation should be animated.
-     *
-     * If duration is provided and greater than zero then defaults to `true`,
-     * otherwise it is set to `false`.
-     */
-    animate?: boolean;
-    /**
-     * Animation duration in milliseconds.
-     *
-     * Implicitly sets `animate: true` if greater than zero.
-     *
-     * @default 500
-     */
-    duration?: number;
-}
-
-/**
- * Options for {@link CanvasApi.centerTo} method.
- */
-export interface CenterToOptions extends ViewportOptions {
-    /**
-     * Scale to set when changing the viewport.
-     */
-    scale?: number;
-}
-
-/**
- * Options for {@link CanvasApi} methods affecting canvas scale.
- */
-export interface ScaleOptions extends ViewportOptions {
-    /**
-     * Scale pivot position in paper coordinates.
-     */
-    pivot?: Vector;
-}
-
 /**
  * Options for the behavior of operation affecting scale on the canvas.
  */