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

chore(core): cleanup and replace const with function

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-07 12:27:41 +01:00
committed by Braks
parent 5abe4ca2e5
commit bb2c4f449a
16 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/utils/autopan.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import type { Dimensions, XYPosition } from '~/types'
// returns a number between 0 and 1 that represents the velocity of the movement
// when the mouse is close to the edge of the canvas
const calcAutoPanVelocity = (value: number, min: number, max: number) => {
function calcAutoPanVelocity(value: number, min: number, max: number) {
if (value < min) {
return clamp(Math.abs(value - min), 1, 50) / 50
} else if (value > max) {
@@ -12,7 +12,7 @@ const calcAutoPanVelocity = (value: number, min: number, max: number) => {
return 0
}
export const calcAutoPan = (pos: XYPosition, bounds: Dimensions) => {
export function calcAutoPan(pos: XYPosition, bounds: Dimensions) {
const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20
const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20
packages/core/src/utils/changes.ts
+3 -6
View File
@@ -99,13 +99,10 @@ function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
}
}
export const applyChanges = <
export function applyChanges<
T extends FlowElement = FlowElement,
C extends ElementChange = T extends GraphNode ? NodeChange : EdgeChange,
>(
changes: C[],
elements: T[],
): T[] => {
>(changes: C[], elements: T[]): T[] {
const addRemoveChanges = changes.filter((c) => c.type === 'add' || c.type === 'remove') as (
| NodeAddChange
| EdgeAddChange
@@ -213,7 +210,7 @@ export const createRemoveChange = (id: string): NodeRemoveChange | EdgeRemoveCha
type: 'remove',
})
export const getSelectionChanges = (elements: FlowElements, selectedIds: string[]) => {
export function getSelectionChanges(elements: FlowElements, selectedIds: string[]) {
return elements.reduce(
(res, item) => {
let willBeSelected = selectedIds.includes(item.id)
packages/core/src/utils/drag.ts
+2 -2
View File
@@ -124,12 +124,12 @@ export function getExtent<T extends NodeDragItem | GraphNode>(item: T, extent?:
return currentExtent as CoordinateExtent
}
export const calcNextPosition = (
export function calcNextPosition(
node: GraphNode | NodeDragItem,
nextPosition: XYPosition,
nodeExtent?: CoordinateExtent,
parentNode?: GraphNode,
) => {
) {
const extent = getExtent(node, nodeExtent, parentNode)
const clampedPos = clampPosition(nextPosition, extent)
packages/core/src/utils/edge.ts
+5 -5
View File
@@ -2,7 +2,7 @@ import { isNumber } from '@vueuse/core'
import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
import { Position } from '~/types'
export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
export function getHandlePosition(position: Position, rect: Rect, handle?: HandleElement): XYPosition {
const x = (handle?.x ?? 0) + rect.x
const y = (handle?.y ?? 0) + rect.y
const width = handle?.width ?? rect.width
@@ -32,7 +32,7 @@ export const getHandlePosition = (position: Position, rect: Rect, handle?: Handl
}
}
export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined => {
export function getHandle(bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined {
if (!bounds.length) return undefined
let handle
@@ -42,14 +42,14 @@ export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null
return handle || bounds[0]
}
export const getEdgePositions = (
export function getEdgePositions(
sourceNode: GraphNode,
sourceHandle: HandleElement | undefined,
sourcePosition: Position,
targetNode: GraphNode,
targetHandle: HandleElement | undefined,
targetPosition: Position,
): EdgePositions => {
): EdgePositions {
const sourceHandlePos = getHandlePosition(
sourcePosition,
{
@@ -127,7 +127,7 @@ export function isEdgeVisible({
return overlappingArea > 0
}
export const groupEdgesByZLevel = (edges: GraphEdge[], findNode: Actions['findNode'], elevateEdgesOnSelect = false) => {
export function groupEdgesByZLevel(edges: GraphEdge[], findNode: Actions['findNode'], elevateEdgesOnSelect = false) {
let maxLevel = -1
const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {
packages/core/src/utils/general.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event
export const getEventPosition = (event: MouseEvent | TouchEvent, bounds?: DOMRect) => {
export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
const isMouseTriggered = isMouseEvent(event)
const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX
const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY
packages/core/src/utils/graph.ts
+21 -18
View File
@@ -26,7 +26,7 @@ export const nodeToRect = (node: GraphNode): Rect => ({
height: node.dimensions.height || 0,
})
export const getOverlappingArea = (rectA: Rect, rectB: Rect) => {
export function getOverlappingArea(rectA: Rect, rectB: Rect) {
const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x))
const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y))
@@ -45,7 +45,7 @@ export const clampPosition = (position: XYPosition, extent: CoordinateExtent): X
y: clamp(position.y, extent[0][1], extent[1][1]),
})
export const getHostForElement = (element: HTMLElement): Document => {
export function getHostForElement(element: HTMLElement): Document {
const doc = element.getRootNode() as Document
const window = useWindow()
@@ -67,7 +67,7 @@ export const isGraphNode = <Data = ElementData>(element: MaybeElement): element
export const isRect = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y
export const parseNode = (node: Node, defaults?: Partial<GraphNode>): GraphNode => {
export function parseNode(node: Node, defaults?: Partial<GraphNode>): GraphNode {
let defaultValues = defaults
if (!isGraphNode(node)) {
defaultValues = {
@@ -105,7 +105,7 @@ export const parseNode = (node: Node, defaults?: Partial<GraphNode>): GraphNode
}
}
export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge => {
export function parseEdge(edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge {
const events = isDef(edge.events) ? edge.events : defaults?.events && isDef(defaults?.events) ? defaults?.events : {}
const data = isDef(edge.data) ? edge.data : defaults?.data && isDef(defaults?.data) ? defaults?.data : {}
@@ -159,7 +159,7 @@ export const connectionExists = (edge: Edge | Connection, elements: Elements) =>
* Intended for options API
* In composition API you can access utilities from `useVueFlow`
*/
export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) => {
export function addEdge(edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) {
if (!edgeParams.source || !edgeParams.target) {
warn("Can't create edge. An edge needs a source and a target.")
return elements
@@ -186,7 +186,7 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements, defau
* Intended for options API
* In composition API you can access utilities from `useVueFlow`
*/
export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => {
export function updateEdge(oldEdge: Edge, newConnection: Connection, elements: Elements) {
if (!newConnection.source || !newConnection.target) {
warn("Can't create new edge. An edge needs a source and a target.")
return elements
@@ -213,18 +213,18 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: E
return elements.filter((e) => e.id !== oldEdge.id)
}
export const rendererPointToPoint = ({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition => {
export function rendererPointToPoint({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
return {
x: x * tScale + tx,
y: y * tScale + ty,
}
}
export const pointToRendererPoint = (
export function pointToRendererPoint(
{ x, y }: XYPosition,
{ x: tx, y: ty, zoom: tScale }: ViewportTransform,
snapToGrid: boolean,
[snapX, snapY]: [number, number],
) => {
): XYPosition {
const position: XYPosition = {
x: (x - tx) / tScale,
y: (y - ty) / tScale,
@@ -263,7 +263,7 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
export const getRectOfNodes = (nodes: GraphNode[]) => {
export function getRectOfNodes(nodes: GraphNode[]) {
const box = nodes.reduce(
(currBox, { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 } } = {} as any) =>
getBoundsOfBoxes(
@@ -284,14 +284,14 @@ export const graphPosToZoomedPos = ({ x, y }: XYPosition, { x: tx, y: ty, zoom:
y: y * tScale + ty,
})
export const getNodesInside = (
export function getNodesInside(
nodes: GraphNode[],
rect: Rect,
{ x: tx, y: ty, zoom: tScale }: ViewportTransform = { x: 0, y: 0, zoom: 1 },
partially = false,
// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
excludeNonSelectableNodes = false,
) => {
) {
const paneRect = {
x: (rect.x - tx) / tScale,
y: (rect.y - ty) / tScale,
@@ -320,13 +320,13 @@ export const getNodesInside = (
})
}
export const getConnectedEdges = (nodes: (Node | GraphNode)[], edges: GraphEdge[]) => {
export function getConnectedEdges(nodes: (Node | GraphNode)[], edges: GraphEdge[]) {
const nodeIds = nodes.map((node) => node.id)
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
}
export const getTransformForBounds = (
export function getTransformForBounds(
bounds: Rect,
width: number,
height: number,
@@ -337,7 +337,7 @@ export const getTransformForBounds = (
x?: number
y?: number
} = { x: 0, y: 0 },
): ViewportTransform => {
): ViewportTransform {
const xZoom = width / (bounds.width * (1 + padding))
const yZoom = height / (bounds.height * (1 + padding))
const zoom = Math.min(xZoom, yZoom)
@@ -350,7 +350,7 @@ export const getTransformForBounds = (
return { x, y, zoom: clampedZoom }
}
export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition): XYZPosition => {
export function getXYZPos(parentPos: XYZPosition, computedPosition: XYZPosition): XYZPosition {
return {
x: computedPosition.x + parentPos.x,
y: computedPosition.y + parentPos.y,
@@ -358,15 +358,18 @@ export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition)
}
}
export const isParentSelected = (node: GraphNode, findNode: Actions['findNode']): boolean => {
export function isParentSelected(node: GraphNode, findNode: Actions['findNode']): boolean {
if (!node.parentNode) return false
const parent = findNode(node.parentNode)
if (!parent) return false
if (parent.selected) return true
return isParentSelected(parent, findNode)
}
export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: string): string => {
export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
if (typeof marker === 'undefined') return ''
if (typeof marker === 'string') return marker
packages/core/src/utils/log.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export class VueFlowError extends Error {
}
}
export const warn = (message: string, ...args: any[]) => {
export function warn(message: string, ...args: any[]) {
if (!productionEnvs.includes(__ENV__ || '')) {
console.warn(`[Vue Flow]: ${message}`, ...args)
}
packages/core/src/utils/node.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import type { Ref } from 'vue'
import type { Actions, GraphNode, HandleElement, Position } from '~/types'
export const getHandleBounds = (selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined => {
export function getHandleBounds(selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined {
const handles = nodeElement.querySelectorAll(`.vue-flow__handle${selector}`)
if (!handles || !handles.length) {
@@ -24,14 +24,14 @@ export const getHandleBounds = (selector: string, nodeElement: HTMLDivElement, z
})
}
export const handleNodeClick = (
export function handleNodeClick(
node: GraphNode,
multiSelectionActive: boolean,
addSelectedNodes: Actions['addSelectedNodes'],
removeSelectedNodes: Actions['removeSelectedNodes'],
nodesSelectionActive: Ref<boolean>,
unselect = false,
) => {
) {
nodesSelectionActive.value = false
if (!node.selected) {
packages/core/src/utils/store.ts
+3 -3
View File
@@ -2,7 +2,7 @@ import type { Actions, Connection, Edge, GraphEdge, GraphNode, Node } from '~/ty
export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) => {
export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[]) {
if (!edgeParams.source || !edgeParams.target) {
warn("Can't create edge. An edge needs a source and a target.")
return false
@@ -22,7 +22,7 @@ export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) =>
return edge
}
export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) => {
export function updateEdgeAction(edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) {
if (!newConnection.source || !newConnection.target) {
warn("Can't create new edge. An edge needs a source and a target.")
return false
@@ -49,7 +49,7 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
return newEdge
}
export const createGraphNodes = (nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) => {
export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) {
const parentNodes: Record<string, true> = {}
const graphNodes = nodes.map((node) => {
packages/core/src/utils/watch.ts
+2 -2
View File
@@ -3,11 +3,11 @@ import type { WatchPausableReturn } from '@vueuse/core'
import { isFunction } from '@vueuse/core'
import type { Connection, FlowProps, VueFlowStore } from '~/types'
export const useWatch = (
export function useWatch(
models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
props: FlowProps,
store: VueFlowStore,
) => {
) {
const scope = effectScope()
scope.run(() => {