refactor: remove passing props to reactive obj instead use props directly again (sort of breaks reactivity in some cases...)
fix: node selection not displaying correct rect after mouseup
This commit is contained in:
Braks
@@ -29,7 +29,6 @@ const nodeTypes = {
|
||||
};
|
||||
|
||||
const CustomNodeFlow = defineComponent({
|
||||
components: { RevueFlow, MiniMap, Controls },
|
||||
setup() {
|
||||
const elements = ref<Elements>([]);
|
||||
const bgColor = ref(initBgColor);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
import { isNode } from '../../utils/graph';
|
||||
import { Node, RevueFlowStore } from '../../types';
|
||||
import { computed, inject, ref } from 'vue';
|
||||
import { computed, defineComponent, inject, PropType, ref } from 'vue';
|
||||
import Draggable, { DraggableEventHandler } from '@braks/revue-draggable';
|
||||
|
||||
export interface NodesSelectionProps {
|
||||
@@ -14,89 +14,104 @@ export interface NodesSelectionProps {
|
||||
onSelectionContextMenu?: (event: MouseEvent, nodes: Node[]) => void;
|
||||
}
|
||||
|
||||
const NodesSelection = ({
|
||||
onSelectionDragStart,
|
||||
onSelectionDrag,
|
||||
onSelectionDragStop,
|
||||
onSelectionContextMenu
|
||||
}: NodesSelectionProps) => {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
console.log('nodesSelection');
|
||||
|
||||
const nodeRef = ref<HTMLElement | undefined>();
|
||||
|
||||
const grid = computed(() => (store?.snapToGrid ? store?.snapGrid : [1, 1])! as [number, number]);
|
||||
|
||||
const selectedNodes = computed(() =>
|
||||
store?.selectedElements
|
||||
? store?.selectedElements.filter(isNode).map((selectedNode) => {
|
||||
const matchingNode = store?.nodes.find((node) => node.id === selectedNode.id);
|
||||
|
||||
return {
|
||||
...matchingNode,
|
||||
position: matchingNode?.__rf.position
|
||||
} as Node;
|
||||
})
|
||||
: []
|
||||
);
|
||||
|
||||
const style = computed(() => ({
|
||||
transform: `translate(${store?.transform[0]}px,${store?.transform[1]}px) scale(${store?.transform[2]})`
|
||||
}));
|
||||
|
||||
const innerStyle = computed(() => ({
|
||||
width: store?.selectedNodesBbox.width,
|
||||
height: store?.selectedNodesBbox.height,
|
||||
top: store?.selectedNodesBbox.y,
|
||||
left: store?.selectedNodesBbox.x
|
||||
}));
|
||||
|
||||
const onStart: DraggableEventHandler = (event: MouseEvent) => {
|
||||
onSelectionDragStart?.(event, selectedNodes.value);
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventHandler = (event, data) => {
|
||||
if (onSelectionDrag) {
|
||||
onSelectionDrag(event, selectedNodes.value);
|
||||
const NodesSelection = defineComponent({
|
||||
props: {
|
||||
onSelectionDragStart: {
|
||||
type: Function as unknown as PropType<NodesSelectionProps['onSelectionDragStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDrag: {
|
||||
type: Function as unknown as PropType<NodesSelectionProps['onSelectionDrag']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionDragStop: {
|
||||
type: Function as unknown as PropType<NodesSelectionProps['onSelectionDragStop']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onSelectionContextMenu: {
|
||||
type: Function as unknown as PropType<NodesSelectionProps['onSelectionContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
console.log('dragging', data);
|
||||
};
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const nodeRef = ref<HTMLElement | undefined>();
|
||||
const grid = computed(() => (store.snapToGrid ? store.snapGrid : [1, 1])! as [number, number]);
|
||||
|
||||
const onStop: DraggableEventHandler = (event: MouseEvent) => {
|
||||
store?.updateNodePosDiff({
|
||||
isDragging: false
|
||||
});
|
||||
const selectedNodes = computed(() =>
|
||||
store.selectedElements
|
||||
? store.selectedElements.filter(isNode).map((selectedNode) => {
|
||||
const matchingNode = store.nodes.find((node) => node.id === selectedNode.id);
|
||||
|
||||
onSelectionDragStop?.(event, selectedNodes.value);
|
||||
};
|
||||
return {
|
||||
...matchingNode,
|
||||
position: matchingNode?.__rf.position
|
||||
} as Node;
|
||||
})
|
||||
: []
|
||||
);
|
||||
|
||||
const onContextMenu = (event: MouseEvent) => {
|
||||
const selectedNodes = store?.selectedElements
|
||||
? store?.selectedElements.filter(isNode).map((selectedNode) => store?.nodes.find((node) => node.id === selectedNode.id))
|
||||
: [];
|
||||
const style = computed(() => ({
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
onSelectionContextMenu?.(event, selectedNodes as any);
|
||||
};
|
||||
const innerStyle = computed(() => ({
|
||||
width: `${store.selectedNodesBbox.width}px`,
|
||||
height: `${store.selectedNodesBbox.height}px`,
|
||||
top: `${store.selectedNodesBbox.y}px`,
|
||||
left: `${store.selectedNodesBbox.x}px`
|
||||
}));
|
||||
|
||||
if (!store?.selectedElements || store?.selectionActive) {
|
||||
return null;
|
||||
const onStart: DraggableEventHandler = (event: MouseEvent) => {
|
||||
props.onSelectionDragStart?.(event, selectedNodes.value);
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventHandler = (event) => {
|
||||
if (props.onSelectionDrag) {
|
||||
props.onSelectionDrag(event, selectedNodes.value);
|
||||
}
|
||||
};
|
||||
|
||||
const onStop: DraggableEventHandler = (event: MouseEvent) => {
|
||||
store.updateNodePosDiff({
|
||||
isDragging: false
|
||||
});
|
||||
|
||||
props.onSelectionDragStop?.(event, selectedNodes.value);
|
||||
};
|
||||
|
||||
const onContextMenu = (event: MouseEvent) => {
|
||||
const selectedNodes = store.selectedElements
|
||||
? store.selectedElements.filter(isNode).map((selectedNode) => store.nodes.find((node) => node.id === selectedNode.id))
|
||||
: [];
|
||||
|
||||
props.onSelectionContextMenu?.(event, selectedNodes as any);
|
||||
};
|
||||
|
||||
return () => {
|
||||
return !store.selectedElements || store.selectionActive ? (
|
||||
''
|
||||
) : (
|
||||
<div class="revue-flow__nodesselection" style={style.value}>
|
||||
<Draggable
|
||||
scale={store.transform[2]}
|
||||
grid={grid.value}
|
||||
onStart={onStart}
|
||||
onDrag={onDrag}
|
||||
onStop={onStop}
|
||||
enableUserSelectHack={false}
|
||||
nodeRef={nodeRef.value}
|
||||
>
|
||||
<div ref={nodeRef} class="revue-flow__nodesselection-rect" onContextmenu={onContextMenu} style={innerStyle.value} />
|
||||
</Draggable>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="revue-flow__nodesselection" style={style.value}>
|
||||
<Draggable
|
||||
scale={store?.transform[2]}
|
||||
grid={grid.value}
|
||||
onStart={onStart}
|
||||
onDrag={onDrag}
|
||||
onStop={onStop}
|
||||
enableUserSelectHack={false}
|
||||
nodeRef={nodeRef.value}
|
||||
>
|
||||
<div ref={nodeRef} class="revue-flow__nodesselection-rect" onContextmenu={onContextMenu} style={innerStyle.value} />
|
||||
</Draggable>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default NodesSelection;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent, inject, onBeforeMount, onMounted, ref, reactive, PropType, CSSProperties } from 'vue';
|
||||
import { defineComponent, inject, onBeforeMount, onMounted, ref, PropType, CSSProperties } from 'vue';
|
||||
import FlowRenderer from '../FlowRenderer';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
@@ -359,74 +359,6 @@ const GraphView = defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const {
|
||||
nodeTypes,
|
||||
edgeTypes,
|
||||
onMove,
|
||||
onMoveStart,
|
||||
onMoveEnd,
|
||||
onLoad,
|
||||
onElementClick,
|
||||
onNodeDoubleClick,
|
||||
onEdgeDoubleClick,
|
||||
onNodeMouseEnter,
|
||||
onNodeMouseMove,
|
||||
onNodeMouseLeave,
|
||||
onNodeContextMenu,
|
||||
onNodeDragStart,
|
||||
onNodeDrag,
|
||||
onNodeDragStop,
|
||||
onSelectionDragStart,
|
||||
onSelectionDrag,
|
||||
onSelectionDragStop,
|
||||
onSelectionContextMenu,
|
||||
connectionMode,
|
||||
connectionLineType,
|
||||
connectionLineStyle,
|
||||
connectionLineComponent,
|
||||
selectionKeyCode,
|
||||
multiSelectionKeyCode,
|
||||
zoomActivationKeyCode,
|
||||
onElementsRemove,
|
||||
deleteKeyCode,
|
||||
onConnect,
|
||||
onConnectStart,
|
||||
onConnectStop,
|
||||
onConnectEnd,
|
||||
snapToGrid,
|
||||
snapGrid,
|
||||
onlyRenderVisibleElements,
|
||||
nodesDraggable,
|
||||
nodesConnectable,
|
||||
elementsSelectable,
|
||||
selectNodesOnDrag,
|
||||
minZoom,
|
||||
maxZoom,
|
||||
defaultZoom,
|
||||
defaultPosition,
|
||||
translateExtent,
|
||||
nodeExtent,
|
||||
arrowHeadColor,
|
||||
markerEndId,
|
||||
zoomOnScroll,
|
||||
zoomOnPinch,
|
||||
panOnScroll,
|
||||
panOnScrollSpeed,
|
||||
panOnScrollMode,
|
||||
zoomOnDoubleClick,
|
||||
paneMoveable,
|
||||
onPaneClick,
|
||||
onPaneScroll,
|
||||
onPaneContextMenu,
|
||||
onEdgeUpdate,
|
||||
onEdgeContextMenu,
|
||||
onEdgeMouseEnter,
|
||||
onEdgeMouseMove,
|
||||
onEdgeMouseLeave,
|
||||
edgeUpdaterRadius,
|
||||
onEdgeUpdateStart,
|
||||
onEdgeUpdateEnd
|
||||
} = reactive(props);
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
const isInitialized = ref<boolean>(false);
|
||||
|
||||
@@ -434,8 +366,8 @@ const GraphView = defineComponent({
|
||||
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
|
||||
|
||||
if (!isInitialized.value && initialized) {
|
||||
if (onLoad && store) {
|
||||
onLoad({
|
||||
if (props.onLoad && store) {
|
||||
props.onLoad({
|
||||
fitView: (params = { padding: 0.1 }) => fitView(params),
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
@@ -450,140 +382,137 @@ const GraphView = defineComponent({
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!props.nodesConnectable);
|
||||
}
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!props.elementsSelectable);
|
||||
}
|
||||
|
||||
if (typeof props.connectionMode !== 'undefined') {
|
||||
store?.setConnectionMode(props.connectionMode);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (onConnect) {
|
||||
store?.setOnConnect(onConnect);
|
||||
if (props.onConnect) {
|
||||
store?.setOnConnect(props.onConnect);
|
||||
}
|
||||
|
||||
if (onConnectStart) {
|
||||
store?.setOnConnectStart(onConnectStart);
|
||||
if (props.onConnectStart) {
|
||||
store?.setOnConnectStart(props.onConnectStart);
|
||||
}
|
||||
|
||||
if (onConnectStop) {
|
||||
store?.setOnConnectStop(onConnectStop);
|
||||
if (props.onConnectStop) {
|
||||
store?.setOnConnectStop(props.onConnectStop);
|
||||
}
|
||||
|
||||
if (onConnectEnd) {
|
||||
store?.setOnConnectEnd(onConnectEnd);
|
||||
if (props.onConnectEnd) {
|
||||
store?.setOnConnectEnd(props.onConnectEnd);
|
||||
}
|
||||
|
||||
if (typeof snapToGrid !== 'undefined') {
|
||||
store?.setSnapToGrid(snapToGrid);
|
||||
if (typeof props.snapToGrid !== 'undefined') {
|
||||
store?.setSnapToGrid(props.snapToGrid);
|
||||
}
|
||||
|
||||
if (typeof snapGrid !== 'undefined') {
|
||||
store?.setSnapGrid(snapGrid);
|
||||
if (typeof props.snapGrid !== 'undefined') {
|
||||
store?.setSnapGrid(props.snapGrid);
|
||||
}
|
||||
|
||||
if (typeof nodesDraggable !== 'undefined') {
|
||||
store?.setNodesDraggable(!!nodesDraggable);
|
||||
if (typeof props.nodesDraggable !== 'undefined') {
|
||||
store?.setNodesDraggable(!!props.nodesDraggable);
|
||||
}
|
||||
|
||||
if (typeof nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!nodesConnectable);
|
||||
if (typeof props.nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!props.nodesConnectable);
|
||||
}
|
||||
|
||||
if (typeof elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!elementsSelectable);
|
||||
if (typeof props.elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!props.elementsSelectable);
|
||||
}
|
||||
|
||||
if (typeof minZoom !== 'undefined') {
|
||||
store?.setMinZoom(minZoom);
|
||||
if (typeof props.minZoom !== 'undefined') {
|
||||
store?.setMinZoom(props.minZoom);
|
||||
}
|
||||
|
||||
if (typeof maxZoom !== 'undefined') {
|
||||
store?.setMaxZoom(maxZoom);
|
||||
if (typeof props.maxZoom !== 'undefined') {
|
||||
store?.setMaxZoom(props.maxZoom);
|
||||
}
|
||||
|
||||
if (typeof translateExtent !== 'undefined') {
|
||||
store?.setTranslateExtent(translateExtent);
|
||||
if (typeof props.translateExtent !== 'undefined') {
|
||||
store?.setTranslateExtent(props.translateExtent);
|
||||
}
|
||||
|
||||
if (typeof nodeExtent !== 'undefined') {
|
||||
store?.setNodeExtent(nodeExtent);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof nodesConnectable !== 'undefined') {
|
||||
store?.setNodesConnectable(!!nodesConnectable);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof elementsSelectable !== 'undefined') {
|
||||
store?.setElementsSelectable(!!elementsSelectable);
|
||||
}
|
||||
|
||||
if (typeof connectionMode !== 'undefined') {
|
||||
store?.setConnectionMode(connectionMode);
|
||||
if (typeof props.nodeExtent !== 'undefined') {
|
||||
store?.setNodeExtent(props.nodeExtent);
|
||||
}
|
||||
});
|
||||
|
||||
return () => (
|
||||
<FlowRenderer
|
||||
onPaneClick={onPaneClick}
|
||||
onPaneContextMenu={onPaneContextMenu}
|
||||
onPaneScroll={onPaneScroll}
|
||||
onElementsRemove={onElementsRemove}
|
||||
deleteKeyCode={deleteKeyCode}
|
||||
selectionKeyCode={selectionKeyCode}
|
||||
multiSelectionKeyCode={multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={zoomActivationKeyCode}
|
||||
elementsSelectable={elementsSelectable}
|
||||
onMove={onMove}
|
||||
onMoveStart={onMoveStart}
|
||||
onMoveEnd={onMoveEnd}
|
||||
zoomOnScroll={zoomOnScroll}
|
||||
zoomOnPinch={zoomOnPinch}
|
||||
zoomOnDoubleClick={zoomOnDoubleClick}
|
||||
panOnScroll={panOnScroll}
|
||||
panOnScrollSpeed={panOnScrollSpeed}
|
||||
panOnScrollMode={panOnScrollMode}
|
||||
paneMoveable={paneMoveable}
|
||||
defaultPosition={defaultPosition}
|
||||
defaultZoom={defaultZoom}
|
||||
translateExtent={translateExtent}
|
||||
onSelectionDragStart={onSelectionDragStart}
|
||||
onSelectionDrag={onSelectionDrag}
|
||||
onSelectionDragStop={onSelectionDragStop}
|
||||
onSelectionContextMenu={onSelectionContextMenu}
|
||||
onPaneClick={props.onPaneClick}
|
||||
onPaneContextMenu={props.onPaneContextMenu}
|
||||
onPaneScroll={props.onPaneScroll}
|
||||
onElementsRemove={props.onElementsRemove}
|
||||
deleteKeyCode={props.deleteKeyCode}
|
||||
selectionKeyCode={props.selectionKeyCode}
|
||||
multiSelectionKeyCode={props.multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
onMove={props.onMove}
|
||||
onMoveStart={props.onMoveStart}
|
||||
onMoveEnd={props.onMoveEnd}
|
||||
zoomOnScroll={props.zoomOnScroll}
|
||||
zoomOnPinch={props.zoomOnPinch}
|
||||
zoomOnDoubleClick={props.zoomOnDoubleClick}
|
||||
panOnScroll={props.panOnScroll}
|
||||
panOnScrollSpeed={props.panOnScrollSpeed}
|
||||
panOnScrollMode={props.panOnScrollMode}
|
||||
paneMoveable={props.paneMoveable}
|
||||
defaultPosition={props.defaultPosition}
|
||||
defaultZoom={props.defaultZoom}
|
||||
translateExtent={props.translateExtent}
|
||||
onSelectionDragStart={props.onSelectionDragStart}
|
||||
onSelectionDrag={props.onSelectionDrag}
|
||||
onSelectionDragStop={props.onSelectionDragStop}
|
||||
onSelectionContextMenu={props.onSelectionContextMenu}
|
||||
>
|
||||
<NodeRenderer
|
||||
nodeTypes={nodeTypes}
|
||||
onElementClick={onElementClick}
|
||||
onNodeDoubleClick={onNodeDoubleClick}
|
||||
onNodeMouseEnter={onNodeMouseEnter}
|
||||
onNodeMouseMove={onNodeMouseMove}
|
||||
onNodeMouseLeave={onNodeMouseLeave}
|
||||
onNodeContextMenu={onNodeContextMenu}
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
onNodeDrag={onNodeDrag}
|
||||
onNodeDragStart={onNodeDragStart}
|
||||
selectNodesOnDrag={selectNodesOnDrag}
|
||||
snapToGrid={snapToGrid}
|
||||
snapGrid={snapGrid}
|
||||
onlyRenderVisibleElements={onlyRenderVisibleElements}
|
||||
nodeTypes={props.nodeTypes}
|
||||
onElementClick={props.onElementClick}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeMouseEnter={props.onNodeMouseEnter}
|
||||
onNodeMouseMove={props.onNodeMouseMove}
|
||||
onNodeMouseLeave={props.onNodeMouseLeave}
|
||||
onNodeContextMenu={props.onNodeContextMenu}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
snapToGrid={props.snapToGrid}
|
||||
snapGrid={props.snapGrid}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
/>
|
||||
<EdgeRenderer
|
||||
edgeTypes={edgeTypes}
|
||||
onElementClick={onElementClick}
|
||||
onEdgeDoubleClick={onEdgeDoubleClick}
|
||||
connectionLineType={connectionLineType}
|
||||
connectionLineStyle={connectionLineStyle}
|
||||
connectionLineComponent={connectionLineComponent}
|
||||
connectionMode={connectionMode}
|
||||
arrowHeadColor={arrowHeadColor}
|
||||
markerEndId={markerEndId}
|
||||
onEdgeUpdate={onEdgeUpdate}
|
||||
onlyRenderVisibleElements={onlyRenderVisibleElements}
|
||||
onEdgeContextMenu={onEdgeContextMenu}
|
||||
onEdgeMouseEnter={onEdgeMouseEnter}
|
||||
onEdgeMouseMove={onEdgeMouseMove}
|
||||
onEdgeMouseLeave={onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={edgeUpdaterRadius}
|
||||
edgeTypes={props.edgeTypes}
|
||||
onElementClick={props.onElementClick}
|
||||
onEdgeDoubleClick={props.onEdgeDoubleClick}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineComponent={props.connectionLineComponent}
|
||||
connectionMode={props.connectionMode}
|
||||
arrowHeadColor={props.arrowHeadColor}
|
||||
markerEndId={props.markerEndId}
|
||||
onEdgeUpdate={props.onEdgeUpdate}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
onEdgeContextMenu={props.onEdgeContextMenu}
|
||||
onEdgeMouseEnter={props.onEdgeMouseEnter}
|
||||
onEdgeMouseMove={props.onEdgeMouseMove}
|
||||
onEdgeMouseLeave={props.onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={props.onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={props.onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</FlowRenderer>
|
||||
);
|
||||
|
||||
@@ -94,27 +94,27 @@ const NodeRenderer = defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store');
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
|
||||
const visibleNodes = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? store?.nodes &&
|
||||
? store.nodes &&
|
||||
getNodesInside(
|
||||
store?.nodes,
|
||||
store.nodes,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: store?.width,
|
||||
height: store?.height
|
||||
},
|
||||
store?.transform,
|
||||
store.transform,
|
||||
true
|
||||
)
|
||||
: store?.nodes;
|
||||
: store.nodes;
|
||||
});
|
||||
|
||||
const transformStyle = computed(() => ({
|
||||
transform: `translate(${store?.transform[0]}px,${store?.transform[1]}px) scale(${store?.transform[2]})`
|
||||
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`
|
||||
}));
|
||||
|
||||
const resizeObserver = computed(() => {
|
||||
@@ -128,7 +128,7 @@ const NodeRenderer = defineComponent({
|
||||
nodeElement: entry.target as HTMLDivElement
|
||||
}));
|
||||
|
||||
store?.updateNodeDimensions(updates);
|
||||
store.updateNodeDimensions(updates);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1,14 +1,4 @@
|
||||
import {
|
||||
computed,
|
||||
CSSProperties,
|
||||
defineComponent,
|
||||
HTMLAttributes,
|
||||
onBeforeUnmount,
|
||||
PropType,
|
||||
provide,
|
||||
reactive,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, PropType, provide, watchEffect } from 'vue';
|
||||
import GraphView from '../GraphView';
|
||||
import DefaultNode from '../../components/Nodes/DefaultNode';
|
||||
import InputNode from '../../components/Nodes/InputNode';
|
||||
@@ -548,164 +538,92 @@ const RevueFlow = defineComponent({
|
||||
*/
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const {
|
||||
elements = [],
|
||||
nodeTypes = defaultNodeTypes,
|
||||
edgeTypes = defaultEdgeTypes,
|
||||
onElementClick,
|
||||
onLoad,
|
||||
onMove,
|
||||
onMoveStart,
|
||||
onMoveEnd,
|
||||
onElementsRemove,
|
||||
onConnect,
|
||||
onConnectStart,
|
||||
onConnectStop,
|
||||
onConnectEnd,
|
||||
onNodeMouseEnter,
|
||||
onNodeMouseMove,
|
||||
onNodeMouseLeave,
|
||||
onNodeContextMenu,
|
||||
onNodeDoubleClick,
|
||||
onNodeDragStart,
|
||||
onNodeDrag,
|
||||
onNodeDragStop,
|
||||
onSelectionChange,
|
||||
onSelectionDragStart,
|
||||
onSelectionDrag,
|
||||
onSelectionDragStop,
|
||||
onSelectionContextMenu,
|
||||
connectionMode = ConnectionMode.Strict,
|
||||
connectionLineType = ConnectionLineType.Bezier,
|
||||
connectionLineStyle,
|
||||
connectionLineComponent,
|
||||
deleteKeyCode = 'Backspace',
|
||||
selectionKeyCode = 'Shift',
|
||||
multiSelectionKeyCode = 'Meta',
|
||||
zoomActivationKeyCode = 'Meta',
|
||||
snapToGrid = false,
|
||||
snapGrid = [15, 15],
|
||||
onlyRenderVisibleElements = false,
|
||||
selectNodesOnDrag = true,
|
||||
nodesDraggable,
|
||||
nodesConnectable,
|
||||
elementsSelectable,
|
||||
minZoom,
|
||||
maxZoom,
|
||||
defaultZoom = 1,
|
||||
defaultPosition = [0, 0],
|
||||
translateExtent,
|
||||
nodeExtent,
|
||||
arrowHeadColor = '#b1b1b7',
|
||||
markerEndId,
|
||||
zoomOnScroll = true,
|
||||
zoomOnPinch = true,
|
||||
panOnScroll = false,
|
||||
panOnScrollSpeed = 0.5,
|
||||
panOnScrollMode = PanOnScrollMode.Free,
|
||||
zoomOnDoubleClick = true,
|
||||
paneMoveable = true,
|
||||
onPaneClick,
|
||||
onPaneScroll,
|
||||
onPaneContextMenu,
|
||||
onEdgeUpdate,
|
||||
onEdgeContextMenu,
|
||||
onEdgeDoubleClick,
|
||||
onEdgeMouseEnter,
|
||||
onEdgeMouseMove,
|
||||
onEdgeMouseLeave,
|
||||
onEdgeUpdateStart,
|
||||
onEdgeUpdateEnd,
|
||||
edgeUpdaterRadius = 10,
|
||||
nodeTypesId = '1',
|
||||
edgeTypesId = '1',
|
||||
...rest
|
||||
} = reactive(props);
|
||||
const store = configureStore(initialState)();
|
||||
provide<RevueFlowStore>('store', store);
|
||||
store.setElements(elements);
|
||||
store.setElements(props.elements);
|
||||
|
||||
watchEffect(() => {
|
||||
store.setElements(elements);
|
||||
onSelectionChange?.(store.selectedElements);
|
||||
store.setElements(props.elements);
|
||||
props.onSelectionChange?.(store.selectedElements);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.$reset();
|
||||
store.setElements([]);
|
||||
});
|
||||
|
||||
const nodeTypesParsed = computed(() => nodeTypes && createNodeTypes(nodeTypes));
|
||||
const edgeTypesParsed = computed(() => edgeTypes && createEdgeTypes(edgeTypes));
|
||||
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
|
||||
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
|
||||
|
||||
return () => (
|
||||
<div {...rest} class="revue-flow">
|
||||
<div onDrop={props.onDrop} onDragover={props.onDragover} class="revue-flow">
|
||||
<GraphView
|
||||
onLoad={onLoad}
|
||||
onMove={onMove}
|
||||
onMoveStart={onMoveStart}
|
||||
onMoveEnd={onMoveEnd}
|
||||
onElementClick={onElementClick}
|
||||
onNodeMouseEnter={onNodeMouseEnter}
|
||||
onNodeMouseMove={onNodeMouseMove}
|
||||
onNodeMouseLeave={onNodeMouseLeave}
|
||||
onNodeContextMenu={onNodeContextMenu}
|
||||
onNodeDoubleClick={onNodeDoubleClick}
|
||||
onNodeDragStart={onNodeDragStart}
|
||||
onNodeDrag={onNodeDrag}
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
onLoad={props.onLoad}
|
||||
onMove={props.onMove}
|
||||
onMoveStart={props.onMoveStart}
|
||||
onMoveEnd={props.onMoveEnd}
|
||||
onElementClick={props.onElementClick}
|
||||
onNodeMouseEnter={props.onNodeMouseEnter}
|
||||
onNodeMouseMove={props.onNodeMouseMove}
|
||||
onNodeMouseLeave={props.onNodeMouseLeave}
|
||||
onNodeContextMenu={props.onNodeContextMenu}
|
||||
onNodeDoubleClick={props.onNodeDoubleClick}
|
||||
onNodeDragStart={props.onNodeDragStart}
|
||||
onNodeDrag={props.onNodeDrag}
|
||||
onNodeDragStop={props.onNodeDragStop}
|
||||
nodeTypes={nodeTypesParsed.value}
|
||||
edgeTypes={edgeTypesParsed.value}
|
||||
connectionMode={connectionMode}
|
||||
connectionLineType={connectionLineType}
|
||||
connectionLineStyle={connectionLineStyle}
|
||||
connectionLineComponent={connectionLineComponent}
|
||||
selectionKeyCode={selectionKeyCode}
|
||||
onElementsRemove={onElementsRemove}
|
||||
deleteKeyCode={deleteKeyCode}
|
||||
multiSelectionKeyCode={multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={zoomActivationKeyCode}
|
||||
onConnect={onConnect}
|
||||
onConnectStart={onConnectStart}
|
||||
onConnectStop={onConnectStop}
|
||||
onConnectEnd={onConnectEnd}
|
||||
snapToGrid={snapToGrid}
|
||||
snapGrid={snapGrid}
|
||||
onlyRenderVisibleElements={onlyRenderVisibleElements}
|
||||
nodesDraggable={nodesDraggable}
|
||||
nodesConnectable={nodesConnectable}
|
||||
elementsSelectable={elementsSelectable}
|
||||
selectNodesOnDrag={selectNodesOnDrag}
|
||||
minZoom={minZoom}
|
||||
maxZoom={maxZoom}
|
||||
defaultZoom={defaultZoom}
|
||||
defaultPosition={defaultPosition}
|
||||
translateExtent={translateExtent}
|
||||
nodeExtent={nodeExtent}
|
||||
arrowHeadColor={arrowHeadColor}
|
||||
markerEndId={markerEndId}
|
||||
zoomOnScroll={zoomOnScroll}
|
||||
zoomOnPinch={zoomOnPinch}
|
||||
zoomOnDoubleClick={zoomOnDoubleClick}
|
||||
panOnScroll={panOnScroll}
|
||||
panOnScrollSpeed={panOnScrollSpeed}
|
||||
panOnScrollMode={panOnScrollMode}
|
||||
paneMoveable={paneMoveable}
|
||||
onPaneClick={onPaneClick}
|
||||
onPaneScroll={onPaneScroll}
|
||||
onPaneContextMenu={onPaneContextMenu}
|
||||
onSelectionDragStart={onSelectionDragStart}
|
||||
onSelectionDrag={onSelectionDrag}
|
||||
onSelectionDragStop={onSelectionDragStop}
|
||||
onSelectionContextMenu={onSelectionContextMenu}
|
||||
onEdgeUpdate={onEdgeUpdate}
|
||||
onEdgeContextMenu={onEdgeContextMenu}
|
||||
onEdgeDoubleClick={onEdgeDoubleClick}
|
||||
onEdgeMouseEnter={onEdgeMouseEnter}
|
||||
onEdgeMouseMove={onEdgeMouseMove}
|
||||
onEdgeMouseLeave={onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={edgeUpdaterRadius}
|
||||
connectionMode={props.connectionMode}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
connectionLineComponent={props.connectionLineComponent}
|
||||
selectionKeyCode={props.selectionKeyCode}
|
||||
onElementsRemove={props.onElementsRemove}
|
||||
deleteKeyCode={props.deleteKeyCode}
|
||||
multiSelectionKeyCode={props.multiSelectionKeyCode}
|
||||
zoomActivationKeyCode={props.zoomActivationKeyCode}
|
||||
onConnect={props.onConnect}
|
||||
onConnectStart={props.onConnectStart}
|
||||
onConnectStop={props.onConnectStop}
|
||||
onConnectEnd={props.onConnectEnd}
|
||||
snapToGrid={props.snapToGrid}
|
||||
snapGrid={props.snapGrid}
|
||||
onlyRenderVisibleElements={props.onlyRenderVisibleElements}
|
||||
nodesDraggable={props.nodesDraggable}
|
||||
nodesConnectable={props.nodesConnectable}
|
||||
elementsSelectable={props.elementsSelectable}
|
||||
selectNodesOnDrag={props.selectNodesOnDrag}
|
||||
minZoom={props.minZoom}
|
||||
maxZoom={props.maxZoom}
|
||||
defaultZoom={props.defaultZoom}
|
||||
defaultPosition={props.defaultPosition}
|
||||
translateExtent={props.translateExtent}
|
||||
nodeExtent={props.nodeExtent}
|
||||
arrowHeadColor={props.arrowHeadColor}
|
||||
markerEndId={props.markerEndId}
|
||||
zoomOnScroll={props.zoomOnScroll}
|
||||
zoomOnPinch={props.zoomOnPinch}
|
||||
zoomOnDoubleClick={props.zoomOnDoubleClick}
|
||||
panOnScroll={props.panOnScroll}
|
||||
panOnScrollSpeed={props.panOnScrollSpeed}
|
||||
panOnScrollMode={props.panOnScrollMode}
|
||||
paneMoveable={props.paneMoveable}
|
||||
onPaneClick={props.onPaneClick}
|
||||
onPaneScroll={props.onPaneScroll}
|
||||
onPaneContextMenu={props.onPaneContextMenu}
|
||||
onSelectionDragStart={props.onSelectionDragStart}
|
||||
onSelectionDrag={props.onSelectionDrag}
|
||||
onSelectionDragStop={props.onSelectionDragStop}
|
||||
onSelectionContextMenu={props.onSelectionContextMenu}
|
||||
onEdgeUpdate={props.onEdgeUpdate}
|
||||
onEdgeContextMenu={props.onEdgeContextMenu}
|
||||
onEdgeDoubleClick={props.onEdgeDoubleClick}
|
||||
onEdgeMouseEnter={props.onEdgeMouseEnter}
|
||||
onEdgeMouseMove={props.onEdgeMouseMove}
|
||||
onEdgeMouseLeave={props.onEdgeMouseLeave}
|
||||
onEdgeUpdateStart={props.onEdgeUpdateStart}
|
||||
onEdgeUpdateEnd={props.onEdgeUpdateEnd}
|
||||
edgeUpdaterRadius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
{slots.default ? slots.default() : ''}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { select, pointer } from 'd3-selection';
|
||||
|
||||
import { clamp } from '../../utils';
|
||||
import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
|
||||
import { defineComponent, onMounted, PropType, ref, watch, watchEffect } from 'vue';
|
||||
import { defineComponent, PropType, ref, watch, watchEffect } from 'vue';
|
||||
import store from '../../store';
|
||||
import useKeyPress from '../../hooks/useKeyPress';
|
||||
import useResizeHandler from '../../hooks/useResizeHandler';
|
||||
@@ -129,7 +129,7 @@ const ZoomPane = defineComponent({
|
||||
if (zoomPane.value) useResizeHandler(zoomPane.value);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
if (zoomPane.value && props.defaultPosition && props.defaultZoom) {
|
||||
const currentTranslateExtent =
|
||||
typeof props.translateExtent !== 'undefined' ? props.translateExtent : pinia.translateExtent;
|
||||
@@ -153,7 +153,7 @@ const ZoomPane = defineComponent({
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
if (pinia.d3Selection && pinia.d3Zoom) {
|
||||
if (props.panOnScroll && zoomActivationKeyPressed) {
|
||||
pinia.d3Selection
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function configureStore(
|
||||
setActivePinia(pinia);
|
||||
|
||||
return defineStore({
|
||||
id: 'revue-flow-' + pinia.state.value.length + 1,
|
||||
id: 'revue-flow-' + Math.random(),
|
||||
state: () => preloadedState,
|
||||
getters: {},
|
||||
actions: {
|
||||
|
||||
Reference in New Issue
Block a user