Merge pull request #4199 from systeminit/feat/improve-diagram-node-se…

…lection Feat: improve diagram node selection
systeminit · Jul 23, 2024 · e9b190b · e9b190b
2 parents ad19072 + a3efd0a
commit e9b190b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/app/web/src/components/ModelingDiagram/DiagramGroup.vue b/app/web/src/components/ModelingDiagram/DiagramGroup.vue
@@ -12,15 +12,15 @@
   >
     <!-- selection box outline -->
     <v-rect
-      v-if="isHovered || isSelected || highlightParent || highlightAsNewParent"
+      v-if="isHovered || highlightParent || highlightAsNewParent"
       :config="{
         width: nodeWidth + 8,
         height: nodeHeight + 8,
         x: -halfWidth - 4,
         y: -4 - nodeHeaderHeight - GROUP_HEADER_BOTTOM_MARGIN,
         cornerRadius: CORNER_RADIUS + 3,
         stroke: SELECTION_COLOR,
-        strokeWidth: isSelected ? 3 : 1,
+        strokeWidth: 1,
         listening: false,
       }"
     />

diff --git a/app/web/src/components/ModelingDiagram/DiagramNode.vue b/app/web/src/components/ModelingDiagram/DiagramNode.vue
@@ -189,15 +189,15 @@
 
     <!-- selection box outline -->
     <v-rect
-      v-if="isHovered || isSelected"
+      v-if="isHovered"
       :config="{
         width: nodeWidth + 8,
         height: nodeHeight + 8,
         x: -halfWidth - 4,
         y: -4,
         cornerRadius: CORNER_RADIUS + 3,
         stroke: SELECTION_COLOR,
-        strokeWidth: isSelected ? 3 : 1,
+        strokeWidth: 1,
         listening: false,
       }"
     />

diff --git a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
@@ -177,9 +177,29 @@ overflow hidden */
             "
           />
         </v-layer>
+
+        <!-- selection outline -->
+        <v-layer>
+          <v-rect
+            v-for="rect in selectionRects"
+            :key="`${rect.x}_${rect.y}`"
+            :config="{
+              x: rect.x - 9,
+              y: rect.y - 9,
+              width: rect.width + 18,
+              height: rect.height + 18,
+              cornerRadius: CORNER_RADIUS + 5,
+              stroke: SELECTION_COLOR,
+              strokeWidth: 3,
+              listening: false,
+            }"
+          >
+          </v-rect>
+        </v-layer>
       </v-stage>
 
       <DiagramHelpModal ref="helpModalRef" />
+      RECTS: {{ selectionRects }}
     </div>
   </div>
 </template>
@@ -278,6 +298,7 @@ import {
   GROUP_BOTTOM_INTERNAL_PADDING,
   GROUP_INNER_Y_BOUNDARY_OFFSET,
   MIN_NODE_DIMENSION,
+  GROUP_HEADER_BOTTOM_MARGIN,
 } from "./diagram_constants";
 import {
   vectorDistance,
@@ -2694,6 +2715,29 @@ function getElementByKey(key?: DiagramElementUniqueKey) {
   return key ? allElementsByKey.value[key] : undefined;
 }
 
+// Selection rects
+const selectionRects = computed(() => {
+  const rects = [] as (Size2D & Vector2d)[];
+  currentSelectionKeys.value.forEach((uniqueKey) => {
+    const isGroup = uniqueKey.startsWith("g-");
+    const id = uniqueKey.slice(2); // remove the prefix
+    const rect = componentsStore.renderedGeometriesByComponentId[id];
+    if (rect) {
+      const r = structuredClone(rect);
+      r.x -= r.width / 2;
+      if (isGroup) {
+        // deal with top bar height outside the component's
+        // designated height
+        const adjust = 28 + GROUP_HEADER_BOTTOM_MARGIN * 2;
+        r.height += adjust;
+        r.y -= adjust;
+      }
+      rects.push(r);
+    }
+  });
+  return rects;
+});
+
 function getDiagramElementKeyForComponentId(
   componentId?: ComponentId | null,
 ): string | undefined {