Improvement - Opacity when an item is active

graphieros · Jun 24, 2024 · 20ff8c7 · 20ff8c7
1 parent 8139ecc
commit 20ff8c7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grid-plan",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": false,
   "type": "module",
   "description": "A Vue3 dynamic 2d grid component ideal to view and arrange elements on a room, datacenter or rack blueprint.",

diff --git a/src/components/Grid.vue b/src/components/Grid.vue
@@ -457,18 +457,6 @@ function isValidIcon(icon) {
             :fill="'#FFFFFF20'"
         />
 
-        <text
-            v-if="hoveredRect && !isDown"
-            :text-anchor="highlightedTooltipPosition.textAnchor"
-            :x="highlightedTooltipPosition.x"
-            :y="highlightedTooltipPosition.y"
-            :font-size="0.6"
-            :fill="config.gridHighlightColor"
-            style="user-select: none;"
-        >
-            {{ highlightedCoordinates }}
-        </text>
-
         <!-- WALLS -->
         <rect 
             v-for="wall in walls"
@@ -489,6 +477,7 @@ function isValidIcon(icon) {
             :stroke="config.gridStroke"
             :stroke-width="config.gridStrokeWidth"
             @click="selectItem(placedItem)"
+            :style="`opacity:${ activeEntity.id !== undefined ? activeEntity.id === placedItem.id ? '1' : '0.2' : '1' }`"
         />
 
         <defs>
@@ -540,27 +529,15 @@ function isValidIcon(icon) {
             />
         </g>
 
-        <text 
-            v-if="activeEntity && activeEntity.x !== undefined"
-            :x="entity.x + entity.w - entity.w / 2"
-            :y="entity.y + entity.h + 1"
-            :font-size="0.6"
-            :fill="config.tooltipColor"
-            style="pointer-events: none; user-select: none;"
-            text-anchor="middle"
-        >
-            {{ activeEntityCoordinates }}
-        </text>
-
         <g v-for="placedItem in [...items, entity]">
             <text 
                 v-if="placedItem.x !== undefined && slots.componentText"
                 :x="placedItem.x + placedItem.w / 2"
                 :y="placedItem.y + placedItem.h / 2 + 0.2"
                 :font-size="0.6"
                 :fill="placedItem.iconColor || config.iconColor"
-                style="pointer-events: none; user-select: none"
                 text-anchor="middle"
+                :style="`opacity:${ activeEntity.id !== undefined ? activeEntity.id === placedItem.id ? '1' : '0.2' : '1' }; pointer-events: none; user-select: none`"
             >
                 <slot name="componentText" v-bind="{placedItem, iconColor: config.iconColor}"/>
             </text>
@@ -570,7 +547,7 @@ function isValidIcon(icon) {
                 :y="placedItem.y"
                 :height="placedItem.h"
                 :width="placedItem.w"
-                style="pointer-events: none;"
+                :style="`opacity:${ activeEntity.id !== undefined ? activeEntity.id === placedItem.id ? '1' : '0.2' : '1' }; pointer-events: none; user-select: none`"
             >
                 <div style="width: 100%; height:100%; display: flex; align-items:center; justify-content:center">
                     <slot name="componentIcon" v-bind="{ placedItem, iconColor: config.iconColor, maxSize: Math.min(placedItem.w, placedItem.h) }"/>
@@ -579,13 +556,13 @@ function isValidIcon(icon) {
             <g v-if="placedItem.icon && isValidIcon(placedItem.icon)">
                 <path 
                     v-for="path in parseSVG(icons[placedItem.icon])"
-                    style="pointer-events: none;"
                     fill="none"
                     stroke-width="0.06"
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     :stroke="placedItem.iconColor || config.iconColor"
                     :d="scaleSVGPath(path.d, 24, { x: placedItem.x + (placedItem.w / 2) - 0.5, y: placedItem.y + placedItem.h / 2 - 0.5})"
+                    :style="`opacity:${ activeEntity.id !== undefined ? activeEntity.id === placedItem.id ? '1' : '0.2' : '1' }; pointer-events: none; user-select: none`"
                 />
             </g>
         </g>
@@ -665,5 +642,45 @@ function isValidIcon(icon) {
                 style="pointer-events: none;"
             />
         </g>
+
+        <!-- TOOLTIPS -->
+        <text
+            v-if="hoveredRect && !isDown"
+            :text-anchor="highlightedTooltipPosition.textAnchor"
+            :x="highlightedTooltipPosition.x"
+            :y="highlightedTooltipPosition.y"
+            :font-size="0.6"
+            :fill="config.gridHighlightColor"
+            style="user-select: none;"
+        >
+            {{ highlightedCoordinates }}
+        </text>
+
+        <text 
+            v-if="activeEntity && activeEntity.x !== undefined"
+            :x="entity.x + entity.w - entity.w / 2"
+            :y="entity.y + entity.h + 0.8"
+            :font-size="0.6"
+            :fill="config.tooltipColor"
+            :stroke="'black'"
+            :stroke-width="0.011"
+            style="pointer-events: none; user-select: none;"
+            text-anchor="middle"
+        >
+            {{ activeEntityCoordinates }}
+        </text>
+        <text 
+            v-if="activeEntity && activeEntity.x !== undefined"
+            :x="entity.x + entity.w - entity.w / 2"
+            :y="entity.y + entity.h + 1.3"
+            :font-size="0.4"
+            :fill="config.tooltipColor"
+            style="pointer-events: none; user-select: none;"
+            :stroke="'black'"
+            :stroke-width="0.011"
+            text-anchor="middle"
+        >
+            {{ activeEntity.description }}
+        </text>
     </svg>
 </template>