feat(docs): Add comments to types

package.json

@@ -23,8 +23,7 @@
   "unpkg": "./dist/vue-flow.iife.js",
   "jsdelivr": "./dist/vue-flow.iife.js",
   "files": [
-    "dist",
+    "dist"
-    "docs"
   ],
   "scripts": {
     "prepare": "ts-patch install -s",

src/container/VueFlow/VueFlow.vue

@@ -83,5 +83,4 @@ export default {
 </template>
 <style>
 @import '../../style.css';
-@import '../../theme-default.css';
 </style>

src/types/components.ts

@@ -5,11 +5,16 @@ import { GraphNode, Node, NodeProps } from './node'
 import { EdgeProps } from './edge'
 import { FitViewParams } from './zoom'
 
+/** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string
+
+/** Node Components can either be a component definition or a string name */
 export type NodeComponent<N = any> =
   | Component<NodeProps<N>>
   | DefineComponent<NodeProps<N>, any, any, any, any>
   | GlobalComponentName
+
+/** Edge Components can either be a component definition or a string name */
 export type EdgeComponent<E = any> =
   | Component<EdgeProps<E>>
   | DefineComponent<EdgeProps<E>, any, any, any, any, any>
@@ -25,32 +30,51 @@ export interface HandleElement extends XYPosition, Dimensions {
   position: Position
 }
 
+/** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */
 export type ValidConnectionFunc = (connection: Connection) => boolean
 
 export interface HandleProps {
+  /** Unique id of handle element */
   id?: string
+  /** Handle type (source / target) {@link HandleType} */
   type?: string
+  /** Handle position (top, bottom, left, right) {@link Position} */
   position?: Position
+  /** A valid connection func {@link ValidConnectionFunc} */
   isValidConnection?: ValidConnectionFunc
+  /** Enable/disable connecting to handle */
   connectable?: boolean
 }
 
 export interface BackgroundProps {
+  /** The background pattern */
   variant?: BackgroundVariant
+  /** Background pattern gap */
   gap?: number
-  patternColor?: string
+  /** Background pattern size */
-  bgColor?: string
   size?: number
+  /** Background pattern color */
+  patternColor?: string
+  /** Background color */
+  bgColor?: string
+  /** Background height */
   height?: number
+  /** Background width */
   width?: number
+  /** Background x-coordinate (offset x) */
   x?: number
+  /** Background y-coordinate (offset y) */
   y?: number
 }
 
 export interface ControlProps {
+  /** Show the zoom icon */
   showZoom?: boolean
+  /** Show the fit-view icon */
   showFitView?: boolean
+  /** Show the interactive icon */
   showInteractive?: boolean
+  /** Params to use on fitView */
   fitViewParams?: FitViewParams
 }
 
@@ -65,11 +89,17 @@ export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
 export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps<N = any> {
+  /** Node color, can be either a string or a string func that receives the current node */
   nodeColor?: string | (<NC = N>(node: Node<NC> | GraphNode<NC>) => string)
+  /** Node stroke color, can be either a string or a string func that receives the current node */
   nodeStrokeColor?: string | (<NSC = N>(node: Node<NSC> | GraphNode<NSC>) => string)
+  /** Additional node class name, can be either a string or a string func that receives the current node */
   nodeClassName?: string | (<NCM = N>(node: Node<NCM> | GraphNode<NCM>) => string)
+  /** Node border radius */
   nodeBorderRadius?: number
+  /** Node stroke width */
   nodeStrokeWidth?: number
+  /** Background color of minimap */
   maskColor?: string
 }
 
@@ -100,15 +130,24 @@ export interface EdgeTextProps {
 }
 
 export interface ConnectionLineProps<N = any> {
+  /** Source X position of the connection line */
   sourceX: number
+  /** Source Y position of the connection line */
   sourceY: number
+  /** Source position of the connection line */
   sourcePosition: Position
+  /** Target X position of the connection line */
   targetX: number
+  /** Target Y position of the connection line */
   targetY: number
+  /** Target position of the connection line */
   targetPosition: Position
   connectionLineType: ConnectionLineType
   connectionLineStyle: CSSProperties
+  /** All currently stored nodes */
   nodes: GraphNode<N>[]
+  /** The source node of the connection line */
   sourceNode: GraphNode<N>
+  /** The source handle element of the connection line */
   sourceHandle: HandleElement
 }

src/types/connection.ts

@@ -1,5 +1,6 @@
 import { HandleType } from './components'
 
+/** Connection line types (same as default edge types */
 export enum ConnectionLineType {
   Bezier = 'default',
   Straight = 'straight',
@@ -7,19 +8,29 @@ export enum ConnectionLineType {
   SmoothStep = 'smoothstep',
 }
 
+/** Connection params that are passed when onConnect is called */
 export interface Connection {
+  /** Source node id */
   source: string
+  /** Target node id */
   target: string
+  /** Source handle id */
   sourceHandle?: string
+  /** Target handle id */
   targetHandle?: string
 }
 
+/** The source nodes params when connection is initiated */
 export type OnConnectStartParams = {
+  /** Source node id */
   nodeId?: string
+  /** Source handle id */
   handleId?: string
+  /** Source handle type */
   handleType?: HandleType
 }
 
+/** Connection modes, when set to loose all handles are treated as source */
 export enum ConnectionMode {
   Strict = 'strict',
   Loose = 'loose',

src/types/edge.ts

@@ -2,19 +2,29 @@ import { CSSProperties } from 'vue'
 import { Position, Element } from './flow'
 import { GraphNode } from './node'
 
+/** Edge markers */
 export enum MarkerType {
   Arrow = 'arrow',
   ArrowClosed = 'arrowclosed',
 }
 
+/** Edge marker definition */
 export interface EdgeMarker {
+  /** Unique marker id */
   id?: string
+  /** Marker type */
   type: MarkerType
+  /** Marker color */
   color?: string
+  /** Marker width */
   width?: number
+  /** Marker height */
   height?: number
+  /** Marker units */
   markerUnits?: string
+  /** Marker orientation */
   orient?: string
+  /** Marker stroke width */
   strokeWidth?: number
 }
 
@@ -29,24 +39,40 @@ export interface MarkerProps {
   strokeWidth?: number
 }
 
-export type EdgeMarkerType = string | EdgeMarker
+export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
 export interface Edge<T = any> extends Element<T> {
+  /** Source node id */
   source: string
+  /** Target node id */
   target: string
+  /** Source handle id */
   sourceHandle?: string
+  /** Target handle id */
   targetHandle?: string
+  /** Source position */
   sourcePosition?: Position
+  /** Target position */
   targetPosition?: Position
-  labelStyle?: any
+  /** Label styles (CSSProperties) */
+  labelStyle?: CSSProperties
+  /** Show label bg */
   labelShowBg?: boolean
-  labelBgStyle?: any
+  /** Label Bg styles (CSSProperties) */
+  labelBgStyle?: CSSProperties
+  /** Label Bg padding */
   labelBgPadding?: [number, number]
+  /** Label Bg border radius */
   labelBgBorderRadius?: number
+  /** Animated edge */
   animated?: boolean
+  /** EdgeMarker */
   markerStart?: EdgeMarkerType
+  /** EdgeMarker */
   markerEnd?: EdgeMarkerType
+  /** Disable/enable updating edge */
   updatable?: boolean
+  /** Disable/enable selecting edge */
   selectable?: boolean
 }