refactor(core): rename core pkg dir to core

packages/core/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  rules: {
+    'no-use-before-define': 0,
+    'vue/no-setup-props-destructure': 0,
+    'react/prop-types': 0,
+  },
+  extends: ['../../.eslintrc.js'],
+  ignorePatterns: ['!**/*'],
+}

packages/core/CHANGELOG.md

@@ -0,0 +1,78 @@
+# @vue-flow/core
+
+## 1.0.0
+
+### Major Changes
+
+- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # 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))
+  ```
+
+- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # 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'
+  ```

packages/core/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@vue-flow/core",
+  "version": "1.0.0",
+  "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bcakmakoglu/vue-flow"
+  },
+  "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
+  "bugs": {
+    "url": "https://github.com/bcakmakoglu/vue-flow/issues"
+  },
+  "main": "./dist/vue-flow-core.cjs.js",
+  "module": "./dist/vue-flow-core.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/vue-flow-core.iife.js",
+  "jsdelivr": "./dist/vue-flow-core.iife.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "prepare": "ts-patch install -s",
+    "build": "vite build",
+    "types": "pnpm prepare && vue-tsc --declaration --emitDeclarationOnly && tsc -p tsconfig.build.json && shx rm -rf tmp && pnpm lint:dist",
+    "theme": "postcss src/style.css -o dist/style.css && postcss src/theme-default.css -o dist/theme-default.css",
+    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .",
+    "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist",
+    "prepublishOnly": "shx cp ../../README.md .",
+    "postpublish": "shx rm README.md && git commit -a -m \"chore: bump version\"",
+    "test": "exit 0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.3.0",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^4.0.0",
+    "@types/d3": "^7.4.0",
+    "@vitejs/plugin-vue": "^2.3.4",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.16",
+    "postcss-cli": "^9.1.0",
+    "postcss-nested": "^5.0.6",
+    "ts-patch": "^2.0.2",
+    "typescript-transform-paths": "^3.3.1",
+    "unplugin-auto-import": "^0.11.2",
+    "vite": "^2.9.15",
+    "vite-plugin-vue-type-imports": "0.2.0",
+    "vue-tsc": "^0.40.13"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "np": {
+    "branch": "master",
+    "message": "v%s"
+  }
+}

packages/core/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer'), require('postcss-nested')],
+}

packages/core/src/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Vue Flow
+ * @module vue-flow
+ */
+
+export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
+
+export { default as Handle } from './components/Handle/Handle.vue'
+
+export { StraightEdge, StepEdge, BezierEdge, SimpleBezierEdge, SmoothStepEdge, BaseEdge, EdgeText } from './components/Edges'
+
+export { getBezierPath, getSimpleBezierPath, getSmoothStepPath, getStraightPath } from './components/Edges/utils'
+
+export {
+  isNode,
+  isEdge,
+  addEdge,
+  updateEdge,
+  getOutgoers,
+  getIncomers,
+  getConnectedEdges,
+  getTransformForBounds,
+  getRectOfNodes,
+  graphPosToZoomedPos,
+  getNodesInside,
+  getMarkerId,
+  getBoundsofRects,
+} from './utils/graph'
+
+/**
+ * Intended for options API
+ * In composition API you can access apply utilities from `useVueFlow`
+ */
+export { applyChanges, applyEdgeChanges, applyNodeChanges } from './utils/changes'
+
+export { defaultEdgeTypes, defaultNodeTypes } from './store'
+
+export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
+
+export { default as useZoomPanHelper } from './composables/useZoomPanHelper'
+
+export { default as useVueFlow, Storage as GlobalVueFlowStorage } from './composables/useVueFlow'
+
+export { default as useHandle } from './composables/useHandle'
+
+export { default as useNode } from './composables/useNode'
+
+export { default as useEdge } from './composables/useEdge'
+
+export * from './types'

packages/core/src/style.css

