diff --git a/COMET.Web.Common/COMET.Web.Common.csproj b/COMET.Web.Common/COMET.Web.Common.csproj index 51dbc863b..71f30d3ad 100644 --- a/COMET.Web.Common/COMET.Web.Common.csproj +++ b/COMET.Web.Common/COMET.Web.Common.csproj @@ -27,7 +27,7 @@ - + @@ -53,7 +53,4 @@ - - - \ No newline at end of file diff --git a/COMETwebapp.sln b/COMETwebapp.sln index f42c51b10..789e80657 100644 --- a/COMETwebapp.sln +++ b/COMETwebapp.sln @@ -31,10 +31,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Workflows", "Workflows", "{ .github\workflows\publish-docker-container.yml = .github\workflows\publish-docker-container.yml EndProjectSection EndProject -Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "CDP4Common", "..\COMET-SDK-Community-Edition\CDP4Common\CDP4Common.csproj", "{3BB827A8-4C73-4746-A898-50E09C5A6237}" -EndProject -Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "CDP4ServicesDal", "..\COMET-SDK-Community-Edition\CDP4ServicesDal\CDP4ServicesDal.csproj", "{F1DE6907-1F53-43BB-95D0-8344C63D3F8D}" -EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -59,14 +55,6 @@ Global {C1BEF589-7A99-4B95-A036-471259115495}.Debug|Any CPU.Build.0 = Debug|Any CPU {C1BEF589-7A99-4B95-A036-471259115495}.Release|Any CPU.ActiveCfg = Release|Any CPU {C1BEF589-7A99-4B95-A036-471259115495}.Release|Any CPU.Build.0 = Release|Any CPU - {3BB827A8-4C73-4746-A898-50E09C5A6237}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {3BB827A8-4C73-4746-A898-50E09C5A6237}.Debug|Any CPU.Build.0 = Debug|Any CPU - {3BB827A8-4C73-4746-A898-50E09C5A6237}.Release|Any CPU.ActiveCfg = Release|Any CPU - {3BB827A8-4C73-4746-A898-50E09C5A6237}.Release|Any CPU.Build.0 = Release|Any CPU - {F1DE6907-1F53-43BB-95D0-8344C63D3F8D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {F1DE6907-1F53-43BB-95D0-8344C63D3F8D}.Debug|Any CPU.Build.0 = Debug|Any CPU - {F1DE6907-1F53-43BB-95D0-8344C63D3F8D}.Release|Any CPU.ActiveCfg = Release|Any CPU - {F1DE6907-1F53-43BB-95D0-8344C63D3F8D}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE diff --git a/COMETwebapp/Components/BookEditor/BookEditorBody.razor b/COMETwebapp/Components/BookEditor/BookEditorBody.razor index ce7e5a607..97f6428e3 100644 --- a/COMETwebapp/Components/BookEditor/BookEditorBody.razor +++ b/COMETwebapp/Components/BookEditor/BookEditorBody.razor @@ -58,8 +58,7 @@ Items="@this.ViewModel.AvailableBooks.Items.ToList()" @bind-SelectedValue="@this.ViewModel.SelectedBook" OnCreateNewItemClick="@(() => this.ViewModel.IsOnBookCreation = true)" - LinesOnRight="true" - HorizontalLineHalfWidth="true" + DrawLeftLines="false" IsCollapsed="@this.IsBooksColumnCollapsed" CollapseButtonIconClass="no-display" CssClass="book-nodes"> @@ -97,7 +96,6 @@ diff --git a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor index 7a5416d9b..629d0fe5b 100644 --- a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor +++ b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor @@ -36,52 +36,68 @@
@if (this.Items != null && this.Items.Any()) { - - @{ - var isSelected = item.Equals(this.SelectedValue); - var conditionalClass = isSelected ? "selected" : ""; - var firstClass = item.Equals(this.Items.First()) && this.Items.Count > 1 ? "first" : ""; - var lastClass = item.Equals(this.Items.Last()) && this.Items.Count > 1 ? "last" : ""; +
- var fullWidthClass = this.HorizontalLineHalfWidth ? "" : "full-width"; - var rightSideClass = this.LinesOnRight ? "right-side" : ""; + + @{ + var isSelected = item.Equals(this.SelectedValue); + var isFirst = item.Equals(this.Items.First()) && this.Items.Count > 1; + var isLast = item.Equals(this.Items.Last()) && this.Items.Count > 1; + var conditionalClass = isSelected ? "selected" : ""; + var firstClass = isFirst ? "first" : ""; + var lastClass = isLast ? "last" : ""; - var index = this.Items.IndexOf(item); + var index = this.Items.IndexOf(item); -
- @if (!this.LinesOnRight) - { -
-
- } - + + @if (isSelected) { - @item.ToString() +
+ + + + +
} - +
+ } + + +
- @if (isSelected) - { -
- - - - -
- } -
- } - + + + } - - - \ No newline at end of file diff --git a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs index 41484ed26..50a753a0f 100644 --- a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs +++ b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs @@ -24,10 +24,10 @@ namespace COMETwebapp.Components.BookEditor { - using CDP4JsonSerializer.JsonConverter; - using COMETwebapp.Services.Interoperability; + using DynamicData; + using Microsoft.AspNetCore.Components; /// @@ -48,17 +48,11 @@ public partial class BookEditorColumn public string CollapseButtonIconClass { get; set; } /// - /// Gets or sets if the lines should be drawn in the right side - /// - [Parameter] - public bool LinesOnRight { get; set; } - - /// - /// Gets or sets if the first horizontal line should be the half width + /// Gets or sets if the lines should be drawn in the left side or not drawn at all /// [Parameter] - public bool HorizontalLineHalfWidth { get; set; } - + public bool DrawLeftLines { get; set; } = true; + /// /// Gets or sets the title of the header /// @@ -119,24 +113,29 @@ public partial class BookEditorColumn [Parameter] public string CssClass { get; set; } - + /// /// Hanlder for when the selected value changes /// /// the item selected + /// the index of the item selected /// an asynchronous operation private async Task OnSelectedValueChanged(TItem item, int itemIndex) { - try - { - this.firstItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(0, this.CssClass); - this.sizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(itemIndex, this.CssClass); - await this.SelectedValueChanged.InvokeAsync(item); - } - catch (Exception ex) - { + this.firstItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(0, this.CssClass, false); + this.sizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(itemIndex, this.CssClass, true); + await this.SelectedValueChanged.InvokeAsync(item); + } - } + /// + /// Callback method called from JS when an element performs scroll + /// + /// + public async Task OnScroll() + { + var itemIndex = this.Items.IndexOf(this.SelectedValue); + this.sizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(itemIndex, this.CssClass, true); + await this.InvokeAsync(this.StateHasChanged); } /// @@ -149,7 +148,7 @@ private string GeneratePathPoints() { return string.Empty; } - + var left = this.sizeAndPosition[0]; var top = this.sizeAndPosition[1]; var width = this.sizeAndPosition[2]; @@ -168,5 +167,29 @@ private string GeneratePathPoints() return $"{x1},{y1},{x2},{y2},{x3},{y3},{x4},{y4}"; } + + private (string verticalPath, string horizontalPath) GenerateLeftPathPoints(bool isFirst, bool isLast) + { + if (this.sizeAndPosition.Length < 4 || this.firstItemSizeAndPosition.Length < 4) + { + return (string.Empty, string.Empty); + } + + var top = this.sizeAndPosition[1]; + var width = this.sizeAndPosition[2]; + var height = this.sizeAndPosition[3]; + + var x1 = (int)(width*0.1); + var y1 = (int)(top); + var x2 = (int)(width*0.1); + var y2 = (int)(top + height); + + var x3 = (int)(width*0.0); + var y3 = (int)(top + height / 2.0f); + var x4 = (int)(width*0.2); + var y4 = (int)(top + height / 2.0f); + + return ($"{x1},{y1},{x2},{y2}",$"{x3},{y3},{x4},{y4}"); + } } } diff --git a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.css b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.css index 3f0b636be..13ac4e563 100644 --- a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.css +++ b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.css @@ -8,7 +8,7 @@ flex-direction: column; max-height: 85vh; border: 0px dashed #555; - padding: 5% 0%; + padding: 2.5% 0%; transition: all 1s; box-shadow: 0px 0px 4px rgba(0,0,0,0.2); } @@ -48,7 +48,6 @@ .column-content { width: 100%; height: 100%; - overflow-y: auto; display: flex; flex-direction: column; align-items: center; @@ -57,6 +56,16 @@ position: relative; } +.column-scroll-content { + width: 100%; + height: 100%; + overflow-y: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + .node-inner-content { position: relative; width: 100%; @@ -78,7 +87,7 @@ z-index: 1; } - .book-button:hover, .section-button:hover, .page-button:hover, .note-button:hover { + .book-button:hover { box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.2); } @@ -136,6 +145,20 @@ left: 50%; } + .horizontal-line.first-slice { + display:none; + width: 50%; + left: 0%; + border-top: 2px dashed red; + } + + .horizontal-line.first.first-slice { + display:block; + width: 20%; + left: 0%; + border-top: 2px dashed red; + } + .edit-node-container{ display: flex; flex-direction: column; diff --git a/COMETwebapp/Services/Interoperability/DomDataService.cs b/COMETwebapp/Services/Interoperability/DomDataService.cs index 0cdc6224a..895c820c5 100644 --- a/COMETwebapp/Services/Interoperability/DomDataService.cs +++ b/COMETwebapp/Services/Interoperability/DomDataService.cs @@ -24,7 +24,6 @@ namespace COMETwebapp.Services.Interoperability { - using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; /// @@ -45,10 +44,11 @@ public DomDataService(IJSRuntime jsRuntime) : base(jsRuntime) /// /// the index of the element to search /// the selector to use to select the items + /// If the scroll must be taken into account for the calculations /// the size and position - public async Task GetElementSizeAndPosition(int elementIndex, string cssSelector) + public async Task GetElementSizeAndPosition(int elementIndex, string cssSelector, bool useScroll) { - return await this.JsRuntime.InvokeAsync("GetElementSizeAndPosition", elementIndex, cssSelector); + return await this.JsRuntime.InvokeAsync("GetElementSizeAndPosition", elementIndex, cssSelector, useScroll); } } } diff --git a/COMETwebapp/Services/Interoperability/IDomDataService.cs b/COMETwebapp/Services/Interoperability/IDomDataService.cs index c05578593..4d9457ebf 100644 --- a/COMETwebapp/Services/Interoperability/IDomDataService.cs +++ b/COMETwebapp/Services/Interoperability/IDomDataService.cs @@ -24,8 +24,6 @@ namespace COMETwebapp.Services.Interoperability { - using Microsoft.AspNetCore.Components; - /// /// The service used to retrieve several data from the DOM /// @@ -36,7 +34,8 @@ public interface IDomDataService /// /// the index of the element to search /// the selector to use to select the items + /// If the scroll must be taken into account for the calculations /// the size and position - Task GetElementSizeAndPosition(int elementIndex, string cssSelector); + Task GetElementSizeAndPosition(int elementIndex, string cssSelector, bool useScroll); } } diff --git a/COMETwebapp/ViewModels/Components/BookEditor/BookEditorBodyViewModel.cs b/COMETwebapp/ViewModels/Components/BookEditor/BookEditorBodyViewModel.cs index a73ced0a8..c0a9219c6 100644 --- a/COMETwebapp/ViewModels/Components/BookEditor/BookEditorBodyViewModel.cs +++ b/COMETwebapp/ViewModels/Components/BookEditor/BookEditorBodyViewModel.cs @@ -238,7 +238,7 @@ protected override async Task OnIterationChanged() } this.ResetDataToCreate(); - this.CreateFakeData(); + //this.CreateFakeData(); this.IsLoading = false; } diff --git a/COMETwebapp/wwwroot/Scripts/DomData.js b/COMETwebapp/wwwroot/Scripts/DomData.js index e73b510d7..977428b55 100644 --- a/COMETwebapp/wwwroot/Scripts/DomData.js +++ b/COMETwebapp/wwwroot/Scripts/DomData.js @@ -1,16 +1,28 @@ -function GetElementSizeAndPosition(index, cssSelector) { +function GetElementSizeAndPosition(index, cssSelector, useScroll) { var elements = document.getElementsByClassName(cssSelector); var element = elements[index]; - console.log(elements); - if (element != null) { - try { - console.log(element); + + if (element != null) + { + try + { + if (useScroll) + { + console.log("Position using scroll...") + var offsetTop = element.getBoundingClientRect().top - element.offsetParent.getBoundingClientRect().top; + return [element.offsetLeft, offsetTop, element.offsetWidth, element.offsetHeight]; + } + + console.log("Position NOT using scroll...") return [element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight]; - } catch (error) { + } + catch (error) + { + console.log(error); return [0, 0, 0, 0]; } } - console.log("Element not found"); + return [0, 0, 0, 0]; -} \ No newline at end of file +}