Add filter to exclude tags

src/fragments/diagrams/controls.jspf

@@ -31,6 +31,8 @@
             <button id="diagramTooltipOffButton" class="btn btn-default hidden diagramTooltipOffButton" title="Diagram tooltips off [t]"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/chat-square-text-fill.svg" class="icon-btn" /></button>
             <button id="tagsOnButton" class="btn btn-default"  title="Tags"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/tags.svg" class="icon-btn" /></button>
             <button id="tagsOffButton" class="btn btn-default hidden" title="Tags"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/tags-fill.svg" class="icon-btn" /></button>
+            <button id="excludeTagsOnButton" class="btn btn-default"  title="Exclude Tags"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/funnel.svg" class="icon-btn" /></button>
+            <button id="excludeTagsOffButton" class="btn btn-default hidden" title="Exclude Tags"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/funnel-fill.svg" class="icon-btn" /></button>
             <button id="perspectivesOnButton" class="btn btn-default hidden" title="Perspectives"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/binoculars.svg" class="icon-btn" /></button>
             <button id="perspectivesOffButton" class="btn btn-default hidden" title="Perspectives"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/binoculars-fill.svg" class="icon-btn" /></button>
             <button id="showDiagramScopeOnButton" class="btn btn-default hidden" title="Toggle diagram scope on"><img src="${structurizrConfiguration.cdnUrl}/bootstrap-icons/pin-map.svg" class="icon-btn" /></button>
@@ -45,6 +47,8 @@
             $('#diagramTooltipOffButton').click(function() { toggleTooltip(); });
             $('#tagsOnButton').click(function() { openTagsModal(); });
             $('#tagsOffButton').click(function() { openTagsModal(); });
+            $('#excludeTagsOnButton').click(function() { openExcludeTagsModal(); });
+            $('#excludeTagsOffButton').click(function() { openExcludeTagsModal(); });
             $('#perspectivesOnButton').click(function() { openPerspectivesModal(); });
             $('#perspectivesOffButton').click(function() { openPerspectivesModal(); });
             $('#showDiagramScopeOnButton').click(function() { showDiagramScope(true); });

src/fragments/diagrams/exclude-tags.jspf

@@ -0,0 +1,76 @@
+<div class="modal fade" id="excludeTagsModal" tabindex="-1" role="dialog" aria-labelledby="excludeTagsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h2 class="modal-title">Exclude Tags</h2>
+            </div>
+            <div class="modal-body">
+                <p>
+                    The tags included in the software architecture model are listed below.
+                    Viewing a diagram with one or more tags selected will hide all elements and relationships with those tags.
+                </p>
+
+                <div>
+                    <div class="form-group">
+                        <select class="form-control" id="excludeTagsList" multiple="multiple" size="15"></select>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="clearExcludeTagsButton" type="button" class="btn btn-default">Clear exclude tags</button>
+                <button id="viewExcludeTagsButton" type="button" class="btn btn-default">Exclude tags</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script nonce="${scriptNonce}">
+
+    $('#clearExcludeTagsButton').click(function() { clearExcludeTags(true); });
+    $('#viewExcludeTagsButton').click(function() { showExcludeTags(); });
+
+    function initExcludeTags() {
+        var tags = structurizr.workspace.getTags();
+        var excludeTagsList = $('#excludeTagsList');
+        excludeTagsList.empty();
+
+        tags.forEach(function(tag) {
+            excludeTagsList.append(
+                $('<option></option>').val(structurizr.util.escapeHtml(tag)).html(structurizr.util.escapeHtml(tag))
+            );
+        });
+
+        excludeTagsList.attr('size', Math.min(8, tags.length));
+
+    }
+
+    function openExcludeTagsModal() {
+        $('#excludeTagsModal').modal();
+    }
+
+    function clearExcludeTags(render) {
+        structurizr.diagram.clearExcludeTags();
+
+        $('#excludeTagsModal').modal('hide');
+        $('#excludeTagsOnButton').removeClass('hidden');
+        $('#excludeTagsOffButton').addClass('hidden');
+        $('#excludeTagsOffButton').attr('title', 'Exclude Tags');
+
+        if (render === true) {
+            structurizr.diagram.renderPerspectiveOrTagsFilter();
+        }
+    }
+
+    function showExcludeTags() {
+        clearPerspective(false);
+        var tags = $('#excludeTagsList').val();
+        structurizr.diagram.changeExcludeTags(tags);
+        structurizr.diagram.renderPerspectiveOrTagsFilter();
+
+        $('#excludeTagsModal').modal('hide');
+        $('#excludeTagsOnButton').addClass('hidden');
+        $('#excludeTagsOffButton').removeClass('hidden');
+        $('#excludeTagsOffButton').attr('title', 'Exclude Tags (' + tags + ')');
+    }
+</script>

src/fragments/diagrams/perspectives.jspf

@@ -7,6 +7,19 @@
         }
     }
 
