Expose temporary connection handler (#408)

packages/renderer-vue/src/editor/Editor.vue

@@ -95,7 +95,7 @@ import { AbstractNode } from "@baklavajs/core";
 import { IBaklavaViewModel } from "../viewModel";
 import { providePlugin, useDragMove } from "../utility";
 import { usePanZoom } from "./panZoom";
-import { useTemporaryConnection } from "./temporaryConnection";
+import { provideTemporaryConnection } from "./temporaryConnection";
 import { useContextMenu } from "./contextMenu";
 import { useSelectionBox } from "./selectionBox";
 
@@ -125,7 +125,7 @@ const connections = computed(() => props.viewModel.displayedGraph.connections);
 const selectedNodes = computed(() => props.viewModel.displayedGraph.selectedNodes);
 
 const panZoom = usePanZoom();
-const temporaryConnection = useTemporaryConnection();
+const temporaryConnection = provideTemporaryConnection();
 const contextMenu = useContextMenu(viewModelRef);
 const selectionBox = useSelectionBox(el);
 

packages/renderer-vue/src/editor/index.ts

@@ -0,0 +1,4 @@
+/** @deprecated use `BaklavaEditor` instead */
+export { default as EditorComponent } from "./editor/Editor.vue";
+export { default as BaklavaEditor } from "./editor/Editor.vue";
+export * from "./temporaryConnection";

packages/renderer-vue/src/editor/temporaryConnection.ts

@@ -1,15 +1,15 @@
-import { provide, ref, Ref } from "vue";
+import { inject, provide, ref, Ref } from "vue";
 import { NodeInterface } from "@baklavajs/core";
 import { ITemporaryConnection, TemporaryConnectionState } from "../connection/connection";
 import { useGraph } from "../utility";
 
-export const TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL = Symbol();
+const TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL = Symbol();
 export interface ITemporaryConnectionHandler {
     hoveredOver: (ni: NodeInterface | undefined) => void;
     temporaryConnection: Ref<ITemporaryConnection | null>;
 }
 
-export function useTemporaryConnection() {
+export function provideTemporaryConnection() {
     const { graph } = useGraph();
 
     const temporaryConnection = ref<ITemporaryConnection | null>(null) as Ref<ITemporaryConnection | null>;
@@ -99,3 +99,11 @@ export function useTemporaryConnection() {
 
     return { temporaryConnection, onMouseMove, onMouseDown, onMouseUp, hoveredOver };
 }
+
+export function useTemporaryConnection() {
+    const temporaryConnection = inject<ITemporaryConnectionHandler>(TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL);
+    if (!temporaryConnection) {
+        throw new Error("useTemporaryConnection must be used within a BaklavaEditor");
+    }
+    return temporaryConnection;
+}

packages/renderer-vue/src/index.ts

@@ -4,9 +4,7 @@
 
 export * from "./overrides";
 
-/** @deprecated use `BaklavaEditor` instead */
-export { default as EditorComponent } from "./editor/Editor.vue";
-export { default as BaklavaEditor } from "./editor/Editor.vue";
+export * from "./editor";
 export * from "./commands";
 export * from "./nodeinterfaces";
 export * from "./viewModel";

packages/renderer-vue/src/node/NodeInterface.vue

@@ -28,13 +28,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onUpdated, Ref, ref } from "vue";
+import { computed, onMounted, onUpdated, Ref, ref } from "vue";
 import { AbstractNode, NodeInterface } from "@baklavajs/core";
 import { useViewModel } from "../utility";
-import {
-    ITemporaryConnectionHandler,
-    TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL,
-} from "../editor/temporaryConnection";
+import { useTemporaryConnection } from "../editor/temporaryConnection";
 
 const ellipsis = (value: any, characters = 100) => {
     const stringValue: string = typeof value?.toString === "function" ? String(value) : "";
@@ -52,9 +49,7 @@ const props = defineProps<{
 }>();
 
 const { viewModel } = useViewModel();
-const { hoveredOver, temporaryConnection } = inject<ITemporaryConnectionHandler>(
-    TEMPORARY_CONNECTION_HANDLER_INJECTION_SYMBOL,
-)!;
+const { hoveredOver, temporaryConnection } = useTemporaryConnection();
 
 const el = ref<HTMLElement | null>(null) as Ref<HTMLElement>;