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

update: Remove wrapEdge and wrapNode files

Browse Source 
* 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
2021-08-08 19:28:45 +02:00
parent ffd41fb679
commit 25c92ecd84
40 changed files with 1224 additions and 3349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/NodeRenderer/index.tsx
-189
View File
@@ -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;