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

update: change name to vue flow

Browse Source 
* Add gif to readme

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-10-20 21:49:33 +02:00
parent 64a4b8c418
commit 2bfecf7148
49 changed files with 184 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
README.md
View File

@@ -1,17 +1,17 @@
# React Flow in Vue3 = Revue Flow
[![contentful](./assets/Revueflow.png)](https://reactflow.dev/)
![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-flow)
[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg)](https://david-dm.org/bcakmakoglu/revue-flow)
[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-flow?type=dev)
![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/revue-flow)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/revue-flow)
![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-flow)
# Vue Flow
[![vue flow](./assets/vue-flow.gif)](https://reactflow.dev/)
![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/vue-flow?type=dev)
![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
This repo is still a big construction site with nothing really finished.
You can check the examples to see what's working and what's not.
Please visit [React Flow](https://reactflow.dev/) and support them if you like the idea.
They did most of the heavy lifting by writing the library in the first place.
All I did is bring it to Vue3.
All I did is bring it to Vue.
### Motivation
Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
@@ -20,31 +20,29 @@ love and attention, I decided to port the React Flow library to Vue.js.
## Usage
Check the React Flow docs for usage. It's really the same.
### Vue3
### Vue 3
```bash
# install revue flow
$ yarn add @braks/revue-flow
# install vue flow
$ pnpm add @braks/vue-flow
# or
$ npm i --save @braks/revue-flow
$ npm i --save @braks/vue-flow
```
### Vue2
This doesn't work with Vue2, sorry.
## Development
This project uses Vite for development and Rollup to create a distribution.
### Vue 2
Vue Flow doesn't work with Vue 2, sorry.
## 🧪 Development
```bash
# start (dev)
$ yarn dev
$ pnpm dev
# build app
$ yarn build
$ pnpm build
# serve app from build
$ yarn serve
$ pnpm serve
# build dist
$ yarn build:dist
$ pnpm build:dist
```

BIN
assets/Revueflow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

BIN
assets/vue-flow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 MiB

2
examples/Basic/Basic.vue
View File

@@ -54,7 +54,7 @@ const toggleClassnames = () => {
</script>
<template>
<Flow
class="revue-flow-basic-example"
class="vue-flow-basic-example"
:elements="elements"
:default-zoom="1.5"
:min-zoom="0.2"

2
examples/CustomNode/ColorSelectorNode.vue
View File

@@ -25,7 +25,7 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
</script>
<template>
<div class="revue-flow__node-color-selector">
<div class="vue-flow__node-color-selector">
<Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
<div>
Custom Color Picker Node: <strong>{{ data.color }}</strong>

6
examples/DragNDrop/Sidebar.vue
View File

@@ -9,13 +9,13 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
<template>
<aside>
<div class="description">You can drag these nodes to the pane on the left.</div>
<div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
<div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
Input Node
</div>
<div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
<div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
Default Node
</div>
<div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
<div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
Output Node
</div>
</aside>

2
examples/EdgeWithButton/ButtonEdge.vue
View File

@@ -59,7 +59,7 @@ const center = computed(() =>
)
</script>
<template>
<path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<foreignObject
:width="foreignObjectSize"
:height="foreignObjectSize"

2
examples/Edges/CustomEdge.vue
View File

@@ -32,7 +32,7 @@ const edgePath = computed(() =>
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<text>
<textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
{{ props.data.text }}

2
examples/Edges/CustomEdge2.vue
View File

@@ -42,7 +42,7 @@ const center = computed(() =>
)
</script>
<template>
<path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
<EdgeText
:x="center[0]"
:y="center[1]"

2
examples/Header.vue
View File

@@ -10,7 +10,7 @@ const onChange = (event: any) => {
</script>
<template>
<header>
<a class="logo" href="https://github.com/bcakmakoglu/revue-flow"> Revue Flow Dev </a>
<a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
<select v-model="route.path" @change="onChange">
<template v-for="r of routes" :key="r.path">
<option v-if="r.path !== '/'" :value="r.path">

2
examples/Hidden/HiddenExample.vue
View File

@@ -31,7 +31,7 @@ watchEffect(() => {
<div>
<label for="ishidden">
isHidden
<input id="ishidden" v-model="isHidden" type="checkbox" class="revue-flow__ishidden" />
<input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
</label>
</div>
</div>

29
examples/Interaction/InteractionExample.vue
View File

@@ -73,43 +73,43 @@ const captureElementClick = ref(false)
<div>
<label for="draggable">
nodesDraggable
<input id="draggable" v-model="isDraggable" type="checkbox" class="revue-flow__draggable" />
<input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
</label>
</div>
<div>
<label for="connectable">
nodesConnectable
<input id="connectable" v-model="isConnectable" type="checkbox" class="revue-flow__connectable" />
<input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
</label>
</div>
<div>
<label for="selectable">
elementsSelectable
<input id="selectable" v-model="isSelectable" type="checkbox" class="revue-flow__selectable" />
<input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
</label>
</div>
<div>
<label for="zoomonscroll">
zoomOnScroll
<input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="revue-flow__zoomonscroll" />
<input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
</label>
</div>
<div>
<label for="zoomonpinch">
zoomOnPinch
<input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="revue-flow__zoomonpinch" />
<input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
</label>
</div>
<div>
<label for="panonscroll">
panOnScroll
<input id="panonscroll" v-model="panOnScroll" type="checkbox" class="revue-flow__panonscroll" />
<input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
</label>
</div>
<div>
<label>
panOnScrollMode
<select id="panonscrollmode" v-model="panOnScrollMode" class="revue-flow__panonscrollmode">
<select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
<option value="free">free</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
@@ -119,36 +119,31 @@ const captureElementClick = ref(false)
<div>
<label for="zoomondbl">
zoomOnDoubleClick
<input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="revue-flow__zoomondbl" />
<input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
</label>
</div>
<div>
<label for="panemoveable">
paneMoveable
<input id="panemoveable" v-model="paneMoveable" type="checkbox" class="revue-flow__panemoveable" />
<input id="panemoveable" v-model="paneMoveable" type="checkbox" class="vue-flow__panemoveable" />
</label>
</div>
<div>
<label for="capturezoompaneclick">
capture onPaneClick
<input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="revue-flow__capturezoompaneclick" />
<input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
</label>
</div>
<div>
<label for="capturezoompanescroll">
capture onPaneScroll
<input
id="capturezoompanescroll"
v-model="captureZoomScroll"
type="checkbox"
class="revue-flow__capturezoompanescroll"
/>
<input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
</label>
</div>
<div>
<label for="captureelementclick">
capture onElementClick
<input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="revue-flow__captureelementclick" />
<input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
</label>
</div>
</div>

10
examples/index.css
View File

@@ -58,22 +58,22 @@ header select {
display: none;
}
.revue-flow__node a {
.vue-flow__node a {
font-weight: 700;
color: #111;
}
.revue-flow__node.dark-node {
.vue-flow__node.dark-node {
background: #0041d0;
color: #f8f8f8;
}
.revue-flow__node.dark {
.vue-flow__node.dark {
background: #557;
color: #f8f8f8;
}
.revue-flow__node-selectorNode {
.vue-flow__node-selectorNode {
font-size: 14px;
background: #f0f2f3;
border: 1px solid #555;
@@ -81,7 +81,7 @@ header select {
text-align: center;
}
.revue-flow__node-selectorNode .revue-flow__handle {
.vue-flow__node-selectorNode .vue-flow__handle {
border-color: #f0f2f3;
}

2
index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Revue Flow Examples</title>
<title>Vue Flow Examples</title>
</head>
<body>
<div id="root"></div>

18
package.json
View File

@@ -1,25 +1,25 @@
{
"name": "@braks/revue-flow",
"name": "@braks/vue-flow",
"version": "0.1.2",
"private": false,
"repository": {
"type": "git",
"url": "https://github.com/bcakmakoglu/revue-flow"
"url": "https://github.com/bcakmakoglu/vue-flow"
},
"license": "MIT",
"author": "Burak Cakmakoglu",
"exports": {
".": {
"import": "./dist/revue-flow.esm.js",
"require": "./dist/revue-flow.cjs.js"
"import": "./dist/vue-flow.esm.js",
"require": "./dist/vue-flow.cjs.js"
},
"./*": "./*"
},
"main": "./dist/revue-flow.cjs.js",
"types": "./dist/revue-flow.d.ts",
"module": "./dist/revue-flow.esm.js",
"unpkg": "./dist/revue-flow.iife.min.js",
"jsdelivr": "./dist/revue-flow.iife.min.js",
"main": "./dist/vue-flow.cjs.js",
"types": "./dist/vue-flow.d.ts",
"module": "./dist/vue-flow.esm.js",
"unpkg": "./dist/vue-flow.iife.min.js",
"jsdelivr": "./dist/vue-flow.iife.min.js",
"sideEffects": false,
"files": [
"dist"

48
rollup.ts
View File

@@ -14,20 +14,20 @@ const configs: any[] = []
const activePackages = [
{
display: 'Revue-Flow',
external: ['@vueuse/core']
}
display: 'vue-flow',
external: ['@vueuse/core'],
},
]
// @ts-ignore
for (const { external, iife } of activePackages) {
const iifeGlobals = {
vue: 'Vue',
'@vueuse/core': 'VueUse'
'vue': 'Vue',
'@vueuse/core': 'VueUse',
}
const iifeName = 'RevueFlow'
const functionNames = ['revue-flow']
const functionNames = ['vue-flow']
for (const fn of functionNames) {
const input = 'src/index.ts'
@@ -35,12 +35,12 @@ for (const { external, iife } of activePackages) {
const output: any[] = [
{
file: `dist/${fn}.cjs.js`,
format: 'cjs'
format: 'cjs',
},
{
file: `dist/${fn}.esm.js`,
format: 'es'
}
format: 'es',
},
]
if (iife !== false) {
@@ -50,7 +50,7 @@ for (const { external, iife } of activePackages) {
format: 'iife',
name: iifeName,
extend: true,
globals: iifeGlobals
globals: iifeGlobals,
},
{
file: `dist/${fn}.iife.min.js`,
@@ -61,11 +61,11 @@ for (const { external, iife } of activePackages) {
plugins: [
terser({
format: {
comments: false
}
})
]
}
comments: false,
},
}),
],
},
)
}
@@ -76,34 +76,34 @@ for (const { external, iife } of activePackages) {
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false
}
}
declaration: false,
},
},
}),
svg(),
resolve(),
postcss({
inject: true,
minimize: true
minimize: true,
}),
commonjs({ include: 'node_modules/**' }),
babel({
extensions: [...DEFAULT_BABEL_EXTENSIONS, '.ts', '.tsx'],
exclude: 'node_modules/**',
babelHelpers: 'bundled'
})
babelHelpers: 'bundled',
}),
],
external: ['vue', ...(external || [])]
external: ['vue', ...(external || [])],
})
configs.push({
input,
output: {
file: `dist/${fn}.d.ts`,
format: 'es'
format: 'es',
},
plugins: [dts()],
external: ['vue', ...(external || []), /\.css$/]
external: ['vue', ...(external || []), /\.css$/],
})
}
}

