Type Definitions

DragerProps

The main props interface for the Drager component.

interface DragerProps {
  // Basic props
  id?: string
  children: React.ReactNode
  className?: string
  style?: React.CSSProperties

  // Feature flags
  rotatable?: boolean
  scalable?: boolean
  connectable?: boolean
  showGuides?: boolean
  snapToElements?: boolean

  // Constraints
  limit?: {
    minX?: number
    maxX?: number
    minY?: number
    maxY?: number
  }
  minScale?: number
  maxScale?: number
  snapThreshold?: number

  // Event handlers
  onDragStart?: () => void
  onDrag?: (position: { x: number; y: number }) => void
  onDragEnd?: () => void
  onRotate?: (angle: number) => void
  onScale?: (scale: number) => void
  onConnect?: (
    sourceId: string,
    sourceAnchor: string,
    targetId: string,
    targetAnchor: string
  ) => void
}

Connection

Represents a connection between two Drager elements.

interface Connection {
  sourceId: string
  sourceAnchor: string
  targetId: string
  targetAnchor: string
}

AnchorPosition

Valid positions for connection anchors.

type AnchorPosition = 'top' | 'right' | 'bottom' | 'left'

Usage Example

Here's how to use these types in your TypeScript code:

import { Drager } from '@es-space/es-drager-react'
import type { DragerProps, Connection, AnchorPosition } from '@es-space/es-drager-react'

// Using the component with TypeScript
function MyComponent() {
  const handleConnect = (
    sourceId: string,
    sourceAnchor: AnchorPosition,
    targetId: string,
    targetAnchor: AnchorPosition
  ) => {
    // Handle connection
  }

  return (
    <Drager
      id="my-drager"
      rotatable
      scalable
      connectable
      onConnect={handleConnect}
    >
      Content
    </Drager>
  )
}