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

refactor: Refactor some jsx files to vue files

Browse Source 
feat: add global hooks to emulate sort of an event bus between components
* global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient
This commit is contained in:
Braks
2021-08-08 19:28:45 +02:00
parent ef9647ceb4
commit ffd41fb679
27 changed files with 1876 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Basic/Basic.vue
+102
View File
@@ -0,0 +1,102 @@
<template>
<RevueFlow
v-model="elements"
class="revue-flow-basic-example"
:onElementsRemove="onElementsRemove"
:onConnect="onConnect"
:onNodeDragStop="onNodeDragStop"
:defaultZoom="1.5"
:minZoom="0.2"
:maxZoom="4"
@elementClick="onElementClick"
@load="onLoad"
>
<MiniMap />
<Controls />
<Background color="#aaa" :gap="8" />
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
<button :onClick="resetTransform" style="margin-right: 5px">reset transform</button>
<button :onClick="updatePos" style="margin-right: 5px">change pos</button>
<button :onClick="toggleClassnames" style="margin-right: 5px">toggle classnames</button>
<button :onClick="logToObject">toObject</button>
</div>
</RevueFlow>
</template>
<script lang="ts">
import RevueFlow, {
MiniMap,
Controls,
Background,
Connection,
Edge,
Elements,
FlowElement,
Node,
OnLoadParams,
addEdge,
isNode,
removeElements
} from '../../src';
import { defineComponent, ref } from 'vue';
const BasicFlow = defineComponent({
components: { RevueFlow, MiniMap, Controls, Background },
setup() {
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const elements = ref<Elements>([
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }
]);
const rfInstance = ref<OnLoadParams | null>(null);
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements));
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value as Elements));
const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
const updatePos = () => {
elements.value = elements.value.map((el: FlowElement) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400
};
}
return el;
});
};
const logToObject = () => console.log(rfInstance.value?.toObject());
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () => {
elements.value = elements.value.map((el: FlowElement) => {
if (isNode(el)) {
el.className = el.className === 'light' ? 'dark' : 'light';
}
return el;
});
};
return {
onLoad,
onConnect,
onElementClick,
onElementsRemove,
onNodeDragStop,
logToObject,
resetTransform,
toggleClassnames,
updatePos,
elements
};
}
});
export default BasicFlow;
</script>
examples/Basic/index.tsx
-97
View File
@@ -1,97 +0,0 @@
import RevueFlow, {
MiniMap,
Controls,
Background,
Connection,
Edge,
Elements,
FlowElement,
Node,
OnLoadParams,
addEdge,
isNode,
removeElements
} from '../../src';
import { defineComponent, ref } from 'vue';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const initialElements: Elements = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3' }
];
const BasicFlow = defineComponent({
components: { RevueFlow, MiniMap, Controls, Background },
setup() {
const elements = ref<Elements>(initialElements);
const rfInstance = ref<OnLoadParams | null>(null);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
const updatePos = () => {
elements.value = elements.value.map((el) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400
};
}
return el;
});
};
const logToObject = () => console.log(rfInstance.value?.toObject());
const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () => {
elements.value = elements.value.map((el) => {
if (isNode(el)) {
el.className = el.className === 'light' ? 'dark' : 'light';
}
return el;
});
};
return () => (
<RevueFlow
elements={elements.value}
onLoad={onLoad}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
class="revue-flow-basic-example"
defaultZoom={1.5}
minZoom={0.2}
maxZoom={4}
>
<MiniMap />
<Controls />
<Background color="#aaa" gap={16} />
<div style={{ position: 'absolute', right: '10px', top: '10px', zIndex: 4 }}>
<button onClick={resetTransform} style={{ marginRight: '5px' }}>
reset transform
</button>
<button onClick={updatePos} style={{ marginRight: '5px' }}>
change pos
</button>
<button onClick={toggleClassnames} style={{ marginRight: '5px' }}>
toggle classnames
</button>
<button onClick={logToObject}>toObject</button>
</div>
</RevueFlow>
);
}
});
export default BasicFlow;
examples/CustomConnectionLine/ConnectionLine.tsx → examples/CustomConnectionLine/ConnectionLine.vue
+14 -14
View File
@@ -1,3 +1,16 @@
<template>
<g>
<path
class="animated"
fill="none"
stroke="#222"
:stroke-width="1.5"
:d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
/>
<circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
</g>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ConnectionLineComponentProps } from '../../src';
@@ -19,21 +32,8 @@ const ConnectionLine = defineComponent({
type: Number as PropType<ConnectionLineComponentProps['targetY']>,
required: true
}
},
setup(props) {
return () => (
<g>
<path
fill="none"
stroke="#222"
stroke-width={1.5}
class="animated"
d={`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`}
/>
<circle cx={props.targetX} cy={props.targetY} fill="#fff" r={3} stroke="#222" stroke-width={1.5} />
</g>
);
}
});
export default ConnectionLine;
</script>
examples/CustomConnectionLine/CustomConnectionLine.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<RevueFlow
v-model="elements"
:connectionLineComponent="ConnectionLine"
:onElementsRemove="onElementsRemove"
:onConnect="onConnect"
>
<Background :variant="bgVariant" />
</RevueFlow>
</template>
<script lang="ts">
import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
import ConnectionLine from './ConnectionLine.vue';
import { defineComponent, ref } from 'vue';
const ConnectionLineFlow = defineComponent({
components: { RevueFlow, Background },
setup() {
const elements = ref<Elements>([{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }]);
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
return {
ConnectionLine,
elements,
onElementsRemove,
onConnect,
bgVariant: BackgroundVariant.Lines
};
}
});
export default ConnectionLineFlow;
</script>
examples/CustomConnectionLine/index.tsx
-28
View File
@@ -1,28 +0,0 @@
import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
import ConnectionLine from './ConnectionLine';
import { defineComponent, ref } from 'vue';
const initialElements: Elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
const ConnectionLineFlow = defineComponent({
components: { Background },
setup() {
const elements = ref(initialElements);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
return () => (
<RevueFlow
elements={elements.value}
connectionLineComponent={ConnectionLine as any}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
>
<Background variant={BackgroundVariant.Lines} />
</RevueFlow>
);
}
});
export default ConnectionLineFlow;
examples/CustomNode/ColorSelectorNode.tsx
-33
View File
@@ -1,33 +0,0 @@
import { CSSProperties, defineComponent } from 'vue';
import { Handle, Position, Connection, Edge } from '../../src';
const targetHandleStyle: CSSProperties = { background: '#555' };
const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
const ColorSelectorNode = defineComponent({
props: {
data: {
type: Object,
required: false,
default: () => ({})
}
},
setup(props) {
return () => (
<>
<Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
<div>
Custom Color Picker Node: <strong>{props.data.color}</strong>
</div>
<input class="nodrag" type="color" onInput={props.data.onChange} v-model={props.data.color} />
<Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} />
<Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} />
</>
);
}
});
export default ColorSelectorNode;
examples/CustomNode/ColorSelectorNode.vue
+44
View File
@@ -0,0 +1,44 @@
<template>
<div>
<Handle type="target" :position="Position.Left" :style="targetHandleStyle" :onConnect="onConnect" />
<div>
Custom Color Picker Node: <strong>{{ data.color }}</strong>
</div>
<input class="nodrag" type="color" :value="data.color" @input="onChange" />
<Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
<Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
</div>
</template>
<script lang="ts">
import { CSSProperties, defineComponent } from 'vue';
import { Handle, Position, Connection, Edge } from '../../src';
const ColorSelectorNode = defineComponent({
components: { Handle },
props: {
data: {
type: Object,
required: false,
default: () => ({})
}
},
setup(props) {
const targetHandleStyle: CSSProperties = { background: '#555' };
const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
return {
Position,
targetHandleStyle,
sourceHandleStyleA,
sourceHandleStyleB,
onConnect,
onChange: props.data.onChange as any
};
}
});
export default ColorSelectorNode;
</script>
examples/CustomNode/CustomNode.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<RevueFlow
v-model="elements"
:onElementClick="onElementClick"
:onElementsRemove="onElementsRemove"
:onConnect="onConnect"
:onNodeDragStop="onNodeDragStop"
:style="`background: ${bgColor}`"
:onLoad="onLoad"
:nodeTypes="nodeTypes"
:connectionLineStyle="connectionLineStyle"
:snapToGrid="true"
:snapGrid="snapGrid"
:defaultZoom="1.5"
>
<MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
<Controls />
</RevueFlow>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import RevueFlow, {
isEdge,
removeElements,
addEdge,
MiniMap,
Controls,
Node,
FlowElement,
OnLoadParams,
Elements,
Position,
SnapGrid,
Connection,
Edge
} from '../../src';
import ColorSelectorNode from './ColorSelectorNode.vue';
const CustomNodeFlow = defineComponent({
components: { RevueFlow, MiniMap, Controls },
setup() {
const connectionLineStyle = { stroke: '#fff' };
const snapGrid: SnapGrid = [16, 16];
const nodeTypes = {
selectorNode: ColorSelectorNode
};
const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const nodeStroke = (n: Node): string => {
if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor.value;
if (n.type === 'output') return '#ff0072';
return '#eee';
};
const nodeColor = (n: Node): string => {
if (n.type === 'selectorNode') return bgColor.value;
return '#fff';
};
const elements = ref<Elements>([]);
const bgColor = ref('#1A192B');
onMounted(() => {
const onChange = (event: Event) => {
elements.value = elements.value.map((e: FlowElement) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = (event.target as HTMLInputElement).value;
bgColor.value = color;
return {
...e,
data: {
...e.data,
color
}
};
});
};
elements.value = [
{
id: '1',
type: 'input',
data: { label: 'An input node' },
position: { x: 0, y: 50 },
sourcePosition: Position.Right
},
{
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: bgColor.value },
style: { border: '1px solid #777', padding: 10 },
position: { x: 250, y: 50 }
},
{
id: '3',
type: 'output',
data: { label: 'Output A' },
position: { x: 550, y: 25 },
targetPosition: Position.Left
},
{
id: '4',
type: 'output',
data: { label: 'Output B' },
position: { x: 550, y: 100 },
targetPosition: Position.Left
},
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
];
});
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements));
const onConnect = (params: Connection | Edge) =>
(elements.value = addEdge(
{
...params,
animated: true,
style: { stroke: '#fff' }
} as Edge,
elements.value as Elements
));
return {
elements,
onConnect,
onElementsRemove,
onLoad,
onNodeDragStop,
onElementClick,
nodeStroke,
nodeColor,
connectionLineStyle,
snapGrid,
nodeTypes,
bgColor
};
}
});
export default CustomNodeFlow;
</script>
examples/CustomNode/index.tsx
-132
View File
@@ -1,132 +0,0 @@
import { defineComponent, onMounted, ref } from 'vue';
import RevueFlow, {
isEdge,
removeElements,
addEdge,
MiniMap,
Controls,
Node,
FlowElement,
OnLoadParams,
Elements,
Position,
SnapGrid,
Connection,
Edge
} from '../../src';
import ColorSelectorNode from './ColorSelectorNode';
const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const initBgColor = '#1A192B';
const connectionLineStyle = { stroke: '#fff' };
const snapGrid: SnapGrid = [16, 16];
const nodeTypes = {
selectorNode: ColorSelectorNode
};
const CustomNodeFlow = defineComponent({
setup() {
const elements = ref<Elements>([]);
const bgColor = ref(initBgColor);
onMounted(() => {
const onChange = (event: Event) => {
elements.value = elements.value.map((e) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = (event.target as HTMLInputElement).value;
bgColor.value = color;
return {
...e,
data: {
...e.data,
color
}
};
});
};
elements.value = [
{
id: '1',
type: 'input',
data: { label: 'An input node' },
position: { x: 0, y: 50 },
sourcePosition: Position.Right
},
{
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
position: { x: 250, y: 50 }
},
{
id: '3',
type: 'output',
data: { label: 'Output A' },
position: { x: 550, y: 25 },
targetPosition: Position.Left
},
{
id: '4',
type: 'output',
data: { label: 'Output B' },
position: { x: 550, y: 100 },
targetPosition: Position.Left
},
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } }
];
});
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) =>
(elements.value = addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, elements.value));
return () => (
<RevueFlow
elements={elements.value}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
style={{ background: bgColor.value }}
onLoad={onLoad}
nodeTypes={nodeTypes}
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
defaultZoom={1.5}
>
<MiniMap
nodeStrokeColor={(n: Node): string => {
if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor.value;
if (n.type === 'output') return '#ff0072';
return '#eee';
}}
nodeColor={(n: Node): string => {
if (n.type === 'selectorNode') return bgColor.value;
return '#fff';
}}
/>
<Controls />
</RevueFlow>
);
}
});
export default CustomNodeFlow;
examples/DragNDrop/DnD.vue
+93
View File
@@ -0,0 +1,93 @@
<template>
<div class="dndflow">
<div class="revueflow-wrapper" @drop="onDrop">
<RevueFlow
v-model="elements"
:onConnect="onConnect"
:onElementsRemove="onElementsRemove"
:onLoad="onLoad"
@dragover="onDragOver"
@click="onDrop"
>
<Controls />
</RevueFlow>
</div>
<Sidebar />
</div>
</template>
<script lang="ts">
import RevueFlow, {
addEdge,
removeElements,
Controls,
OnLoadParams,
Elements,
Connection,
Edge,
ElementId,
Node
} from '../../src';
import Sidebar from './Sidebar';
import './dnd.css';
import { defineComponent, ref } from 'vue';
const DnDFlow = defineComponent({
components: { RevueFlow, Controls, Sidebar },
setup() {
const revueFlowInstance = ref<OnLoadParams>();
const elements = ref<Elements>([
{
id: '1',
type: 'input',
data: { label: 'input node' },
position: { x: 250, y: 5 }
}
]);
let id = 0;
const getId = (): ElementId => `dndnode_${id++}`;
const onDragOver = (event: DragEvent) => {
event.preventDefault();
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move';
}
};
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
const onElementsRemove = (elementsToRemove: Elements) =>
(elements.value = removeElements(elementsToRemove, elements.value as Elements));
const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
const onDrop = (event: DragEvent) => {
event.preventDefault();
if (revueFlowInstance.value) {
console.log(event.dataTransfer?.getData('application/revueflow'));
const type = event.dataTransfer?.getData('application/revueflow');
const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
const newNode: Node = {
id: getId(),
type,
position,
data: { label: `${type} node` }
};
elements.value.push(newNode);
}
};
return {
onConnect,
onElementsRemove,
onLoad,
onDrop,
onDragOver,
elements
};
}
});
export default DnDFlow;
</script>
examples/DragNDrop/index.tsx
-76
View File
@@ -1,76 +0,0 @@
import RevueFlow, {
addEdge,
removeElements,
Controls,
OnLoadParams,
Elements,
Connection,
Edge,
ElementId,
Node
} from '../../src';
import Sidebar from './Sidebar';
import './dnd.css';
import { defineComponent, ref } from 'vue';
const initialElements = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];
const onDragOver = (event: DragEvent) => {
event.preventDefault();
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move';
}
};
let id = 0;
const getId = (): ElementId => `dndnode_${id++}`;
const DnDFlow = defineComponent({
setup() {
const revueFlowInstance = ref<OnLoadParams>();
const elements = ref<Elements>(initialElements);
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
const onDrop = (event: DragEvent) => {
event.preventDefault();
if (revueFlowInstance.value) {
console.log(event.dataTransfer?.getData('application/revueflow'));
const type = event.dataTransfer?.getData('application/revueflow');
const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
const newNode: Node = {
id: getId(),
type,
position,
data: { label: `${type} node` }
};
elements.value.push(newNode);
}
};
return () => (
<div class="dndflow">
<div class="revueflow-wrapper">
<RevueFlow
elements={elements.value}
onConnect={onConnect}
onElementsRemove={onElementsRemove}
onLoad={onLoad}
onDrop={onDrop}
onDragover={onDragOver}
>
<Controls />
</RevueFlow>
</div>
<Sidebar />
</div>
);
}
});
export default DnDFlow;
examples/router.ts
+4 -4
View File
@@ -3,19 +3,19 @@ import { createRouter, createWebHashHistory } from 'vue-router';
export const routes = [
{
path: '/basic',
component: () => import('./Basic')
component: () => import('./Basic/Basic.vue')
},
{
path: '/custom-connectionline',
component: () => import('./CustomConnectionLine')
component: () => import('./CustomConnectionLine/CustomConnectionLine.vue')
},
{
path: '/custom-node',
component: () => import('./CustomNode')
component: () => import('./CustomNode/CustomNode.vue')
},
{
path: '/drag-n-drop',
component: () => import('./DragNDrop')
component: () => import('./DragNDrop/DnD.vue')
}
];
src/additional-components/Controls/index.tsx
+8 -7
View File
@@ -1,6 +1,6 @@
import { defineComponent, HTMLAttributes, inject, onMounted, PropType, ref } from 'vue';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
import { FitViewParams, RevueFlowStore } from '../../types';
import { FitViewParams, RevueFlowStore, ZoomPanHelperFunctions } from '../../types';
import PlusIcon from '../../../assets/icons/plus.svg';
import MinusIcon from '../../../assets/icons/minus.svg';
import Fitview from '../../../assets/icons/fitview.svg';
@@ -89,27 +89,28 @@ const Controls = defineComponent({
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store')!;
const isVisible = ref<boolean>(false);
const zoomHelper = ref(useZoomPanHelper());
const zoomHelper = ref<ZoomPanHelperFunctions>();
const { onReady } = useZoomPanHelper(store);
onMounted(() => {
zoomHelper.value = useZoomPanHelper();
onReady((helper) => {
zoomHelper.value = helper;
});
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable;
const mapClasses = ['revue-flow__controls'];
const onZoomInHandler = () => {
zoomHelper.value.zoomIn?.();
zoomHelper.value?.zoomIn?.();
props.onZoomIn?.();
};
const onZoomOutHandler = () => {
zoomHelper.value.zoomOut?.();
zoomHelper.value?.zoomOut?.();
props.onZoomOut?.();
};
const onFitViewHandler = () => {
zoomHelper.value.fitView?.(props.fitViewParams);
zoomHelper.value?.fitView?.(props.fitViewParams);
props.onFitView?.();
};
src/components/Handle/handler.ts
+25 -26
View File
@@ -4,14 +4,13 @@ import {
ElementId,
XYPosition,
OnConnectFunc,
OnConnectStartFunc,
OnConnectStopFunc,
OnConnectEndFunc,
ConnectionMode,
SetConnectionId,
Connection,
HandleType
HandleType,
RevueFlowStore
} from '../../types';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
export type ValidConnectionFunc = (connection: Connection) => boolean;
export type SetSourceIdFunc = (params: SetConnectionId) => void;
@@ -85,19 +84,19 @@ function resetRecentHandle(hoveredHandle: Element): void {
export function onMouseDown(
event: MouseEvent,
store: RevueFlowStore,
hooks: {
connectStart: RevueFlowHooks['connectStart'];
connectStop: RevueFlowHooks['connectStop'];
connectEnd: RevueFlowHooks['connectEnd'];
},
handleId: ElementId | null,
nodeId: ElementId,
setConnectionNodeId: SetSourceIdFunc,
setPosition: SetPosition,
onConnect: OnConnectFunc,
isTarget: boolean,
isValidConnection: ValidConnectionFunc,
connectionMode: ConnectionMode,
elementEdgeUpdaterType?: HandleType,
onEdgeUpdateEnd?: (evt: MouseEvent) => void,
onConnectStart?: OnConnectStartFunc,
onConnectStop?: OnConnectStopFunc,
onConnectEnd?: OnConnectEndFunc
onEdgeUpdateEnd?: (evt: MouseEvent) => void
): void {
const revueFlowNode = (event.target as Element).closest('.revue-flow');
// when revue-flow is used inside a shadow root we can't use document
@@ -119,23 +118,23 @@ export function onMouseDown(
const containerBounds = revueFlowNode.getBoundingClientRect();
let recentHoveredHandle: Element;
setPosition({
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top
});
store.connectionPosition.x = event.clientX - containerBounds.left;
store.connectionPosition.y = event.clientY - containerBounds.top;
setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
onConnectStart?.(event, { nodeId, handleId, handleType });
store.setConnectionNodeId({
connectionNodeId: nodeId,
connectionHandleId: handleId,
connectionHandleType: handleType
});
hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } });
function onMouseMove(event: MouseEvent) {
setPosition({
x: event.clientX - containerBounds.left,
y: event.clientY - containerBounds.top
});
store.connectionPosition.x = event.clientX - containerBounds.left;
store.connectionPosition.y = event.clientY - containerBounds.top;
const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
event,
connectionMode,
store.connectionMode,
isTarget,
nodeId,
handleId,
@@ -159,7 +158,7 @@ export function onMouseDown(
function onMouseUp(event: MouseEvent) {
const { connection, isValid } = checkElementBelowIsValid(
event,
connectionMode,
store.connectionMode,
isTarget,
nodeId,
handleId,
@@ -167,20 +166,20 @@ export function onMouseDown(
doc
);
onConnectStop?.(event);
hooks.connectStop.trigger(event);
if (isValid) {
onConnect?.(connection);
}
onConnectEnd?.(event);
hooks.connectEnd.trigger(event);
if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
onEdgeUpdateEnd(event);
}
resetRecentHandle(recentHoveredHandle);
setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
store.setConnectionNodeId({ connectionNodeId: null, connectionHandleId: null, connectionHandleType: null });
doc.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
doc.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
src/components/Handle/index.tsx
+5 -7
View File
@@ -1,6 +1,7 @@
import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
import { onMouseDown, ValidConnectionFunc } from './handler';
import { computed, defineComponent, inject, PropType } from 'vue';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
const alwaysValid = () => true;
@@ -39,6 +40,7 @@ const Handle = defineComponent({
},
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
const isTarget = computed(() => props.type === 'target');
const onConnect = computed(() => store.onConnect);
@@ -51,19 +53,15 @@ const Handle = defineComponent({
const onMouseDownHandler = (event: MouseEvent) => {
onMouseDown(
event,
store,
hooks,
props.id as string,
nodeId,
store.setConnectionNodeId,
store.setConnectionPosition,
onConnectExtended,
isTarget.value,
props.isValidConnection,
store.connectionMode,
undefined,
undefined,
store.onConnectStart,
store.onConnectStop,
store.onConnectEnd
undefined
);
};
src/container/FlowRenderer/FlowRenderer.vue
+225
View File
@@ -0,0 +1,225 @@
<template>
<ZoomPane
:onMove="onMove"
:onMoveStart="onMoveStart"
:onMoveEnd="onMoveEnd"
:selectionKeyPressed="keyPressed"
:elementsSelectable="elementsSelectable"
:zoomOnScroll="zoomOnScroll"
:zoomOnPinch="zoomOnPinch"
:panOnScroll="panOnScroll"
:panOnScrollSpeed="panOnScrollSpeed"
:panOnScrollMode="panOnScrollMode"
:zoomOnDoubleClick="zoomOnDoubleClick"
:paneMoveable="paneMoveable"
:defaultPosition="defaultPosition"
:defaultZoom="defaultZoom"
:translateExtent="translateExtent"
:zoomActivationKeyCode="zoomActivationKeyCode"
>
<slot></slot>
<UserSelection v-if="keyPressed" />
<NodesSelection
v-if="selectionActive"
:onSelectionDragStart="onSelectionDragStart"
:onSelectionDrag="onSelectionDrag"
:onSelectionDragStop="onSelectionDragStop"
:onSelectionContextMenu="onSelectionContextMenu"
/>
<div class="revue-flow__pane" @click="onClick" @onContextmenu="onContextMenu" @wheel="onWheel" />
</ZoomPane>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType } from 'vue';
import ZoomPane from '../ZoomPane';
import UserSelection from '../../components/UserSelection';
import NodesSelection from '../../components/NodesSelection';
import { RevueFlowStore, GraphViewProps } from '../../types';
import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
import useKeyPress from '../../hooks/useKeyPress';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
type FlowRendererProps = Omit<
GraphViewProps,
| 'elements'
| 'snapToGrid'
| 'nodeTypes'
| 'edgeTypes'
| 'snapGrid'
| 'connectionLineType'
| 'arrowHeadColor'
| 'onlyRenderVisibleElements'
| 'selectNodesOnDrag'
>;
const FlowRenderer = defineComponent({
name: 'FlowRenderer',
components: { UserSelection, ZoomPane, NodesSelection },
props: {
onPaneClick: {
type: Function as unknown as PropType<FlowRendererProps['onPaneClick']>,
required: false,
default: undefined
},
onPaneContextMenu: {
type: Function as unknown as PropType<FlowRendererProps['onPaneContextMenu']>,
required: false,
default: undefined
},
onPaneScroll: {
type: Function as unknown as PropType<FlowRendererProps['onPaneScroll']>,
required: false,
default: undefined
},
onElementsRemove: {
type: Function as unknown as PropType<FlowRendererProps['onElementsRemove']>,
required: false,
default: undefined
},
onMove: {
type: Function as unknown as PropType<FlowRendererProps['onMove']>,
required: false,
default: undefined
},
onMoveStart: {
type: Function as unknown as PropType<FlowRendererProps['onMoveStart']>,
required: false,
default: undefined
},
onMoveEnd: {
type: Function as unknown as PropType<FlowRendererProps['onMoveEnd']>,
required: false,
default: undefined
},
onSelectionDragStart: {
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStart']>,
required: false,
default: undefined
},
onSelectionDrag: {
type: Function as unknown as PropType<FlowRendererProps['onSelectionDrag']>,
required: false,
default: undefined
},
onSelectionDragStop: {
type: Function as unknown as PropType<FlowRendererProps['onSelectionDragStop']>,
required: false,
default: undefined
},
onSelectionContextMenu: {
type: Function as unknown as PropType<FlowRendererProps['onSelectionContextMenu']>,
required: false,
default: undefined
},
deleteKeyCode: {
type: [Number, String] as PropType<FlowRendererProps['deleteKeyCode']>,
required: false,
default: undefined
},
selectionKeyCode: {
type: [Number, String] as PropType<FlowRendererProps['selectionKeyCode']>,
required: false,
default: undefined
},
multiSelectionKeyCode: {
type: [Number, String] as PropType<FlowRendererProps['multiSelectionKeyCode']>,
required: false,
default: undefined
},
zoomActivationKeyCode: {
type: [Number, String] as PropType<FlowRendererProps['zoomActivationKeyCode']>,
required: false,
default: undefined
},
elementsSelectable: {
type: Boolean as PropType<FlowRendererProps['elementsSelectable']>,
required: false,
default: false
},
zoomOnScroll: {
type: Boolean as PropType<FlowRendererProps['zoomOnScroll']>,
required: false,
default: false
},
zoomOnPinch: {
type: Boolean as PropType<FlowRendererProps['zoomOnPinch']>,
required: false,
default: false
},
panOnScroll: {
type: Boolean as PropType<FlowRendererProps['panOnScroll']>,
required: false,
default: false
},
panOnScrollSpeed: {
type: Number as PropType<FlowRendererProps['panOnScrollSpeed']>,
required: false,
default: undefined
},
panOnScrollMode: {
type: String as PropType<FlowRendererProps['panOnScrollMode']>,
required: false,
default: undefined
},
zoomOnDoubleClick: {
type: Boolean as PropType<FlowRendererProps['zoomOnDoubleClick']>,
required: false,
default: false
},
paneMoveable: {
type: Boolean as PropType<FlowRendererProps['paneMoveable']>,
required: false,
default: false
},
defaultPosition: {
type: Array as unknown as PropType<FlowRendererProps['defaultPosition']>,
required: false,
default: undefined
},
defaultZoom: {
type: Number as PropType<FlowRendererProps['defaultZoom']>,
required: false,
default: undefined
},
translateExtent: {
type: Array as unknown as PropType<FlowRendererProps['translateExtent']>,
required: false,
default: undefined
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const keyPressed = useKeyPress(props.selectionKeyCode);
useGlobalKeyHandler({
store,
onElementsRemove: props.onElementsRemove,
deleteKeyCode: props.deleteKeyCode,
multiSelectionKeyCode: props.multiSelectionKeyCode
});
const onClick = (event: MouseEvent) => {
hooks.paneClick.trigger(event);
store.unsetNodesSelection();
store.resetSelectedElements();
};
const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event);
const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event);
const selectionActive = computed(() => store.nodesSelectionActive);
return {
onClick,
onContextMenu,
onWheel,
keyPressed,
selectionActive
};
}
});
export default FlowRenderer;
</script>
src/container/FlowRenderer/index.tsx
+2 -1
View File
@@ -155,10 +155,11 @@ const FlowRenderer = defineComponent({
}
},
setup(props, { slots }) {
const store = inject<RevueFlowStore>('store');
const store = inject<RevueFlowStore>('store')!;
const keyPressed = useKeyPress(props.selectionKeyCode);
useGlobalKeyHandler({
store,
onElementsRemove: props.onElementsRemove,
deleteKeyCode: props.deleteKeyCode as string,
multiSelectionKeyCode: props.multiSelectionKeyCode as string
src/container/GraphView/GraphView.vue
+480
View File
@@ -0,0 +1,480 @@
<template>
<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"
>
<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"
/>
<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"
/>
</FlowRenderer>
</template>
<script lang="ts">
import { defineComponent, inject, PropType, CSSProperties, watchEffect } from 'vue';
import FlowRenderer from '../FlowRenderer/FlowRenderer.vue';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
import { GraphViewProps, RevueFlowStore } from '../../types';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
const GraphView = defineComponent({
name: 'GraphView',
components: { NodeRenderer, EdgeRenderer, FlowRenderer },
props: {
nodeTypes: {
type: Object as PropType<GraphViewProps['nodeTypes']>,
required: false,
default: undefined
},
edgeTypes: {
type: Object as PropType<GraphViewProps['edgeTypes']>,
required: false,
default: undefined
},
onMove: {
type: Function as unknown as PropType<GraphViewProps['onMove']>,
required: false,
default: undefined
},
onMoveStart: {
type: Function as unknown as PropType<GraphViewProps['onMoveStart']>,
required: false,
default: undefined
},
onMoveEnd: {
type: Function as unknown as PropType<GraphViewProps['onMoveEnd']>,
required: false,
default: undefined
},
onLoad: {
type: Function as unknown as PropType<GraphViewProps['onLoad']>,
required: false,
default: undefined
},
onElementClick: {
type: Function as unknown as PropType<GraphViewProps['onElementClick']>,
required: false,
default: undefined
},
onNodeDoubleClick: {
type: Function as unknown as PropType<GraphViewProps['onNodeDoubleClick']>,
required: false,
default: undefined
},
onEdgeDoubleClick: {
type: Function as unknown as PropType<GraphViewProps['onEdgeDoubleClick']>,
required: false,
default: undefined
},
onNodeMouseEnter: {
type: Function as unknown as PropType<GraphViewProps['onNodeMouseEnter']>,
required: false,
default: undefined
},
onNodeMouseMove: {
type: Function as unknown as PropType<GraphViewProps['onNodeMouseMove']>,
required: false,
default: undefined
},
onNodeMouseLeave: {
type: Function as unknown as PropType<GraphViewProps['onNodeMouseLeave']>,
required: false,
default: undefined
},
onNodeContextMenu: {
type: Function as unknown as PropType<GraphViewProps['onNodeContextMenu']>,
required: false,
default: undefined
},
onNodeDragStart: {
type: Function as unknown as PropType<GraphViewProps['onNodeDragStart']>,
required: false,
default: undefined
},
onNodeDrag: {
type: Function as unknown as PropType<GraphViewProps['onNodeDrag']>,
required: false,
default: undefined
},
onNodeDragStop: {
type: Function as unknown as PropType<GraphViewProps['onNodeDragStop']>,
required: false,
default: undefined
},
onSelectionContextMenu: {
type: Function as unknown as PropType<GraphViewProps['onSelectionContextMenu']>,
required: false,
default: undefined
},
onElementsRemove: {
type: Function as unknown as PropType<GraphViewProps['onElementsRemove']>,
required: false,
default: undefined
},
onConnect: {
type: Function as unknown as PropType<GraphViewProps['onConnect']>,
required: false,
default: undefined
},
onConnectStart: {
type: Function as unknown as PropType<GraphViewProps['onConnectStart']>,
required: false,
default: undefined
},
onConnectStop: {
type: Function as unknown as PropType<GraphViewProps['onConnectStop']>,
required: false,
default: undefined
},
onConnectEnd: {
type: Function as unknown as PropType<GraphViewProps['onConnectEnd']>,
required: false,
default: undefined
},
connectionMode: {
type: String as PropType<GraphViewProps['connectionMode']>,
required: false,
default: undefined
},
connectionLineType: {
type: String as PropType<GraphViewProps['connectionLineType']>,
required: false,
default: undefined
},
connectionLineStyle: {
type: Object as PropType<GraphViewProps['connectionLineStyle']>,
required: false,
default: () => ({} as CSSProperties)
},
connectionLineComponent: {
type: Object as PropType<GraphViewProps['connectionLineComponent']>,
required: false,
default: undefined
},
selectionKeyCode: {
type: [Number, String] as PropType<GraphViewProps['selectionKeyCode']>,
required: false,
default: undefined
},
multiSelectionKeyCode: {
type: [Number, String] as PropType<GraphViewProps['multiSelectionKeyCode']>,
required: false,
default: undefined
},
zoomActivationKeyCode: {
type: [Number, String] as PropType<GraphViewProps['zoomActivationKeyCode']>,
required: false,
default: undefined
},
deleteKeyCode: {
type: [Number, String] as PropType<GraphViewProps['deleteKeyCode']>,
required: false,
default: undefined
},
snapToGrid: {
type: Boolean as PropType<GraphViewProps['snapToGrid']>,
required: false,
default: undefined
},
snapGrid: {
type: Array as unknown as PropType<GraphViewProps['snapGrid']>,
required: false,
default: undefined
},
onlyRenderVisibleElements: {
type: Boolean as PropType<GraphViewProps['onlyRenderVisibleElements']>,
required: false,
default: undefined
},
nodesDraggable: {
type: Boolean as PropType<GraphViewProps['nodesDraggable']>,
required: false,
default: undefined
},
nodesConnectable: {
type: Boolean as PropType<GraphViewProps['nodesConnectable']>,
required: false,
default: undefined
},
elementsSelectable: {
type: Boolean as PropType<GraphViewProps['elementsSelectable']>,
required: false,
default: undefined
},
selectNodesOnDrag: {
type: Boolean as PropType<GraphViewProps['selectNodesOnDrag']>,
required: false,
default: undefined
},
minZoom: {
type: Number as PropType<GraphViewProps['minZoom']>,
required: false,
default: undefined
},
maxZoom: {
type: Number as PropType<GraphViewProps['maxZoom']>,
required: false,
default: undefined
},
defaultZoom: {
type: Number as PropType<GraphViewProps['defaultZoom']>,
required: false,
default: undefined
},
defaultPosition: {
type: Array as unknown as PropType<GraphViewProps['defaultPosition']>,
required: false,
default: undefined
},
translateExtent: {
type: Array as unknown as PropType<GraphViewProps['translateExtent']>,
required: false,
default: undefined
},
nodeExtent: {
type: Array as unknown as PropType<GraphViewProps['nodeExtent']>,
required: false,
default: undefined
},
arrowHeadColor: {
type: String as PropType<GraphViewProps['arrowHeadColor']>,
required: false,
default: undefined
},
markerEndId: {
type: String as PropType<GraphViewProps['markerEndId']>,
required: false,
default: undefined
},
zoomOnScroll: {
type: Boolean as PropType<GraphViewProps['zoomOnScroll']>,
required: false,
default: undefined
},
zoomOnPinch: {
type: Boolean as PropType<GraphViewProps['zoomOnPinch']>,
required: false,
default: undefined
},
panOnScroll: {
type: Boolean as PropType<GraphViewProps['panOnScroll']>,
required: false,
default: undefined
},
panOnScrollSpeed: {
type: Number as PropType<GraphViewProps['panOnScrollSpeed']>,
required: false,
default: undefined
},
panOnScrollMode: {
type: String as PropType<GraphViewProps['panOnScrollMode']>,
required: false,
default: undefined
},
zoomOnDoubleClick: {
type: Boolean as PropType<GraphViewProps['zoomOnDoubleClick']>,
required: false,
default: undefined
},
paneMoveable: {
type: Boolean as PropType<GraphViewProps['paneMoveable']>,
required: false,
default: undefined
},
onPaneClick: {
type: Function as unknown as PropType<GraphViewProps['onPaneClick']>,
required: false,
default: undefined
},
onPaneScroll: {
type: Function as unknown as PropType<GraphViewProps['onPaneScroll']>,
required: false,
default: undefined
},
onPaneContextMenu: {
type: Function as unknown as PropType<GraphViewProps['onPaneContextMenu']>,
required: false,
default: undefined
},
onEdgeUpdate: {
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdate']>,
required: false,
default: undefined
},
onEdgeMouseEnter: {
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseEnter']>,
required: false,
default: undefined
},
onEdgeContextMenu: {
type: Function as unknown as PropType<GraphViewProps['onEdgeContextMenu']>,
required: false,
default: undefined
},
onEdgeMouseMove: {
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseMove']>,
required: false,
default: undefined
},
onEdgeMouseLeave: {
type: Function as unknown as PropType<GraphViewProps['onEdgeMouseLeave']>,
required: false,
default: undefined
},
onEdgeUpdateEnd: {
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateEnd']>,
required: false,
default: undefined
},
onEdgeUpdateStart: {
type: Function as unknown as PropType<GraphViewProps['onEdgeUpdateStart']>,
required: false,
default: undefined
},
onSelectionDragStart: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStart']>,
required: false,
default: undefined
},
onSelectionDrag: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDrag']>,
required: false,
default: undefined
},
onSelectionDragStop: {
type: Function as unknown as PropType<GraphViewProps['onSelectionDragStop']>,
required: false,
default: undefined
},
edgeUpdaterRadius: {
type: Number as PropType<GraphViewProps['edgeUpdaterRadius']>,
required: false,
default: undefined
}
},
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const hooks = inject<RevueFlowHooks>('hooks')!;
const { onReady } = useZoomPanHelper(store);
onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
if (initialized) {
hooks.load.trigger({
fitView: (params = { padding: 0.1 }) => fitView(params),
zoomIn,
zoomOut,
zoomTo,
setTransform: transform,
project: onLoadProject(store),
getElements: onLoadGetElements(store),
toObject: onLoadToObject(store)
});
}
});
const init = () => {
if (typeof props.snapToGrid !== 'undefined') {
store.snapToGrid = props.snapToGrid;
}
if (typeof props.snapGrid !== 'undefined') {
store.snapGrid = props.snapGrid;
}
if (typeof props.minZoom !== 'undefined') {
store.setMinZoom(props.minZoom);
}
if (typeof props.maxZoom !== 'undefined') {
store.setMaxZoom(props.maxZoom);
}
if (typeof props.translateExtent !== 'undefined') {
store.setTranslateExtent(props.translateExtent);
}
if (typeof props.nodeExtent !== 'undefined') {
store.setNodeExtent(props.nodeExtent);
}
if (typeof props.nodesConnectable !== 'undefined') {
store.nodesConnectable = !!props.nodesConnectable;
}
if (typeof props.elementsSelectable !== 'undefined') {
store.elementsSelectable = !!props.elementsSelectable;
}
if (typeof props.nodesDraggable !== 'undefined') {
store.nodesDraggable = !!props.nodesDraggable;
}
if (typeof props.connectionMode !== 'undefined') {
store.connectionMode = props.connectionMode;
}
};
watchEffect(() => {
init();
});
}
});
export default GraphView;
</script>
src/container/GraphView/index.tsx
+13 -41
View File
@@ -1,4 +1,4 @@
import { defineComponent, inject, onBeforeMount, onMounted, ref, PropType, CSSProperties } from 'vue';
import { defineComponent, inject, onBeforeMount, onMounted, PropType, CSSProperties } from 'vue';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
@@ -342,13 +342,11 @@ const GraphView = defineComponent({
}
},
setup(props) {
const store = inject<RevueFlowStore>('store');
const isInitialized = ref<boolean>(false);
const store = inject<RevueFlowStore>('store')!;
onMounted(() => {
const { zoomIn, zoomOut, zoomTo, transform, fitView, initialized } = useZoomPanHelper();
if (!isInitialized.value && initialized) {
const { onReady } = useZoomPanHelper(store);
onReady(({ zoomIn, zoomOut, zoomTo, transform, fitView, initialized }) => {
if (initialized) {
if (props.onLoad && store) {
props.onLoad({
fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -361,58 +359,32 @@ const GraphView = defineComponent({
toObject: onLoadToObject(store)
});
}
isInitialized.value = true;
}
});
onMounted(() => {
if (typeof props.nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!props.nodesConnectable);
store.nodesConnectable = !!props.nodesConnectable;
}
if (typeof props.elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!props.elementsSelectable);
store.elementsSelectable = !!props.elementsSelectable;
}
if (typeof props.nodesDraggable !== 'undefined') {
store.nodesDraggable = !!props.nodesDraggable;
}
if (typeof props.connectionMode !== 'undefined') {
store?.setConnectionMode(props.connectionMode);
store.connectionMode = props.connectionMode;
}
});
onBeforeMount(() => {
if (props.onConnect) {
store?.setOnConnect(props.onConnect);
}
if (props.onConnectStart) {
store?.setOnConnectStart(props.onConnectStart);
}
if (props.onConnectStop) {
store?.setOnConnectStop(props.onConnectStop);
}
if (props.onConnectEnd) {
store?.setOnConnectEnd(props.onConnectEnd);
}
if (typeof props.snapToGrid !== 'undefined') {
store?.setSnapToGrid(props.snapToGrid);
store.snapToGrid = props.snapToGrid;
}
if (typeof props.snapGrid !== 'undefined') {
store?.setSnapGrid(props.snapGrid);
}
if (typeof props.nodesDraggable !== 'undefined') {
store?.setNodesDraggable(!!props.nodesDraggable);
}
if (typeof props.nodesConnectable !== 'undefined') {
store?.setNodesConnectable(!!props.nodesConnectable);
}
if (typeof props.elementsSelectable !== 'undefined') {
store?.setElementsSelectable(!!props.elementsSelectable);
store.snapGrid = props.snapGrid;
}
if (typeof props.minZoom !== 'undefined') {
src/container/RevueFlow/RevueFlow.vue
+491
View File
@@ -0,0 +1,491 @@
<template>
<div 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"
:nodeTypes="nodeTypesParsed"
:edgeTypes="edgeTypesParsed"
: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"
/>
<slot></slot>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
import { useVModel } from '@vueuse/core';
import '../../style.css';
import '../../theme-default.css';
import GraphView from '../GraphView/GraphView.vue';
import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import { createNodeTypes } from '../NodeRenderer/utils';
import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import { ConnectionMode, ConnectionLineType, PanOnScrollMode, RevueFlowStore, RevueFlowProps } from '../../types';
import { initialState } from '../../store';
import configureStore from '../../store/configure-store';
import { RevueFlowHooks, useRevueFlow } from '../../hooks/RevueFlowHooks';
const defaultNodeTypes = {
input: InputNode,
default: DefaultNode,
output: OutputNode
};
const defaultEdgeTypes = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
smoothstep: SmoothStepEdge
};
const RevueFlow = defineComponent({
name: 'RevueFlow',
components: { GraphView },
props: {
modelValue: {
type: Array as PropType<RevueFlowProps['elements']>,
required: false,
default: () => []
},
nodeTypesId: {
type: String as PropType<RevueFlowProps['nodeTypesId']>,
required: false,
default: '1'
},
edgeTypesId: {
type: String as PropType<RevueFlowProps['edgeTypesId']>,
required: false,
default: '1'
},
nodeTypes: {
type: Object as PropType<RevueFlowProps['nodeTypes']>,
required: false,
default: () => defaultNodeTypes
},
edgeTypes: {
type: Object as PropType<RevueFlowProps['edgeTypes']>,
required: false,
default: () => defaultEdgeTypes
},
onMove: {
type: Function as unknown as PropType<RevueFlowProps['onMove']>,
required: false,
default: undefined
},
onMoveStart: {
type: Function as unknown as PropType<RevueFlowProps['onMoveStart']>,
required: false,
default: undefined
},
onMoveEnd: {
type: Function as unknown as PropType<RevueFlowProps['onMoveEnd']>,
required: false,
default: undefined
},
onLoad: {
type: Function as unknown as PropType<RevueFlowProps['onLoad']>,
required: false,
default: undefined
},
onElementClick: {
type: Function as unknown as PropType<RevueFlowProps['onElementClick']>,
required: false,
default: undefined
},
onNodeDoubleClick: {
type: Function as unknown as PropType<RevueFlowProps['onNodeDoubleClick']>,
required: false,
default: undefined
},
onEdgeDoubleClick: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeDoubleClick']>,
required: false,
default: undefined
},
onNodeMouseEnter: {
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseEnter']>,
required: false,
default: undefined
},
onNodeMouseMove: {
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseMove']>,
required: false,
default: undefined
},
onNodeMouseLeave: {
type: Function as unknown as PropType<RevueFlowProps['onNodeMouseLeave']>,
required: false,
default: undefined
},
onNodeContextMenu: {
type: Function as unknown as PropType<RevueFlowProps['onNodeContextMenu']>,
required: false,
default: undefined
},
onNodeDragStart: {
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStart']>,
required: false,
default: undefined
},
onNodeDrag: {
type: Function as unknown as PropType<RevueFlowProps['onNodeDrag']>,
required: false,
default: undefined
},
onNodeDragStop: {
type: Function as unknown as PropType<RevueFlowProps['onNodeDragStop']>,
required: false,
default: undefined
},
onSelectionContextMenu: {
type: Function as unknown as PropType<RevueFlowProps['onSelectionContextMenu']>,
required: false,
default: undefined
},
onElementsRemove: {
type: Function as unknown as PropType<RevueFlowProps['onElementsRemove']>,
required: false,
default: undefined
},
onConnect: {
type: Function as unknown as PropType<RevueFlowProps['onConnect']>,
required: false,
default: undefined
},
onConnectStart: {
type: Function as unknown as PropType<RevueFlowProps['onConnectStart']>,
required: false,
default: undefined
},
onConnectStop: {
type: Function as unknown as PropType<RevueFlowProps['onConnectStop']>,
required: false,
default: undefined
},
onConnectEnd: {
type: Function as unknown as PropType<RevueFlowProps['onConnectEnd']>,
required: false,
default: undefined
},
connectionMode: {
type: String as PropType<RevueFlowProps['connectionMode']>,
required: false,
default: ConnectionMode.Strict
},
connectionLineType: {
type: String as PropType<RevueFlowProps['connectionLineType']>,
required: false,
default: ConnectionLineType.Bezier
},
connectionLineStyle: {
type: Object as PropType<RevueFlowProps['connectionLineStyle']>,
required: false,
default: undefined
},
connectionLineComponent: {
type: Object as PropType<RevueFlowProps['connectionLineComponent']>,
required: false,
default: undefined
},
selectionKeyCode: {
type: [Number, String] as PropType<RevueFlowProps['selectionKeyCode']>,
required: false,
default: 'Shift'
},
multiSelectionKeyCode: {
type: [Number, String] as PropType<RevueFlowProps['multiSelectionKeyCode']>,
required: false,
default: 'Meta'
},
zoomActivationKeyCode: {
type: [Number, String] as PropType<RevueFlowProps['zoomActivationKeyCode']>,
required: false,
default: 'Meta'
},
deleteKeyCode: {
type: [Number, String] as PropType<RevueFlowProps['deleteKeyCode']>,
required: false,
default: 'Backspace'
},
snapToGrid: {
type: Boolean as PropType<RevueFlowProps['snapToGrid']>,
required: false,
default: false
},
snapGrid: {
type: Array as unknown as PropType<RevueFlowProps['snapGrid']>,
required: false,
default: () => [15, 15]
},
onlyRenderVisibleElements: {
type: Boolean as PropType<RevueFlowProps['onlyRenderVisibleElements']>,
required: false,
default: false
},
nodesDraggable: {
type: Boolean as PropType<RevueFlowProps['nodesDraggable']>,
required: false,
default: undefined
},
nodesConnectable: {
type: Boolean as PropType<RevueFlowProps['nodesConnectable']>,
required: false,
default: undefined
},
elementsSelectable: {
type: Boolean as PropType<RevueFlowProps['elementsSelectable']>,
required: false,
default: undefined
},
selectNodesOnDrag: {
type: Boolean as PropType<RevueFlowProps['selectNodesOnDrag']>,
required: false,
default: true
},
minZoom: {
type: Number as PropType<RevueFlowProps['minZoom']>,
required: false,
default: undefined
},
maxZoom: {
type: Number as PropType<RevueFlowProps['maxZoom']>,
required: false,
default: undefined
},
defaultZoom: {
type: Number as PropType<RevueFlowProps['defaultZoom']>,
required: false,
default: 1
},
defaultPosition: {
type: Array as unknown as PropType<RevueFlowProps['defaultPosition']>,
required: false,
default: () => [0, 0]
},
translateExtent: {
type: Array as unknown as PropType<RevueFlowProps['translateExtent']>,
required: false,
default: undefined
},
nodeExtent: {
type: Array as unknown as PropType<RevueFlowProps['nodeExtent']>,
required: false,
default: undefined
},
arrowHeadColor: {
type: String as PropType<RevueFlowProps['arrowHeadColor']>,
required: false,
default: '#b1b1b7'
},
markerEndId: {
type: String as PropType<RevueFlowProps['markerEndId']>,
required: false,
default: undefined
},
zoomOnScroll: {
type: Boolean as PropType<RevueFlowProps['zoomOnScroll']>,
required: false,
default: true
},
zoomOnPinch: {
type: Boolean as PropType<RevueFlowProps['zoomOnPinch']>,
required: false,
default: true
},
panOnScroll: {
type: Boolean as PropType<RevueFlowProps['panOnScroll']>,
required: false,
default: false
},
panOnScrollSpeed: {
type: Number as PropType<RevueFlowProps['panOnScrollSpeed']>,
required: false,
default: 0.5
},
panOnScrollMode: {
type: String as PropType<RevueFlowProps['panOnScrollMode']>,
required: false,
default: PanOnScrollMode.Free
},
zoomOnDoubleClick: {
type: Boolean as PropType<RevueFlowProps['zoomOnDoubleClick']>,
required: false,
default: true
},
paneMoveable: {
type: Boolean as PropType<RevueFlowProps['paneMoveable']>,
required: false,
default: true
},
onPaneClick: {
type: Function as unknown as PropType<RevueFlowProps['onPaneClick']>,
required: false,
default: undefined
},
onPaneScroll: {
type: Function as unknown as PropType<RevueFlowProps['onPaneScroll']>,
required: false,
default: undefined
},
onPaneContextMenu: {
type: Function as unknown as PropType<RevueFlowProps['onPaneContextMenu']>,
required: false,
default: undefined
},
onEdgeUpdate: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdate']>,
required: false,
default: undefined
},
onEdgeMouseEnter: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseEnter']>,
required: false,
default: undefined
},
onEdgeContextMenu: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeContextMenu']>,
required: false,
default: undefined
},
onEdgeMouseMove: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseMove']>,
required: false,
default: undefined
},
onEdgeMouseLeave: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeMouseLeave']>,
required: false,
default: undefined
},
onEdgeUpdateEnd: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateEnd']>,
required: false,
default: undefined
},
onEdgeUpdateStart: {
type: Function as unknown as PropType<RevueFlowProps['onEdgeUpdateStart']>,
required: false,
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
}
},
emits: ['', 'load'],
setup(props, { emit }) {
const store = configureStore(initialState)();
provide<RevueFlowStore>('store', store);
provide<RevueFlowHooks>('hooks', useRevueFlow(emit));
const elements = useVModel(props, 'modelValue', emit);
store.setElements(elements.value);
watch(elements.value, () => {
store.setElements(elements.value);
});
onUpdated(() => {
console.log('updated');
store.setElements(elements.value);
});
onBeforeUnmount(() => {
store.$reset();
store.setElements([]);
});
const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
return {
nodeTypesParsed: nodeTypesParsed.value,
edgeTypesParsed: edgeTypesParsed.value
};
}
});
export default RevueFlow;
</script>
src/container/ZoomPane/index.tsx
+1 -1
View File
@@ -198,7 +198,7 @@ const ZoomPane = defineComponent({
store.d3Zoom.on('zoom', null);
} else {
store.d3Zoom.on('zoom', (event: any) => {
store.updateTransform([event.transform.x, event.transform.y, event.transform.k]);
store.transform = [event.transform.x, event.transform.y, event.transform.k];
if (props.onMove) {
const flowTransform = eventToFlowTransform(event.transform);
src/hooks/RevueFlowHooks.ts
+96
View File
@@ -0,0 +1,96 @@
// global hooks
import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, OnLoadParams } from '../types';
import { createEventHook, EventHook } from '@vueuse/core';
import { SetupContext } from 'vue';
export interface RevueFlowHooks {
elementClick: EventHook<{ event: MouseEvent; element: Node | Edge }>;
elementsRemove: EventHook<Elements>;
nodeDoubleClick: EventHook<{ event: MouseEvent; node: Node }>;
nodeMouseEnter: EventHook<{ event: MouseEvent; node: Node }>;
nodeMouseMove: EventHook<{ event: MouseEvent; node: Node }>;
nodeMouseLeave: EventHook<{ event: MouseEvent; node: Node }>;
nodeContextMenu: EventHook<{ event: MouseEvent; node: Node }>;
nodeDragStart: EventHook<{ event: MouseEvent; node: Node }>;
nodeDrag: EventHook<{ event: MouseEvent; node: Node }>;
nodeDragStop: EventHook<{ event: MouseEvent; node: Node }>;
connect: EventHook<Edge | Connection>;
connectStart: EventHook<{
event: MouseEvent;
params: OnConnectStartParams;
}>;
connectStop: EventHook<MouseEvent>;
connectEnd: EventHook<MouseEvent>;
load: EventHook<OnLoadParams>;
move: EventHook<FlowTransform | undefined>;
moveStart: EventHook<FlowTransform | undefined>;
moveEnd: EventHook<FlowTransform | undefined>;
selectionChange: EventHook<Elements | null>;
selectionDragStart: EventHook<{ event: MouseEvent; nodes: Node[] }>;
selectionDrag: EventHook<{ event: MouseEvent; nodes: Node[] }>;
selectionDragStop: EventHook<{ event: MouseEvent; nodes: Node[] }>;
selectionContextMenu: EventHook<{ event: MouseEvent; nodes: Node[] }>;
paneScroll: EventHook<WheelEvent | undefined>;
paneClick: EventHook<MouseEvent>;
paneContextMenu: EventHook<MouseEvent>;
edgeUpdate: EventHook<{ oldEdge: Edge; newConnection: Connection }>;
edgeContextMenu: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeMouseEnter: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeMouseMove: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeMouseLeave: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeDoubleClick: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeUpdateStart: EventHook<{ event: MouseEvent; edge: Edge }>;
edgeUpdateEnd: EventHook<{ event: MouseEvent; edge: Edge }>;
}
export const useRevueFlow = (emit: SetupContext['emit']): RevueFlowHooks => {
const eventHooks: RevueFlowHooks = {
elementClick: createEventHook<{ event: MouseEvent; element: Node | Edge }>(),
elementsRemove: createEventHook<Elements>(),
nodeDoubleClick: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeMouseEnter: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeMouseMove: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeMouseLeave: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeContextMenu: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeDragStart: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeDrag: createEventHook<{ event: MouseEvent; node: Node }>(),
nodeDragStop: createEventHook<{ event: MouseEvent; node: Node }>(),
connect: createEventHook<Edge | Connection>(),
connectStart: createEventHook<{
event: MouseEvent;
params: OnConnectStartParams;
}>(),
connectStop: createEventHook<MouseEvent>(),
connectEnd: createEventHook<MouseEvent>(),
load: createEventHook<OnLoadParams>(),
move: createEventHook<FlowTransform | undefined>(),
moveStart: createEventHook<FlowTransform | undefined>(),
moveEnd: createEventHook<FlowTransform | undefined>(),
selectionChange: createEventHook<Elements | null>(),
selectionDragStart: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
selectionDrag: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
selectionDragStop: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
selectionContextMenu: createEventHook<{ event: MouseEvent; nodes: Node[] }>(),
paneScroll: createEventHook<WheelEvent | undefined>(),
paneClick: createEventHook<MouseEvent>(),
paneContextMenu: createEventHook<MouseEvent>(),
edgeUpdate: createEventHook<{ oldEdge: Edge; newConnection: Connection }>(),
edgeContextMenu: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeMouseEnter: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeMouseMove: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeMouseLeave: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeDoubleClick: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeUpdateStart: createEventHook<{ event: MouseEvent; edge: Edge }>(),
edgeUpdateEnd: createEventHook<{ event: MouseEvent; edge: Edge }>()
};
for (const [key, value] of Object.entries(eventHooks)) {
value.on((data: any) => {
emit(key, data);
});
}
return {
...eventHooks
};
};
src/hooks/useGlobalKeyHandler.ts
+8 -9
View File
@@ -1,21 +1,20 @@
import useKeyPress from './useKeyPress';
import { isNode, getConnectedEdges } from '../utils/graph';
import { Elements, KeyCode, ElementId, FlowElement, RevueFlowStore, Edge } from '../types';
import { computed, inject, watch } from 'vue';
import { computed, watch } from 'vue';
interface HookParams {
store: RevueFlowStore;
deleteKeyCode: KeyCode;
multiSelectionKeyCode: KeyCode;
onElementsRemove?: (elements: Elements) => void;
}
export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
const store = inject<RevueFlowStore>('store');
export default ({ store, deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: HookParams): void => {
const deleteKeyPressed = useKeyPress(deleteKeyCode);
const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
const selectedElements = computed(() => store?.selectedElements || []);
const edges = computed(() => store?.edges);
const selectedElements = computed(() => store.selectedElements || []);
const edges = computed(() => store.edges);
watch(selectedElements, () => {
if (onElementsRemove && deleteKeyPressed.value && selectedElements.value.length > 0) {
@@ -27,12 +26,12 @@ export default ({ deleteKeyCode, multiSelectionKeyCode, onElementsRemove }: Hook
);
onElementsRemove(Array.from(elementsToRemove.values()));
store?.unsetNodesSelection();
store?.resetSelectedElements();
store.unsetNodesSelection();
store.resetSelectedElements();
}
});
watch(multiSelectionKeyPressed, () => {
store?.setMultiSelectionActive(multiSelectionKeyPressed.value);
store.multiSelectionActive = multiSelectionKeyPressed.value;
});
};
src/hooks/useZoomPanHelper.ts
+68 -51
View File
@@ -1,68 +1,85 @@
import { zoomIdentity } from 'd3-zoom';
import { computed } from 'vue';
import { createEventHook, until } from '@vueuse/core';
import { Selection, ZoomBehavior } from 'd3';
import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, RevueFlowStore } from '../types';
import { inject } from 'vue';
const DEFAULT_PADDING = 0.1;
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const store = inject<RevueFlowStore>('store')!;
const zoomPanHelperFunctions = () => {
return {
zoomIn: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1.2),
zoomOut: () => store.d3Zoom?.scaleBy(store.d3Selection as any, 1 / 1.2),
zoomTo: (zoomLevel: number) => store.d3Zoom?.scaleTo(store.d3Selection as any, zoomLevel),
transform: (transform: FlowTransform) => {
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
const useZoomPanHelper = (store: RevueFlowStore) => {
const zoomPanHelperEvent = createEventHook<ZoomPanHelperFunctions>();
const d3Zoom = computed(() => store.d3Zoom);
const d3Selection = computed(() => store.d3Selection);
store.d3Zoom?.transform(store.d3Selection as any, nextTransform);
},
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
const { nodes, width, height, minZoom, maxZoom } = store;
const createZoomPanHelper = (
d3Zoom: ZoomBehavior<Element, unknown>,
d3Selection: Selection<Element, any, any, any>
): ZoomPanHelperFunctions => ({
zoomIn: () => d3Zoom?.scaleBy(d3Selection, 1.2),
zoomOut: () => d3Zoom?.scaleBy(d3Selection, 1 / 1.2),
zoomTo: (zoomLevel: number) => d3Zoom.scaleTo(d3Selection, zoomLevel),
transform: (transform: FlowTransform) => {
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
if (!nodes.length) {
return;
}
d3Zoom.transform(d3Selection, nextTransform);
},
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
const { nodes, width, height, minZoom, maxZoom } = store;
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
const [x, y, zoom] = getTransformForBounds(
bounds,
width,
height,
options.minZoom || minZoom,
options.maxZoom || maxZoom,
options.padding || DEFAULT_PADDING
);
const transform = zoomIdentity.translate(x, y).scale(zoom);
if (!nodes.length) {
return;
}
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
setCenter: (x: number, y: number, zoom?: number) => {
const { width, height, maxZoom } = store;
const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
const [x, y, zoom] = getTransformForBounds(
bounds,
width,
height,
options.minZoom || minZoom,
options.maxZoom || maxZoom,
options.padding || DEFAULT_PADDING
);
const transform = zoomIdentity.translate(x, y).scale(zoom);
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
const centerX = width / 2 - x * nextZoom;
const centerY = height / 2 - y * nextZoom;
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
d3Zoom?.transform(d3Selection, transform);
},
setCenter: (x: number, y: number, zoom?: number) => {
const { width, height, maxZoom } = store;
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
const { width, height, minZoom, maxZoom } = store;
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const transform = zoomIdentity.translate(x, y).scale(zoom);
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
const centerX = width / 2 - x * nextZoom;
const centerY = height / 2 - y * nextZoom;
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
store.d3Zoom?.transform(store.d3Selection as any, transform);
},
project: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid } = store;
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
initialized: true
};
d3Zoom.transform(d3Selection, transform);
},
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
const { width, height, minZoom, maxZoom } = store;
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const transform = zoomIdentity.translate(x, y).scale(zoom);
d3Zoom.transform(d3Selection, transform);
},
project: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid } = store;
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
initialized: true
});
until(d3Zoom)
.toBeTruthy()
.then(() => {
if (d3Zoom.value && d3Selection.value) {
zoomPanHelperEvent.trigger(createZoomPanHelper(d3Zoom.value, d3Selection.value));
} else {
throw Error('D3 could not be initialized.');
}
});
return {
onReady: zoomPanHelperEvent.on
};
return zoomPanHelperFunctions();
};
export default useZoomPanHelper;
src/index.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export { default as default } from './container/RevueFlow';
export { default as default } from './container/RevueFlow/RevueFlow.vue';
export { default as Handle } from './components/Handle';
export { default as EdgeText } from './components/Edges/EdgeText';
export { getBezierPath } from './components/Edges/BezierEdge';
src/store/configure-store.ts
-39
View File
@@ -21,18 +21,6 @@ export default function configureStore(
state: () => preloadedState,
getters: {},
actions: {
setOnConnect(onConnect) {
this.onConnect = onConnect;
},
setOnConnectStart(onConnectStart) {
this.onConnectStart = onConnectStart;
},
setOnConnectEnd(onConnectEnd) {
this.onConnectEnd = onConnectEnd;
},
setOnConnectStop(onConnectStop) {
this.onConnectStop = onConnectStop;
},
setElements(elements) {
const propElements = elements;
const nextElements: NextElements = {
@@ -252,46 +240,19 @@ export default function configureStore(
unsetNodesSelection() {
this.nodesSelectionActive = false;
},
updateTransform(transform) {
this.transform = transform;
},
updateSize(size) {
this.height = size.height;
this.width = size.width;
},
setConnectionPosition(connectionPosition) {
this.connectionPosition = connectionPosition;
},
setConnectionNodeId(payload) {
this.connectionNodeId = payload.connectionNodeId;
this.connectionHandleId = payload.connectionHandleId;
this.connectionHandleType = payload.connectionHandleType;
},
setSnapToGrid(snapToGrid) {
this.snapToGrid = snapToGrid;
},
setSnapGrid(snapGrid) {
this.snapGrid = snapGrid;
},
setInteractive(isInteractive) {
this.nodesDraggable = isInteractive;
this.nodesConnectable = isInteractive;
this.elementsSelectable = isInteractive;
},
setNodesDraggable(nodesDraggable) {
this.nodesDraggable = nodesDraggable;
},
setNodesConnectable(nodesConnectable) {
this.nodesConnectable = nodesConnectable;
},
setElementsSelectable(elementsSelectable) {
this.elementsSelectable = elementsSelectable;
},
setMultiSelectionActive(multiSelectionActive) {
this.multiSelectionActive = multiSelectionActive;
},
setConnectionMode(connectionMode) {
this.connectionMode = connectionMode;
}
}
});
src/types/index.ts
+8 -21
View File
@@ -870,10 +870,6 @@ export interface RevueFlowState {
}
export type RevueFlowActions = {
setOnConnect: (onConnect: OnConnectFunc) => void;
setOnConnectStart: (onConnectStart: OnConnectStartFunc) => void;
setOnConnectStop: (onConnectStop: OnConnectStopFunc) => void;
setOnConnectEnd: (onConnectEnd: OnConnectEndFunc) => void;
setElements: (elements: Elements) => void;
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
updateNodePos: (payload: NodePosUpdate) => void;
@@ -889,18 +885,9 @@ export type RevueFlowActions = {
setNodeExtent: (nodeExtent: NodeExtent) => void;
resetSelectedElements: () => void;
unsetNodesSelection: () => void;
updateTransform: (transform: Transform) => void;
updateSize: (size: Dimensions) => void;
setConnectionPosition: (connectionPosition: XYPosition) => void;
setConnectionNodeId: (payload: SetConnectionId) => void;
setSnapToGrid: (snapToGrid: boolean) => void;
setSnapGrid: (snapGrid: SnapGrid) => void;
setInteractive: (isInteractive: boolean) => void;
setNodesDraggable: (nodesDraggable: boolean) => void;
setNodesConnectable: (nodesConnectable: boolean) => void;
setElementsSelectable: (elementsSelectable: boolean) => void;
setMultiSelectionActive: (multiSelectionActive: boolean) => void;
setConnectionMode: (connectionMode: ConnectionMode) => void;
};
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>;
@@ -935,6 +922,14 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
onPaneScroll?: (event?: WheelEvent) => void;
onPaneClick?: (event: MouseEvent) => void;
onPaneContextMenu?: (event: MouseEvent) => void;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
nodeTypes?: NodeTypesType;
edgeTypes?: EdgeTypesType;
connectionMode?: ConnectionMode;
@@ -967,14 +962,6 @@ export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
panOnScrollSpeed?: number;
panOnScrollMode?: PanOnScrollMode;
zoomOnDoubleClick?: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
onEdgeUpdateStart?: (event: MouseEvent, edge: Edge) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
edgeUpdaterRadius?: number;
nodeTypesId?: string;
edgeTypesId?: string;