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

chore(lint): Update eslint rules

Browse Source 
* Remove semi
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 5ed1094dfe
commit 77eac0c12a
74 changed files with 2007 additions and 1827 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/graph.ts
+91 -91
View File
@@ -1,4 +1,4 @@
import { clampPosition, clamp } from './index';
import { clampPosition, clamp } from './index'
import {
ElementId,
@@ -13,47 +13,47 @@ import {
FlowExportObject,
NodeExtent,
RevueFlowStore
} from '../types';
} from '../types'
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
'id' in element && 'source' in element && 'target' in element;
'id' in element && 'source' in element && 'target' in element
export const isNode = (element: Node | Connection | Edge): element is Node =>
'id' in element && !('source' in element) && !('target' in element);
'id' in element && !('source' in element) && !('target' in element)
export const getOutgoers = (node: Node, elements: Elements): Node[] => {
if (!isNode(node)) {
return [];
return []
}
const outgoerIds = elements.filter((e) => isEdge(e) && e.source === node.id).map((e) => (e as Edge).target);
return elements.filter((e) => outgoerIds.includes(e.id)) as Node[];
};
const outgoerIds = elements.filter((e) => isEdge(e) && e.source === node.id).map((e) => (e as Edge).target)
return elements.filter((e) => outgoerIds.includes(e.id)) as Node[]
}
export const getIncomers = (node: Node, elements: Elements): Node[] => {
if (!isNode(node)) {
return [];
return []
}
const incomersIds = elements.filter((e) => isEdge(e) && e.target === node.id).map((e) => (e as Edge).source);
return elements.filter((e) => incomersIds.includes(e.id)) as Node[];
};
const incomersIds = elements.filter((e) => isEdge(e) && e.target === node.id).map((e) => (e as Edge).source)
return elements.filter((e) => incomersIds.includes(e.id)) as Node[]
}
export const removeElements = (elementsToRemove: Elements, elements: Elements): Elements => {
const nodeIdsToRemove = elementsToRemove.map((n) => n.id);
const nodeIdsToRemove = elementsToRemove.map((n) => n.id)
return elements.filter((element) => {
const edgeElement = element as Edge;
const edgeElement = element as Edge
return !(
nodeIdsToRemove.includes(element.id) ||
nodeIdsToRemove.includes(edgeElement.target) ||
nodeIdsToRemove.includes(edgeElement.source)
);
});
};
)
})
}
const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId =>
`revueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`;
`revueflow__edge-${source}${sourceHandle}-${target}${targetHandle}`
const connectionExists = (edge: Edge, elements: Elements) => {
return elements.some(
@@ -63,43 +63,43 @@ const connectionExists = (edge: Edge, elements: Elements) => {
el.target === edge.target &&
(el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&
(el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle))
);
};
)
}
export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elements => {
if (!edgeParams.source || !edgeParams.target) {
console.log("Can't create edge. An edge needs a source and a target.");
return elements;
console.log("Can't create edge. An edge needs a source and a target.")
return elements
}
let edge: Edge;
let edge: Edge
if (isEdge(edgeParams)) {
edge = { ...edgeParams };
edge = { ...edgeParams }
} else {
edge = {
...edgeParams,
id: getEdgeId(edgeParams)
} as Edge;
} as Edge
}
if (connectionExists(edge, elements)) {
return elements;
return elements
}
return elements.concat(edge);
};
return elements.concat(edge)
}
export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements): Elements => {
if (!newConnection.source || !newConnection.target) {
console.warn("Can't create new edge. An edge needs a source and a target.");
return elements;
console.warn("Can't create new edge. An edge needs a source and a target.")
return elements
}
const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id) as Edge;
const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id) as Edge
if (!foundEdge) {
console.warn(`The old edge with id=${oldEdge.id} does not exist.`);
return elements;
console.warn(`The old edge with id=${oldEdge.id} does not exist.`)
return elements
}
// Remove old edge and create the new edge with parameters of old edge.
@@ -110,10 +110,10 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: E
target: newConnection.target,
sourceHandle: newConnection.sourceHandle,
targetHandle: newConnection.targetHandle
} as Edge;
} as Edge
return elements.filter((e) => e.id !== oldEdge.id).concat(edge);
};
return elements.filter((e) => e.id !== oldEdge.id).concat(edge)
}
export const pointToRendererPoint = (
{ x, y }: XYPosition,
@@ -124,23 +124,23 @@ export const pointToRendererPoint = (
const position: XYPosition = {
x: (x - tx) / tScale,
y: (y - ty) / tScale
};
}
if (snapToGrid) {
return {
x: snapX * Math.round(position.x / snapX),
y: snapY * Math.round(position.y / snapY)
};
}
}
return position;
};
return position
}
export const onLoadProject = (currentStore: RevueFlowStore) => {
return (position: XYPosition): XYPosition => {
return pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid);
};
};
return pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
}
}
export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => {
return {
@@ -154,8 +154,8 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => {
handleBounds: {},
isDragging: false
}
};
};
}
}
export const parseEdge = (edge: Edge): Edge => {
return {
@@ -166,32 +166,32 @@ export const parseEdge = (edge: Edge): Edge => {
targetHandle: edge.targetHandle ? edge.targetHandle.toString() : null,
id: edge.id.toString(),
type: edge.type || 'default'
};
};
}
}
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)
});
})
export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
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 const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
export const getRectOfNodes = (nodes: Node[]): Rect => {
const box = nodes.reduce(
@@ -205,15 +205,15 @@ export const getRectOfNodes = (nodes: Node[]): Rect => {
} as any)
),
{ x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
);
)
return boxToRect(box);
};
return boxToRect(box)
}
export const graphPosToZoomedPos = ({ x, y }: XYPosition, [tx, ty, tScale]: Transform): XYPosition => ({
x: x * tScale + tx,
y: y * tScale + ty
});
})
export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Transform = [0, 0, 1], partially = false): Node[] => {
const rBox = rectToBox({
@@ -221,54 +221,54 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
y: (rect.y - ty) / tScale,
width: rect.width / tScale,
height: rect.height / tScale
});
})
return nodes.filter(({ __rf: { position, width, height, isDragging } }) => {
const nBox = rectToBox({ ...position, width, height } as any);
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
const overlappingArea = Math.ceil(xOverlap * yOverlap);
const nBox = rectToBox({ ...position, width, height } as any)
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
const overlappingArea = Math.ceil(xOverlap * yOverlap)
if (width === null || height === null || isDragging) {
// nodes are initialized with width and height = null
return true;
return true
}
if (partially) {
return overlappingArea > 0;
return overlappingArea > 0
}
const area = width * height;
const area = width * height
return overlappingArea >= area;
});
};
return overlappingArea >= area
})
}
export const getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[] => {
const nodeIds = nodes.map((node) => node.id);
const nodeIds = nodes.map((node) => node.id)
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target));
};
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
}
const parseElements = (nodes: Node[], edges: Edge[]): Elements => {
return [
...nodes.map((node) => {
const n = { ...node };
const n = { ...node }
n.position = n.__rf.position;
n.position = n.__rf.position
n.__rf = {} as any;
return n;
n.__rf = {} as any
return n
}),
...edges.map((e) => ({ ...e }))
];
};
]
}
export const onLoadGetElements = (currentStore: RevueFlowStore) => {
return (): Elements => {
return parseElements(currentStore.nodes || [], currentStore.edges || []);
};
};
return parseElements(currentStore.nodes || [], currentStore.edges || [])
}
}
export const onLoadToObject = (currentStore: RevueFlowStore) => {
return (): FlowExportObject => {
@@ -276,9 +276,9 @@ export const onLoadToObject = (currentStore: RevueFlowStore) => {
elements: parseElements(currentStore.nodes || [], currentStore.edges || []),
position: [currentStore.transform[0], currentStore.transform[1]],
zoom: currentStore.transform[2]
};
};
};
}
}
}
export const getTransformForBounds = (
bounds: Rect,
@@ -288,14 +288,14 @@ export const getTransformForBounds = (
maxZoom: number,
padding = 0.1
): Transform => {
const xZoom = width / (bounds.width * (1 + padding));
const yZoom = height / (bounds.height * (1 + padding));
const zoom = Math.min(xZoom, yZoom);
const clampedZoom = clamp(zoom, minZoom, maxZoom);
const boundsCenterX = bounds.x + bounds.width / 2;
const boundsCenterY = bounds.y + bounds.height / 2;
const x = width / 2 - boundsCenterX * clampedZoom;
const y = height / 2 - boundsCenterY * clampedZoom;
const xZoom = width / (bounds.width * (1 + padding))
const yZoom = height / (bounds.height * (1 + padding))
const zoom = Math.min(xZoom, yZoom)
const clampedZoom = clamp(zoom, minZoom, maxZoom)
const boundsCenterX = bounds.x + bounds.width / 2
const boundsCenterY = bounds.y + bounds.height / 2
const x = width / 2 - boundsCenterX * clampedZoom
const y = height / 2 - boundsCenterY * clampedZoom
return [x, y, clampedZoom];
};
return [x, y, clampedZoom]
}
src/utils/index.ts
+8 -8
View File
@@ -1,21 +1,21 @@
import { Dimensions, XYPosition, NodeExtent } from '../types';
import { Dimensions, XYPosition, NodeExtent } from '../types'
export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
const target = e.target as HTMLElement;
return ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName) || target.hasAttribute('contentEditable');
};
const target = e.target as HTMLElement
return ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName) || target.hasAttribute('contentEditable')
}
export const getDimensions = (node: HTMLDivElement): Dimensions => ({
width: node.offsetWidth,
height: node.offsetHeight
});
})
export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max)
export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosition => ({
x: clamp(position.x, extent[0][0], extent[1][0]),
y: clamp(position.y, extent[0][1], extent[1][1])
});
})
export const getHostForElement = (element: HTMLElement): Document | ShadowRoot =>
(element.getRootNode() as Document | ShadowRoot) || window.document;
(element.getRootNode() as Document | ShadowRoot) || window.document
src/utils/symbols.ts
+6 -6
View File
@@ -1,7 +1,7 @@
import { InjectionKey } from 'vue';
import { RevueFlowStore } from '../types';
import { RevueFlowHooks } from '../hooks/RevueFlowHooks';
import { InjectionKey } from 'vue'
import { RevueFlowStore } from '../types'
import { RevueFlowHooks } from '../hooks/RevueFlowHooks'
export const StoreKey: InjectionKey<RevueFlowStore> = Symbol('store');
export const HooksKey: InjectionKey<RevueFlowHooks> = Symbol('hooks');
export const NodeIdContextKey: InjectionKey<string> = Symbol('NodeIdContext');
export const StoreKey: InjectionKey<RevueFlowStore> = Symbol('store')
export const HooksKey: InjectionKey<RevueFlowHooks> = Symbol('hooks')
export const NodeIdContextKey: InjectionKey<string> = Symbol('NodeIdContext')