Add guided drawing project foundation

src/components/app/pixel-forge-app.ts

@@ -15,6 +15,7 @@
 import "../dialogs/pf-resize-dialog";
 import "../dialogs/pf-export-dialog";
 import "../dialogs/pf-new-project-dialog";
+import "../dialogs/pf-paint-by-number-dialog";
 import "../dialogs/pf-grid-settings-dialog";
 import "../dialogs/pf-checker-settings-dialog";
 import "../dialogs/pf-accent-color-dialog";
@@ -235,6 +236,7 @@
   @state() showResizeDialog = false;
   @state() showExportDialog = false;
   @state() showNewProjectDialog = false;
+  @state() showPaintByNumberDialog = false;
   @state() showProjectBrowser = false;
   @state() showDeleteCurrentDialog = false;
   @state() showKeyboardShortcutsDialog = false;
@@ -265,6 +267,10 @@
       "show-new-project-dialog",
       this.handleShowNewProjectDialog
     );
+    window.addEventListener(
+      "show-paint-by-number-dialog",
+      this.handleShowPaintByNumberDialog
+    );
     window.addEventListener(
       "show-keyboard-shortcuts-dialog",
       this.handleShowKeyboardShortcutsDialog
@@ -333,6 +339,19 @@
     this.showNewProjectDialog = true;
   };
 
+  private handleShowPaintByNumberDialog = () => {
+    this.showProjectBrowser = false;
+    this.showPaintByNumberDialog = true;
+  };
+
+  private handlePaintByNumberDialogClose = () => {
+    this.showPaintByNumberDialog = false;
+
+    if (!this.hasLibraryProject) {
+      this.showProjectBrowser = true;
+    }
+  };
+
   private handleNewProjectDialogClose = () => {
     this.showNewProjectDialog = false;
 
@@ -351,7 +370,7 @@
 
   private handleShowOpenFileDialog = () => {
     // Trigger the menu bar's open file method
     const menuBar = this.shadowRoot?.querySelector("pf-menu-bar") as any;
     menuBar?.openFile();
   };
 
@@ -394,6 +413,7 @@
   private handleProjectCreated = () => {
     this.hasLibraryProject = true;
     this.showNewProjectDialog = false;
+    this.showPaintByNumberDialog = false;
     this.showProjectBrowser = false;
   };
 
@@ -483,6 +503,10 @@
       "show-new-project-dialog",
       this.handleShowNewProjectDialog
     );
+    window.removeEventListener(
+      "show-paint-by-number-dialog",
+      this.handleShowPaintByNumberDialog
+    );
     window.removeEventListener(
       "show-keyboard-shortcuts-dialog",
       this.handleShowKeyboardShortcutsDialog
@@ -569,6 +593,7 @@
           @resize-canvas=${() => (this.showResizeDialog = true)}
           @show-export-dialog=${() => (this.showExportDialog = true)}
           @show-new-project-dialog=${this.handleShowNewProjectDialog}
+          @show-paint-by-number-dialog=${this.handleShowPaintByNumberDialog}
           @show-project-browser=${() => (this.showProjectBrowser = true)}
         ></pf-menu-bar>
       </header>
@@ -647,6 +672,12 @@
         @project-created=${this.handleProjectCreated}
       ></pf-new-project-dialog>
 
+      <pf-paint-by-number-dialog
+        ?open=${this.showPaintByNumberDialog}
+        @close=${this.handlePaintByNumberDialogClose}
+        @project-created=${this.handleProjectCreated}
+      ></pf-paint-by-number-dialog>
+
       ${this.showProjectBrowser
         ? html`
             <pf-project-browser