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
2021-07-17 20:30:58 +02:00
parent 61ab006e94
commit 528f8f4420
7 changed files with 276 additions and 415 deletions
@@ -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>