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,62 @@
+<script lang="ts" setup>
+import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
+import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
+import { useVueFlow } from '../../composables'
+import { groupEdgesByZLevel } from '../../utils'
+import MarkerDefinitions from './MarkerDefinitions.vue'
+
+const { store } = useVueFlow()
+
+const sourceNode = controlledComputed(
+  () => store.connectionNodeId,
+  () => {
+    if (store.connectionNodeId) return store.getNodes[store.getNodes.map((n) => n.id).indexOf(store.connectionNodeId)]
+  },
+)
+const connectionLineVisible = controlledComputed(
+  () => store.connectionNodeId,
+  () =>
+    !!(
+      sourceNode.value &&
+      (typeof sourceNode.value.connectable === 'undefined' ? store.nodesConnectable : sourceNode.value.connectable) &&
+      store.connectionNodeId &&
+      store.connectionHandleType
+    ),
+)
+const groups = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
+</script>
+<script lang="ts">
+export default {
+  name: 'Edges',
+}
+</script>
+<template>
+  <svg
+    v-for="group of groups"
+    :key="group.level"
+    :width="store.dimensions.width"
+    :height="store.dimensions.height"
+    class="vue-flow__edges vue-flow__container"
+    :style="`z-index: ${group.level}`"
+  >
+    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="store.defaultMarkerColor" />
+    <g>
+      <EdgeWrapper
+        v-for="edge of group.edges"
+        :id="edge.id"
+        :key="edge.id"
+        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
+        :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
+      >
+        <template #default="edgeProps">
+          <slot v-if="edge.type" :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
+        </template>
+      </EdgeWrapper>
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
+        <template #default="customConnectionLineProps">
+          <slot name="connection-line" v-bind="customConnectionLineProps"></slot>
+        </template>
+      </ConnectionLine>
+    </g>
+  </svg>
+</template>