From fee5559d5ab9381dd79e00494c7d506b4369cc53 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 13 Dec 2020 15:01:35 +0100
Subject: [PATCH] Compatible Types

---
 Client/WebServer/css/docs.css                 |  8 -----
 .../UI/Spaces/Docs-Space/DocsSpace.js         | 32 +++++++++++++++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index e1d6b3181..ca5eab277 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -383,14 +383,6 @@ height: 30px;
 vertical-align: middle;
 }
 
-.docs-children-nodes-property-image {
-margin-left: 25px;
-margin-right: 25px;
-width: 30px;
-height: 30px;
-vertical-align: middle;
-}
-
 /* This is the same Style as the collapsible counter part but will not hold any collapsed content inside. */
 .docs-non-collapsible-element {
 background-color: #fdfdfd;
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 490503823..7b97b0358 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -561,6 +561,7 @@ function newSuperalgosDocSpace() {
                 }
                 addMenuItemsImages()
                 addChildrenNodesPropertiesImages()
+                addAttachingRulesImages()
 
                 function addDefinitionImage(project) {
                     let imageElement
@@ -637,6 +638,37 @@ function newSuperalgosDocSpace() {
                         }
                     }
                 }
+
+                function addAttachingRulesImages() {
+                    if (nodeAppDefinition === undefined || (nodeAppDefinition.attachingRules === undefined && nodeAppDefinition.referencingRules === undefined)) { return }
+                    
+                    if (nodeAppDefinition.attachingRules !== undefined) {
+                        if (nodeAppDefinition.attachingRules.compatibleTypes !== undefined) {
+                            let splittedCompatibleTypes = nodeAppDefinition.attachingRules.compatibleTypes.split('->')
+                            imageForTheseNodes(splittedCompatibleTypes, 'attaching-rules-compatible-types')
+                        }
+                    }
+
+                    function imageForTheseNodes(nodeList, additionToKey) {
+                        for (let i = 0; i < nodeList.length; i++) {
+                            let listItem = nodeList[i]
+                            if (listItem === "") { continue }
+
+                            let collectionImage = getIcon()
+                            let imageElement = collectionImage.cloneNode()
+    
+                            imageElement.className = "docs-collapsible-image"
+    
+                            let parentElement = document.getElementById('docs-' + additionToKey + '-' + i + '')
+                            let dummyImage = parentElement.childNodes[0]
+                            parentElement.replaceChild(imageElement, dummyImage)
+    
+                            function getIcon() {
+                                return UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(objectBeingRendered.project, listItem)
+                            }
+                        }
+                    }
+                }
             }
 
             function autoGeneratedHtml() {