From a55f39ba250cee7adce3e1ca99b98ed60f278541 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 13 Dec 2022 14:31:09 +0100 Subject: [PATCH] refactor(controls): move controls into separate package Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- packages/controls/.eslintrc.js | 8 ++ packages/controls/README.md | 39 +++++++++ packages/controls/package.json | 49 ++++++++++++ packages/controls/src/ControlButton.vue | 11 +++ packages/controls/src/Controls.vue | 100 ++++++++++++++++++++++++ packages/controls/src/icons/fitview.svg | 3 + packages/controls/src/icons/lock.svg | 3 + packages/controls/src/icons/minus.svg | 3 + packages/controls/src/icons/plus.svg | 3 + packages/controls/src/icons/unlock.svg | 3 + packages/controls/src/index.ts | 5 ++ packages/controls/src/style.css | 27 +++++++ packages/controls/src/types.ts | 15 ++++ packages/controls/tsconfig.json | 31 ++++++++ packages/controls/vite.config.ts | 45 +++++++++++ packages/core/src/theme-default.css | 28 ------- pnpm-lock.yaml | 31 +------- 17 files changed, 348 insertions(+), 56 deletions(-) create mode 100644 packages/controls/.eslintrc.js create mode 100644 packages/controls/README.md create mode 100644 packages/controls/package.json create mode 100644 packages/controls/src/ControlButton.vue create mode 100644 packages/controls/src/Controls.vue create mode 100644 packages/controls/src/icons/fitview.svg create mode 100644 packages/controls/src/icons/lock.svg create mode 100644 packages/controls/src/icons/minus.svg create mode 100644 packages/controls/src/icons/plus.svg create mode 100644 packages/controls/src/icons/unlock.svg create mode 100644 packages/controls/src/index.ts create mode 100644 packages/controls/src/style.css create mode 100644 packages/controls/src/types.ts create mode 100644 packages/controls/tsconfig.json create mode 100644 packages/controls/vite.config.ts diff --git a/packages/controls/.eslintrc.js b/packages/controls/.eslintrc.js new file mode 100644 index 00000000..98c0e4cb --- /dev/null +++ b/packages/controls/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + rules: { + 'no-use-before-define': 0, + 'vue/no-setup-props-destructure': 0, + }, + extends: ['../../.eslintrc.js'], + ignorePatterns: ['!**/*'], +} diff --git a/packages/controls/README.md b/packages/controls/README.md new file mode 100644 index 00000000..27c22949 --- /dev/null +++ b/packages/controls/README.md @@ -0,0 +1,39 @@ +# Vue Flow: Toolbar Component + +This is a control component for Vue Flow. +It can be used to control the canvas interactions, like zooming in, zooming out, fitting the view and locking interactions. + +## 🛠 Setup + +```bash +# install +$ yarn add @vue-flow/controls + +# or +$ npm i --save @vue-flow/controls +``` + +## 🎮 Quickstart + +```vue + + + + +``` diff --git a/packages/controls/package.json b/packages/controls/package.json new file mode 100644 index 00000000..0f699229 --- /dev/null +++ b/packages/controls/package.json @@ -0,0 +1,49 @@ +{ + "name": "@vue-flow/controls", + "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/packages/plugins/controls" + }, + "homepage": "https://github.com/bcakmakoglu/vue-flow#readme", + "bugs": { + "url": "https://github.com/bcakmakoglu/vue-flow/issues" + }, + "main": "./dist/vue-flow-plugin-controls.js", + "module": "./dist/vue-flow-controls.mjs", + "types": "./dist/index.d.ts", + "unpkg": "./dist/vue-flow-controls.iife.js", + "jsdelivr": "./dist/vue-flow-controls.iife.js", + "files": [ + "dist" + ], + "sideEffects": false, + "scripts": { + "build": "vite build", + "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist", + "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path ../../.gitignore .", + "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix ./dist", + "test": "exit 0" + }, + "peerDependencies": { + "@vue-flow/core": "^1.0.0", + "vue": "^3.2.37" + }, + "dependencies": {}, + "devDependencies": { + "@vue-flow/core": "workspace:*", + "@vitejs/plugin-vue": "^3.2.0", + "unplugin-auto-import": "^0.12.0", + "vite": "^3.2.5", + "vite-plugin-vue-type-imports": "0.2.0", + "vite-svg-loader": "^3.6.0", + "vue-tsc": "^1.0.11" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + } +} diff --git a/packages/controls/src/ControlButton.vue b/packages/controls/src/ControlButton.vue new file mode 100644 index 00000000..6c074f57 --- /dev/null +++ b/packages/controls/src/ControlButton.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/controls/src/Controls.vue b/packages/controls/src/Controls.vue new file mode 100644 index 00000000..a85ccdb1 --- /dev/null +++ b/packages/controls/src/Controls.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/packages/controls/src/icons/fitview.svg b/packages/controls/src/icons/fitview.svg new file mode 100644 index 00000000..4eb9cb67 --- /dev/null +++ b/packages/controls/src/icons/fitview.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/controls/src/icons/lock.svg b/packages/controls/src/icons/lock.svg new file mode 100644 index 00000000..d2168323 --- /dev/null +++ b/packages/controls/src/icons/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/controls/src/icons/minus.svg b/packages/controls/src/icons/minus.svg new file mode 100644 index 00000000..11d9aa5c --- /dev/null +++ b/packages/controls/src/icons/minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/controls/src/icons/plus.svg b/packages/controls/src/icons/plus.svg new file mode 100644 index 00000000..8cd8b1af --- /dev/null +++ b/packages/controls/src/icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/controls/src/icons/unlock.svg b/packages/controls/src/icons/unlock.svg new file mode 100644 index 00000000..b9e13ba0 --- /dev/null +++ b/packages/controls/src/icons/unlock.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/controls/src/index.ts b/packages/controls/src/index.ts new file mode 100644 index 00000000..1f92758f --- /dev/null +++ b/packages/controls/src/index.ts @@ -0,0 +1,5 @@ +import './style.css' +export { default as Controls } from './Controls.vue' +export { default as ControlButton } from './ControlButton.vue' + +export * from './types' diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css new file mode 100644 index 00000000..279592cb --- /dev/null +++ b/packages/controls/src/style.css @@ -0,0 +1,27 @@ +.vue-flow__controls { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); +} + +.vue-flow__controls-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; +} + +.vue-flow__controls-button svg { + max-width: 12px; + max-height: 12px; + overflow: visible; +} + +.vue-flow__controls-button:hover { + background: #f4f4f4; +} diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts new file mode 100644 index 00000000..bb5bedb1 --- /dev/null +++ b/packages/controls/src/types.ts @@ -0,0 +1,15 @@ +import type { FitViewParams } from '@vue-flow/core' +import type { PanelPosition } from '../panel' + +export interface ControlProps { + /** Show the zoom icon */ + showZoom?: boolean + /** Show the fit-view icon */ + showFitView?: boolean + /** Show the interactive icon */ + showInteractive?: boolean + /** Params to use on fitView */ + fitViewParams?: FitViewParams + /** Position of the controls {@link PanelPosition} */ + position?: PanelPosition +} diff --git a/packages/controls/tsconfig.json b/packages/controls/tsconfig.json new file mode 100644 index 00000000..e9fd0ac1 --- /dev/null +++ b/packages/controls/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "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", + "emitDeclarationOnly": true, + "types": [], + }, + "include": [ + "./src", + ], + "exclude": [ + "node_modules", + "dist" + ] +} diff --git a/packages/controls/vite.config.ts b/packages/controls/vite.config.ts new file mode 100644 index 00000000..af5939fe --- /dev/null +++ b/packages/controls/vite.config.ts @@ -0,0 +1,45 @@ +import { resolve } from 'path' +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import AutoImport from 'unplugin-auto-import/vite' +import vueTypes from 'vite-plugin-vue-type-imports' + +// https://vitejs.dev/config/ +export default defineConfig({ + resolve: { + extensions: ['.ts', '.vue'], + }, + build: { + emptyOutDir: false, + lib: { + formats: ['es', 'cjs', 'iife'], + entry: resolve(__dirname, 'src/index.ts'), + fileName: 'vue-flow-controls', + name: 'vueFlowControls', + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: ['vue', '@vue-flow/core'], + output: { + dir: './dist', + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + 'vue': 'Vue', + '@vue-flow/core': 'VueFlow', + }, + }, + }, + }, + plugins: [ + vue({ + reactivityTransform: true, + }), + vueTypes(), + AutoImport({ + imports: ['vue', 'vue/macros'], + dts: 'src/auto-imports.d.ts', + }), + ], +}) diff --git a/packages/core/src/theme-default.css b/packages/core/src/theme-default.css index c432d980..23d8bd7a 100644 --- a/packages/core/src/theme-default.css +++ b/packages/core/src/theme-default.css @@ -103,31 +103,3 @@ border: 1px solid #fff; border-radius: 100%; } - -.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; - overflow: visible; - } - - &:hover { - background: #f4f4f4; - } - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17530db8..78c47ea5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -200,13 +200,14 @@ importers: vite-svg-loader: 3.6.0 vue-tsc: 1.0.11_typescript@4.8.4 - packages/background: + packages/controls: specifiers: '@vitejs/plugin-vue': ^3.2.0 '@vue-flow/core': workspace:* unplugin-auto-import: ^0.12.0 vite: ^3.2.5 vite-plugin-vue-type-imports: 0.2.0 + vite-svg-loader: ^3.6.0 vue: ^3.2.37 vue-tsc: ^1.0.11 dependencies: @@ -217,6 +218,7 @@ importers: unplugin-auto-import: 0.12.0 vite: 3.2.5 vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom + vite-svg-loader: 3.6.0 vue-tsc: 1.0.11_typescript@4.8.4 packages/core: @@ -262,33 +264,6 @@ importers: vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom vue-tsc: 1.0.11_typescript@4.8.4 - packages/minimap: - specifiers: - '@types/d3-selection': ^3.0.3 - '@types/d3-zoom': ^3.0.1 - '@vitejs/plugin-vue': ^3.2.0 - '@vue-flow/core': workspace:* - d3-selection: ^3.0.0 - d3-zoom: ^3.0.0 - unplugin-auto-import: ^0.12.0 - vite: ^3.2.5 - vite-plugin-vue-type-imports: 0.2.0 - vue: ^3.2.37 - vue-tsc: ^1.0.11 - dependencies: - d3-selection: 3.0.0 - d3-zoom: 3.0.0 - vue: 3.2.40 - devDependencies: - '@types/d3-selection': 3.0.3 - '@types/d3-zoom': 3.0.1 - '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.40 - '@vue-flow/core': link:../core - unplugin-auto-import: 0.12.0 - vite: 3.2.5 - vite-plugin-vue-type-imports: 0.2.0_ek75d3noihdfv6qzog663yntom - vue-tsc: 1.0.11_typescript@4.8.4 - packages/node-toolbar: specifiers: '@vitejs/plugin-vue': ^3.2.0