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

fix: user selection

Browse Source 
deps: upgrade to latest revue-draggable
This commit is contained in:
Braks
2021-07-15 21:15:25 +02:00
parent c7fda830a6
commit 2f93c917e0
8 changed files with 493 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -28,7 +28,7 @@
"lint": "yarn lint:js"
},
"dependencies": {
"@braks/revue-draggable": "^0.1.3",
"@braks/revue-draggable": "^0.1.10",
"@types/d3": "^7.0.0",
"d3": "^7.0.0",
"d3-selection": "^3.0.0",

5
src/components/UserSelection/index.tsx
View File

@@ -30,13 +30,12 @@ const SelectionRect = defineComponent({
return null;
}
console.log('selectionrect');
return () => (
<div
class="revue-flow__selection"
style={{
width: store?.userSelectionRect.width,
height: store?.userSelectionRect.height,
width: `${store?.userSelectionRect.width}px`,
height: `${store?.userSelectionRect.height}px`,
transform: `translate(${store?.userSelectionRect.x}px, ${store?.userSelectionRect.y}px)`
}}
/>

22
src/container/FlowRenderer/index.tsx
View File

@@ -25,57 +25,57 @@ const FlowRenderer = defineComponent({
components: { UserSelection, ZoomPane, NodesSelection },
props: {
onPaneClick: {
type: Function() as PropType<FlowRendererProps['onPaneClick']>,
type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
required: false,
default: undefined as any
},
onPaneContextMenu: {
type: Function() as PropType<FlowRendererProps['onPaneContextMenu']>,
type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
required: false,
default: undefined as any
},
onPaneScroll: {
type: Function() as PropType<FlowRendererProps['onPaneScroll']>,
type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
required: false,
default: undefined as any
},
onElementsRemove: {
type: Function() as PropType<FlowRendererProps['onElementsRemove']>,
type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
required: false,
default: undefined as any
},
onMove: {
type: Function() as PropType<FlowRendererProps['onMove']>,
type: Function as unknown as PropType<FlowRendererProps['onMove']>,
required: false,
default: undefined as any
},
onMoveStart: {
type: Function() as PropType<FlowRendererProps['onMoveStart']>,
type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
required: false,
default: undefined as any
},
onMoveEnd: {
type: Function() as PropType<FlowRendererProps['onMoveEnd']>,
type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
required: false,
default: undefined as any
},
onSelectionDragStart: {
type: Function() as PropType<FlowRendererProps['onSelectionDragStart']>,
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
required: false,
default: undefined as any
},
onSelectionDrag: {
type: Function() as PropType<FlowRendererProps['onSelectionDrag']>,
type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
required: false,
default: undefined as any
},
onSelectionDragStop: {
type: Function() as PropType<FlowRendererProps['onSelectionDragStop']>,
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
required: false,
default: undefined as any
},
onSelectionContextMenu: {
type: Function() as PropType<FlowRendererProps['onSelectionContextMenu']>,
type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
required: false,
default: undefined as any
},

269
src/container/GraphView/index.tsx
View File

@@ -1,10 +1,10 @@
import { defineComponent, inject, onBeforeMount, onMounted, ref, reactive, PropType, CSSProperties } from 'vue';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
import { RevueFlowProps } from '../RevueFlow';
import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode, RevueFlowStore } from '../../types';
import { CSSProperties, defineComponent, inject, onBeforeMount, onMounted, PropType, ref } from 'vue';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
export interface GraphViewProps extends Omit<RevueFlowProps, 'onSelectionChange' | 'elements'> {
@@ -337,6 +337,21 @@ const GraphView = defineComponent({
required: false,
default: undefined as any
},
onSelectionDragStart: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
required: false,
default: undefined as any
},
onSelectionDrag: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
required: false,
default: undefined as any
},
onSelectionDragStop: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
required: false,
default: undefined as any
},
edgeUpdaterRadius: {
type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
required: false,
@@ -344,6 +359,74 @@ 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);
@@ -351,8 +434,8 @@ const GraphView = defineComponent({
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
if (!isInitialized.value && initialized) {
if (props.onLoad && store) {
props.onLoad({
if (onLoad && store) {
onLoad({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn,
zoomOut,
@@ -368,139 +451,139 @@ const GraphView = defineComponent({
});
onBeforeMount(() => {
if (props.onConnect) {
store?.setOnConnect(props.onConnect);
if (onConnect) {
store?.setOnConnect(onConnect);
}
if (props.onConnectStart) {
store?.setOnConnectStart(props.onConnectStart);
if (onConnectStart) {
store?.setOnConnectStart(onConnectStart);
}
if (props.onConnectStop) {
store?.setOnConnectStop(props.onConnectStop);
if (onConnectStop) {
store?.setOnConnectStop(onConnectStop);
}
if (props.onConnectEnd) {
store?.setOnConnectEnd(props.onConnectEnd);
if (onConnectEnd) {
store?.setOnConnectEnd(onConnectEnd);
}
if (typeof props.snapToGrid !== 'undefined') {
store?.setSnapToGrid(props.snapToGrid);
if (typeof snapToGrid !== 'undefined') {
store?.setSnapToGrid(snapToGrid);
}
if (typeof props.snapGrid !== 'undefined') {
store?.setSnapGrid(props.snapGrid);
if (typeof snapGrid !== 'undefined') {
store?.setSnapGrid(snapGrid);
}
if (typeof props.nodesDraggable !== 'undefined') {
store?.setNodesDraggable(!!props.nodesDraggable);
if (typeof nodesDraggable !== 'undefined') {
store?.setNodesDraggable(!!nodesDraggable);
}
if (typeof props.nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!props.nodesConnectable);
if (typeof nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!nodesConnectable);
}
if (typeof props.elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!props.elementsSelectable);
if (typeof elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!elementsSelectable);
}
if (typeof props.minZoom !== 'undefined') {
store?.setMinZoom(props.minZoom as any);
if (typeof minZoom !== 'undefined') {
store?.setMinZoom(minZoom);
}
if (typeof props.maxZoom !== 'undefined') {
store?.setMaxZoom(props.maxZoom as any);
if (typeof maxZoom !== 'undefined') {
store?.setMaxZoom(maxZoom);
}
if (typeof props.translateExtent !== 'undefined') {
store?.setTranslateExtent(props.translateExtent as any);
if (typeof translateExtent !== 'undefined') {
store?.setTranslateExtent(translateExtent);
}
if (typeof props.nodeExtent !== 'undefined') {
store?.setNodeExtent(props.nodeExtent as any);
if (typeof nodeExtent !== 'undefined') {
store?.setNodeExtent(nodeExtent);
}
});
onMounted(() => {
if (typeof props.nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!props.nodesConnectable);
if (typeof nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!nodesConnectable);
}
});
onMounted(() => {
if (typeof props.elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!props.elementsSelectable);
if (typeof elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!elementsSelectable);
}
if (typeof props.connectionMode !== 'undefined') {
store?.setConnectionMode(props.connectionMode as any);
if (typeof connectionMode !== 'undefined') {
store?.setConnectionMode(connectionMode);
}
});
return () => (
<FlowRenderer
onPaneClick={props.onPaneClick}
onPaneContextMenu={props.onPaneContextMenu}
onPaneScroll={props.onPaneScroll}
onElementsRemove={props.onElementsRemove}
deleteKeyCode={props.deleteKeyCode as any}
selectionKeyCode={props.selectionKeyCode as any}
multiSelectionKeyCode={props.multiSelectionKeyCode as any}
zoomActivationKeyCode={props.zoomActivationKeyCode as any}
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 as any}
defaultZoom={props.defaultZoom as any}
translateExtent={props.translateExtent}
//onSelectionDragStart={props.onSelectionDragStart}
//onSelectionDrag={props.onSelectionDrag}
//onSelectionDragStop={props.onSelectionDragStop}
onSelectionContextMenu={props.onSelectionContextMenu}
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}
>
<NodeRenderer
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}
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}
/>
<EdgeRenderer
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}
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}
/>
</FlowRenderer>
);

424
src/container/RevueFlow/index.tsx
View File

@@ -1,4 +1,14 @@
import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, onUpdated, PropType, provide } from 'vue';
import {
computed,
CSSProperties,
defineComponent,
HTMLAttributes,
onBeforeUnmount,
PropType,
provide,
reactive,
watchEffect
} from 'vue';
import GraphView from '../GraphView';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
@@ -25,7 +35,8 @@ import {
KeyCode,
PanOnScrollMode,
OnEdgeUpdateFunc,
NodeExtent
NodeExtent,
RevueFlowStore
} from '../../types';
import '../../style.css';
import '../../theme-default.css';
@@ -147,104 +158,104 @@ const RevueFlow = defineComponent({
default: () => defaultEdgeTypes
},
onMove: {
type: Function() as PropType<RevueFlowProps['onMove']>,
type: Function as unknown as PropType<RevueFlowProps['onMove']>,
required: false,
default: undefined as any
default: undefined
},
onMoveStart: {
type: Function() as PropType<RevueFlowProps['onMoveStart']>,
type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
required: false,
default: undefined as any
default: undefined
},
onMoveEnd: {
type: Function() as PropType<RevueFlowProps['onMoveEnd']>,
type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
required: false,
default: undefined as any
default: undefined
},
onLoad: {
type: Function() as PropType<RevueFlowProps['onLoad']>,
type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
required: false,
default: undefined as any
default: undefined
},
onElementClick: {
type: Function() as PropType<RevueFlowProps['onElementClick']>,
type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
required: false,
default: undefined as any
default: undefined
},
onNodeDoubleClick: {
type: Function() as PropType<RevueFlowProps['onNodeDoubleClick']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeDoubleClick: {
type: Function() as PropType<RevueFlowProps['onEdgeDoubleClick']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
required: false,
default: undefined as any
default: undefined
},
onNodeMouseEnter: {
type: Function() as PropType<RevueFlowProps['onNodeMouseEnter']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
required: false,
default: undefined as any
default: undefined
},
onNodeMouseMove: {
type: Function() as PropType<RevueFlowProps['onNodeMouseMove']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
required: false,
default: undefined as any
default: undefined
},
onNodeMouseLeave: {
type: Function() as PropType<RevueFlowProps['onNodeMouseLeave']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
required: false,
default: undefined as any
default: undefined
},
onNodeContextMenu: {
type: Function() as PropType<RevueFlowProps['onNodeContextMenu']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
required: false,
default: undefined as any
default: undefined
},
onNodeDragStart: {
type: Function() as PropType<RevueFlowProps['onNodeDragStart']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
required: false,
default: undefined as any
default: undefined
},
onNodeDrag: {
type: Function() as PropType<RevueFlowProps['onNodeDrag']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
required: false,
default: undefined as any
default: undefined
},
onNodeDragStop: {
type: Function() as PropType<RevueFlowProps['onNodeDragStop']>,
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
required: false,
default: undefined as any
default: undefined
},
onSelectionContextMenu: {
type: Function() as PropType<RevueFlowProps['onSelectionContextMenu']>,
type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
required: false,
default: undefined as any
default: undefined
},
onElementsRemove: {
type: Function() as PropType<RevueFlowProps['onElementsRemove']>,
type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
required: false,
default: undefined as any
default: undefined
},
onConnect: {
type: Function() as PropType<RevueFlowProps['onConnect']>,
type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
required: false,
default: undefined as any
default: undefined
},
onConnectStart: {
type: Function() as PropType<RevueFlowProps['onConnectStart']>,
type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
required: false,
default: undefined as any
default: undefined
},
onConnectStop: {
type: Function() as PropType<RevueFlowProps['onConnectStop']>,
type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
required: false,
default: undefined as any
default: undefined
},
onConnectEnd: {
type: Function() as PropType<RevueFlowProps['onConnectEnd']>,
type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
required: false,
default: undefined as any
default: undefined
},
connectionMode: {
type: String as PropType<RevueFlowProps['connectionMode']>,
@@ -264,7 +275,7 @@ const RevueFlow = defineComponent({
connectionLineComponent: {
type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
required: false,
default: undefined as any
default: undefined
},
selectionKeyCode: {
type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
@@ -397,147 +408,308 @@ const RevueFlow = defineComponent({
default: true
},
onPaneClick: {
type: Function() as PropType<RevueFlowProps['onPaneClick']>,
type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
required: false,
default: undefined as any
default: undefined
},
onPaneScroll: {
type: Function() as PropType<RevueFlowProps['onPaneScroll']>,
type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
required: false,
default: undefined as any
default: undefined
},
onPaneContextMenu: {
type: Function() as PropType<RevueFlowProps['onPaneContextMenu']>,
type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeUpdate: {
type: Function() as PropType<RevueFlowProps['onEdgeUpdate']>,
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeMouseEnter: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeContextMenu: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeMouseMove: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeMouseLeave: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeUpdateEnd: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
required: false,
default: undefined as any
default: undefined
},
onEdgeUpdateStart: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
required: false,
default: undefined as any
default: undefined
},
onSelectionDragStart: {
type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStart']>,
required: false,
default: undefined
},
onSelectionDrag: {
type: Function as unknown as PropType<RevueFlowProps['onSelectionDrag']>,
required: false,
default: undefined
},
onSelectionDragStop: {
type: Function as unknown as PropType<RevueFlowProps['onSelectionDragStop']>,
required: false,
default: undefined
},
onSelectionChange: {
type: Function as unknown as PropType<RevueFlowProps['onSelectionChange']>,
required: false,
default: undefined
},
edgeUpdaterRadius: {
type: Number as PropType<RevueFlowProps['edgeUpdaterRadius']>,
required: false,
default: 10
},
onDrop: {
type: Function as unknown as PropType<(e: DragEvent) => any>,
required: false,
default: undefined as any
},
onDragover: {
type: Function as unknown as PropType<(e: DragEvent) => any>,
required: false,
default: undefined as any
}
/* // focus events
onFocus: FocusEvent,
onFocusin: FocusEvent,
onFocusout: FocusEvent,
onBlur: FocusEvent,
// keyboard events
onKeydown: KeyboardEvent,
onKeypress: KeyboardEvent,
onKeyup: KeyboardEvent,
// mouse events
onAuxclick: MouseEvent,
onClick: MouseEvent,
onContextmenu: MouseEvent,
onDblclick: MouseEvent,
onMousedown: MouseEvent,
onMouseenter: MouseEvent,
onMouseleave: MouseEvent,
onMousemove: MouseEvent,
onMouseout: MouseEvent,
onMouseover: MouseEvent,
onMouseup: MouseEvent,
// selection events
onSelect: Event,
// UI events
onScroll: UIEvent,
// touch events
onTouchcancel: TouchEvent,
onTouchend: TouchEvent,
onTouchmove: TouchEvent,
onTouchstart: TouchEvent,
// pointer events
onPointerdown: PointerEvent,
onPointermove: PointerEvent,
onPointerup: PointerEvent,
onPointercancel: PointerEvent,
onPointerenter: PointerEvent,
onPointerleave: PointerEvent,
onPointerover: PointerEvent,
onPointerout: PointerEvent,
// wheel events
onWheel: WheelEvent,
// transition events
onTransitionend: TransitionEvent,
onTransitionstart: TransitionEvent,
*/
},
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('store', store);
store.setElements(props.elements);
onUpdated(() => {
store.setElements(props.elements);
provide<RevueFlowStore>('store', store);
store.setElements(elements);
watchEffect(() => {
store.setElements(elements);
onSelectionChange?.(store.selectedElements);
});
onBeforeUnmount(() => {
store.$reset();
store.setElements([]);
});
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
const nodeTypesParsed = computed(() => nodeTypes && createNodeTypes(nodeTypes));
const edgeTypesParsed = computed(() => edgeTypes && createEdgeTypes(edgeTypes));
return () => (
<div class="revue-flow">
<div {...rest} class="revue-flow">
<GraphView
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}
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}
nodeTypes={nodeTypesParsed.value}
edgeTypes={edgeTypesParsed.value}
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}
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}
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}
/>
{slots.default ? slots.default() : ''}
</div>
);
}
});
export default RevueFlow;

2
src/store/configure-store.ts
View File

@@ -206,11 +206,9 @@ export default function configureStore(
this.userSelectionRect.draw = false;
if (!selectedNodes || selectedNodes.length === 0) {
console.log('Foo');
this.selectedElements = null;
this.nodesSelectionActive = false;
} else {
console.log('bar');
this.selectedNodesBbox = getRectOfNodes(selectedNodes);
this.nodesSelectionActive = true;
}

2
src/utils/index.ts
View File

@@ -1,7 +1,7 @@
import { Dimensions, XYPosition, NodeExtent } from '../types';
import { DraggableEvent } from '@braks/revue-draggable';
export const isInputDOMNode = (e: MouseEvent | DraggableEvent | KeyboardEvent): boolean => {
export const isInputDOMNode = (e: KeyboardEvent | DraggableEvent['event']): boolean => {
const target = e.target as HTMLElement;
return ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(target.nodeName) || target.hasAttribute('contentEditable');
};

8
yarn.lock
View File

@@ -262,10 +262,10 @@
"@babel/helper-validator-identifier" "^7.14.5"
to-fast-properties "^2.0.0"
"@braks/revue-draggable@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.3.tgz#837a46bde7c87f8f6642ed4fb85697653ee6d068"
integrity sha512-9Ad35cUzkuaC7wTXSpJIYAH2kmgIh/VtL062MXTiFZ9OIZxAUMUfCnIgDTWY0sZNoxmO8CPD3XUP/YfbxoMESQ==
"@braks/revue-draggable@^0.1.10":
version "0.1.10"
resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.10.tgz#d6c7de3de44f1fbce09b37ba35a80100418850ba"
integrity sha512-m8cXb1NADAYQxhNUqfrzIhlvRPacaBEy/J8FVemkQCZLhzd5lHUMaTv+5hiYRgljXcoRLWO21HF4NtqWZ1kQuw==
dependencies:
vue-demi latest