From 908279de6314bd503b31416fad3c364463b2a313 Mon Sep 17 00:00:00 2001
From: Milho001 <l.milhomemfrancochristino@uu.nl>
Date: Wed, 6 Sep 2023 09:39:36 +0000
Subject: [PATCH] fix: fixes to the nodelink viewport resizing and database
forms
---
.../AddDatabaseForm/newdatabaseform.tsx | 35 +++++--------------
.../lib/vis/nodelink/components/NLPixi.tsx | 19 +++++++---
2 files changed, 24 insertions(+), 30 deletions(-)
diff --git a/apps/web/src/components/navbar/AddDatabaseForm/newdatabaseform.tsx b/apps/web/src/components/navbar/AddDatabaseForm/newdatabaseform.tsx
index d7ede2afe..f370f9fdd 100644
--- a/apps/web/src/components/navbar/AddDatabaseForm/newdatabaseform.tsx
+++ b/apps/web/src/components/navbar/AddDatabaseForm/newdatabaseform.tsx
@@ -77,7 +77,7 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
return (
<dialog ref={ref}>
<form
- className="card flex gap-4"
+ className="card flex gap-4 p-5 rounded-sm shadow-lg"
onSubmit={(event: React.FormEvent) => {
event.preventDefault();
handleSubmitClicked();
@@ -237,34 +237,17 @@ export const NewDatabaseForm = (props: { onClose(): void; open: boolean }) => {
<div className="card-actions w-full justify-center">
<button className={`btn btn-primary ${Object.values(hasError).some((e) => e === true) ? 'btn-disabled' : ''}`}>Submit</button>
- <button className="btn btn-outline" onClick={() => props.onClose()}>
+ <button
+ className="btn btn-outline"
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ props.onClose();
+ }}
+ >
Cancel
</button>
</div>
- {/*
-
- <div className={styles.loginContainerButton}>
- {portValidation && portValidation == 'error' ? (
- <Button disabled variant="contained" type="submit" color="success">
- Submit
- </Button>
- ) : (
- <Button variant="contained" type="submit" color="success">
- Submit
- </Button>
- )}
-
- <Button
- className={styles.cancelButton}
- variant="outlined"
- color="error"
- onClick={() => {
- props.onClose();
- }}
- >
- Cancel
- </Button>
- </div> */}
</form>
</dialog>
);
diff --git a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
index 3f236696c..a2f058832 100644
--- a/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/nodelink/components/NLPixi.tsx
@@ -43,11 +43,23 @@ export const NLPixi = (props: Props) => {
// app.render();
// }, [props.windowSize]);
+ function resize() {
+ const width = ref?.current?.clientWidth || 1000;
+ const height = ref?.current?.clientHeight || 1000;
+ app.renderer.resize(width, height);
+ if (viewport.current) {
+ viewport.current.screenWidth = width;
+ viewport.current.worldWidth = width;
+ viewport.current.worldHeight = height;
+ viewport.current.screenHeight = height;
+ }
+ app.render();
+ }
+
useEffect(() => {
if (!ref.current) return;
const resizeObserver = new ResizeObserver(() => {
- app.renderer.resize(ref?.current?.clientWidth || 1000, ref?.current?.clientHeight || 1000);
- app.render();
+ resize();
});
resizeObserver.observe(ref.current);
return () => resizeObserver.disconnect(); // clean up
@@ -56,8 +68,7 @@ export const NLPixi = (props: Props) => {
useEffect(() => {
if (ref.current && ref.current.children.length === 0) {
ref.current.appendChild(app.view as HTMLCanvasElement);
- app.renderer.resize(ref?.current?.clientWidth || 1000, ref?.current?.clientHeight || 1000);
- app.render();
+ resize();
}
}, [ref]);
--
GitLab