2
src/additional-components/Background/Background.vue
View File

@@ -24,7 +24,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
const store = useStore()
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
const bgClasses = ['revue-flow__background']
const bgClasses = ['vue-flow__background']
const background = computed(() => {
const scaledGap = props.gap && props.gap * store.transform[2]
const xOffset = scaledGap && store.transform[0] % scaledGap

2
src/additional-components/Controls/ControlButton.vue
View File

@@ -6,7 +6,7 @@ export interface ControlButtonProps extends ButtonHTMLAttributes {}
const props: any = defineProps<ControlButtonProps>()
</script>
<template>
<button :class="['revue-flow__controls-button']" v-bind="props">
<button :class="['vue-flow__controls-button']" v-bind="props">
<slot></slot>
</button>
</template>

10
src/additional-components/Controls/Controls.vue
View File

@@ -30,7 +30,7 @@ const store = useStore()
const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
const mapClasses = ['revue-flow__controls']
const mapClasses = ['vue-flow__controls']
const onZoomInHandler = () => {
zoomIn?.()
@@ -56,14 +56,14 @@ const onInteractiveChangeHandler = () => {
<div :class="mapClasses">
<template v-if="props.showZoom">
<slot name="control-zoom-in">
<ControlButton class="revue-flow__controls-zoomin" @click="onZoomInHandler">
<ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
<slot name="icon-zoom-in">
<PlusIcon />
</slot>
</ControlButton>
</slot>
<slot name="control-zoom-out">
<ControlButton class="revue-flow__controls-zoomout" @click="onZoomOutHandler">
<ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
<slot name="icon-zoom-out">
<MinusIcon />
</slot>
@@ -71,14 +71,14 @@ const onInteractiveChangeHandler = () => {
</slot>
</template>
<slot name="control-fitview">
<ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" @click="onFitViewHandler">
<ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
<slot name="icon-fitview">
<Fitview />
</slot>
</ControlButton>
</slot>
<slot name="control-interactive">
<ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
<slot name="icon-unlock">
<Unlock v-if="isInteractive" />
</slot>

4
src/additional-components/MiniMap/MiniMap.vue
View File

@@ -73,7 +73,7 @@ const viewBox = computed(() => {
:width="elementWidth"
:height="elementHeight"
:viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
class="revue-flow__minimap"
class="vue-flow__minimap"
>
<slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
<template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
@@ -94,7 +94,7 @@ const viewBox = computed(() => {
</template>
</slot>
<path
class="revue-flow__minimap-mask"
class="vue-flow__minimap-mask"
:d="`
M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
v${viewBox.height + viewBox.offset * 2}

2
src/additional-components/MiniMap/MiniMapNode.vue
View File

@@ -22,7 +22,7 @@ const fill = computed(() => (props.color || styles.background || styles.backgrou
</script>
<template>
<rect
class="revue-flow__minimap-node"
class="vue-flow__minimap-node"
:x="props.x"
:y="props.y"
:rx="props.borderRadius"

4
src/additional-components/index.ts
View File

@@ -1,5 +1,5 @@
// These components are not used by revue Flow directly
// but the user can add them as children of a revue Flow component
// These components are not used by vue flow directly
// but the user can add them as children of a vue flow component
export { default as MiniMap } from './MiniMap/MiniMap.vue'
export { default as Controls } from './Controls/Controls.vue'

4
src/components/ConnectionLine/ConnectionLine.vue
View File

@@ -71,7 +71,7 @@ const dAttr = computed(() => {
})
</script>
<template>
<g class="revue-flow__connection">
<g class="vue-flow__connection">
<slot
v-bind="{
sourceX,
@@ -84,7 +84,7 @@ const dAttr = computed(() => {
connectionLineStyle: props.connectionLineStyle,
}"
>
<path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
<path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
</slot>
</g>
</template>

2
src/components/Edges/BezierEdge.vue
View File

@@ -52,7 +52,7 @@ const path = computed(() =>
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<EdgeText
v-if="props.label"
:x="centered[0]"

4
src/components/Edges/Edge.vue
View File

@@ -122,8 +122,8 @@ const edgePos = computed(() =>
<g
v-if="!props.edge.isHidden && isVisible(edgePos)"
:class="[
'revue-flow__edge',
`revue-flow__edge-${props.edge.type || 'default'}`,
'vue-flow__edge',
`vue-flow__edge-${props.edge.type || 'default'}`,
{
selected: isSelected,
animated: props.edge.animated,

2
src/components/Edges/EdgeAnchor.vue
View File

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<EdgeAnchorProps>(), {
</script>
<template>
<circle
class="revue-flow__edgeupdater"
class="vue-flow__edgeupdater"
:cx="shiftX(props.centerX, props.radius, props.position)"
:cy="shiftY(props.centerY, props.radius, props.position)"
:r="props.radius"

6
src/components/Edges/EdgeText.vue
View File

@@ -30,19 +30,19 @@ const edgeRef = templateRef<SVGTextElement>('edge-text', null)
const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
</script>
<template>
<g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="revue-flow__edge-textwrapper">
<g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
<rect
v-if="props.labelShowBg"
:width="width + 2 * props.labelBgPadding[0] + 'px'"
:height="height + 2 * props.labelBgPadding[1] + 'px'"
:x="-props.labelBgPadding[0]"
:y="-props.labelBgPadding[1]"
class="revue-flow__edge-textbg"
class="vue-flow__edge-textbg"
:style="props.labelBgStyle"
:rx="props.labelBgBorderRadius"
:ry="props.labelBgBorderRadius"
/>
<text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
<text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
<component
:is="props.label.component"
v-if="typeof props.label.component !== 'undefined'"

2
src/components/Edges/SmoothStepEdge.vue
View File

@@ -55,7 +55,7 @@ const path = computed(() =>
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
</script>
<template>
<path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
<EdgeText
v-if="props.label"
:x="centered[0]"

2
src/components/Edges/StraightEdge.vue
View File

@@ -59,7 +59,7 @@ const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerE
<template>
<path
:style="props.style"
class="revue-flow__edge-path"
class="vue-flow__edge-path"
:d="`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`"
:marker-end="markerEnd"
/>

2
src/components/Edges/utils.ts
View File

@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
return `url(#${markerEndId})`
}
return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none'
return typeof arrowHeadType !== 'undefined' ? `url(#vue-flow__${arrowHeadType})` : 'none'
}
export interface GetCenterParams {

4
src/components/Handle/Handle.vue
View File

@@ -32,8 +32,8 @@ const onMouseDownHandler = (event: MouseEvent) =>
:data-nodeid="nodeId"
:data-handlepos="props.position"
:class="[
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'vue-flow__handle',
`vue-flow__handle-${props.position}`,
'nodrag',
{
source: props.type !== 'target',

4
src/components/Nodes/Node.vue
View File

@@ -142,8 +142,8 @@ onMounted(() => {
<div
ref="node-element"
:class="[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
'vue-flow__node',
`vue-flow__node-${props.node.type}`,
{
selected: props.selected,
selectable: props.selectable,

4
src/components/NodesSelection/NodesSelection.vue
View File

@@ -70,7 +70,7 @@ const onContextMenu = (event: MouseEvent) => {
</script>
<template>
<div
class="revue-flow__nodesselection"
class="vue-flow__nodesselection"
:style="{
transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
}"
@@ -83,7 +83,7 @@ const onContextMenu = (event: MouseEvent) => {
@move="onDrag"
@stop="onStop"
>
<div class="revue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
<div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
</Draggable>
</div>
</template>

2
src/components/UserSelection/SelectionRect.vue
View File

@@ -10,7 +10,7 @@ const props = defineProps<SelectionRectProps>()
</script>
<template>
<div
class="revue-flow__selection"
class="vue-flow__selection"
:style="{
width: `${props.width}px`,
height: `${props.height}px`,

2
src/components/UserSelection/UserSelection.vue
View File

@@ -37,7 +37,7 @@ useEventListener(el, 'mouseup', onMouseUp)
useEventListener(el, 'mouseleave', onMouseLeave)
</script>
<template>
<div ref="user-selection" class="revue-flow__selectionpane">
<div ref="user-selection" class="vue-flow__selectionpane">
<SelectionRect
v-if="store.userSelectionRect.draw"
:width="store.userSelectionRect.width"

2
src/components/UserSelection/utils.ts
View File

@@ -1,7 +1,7 @@
import { XYPosition } from '~/types'
export function getMousePosition(event: MouseEvent): XYPosition | void {
const revueFlowNode = (event.target as Element).closest('.revue-flow')
const revueFlowNode = (event.target as Element).closest('.vue-flow')
if (!revueFlowNode) {
return
}

12
src/composables/useHandle.ts
View File

@@ -64,8 +64,8 @@ export const checkElementBelowIsValid = (
}
const resetRecentHandle = (hoveredHandle: Element): void => {
hoveredHandle?.classList.remove('revue-flow__handle-valid')
hoveredHandle?.classList.remove('revue-flow__handle-connecting')
hoveredHandle?.classList.remove('vue-flow__handle-valid')
hoveredHandle?.classList.remove('vue-flow__handle-connecting')
}
export default () => {
@@ -82,8 +82,8 @@ export default () => {
},
elementEdgeUpdaterType?: HandleType,
) => {
const revueFlowNode = (event.target as Element).closest('.revue-flow')
// when revue-flow is used inside a shadow root we can't use document
const revueFlowNode = (event.target as Element).closest('.vue-flow')
// when vue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement)
if (!doc) return
@@ -130,8 +130,8 @@ export default () => {
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow
elementBelow.classList.add('revue-flow__handle-connecting')
elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
elementBelow.classList.add('vue-flow__handle-connecting')
elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
}
}

2
src/composables/useUpdateNodeInternals.ts
View File

@@ -5,7 +5,7 @@ export default (): UpdateNodeInternals => {
const store = useStore()
return (id: ElementId) => {
const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)
const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
if (nodeElement) {
store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }])

4
src/composables/useZoom.ts
View File

@@ -149,13 +149,13 @@ export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
// when the target element is a node, we still allow zooming
if (
((event.target as Element).closest('.revue-flow__node') || (event.target as Element).closest('.revue-flow__edge')) &&
((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
event.type !== 'wheel'
)
return false
// when the target element is a node selection, we still allow zooming
if ((event.target as Element).closest('.revue-flow__nodesselection') && event.type !== 'wheel') return false
if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false

2
src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -29,7 +29,7 @@ const connectionLineVisible = computed(
)
</script>
<template>
<svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
<svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
<MarkerDefinitions :color="props.arrowHeadColor" />
<g
:transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"

2
src/container/EdgeRenderer/Marker.vue
View File

@@ -8,7 +8,7 @@ const props = defineProps<MarkerProps>()
<template>
<marker
:id="props.id"
class="revue-flow__arrowhead"
class="vue-flow__arrowhead"
markerWidth="12.5"
markerHeight="12.5"
viewBox="-10 -10 20 20"

4
src/container/EdgeRenderer/MarkerDefinitions.vue
View File

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
</script>
<template>
<defs>
<Marker id="revue-flow__arrowclosed">
<Marker id="vue-flow__arrowclosed">
<polyline
:stroke="props.color"
stroke-linecap="round"
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
points="-5,-4 0,0 -5,4 -5,-4"
/>
</Marker>
<Marker id="revue-flow__arrow">
<Marker id="vue-flow__arrow">
<polyline
:stroke="props.color"
stroke-linecap="round"

2
src/container/Flow/Flow.vue
View File

@@ -132,7 +132,7 @@ const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
</script>
<template>
<div class="revue-flow">
<div class="vue-flow">
<ZoomPane
:selection-key-code="props.selectionKeyCode"
:zoom-activation-key-code="props.zoomActivationKeyCode"

2
src/container/NodeRenderer/NodeRenderer.vue
View File

@@ -40,7 +40,7 @@ const type = (node: TNode) => {
</script>
<template>
<div
class="revue-flow__nodes"
class="vue-flow__nodes"
:style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
>
<template v-for="node of getNodes" :key="node.id">

2
src/container/SelectionPane/SelectionPane.vue
View File

@@ -52,5 +52,5 @@ useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionAc
<slot></slot>
<UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
<NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
<div class="revue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
<div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
</template>

2
src/container/ZoomPane/ZoomPane.vue
View File

@@ -58,7 +58,7 @@ hooks.load.trigger({
})
</script>
<template>
<div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
<div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
<slot v-bind="{ transform, dimensions: { width, height } }"></slot>
</div>
</template>

2
src/store/useFlowStore.ts
View File

@@ -15,7 +15,7 @@ export default function useFlowStore(preloadedState: FlowState): StoreDefinition
setActivePinia(pinia)
return defineStore({
id: `revue-flow-${Math.floor(Math.random() * 100)}`,
id: `vue-flow-${Math.floor(Math.random() * 100)}`,
state: () => ({
...preloadedState,
}),

54
src/style.css
View File

@@ -1,13 +1,13 @@
.revue-flow {
.vue-flow {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.revue-flow__renderer,
.revue-flow__pane,
.revue-flow__selectionpane {
.vue-flow__renderer,
.vue-flow__pane,
.vue-flow__selectionpane {
width: 100%;
height: 100%;
position: absolute;
@@ -15,25 +15,25 @@
left: 0;
}
.revue-flow__pane {
.vue-flow__pane {
z-index: 1;
}
.revue-flow__renderer {
.vue-flow__renderer {
z-index: 4;
}
.revue-flow__selectionpane {
.vue-flow__selectionpane {
z-index: 5;
}
.revue-flow__selection {
.vue-flow__selection {
position: absolute;
top: 0;
left: 0;
}
.revue-flow__edges {
.vue-flow__edges {
position: absolute;
top: 0;
left: 0;
@@ -41,7 +41,7 @@
z-index: 2;
}
.revue-flow__edge {
.vue-flow__edge {
pointer-events: visibleStroke;
&.inactive {
@@ -55,20 +55,20 @@
}
}
.revue-flow__edge-path {
.vue-flow__edge-path {
fill: none;
}
.revue-flow__edge-textwrapper {
.vue-flow__edge-textwrapper {
pointer-events: all;
}
.revue-flow__edge-text {
.vue-flow__edge-text {
pointer-events: none;
user-select: none;
}
.revue-flow__connection {
.vue-flow__connection {
pointer-events: none;
.animated {
@@ -77,11 +77,11 @@
}
}
.revue-flow__connection-path {
.vue-flow__connection-path {
fill: none;
}
.revue-flow__nodes {
.vue-flow__nodes {
position: absolute;
width: 100%;
height: 100%;
@@ -90,14 +90,14 @@
z-index: 3;
}
.revue-flow__node {
.vue-flow__node {
position: absolute;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
}
.revue-flow__nodesselection {
.vue-flow__nodesselection {
z-index: 3;
position: absolute;
width: 100%;
@@ -114,7 +114,7 @@
}
}
.revue-flow__handle {
.vue-flow__handle {
pointer-events: none;
&.connectable {
@@ -122,39 +122,39 @@
}
}
.revue-flow__handle-bottom {
.vue-flow__handle-bottom {
top: auto;
left: 50%;
bottom: -4px;
transform: translate(-50%, 0);
}
.revue-flow__handle-top {
.vue-flow__handle-top {
left: 50%;
top: -4px;
transform: translate(-50%, 0);
}
.revue-flow__handle-left {
.vue-flow__handle-left {
top: 50%;
left: -4px;
transform: translate(0, -50%);
}
.revue-flow__handle-right {
.vue-flow__handle-right {
right: -4px;
top: 50%;
transform: translate(0, -50%);
}
.revue-flow__edgeupdater {
.vue-flow__edgeupdater {
cursor: move;
pointer-events: all;
}
/* additional components */
.revue-flow__background {
.vue-flow__background {
position: absolute;
top: 0;
left: 0;
@@ -162,7 +162,7 @@
height: 100%;
}
.revue-flow__controls {
.vue-flow__controls {
position: absolute;
z-index: 5;
bottom: 10px;
@@ -179,7 +179,7 @@
}
}
.revue-flow__minimap {
.vue-flow__minimap {
position: absolute;
z-index: 5;
bottom: 10px;

50
src/theme-default.css
View File

@@ -1,11 +1,11 @@
.revue-flow__selection {
.vue-flow__selection {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.revue-flow__edge {
.vue-flow__edge {
&.selected {
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #555;
}
}
@@ -16,37 +16,37 @@
}
&.updating {
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #777;
}
}
}
.revue-flow__edge-path {
.vue-flow__edge-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.revue-flow__edge-text {
.vue-flow__edge-text {
font-size: 10px;
}
.revue-flow__edge-textbg {
.vue-flow__edge-textbg {
fill: white;
}
.revue-flow__connection-path {
.vue-flow__connection-path {
stroke: #b1b1b7;
stroke-width: 1;
}
.revue-flow__node {
.vue-flow__node {
cursor: grab;
}
.revue-flow__node-default,
.revue-flow__node-input,
.revue-flow__node-output {
.vue-flow__node-default,
.vue-flow__node-input,
.vue-flow__node-output {
padding: 10px;
border-radius: 3px;
width: 150px;
@@ -57,15 +57,15 @@
border-style: solid;
}
.revue-flow__node-default.selectable,
.revue-flow__node-input.selectable,
.revue-flow__node-output.selectable {
.vue-flow__node-default.selectable,
.vue-flow__node-input.selectable,
.vue-flow__node-output.selectable {
&:hover {
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
}
}
.revue-flow__node-input {
.vue-flow__node-input {
background: #fff;
border-color: #0041d0;
@@ -74,12 +74,12 @@
box-shadow: 0 0 0 0.5px #0041d0;
}
.revue-flow__handle {
.vue-flow__handle {
background: #0041d0;
}
}
.revue-flow__node-default {
.vue-flow__node-default {
background: #fff;
border-color: #1a192b;
@@ -88,12 +88,12 @@
box-shadow: 0 0 0 0.5px #1a192b;
}
.revue-flow__handle {
.vue-flow__handle {
background: #1a192b;
}
}
.revue-flow__node-output {
.vue-flow__node-output {
background: #fff;
border-color: #ff0072;
@@ -102,17 +102,17 @@
box-shadow: 0 0 0 0.5px #ff0072;
}
.revue-flow__handle {
.vue-flow__handle {
background: #ff0072;
}
}
.revue-flow__nodesselection-rect {
.vue-flow__nodesselection-rect {
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.revue-flow__handle {
.vue-flow__handle {
position: absolute;
width: 6px;
height: 6px;
@@ -125,11 +125,11 @@
}
}
.revue-flow__minimap {
.vue-flow__minimap {
background-color: #fff;
}
.revue-flow__controls {
.vue-flow__controls {
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
&-button {