From 082050b1648dd3c6569cab0cd974cf9128647c98 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 10 Oct 2022 15:42:20 +0200 Subject: [PATCH] refactor(core): rename core pkg dir to `core` --- packages/core/.eslintrc.js | 9 + packages/core/CHANGELOG.md | 78 ++++++++ packages/core/package.json | 67 +++++++ packages/core/postcss.config.js | 3 + .../{vue-flow => core}/src/auto-imports.d.ts | 0 .../ConnectionLine/ConnectionLine.vue | 0 .../src/components/Edges/BaseEdge.ts | 0 .../src/components/Edges/BezierEdge.ts | 0 .../src/components/Edges/EdgeAnchor.ts | 0 .../src/components/Edges/EdgeText.vue | 0 .../src/components/Edges/SimpleBezierEdge.ts | 0 .../src/components/Edges/SmoothStepEdge.ts | 0 .../src/components/Edges/StepEdge.ts | 0 .../src/components/Edges/StraightEdge.ts | 0 .../src/components/Edges/Wrapper.ts | 0 .../src/components/Edges/index.ts | 0 .../src/components/Edges/utils/bezier.ts | 0 .../src/components/Edges/utils/general.ts | 0 .../src/components/Edges/utils/index.ts | 0 .../components/Edges/utils/simple-bezier.ts | 0 .../src/components/Edges/utils/smoothstep.ts | 0 .../src/components/Edges/utils/straight.ts | 0 .../src/components/Handle/Handle.vue | 0 .../src/components/Nodes/DefaultNode.ts | 0 .../src/components/Nodes/InputNode.ts | 0 .../src/components/Nodes/NodeWrapper.vue | 0 .../src/components/Nodes/OutputNode.ts | 0 .../src/components/Nodes/index.ts | 0 .../NodesSelection/NodesSelection.vue | 0 .../UserSelection/SelectionRect.vue | 0 .../UserSelection/UserSelection.vue | 0 .../src/components/UserSelection/utils.ts | 0 .../src/components/index.ts | 0 .../src/composables/index.ts | 0 .../src/composables/useDrag.ts | 0 .../src/composables/useEdge.ts | 0 .../src/composables/useEdgeHooks.ts | 0 .../src/composables/useHandle.ts | 0 .../src/composables/useKeyPress.ts | 0 .../src/composables/useNode.ts | 0 .../src/composables/useNodeHooks.ts | 0 .../src/composables/useVueFlow.ts | 0 .../src/composables/useWindow.ts | 0 .../src/composables/useZoomPanHelper.ts | 0 .../container/EdgeRenderer/EdgeRenderer.vue | 0 .../src/container/EdgeRenderer/Marker.vue | 0 .../EdgeRenderer/MarkerDefinitions.vue | 0 .../container/NodeRenderer/NodeRenderer.vue | 0 .../container/SelectionPane/SelectionPane.vue | 0 .../src/container/Viewport/Transform.vue | 0 .../src/container/Viewport/Viewport.vue | 0 .../src/container/VueFlow/VueFlow.vue | 0 .../src/container/VueFlow/watch.ts | 0 .../{vue-flow => core}/src/container/index.ts | 0 .../{vue-flow => core}/src/context/index.ts | 0 packages/{vue-flow => core}/src/custom.d.ts | 0 packages/{vue-flow => core}/src/env.d.ts | 0 packages/core/src/index.ts | 50 +++++ .../{vue-flow => core}/src/store/actions.ts | 0 .../{vue-flow => core}/src/store/getters.ts | 0 .../{vue-flow => core}/src/store/hooks.ts | 0 .../{vue-flow => core}/src/store/index.ts | 0 .../{vue-flow => core}/src/store/state.ts | 0 packages/core/src/style.css | 176 ++++++++++++++++++ packages/core/src/theme-default.css | 157 ++++++++++++++++ .../{vue-flow => core}/src/types/changes.ts | 0 .../src/types/components.ts | 0 .../src/types/connection.ts | 0 packages/{vue-flow => core}/src/types/edge.ts | 0 packages/{vue-flow => core}/src/types/flow.ts | 0 .../{vue-flow => core}/src/types/handle.ts | 0 .../{vue-flow => core}/src/types/hooks.ts | 0 .../{vue-flow => core}/src/types/index.ts | 0 packages/{vue-flow => core}/src/types/node.ts | 0 .../{vue-flow => core}/src/types/store.ts | 0 packages/{vue-flow => core}/src/types/zoom.ts | 0 .../{vue-flow => core}/src/utils/changes.ts | 0 packages/{vue-flow => core}/src/utils/drag.ts | 0 packages/{vue-flow => core}/src/utils/edge.ts | 0 .../{vue-flow => core}/src/utils/graph.ts | 0 .../{vue-flow => core}/src/utils/index.ts | 0 packages/{vue-flow => core}/src/utils/node.ts | 0 .../{vue-flow => core}/src/utils/store.ts | 0 .../{vue-flow => core}/tsconfig.build.json | 0 packages/core/tsconfig.json | 32 ++++ packages/core/tsconfig.node.json | 11 ++ packages/core/vite.config.ts | 57 ++++++ 87 files changed, 640 insertions(+) create mode 100644 packages/core/.eslintrc.js create mode 100644 packages/core/CHANGELOG.md create mode 100644 packages/core/package.json create mode 100644 packages/core/postcss.config.js rename packages/{vue-flow => core}/src/auto-imports.d.ts (100%) rename packages/{vue-flow => core}/src/components/ConnectionLine/ConnectionLine.vue (100%) rename packages/{vue-flow => core}/src/components/Edges/BaseEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/BezierEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/EdgeAnchor.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/EdgeText.vue (100%) rename packages/{vue-flow => core}/src/components/Edges/SimpleBezierEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/SmoothStepEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/StepEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/StraightEdge.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/Wrapper.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/index.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/bezier.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/general.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/index.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/simple-bezier.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/smoothstep.ts (100%) rename packages/{vue-flow => core}/src/components/Edges/utils/straight.ts (100%) rename packages/{vue-flow => core}/src/components/Handle/Handle.vue (100%) rename packages/{vue-flow => core}/src/components/Nodes/DefaultNode.ts (100%) rename packages/{vue-flow => core}/src/components/Nodes/InputNode.ts (100%) rename packages/{vue-flow => core}/src/components/Nodes/NodeWrapper.vue (100%) rename packages/{vue-flow => core}/src/components/Nodes/OutputNode.ts (100%) rename packages/{vue-flow => core}/src/components/Nodes/index.ts (100%) rename packages/{vue-flow => core}/src/components/NodesSelection/NodesSelection.vue (100%) rename packages/{vue-flow => core}/src/components/UserSelection/SelectionRect.vue (100%) rename packages/{vue-flow => core}/src/components/UserSelection/UserSelection.vue (100%) rename packages/{vue-flow => core}/src/components/UserSelection/utils.ts (100%) rename packages/{vue-flow => core}/src/components/index.ts (100%) rename packages/{vue-flow => core}/src/composables/index.ts (100%) rename packages/{vue-flow => core}/src/composables/useDrag.ts (100%) rename packages/{vue-flow => core}/src/composables/useEdge.ts (100%) rename packages/{vue-flow => core}/src/composables/useEdgeHooks.ts (100%) rename packages/{vue-flow => core}/src/composables/useHandle.ts (100%) rename packages/{vue-flow => core}/src/composables/useKeyPress.ts (100%) rename packages/{vue-flow => core}/src/composables/useNode.ts (100%) rename packages/{vue-flow => core}/src/composables/useNodeHooks.ts (100%) rename packages/{vue-flow => core}/src/composables/useVueFlow.ts (100%) rename packages/{vue-flow => core}/src/composables/useWindow.ts (100%) rename packages/{vue-flow => core}/src/composables/useZoomPanHelper.ts (100%) rename packages/{vue-flow => core}/src/container/EdgeRenderer/EdgeRenderer.vue (100%) rename packages/{vue-flow => core}/src/container/EdgeRenderer/Marker.vue (100%) rename packages/{vue-flow => core}/src/container/EdgeRenderer/MarkerDefinitions.vue (100%) rename packages/{vue-flow => core}/src/container/NodeRenderer/NodeRenderer.vue (100%) rename packages/{vue-flow => core}/src/container/SelectionPane/SelectionPane.vue (100%) rename packages/{vue-flow => core}/src/container/Viewport/Transform.vue (100%) rename packages/{vue-flow => core}/src/container/Viewport/Viewport.vue (100%) rename packages/{vue-flow => core}/src/container/VueFlow/VueFlow.vue (100%) rename packages/{vue-flow => core}/src/container/VueFlow/watch.ts (100%) rename packages/{vue-flow => core}/src/container/index.ts (100%) rename packages/{vue-flow => core}/src/context/index.ts (100%) rename packages/{vue-flow => core}/src/custom.d.ts (100%) rename packages/{vue-flow => core}/src/env.d.ts (100%) create mode 100644 packages/core/src/index.ts rename packages/{vue-flow => core}/src/store/actions.ts (100%) rename packages/{vue-flow => core}/src/store/getters.ts (100%) rename packages/{vue-flow => core}/src/store/hooks.ts (100%) rename packages/{vue-flow => core}/src/store/index.ts (100%) rename packages/{vue-flow => core}/src/store/state.ts (100%) create mode 100644 packages/core/src/style.css create mode 100644 packages/core/src/theme-default.css rename packages/{vue-flow => core}/src/types/changes.ts (100%) rename packages/{vue-flow => core}/src/types/components.ts (100%) rename packages/{vue-flow => core}/src/types/connection.ts (100%) rename packages/{vue-flow => core}/src/types/edge.ts (100%) rename packages/{vue-flow => core}/src/types/flow.ts (100%) rename packages/{vue-flow => core}/src/types/handle.ts (100%) rename packages/{vue-flow => core}/src/types/hooks.ts (100%) rename packages/{vue-flow => core}/src/types/index.ts (100%) rename packages/{vue-flow => core}/src/types/node.ts (100%) rename packages/{vue-flow => core}/src/types/store.ts (100%) rename packages/{vue-flow => core}/src/types/zoom.ts (100%) rename packages/{vue-flow => core}/src/utils/changes.ts (100%) rename packages/{vue-flow => core}/src/utils/drag.ts (100%) rename packages/{vue-flow => core}/src/utils/edge.ts (100%) rename packages/{vue-flow => core}/src/utils/graph.ts (100%) rename packages/{vue-flow => core}/src/utils/index.ts (100%) rename packages/{vue-flow => core}/src/utils/node.ts (100%) rename packages/{vue-flow => core}/src/utils/store.ts (100%) rename packages/{vue-flow => core}/tsconfig.build.json (100%) create mode 100644 packages/core/tsconfig.json create mode 100644 packages/core/tsconfig.node.json create mode 100644 packages/core/vite.config.ts diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js new file mode 100644 index 00000000..4bfcfc91 --- /dev/null +++ b/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: ['!**/*'], +} diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md new file mode 100644 index 00000000..7e205d23 --- /dev/null +++ b/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' + ``` diff --git a/packages/core/package.json b/packages/core/package.json new file mode 100644 index 00000000..040cec17 --- /dev/null +++ b/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" + } +} diff --git a/packages/core/postcss.config.js b/packages/core/postcss.config.js new file mode 100644 index 00000000..1f15b1cf --- /dev/null +++ b/packages/core/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require('autoprefixer'), require('postcss-nested')], +} diff --git a/packages/vue-flow/src/auto-imports.d.ts b/packages/core/src/auto-imports.d.ts similarity index 100% rename from packages/vue-flow/src/auto-imports.d.ts rename to packages/core/src/auto-imports.d.ts diff --git a/packages/vue-flow/src/components/ConnectionLine/ConnectionLine.vue b/packages/core/src/components/ConnectionLine/ConnectionLine.vue similarity index 100% rename from packages/vue-flow/src/components/ConnectionLine/ConnectionLine.vue rename to packages/core/src/components/ConnectionLine/ConnectionLine.vue diff --git a/packages/vue-flow/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/BaseEdge.ts rename to packages/core/src/components/Edges/BaseEdge.ts diff --git a/packages/vue-flow/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/BezierEdge.ts rename to packages/core/src/components/Edges/BezierEdge.ts diff --git a/packages/vue-flow/src/components/Edges/EdgeAnchor.ts b/packages/core/src/components/Edges/EdgeAnchor.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/EdgeAnchor.ts rename to packages/core/src/components/Edges/EdgeAnchor.ts diff --git a/packages/vue-flow/src/components/Edges/EdgeText.vue b/packages/core/src/components/Edges/EdgeText.vue similarity index 100% rename from packages/vue-flow/src/components/Edges/EdgeText.vue rename to packages/core/src/components/Edges/EdgeText.vue diff --git a/packages/vue-flow/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/SimpleBezierEdge.ts rename to packages/core/src/components/Edges/SimpleBezierEdge.ts diff --git a/packages/vue-flow/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/SmoothStepEdge.ts rename to packages/core/src/components/Edges/SmoothStepEdge.ts diff --git a/packages/vue-flow/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/StepEdge.ts rename to packages/core/src/components/Edges/StepEdge.ts diff --git a/packages/vue-flow/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/StraightEdge.ts rename to packages/core/src/components/Edges/StraightEdge.ts diff --git a/packages/vue-flow/src/components/Edges/Wrapper.ts b/packages/core/src/components/Edges/Wrapper.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/Wrapper.ts rename to packages/core/src/components/Edges/Wrapper.ts diff --git a/packages/vue-flow/src/components/Edges/index.ts b/packages/core/src/components/Edges/index.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/index.ts rename to packages/core/src/components/Edges/index.ts diff --git a/packages/vue-flow/src/components/Edges/utils/bezier.ts b/packages/core/src/components/Edges/utils/bezier.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/bezier.ts rename to packages/core/src/components/Edges/utils/bezier.ts diff --git a/packages/vue-flow/src/components/Edges/utils/general.ts b/packages/core/src/components/Edges/utils/general.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/general.ts rename to packages/core/src/components/Edges/utils/general.ts diff --git a/packages/vue-flow/src/components/Edges/utils/index.ts b/packages/core/src/components/Edges/utils/index.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/index.ts rename to packages/core/src/components/Edges/utils/index.ts diff --git a/packages/vue-flow/src/components/Edges/utils/simple-bezier.ts b/packages/core/src/components/Edges/utils/simple-bezier.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/simple-bezier.ts rename to packages/core/src/components/Edges/utils/simple-bezier.ts diff --git a/packages/vue-flow/src/components/Edges/utils/smoothstep.ts b/packages/core/src/components/Edges/utils/smoothstep.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/smoothstep.ts rename to packages/core/src/components/Edges/utils/smoothstep.ts diff --git a/packages/vue-flow/src/components/Edges/utils/straight.ts b/packages/core/src/components/Edges/utils/straight.ts similarity index 100% rename from packages/vue-flow/src/components/Edges/utils/straight.ts rename to packages/core/src/components/Edges/utils/straight.ts diff --git a/packages/vue-flow/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue similarity index 100% rename from packages/vue-flow/src/components/Handle/Handle.vue rename to packages/core/src/components/Handle/Handle.vue diff --git a/packages/vue-flow/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts similarity index 100% rename from packages/vue-flow/src/components/Nodes/DefaultNode.ts rename to packages/core/src/components/Nodes/DefaultNode.ts diff --git a/packages/vue-flow/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts similarity index 100% rename from packages/vue-flow/src/components/Nodes/InputNode.ts rename to packages/core/src/components/Nodes/InputNode.ts diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue similarity index 100% rename from packages/vue-flow/src/components/Nodes/NodeWrapper.vue rename to packages/core/src/components/Nodes/NodeWrapper.vue diff --git a/packages/vue-flow/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts similarity index 100% rename from packages/vue-flow/src/components/Nodes/OutputNode.ts rename to packages/core/src/components/Nodes/OutputNode.ts diff --git a/packages/vue-flow/src/components/Nodes/index.ts b/packages/core/src/components/Nodes/index.ts similarity index 100% rename from packages/vue-flow/src/components/Nodes/index.ts rename to packages/core/src/components/Nodes/index.ts diff --git a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue similarity index 100% rename from packages/vue-flow/src/components/NodesSelection/NodesSelection.vue rename to packages/core/src/components/NodesSelection/NodesSelection.vue diff --git a/packages/vue-flow/src/components/UserSelection/SelectionRect.vue b/packages/core/src/components/UserSelection/SelectionRect.vue similarity index 100% rename from packages/vue-flow/src/components/UserSelection/SelectionRect.vue rename to packages/core/src/components/UserSelection/SelectionRect.vue diff --git a/packages/vue-flow/src/components/UserSelection/UserSelection.vue b/packages/core/src/components/UserSelection/UserSelection.vue similarity index 100% rename from packages/vue-flow/src/components/UserSelection/UserSelection.vue rename to packages/core/src/components/UserSelection/UserSelection.vue diff --git a/packages/vue-flow/src/components/UserSelection/utils.ts b/packages/core/src/components/UserSelection/utils.ts similarity index 100% rename from packages/vue-flow/src/components/UserSelection/utils.ts rename to packages/core/src/components/UserSelection/utils.ts diff --git a/packages/vue-flow/src/components/index.ts b/packages/core/src/components/index.ts similarity index 100% rename from packages/vue-flow/src/components/index.ts rename to packages/core/src/components/index.ts diff --git a/packages/vue-flow/src/composables/index.ts b/packages/core/src/composables/index.ts similarity index 100% rename from packages/vue-flow/src/composables/index.ts rename to packages/core/src/composables/index.ts diff --git a/packages/vue-flow/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts similarity index 100% rename from packages/vue-flow/src/composables/useDrag.ts rename to packages/core/src/composables/useDrag.ts diff --git a/packages/vue-flow/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts similarity index 100% rename from packages/vue-flow/src/composables/useEdge.ts rename to packages/core/src/composables/useEdge.ts diff --git a/packages/vue-flow/src/composables/useEdgeHooks.ts b/packages/core/src/composables/useEdgeHooks.ts similarity index 100% rename from packages/vue-flow/src/composables/useEdgeHooks.ts rename to packages/core/src/composables/useEdgeHooks.ts diff --git a/packages/vue-flow/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts similarity index 100% rename from packages/vue-flow/src/composables/useHandle.ts rename to packages/core/src/composables/useHandle.ts diff --git a/packages/vue-flow/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts similarity index 100% rename from packages/vue-flow/src/composables/useKeyPress.ts rename to packages/core/src/composables/useKeyPress.ts diff --git a/packages/vue-flow/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts similarity index 100% rename from packages/vue-flow/src/composables/useNode.ts rename to packages/core/src/composables/useNode.ts diff --git a/packages/vue-flow/src/composables/useNodeHooks.ts b/packages/core/src/composables/useNodeHooks.ts similarity index 100% rename from packages/vue-flow/src/composables/useNodeHooks.ts rename to packages/core/src/composables/useNodeHooks.ts diff --git a/packages/vue-flow/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts similarity index 100% rename from packages/vue-flow/src/composables/useVueFlow.ts rename to packages/core/src/composables/useVueFlow.ts diff --git a/packages/vue-flow/src/composables/useWindow.ts b/packages/core/src/composables/useWindow.ts similarity index 100% rename from packages/vue-flow/src/composables/useWindow.ts rename to packages/core/src/composables/useWindow.ts diff --git a/packages/vue-flow/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts similarity index 100% rename from packages/vue-flow/src/composables/useZoomPanHelper.ts rename to packages/core/src/composables/useZoomPanHelper.ts diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue similarity index 100% rename from packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue rename to packages/core/src/container/EdgeRenderer/EdgeRenderer.vue diff --git a/packages/vue-flow/src/container/EdgeRenderer/Marker.vue b/packages/core/src/container/EdgeRenderer/Marker.vue similarity index 100% rename from packages/vue-flow/src/container/EdgeRenderer/Marker.vue rename to packages/core/src/container/EdgeRenderer/Marker.vue diff --git a/packages/vue-flow/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue similarity index 100% rename from packages/vue-flow/src/container/EdgeRenderer/MarkerDefinitions.vue rename to packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue diff --git a/packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue b/packages/core/src/container/NodeRenderer/NodeRenderer.vue similarity index 100% rename from packages/vue-flow/src/container/NodeRenderer/NodeRenderer.vue rename to packages/core/src/container/NodeRenderer/NodeRenderer.vue diff --git a/packages/vue-flow/src/container/SelectionPane/SelectionPane.vue b/packages/core/src/container/SelectionPane/SelectionPane.vue similarity index 100% rename from packages/vue-flow/src/container/SelectionPane/SelectionPane.vue rename to packages/core/src/container/SelectionPane/SelectionPane.vue diff --git a/packages/vue-flow/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue similarity index 100% rename from packages/vue-flow/src/container/Viewport/Transform.vue rename to packages/core/src/container/Viewport/Transform.vue diff --git a/packages/vue-flow/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue similarity index 100% rename from packages/vue-flow/src/container/Viewport/Viewport.vue rename to packages/core/src/container/Viewport/Viewport.vue diff --git a/packages/vue-flow/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue similarity index 100% rename from packages/vue-flow/src/container/VueFlow/VueFlow.vue rename to packages/core/src/container/VueFlow/VueFlow.vue diff --git a/packages/vue-flow/src/container/VueFlow/watch.ts b/packages/core/src/container/VueFlow/watch.ts similarity index 100% rename from packages/vue-flow/src/container/VueFlow/watch.ts rename to packages/core/src/container/VueFlow/watch.ts diff --git a/packages/vue-flow/src/container/index.ts b/packages/core/src/container/index.ts similarity index 100% rename from packages/vue-flow/src/container/index.ts rename to packages/core/src/container/index.ts diff --git a/packages/vue-flow/src/context/index.ts b/packages/core/src/context/index.ts similarity index 100% rename from packages/vue-flow/src/context/index.ts rename to packages/core/src/context/index.ts diff --git a/packages/vue-flow/src/custom.d.ts b/packages/core/src/custom.d.ts similarity index 100% rename from packages/vue-flow/src/custom.d.ts rename to packages/core/src/custom.d.ts diff --git a/packages/vue-flow/src/env.d.ts b/packages/core/src/env.d.ts similarity index 100% rename from packages/vue-flow/src/env.d.ts rename to packages/core/src/env.d.ts diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts new file mode 100644 index 00000000..3bfbe49e --- /dev/null +++ b/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' diff --git a/packages/vue-flow/src/store/actions.ts b/packages/core/src/store/actions.ts similarity index 100% rename from packages/vue-flow/src/store/actions.ts rename to packages/core/src/store/actions.ts diff --git a/packages/vue-flow/src/store/getters.ts b/packages/core/src/store/getters.ts similarity index 100% rename from packages/vue-flow/src/store/getters.ts rename to packages/core/src/store/getters.ts diff --git a/packages/vue-flow/src/store/hooks.ts b/packages/core/src/store/hooks.ts similarity index 100% rename from packages/vue-flow/src/store/hooks.ts rename to packages/core/src/store/hooks.ts diff --git a/packages/vue-flow/src/store/index.ts b/packages/core/src/store/index.ts similarity index 100% rename from packages/vue-flow/src/store/index.ts rename to packages/core/src/store/index.ts diff --git a/packages/vue-flow/src/store/state.ts b/packages/core/src/store/state.ts similarity index 100% rename from packages/vue-flow/src/store/state.ts rename to packages/core/src/store/state.ts diff --git a/packages/core/src/style.css b/packages/core/src/style.css new file mode 100644 index 00000000..01afacc1 --- /dev/null +++ b/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; +} diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css new file mode 100644 index 00000000..b70ba9d6 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/vue-flow/src/types/changes.ts b/packages/core/src/types/changes.ts similarity index 100% rename from packages/vue-flow/src/types/changes.ts rename to packages/core/src/types/changes.ts diff --git a/packages/vue-flow/src/types/components.ts b/packages/core/src/types/components.ts similarity index 100% rename from packages/vue-flow/src/types/components.ts rename to packages/core/src/types/components.ts diff --git a/packages/vue-flow/src/types/connection.ts b/packages/core/src/types/connection.ts similarity index 100% rename from packages/vue-flow/src/types/connection.ts rename to packages/core/src/types/connection.ts diff --git a/packages/vue-flow/src/types/edge.ts b/packages/core/src/types/edge.ts similarity index 100% rename from packages/vue-flow/src/types/edge.ts rename to packages/core/src/types/edge.ts diff --git a/packages/vue-flow/src/types/flow.ts b/packages/core/src/types/flow.ts similarity index 100% rename from packages/vue-flow/src/types/flow.ts rename to packages/core/src/types/flow.ts diff --git a/packages/vue-flow/src/types/handle.ts b/packages/core/src/types/handle.ts similarity index 100% rename from packages/vue-flow/src/types/handle.ts rename to packages/core/src/types/handle.ts diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/core/src/types/hooks.ts similarity index 100% rename from packages/vue-flow/src/types/hooks.ts rename to packages/core/src/types/hooks.ts diff --git a/packages/vue-flow/src/types/index.ts b/packages/core/src/types/index.ts similarity index 100% rename from packages/vue-flow/src/types/index.ts rename to packages/core/src/types/index.ts diff --git a/packages/vue-flow/src/types/node.ts b/packages/core/src/types/node.ts similarity index 100% rename from packages/vue-flow/src/types/node.ts rename to packages/core/src/types/node.ts diff --git a/packages/vue-flow/src/types/store.ts b/packages/core/src/types/store.ts similarity index 100% rename from packages/vue-flow/src/types/store.ts rename to packages/core/src/types/store.ts diff --git a/packages/vue-flow/src/types/zoom.ts b/packages/core/src/types/zoom.ts similarity index 100% rename from packages/vue-flow/src/types/zoom.ts rename to packages/core/src/types/zoom.ts diff --git a/packages/vue-flow/src/utils/changes.ts b/packages/core/src/utils/changes.ts similarity index 100% rename from packages/vue-flow/src/utils/changes.ts rename to packages/core/src/utils/changes.ts diff --git a/packages/vue-flow/src/utils/drag.ts b/packages/core/src/utils/drag.ts similarity index 100% rename from packages/vue-flow/src/utils/drag.ts rename to packages/core/src/utils/drag.ts diff --git a/packages/vue-flow/src/utils/edge.ts b/packages/core/src/utils/edge.ts similarity index 100% rename from packages/vue-flow/src/utils/edge.ts rename to packages/core/src/utils/edge.ts diff --git a/packages/vue-flow/src/utils/graph.ts b/packages/core/src/utils/graph.ts similarity index 100% rename from packages/vue-flow/src/utils/graph.ts rename to packages/core/src/utils/graph.ts diff --git a/packages/vue-flow/src/utils/index.ts b/packages/core/src/utils/index.ts similarity index 100% rename from packages/vue-flow/src/utils/index.ts rename to packages/core/src/utils/index.ts diff --git a/packages/vue-flow/src/utils/node.ts b/packages/core/src/utils/node.ts similarity index 100% rename from packages/vue-flow/src/utils/node.ts rename to packages/core/src/utils/node.ts diff --git a/packages/vue-flow/src/utils/store.ts b/packages/core/src/utils/store.ts similarity index 100% rename from packages/vue-flow/src/utils/store.ts rename to packages/core/src/utils/store.ts diff --git a/packages/vue-flow/tsconfig.build.json b/packages/core/tsconfig.build.json similarity index 100% rename from packages/vue-flow/tsconfig.build.json rename to packages/core/tsconfig.build.json diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json new file mode 100644 index 00000000..a3e5043f --- /dev/null +++ b/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" }] +} diff --git a/packages/core/tsconfig.node.json b/packages/core/tsconfig.node.json new file mode 100644 index 00000000..6dacac71 --- /dev/null +++ b/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"] +} diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts new file mode 100644 index 00000000..c69c0894 --- /dev/null +++ b/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'], + }, +})