From c21ac7dca49c204038736b2e615e29b67d5240a8 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 14 Mar 2022 15:40:53 +0100 Subject: [PATCH] feat(docs): Add comments to types --- package.json | 3 +-- src/container/VueFlow/VueFlow.vue | 1 - src/types/components.ts | 43 +++++++++++++++++++++++++++++-- src/types/connection.ts | 11 ++++++++ src/types/edge.ts | 32 ++++++++++++++++++++--- 5 files changed, 82 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ac8ee847..30f59d42 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,7 @@ "unpkg": "./dist/vue-flow.iife.js", "jsdelivr": "./dist/vue-flow.iife.js", "files": [ - "dist", - "docs" + "dist" ], "scripts": { "prepare": "ts-patch install -s", diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index 927d0c2f..b4b8a25a 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/src/container/VueFlow/VueFlow.vue @@ -83,5 +83,4 @@ export default { diff --git a/src/types/components.ts b/src/types/components.ts index 4def0229..089ce2f6 100644 --- a/src/types/components.ts +++ b/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 = | Component> | DefineComponent, any, any, any, any> | GlobalComponentName + +/** Edge Components can either be a component definition or a string name */ export type EdgeComponent = | Component> | DefineComponent, 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 - bgColor?: string + /** Background pattern size */ 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 = (node: Node | GraphNode) => string export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined export interface MiniMapProps { + /** Node color, can be either a string or a string func that receives the current node */ nodeColor?: string | ((node: Node | GraphNode) => string) + /** Node stroke color, can be either a string or a string func that receives the current node */ nodeStrokeColor?: string | ((node: Node | GraphNode) => string) + /** Additional node class name, can be either a string or a string func that receives the current node */ nodeClassName?: string | ((node: Node | GraphNode) => 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 { + /** 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[] + /** The source node of the connection line */ sourceNode: GraphNode + /** The source handle element of the connection line */ sourceHandle: HandleElement } diff --git a/src/types/connection.ts b/src/types/connection.ts index ac391a61..8429a934 100644 --- a/src/types/connection.ts +++ b/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', diff --git a/src/types/edge.ts b/src/types/edge.ts index 9a51450a..4e09c38f 100644 --- a/src/types/edge.ts +++ b/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 extends Element { + /** 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 }