Initial commit: NexusArchitect Professional Workstation Overhaul
This commit is contained in:
Debian
@@ -0,0 +1,11 @@
|
||||
<button class="nexus-btn @Class" @onclick="OnClick" disabled="@Disabled" @attributes="AdditionalAttributes">
|
||||
@ChildContent
|
||||
</button>
|
||||
|
||||
@code {
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
[Parameter] public string Class { get; set; } = string.Empty;
|
||||
[Parameter] public EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> OnClick { get; set; }
|
||||
[Parameter] public bool Disabled { get; set; }
|
||||
[Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.nexus-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--nexus-card);
|
||||
color: var(--nexus-neon);
|
||||
border: 1px solid var(--nexus-neon);
|
||||
font-family: var(--nexus-font-sans);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 5px rgba(0, 255, 153, 0.1);
|
||||
}
|
||||
|
||||
.nexus-btn:hover:not(:disabled) {
|
||||
background-color: rgba(0, 255, 153, 0.1);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.3);
|
||||
}
|
||||
|
||||
.nexus-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.nexus-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
border-color: #555;
|
||||
color: #555;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<svg class="nexus-icon @Class" viewBox="0 0 24 24" fill="currentColor" width="@Size" height="@Size" @attributes="AdditionalAttributes">
|
||||
@switch (Name.ToLowerInvariant())
|
||||
{
|
||||
case "robot":
|
||||
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h5a2 2 0 0 1 2 2v2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2V9c0-1.1.9-2 2-2h5V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2zM8 11v4h8v-4H8zm-2 0H4v4h2v-4zm14 0h-2v4h2v-4z" />
|
||||
break;
|
||||
case "play":
|
||||
<path d="M8 5v14l11-7z" />
|
||||
break;
|
||||
case "check":
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
||||
break;
|
||||
case "search":
|
||||
<circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
|
||||
break;
|
||||
case "message-square":
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||||
break;
|
||||
case "settings":
|
||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" />
|
||||
break;
|
||||
case "bookmark":
|
||||
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
|
||||
break;
|
||||
case "target":
|
||||
<circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" />
|
||||
break;
|
||||
default:
|
||||
<!-- Fallback circle -->
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
break;
|
||||
}
|
||||
</svg>
|
||||
|
||||
@code {
|
||||
[Parameter] public string Name { get; set; } = string.Empty;
|
||||
[Parameter] public string Size { get; set; } = "24";
|
||||
[Parameter] public string Class { get; set; } = string.Empty;
|
||||
[Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,10 @@
|
||||
.nexus-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transition: fill 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.neon-glow {
|
||||
fill: var(--nexus-neon);
|
||||
filter: drop-shadow(0 0 4px var(--nexus-neon));
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="nexus-typography @VariantCssClass @Class" @attributes="AdditionalAttributes">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
[Parameter] public string Class { get; set; } = string.Empty;
|
||||
[Parameter] public TypographyVariant Variant { get; set; } = TypographyVariant.UI;
|
||||
[Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
private string VariantCssClass => Variant switch
|
||||
{
|
||||
TypographyVariant.Heading => "nexus-heading",
|
||||
TypographyVariant.Ebook => "nexus-ebook",
|
||||
TypographyVariant.UI => "nexus-ui",
|
||||
_ => "nexus-ui"
|
||||
};
|
||||
|
||||
public enum TypographyVariant
|
||||
{
|
||||
Heading,
|
||||
Ebook,
|
||||
UI
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.nexus-typography {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nexus-heading {
|
||||
font-family: var(--nexus-font-sans);
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nexus-ebook {
|
||||
font-family: var(--nexus-font-serif);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.65;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
.nexus-ui {
|
||||
font-family: var(--nexus-font-sans);
|
||||
font-size: 1rem;
|
||||
color: #cccccc;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@inject IQuizStateService QuizState
|
||||
|
||||
<div class="ai-bubble-container">
|
||||
<div class="ai-bubble">
|
||||
<div class="ai-avatar">
|
||||
<div class="avatar-ring"></div>
|
||||
<NexusIcon Name="robot" Size="48" Class="neon-pulse" />
|
||||
<div class="avatar-label">
|
||||
<span class="name">E-Czytnik</span>
|
||||
<span class="role">Asystent AI</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-content">
|
||||
<NexusTypography Variant="NexusTypography.TypographyVariant.UI">@Dialogue</NexusTypography>
|
||||
|
||||
<div class="ai-actions">
|
||||
<button class="action-btn ghost" @onclick='() => HandleActionClick("more")'>Pokaż więcej informacji</button>
|
||||
<button class="action-btn neon-border" @onclick='() => HandleActionClick("quiz")'>Rozwiąż quiz</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bubble-pointer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public string ContextBlockId { get; set; } = string.Empty;
|
||||
[Parameter] public string Dialogue { get; set; } = string.Empty;
|
||||
[Parameter] public List<string> Actions { get; set; } = new();
|
||||
[Parameter] public EventCallback<string> OnActionTriggered { get; set; }
|
||||
|
||||
private bool _isQuizMode = false;
|
||||
|
||||
private async Task HandleActionClick(string action)
|
||||
{
|
||||
if (action.Contains("quiz", StringComparison.OrdinalIgnoreCase))
|
||||
{
|
||||
_isQuizMode = true;
|
||||
QuizState.RequestQuiz(ContextBlockId);
|
||||
}
|
||||
|
||||
if (OnActionTriggered.HasDelegate)
|
||||
{
|
||||
await OnActionTriggered.InvokeAsync(action);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
.ai-bubble-container {
|
||||
margin: 2rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ai-bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(18, 18, 18, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ai-avatar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.avatar-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-label .name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.avatar-label .role {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.neon-pulse {
|
||||
color: var(--nexus-neon);
|
||||
filter: drop-shadow(0 0 8px var(--nexus-neon));
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); filter: drop-shadow(0 0 8px var(--nexus-neon)); }
|
||||
50% { transform: scale(1.05); filter: drop-shadow(0 0 15px var(--nexus-neon)); }
|
||||
100% { transform: scale(1); filter: drop-shadow(0 0 8px var(--nexus-neon)); }
|
||||
}
|
||||
|
||||
.ai-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ai-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: var(--nexus-font-sans);
|
||||
}
|
||||
|
||||
.action-btn.ghost {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.action-btn.neon-border {
|
||||
background: rgba(0, 255, 153, 0.1);
|
||||
border: 1px solid var(--nexus-neon);
|
||||
color: var(--nexus-neon);
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 153, 0.2);
|
||||
}
|
||||
|
||||
.bubble-pointer {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 10px solid rgba(18, 18, 18, 0.95);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@inject IFocusModeService FocusMode
|
||||
|
||||
<aside class="intelligence-toolbar">
|
||||
<div class="toolbar-top">
|
||||
<button class="toolbar-item" title="Back">
|
||||
<NexusIcon Name="play" Size="20" Class="rotate-180" />
|
||||
</button>
|
||||
<button class="toolbar-item active" title="Chat">
|
||||
<NexusIcon Name="message-square" Size="20" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-middle">
|
||||
<button class="toolbar-item" title="Settings">
|
||||
<NexusIcon Name="settings" Size="20" />
|
||||
</button>
|
||||
<button class="toolbar-item" title="Bookmarks">
|
||||
<NexusIcon Name="bookmark" Size="20" />
|
||||
</button>
|
||||
<button class="toolbar-item" title="Search">
|
||||
<NexusIcon Name="search" Size="20" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-bottom">
|
||||
<button class="toolbar-item @(FocusMode.IsFocusModeActive ? "active focus-active" : "")"
|
||||
@onclick="FocusMode.ToggleAsync" title="Focus Mode (F)">
|
||||
<NexusIcon Name="target" Size="20" />
|
||||
</button>
|
||||
<button class="toolbar-item" title="Global Settings">
|
||||
<NexusIcon Name="settings" Size="20" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@code {
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged += StateHasChanged;
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged -= StateHasChanged;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.intelligence-toolbar {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.toolbar-top, .toolbar-middle, .toolbar-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.toolbar-item:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.toolbar-item.active {
|
||||
color: var(--nexus-neon);
|
||||
}
|
||||
|
||||
.toolbar-item.focus-active {
|
||||
filter: drop-shadow(0 0 5px var(--nexus-neon));
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
@using MediatR
|
||||
@using NexusReader.Application.Queries.Quiz
|
||||
@using NexusReader.Application.Commands.Quiz
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@inject IMediator Mediator
|
||||
@inject IPlatformService PlatformService
|
||||
|
||||
<div class="knowledge-check">
|
||||
<div class="quiz-header">
|
||||
<span class="header-title">Sprawdzian Wiedzy</span>
|
||||
<button class="expand-btn">⌵</button>
|
||||
</div>
|
||||
|
||||
@if (_isLoading)
|
||||
{
|
||||
<div class="loading-state">Pobieranie pytań...</div>
|
||||
}
|
||||
else if (_quiz != null)
|
||||
{
|
||||
<div class="quiz-body">
|
||||
@foreach (var question in _quiz.Questions)
|
||||
{
|
||||
<div class="question-container">
|
||||
<p class="question-text">@question.Question</p>
|
||||
|
||||
<div class="options-list">
|
||||
@for (int i = 0; i < question.Options.Count; i++)
|
||||
{
|
||||
var index = i;
|
||||
var letter = (char)('A' + i);
|
||||
<button class="option-item @GetOptionClass(question, index)"
|
||||
@onclick="() => SelectOptionAsync(question, index)"
|
||||
disabled="@_states.ContainsKey(question)">
|
||||
<span class="option-letter">@letter)</span>
|
||||
<span class="option-text">@question.Options[index]</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="quiz-footer">
|
||||
<button class="submit-btn" disabled="@(!AllQuestionsAnswered())">Wyślij</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public string ContextBlockId { get; set; } = string.Empty;
|
||||
|
||||
private bool _isLoading = true;
|
||||
private QuizDto? _quiz;
|
||||
|
||||
private Dictionary<QuizQuestionDto, (int SelectedIndex, bool IsCorrect)> _states = new();
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
_isLoading = true;
|
||||
var query = new GetQuizQuestionsQuery(ContextBlockId);
|
||||
var result = await Mediator.Send(query);
|
||||
|
||||
if (result.IsSuccess)
|
||||
_quiz = result.Value;
|
||||
|
||||
_isLoading = false;
|
||||
}
|
||||
|
||||
private async Task SelectOptionAsync(QuizQuestionDto question, int index)
|
||||
{
|
||||
if (_states.ContainsKey(question)) return;
|
||||
|
||||
// Haptic feedback
|
||||
await PlatformService.VibrateAsync(40);
|
||||
|
||||
var cmd = new SubmitAnswerCommand(index, question.CorrectIndex);
|
||||
var res = await Mediator.Send(cmd);
|
||||
|
||||
_states[question] = (index, res.IsSuccess);
|
||||
|
||||
if (res.IsSuccess)
|
||||
await PlatformService.VibrateSuccessAsync();
|
||||
else
|
||||
await PlatformService.VibrateErrorAsync();
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private bool AllQuestionsAnswered()
|
||||
{
|
||||
return _quiz != null && _states.Count == _quiz.Questions.Count;
|
||||
}
|
||||
|
||||
|
||||
private string GetBlockClass(QuizQuestionDto question)
|
||||
{
|
||||
if (!_states.TryGetValue(question, out var state)) return "";
|
||||
return state.IsCorrect ? "state-correct" : "state-incorrect";
|
||||
}
|
||||
|
||||
private string GetOptionClass(QuizQuestionDto question, int index)
|
||||
{
|
||||
if (!_states.TryGetValue(question, out var state)) return "";
|
||||
|
||||
if (state.SelectedIndex == index)
|
||||
return state.IsCorrect ? "option-correct" : "option-incorrect";
|
||||
|
||||
if (state.IsCorrect == false && question.CorrectIndex == index)
|
||||
return "option-revealed-correct";
|
||||
|
||||
return "option-faded";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
.knowledge-check {
|
||||
padding: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.quiz-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--nexus-font-sans);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 0.95rem;
|
||||
color: #ccc;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.options-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 0.8rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-item:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.option-item.selected {
|
||||
border-color: var(--nexus-neon);
|
||||
background: rgba(0, 255, 153, 0.05);
|
||||
}
|
||||
|
||||
.option-letter {
|
||||
font-weight: 600;
|
||||
color: var(--nexus-neon);
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.quiz-footer {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 0.6rem 2.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submit-btn:not(:disabled) {
|
||||
background: var(--nexus-neon);
|
||||
color: #000;
|
||||
border-color: var(--nexus-neon);
|
||||
}
|
||||
|
||||
.option-correct {
|
||||
border-color: #00ff99 !important;
|
||||
background: rgba(0, 255, 153, 0.1) !important;
|
||||
}
|
||||
|
||||
.option-incorrect {
|
||||
border-color: #ff4444 !important;
|
||||
background: rgba(255, 68, 68, 0.1) !important;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
@using MediatR
|
||||
@using NexusReader.Application.Queries.Graph
|
||||
@using Microsoft.JSInterop
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@implements IAsyncDisposable
|
||||
@inject IMediator Mediator
|
||||
@inject IJSRuntime JS
|
||||
@inject IFocusModeService FocusMode
|
||||
|
||||
<div class="knowledge-graph-container" id="@ContainerId">
|
||||
@if (GraphData == null)
|
||||
{
|
||||
<div class="loading-state">
|
||||
<NexusIcon Name="robot" Size="48" Class="neon-glow" />
|
||||
<NexusTypography>Analyzing Chapter Nodes...</NexusTypography>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="graph-controls">
|
||||
<button class="zoom-btn" @onclick="ZoomIn" title="Zoom In">+</button>
|
||||
<button class="zoom-btn" @onclick="ZoomOut" title="Zoom Out">−</button>
|
||||
<button class="zoom-btn reset" @onclick="ZoomReset" title="Reset">⟲</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback<string> OnNodeSelected { get; set; }
|
||||
|
||||
private string ContainerId = "d3-graph-container";
|
||||
private GraphDataDto? GraphData;
|
||||
private IJSObjectReference? _module;
|
||||
private DotNetObjectReference<KnowledgeGraph>? _dotNetHelper;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged += HandleFocusSimulation;
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
var result = await Mediator.Send(new GetKnowledgeGraphQuery());
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
GraphData = result.Value;
|
||||
StateHasChanged();
|
||||
await InitializeGraphAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task InitializeGraphAsync()
|
||||
{
|
||||
_module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/knowledgeGraph.js");
|
||||
_dotNetHelper = DotNetObjectReference.Create(this);
|
||||
await _module.InvokeVoidAsync("mount", ContainerId, GraphData, _dotNetHelper);
|
||||
}
|
||||
|
||||
private async Task ZoomIn() => await (_module?.InvokeVoidAsync("zoomIn") ?? ValueTask.CompletedTask);
|
||||
private async Task ZoomOut() => await (_module?.InvokeVoidAsync("zoomOut") ?? ValueTask.CompletedTask);
|
||||
private async Task ZoomReset() => await (_module?.InvokeVoidAsync("zoomReset") ?? ValueTask.CompletedTask);
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnNodeClicked(string nodeId)
|
||||
{
|
||||
if (OnNodeSelected.HasDelegate)
|
||||
{
|
||||
await OnNodeSelected.InvokeAsync(nodeId);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private async void HandleFocusSimulation()
|
||||
{
|
||||
if (_module == null) return;
|
||||
try
|
||||
{
|
||||
if (FocusMode.IsFocusModeActive)
|
||||
await _module.InvokeVoidAsync("pause");
|
||||
else
|
||||
await _module.InvokeVoidAsync("resume");
|
||||
}
|
||||
catch { }
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged -= HandleFocusSimulation;
|
||||
try
|
||||
{
|
||||
if (_module is not null)
|
||||
{
|
||||
await _module.InvokeVoidAsync("unmount", ContainerId);
|
||||
await _module.DisposeAsync();
|
||||
}
|
||||
}
|
||||
catch (JSDisconnectedException)
|
||||
{
|
||||
// Ignored, the circuit is already closed
|
||||
}
|
||||
catch (TaskCanceledException)
|
||||
{
|
||||
// Ignored, the circuit is already closed
|
||||
}
|
||||
|
||||
_dotNetHelper?.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.knowledge-graph-container {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-controls {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(18, 18, 18, 0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.zoom-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--nexus-neon);
|
||||
border-color: var(--nexus-neon);
|
||||
}
|
||||
|
||||
.zoom-btn.reset {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
animation: pulse 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 0.6; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
::deep .nexus-node-active {
|
||||
stroke: var(--nexus-neon) !important;
|
||||
stroke-width: 2px !important;
|
||||
filter: drop-shadow(0 0 12px var(--nexus-neon));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.neon-glow {
|
||||
color: var(--nexus-neon);
|
||||
filter: drop-shadow(0 0 5px var(--nexus-neon));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
@using MediatR
|
||||
@using NexusReader.Application.Queries.Reader
|
||||
@using Microsoft.JSInterop
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@implements IDisposable
|
||||
@inject IMediator Mediator
|
||||
@inject IJSRuntime JS
|
||||
@inject IThemeService ThemeService
|
||||
@inject IFocusModeService FocusMode
|
||||
|
||||
<div class="reader-canvas theme-light">
|
||||
|
||||
|
||||
@if (ViewModel == null)
|
||||
{
|
||||
<NexusTypography Variant="NexusTypography.TypographyVariant.UI">@StatusMessage</NexusTypography>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="reader-flow-container">
|
||||
@foreach (var block in ViewModel.Blocks)
|
||||
{
|
||||
<div id="@block.Id" class="block-wrapper">
|
||||
@if (block is TextSegmentBlock textSegment)
|
||||
{
|
||||
<NexusTypography Variant="NexusTypography.TypographyVariant.Ebook">@textSegment.Content</NexusTypography>
|
||||
}
|
||||
else if (block is AiActionTriggerBlock aiTrigger)
|
||||
{
|
||||
<AiAssistantBubble
|
||||
ContextBlockId="@block.Id"
|
||||
Dialogue="@aiTrigger.Dialogue"
|
||||
Actions="@aiTrigger.ActionOptions"
|
||||
OnActionTriggered="HandleAiAction" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private ReaderPageViewModel? ViewModel;
|
||||
private string StatusMessage = "Loading chapter...";
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
ThemeService.OnThemeChanged += StateHasChanged;
|
||||
|
||||
var result = await Mediator.Send(new GetReaderPageQuery());
|
||||
if (result.IsSuccess)
|
||||
{
|
||||
ViewModel = result.Value;
|
||||
}
|
||||
else
|
||||
{
|
||||
StatusMessage = "Failed to load chapter content.";
|
||||
}
|
||||
}
|
||||
|
||||
private void HandleAiAction(string action)
|
||||
{
|
||||
Console.WriteLine($"Action Triggered from Bubble: {action}");
|
||||
}
|
||||
|
||||
public async Task ScrollToNodeAsync(string id)
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("eval", $"document.getElementById('{id}')?.scrollIntoView({{ behavior: 'smooth', block: 'center' }});");
|
||||
}
|
||||
catch { }
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
ThemeService.OnThemeChanged -= StateHasChanged;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.reader-canvas {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1rem;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.reader-flow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<footer class="reader-footer">
|
||||
<div class="footer-content">
|
||||
<div class="page-info">
|
||||
<span class="label">Postęp:</span>
|
||||
<span class="value">@Progress%</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" style="width: @Progress%"></div>
|
||||
</div>
|
||||
|
||||
<div class="meta-info">
|
||||
<span class="time">1:30</span>
|
||||
<span class="battery">45% 🔋</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@code {
|
||||
[Parameter] public int Progress { get; set; } = 45;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.reader-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #F9F9F9;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-family: var(--nexus-font-sans);
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
margin: 0 2rem;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ff99 0%, #00d4ff 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.page-info, .meta-info {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@inherits LayoutComponentBase
|
||||
@using NexusReader.Application.Abstractions.Services
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@using NexusReader.UI.Shared.Components.Molecules
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@inject IPlatformService PlatformService
|
||||
@inject IFocusModeService FocusMode
|
||||
|
||||
<div class="app-container @_platformClass @(FocusMode.IsFocusModeActive ? "focus-mode-active" : "")">
|
||||
<div class="reader-pane">
|
||||
<main>
|
||||
@Body
|
||||
</main>
|
||||
<ReaderFooter Progress="45" />
|
||||
</div>
|
||||
|
||||
<div class="intelligence-sidebar">
|
||||
<IntelligenceToolbar />
|
||||
<div class="intelligence-content">
|
||||
<div class="intelligence-header">
|
||||
<NexusIcon Name="robot" Size="20" Class="neon-glow" />
|
||||
<span>Asystent AI i Interaktywna Mapa</span>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
|
||||
<div class="intelligence-scroll-area">
|
||||
<KnowledgeGraph />
|
||||
<KnowledgeCheck />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private string _platformClass = "platform-desktop";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged += StateHasChanged;
|
||||
|
||||
var context = PlatformService.GetDeviceContext();
|
||||
if (context.IsSuccess)
|
||||
{
|
||||
_platformClass = context.Value.DeviceType switch
|
||||
{
|
||||
DeviceType.Phone or DeviceType.Tablet => "platform-mobile",
|
||||
_ => "platform-desktop"
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
FocusMode.OnFocusModeChanged -= StateHasChanged;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
.app-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 450px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #121212;
|
||||
transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
.reader-pane {
|
||||
background: #F9F9F9;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.intelligence-sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
width: 450px;
|
||||
height: 100%;
|
||||
background: #121212;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-container.focus-mode-active {
|
||||
grid-template-columns: 1fr 0px;
|
||||
}
|
||||
|
||||
.app-container.focus-mode-active .intelligence-sidebar {
|
||||
width: 0;
|
||||
border-left-width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.intelligence-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.intelligence-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
gap: 0.8rem;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-family: var(--nexus-font-sans);
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.intelligence-header .close-btn {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.intelligence-scroll-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding-bottom: 40px; /* footer height */
|
||||
}
|
||||
|
||||
/* Platform Specifics */
|
||||
.platform-mobile .intelligence-sidebar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
z-index: 100;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<script type="module" src="_content/NexusReader.UI.Shared/Layout/ReconnectModal.razor.js"></script>
|
||||
|
||||
|
||||
<dialog id="components-reconnect-modal" data-nosnippet>
|
||||
<div class="components-reconnect-container">
|
||||
<div class="components-rejoining-animation" aria-hidden="true">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<p class="components-reconnect-first-attempt-visible">
|
||||
Rejoining the server...
|
||||
</p>
|
||||
<p class="components-reconnect-repeated-attempt-visible">
|
||||
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
||||
</p>
|
||||
<p class="components-reconnect-failed-visible">
|
||||
Failed to rejoin.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-reconnect-button" class="components-reconnect-failed-visible">
|
||||
Retry
|
||||
</button>
|
||||
<p class="components-pause-visible">
|
||||
The session has been paused by the server.
|
||||
</p>
|
||||
<p class="components-resume-failed-visible">
|
||||
Failed to resume the session.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
|
||||
Resume
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
@@ -0,0 +1,157 @@
|
||||
.components-reconnect-first-attempt-visible,
|
||||
.components-reconnect-repeated-attempt-visible,
|
||||
.components-reconnect-failed-visible,
|
||||
.components-pause-visible,
|
||||
.components-resume-failed-visible,
|
||||
.components-rejoining-animation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-failed,
|
||||
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#components-reconnect-modal {
|
||||
background-color: white;
|
||||
width: 20rem;
|
||||
margin: 20vh auto;
|
||||
padding: 2rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
|
||||
animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
|
||||
&[open]
|
||||
|
||||
{
|
||||
animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#components-reconnect-modal::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-slideUp {
|
||||
0% {
|
||||
transform: translateY(30px) scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-fadeInOpacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-fadeOutOpacity {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.components-reconnect-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#components-reconnect-modal p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button {
|
||||
border: 0;
|
||||
background-color: #6b9ed2;
|
||||
color: white;
|
||||
padding: 4px 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button:hover {
|
||||
background-color: #3b6ea2;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button:active {
|
||||
background-color: #6b9ed2;
|
||||
}
|
||||
|
||||
.components-rejoining-animation {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.components-rejoining-animation div {
|
||||
position: absolute;
|
||||
border: 3px solid #0087ff;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
|
||||
.components-rejoining-animation div:nth-child(2) {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
@keyframes components-rejoining-animation {
|
||||
0% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
4.9% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
5% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// Set up event handlers
|
||||
const reconnectModal = document.getElementById("components-reconnect-modal");
|
||||
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
||||
|
||||
const retryButton = document.getElementById("components-reconnect-button");
|
||||
retryButton.addEventListener("click", retry);
|
||||
|
||||
const resumeButton = document.getElementById("components-resume-button");
|
||||
resumeButton.addEventListener("click", resume);
|
||||
|
||||
function handleReconnectStateChanged(event) {
|
||||
if (event.detail.state === "show") {
|
||||
reconnectModal.showModal();
|
||||
} else if (event.detail.state === "hide") {
|
||||
reconnectModal.close();
|
||||
} else if (event.detail.state === "failed") {
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
} else if (event.detail.state === "rejected") {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function retry() {
|
||||
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
|
||||
try {
|
||||
// Reconnect will asynchronously return:
|
||||
// - true to mean success
|
||||
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
||||
// - exception to mean we didn't reach the server (this can be sync or async)
|
||||
const successful = await Blazor.reconnect();
|
||||
if (!successful) {
|
||||
// We have been able to reach the server, but the circuit is no longer available.
|
||||
// We'll reload the page so the user can continue using the app as quickly as possible.
|
||||
const resumeSuccessful = await Blazor.resumeCircuit();
|
||||
if (!resumeSuccessful) {
|
||||
location.reload();
|
||||
} else {
|
||||
reconnectModal.close();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// We got an exception, server is currently unavailable
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
}
|
||||
}
|
||||
|
||||
async function resume() {
|
||||
try {
|
||||
const successful = await Blazor.resumeCircuit();
|
||||
if (!successful) {
|
||||
location.reload();
|
||||
}
|
||||
} catch {
|
||||
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function retryWhenDocumentBecomesVisible() {
|
||||
if (document.visibilityState === "visible") {
|
||||
await retry();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.7" />
|
||||
<PackageReference Include="MediatR" Version="12.1.1" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\NexusReader.Application\NexusReader.Application.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
@@ -0,0 +1,78 @@
|
||||
@page "/"
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@implements IAsyncDisposable
|
||||
@inject IQuizStateService QuizState
|
||||
@inject IFocusModeService FocusMode
|
||||
@inject IJSRuntime JS
|
||||
<PageTitle>Nexus E-Reader</PageTitle>
|
||||
|
||||
<div class="home-reader-container">
|
||||
<ReaderCanvas @ref="readerCanvas" />
|
||||
</div>
|
||||
|
||||
|
||||
@code {
|
||||
private ReaderCanvas? readerCanvas;
|
||||
private string? _activeQuizBlockId;
|
||||
|
||||
private IJSObjectReference? _interopModule;
|
||||
private IJSObjectReference? _keydownHandler;
|
||||
private DotNetObjectReference<Home>? _dotNetRef;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
QuizState.OnQuizRequested += HandleQuizRequested;
|
||||
FocusMode.OnFocusModeChanged += StateHasChanged;
|
||||
await FocusMode.InitializeAsync();
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
try {
|
||||
_interopModule = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/focusInterop.js");
|
||||
_dotNetRef = DotNetObjectReference.Create(this);
|
||||
_keydownHandler = await _interopModule.InvokeAsync<IJSObjectReference>("attachKeyboardListener", _dotNetRef);
|
||||
} catch { } /* ignored dynamically */
|
||||
}
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnFocusKeypressed()
|
||||
{
|
||||
await FocusMode.ToggleAsync();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task HandleNodeSelected(string nodeId)
|
||||
{
|
||||
if (readerCanvas != null)
|
||||
{
|
||||
await readerCanvas.ScrollToNodeAsync(nodeId);
|
||||
}
|
||||
}
|
||||
|
||||
private void HandleQuizRequested(string blockId)
|
||||
{
|
||||
_activeQuizBlockId = blockId;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
QuizState.OnQuizRequested -= HandleQuizRequested;
|
||||
FocusMode.OnFocusModeChanged -= StateHasChanged;
|
||||
|
||||
if (_interopModule != null && _keydownHandler != null)
|
||||
{
|
||||
try {
|
||||
await _interopModule.InvokeVoidAsync("detachKeyboardListener", _keydownHandler);
|
||||
await _interopModule.DisposeAsync();
|
||||
await _keydownHandler.DisposeAsync();
|
||||
} catch { } // Circuit disconnected catch explicitly
|
||||
}
|
||||
|
||||
_dotNetRef?.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.home-reader-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.reader-pane::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.reader-pane::-webkit-scrollbar-thumb {
|
||||
background-color: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
@@ -0,0 +1,6 @@
|
||||
<Router AppAssembly="@typeof(Routes).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
@@ -0,0 +1,44 @@
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed class FocusModeService : IFocusModeService
|
||||
{
|
||||
private readonly IJSRuntime _jsRuntime;
|
||||
public bool IsFocusModeActive { get; private set; }
|
||||
public event Action? OnFocusModeChanged;
|
||||
|
||||
public FocusModeService(IJSRuntime jsRuntime)
|
||||
{
|
||||
_jsRuntime = jsRuntime;
|
||||
}
|
||||
|
||||
public async Task InitializeAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
var value = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "nexus_focus_mode");
|
||||
if (value == "true" && !IsFocusModeActive)
|
||||
{
|
||||
IsFocusModeActive = true;
|
||||
OnFocusModeChanged?.Invoke();
|
||||
}
|
||||
}
|
||||
catch
|
||||
{
|
||||
// Ignored during pre-rendering or unsupported environments
|
||||
}
|
||||
}
|
||||
|
||||
public async Task ToggleAsync()
|
||||
{
|
||||
IsFocusModeActive = !IsFocusModeActive;
|
||||
OnFocusModeChanged?.Invoke();
|
||||
|
||||
try
|
||||
{
|
||||
await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "nexus_focus_mode", IsFocusModeActive ? "true" : "false");
|
||||
}
|
||||
catch { }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public interface IFocusModeService
|
||||
{
|
||||
bool IsFocusModeActive { get; }
|
||||
event Action? OnFocusModeChanged;
|
||||
Task InitializeAsync();
|
||||
Task ToggleAsync();
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public interface IQuizStateService
|
||||
{
|
||||
string? CurrentQuizBlockId { get; }
|
||||
event Action<string>? OnQuizRequested;
|
||||
void RequestQuiz(string blockId);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public interface IThemeService
|
||||
{
|
||||
bool IsLightMode { get; }
|
||||
event Action? OnThemeChanged;
|
||||
void ToggleTheme();
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed class QuizStateService : IQuizStateService
|
||||
{
|
||||
public string? CurrentQuizBlockId { get; private set; }
|
||||
public event Action<string>? OnQuizRequested;
|
||||
|
||||
public void RequestQuiz(string blockId)
|
||||
{
|
||||
CurrentQuizBlockId = blockId;
|
||||
OnQuizRequested?.Invoke(blockId);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed class ThemeService : IThemeService
|
||||
{
|
||||
public bool IsLightMode { get; private set; } = false;
|
||||
public event Action? OnThemeChanged;
|
||||
|
||||
public void ToggleTheme()
|
||||
{
|
||||
IsLightMode = !IsLightMode;
|
||||
OnThemeChanged?.Invoke();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.JSInterop
|
||||
@using NexusReader.UI.Shared
|
||||
@using NexusReader.UI.Shared.Layout
|
||||
@using NexusReader.UI.Shared.Components.Atoms
|
||||
@using NexusReader.UI.Shared.Components.Molecules
|
||||
@using NexusReader.UI.Shared.Components.Organisms
|
||||
@using NexusReader.UI.Shared.Services
|
||||
@@ -0,0 +1,76 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--nexus-neon: #00ff99;
|
||||
--nexus-bg: #121212;
|
||||
--nexus-card: #1a1a1a;
|
||||
--nexus-text: #ffffff;
|
||||
--nexus-paper: #F9F9F9;
|
||||
--nexus-font-sans: 'Inter', sans-serif;
|
||||
--nexus-font-serif: 'Merriweather', serif;
|
||||
|
||||
/* Safe Area Insets with fallbacks */
|
||||
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
||||
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
||||
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
||||
|
||||
/* Transitions */
|
||||
--nexus-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
.theme-light {
|
||||
--nexus-bg: var(--nexus-paper);
|
||||
--nexus-card: #ffffff;
|
||||
--nexus-text: #121212;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: var(--nexus-bg);
|
||||
color: var(--nexus-text);
|
||||
font-family: var(--nexus-font-sans);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
/* Handle Notches */
|
||||
padding-top: var(--safe-area-inset-top);
|
||||
padding-bottom: var(--safe-area-inset-bottom);
|
||||
padding-left: var(--safe-area-inset-left);
|
||||
padding-right: var(--safe-area-inset-right);
|
||||
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Platform Specific Tweaks */
|
||||
.platform-mobile .nexus-button {
|
||||
min-height: var(--touch-target-size);
|
||||
min-width: var(--touch-target-size);
|
||||
font-size: 1.1rem;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.platform-desktop .nexus-button {
|
||||
min-height: 36px;
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
/* D3.js Touch Optimization */
|
||||
svg {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
h1:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.blazor-error-boundary {
|
||||
background: #b32121;
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
margin: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 378 B |
@@ -0,0 +1,6 @@
|
||||
// This is a JavaScript module that is loaded on demand. It can export any number of
|
||||
// functions, and may import other JavaScript modules if required.
|
||||
|
||||
export function showPrompt(message) {
|
||||
return prompt(message, 'Type anything here');
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export function attachKeyboardListener(dotNetHelper) {
|
||||
const handler = (e) => {
|
||||
// Exclude inputs, textareas, etc.
|
||||
const activeNode = document.activeElement ? document.activeElement.nodeName.toLowerCase() : '';
|
||||
if (activeNode === 'input' || activeNode === 'textarea') return;
|
||||
|
||||
if (e.key === 'f' || e.key === 'F') {
|
||||
dotNetHelper.invokeMethodAsync('OnFocusKeypressed');
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handler);
|
||||
return handler;
|
||||
}
|
||||
|
||||
export function detachKeyboardListener(handler) {
|
||||
if (handler) {
|
||||
window.removeEventListener('keydown', handler);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
import * as d3 from 'https://esm.sh/d3@7';
|
||||
|
||||
let simulation;
|
||||
let zoomBehavior;
|
||||
let svgElement;
|
||||
|
||||
export function mount(containerId, data, dotNetHelper) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
const width = container.clientWidth || 400;
|
||||
const height = container.clientHeight || 400;
|
||||
|
||||
// Create SVG
|
||||
svgElement = d3.select(container).append("svg")
|
||||
.attr("viewBox", [0, 0, width, height])
|
||||
.attr("width", "100%")
|
||||
.attr("height", "100%");
|
||||
|
||||
// Radial gradient for Nebula effect
|
||||
const defs = svgElement.append("defs");
|
||||
const radialGradient = defs.append("radialGradient")
|
||||
.attr("id", "nebulaGlow")
|
||||
.attr("cx", "50%")
|
||||
.attr("cy", "50%")
|
||||
.attr("r", "50%");
|
||||
radialGradient.append("stop").attr("offset", "0%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 1);
|
||||
radialGradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 0);
|
||||
|
||||
// Root Group for Zoom
|
||||
const rootGroup = svgElement.append("g").attr("class", "zoom-containment");
|
||||
|
||||
// Badge Element (TU JESTEŚ)
|
||||
const badge = rootGroup.append("g")
|
||||
.attr("class", "active-badge")
|
||||
.style("display", "none");
|
||||
|
||||
badge.append("rect")
|
||||
.attr("x", -35)
|
||||
.attr("y", -35)
|
||||
.attr("width", 70)
|
||||
.attr("height", 20)
|
||||
.attr("rx", 10)
|
||||
.attr("fill", "var(--nexus-neon)");
|
||||
|
||||
badge.append("text")
|
||||
.text("TU JESTEŚ")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", -21)
|
||||
.attr("fill", "#000")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("font-size", "0.6rem");
|
||||
|
||||
// Attach Zoom Behavior
|
||||
zoomBehavior = d3.zoom()
|
||||
.scaleExtent([0.5, 4])
|
||||
.on("zoom", (e) => rootGroup.attr("transform", e.transform));
|
||||
|
||||
// Apply zoom but disable wheel interaction
|
||||
svgElement.call(zoomBehavior)
|
||||
.on("wheel.zoom", null);
|
||||
|
||||
|
||||
// Subtle Link Distance & Charge
|
||||
simulation = d3.forceSimulation(data.nodes)
|
||||
.force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
|
||||
.force("charge", d3.forceManyBody().strength(-300))
|
||||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||||
.force("collide", d3.forceCollide().radius(40));
|
||||
|
||||
// Links
|
||||
const link = rootGroup.append("g")
|
||||
.selectAll("path")
|
||||
.data(data.links)
|
||||
.join("path")
|
||||
.attr("stroke", "rgba(255,255,255,0.1)")
|
||||
.attr("fill", "none")
|
||||
.attr("stroke-width", 1.5);
|
||||
|
||||
// Nodes
|
||||
const node = rootGroup.append("g")
|
||||
.selectAll("g")
|
||||
.data(data.nodes)
|
||||
.join("g")
|
||||
.style("cursor", "pointer")
|
||||
.on("click", (e, d) => {
|
||||
// Remove active state from all, add to clicked
|
||||
node.selectAll(".node-pill").classed("nexus-node-active", false);
|
||||
d3.select(e.currentTarget).select(".node-pill").classed("nexus-node-active", true);
|
||||
|
||||
// Show badge
|
||||
badge.style("display", "block").datum(d);
|
||||
|
||||
dotNetHelper.invokeMethodAsync('OnNodeClicked', d.id);
|
||||
})
|
||||
.call(drag(simulation));
|
||||
|
||||
// Outer glow for nodes
|
||||
node.append("circle")
|
||||
.attr("r", 30)
|
||||
.attr("fill", "url(#nebulaGlow)")
|
||||
.attr("opacity", d => d.id === 'root' ? 0.6 : 0.2);
|
||||
|
||||
// Pill shape
|
||||
node.append("rect")
|
||||
.attr("class", "node-pill")
|
||||
.attr("x", d => -(d.label.length * 4 + 10))
|
||||
.attr("y", -12)
|
||||
.attr("width", d => d.label.length * 8 + 20)
|
||||
.attr("height", 24)
|
||||
.attr("rx", 12)
|
||||
.attr("fill", "rgba(30, 30, 30, 0.8)")
|
||||
.attr("stroke", "rgba(255, 255, 255, 0.1)")
|
||||
.attr("stroke-width", 1);
|
||||
|
||||
// Labels
|
||||
node.append("text")
|
||||
.text(d => d.label)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", 4)
|
||||
.attr("fill", "#ccc")
|
||||
.attr("font-family", "var(--nexus-font-sans)")
|
||||
.attr("font-size", "0.8rem");
|
||||
|
||||
simulation.on("tick", () => {
|
||||
link.attr("d", d => {
|
||||
const dx = d.target.x - d.source.x;
|
||||
const dy = d.target.y - d.source.y;
|
||||
const dr = Math.sqrt(dx * dx + dy * dy);
|
||||
return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
|
||||
});
|
||||
|
||||
node.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
|
||||
const activeData = badge.datum();
|
||||
if (activeData) {
|
||||
badge.attr("transform", `translate(${activeData.x},${activeData.y})`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function drag(simulation) {
|
||||
function dragstarted(event) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
event.subject.fx = event.subject.x;
|
||||
event.subject.fy = event.subject.y;
|
||||
}
|
||||
function dragged(event) {
|
||||
event.subject.fx = event.x;
|
||||
event.subject.fy = event.y;
|
||||
}
|
||||
function dragended(event) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
event.subject.fx = null;
|
||||
event.subject.fy = null;
|
||||
}
|
||||
return d3.drag()
|
||||
.on("start", dragstarted)
|
||||
.on("drag", dragged)
|
||||
.on("end", dragended);
|
||||
}
|
||||
|
||||
export function unmount(containerId) {
|
||||
if (simulation) {
|
||||
simulation.stop();
|
||||
}
|
||||
const container = document.getElementById(containerId);
|
||||
if (container) {
|
||||
container.innerHTML = ''; // clear svg
|
||||
}
|
||||
}
|
||||
|
||||
export function scrollToNode(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}
|
||||
|
||||
export function pause() {
|
||||
if (simulation) {
|
||||
simulation.stop();
|
||||
}
|
||||
}
|
||||
|
||||
export function zoomIn() {
|
||||
if (svgElement && zoomBehavior) {
|
||||
svgElement.transition().duration(300).call(zoomBehavior.scaleBy, 1.3);
|
||||
}
|
||||
}
|
||||
|
||||
export function zoomOut() {
|
||||
if (svgElement && zoomBehavior) {
|
||||
svgElement.transition().duration(300).call(zoomBehavior.scaleBy, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
export function zoomReset() {
|
||||
if (svgElement && zoomBehavior) {
|
||||
svgElement.transition().duration(500).call(zoomBehavior.transform, d3.zoomIdentity);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user