scale SVG to fit but not exceed container

equinor · Dec 11, 2024 · 601517c · 601517c
1 parent d4250da
commit 601517c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/www/src/App.css b/www/src/App.css
@@ -1,7 +1,10 @@
 body,
 html {
-    width: 100%;
+    width: 100vw;
+    height: 100vh;
     margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
 html,

diff --git a/www/src/components/diagram/Pandid.tsx b/www/src/components/diagram/Pandid.tsx
@@ -11,6 +11,12 @@ import PandidContext from "../../context/PandidContext.ts";
 import PipeSystem from "./piping/PipeSystem.tsx";
 import { cleanTripleStore } from "../../utils/Triplestore.ts";
 import { useCommissioningPackageContext } from "../../hooks/useCommissioningPackageContext.tsx";
+import styled from "styled-components";
+
+const SVGContainer = styled.div`
+  width: 100%;
+  height: 100%;
+`;
 
 export default function Pandid() {
   const context = useCommissioningPackageContext();
@@ -61,7 +67,7 @@ export default function Pandid() {
   }, [xmlData]);
 
   return (
-    <>
+    <SVGContainer>
       {xmlData && (
         <PandidContext.Provider
           value={{
@@ -70,6 +76,9 @@ export default function Pandid() {
         >
           <svg
             viewBox={`${xmlData.PlantModel.Drawing.Extent.Min.X} ${xmlData.PlantModel.Drawing.Extent.Min.Y} ${xmlData.PlantModel.Drawing.Extent.Max.X} ${xmlData.PlantModel.Drawing.Extent.Max.Y}`}
+            width={"100%"}
+            height={"100%"}
+            preserveAspectRatio={"xMidyMid meet"}
           >
             {equipments &&
               equipments.map((equipment: EquipmentProps, index: number) => (
@@ -103,6 +112,6 @@ export default function Pandid() {
           </svg>
         </PandidContext.Provider>
       )}
-    </>
+    </SVGContainer>
   );
 }
diff --git a/www/src/components/editor/Editor.tsx b/www/src/components/editor/Editor.tsx
@@ -17,6 +17,8 @@ const EditorContainer = styled.div`
 const SideBarAndPandid = styled.div`
   display: flex;
   flex-direction: row;
+  height: 100%;
+  width: 100%;
 `;
 
 export default function Editor() {