release!: 1.0.0 w. scope @vue-flow

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "bcakmakoglu/vue-flow" }],
+  "fixed": [],
+  "updateInternalDependencies": "patch",
+  "ignore": ["docs", "tests", "nuxt3-examples", "quasar-examples", "vite-examples"],
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true,
+    "useCalculatedVersionForSnapshots": true
+  }
+}

.changeset/curly-ligers-end.md

@@ -0,0 +1,36 @@
+---
+'@vue-flow/additional-components': major
+'@vue-flow/pathfinding-edge': major
+'@vue-flow/resize-rotate-node': major
+'@vue-flow/core': major
+---
+
+# What's changed?
+
+- Simplify edge path calculations
+  - remove `getEdgeCenter` and `getSimpleEdgeCenter`
+
+# Breaking Changes
+
+- `getEdgeCenter` has been removed
+  - Edge center positions can now be accessed from `getBezierPath` or `getSmoothStepPath` functions
+
+Before:
+```js
+import { getBezierPath, getEdgeCenter } from '@braks/vue-flow'
+
+// used to return the path string only
+const edgePath = computed(() => getBezierPath(pathParams),)
+
+// was necessary to get the centerX, centerY of an edge
+const centered = computed(() => getEdgeCenter(centerParams))
+```
+
+After:
+```js
+import { getBezierPath } from '@vue-flow/core'
+
+// returns the path string and the center positions
+const [path, centerX, centerY] = computed(() => getBezierPath(pathParams),)
+```
+

.changeset/twenty-walls-cheer.md

@@ -0,0 +1,46 @@
+---
+'@vue-flow/additional-components': major
+'@vue-flow/pathfinding-edge': major
+'@vue-flow/resize-rotate-node': major
+'@vue-flow/core': major
+---
+
+# What's changed?
+
+- Change pkg scope from 'braks' to 'vue-flow'
+  - Add `@vue-flow/core` package
+  - Add `@vue-flow/additional-components` package
+  - Add `@vue-flow/pathfinding-edge` package
+  - Add `@vue-flow/resize-rotate-node` package
+
+# Features
+
+- `useNode` and `useEdge` composables
+  - can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge) 
+- `selectionKeyCode` as `true`
+  - allows for figma style selection (i.e. create a selection rect without holding shift or any other key)
+- Handles to trigger handle bounds calculation on mount
+  - if no handle bounds are found, a Handle will try to calculate its bounds on mount
+  - should remove the need for `updateNodeInternals` on dynamic handles
+- Testing for various features using Cypress 10
+
+# Bugfixes
+
+- Fix `removeSelectedEdges` and `removeSelectedNodes` actions not properly removing elements from store
+
+# Breaking Changes
+
+- `@vue-flow/core` package is now required to use vue-flow
+- `@vue-flow/additional-components` package contains `Background`, `MiniMap` and `Controls` components and related types
+  - When switching to the new pkg scope, you need to change the import path. 
+
+Before:
+```js 
+import { VueFlow, Background, MiniMap, Controls } from '@braks/vue-flow'
+```
+
+After
+```js
+import { VueFlow } from '@vue-flow/core'
+import { Background, MiniMap, Controls } from '@vue-flow/additional-components'
+```

.github/workflows/build-and-test.yml

@@ -1,15 +1,12 @@
 name: build-and-test
 
 on:
-  push:
-    branches:
-      - master
-      - develop
-
   pull_request:
     branches:
       - master
       - develop
+env:
+  PNPM_CACHE_FOLDER: .pnpm-store
 
 jobs:
   build-and-test:
@@ -21,12 +18,6 @@ jobs:
         node: [14]
 
     steps:
-      - name: TurboRepo local server
-        uses: felixmosh/turborepo-gh-artifacts@v1
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          server-token: ${{ secrets.TURBO_SERVER_TOKEN }}
-
       - name: Checkout 🛎
         uses: actions/checkout@master
 
@@ -36,22 +27,20 @@ jobs:
           node-version: ${{ matrix.node }}
           check-latest: true
 
-      - uses: pnpm/action-setup@v2.0.1
+      - uses: pnpm/action-setup@v2.2.2
         name: Install pnpm
-        id: pnpm-install
         with:
           version: 7
           run_install: false
 
-      - name: Get pnpm cache directory path 🛠
-        id: pnpm-cache-dir-path
-        run: echo "::set-output name=dir::$(pnpm cache dir)"
+      - name: Setup pnpm config 🏗
+        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
 
       - name: Cache node_modules 📦
         uses: actions/cache@v3
         id: pnpm-cache # use this to check for `cache-hit` (`steps.pnpm-cache.outputs.cache-hit != 'true'`)
         with:
-          path: ${{ steps.pnpm-cache-dir-path.outputs.dir }}
+          path: $PNPM_CACHE_FOLDER
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm.lock') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-

