chore(examples): cleanup
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -11,7 +11,7 @@ const elements = ref<Elements>([
|
|||||||
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
|
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
|
||||||
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
|
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
|
||||||
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
|
{ id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
|
||||||
{ id: 'e1-2', source: '1', target: '2', animated: true, label: 'foobar' },
|
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||||
{ id: 'e1-3', source: '1', target: '3' },
|
{ id: 'e1-3', source: '1', target: '3' },
|
||||||
])
|
])
|
||||||
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
|
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject } = useVueFlow({
|
||||||
|
|||||||
@@ -1,68 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { Position, ValidConnectionFunc } from '@vue-flow/core'
|
|
||||||
import { Handle } from '@vue-flow/core'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
id: string
|
|
||||||
selected?: boolean
|
|
||||||
connectable?: boolean
|
|
||||||
label?: string
|
|
||||||
isValidSourcePos?: ValidConnectionFunc
|
|
||||||
isValidTargetPos?: ValidConnectionFunc
|
|
||||||
parentNode?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
connectable: false,
|
|
||||||
sourcePosition: 'bottom' as Position,
|
|
||||||
targetPosition: 'top' as Position,
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'ResizableNode',
|
|
||||||
inheritAttrs: false,
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Handle
|
|
||||||
type="target"
|
|
||||||
:position="props.targetPosition"
|
|
||||||
:is-connectable="props.connectable"
|
|
||||||
:is-valid-connection="props.isValidTargetPos"
|
|
||||||
/>
|
|
||||||
<div class="resize-node">
|
|
||||||
<div v-html="props.label"></div>
|
|
||||||
<div ref="el" class="resizer nodrag" />
|
|
||||||
</div>
|
|
||||||
<Handle
|
|
||||||
type="source"
|
|
||||||
:position="props.sourcePosition"
|
|
||||||
:is-connectable="props.connectable"
|
|
||||||
:is-valid-connection="props.isValidSourcePos"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.resize-node {
|
|
||||||
padding: 1rem;
|
|
||||||
border: 1px solid gray;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizer {
|
|
||||||
resize: both;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
outline: none;
|
|
||||||
white-space: pre;
|
|
||||||
overflow-wrap: normal;
|
|
||||||
overflow: hidden;
|
|
||||||
background: aliceblue;
|
|
||||||
border: 1px solid gray;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user