Skip to content

Commit a6d729b

Browse files
bcakmakoglubcakmakoglu
committed
Merge branch 'master' into release/2.0.0
# Conflicts: # packages/core/src/store/actions.ts
2 parents f3a8714 + d0c6133 commit a6d729b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1638
-884
lines changed

‎CHANGELOG.md

+53
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,59 @@
22

33
All notable changes to this project will be documented in this file.
44

5+
## [1.23.0] - 2023-10-06
6+
7+
[a838941](a838941d393fb85a26294e06130b768919404616)...[9b6c6e3](9b6c6e380e95673a91feaa8deb08c281aa139c27)
8+
9+
### Bug Fixes
10+
11+
- Unselect edge if selected and multi-selection is active ([ad7d013](ad7d01305e1aacca35526752878b33d77e8ee524))
12+
- Wait for node to be initialised before enforcing min/max size ([75b1a69](75b1a6944daa061e03ae4bd872eb89034618ff81))
13+
- Respect pan on scroll class name ([e369803](e36980337b68920a128f8381ceb33ac19ebfeb8d))
14+
- Disable panning when `panOnDrag` is `false` ([8716a6e](8716a6e6b8cdd34694b05676ec7d1e14cb38680b))
15+
- Queue node dimensions update to nextTick ([93f0802](93f080225726687da399bbb2359b3172ba13da45))
16+
17+
### Documentation
18+
19+
- Add showcase section to home page ([7ecf37b](7ecf37b20ce020e517c76ad0c2876a2e86735908))
20+
- Update deps ([166b3ef](166b3ef8e94ae7f4c97565e2940609a8f291b591))
21+
- Add kestra to showcase ([2ad5814](2ad581466614992c1b2be705bec74385a318fd29))
22+
- Update vitepress ([db16495](db16495e0ffa80bcf18b561c77201afa36a28543))
23+
24+
### Features
25+
26+
- Add source and target node ids to edge remove changes ([7a01377](7a013771f3d5efec4d23eace5a08fd2fc5ab38b8))
27+
- Allow passing a number as connectable prop ([3e446fa](3e446fab68af6a4e18eaded6b2735c28f8644df0))
28+
- Cleanup handle bounds from node when handle is unmounted ([ce1647a](ce1647ad1efbbc9d9eacda7c6802bc7cb6471866))
29+
- Add `getIncomers`, `getOutgoers` & `getConnectedEdges` as store actions ([edc7669](edc7669b18707fb6cd33c2ebcb62fe2e74debf69))
30+
- Add `areNodesInitialized` getter ([29f3d2d](29f3d2d5e1b74f1f059b9d2cabc029a323964c6b))
31+
- Add `flowToScreenCoordinate` & `screenToFlowCoordinate` to viewport actions ([db894a5](db894a5adb03705cd7acced9913ea39234aa6626))
32+
- Add `nodeDragThreshold` option ([e71a2aa](e71a2aa4efcfcab634dafeb710a9c9056cb2a9ff))
33+
34+
### Miscellaneous Tasks
35+
36+
- Update dev container config ([41015cc](41015cc07feb22f0aaef410c335eac83ae4211df))
37+
- Update node.md (#1097) ([aa2bbd6](aa2bbd62c22464a7c83a6d2948c55f057459e884))
38+
- Add ([2f2036e](2f2036eafcc961c8b929bc7a7b0e25569a52cc2e))
39+
- Cleanup markers ([88882d0](88882d08758ea234aa6ddf676bb1564108650ae3))
40+
- Add ([dcb02cb](dcb02cbfcb920779cd388a276ed5dc8fca9fe8c9))
41+
- Add ([590fa2a](590fa2a754a7cbc9ab77fd87cf967389008ee0a3))
42+
- Add ([5e78795](5e78795764a01b0efad4e1dfe667eb669fc4b0b1))
43+
- Cleanup ([870bc4f](870bc4f74a4214a7096dfc8d1b3f141d5a7fbed9))
44+
- Add ([5e88898](5e888987eb5b1b9792fff6b7fa67f433a3df6f70))
45+
- Add ([1bf4791](1bf479140f1120fd70c3bd353120a98ca5d80141))
46+
- Add ([8ae351f](8ae351ff6b7574e3a0640edc9d423ee2da83cd28))
47+
- Add ([ed31890](ed31890e4a694a5e0a530253f60078419861a89a))
48+
- Add ([c3b10da](c3b10dac0e918a14ff9595ee23014a9336a1f6d5))
49+
- Add ([c7ad8e0](c7ad8e00b20f89a84530fadf595a69b055a8916d))
50+
- Add ([92649ef](92649efcdd8e73fee8ab4994ef4ab6d967bd9eb0))
51+
- Add ([20cd9d8](20cd9d8e298e7f8c5aedada302a56373c3f961f0))
52+
- Add ([01a53e0](01a53e05266c0912916fe50df7bf079756bf77ab))
53+
54+
### Refactor
55+
56+
- Allow using `expandParent` with `parent` extent ([c916284](c916284917e697d1a35c9d0c9cfe608d7c549092))
57+
558
## [1.22.3] - 2023-08-21
659

760
[921c8ce](921c8ceb0327af012da2e48b4d25cb9c3417517c)...[a838941](a838941d393fb85a26294e06130b768919404616)

‎docs/components/Repl.vue

+4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ export default defineComponent({
77
props: ['example', 'examplesImports', 'dependencies'],
88
setup(props) {
99
return () => {
10+
if (typeof navigator === 'undefined') {
11+
return null
12+
}
13+
1014
return h(Suspense, h(DocsRepl, props))
1115
}
1216
},

‎docs/components/home/Acknowledgement.vue

+25-18
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,34 @@ import Heart from '~icons/mdi/heart'
44

55
<template>
66
<div id="acknowledgement">
7-
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:(pb-12 pt-6) text-center">
8-
<h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500 mr-2" /> Acknowledgement</h1>
7+
<div class="border-t-1 border-secondary pt-6">
8+
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
9+
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
910

10-
<p>
11-
<strong>First off</strong>: A big thank you to the developers of
12-
<a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
13-
to create this port to Vue 3 - without them there is no Vue Flow.
14-
</p>
11+
<p>
12+
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
13+
the developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
1514

16-
<br />
15+
<span class="inline-block">
16+
Without their continuous, amazing, open-source work, this project would not have been possible.
17+
</span>
18+
</p>
1719

18-
<p>
19-
Vue Flow is built on top of existing features and code taken from
20-
<a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the basic features
21-
found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
22-
the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
23-
<br />
24-
<a href="https://github.com/sponsors/wbkd" target="_blank" class="text-lg font-bold text-green-500">
25-
please consider supporting Webkid by donating.
26-
</a>
27-
</p>
20+
<p>
21+
<span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
22+
<a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
23+
React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
24+
you know and love from Vue. If you're happy with Vue Flow,
25+
26+
<span class="inline-block text-xl font-medium">
27+
please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
28+
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
29+
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary">
30+
subscribing to React Flow Pro.
31+
</a>
32+
</span>
33+
</p>
34+
</div>
2835
</div>
2936
</div>
3037
</template>

‎docs/components/home/Features.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
2727
<template>
2828
<div ref="el" class="w-full">
2929
<div
30-
class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
30+
class="flex flex-col divide-y divide-secondary md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-5/6 2xl:max-w-7xl m-auto py-12 md:py-24 text-center md:text-left"
3131
>
3232
<div class="flex flex-col md:flex-row gap-12 md:gap-24">
3333
<Basic @pane="onLoad" />

‎docs/components/home/Home.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ onMounted(() => {
2525
<style lang="scss">
2626
.is-home {
2727
h1 {
28-
@apply text-xl lg:text-4xl mb-4 font-bold;
28+
@apply text-2xl md:text-3xl xl:text-4xl mb-4 font-bold;
2929
}
3030
3131
h2 {

‎docs/components/home/Showcase.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div
5+
class="border-t-1 border-secondary w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)"
6+
>
7+
<div class="max-w-5/6 2xl:max-w-7xl mx-auto py-12 md:py-16">
8+
<div class="flex flex-col items-center justify-center gap-2">
9+
<h1>Putting Ideas into Action: The Showcase</h1>
10+
11+
<p class="font-medium max-w-3/4 text-center">
12+
Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
13+
insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
14+
</p>
15+
16+
<div
17+
class="divide-y divide-secondary md:divide-y-0 flex flex-col md:flex-row justify-between items-center gap-12 mt-8 text-center md:text-left"
18+
>
19+
<div class="flex-1 flex flex-col items-center md:items-start">
20+
<div
21+
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
22+
>
23+
<img class="object-cover h-full w-full" src="/assets/octai.png" alt="Octai" />
24+
</div>
25+
26+
<div class="px-1">
27+
<a href="https://octai.com" target="_blank">
28+
<h2 class="text-3xl mt-6 font-semibold inline-block">Octai</h2>
29+
</a>
30+
31+
<h3 class="text-lg">
32+
A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.
33+
</h3>
34+
</div>
35+
</div>
36+
37+
<div class="pt-12 md:pt-0 flex-1 flex flex-col justify-center">
38+
<div
39+
class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
40+
>
41+
<img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" />
42+
</div>
43+
44+
<div class="px-1">
45+
<a href="https://octai.com" target="_blank">
46+
<h2 class="text-3xl mt-6 font-semibold inline-block">Kestra</h2>
47+
</a>
48+
49+
<h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</template>

‎docs/components/home/Team.vue

-19
This file was deleted.

‎docs/components/home/flows/Additional.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,19 @@ onPaneReady((i) => emit('pane', i))
101101
<Background variant="lines" pattern-color="#aaa" :gap="46" />
102102
</VueFlow>
103103
</div>
104+
104105
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
105106
<div class="flex flex-col gap-2 items-center md:items-start">
106107
<h1>Additional Features</h1>
108+
107109
<p>
108110
On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
109111

110112
<br />
111113
Plus it's built for composition, making the access of the internal state easy as can be!
112114
</p>
113-
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
115+
116+
<a class="docs-button" href="/guide/"> Documentation </a>
114117
</div>
115118
</div>
116119
</template>

‎docs/components/home/flows/Basic.vue

+16-6
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ const getNodeClass: ClassFunc<GraphNode> = (el) => {
1212
const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
1313
if (el.selected) {
1414
classes.push(
15-
...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
15+
...[
16+
'!border-primary/80',
17+
'!shadow-lg',
18+
'shadow-secondary dark:(!shadow-primary/50)',
19+
'!bg-primary-100/50 dark:(!bg-primary-300/80)',
20+
'!text-gray-700 dark:(!text-white)',
21+
],
1622
)
1723
}
1824
@@ -28,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
2834
const sourceNodeSelected = el.sourceNode.selected
2935
return {
3036
transition: 'stroke ease-in-out 300ms',
31-
stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
37+
stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
38+
strokeWidth: 2,
3239
}
3340
}
3441
@@ -111,13 +118,16 @@ onConnect((param) => {
111118
<div class="md:max-w-1/3 flex flex-col justify-center">
112119
<div class="flex flex-col items-center md:items-start">
113120
<h1>Interactive Graphs</h1>
121+
114122
<p>
115123
Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
116124
elements, customizable nodes and edges and a bunch of event handlers.
117125
</p>
118-
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
126+
127+
<a class="docs-button" href="/guide/"> Documentation </a>
119128
</div>
120129
</div>
130+
121131
<div
122132
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
123133
>
@@ -134,14 +144,14 @@ onConnect((param) => {
134144

135145
<style>
136146
.basic .vue-flow__node-input.selected .vue-flow__handle {
137-
@apply bg-green-500;
147+
@apply bg-primary;
138148
}
139149
140150
.basic .vue-flow__node-default.selected .vue-flow__handle {
141-
@apply bg-green-500;
151+
@apply bg-primary;
142152
}
143153
144154
.basic .vue-flow__node-output.selected .vue-flow__handle {
145-
@apply bg-green-500;
155+
@apply bg-primary;
146156
}
147157
</style>

‎docs/components/home/flows/Intro.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ function scrollTo() {
243243

244244
<template v-else-if="props.id === 'examples'">
245245
<div class="flex">
246-
<a class="intro-link group bg-[#ef467e]" href="/examples/"> Check The Examples </a>
246+
<a class="intro-link group bg-pink-500" href="/examples/"> Check The Examples </a>
247247
</div>
248248

249249
<Handle
@@ -278,7 +278,7 @@ function scrollTo() {
278278
<style>
279279
.intro {
280280
@apply cursor-pointer
281-
bg-green-500
281+
bg-primary
282282
text-white
283283
transform
284284
transition-transform

‎docs/components/home/flows/Nested.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const emit = defineEmits(['pane'])
99
const breakpoints = useBreakpoints(breakpointsTailwind)
1010
1111
const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
12-
const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
12+
const childClasses = `${nodeClasses} !bg-primary-500/70 !border-white`
1313
1414
const { onPaneReady, panOnDrag } = useVueFlow({
1515
fitViewOnInit: true,
@@ -27,7 +27,7 @@ const { onPaneReady, panOnDrag } = useVueFlow({
2727
id: '2',
2828
label: 'Parent Node',
2929
position: { x: -125, y: 100 },
30-
class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
30+
class: `${nodeClasses} !bg-primary-500/30 !border-primary-500`,
3131
style: { width: '400px', height: '160px' },
3232
},
3333
{
@@ -72,7 +72,7 @@ onPaneReady((i) => emit('pane', i))
7272
</div>
7373
</div>
7474
<div
75-
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
75+
class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-primary-500 overflow-hidden"
7676
>
7777
<VueFlow class="nested">
7878
<Controls class="md:(!left-auto !right-[10px])" />

‎docs/components/home/flows/RGB.vue

+3
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,18 @@ const nodeColor: MiniMapNodeFunc = (node) => {
9595
<RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
9696
</template>
9797
<Controls class="hidden md:block" />
98+
9899
<Background
99100
:variant="BackgroundVariant.Lines"
100101
:pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
101102
:gap="48"
102103
:size="1"
103104
/>
105+
104106
<MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
105107
</VueFlow>
106108
</div>
109+
107110
<div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
108111
<div class="flex flex-col gap-2 items-center md:items-start">
109112
<h1>Customizable</h1>

0 commit comments

Comments
 (0)