.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+env:
+  CI: true
+  PNPM_CACHE_FOLDER: .pnpm-store
+
+jobs:
+  version:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: setup node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: install pnpm
+        run: npm i pnpm@latest -g
+      - name: Setup npmrc
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
+      - name: setup pnpm config
+        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
+      - name: install dependencies
+        run: pnpm install
+      - name: create and publish versions
+        uses: changesets/action@v1
+        with:
+          version: pnpm ci:version
+          commit: "chore: bump versions"
+          title: "chore: bump versions"
+          publish: pnpm ci:publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -59,10 +59,10 @@ the [examples](https://vueflow.dev/examples/).
 ## 🛠 Setup
 
 ```bash
-$ npm i @braks/vue-flow
+$ npm i @vue-flow/core
 
 # or
-$ yarn add @braks/vue-flow
+$ yarn add @vue-flow/core
 ```
 
 ## 🎮 Quickstart
@@ -80,7 +80,7 @@ A basic setup looks like this:
 ```vue
 <!-- Flowchart.vue -->
 <script setup>
-import { VueFlow } from '@braks/vue-flow'
+import { VueFlow } from '@vue-flow/core'
 
 const elements = ref([
   {
@@ -111,10 +111,10 @@ const elements = ref([
 
 ```css
 /* import the required styles */
-@import "@braks/vue-flow/dist/style.css";
+@import "@vue-flow/core/dist/style.css";
 
 /* import the default theme (optional) */
-@import "@braks/vue-flow/dist/theme-default.css";
+@import "@vue-flow/core/dist/theme-default.css";
 ```
 
 ### 🪴 Vue 2
@@ -128,7 +128,7 @@ there is no support for Vue 2, nor will there be any support in the future, sorr
 
 ### Prerequisites
 
-- [Node.js v12+](https://nodejs.org/)
+- [Node.js v14+](https://nodejs.org/)
 - [PnPm](https://pnpm.io/)
 
 
@@ -181,4 +181,4 @@ This project is built with
 Many thanks to the kind individuals who leave a star.
 Your support is much appreciated!
 
-[![Stargazers for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)
+[![Stargazers for @vue-flow/core](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)

docs/components/Repl.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Repl, ReplStore } from '@vue/repl'
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '@vue-flow/core'
 import '@vue/repl/style.css'
 import { exampleImports } from './examples'
 
 const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
 const { vueFlowVersion } = useVueFlow()
-let css = `@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@${vueFlowVersion.value}/dist/style.css';
-@import 'https://cdn.jsdelivr.net/npm/@braks/vue-flow@${vueFlowVersion.value}/dist/theme-default.css';
+let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
 
 html,
 body,
@@ -71,7 +71,8 @@ onMounted(async () => {
   // pre-set import map
   store.setImportMap({
     imports: {
-      '@braks/vue-flow': `${location.origin}/vue-flow.es.js`,
+      '@vue-flow/additional-components': `${location.origin}/additional-components.es.js`,
+      '@vue-flow/core': `${location.origin}/vue-flow.es.js`,
       ...additionalImports,
     },
   })

docs/components/examples/basic/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/basic/initial-elements.js

@@ -1,4 +1,4 @@
-import { MarkerType } from '@braks/vue-flow'
+import { MarkerType } from '@vue-flow/core'
 
 /**
  * You can pass elements together as a v-model value

docs/components/examples/connectionline/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
 

docs/components/examples/custom-node/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { computed, h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'

docs/components/examples/custom-node/CustomNode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '@vue-flow/core'
 import { computed } from 'vue'
 import { presets } from './presets.js'
 

docs/components/examples/dnd/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 
 let id = 0

docs/components/examples/edges/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@braks/vue-flow'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'

docs/components/examples/edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import { getBezierPath, useVueFlow } from '@vue-flow/core'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -64,15 +64,6 @@ const edgePath = computed(() =>
     targetPosition: props.targetPosition,
   }),
 )
-
-const center = computed(() =>
-  getEdgeCenter({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    targetX: props.targetX,
-    targetY: props.targetY,
-  }),
-)
 </script>
 
 <script>
@@ -82,12 +73,12 @@ export default {
 </script>
 
 <template>
-  <path :id="id" :style="style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="id" :style="style" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" />
   <foreignObject
     :width="foreignObjectSize"
     :height="foreignObjectSize"
-    :x="center[0] - foreignObjectSize / 2"
-    :y="center[1] - foreignObjectSize / 2"
+    :x="edgePath[1] - foreignObjectSize / 2"
+    :y="edgePath[2] - foreignObjectSize / 2"
     class="edgebutton-foreignobject"
     requiredExtensions="http://www.w3.org/1999/xhtml"
   >