refactor: Refactor some jsx files to vue files
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
@@ -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>
|
||||
@@ -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;
|
||||
+14
-14
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
+4
-4
@@ -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')
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user