docs: move examples dir out of components dir
This commit is contained in:
braks
@@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import { VueFlow } from '@vue-flow/core'
|
||||
import { ref } from 'vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import TeleportableNode from './TeleportableNode.vue'
|
||||
|
||||
const elements = ref([
|
||||
{
|
||||
id: '1',
|
||||
label: 'Click to teleport',
|
||||
type: 'teleportable',
|
||||
position: { x: 125, y: 0 },
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'Click to teleport',
|
||||
type: 'teleportable',
|
||||
position: { x: 350, y: 200 },
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: 'Click to teleport',
|
||||
type: 'teleportable',
|
||||
position: { x: 0, y: 200 },
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
target: '2',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="teleportflow">
|
||||
<VueFlow v-model="elements" fit-view-on-init>
|
||||
<template #node-teleportable="{ id }">
|
||||
<TeleportableNode :id="id" />
|
||||
</template>
|
||||
</VueFlow>
|
||||
|
||||
<Sidebar />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
// ...
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside>
|
||||
<div class="description">Teleport destination</div>
|
||||
|
||||
<div id="port" class="port"></div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { useTeleport } from './useTeleport.js'
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { animation, transition, teleport, onClick } = useTeleport(props.id)
|
||||
|
||||
function changeAnimation() {
|
||||
animation.value = animation.value === 'fade' ? 'shrink' : 'fade'
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<teleport :disabled="!teleport" :to="teleport">
|
||||
<transition :name="animation">
|
||||
<div v-if="!transition" class="teleportable">
|
||||
<Handle type="target" :position="Position.Top" />
|
||||
|
||||
[Node {{ id }}]
|
||||
|
||||
<div class="buttons">
|
||||
<div v-if="teleport !== '#port'" class="button" @click.prevent="onClick('#port')">Teleport To Sidebar</div>
|
||||
|
||||
<div v-if="teleport !== null" class="button" @click.prevent="onClick(null)">Teleport To Main Graph</div>
|
||||
|
||||
<div class="button" @click.prevent="changeAnimation">Animation: {{ animation }}</div>
|
||||
</div>
|
||||
|
||||
<Handle type="source" :position="Position.Bottom" />
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as TeleportApp } from './App.vue?raw'
|
||||
export { default as TeleportSidebar } from './Sidebar.vue?raw'
|
||||
export { default as TeleportableNode } from './TeleportableNode.vue?raw'
|
||||
export { default as TeleportableUseTransition } from './useTeleport.js?raw'
|
||||
export { default as TeleportCSS } from './style.css?inline'
|
||||
@@ -0,0 +1,125 @@
|
||||
.teleportflow {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.teleportflow aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 10px 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(16, 185, 129, 0.75);
|
||||
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.teleportflow aside .port > * {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
cursor: grab;
|
||||
font-weight: 500;
|
||||
-webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.teleportflow aside .description {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.teleportflow .vue-flow-wrapper {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
.teleportflow {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.teleportflow aside {
|
||||
min-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.teleportflow aside .port {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.teleportable {
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
color: black
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.buttons .button {
|
||||
background-color: whitesmoke;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.buttons .button:hover {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shrink-leave-active {
|
||||
animation: shrink 0.5s;
|
||||
}
|
||||
|
||||
.shrink-enter-active {
|
||||
animation: grow 0.5s;
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
from {
|
||||
transform: scale(0.1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shrink {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import { getConnectedEdges, useVueFlow } from '@vue-flow/core'
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
/**
|
||||
* Utility composable for specifying animations
|
||||
*
|
||||
* Animations that resize a node need to call the `updateNodeDimensions` function from store to update node handle positions
|
||||
* Otherwise edges do not connect properly
|
||||
*/
|
||||
export function useTeleport(id) {
|
||||
const animation = ref('fade')
|
||||
const transition = ref(false)
|
||||
const teleport = ref(null)
|
||||
|
||||
const { updateNodeInternals, findNode, edges } = useVueFlow()
|
||||
|
||||
/**
|
||||
* specify a selector to teleport to
|
||||
*
|
||||
* teleported elements still behave like they're at their position before,
|
||||
* i.e. if they emit events, they will still emit them up their regular tree
|
||||
*/
|
||||
const fade = (destination, onFinish) => {
|
||||
setTimeout(() => {
|
||||
// teleport to destination or disable teleport
|
||||
teleport.value = destination
|
||||
|
||||
setTimeout(() => {
|
||||
transition.value = false
|
||||
|
||||
// if destination is null, defer hiding edges until node is teleported back
|
||||
if (!destination) {
|
||||
onFinish()
|
||||
}
|
||||
}, 500)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const shrink = (destination, onFinish) => {
|
||||
setTimeout(() => {
|
||||
// teleport to destination or disable teleport
|
||||
teleport.value = destination
|
||||
|
||||
setTimeout(() => {
|
||||
transition.value = false
|
||||
|
||||
setTimeout(() => {
|
||||
// if destination is null, defer hiding edges until node is teleported back
|
||||
if (!destination) {
|
||||
updateNodeInternals([id])
|
||||
|
||||
nextTick(() => {
|
||||
onFinish()
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
}, 500)
|
||||
}, 500)
|
||||
}
|
||||
|
||||
/**
|
||||
* specify a selector to teleport to
|
||||
*
|
||||
* teleported elements still behave like they're at their position before,
|
||||
* i.e. if they emit events, they will still emit them up their regular tree
|
||||
*/
|
||||
const onClick = (destination) => {
|
||||
const node = findNode(id)
|
||||
|
||||
transition.value = true
|
||||
|
||||
// save current teleport destination to data of node
|
||||
node.data.destination = destination
|
||||
|
||||
// hide connected edges when teleporting
|
||||
const connectedEdges = getConnectedEdges([node], edges.value)
|
||||
|
||||
// if destination is not null, hide edges immediately
|
||||
// check if nodes connected to edge are teleported and hide edge if one of them is
|
||||
if (destination) {
|
||||
connectedEdges.forEach(
|
||||
(edge) => (edge.hidden = !!findNode(edge.source).data.destination || !!findNode(edge.target).data.destination),
|
||||
)
|
||||
}
|
||||
|
||||
const onFinish = () => {
|
||||
connectedEdges.forEach(
|
||||
(edge) => (edge.hidden = !!findNode(edge.source).data.destination || !!findNode(edge.target).data.destination),
|
||||
)
|
||||
}
|
||||
|
||||
switch (animation.value) {
|
||||
case 'fade':
|
||||
fade(destination, onFinish)
|
||||
break
|
||||
case 'shrink':
|
||||
shrink(destination, onFinish)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
animation,
|
||||
transition,
|
||||
teleport,
|
||||
onClick,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user