+    function clearPerspective(render) {
+        structurizr.diagram.clearPerspective();
+        if (render === true) {
+            structurizr.diagram.renderPerspectiveOrTagsFilter();
+        }
+        tooltip.enable();
+        toggleTooltip();
+
+        $('#perspectivesOnButton').removeClass('hidden');
+        $('#perspectivesOffButton').addClass('hidden');
+        $('#perspectivesOffButton').attr('title', 'Perspectives');
+    }
+
     function openPerspectivesModal() {
         const perspectiveNames = structurizr.workspace.getPerspectiveNames();
 
@@ -26,6 +39,7 @@
             openNavigationModal(options, function(perspective) {
                 if (perspective.length > 0) {
                     clearTags(false);
+                    clearExcludeTags(false);
                     structurizr.diagram.changePerspective(perspective);
                     structurizr.diagram.renderPerspectiveOrTagsFilter();
                     tooltip.disable();
@@ -35,14 +49,7 @@
                     $('#perspectivesOffButton').removeClass('hidden');
                     $('#perspectivesOffButton').attr('title', 'Perspective: ' + perspective);
                 } else {
-                    structurizr.diagram.clearPerspective();
-                    structurizr.diagram.renderPerspectiveOrTagsFilter();
-                    tooltip.enable();
-                    toggleTooltip();
-
-                    $('#perspectivesOnButton').removeClass('hidden');
-                    $('#perspectivesOffButton').addClass('hidden');
-                    $('#perspectivesOffButton').attr('title', 'Perspectives');
+                    clearPerspective(true);
                 }
             });
         }

src/js/structurizr-diagram.js

@@ -84,6 +84,7 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
     var currentFilter;
     var currentPerspective;
     var currentTags = [];
+    var currentExcludeTags = [];
 
     var lassoStart;
     var lassoEnd;
@@ -1404,8 +1405,28 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
         return result;
     }
 
+    function hasExcludeTags(tags) {
+        var result = false;
+
+        currentExcludeTags.forEach(function(tag) {
+            result = (result || tags.indexOf(tag) > -1);
+        });
+
+        return result;
+    }
+
+    function areHiddenTags(tags) {
+        if (hasExcludeTags(tags) === true) {
+            return true;
+        }
+        if (currentTags.length === 0) {
+            return false;
+        }
+        return hasTags(tags) === false;
+    }
+
     this.renderPerspectiveOrTagsFilter = function() {
-        if (currentPerspective === undefined && currentTags.length === 0) {
+        if (currentPerspective === undefined && currentTags.length === 0 && currentExcludeTags.length === 0) {
             Object.keys(cellsByElementId).forEach(function(elementId) {
                 var cell = cellsByElementId[elementId];
                 changeColourOfCell(cell, cell._computedStyle.background, cell._computedStyle.color, cell._computedStyle.stroke);
@@ -1501,13 +1522,13 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
             });
         }
 
-        if (currentTags.length > 0) {
+        if (currentTags.length > 0 || currentExcludeTags.length > 0) {
             Object.keys(cellsByElementId).forEach(function(elementId) {
                 var cell = cellsByElementId[elementId];
                 var element = structurizr.workspace.findElementById(cell.elementInView.id);
 
                 const tags = structurizr.workspace.getAllTagsForElement(element);
-                if (hasTags(tags) === false) {
+                if (areHiddenTags(tags)) {
                     hideElement(element.id, "0.2");
                 } else {
                     showElement(element.id);
@@ -1518,7 +1539,7 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                 var relationship = structurizr.workspace.findRelationshipById(line.relationshipInView.id);
 
                 const tags = structurizr.workspace.getAllTagsForRelationship(relationship);
-                if (hasTags(tags) === false) {
+                if (areHiddenTags(tags)) {
                     hideLine(relationship.id, "0.2");
                 } else {
                     showLine(relationship.id);
@@ -1563,6 +1584,18 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
         return currentTags.length > 0;
     }
 
+    this.changeExcludeTags = function(tags) {
+        currentExcludeTags = tags;
+    };
+
+    this.clearExcludeTags = function() {
+        currentExcludeTags = [];
+    };
+
+    this.hasExcludeTags = function() {
+        return currentExcludeTags.length > 0;
+    }
+
     this.isEditable = function() {
         return editable;
     };

src/jsp/diagrams.jsp

@@ -176,6 +176,7 @@
 <%@ include file="/WEB-INF/fragments/diagrams/publish.jspf" %>
 <%@ include file="/WEB-INF/fragments/diagrams/perspectives.jspf" %>
 <%@ include file="/WEB-INF/fragments/diagrams/tags.jspf" %>
+<%@ include file="/WEB-INF/fragments/diagrams/exclude-tags.jspf" %>
 <%@ include file="/WEB-INF/fragments/diagrams/autolayout.jspf" %>
 <%@ include file="/WEB-INF/fragments/diagrams/no-views-model.jspf" %>
 <%@ include file="/WEB-INF/fragments/diagrams/lasso.jspf" %>
@@ -351,6 +352,7 @@
         initEmbed();
         initPerspectives();
         initTags();
+        initExcludeTags();
         initAutoLayout();
         initReview();
         healthCheck = new structurizr.HealthCheck(updateHealth);