fix!: prop typings

* remove wrapper exports from library

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -17,10 +17,10 @@ interface ConnectionLineProps {
   vf: VFInternals
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  connectionHandleId: ElementId
-  connectionNodeId: ElementId
-  connectionHandleType: HandleType
-  connectionPosition: XYPosition
+  connectionHandleId?: ElementId
+  connectionNodeId?: ElementId
+  connectionHandleType?: HandleType
+  connectionPosition?: XYPosition
   connectionMode: ConnectionMode
   transform: Transform
 }
@@ -42,8 +42,8 @@ const sourceY = props.vf.position.y + sourceHandleY
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
-const targetX = computed(() => (props.connectionPosition.x - props.transform[0]) / props.transform[2])
-const targetY = computed(() => (props.connectionPosition.y - props.transform[1]) / props.transform[2])
+const targetX = computed(() => (props.connectionPosition?.x || 0 - props.transform[0]) / props.transform[2])
+const targetY = computed(() => (props.connectionPosition?.y || 0 - props.transform[1]) / props.transform[2])
 
 const dAttr = computed(() => {
   let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`

src/components/Edges/index.ts

@@ -4,4 +4,3 @@ export { default as SmoothStepEdge } from './SmoothStepEdge.vue'
 export { default as StraightEdge } from './StraightEdge.vue'
 export { default as EdgeAnchor } from './EdgeAnchor.vue'
 export { default as EdgeText } from './EdgeText.vue'
-export { default as EdgeWrapper } from './EdgeWrapper.vue'

src/components/Nodes/index.ts

@@ -1,4 +1,3 @@
 export { default as DefaultNode } from './DefaultNode.vue'
 export { default as InputNode } from './InputNode.vue'
 export { default as OutputNode } from './OutputNode.vue'
-export { default as NodeWrapper } from './NodeWrapper.vue'

src/composables/useStore.ts

@@ -5,8 +5,7 @@ import { onLoadToObject, initialState } from '~/utils'
 
 let id = 0
 export default (options?: Partial<FlowOptions>, key?: string) => {
-  let store = inject(Store, null)
-
+  let store = inject(Store, undefined)
   if (!store) {
     const withStorage = options?.storageKey ?? key ?? false
     if (import.meta.env.DEV) console.warn('store context not found; creating default store')

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
   edgeUpdaterRadius: 10,
 })
 
-const getType = (type: string) => {
+const getType = (type?: string) => {
   const t = type ?? 'default'
   let edgeType = props.edgeTypes[t]
   if (!edgeType) {
@@ -124,10 +124,10 @@ export default {
       </EdgeWrapper>
       <ConnectionLine
         v-if="connectionLineVisible && sourceNode"
+        :vf="sourceNode?.__vf"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"
         :connection-handle-id="props.connectionHandleId"
-        :vf="sourceNode?.__vf"
         :connection-node-id="props.connectionNodeId"
         :connection-handle-type="props.connectionHandleType"
         :connection-position="props.connectionPosition"

src/container/NodeRenderer/NodeRenderer.vue

@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
   snapGrid: () => [15, 15],
 })
 
-const getType = (type: string) => {
+const getType = (type?: string) => {
   const t = type ?? 'default'
   let nodeType = props.nodeTypes[t]
   if (!nodeType) {

src/container/SelectionPane/SelectionPane.vue

@@ -7,7 +7,7 @@ import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
 interface SelectionPaneProps {
   edges: Edge[]
-  selectedElements: FlowElements
+  selectedElements?: FlowElements
   selectionKeyCode?: KeyCode
   deleteKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode
@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
   deleteKeyCode: 'Backspace',
   multiSelectionKeyCode: 'Meta',
   elementsSelectable: true,
+  selectedElements: () => [],
 })
 
 const store = useStore()

src/container/VueFlow/VueFlow.vue

@@ -224,7 +224,7 @@ const transitionName = computed(() => {
                       #[`node-${nodeName}`]="nodeProps"
                       :key="`node-${nodeName}-${store.$id}`"
                     >
-                      <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
+                      <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
                     </template>
                   </NodeRenderer>
                 </slot>
@@ -253,14 +253,14 @@ const transitionName = computed(() => {
                       #[`edge-${edgeName}`]="edgeProps"
                       :key="`edge-${edgeName}-${store.$id}`"
                     >
-                      <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+                      <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
                     </template>
                     <template #custom-connection-line="customConnectionLineProps">
                       <slot
                         :key="`connection-line-${store.$id}`"
                         name="custom-connection-line"
                         v-bind="customConnectionLineProps"
-                      ></slot>
+                      />
                     </template>
                   </EdgeRenderer>
                 </slot>

src/container/ZoomPane/ZoomPane.vue

@@ -209,7 +209,11 @@ export default {
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot
       v-bind="{
-        transform,
+        transform: [
+          clamp(transform.x, store.translateExtent[0][0], store.translateExtent[1][0]),
+          clamp(transform.y, store.translateExtent[0][0], store.translateExtent[1][0]),
+          clamp(transform.zoom, store.translateExtent[0][0], store.translateExtent[1][0]),
+        ],
         dimensions: { width, height },
       }"
     />