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

chore: lint files

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-31 21:30:23 +02:00
committed by Braks
parent 9d597ff454
commit f61e5beb02
69 changed files with 623 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/EdgeAnchor.ts
+2 -2
View File
@@ -8,13 +8,13 @@ interface Props extends HTMLAttributes {
radius?: number
}
const shiftX = (x: number, shift: number, position: Position): number => {
function shiftX(x: number, shift: number, position: Position): number {
if (position === Position.Left) return x - shift
if (position === Position.Right) return x + shift
return x
}
const shiftY = (y: number, shift: number, position: Position): number => {
function shiftY(y: number, shift: number, position: Position): number {
if (position === Position.Top) return y - shift
if (position === Position.Bottom) return y + shift
return y
packages/core/src/components/Edges/utils/smoothstep.ts
+5 -3
View File
@@ -22,7 +22,7 @@ const handleDirections = {
[Position.Bottom]: { x: 0, y: 1 },
}
const getDirection = ({
function getDirection({
source,
sourcePosition = Position.Bottom,
target,
@@ -30,14 +30,16 @@ const getDirection = ({
source: XYPosition
sourcePosition: Position
target: XYPosition
}): XYPosition => {
}): XYPosition {
if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 }
}
return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 }
}
const distance = (a: XYPosition, b: XYPosition) => Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
function distance(a: XYPosition, b: XYPosition) {
return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2)
}
// With this function we try to mimic an orthogonal edge routing behaviour
// It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
packages/core/src/composables/useEdgeHooks.ts
+13 -11
View File
@@ -1,16 +1,18 @@
import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '~/types'
const createEdgeHooks = () => ({
doubleClick: createExtendedEventHook(),
click: createExtendedEventHook(),
mouseEnter: createExtendedEventHook(),
mouseMove: createExtendedEventHook(),
mouseLeave: createExtendedEventHook(),
contextMenu: createExtendedEventHook(),
updateStart: createExtendedEventHook(),
update: createExtendedEventHook(),
updateEnd: createExtendedEventHook(),
})
function createEdgeHooks() {
return {
doubleClick: createExtendedEventHook(),
click: createExtendedEventHook(),
mouseEnter: createExtendedEventHook(),
mouseMove: createExtendedEventHook(),
mouseLeave: createExtendedEventHook(),
contextMenu: createExtendedEventHook(),
updateStart: createExtendedEventHook(),
update: createExtendedEventHook(),
updateEnd: createExtendedEventHook(),
}
}
export default function useEdgeHooks(edge: GraphEdge, emits: VueFlowStore['emits']): { emit: EdgeEventsEmit; on: EdgeEventsOn } {
const edgeHooks = createEdgeHooks()
packages/core/src/composables/useHandle.ts
+3 -1
View File
@@ -11,7 +11,9 @@ interface UseHandleProps {
onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
}
const alwaysValid = () => true
function alwaysValid() {
return true
}
export default function useHandle({
handleId: _handleId,
packages/core/src/composables/useNodeHooks.ts
+13 -11
View File
@@ -1,16 +1,18 @@
import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '~/types'
const createNodeHooks = () => ({
doubleClick: createExtendedEventHook(),
click: createExtendedEventHook(),
mouseEnter: createExtendedEventHook(),
mouseMove: createExtendedEventHook(),
mouseLeave: createExtendedEventHook(),
contextMenu: createExtendedEventHook(),
dragStart: createExtendedEventHook(),
drag: createExtendedEventHook(),
dragStop: createExtendedEventHook(),
})
function createNodeHooks() {
return {
doubleClick: createExtendedEventHook(),
click: createExtendedEventHook(),
mouseEnter: createExtendedEventHook(),
mouseMove: createExtendedEventHook(),
mouseLeave: createExtendedEventHook(),
contextMenu: createExtendedEventHook(),
dragStart: createExtendedEventHook(),
drag: createExtendedEventHook(),
dragStop: createExtendedEventHook(),
}
}
export default function useNodeHooks(node: GraphNode, emits: VueFlowStore['emits']): { emit: NodeEventsEmit; on: NodeEventsOn } {
const nodeHooks = createNodeHooks()
packages/core/src/composables/useViewport.ts
+1 -1
View File
@@ -7,7 +7,7 @@ interface ExtendedViewport extends ViewportFunctions {
const DEFAULT_PADDING = 0.1
const noop = () => {}
function noop() {}
const initialViewportHelper: ExtendedViewport = {
zoomIn: noop,
packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+9 -3
View File
@@ -51,9 +51,15 @@ const groups = controlledComputed(
() => groupEdgesByZLevel(getEdges, findNode, elevateEdgesOnSelect),
)
const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
function selectable(edgeSelectable?: boolean) {
return typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable
}
function updatable(edgeUpdatable?: EdgeUpdatable) {
return typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable
}
function focusable(edgeFocusable?: boolean) {
return typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable
}
function getType(type?: string, template?: GraphEdge['template']) {
const name = type || 'default'
packages/core/src/container/NodeRenderer/NodeRenderer.vue
+12 -5
View File
@@ -44,11 +44,18 @@ onMounted(() => {
onBeforeUnmount(() => resizeObserver?.disconnect())
const draggable = (nodeDraggable?: boolean) => (typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable)
const selectable = (nodeSelectable?: boolean) => (typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable)
const connectable = (nodeConnectable?: HandleConnectable) =>
typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
const focusable = (nodeFocusable?: boolean) => (typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable)
function draggable(nodeDraggable?: boolean) {
return typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable
}
function selectable(nodeSelectable?: boolean) {
return typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable
}
function connectable(nodeConnectable?: HandleConnectable) {
return typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
}
function focusable(nodeFocusable?: boolean) {
return typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable
}
function getType(type?: string, template?: GraphNode['template']) {
const name = type || 'default'
packages/core/src/store/hooks.ts
+54 -52
View File
@@ -2,58 +2,60 @@ import type { Ref } from 'vue'
import type { FlowHooks } from '~/types'
// flow event hooks
export const createHooks = (): FlowHooks => ({
edgesChange: createExtendedEventHook(),
nodesChange: createExtendedEventHook(),
nodeDoubleClick: createExtendedEventHook(),
nodeClick: createExtendedEventHook(),
nodeMouseEnter: createExtendedEventHook(),
nodeMouseMove: createExtendedEventHook(),
nodeMouseLeave: createExtendedEventHook(),
nodeContextMenu: createExtendedEventHook(),
nodeDragStart: createExtendedEventHook(),
nodeDrag: createExtendedEventHook(),
nodeDragStop: createExtendedEventHook(),
nodesInitialized: createExtendedEventHook(),
miniMapNodeClick: createExtendedEventHook(),
miniMapNodeDoubleClick: createExtendedEventHook(),
miniMapNodeMouseEnter: createExtendedEventHook(),
miniMapNodeMouseMove: createExtendedEventHook(),
miniMapNodeMouseLeave: createExtendedEventHook(),
connect: createExtendedEventHook(),
connectStart: createExtendedEventHook(),
connectEnd: createExtendedEventHook(),
paneReady: createExtendedEventHook(),
move: createExtendedEventHook(),
moveStart: createExtendedEventHook(),
moveEnd: createExtendedEventHook(),
selectionDragStart: createExtendedEventHook(),
selectionDrag: createExtendedEventHook(),
selectionDragStop: createExtendedEventHook(),
selectionContextMenu: createExtendedEventHook(),
selectionStart: createExtendedEventHook(),
selectionEnd: createExtendedEventHook(),
viewportChangeStart: createExtendedEventHook(),
viewportChange: createExtendedEventHook(),
viewportChangeEnd: createExtendedEventHook(),
paneScroll: createExtendedEventHook(),
paneClick: createExtendedEventHook(),
paneContextMenu: createExtendedEventHook(),
paneMouseEnter: createExtendedEventHook(),
paneMouseMove: createExtendedEventHook(),
paneMouseLeave: createExtendedEventHook(),
edgeContextMenu: createExtendedEventHook(),
edgeMouseEnter: createExtendedEventHook(),
edgeMouseMove: createExtendedEventHook(),
edgeMouseLeave: createExtendedEventHook(),
edgeDoubleClick: createExtendedEventHook(),
edgeClick: createExtendedEventHook(),
edgeUpdateStart: createExtendedEventHook(),
edgeUpdate: createExtendedEventHook(),
edgeUpdateEnd: createExtendedEventHook(),
updateNodeInternals: createExtendedEventHook(),
error: createExtendedEventHook((err) => warn(err.message)),
})
export function createHooks(): FlowHooks {
return {
edgesChange: createExtendedEventHook(),
nodesChange: createExtendedEventHook(),
nodeDoubleClick: createExtendedEventHook(),
nodeClick: createExtendedEventHook(),
nodeMouseEnter: createExtendedEventHook(),
nodeMouseMove: createExtendedEventHook(),
nodeMouseLeave: createExtendedEventHook(),
nodeContextMenu: createExtendedEventHook(),
nodeDragStart: createExtendedEventHook(),
nodeDrag: createExtendedEventHook(),
nodeDragStop: createExtendedEventHook(),
nodesInitialized: createExtendedEventHook(),
miniMapNodeClick: createExtendedEventHook(),
miniMapNodeDoubleClick: createExtendedEventHook(),
miniMapNodeMouseEnter: createExtendedEventHook(),
miniMapNodeMouseMove: createExtendedEventHook(),
miniMapNodeMouseLeave: createExtendedEventHook(),
connect: createExtendedEventHook(),
connectStart: createExtendedEventHook(),
connectEnd: createExtendedEventHook(),
paneReady: createExtendedEventHook(),
move: createExtendedEventHook(),
moveStart: createExtendedEventHook(),
moveEnd: createExtendedEventHook(),
selectionDragStart: createExtendedEventHook(),
selectionDrag: createExtendedEventHook(),
selectionDragStop: createExtendedEventHook(),
selectionContextMenu: createExtendedEventHook(),
selectionStart: createExtendedEventHook(),
selectionEnd: createExtendedEventHook(),
viewportChangeStart: createExtendedEventHook(),
viewportChange: createExtendedEventHook(),
viewportChangeEnd: createExtendedEventHook(),
paneScroll: createExtendedEventHook(),
paneClick: createExtendedEventHook(),
paneContextMenu: createExtendedEventHook(),
paneMouseEnter: createExtendedEventHook(),
paneMouseMove: createExtendedEventHook(),
paneMouseLeave: createExtendedEventHook(),
edgeContextMenu: createExtendedEventHook(),
edgeMouseEnter: createExtendedEventHook(),
edgeMouseMove: createExtendedEventHook(),
edgeMouseLeave: createExtendedEventHook(),
edgeDoubleClick: createExtendedEventHook(),
edgeClick: createExtendedEventHook(),
edgeUpdateStart: createExtendedEventHook(),
edgeUpdate: createExtendedEventHook(),
edgeUpdateEnd: createExtendedEventHook(),
updateNodeInternals: createExtendedEventHook(),
error: createExtendedEventHook((err) => warn(err.message)),
}
}
export function useHooks(emit: (...args: any[]) => void, hooks: Ref<FlowHooks>) {
onBeforeMount(() => {
packages/core/src/store/state.ts
+93 -91
View File
@@ -25,114 +25,116 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
simplebezier: SimpleBezierEdge,
}
const defaultState = (): State => ({
vueFlowRef: null,
viewportRef: null,
nodes: [],
edges: [],
nodeTypes: {},
edgeTypes: {},
function defaultState(): State {
return {
vueFlowRef: null,
viewportRef: null,
nodes: [],
edges: [],
nodeTypes: {},
edgeTypes: {},
initialized: false,
initialized: false,
dimensions: {
width: 0,
height: 0,
},
viewport: { x: 0, y: 0, zoom: 1 },
dimensions: {
width: 0,
height: 0,
},
viewport: { x: 0, y: 0, zoom: 1 },
d3Zoom: null,
d3Selection: null,
d3ZoomHandler: null,
minZoom: 0.5,
maxZoom: 2,
d3Zoom: null,
d3Selection: null,
d3ZoomHandler: null,
minZoom: 0.5,
maxZoom: 2,
translateExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
nodeExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
translateExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
nodeExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
selectionMode: SelectionMode.Full,
paneDragging: false,
preventScrolling: true,
zoomOnScroll: true,
zoomOnPinch: true,
zoomOnDoubleClick: true,
panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
panOnDrag: true,
edgeUpdaterRadius: 10,
onlyRenderVisibleElements: false,
defaultViewport: { x: 0, y: 0, zoom: 1 },
selectionMode: SelectionMode.Full,
paneDragging: false,
preventScrolling: true,
zoomOnScroll: true,
zoomOnPinch: true,
zoomOnDoubleClick: true,
panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
panOnDrag: true,
edgeUpdaterRadius: 10,
onlyRenderVisibleElements: false,
defaultViewport: { x: 0, y: 0, zoom: 1 },
nodesSelectionActive: false,
userSelectionActive: false,
nodesSelectionActive: false,
userSelectionActive: false,
userSelectionRect: null,
userSelectionRect: null,
defaultMarkerColor: '#b1b1b7',
connectionLineStyle: {},
connectionLineType: null,
connectionLineOptions: {
type: ConnectionLineType.Bezier,
style: {},
},
connectionMode: ConnectionMode.Loose,
connectionStartHandle: null,
connectionClickStartHandle: null,
connectionPosition: { x: NaN, y: NaN },
connectionRadius: 20,
connectOnClick: true,
connectionStatus: null,
isValidConnection: null,
defaultMarkerColor: '#b1b1b7',
connectionLineStyle: {},
connectionLineType: null,
connectionLineOptions: {
type: ConnectionLineType.Bezier,
style: {},
},
connectionMode: ConnectionMode.Loose,
connectionStartHandle: null,
connectionClickStartHandle: null,
connectionPosition: { x: NaN, y: NaN },
connectionRadius: 20,
connectOnClick: true,
connectionStatus: null,
isValidConnection: null,
snapGrid: [15, 15],
snapToGrid: false,
snapGrid: [15, 15],
snapToGrid: false,
edgesUpdatable: false,
edgesFocusable: true,
nodesFocusable: true,
nodesConnectable: true,
nodesDraggable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
multiSelectionActive: false,
selectionKeyCode: 'Shift',
multiSelectionKeyCode: 'Meta',
zoomActivationKeyCode: 'Meta',
deleteKeyCode: 'Backspace',
panActivationKeyCode: 'Space',
edgesUpdatable: false,
edgesFocusable: true,
nodesFocusable: true,
nodesConnectable: true,
nodesDraggable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
multiSelectionActive: false,
selectionKeyCode: 'Shift',
multiSelectionKeyCode: 'Meta',
zoomActivationKeyCode: 'Meta',
deleteKeyCode: 'Backspace',
panActivationKeyCode: 'Space',
hooks: createHooks(),
hooks: createHooks(),
applyDefault: true,
autoConnect: false,
applyDefault: true,
autoConnect: false,
fitViewOnInit: false,
noDragClassName: 'nodrag',
noWheelClassName: 'nowheel',
noPanClassName: 'nopan',
defaultEdgeOptions: undefined,
elevateEdgesOnSelect: false,
elevateNodesOnSelect: true,
fitViewOnInit: false,
noDragClassName: 'nodrag',
noWheelClassName: 'nowheel',
noPanClassName: 'nopan',
defaultEdgeOptions: undefined,
elevateEdgesOnSelect: false,
elevateNodesOnSelect: true,
autoPanOnNodeDrag: true,
autoPanOnConnect: true,
autoPanOnNodeDrag: true,
autoPanOnConnect: true,
disableKeyboardA11y: false,
ariaLiveMessage: '',
disableKeyboardA11y: false,
ariaLiveMessage: '',
__experimentalFeatures: {
nestedFlow: false,
},
__experimentalFeatures: {
nestedFlow: false,
},
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
})
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
}
}
export function useState(opts?: FlowOptions): State {
const state = defaultState()
packages/core/src/utils/changes.ts
+23 -16
View File
@@ -185,30 +185,37 @@ export function applyChanges<
return elements
}
export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
export function applyEdgeChanges(changes: EdgeChange[], edges: GraphEdge[]) {
return applyChanges(changes, edges)
}
export function applyNodeChanges(changes: NodeChange[], nodes: GraphNode[]) {
return applyChanges(changes, nodes)
}
export const createSelectionChange = (id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange => ({
id,
type: 'select',
selected,
})
export function createSelectionChange(id: string, selected: boolean): NodeSelectionChange | EdgeSelectionChange {
return {
id,
type: 'select',
selected,
}
}
export const createAdditionChange = <
export function createAdditionChange<
T extends GraphNode | GraphEdge = GraphNode,
C extends NodeAddChange | EdgeAddChange = T extends GraphNode ? NodeAddChange : EdgeAddChange,
>(
item: T,
): C =>
<C>{
>(item: T): C {
return <C>{
item,
type: 'add',
}
}
export const createRemoveChange = (id: string): NodeRemoveChange | EdgeRemoveChange => ({
id,
type: 'remove',
})
export function createRemoveChange(id: string): NodeRemoveChange | EdgeRemoveChange {
return {
id,
type: 'remove',
}
}
export function getSelectionChanges(elements: FlowElements, selectedIds: string[]) {
return elements.reduce(
packages/core/src/utils/general.ts
+3 -1
View File
@@ -1,4 +1,6 @@
export const isMouseEvent = (event: MouseEvent | TouchEvent): event is MouseEvent => 'clientX' in event
export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
return 'clientX' in event
}
export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
const isMouseTriggered = isMouseEvent(event)
packages/core/src/utils/graph.ts
+84 -56
View File
@@ -21,11 +21,13 @@ import type {
XYZPosition,
} from '~/types'
export const nodeToRect = (node: GraphNode): Rect => ({
...(node.computedPosition || { x: 0, y: 0 }),
width: node.dimensions.width || 0,
height: node.dimensions.height || 0,
})
export function nodeToRect(node: GraphNode): Rect {
return {
...(node.computedPosition || { x: 0, y: 0 }),
width: node.dimensions.width || 0,
height: node.dimensions.height || 0,
}
}
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))
@@ -34,17 +36,23 @@ export function getOverlappingArea(rectA: Rect, rectB: Rect) {
return Math.ceil(xOverlap * yOverlap)
}
export const getDimensions = (node: HTMLElement): Dimensions => ({
width: node.offsetWidth,
height: node.offsetHeight,
})
export function getDimensions(node: HTMLElement): Dimensions {
return {
width: node.offsetWidth,
height: node.offsetHeight,
}
}
export const clamp = (val: number, min = 0, max = 1) => Math.min(Math.max(val, min), max)
export function clamp(val: number, min = 0, max = 1) {
return Math.min(Math.max(val, min), max)
}
export const clampPosition = (position: XYPosition, extent: CoordinateExtent): XYPosition => ({
x: clamp(position.x, extent[0][0], extent[1][0]),
y: clamp(position.y, extent[0][1], extent[1][1]),
})
export function clampPosition(position: XYPosition, extent: CoordinateExtent): XYPosition {
return {
x: clamp(position.x, extent[0][0], extent[1][0]),
y: clamp(position.y, extent[0][1], extent[1][1]),
}
}
export function getHostForElement(element: HTMLElement): Document {
const doc = element.getRootNode() as Document
@@ -54,19 +62,25 @@ export function getHostForElement(element: HTMLElement): Document {
else return window.document
}
export const isEdge = <Data = ElementData>(element: MaybeElement): element is Edge<Data> =>
element && 'id' in element && 'source' in element && 'target' in element
export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
return element && 'id' in element && 'source' in element && 'target' in element
}
export const isGraphEdge = <Data = ElementData>(element: MaybeElement): element is GraphEdge<Data> =>
isEdge(element) && 'sourceNode' in element && 'targetNode' in element
export function isGraphEdge<Data = ElementData>(element: MaybeElement): element is GraphEdge<Data> {
return isEdge(element) && 'sourceNode' in element && 'targetNode' in element
}
export const isNode = <Data = ElementData>(element: MaybeElement): element is Node<Data> =>
element && 'id' in element && !isEdge(element)
export function isNode<Data = ElementData>(element: MaybeElement): element is Node<Data> {
return element && 'id' in element && !isEdge(element)
}
export const isGraphNode = <Data = ElementData>(element: MaybeElement): element is GraphNode<Data> =>
isNode(element) && 'computedPosition' in element
export function isGraphNode<Data = ElementData>(element: MaybeElement): element is GraphNode<Data> {
return isNode(element) && 'computedPosition' in element
}
export const isRect = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y
export function isRect(obj: any): obj is Rect {
return !!obj.width && !!obj.height && !!obj.x && !!obj.y
}
export function parseNode(node: Node, defaults: Partial<GraphNode> = {}): GraphNode {
let initialState = defaults
@@ -128,27 +142,30 @@ export function parseEdge(edge: Edge, defaults: Partial<GraphEdge> = {}): GraphE
return Object.assign({}, defaults, edge, { id: edge.id.toString() }) as GraphEdge
}
const getConnectedElements = <T extends Elements = FlowElements>(
function getConnectedElements<T extends Elements = FlowElements>(
node: Node,
elements: T,
dir: 'source' | 'target',
): T extends FlowElements ? GraphNode[] : Node[] => {
): T extends FlowElements ? GraphNode[] : Node[] {
if (!isNode(node)) return []
const origin = dir === 'source' ? 'target' : 'source'
const ids = elements.filter((e) => isEdge(e) && e[origin] === node.id).map((e) => isEdge(e) && e[dir])
return elements.filter((e) => ids.includes(e.id)) as T extends FlowElements ? GraphNode[] : Node[]
}
export const getOutgoers = <T extends Elements = FlowElements>(node: Node, elements: T) =>
getConnectedElements(node, elements, 'target')
export function getOutgoers<T extends Elements = FlowElements>(node: Node, elements: T) {
return getConnectedElements(node, elements, 'target')
}
export const getIncomers = <T extends Elements = FlowElements>(node: Node, elements: T) =>
getConnectedElements(node, elements, 'source')
export function getIncomers<T extends Elements = FlowElements>(node: Node, elements: T) {
return getConnectedElements(node, elements, 'source')
}
export const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection) =>
`vueflow__edge-${source}${sourceHandle ?? ''}-${target}${targetHandle ?? ''}`
export function getEdgeId({ source, sourceHandle, target, targetHandle }: Connection) {
return `vueflow__edge-${source}${sourceHandle ?? ''}-${target}${targetHandle ?? ''}`
}
export const connectionExists = (edge: Edge | Connection, elements: Elements) =>
elements.some(
export function connectionExists(edge: Edge | Connection, elements: Elements) {
return elements.some(
(el) =>
isEdge(el) &&
el.source === edge.source &&
@@ -156,6 +173,7 @@ export const connectionExists = (edge: Edge | Connection, elements: Elements) =>
(el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&
(el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)),
)
}
/**
* @deprecated Use store instance and call `addEdges` with template-ref or the one received by `onPaneReady` instead
@@ -249,28 +267,36 @@ export function pointToRendererPoint(
return position
}
const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
x: Math.min(box1.x, box2.x),
y: Math.min(box1.y, box2.y),
x2: Math.max(box1.x2, box2.x2),
y2: Math.max(box1.y2, box2.y2),
})
function getBoundsOfBoxes(box1: Box, box2: Box): Box {
return {
x: Math.min(box1.x, box2.x),
y: Math.min(box1.y, box2.y),
x2: Math.max(box1.x2, box2.x2),
y2: Math.max(box1.y2, box2.y2),
}
}
export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
x,
y,
x2: x + width,
y2: y + height,
})
export function rectToBox({ x, y, width, height }: Rect): Box {
return {
x,
y,
x2: x + width,
y2: y + height,
}
}
export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
x,
y,
width: x2 - x,
height: y2 - y,
})
export function boxToRect({ x, y, x2, y2 }: Box): Rect {
return {
x,
y,
width: x2 - x,
height: y2 - y,
}
}
export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
export function getBoundsofRects(rect1: Rect, rect2: Rect) {
return boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
}
export function getRectOfNodes(nodes: GraphNode[]) {
const box = nodes.reduce(
@@ -288,10 +314,12 @@ export function getRectOfNodes(nodes: GraphNode[]) {
return boxToRect(box)
}
export const graphPosToZoomedPos = ({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition => ({
x: x * tScale + tx,
y: y * tScale + ty,
})
export function graphPosToZoomedPos({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
return {
x: x * tScale + tx,
y: y * tScale + ty,
}
}
export function getNodesInside(
nodes: GraphNode[],
packages/core/src/utils/store.ts
+3 -1
View File
@@ -1,6 +1,8 @@
import type { Actions, Connection, Edge, GraphEdge, GraphNode, Node, State } from '~/types'
export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
export function isDef<T>(val: T): val is NonNullable<T> {
return typeof unref(val) !== 'undefined'
}
export function addEdgeToStore(edgeParams: Edge | Connection, edges: Edge[], onError: State['hooks']['error']['trigger']) {
if (!edgeParams.source || !edgeParams.target) {