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

refactor: back to jsx 🥇

Browse Source
This commit is contained in:
Braks
2021-08-08 19:28:45 +02:00
parent a6f7678c0f
commit 1d542aba65
31 changed files with 666 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/ConnectionLine.vue → src/components/ConnectionLine/index.tsx
+36 -44
View File
@@ -1,23 +1,4 @@
<template>
<g v-show="sourceNode && nodesConnectable" class="revue-flow__connection">
<g v-if="CustomConnectionLineComponent" class="revue-flow__connection">
<component
:is="CustomConnectionLineComponent"
:sourceX="sourceX"
:sourceY="sourceY"
:sourcePosition="sourceHandle.position"
:targetX="targetX"
:targetY="targetY"
:targetPosition="targetPosition"
:connectionLineType="connectionLineType"
:connectionLineStyle="connectionLineStyle"
/>
</g>
<path v-else class="revue-flow__connection-path" :d="dAttr" :style="connectionLineStyle" />
</g>
</template>
<script lang="ts">
import { ref, defineComponent, CSSProperties, PropType, computed, inject } from 'vue';
import { ref, defineComponent, CSSProperties, PropType, computed, inject, h } from 'vue';
import { getBezierPath } from '../Edges/BezierEdge';
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
@@ -26,23 +7,23 @@ import { Node, HandleElement, Position, ConnectionLineType, ConnectionLineCompon
interface ConnectionLineProps {
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
CustomConnectionLineComponent?: ConnectionLineComponent;
customConnectionLine?: ConnectionLineComponent;
}
const ConnectionLine = defineComponent({
export default defineComponent({
props: {
connectionLineType: {
type: String as PropType<ConnectionLineProps['connectionLineType']>,
required: false,
default: ConnectionLineType.Bezier
},
connectionLineStyle: {
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
required: false,
default: () => {}
},
CustomConnectionLineComponent: {
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
connectionLineType: {
type: String as PropType<ConnectionLineProps['connectionLineType']>,
required: false,
default: ConnectionLineType.Bezier
},
customConnectionLine: {
type: Object as PropType<ConnectionLineProps['customConnectionLine']>,
required: false,
default: undefined
}
@@ -114,20 +95,31 @@ const ConnectionLine = defineComponent({
);
}
return {
dAttr,
targetX,
targetY,
sourceX,
sourceY,
sourceHandle,
sourceNode,
sourceHandleX,
sourceHandleY,
nodesConnectable
};
if (props.customConnectionLine) {
return () => (
<g class="revue-flow__connection">
{props.customConnectionLine &&
h(props.customConnectionLine, {
sourceX: sourceX.value,
sourceY: sourceY.value,
sourcePosition: sourceHandle.value?.position,
targetX: targetX.value,
targetY: targetY.value,
targetPosition: targetPosition.value,
connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle
})}
</g>
);
}
return () =>
nodesConnectable.value && sourceNode.value ? (
<g class="revue-flow__connection">
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
</g>
) : (
''
);
}
});
export default ConnectionLine;
</script>
src/components/Edges/BezierEdge.tsx
+1 -1
View File
@@ -121,7 +121,7 @@ const BezierEdge = defineComponent({
style: {
type: Object as PropType<CSSProperties>,
required: false,
default: () => ({})
default: () => {}
}
},
setup(props) {
src/components/Edges/Edge.tsx
+255
View File
@@ -0,0 +1,255 @@
import { EdgeAnchor } from './EdgeAnchor';
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
import { computed, defineComponent, h, inject, PropType, ref } from 'vue';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
import { isEdge } from '../../utils/graph';
import { onMouseDown } from '../Handle/handler';
interface EdgeProps {
edge: Edge;
nodes: Node[];
selectedElements: Elements | null;
elementsSelectable: boolean;
transform: Transform;
width: number;
height: number;
onlyRenderVisibleElements: boolean;
connectionMode?: ConnectionMode;
markerEndId?: string;
edgeUpdaterRadius?: number;
}
export default defineComponent({
components: { EdgeAnchor },
props: {
edge: {
type: Object as PropType<EdgeProps['edge']>,
required: true
},
markerEndId: {
type: Object as PropType<EdgeProps['markerEndId']>,
required: false,
default: undefined
},
edgeUpdaterRadius: {
type: Number as PropType<EdgeProps['edgeUpdaterRadius']>,
required: false,
default: undefined
},
type: {
type: Object,
required: true
},
onlyRenderVisibleElements: {
type: Boolean as PropType<EdgeProps['onlyRenderVisibleElements']>,
required: false,
default: false
},
connectionMode: {
type: String as PropType<EdgeProps['connectionMode']>,
required: false,
default: undefined
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const nodes = computed(() => getSourceTargetNodes(props.edge, store.nodes));
hooks.connect.on((connection) => {
hooks.edgeUpdate.trigger({ edge: props.edge, connection });
});
if (!nodes.value.sourceNode) {
console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
}
if (!nodes.value.targetNode) {
console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
}
const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
props.connectionMode === ConnectionMode.Strict
? targetNodeBounds.value?.target
: targetNodeBounds.value?.target || targetNodeBounds.value?.source
);
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
);
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
const edgePositions = computed<{
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}>(() => {
return getEdgePositions(
nodes.value.sourceNode as Node,
sourceHandle.value,
sourcePosition.value,
nodes.value.targetNode as Node,
targetHandle.value,
targetPosition.value
);
});
const isVisible = computed(() => {
return props.onlyRenderVisibleElements
? edgePositions.value &&
isEdgeVisible({
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
width: store.width || 0,
height: store.height || 0,
transform: store.transform
})
: true;
});
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
const updating = ref<boolean>(false);
const inactive = computed(() => !store.elementsSelectable);
const edgeClasses = computed(() => [
'revue-flow__edge',
`revue-flow__edge-${props.type}`,
{ selected: isSelected.value, animated: props.edge.animated, inactive: inactive.value, updating: updating.value }
]);
const edgeElement = computed<Edge>(() => {
const el: Edge = {
id: props.edge.id || '',
source: props.edge.source,
target: props.edge.target,
type: props.edge.type
};
if (props.edge.sourceHandle) {
el.sourceHandle = props.edge.sourceHandle;
}
if (props.edge.targetHandle) {
el.targetHandle = props.edge.targetHandle;
}
if (typeof props.edge.data !== 'undefined') {
el.data = props.edge.data;
}
return el;
});
const onEdgeClick = (event: MouseEvent) => {
if (store.elementsSelectable) {
store.unsetNodesSelection();
store.addSelectedElements(edgeElement.value as any);
}
hooks.edgeClick.trigger({ event, edge: edgeElement.value });
};
const onEdgeContextMenu = (event: MouseEvent) =>
hooks.edgeContextMenu.trigger({
event,
edge: edgeElement.value
});
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value });
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value });
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value });
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? props.edge.target : props.edge.source;
const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle;
const isValidConnection = () => true;
const isTarget = isSourceHandle;
hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value });
onMouseDown(
event,
store,
hooks,
handleId as string,
nodeId,
isTarget,
isValidConnection,
isSourceHandle ? 'target' : 'source'
);
};
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, true);
};
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, false);
};
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
const onEdgeUpdaterMouseOut = () => (updating.value = false);
return () =>
isVisible.value ? (
<g
class={edgeClasses.value}
onClick={onEdgeClick}
onContextmenu={onEdgeContextMenu}
onMouseenter={onEdgeMouseEnter}
onMousemove={onEdgeMouseMove}
onMouseleave={onEdgeMouseLeave}
>
{h(props.type, {
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
selected: isSelected,
animated: props.edge.animated,
label: props.edge.label,
labelStyle: props.edge.labelStyle,
labelShowBg: props.edge.labelShowBg,
labelBgStyle: props.edge.labelBgStyle,
labelBgPadding: props.edge.labelBgPadding,
labelBgBorderRadius: props.edge.labelBgBorderRadius,
data: props.edge.data,
style: props.edge.style,
arrowHeadType: props.edge.arrowHeadType,
sourceX: edgePositions.value.sourceX,
sourceY: edgePositions.value.sourceY,
targetX: edgePositions.value.targetX,
targetY: edgePositions.value.targetY,
sourcePosition: sourcePosition.value,
targetPosition: targetPosition.value,
markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle
}, {})}
<g onMousedown={onEdgeUpdaterSourceMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}>
<EdgeAnchor
position={sourcePosition.value}
centerX={edgePositions.value.sourceX}
centerY={edgePositions.value.sourceY}
radius={props.edgeUpdaterRadius}
/>
</g>
<g onMousedown={onEdgeUpdaterTargetMouseDown} onMouseenter={onEdgeUpdaterMouseEnter} onMouseout={onEdgeUpdaterMouseOut}>
<EdgeAnchor
position={sourcePosition.value}
centerX={edgePositions.value.sourceX}
centerY={edgePositions.value.sourceY}
radius={props.edgeUpdaterRadius}
/>
</g>
</g>
) : (
''
);
}
});
src/components/Edges/Edge.vue
-2
View File
@@ -144,8 +144,6 @@ export default defineComponent({
targetY: number;
}>(() => {
return (
nodes.value.sourceNode &&
nodes.value.targetNode &&
getEdgePositions(
nodes.value.sourceNode,
sourceHandle.value,
src/components/Handle/Handle.ts
-70
View File
@@ -1,70 +0,0 @@
import { ElementId, Position, RevueFlowStore } from '../../types';
import { onMouseDown, ValidConnectionFunc } from './handler';
import { computed, defineComponent, h, inject, PropType } from 'vue';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
const alwaysValid = () => true;
export default defineComponent({
props: {
type: {
type: String,
required: false,
default: 'source'
},
position: {
type: String as PropType<Position>,
required: false,
default: Position.Top
},
isValidConnection: {
type: Function as PropType<ValidConnectionFunc>,
required: false,
default: alwaysValid
},
isConnectable: {
type: Boolean,
required: false,
default: true
},
id: {
type: String,
required: false,
default: undefined
}
},
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
const isTarget = computed(() => props.type === 'target');
const onMouseDownHandler = (event: MouseEvent) => {
onMouseDown(event, store, hooks, props.id || '', nodeId, isTarget.value, props.isValidConnection);
};
const handleClasses = computed(() => [
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: !isTarget.value,
target: isTarget.value,
connectable: props.isConnectable
}
]);
return () =>
h(
'div',
{
dataHandleid: props.id,
dataNodeid: nodeId,
dataHandlepos: props.position,
class: handleClasses.value,
onMouseDown: onMouseDownHandler
},
slots.default?.()
);
}
});
src/components/Handle/handler.ts
+1 -4
View File
@@ -1,11 +1,8 @@
import { getHostForElement } from '../../utils';
import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
import { ElementId, ConnectionMode, Connection, HandleType, RevueFlowStore } from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
export type ValidConnectionFunc = (connection: Connection) => boolean;
export type SetSourceIdFunc = (params: SetConnectionId) => void;
export type SetPosition = (pos: XYPosition) => void;
type Result = {
elementBelow: Element | null;
src/components/Handle/index.tsx
+6 -11
View File
@@ -5,7 +5,7 @@ import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
const alwaysValid = () => true;
const Handle = defineComponent({
export default defineComponent({
props: {
type: {
type: String,
@@ -41,21 +41,18 @@ const Handle = defineComponent({
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
const isTarget = computed(() => props.type === 'target');
const nodeId = inject<ElementId>('NodeIdContext')!;
const onMouseDownHandler = (event: MouseEvent) => {
console.log('mousedown');
onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
};
const onMouseDownHandler = (event: MouseEvent) =>
onMouseDown(event, store, hooks, props.id as string, nodeId, props.type === 'target', props.isValidConnection);
const handleClasses = computed(() => [
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: !isTarget.value,
target: isTarget.value,
source: props.type !== 'target',
target: props.type === 'target',
connectable: props.isConnectable
}
]);
@@ -73,5 +70,3 @@ const Handle = defineComponent({
);
}
});
export default Handle;
src/components/Nodes/Node.vue
+1 -1
View File
@@ -57,7 +57,7 @@ export default defineComponent({
required: true
},
type: {
type: Object,
type: [Object, String],
required: true
},
snapToGrid: {
src/components/UserSelection/index.tsx
+17 -19
View File
@@ -38,9 +38,6 @@ export default defineComponent({
const store = inject<RevueFlowStore>('store')!;
const el = templateRef('user-selection', null);
const shouldRender = computed(() => store.selectionActive || store.elementsSelectable);
if (!shouldRender.value) {
return null;
}
const onMouseDown = (event: MouseEvent) => {
const mousePos = getMousePosition(event);
@@ -52,12 +49,10 @@ export default defineComponent({
};
const onMouseMove = (event: MouseEvent) => {
if (!store.selectionActive) {
return;
}
const mousePos = getMousePosition(event);
if (!mousePos) {
return;
}
@@ -80,19 +75,22 @@ export default defineComponent({
useEventListener(el, 'mouseup', onMouseUp);
useEventListener(el, 'mouseleave', onMouseLeave);
return () => (
<div class="revue-flow__selectionpane" ref="user-selection">
{store?.userSelectionRect.draw ? (
<SelectionRect
width={store.userSelectionRect.width}
height={store.userSelectionRect.height}
x={store.userSelectionRect.x}
y={store.userSelectionRect.y}
/>
) : (
''
)}
</div>
);
return () =>
shouldRender.value ? (
<div class="revue-flow__selectionpane" ref="user-selection">
{store?.userSelectionRect.draw ? (
<SelectionRect
width={store.userSelectionRect.width}
height={store.userSelectionRect.height}
x={store.userSelectionRect.x}
y={store.userSelectionRect.y}
/>
) : (
''
)}
</div>
) : (
''
);
}
});