bugfix: controls not having correct zoom helper functions

* Check if prop event cbs are functions before calling

src/additional-components/Controls/index.tsx

@@ -31,7 +31,7 @@ export const ControlButton = defineComponent({
   },
   setup(props, { slots }) {
     return () => (
-      <button class={['react-flow__controls-button']} onClick={props.onClick} disabled={props.disabled}>
+      <button class={['react-flow__controls-button']} {...props}>
         {slots.default ? slots.default() : ''}
       </button>
     );
@@ -85,23 +85,27 @@ const Controls = defineComponent({
   setup(props, { slots }) {
     const pinia = store();
     const isVisible = ref<boolean>(false);
-    const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
+    const zoomHelper = ref(useZoomPanHelper());
+
+    onMounted(() => {
+      zoomHelper.value = useZoomPanHelper();
+    });
 
     const isInteractive = pinia.nodesDraggable && pinia.nodesConnectable && pinia.elementsSelectable;
     const mapClasses = ['react-flow__controls'];
 
     const onZoomInHandler = () => {
-      zoomIn?.();
+      zoomHelper.value.zoomIn?.();
       props.onZoomIn?.();
     };
 
     const onZoomOutHandler = () => {
-      zoomOut?.();
+      zoomHelper.value.zoomOut?.();
       props.onZoomOut?.();
     };
 
     const onFitViewHandler = () => {
-      fitView?.(props.fitViewParams);
+      zoomHelper.value.fitView?.(props.fitViewParams);
       props.onFitView?.();
     };
 

src/components/Edges/wrapEdge.tsx

@@ -13,11 +13,11 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
       const pinia = store();
       const updating = ref<boolean>(false);
       const inactive = !props.elementsSelectable && !props.onClick;
-      const edgeClasses = [
+      const edgeClasses = computed(() => [
         'react-flow__edge',
         `react-flow__edge-${props.type}`,
         { selected: props.selected, animated: props.animated, inactive, updating: updating.value }
-      ];
+      ]);
 
       const edgeElement = computed<Edge>(() => {
         const el: Edge = {
@@ -52,19 +52,19 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
       };
 
       const onEdgeContextMenu = (event: MouseEvent) => {
-        if (props.onContextMenu) props.onContextMenu?.(event, edgeElement.value);
+        if (typeof props.onContextMenu === 'function') props.onContextMenu?.(event, edgeElement.value);
       };
 
       const onEdgeMouseEnter = (event: MouseEvent) => {
-        if (props.onMouseEnter) props.onMouseEnter?.(event, edgeElement.value);
+        if (typeof props.onMouseEnter === 'function') props.onMouseEnter?.(event, edgeElement.value);
       };
 
       const onEdgeMouseMove = (event: MouseEvent) => {
-        if (props.onMouseMove) props.onMouseMove?.(event, edgeElement.value);
+        if (typeof props.onMouseMove === 'function') props.onMouseMove?.(event, edgeElement.value);
       };
 
       const onEdgeMouseLeave = (event: MouseEvent) => {
-        if (props.onMouseLeave) props.onMouseLeave?.(event, edgeElement.value);
+        if (typeof props.onMouseLeave === 'function') props.onMouseLeave?.(event, edgeElement.value);
       };
 
       const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
@@ -113,7 +113,7 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
 
       return () => (
         <g
-          class={edgeClasses}
+          class={edgeClasses.value}
           onClick={onEdgeClick}
           onContextmenu={onEdgeContextMenu}
           onMouseenter={onEdgeMouseEnter}