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

fix: typecast edges and nodes

Browse Source 
* make GraphView props all required
refactor: renamed "NodesTypeType" to "NodeType" and "EdgesTypeType" to "EdgeType"
This commit is contained in:
Braks
2021-08-08 19:28:45 +02:00
parent 83216f8ece
commit 3b5857febb
20 changed files with 261 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/BezierEdge.tsx
+29 -95
View File
@@ -1,9 +1,8 @@
import { computed, CSSProperties, defineComponent, PropType } from 'vue';
import { defineComponent } from 'vue';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter } from './utils';
import { ArrowHeadType, Position } from '../../types';
import { getMarkerEnd, getCenter, GetCenterParams, DefaultEdgeProps } from './utils';
import { ArrowHeadType, EdgeType, Position } from '../../types';
import { reactify } from '@vueuse/core';
interface GetBezierPathParams {
sourceX: number;
@@ -48,104 +47,34 @@ export function getBezierPath({
export default defineComponent({
inheritAttrs: false,
props: {
sourceX: {
type: Number,
required: true
},
sourceY: {
type: Number,
required: true
},
targetX: {
type: Number,
required: true
},
targetY: {
type: Number,
required: true
},
sourcePosition: {
type: String as PropType<Position>,
required: false,
default: Position.Bottom
},
targetPosition: {
type: String as PropType<Position>,
required: false,
default: Position.Top
},
label: {
type: String,
required: false,
default: undefined
},
labelStyle: {
type: Object,
required: false,
default: undefined
},
labelShowBg: {
type: Boolean,
required: false,
default: false
},
labelBgStyle: {
type: String,
required: false,
default: undefined
},
labelBgPadding: {
type: Array as unknown as PropType<[number, number]>,
required: false,
default: () => [0, 0]
},
labelBgBorderRadius: {
type: Number,
required: false,
default: 0
},
arrowHeadType: {
type: String as PropType<ArrowHeadType>,
required: false,
default: undefined
},
markerEndId: {
type: String,
required: false,
default: undefined
},
style: {
type: Object as PropType<CSSProperties>,
required: false,
default: () => {}
}
...DefaultEdgeProps
},
setup(props) {
const centered = computed(() => {
const centered = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetCenterParams) => {
return getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
sourceX: sourceX,
sourceY: sourceY,
targetX: targetX,
targetY: targetY,
sourcePosition: sourcePosition,
targetPosition: targetPosition
});
});
const path = computed(() => {
const path = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetBezierPathParams) => {
return getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
sourcePosition: props.sourcePosition
sourceX: sourceX,
sourceY: sourceY,
targetX: targetX,
targetY: targetY,
targetPosition: targetPosition,
sourcePosition: sourcePosition
});
});
const text = props.label ? (
<EdgeText
x={centered.value[0]}
y={centered.value[1]}
x={centered({ ...props }).value[0]}
y={centered({ ...props }).value[1]}
label={props.label}
labelStyle={props.labelStyle}
labelShowBg={props.labelShowBg}
@@ -155,13 +84,18 @@ export default defineComponent({
/>
) : null;
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
return () => (
<>
<path style={props.style} d={path.value} class="revue-flow__edge-path" marker-end={markerEnd.value} />
<path
class="revue-flow__edge-path"
style={props.style}
d={path({ ...props }).value}
marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
/>
{text}
</>
);
}
});
}) as EdgeType;
src/components/Edges/Edge.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { EdgeAnchor } from './EdgeAnchor';
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
import { computed, defineComponent, h, inject, PropType, ref } from 'vue';
import EdgeAnchor from './EdgeAnchor';
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
import { isEdge } from '../../utils/graph';
src/components/Edges/EdgeAnchor.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export interface EdgeAnchorProps extends HTMLAttributes {
radius?: number;
}
export const EdgeAnchor = defineComponent({
export default defineComponent({
props: {
position: {
type: String as PropType<EdgeAnchorProps['position']>,
src/components/Edges/EdgeText.tsx
+1 -3
View File
@@ -1,7 +1,7 @@
import { EdgeTextProps, Rect } from '../../types';
import { defineComponent, PropType, ref, watch } from 'vue';
const EdgeText = defineComponent({
export default defineComponent({
props: {
x: {
type: Number as PropType<EdgeTextProps['x']>,
@@ -83,5 +83,3 @@ const EdgeText = defineComponent({
);
}
});
export default EdgeText;
src/components/Edges/SmoothStepEdge.tsx
+37 -28
View File
@@ -1,8 +1,8 @@
import { defineComponent } from 'vue';
import { computed, defineComponent } from 'vue';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter } from './utils';
import { EdgeSmoothStepProps, Position } from '../../types';
import { getMarkerEnd, getCenter, EdgeSmoothProps } from './utils';
import { ArrowHeadType, EdgeType, Position } from '../../types';
import { reactify } from '@vueuse/core';
// These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -92,35 +92,41 @@ export function getSmoothStepPath({
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
}
const SmoothStepEdge = defineComponent({
export default defineComponent({
inheritAttrs: false,
props: EdgeSmoothStepProps,
props: {
...EdgeSmoothProps
},
setup(props) {
const [centerX, centerY] = getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
const centered = computed(() => {
return getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
});
});
const path = getSmoothStepPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
borderRadius: props.borderRadius
const path = computed(() => {
return getSmoothStepPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
borderRadius: props.borderRadius
});
});
const markerEnd = getMarkerEnd(props.arrowHeadType, props.markerEndId);
const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
const text = props.label ? (
<EdgeText
x={centerX}
y={centerY}
x={centered.value[0]}
y={centered.value[1]}
label={props.label}
labelStyle={props.labelStyle}
labelShowBg={props.labelShowBg}
@@ -132,11 +138,14 @@ const SmoothStepEdge = defineComponent({
return (
<>
<path style={props.style} class="revue-flow__edge-path" d={path} marker-end={markerEnd} />
<path
class="revue-flow__edge-path"
style={props.style}
d={path.value}
marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
/>
{text}
</>
);
}
});
export default SmoothStepEdge;
}) as unknown as EdgeType;
src/components/Edges/StepEdge.tsx
+8 -8
View File
@@ -1,15 +1,15 @@
import { defineComponent } from 'vue';
import { EdgeSmoothStepProps } from '../../types';
import SmoothStepEdge from './SmoothStepEdge';
import { EdgeSmoothProps } from './utils';
import { EdgeType } from '../../types';
const StepEdge = defineComponent({
inheritAttrs: false,
export default defineComponent({
components: { SmoothStepEdge },
props: EdgeSmoothStepProps,
inheritAttrs: false,
props: {
...EdgeSmoothProps
},
setup(props) {
return () => <SmoothStepEdge {...props} borderRadius={0} />;
}
});
export default StepEdge;
}) as EdgeType;
src/components/Edges/StraightEdge.tsx
+21 -17
View File
@@ -1,24 +1,28 @@
import { defineComponent } from 'vue';
import EdgeText from './EdgeText';
import { getMarkerEnd } from './utils';
import { EdgeProps } from '../../types';
import { getMarkerEnd, DefaultEdgeProps } from './utils';
import { reactify } from '@vueuse/core';
import { ArrowHeadType, EdgeType } from '../../types';
const StraightEdge = defineComponent({
export default defineComponent({
inheritAttrs: false,
props: EdgeProps,
props: {
...DefaultEdgeProps
},
setup(props) {
const yOffset = Math.abs(props.targetY - props.sourceY) / 2;
const centerY = props.targetY < props.sourceY ? props.targetY + yOffset : props.targetY - yOffset;
const xOffset = Math.abs(props.targetX - props.sourceX) / 2;
const centerX = props.targetX < props.sourceX ? props.targetX + xOffset : props.targetX - xOffset;
const markerEnd = getMarkerEnd(props.arrowHeadType, props.markerEndId);
const centerY = reactify((targetY: number, sourceY: number) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
return targetY < sourceY ? targetY + yOffset : targetY - yOffset;
});
const centerX = reactify((targetX: number, sourceX: number) => {
const xOffset = Math.abs(targetX - sourceX) / 2;
return targetX < sourceX ? targetX + xOffset : targetX - xOffset;
});
const text = props.label ? (
<EdgeText
x={centerX}
y={centerY}
x={centerX(props.targetX, props.sourceX).value}
y={centerY(props.targetY, props.sourceY).value}
label={props.label}
labelStyle={props.labelStyle}
labelShowBg={props.labelShowBg}
@@ -28,18 +32,18 @@ const StraightEdge = defineComponent({
/>
) : null;
const markerEnd = reactify((arrowHeadType?: ArrowHeadType, markerEndId?: string) => getMarkerEnd(arrowHeadType, markerEndId));
return (
<>
<path
style={props.style}
class="revue-flow__edge-path"
d={`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`}
marker-end={markerEnd}
marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
/>
{text}
</>
);
}
});
export default StraightEdge;
}) as unknown as EdgeType;
src/components/Edges/utils.ts
+109 -1
View File
@@ -1,4 +1,5 @@
import { ArrowHeadType, Position } from '../../types';
import { ArrowHeadType, Position, EdgeProps, EdgeSmoothStepProps } from '../../types';
import { PropType } from 'vue';
export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
if (typeof markerEndId !== 'undefined' && markerEndId) {
@@ -52,3 +53,110 @@ export const getCenter = ({
return [centerX, centerY, xOffset, yOffset];
};
export const DefaultEdgeProps = {
id: {
type: String as PropType<EdgeProps['id']>,
required: true,
default: 0
},
sourceX: {
type: Number as PropType<EdgeProps['sourceX']>,
required: true,
default: 0
},
sourceY: {
type: Number as PropType<EdgeProps['sourceY']>,
required: true,
default: 0
},
targetX: {
type: Number as PropType<EdgeProps['targetX']>,
required: true,
default: 0
},
targetY: {
type: Number as PropType<EdgeProps['targetY']>,
required: true,
default: 0
},
sourcePosition: {
type: String as PropType<EdgeProps['sourcePosition']>,
required: false,
default: Position.Bottom
},
targetPosition: {
type: String as PropType<EdgeProps['targetPosition']>,
required: false,
default: Position.Top
},
label: {
type: String as PropType<EdgeProps['label']>,
required: false,
default: undefined
},
labelStyle: {
type: Object as PropType<EdgeProps['labelStyle']>,
required: false,
default: undefined
},
labelShowBg: {
type: Boolean as PropType<EdgeProps['labelShowBg']>,
required: false,
default: false
},
labelBgStyle: {
type: String as PropType<EdgeProps['labelBgStyle']>,
required: false,
default: undefined
},
labelBgPadding: {
type: Array as unknown as PropType<[number, number]>,
required: false,
default: undefined
},
labelBgBorderRadius: {
type: Number as PropType<EdgeProps['labelBgBorderRadius']>,
required: false,
default: undefined
},
arrowHeadType: {
type: Object as PropType<EdgeProps['arrowHeadType']>,
required: false,
default: undefined
},
markerEndId: {
type: String as PropType<EdgeProps['markerEndId']>,
required: false,
default: undefined
},
style: {
type: Object as PropType<EdgeProps['style']>,
required: false,
default: undefined
},
data: {
type: Object as PropType<EdgeProps['data']>,
required: false,
default: undefined
},
sourceHandleId: {
type: String as PropType<EdgeProps['sourceHandleId']>,
required: false,
default: undefined
},
targetHandleId: {
type: String as PropType<EdgeProps['targetHandleId']>,
required: false,
default: undefined
}
};
export const EdgeSmoothProps = {
...DefaultEdgeProps,
borderRadius: {
type: Number as PropType<EdgeSmoothStepProps['borderRadius']>,
required: false,
default: 5
}
};
src/components/Handle/index.tsx
-5
View File
@@ -31,11 +31,6 @@ export default defineComponent({
type: String,
required: false,
default: undefined
},
onConnect: {
type: Function,
required: false,
default: undefined
}
},
setup(props, { slots }) {
src/components/Nodes/DefaultNode.tsx
+4 -6
View File
@@ -1,8 +1,8 @@
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
import { defineComponent, PropType } from 'vue';
import Handle from '../../components/Handle';
import { NodeProps, NodeType, Position } from '../../types';
const DefaultNode = defineComponent({
export default defineComponent({
name: 'DefaultNode',
components: { Handle },
inheritAttrs: false,
@@ -37,6 +37,4 @@ const DefaultNode = defineComponent({
</>
);
}
});
export default DefaultNode;
}) as NodeType;
src/components/Nodes/InputNode.tsx
+3 -5
View File
@@ -1,8 +1,8 @@
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
import { NodeProps, NodeType, Position } from '../../types';
import { defineComponent, PropType } from 'vue';
const InputNode = defineComponent({
export default defineComponent({
name: 'InputNode',
components: { Handle },
inheritAttrs: false,
@@ -31,6 +31,4 @@ const InputNode = defineComponent({
</>
);
}
});
export default InputNode;
}) as NodeType;
src/components/Nodes/Node.vue
+2 -2
View File
@@ -39,11 +39,11 @@
import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
import { Node, NodeDimensionUpdate, NodeTypesType, RevueFlowStore } from '../../types';
import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
interface NodeProps {
nodeTypes: NodeTypesType;
nodeTypes: Record<string, NodeType>;
snapToGrid: boolean;
snapGrid: [number, number];
selectNodesOnDrag: boolean;
src/components/Nodes/OutputNode.tsx
+3 -5
View File
@@ -1,8 +1,8 @@
import Handle from '../../components/Handle';
import { NodeProps, Position } from '../../types';
import { NodeProps, NodeType, Position } from '../../types';
import { defineComponent, PropType } from 'vue';
const OutputNode = defineComponent({
export default defineComponent({
name: 'OutputNode',
components: { Handle },
inheritAttrs: false,
@@ -31,6 +31,4 @@ const OutputNode = defineComponent({
</>
);
}
});
export default OutputNode;
}) as NodeType;
src/components/NodesSelection/index.tsx
+1
View File
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* The nodes selection rectangle gets displayed when a user
* made a selectio with on or several nodes