Links: All labels drawn properly

- Demo: Separated label display options for top vs. bottom links

- Links: Removed unnecessary colour overrides for label text

- Links: Corrected and optimised event relation drawing code

Author: ZechyW

demo/demo.min.css

@@ -195,15 +195,28 @@ <h5 class="modal-title" id="options-title">Options</h5>
                   </div>
 
                   <div class="custom-control custom-checkbox mt-3">
-                    <input type="checkbox" class="custom-control-input" id="tag-option-main-label">
-                    <label class="custom-control-label" for="tag-option-main-label">
-                      Show main label on links
+                    <input type="checkbox" class="custom-control-input" id="tag-option-top-main-label">
+                    <label class="custom-control-label" for="tag-option-top-main-label">
+                      Show main label on top links
                     </label>
                   </div>
                   <div class="custom-control custom-checkbox">
-                    <input type="checkbox" class="custom-control-input" id="tag-option-arg-labels">
-                    <label class="custom-control-label" for="tag-option-arg-labels">
-                      Show argument labels on links
+                    <input type="checkbox" class="custom-control-input" id="tag-option-top-arg-labels">
+                    <label class="custom-control-label" for="tag-option-top-arg-labels">
+                      Show argument labels on top links
+                    </label>
+                  </div>
+
+                  <div class="custom-control custom-checkbox mt-3">
+                    <input type="checkbox" class="custom-control-input" id="tag-option-bottom-main-label">
+                    <label class="custom-control-label" for="tag-option-bottom-main-label">
+                      Show main label on bottom links
+                    </label>
+                  </div>
+                  <div class="custom-control custom-checkbox">
+                    <input type="checkbox" class="custom-control-input" id="tag-option-bottom-arg-labels">
+                    <label class="custom-control-label" for="tag-option-bottom-arg-labels">
+                      Show argument labels on bottom links
                     </label>
                   </div>
                 </div>

demo/demo.min.css.map

@@ -198,18 +198,29 @@ $(async () => {
       );
     });
 
-  const $optionMainLabel = $("#tag-option-main-label");
-  $optionMainLabel
-    .prop("checked", uiTag.getOption("showMainLabel"))
+  const $optionTopMainLabel = $("#tag-option-top-main-label");
+  $optionTopMainLabel
+    .prop("checked", uiTag.getOption("showTopMainLabel"))
     .on("change", () => {
-      uiTag.setMainLabelVisibility($optionMainLabel[0].checked);
+      uiTag.setTopMainLabelVisibility($optionTopMainLabel[0].checked);
     });
-
-  const $optionArgLabels = $("#tag-option-arg-labels");
-  $optionArgLabels
-    .prop("checked", uiTag.getOption("showArgLabels"))
+  const $optionTopArgLabels = $("#tag-option-top-arg-labels");
+  $optionTopArgLabels
+    .prop("checked", uiTag.getOption("showTopArgLabels"))
+    .on("change", () => {
+      uiTag.setTopArgLabelVisibility($optionTopArgLabels[0].checked);
+    });
+  const $optionBottomMainLabel = $("#tag-option-bottom-main-label");
+  $optionBottomMainLabel
+    .prop("checked", uiTag.getOption("showBottomMainLabel"))
+    .on("change", () => {
+      uiTag.setBottomMainLabelVisibility($optionBottomMainLabel[0].checked);
+    });
+  const $optionBottomArgLabels = $("#tag-option-bottom-arg-labels");
+  $optionBottomArgLabels
+    .prop("checked", uiTag.getOption("showBottomArgLabels"))
     .on("change", () => {
-      uiTag.setArgLabelVisibility($optionArgLabels[0].checked);
+      uiTag.setBottomArgLabelVisibility($optionBottomArgLabels[0].checked);
     });
 
   // --------------------------------------------------------------------------