Compatible Types

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;

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() {