refactor(controls): move controls into separate package

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

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: ['!**/*'],
+}

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
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+
+// import the default styles
+import '@vue-flow/controls/dist/style.css'
+
+import initialElements from './initial-elements'
+
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+
+<template>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+    <Controls />
+  </VueFlow>
+</template>
+```

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/"
+  }
+}

packages/controls/src/ControlButton.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+export default {
+  name: 'ControlButton',
+}
+</script>
+
+<template>
+  <button class="vue-flow__controls-button">
+    <slot></slot>
+  </button>
+</template>

packages/controls/src/Controls.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { Panel, useVueFlow } from '@vue-flow/core'
+import type { PanelPosition } from '@vue-flow/core'
+import type { ControlProps } from './types'
+import ControlButton from './ControlButton.vue'
+import PlusIcon from './icons/plus.svg'
+import MinusIcon from './icons/minus.svg'
+import FitView from './icons/fitview.svg'
+import Lock from './icons/lock.svg'
+import Unlock from './icons/unlock.svg'
+
+const {
+  showZoom = true,
+  showFitView = true,
+  showInteractive = true,
+  fitViewParams,
+  position = 'bottom-left' as PanelPosition,
+} = defineProps<ControlProps>()
+
+const emit = defineEmits<{
+  (event: 'zoomIn'): void
+  (event: 'zoomOut'): void
+  (event: 'fitView'): void
+  (event: 'interactionChange', active: boolean): void
+}>()
+
+const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = $(useVueFlow())
+
+const isInteractive = computed(() => nodesDraggable && nodesConnectable && elementsSelectable)
+
+const onZoomInHandler = () => {
+  zoomIn()
+  emit('zoomIn')
+}
+
+const onZoomOutHandler = () => {
+  zoomOut()
+  emit('zoomOut')
+}
+
+const onFitViewHandler = () => {
+  fitView(fitViewParams)
+  emit('fitView')
+}
+
+const onInteractiveChangeHandler = () => {
+  setInteractive(!isInteractive.value)
+  emit('interactionChange', !isInteractive.value)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Controls',
+}
+</script>
+
+<template>
+  <Panel class="vue-flow__controls" :position="position">
+    <slot name="top"></slot>
+    <template v-if="showZoom">
+      <slot name="control-zoom-in">
+        <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
+          <slot name="icon-zoom-in">
+            <component :is="PlusIcon" />
+          </slot>
+        </ControlButton>
+      </slot>
+      <slot name="control-zoom-out">
+        <ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
+          <slot name="icon-zoom-out">
+            <component :is="MinusIcon" />
+          </slot>
+        </ControlButton>
+      </slot>
+    </template>
+    <template v-if="showFitView">
+      <slot name="control-fit-view">
+        <ControlButton class="vue-flow__controls-fitview" @click="onFitViewHandler">
+          <slot name="icon-fit-view">
+            <component :is="FitView" />
+          </slot>
+        </ControlButton>
+      </slot>
+    </template>
+    <template v-if="showInteractive">
+      <slot name="control-interactive">
+        <ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+          <slot v-if="isInteractive" name="icon-unlock">
+            <component :is="Unlock" />
+          </slot>
+          <slot v-if="!isInteractive" name="icon-lock">
+            <component :is="Lock" />
+          </slot>
+        </ControlButton>
+      </slot>
+    </template>
+    <slot></slot>
+  </Panel>
+</template>

packages/controls/src/icons/fitview.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
+  <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+</svg>

packages/controls/src/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+</svg>

packages/controls/src/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
+  <path d="M0 0h32v4.2H0z"/>
+</svg>

packages/controls/src/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
+</svg>

packages/controls/src/icons/unlock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+</svg>

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'

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;
+}

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
+}

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"
+  ]
+}

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',
+    }),
+  ],
+})

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;
-    }
-  }
-}

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