From a6770e047c5b8c936b99b525a15af767ae3dc7d2 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 24 Dec 2020 17:36:24 +0100 Subject: [PATCH] Line Images Working --- Client/WebServer/css/docs.css | 8 + .../UI/Spaces/Docs-Space/DocsSpace.js | 164 ++++++++++++++---- 2 files changed, 134 insertions(+), 38 deletions(-) diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css index 9c5bd1b81..f3f1952bc 100644 --- a/Client/WebServer/css/docs.css +++ b/Client/WebServer/css/docs.css @@ -67,6 +67,14 @@ margin-right: auto; width: 100%; } +.docs-hierarchy-image-container { +padding: 0px 0px 0px 0px; +border: solid 0px; +margin-left: auto; +margin-right: auto; +width: 100%; +} + /* Link without tooltip */ .docs-link { position: relative; diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js index c7522c70d..77560a921 100644 --- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js +++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js @@ -1830,6 +1830,7 @@ function newSuperalgosDocSpace() { function buildHtmlPage() { let definitionImagesArray = [] + let hierarchyImagesArray = [] let HTML = '' HTML = HTML + '
' @@ -1884,7 +1885,7 @@ function newSuperalgosDocSpace() { if (category === 'Node') { let imageItem = { - div: 'definitionImageDiv-' + definitionImagesArray.length, + div: 'definition-image-div-' + definitionImagesArray.length, project: project, category: category, type: type @@ -2074,6 +2075,7 @@ function newSuperalgosDocSpace() { function addImages() { addProjectImage() addDefinitionImage() + addhHerarchyImages() if (objectBeingRendered.category === 'Node') { addMenuItemsImages() @@ -2104,6 +2106,34 @@ function newSuperalgosDocSpace() { } } + function addhHerarchyImages() { + for (let i = 0; i < hierarchyImagesArray.length; i++) { + let imageItem = hierarchyImagesArray[i] + let collectionImage + + if (imageItem.name === undefined) { + let appSchemaDocument = SCHEMAS_BY_PROJECT.get(imageItem.project).map.appSchema.get(imageItem.type) + if (appSchemaDocument.icon === undefined) { + let imageName = appSchemaDocument.type.toLowerCase().replaceAll(' ', '-') + collectionImage = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(imageItem.project, imageName) + } else { + collectionImage = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndType(imageItem.project, imageItem.type) + } + } else { + collectionImage = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(imageItem.project, imageItem.name) + } + + + let imageElement = collectionImage.cloneNode() + + //imageElement.width = "150" + //imageElement.height = "150" + + let hierarchyImageDiv = document.getElementById(imageItem.div) + hierarchyImageDiv.appendChild(imageElement) + } + } + function addProjectImage() { let imageName = objectBeingRendered.project.toLowerCase().replaceAll(' ', '-') let imageElement = UI.projects.superalgos.spaces.designSpace.getIconByProjectAndName(objectBeingRendered.project, imageName) @@ -2980,6 +3010,13 @@ function newSuperalgosDocSpace() { let currentRow = -1 scanHierarchy(appSchemaDocument, project, currentColumn) + fillEmptySpaces() + putTheLines() + addImageContainers() + + let HTML = '' + addHTML() + return HTML function scanHierarchy(schemaDocument, project, currentColumn, lastChild) { @@ -3017,49 +3054,100 @@ function newSuperalgosDocSpace() { scanHierarchy(childSchemaDocument, childProject, currentColumn + 1, lastChild) } } - /* - Fill the empty spaces - */ - for (let i = 0; i < contentMatrix.length; i++) { - let matrixRow = contentMatrix[i] - for (let j = 0; j < matrixRow.length; j++) { - if (matrixRow[j] === '') { - matrixRow[j] = SPACE + + function fillEmptySpaces() { + /* + Fill the empty spaces + */ + for (let i = 0; i < contentMatrix.length; i++) { + let matrixRow = contentMatrix[i] + for (let j = 0; j < matrixRow.length; j++) { + if (matrixRow[j] === '') { + matrixRow[j] = SPACE + } } } } - /* - Now we will scan the Matrix to put the lines of the hirierchy. - */ - for (let i = 0; i < contentMatrix.length; i++) { - let matrixRow = contentMatrix[i] - let previousRow = contentMatrix[i - 1] - for (let j = 0; j < matrixRow.length; j++) { - if (previousRow && matrixRow[j] === SPACE) { - if (previousRow[j] === FORK || previousRow[j]=== LINE) { - matrixRow[j] = LINE - } - } - } - } - /* - Add HTML - */ - let HTML = '' - HTML = HTML + '' - for (let i = 0; i < contentMatrix.length; i++) { - let matrixRow = contentMatrix[i] - HTML = HTML + '' - for (let j = 0; j < matrixRow.length; j++) { - HTML = HTML + '' + function putTheLines() { + /* + Now we will scan the Matrix to put the lines of the hirierchy. + */ + for (let i = 0; i < contentMatrix.length; i++) { + let matrixRow = contentMatrix[i] + let previousRow = contentMatrix[i - 1] + for (let j = 0; j < matrixRow.length; j++) { + if (previousRow && matrixRow[j] === SPACE) { + if (previousRow[j] === FORK || previousRow[j] === LINE) { + matrixRow[j] = LINE + } + } + } } - HTML = HTML + '' } - HTML = HTML + '
' - HTML = HTML + matrixRow[j] - HTML = HTML + '
' - return HTML + + function addImageContainers() { + /* + Add Image Conatiners + */ + for (let i = 0; i < contentMatrix.length; i++) { + let matrixRow = contentMatrix[i] + for (let j = 0; j < matrixRow.length; j++) { + + let imageItem = { + div: 'hierarchy-image-div-' + hierarchyImagesArray.length, + project: 'Superalgos' + } + + switch (matrixRow[j]) { + case LINE: { + imageItem.name = 'tree-connector-line' + matrixRow[j] = '
' + hierarchyImagesArray.push(imageItem) + break + } + case SPACE: { + imageItem.name = 'tree-spacer' + matrixRow[j] = '
' + hierarchyImagesArray.push(imageItem) + break + } + case FORK: { + imageItem.name = 'tree-connector-fork' + matrixRow[j] = '
' + hierarchyImagesArray.push(imageItem) + break + } + case ELBOW: { + imageItem.name = 'tree-connector-elbow' + matrixRow[j] = '
' + hierarchyImagesArray.push(imageItem) + break + } + } + + } + } + } + + function addHTML() { + /* + Add HTML + */ + HTML = HTML + '' + for (let i = 0; i < contentMatrix.length; i++) { + let matrixRow = contentMatrix[i] + HTML = HTML + '' + for (let j = 0; j < matrixRow.length; j++) { + HTML = HTML + '' + + } + HTML = HTML + '' + } + HTML = HTML + '
' + HTML = HTML + matrixRow[j] + HTML = HTML + '
' + } } } }