-
-
Notifications
You must be signed in to change notification settings - Fork 209
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update(examples): Add Provider example
* Provider example shows usage of store outside of Flow
- Loading branch information
1 parent
0a45e09
commit eb9714b
Showing
3 changed files
with
123 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<script lang="ts" setup> | ||
import Sidebar from './Sidebar.vue' | ||
import Flow, { | ||
addEdge, | ||
removeElements, | ||
Controls, | ||
OnLoadParams, | ||
FlowElement, | ||
Connection, | ||
Edge, | ||
Elements, | ||
ConnectionMode, | ||
useStore, | ||
} from '~/index' | ||
import './provider.css' | ||
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element) | ||
const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance) | ||
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' }, | ||
] as Elements | ||
useStore() | ||
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)) | ||
</script> | ||
<template> | ||
<div class="providerflow"> | ||
<Sidebar /> | ||
<div class="reactflow-wrapper"> | ||
<Flow | ||
:elements="elements" | ||
:connection-mode="ConnectionMode.Loose" | ||
@element-click="onElementClick" | ||
@connect="onConnect" | ||
@elements-remove="onElementsRemove" | ||
@load="onLoad" | ||
> | ||
<Controls /> | ||
</Flow> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<script lang="ts" setup> | ||
import { useStore } from '~/index' | ||
const store = useStore() | ||
const nodes = computed(() => store.nodes) | ||
const transform = computed(() => store.transform) | ||
const selectAll = () => { | ||
store.selectedElements = nodes.value | ||
store.unsetUserSelection() | ||
} | ||
</script> | ||
<template> | ||
<aside> | ||
<div class="description">This is an example of how you can access the internal state outside of the ReactFlow component.</div> | ||
<div class="title">Zoom & pan transform</div> | ||
<div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div> | ||
<div class="title">Nodes</div> | ||
<div v-for="node of nodes" :key="node.id"> | ||
Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }} | ||
</div> | ||
|
||
<div class="selectall"> | ||
<button @click="selectAll">select all nodes</button> | ||
</div> | ||
</aside> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
.providerflow { | ||
flex-direction: column; | ||
display: flex; | ||
height: 100%; | ||
} | ||
|
||
.providerflow aside { | ||
border-right: 1px solid #eee; | ||
padding: 15px 10px; | ||
font-size: 12px; | ||
background: #fcfcfc; | ||
} | ||
|
||
.providerflow aside .description { | ||
margin-bottom: 10px; | ||
} | ||
|
||
.providerflow aside .title { | ||
font-weight: 700; | ||
margin-bottom: 5px; | ||
} | ||
|
||
.providerflow aside .transform { | ||
margin-bottom: 20px; | ||
} | ||
|
||
.providerflow .reactflow-wrapper { | ||
flex-grow: 1; | ||
height: 100%; | ||
} | ||
|
||
.providerflow .selectall { | ||
margin-top: 10px; | ||
} | ||
|
||
@media screen and (min-width: 768px) { | ||
.providerflow { | ||
flex-direction: row; | ||
} | ||
|
||
.providerflow aside { | ||
width: 20%; | ||
max-width: 250px; | ||
} | ||
} |