-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refine code and remove duplication #70
Signed-off-by: tdruez <tdruez@nexb.com>
- Loading branch information
Showing
11 changed files
with
157 additions
and
209 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
172 changes: 61 additions & 111 deletions
172
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,116 +1,66 @@ | ||
| <script> | ||
| function isTabActive(id) { | ||
| const activeTab = document.querySelector('.tab-pane.active'); | ||
| return activeTab ? activeTab.id === id : false; | ||
| } | ||
| {% extends "hierarchy_base.js.html" %} | ||
|
|
||
| function addEndpointWithLink(jsPlumbInstance, elementId, position, linkUrl) { | ||
| const endpointOptions = { | ||
| paintStyle: {fillStyle: '#2e73d0', radius: 5}, | ||
| anchors: [position] | ||
| } | ||
| {% 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); | ||
|
|
||
| const endpoint = jsPlumbInstance.addEndpoint(elementId, endpointOptions); | ||
| wrapEndpointInLink(endpoint.canvas, linkUrl); | ||
| return endpoint; | ||
| } | ||
| {% if related_parent.parent.related_parents.exists %} | ||
| var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy'; | ||
| addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl); | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| function wrapEndpointInLink(svgElement, linkUrl) { | ||
| const linkElement = document.createElement('a'); | ||
| linkElement.href = linkUrl; | ||
| svgElement.parentNode.insertBefore(linkElement, svgElement); | ||
| linkElement.appendChild(svgElement); | ||
| } | ||
| // 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 %} | ||
|
|
||
| function connectNodes(jsPlumbHierarchy, connectionOptions) { | ||
| jsPlumbHierarchy.connect(connectionOptions); | ||
| } | ||
| // 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); | ||
|
|
||
| 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") | ||
| }); | ||
|
|
||
| jsPlumbHierarchy.setSuspendDrawing(true); | ||
|
|
||
| // 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); | ||
|
|
||
| {% if related_parent.parent.related_parents.exists %} | ||
| var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy'; | ||
| addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl); | ||
| {% endif %} | ||
| {% 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 %} | ||
|
|
||
| // 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); | ||
|
|
||
| {% if related_child.child.children.exists %} | ||
| var linkUrl = '{{ related_child.child.get_absolute_url }}#hierarchy'; | ||
| addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl); | ||
| {% endif %} | ||
| {% endfor %} | ||
|
|
||
| // Draw if the hierarchy tab is active | ||
| if (isTabActive("tab_hierarchy")) 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("tab_hierarchy")) jsPlumbHierarchy.repaintEverything(); | ||
| }); | ||
| }); | ||
| </script> | ||
| {% if related_child.child.children.exists %} | ||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <script> | ||
| 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("tab_hierarchy")) 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("tab_hierarchy")) 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
44 changes: 6 additions & 38 deletions
44
organization/templates/organization/includes/owner_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,42 +1,10 @@ | ||
| <script> | ||
| function is_active_tab(id) { | ||
| var active_tab_id = $('.tab-pane.active')[0].id; | ||
| return (active_tab_id == id); | ||
| } | ||
| {% extends "hierarchy_base.js.html" %} | ||
|
|
||
| jsPlumb.ready(function() { | ||
| var jsPlumbOwnerHierarchy = jsPlumb.getInstance({ | ||
| Connector: ['Straight'], | ||
| PaintStyle: {strokeStyle: 'gray', lineWidth: 1}, | ||
| EndpointStyle: {radius: 3, fillStyle: 'gray'}, | ||
| Anchors: ['LeftMiddle', 'RightMiddle'], | ||
| Container: $("#{{ tab_name }}") | ||
| }); | ||
|
|
||
| // Do not draw right away as the tab may be hidden | ||
| jsPlumbOwnerHierarchy.setSuspendDrawing(true); | ||
| {% for parent in parents %} | ||
| jsPlumbOwnerHierarchy.connect({source: 'owner_{{ current_owner.pk }}', target: 'owner_{{ parent.pk }}'}); | ||
| {% block herarchy_js_content %} | ||
| {% for parent in parents %} | ||
| jsPlumbHierarchy.connect({source: 'owner_{{ current_owner.pk }}', target: 'owner_{{ parent.pk }}'}); | ||
| {% endfor %} | ||
| {% for child in children %} | ||
| jsPlumbOwnerHierarchy.connect({source: 'owner_{{ child.pk }}', target: 'owner_{{ current_owner.pk }}'}); | ||
| jsPlumbHierarchy.connect({source: 'owner_{{ child.pk }}', target: 'owner_{{ current_owner.pk }}'}); | ||
| {% endfor %} | ||
|
|
||
| // Draw if the related tab is active | ||
| if (is_active_tab("{{ tab_name }}")) | ||
| jsPlumbOwnerHierarchy.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_name }}"]').on('shown.bs.tab', function (e) { | ||
| // Second argument instructs jsPlumb to perform a full repaint. | ||
| jsPlumbOwnerHierarchy.setSuspendDrawing(false, true); | ||
| }); | ||
|
|
||
| // Repaint on resizing the browser window if the related tab is active | ||
| $(window).resize(function(){ | ||
| if (is_active_tab("{{ tab_name }}")) | ||
| jsPlumbOwnerHierarchy.repaintEverything(); | ||
| }); | ||
| }); | ||
| </script> | ||
| {% 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
Oops, something went wrong.