Proof of concept: base classes for options, events, interactions

src/types/api/events.ts

@@ -0,0 +1,101 @@
+import { Node, Edge, Annotation, Viewport } from './objects'
+
+export type RectPoint = 'nw' | 'ne' | 'se' | 'sw'
+
+interface EventBase<T extends string> {
+  type: T
+  altKey?: boolean
+  ctrlKey?: boolean
+  metaKey?: boolean
+  shiftKey?: boolean
+}
+
+interface MouseEvent<T extends string> extends EventBase<T> {
+  x: number
+  y: number
+  clientX: number
+  clientY: number
+}
+
+interface DragEvent<T extends string> extends MouseEvent<T> {
+  dx: number
+  dy: number
+}
+
+export interface NodePointerEvent extends MouseEvent<'nodePointer'> {
+  target: Node
+  targetIndex: number
+}
+
+export interface NodeDragEvent extends DragEvent<'nodeDrag'> {
+  target: Node
+  targetIndex: number
+}
+
+export interface EdgePointerEvent extends MouseEvent<'edgePointer'> {
+  target: Edge
+  targetIndex: number
+}
+
+export interface AnnotationPointerEvent extends MouseEvent<'annotationPointer'> {
+  target: Annotation
+  targetIndex: number
+  relatedPoint: RectPoint | null
+}
+
+export interface AnnotationDragEvent extends DragEvent<'annotationDrag'> {
+  target: Annotation
+  targetIndex: number
+}
+
+export interface AnnotationResizeEvent extends MouseEvent<'annotationResize'> {
+  target: Annotation
+  targetIndex: number
+  relatedPoint: RectPoint
+}
+
+export interface ViewportPointerEvent extends MouseEvent<'viewportPointer'> {
+  target: Viewport
+}
+
+export interface ViewportDragEvent extends DragEvent<'viewportDrag'> {
+  target: Viewport
+}
+
+export interface ViewportDragDecelerateEvent extends EventBase<'viewportDragDecelerate'> {
+  dx: number
+  dy: number
+}
+
+export interface ViewportWheelEvent extends DragEvent<'viewportWheel'> {
+  dz: number
+}
+
+export interface EventHandlers {
+  onViewportPointerEnter?: (event: ViewportPointerEvent) => void
+  onViewportPointerDown?: (event: ViewportPointerEvent) => void
+  onViewportPointerMove?: (event: ViewportPointerEvent) => void
+  onViewportDragStart?: (event: ViewportDragEvent | ViewportDragDecelerateEvent) => void
+  onViewportDrag?: (event: ViewportDragEvent | ViewportDragDecelerateEvent) => void
+  onViewportDragEnd?: (event: ViewportDragEvent | ViewportDragDecelerateEvent) => void
+  onViewportPointerUp?: (event: ViewportPointerEvent) => void
+  onViewportClick?: (event: ViewportPointerEvent) => void
+  onViewportDoubleClick?: (event: ViewportPointerEvent) => void
+  onViewportPointerLeave?: (event: ViewportPointerEvent) => void
+  onViewportWheel?: (event: ViewportWheelEvent) => void
+  onNodePointerEnter?: (event: NodePointerEvent) => void
+  onNodePointerDown?: (event: NodePointerEvent) => void
+  onNodeDragStart?: (event: NodeDragEvent) => void
+  onNodeDrag?: (event: NodeDragEvent) => void
+  onNodeDragEnd?: (event: NodeDragEvent) => void
+  onNodePointerUp?: (event: NodePointerEvent) => void
+  onNodeClick?: (event: NodePointerEvent) => void
+  onNodeDoubleClick?: (event: NodePointerEvent) => void
+  onNodePointerLeave?: (event: NodePointerEvent) => void
+  onEdgePointerEnter?: (event: EdgePointerEvent) => void
+  onEdgePointerDown?: (event: EdgePointerEvent) => void
+  onEdgePointerUp?: (event: EdgePointerEvent) => void
+  onEdgePointerLeave?: (event: EdgePointerEvent) => void
+  onEdgeClick?: (event: EdgePointerEvent) => void
+  onEdgeDoubleClick?: (event: EdgePointerEvent) => void
+}

src/types/api/index.ts

@@ -0,0 +1,3 @@
+export * from './objects'
+export * from './events'
+export * from './options'