@@ -0,0 +1,176 @@
+.vue-flow {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.vue-flow__container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+}
+
+.vue-flow__transformationpane {
+  pointer-events: none;
+  transform-origin: 0 0;
+  z-index: 2;
+}
+
+.vue-flow__pane {
+  z-index: 1;
+}
+
+.vue-flow__viewport {
+  z-index: 4;
+}
+
+.vue-flow__selectionpane {
+  z-index: 5;
+}
+
+.vue-flow__selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.vue-flow__edges {
+  overflow: visible;
+  pointer-events: none;
+}
+
+.vue-flow__edge {
+  pointer-events: visibleStroke;
+
+  &.inactive {
+    pointer-events: none;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+
+.vue-flow__edge-path {
+  fill: none;
+}
+
+.vue-flow__edge-textwrapper {
+  pointer-events: all;
+}
+
+.vue-flow__edge-text {
+  pointer-events: none;
+  user-select: none;
+}
+
+.vue-flow .vue-flow__connectionline {
+  z-index: 1001;
+}
+
+.vue-flow__connection {
+  pointer-events: none;
+
+  .animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.vue-flow__connection-path {
+  fill: none;
+}
+
+.vue-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.vue-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+}
+
+.vue-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+     position: absolute;
+     pointer-events: all;
+     cursor: grab;
+   }
+}
+
+.vue-flow__handle {
+  position: absolute;
+  pointer-events: none;
+
+  &.connectable {
+    pointer-events: all;
+  }
+}
+
+.vue-flow__handle-bottom {
+  top: auto;
+  left: 50%;
+  bottom: -4px;
+  transform: translate(-50%, 0);
+}
+
+.vue-flow__handle-top {
+  left: 50%;
+  top: -4px;
+  transform: translate(-50%, 0);
+}
+
+.vue-flow__handle-left {
+  top: 50%;
+  left: -4px;
+  transform: translate(0, -50%);
+}
+
+.vue-flow__handle-right {
+  right: -4px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.vue-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+/* additional components */
+.vue-flow__controls {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  left: 10px;
+
+  &-button {
+    width: 24px;
+    height: 24px;
+    border: none;
+
+    svg {
+      width: 100%;
+    }
+  }
+}
+
+.vue-flow__minimap {
+  position: absolute;
+  z-index: 5;
+  bottom: 10px;
+  right: 10px;
+}

packages/core/src/theme-default.css

@@ -0,0 +1,157 @@
+:root {
+  --vf-node-bg: #fff;
+  --vf-node-text: #222;
+  --vf-connection-path:  #b1b1b7;
+  --vf-handle: #555;
+}
+
+.vue-flow__selection {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.vue-flow__edge {
+  &.selected {
+    .vue-flow__edge-path {
+      stroke: #555;
+    }
+  }
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.updating {
+    .vue-flow__edge-path {
+      stroke: #777;
+    }
+  }
+}
+
+.vue-flow__edge-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+}
+
+.vue-flow__edge-text {
+  font-size: 10px;
+}
+
+.vue-flow__edge-textbg {
+  fill: #fff;
+}
+
+.vue-flow__connection-path {
+  stroke: var(--vf-connection-path);
+  stroke-width: 1;
+}
+
+.vue-flow__node {
+  cursor: grab;
+}
+
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: var(--vf-node-text);
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+
+  background: var(--vf-node-bg);
+  border-color: var(--vf-node-color);
+
+  &.selected,
+  &.selected:hover {
+     box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
+   }
+
+  .vue-flow__handle {
+    background: var(--vf-handle);
+  }
+}
+
+.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);
+  }
+}
+
+.vue-flow__node-input {
+  --vf-node-color: #0041d0;
+  --vf-handle: var(--vf-node-color);
+  --vf-box-shadow: var(--vf-node-color);
+
+  background: var(--vf-node-bg);
+  border-color: var(--vf-node-color);
+}
+
+.vue-flow__node-default {
+  --vf-node-color: #1a192b;
+  --vf-handle: var(--vf-node-color);
+  --vf-box-shadow: var(--vf-node-color);
+
+  background: var(--vf-node-bg);
+  border-color: var(--vf-node-color);
+}
+
+.vue-flow__node-output {
+  --vf-node-color: #ff0072;
+  --vf-handle: var(--vf-node-color);
+  --vf-box-shadow: var(--vf-node-color);
+}
+
+.vue-flow__nodesselection-rect {
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.vue-flow__handle {
+  width: 6px;
+  height: 6px;
+  background: var(--vf-handle);
+  border: 1px solid #fff;
+  border-radius: 100%;
+
+  &.connectable {
+    cursor: crosshair;
+  }
+}
+
+.vue-flow__minimap {
+  background-color: #fff;
+}
+
+.vue-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    svg {
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+}

packages/core/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "preserveSymlinks": true,
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "types": ["vite/client", "vue/macros"],
+    "jsx": "preserve",
+    "paths": {
+      "~/*": ["src/*"]
+    },
+    "plugins": [
+      // Transform paths in output .d.ts files (Include this line if you output declarations files)
+      { "transform": "typescript-transform-paths", "afterDeclarations": true }
+    ]
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/core/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "files": ["package.json"]
+}

packages/core/vite.config.ts

@@ -0,0 +1,57 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueTypes from 'vite-plugin-vue-type-imports'
+import AutoImport from 'unplugin-auto-import/vite'
+import replace from '@rollup/plugin-replace'
+import pkg from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '~': resolve('src'),
+    },
+    extensions: ['.ts', '.vue'],
+  },
+  build: {
+    emptyOutDir: false,
+    lib: {
+      formats: ['es', 'cjs', 'iife'],
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'vue-flow-core',
+      name: 'vueFlowCore',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        format: 'esm',
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  plugins: [
+    vue({
+      reactivityTransform: true,
+    }),
+    vueTypes(),
+    AutoImport({
+      imports: ['vue', '@vueuse/core', 'vue/macros'],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    replace({
+      __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
+      preventAssignment: true,
+    }),
+  ],
+  optimizeDeps: {
+    include: ['@vueuse/core', 'd3-zoom', 'd3-selection', 'd3-drag'],
+  },
+})