feat(editor): Experimental feature flag to show node settings in the canvas (no-changelog) (#15925)

packages/frontend/editor-ui/src/components/canvas/composables/useNodeSettingsInCanvas.ts

@@ -0,0 +1,29 @@
+import { useCanvasOperations } from '@/composables/useCanvasOperations';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useVueFlow } from '@vue-flow/core';
+import { useDebounce } from '@vueuse/core';
+import { computed, type ComputedRef } from 'vue';
+import { useRouter } from 'vue-router';
+
+export function useNodeSettingsInCanvas(): ComputedRef<number | undefined> {
+	const settingsStore = useSettingsStore();
+
+	if (
+		Number.isNaN(settingsStore.experimental__minZoomNodeSettingsInCanvas) ||
+		settingsStore.experimental__minZoomNodeSettingsInCanvas <= 0
+	) {
+		return computed(() => undefined);
+	}
+
+	const router = useRouter();
+	const { editableWorkflow } = useCanvasOperations({ router });
+	const viewFlow = useVueFlow({ id: editableWorkflow.value.id });
+	const zoom = computed(() => viewFlow.viewport.value.zoom);
+	const debouncedZoom = useDebounce(zoom, 100);
+
+	return computed(() =>
+		debouncedZoom.value > settingsStore.experimental__minZoomNodeSettingsInCanvas
+			? debouncedZoom.value
+			: undefined,
+	);
+}