feat: implement workspaces

2022-04-04 21:42:48 +02:00
parent cc96739c38
commit cd817b7f53
153 changed files with 8970 additions and 1191 deletions
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { BackgroundVariant } from '../../types'
+import { useVueFlow } from '../../composables'
+import type { BackgroundProps } from '../../types/components'
+
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant: 'dots' as BackgroundVariant,
+  gap: 10,
+  size: 0.4,
+  height: 100,
+  width: 100,
+  x: 0,
+  y: 0,
+})
+
+const defaultColors: Record<BackgroundVariant, string> = {
+  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Lines]: '#eee',
+}
+
+const { store } = useVueFlow()
+
+const background = computed(() => {
+  const scaledGap = props.gap && props.gap * store.transform[2]
+  const xOffset = scaledGap && store.transform[0] % scaledGap
+  const yOffset = scaledGap && store.transform[1] % scaledGap
+  const size = props.size || 0.4 * store.transform[2]
+
+  return {
+    scaledGap,
+    xOffset,
+    yOffset,
+    size,
+  }
+})
+
+// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
+const patternColor = computed(() =>
+  props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
+)
+const d = computed(
+  () =>
+    `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
+      background.value.scaledGap
+    }`,
+)
+</script>
+<script lang="ts">
+export default {
+  name: 'Background',
+}
+</script>
+<template>
+  <svg
+    class="vue-flow__background"
+    :style="{
+      height: `${props.height > 100 ? 100 : props.height}%`,
+      width: `${props.width > 100 ? 100 : props.width}%`,
+    }"
+  >
+    <pattern
+      :id="patternId"
+      :x="background.xOffset"
+      :y="background.yOffset"
+      :width="background.scaledGap"
+      :height="background.scaledGap"
+      patternUnits="userSpaceOnUse"
+    >
+      <template v-if="props.variant === BackgroundVariant.Lines">
+        <path :stroke="patternColor" :stroke-width="props.size" :d="d" />
+      </template>
+      <template v-else-if="props.variant === BackgroundVariant.Dots">
+        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
+      </template>
+      <svg v-if="props.bgColor" height="100" width="100">
+        <rect width="100%" height="100%" :fill="props.bgColor" />
+      </svg>
+    </pattern>
+    <rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" />
+    <slot></slot>
+  </svg>
+</template>
@@ -0,0 +1,10 @@
+<script lang="ts">
+export default {
+  name: 'ControlButton',
+}
+</script>
+<template>
+  <button class="vue-flow__controls-button">
+    <slot></slot>
+  </button>
+</template>
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { useZoomPanHelper, useVueFlow } from '../../composables'
+import type { ControlProps, ControlEvents } from '../../types/components'
+import ControlButton from './ControlButton.vue'
+import PlusIcon from '~/assets/icons/plus.svg'
+import MinusIcon from '~/assets/icons/minus.svg'
+import Fitview from '~/assets/icons/fitview.svg'
+import Lock from '~/assets/icons/lock.svg'
+import Unlock from '~/assets/icons/unlock.svg'
+
+const props = withDefaults(defineProps<ControlProps>(), {
+  showZoom: true,
+  showFitView: true,
+  showInteractive: true,
+})
+const emit = defineEmits<ControlEvents>()
+
+const { store } = useVueFlow()
+const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
+
+const isInteractive = computed(() => store.nodesDraggable && store.nodesConnectable && store.elementsSelectable)
+
+const onZoomInHandler = () => {
+  zoomIn()
+  emit('zoom-in')
+}
+
+const onZoomOutHandler = () => {
+  zoomOut()
+  emit('zoom-out')
+}
+
+const onFitViewHandler = () => {
+  fitView(props.fitViewParams)
+  emit('fit-view')
+}
+
+const onInteractiveChangeHandler = () => {
+  store.setInteractive(!isInteractive.value)
+  emit('interaction-change', !isInteractive.value)
+}
+</script>
+<script lang="ts">
+export default {
+  name: 'Controls',
+}
+</script>
+<template>
+  <div class="vue-flow__controls">
+    <template v-if="props.showZoom">
+      <slot name="control-zoom-in">
+        <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
+          <slot name="icon-zoom-in">
+            <PlusIcon />
+          </slot>
+        </ControlButton>
+      </slot>
+      <slot name="control-zoom-out">
+        <ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
+          <slot name="icon-zoom-out">
+            <MinusIcon />
+          </slot>
+        </ControlButton>
+      </slot>
+    </template>
+    <slot name="control-fitview">
+      <ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
+        <slot name="icon-fitview">
+          <Fitview />
+        </slot>
+      </ControlButton>
+    </slot>
+    <slot name="control-interactive">
+      <ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+        <slot name="icon-unlock">
+          <Unlock v-if="isInteractive" />
+        </slot>
+        <slot name="icon-lock">
+          <Lock v-if="!isInteractive" />
+        </slot>
+      </ControlButton>
+    </slot>
+    <slot></slot>
+  </div>
+</template>
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ShapeRendering, StringFunc } from '../../types'
+import { useVueFlow, useWindow } from '../../composables'
+import { getBoundsofRects, getRectOfNodes } from '../../utils'
+import type { MiniMapProps } from '../../types/components'
+import MiniMapNode from './MiniMapNode.vue'
+
+const props = withDefaults(defineProps<MiniMapProps>(), {
+  nodeStrokeColor: '#555',
+  nodeColor: '#fff',
+  nodeClassName: '',
+  nodeBorderRadius: 5,
+  nodeStrokeWidth: 2,
+  maskColor: 'rgb(240, 242, 243, 0.7)',
+})
+
+const attrs: Record<string, any> = useAttrs()
+const window = useWindow()
+
+const defaultWidth = 200
+const defaultHeight = 150
+
+const { store } = useVueFlow()
+
+const elementWidth = attrs.style?.width ?? defaultWidth
+const elementHeight = attrs.style?.height ?? defaultHeight
+const nodeColorFunc: StringFunc = props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor as string
+const nodeStrokeColorFunc: StringFunc =
+  props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor as string
+
+const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
+
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+
+const bb = computed(() => getRectOfNodes(store.getNodes))
+const viewBB = computed(() => ({
+  x: -store.transform[0] / store.transform[2],
+  y: -store.transform[1] / store.transform[2],
+  width: store.dimensions.width / store.transform[2],
+  height: store.dimensions.height / store.transform[2],
+}))
+const viewBox = computed(() => {
+  const boundingRect = store.getNodes && store.getNodes.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value
+  const scaledWidth = boundingRect.width / elementWidth
+  const scaledHeight = boundingRect.height / elementHeight
+  const viewScale = Math.max(scaledWidth, scaledHeight)
+  const viewWidth = viewScale * elementWidth
+  const viewHeight = viewScale * elementHeight
+  const offset = 5 * viewScale
+  return {
+    offset,
+    x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
+    y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
+    width: viewWidth + offset * 2,
+    height: viewHeight + offset * 2,
+  }
+})
+
+const d = computed(() => {
+  if (viewBox.value.x && viewBox.value.y)
+    return `
+    M${viewBox.value.x - viewBox.value.offset},${viewBox.value.y - viewBox.value.offset}
+    h${viewBox.value.width + viewBox.value.offset * 2}
+    v${viewBox.value.height + viewBox.value.offset * 2}
+    h${-viewBox.value.width - viewBox.value.offset * 2}z
+    M${viewBB.value.x},${viewBB.value.y}
+    h${viewBB.value.width}
+    v${viewBB.value.height}
+    h${-viewBB.value.width}z`
+  else return ''
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'MiniMap',
+}
+</script>
+<template>
+  <svg
+    :width="elementWidth"
+    :height="elementHeight"
+    :viewBox="`${viewBox.x || 0} ${viewBox.y || 0} ${viewBox.width || 0} ${viewBox.height || 0}`"
+    class="vue-flow__minimap"
+  >
+    <template v-for="node of store.getNodes" :key="`mini-map-node-${node.id}`">
+      <slot
+        :name="`node-${node.type}`"
+        :position="node.computedPosition"
+        :dimensions="node.dimensions"
+        :style="node.style"
+        :class="nodeClassNameFunc(node)"
+        :color="nodeColorFunc(node)"
+        :border-radius="props.nodeBorderRadius"
+        :stroke-color="nodeStrokeColorFunc(node)"
+        :stroke-width="props.nodeStrokeWidth"
+        :shape-rendering="shapeRendering"
+      >
+        <MiniMapNode
+          :position="node.computedPosition"
+          :dimensions="node.dimensions"
+          :style="node.style"
+          :class="nodeClassNameFunc(node)"
+          :color="nodeColorFunc(node)"
+          :border-radius="props.nodeBorderRadius"
+          :stroke-color="nodeStrokeColorFunc(node)"
+          :stroke-width="props.nodeStrokeWidth"
+          :shape-rendering="shapeRendering"
+        />
+      </slot>
+    </template>
+    <path class="vue-flow__minimap-mask" :d="d" :fill="props.maskColor" fill-rule="evenodd" />
+  </svg>
+</template>
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import type { MiniMapNodeProps } from '../../types/components'
+
+const props = withDefaults(defineProps<MiniMapNodeProps>(), {
+  shapeRendering: 'geometricPrecision',
+})
+const attrs = useAttrs()
+
+const styles = (attrs.style ?? {}) as CSSProperties
+const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
+</script>
+<script lang="ts">
+export default {
+  name: 'MiniMapNode',
+}
+</script>
+<template>
+  <rect
+    class="vue-flow__minimap-node"
+    :x="props.position.x"
+    :y="props.position.y"
+    :rx="props.borderRadius"
+    :ry="props.borderRadius"
+    :width="props.dimensions.width"
+    :height="props.dimensions.height"
+    :fill="fill"
+    :stroke="props.strokeColor"
+    :stroke-width="props.strokeWidth"
+    :shape-rendering="props.shapeRendering"
+  />
+</template>
@@ -0,0 +1,6 @@
+// These components are not used by vue flow directly
+// but the user can add them as children of a vue flow component
+
+export { default as MiniMap } from './MiniMap/MiniMap.vue'
+export { default as Controls } from './Controls/Controls.vue'
+export { default as Background } from './Background/Background.vue'