react-svg-canvas 0.1.0 → 0.1.1

package/README.md

@@ -9,6 +9,7 @@ A React library for building interactive SVG canvas applications with pan, zoom,
 - **Selection System** - Multi-select, rectangle selection, selection bounds
 - **Drag & Drop** - Smooth dragging with window-level event handling
 - **Resize Handles** - 8-point resize with min/max constraints
+- **Rotation** - Object and group rotation with snap angles and pivot point manipulation
 - **Snapping** - Figma-style snapping to edges, centers, grid, and matching sizes
 - **Geometry Utilities** - Bounds operations, transforms, coordinate conversion
 - **Spatial Queries** - Hit testing, rectangle selection, culling
@@ -367,6 +368,189 @@ const config: SnapConfiguration = {
 
 ---
 
+### Rotation System
+
+Object and group rotation with visual snap zones and pivot point manipulation.
+
+#### useRotatable
+
+Provides rotation interaction with visual snap zones. When the pointer is within the inner portion of the rotation arc (default 75%), angles snap to predefined values.
+
+```tsx
+import { useRotatable, DEFAULT_SNAP_ANGLES } from 'react-svg-canvas'
+
+function RotatableObject({ bounds, rotation, onRotate }) {
+  const { translateTo, translateFrom } = useSvgCanvas()
+
+  const {
+    rotationState,
+    handleRotateStart,
+    rotateProps,
+    checkSnapZone,
+    arcRadius,
+    pivotPosition
+  } = useRotatable({
+    bounds,
+    rotation,
+    pivotX: 0.5,
+    pivotY: 0.5,
+    snapAngles: DEFAULT_SNAP_ANGLES,  // 15° intervals: [0, 15, 30, ...]
+    snapZoneRatio: 0.75,              // Inner 75% of arc triggers snapping
+    translateTo,
+    translateFrom,
+    screenSpaceSnapZone: true,        // Consistent UX at all zoom levels
+    onRotate: (angle, isSnapped) => onRotate(angle),
+    onRotateEnd: (angle) => console.log('Final:', angle)
+  })
+
+  return (
+    <g>
+      <rect {...bounds} />
+      <RotationHandle
+        position={pivotPosition}
+        arcRadius={arcRadius}
+        isInSnapZone={rotationState.isInSnapZone}
+        onPointerDown={handleRotateStart}
+        {...rotateProps}
+      />
+    </g>
+  )
+}
+```
+
+##### CRDT-Friendly State
+
+For collaborative editing with external state (e.g., Yjs), use getter functions to avoid stale closures:
+
+```tsx
+const { handleRotateStart } = useRotatable({
+  bounds,
+  rotation,
+  // Getters are called at drag start for fresh values
+  getBounds: () => yObject.get('bounds'),
+  getRotation: () => yObject.get('rotation'),
+  getPivot: () => ({ x: yObject.get('pivotX'), y: yObject.get('pivotY') }),
+  onRotate: (angle) => yObject.set('rotation', angle)
+})
+```
+
+#### usePivotDrag
+
+Drag interaction for manipulating an object's rotation pivot point.
+
+```tsx
+import { usePivotDrag, DEFAULT_PIVOT_SNAP_POINTS } from 'react-svg-canvas'
+
+function PivotHandle({ bounds, rotation, pivotX, pivotY, onPivotChange }) {
+  const { translateTo } = useSvgCanvas()
+
+  const {
+    pivotState,
+    handlePivotDragStart,
+    pivotDragProps,
+    getPositionCompensation
+  } = usePivotDrag({
+    bounds,
+    rotation,
+    pivotX,
+    pivotY,
+    snapPoints: DEFAULT_PIVOT_SNAP_POINTS,  // 9 points: corners, edges, center
+    snapThreshold: 0.08,
+    translateTo,
+    onDrag: (pivot, snappedPoint, positionCompensation) => {
+      // positionCompensation adjusts object position to keep it visually in place
+      onPivotChange(pivot, positionCompensation)
+    },
+    onDragEnd: (pivot, positionCompensation) => {
+      console.log('Final pivot:', pivot)
+    }
+  })
+
+  return (
+    <circle
+      cx={bounds.x + bounds.width * pivotX}
+      cy={bounds.y + bounds.height * pivotY}
+      r={6}
+      fill={pivotState.snappedPoint ? 'blue' : 'gray'}
+      onPointerDown={handlePivotDragStart}
+      {...pivotDragProps}
+    />
+  )
+}
+```
+
+#### useGroupPivot
+
+Manages a shared pivot point for rotating multiple selected objects together.
+
+```tsx
+import { useGroupPivot } from 'react-svg-canvas'
+
+function GroupRotationUI({ selectedObjects, selectionBounds }) {
+  const {
+    groupPivotState,
+    groupPivot,
+    handleGroupPivotDragStart,
+    groupPivotDragProps,
+    rotateObjectsAroundPivot,
+    resetPivotToCenter,
+    setGroupPivot
+  } = useGroupPivot({
+    objects: selectedObjects,  // Array of { id, bounds, rotation, pivotX?, pivotY? }
+    selectionBounds,
+    onRotate: (angle, transformedObjects) => {
+      // transformedObjects: { id, x, y, rotation }[]
+      updateObjects(transformedObjects)
+    }
+  })
+
+  return (
+    <>
+      {/* Pivot handle */}
+      <circle
+        cx={groupPivot.x}
+        cy={groupPivot.y}
+        r={8}
+        fill={groupPivotState.isPivotCustom ? 'orange' : 'white'}
+        onPointerDown={handleGroupPivotDragStart}
+        {...groupPivotDragProps}
+      />
+
+      {/* Reset button */}
+      <button onClick={resetPivotToCenter}>Reset Pivot</button>
+    </>
+  )
+}
+```
+
+#### Rotation Utilities
+
+```tsx
+import {
+  // Constants
+  DEFAULT_SNAP_ANGLES,           // [0, 15, 30, 45, ..., 345]
+  DEFAULT_SNAP_ZONE_RATIO,       // 0.75
+  DEFAULT_PIVOT_SNAP_THRESHOLD,  // 0.08
+
+  // Angle utilities
+  getAngleFromCenter,            // (center, point) => degrees
+  snapAngle,                     // (angle, snapAngles, isInSnapZone) => angle
+  findClosestSnapAngle,          // (angle, snapAngles) => snapAngle
+
+  // Pivot utilities
+  getPivotPosition,              // (bounds, pivotX, pivotY) => Point
+  calculatePivotCompensation,    // Position adjustment when pivot moves
+  canvasToPivot,                 // Convert canvas coords to normalized pivot
+  snapPivot,                     // Snap to nearest snap point
+
+  // Rotation transforms
+  rotatePointAroundCenter,       // (point, center, angleDeg) => Point
+  rotateObjectAroundPivot        // Transform object position during rotation
+} from 'react-svg-canvas'
+```
+
+---
+
 ### Geometry Utilities
 
 #### Bounds Operations
@@ -520,6 +704,30 @@ interface ToolEvent {
 }
 
 type ResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
+
+// Rotation types
+interface RotationState {
+  isRotating: boolean
+  startAngle: number
+  currentAngle: number
+  centerX: number
+  centerY: number
+  isInSnapZone: boolean
+}
+
+interface PivotState {
+  isDragging: boolean
+  pivotX: number           // 0-1 normalized
+  pivotY: number           // 0-1 normalized
+  snappedPoint: Point | null
+}
+
+interface GroupPivotState {
+  isDragging: boolean
+  pivotX: number           // Canvas coordinates
+  pivotY: number           // Canvas coordinates
+  isPivotCustom: boolean   // User moved pivot from default center
+}
 ```
 
 ---

package/lib/geometry/index.d.ts

@@ -4,3 +4,5 @@
 export * from './math';
 export * from './bounds';
 export * from './transforms';
+export * from './view';
+export * from './resize';

package/lib/geometry/index.js

@@ -4,4 +4,6 @@
 export * from './math';
 export * from './bounds';
 export * from './transforms';
+export * from './view';
+export * from './resize';
 // vim: ts=4

package/lib/geometry/math.d.ts

@@ -42,3 +42,34 @@ export declare function degToRad(degrees: number): number;
  * Convert radians to degrees
  */
 export declare function radToDeg(radians: number): number;
+/**
+ * Pre-calculated rotation matrix for performance.
+ * When performing multiple operations with the same rotation angle,
+ * this avoids redundant Math.cos/sin calls.
+ */
+export interface RotationMatrix {
+    degrees: number;
+    radians: number;
+    cos: number;
+    sin: number;
+}
+/**
+ * Create a rotation matrix from angle in degrees
+ */
+export declare function createRotationMatrix(degrees: number): RotationMatrix;
+/**
+ * Rotate a point around center using pre-calculated matrix
+ */
+export declare function rotatePointWithMatrix(point: Point, center: Point, matrix: RotationMatrix): Point;
+/**
+ * Un-rotate a point (inverse rotation) using pre-calculated matrix
+ */
+export declare function unrotatePointWithMatrix(point: Point, center: Point, matrix: RotationMatrix): Point;
+/**
+ * Rotate a delta (vector) using pre-calculated matrix
+ */
+export declare function rotateDeltaWithMatrix(dx: number, dy: number, matrix: RotationMatrix): [number, number];
+/**
+ * Un-rotate a delta (inverse rotation) using pre-calculated matrix
+ */
+export declare function unrotateDeltaWithMatrix(dx: number, dy: number, matrix: RotationMatrix): [number, number];

package/lib/geometry/math.js

@@ -77,4 +77,57 @@ export function degToRad(degrees) {
 export function radToDeg(radians) {
     return radians * 180 / Math.PI;
 }
+/**
+ * Create a rotation matrix from angle in degrees
+ */
+export function createRotationMatrix(degrees) {
+    const radians = degrees * Math.PI / 180;
+    return {
+        degrees,
+        radians,
+        cos: Math.cos(radians),
+        sin: Math.sin(radians)
+    };
+}
+/**
+ * Rotate a point around center using pre-calculated matrix
+ */
+export function rotatePointWithMatrix(point, center, matrix) {
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    return {
+        x: center.x + dx * matrix.cos - dy * matrix.sin,
+        y: center.y + dx * matrix.sin + dy * matrix.cos
+    };
+}
+/**
+ * Un-rotate a point (inverse rotation) using pre-calculated matrix
+ */
+export function unrotatePointWithMatrix(point, center, matrix) {
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    // Inverse rotation: use -sin instead of sin
+    return {
+        x: center.x + dx * matrix.cos + dy * matrix.sin,
+        y: center.y - dx * matrix.sin + dy * matrix.cos
+    };
+}
+/**
+ * Rotate a delta (vector) using pre-calculated matrix
+ */
+export function rotateDeltaWithMatrix(dx, dy, matrix) {
+    return [
+        dx * matrix.cos - dy * matrix.sin,
+        dx * matrix.sin + dy * matrix.cos
+    ];
+}
+/**
+ * Un-rotate a delta (inverse rotation) using pre-calculated matrix
+ */
+export function unrotateDeltaWithMatrix(dx, dy, matrix) {
+    return [
+        dx * matrix.cos + dy * matrix.sin,
+        -dx * matrix.sin + dy * matrix.cos
+    ];
+}
 // vim: ts=4

package/lib/geometry/resize.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Rotation-aware resize utilities
+ *
+ * These utilities handle resizing objects that are rotated around a pivot point.
+ * The key challenge is keeping the anchor point (opposite corner from the resize handle)
+ * fixed on screen while the object changes size.
+ */
+import type { Point, Bounds, ResizeHandle } from '../types';
+import type { RotationMatrix } from './math';
+/**
+ * Get the anchor point (opposite corner/edge) for a resize handle.
+ * Returns normalized coordinates (0, 0.5, or 1).
+ */
+export declare function getAnchorForHandle(handle: ResizeHandle): Point;
+/**
+ * Calculate the initial anchor screen position for a rotated object.
+ * The anchor is rotated around the pivot point.
+ */
+export declare function getRotatedAnchorPosition(bounds: Bounds, anchor: Point, pivot: Point, rotationMatrix: RotationMatrix): Point;
+/**
+ * Calculate new size based on handle and mouse delta in object-local space.
+ */
+export declare function calculateResizedDimensions(handle: ResizeHandle, originalWidth: number, originalHeight: number, localDx: number, localDy: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculate new position to keep anchor point fixed during rotated resize.
+ *
+ * The math works as follows:
+ * 1. Calculate the offset from pivot to anchor in the new (resized) object
+ * 2. Rotate this offset to screen space
+ * 3. The new pivot screen position = anchor screen position - rotated offset
+ * 4. From pivot screen position, derive the new object position
+ */
+export declare function calculateResizedPosition(newWidth: number, newHeight: number, anchor: Point, pivot: Point, anchorScreenPos: Point, rotationMatrix: RotationMatrix): Point;
+/**
+ * State for tracking a resize operation.
+ * This captures all the initial values needed to calculate new bounds
+ * as the user drags the resize handle.
+ */
+export interface ResizeState {
+    startX: number;
+    startY: number;
+    handle: ResizeHandle;
+    originalBounds: Bounds;
+    pivot: Point;
+    anchor: Point;
+    anchorScreenPos: Point;
+    rotationMatrix: RotationMatrix;
+}
+/**
+ * Initialize resize state for a rotated object.
+ * Call this when starting a resize operation.
+ *
+ * @param startPoint - Initial mouse/pointer position in canvas coords
+ * @param handle - Which resize handle is being dragged
+ * @param bounds - Current object bounds
+ * @param pivot - Pivot point in normalized coords (0-1)
+ * @param rotation - Object rotation in degrees
+ */
+export declare function initResizeState(startPoint: Point, handle: ResizeHandle, bounds: Bounds, pivot: Point, rotation: number): ResizeState;
+/**
+ * Calculate new bounds during resize, keeping anchor fixed.
+ *
+ * @param state - Resize state from initResizeState
+ * @param currentPoint - Current mouse/pointer position in canvas coords
+ * @param minWidth - Minimum allowed width (default 10)
+ * @param minHeight - Minimum allowed height (default 10)
+ * @returns New bounds with position adjusted to keep anchor fixed
+ */
+export declare function calculateResizeBounds(state: ResizeState, currentPoint: Point, minWidth?: number, minHeight?: number): Bounds;

package/lib/geometry/resize.js

@@ -0,0 +1,158 @@
+/**
+ * Rotation-aware resize utilities
+ *
+ * These utilities handle resizing objects that are rotated around a pivot point.
+ * The key challenge is keeping the anchor point (opposite corner from the resize handle)
+ * fixed on screen while the object changes size.
+ */
+import { createRotationMatrix, unrotateDeltaWithMatrix } from './math';
+/**
+ * Get the anchor point (opposite corner/edge) for a resize handle.
+ * Returns normalized coordinates (0, 0.5, or 1).
+ */
+export function getAnchorForHandle(handle) {
+    switch (handle) {
+        case 'nw': return { x: 1, y: 1 }; // anchor SE
+        case 'n': return { x: 0.5, y: 1 }; // anchor S center
+        case 'ne': return { x: 0, y: 1 }; // anchor SW
+        case 'e': return { x: 0, y: 0.5 }; // anchor W center
+        case 'se': return { x: 0, y: 0 }; // anchor NW
+        case 's': return { x: 0.5, y: 0 }; // anchor N center
+        case 'sw': return { x: 1, y: 0 }; // anchor NE
+        case 'w': return { x: 1, y: 0.5 }; // anchor E center
+    }
+}
+/**
+ * Calculate the initial anchor screen position for a rotated object.
+ * The anchor is rotated around the pivot point.
+ */
+export function getRotatedAnchorPosition(bounds, anchor, pivot, rotationMatrix) {
+    const anchorLocalX = bounds.x + bounds.width * anchor.x;
+    const anchorLocalY = bounds.y + bounds.height * anchor.y;
+    const pivotAbsX = bounds.x + bounds.width * pivot.x;
+    const pivotAbsY = bounds.y + bounds.height * pivot.y;
+    // Rotate anchor around pivot
+    return {
+        x: pivotAbsX + (anchorLocalX - pivotAbsX) * rotationMatrix.cos - (anchorLocalY - pivotAbsY) * rotationMatrix.sin,
+        y: pivotAbsY + (anchorLocalX - pivotAbsX) * rotationMatrix.sin + (anchorLocalY - pivotAbsY) * rotationMatrix.cos
+    };
+}
+/**
+ * Calculate new size based on handle and mouse delta in object-local space.
+ */
+export function calculateResizedDimensions(handle, originalWidth, originalHeight, localDx, localDy) {
+    let width = originalWidth;
+    let height = originalHeight;
+    switch (handle) {
+        case 'nw':
+            width = originalWidth - localDx;
+            height = originalHeight - localDy;
+            break;
+        case 'n':
+            height = originalHeight - localDy;
+            break;
+        case 'ne':
+            width = originalWidth + localDx;
+            height = originalHeight - localDy;
+            break;
+        case 'e':
+            width = originalWidth + localDx;
+            break;
+        case 'se':
+            width = originalWidth + localDx;
+            height = originalHeight + localDy;
+            break;
+        case 's':
+            height = originalHeight + localDy;
+            break;
+        case 'sw':
+            width = originalWidth - localDx;
+            height = originalHeight + localDy;
+            break;
+        case 'w':
+            width = originalWidth - localDx;
+            break;
+    }
+    return { width, height };
+}
+/**
+ * Calculate new position to keep anchor point fixed during rotated resize.
+ *
+ * The math works as follows:
+ * 1. Calculate the offset from pivot to anchor in the new (resized) object
+ * 2. Rotate this offset to screen space
+ * 3. The new pivot screen position = anchor screen position - rotated offset
+ * 4. From pivot screen position, derive the new object position
+ */
+export function calculateResizedPosition(newWidth, newHeight, anchor, pivot, anchorScreenPos, rotationMatrix) {
+    // The anchor offset from pivot (in local coords) after resize
+    const newAnchorOffsetX = newWidth * (anchor.x - pivot.x);
+    const newAnchorOffsetY = newHeight * (anchor.y - pivot.y);
+    // Rotate this offset to get screen-space offset from pivot to anchor
+    const rotatedOffsetX = newAnchorOffsetX * rotationMatrix.cos - newAnchorOffsetY * rotationMatrix.sin;
+    const rotatedOffsetY = newAnchorOffsetX * rotationMatrix.sin + newAnchorOffsetY * rotationMatrix.cos;
+    // The pivot screen position should be such that pivot + rotatedOffset = anchorScreen
+    const newPivotScreenX = anchorScreenPos.x - rotatedOffsetX;
+    const newPivotScreenY = anchorScreenPos.y - rotatedOffsetY;
+    // Now pivot = (newX + newWidth * pivotX, newY + newHeight * pivotY)
+    // So newX = pivotScreenX - newWidth * pivotX, etc.
+    return {
+        x: newPivotScreenX - newWidth * pivot.x,
+        y: newPivotScreenY - newHeight * pivot.y
+    };
+}
+/**
+ * Initialize resize state for a rotated object.
+ * Call this when starting a resize operation.
+ *
+ * @param startPoint - Initial mouse/pointer position in canvas coords
+ * @param handle - Which resize handle is being dragged
+ * @param bounds - Current object bounds
+ * @param pivot - Pivot point in normalized coords (0-1)
+ * @param rotation - Object rotation in degrees
+ */
+export function initResizeState(startPoint, handle, bounds, pivot, rotation) {
+    const rotationMatrix = createRotationMatrix(rotation);
+    const anchor = getAnchorForHandle(handle);
+    const anchorScreenPos = getRotatedAnchorPosition(bounds, anchor, pivot, rotationMatrix);
+    return {
+        startX: startPoint.x,
+        startY: startPoint.y,
+        handle,
+        originalBounds: { ...bounds },
+        pivot,
+        anchor,
+        anchorScreenPos,
+        rotationMatrix
+    };
+}
+/**
+ * Calculate new bounds during resize, keeping anchor fixed.
+ *
+ * @param state - Resize state from initResizeState
+ * @param currentPoint - Current mouse/pointer position in canvas coords
+ * @param minWidth - Minimum allowed width (default 10)
+ * @param minHeight - Minimum allowed height (default 10)
+ * @returns New bounds with position adjusted to keep anchor fixed
+ */
+export function calculateResizeBounds(state, currentPoint, minWidth = 10, minHeight = 10) {
+    // Calculate screen delta
+    const screenDx = currentPoint.x - state.startX;
+    const screenDy = currentPoint.y - state.startY;
+    // Un-rotate to get local (object space) delta
+    const [localDx, localDy] = unrotateDeltaWithMatrix(screenDx, screenDy, state.rotationMatrix);
+    // Calculate new dimensions
+    let { width, height } = calculateResizedDimensions(state.handle, state.originalBounds.width, state.originalBounds.height, localDx, localDy);
+    // Enforce minimum size
+    width = Math.max(width, minWidth);
+    height = Math.max(height, minHeight);
+    // Calculate position to keep anchor fixed
+    const position = calculateResizedPosition(width, height, state.anchor, state.pivot, state.anchorScreenPos, state.rotationMatrix);
+    return {
+        x: position.x,
+        y: position.y,
+        width,
+        height
+    };
+}
+// vim: ts=4

package/lib/geometry/view.d.ts

@@ -0,0 +1,37 @@
+/**
+ * View/viewport coordinate utilities
+ *
+ * These utilities convert between canvas coordinates and view-local coordinates.
+ * A "view" is a rectangular viewport (using Bounds type) that defines
+ * a portion of the canvas.
+ */
+import type { Point, Bounds } from '../types';
+/**
+ * Convert canvas coordinates to view-local coordinates
+ * @param point - Point in canvas coordinate space
+ * @param view - The view/viewport (x, y defines top-left corner)
+ * @returns Point relative to view's top-left corner
+ */
+export declare function canvasToView(point: Point, view: Bounds): Point;
+/**
+ * Convert view-local coordinates to canvas coordinates
+ * @param point - Point relative to view's top-left corner
+ * @param view - The view/viewport
+ * @returns Point in canvas coordinate space
+ */
+export declare function viewToCanvas(point: Point, view: Bounds): Point;
+/**
+ * Check if a point (in canvas coords) is inside a view
+ * @param point - Point in canvas coordinates
+ * @param view - The view/viewport bounds
+ * @returns true if point is inside the view
+ */
+export declare function isPointInView(point: Point, view: Bounds): boolean;
+/**
+ * Check if bounds intersects with a view
+ * Uses AABB (axis-aligned bounding box) intersection test.
+ * @param bounds - Rectangle to test
+ * @param view - The view/viewport bounds
+ * @returns true if bounds intersects with view
+ */
+export declare function boundsIntersectsView(bounds: Bounds, view: Bounds): boolean;

package/lib/geometry/view.js

@@ -0,0 +1,61 @@
+/**
+ * View/viewport coordinate utilities
+ *
+ * These utilities convert between canvas coordinates and view-local coordinates.
+ * A "view" is a rectangular viewport (using Bounds type) that defines
+ * a portion of the canvas.
+ */
+/**
+ * Convert canvas coordinates to view-local coordinates
+ * @param point - Point in canvas coordinate space
+ * @param view - The view/viewport (x, y defines top-left corner)
+ * @returns Point relative to view's top-left corner
+ */
+export function canvasToView(point, view) {
+    return {
+        x: point.x - view.x,
+        y: point.y - view.y
+    };
+}
+/**
+ * Convert view-local coordinates to canvas coordinates
+ * @param point - Point relative to view's top-left corner
+ * @param view - The view/viewport
+ * @returns Point in canvas coordinate space
+ */
+export function viewToCanvas(point, view) {
+    return {
+        x: point.x + view.x,
+        y: point.y + view.y
+    };
+}
+/**
+ * Check if a point (in canvas coords) is inside a view
+ * @param point - Point in canvas coordinates
+ * @param view - The view/viewport bounds
+ * @returns true if point is inside the view
+ */
+export function isPointInView(point, view) {
+    return (point.x >= view.x &&
+        point.x <= view.x + view.width &&
+        point.y >= view.y &&
+        point.y <= view.y + view.height);
+}
+/**
+ * Check if bounds intersects with a view
+ * Uses AABB (axis-aligned bounding box) intersection test.
+ * @param bounds - Rectangle to test
+ * @param view - The view/viewport bounds
+ * @returns true if bounds intersects with view
+ */
+export function boundsIntersectsView(bounds, view) {
+    const boundsRight = bounds.x + bounds.width;
+    const boundsBottom = bounds.y + bounds.height;
+    const viewRight = view.x + view.width;
+    const viewBottom = view.y + view.height;
+    return !(bounds.x > viewRight ||
+        boundsRight < view.x ||
+        bounds.y > viewBottom ||
+        boundsBottom < view.y);
+}
+// vim: ts=4

package/lib/hooks/index.d.ts

@@ -1,5 +1,7 @@
 /**
  * Hooks - re-exports
  */
-export * from './useDraggable';
-export * from './useResizable';
+export { useDraggable, svgTransformCoordinates } from './useDraggable';
+export type { UseDraggableOptions, UseDraggableReturn, SnapDragFn, SnapDragResult } from './useDraggable';
+export { useResizable } from './useResizable';
+export type { UseResizableOptions, UseResizableReturn, SnapResizeFn, SnapResizeResult } from './useResizable';

package/lib/hooks/index.js

@@ -1,6 +1,6 @@
 /**
  * Hooks - re-exports
  */
-export * from './useDraggable';
-export * from './useResizable';
+export { useDraggable, svgTransformCoordinates } from './useDraggable';
+export { useResizable } from './useResizable';
 // vim: ts=4