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
+100
-171
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user