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
  resizable?: boolean
  connectable?: boolean
  showGuides?: boolean
  snapToElements?: boolean

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

  // Event handlers
  onDragStart?: () => void
  onDrag?: (position: { x: number; y: number }) => void
  onDragEnd?: () => void
  onRotate?: (angle: number) => void
  onScale?: (scale: number) => void
  onConnect?: (connection: Connection) => void
}

Connection

Represents a connection between two Drager elements.

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

AnchorPosition

Valid positions for connection anchors.

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

ResizePosition

Valid positions for resize handles.

type ResizePosition = 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

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 = (connection: Connection) => {
    const { sourceId, sourceAnchor, targetId, targetAnchor } = connection
    // Handle connection
  }

  return (
    <Drager
      id="my-drager"
      rotatable
      scalable
      resizable
      connectable
      showGuides
      limit={{ minX: 0, maxX: 500, minY: 0, maxY: 500 }}
      onConnect={handleConnect}
    >
      Content
    </Drager>
  )
}