update: Remove wrapEdge and wrapNode files
* implement Edge.tsx and Node.vue to wrap the components accordingly refactor!: Removing callbacks from props in favor of events chore: upgrade vue and vite vue plugin
This commit is contained in:
Braks
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="revue-flow__nodes" :style="transformStyle">
|
||||
<template v-for="(node, i) of visibleNodes" :key="`node-${i}`">
|
||||
<Node
|
||||
:node="node"
|
||||
:snap-grid="snapGrid"
|
||||
:snap-to-grid="snapToGrid"
|
||||
:select-nodes-on-drag="selectNodesOnDrag"
|
||||
:type="nodeTypes[node.type]"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { getNodesInside } from '../../utils/graph';
|
||||
import { NodeTypesType, RevueFlowStore } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import Node from '../../components/Nodes/Node.vue';
|
||||
|
||||
interface NodeRendererProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
selectNodesOnDrag: boolean;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
onlyRenderVisibleElements: boolean;
|
||||
}
|
||||
|
||||
const NodeRenderer = defineComponent({
|
||||
name: 'NodeRenderer',
|
||||
components: { Node },
|
||||
props: {
|
||||
nodeTypes: {
|
||||
type: Object as PropType<NodeRendererProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? store.nodes &&
|
||||
getNodesInside(
|
||||
store.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: store?.width,
|
||||
height: store?.height
|
||||
},
|
||||
store.transform,
|
||||
true
|
||||
)
|
||||
: store.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
return {
|
||||
transformStyle,
|
||||
visibleNodes
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default NodeRenderer;
|
||||
</script>
|
||||
@@ -1,189 +0,0 @@
|
||||
import { getNodesInside } from '../../utils/graph';
|
||||
import { Node, NodeTypesType, Edge, RevueFlowStore } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
|
||||
interface NodeRendererProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
selectNodesOnDrag: boolean;
|
||||
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
||||
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
|
||||
onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDragStart?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDrag?: (event: MouseEvent, node: Node) => void;
|
||||
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
onlyRenderVisibleElements: boolean;
|
||||
}
|
||||
|
||||
const NodeRenderer = defineComponent({
|
||||
name: 'NodeRenderer',
|
||||
props: {
|
||||
nodeTypes: {
|
||||
type: Object as PropType<NodeRendererProps['nodeTypes']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeRendererProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeRendererProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeRendererProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<NodeRendererProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onElementClick: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onElementClick']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDoubleClick: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDoubleClick']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseEnter: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseEnter']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseMove: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseMove']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeMouseLeave: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeMouseLeave']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeContextMenu: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeContextMenu']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDrag: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDrag']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDragStart: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStart']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
onNodeDragStop: {
|
||||
type: Function as unknown as PropType<NodeRendererProps['onNodeDragStop']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? store.nodes &&
|
||||
getNodesInside(
|
||||
store.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: store?.width,
|
||||
height: store?.height
|
||||
},
|
||||
store.transform,
|
||||
true
|
||||
)
|
||||
: store.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
const resizeObserver = computed(() => {
|
||||
if (typeof ResizeObserver === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new ResizeObserver((entries: ResizeObserverEntry[]) => {
|
||||
const updates = entries.map((entry: ResizeObserverEntry) => ({
|
||||
id: entry.target.getAttribute('data-id') as string,
|
||||
nodeElement: entry.target as HTMLDivElement
|
||||
}));
|
||||
|
||||
store.updateNodeDimensions(updates);
|
||||
});
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="revue-flow__nodes" style={transformStyle.value}>
|
||||
{visibleNodes.value?.map((node) => {
|
||||
const nodeType = node.type || 'default';
|
||||
if (props.nodeTypes) {
|
||||
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default);
|
||||
if (!props.nodeTypes[nodeType]) {
|
||||
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
|
||||
}
|
||||
|
||||
const isDraggable = !!(node.draggable || (store?.nodesDraggable && typeof node.draggable === 'undefined'));
|
||||
const isSelectable = !!(node.selectable || (store?.elementsSelectable && typeof node.selectable === 'undefined'));
|
||||
const isConnectable = !!(node.connectable || (store?.nodesConnectable && typeof node.connectable === 'undefined'));
|
||||
|
||||
return (
|
||||
<NodeComponent
|
||||
key={node.id}
|
||||
id={node.id}
|
||||
type={nodeType}
|
||||
data={node.data}
|
||||
sourcePosition={node.sourcePosition}
|
||||
targetPosition={node.targetPosition}
|
||||
isHidden={node.isHidden}
|
||||
xPos={node.__rf.position.x}
|
||||
yPos={node.__rf.position.y}
|
||||
isDragging={node.__rf.isDragging}
|
||||
isInitialized={node.__rf.width !== null && node.__rf.height !== null}
|
||||
snapGrid={props.snapGrid}
|
||||
snapToGrid={props.snapToGrid}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
onClick={props.onElementClick}
|
||||
onMouseEnter={props.onNodeMouseEnter}
|
||||
onMouseMove={props.onNodeMouseMove}
|
||||
onMouseLeave={props.onNodeMouseLeave}
|
||||
onContextMenu={props.onNodeContextMenu}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
scale={store?.transform[2]}
|
||||
selected={store?.selectedElements?.some(({ id }) => id === node.id) || false}
|
||||
isDraggable={isDraggable}
|
||||
isSelectable={isSelectable}
|
||||
isConnectable={isConnectable}
|
||||
resizeObserver={resizeObserver.value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default NodeRenderer;
|
||||
@@ -1,22 +1,21 @@
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
import OutputNode from '../../components/Nodes/OutputNode';
|
||||
import wrapNode from '../../components/Nodes/wrapNode';
|
||||
import { NodeTypesType, WrapNodeProps } from '../../types';
|
||||
import { DefineComponent } from 'vue';
|
||||
import { NodeTypesType } from '../../types';
|
||||
|
||||
export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
|
||||
const standardTypes: NodeTypesType = {
|
||||
input: wrapNode(nodeTypes.input || InputNode) as DefineComponent<WrapNodeProps>,
|
||||
default: wrapNode(nodeTypes.default || DefaultNode) as DefineComponent<WrapNodeProps>,
|
||||
output: wrapNode(nodeTypes.output || OutputNode) as DefineComponent<WrapNodeProps>
|
||||
input: nodeTypes.input || InputNode,
|
||||
default: nodeTypes.default || DefaultNode,
|
||||
output: nodeTypes.output || OutputNode
|
||||
};
|
||||
|
||||
const wrappedTypes = {} as NodeTypesType;
|
||||
const specialTypes: NodeTypesType = Object.keys(nodeTypes)
|
||||
.filter((k) => !['input', 'default', 'output'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapNode(nodeTypes[key] || DefaultNode) as DefineComponent<WrapNodeProps>;
|
||||
// @ts-ignore
|
||||
res[key] = nodeTypes[key] || DefaultNode;
|
||||
|
||||
return res;
|
||||
}, wrappedTypes);
|
||||
|
||||
Reference in New Issue
Block a user