From 82d7057d53bd5360e7a6f628894efb47c15d3e6b Mon Sep 17 00:00:00 2001
From: Sjoerd <svink@graphpolaris.com>
Date: Tue, 5 Nov 2024 08:59:40 +0000
Subject: [PATCH] feat: screenshot button for query builder
---
.../lib/querybuilder/panel/QueryBuilder.tsx | 20 ++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index ad0ff3253..cb27bb409 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -45,6 +45,7 @@ import { ConnectingNodeDataI } from './utils/connectorDrop';
import { resultSetFocus } from '../../data-access/store/interactionSlice';
import { QueryBuilderDispatcherContext } from './QueryBuilderDispatcher';
import { QueryBuilderNav, QueryBuilderToggleSettings } from './QueryBuilderNav';
+import html2canvas from 'html2canvas';
import { ContextMenu } from './ContextMenu';
export type QueryBuilderProps = {
@@ -57,6 +58,7 @@ export type QueryBuilderProps = {
export const QueryBuilderInner = (props: QueryBuilderProps) => {
const [toggleSettings, setToggleSettings] = useState<QueryBuilderToggleSettings>();
const reactFlowWrapper = useRef<HTMLDivElement>(null);
+ const reactFlowRef = useRef<HTMLDivElement>(null);
const queryBuilderSettings = useQuerybuilderSettings();
const saveStateAuthorization = useActiveSaveStateAuthorization();
@@ -504,6 +506,21 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}
}, [queryBuilderSettings]);
+ const handleScreenshot = async () => {
+ if (reactFlowRef.current) {
+ try {
+ const canvas = await html2canvas(reactFlowRef.current);
+ const screenshotUrl = canvas.toDataURL('image/jpeg');
+ const link = document.createElement('a');
+ link.href = screenshotUrl;
+ link.download = 'querybuilder.png';
+ link.click();
+ } catch (error) {
+ dispatch(addError('Screenshot failed.'));
+ }
+ }
+ };
+
return (
<QueryBuilderDispatcherContext.Provider
value={{
@@ -543,7 +560,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
onRunQuery={() => {
if (props.onRunQuery) props.onRunQuery();
}}
- onScreenshot={() => {}}
+ onScreenshot={handleScreenshot}
onLogic={() => {
if (toggleSettings === 'logic') setToggleSettings(undefined);
else setToggleSettings('logic');
@@ -602,6 +619,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
</defs>
</svg>
<ReactFlow
+ ref={reactFlowRef}
edges={elements.edges}
nodes={elements.nodes}
snapGrid={[10, 10]}
--
GitLab