Add p5.js example download and update dependencies

Introduces a Gradle task to download and extract p5.js examples for use in the project. Updates dependencies to use material3 components and changes theme usage in p5jsEditor.kt. Also sets Electron window 'alwaysOnTop' to false and fixes a reference to SketchException.

Author: Stefterv

p5js/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.jetbrains.compose.internal.de.undercouch.gradle.tasks.download.Download
+
 plugins {
     kotlin("jvm") version libs.versions.kotlin
     kotlin("plugin.serialization") version "1.9.0"
@@ -15,6 +17,7 @@ repositories {
 
 dependencies {
     compileOnly(project(":app"))
+    compileOnly(project(":app:utils"))
     implementation(project(":core"))
 
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
@@ -27,10 +30,33 @@ dependencies {
     implementation(compose.ui)
     implementation(compose.components.resources)
     implementation(compose.components.uiToolingPreview)
+    implementation(libs.material3)
+}
+
+tasks.register<Download>("includeP5jsExamples"){
+    val examples = layout.buildDirectory.file("tmp/p5-examples.zip")
+    src("https://github.com/processing/p5.js-website/archive/refs/heads/2.0.zip")
+    dest(examples)
+    overwrite(false)
+    doLast{
+        copy{
+            from(zipTree(examples)){ // remove top level directory
+                include("*/src/content/examples/en/**/*")
+                eachFile { relativePath = RelativePath(true, *relativePath.segments.drop(5).toTypedArray()) }
+                eachFile{
+                    if(name != "code.js"){ return@eachFile }
+
+                    val parentName = this.file.parentFile.name
+                    name = "$parentName.js"
+                }
+            }
+            into(layout.buildDirectory.dir("mode/examples/Basics"))
+        }
+    }
 }
 
 tasks.register<Copy>("createMode") {
-    dependsOn("jar")
+    dependsOn("jar", "includeP5jsExamples")
     into(layout.buildDirectory.dir("mode"))
     // TODO Why is there a duplicate in the first place?
     duplicatesStrategy = DuplicatesStrategy.WARN

p5js/js/electron/main.js

@@ -7,7 +7,7 @@ const createWindow = () => {
     height: 400,
     show: false,
     autoHideMenuBar: true,
-    alwaysOnTop: true,
+    alwaysOnTop: false,
     webPreferences: {
       contextIsolation: false,
       nodeIntegration: true,

p5js/src/main/kotlin/p5jsEditor.kt

@@ -3,10 +3,10 @@ package processing.p5js
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.material.Button
-import androidx.compose.material.Divider
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.Divider
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -27,7 +27,7 @@ import processing.app.syntax.JEditTextArea
 import processing.app.syntax.PdeTextArea
 import processing.app.syntax.PdeTextAreaDefaults
 import processing.app.ui.*
-import processing.app.ui.theme.ProcessingTheme
+import processing.app.ui.theme.PDETheme
 import java.awt.event.ActionEvent
 import java.awt.event.ActionListener
 import java.io.BufferedReader
@@ -188,9 +188,11 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
 
     override fun createFooter(): EditorFooter {
         val footer = super.createFooter()
+        return footer;
+
         val composePanel = ComposePanel()
         composePanel.setContent {
-            ProcessingTheme {
+            PDETheme(darkTheme = false) {
                 var packageToInstall by remember { mutableStateOf("") }
                 var packagesSearched by remember { mutableStateOf(listOf<String>()) }
                 Row(
@@ -310,7 +312,7 @@ class p5jsEditor(base: Base, path: String?, state: EditorState?, mode: Mode?): E
                     // TODO: more robust data exchange, double-check with @Stef
                     // TODO: `statusError` does not do anything with column of a SketchException
                     val ( msgType, msgText, msgFile, msgLine, msgCol ) = line.split("|")
-                    statusError(SketchException(msgText, 0, msgLine.toInt()-1, msgCol.toInt()))
+                    statusError(processing.utils.SketchException(msgText, 0, msgLine.toInt()-1, msgCol.toInt()))
                     continue
                 }