Polishing

tiramisuframework · Nov 7, 2023 · e3fc691 · e3fc691
1 parent afc4e27
commit e3fc691
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -9,6 +9,7 @@
             @showBackdrop="this.showBackdrop= $event"
             @showActivities="this.showActivities= $event"
             @showActivityLabels="this.showActivityLabels= $event"
+            @showActivityShadows="this.showActivityShadows= $event"
             @showEdges="this.showEdges= $event"
           />
         </div>
@@ -18,6 +19,7 @@
               :show-backdrop="showBackdrop"
               :show-activities="showActivities"
               :show-activity-labels="showActivityLabels"
+              :show-activity-shadows="showActivityShadows"
               :show-edges="showEdges"
           />
         </div>
@@ -44,6 +46,7 @@ export default {
     showBackdrop: true,
     showActivities: true,
     showActivityLabels: true,
+    showActivityShadows: true,
     showEdges: true
   }),
 };

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -7,8 +7,9 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-          <li class="nav-item"><a class="nav-link" href="#">Configure visibility</a></li>
-          <li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" href="#ConfigureData">Configure data</a></li>
+          <li class="nav-item">
+            <a class="nav-link" data-bs-toggle="offcanvas" href="#ConfigureData">Configure data</a>
+          </li>
         </ul>
       </div>
     </div>

diff --git a/src/components/SidebarVisibility.vue b/src/components/SidebarVisibility.vue
@@ -14,19 +14,25 @@
       <li class="list-group-item">
         <label class="form-check-label form-check form-switch">
           <input class="form-check-input" type="checkbox" v-model="showActivities" @click="$emit('showActivities', !this.showActivities)">
-          Activity pictograms layer
+          Activity pictograms
+        </label>
+      </li>
+      <li class="list-group-item">
+        <label class="form-check-label form-check form-switch">
+          <input class="form-check-input" :disabled="!this.showActivities" type="checkbox" v-model="showActivityShadows" @click="$emit('showActivityShadows', !this.showActivityShadows)">
+          Activity shadows
         </label>
       </li>
       <li class="list-group-item">
         <label class="form-check-label form-check form-switch">
           <input class="form-check-input" type="checkbox" v-model="showActivityLabels" @click="$emit('showActivityLabels', !this.showActivityLabels)">
-          Activity labels layer
+          Activity labels
         </label>
       </li>
       <li class="list-group-item">
         <label class="form-check-label form-check form-switch">
           <input class="form-check-input" type="checkbox" v-model="showEdges" @click="$emit('showEdges', !this.showEdges)">
-          Edges layer
+          Edges
         </label>
       </li>
     </ul>
@@ -40,6 +46,7 @@ export default {
     showBackdrop: true,
     showActivities: true,
     showActivityLabels: true,
+    showActivityShadows: true,
     showEdges: true
   }),
 };

diff --git a/src/components/Tiramisu.vue b/src/components/Tiramisu.vue
@@ -40,7 +40,7 @@
         />
       </g>
 
-      <!-- activities -->
+      <!-- activity labels -->
       <g v-for="(action, name, index) in images.actions" :key="name">
         <text
             v-if="showActivityLabels && name in model.actions"
@@ -62,7 +62,8 @@ export default {
     showBackdrop: true,
     showActivities: true,
     showActivityLabels: true,
-    showEdges: true
+    showActivityShadows: true,
+    showEdges: true,
   },
   data: () => ({
     dimensions: {
@@ -155,7 +156,7 @@ export default {
       }
     },
     intensityActivity(intensity) {
-      if (!Number.isNaN(intensity))
+      if ((!Number.isNaN(intensity)) && this.showActivityShadows)
         return 'filter: drop-shadow(0px 0px '+ (intensity*20) +'px green)';
     },
     getCoordinates(x1, y1, x2, y2) {