From 474b039aaa88775e91f293ad6879a705afaa37ad Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Tue, 29 Apr 2025 02:35:15 +0000 Subject: [PATCH 1/3] feat: implement restore tutorial canvas functionality in SettingsDialog - Added a confirmation dialog for restoring the tutorial canvas, including warning messages about data loss. - Implemented the restore functionality with a button that triggers the canvas reset process. - Enhanced styling for the new buttons and confirmation section in SettingsDialog.scss. --- src/frontend/src/ui/SettingsDialog.scss | 74 +++++++++++++++++++++++ src/frontend/src/ui/SettingsDialog.tsx | 78 +++++++++++++++++++++++++ 2 files changed, 152 insertions(+) diff --git a/src/frontend/src/ui/SettingsDialog.scss b/src/frontend/src/ui/SettingsDialog.scss index aff6ccb..9c8452a 100644 --- a/src/frontend/src/ui/SettingsDialog.scss +++ b/src/frontend/src/ui/SettingsDialog.scss @@ -59,4 +59,78 @@ margin: 1rem 0; } + &__restore-button { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + background-color: var(--button-bg-color, #cc6d24); + border: 1px solid var(--button-border-color, #ddd); + border-radius: 4px; + color: var(--text-primary-color); + cursor: pointer; + font-size: 0.9rem; + transition: background-color 0.2s ease; + + &:hover { + background-color: var(--button-hover-bg-color, #a4571b); + } + } + + &__confirmation { + padding: 1rem; + border-radius: 4px; + background-color: var(--dialog-bg-color); + border: 1px solid var(--warning-color, #f0ad4e); + } + + &__warning { + color: var(--warning-color, #f0ad4e); + font-weight: bold; + margin: 1rem 0; + } + + &__actions { + display: flex; + gap: 8px; + margin-top: 1rem; + } + + &__button { + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; + border: none; + transition: background-color 0.2s ease; + + &--restore { + background-color: var(--danger-color, #d9534f); + color: white; + + &:hover { + background-color: var(--danger-hover-color, #c9302c); + } + + &:disabled { + background-color: var(--disabled-color, #cccccc); + cursor: not-allowed; + } + } + + &--cancel { + background-color: var(--button-bg-color, #cc6d24); + border: 1px solid var(--button-border-color, #ddd); + color: var(--text-primary-color); + + &:hover { + background-color: var(--button-hover-bg-color, #a4571b); + } + + &:disabled { + background-color: var(--disabled-color, #cccccc); + cursor: not-allowed; + } + } + } } diff --git a/src/frontend/src/ui/SettingsDialog.tsx b/src/frontend/src/ui/SettingsDialog.tsx index fe86076..fa247a2 100644 --- a/src/frontend/src/ui/SettingsDialog.tsx +++ b/src/frontend/src/ui/SettingsDialog.tsx @@ -2,6 +2,9 @@ import React, { useState, useCallback, useEffect } from "react"; import { Dialog } from "@atyrode/excalidraw"; import { Range } from "./Range"; import { UserSettings, DEFAULT_SETTINGS } from "../types/settings"; +import { RefreshCw } from "lucide-react"; +import { normalizeCanvasData } from "../utils/canvasUtils"; +import { capture } from "../utils/posthog"; import "./SettingsDialog.scss"; interface SettingsDialogProps { @@ -15,6 +18,8 @@ const SettingsDialog: React.FC = ({ }) => { const [modalIsShown, setModalIsShown] = useState(true); const [settings, setSettings] = useState(DEFAULT_SETTINGS); + const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false); + const [isRestoring, setIsRestoring] = useState(false); // Get current settings from excalidrawAPI when component mounts useEffect(() => { @@ -35,6 +40,43 @@ const SettingsDialog: React.FC = ({ } }, [onClose]); + const handleRestoreTutorialCanvas = async () => { + if (!excalidrawAPI) return; + + try { + setIsRestoring(true); + capture('restore_tutorial_canvas_clicked'); + + // Fetch the default canvas data from the backend + const response = await fetch('/api/canvas/default', { + method: 'GET', + credentials: 'include' + }); + + if (!response.ok) { + throw new Error(`Failed to fetch default canvas: ${response.statusText}`); + } + + const defaultCanvasData = await response.json(); + + // Normalize the canvas data before updating the scene + const normalizedData = normalizeCanvasData(defaultCanvasData); + + // Update the canvas with the normalized default data + excalidrawAPI.updateScene(normalizedData); + + console.log("Canvas reset to default successfully"); + + // Close the dialog after successful restore + handleClose(); + } catch (error) { + console.error("Failed to reset canvas:", error); + } finally { + setIsRestoring(false); + setShowRestoreConfirmation(false); + } + }; + /** * Updates a specific setting and syncs it with the excalidraw app state * @param key The setting key to update @@ -92,6 +134,42 @@ const SettingsDialog: React.FC = ({ + +
+

Canvas Management

+ {showRestoreConfirmation ? ( +
+

Are you sure you want to restore the tutorial canvas?

+

This will replace your current canvas and cannot be undone!

+
+ + +
+
+ ) : ( +
+ +
+ )} +
); From fb032c3f20f9cecaf397ef9a4e9b11dc546bf3bf Mon Sep 17 00:00:00 2001 From: Alex TYRODE Date: Tue, 29 Apr 2025 03:04:48 +0000 Subject: [PATCH 2/3] style: update SettingsDialog styles and button text - Removed margin-bottom from the setting class in SettingsDialog.scss for improved layout consistency. - Changed button text from "Yes, Restore" to "I'm sure" in SettingsDialog.tsx for clearer user confirmation. --- src/frontend/src/ui/SettingsDialog.scss | 1 - src/frontend/src/ui/SettingsDialog.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/frontend/src/ui/SettingsDialog.scss b/src/frontend/src/ui/SettingsDialog.scss index 9c8452a..53968ff 100644 --- a/src/frontend/src/ui/SettingsDialog.scss +++ b/src/frontend/src/ui/SettingsDialog.scss @@ -42,7 +42,6 @@ } &__setting { - margin-bottom: 1rem; padding: 0.5rem; border-radius: 4px; background-color: var(--dialog-bg-color); diff --git a/src/frontend/src/ui/SettingsDialog.tsx b/src/frontend/src/ui/SettingsDialog.tsx index fa247a2..6ab7540 100644 --- a/src/frontend/src/ui/SettingsDialog.tsx +++ b/src/frontend/src/ui/SettingsDialog.tsx @@ -147,7 +147,7 @@ const SettingsDialog: React.FC = ({ onClick={handleRestoreTutorialCanvas} disabled={isRestoring} > - {isRestoring ? "Restoring..." : "Yes, Restore"} + {isRestoring ? "Restoring..." : "I'm sure"}