Merge pull request #5106 from systeminit/fix/prevent-rendering-0x0-co…

…mponents Fix: prevent rendering 0x0 components, always force a minimum size
systeminit · Dec 11, 2024 · 5d2e0f7 · 5d2e0f7
2 parents f6370ac + 19668e7
commit 5d2e0f7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/app/web/src/components/ModelingDiagram/DiagramGroup.vue b/app/web/src/components/ModelingDiagram/DiagramGroup.vue
@@ -422,6 +422,7 @@ import {
   GROUP_RESIZE_HANDLE_SIZE,
   GROUP_TITLE_FONT_SIZE,
   SELECTION_COLOR,
+  MIN_NODE_DIMENSION,
 } from "@/components/ModelingDiagram/diagram_constants";
 import {
   QualificationStatus,
@@ -495,6 +496,8 @@ const viewStore = useViewsStore();
 const irect = computed(() => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const r = viewStore.groups[props.group.def.id]!;
+  r.width = Math.max(r.width, MIN_NODE_DIMENSION);
+  r.height = Math.max(r.height, MIN_NODE_DIMENSION);
   return r;
 });
 

diff --git a/app/web/src/components/ModelingDiagram/DiagramNode.vue b/app/web/src/components/ModelingDiagram/DiagramNode.vue
@@ -309,6 +309,7 @@ import {
   NODE_TITLE_HEADER_MARGIN_RIGHT as NODE_HEADER_MARGIN_RIGHT,
   NODE_HEADER_HEIGHT,
   NODE_HEADER_TEXT_HEIGHT,
+  NODE_WIDTH,
 } from "./diagram_constants";
 import DiagramIcon from "./DiagramIcon.vue";
 
@@ -413,8 +414,13 @@ const nodeHeight = computed(() => NODE_HEADER_HEIGHT + nodeBodyHeight.value);
 
 const parentComponentId = computed(() => props.node.def.parentId);
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const position = computed(() => viewStore.components[props.node.def.id]!);
+const position = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const r = viewStore.components[props.node.def.id]!;
+  r.width = Math.max(r.width, NODE_WIDTH);
+  r.height = Math.max(r.height, NODE_WIDTH);
+  return r;
+});
 
 const colors = computed(() => {
   const primaryColor = tinycolor(props.node.def.color || DEFAULT_NODE_COLOR);

diff --git a/app/web/src/components/ModelingDiagram/DiagramView.vue b/app/web/src/components/ModelingDiagram/DiagramView.vue
@@ -84,6 +84,7 @@ import { useTheme, getToneColorHex, Tones } from "@si/vue-lib/design-system";
 import {
   DIAGRAM_FONT_FAMILY,
   SELECTION_COLOR,
+  NODE_WIDTH,
 } from "@/components/ModelingDiagram/diagram_constants";
 import { useViewsStore } from "@/store/views.store";
 import { DiagramViewDef, ElementHoverMeta } from "./diagram_types";
@@ -102,7 +103,8 @@ const props = defineProps<{
 const radius = computed(() => {
   if (props.view.width !== props.view.height)
     throw new Error("Width and Height ought to match");
-  return props.view.width / 2;
+  // protect against trying to render something "too small"
+  return Math.max(props.view.width / 2, NODE_WIDTH / 2);
 });
 
 // step up & down the font size