-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add visual indicator when an object also have tree in hierarchy view #70
(#126) Signed-off-by: tdruez <tdruez@nexb.com>
- Loading branch information
Showing
14 changed files
with
197 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 61 additions & 79 deletions
140
component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,66 @@ | ||
| <script> | ||
| function isTabActive(id) { | ||
| const activeTab = document.querySelector('.tab-pane.active'); | ||
| if (activeTab) { | ||
| return activeTab.id === id; | ||
| } | ||
| return false; | ||
| } | ||
| {% extends "hierarchy_base.js.html" %} | ||
|
|
||
| jsPlumb.ready(function() { | ||
| var jsPlumbComponentHierarchy = jsPlumb.getInstance({ | ||
| Connector: ['Straight'], | ||
| PaintStyle: {strokeStyle: 'gray', lineWidth: 1}, | ||
| EndpointStyle: {radius: 3, fillStyle: 'gray'}, | ||
| Anchors: ['LeftMiddle', 'RightMiddle'], | ||
| Container: $("#tab_hierarchy") | ||
| }); | ||
| {% block herarchy_js_content %} | ||
| // Connect related_parents | ||
| {% for related_parent in related_parents %} | ||
| var source_id = 'component_{{ object.pk }}'; | ||
| var target_id = 'component_{{ related_parent.parent.pk }}'; | ||
| var connectionOptions = { | ||
| source: source_id, | ||
| target: target_id, | ||
| paintStyle: {strokeStyle: 'gray', lineWidth: 2} | ||
| }; | ||
| {% if object.dataspace.show_usage_policy_in_user_views and related_parent.usage_policy %} | ||
| var fill_color = '{{ related_parent.get_usage_policy_color }}'; | ||
| connectionOptions['endpointStyle'] = {fillStyle: fill_color, radius: 4}; | ||
| connectionOptions['paintStyle'] = {strokeStyle: fill_color, lineWidth: 2}; | ||
| {% endif %} | ||
| {% if not related_parent.is_deployed %} | ||
| connectionOptions['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| connectNodes(jsPlumbHierarchy, connectionOptions); | ||
|
|
||
| // Do not draw right away as the tab may be hidden | ||
| jsPlumbComponentHierarchy.setSuspendDrawing(true); | ||
| {% for related_parent in related_parents %} | ||
| var connection = { | ||
| source: 'component_{{ object.pk }}', | ||
| target: 'component_{{ related_parent.parent.pk }}', | ||
| paintStyle: {strokeStyle: 'gray', lineWidth: 2} | ||
| }; | ||
| {% if object.dataspace.show_usage_policy_in_user_views and related_parent.usage_policy %} | ||
| var fill_color = '{{ related_parent.get_usage_policy_color }}'; | ||
| connection['endpointStyle'] = {fillStyle: fill_color, radius: 4}; | ||
| connection['paintStyle'] = {strokeStyle: fill_color, lineWidth: 2}; | ||
| {% endif %} | ||
| {% if not related_parent.is_deployed %} | ||
| connection['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| jsPlumbComponentHierarchy.connect(connection); | ||
| {% endfor %} | ||
| {% if related_parent.parent_count > 0 %} | ||
| var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy'; | ||
| addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl); | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| {% for productcomponent in productcomponents %} | ||
| var connection = { | ||
| source: 'component_{{ object.pk }}', | ||
| target: 'product_{{ productcomponent.product.pk }}', | ||
| paintStyle: {strokeStyle: 'grey', lineWidth: 2} | ||
| }; | ||
| {% if not productcomponent.is_deployed %} | ||
| connection['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| jsPlumbComponentHierarchy.connect(connection); | ||
| {% endfor %} | ||
| // Connect products (productcomponents) | ||
| {% for productcomponent in productcomponents %} | ||
| var connectionOptions = { | ||
| source: 'component_{{ object.pk }}', | ||
| target: 'product_{{ productcomponent.product.pk }}', | ||
| paintStyle: {strokeStyle: 'grey', lineWidth: 2} | ||
| }; | ||
| {% if not productcomponent.is_deployed %} | ||
| connectionOptions['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| connectNodes(jsPlumbHierarchy, connectionOptions); | ||
| {% endfor %} | ||
|
|
||
| {% for related_child in related_children %} | ||
| var connection = { | ||
| source: 'component_{{ related_child.child.pk }}', | ||
| target: 'component_{{ object.pk }}', | ||
| paintStyle: {strokeStyle: 'gray', lineWidth: 2} | ||
| }; | ||
| {% if object.dataspace.show_usage_policy_in_user_views and related_child.usage_policy %} | ||
| var fill_color = '{{ related_child.get_usage_policy_color }}'; | ||
| connection['endpointStyle'] = {fillStyle: fill_color, radius: 4}; | ||
| connection['paintStyle'] = {strokeStyle: fill_color, lineWidth: 2}; | ||
| {% endif %} | ||
| {% if not related_parent.is_deployed %} | ||
| connection['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| jsPlumbComponentHierarchy.connect(connection); | ||
| {% endfor %} | ||
| // Connect related_children | ||
| {% for related_child in related_children %} | ||
| var source_id = 'component_{{ related_child.child.pk }}'; | ||
| var target_id = 'component_{{ object.pk }}'; | ||
| var connectionOptions = { | ||
| source: source_id, | ||
| target: target_id, | ||
| paintStyle: {strokeStyle: 'gray', lineWidth: 2} | ||
| }; | ||
| {% if object.dataspace.show_usage_policy_in_user_views and related_child.usage_policy %} | ||
| var fill_color = '{{ related_child.get_usage_policy_color }}'; | ||
| connectionOptions['endpointStyle'] = {fillStyle: fill_color, radius: 4}; | ||
| connectionOptions['paintStyle'] = {strokeStyle: fill_color, lineWidth: 2}; | ||
| {% endif %} | ||
| {% if not related_child.is_deployed %} | ||
| connectionOptions['paintStyle']['dashstyle'] = '2 2'; | ||
| {% endif %} | ||
| connectNodes(jsPlumbHierarchy, connectionOptions); | ||
|
|
||
| // Draw if the related tab is active | ||
| if (isTabActive("tab_hierarchy")) | ||
| jsPlumbComponentHierarchy.setSuspendDrawing(false, true); | ||
|
|
||
| // Repaint on opening the tab, as when the tab content is hidden | ||
| // the connectors are not painted properly | ||
| $('button[data-bs-target="#tab_hierarchy"]').on('shown.bs.tab', function (e) { | ||
| // Second argument instructs jsPlumb to perform a full repaint. | ||
| jsPlumbComponentHierarchy.setSuspendDrawing(false, true); | ||
| }); | ||
|
|
||
| // Repaint on resizing the browser window if the related tab is active | ||
| $(window).resize(function(){ | ||
| if (isTabActive("tab_hierarchy")) | ||
| jsPlumbComponentHierarchy.repaintEverything(); | ||
| }); | ||
| }); | ||
| </script> | ||
| {% if related_child.child_count > 0 %} | ||
| var linkUrl = '{{ related_child.child.get_absolute_url }}#hierarchy'; | ||
| addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl); | ||
| {% endif %} | ||
| {% endfor %} | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <script> | ||
| const tabId = "{{ tab_name|default:"tab_hierarchy" }}" | ||
|
|
||
| function isTabActive(id) { | ||
| const activeTab = document.querySelector('.tab-pane.active'); | ||
| return activeTab ? activeTab.id === id : false; | ||
| } | ||
|
|
||
| function addEndpointWithLink(jsPlumbInstance, elementId, position, linkUrl) { | ||
| const endpointOptions = { | ||
| paintStyle: {fillStyle: '#2e73d0', radius: 5}, | ||
| anchors: [position] | ||
| } | ||
|
|
||
| const endpoint = jsPlumbInstance.addEndpoint(elementId, endpointOptions); | ||
| wrapEndpointInLink(endpoint.canvas, linkUrl); | ||
| return endpoint; | ||
| } | ||
|
|
||
| function wrapEndpointInLink(svgElement, linkUrl) { | ||
| const linkElement = document.createElement('a'); | ||
| linkElement.href = linkUrl; | ||
| svgElement.parentNode.insertBefore(linkElement, svgElement); | ||
| linkElement.appendChild(svgElement); | ||
| } | ||
|
|
||
| function connectNodes(jsPlumbHierarchy, connectionOptions) { | ||
| jsPlumbHierarchy.connect(connectionOptions); | ||
| } | ||
|
|
||
| jsPlumb.ready(function() { | ||
| const jsPlumbHierarchy = jsPlumb.getInstance({ | ||
| Connector: ['Straight'], | ||
| PaintStyle: {strokeStyle: 'gray', lineWidth: 1}, | ||
| EndpointStyle: {radius: 3, fillStyle: 'gray'}, | ||
| Anchors: ['LeftMiddle', 'RightMiddle'], | ||
| Container: document.querySelector("#tab_hierarchy") | ||
| }); | ||
|
|
||
| // Do not draw right away as the tab may be hidden | ||
| jsPlumbHierarchy.setSuspendDrawing(true); | ||
|
|
||
| // Draw if the hierarchy tab is active | ||
| if (isTabActive(tabId)) jsPlumbHierarchy.setSuspendDrawing(false, true); | ||
|
|
||
| document.querySelector('button[data-bs-target="#tab_hierarchy"]').addEventListener('shown.bs.tab', function (e) { | ||
| // Second argument instructs jsPlumb to perform a full repaint. | ||
| jsPlumbHierarchy.setSuspendDrawing(false, true); | ||
| }); | ||
|
|
||
| // Repaint on resizing the browser window if the related tab is active | ||
| window.addEventListener('resize', function(){ | ||
| if (isTabActive(tabId)) jsPlumbHierarchy.repaintEverything(); | ||
| }); | ||
|
|
||
| {% block herarchy_js_content %}{% endblock %} | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.