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/container/EdgeRenderer/Marker.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import { defineComponent } from 'vue';
import { defineComponent } from 'vue'
interface MarkerProps {
id: string;
id: string
}
export default defineComponent({
@@ -25,6 +25,6 @@ export default defineComponent({
>
{slots.default ? slots.default() : ''}
</marker>
);
)
}
});
})
src/container/EdgeRenderer/MarkerDefinitions.tsx
+5 -5
View File
@@ -1,8 +1,8 @@
import { defineComponent, PropType } from 'vue';
import Marker from './Marker';
import { defineComponent, PropType } from 'vue'
import Marker from './Marker'
interface MarkerDefinitionsProps {
color: string;
color: string
}
export default defineComponent({
@@ -38,6 +38,6 @@ export default defineComponent({
/>
</Marker>
</defs>
);
)
}
});
})
src/container/EdgeRenderer/index.tsx
+17 -17
View File
@@ -1,19 +1,19 @@
import { CSSProperties, defineComponent, inject, PropType } from 'vue';
import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types';
import ConnectionLine from '../../components/ConnectionLine';
import MarkerDefinitions from './MarkerDefinitions';
import Edge from '../../components/Edges/Edge';
import { CSSProperties, defineComponent, inject, PropType } from 'vue'
import { ConnectionLineType, ConnectionLineComponent, ConnectionMode, RevueFlowStore } from '../../types'
import ConnectionLine from '../../components/ConnectionLine'
import MarkerDefinitions from './MarkerDefinitions'
import Edge from '../../components/Edges/Edge'
interface EdgeRendererProps {
edgeTypes: any;
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;
connectionMode?: ConnectionMode;
arrowHeadColor: string;
markerEndId?: string;
onlyRenderVisibleElements: boolean;
edgeUpdaterRadius?: number;
edgeTypes: any
connectionLineType: ConnectionLineType
connectionLineStyle?: CSSProperties
connectionLineComponent?: ConnectionLineComponent
connectionMode?: ConnectionMode
arrowHeadColor: string
markerEndId?: string
onlyRenderVisibleElements: boolean
edgeUpdaterRadius?: number
}
export default defineComponent({
@@ -70,7 +70,7 @@ export default defineComponent({
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const store = inject<RevueFlowStore>('store')!
return () => (
<svg width={store.width} height={store.height} class="revue-flow__edges">
@@ -94,6 +94,6 @@ export default defineComponent({
)}
</g>
</svg>
);
)
}
});
})
src/container/EdgeRenderer/utils.ts
+51 -51
View File
@@ -1,6 +1,6 @@
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
import { rectToBox } from '../../utils/graph';
import { Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, EdgeType } from '../../types';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges'
import { rectToBox } from '../../utils/graph'
import { Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge, EdgeType } from '../../types'
export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
const standardTypes: Record<string, EdgeType> = {
@@ -8,75 +8,75 @@ export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<str
straight: edgeTypes.bezier || StraightEdge,
step: edgeTypes.step || StepEdge,
smoothstep: edgeTypes.step || SmoothStepEdge
};
}
const wrappedTypes = {} as Record<string, EdgeType>;
const wrappedTypes = {} as Record<string, EdgeType>
const specialTypes: Record<string, EdgeType> = Object.keys(edgeTypes)
.filter((k) => !['default', 'bezier'].includes(k))
.reduce((res, key) => {
res[key] = edgeTypes[key] || BezierEdge;
res[key] = edgeTypes[key] || BezierEdge
return res;
}, wrappedTypes);
return res
}, wrappedTypes)
return {
...standardTypes,
...specialTypes
};
}
}
export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
const x = (handle?.x || 0) + node.__rf.position.x;
const y = (handle?.y || 0) + node.__rf.position.y;
const width = handle?.width || node.__rf.width;
const height = handle?.height || node.__rf.height;
const x = (handle?.x || 0) + node.__rf.position.x
const y = (handle?.y || 0) + node.__rf.position.y
const width = handle?.width || node.__rf.width
const height = handle?.height || node.__rf.height
switch (position) {
case Position.Top:
return {
x: x + width / 2,
y
};
}
case Position.Right:
return {
x: x + width,
y: y + height / 2
};
}
case Position.Bottom:
return {
x: x + width / 2,
y: y + height
};
}
case Position.Left:
return {
x,
y: y + height / 2
};
}
}
}
export function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null {
if (!bounds) {
return null;
return null
}
// there is no handleId when there are no multiple handles/ handles with ids
// so we just pick the first one
let handle = null;
let handle = null
if (bounds.length === 1 || !handleId) {
handle = bounds[0];
handle = bounds[0]
} else if (handleId) {
handle = bounds.find((d) => d.id === handleId);
handle = bounds.find((d) => d.id === handleId)
}
return typeof handle === 'undefined' ? null : handle;
return typeof handle === 'undefined' ? null : handle
}
interface EdgePositions {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourceX: number
sourceY: number
targetX: number
targetY: number
}
export const getEdgePositions = (
@@ -87,23 +87,23 @@ export const getEdgePositions = (
targetHandle: HandleElement | unknown,
targetPosition: Position
): EdgePositions => {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle)
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
targetX: targetHandlePos.x,
targetY: targetHandlePos.y
};
};
}
}
interface IsEdgeVisibleParams {
sourcePos: XYPosition;
targetPos: XYPosition;
width: number;
height: number;
transform: Transform;
sourcePos: XYPosition
targetPos: XYPosition
width: number
height: number
transform: Transform
}
export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }: IsEdgeVisibleParams): boolean {
@@ -112,14 +112,14 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
y: Math.min(sourcePos.y, targetPos.y),
x2: Math.max(sourcePos.x, targetPos.x),
y2: Math.max(sourcePos.y, targetPos.y)
};
}
if (edgeBox.x === edgeBox.x2) {
edgeBox.x2 += 1;
edgeBox.x2 += 1
}
if (edgeBox.y === edgeBox.y2) {
edgeBox.y2 += 1;
edgeBox.y2 += 1
}
const viewBox = rectToBox({
@@ -127,31 +127,31 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
y: (0 - transform[1]) / transform[2],
width: width / transform[2],
height: height / transform[2]
});
})
const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x));
const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y));
const overlappingArea = Math.ceil(xOverlap * yOverlap);
const xOverlap = Math.max(0, Math.min(viewBox.x2, edgeBox.x2) - Math.max(viewBox.x, edgeBox.x))
const yOverlap = Math.max(0, Math.min(viewBox.y2, edgeBox.y2) - Math.max(viewBox.y, edgeBox.y))
const overlappingArea = Math.ceil(xOverlap * yOverlap)
return overlappingArea > 0;
return overlappingArea > 0
}
type SourceTargetNode = {
sourceNode: Node | null;
targetNode: Node | null;
};
sourceNode: Node | null
targetNode: Node | null
}
export const getSourceTargetNodes = (edge: Edge, nodes: Node[]): SourceTargetNode => {
return nodes.reduce(
(res, node) => {
if (node.id === edge.source) {
res.sourceNode = node;
res.sourceNode = node
}
if (node.id === edge.target) {
res.targetNode = node;
res.targetNode = node
}
return res;
return res
},
{ sourceNode: null, targetNode: null } as SourceTargetNode
);
};
)
}