alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update(types): Remove unnecessary type exports

Browse Source 
* rename StringFunc for better understanding
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent 55588c3988
commit ade61ca2e1
10 changed files with 101 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/src/Basic/Basic.vue
+3 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow/src/index'
import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
import ResizableNode from './ResizableNode.vue'
const elements = ref<Elements>([
@@ -9,21 +9,13 @@ const elements = ref<Elements>([
type: 'resize',
label: 'Node 2',
position: { x: 100, y: 100 },
data: { foo: 'bar' },
class: (el) => {
return ''
},
},
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' },
])
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow({
defaultZoom: 1.5,
minZoom: 0.2,
maxZoom: 4,
})
const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
onPaneReady(({ fitView }) => {
fitView()
})
@@ -45,7 +37,7 @@ const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1
const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
</script>
<template>
<VueFlow v-model="elements" class="vue-flow-basic-example">
<VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
<template #node-resize="props">
<ResizableNode v-bind="props" />
</template>
package/src/additional-components/MiniMap/MiniMap.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { ShapeRendering, StringFunc } from '../../types'
import { ShapeRendering, MiniMapNodeFunc } from '../../types'
import { useVueFlow, useWindow } from '../../composables'
import { getBoundsofRects, getRectOfNodes } from '../../utils'
import type { MiniMapProps } from '../../types/components'
@@ -24,11 +24,11 @@ const { store } = useVueFlow()
const elementWidth = attrs.style?.width ?? defaultWidth
const elementHeight = attrs.style?.height ?? defaultHeight
const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
const nodeStrokeColorFunc: StringFunc =
const nodeColorFunc: MiniMapNodeFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
const nodeStrokeColorFunc: MiniMapNodeFunc =
props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as MiniMapNodeFunc
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
package/src/store/hooks.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { EmitFunc, FlowHooks, FlowEvents } from '~/types'
import { EmitFunc, FlowHooks } from '~/types'
// flow event hooks
export const createHooks = (): FlowHooks => ({
@@ -41,7 +41,7 @@ export const createHooks = (): FlowHooks => ({
const bind = (emit: EmitFunc, hooks: FlowHooks) => {
for (const [key, value] of Object.entries(hooks)) {
value.on((data: FlowEvents[keyof FlowHooks]) => {
value.on((data) => {
emit(key as keyof FlowHooks, data)
})
}
package/src/store/store.ts
+3 -4
View File
@@ -1,7 +1,7 @@
import useState from './state'
import useActions from './actions'
import useGetters from './getters'
import { FlowHook, FlowHooksOn, FlowOptions, Store, State } from '~/types'
import { FlowHooksOn, FlowOptions, Store, State } from '~/types'
export default (preloadedState?: FlowOptions): Store => {
const state: State = useState(preloadedState)
@@ -10,8 +10,8 @@ export default (preloadedState?: FlowOptions): Store => {
const actions = useActions(reactiveState, getters)
const hooksOn: FlowHooksOn = <any>{}
Object.entries(reactiveState.hooks).forEach(([n, h]) => {
const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
hooksOn[<keyof FlowHooksOn>name] = h.on as FlowHook['on']
const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` as keyof FlowHooksOn
hooksOn[name] = h.on as any
})
actions.setState(reactiveState)
if (preloadedState) {
@@ -21,7 +21,6 @@ export default (preloadedState?: FlowOptions): Store => {
}
return reactive({
state: reactiveState,
...hooksOn,
...toRefs(reactiveState),
...getters,
package/src/types/components.ts
+16 -12
View File
@@ -1,5 +1,5 @@
import { Component, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'
import { BackgroundVariant, Dimensions, XYPosition } from './flow'
import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
import { GraphNode, Node, NodeProps } from './node'
import { EdgeProps } from './edge'
import { FitViewParams } from './zoom'
@@ -8,15 +8,15 @@ import { FitViewParams } from './zoom'
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>
export type NodeComponent<Data = ElementData> =
| Component<NodeProps<Data>>
| DefineComponent<NodeProps<Data>, 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>
export type EdgeComponent<Data = ElementData> =
| Component<EdgeProps<Data>>
| DefineComponent<EdgeProps<Data>, any, any, any, any, any>
| GlobalComponentName
export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
@@ -62,16 +62,20 @@ export interface ControlEvents {
}
/** expects a node and returns a color value */
export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
export type MiniMapNodeFunc<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
// hack for vue-type imports
type MiniMapNodeFunc2<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
type MiniMapNodeFunc3<Data = any> = (node: Node<Data> | GraphNode<Data>) => string
export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
export interface MiniMapProps<N = any> {
export interface MiniMapProps<Data = 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)
nodeColor?: string | MiniMapNodeFunc<Data>
/** 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)
nodeStrokeColor?: string | MiniMapNodeFunc2<Data>
/** 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)
nodeClassName?: string | MiniMapNodeFunc3<Data>
/** Node border radius */
nodeBorderRadius?: number
/** Node stroke width */
package/src/types/edge.ts
+12 -11
View File
@@ -1,5 +1,5 @@
import { CSSProperties } from 'vue'
import { Position, Element } from './flow'
import { Position, Element, ElementData } from './flow'
import { GraphNode } from './node'
/** Edge markers */
@@ -41,7 +41,7 @@ export interface MarkerProps {
export type EdgeMarkerType = string | MarkerType | EdgeMarker
export interface Edge<T = any> extends Element<T> {
export interface Edge<Data = ElementData> extends Element<Data> {
/** Source node id */
source: string
/** Target node id */
@@ -89,18 +89,18 @@ export interface EdgePositions {
}
/** Internal edge type */
export type GraphEdge<T = any, N = T> = Edge<T> & {
sourceNode: GraphNode<N>
targetNode: GraphNode<N>
export type GraphEdge<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> = Edge<Data> & {
sourceNode: GraphNode<SourceNodeData>
targetNode: GraphNode<TargetNodeData>
selected?: boolean
z?: number
} & EdgePositions
/** these props are passed to edge components */
export interface EdgeProps<Data = any> {
export interface EdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData> {
id: string
sourceNode: GraphNode
targetNode: GraphNode
sourceNode: GraphNode<SourceNodeData>
targetNode: GraphNode<TargetNodeData>
label?:
| string
| {
@@ -136,10 +136,11 @@ export interface EdgeProps<Data = any> {
}
/** these props are passed to smooth step edges */
export interface SmoothStepEdgeProps<Data = any> extends EdgeProps<Data> {
export interface SmoothStepEdgeProps<Data = ElementData, SourceNodeData = any, TargetNodeData = SourceNodeData>
extends EdgeProps<Data> {
id: string
sourceNode: GraphNode
targetNode: GraphNode
sourceNode: GraphNode<SourceNodeData>
targetNode: GraphNode<TargetNodeData>
label?:
| string
| {
package/src/types/flow.ts
+25 -23
View File
@@ -5,15 +5,17 @@ import { ConnectionLineType, ConnectionMode } from './connection'
import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
/** an internal element */
export type FlowElement<Data = any> = GraphNode<Data> | GraphEdge<Data>
export type FlowElements<N = any, E = N> = (FlowElement<N> | FlowElement<E>)[]
export type ElementData = Record<any, any>
type ClassFunc<Data = any> = (element: FlowElement<Data>) => string
type StyleFunc<Data = any> = (element: FlowElement<Data>) => CSSProperties
/** an internal element */
export type FlowElement<NodeData = ElementData, EdgeData = ElementData> = GraphNode<NodeData> | GraphEdge<EdgeData>
export type FlowElements<NodeData = ElementData, EdgeData = ElementData> = (FlowElement<NodeData> | FlowElement<EdgeData>)[]
export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => string
export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => CSSProperties
/** base element props */
export interface Element<Data = any> {
export interface Element<Data extends ElementData = ElementData> {
id: string
label?:
| string
@@ -23,11 +25,11 @@ export interface Element<Data = any> {
}
type?: string
data?: Data
class?: string | ClassFunc
style?: CSSProperties | StyleFunc
class?: string | ClassFunc<Data>
style?: CSSProperties | StyleFunc<Data>
hidden?: boolean
}
export type Elements<N = any, E = any> = (Node<N> | Edge<E>)[]
export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]
/** Transform x, y, z */
export type Transform = [number, number, number]
@@ -72,27 +74,27 @@ export interface SelectionRect extends Rect {
draw: boolean
}
export type FlowExportObject<N = any, E = N> = {
nodes: GraphNode<N>[]
edges: GraphEdge<E>[]
export type FlowExportObject<NodeData = ElementData, EdgeData = ElementData> = {
nodes: GraphNode<NodeData>[]
edges: GraphEdge<EdgeData>[]
position: [number, number]
zoom: number
}
export type ToObject<N = any, E = N> = () => FlowExportObject<N, E>
export type ToObject<NodeData = ElementData, EdgeData = ElementData> = () => FlowExportObject<NodeData, EdgeData>
export type FlowInstance<N = any, E = N> = {
getElements: () => FlowElements<N, E>
getNodes: () => GraphNode<N>[]
getEdges: () => GraphEdge<E>[]
toObject: ToObject<N, E>
export type FlowInstance<NodeData = ElementData, EdgeData = ElementData> = {
getElements: () => FlowElements<NodeData, EdgeData>
getNodes: () => GraphNode<NodeData>[]
getEdges: () => GraphEdge<EdgeData>[]
toObject: ToObject<NodeData, EdgeData>
} & UseZoomPanHelper
export interface FlowProps<N = any, E = N> {
export interface FlowProps<NodeData = ElementData, EdgeData = ElementData> {
id?: string
modelValue?: Elements<N, E>
nodes?: Node<N>[]
edges?: Edge<E>[]
modelValue?: Elements<NodeData, EdgeData>
nodes?: Node<NodeData>[]
edges?: Edge<EdgeData>[]
/** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & { [key: string]: EdgeComponent }
/** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
@@ -142,4 +144,4 @@ export interface FlowProps<N = any, E = N> {
defaultEdgeOptions?: DefaultEdgeOptions
}
export type FlowOptions<N = any, E = N> = FlowProps<N, E>
export type FlowOptions<NodeData = ElementData, EdgeData = ElementData> = FlowProps<NodeData, EdgeData>
package/src/types/hooks.ts
+31 -33
View File
@@ -1,60 +1,58 @@
import { EventHook, EventHookOn } from '@vueuse/core'
import { MouseTouchEvent } from '@braks/revue-draggable'
import { D3ZoomEvent } from 'd3-zoom'
import { FlowInstance } from './flow'
import { ElementData, FlowInstance } from './flow'
import { GraphEdge } from './edge'
import { GraphNode } from './node'
import { Connection, OnConnectStartParams } from './connection'
import { FlowTransform } from './zoom'
import { EdgeChange, NodeChange } from './changes'
export interface FlowEvents<N = any, E = N> {
export interface FlowEvents<NodeData = ElementData, EdgeData = ElementData> {
nodesChange: NodeChange[]
edgesChange: EdgeChange[]
nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<N> }
nodeClick: { event: MouseTouchEvent; node: GraphNode<N> }
nodeMouseEnter: { event: MouseEvent; node: GraphNode<N> }
nodeMouseMove: { event: MouseEvent; node: GraphNode<N> }
nodeMouseLeave: { event: MouseEvent; node: GraphNode<N> }
nodeContextMenu: { event: MouseEvent; node: GraphNode<N> }
nodeDragStart: { event: MouseTouchEvent; node: GraphNode<N> }
nodeDrag: { event: MouseTouchEvent; node: GraphNode<N> }
nodeDragStop: { event: MouseTouchEvent; node: GraphNode<N> }
nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
nodeClick: { event: MouseTouchEvent; node: GraphNode<NodeData> }
nodeMouseEnter: { event: MouseEvent; node: GraphNode<NodeData> }
nodeMouseMove: { event: MouseEvent; node: GraphNode<NodeData> }
nodeMouseLeave: { event: MouseEvent; node: GraphNode<NodeData> }
nodeContextMenu: { event: MouseEvent; node: GraphNode<NodeData> }
nodeDragStart: { event: MouseTouchEvent; node: GraphNode<NodeData> }
nodeDrag: { event: MouseTouchEvent; node: GraphNode<NodeData> }
nodeDragStop: { event: MouseTouchEvent; node: GraphNode<NodeData> }
connect: Connection
connectStart: {
event: MouseEvent
} & OnConnectStartParams
connectStop: MouseEvent
connectEnd: MouseEvent
paneReady: FlowInstance<N, E>
paneReady: FlowInstance<NodeData, EdgeData>
move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
moveEnd: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
selectionContextMenu: { event: MouseEvent; nodes: GraphNode<N>[] }
selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<NodeData>[] }
selectionContextMenu: { event: MouseEvent; nodes: GraphNode<NodeData>[] }
paneScroll: WheelEvent | undefined
paneClick: MouseEvent
paneContextMenu: MouseEvent
edgeContextMenu: { event: MouseEvent; edge: GraphEdge<E> }
edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<E> }
edgeMouseMove: { event: MouseEvent; edge: GraphEdge<E> }
edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<E> }
edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<E> }
edgeClick: { event: MouseEvent; edge: GraphEdge<E> }
edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<E> }
edgeUpdate: { edge: GraphEdge<E>; connection: Connection }
edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<E> }
edgeContextMenu: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeMouseMove: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeClick: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<EdgeData> }
edgeUpdate: { edge: GraphEdge<EdgeData>; connection: Connection }
edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<EdgeData> }
}
export type FlowEvent = FlowEvents[keyof FlowEvents]
export type FlowHook<T extends FlowEvent = any> = EventHook<T>
export type FlowHookOn<T extends FlowEvent = any> = EventHookOn<T>
export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
export type FlowHooksOn<N = any, E = N> = {
[key in keyof FlowEvents<N, E> as `on${Capitalize<key>}`]: FlowHookOn<FlowEvents<N, E>[key]>
export type FlowHooks<NodeData = ElementData, EdgeData = ElementData> = {
[key in keyof FlowEvents<NodeData, EdgeData>]: EventHook<FlowEvents<NodeData, EdgeData>[key]>
}
export type FlowHooksOn<NodeData = ElementData, EdgeData = ElementData> = {
[key in keyof FlowEvents<NodeData, EdgeData> as `on${Capitalize<key>}`]: EventHookOn<FlowEvents<NodeData, EdgeData>[key]>
}
export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void
export type EmitFunc = (name: keyof FlowHooks, ...args: FlowEvents[keyof FlowEvents][]) => void
package/src/types/node.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions, ElementData } from './flow'
import { DefaultNodeTypes } from './components'
import { HandleElement, ValidConnectionFunc } from './handle'
@@ -10,7 +10,7 @@ export type NodeHandleBounds = {
target?: HandleElement[]
}
export interface Node<T = any> extends Element<T> {
export interface Node<T = ElementData> extends Element<T> {
/** node position x, y */
position: XYPosition
/** node type, can be a default type or a custom type */
@@ -37,7 +37,7 @@ export interface Node<T = any> extends Element<T> {
parentNode?: string
}
export interface GraphNode<T = any> extends Node<T> {
export interface GraphNode<T = ElementData> extends Node<T> {
/** absolute position in relation to parent elements + z-index */
computedPosition: XYZPosition
handleBounds: NodeHandleBounds
@@ -49,7 +49,7 @@ export interface GraphNode<T = any> extends Node<T> {
}
/** these props are passed to node components */
export interface NodeProps<T = any> {
export interface NodeProps<T = ElementData> {
id: string
/** node DOM-element */
nodeElement: HTMLDivElement
package/src/types/store.ts
+1 -5
View File
@@ -134,11 +134,7 @@ export interface Getters<N = any, E = N> {
getSelectedEdges: GraphEdge<E>[]
}
interface StoreBase<N = any, E = N> {
state: State<N, E>
}
export type Store<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>
export type Store<N = any, E = N> = State<N, E> & Actions<N, E> & Getters<N, E>
export type UseVueFlow<N = any, E = N> = {
id: string