Wrap SVG nodes in <g> to avoid Vue warning

ogcincubator · Nov 18, 2024 · 51ef1d6 · 51ef1d6
1 parent 9a56647
commit 51ef1d6
Showing 1 changed file with 44 additions and 42 deletions.
diff --git a/src/components/bblock/DependencyViewerNode.vue b/src/components/bblock/DependencyViewerNode.vue
@@ -1,46 +1,48 @@
 <template>
-  <rect
-    v-if="itemClass === 'datatype'"
-    :height="radius * scale * 2"
-    :width="radius * scale * 2"
-    :x="-radius * scale"
-    :y="-radius * scale"
-    :fill="fill"
-    :stroke="stroke"
-    class="v-ng-shape-rect"
-  >
-    <title v-text="getItemClassLabel(itemClass)"></title>
-  </rect>
-  <polygon
-    v-else-if="['parameter', 'path'].includes(itemClass)"
-    :points="resize(points.triangle, radius * scale)"
-    :fill="fill"
-    :stroke="stroke"
-    :transform="itemClass === 'path' ? rotate180 : ''"
-  >
-    <title v-text="getItemClassLabel(itemClass)"></title>
-  </polygon>
-  <polygon
-    v-else-if="itemClass === 'api'"
-    :points="resize(points.hexagon, radius * scale * 1.1)"
-    :fill="fill"
-    :stroke="stroke"
-  >
-    <title v-text="getItemClassLabel(itemClass)"></title>
-  </polygon>
-  <circle
-    v-else
-    :r="radius * scale"
-    :fill="itemClass ? fill : 'white'"
-    :stroke="itemClass ? stroke : '#444'"
-    :stroke-dasharray="itemClass ? 0 : 2"
-  >
-    <title v-text="itemClass ? getItemClassLabel(itemClass) : 'Unknown Building Block'"></title>
-  </circle>
-  <text v-if="!itemClass"
-        x="0" :y="radius * scale * 0.1"
-        text-anchor="middle" dominant-baseline="middle"
-        :font-size="`${radius * scale * 1.3}px`" font-weight="bold" color="#444">?</text>
+  <g>
+    <rect
+      v-if="itemClass === 'datatype'"
+      :height="radius * scale * 2"
+      :width="radius * scale * 2"
+      :x="-radius * scale"
+      :y="-radius * scale"
+      :fill="fill"
+      :stroke="stroke"
+      class="v-ng-shape-rect"
+    >
+      <title v-text="getItemClassLabel(itemClass)"></title>
+    </rect>
+    <polygon
+      v-else-if="['parameter', 'path'].includes(itemClass)"
+      :points="resize(points.triangle, radius * scale)"
+      :fill="fill"
+      :stroke="stroke"
+      :transform="itemClass === 'path' ? rotate180 : ''"
+    >
+      <title v-text="getItemClassLabel(itemClass)"></title>
+    </polygon>
+    <polygon
+      v-else-if="itemClass === 'api'"
+      :points="resize(points.hexagon, radius * scale * 1.1)"
+      :fill="fill"
+      :stroke="stroke"
+    >
+      <title v-text="getItemClassLabel(itemClass)"></title>
+    </polygon>
+    <circle
+      v-else
+      :r="radius * scale"
+      :fill="itemClass ? fill : 'white'"
+      :stroke="itemClass ? stroke : '#444'"
+      :stroke-dasharray="itemClass ? 0 : 2"
+    >
+      <title v-text="itemClass ? getItemClassLabel(itemClass) : 'Unknown Building Block'"></title>
+    </circle>
+    <text v-if="!itemClass"
+          x="0" :y="radius * scale * 0.1"
+          text-anchor="middle" dominant-baseline="middle"
+          :font-size="`${radius * scale * 1.3}px`" font-weight="bold" color="#444">?</text>
+  </g>
 </template>
 <script>
 import {getLabel as getItemClassLabel} from "@/models/itemClass";