src/types/api/objects.ts

@@ -0,0 +1,199 @@
+// viewport
+export interface Bounds {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+}
+
+export interface Coordinates {
+  x: number
+  y: number
+}
+
+export interface Viewport extends Coordinates {
+  zoom: number
+}
+
+export interface Graph {
+  nodes: Node[]
+  edges: Edge[]
+}
+
+// style
+export interface Stroke {
+  color: string
+  width: number
+}
+
+export interface FillStyle {
+  color: string
+  opacity?: number
+}
+
+// text
+export type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
+
+export type TextAlign = 'left' | 'center' | 'right' | 'justify'
+
+export type FontStyle = 'normal' | 'italic' | 'oblique'
+
+export type AnchorPosition = 'bottom' | 'left' | 'top' | 'right'
+
+export interface TextHighlightStyle extends FillStyle {
+  padding?: number | number[]
+}
+
+export interface TextStyle {
+  fontName?: string
+  fontSize?: number
+  margin?: number
+  wordWrap?: number
+  letterSpacing?: number
+  fontFamily?: string
+  fontWeight?: FontWeight
+  fontStyle?: FontStyle
+  stroke?: Stroke
+  color?: string
+  align?: TextAlign
+  anchor?: AnchorPosition
+  highlight?: TextHighlightStyle
+}
+
+// icons
+interface IconBase<Type extends string> {
+  type: Type
+  offset?: Partial<Coordinates>
+}
+
+export interface TextIcon extends IconBase<'textIcon'> {
+  content: string
+  color: string
+  /**
+   * @default 10
+   */
+  fontSize?: number
+  /**
+   * @default 'sans-serif'
+   */
+  fontFamily?: string
+  /**
+   * @default 'normal'
+   */
+  fontStyle?: FontStyle
+  /**
+   * @default 'normal'
+   */
+  fontWeight?: FontWeight
+}
+
+export interface ImageIcon extends IconBase<'imageIcon'> {
+  url: string
+  /**
+   * @default 1
+   */
+  scale?: number
+}
+
+export type IconStyle = TextIcon | ImageIcon
+
+// nodes
+export interface NodeBadge {
+  position: number
+  radius: number
+  color: string
+  icon?: IconStyle
+  stroke?: Stroke
+}
+
+export interface NodeStyle {
+  color?: string
+  icon?: IconStyle
+  stroke?: Stroke[]
+  badge?: NodeBadge[]
+  label?: TextStyle
+}
+
+export interface Node {
+  id: string
+  radius: number
+  x?: number
+  y?: number
+  fx?: number
+  fy?: number
+  label?: string
+  style?: NodeStyle
+  subgraph?: Graph
+}
+
+// edges
+export type ArrowStyle = 'forward' | 'reverse' | 'both' | 'none'
+
+export interface EdgeLabelStyle extends TextStyle {
+  anchor?: Exclude<AnchorPosition, 'left' | 'right'>
+}
+
+export interface EdgeStyle {
+  /**
+   * @default 1
+   */
+  opacity?: number
+  /**
+   * @default 'none'
+   */
+  arrow?: ArrowStyle
+  label?: EdgeLabelStyle
+  stroke?: Stroke
+}
+
+export interface Edge {
+  id: string
+  source: string
+  target: string
+  label?: string
+  style?: EdgeStyle
+}
+
+// annotations
+export interface AnnotationStyle {
+  background?: FillStyle
+  stroke?: Stroke[]
+}
+
+export interface TextAnnotationStyle extends AnnotationStyle {
+  text?: Omit<TextStyle, 'anchor'>
+  padding?: number | number[]
+}
+
+interface AnnotationType<Type extends string> {
+  type: Type
+  id: string
+  x: number
+  y: number
+  resize?: boolean
+}
+
+export interface CircleAnnotation extends AnnotationType<'circle'> {
+  radius: number
+  style: AnnotationStyle
+}
+
+export interface RectangleAnnotation extends AnnotationType<'rectangle'> {
+  height: number
+  width: number
+  style: AnnotationStyle
+}
+
+export interface TextAnnotation extends AnnotationType<'text'> {
+  content: string
+  height: number
+  width: number
+  style: TextAnnotationStyle
+}
+
+export type Annotation = CircleAnnotation | RectangleAnnotation | TextAnnotation