refactor(controls): move controls into separate package

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2022-12-13 14:55:14 +01:00
parent 2eaf9e4340
commit a55f39ba25
17 changed files with 348 additions and 56 deletions
@@ -0,0 +1,11 @@
+<script lang="ts">
+export default {
+  name: 'ControlButton',
+}
+</script>
+
+<template>
+  <button class="vue-flow__controls-button">
+    <slot></slot>
+  </button>
+</template>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
+  <path d="M0 0h32v4.2H0z"/>
+</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>
@@ -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>
@@ -0,0 +1,5 @@
+import './style.css'
+export { default as Controls } from './Controls.vue'
+export { default as ControlButton } from './ControlButton.vue'
+
+export * from './types'
@@ -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;
+}
@@ -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
+}