Merge branch 'master' into release/2.0.0

# Conflicts:
#	packages/core/src/store/actions.ts

Author: bcakmakoglu

CHANGELOG.md

@@ -2,6 +2,59 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.23.0] - 2023-10-06
+
+[a838941](a838941d393fb85a26294e06130b768919404616)...[9b6c6e3](9b6c6e380e95673a91feaa8deb08c281aa139c27)
+
+### Bug Fixes
+
+- Unselect edge if selected and multi-selection is active ([ad7d013](ad7d01305e1aacca35526752878b33d77e8ee524))
+- Wait for node to be initialised before enforcing min/max size ([75b1a69](75b1a6944daa061e03ae4bd872eb89034618ff81))
+- Respect pan on scroll class name ([e369803](e36980337b68920a128f8381ceb33ac19ebfeb8d))
+- Disable panning when `panOnDrag` is `false` ([8716a6e](8716a6e6b8cdd34694b05676ec7d1e14cb38680b))
+- Queue node dimensions update to nextTick ([93f0802](93f080225726687da399bbb2359b3172ba13da45))
+
+### Documentation
+
+- Add showcase section to home page ([7ecf37b](7ecf37b20ce020e517c76ad0c2876a2e86735908))
+- Update deps ([166b3ef](166b3ef8e94ae7f4c97565e2940609a8f291b591))
+- Add kestra to showcase ([2ad5814](2ad581466614992c1b2be705bec74385a318fd29))
+- Update vitepress ([db16495](db16495e0ffa80bcf18b561c77201afa36a28543))
+
+### Features
+
+- Add source and target node ids to edge remove changes ([7a01377](7a013771f3d5efec4d23eace5a08fd2fc5ab38b8))
+- Allow passing a number as connectable prop ([3e446fa](3e446fab68af6a4e18eaded6b2735c28f8644df0))
+- Cleanup handle bounds from node when handle is unmounted ([ce1647a](ce1647ad1efbbc9d9eacda7c6802bc7cb6471866))
+- Add `getIncomers`, `getOutgoers` & `getConnectedEdges` as store actions ([edc7669](edc7669b18707fb6cd33c2ebcb62fe2e74debf69))
+- Add `areNodesInitialized` getter ([29f3d2d](29f3d2d5e1b74f1f059b9d2cabc029a323964c6b))
+- Add `flowToScreenCoordinate` & `screenToFlowCoordinate` to viewport actions ([db894a5](db894a5adb03705cd7acced9913ea39234aa6626))
+- Add `nodeDragThreshold` option ([e71a2aa](e71a2aa4efcfcab634dafeb710a9c9056cb2a9ff))
+
+### Miscellaneous Tasks
+
+- Update dev container config ([41015cc](41015cc07feb22f0aaef410c335eac83ae4211df))
+- Update node.md (#1097) ([aa2bbd6](aa2bbd62c22464a7c83a6d2948c55f057459e884))
+- Add ([2f2036e](2f2036eafcc961c8b929bc7a7b0e25569a52cc2e))
+- Cleanup markers ([88882d0](88882d08758ea234aa6ddf676bb1564108650ae3))
+- Add ([dcb02cb](dcb02cbfcb920779cd388a276ed5dc8fca9fe8c9))
+- Add ([590fa2a](590fa2a754a7cbc9ab77fd87cf967389008ee0a3))
+- Add ([5e78795](5e78795764a01b0efad4e1dfe667eb669fc4b0b1))
+- Cleanup ([870bc4f](870bc4f74a4214a7096dfc8d1b3f141d5a7fbed9))
+- Add ([5e88898](5e888987eb5b1b9792fff6b7fa67f433a3df6f70))
+- Add ([1bf4791](1bf479140f1120fd70c3bd353120a98ca5d80141))
+- Add ([8ae351f](8ae351ff6b7574e3a0640edc9d423ee2da83cd28))
+- Add ([ed31890](ed31890e4a694a5e0a530253f60078419861a89a))
+- Add ([c3b10da](c3b10dac0e918a14ff9595ee23014a9336a1f6d5))
+- Add ([c7ad8e0](c7ad8e00b20f89a84530fadf595a69b055a8916d))
+- Add ([92649ef](92649efcdd8e73fee8ab4994ef4ab6d967bd9eb0))
+- Add ([20cd9d8](20cd9d8e298e7f8c5aedada302a56373c3f961f0))
+- Add ([01a53e0](01a53e05266c0912916fe50df7bf079756bf77ab))
+
+### Refactor
+
+- Allow using `expandParent` with `parent` extent ([c916284](c916284917e697d1a35c9d0c9cfe608d7c549092))
+
 ## [1.22.3] - 2023-08-21
 
 [921c8ce](921c8ceb0327af012da2e48b4d25cb9c3417517c)...[a838941](a838941d393fb85a26294e06130b768919404616)

docs/components/Repl.vue

@@ -7,6 +7,10 @@ export default defineComponent({
   props: ['example', 'examplesImports', 'dependencies'],
   setup(props) {
     return () => {
+      if (typeof navigator === 'undefined') {
+        return null
+      }
+
       return h(Suspense, h(DocsRepl, props))
     }
   },

docs/components/home/Acknowledgement.vue

@@ -4,27 +4,34 @@ import Heart from '~icons/mdi/heart'
 
 <template>
   <div id="acknowledgement">
-    <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:(pb-12 pt-6) text-center">
-      <h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500 mr-2" /> Acknowledgement</h1>
+    <div class="border-t-1 border-secondary pt-6">
+      <div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
+        <h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500 min-w-8" /> Acknowledgement</h1>
 
-      <p>
-        <strong>First off</strong>: A big thank you to the developers of
-        <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
-        to create this port to Vue 3 - without them there is no Vue Flow.
-      </p>
+        <p>
+          <span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
+          the developers of <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a>.
 
-      <br />
+          <span class="inline-block">
+            Without their continuous, amazing, open-source work, this project would not have been possible.
+          </span>
+        </p>
 
-      <p>
-        Vue Flow is built on top of existing features and code taken from
-        <a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the basic features
-        found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
-        the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
-        <br />
-        <a href="https://github.com/sponsors/wbkd" target="_blank" class="text-lg font-bold text-green-500">
-          please consider supporting Webkid by donating.
-        </a>
-      </p>
+        <p>
+          <span class="font-semibold text-accent">Vue Flow</span> is built on top of existing features and code taken from
+          <a href="https://reactflow.dev" target="_blank" class="text-primary">React Flow</a>. It replicates the features found in
+          React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
+          you know and love from Vue. If you're happy with Vue Flow,
+
+          <span class="inline-block text-xl font-medium">
+            please consider supporting <a href="https://webkid.io" target="_blank" class="text-primary">Webkid</a> by
+            <a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-primary"> donating </a> or
+            <a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-primary">
+              subscribing to React Flow Pro.
+            </a>
+          </span>
+        </p>
+      </div>
     </div>
   </div>
 </template>

docs/components/home/Features.vue

@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
 <template>
   <div ref="el" class="w-full">
     <div
-      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"
+      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"
     >
       <div class="flex flex-col md:flex-row gap-12 md:gap-24">
         <Basic @pane="onLoad" />

docs/components/home/Home.vue

@@ -25,7 +25,7 @@ onMounted(() => {
 <style lang="scss">
 .is-home {
   h1 {
-    @apply text-xl lg:text-4xl mb-4 font-bold;
+    @apply text-2xl md:text-3xl xl:text-4xl mb-4 font-bold;
   }
 
   h2 {

docs/components/home/Showcase.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div
+    class="border-t-1 border-secondary w-full text-white bg-gradient-to-br from-secondary-500 to-secondary-100 dark:(!bg-none)"
+  >
+    <div class="max-w-5/6 2xl:max-w-7xl mx-auto py-12 md:py-16">
+      <div class="flex flex-col items-center justify-center gap-2">
+        <h1>Putting Ideas into Action: The Showcase</h1>
+
+        <p class="font-medium max-w-3/4 text-center">
+          Whether you're a seasoned developer or just starting your journey with Vue Flow, this showcase offers inspiration and
+          insights into what's possible. Dive in and discover the potential of Vue Flow for your next project.
+        </p>
+
+        <div
+          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"
+        >
+          <div class="flex-1 flex flex-col items-center md:items-start">
+            <div
+              class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
+            >
+              <img class="object-cover h-full w-full" src="/assets/octai.png" alt="Octai" />
+            </div>
+
+            <div class="px-1">
+              <a href="https://octai.com" target="_blank">
+                <h2 class="text-3xl mt-6 font-semibold inline-block">Octai</h2>
+              </a>
+
+              <h3 class="text-lg">
+                A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.
+              </h3>
+            </div>
+          </div>
+
+          <div class="pt-12 md:pt-0 flex-1 flex flex-col justify-center">
+            <div
+              class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
+            >
+              <img class="object-cover h-full w-full" src="/assets/kestra.webp" alt="Kestra" />
+            </div>
+
+            <div class="px-1">
+              <a href="https://octai.com" target="_blank">
+                <h2 class="text-3xl mt-6 font-semibold inline-block">Kestra</h2>
+              </a>
+
+              <h3 class="text-lg">An open-source orchestrator that makes both scheduled and event-driven workflows easy.</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

docs/components/home/Team.vue

@@ -101,16 +101,19 @@ onPaneReady((i) => emit('pane', i))
       <Background variant="lines" pattern-color="#aaa" :gap="46" />
     </VueFlow>
   </div>
+
   <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Additional Features</h1>
+
       <p>
         On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
 
         <br />
         Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
-      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
+
+      <a class="docs-button" href="/guide/"> Documentation </a>
     </div>
   </div>
 </template>

docs/components/home/flows/Additional.vue

@@ -12,7 +12,13 @@ const getNodeClass: ClassFunc<GraphNode> = (el) => {
   const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
   if (el.selected) {
     classes.push(
-      ...['!border-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
+      ...[
+        '!border-primary/80',
+        '!shadow-lg',
+        'shadow-secondary dark:(!shadow-primary/50)',
+        '!bg-primary-100/50 dark:(!bg-primary-300/80)',
+        '!text-gray-700 dark:(!text-white)',
+      ],
     )
   }
 
@@ -28,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
   const sourceNodeSelected = el.sourceNode.selected
   return {
     transition: 'stroke ease-in-out 300ms',
-    stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
+    stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
+    strokeWidth: 2,
   }
 }
 
@@ -111,13 +118,16 @@ onConnect((param) => {
   <div class="md:max-w-1/3 flex flex-col justify-center">
     <div class="flex flex-col items-center md:items-start">
       <h1>Interactive Graphs</h1>
+
       <p>
         Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
         elements, customizable nodes and edges and a bunch of event handlers.
       </p>
-      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
+
+      <a class="docs-button" href="/guide/"> Documentation </a>
     </div>
   </div>
+
   <div
     class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
   >
@@ -134,14 +144,14 @@ onConnect((param) => {
 
 <style>
 .basic .vue-flow__node-input.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 
 .basic .vue-flow__node-default.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 
 .basic .vue-flow__node-output.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 </style>

docs/components/home/flows/Basic.vue

@@ -243,7 +243,7 @@ function scrollTo() {
 
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
-          <a class="intro-link group bg-[#ef467e]" href="/examples/"> Check The Examples </a>
+          <a class="intro-link group bg-pink-500" href="/examples/"> Check The Examples </a>
         </div>
 
         <Handle
@@ -278,7 +278,7 @@ function scrollTo() {
 <style>
 .intro {
   @apply cursor-pointer
-  bg-green-500
+  bg-primary
   text-white
   transform
   transition-transform