fix fal client errors

This adds all the z-layer work and context menus back for composition.
Also fixes the alpha issues and removes menus that are not needed for
now.

---------

Co-authored-by: CrossPr0duct <alicextensor@gmail.com>

.sqlx/query-b4470e607c005421dd8504b9f1d695080a581936ac6ce00b6f437b2764e741be.json

@@ -1,12 +1,12 @@
 {
   "db_name": "MySQL",
-  "query": "\n        INSERT INTO media_files\n        SET\n            token = ?,\n\n            media_class = ?,\n            media_type = ?,\n\n            is_user_upload = ?,\n            is_intermediate_system_file = ?,\n\n            origin_category = ?, \n            origin_product_category = ?, \n            maybe_origin_model_type = ?, \n            maybe_origin_model_token = ?, \n            maybe_origin_filename = ?,\n\n            is_batch_generated = ?,\n            maybe_batch_token = ?,\n\n            maybe_mime_type = ?,\n            file_size_bytes = ?,\n            maybe_duration_millis = ?,\n            maybe_audio_encoding = ?, \n            maybe_video_encoding = ?, \n            maybe_frame_width = ?, \n            maybe_frame_height = ?,\n            maybe_prompt_token = ?,\n            checksum_sha2 = ?,\n\n            maybe_title = ?,\n            maybe_text_transcript = ?,\n\n            maybe_scene_source_media_file_token = ?,\n\n            public_bucket_directory_hash = ?, \n            maybe_public_bucket_prefix = ?, \n            maybe_public_bucket_extension = ?, \n\n            maybe_creator_user_token = ?, \n            maybe_creator_anonymous_visitor_token = ?, \n\n            creator_ip_address = ?, \n            creator_set_visibility = ?, \n\n            maybe_creator_file_synthetic_id = ?, \n            maybe_creator_category_synthetic_id = ?,\n\n            extra_file_modification_info = ?,\n\n            maybe_mod_user_token = ?, \n            is_generated_on_prem = ?, \n            generated_by_worker = ?, \n            generated_by_cluster = ?\n        ",
+  "query": "\n        INSERT INTO media_files\n        SET\n            token = ?,\n\n            media_class = ?,\n            media_type = ?,\n\n            is_user_upload = ?,\n            is_intermediate_system_file = ?,\n\n            origin_category = ?, \n            origin_product_category = ?, \n            maybe_origin_model_type = ?, \n            maybe_origin_model_token = ?, \n            maybe_origin_filename = ?,\n\n            is_batch_generated = ?,\n            maybe_batch_token = ?,\n\n            maybe_mime_type = ?,\n            file_size_bytes = ?,\n            maybe_duration_millis = ?,\n            maybe_audio_encoding = ?, \n            maybe_video_encoding = ?, \n            maybe_frame_width = ?, \n            maybe_frame_height = ?,\n            maybe_prompt_token = ?,\n            checksum_sha2 = ?,\n            \n            maybe_engine_category = ?,\n\n            maybe_title = ?,\n            maybe_text_transcript = ?,\n\n            maybe_scene_source_media_file_token = ?,\n\n            public_bucket_directory_hash = ?, \n            maybe_public_bucket_prefix = ?, \n            maybe_public_bucket_extension = ?, \n\n            maybe_creator_user_token = ?, \n            maybe_creator_anonymous_visitor_token = ?, \n\n            creator_ip_address = ?, \n            creator_set_visibility = ?, \n\n            maybe_creator_file_synthetic_id = ?, \n            maybe_creator_category_synthetic_id = ?,\n\n            extra_file_modification_info = ?,\n\n            maybe_mod_user_token = ?, \n            is_generated_on_prem = ?, \n            generated_by_worker = ?, \n            generated_by_cluster = ?\n        ",
   "describe": {
     "columns": [],
     "parameters": {
-      "Right": 38
+      "Right": 39
     },
     "nullable": []
   },
-  "hash": "c58f414b5e4d0f0420d1894e2f40311e5613919f49f3ac91f81f5fc2bef1bea8"
+  "hash": "b4470e607c005421dd8504b9f1d695080a581936ac6ce00b6f437b2764e741be"
 }

Cargo.lock

@@ -648,6 +648,7 @@ name = "artcraft"
 version = "0.1.0"
 dependencies = [
  "anyhow",
+ "artcraft_api_defs",
  "base64 0.22.1",
  "build_metadata",
  "bytes 1.10.1",
@@ -659,6 +660,7 @@ dependencies = [
  "fal_client",
  "filesys",
  "futures 0.3.31",
+ "idempotency",
  "image",
  "indexmap 2.9.0",
  "log",
@@ -686,6 +688,7 @@ dependencies = [
  "tokio",
  "tokio-util",
  "url",
+ "web_base64",
  "workspace-build-acceleration",
 ]
 
@@ -3595,6 +3598,7 @@ dependencies = [
  "fal",
  "file_to_base64_url",
  "futures 0.3.31",
+ "log",
  "reqwest 0.12.15",
  "serde",
  "testing",
@@ -9994,6 +9998,7 @@ name = "storyteller_client"
 version = "0.0.1"
 dependencies = [
  "anyhow",
+ "artcraft_api_defs",
  "backoff",
  "chrono",
  "cookie 0.18.1",
@@ -12207,6 +12212,14 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "web_base64"
+version = "0.0.1"
+dependencies = [
+ "base64 0.22.1",
+ "workspace-build-acceleration",
+]
+
 [[package]]
 name = "web_scrapers"
 version = "0.0.1"

Cargo.toml

@@ -43,6 +43,7 @@ members = [
   "crates/lib/data/crockford",
   "crates/lib/data/datetimes",
   "crates/lib/data/primitives",
+  "crates/lib/data/web_base64",
   "crates/lib/deprecated/config", # TODO(bt, 2023-02-13): Deprecate or repurpose
   "crates/lib/deprecated/http_server_common", # TODO(bt, 2023-03-20): Move useful pieces to actix_helpers
   "crates/lib/dimensions",
@@ -228,3 +229,4 @@ shared_service_components = { path = "crates/lib/shared_service_components" }
 storyteller_client = { path = "crates/lib/api_clients/storyteller_client" }
 subprocess_common = { path = "crates/lib/subprocess_common" }
 tokens = { path = "crates/schema/public/tokens" }
+web_base64= { path = "crates/lib/data/web_base64" }

crates/desktop/artcraft/Cargo.toml

@@ -23,16 +23,19 @@ tauri-build = { version = "2.1.1", features = [] }
 workspace-build-acceleration = { workspace =  true }
 
 # Internal
+artcraft_api_defs = { workspace = true }
 build_metadata = { workspace = true }
 errors = { workspace = true }
 fal_client = { workspace = true }
 filesys = { workspace = true }
+idempotency = { workspace = true }
 memory_store = { workspace = true }
 mimetypes = { workspace = true }
 openai_sora_client = { workspace = true }
 primitives = { workspace = true }
 storyteller_client = { workspace = true }
 tokens = { workspace = true }
+web_base64 = { workspace = true }
 
 # External
 anyhow = { workspace = true }

crates/desktop/artcraft/src/core/artcraft_error.rs

@@ -0,0 +1,48 @@
+use std::error::Error;
+use std::fmt::{Display, Formatter};
+use storyteller_client::error::storyteller_error::StorytellerError;
+
+#[derive(Debug)]
+pub enum ArtcraftError {
+  AnyhowError(anyhow::Error),
+  DecodeError(base64::DecodeError),
+  IoError(std::io::Error),
+  StorytellerError(StorytellerError),
+}
+
+impl Error for ArtcraftError {}
+
+impl Display for ArtcraftError {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    match self {
+      Self::AnyhowError(e) => write!(f, "AnyhowError: {:?}", e),
+      Self::DecodeError(e) => write!(f, "DecodeError: {:?}", e),
+      Self::IoError(e) => write!(f, "IoError: {:?}", e),
+      Self::StorytellerError(e) => write!(f, "StorytellerError: {:?}", e),
+    }
+  }
+}
+
+impl From<anyhow::Error> for ArtcraftError {
+  fn from(value: anyhow::Error) -> Self {
+    Self::AnyhowError(value)
+  }
+}
+
+impl From<base64::DecodeError> for ArtcraftError {
+  fn from(value: base64::DecodeError) -> Self {
+    Self::DecodeError(value)
+  }
+}
+
+impl From<std::io::Error> for ArtcraftError {
+  fn from(value: std::io::Error) -> Self {
+    Self::IoError(value)
+  }
+}
+
+impl From<StorytellerError> for ArtcraftError {
+  fn from(value: StorytellerError) -> Self {
+    Self::StorytellerError(value)
+  }
+}

crates/desktop/artcraft/src/core/commands/enqueue/mod.rs

@@ -1 +1,2 @@
-pub mod image;
+pub mod image;
+pub mod object;

crates/desktop/artcraft/src/core/commands/enqueue/object/enqueue_image_to_3d_object_command.rs

@@ -0,0 +1,179 @@
+use crate::core::commands::enqueue::image::handle_fal::handle_fal;
+use crate::core::commands::enqueue::image::handle_sora::handle_sora;
+use crate::core::commands::enqueue::object::handle_object_fal::handle_object_fal;
+use crate::core::commands::enqueue::object::internal_object_error::InternalObjectError;
+use crate::core::commands::response::failure_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus};
+use crate::core::commands::response::shorthand::Response;
+use crate::core::commands::response::success_response_wrapper::SerializeMarker;
+use crate::core::events::sendable_event_trait::SendableEvent;
+use crate::core::state::data_dir::app_data_root::AppDataRoot;
+use crate::core::state::data_dir::trait_data_subdir::DataSubdir;
+use crate::core::utils::download_media_file_to_temp_dir::download_media_file_to_temp_dir;
+use crate::core::utils::get_url_file_extension::get_url_file_extension;
+use crate::core::utils::save_base64_image_to_temp_dir::save_base64_image_to_temp_dir;
+use crate::core::utils::simple_http_download::simple_http_download;
+use crate::core::utils::simple_http_download_to_tempfile::simple_http_download_to_tempfile;
+use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
+use crate::services::fal::state::fal_task_queue::FalTaskQueue;
+use crate::services::sora::state::read_sora_credentials_from_disk::read_sora_credentials_from_disk;
+use crate::services::sora::state::sora_credential_holder::SoraCredentialHolder;
+use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
+use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
+use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;
+use anyhow::anyhow;
+use base64::prelude::BASE64_STANDARD;
+use base64::{DecodeError, Engine};
+use errors::{AnyhowError, AnyhowResult};
+use fal_client::error::fal_error_plus::FalErrorPlus;
+use fal_client::requests::queue::image_gen::enqueue_flux_pro_ultra_text_to_image::{enqueue_flux_pro_ultra_text_to_image, FluxProUltraTextToImageArgs};
+use fal_client::requests::queue::image_gen::enqueue_recraft3_text_to_image::{enqueue_recraft3_text_to_image, Recraft3TextToImageArgs};
+use filesys::file_read_bytes::file_read_bytes;
+use image::codecs::png::{CompressionType, FilterType, PngEncoder};
+use image::{DynamicImage, EncodableLayout, ImageReader};
+use log::{debug, error, info, warn};
+use mimetypes::mimetype_info::mimetype_info::MimetypeInfo;
+use openai_sora_client::credentials::SoraCredentials;
+use openai_sora_client::creds::credential_migration::CredentialMigrationRef;
+use openai_sora_client::recipes::image_remix_with_session_auto_renew::{image_remix_with_session_auto_renew, ImageRemixAutoRenewRequest};
+use openai_sora_client::recipes::image_upload_from_file_with_session_auto_renew::{image_upload_from_file_with_session_auto_renew, ImageUploadFromFileAutoRenewRequest};
+use openai_sora_client::recipes::maybe_upgrade_or_renew_session::maybe_upgrade_or_renew_session;
+use openai_sora_client::requests::image_gen::common::{ImageSize, NumImages};
+use openai_sora_client::requests::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
+use openai_sora_client::requests::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
+use openai_sora_client::requests::upload::upload_media_from_file::sora_media_upload_from_file;
+use openai_sora_client::sora_error::SoraError;
+use reqwest::Url;
+use serde_derive::{Deserialize, Serialize};
+use std::fs::read_to_string;
+use std::io::{Cursor, Read, Write};
+use std::ops::Add;
+use std::path::PathBuf;
+use std::time::Duration;
+use storyteller_client::error::api_error::ApiError;
+use storyteller_client::error::api_error::ApiError::InternalServerError;
+use storyteller_client::media_files::get_media_file::{get_media_file, GetMediaFileSuccessResponse};
+use storyteller_client::media_files::upload_image_media_file_from_file::upload_image_media_file_from_file;
+use storyteller_client::utils::api_host::ApiHost;
+use tauri::{AppHandle, Emitter, Manager, State};
+use tempfile::NamedTempFile;
+use tokens::tokens::media_files::MediaFileToken;
+use crate::core::commands::enqueue::object::handle_object_artcraft::handle_object_artcraft;
+
+#[derive(Deserialize)]
+pub struct EnqueueImageTo3dObjectRequest {
+  /// Image media file; the image to remove the background from.
+  /// TODO: In the future we may support base64 images, URLs, or file paths here.
+  pub image_media_token: Option<MediaFileToken>,
+  
+  /// The model to use.
+  pub model: Option<EnqueueImageTo3dObjectModel>,
+}
+
+#[derive(Deserialize, Debug, Copy, Clone)]
+#[serde(rename_all = "snake_case")]
+pub enum EnqueueImageTo3dObjectModel {
+  #[serde(rename = "hunyuan_3d_2")]
+  Hunyuan3d2,
+}
+
+#[derive(Serialize)]
+pub struct EnqueueImageTo3dObjectSuccessResponse {
+}
+
+impl SerializeMarker for EnqueueImageTo3dObjectSuccessResponse {}
+
+#[derive(Serialize, Debug)]
+#[serde(rename_all = "snake_case")]
+pub enum EnqueueImageTo3dObjectErrorType {
+  /// Caller didn't specify a model
+  ModelNotSpecified,
+  /// Generic server error
+  ServerError,
+  /// No Fal API key available
+  NeedsFalApiKey,
+  /// Fal had an API error
+  FalError,
+  /// Needs to be logged into Artcraft
+  NeedsStorytellerCredentials,
+}
+
+#[tauri::command]
+pub async fn enqueue_image_to_3d_object_command(
+  app: AppHandle,
+  request: EnqueueImageTo3dObjectRequest,
+  app_data_root: State<'_, AppDataRoot>,
+  fal_creds_manager: State<'_, FalCredentialManager>,
+  fal_task_queue: State<'_, FalTaskQueue>,
+  storyteller_creds_manager: State<'_, StorytellerCredentialManager>,
+  sora_task_queue: State<'_, SoraTaskQueue>,
+) -> Response<EnqueueImageTo3dObjectSuccessResponse, EnqueueImageTo3dObjectErrorType, ()> {
+
+  info!("enqueue_image_to_3d_object_command called");
+
+  let result = handle_request(
+    &app,
+    request,
+    &app_data_root,
+    &fal_creds_manager,
+    &storyteller_creds_manager,
+    &fal_task_queue,
+  ).await;
+
+  match result {
+    Err(err) => {
+      error!("error: {:?}", err);
+
+      let mut status = CommandErrorStatus::ServerError;
+      let mut error_type = EnqueueImageTo3dObjectErrorType::ServerError;
+      let mut error_message = "A server error occurred. Please try again. If it continues, please tell our staff about the problem.";
+
+      match err {
+        InternalObjectError::NoModelSpecified => {
+          status = CommandErrorStatus::BadRequest;
+          error_type = EnqueueImageTo3dObjectErrorType::ModelNotSpecified;
+          error_message = "No model specified for image generation";
+        }
+        InternalObjectError::NeedsFalApiKey => {
+          status = CommandErrorStatus::Unauthorized;
+          error_type = EnqueueImageTo3dObjectErrorType::NeedsFalApiKey;
+          error_message = "You need to set a FAL api key";
+        },
+        InternalObjectError::NeedsStorytellerCredentials => {
+          status = CommandErrorStatus::Unauthorized;
+          error_type = EnqueueImageTo3dObjectErrorType::NeedsStorytellerCredentials;
+          error_message = "You need to be logged into Artcraft.";
+        }
+        _ => {}, // Fall-through
+      }
+
+      Err(CommandErrorResponseWrapper {
+        status,
+        error_message: Some(error_message.to_string()),
+        error_type: Some(error_type),
+        error_details: None,
+      })
+    }
+    Ok(()) => {
+      Ok(EnqueueImageTo3dObjectSuccessResponse {}.into())
+    }
+  }
+}
+
+
+pub async fn handle_request(
+  app: &AppHandle,
+  request: EnqueueImageTo3dObjectRequest,
+  app_data_root: &AppDataRoot,
+  fal_creds_manager: &FalCredentialManager,
+  storyteller_creds_manager: &StorytellerCredentialManager,
+  fal_task_queue: &FalTaskQueue,
+) -> Result<(), InternalObjectError> {
+
+  if fal_creds_manager.has_apparent_api_token()? {
+    handle_object_fal(&app, app_data_root, request, fal_creds_manager, fal_task_queue).await?;
+  } else {
+    handle_object_artcraft(request, &app, app_data_root, storyteller_creds_manager).await?;
+  }
+
+  Ok(())
+}

crates/desktop/artcraft/src/core/commands/enqueue/object/handle_object_artcraft.rs

@@ -0,0 +1,129 @@
+use crate::core::commands::enqueue::image::enqueue_text_to_image_command::{EnqueueTextToImageModel, EnqueueTextToImageRequest};
+use crate::core::commands::enqueue::object::enqueue_image_to_3d_object_command::{EnqueueImageTo3dObjectModel, EnqueueImageTo3dObjectRequest};
+use crate::core::commands::enqueue::object::internal_object_error::InternalObjectError;
+use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
+use crate::core::events::generation_events::common::{GenerationAction, GenerationServiceProvider};
+use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
+use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
+use crate::core::state::data_dir::app_data_root::AppDataRoot;
+use crate::core::utils::download_media_file_to_temp_dir::download_media_file_to_temp_dir;
+use crate::core::utils::save_base64_image_to_temp_dir::save_base64_image_to_temp_dir;
+use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
+use crate::services::fal::state::fal_task_queue::FalTaskQueue;
+use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
+use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
+use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;
+use anyhow::anyhow;
+use artcraft_api_defs::generate::object::generate_hunyuan_2_image_to_3d::GenerateHunyuan2ImageTo3dRequest;
+use fal_client::creds::fal_api_key::FalApiKey;
+use fal_client::requests::queue::enqueue_hunyuan2_image_to_3d::{enqueue_hunyuan2_image_to_3d, Hunyuan2Args};
+use fal_client::requests::queue::image_gen::enqueue_flux_pro_ultra_text_to_image::{enqueue_flux_pro_ultra_text_to_image, FluxProUltraTextToImageArgs};
+use fal_client::requests::queue::image_gen::enqueue_recraft3_text_to_image::{enqueue_recraft3_text_to_image, Recraft3TextToImageArgs};
+use idempotency::uuid::generate_random_uuid;
+use log::{error, info, warn};
+use storyteller_client::generate::object::generate_hunyuan2_image_to_3d::generate_hunyuan2_image_to_3d;
+use storyteller_client::utils::api_host::ApiHost;
+use tauri::{AppHandle, State};
+
+pub async fn handle_object_artcraft(
+  request: EnqueueImageTo3dObjectRequest,
+  app: &AppHandle,
+  app_data_root: &AppDataRoot,
+  storyteller_creds_manager: &StorytellerCredentialManager,
+) -> Result<(), InternalObjectError> {
+
+  let creds = match storyteller_creds_manager.get_credentials()? {
+    Some(creds) => creds,
+    None => {
+      error!("No Artcraft credentials are set. Can't perform action.");
+      let event =
+          GenerationEnqueueFailureEvent::no_artcraft_credentials(GenerationAction::ImageTo3d);
+
+      if let Err(err) = event.send(&app) {
+        error!("Failed to emit event: {:?}", err); // Fail open.
+      }
+      
+      return Err(InternalObjectError::NeedsStorytellerCredentials);
+    },
+  };
+  
+  //let api_key = fal_creds_manager.get_key_required()
+  //    .map_err(|err| {
+  //      error!("EnqueueTextToImage FAL api key required: {:?}", err);
+  //      InternalObjectError::NeedsFalApiKey
+  //    })?;
+
+
+  info!("Calling Artcraft image to 3d ...");
+
+
+  let uuid_idempotency_token = generate_random_uuid();
+  
+  let job_token = match request.model {
+    None => {
+      return Err(InternalObjectError::NoModelSpecified);
+    }
+    Some(EnqueueImageTo3dObjectModel::Hunyuan3d2) => {
+      info!("enqueue Hunyuan 3D 2.0");
+      let request = GenerateHunyuan2ImageTo3dRequest { 
+        uuid_idempotency_token,
+        media_file_token: request.image_media_token,
+      };
+      let result = generate_hunyuan2_image_to_3d(
+        &ApiHost::Storyteller,
+        Some(&creds),
+        request,
+      ).await;
+      match result {
+        Ok(enqueued) => {
+          info!("Successfully enqueued Artcraft Hunyuan 3D 2.0");
+          enqueued.inference_job_token
+        }
+        Err(err) => {
+          error!("Failed to use Artcraft Hunyuan 3D 2.0: {:?}", err);
+          return Err(InternalObjectError::StorytellerError(err));
+        }
+      }
+    }
+  };
+
+  info!("Successfully enqueued 3D generation");
+  
+  let event = GenerationEnqueueSuccessEvent {
+    action: GenerationAction::ImageTo3d,
+    service: GenerationServiceProvider::Artcraft,
+    model: None,
+  };
+  
+  if let Err(err) = event.send(app) {
+    error!("Failed to emit event: {:?}", err); // Fail open.
+  }
+  
+  //if let Err(err) = fal_task_queue.insert(&enqueued) {
+  //  error!("Failed to enqueue task: {:?}", err);
+  //  return Err(InternalObjectError::AnyhowError(anyhow!("Failed to enqueue task: {:?}", err)));
+  //}
+
+//  match result {
+//    Ok(enqueued) => {
+//    }
+//    Err(err) => {
+//      error!("Failed to enqueue image to 3d: {:?}", err);
+//
+//      let event = GenerationEnqueueFailureEvent {
+//        action: GenerationAction::ImageTo3d,
+//        service: GenerationServiceProvider::Fal,
+//        model: None,
+//        reason: None,
+//      };
+//
+//      if let Err(err) = event.send(app) {
+//        error!("Failed to emit event: {:?}", err); // Fail open.
+//      }
+//
+//      return Err(InternalObjectError::FalError(err));
+//    }
+//  }
+
+  Ok(())
+}

crates/desktop/artcraft/src/core/commands/enqueue/object/handle_object_fal.rs

@@ -0,0 +1,117 @@
+use crate::core::commands::enqueue::image::enqueue_text_to_image_command::{EnqueueTextToImageModel, EnqueueTextToImageRequest};
+use crate::core::commands::enqueue::object::enqueue_image_to_3d_object_command::{EnqueueImageTo3dObjectModel, EnqueueImageTo3dObjectRequest};
+use crate::core::commands::enqueue::object::internal_object_error::InternalObjectError;
+use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
+use crate::core::events::generation_events::common::{GenerationAction, GenerationServiceProvider};
+use crate::core::events::generation_events::generation_enqueue_failure_event::GenerationEnqueueFailureEvent;
+use crate::core::events::generation_events::generation_enqueue_success_event::GenerationEnqueueSuccessEvent;
+use crate::core::state::data_dir::app_data_root::AppDataRoot;
+use crate::core::utils::download_media_file_to_temp_dir::download_media_file_to_temp_dir;
+use crate::core::utils::save_base64_image_to_temp_dir::save_base64_image_to_temp_dir;
+use crate::services::fal::state::fal_credential_manager::FalCredentialManager;
+use crate::services::fal::state::fal_task_queue::FalTaskQueue;
+use crate::services::sora::state::sora_credential_manager::SoraCredentialManager;
+use crate::services::sora::state::sora_task_queue::SoraTaskQueue;
+use crate::services::storyteller::state::storyteller_credential_manager::StorytellerCredentialManager;
+use anyhow::anyhow;
+use fal_client::creds::fal_api_key::FalApiKey;
+use fal_client::requests::queue::enqueue_hunyuan2_image_to_3d::{enqueue_hunyuan2_image_to_3d, Hunyuan2Args};
+use fal_client::requests::queue::image_gen::enqueue_flux_pro_ultra_text_to_image::{enqueue_flux_pro_ultra_text_to_image, FluxProUltraTextToImageArgs};
+use fal_client::requests::queue::image_gen::enqueue_recraft3_text_to_image::{enqueue_recraft3_text_to_image, Recraft3TextToImageArgs};
+use log::{error, info, warn};
+use tauri::AppHandle;
+
+pub async fn handle_object_fal(
+  app: &AppHandle,
+  app_data_root: &AppDataRoot,
+  request: EnqueueImageTo3dObjectRequest,
+  fal_creds_manager: &FalCredentialManager,
+  fal_task_queue: &FalTaskQueue,
+) -> Result<(), InternalObjectError> {
+
+  let api_key = match fal_creds_manager.get_key()? {
+    Some(key) => key,
+    None => {
+      error!("No FAL API key is set. Can't perform action.");
+      let event =
+          GenerationEnqueueFailureEvent::no_fal_api_key(GenerationAction::GenerateImage);
+
+      if let Err(err) = event.send(&app) {
+        error!("Failed to emit event: {:?}", err); // Fail open.
+      }
+      
+      return Err(InternalObjectError::NeedsFalApiKey);
+    },
+  };
+  
+  //let api_key = fal_creds_manager.get_key_required()
+  //    .map_err(|err| {
+  //      error!("EnqueueTextToImage FAL api key required: {:?}", err);
+  //      InternalObjectError::NeedsFalApiKey
+  //    })?;
+
+  let mut temp_download;
+
+  if let Some(media_token) = request.image_media_token {
+    temp_download = download_media_file_to_temp_dir(&app_data_root, &media_token).await?;
+
+  } else {
+    return Err(InternalObjectError::AnyhowError(anyhow!("No image media token provided")));
+  }
+
+  info!("Calling FAL image to 3d ...");
+
+  let filename = temp_download.path().to_path_buf();
+
+  let result = match request.model {
+    None => {
+      return Err(InternalObjectError::NoModelSpecified);
+    }
+    Some(EnqueueImageTo3dObjectModel::Hunyuan3d2) => {
+      info!("enqueue Hunyuan 3D 2.0");
+      enqueue_hunyuan2_image_to_3d(Hunyuan2Args {
+        image_path: filename,
+        api_key: &api_key,
+      }).await
+    }
+  };
+
+  match result {
+    Ok(enqueued) => {
+      info!("Successfully enqueued text to image");
+
+      let event = GenerationEnqueueSuccessEvent {
+        action: GenerationAction::ImageTo3d,
+        service: GenerationServiceProvider::Fal,
+        model: None,
+      };
+
+      if let Err(err) = event.send(app) {
+        error!("Failed to emit event: {:?}", err); // Fail open.
+      }
+
+      if let Err(err) = fal_task_queue.insert(&enqueued) {
+        error!("Failed to enqueue task: {:?}", err);
+        return Err(InternalObjectError::AnyhowError(anyhow!("Failed to enqueue task: {:?}", err)));
+      }
+    }
+    Err(err) => {
+      error!("Failed to enqueue image to 3d: {:?}", err);
+
+      let event = GenerationEnqueueFailureEvent {
+        action: GenerationAction::ImageTo3d,
+        service: GenerationServiceProvider::Fal,
+        model: None,
+        reason: None,
+      };
+
+      if let Err(err) = event.send(app) {
+        error!("Failed to emit event: {:?}", err); // Fail open.
+      }
+
+      return Err(InternalObjectError::FalError(err));
+    }
+  }
+
+  Ok(())
+}

crates/desktop/artcraft/src/core/commands/enqueue/object/internal_object_error.rs

@@ -0,0 +1,65 @@
+use crate::core::artcraft_error::ArtcraftError;
+use anyhow::anyhow;
+use base64::DecodeError;
+use errors::AnyhowError;
+use fal_client::error::fal_error_plus::FalErrorPlus;
+use storyteller_client::error::api_error::ApiError;
+use storyteller_client::error::storyteller_error::StorytellerError;
+
+#[derive(Debug)]
+pub enum InternalObjectError {
+  NoModelSpecified,
+  NeedsFalApiKey,
+  NeedsSoraCredentials,
+  NeedsStorytellerCredentials,
+  FalError(FalErrorPlus),
+  AnyhowError(AnyhowError),
+  StorytellerError(StorytellerError),
+  StorytellerApiError(ApiError),
+  DecodeError(DecodeError),
+  IoError(std::io::Error),
+}
+
+impl From<AnyhowError> for InternalObjectError {
+  fn from(value: AnyhowError) -> Self {
+    Self::AnyhowError(value)
+  }
+}
+
+impl From<FalErrorPlus> for InternalObjectError {
+  fn from(value: FalErrorPlus) -> Self {
+    Self::FalError(value)
+  }
+}
+
+impl From<ApiError> for InternalObjectError {
+  fn from(value: ApiError) -> Self {
+    Self::StorytellerApiError(value)
+  }
+}
+
+impl From<DecodeError> for InternalObjectError {
+  fn from(value: DecodeError) -> Self {
+    Self::DecodeError(value)
+  }
+}
+
+impl From<std::io::Error> for InternalObjectError {
+  fn from(value: std::io::Error) -> Self {
+    Self::IoError(value)
+  }
+}
+
+impl From<ArtcraftError> for InternalObjectError {
+  fn from(value: ArtcraftError) -> Self {
+    match value {
+      ArtcraftError::AnyhowError(e) => Self::AnyhowError(e),
+      ArtcraftError::DecodeError(e) => Self::DecodeError(e),
+      ArtcraftError::IoError(e) => Self::IoError(e),
+      ArtcraftError::StorytellerError(e) => Self::StorytellerError(e),
+      _ => {
+        Self::AnyhowError(anyhow!("Other error: {:?}", value))
+      }
+    }
+  }
+}

crates/desktop/artcraft/src/core/commands/enqueue/object/mod.rs

@@ -0,0 +1,4 @@
+pub mod enqueue_image_to_3d_object_command;
+pub mod handle_object_artcraft;
+pub mod handle_object_fal;
+pub mod internal_object_error;

crates/desktop/artcraft/src/core/events/generation_events/common.rs

@@ -3,8 +3,9 @@ use serde::Serialize;
 #[derive(Debug, Copy, Clone, Serialize)]
 #[serde(rename_all = "snake_case")]
 pub enum GenerationServiceProvider {
-  Sora,
+  Artcraft,
   Fal,
+  Sora,
 }
 
 #[derive(Debug, Copy, Clone, Serialize)]

crates/desktop/artcraft/src/core/events/generation_events/generation_enqueue_failure_event.rs

@@ -19,6 +19,15 @@ impl BasicSendableEvent for GenerationEnqueueFailureEvent {
 }
 
 impl GenerationEnqueueFailureEvent {
+  pub fn no_artcraft_credentials(action: GenerationAction) -> Self {
+    Self {
+      action,
+      service: GenerationServiceProvider::Artcraft,
+      model: None,
+      reason: Some("Please log into Artcraft.".to_string()),
+    }
+  }
+  
   pub fn no_fal_api_key(action: GenerationAction) -> Self {
     Self {
       action,

crates/desktop/artcraft/src/core/mod.rs

@@ -1,3 +1,4 @@
+pub mod artcraft_error;
 pub mod commands;
 pub mod events;
 pub mod state;

crates/desktop/artcraft/src/core/state/data_dir/app_data_root.rs

@@ -33,6 +33,7 @@ pub struct AppDataRoot {
 impl AppDataRoot {
   pub fn create_default() -> anyhow::Result<Self> {
     let directory = get_default_data_dir()?;
+    println!("App data directory: {:?}", directory);
     Self::create_existing(directory)
   }
 

crates/desktop/artcraft/src/core/utils/download_media_file_to_temp_dir.rs

@@ -1,7 +1,7 @@
+use crate::core::artcraft_error::ArtcraftError;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
 use crate::core::utils::get_url_file_extension::get_url_file_extension;
 use crate::core::utils::simple_http_download_to_tempfile::simple_http_download_to_tempfile;
-use errors::AnyhowResult;
 use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tempfile::NamedTempFile;
@@ -9,7 +9,7 @@ use tokens::tokens::media_files::MediaFileToken;
 
 // TODO: Better more concrete error handling
 
-pub async fn download_media_file_to_temp_dir(app_data_root: &AppDataRoot, token: &MediaFileToken) -> AnyhowResult<NamedTempFile> {
+pub async fn download_media_file_to_temp_dir(app_data_root: &AppDataRoot, token: &MediaFileToken) -> Result<NamedTempFile, ArtcraftError> {
   let response = get_media_file(&ApiHost::Storyteller, token).await?;
 
   let media_file_url = &response.media_file.media_links.cdn_url;

crates/desktop/artcraft/src/core/utils/save_base64_image_to_temp_dir.rs

@@ -1,15 +1,12 @@
+use crate::core::artcraft_error::ArtcraftError;
 use crate::core::state::data_dir::app_data_root::AppDataRoot;
-use base64::prelude::BASE64_STANDARD;
-use base64::Engine;
-use errors::AnyhowResult;
 use mimetypes::mimetype_info::mimetype_info::MimetypeInfo;
 use std::io::Write;
 use tempfile::NamedTempFile;
+use web_base64::web_base64_decode::web_base64_decode;
 
-// TODO: Retain error types (io/decode)
-
-pub async fn save_base64_image_to_temp_dir(app_data_root: &AppDataRoot, base64_image: String) -> AnyhowResult<NamedTempFile> {
-  let bytes = BASE64_STANDARD.decode(base64_image)?;
+pub async fn save_base64_image_to_temp_dir(app_data_root: &AppDataRoot, base64_image: String) -> Result<NamedTempFile, ArtcraftError> {
+  let bytes = web_base64_decode(&base64_image)?;
 
   let extension = MimetypeInfo::get_for_bytes(&bytes)
       .map(|info| info.file_extension())

crates/desktop/artcraft/src/lib.rs

@@ -6,6 +6,7 @@ use tauri::Manager;
 use crate::core::commands::app_preferences::get_app_preferences_command::get_app_preferences_command;
 use crate::core::commands::app_preferences::update_app_preference_command::update_app_preferences_command;
 use crate::core::commands::enqueue::image::enqueue_text_to_image_command::enqueue_text_to_image_command;
+use crate::core::commands::enqueue::object::enqueue_image_to_3d_object_command::enqueue_image_to_3d_object_command;
 use crate::core::commands::flip_image::flip_image;
 use crate::core::commands::get_build_info_command::get_build_info_command;
 use crate::core::commands::platform_info_command::platform_info_command;
@@ -161,6 +162,7 @@ pub fn run() {
     .manage(storyteller_creds_manager_3)
     .invoke_handler(tauri::generate_handler![
       check_sora_session_command,
+      enqueue_image_to_3d_object_command,
       enqueue_text_to_image_command,
       fal_background_removal_command,
       fal_hunyuan_image_to_3d_command,

crates/desktop/artcraft/src/services/fal/commands/fal_background_removal_command.rs

@@ -1,3 +1,4 @@
+use crate::core::artcraft_error::ArtcraftError;
 use crate::core::commands::response::failure_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus};
 use crate::core::commands::response::shorthand::Response;
 use crate::core::commands::response::success_response_wrapper::SerializeMarker;
@@ -49,6 +50,7 @@ use std::path::PathBuf;
 use std::time::Duration;
 use storyteller_client::error::api_error::ApiError;
 use storyteller_client::error::api_error::ApiError::InternalServerError;
+use storyteller_client::error::storyteller_error::StorytellerError;
 use storyteller_client::media_files::get_media_file::{get_media_file, GetMediaFileSuccessResponse};
 use storyteller_client::media_files::upload_image_media_file_from_file::upload_image_media_file_from_file;
 use storyteller_client::utils::api_host::ApiHost;
@@ -176,9 +178,10 @@ pub async fn fal_background_removal_command(
 enum InnerError {
   FalError(FalErrorPlus),
   AnyhowError(AnyhowError),
-  StorytellerApiError(ApiError),
+  StorytellerError(StorytellerError),
   DecodeError(DecodeError),
   IoError(std::io::Error),
+  ArtcraftError(ArtcraftError),
 }
 
 impl From<AnyhowError> for InnerError {
@@ -193,9 +196,9 @@ impl From<FalErrorPlus> for InnerError {
   }
 }
 
-impl From<ApiError> for InnerError {
-  fn from(value: ApiError) -> Self {
-    Self::StorytellerApiError(value)
+impl From<StorytellerError> for InnerError {
+  fn from(value: StorytellerError) -> Self {
+    Self::StorytellerError(value)
   }
 }
 
@@ -211,6 +214,17 @@ impl From<std::io::Error> for InnerError {
   }
 }
 
+impl From<ArtcraftError> for InnerError {
+  fn from(value: ArtcraftError) -> Self {
+    match value {
+      ArtcraftError::AnyhowError(e) => Self::AnyhowError(e),
+      ArtcraftError::DecodeError(e) => Self::DecodeError(e),
+      ArtcraftError::IoError(e) => Self::IoError(e),
+      _ => Self::ArtcraftError(value),
+    }
+  }
+}
+
 pub async fn remove_background(
   request: FalBackgroundRemovalRequest,
   app_data_root: &AppDataRoot,
@@ -224,9 +238,11 @@ pub async fn remove_background(
   let mut temp_download;
   
   if let Some(media_token) = request.image_media_token {
+    info!("From media token: {:?}", &media_token);
     temp_download = download_media_file_to_temp_dir(&app_data_root, &media_token).await?;
     
   } else if let Some(base64_bytes) = request.base64_image {
+    info!("From base64 bytes...");
     temp_download = save_base64_image_to_temp_dir(&app_data_root, base64_bytes).await?;
   } else {
     return Err(InnerError::AnyhowError(anyhow!("No image media token or base64 image provided")));
@@ -237,6 +253,8 @@ pub async fn remove_background(
   let filename = temp_download.path().to_path_buf();
   
   let result = remove_background_rembg(filename, &api_key).await?;
+  
+  info!("Unpacking FAL result...");
 
   let extension_with_dot = get_url_file_extension(&result.image_url)
       .map(|ext| format!(".{}", ext))

crates/desktop/artcraft/src/services/fal/commands/fal_hunyuan_image_to_3d_command.rs

@@ -1,3 +1,4 @@
+use crate::core::artcraft_error::ArtcraftError;
 use crate::core::commands::response::failure_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus};
 use crate::core::commands::response::shorthand::Response;
 use crate::core::events::basic_sendable_event_trait::BasicSendableEvent;
@@ -49,6 +50,7 @@ use std::path::PathBuf;
 use std::time::Duration;
 use storyteller_client::error::api_error::ApiError;
 use storyteller_client::error::api_error::ApiError::InternalServerError;
+use storyteller_client::error::storyteller_error::StorytellerError;
 use storyteller_client::media_files::get_media_file::{get_media_file, GetMediaFileSuccessResponse};
 use storyteller_client::media_files::upload_image_media_file_from_file::upload_image_media_file_from_file;
 use storyteller_client::utils::api_host::ApiHost;
@@ -152,9 +154,10 @@ pub async fn fal_hunyuan_image_to_3d_command(
 enum InnerError {
   FalError(FalErrorPlus),
   AnyhowError(AnyhowError),
-  StorytellerApiError(ApiError),
+  StorytellerError(StorytellerError),
   DecodeError(DecodeError),
   IoError(std::io::Error),
+  ArtcraftError(ArtcraftError),
 }
 
 impl From<AnyhowError> for InnerError {
@@ -169,9 +172,9 @@ impl From<FalErrorPlus> for InnerError {
   }
 }
 
-impl From<ApiError> for InnerError {
-  fn from(value: ApiError) -> Self {
-    Self::StorytellerApiError(value)
+impl From<StorytellerError> for InnerError {
+  fn from(value: StorytellerError) -> Self {
+    Self::StorytellerError(value)
   }
 }
 
@@ -187,6 +190,19 @@ impl From<std::io::Error> for InnerError {
   }
 }
 
+impl From<ArtcraftError> for InnerError {
+  fn from(value: ArtcraftError) -> Self {
+    match value {
+      ArtcraftError::AnyhowError(e) => Self::AnyhowError(e),
+      ArtcraftError::DecodeError(e) => Self::DecodeError(e),
+      ArtcraftError::IoError(e) => Self::IoError(e),
+      ArtcraftError::StorytellerError(e) => Self::StorytellerError(e),
+      _ => Self::ArtcraftError(value),
+    }
+  }
+}
+
+
 pub async fn image_to_3d(
   request: FalHunyuanImageTo3dRequest,
   app_data_root: &AppDataRoot,
@@ -196,7 +212,6 @@ pub async fn image_to_3d(
 ) -> Result<(), InnerError> {
 
   let api_key = fal_creds_manager.get_key_required()?;
-  let creds = storyteller_creds_manager.get_credentials_required()?;
 
   let mut temp_download;
 

crates/desktop/artcraft/src/services/fal/commands/fal_kling_image_to_video_command.rs

@@ -54,7 +54,9 @@ use storyteller_client::media_files::upload_image_media_file_from_file::upload_i
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Emitter, Manager, State};
 use tempfile::NamedTempFile;
+use storyteller_client::error::storyteller_error::StorytellerError;
 use tokens::tokens::media_files::MediaFileToken;
+use crate::core::artcraft_error::ArtcraftError;
 
 #[derive(Deserialize)]
 pub struct FalKlingImageToVideoRequest {
@@ -157,9 +159,10 @@ pub async fn fal_kling_image_to_video_command(
 enum InnerError {
   FalError(FalErrorPlus),
   AnyhowError(AnyhowError),
-  StorytellerApiError(ApiError),
+  StorytellerError(StorytellerError),
   DecodeError(DecodeError),
   IoError(std::io::Error),
+  ArtcraftError(ArtcraftError),
 }
 
 impl From<AnyhowError> for InnerError {
@@ -174,9 +177,9 @@ impl From<FalErrorPlus> for InnerError {
   }
 }
 
-impl From<ApiError> for InnerError {
-  fn from(value: ApiError) -> Self {
-    Self::StorytellerApiError(value)
+impl From<StorytellerError> for InnerError {
+  fn from(value: StorytellerError) -> Self {
+    Self::StorytellerError(value)
   }
 }
 
@@ -192,6 +195,18 @@ impl From<std::io::Error> for InnerError {
   }
 }
 
+impl From<ArtcraftError> for InnerError {
+  fn from(value: ArtcraftError) -> Self {
+    match value {
+      ArtcraftError::AnyhowError(e) => Self::AnyhowError(e),
+      ArtcraftError::DecodeError(e) => Self::DecodeError(e),
+      ArtcraftError::IoError(e) => Self::IoError(e),
+      ArtcraftError::StorytellerError(e) => Self::StorytellerError(e),
+      _ => Self::ArtcraftError(value),
+    }
+  }
+}
+
 pub async fn image_to_video(
   request: FalKlingImageToVideoRequest,
   app_data_root: &AppDataRoot,

crates/desktop/artcraft/src/services/sora/commands/sora_image_remix_command.rs

@@ -39,6 +39,7 @@ use storyteller_client::error::api_error::ApiError::InternalServerError;
 use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Emitter, Manager, State};
+use storyteller_client::error::storyteller_error::StorytellerError;
 use tokens::tokens::media_files::MediaFileToken;
 
 const SORA_IMAGE_UPLOAD_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
@@ -199,7 +200,7 @@ pub async fn sora_image_remix_command(
 enum InnerError {
   SoraError(SoraError),
   AnyhowError(AnyhowError),
-  StorytellerApiError(ApiError),
+  StorytellerError(StorytellerError),
 }
 
 impl From<AnyhowError> for InnerError {
@@ -214,9 +215,9 @@ impl From<SoraError> for InnerError {
   }
 }
 
-impl From<ApiError> for InnerError {
-  fn from(value: ApiError) -> Self {
-    Self::StorytellerApiError(value)
+impl From<StorytellerError> for InnerError {
+  fn from(value: StorytellerError) -> Self {
+    Self::StorytellerError(value)
   }
 }
 

crates/lib/api_clients/fal_client/Cargo.toml

@@ -23,6 +23,7 @@ errors = { workspace = true }
 # External
 anyhow = { workspace = true }
 futures = { workspace = true }
+log = { workspace = true }
 reqwest = { workspace = true }
 serde = { workspace = true }
 tokio = { workspace = true }

crates/lib/api_clients/fal_client/src/requests/queue/remove_background_rembg.rs

@@ -22,7 +22,7 @@ pub async fn remove_background_rembg<P: AsRef<Path>>(image_path: P, api_key: &Fa
     crop_to_bbox: None,
     sync_mode: None
   };
-  
+
   let result = rembg(request)
       .with_api_key(&api_key.0)
       .queue()
@@ -56,6 +56,7 @@ mod tests {
   use crate::creds::fal_api_key::FalApiKey;
   use crate::requests::queue::remove_background_rembg::remove_background_rembg;
   use errors::AnyhowResult;
+  use std::fs::read_to_string;
   use testing::test_file_path::test_file_path;
 
   #[tokio::test]
@@ -63,9 +64,9 @@ mod tests {
   async fn test_remove_background_rembg() -> AnyhowResult<()> {
     let image = test_file_path("test_data/image/juno.jpg")?;
 
-    // TODO: DO NOT COMMIT SECRET !
-    const KEY : &str = "DO NOT COMMIT";
-    let api_key = FalApiKey::from_str(KEY);
+    // XXX: Don't commit secrets!
+    let secret = read_to_string("/Users/bt/Artcraft/credentials/fal_api_key.txt")?;
+    let api_key = FalApiKey::from_str(&secret);
 
     let result = remove_background_rembg(image, &api_key).await?;
 

crates/lib/api_clients/storyteller_client/Cargo.toml

@@ -17,6 +17,7 @@ path = "src/lib.rs"
 workspace-build-acceleration = { workspace =  true }
 
 # Internal
+artcraft_api_defs = { workspace = true }
 enums = { workspace = true }
 enums_public = { workspace = true }
 errors = { workspace = true }

crates/lib/api_clients/storyteller_client/src/error/client_error.rs

@@ -2,6 +2,7 @@ use std::error::Error;
 use std::fmt::{Display, Formatter};
 use std::io;
 use std::path::PathBuf;
+use crate::error::api_error::ApiError;
 
 /// An error arising from the client, either before or after the request is sent.
 #[derive(Debug)]
@@ -14,6 +15,12 @@ pub enum ClientError {
 
   /// An error doing file I/O (on our side)
   IoError(io::Error),
+
+  /// An error setting up the client
+  ReqwestError(reqwest::Error),
+  
+  /// A serialization error with the request.
+  SerializationError(serde_json::Error),
 }
 
 impl Error for ClientError {}
@@ -24,6 +31,8 @@ impl Display for ClientError {
       Self::FileTypeNotKnown(path) => write!(f, "Could not determine the filetype for the file: {:?}", path),
       Self::FileTypeNotHandled(path) => write!(f, "Could not handle the file type for the file: {:?}", path),
       Self::IoError(err) => write!(f, "IO error: {}", err),
+      Self::ReqwestError(err) => write!(f, "Reqwest client error: {}", err),
+      Self::SerializationError(err) => write!(f, "Request serialization error: {}", err),
     }
   }
 }
@@ -33,3 +42,15 @@ impl From<io::Error> for ClientError {
     ClientError::IoError(error)
   }
 }
+
+impl From<serde_json::Error> for ClientError {
+  fn from(error: serde_json::Error) -> Self {
+    ClientError::SerializationError(error)
+  }
+}
+
+impl From<reqwest::Error> for ClientError {
+  fn from(error: reqwest::Error) -> Self {
+    ClientError::ReqwestError(error)
+  }
+}

crates/lib/api_clients/storyteller_client/src/generate/mod.rs

@@ -0,0 +1 @@
+pub mod object;

crates/lib/api_clients/storyteller_client/src/generate/object/generate_hunyuan2_image_to_3d.rs

@@ -0,0 +1,69 @@
+use crate::credentials::storyteller_credential_set::StorytellerCredentialSet;
+use crate::error::api_error::ApiError;
+use crate::error::client_error::ClientError;
+use crate::error::storyteller_error::StorytellerError;
+use crate::utils::api_host::ApiHost;
+use crate::utils::constants::{APPLICATION_JSON, USER_AGENT};
+use crate::utils::filter_bad_response::filter_bad_response;
+use artcraft_api_defs::generate::object::generate_hunyuan_2_image_to_3d::{GenerateHunyuan2ImageTo3dRequest, GenerateHunyuan2ImageTo3dResponse, GENERATE_HUNYUAN_2_IMAGE_TO_3D_URL_PATH};
+use log::{debug, info};
+use reqwest::Client;
+
+/// Upload an image media file from a file.
+pub async fn generate_hunyuan2_image_to_3d(
+  api_host: &ApiHost,
+  maybe_creds: Option<&StorytellerCredentialSet>,
+  request: GenerateHunyuan2ImageTo3dRequest,
+) -> Result<GenerateHunyuan2ImageTo3dResponse, StorytellerError> {
+
+  let url = get_route(api_host);
+
+  info!("Requesting {:?}", &url);
+
+  let client = Client::builder()
+      .gzip(true)
+      .build()
+      .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
+
+  let mut request_builder = client.post(url)
+      .header("User-Agent", USER_AGENT)
+      .header("Accept", APPLICATION_JSON)
+      .header("Content-Type", APPLICATION_JSON);
+
+  if let Some(creds) = maybe_creds {
+    if let Some(header) = &creds.maybe_as_cookie_header() {
+      request_builder = request_builder.header("Cookie", header);
+    }
+  }
+  
+  let request_body = serde_json::to_string(&request)
+      .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
+
+  debug!("Request body: {:?}", request_body);
+  
+  let response = request_builder
+      .body(request_body)
+      .send()
+      .await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
+
+  let response = filter_bad_response(response)
+      .await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
+  
+  let response_body = &response.text()
+      .await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
+
+  debug!("Response body: {:?}", response_body);
+  
+  let response = serde_json::from_str(&response_body)
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
+
+  Ok(response)
+}
+
+fn get_route(api_host: &ApiHost) -> String {
+  let api_hostname = api_host.to_api_hostname();
+  format!("https://{}{}", api_hostname, GENERATE_HUNYUAN_2_IMAGE_TO_3D_URL_PATH)
+}

crates/lib/api_clients/storyteller_client/src/generate/object/mod.rs

@@ -0,0 +1 @@
+pub mod generate_hunyuan2_image_to_3d;

crates/lib/api_clients/storyteller_client/src/lib.rs

@@ -2,6 +2,7 @@
 
 pub mod credentials;
 pub mod error;
+pub mod generate;
 pub mod media_files;
 pub mod recipes;
 pub mod shared_response_types;

crates/lib/api_clients/storyteller_client/src/media_files/get_media_file.rs

@@ -1,4 +1,5 @@
 use crate::error::api_error::ApiError;
+use crate::error::storyteller_error::StorytellerError;
 use crate::shared_response_types::media_file_cover_image_details::MediaFileCoverImageDetails;
 use crate::shared_response_types::media_links::MediaLinks;
 use crate::shared_response_types::simple_entity_stats::SimpleEntityStats;
@@ -23,16 +24,18 @@ use tokens::tokens::model_weights::ModelWeightToken;
 use tokens::tokens::prompts::PromptToken;
 
 /// Get details about a media file from our backend
-pub async fn get_media_file(api_host: &ApiHost, media_file_token: &MediaFileToken) -> Result<GetMediaFileSuccessResponse, ApiError> {
+pub async fn get_media_file(api_host: &ApiHost, media_file_token: &MediaFileToken) -> Result<GetMediaFileSuccessResponse, StorytellerError> {
   let url = get_media_file_token_route(api_host, media_file_token);
 
   debug!("Requesting {:?}", &url);
 
   let response = http_get_anonymous(url).await?;
   let response = filter_bad_response(response).await?;
-  let response_body = &response.text().await?;
+  let response_body = &response.text().await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
 
-  let media_file = serde_json::from_str(&response_body)?;
+  let media_file = serde_json::from_str(&response_body)
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
 
   Ok(media_file)
 }

crates/lib/api_clients/storyteller_client/src/media_files/upload_image_media_file_from_file.rs

@@ -1,5 +1,7 @@
 use crate::credentials::storyteller_credential_set::StorytellerCredentialSet;
 use crate::error::api_error::ApiError;
+use crate::error::client_error::ClientError;
+use crate::error::storyteller_error::StorytellerError;
 use crate::shared_response_types::media_file_cover_image_details::MediaFileCoverImageDetails;
 use crate::shared_response_types::media_links::MediaLinks;
 use crate::shared_response_types::simple_entity_stats::SimpleEntityStats;
@@ -36,7 +38,7 @@ pub async fn upload_image_media_file_from_file<P: AsRef<Path>>(
   api_host: &ApiHost,
   maybe_creds: Option<&StorytellerCredentialSet>,
   path: P,
-) -> Result<UploadImageMediaFileSuccessResponse, ApiError> {
+) -> Result<UploadImageMediaFileSuccessResponse, StorytellerError> {
 
   let url = get_route(api_host);
 
@@ -46,12 +48,14 @@ pub async fn upload_image_media_file_from_file<P: AsRef<Path>>(
 
   let client = Client::builder()
       .gzip(true)
-      .build()?;
+      .build()
+      .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let form = Form::new()
       .text("uuid_idempotency_token", generate_random_uuid())
       .file("file", path)
-      .await?;
+      .await
+      .map_err(|err| StorytellerError::Client(ClientError::from(err)))?;
 
   let mut request_builder = client.post(url)
       .header("User-Agent", USER_AGENT)
@@ -66,12 +70,15 @@ pub async fn upload_image_media_file_from_file<P: AsRef<Path>>(
   let response = request_builder
       .multipart(form)
       .send()
-      .await?;
+      .await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
 
   let response = filter_bad_response(response).await?;
-  let response_body = &response.text().await?;
+  let response_body = &response.text().await
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
 
-  let media_file = serde_json::from_str(&response_body)?;
+  let media_file = serde_json::from_str(&response_body)
+      .map_err(|err| StorytellerError::Api(ApiError::from(err)))?;
 
   Ok(media_file)
 }

crates/lib/api_clients/storyteller_client/src/recipes/upload_media_file_from_file.rs

@@ -54,7 +54,7 @@ pub async fn upload_media_file_from_file<P: AsRef<Path>>(
           success: result.success,
           media_file_token: result.media_file_token,
         }),
-        Err(err) => Err(StorytellerError::Api(err)),
+        Err(err) => Err(err),
       }
     }
     Some(_) => Err(StorytellerError::Client(ClientError::FileTypeNotHandled(path.as_ref().to_path_buf()))),

crates/lib/data/web_base64/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "web_base64"
+edition = "2024"
+version = "0.0.1"
+publish = false
+
+[package.metadata.cargo-udeps.ignore]
+normal = ["workspace-build-acceleration"]
+
+[lib]
+name = "web_base64"
+path = "src/lib.rs"
+
+[dependencies]
+# Workspace hack (faster compile times)
+workspace-build-acceleration = { workspace =  true }
+
+# Internal
+# (None)
+
+# External
+base64 = { workspace = true }
+
+[dev-dependencies]
+# (None)

crates/lib/data/web_base64/src/lib.rs

@@ -0,0 +1,5 @@
+//! Base64 encoding and decoding library that handles data from the web.
+//! Most of the base64 we receive from the web is of a particular encoding 
+//! type, and we also have to juggle URL prefixes.
+
+pub mod web_base64_decode;

crates/lib/data/web_base64/src/web_base64_decode.rs

@@ -0,0 +1,14 @@
+use base64::prelude::BASE64_STANDARD;
+use base64::Engine;
+
+pub fn web_base64_decode(base64_string: &str) -> Result<Vec<u8>, base64::DecodeError> {
+  // Remove the data URL prefix if it exists
+  // eg: "data:image/png;base64,..." 
+  let base64_data = if base64_string.starts_with("data:") {
+    base64_string.split(',').nth(1).unwrap_or(base64_string)
+  } else {
+    base64_string
+  };
+
+  BASE64_STANDARD.decode(base64_data)
+}

crates/schema/database/mysql_queries/src/queries/media_files/create/generic_insert/insert_media_file_generic.rs

@@ -4,6 +4,7 @@ use sqlx::MySqlPool;
 
 use enums::by_table::generic_synthetic_ids::id_category::IdCategory;
 use enums::by_table::media_files::media_file_class::MediaFileClass;
+use enums::by_table::media_files::media_file_engine_category::MediaFileEngineCategory;
 use enums::by_table::media_files::media_file_origin_category::MediaFileOriginCategory;
 use enums::by_table::media_files::media_file_origin_model_type::MediaFileOriginModelType;
 use enums::by_table::media_files::media_file_origin_product_category::MediaFileOriginProductCategory;
@@ -51,6 +52,9 @@ pub struct InsertArgs<'a> {
     pub maybe_frame_width: Option<u32>,
     pub maybe_frame_height: Option<u32>,
     pub checksum_sha2: &'a str,
+    
+    // Media info for certain product areas
+    pub maybe_engine_category: Option<MediaFileEngineCategory>, // TODO: Deprecate
 
     // User text information
     pub maybe_title: Option<&'a str>,
@@ -152,6 +156,8 @@ pub async fn insert_media_file_generic(
             maybe_frame_height = ?,
             maybe_prompt_token = ?,
             checksum_sha2 = ?,
+            
+            maybe_engine_category = ?,
 
             maybe_title = ?,
             maybe_text_transcript = ?,
@@ -205,6 +211,8 @@ pub async fn insert_media_file_generic(
         args.maybe_prompt_token.map(|t| t.as_str()),
         args.checksum_sha2,
 
+        args.maybe_engine_category.map(|e| e.to_str()),
+
         args.maybe_title,
         args.maybe_text_transcript,
 

crates/schema/database/mysql_queries/src/queries/media_files/create/generic_insert/insert_media_file_generic_from_job.rs

@@ -107,6 +107,7 @@ pub async fn insert_media_file_generic_from_job(
         maybe_extra_media_info: args.maybe_extra_media_info,
         maybe_frame_height: args.maybe_frame_height,
         maybe_frame_width: args.maybe_frame_width,
+        maybe_engine_category: None,
         maybe_mime_type: args.maybe_mime_type,
         maybe_mod_user_token: args.maybe_mod_user_token,
         maybe_origin_filename: args.maybe_origin_filename,

crates/schema/database/mysql_queries/src/queries/media_files/create/insert_builder/media_file_insert_builder.rs

@@ -9,6 +9,7 @@ use enums::by_table::media_files::media_file_type::MediaFileType;
 use enums::common::visibility::Visibility;
 use errors::AnyhowResult;
 use sqlx::MySqlPool;
+use enums::by_table::media_files::media_file_engine_category::MediaFileEngineCategory;
 use tokens::tokens::anonymous_visitor_tracking::AnonymousVisitorTrackingToken;
 use tokens::tokens::media_files::MediaFileToken;
 use tokens::tokens::users::UserToken;
@@ -51,6 +52,9 @@ pub struct MediaFileInsertBuilder {
   maybe_frame_height: Option<u32>,
   checksum_sha2: Option<String>, // NB: Non-nullable field
 
+  // Media info for certain product areas
+  pub maybe_engine_category: Option<MediaFileEngineCategory>, // TODO: Deprecate
+  
   // // User text information
   // maybe_title: Option<&'a str>,
   // maybe_text_transcript: Option<&'a str>,
@@ -94,6 +98,7 @@ impl MediaFileInsertBuilder {
       maybe_frame_width: None,
       maybe_frame_height: None,
       checksum_sha2: None,
+      maybe_engine_category: None,
       public_bucket_directory_hash: None,
     }
   }
@@ -207,6 +212,11 @@ impl MediaFileInsertBuilder {
     self
   }
 
+  pub fn maybe_engine_category(mut self, maybe_engine_category: Option<MediaFileEngineCategory>) -> Self {
+    self.maybe_engine_category = maybe_engine_category;
+    self
+  }
+
   // TODO: maybe_title
   // TODO: maybe_text_transcript
   // TODO: maybe_scene_source_media_file_token
@@ -258,6 +268,7 @@ impl MediaFileInsertBuilder {
       maybe_video_encoding: None, // TODO
       maybe_frame_width: self.maybe_frame_width,
       maybe_frame_height: self.maybe_frame_height,
+      maybe_engine_category: self.maybe_engine_category,
       checksum_sha2: &checksum_sha2,
       maybe_title: None, // TODO
       maybe_text_transcript: None, // TODO

crates/schema/database/mysql_queries/src/queries/media_files/create/insert_media_file_from_studio_scene_render.rs

@@ -111,6 +111,7 @@ pub async fn insert_media_file_from_studio_scene_render(
     maybe_batch_token: None,
     maybe_prompt_token: None,
     maybe_mod_user_token: None,
+    maybe_engine_category: None,
   }).await?;
 
   Ok(new_media_token)

crates/schema/public/api/artcraft_api_defs/src/generate/object/generate_hunyuan_2_image_to_3d.rs

@@ -3,7 +3,7 @@ use tokens::tokens::generic_inference_jobs::InferenceJobToken;
 use tokens::tokens::media_files::MediaFileToken;
 use utoipa::ToSchema;
 
-const GENERATE_HUNYUAN_2_IMAGE_TO_3D_URL_PATH: &str = "/v1/generate/object/hunyuan_2_image_to_3d";
+pub const GENERATE_HUNYUAN_2_IMAGE_TO_3D_URL_PATH: &str = "/v1/generate/object/hunyuan_2_image_to_3d";
 
 #[derive(Serialize, Deserialize, ToSchema)]
 pub struct GenerateHunyuan2ImageTo3dRequest {
@@ -13,9 +13,6 @@ pub struct GenerateHunyuan2ImageTo3dRequest {
   /// Source of the file to convert to 3D
   /// It must be an image.
   pub media_file_token: Option<MediaFileToken>,
-
-  /// Optional text prompt.
-  pub prompt: Option<String>,
 }
 
 #[derive(Serialize, Deserialize, ToSchema)]

crates/service/web/storyteller_web/src/http_server/endpoints/generate/object/generate_hunyuan2_image_to_3d_handler.rs

@@ -167,11 +167,6 @@ pub async fn generate_hunyuan_2_image_to_3d_handler(
   
   info!("Fal webhook URL: {}", server_state.fal.webhook_url);
   
-  let prompt = request.prompt
-      .as_deref()
-      .map(|prompt| prompt.trim())
-      .unwrap_or_else(|| "");
-  
   let args = Hunyuan2Args {
     image_url: media_links.cdn_url,
     webhook_url: &server_state.fal.webhook_url,

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/update_gpt_image_job_status_handler.rs

@@ -32,7 +32,6 @@ use mysql_queries::queries::generic_inference::web::get_inference_job_status::{g
 use mysql_queries::queries::generic_inference::web::job_status::GenericInferenceJobStatus;
 use mysql_queries::queries::generic_inference::web::mark_generic_inference_job_cancelled_by_user::mark_generic_inference_job_cancelled_by_user;
 use mysql_queries::queries::generic_inference::web::mark_generic_inference_job_successfully_done_by_token::mark_generic_inference_job_successfully_done_by_token;
-use mysql_queries::queries::media_files::create::generic_insert::insert_media_file_generic::{insert_media_file_generic, InsertArgs};
 use mysql_queries::queries::media_files::create::insert_builder::media_file_insert_builder::MediaFileInsertBuilder;
 use mysql_queries::queries::media_files::create::specialized_insert::insert_media_file_from_file_upload::{insert_media_file_from_file_upload, InsertMediaFileFromUploadArgs, UploadType};
 use mysql_queries::queries::tts::tts_inference_jobs::mark_tts_inference_job_permanently_dead::mark_tts_inference_job_permanently_dead;

crates/service/web/storyteller_web/src/http_server/endpoints/webhooks/handle_model_mesh_payload.rs

@@ -18,6 +18,7 @@ use mysql_queries::queries::generic_inference::fal::get_inference_job_by_fal_id:
 use mysql_queries::queries::media_files::create::insert_builder::media_file_insert_builder::MediaFileInsertBuilder;
 use serde_json::{Map, Value};
 use std::sync::Arc;
+use enums::by_table::media_files::media_file_engine_category::MediaFileEngineCategory;
 use tokens::tokens::media_files::MediaFileToken;
 
 const PREFIX : Option<&str> = Some("artcraft_");
@@ -90,6 +91,7 @@ pub async fn handle_model_mesh_payload(
       .media_file_class(MediaFileClass::Dimensional)
       .media_file_type(media_file_type)
       .media_file_origin_category(MediaFileOriginCategory::Inference)
+      .maybe_engine_category(Some(MediaFileEngineCategory::Object))
       //.media_file_origin_product_category(MediaFileOriginProductCategory::Unknown)
       .mime_type(mime_type)
       .file_size_bytes(file_size_bytes as u64)

crates/vendor/fal-rs/src/queue.rs

@@ -22,11 +22,14 @@ pub enum Status {
     Completed,
 }
 
+// NB(bt, 2025-06-13): Some of these fields have started to become optional.
+// eg, errors:
+//   "missing field `source`", line: 1, column: 1019
 #[derive(Debug, Serialize, Deserialize)]
 pub struct RequestLog {
     pub timestamp: String,
-    pub level: String,
-    pub source: String,
+    pub level: Option<String>, // NB(bt): Now optional
+    pub source: Option<String>, // NB(bt): Now optional
     pub message: String,
 }
 

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useState } from "react";
 import {
   faGear,
   faImages,
@@ -23,22 +23,21 @@ import {
   MenuIconSelector,
   MenuIconItem,
 } from "@storyteller/ui-menu-icon-selector";
-import { Signal, signal } from "@preact/signals-react";
+import { signal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
 import { setLogoutStates } from "~/signals/authentication/utilities";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTabStore } from "~/pages/Stores/TabState";
+import {
+  is3DEditorInitialized,
+  is3DSceneLoaded,
+  set3DPageMounted,
+} from "~/pages/PageEnigma/Editor/editor";
 interface Props {
   pageName: string;
-  appTabIdSignal: Signal<string>;
-  setAppTabId: (id: string) => void;
-  is3DInitSignal: Signal<boolean>;
 }
 
-// This is the tab we start with.
-export const STARTING_APP_TAB_ID = "2D";
-
 const appMenuTabs: MenuIconItem[] = [
   {
     id: "2D",
@@ -65,66 +64,28 @@ const appMenuTabs: MenuIconItem[] = [
 export const topNavMediaId = signal<string>("");
 export const topNavMediaUrl = signal<string>("");
 
-export const TopBar = ({
-  pageName,
-  appTabIdSignal,
-  setAppTabId,
-}: Props) => {
+export const TopBar = ({ pageName }: Props) => {
   useSignals();
 
-  const editorEngine = useContext(EngineContext);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
-  const [url, setUrl] = useState<string>("");
-  const [mediaId, setMediaId] = useState<string>("");
-
-  const engine3D = useContext(EngineContext);
-  const handleTabChange = (tabId: string) => {
-    setAppTabId(tabId);
-  };
-
-  const currentAppTabId = appTabIdSignal.value;
-
-  const handleAddToScene = async (
-    url: string,
-    media_id: string | undefined,
-  ) => {
-    console.log("Items to add to scene", currentAppTabId);
-    console.log("url", url);
-    console.log("media_id", media_id);
-
-    setUrl(url);
-    setMediaId(media_id ?? "");
-
-    if (currentAppTabId === "2D") {
-      console.log("Adding to 2D scene");
-      // from the uploaded image url.
-    } else if (currentAppTabId === "3D") {
-      console.log("Adding to 3D scene");
-      // media id from the image selected from gallery.
-      if (media_id) {
-        engine3D?.activeScene.loadObject(media_id, "image", true);
-      } else {
-        console.warn("No media id provided");
-      }
-    } else if (currentAppTabId === "VIDEO") {
-      console.log("Adding to Video scene");
-      topNavMediaId.value = media_id ?? "";
-      topNavMediaUrl.value = url;
-    } else if (currentAppTabId === "IMAGE") {
-      console.log("Adding to Image scene");
-      topNavMediaId.value = media_id ?? "";
-      topNavMediaUrl.value = url;
-    } else {
-      console.warn(`Unknown tab type: ${currentAppTabId}`);
-    }
-  };
-
   const handleOpenGalleryModal = () => {
     galleryModalVisibleViewMode.value = true;
     galleryModalVisibleDuringDrag.value = true;
   };
 
+  const tabStore = useTabStore();
+
+  const is3DSceneReady = is3DSceneLoaded.value;
+  const is3DEditorReady = is3DEditorInitialized.value;
+  const disableTabSwitcher = () => {
+    return (
+      useTabStore.getState().activeTabId === "3D" &&
+      !is3DEditorReady &&
+      !is3DSceneReady
+    );
+  };
+
   return (
     <>
       <header className="fixed left-0 top-0 z-[60] w-full border-b border-white/5 bg-ui-background">
@@ -143,21 +104,29 @@ export const TopBar = ({
             </a>
             <MenuIconSelector
               menuItems={appMenuTabs}
-              activeMenu={appTabIdSignal.value}
-              disabled={false}
-              onMenuChange={handleTabChange}
+              activeMenu={tabStore.activeTabId}
+              disabled={disableTabSwitcher()}
+              onMenuChange={(tabId) => {
+                // Disable 3d engine to prevent memory leak.
+                if (tabId === "3D") {
+                  set3DPageMounted(true);
+                } else {
+                  set3DPageMounted(false);
+                }
+                useTabStore.getState().setActiveTab(tabId);
+              }}
               className="w-fit"
             />
           </div>
 
           <div className="flex items-center justify-center gap-2 font-medium">
-            {currentAppTabId === "3D" ? (
+            {tabStore.activeTabId === "3D" ? (
               <SceneTitleInput pageName={pageName} />
             ) : (
               <h1>
-                {currentAppTabId === "2D"
+                {tabStore.activeTabId === "2D"
                   ? "Canvas"
-                  : currentAppTabId === "VIDEO"
+                  : tabStore.activeTabId === "VIDEO"
                     ? "Generate Video"
                     : "Generate Image"}
               </h1>
@@ -197,11 +166,7 @@ export const TopBar = ({
         globalAccountLogoutCallback={() => setLogoutStates()}
       />
 
-      <GalleryModal
-        mode="view"
-        onDownloadClicked={downloadFileFromUrl}
-        onAddToSceneClicked={handleAddToScene}
-      />
+      <GalleryModal mode="view" onDownloadClicked={downloadFileFromUrl} />
     </>
   );
 };

frontend/apps/editor3d/app/src/enums/QueryFilters.ts

@@ -2,6 +2,7 @@ export enum FilterMediaClasses {
   AUDIO = "audio",
   IMAGE = "image",
   VIDEO = "video",
+  DIMENSIONAL = "dimensional",
 }
 
 export enum FilterMediaType {

frontend/apps/editor3d/app/src/pages/Page2d/ContextualToolbarNode.tsx

@@ -1,97 +0,0 @@
-import { MouseEventHandler, useState, useEffect } from "react";
-import { Transition } from "@headlessui/react";
-import { twMerge } from "tailwind-merge";
-
-import { uiAccess } from "./signals/uiAccess";
-import { dispatchUiEvents } from "./signals/uiEvents";
-
-import { ToolbarNode } from "./components/features/ToolbarNode";
-import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
-import { transitionTimingStyles } from "./components/styles";
-import { useSignals } from "@preact/signals-react/runtime";
-
-export const ContextualToolbarNode = () => {
-  const [winSize, setWinSize] = useState<{ width: number; height: number }>({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
-  const { isShowing, position, ...rest } = uiAccess.toolbarNode.signal.value;
-  const buttonsProps = Object.values(ToolbarNodeButtonNames).reduce(
-    (acc, buttonName) => {
-      acc[buttonName] = {
-        onClick: dispatchUiEvents.toolbarNode[buttonName],
-        disabled:
-          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].disabled,
-        hidden:
-          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].hidden,
-        active:
-          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].active,
-      };
-      return acc;
-    },
-    {} as {
-      [key in ToolbarNodeButtonNames]: {
-        onClick: MouseEventHandler<HTMLButtonElement>;
-        disabled: boolean;
-        hidden: boolean;
-        active: boolean;
-      };
-    },
-  );
-  useEffect(() => {
-    function resizeHandler() {
-      setWinSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-    window.addEventListener("resize", resizeHandler);
-    return () => {
-      window.removeEventListener("resize", resizeHandler);
-    };
-  }, []);
-
-  const handleColorChange = (color: string) => {
-    // Don't do anything if no node is known to be bound
-    if (uiAccess.toolbarNode.signal.value.knodeIds.length < 1) {
-      return;
-    }
-
-    // Update the UI component
-    uiAccess.toolbarNode.setColor(color);
-
-    // Signal the engine with the node ID (just grab the first -and expected only- node)
-    const nodeID = uiAccess.toolbarNode.signal.value.knodeIds[0];
-    dispatchUiEvents.toolbarNode.setSelectedColor({ kNodeId: nodeID, color });
-  }
-
-  useSignals();
-  const color = uiAccess.toolbarNode.signal.value.color;
-
-  const boundedTopPosition = Math.min(position.y, winSize.height - 164);
-  return (
-    <Transition
-      as="div"
-      show={isShowing}
-      className={twMerge(
-        transitionTimingStyles,
-        "fixed -translate-x-1/2 translate-y-5 data-[closed]:opacity-0",
-      )}
-      style={{
-        top: boundedTopPosition,
-        left: position.x,
-      }}
-    >
-      <ToolbarNode
-        {...rest}
-        buttonsProps={buttonsProps}
-        locked={uiAccess.toolbarNode.signal.value.locked}
-        onLockClicked={(e) => {
-          dispatchUiEvents.toolbarNode.lock(e);
-        }}
-        color={color}
-        onColorChange={handleColorChange}
-      />
-    </Transition>
-  );
-};

frontend/apps/editor3d/app/src/pages/Page2d/Engine.ts

@@ -1,767 +0,0 @@
-import Konva from "konva";
-
-import { uiAccess, uiEvents } from "./signals";
-import {
-  ImageNode,
-  ShapeNode,
-  ShapeType,
-  TextNode,
-  PaintNode,
-  PreviewCopyNode,
-} from "./KonvaApp/Nodes";
-import { UndoStackManager } from "./KonvaApp/UndoRedo";
-import {
-  CommandManager,
-  MatteBox,
-  SceneManager,
-} from "./KonvaApp/EngineUtitlities";
-import {
-  NodeIsolator,
-  NodesManager,
-  NodesTranslationEventDetails,
-  NodeTransformationEventDetails,
-  NodeTransformer,
-  SelectionManager,
-  SelectionManagerEvents,
-  SelectorSquare,
-} from "./KonvaApp/NodesManagers";
-import { EngineOptions, TextNodeData, VideoNodeData } from "./KonvaApp/types";
-
-import { AppModes, VideoResolutions } from "./KonvaApp/constants";
-import { ToolbarMainButtonNames } from "./components/features/ToolbarMain/enum";
-
-import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
-import { NavigateFunction } from "react-router-dom";
-
-import { RealTimeDrawEngine } from "./KonvaApp/RenderingPrimitives/RealTimeDrawEngine";
-import { NodeColor } from "./signals/uiEvents/toolbarNode";
-import { invoke } from "@tauri-apps/api/core";
-
-import { DecodeBase64ToImage } from "./utilities/DecodeBase64ToImage";
-import { EncodeImageBitmapToBase64 } from "./utilities/EncodeImageBitmapToBase64";
-import {
-  FalBackgroundRemoval,
-  FalBackgroundRemovalRequest,
-} from "@storyteller/tauri-api";
-
-export interface RenderingOptions {
-  artstyle: string;
-  positivePrompt: string;
-  negativePrompt: string;
-  cinematic: boolean;
-  enginePreProcessing: boolean;
-  faceDetail: boolean;
-  lipSync: boolean;
-  upscale: boolean;
-  styleStrength: number;
-}
-
-export class Engine {
-  private navigateRef: NavigateFunction;
-  private appMode: AppModes = AppModes.INIT;
-  private boardCanvasRef: HTMLDivElement;
-  private stage: Konva.Stage;
-  private bgLayer: Konva.Layer;
-  private mediaLayer: Konva.Layer;
-  private nodeIsolationLayer: Konva.Layer;
-  private uiLayer: Konva.Layer;
-  private previewLayer: Konva.Layer;
-  private offScreenCanvas: OffscreenCanvas;
-  public realTimeDrawEngine: RealTimeDrawEngine;
-  private nodesManager: NodesManager;
-  private nodeIsolator: NodeIsolator;
-  private nodeTransformer: NodeTransformer;
-  private selectionManager: SelectionManager;
-  private selectorSquare: SelectorSquare;
-  private loadingVideosProvider: LoadingVideosProvider;
-  private matteBox: MatteBox;
-  private backgroundNode: ShapeNode | null = null;
-
-  private sceneManager: SceneManager;
-  public undoStackManager: UndoStackManager;
-  public commandManager: CommandManager;
-
-  public segmentationButtonCanBePressed: boolean = true;
-  // signal reference
-  constructor(boardCanvasRef: HTMLDivElement, options: EngineOptions) {
-    if (import.meta.env.DEV) {
-      console.log("Engine Created");
-    }
-    this.navigateRef = options.navigate;
-    this.appMode = AppModes.SELECT;
-
-    this.boardCanvasRef = boardCanvasRef;
-    this.stage = new Konva.Stage({
-      container: this.boardCanvasRef,
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-    this.bgLayer = new Konva.Layer();
-
-    this.mediaLayer = new Konva.Layer();
-    this.previewLayer = new Konva.Layer();
-
-    this.nodeIsolationLayer = new Konva.Layer();
-    this.uiLayer = new Konva.Layer();
-
-    this.stage.add(this.bgLayer);
-    this.stage.add(this.previewLayer);
-    this.stage.add(this.mediaLayer);
-    this.stage.add(this.nodeIsolationLayer);
-    this.stage.add(this.uiLayer);
-
-    // Konva Transformer
-    this.nodeTransformer = new NodeTransformer();
-    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
-    // Loading Placeholders
-
-    // Node Isolator
-    this.nodeIsolator = new NodeIsolator({
-      mediaLayerRef: this.mediaLayer,
-      nodeIsolationLayerRef: this.nodeIsolationLayer,
-    });
-
-    // core layer for all the work done.
-    this.offScreenCanvas = new OffscreenCanvas(0, 0);
-
-    // Collection of all Nodes
-    this.nodesManager = new NodesManager();
-    // Partial Collection of selected Nodes
-    this.selectionManager = new SelectionManager({
-      nodeTransformerRef: this.nodeTransformer,
-      mediaLayerRef: this.mediaLayer,
-    });
-
-    this.realTimeDrawEngine = new RealTimeDrawEngine({
-      width: VideoResolutions.SQUARE_1024.width,
-      height: VideoResolutions.SQUARE_1024.height,
-      mediaLayerRef: this.mediaLayer,
-      offScreenCanvas: this.offScreenCanvas,
-      onDraw: async (canvas, lineBounds) => {
-        await this.addPaintNode(canvas, lineBounds);
-      },
-      onPreviewCopy: async (image) => {
-        await this.addPreviewCopy(image);
-      },
-    });
-
-    // Selector Square to select Nodes
-    this.selectorSquare = new SelectorSquare({
-      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
-      mediaLayerRef: this.mediaLayer,
-      nodesManagerRef: this.nodesManager,
-      selectionManagerRef: this.selectionManager,
-      stageRef: this.stage,
-    });
-    this.uiLayer.add(this.selectorSquare.getKonvaNode());
-
-    //Collection of commands for undo-redo
-    this.undoStackManager = new UndoStackManager(() => {
-      //this.realTimeDrawEngine.render();
-    });
-    this.commandManager = new CommandManager({
-      mediaLayerRef: this.mediaLayer,
-      nodesManagerRef: this.nodesManager,
-      nodeTransformerRef: this.nodeTransformer,
-      selectionManagerRef: this.selectionManager,
-      renderEngineRef: this.realTimeDrawEngine,
-      undoStackManagerRef: this.undoStackManager,
-    });
-
-    // set up secene manager
-    this.sceneManager = new SceneManager({
-      navigateRef: this.navigateRef,
-      loadingVideosProviderRef: this.loadingVideosProvider,
-      mediaLayerRef: this.mediaLayer,
-      nodesManagerRef: this.nodesManager,
-      selectionManagerRef: this.selectionManager,
-      renderEngineRef: this.realTimeDrawEngine,
-    });
-
-    this.matteBox = new MatteBox({
-      boardCanvasSize: {
-        width: this.boardCanvasRef.clientWidth,
-        height: this.boardCanvasRef.clientHeight,
-      },
-      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
-      uiLayerRef: this.uiLayer,
-    });
-
-    // some of the managers has events
-    // hence, lastly, setup these events
-    this.setupEventSystem();
-    this.setAppMode(this.appMode);
-  }
-
-  private setAppMode(newAppMode: AppModes) {
-    this.appMode = newAppMode;
-    switch (this.appMode) {
-      case AppModes.PAINT: {
-        console.log("APPMODE: PAINT");
-        this.selectorSquare.disable(); // this breaks the paint if you use it in the wrong spot
-        this.selectionManager.disable(); // this prevents selection.
-        this.realTimeDrawEngine.enablePaintMode();
-
-        uiAccess.toolbarMain.enable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: false,
-        });
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
-          active: true,
-        });
-        this.matteBox.disable();
-        return;
-      }
-      case AppModes.SELECT: {
-        console.log("APPMODE: SELECT");
-        this.realTimeDrawEngine.disablePaintMode();
-
-        this.selectorSquare.enable();
-        this.selectionManager.enable();
-        uiAccess.toolbarMain.enable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: true,
-        });
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
-          active: false,
-        });
-        this.matteBox.disable();
-        document.body.style.cursor = "default";
-        return;
-      }
-      case AppModes.PREVIEW: {
-        console.log("APPMODE: RENDER");
-        this.selectorSquare.disable();
-        this.selectionManager.disable();
-        uiAccess.toolbarMain.disable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: false,
-        });
-        this.matteBox.enable();
-        document.body.style.cursor = "not-allowed";
-        return;
-      }
-      case AppModes.RENDERING: {
-        console.log("APPMODE: RENDER");
-        this.selectorSquare.disable();
-        this.selectionManager.disable();
-        uiAccess.toolbarMain.disable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: false,
-        });
-        this.matteBox.enable(true);
-        document.body.style.cursor = "wait";
-        return;
-      }
-      case AppModes.INIT:
-      default: {
-        console.log("APPMODE: INIT");
-        this.selectorSquare.disable();
-        uiAccess.toolbarMain.disable();
-        this.selectionManager.disable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: false,
-        });
-        document.body.style.cursor = "wait";
-        this.matteBox.disable();
-      }
-    }
-  }
-  private setupEventSystem() {
-    // Listen to changes in container size
-    const resizeObserver = new ResizeObserver(() => {
-      this.onBoardCanvasResize();
-    });
-    resizeObserver.observe(this.boardCanvasRef);
-    this.onBoardCanvasResize();
-
-    // Listen to Nodes
-    this.selectionManager.eventTarget.addEventListener(
-      SelectionManagerEvents.NODES_TRANSLATIONS,
-      ((event: CustomEvent<NodesTranslationEventDetails>) => {
-        //console.log("Event: SelectionManager -> Engine", event);
-        this.commandManager.translateNodes(event.detail);
-      }) as EventListener,
-    );
-    this.selectionManager.eventTarget.addEventListener(
-      SelectionManagerEvents.NODES_TRANSFORMATION,
-      ((event: CustomEvent<NodeTransformationEventDetails>) => {
-        //console.log("Event: SelectionManager -> Engine", event);
-        this.commandManager.transformNodes(event.detail);
-      }) as EventListener,
-    );
-
-    // Listen to Tooolbar Node
-    uiEvents.toolbarNode.lock.onClick(() => {
-      this.commandManager.toggleLockNodes();
-    });
-    uiEvents.toolbarNode.DOWNLOAD.onClick(() => {
-      const nodes = this.selectionManager.getSelectedNodes();
-      if (nodes.size > 1) {
-        uiAccess.dialogError.show({
-          title: "Error: Download Node Content",
-          message:
-            "Please do not select more than 1 item for the Download Node Content feature, you can only download 1 item at a time",
-        });
-        return;
-      }
-      const node = nodes.values().next().value;
-      try {
-        if (node instanceof VideoNode && node.currentUrl) {
-          downloadURI(node.currentUrl, `Download Video Node-${node.kNode.id}`);
-        } else {
-          throw new Error();
-        }
-      } catch {
-        uiAccess.dialogError.show({
-          title: "Error: Download Node Content",
-          message: "This item does not have content for download.",
-        });
-      }
-    });
-
-    uiEvents.toolbarNode.DELETE.onClick(() =>
-      this.commandManager.deleteNodes(),
-    );
-    uiEvents.toolbarNode.MOVE_LAYER_DOWN.onClick(() =>
-      this.commandManager.moveNodesDown(),
-    );
-    uiEvents.toolbarNode.MOVE_LAYER_UP.onClick(() =>
-      this.commandManager.moveNodesUp(),
-    );
-    uiEvents.toolbarNode.REMOVE_BACKGROUND.onClick(() =>
-      this.removeBackground(),
-    );
-
-    // Listen to Toolbar Main
-    uiEvents.toolbarMain.UNDO.onClick(() => {
-      this.undoStackManager.undo();
-    });
-    uiEvents.toolbarMain.REDO.onClick(() => {
-      this.undoStackManager.redo();
-      //this.realTimeDrawEngine.render();
-    });
-
-    uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
-      //await this.realTimeDrawEngine.saveOutput(); // This works.
-      await invoke("open_login_command");
-    });
-
-    uiEvents.toolbarMain.GENERATE.onClick(async (/*event*/) => {
-      console.log("generate clicked");
-      await this.realTimeDrawEngine.generateImage();
-    });
-
-    uiEvents.toolbarMain.SELECT.onClick(() => {
-      console.log("Toolbar Main >> Select");
-      this.setAppMode(AppModes.SELECT);
-    });
-
-    uiEvents.toolbarMain.PAINT.onClick(() => {
-      console.log("Toolbar Main >> Paint");
-      this.setAppMode(AppModes.PAINT);
-    });
-
-    uiEvents.toolbarMain.ERASER.onClick(() => {
-      console.log("Toolbar Main >> Eraser");
-    });
-
-    uiEvents.toolbarMain.PREVIEW.onClick(async () => {
-      console.log("Toolbar Main >> Preview");
-      this.setAppMode(AppModes.PREVIEW);
-      await this.handlePreview();
-      this.setAppMode(AppModes.SELECT);
-    });
-    uiEvents.toolbarMain.DOWNLOAD.onClick(async () => {
-      console.log("Toolbar Main >> Render Download");
-      try {
-        this.setAppMode(AppModes.RENDERING);
-      } catch (error) {
-        // throw error to retry
-        uiAccess.dialogError.show({
-          title: "Generation Error",
-          message: error?.toString() || "Unknown Error",
-        });
-        this.setAppMode(AppModes.SELECT);
-      }
-    });
-    // Listen to other toolbars
-    // VideoExtraction Toolbar
-
-    // Listen to other requests coming from the UI
-    uiEvents.onGetStagedImage((image) => {
-      this.addImage(image);
-    });
-
-    uiEvents.onAddTextToEngine((textdata) => {
-      this.addText(textdata);
-    });
-
-    let renderTimeout: NodeJS.Timeout;
-
-    uiEvents.promptEvents.onPromptStrengthChanged(async (strength) => {
-      this.realTimeDrawEngine.currentStrength = strength / 100.0;
-      clearTimeout(renderTimeout);
-      renderTimeout = setTimeout(async () => {
-        //await this.realTimeDrawEngine.render();
-      }, 1000);
-    });
-
-    uiEvents.promptEvents.onPromptTextChanged(async (prompt) => {
-      this.realTimeDrawEngine.currentPrompt = prompt;
-      clearTimeout(renderTimeout);
-      renderTimeout = setTimeout(async () => {
-        //await this.realTimeDrawEngine.render();
-      }, 1000);
-    });
-
-    uiEvents.onAddShapeToEngine((shapeData) => {
-      switch (shapeData.shape) {
-        case "circle":
-          this.addShape(ShapeType.CIRCLE, 100);
-          break;
-        case "square":
-          this.addShape(ShapeType.SQUARE, 100);
-          break;
-        case "triangle":
-          this.addShape(ShapeType.TRIANGLE, 100);
-          break;
-      }
-    });
-
-    uiEvents.toolbarMain.onBgColorChanged((data) => {
-      this.realTimeDrawEngine.updateBackground(data);
-    });
-
-    uiEvents.toolbarNode.color.onConfirmChanged((nodeColor) => {
-      console.log("Color change event triggered with:", nodeColor);
-      if (!nodeColor) {
-        console.warn("nodeColor is undefined or null");
-        return;
-      }
-      if (!nodeColor.kNodeId) {
-        console.warn("nodeColor.kNodeId is undefined or null");
-        return;
-      }
-      this.changeNodeColor(nodeColor);
-    });
-    uiEvents.toolbarMain.onPaintColorChanged((color) => {
-      this.realTimeDrawEngine.paintColor = color;
-    });
-
-    uiEvents.toolbarMain.onEraseBrushSizeChanged((size: number) => {
-      this.realTimeDrawEngine.paintBrushSize = size;
-    });
-  }
-
-  removeBackground() {
-    console.log("Remove background");
-
-    const selectedNodeSet = this.selectionManager.getSelectedNodes();
-
-    if (selectedNodeSet.size !== 1) {
-      return; // Can only remove background from a single image at a time.
-    }
-
-    const [selectedNode] = selectedNodeSet;
-
-    const removeBgInvocation = async (
-      selectedNode: ImageNode,
-      callback: (
-        existingImageNode: ImageNode,
-        createdImage: ImageBitmap,
-      ) => void,
-    ) => {
-      const image: HTMLImageElement = selectedNode.kNode.image();
-      const base64Bitmap = await EncodeImageBitmapToBase64(image);
-
-      const falRemoveBgRequest: FalBackgroundRemovalRequest = {
-        base64_image: base64Bitmap,
-      };
-
-      const response = await FalBackgroundRemoval(falRemoveBgRequest);
-
-      if (response.status !== "success") {
-        console.error("Failed to remove background", response);
-        // TODO
-        return;
-      }
-
-      console.log("Remove background success", response);
-
-      if ("payload" in response) {
-        const base64BitmapResponse = response.payload?.base64_bytes;
-
-        const createdImage = await DecodeBase64ToImage(
-          base64BitmapResponse as string,
-        );
-
-        callback(selectedNode, createdImage);
-      }
-    };
-
-    const _promise = removeBgInvocation(
-      selectedNode,
-      (selectedNode: ImageNode, createdImage: ImageBitmap) => {
-        if (!this.nodesManager.hasNode(selectedNode)) {
-          return;
-        }
-        this.commandManager.deleteSpecificNodes([selectedNode]);
-        this.addImageFromImageBitmap(createdImage);
-      },
-    );
-  }
-
-  disableAllButtons() {
-    const buttonNames = Object.values(ToolbarNodeButtonNames);
-    for (const name of buttonNames) {
-      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
-    }
-  }
-
-  async enableAllButtons() {
-    const buttonNames = Object.values(ToolbarNodeButtonNames);
-    for (const name of buttonNames) {
-      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
-    }
-  }
-
-  sleep(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  private onBoardCanvasResize() {
-    console.log("onBoardCanvasResize Event called");
-    // Print window dimensions for debugging
-    console.log("Window dimensions:", {
-      innerWidth: window.innerWidth,
-      innerHeight: window.innerHeight,
-      outerWidth: window.outerWidth,
-      outerHeight: window.outerHeight,
-    });
-
-    this.realTimeDrawEngine.updateCaptureCanvas(
-      window.innerWidth,
-      window.innerHeight,
-    );
-
-    this.matteBox.updateSize({
-      boardCanvasSize: {
-        width: this.boardCanvasRef.offsetWidth,
-        height: this.boardCanvasRef.offsetHeight,
-      },
-    });
-    this.uiLayer.draw();
-    this.stage.width(this.boardCanvasRef.offsetWidth);
-    this.stage.height(this.boardCanvasRef.offsetHeight);
-    this.stage.draw(); // Redraw the canvas
-  }
-
-  // Sandbox is quickly a way to test your idea.
-  public async sandbox() {}
-
-  public onMessage(event: MessageEvent) {
-    console.log("Message From Shared Worker");
-    console.log(event);
-  }
-
-  public initializeStage(sceneToken?: string) {
-    // load canvas that was originaly saved TODO Save manager for resharing.
-    uiAccess.toolbarNode.hide();
-    uiAccess.loadingBar.hide();
-    // load the scene if there's a scenetoken
-    if (sceneToken) {
-      this.sceneManager.loadScene(sceneToken);
-    }
-    this.setupStage();
-    // this.populateWithDebugItems();
-  }
-  public isInitialized() {
-    return this.stage !== null;
-  }
-
-  public async setupStage() {
-    // Frame rate inicator
-    // const textNode = new Konva.Text({
-    //   x: 10,
-    //   y: 80,
-    //   text: "",
-    //   fontSize: 18,
-    //   fontFamily: "Source Sans 3",
-    //   fill: "white",
-    // });
-    // const anim = new Konva.Animation((frame) => {
-    //   if (frame && import.meta.env.DEV) {
-    //     const timeDiff = frame.timeDiff;
-    //     const frameRate = frame.frameRate;
-    //     textNode.setText(
-    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
-    //     );
-    //   }
-    // }, this.mediaLayer);
-
-    // anim.start();
-    //this.uiLayer.add(textNode);
-    this.addKeyboardShortcuts();
-  }
-
-  private changeNodeColor(nodeColor: NodeColor) {
-    console.log("Changing node color:", nodeColor);
-    // Find the node that is selected with the id
-    const idSelector = "#" + nodeColor.kNodeId;
-    const selectedNode = this.mediaLayer.findOne(idSelector);
-    console.log("Selected node:", selectedNode);
-    console.log("ID selector:", idSelector);
-    console.log("Media layer:", this.mediaLayer);
-    // TODO: Change the color of the node
-    // Turns out shapes are image nodes... how do we change the image's fill??
-    if (selectedNode) {
-      // Get the shape node from the real time drawing engine's image nodes
-      const shapeNode = this.realTimeDrawEngine.findImageNodeById(
-        nodeColor.kNodeId,
-      );
-      if (shapeNode && shapeNode instanceof ShapeNode) {
-        // Create new shape node with updated color
-        const newShapeNode = new ShapeNode({
-          canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-          canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-          shapeType: shapeNode.shapeType,
-          size: shapeNode.kNode.size(),
-          color: nodeColor.color,
-          mediaLayerRef: this.mediaLayer,
-          selectionManagerRef: this.selectionManager,
-          loaded: async () => {
-            //this.realTimeDrawEngine.render();
-          },
-        });
-        newShapeNode.kNode.position(shapeNode.kNode.position());
-        newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex());
-
-        // Remove old node and add new one
-        shapeNode.kNode.destroy();
-        this.commandManager.createNode(newShapeNode);
-      }
-    }
-  }
-
-  public addText(textNodeData: TextNodeData) {
-    const textNode = new TextNode({
-      textNodeData: textNodeData,
-      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager,
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-    });
-    this.commandManager.createNode(textNode);
-  }
-
-  public addShape(type: ShapeType, size: number, color?: string) {
-    const shapeNode = new ShapeNode({
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-      shapeType: type,
-      size: { width: size, height: size },
-      color: color,
-      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        //await this.realTimeDrawEngine.render();
-        this.setAppMode(AppModes.SELECT);
-      },
-    });
-
-    this.commandManager.createNode(shapeNode);
-  }
-  public addPreviewCopy(image: Image.Konva) {
-    // Start of Selection
-    const copyNode = new PreviewCopyNode({
-      image: image,
-      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        //this.realTimeDrawEngine.render();
-        this.setAppMode(AppModes.SELECT);
-      },
-    });
-    this.commandManager.createNode(copyNode);
-  }
-  public addImage(imageFile: File) {
-    const imageNode = new ImageNode({
-      mediaLayerRef: this.mediaLayer,
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-      imageFile: imageFile,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        //await this.realTimeDrawEngine.render();
-        this.setAppMode(AppModes.SELECT);
-      },
-    });
-
-    this.commandManager.createNode(imageNode);
-  }
-
-  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
-    const imageNode = new ImageNode({
-      mediaLayerRef: this.mediaLayer,
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-      imageBitmap: imageBitmap,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        //await this.realTimeDrawEngine.render();
-        this.setAppMode(AppModes.SELECT);
-      },
-    });
-
-    this.commandManager.createNode(imageNode);
-  }
-
-  public addPaintNode(
-    canvas: HTMLCanvasElement,
-    lineBounds: {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-    },
-  ) {
-    const node = new PaintNode({
-      canvasElement: canvas,
-      lineBounds: lineBounds,
-      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        //await this.realTimeDrawEngine.render();
-      },
-    });
-    this.commandManager.createNode(node);
-  }
-
-  // Events for Undo and Redo
-  private addKeyboardShortcuts() {
-    window.addEventListener("keydown", (event) => {
-      if (event.ctrlKey && event.key === "z") {
-        this.undoStackManager.undo();
-      } else if (
-        (event.ctrlKey && event.key === "y") ||
-        (event.ctrlKey && event.shiftKey && event.key === "Z")
-      ) {
-        this.undoStackManager.redo();
-      } else if (event.key === "Delete") {
-        this.commandManager.deleteNodes();
-      }
-    });
-  }
-}
-
-// TODO: Move to utilities?
-function downloadURI(uri: string, name: string) {
-  const link = document.createElement("a");
-  link.download = name;
-  link.target = "_blank";
-  link.href = uri;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EditEngine.ts

@@ -1,371 +0,0 @@
-import Konva from "konva";
-
-import { uiAccess } from "../signals";
-import { CommandManager, MatteBox } from "./EngineUtitlities";
-import { ImageNode } from "./Nodes";
-import { PaintNode } from "./Nodes/PaintNode";
-import {
-  NodesManager,
-  NodesTranslationEventDetails,
-  NodeTransformationEventDetails,
-  NodeTransformer,
-  SelectionManager,
-  SelectionManagerEvents,
-  SelectorSquare,
-} from "./NodesManagers";
-import { UndoStackManager } from "./UndoRedo";
-
-import { ToolbarMainButtonNames } from "../components/features/ToolbarMain/enum";
-import { EditModes, VideoResolutions } from "./constants";
-
-import { ToolbarNodeButtonNames } from "../components/features/ToolbarNode/enums";
-
-
-export interface RenderingOptions {
-  artstyle: string;
-  positivePrompt: string;
-  negativePrompt: string;
-  cinematic: boolean;
-  enginePreProcessing: boolean;
-  faceDetail: boolean;
-  lipSync: boolean;
-  upscale: boolean;
-  styleStrength: number;
-}
-
-export class EditEngine {
-  private editMode: EditModes = EditModes.SELECT;
-  private boardCanvasRef: HTMLDivElement;
-  private stage: Konva.Stage;
-
-  private mediaLayer: Konva.Layer;
-  private nodeIsolationLayer: Konva.Layer;
-  private uiLayer: Konva.Layer;
-  private offScreenCanvas: OffscreenCanvas;
-  private realTimeDrawEngine: RealTimeDrawEngine;
-  private nodesManager: NodesManager;
-  private nodeTransformer: NodeTransformer;
-  private selectionManager: SelectionManager;
-  private selectorSquare: SelectorSquare;
-  private matteBox: MatteBox;
-
-  private undoStackManager: UndoStackManager;
-  private commandManager: CommandManager;
-
-  public segmentationButtonCanBePressed: boolean = true;
-  // signal reference
-  constructor(boardCanvasRef: HTMLDivElement) {
-    if (import.meta.env.DEV) {
-      console.log("Engine Created");
-    }
-    this.editMode = EditModes.SELECT;
-
-    this.boardCanvasRef = boardCanvasRef;
-
-    this.stage = new Konva.Stage({
-      container: this.boardCanvasRef,
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-    //this.bgLayer = new Konva.Layer();
-
-    this.mediaLayer = new Konva.Layer();
-
-    this.nodeIsolationLayer = new Konva.Layer();
-    this.uiLayer = new Konva.Layer();
-
-    //this.stage.add(this.bgLayer);
-    this.stage.add(this.mediaLayer);
-    this.stage.add(this.nodeIsolationLayer);
-    this.stage.add(this.uiLayer);
-
-    // Konva Transformer
-    this.nodeTransformer = new NodeTransformer();
-    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
-
-    // core layer for all the work done.
-    this.offScreenCanvas = new OffscreenCanvas(0, 0);
-
-    // Collection of all Nodes
-    this.nodesManager = new NodesManager();
-    // Partial Collection of selected Nodes
-    this.selectionManager = new SelectionManager({
-      nodeTransformerRef: this.nodeTransformer,
-      mediaLayerRef: this.mediaLayer,
-    });
-
-    this.realTimeDrawEngine = new RealTimeDrawEngine({
-      width: VideoResolutions.SQUARE_1024.width,
-      height: VideoResolutions.SQUARE_1024.height,
-      mediaLayerRef: this.mediaLayer,
-      offScreenCanvas: this.offScreenCanvas,
-      onDraw: async (canvas, lineBounds) => {
-        await this.addPaintNode(canvas, lineBounds);
-      },
-    });
-
-    // Selector Square to select Nodes
-    this.selectorSquare = new SelectorSquare({
-      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
-      mediaLayerRef: this.mediaLayer,
-      nodesManagerRef: this.nodesManager,
-      selectionManagerRef: this.selectionManager,
-      stageRef: this.stage,
-    });
-    this.uiLayer.add(this.selectorSquare.getKonvaNode());
-
-    //Collection of commands for undo-redo
-    this.undoStackManager = new UndoStackManager(() => {
-      this.realTimeDrawEngine.render();
-    });
-    this.commandManager = new CommandManager({
-      mediaLayerRef: this.mediaLayer,
-      nodesManagerRef: this.nodesManager,
-      nodeTransformerRef: this.nodeTransformer,
-      selectionManagerRef: this.selectionManager,
-      renderEngineRef: this.realTimeDrawEngine,
-      undoStackManagerRef: this.undoStackManager,
-    });
-
-    this.matteBox = new MatteBox({
-      boardCanvasSize: {
-        width: this.boardCanvasRef.clientWidth,
-        height: this.boardCanvasRef.clientHeight,
-      },
-      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
-      uiLayerRef: this.uiLayer,
-    });
-
-    // some of the managers has events
-    // hence, lastly, setup these events
-    this.setupEventSystem();
-    this.setEditMode(this.editMode);
-  }
-
-  private setEditMode(newEditMode: EditModes) {
-    this.editMode = newEditMode;
-    switch (this.editMode) {
-      case EditModes.SELECT:
-      default: {
-        console.log("EDITMODE: SELECT");
-        this.realTimeDrawEngine.disablePaintMode();
-
-        this.selectorSquare.enable();
-        this.selectionManager.enable();
-        uiAccess.toolbarMain.enable();
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
-          active: true,
-        });
-        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
-          active: false,
-        });
-        this.matteBox.disable();
-        document.body.style.cursor = "default";
-        return;
-      }
-      case EditModes.EDIT: {
-        console.log("EDITMODE: EDIT");
-        this.realTimeDrawEngine.enablePaintMode();
-        this.selectorSquare.disable();
-        this.selectionManager.disable();
-      }
-    }
-  }
-  private setupEventSystem() {
-    // Listen to changes in container size
-    const resizeObserver = new ResizeObserver(() => {
-      this.onBoardCanvasResize();
-    });
-    resizeObserver.observe(this.boardCanvasRef);
-    this.onBoardCanvasResize();
-
-    // Listen to Nodes
-    this.selectionManager.eventTarget.addEventListener(
-      SelectionManagerEvents.NODES_TRANSLATIONS,
-      ((event: CustomEvent<NodesTranslationEventDetails>) => {
-        //console.log("Event: SelectionManager -> Engine", event);
-        this.commandManager.translateNodes(event.detail);
-      }) as EventListener,
-    );
-    this.selectionManager.eventTarget.addEventListener(
-      SelectionManagerEvents.NODES_TRANSFORMATION,
-      ((event: CustomEvent<NodeTransformationEventDetails>) => {
-        //console.log("Event: SelectionManager -> Engine", event);
-        this.commandManager.transformNodes(event.detail);
-      }) as EventListener,
-    );
-
-    // Listen to Toolbar Main
-    // uiEvents.toolbarMain.UNDO.onClick(() => {
-    //   this.undoStackManager.undo();
-    // });
-    // uiEvents.toolbarMain.REDO.onClick(() => {
-    //   this.undoStackManager.redo();
-    //   this.realTimeDrawEngine.render();
-    // });
-
-    // uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
-    //   await this.realTimeDrawEngine.saveOutput();
-    // });
-
-    // uiEvents.toolbarMain.SELECT.onClick(() => {
-    //   console.log("Toolbar Main >> Select");
-    //   this.setAppMode(AppModes.SELECT);
-    // });
-
-    // uiEvents.toolbarMain.PAINT.onClick(() => {
-    //   console.log("Toolbar Main >> Paint");
-    //   this.setAppMode(AppModes.PAINT);
-    // });
-  }
-
-  disableAllButtons() {
-    const buttonNames = Object.values(ToolbarNodeButtonNames);
-    for (const name of buttonNames) {
-      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
-    }
-  }
-
-  async enableAllButtons() {
-    const buttonNames = Object.values(ToolbarNodeButtonNames);
-    for (const name of buttonNames) {
-      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
-    }
-  }
-
-  sleep(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
-  private onBoardCanvasResize() {
-    this.realTimeDrawEngine.updateCaptureCanvas(0, 0);
-    console.log("onBoardCanvasResize Event called");
-    console.log("Board Canvas values below");
-    console.log(this.boardCanvasRef.offsetWidth);
-    console.log(this.boardCanvasRef.offsetHeight);
-
-    this.matteBox.updateSize({
-      boardCanvasSize: {
-        width: this.boardCanvasRef.offsetWidth,
-        height: this.boardCanvasRef.offsetHeight,
-      },
-    });
-
-    this.uiLayer.draw();
-    this.stage.width(this.boardCanvasRef.offsetWidth);
-    this.stage.height(this.boardCanvasRef.offsetHeight);
-    this.stage.draw(); // Redraw the canvas
-  }
-
-  // Sandbox is quickly a way to test your idea.
-  public async sandbox() {}
-
-  public onMessage(event: MessageEvent) {
-    console.log("Message From Shared Worker");
-    console.log(event);
-  }
-
-  public initializeStage() {
-    // load canvas that was originaly saved TODO Save manager for resharing.
-    uiAccess.toolbarNode.hide();
-    uiAccess.loadingBar.hide();
-    this.setupStage();
-  }
-
-  public isInitialized() {
-    return this.stage !== null;
-  }
-
-  public async setupStage() {
-    // Frame rate inicator
-    // const textNode = new Konva.Text({
-    //   x: 10,
-    //   y: 80,
-    //   text: "",
-    //   fontSize: 18,
-    //   fontFamily: "Source Sans 3",
-    //   fill: "white",
-    // });
-    // const anim = new Konva.Animation((frame) => {
-    //   if (frame && import.meta.env.DEV) {
-    //     const timeDiff = frame.timeDiff;
-    //     const frameRate = frame.frameRate;
-    //     textNode.setText(
-    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
-    //     );
-    //   }
-    // }, this.mediaLayer);
-
-    // anim.start();
-    // this.uiLayer.add(textNode);
-    this.addKeyboardShortcuts();
-  }
-
-  public addImage(imageFile: File) {
-    const imageNode = new ImageNode({
-      mediaLayerRef: this.mediaLayer,
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-      imageFile: imageFile,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        await this.realTimeDrawEngine.render();
-        this.setEditMode(EditModes.SELECT);
-      },
-    });
-
-    this.commandManager.createNode(imageNode);
-  }
-
-  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
-    const imageNode = new ImageNode({
-      mediaLayerRef: this.mediaLayer,
-      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
-      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
-      imageBitmap: imageBitmap,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        await this.realTimeDrawEngine.render();
-        this.setEditMode(EditModes.SELECT);
-      },
-    });
-
-    this.commandManager.createNode(imageNode);
-  }
-
-  public addPaintNode(
-    canvas: HTMLCanvasElement,
-    lineBounds: {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-    },
-  ) {
-    var node = new PaintNode({
-      canvasElement: canvas,
-      lineBounds: lineBounds,
-      mediaLayerRef: this.mediaLayer,
-      selectionManagerRef: this.selectionManager,
-      loaded: async () => {
-        await this.realTimeDrawEngine.render();
-      },
-    });
-    this.commandManager.createNode(node);
-  }
-  // Events for Undo and Redo
-  private addKeyboardShortcuts() {
-    window.addEventListener("keydown", (event) => {
-      if (event.ctrlKey && event.key === "z") {
-        this.undoStackManager.undo();
-      } else if (
-        (event.ctrlKey && event.key === "y") ||
-        (event.ctrlKey && event.shiftKey && event.key === "Z")
-      ) {
-        this.undoStackManager.redo();
-      } else if (event.key === "Delete") {
-        this.commandManager.deleteNodes();
-      }
-    });
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/Base64Helpers.ts

@@ -1,7 +0,0 @@
-const ensureBase64Prefix = (base64String: string) => {
-    return base64String.startsWith("data:")
-      ? base64String
-      : `data:image/png;base64,${base64String}`;
-}
-
-export { ensureBase64Prefix };

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/CommandManager.ts

@@ -1,157 +0,0 @@
-import Konva from "konva";
-
-import { MediaNode, Position, RGBColor, Transformation } from "../types";
-import {
-  
-  CreateCommand,
-  DeleteCommand,
-  LockNodesCommand,
-  MoveLayerDown,
-  MoveLayerUp,
-  
-  TransformCommand,
-  TranslateCommand,
-  UndoStackManager,
-  UnlockNodesCommand,
-  
-} from "../UndoRedo";
-import {
-  NodesManager,
-  NodeTransformer,
-  SelectionManager,
-} from "../NodesManagers";
-import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
-
-interface EngineReferences {
-  mediaLayerRef: Konva.Layer;
-  nodesManagerRef: NodesManager;
-  nodeTransformerRef: NodeTransformer;
-  selectionManagerRef: SelectionManager;
-  renderEngineRef: RealTimeDrawEngine;
-  undoStackManagerRef: UndoStackManager;
-}
-
-export class CommandManager {
-  private mediaLayerRef: Konva.Layer;
-  private nodesManagerRef: NodesManager;
-  private nodeTransformerRef: NodeTransformer;
-  private selectionManagerRef: SelectionManager;
-  private renderEngineRef: RealTimeDrawEngine;
-  private undoStackManagerRef: UndoStackManager;
-
-  constructor(engineRefs: EngineReferences) {
-    this.mediaLayerRef = engineRefs.mediaLayerRef;
-    this.nodesManagerRef = engineRefs.nodesManagerRef;
-    this.nodeTransformerRef = engineRefs.nodeTransformerRef;
-    this.selectionManagerRef = engineRefs.selectionManagerRef;
-    this.renderEngineRef = engineRefs.renderEngineRef;
-    this.undoStackManagerRef = engineRefs.undoStackManagerRef;
-  }
-
-  createNode(node: MediaNode) {
-    const command = new CreateCommand({
-      nodes: new Set<MediaNode>([node]),
-      mediaLayerRef: this.mediaLayerRef,
-      nodesManagerRef: this.nodesManagerRef,
-      nodeTransformerRef: this.nodeTransformerRef,
-      selectionManagerRef: this.selectionManagerRef,
-      renderEngineRef: this.renderEngineRef,
-    });
-    this.undoStackManagerRef.executeCommand(command);
-
-    // Set the kNode's manual id to same as kNode's internal _id
-    // This helps identify the kNode in the Konva layer with find
-    node.kNode.id(node.kNode._id.toString());
-    //this.renderEngineRef.render();
-  }
-  deleteNodes() {
-    const nodes = this.selectionManagerRef.getSelectedNodes();
-    const command = new DeleteCommand({
-      nodes: nodes,
-      mediaLayerRef: this.mediaLayerRef,
-      nodesManagerRef: this.nodesManagerRef,
-      nodeTransformerRef: this.nodeTransformerRef,
-      selectionManagerRef: this.selectionManagerRef,
-      renderEngineRef: this.renderEngineRef,
-    });
-    this.undoStackManagerRef.executeCommand(command);
-    //this.renderEngineRef.render();
-  }
-
-  deleteSpecificNodes(nodes: MediaNode[]) {
-    const command = new DeleteCommand({
-      nodes: nodes,
-      mediaLayerRef: this.mediaLayerRef,
-      nodesManagerRef: this.nodesManagerRef,
-      nodeTransformerRef: this.nodeTransformerRef,
-      selectionManagerRef: this.selectionManagerRef,
-      renderEngineRef: this.renderEngineRef,
-    });
-    this.undoStackManagerRef.executeCommand(command);
-    //this.renderEngineRef.render();
-  }
-
-  toggleLockNodes() {
-    const nodes = this.selectionManagerRef.getSelectedNodes();
-    const node = nodes.values().next().value;
-    if (!node) {
-      console.log("Node Not Found for Locking");
-      return;
-    }
-    if (node.isLocked()) {
-      const command = new UnlockNodesCommand({
-        nodes: this.selectionManagerRef.getSelectedNodes(),
-      });
-      this.undoStackManagerRef.executeCommand(command);
-    } else {
-      const command = new LockNodesCommand({
-        nodes: this.selectionManagerRef.getSelectedNodes(),
-      });
-      this.undoStackManagerRef.executeCommand(command);
-    }
-  }
-  moveNodesUp() {
-    const command = new MoveLayerUp({
-      nodes: this.selectionManagerRef.getSelectedNodes(),
-      nodesManagerRef: this.nodesManagerRef,
-      mediaLayerRef: this.mediaLayerRef,
-    });
-    this.undoStackManagerRef.executeCommand(command);
-    //this.renderEngineRef.render();
-  }
-  moveNodesDown() {
-    const command = new MoveLayerDown({
-      nodes: this.selectionManagerRef.getSelectedNodes(),
-      nodesManagerRef: this.nodesManagerRef,
-      mediaLayerRef: this.mediaLayerRef,
-    });
-    this.undoStackManagerRef.executeCommand(command);
-    //this.renderEngineRef.render();
-  }
-  translateNodes(props: {
-    nodes: Set<MediaNode>;
-    initialPositions: Map<MediaNode, Position>;
-    finalPositions: Map<MediaNode, Position>;
-  }) {
-    const command = new TranslateCommand({
-      ...props,
-      layerRef: this.mediaLayerRef,
-    });
-    this.undoStackManagerRef.pushCommand(command);
-    //this.renderEngineRef.render();
-  }
-  transformNodes(props: {
-    nodes: Set<MediaNode>;
-    initialTransformations: Map<MediaNode, Transformation[]>;
-    finalTransformations: Map<MediaNode, Transformation[]>;
-  }) {
-    const command = new TransformCommand({
-      ...props,
-      layerRef: this.mediaLayerRef,
-    });
-    this.undoStackManagerRef.pushCommand(command);
-    //this.renderEngineRef.render();
-  }
-  
- 
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/MatteBox.ts

@@ -1,134 +0,0 @@
-import Konva from "konva";
-import { Size } from "../types";
-import { Colors } from "../constants";
-import { uiAccess } from "../../signals/uiAccess";
-
-export class MatteBox {
-  private matteBoxPoly: Konva.Line;
-  private lightBoxRect: Konva.Rect;
-  private uiLayerRef: Konva.Layer;
-  private boardCanvasSize: Size;
-  private captureCanvasSize: Size;
-
-  constructor({
-    boardCanvasSize,
-    captureCanvasSize,
-    uiLayerRef,
-  }: {
-    boardCanvasSize: Size;
-    captureCanvasSize: Size;
-    uiLayerRef: Konva.Layer;
-  }) {
-    this.uiLayerRef = uiLayerRef;
-    this.boardCanvasSize = boardCanvasSize;
-    this.captureCanvasSize = captureCanvasSize;
-    this.matteBoxPoly = new Konva.Line({
-      points: getMatteBoxPolygonPoints({
-        boardCanvasSize: this.boardCanvasSize,
-        captureCanvasSize: this.captureCanvasSize,
-      }),
-      fill: Colors.translucentBlack,
-      closed: true,
-    });
-    this.lightBoxRect = new Konva.Rect({
-      size: captureCanvasSize,
-      position: {
-        x: (boardCanvasSize.width - captureCanvasSize.width) / 2,
-        y: (boardCanvasSize.height - captureCanvasSize.height) / 2,
-      },
-      fill: Colors.transparent,
-      // fill: "rgba(100,0,0,0.3)",
-    });
-  }
-  public enable(showMagicBox?: boolean) {
-    this.uiLayerRef.add(this.matteBoxPoly);
-    this.uiLayerRef.add(this.lightBoxRect);
-    if (showMagicBox) {
-      uiAccess.magicBox.show();
-    }
-  }
-  public disable() {
-    this.matteBoxPoly.remove();
-    this.lightBoxRect.remove();
-    if (uiAccess.magicBox.isShowing()) {
-      uiAccess.magicBox.hide();
-    }
-  }
-  public updateSize({
-    boardCanvasSize,
-    captureCanvasSize,
-  }: {
-    boardCanvasSize?: Size;
-    captureCanvasSize?: Size;
-  }) {
-    if (boardCanvasSize) {
-      this.boardCanvasSize = boardCanvasSize;
-    }
-    if (captureCanvasSize) {
-      this.captureCanvasSize = captureCanvasSize;
-    }
-    this.matteBoxPoly.points(
-      getMatteBoxPolygonPoints({
-        boardCanvasSize: this.boardCanvasSize,
-        captureCanvasSize: this.captureCanvasSize,
-      }),
-    );
-    this.lightBoxRect.setAttrs({
-      size: this.captureCanvasSize,
-      position: {
-        x: (this.boardCanvasSize.width - this.captureCanvasSize.width) / 2,
-        y: (this.boardCanvasSize.height - this.captureCanvasSize.height) / 2,
-      },
-    });
-  }
-}
-
-function getMatteBoxPolygonPoints({
-  boardCanvasSize: board,
-  captureCanvasSize: capture,
-}: {
-  boardCanvasSize: Size;
-  captureCanvasSize: Size;
-}) {
-  return [
-    //top left
-    0,
-    0,
-    // top right
-    board.width,
-    0,
-    //bottom right
-    board.width,
-    board.height,
-    //bottom middle
-    board.width / 2,
-    board.height,
-    //canvas bottom middle,
-    board.width / 2,
-    (board.height - capture.height) / 2 + capture.height,
-    //canvas bottom right,
-    (board.width - capture.width) / 2 + capture.width,
-    (board.height - capture.height) / 2 + capture.height,
-    //canvas top right,
-    (board.width - capture.width) / 2 + capture.width,
-    (board.height - capture.height) / 2,
-    //canvas top left,
-    (board.width - capture.width) / 2,
-    (board.height - capture.height) / 2,
-    //canvas bottom left,
-    (board.width - capture.width) / 2,
-    (board.height - capture.height) / 2 + capture.height,
-    //canvas bottom middle,
-    board.width / 2,
-    (board.height - capture.height) / 2 + capture.height,
-    //bottom middle
-    board.width / 2,
-    board.height,
-    //bottom left
-    0,
-    board.height,
-    //back to top left
-    0,
-    0,
-  ];
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/SceneManager.ts

@@ -1,230 +0,0 @@
-import Konva from "konva";
-import { v4 as uuidv4 } from "uuid";
-// TODO: USE API STORTELLE
-import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
-import { NodesManager, SelectionManager } from "../NodesManagers";
-import {
-  ImageNodeData,
-  NodeData,
-  TextNodeData,
-  TransformationData,
-  VideoNodeData,
-} from "../types";
-import { uiAccess } from "../../signals/uiAccess";
-import { NavigateFunction } from "react-router-dom";
-import { NodeType } from "../Nodes/constants";
-import { ImageNode, TextNode } from "../Nodes";
-import { RealTimeDrawEngine as RenderEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
-
-
-export class SceneManager {
-  private navigateRef: NavigateFunction;
-
-
-  private mediaLayerRef: Konva.Layer;
-  private nodesManagerRef: NodesManager;
-  private selectionManagerRef: SelectionManager;
-  private renderEngineRef: RenderEngine;
-  private currentSceneToken: string | undefined;
-
-  constructor({
-    navigateRef,
-  
-    mediaLayerRef,
-    nodesManagerRef,
-    selectionManagerRef,
-    renderEngineRef,
-  }: {
-    navigateRef: NavigateFunction;
-
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-    selectionManagerRef: SelectionManager;
-    renderEngineRef: RenderEngine;
-  }) {
-    this.navigateRef = navigateRef;
-
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-    this.selectionManagerRef = selectionManagerRef;
-    this.renderEngineRef = renderEngineRef;
-  }
-
-  public async saveScene() {
-    const mediaUploadApi = new MediaUploadApi();
-    const timestamp = new Date();
-    const sceneTitle =
-      "board_" + timestamp.toISOString().substring(0, 19).replace(/\D/g, "");
-
-    const saveJson = this.extractAllNodesData();
-    console.log("saveJson", saveJson);
-    const file = new File([saveJson], `${sceneTitle}`, {
-      type: "application/json",
-    });
-    if (!this.currentSceneToken) {
-      const uploadResponse = await mediaUploadApi.UploadNewScene({
-        blob: file,
-        fileName: file.name,
-        uuid: uuidv4(),
-      });
-      console.log(uploadResponse);
-      if (!uploadResponse.success || !uploadResponse.data) {
-        uiAccess.dialogError.show({
-          title: "Save New Scene Error",
-          message: uploadResponse.errorMessage,
-        });
-        return;
-      }
-      this.currentSceneToken = uploadResponse.data;
-      this.navigateRef(`/${this.currentSceneToken}`);
-    } else {
-      const uploadResponse = await mediaUploadApi.UploadSavedScene({
-        blob: file,
-        fileName: file.name,
-        uuid: uuidv4(),
-        mediaToken: this.currentSceneToken,
-      });
-      console.log(uploadResponse);
-      if (!uploadResponse.success || !uploadResponse.data) {
-        uiAccess.dialogError.show({
-          title: "Save Scene Error",
-          message: uploadResponse.errorMessage,
-        });
-        return;
-      }
-    }
-  }
-
-  public async loadScene(mediaFileToken: string) {
-    const mediaFileApi = new MediaFilesApi();
-    const getSceneResponse = await mediaFileApi.GetMediaFileByToken({
-      mediaFileToken: mediaFileToken,
-    });
-    if (!getSceneResponse.success || !getSceneResponse.data) {
-      uiAccess.dialogError.show({
-        title: "Load Scene Error",
-        message: getSceneResponse.errorMessage,
-      });
-      return;
-    }
-    this.currentSceneToken = mediaFileToken;
-    // console.log(getSceneResponse.data);
-    // console.log(getSceneResponse.data.public_bucket_path);
-    const fileResponse = await fetch(getSceneResponse.data.public_bucket_url);
-    if (!fileResponse.ok) {
-      uiAccess.dialogError.show({
-        title: "Load Scene Error",
-        message: "Failed to download Scene File",
-      });
-      return;
-    }
-    const fileBlob = await fileResponse.blob();
-
-    const loadJson: NodeData[] = await new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      const readerError = () => {
-        uiAccess.dialogError.show({
-          title: "Load Scene Error",
-          message: "Failed to read Scene File",
-        });
-        this.navigateRef("/");
-        console.log("debug file Response", fileResponse);
-        console.log("debug file Blob", fileBlob);
-        reject();
-      };
-      reader.onloadend = () => {
-        try {
-          resolve(JSON.parse(reader.result as string));
-        } catch {
-          readerError();
-        }
-      };
-      reader.onerror = () => {
-        readerError();
-      };
-      reader.readAsText(fileBlob);
-    });
-
-    this.rebuildScene(loadJson);
-  }
-
-  private extractAllNodesData() {
-    const nodesData: NodeData[] = [];
-    this.nodesManagerRef.getAllNodes().forEach((node) => {
-      const nodeData = node.getNodeData(
-        this.renderEngineRef.captureCanvas.position(),
-      );
-      if (nodeData !== null) {
-        nodesData.push(nodeData);
-      }
-    });
-    nodesData.sort((a, b) => a.transform.zIndex - b.transform.zIndex);
-    return JSON.stringify(nodesData);
-  }
-
-  private rebuildScene(nodesData: NodeData[]) {
-    // console.log(nodesData);
-    nodesData.forEach((nodeDatum) => {
-      if (nodeDatum.type === NodeType.IMAGE && nodeDatum.imageNodeData) {
-        this.addImage(nodeDatum.imageNodeData, nodeDatum.transform);
-      } else if (nodeDatum.type === NodeType.VIDEO && nodeDatum.videoNodeData) {
-        this.addVideo(nodeDatum.videoNodeData, nodeDatum.transform);
-      } else if (nodeDatum.type === NodeType.TEXT && nodeDatum.textNodeData) {
-        this.addText({
-          textNodeData: nodeDatum.textNodeData,
-          transform: nodeDatum.transform,
-        });
-      }
-    });
-  }
-
-  private addImage(
-    imageNodeData: ImageNodeData,
-    transform: TransformationData,
-  ) {
-    const imageNode = new ImageNode({
-      mediaFileUrl: imageNodeData.mediaFileUrl,
-      mediaLayerRef: this.mediaLayerRef,
-      canvasPosition: this.renderEngineRef.captureCanvas.position(),
-      canvasSize: this.renderEngineRef.captureCanvas.size(),
-      transform: transform,
-      selectionManagerRef: this.selectionManagerRef,
-    });
-    this.nodesManagerRef.saveNode(imageNode);
-    this.renderEngineRef.addNodes(imageNode);
-  }
-  private addVideo(
-    videoNodeData: VideoNodeData,
-    transform: TransformationData,
-  ) {
-    const videoNode = new VideoNode({
-      loadingVideosProviderRef: this.loadingVideosProviderRef,
-      mediaLayerRef: this.mediaLayerRef,
-      selectionManagerRef: this.selectionManagerRef,
-      canvasPosition: this.renderEngineRef.captureCanvas.position(),
-      canvasSize: this.renderEngineRef.captureCanvas.size(),
-      videoNodeData: videoNodeData,
-      transform: transform,
-    });
-    this.nodesManagerRef.saveNode(videoNode);
-    this.renderEngineRef.addNodes(videoNode);
-  }
-  private addText({
-    textNodeData,
-    transform,
-  }: {
-    textNodeData: TextNodeData;
-    transform: TransformationData;
-  }) {
-    const textNode = new TextNode({
-      textNodeData: textNodeData,
-      transform: transform,
-      mediaLayerRef: this.mediaLayerRef,
-      canvasPosition: this.renderEngineRef.captureCanvas.position(),
-      canvasSize: this.renderEngineRef.captureCanvas.size(),
-      selectionManagerRef: this.selectionManagerRef,
-    });
-    this.nodesManagerRef.saveNode(textNode);
-    this.renderEngineRef.addNodes(textNode);
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/index.ts

@@ -1,3 +0,0 @@
-export { CommandManager } from "./CommandManager";
-export { MatteBox } from "./MatteBox";
-export { SceneManager } from "./SceneManager";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/GenerationEngine.ts

@@ -1,46 +0,0 @@
-import { invoke } from "@tauri-apps/api/core";
-import {
-  cancelGeneration,
-  finishGeneration,
-  onStartGeneration,
-} from "~/signals/generation/generationSignals";
-
-export class GenerationEngine {
-  private isGenerating = false;
-
-  constructor() {
-    console.log("GenerationEngine constructor");
-    this.attachEventListeners();
-  }
-
-  private attachEventListeners() {
-    onStartGeneration((prompt) => {
-      this.invokeGeneration(prompt);
-    });
-  }
-
-  private async invokeGeneration(prompt: string) {
-    if (this.isGenerating) {
-      return;
-    }
-
-    this.isGenerating = true;
-    console.log("Invoking generation for prompt:", prompt);
-
-    try {
-      const base64BitmapResponse = await invoke("text_to_image", {
-        prompt: prompt,
-      });
-
-      console.log("Generation finished with response:", base64BitmapResponse);
-
-      const base64string = base64BitmapResponse as string;
-      finishGeneration(base64string);
-    } catch (error) {
-      console.error("Error during image processing:", error);
-      cancelGeneration();
-    } finally {
-      this.isGenerating = false;
-    }
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/BaseNode.ts

@@ -1,253 +0,0 @@
-import Konva from "konva";
-
-import { SelectionManager } from "../NodesManagers";
-import { highlightStrokeWidth, primaryOrange } from "./constants";
-import { NodeData, Position } from "../types";
-import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
-import { MouseEventHandler } from "react";
-import { KonvaEventObject } from "konva/lib/Node";
-
-export type SupportedNode = Konva.Image | Konva.Group | Konva.Shape;
-
-export abstract class BaseNode {
-  protected selectionManagerRef: SelectionManager;
-  public kNode: SupportedNode;
-  protected mediaLayerRef: Konva.Layer;
-
-  // Internal State members
-  // do not modify internal
-  protected isSelecting: boolean = false;
-  // This locks interaction when the render engine is rendering
-  protected isProcessing: boolean = false;
-  protected _isLocked: boolean = false;
-  protected _areBaseEventsListening: boolean = false;
-  protected _isKDragEventListening: boolean = false;
-  protected _isKTranformEventListening: boolean = false;
-
-  abstract getNodeData(captureCanvasPosition: Position): NodeData | null;
-
-  constructor({
-    selectionManagerRef,
-    mediaLayerRef,
-    kNode,
-  }: {
-    selectionManagerRef: SelectionManager;
-    mediaLayerRef: Konva.Layer;
-    kNode: SupportedNode;
-  }) {
-    // console.log("Node constructed");
-    // this.uuid = uuidv4();
-    this.mediaLayerRef = mediaLayerRef;
-    this.selectionManagerRef = selectionManagerRef;
-    this.kNode = kNode;
-  }
-
-  protected delete() {
-    // Do any other clean up and delete the konva node.
-    this.kNode.destroy();
-  }
-  public async setProcessing(val: boolean) {
-    this.isProcessing = val;
-  }
-  public isKEventRef() {
-    return this._isKDragEventListening && this._isKTranformEventListening;
-  }
-  public setIsKEventRef(flag: boolean) {
-    this._isKDragEventListening = flag;
-    this._isKTranformEventListening = flag;
-    this.removeListenToBaseKNodeTransformations();
-    this.removeListenToBaseKNodeDrags();
-    if (flag) {
-      this.listenToBaseKNodeTransformations();
-      this.listenToBaseKNodeDrags();
-    }
-  }
-  public highlight() {
-    // console.log("Highlight", this.kNode._id);
-    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
-      this.kNode.stroke(primaryOrange);
-      this.kNode.strokeWidth(highlightStrokeWidth);
-      return;
-    }
-    if (this.kNode instanceof Konva.Group) {
-      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
-      console.log("Wrapper rect:", wrapperRect);
-      if (wrapperRect != null) {
-        wrapperRect.stroke(primaryOrange);
-        wrapperRect.strokeWidth(highlightStrokeWidth);
-      }
-      return;
-    }
-    if (import.meta.env.DEV) {
-      console.warn(
-        "DEV: BaseNode Highlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
-      );
-    }
-  }
-
-  public unhighlight() {
-    // console.log("unHighlight", this.kNode._id);
-    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
-      this.kNode.strokeWidth(0);
-      return;
-    }
-    if (this.kNode instanceof Konva.Group) {
-      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
-      console.log("Wrapper rect:", wrapperRect);
-      if (wrapperRect != null) {
-        // Issue investigate
-        wrapperRect.strokeWidth(0);
-      }
-      return;
-    }
-    if (import.meta.env.DEV) {
-      console.warn(
-        "DEV: BaseNode UnHighlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
-      );
-    }
-  }
-
-  public moveLayerUp() {
-    this.kNode.moveUp();
-  }
-  public moveLayerDown() {
-    this.kNode.moveDown();
-  }
-  public isLocked() {
-    return this._isLocked;
-  }
-  public lock() {
-    this._isLocked = true;
-    this.kNode.setDraggable(false);
-    this.selectionManagerRef.updateNodeTransformer();
-    if (this.isKEventRef()) {
-      this.selectionManagerRef.updateContextComponents();
-    }
-  }
-  public unlock() {
-    this._isLocked = false;
-    this.kNode.setDraggable(true);
-    this.selectionManagerRef.updateNodeTransformer();
-    if (this.isKEventRef()) {
-      this.selectionManagerRef.updateContextComponents();
-    }
-  }
-
-  public listenToBaseKNode() {
-    if (this._areBaseEventsListening) {
-      return;
-    }
-    this._areBaseEventsListening = true;
-    const handleSelect = (isMultiSelect: boolean) => {
-      // console.log("handle select");
-      if (!isMultiSelect) {
-        // clear selection if not multislect
-        console.log("No Shift >> no multiselect");
-        this.selectionManagerRef.clearSelection();
-      }
-      if (this.selectionManagerRef.isNodeSelected(this)) {
-        this.selectionManagerRef.deselectNode(this);
-        return;
-      }
-      if (this.isSelecting) {
-        this.selectionManagerRef.selectNode(this);
-        return;
-      }
-    };
-
-    const handleRightClick = (e: KonvaEventObject<MouseEvent>) => {
-      this.selectionManagerRef.clearSelection();
-      this.selectionManagerRef.selectNode(this, undefined, {
-        show: true,
-        at: { x: e.evt.x, y: e.evt.y }
-      });
-    }
-
-    this.kNode.on("contextmenu", (e) => {
-      console.log("CONTEXT MENU", e);
-      e.evt.preventDefault();
-      handleRightClick(e);
-    });
-
-    this.kNode.on("mousedown", (e) => {
-      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
-      // 3: Right mouse button
-      // If right click, let context event handle it
-      if (e.evt.button === 2) {
-        return;
-      }
-
-      // Selection of Node
-      if (!this.selectionManagerRef.isNodeSelected(this)) {
-        this.isSelecting = true;
-        // send shift key to check for multiselect
-        handleSelect(e.evt.shiftKey);
-      }
-    });
-
-    this.kNode.on("mouseup", (e) => {
-      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
-      // 3: Right mouse button
-      // If right click, let context event handle it
-      if (e.evt.button === 2) {
-        return;
-      }
-
-      // just coming out of dragging or selecting mode
-      // no need to handle select
-      if (this.selectionManagerRef.isDragging() || this.isSelecting) {
-        this.isSelecting = false;
-        return;
-      }
-
-      // checking for multiselect, in multiselect deselection is possible
-      handleSelect(e.evt.shiftKey);
-    });
-  }
-  public removeListenToBaseKNode() {
-    this._areBaseEventsListening = false;
-    this.kNode.removeEventListener("mousedown mouseup");
-  }
-  private handleDragStart = () => {
-    console.log("Drag start", this.kNode._id);
-    if (this.isProcessing) {
-      return;
-    }
-    this.selectionManagerRef.dragStart();
-  };
-
-  private handleDragEnd = () => {
-    this.selectionManagerRef.dragEnd();
-  };
-
-  public listenToBaseKNodeDrags() {
-    this.kNode.on("dragstart", this.handleDragStart);
-    this.kNode.on("dragend", this.handleDragEnd);
-  }
-
-  public removeListenToBaseKNodeDrags() {
-    this.kNode.off("dragstart", this.handleDragStart);
-    this.kNode.off("dragend", this.handleDragEnd);
-  }
-  public listenToBaseKNodeTransformations() {
-    this.kNode.on("transformstart", (event) => {
-      console.log("transformstart", event.target._id);
-      this.selectionManagerRef.transformStart();
-    });
-    this.kNode.on("transform", () => {
-      this.kNode.setAttrs({
-        width: this.kNode.width() * this.kNode.scaleX(),
-        height: this.kNode.height() * this.kNode.scaleY(),
-        scaleX: 1,
-        scaleY: 1,
-      });
-    });
-    this.kNode.on("transformend", (event) => {
-      console.log("transformend", event.target._id);
-      this.selectionManagerRef.transformEnd();
-    });
-  }
-  public removeListenToBaseKNodeTransformations() {
-    this.kNode.removeEventListener("transformend");
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ImageNode.ts

@@ -1,261 +0,0 @@
-import Konva from "konva";
-import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
-
-import { SelectionManager } from "../NodesManagers";
-import { Position, Size, NodeData, TransformationData } from "../types";
-
-import { NetworkedNode, UploadStatus } from "./NetworkedNode";
-import { NodeType, transparent } from "./constants";
-import { NodeUtilities } from "./NodeUtilities";
-
-interface ImageNodeContructor {
-  canvasPosition: Position;
-  canvasSize: Size;
-  imageFile?: File;
-  imageBitmap?: ImageBitmap;
-  mediaFileToken?: string;
-  mediaFileUrl?: string;
-  transform?: TransformationData;
-  mediaLayerRef: Konva.Layer;
-  selectionManagerRef: SelectionManager;
-  loaded: () => Promise<void>;
-}
-
-export class ImageNode extends NetworkedNode {
-  public kNode: Konva.Image;
-  public imageSize?: Size;
-  private loaded!: () => Promise<void>;
-  constructor({
-    canvasPosition,
-    canvasSize,
-    imageFile,
-    mediaFileToken,
-    mediaFileUrl,
-    transform: existingTransform,
-    mediaLayerRef,
-    selectionManagerRef,
-    loaded,
-    imageBitmap,
-  }: ImageNodeContructor) {
-    // kNodes need to be created first to guaruntee
-    // that it is not undefined in parent's context
-    const transform = NodeUtilities.getInitialTransform({
-      existingTransform,
-      canvasPosition,
-      canvasSize,
-    });
-    const kNode = new Konva.Image({
-      image: undefined, // to do replace with placeholder
-      ...transform,
-      draggable: true,
-      strokeScaleEnabled: false,
-    });
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: kNode,
-      localFile: imageFile,
-    });
-    this.kNode = kNode;
-    this.loaded = loaded;
-    // this.imageSize = minNodeSize;
-    this.mediaLayerRef.add(this.kNode);
-
-    if (imageFile) {
-      this.loadImageFromFile({
-        imageFile: imageFile,
-        maxSize: canvasSize,
-        refPosition: canvasPosition,
-      });
-      return;
-    }
-    if (mediaFileUrl && transform) {
-      this.mediaFileToken = mediaFileToken;
-      this.mediaFileUrl = mediaFileUrl;
-      this.loadImageFromUrl(mediaFileUrl);
-      return;
-    }
-    if (imageBitmap) {
-      this.loadImageFromImageBitmap({
-        imageBitmap: imageBitmap,
-        maxSize: canvasSize,
-        refPosition: canvasPosition,
-      });
-      return;
-    }
-    console.log("image node creation is fucked");
-  }
-  private loadImageFromFile({
-    imageFile,
-    maxSize,
-    refPosition,
-  }: {
-    imageFile: File;
-    maxSize: Size;
-    refPosition: Position;
-  }) {
-    const imageComponent = new Image();
-    imageComponent.crossOrigin = "anonymous";
-    // this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
-
-    imageComponent.onload = () => {
-      //this.setProgress({ progress: 0, status: UploadStatus.FILE_STAGED });
-      this.imageSize = {
-        width: imageComponent.width,
-        height: imageComponent.height,
-      };
-      const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
-        componentSize: this.imageSize,
-        maxSize: maxSize,
-      });
-      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
-        canvasOffset: refPosition,
-        componentSize: adjustedSize,
-        maxSize: maxSize,
-      });
-      this.kNode.image(imageComponent);
-      this.kNode.setSize(adjustedSize);
-      this.kNode.setPosition(centerPosition);
-      this.kNode.moveToTop();
-      this.kNode.fill(transparent);
-      this.listenToBaseKNode();
-      this.mediaLayerRef.draw();
-      //this.uploadImage(imageFile);
-      this.loaded();
-    };
-    imageComponent.onerror = () => {
-      //this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE });
-    };
-    imageComponent.src = URL.createObjectURL(imageFile);
-  }
-  private async loadImageFromUrl(mediaFileUrl: string) {
-    //this.setProgress({ progress: 75, status: UploadStatus.LOADING });
-
-    const newImage = new Image();
-    newImage.crossOrigin = "anonymous";
-    newImage.onerror = () => {
-      //this.setProgress({ progress: 90, status: UploadStatus.ERROR_ON_LOAD });
-    };
-    newImage.onload = () => {
-      // console.log("network image", newImage);
-      this.kNode.image(newImage);
-      this.kNode.draw();
-      //this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
-    };
-    newImage.src = mediaFileUrl;
-    this.listenToBaseKNode();
-  }
-
-  private loadImageFromImageBitmap({
-    imageBitmap,
-    maxSize,
-    refPosition,
-  }: {
-    imageBitmap: ImageBitmap;
-    maxSize: Size;
-    refPosition: Position;
-  }) {
-    this.imageSize = {
-      width: imageBitmap.width,
-      height: imageBitmap.height,
-    };
-    const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
-      componentSize: this.imageSize,
-      maxSize: maxSize, // TODO
-    });
-    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
-      canvasOffset: refPosition, // TODO
-      componentSize: adjustedSize, // TODO
-      maxSize: maxSize, // TODO
-    });
-    this.kNode.image(imageBitmap);
-    this.kNode.setSize(adjustedSize);
-    this.kNode.setPosition(centerPosition);
-    this.kNode.moveToTop();
-    this.kNode.fill(transparent);
-    this.listenToBaseKNode();
-    this.mediaLayerRef.draw();
-    //this.uploadImage(imageFile);
-    this.loaded();
-    this.listenToBaseKNode();
-  }
-
-  private async uploadImage(imageFile: File) {
-    //this.setProgress({ progress: 10, status: UploadStatus.UPLOADING });
-
-    const mediaUploadApi = new MediaUploadApi();
-    const uploadResponse = await mediaUploadApi.UploadImage({
-      blob: imageFile,
-      uuid: this.uuidGenerate(),
-      fileName: imageFile.name,
-    });
-    // console.log(uploadResponse);
-    if (!uploadResponse.success || !uploadResponse.data) {
-      this.setStatus(UploadStatus.ERROR_ON_UPLOAD, uploadResponse.errorMessage);
-      return;
-    }
-    this.mediaFileToken = uploadResponse.data;
-    this.retreiveImage(this.mediaFileToken);
-  }
-
-  private async retreiveImage(mediaFileToken: string) {
-    //this.setProgress({ progress: 50, status: UploadStatus.RETREIVING });
-    const mediaFileApi = new MediaFilesApi();
-    const mediaFileResponse = await mediaFileApi.GetMediaFileByToken({
-      mediaFileToken: mediaFileToken,
-    });
-    // console.log(mediaFileResponse);
-    if (!mediaFileResponse.success || !mediaFileResponse.data) {
-      this.setStatus(
-        UploadStatus.ERROR_ON_RETREIVE,
-        mediaFileResponse.errorMessage,
-      );
-      return;
-    }
-    this.mediaFileUrl = mediaFileResponse.data.media_links.cdn_url;
-    this.loadImageFromUrl(this.mediaFileUrl);
-  }
-
-  public async retry() {
-    if (this.mediaFileUrl) {
-      this.loadImageFromUrl(this.mediaFileUrl);
-      return;
-    }
-    if (this.mediaFileToken) {
-      this.retreiveImage(this.mediaFileToken);
-      return;
-    }
-    if (this.localFile) {
-      this.uploadImage(this.localFile);
-      return;
-    }
-    console.warn("Image Node has no data to recontruct itself!");
-  }
-  public getNodeData(canvasPostion: Position) {
-    if (!this.mediaFileUrl) {
-      console.error("Image Node can not be saved");
-      return null;
-    }
-    const data: NodeData = {
-      type: NodeType.IMAGE,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPostion.x,
-          y: this.kNode.position().y - canvasPostion.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-      imageNodeData: {
-        mediaFileUrl: this.mediaFileUrl,
-        mediaFileToken: this.mediaFileToken,
-      },
-    };
-    return data;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NetworkedNode.ts

@@ -1,134 +0,0 @@
-import Konva from "konva";
-import { v4 as uuidv4 } from "uuid";
-import { SelectionManager } from "../NodesManagers";
-import { BaseNode, SupportedNode } from "./BaseNode";
-import { Size } from "../types";
-import { LoadingVideosProvider } from "../EngineUtitlities/LoadingVideosProvider";
-import { NodeProgressEventDetail } from "../types/events";
-
-export enum UploadStatus {
-  INIT = "init",
-  FILE_STAGED = "file_staged",
-  ERROR_ON_FILE = "error_on_file",
-  UPLOADING = "uploading",
-  ERROR_ON_UPLOAD = "error_on_upload",
-  RETREIVING = "retreiving",
-  ERROR_ON_RETREIVE = "error_on_retreive",
-  LOADING = "loading",
-  ERROR_ON_LOAD = "error_on_load",
-  SUCCESS = "success",
-}
-
-export abstract class NetworkedNode extends BaseNode {
-  public kNode: SupportedNode;
-
-  // members to deal with loading progress
-  public didFinishLoading: boolean = false;
-  protected _progress: number = 0;
-  protected _progressMessage?: string;
-  protected progressStatus: string = UploadStatus.INIT;
-  public progressEvent: EventTarget;
-
-  // members to deal with the file carried
-  protected localFile?: File;
-  protected mediaFileToken?: string;
-  protected mediaFileUrl?: string;
-  public mediaFileSize?: Size;
-
-  // loading screen
-  protected loadingVideosProviderRef?: LoadingVideosProvider;
-
-  // error and retry handling
-  public errorMessage?: string;
-  abstract retry(): void;
-
-  constructor({
-    kNode,
-    selectionManagerRef,
-    mediaLayerRef,
-    localFile,
-    loadingVideosProviderRef,
-  }: {
-    kNode: SupportedNode;
-    selectionManagerRef: SelectionManager;
-    mediaLayerRef: Konva.Layer;
-    loadingVideosProviderRef?: LoadingVideosProvider;
-    localFile?: File;
-  }) {
-    super({
-      kNode,
-      selectionManagerRef,
-      mediaLayerRef,
-    });
-    this.kNode = kNode;
-    this.loadingVideosProviderRef = loadingVideosProviderRef;
-    this.didFinishLoading = false;
-    this.progressEvent = new EventTarget();
-    this.localFile = localFile;
-  }
-  public progress() {
-    return this._progress;
-  }
-  public progressMessage() {
-    return this._progressMessage;
-  }
-  public status() {
-    return this.progressStatus;
-  }
-  public isError() {
-    const errorStatues: string[] = [
-      UploadStatus.ERROR_ON_FILE,
-      UploadStatus.ERROR_ON_UPLOAD,
-      UploadStatus.ERROR_ON_RETREIVE,
-      UploadStatus.ERROR_ON_LOAD,
-    ];
-    return errorStatues.includes(this.progressStatus);
-  }
-
-  protected uuidGenerate() {
-    return uuidv4();
-  }
-  protected setStatus(newStatus: string, message?: string) {
-    this.progressStatus = newStatus;
-    this.errorMessage = message;
-    this.selectionManagerRef.updateContextComponents();
-  }
-  protected setProgress<S>({
-    progress,
-    name,
-    status,
-    message,
-  }: {
-    progress: number;
-    name?: string;
-    status?: S;
-    message?: string;
-  }) {
-    this._progress = progress;
-    if (message) {
-      this._progressMessage = message;
-    }
-    if (status && typeof status === "string") {
-      this.progressStatus = status;
-    }
-
-    if (this._progress === 100) {
-      this.didFinishLoading = true;
-    }
-    // TODO: change to use
-    this.progressEvent.dispatchEvent(
-      new CustomEvent<NodeProgressEventDetail<S>>(
-        name ? name : "GenericNodeProgress",
-        {
-          detail: {
-            node: this,
-            progress: this._progress,
-            message: message,
-            status: status,
-          },
-        },
-      ),
-    );
-    this.selectionManagerRef.updateContextComponents();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NodeUtilities.ts

@@ -1,158 +0,0 @@
-import Konva from "konva";
-import { Position, Size, TransformationData } from "../types";
-import { minNodeSize, transparent } from "./constants";
-
-export const NodeUtilities = {
-  adjustNodeSizeToCanvas,
-  downloadOffscreenCanvas,
-  getInitialTransform,
-  isAssetUrlAvailable,
-  positionNodeOnCanvasCenter,
-  printKNodeAttrs,
-  urlToBlob,
-};
-function downloadOffscreenCanvas(canvas: OffscreenCanvas) {
-  canvas.convertToBlob().then((blob) => {
-    if (blob) {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "offscreen-canvas-image.png"; // Specify the file name
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url); // Clean up
-    }
-  });
-}
-function getInitialTransform({
-  existingTransform,
-  mediaFileSize,
-  canvasPosition,
-  canvasSize,
-}: {
-  existingTransform?: TransformationData;
-  mediaFileSize?: Size;
-  canvasPosition: Position;
-  canvasSize: Size;
-}) {
-  return existingTransform
-    ? {
-        ...existingTransform,
-        position: {
-          x: existingTransform.position.x + canvasPosition.x,
-          y: existingTransform.position.y + canvasPosition.y,
-        },
-        fill: transparent,
-      }
-    : {
-        position: positionNodeOnCanvasCenter({
-          canvasOffset: canvasPosition,
-          componentSize: mediaFileSize ?? minNodeSize,
-          maxSize: canvasSize,
-        }),
-        size: mediaFileSize ?? minNodeSize,
-        fill: "gray",
-      };
-}
-
-function adjustNodeSizeToCanvas({
-  componentSize,
-  maxSize,
-}: {
-  componentSize: Size;
-  maxSize: Size;
-}) {
-  const adjustedSize = {
-    width: componentSize.width,
-    height: componentSize.height,
-  };
-  if (adjustedSize.width > maxSize.width) {
-    const scaleDown = maxSize.width / adjustedSize.width;
-    adjustedSize.width = adjustedSize.width * scaleDown;
-    adjustedSize.height = adjustedSize.height * scaleDown;
-  }
-  if (adjustedSize.height > maxSize.height) {
-    const scaleDownAgain = maxSize.height / adjustedSize.height;
-    adjustedSize.width = adjustedSize.width * scaleDownAgain;
-    adjustedSize.height = adjustedSize.height * scaleDownAgain;
-  }
-  return adjustedSize;
-}
-
-function positionNodeOnCanvasCenter({
-  canvasOffset,
-  componentSize,
-  maxSize,
-}: {
-  canvasOffset: Position;
-  componentSize: Size;
-  maxSize: Size;
-}) {
-  return {
-    x: canvasOffset.x + maxSize.width / 2 - componentSize.width / 2,
-    y: canvasOffset.y + maxSize.height / 2 - componentSize.height / 2,
-  };
-}
-
-function printKNodeAttrs(kNode: Konva.Node) {
-  console.log({
-    position: kNode.position(),
-    size: kNode.size(),
-    scale: kNode.scale(),
-    rotation: kNode.rotation(),
-  });
-}
-async function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-// Function to check if the URL returns a 200 status
-async function checkUrl(url: string): Promise<boolean> {
-  try {
-    const response = await fetch(url);
-    return response.status === 200;
-  } catch (error) {
-    console.error("Error fetching URL:", error);
-    return false;
-  }
-}
-// wait using a while loop to display the result.
-async function isAssetUrlAvailable({
-  url,
-  sleepDurationMs = 500,
-  totalRetries,
-}: {
-  url: string;
-  sleepDurationMs?: number;
-  totalRetries?: number;
-}): Promise<boolean> {
-  let retryCount = 0;
-  let isAvailable = false;
-  const totalRetriesReached = () => {
-    if (!totalRetries) {
-      return false;
-    }
-    return retryCount >= totalRetries;
-  };
-  while (!isAvailable && !totalRetriesReached()) {
-    isAvailable = await checkUrl(url);
-    if (!isAvailable) {
-      console.log("Asset at Url not available yet, retrying...");
-      retryCount = retryCount + 1;
-      await sleep(sleepDurationMs);
-    } else if (import.meta.env.DEV) {
-      console.log("Preview Image is available:", url);
-    }
-  }
-  return isAvailable;
-}
-
-async function urlToBlob(url: string): Promise<Blob> {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch resource: ${response.statusText}`);
-  }
-  const blob = await response.blob();
-  return blob;
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PaintNode.ts

@@ -1,91 +0,0 @@
-import Konva from "konva";
-import { SelectionManager } from "../NodesManagers";
-import { Position, NodeData } from "../types";
-import { NodeType } from "./constants";
-
-import { NetworkedNode } from "./NetworkedNode";
-
-interface PaintNodeConstructor {
-  canvasElement: HTMLCanvasElement;
-  lineBounds: {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-  };
-  mediaLayerRef: Konva.Layer;
-  selectionManagerRef: SelectionManager;
-
-  loaded: () => Promise<void>;
-}
-
-export class PaintNode extends NetworkedNode {
-  retry(): void {
-    throw new Error("Method not implemented.");
-  }
-
-  constructor({
-    canvasElement,
-    lineBounds,
-    mediaLayerRef,
-    selectionManagerRef,
-    loaded,
-  }: PaintNodeConstructor) {
-    const cl = canvasElement;
-
-    // Convert circle to image
-    const dataURL = cl.toDataURL();
-    const imageObj = new Image();
-    imageObj.src = dataURL;
-
-    const paintShape = new Konva.Image({
-      x: lineBounds.x,
-      y: lineBounds.y,
-      width: lineBounds.width,
-      height: lineBounds.height,
-      image: imageObj,
-      listening: false, // Disable event listening to allow captureCanvas to receive events
-      draggable: true,
-      // stroke: '#000000',
-      // strokeWidth: 2,
-      // dash: [5, 5], // Creates dotted outline THIS IS FOR DEBUG
-      globalCompositeOperation: "source-over",
-      fill: "transparent",
-    });
-
-    imageObj.onload = () => {
-      this.mediaLayerRef.draw();
-      loaded();
-    };
-
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: paintShape,
-    });
-    this.kNode.moveToTop();
-    this.mediaLayerRef.add(this.kNode);
-    this.listenToBaseKNode();
-    this.mediaLayerRef.draw();
-  }
-
-  public getNodeData(canvasPosition: Position) {
-    const data: NodeData = {
-      type: NodeType.SHAPE,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPosition.x,
-          y: this.kNode.position().y - canvasPosition.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-    };
-    return data;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PreviewCopy.ts

@@ -1,58 +0,0 @@
-import Konva from "konva";
-import { SelectionManager } from "../NodesManagers";
-import { Position, Size, NodeData, TransformationData } from "../types";
-import { NodeType } from "./constants";
-import { NodeUtilities } from "./NodeUtilities";
-import { NetworkedNode } from "./NetworkedNode";
-
-interface PreviewCopyConstructor {
-  image: Konva.Image;
-  mediaLayerRef: Konva.Layer;
-  selectionManagerRef: SelectionManager;
-  loaded: () => Promise<void>;
-}
-
-export class PreviewCopyNode extends NetworkedNode {
-  retry(): void {
-    throw new Error("Method not implemented.");
-  }
-
-  constructor({
-    image,
-    mediaLayerRef,
-    selectionManagerRef,
-    loaded,
-  }: PreviewCopyConstructor) {
-    // Create the actual shape inside the group
-
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: image,
-    });
-    this.kNode.moveToTop();
-    this.mediaLayerRef.add(this.kNode);
-    this.listenToBaseKNode();
-    this.mediaLayerRef.draw();
-  }
-
-  public getNodeData(canvasPosition: Position) {
-    const data: NodeData = {
-      type: NodeType.SHAPE,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPosition.x,
-          y: this.kNode.position().y - canvasPosition.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-    };
-    return data;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PureTextNode.ts

@@ -1,186 +0,0 @@
-import Konva from "konva";
-import { SelectionManager } from "../NodesManagers";
-import { BaseNode } from "./BaseNode";
-import {
-  NodeData,
-  Position,
-  Size,
-  TextNodeChildrenTransformData,
-  TextNodeData,
-  TransformationData,
-} from "../types";
-import { NodeUtilities } from "./NodeUtilities";
-import { NodeType } from "./constants";
-
-export class PureTextNode extends BaseNode {
-  public kNode: Konva.Group;
-  public rectNode: Konva.Rect;
-  public textNode: Konva.Text;
-  private originalTextSize: Size;
-  private textNodeData: TextNodeData;
-
-  public didFinishLoading: boolean = true;
-
-  constructor({
-    textNodeData,
-    selectionManagerRef,
-    mediaLayerRef,
-    canvasPosition,
-    canvasSize,
-    transform: existingTransform,
-    textChildrenTransforms,
-  }: {
-    textNodeData: TextNodeData;
-    selectionManagerRef: SelectionManager;
-    mediaLayerRef: Konva.Layer;
-    canvasSize: Size;
-    canvasPosition: Position;
-    transform?: TransformationData;
-    textChildrenTransforms?: TextNodeChildrenTransformData;
-  }) {
-    const textNode = new Konva.Text({
-      ...textNodeData,
-      x: 10,
-      y: 10,
-      width: 500,
-    });
-    const kNode = new Konva.Group({
-      position: NodeUtilities.positionNodeOnCanvasCenter({
-        canvasOffset: canvasPosition,
-        componentSize: {
-          width: textNode.width() + 20,
-          height: textNode.height() + 20,
-        },
-        maxSize: canvasSize,
-      }),
-      width: textNode.width() + 20,
-      height: textNode.height() + 20,
-      draggable: true,
-    });
-    const rectNode = new Konva.Rect({
-      x: 0,
-      y: 0,
-      width: textNode.width() + 20,
-      height: textNode.height() + 20,
-      strokeScaleEnabled: false,
-      name: "wrapper",
-    });
-
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: kNode,
-    });
-    this.textNodeData = textNodeData;
-    this.kNode = kNode;
-    this.textNode = textNode;
-    this.rectNode = rectNode;
-    this.kNode.add(this.rectNode);
-    this.kNode.add(this.textNode);
-    if (existingTransform && textChildrenTransforms) {
-      this.applyTransform({
-        existingTransform,
-        textChildrenTransforms,
-        canvasPosition,
-      });
-    }
-    this.mediaLayerRef.add(this.kNode);
-    this.originalTextSize = this.textNode.size();
-    this.listenToBaseKNode();
-  }
-  public listenToBaseKNodeTransformations() {
-    this.kNode.on("transformstart", () => {
-      // console.log("transformstart", event.target._id);
-      this.selectionManagerRef.transformStart();
-    });
-
-    this.kNode.on("transform", () => {
-      const newBoxSize = {
-        width: this.kNode.width() * this.kNode.scaleX(),
-        height: this.kNode.height() * this.kNode.scaleY(),
-        scaleX: 1,
-        scaleY: 1,
-      };
-      this.rectNode.setAttrs(newBoxSize);
-      this.kNode.setAttrs(newBoxSize);
-      const scaleX = (newBoxSize.width - 20) / this.originalTextSize.width;
-      const scaleY = (newBoxSize.height - 20) / this.originalTextSize.height;
-      this.textNode.setAttrs({
-        // make sure these stay the same
-        x: 10,
-        y: 10,
-        size: this.originalTextSize,
-        //while these changes in size
-        scaleX: scaleX,
-        scaleY: scaleY,
-      });
-    });
-    this.kNode.on("transformend", () => {
-      // console.log("transformend", event.target._id);
-      NodeUtilities.printKNodeAttrs(this.kNode);
-      NodeUtilities.printKNodeAttrs(this.textNode);
-      this.selectionManagerRef.transformEnd(this);
-    });
-  }
-  public getNodeData(canvasPostion: Position) {
-    const data: NodeData = {
-      type: NodeType.TEXT,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPostion.x,
-          y: this.kNode.position().y - canvasPostion.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-      textNodeData: this.textNodeData,
-      textChildrenTransforms: {
-        wrapperRectTransform: {
-          position: this.rectNode.position(),
-          size: this.rectNode.size(),
-          rotation: this.rectNode.rotation(),
-          scale: {
-            x: this.rectNode.scaleX(),
-            y: this.rectNode.scaleY(),
-          },
-          zIndex: this.rectNode.getZIndex(),
-        },
-        textNodeTransform: {
-          position: this.textNode.position(),
-          size: this.textNode.size(),
-          rotation: this.textNode.rotation(),
-          scale: {
-            x: this.textNode.scaleX(),
-            y: this.textNode.scaleY(),
-          },
-          zIndex: this.textNode.getZIndex(),
-        },
-      },
-    };
-    return data;
-  }
-  private applyTransform({
-    canvasPosition,
-    existingTransform,
-    textChildrenTransforms,
-  }: {
-    canvasPosition: Position;
-    existingTransform: TransformationData;
-    textChildrenTransforms: TextNodeChildrenTransformData;
-  }) {
-    this.kNode.setAttrs({
-      ...existingTransform,
-      position: {
-        x: existingTransform.position.x + canvasPosition.x,
-        y: existingTransform.position.y + canvasPosition.y,
-      },
-    });
-    this.rectNode.setAttrs(textChildrenTransforms.wrapperRectTransform);
-    this.textNode.setAttrs(textChildrenTransforms.textNodeTransform);
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ShapeNode.ts

@@ -1,152 +0,0 @@
-import Konva from "konva";
-import { SelectionManager } from "../NodesManagers";
-import { Position, Size, NodeData, TransformationData } from "../types";
-import { NodeType } from "./constants";
-import { NodeUtilities } from "./NodeUtilities";
-import { NetworkedNode } from "./NetworkedNode";
-
-export enum ShapeType {
-  CIRCLE = "circle",
-  SQUARE = "square",
-  TRIANGLE = "triangle",
-}
-
-interface ShapeNodeConstructor {
-  canvasPosition: Position;
-  canvasSize: Size;
-  shapeType: ShapeType;
-  size: Size;
-  color?: string; // Hex color string
-  transform?: TransformationData;
-  mediaLayerRef: Konva.Layer;
-  selectionManagerRef: SelectionManager;
-  loaded: () => Promise<void>;
-}
-
-export class ShapeNode extends NetworkedNode {
-  retry(): void {
-    throw new Error("Method not implemented.");
-  }
-
-  public shapeType: ShapeType;
-  public size: Size;
-  public color: string;
-
-  constructor({
-    canvasPosition,
-    canvasSize,
-    shapeType,
-    size,
-    color = "#2D81FF", // Default red if no color provided
-    transform: existingTransform,
-    mediaLayerRef,
-    selectionManagerRef,
-    loaded,
-  }: ShapeNodeConstructor) {
-    // Create the actual shape inside the group
-    const transform = NodeUtilities.getInitialTransform({
-      existingTransform,
-      mediaFileSize: size,
-      canvasPosition,
-      canvasSize,
-    });
-
-    let shape = null;
-
-    switch (shapeType) {
-      case ShapeType.CIRCLE:
-        shape = new Konva.Ellipse({
-          radiusX: size.width / 2,
-          radiusY: size.height / 2,
-          fill: color,
-          strokeScaleEnabled: false,
-          draggable: true,
-        });
-        break;
-
-      case ShapeType.SQUARE:
-        shape = new Konva.Rect({
-          width: size.width,
-          height: size.height,
-          ...transform,
-          fill: color,
-          strokeScaleEnabled: false,
-          draggable: true,
-        });
-        break;
-
-      case ShapeType.TRIANGLE:
-        shape = new Konva.Shape({
-          width: size.width,
-          height: size.height,
-          ...transform,
-          fill: color,
-          strokeScaleEnabled: false,
-          draggable: true,
-          sceneFunc: (context, shape) => {
-            context.beginPath();
-            context.moveTo(shape.width() / 2, 0);
-            context.lineTo(shape.width(), shape.height());
-            context.lineTo(0, shape.height());
-            context.closePath();
-            context.fillStrokeShape(shape);
-          }
-        });
-        break;
-
-      default:
-        throw new Error("Invalid shape type");
-    }
-
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: shape,
-    });
-
-    this.shapeType = shapeType;
-    this.size = size;
-    this.color = color;
-
-    // Center the shape
-    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
-      canvasOffset: canvasPosition,
-      componentSize: this.size,
-      maxSize: canvasSize,
-    });
-
-    // If the shape is an ellipse, the center is the origin so we need to offset it
-    if (shapeType === ShapeType.CIRCLE) {
-      centerPosition.x += size.width / 2;
-      centerPosition.y += size.height / 2;
-    }
-
-    // Add shape to group
-    // bring to the front
-    this.kNode.moveToTop();
-    this.kNode.setPosition(centerPosition);
-    this.mediaLayerRef.add(this.kNode);
-    this.listenToBaseKNode();
-    this.mediaLayerRef.draw();
-  }
-
-  public getNodeData(canvasPosition: Position) {
-    const data: NodeData = {
-      type: NodeType.SHAPE,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPosition.x,
-          y: this.kNode.position().y - canvasPosition.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-    };
-    return data;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/TextNode.ts

@@ -1,168 +0,0 @@
-import Konva from "konva";
-import { SelectionManager } from "../NodesManagers";
-import { BaseNode } from "./BaseNode";
-import {
-  NodeData,
-  Position,
-  Size,
-  TextAlign,
-  TextNodeData,
-  TransformationData,
-} from "../types";
-import { NodeUtilities } from "./NodeUtilities";
-import { NodeType, transparent } from "./constants";
-
-export class TextNode extends BaseNode {
-  public kNode: Konva.Image;
-  private textNodeData: TextNodeData;
-  private originalTextSize?: Size;
-  public didFinishLoading: boolean = true;
-
-  constructor({
-    textNodeData,
-    selectionManagerRef,
-    mediaLayerRef,
-    canvasPosition,
-    canvasSize,
-    transform: existingTransform,
-  }: {
-    textNodeData: TextNodeData;
-    selectionManagerRef: SelectionManager;
-    mediaLayerRef: Konva.Layer;
-    canvasSize: Size;
-    canvasPosition: Position;
-    transform?: TransformationData;
-  }) {
-    const transform = NodeUtilities.getInitialTransform({
-      existingTransform,
-      canvasPosition,
-      canvasSize,
-    });
-    // Create a new ImageNode to house the canvas text
-    const kNode = new Konva.Image({
-      image: undefined, // will use the canvas as the image source
-      ...transform,
-      draggable: true,
-      strokeScaleEnabled: false,
-    });
-
-    super({
-      selectionManagerRef: selectionManagerRef,
-      mediaLayerRef: mediaLayerRef,
-      kNode: kNode,
-    });
-    this.textNodeData = textNodeData;
-    this.kNode = kNode;
-    this.mediaLayerRef.add(this.kNode);
-    this.listenToBaseKNode();
-
-    this.loadTextImageUsingCanvas({
-      maxSize: canvasSize,
-      refPosition: canvasPosition,
-      existingTransform: existingTransform,
-    });
-  }
-
-  private loadTextImageUsingCanvas({
-    maxSize,
-    refPosition,
-    existingTransform,
-  }: {
-    maxSize: Size;
-    refPosition: Position;
-    existingTransform?: TransformationData;
-  }) {
-    // Create a temporary canvas to draw the text
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
-    if (context === null) {
-      return;
-    }
-
-    // calvulate and set canvas
-    const lines: string[] = this.textNodeData.text.split("\n");
-    const { fontSize, fontFamily, fontStyle, fontWeight, maxWidth, textAlign } =
-      this.textNodeData;
-    this.originalTextSize = {
-      width: maxWidth,
-      height: fontSize * lines.length * 1.5 + fontSize * 0.5,
-    };
-    canvas.width = this.originalTextSize.width;
-    canvas.height = this.originalTextSize.height;
-
-    // Set the font styles to match the text node
-    context.font = `${fontWeight} ${fontStyle} ${fontSize}px ${fontFamily}`;
-
-    context.fillStyle = this.textNodeData.color;
-    context.textAlign = textAlign;
-    context.textBaseline = "top";
-
-    // Draw the text on the canvas
-    lines.forEach((line, idx) => {
-      const yOffset = fontSize * (1.5 * idx + 0.5);
-      const xOffset =
-        textAlign === TextAlign.LEFT
-          ? 0
-          : textAlign === TextAlign.CENTER
-            ? maxWidth / 2
-            : maxWidth; // textAlign === TextAlign.Right
-
-      context.fillText(line, xOffset, yOffset);
-    });
-
-    // Convert canvas to data URL
-    const dataURL = canvas.toDataURL("image/png");
-
-    // Create a new Image object
-    const imageComponent = new Image();
-    imageComponent.crossOrigin = "anonymous";
-    imageComponent.onload = () => {
-      if (existingTransform) {
-        this.kNode.setAttrs({
-          image: imageComponent,
-          fill: transparent,
-        });
-        return;
-      }
-      const imageSize = {
-        width: canvas.width,
-        height: canvas.height,
-      };
-
-      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
-        canvasOffset: refPosition,
-        componentSize: imageSize,
-        maxSize: maxSize,
-      });
-
-      this.kNode.setAttrs({
-        image: imageComponent,
-        size: imageSize,
-        position: centerPosition,
-        fill: transparent,
-      });
-    };
-    imageComponent.src = dataURL;
-  }
-
-  public getNodeData(canvasPostion: Position) {
-    const data: NodeData = {
-      type: NodeType.TEXT,
-      transform: {
-        position: {
-          x: this.kNode.position().x - canvasPostion.x,
-          y: this.kNode.position().y - canvasPostion.y,
-        },
-        size: this.kNode.size(),
-        rotation: this.kNode.rotation(),
-        scale: {
-          x: this.kNode.scaleX(),
-          y: this.kNode.scaleY(),
-        },
-        zIndex: this.kNode.getZIndex(),
-      },
-      textNodeData: this.textNodeData,
-    };
-    return data;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/constants.ts

@@ -1,16 +0,0 @@
-import { Colors } from "../constants";
-
-export enum NodeType {
-  IMAGE = "image",
-  TEXT = "text",
-  VIDEO = "video",
-  SHAPE = "shape",
-}
-export const transparent = Colors.transparent;
-export const primaryOrange = Colors.primaryOrange;
-
-export const highlightStrokeWidth = 2;
-export const minNodeSize = {
-  width: 200,
-  height: 200,
-};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/index.ts

@@ -1,7 +0,0 @@
-export { NodeType } from "./constants";
-export { BaseNode } from "./BaseNode";
-export { ImageNode } from "./ImageNode";
-export { PreviewCopyNode } from "./PreviewCopy";
-export { TextNode } from "./TextNode";
-export { ShapeNode , ShapeType} from "./ShapeNode";
-export { PaintNode } from "./PaintNode";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodeIsolator.ts

@@ -1,122 +0,0 @@
-import Konva from "konva";
-import { MediaNode, TransformationData } from "../types";
-import { uiAccess } from "../../signals/uiAccess";
-
-export class NodeIsolator {
-  private mediaLayerRef: Konva.Layer;
-  private backgroundRect: Konva.Rect;
-  private referenceRect: Konva.Rect;
-  private nodeIsolationLayerRef: Konva.Layer;
-  private currentNode: MediaNode | undefined;
-  private originalKNodeTransformation: TransformationData | undefined;
-  private adjustSizeFnRef: (() => void) | undefined;
-
-  constructor({
-    mediaLayerRef,
-    nodeIsolationLayerRef,
-  }: {
-    mediaLayerRef: Konva.Layer;
-    nodeIsolationLayerRef: Konva.Layer;
-  }) {
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodeIsolationLayerRef = nodeIsolationLayerRef;
-    this.backgroundRect = new Konva.Rect({
-      fill: "rgba(0,0,0,0.5)",
-    });
-    this.referenceRect = new Konva.Rect({
-      fill: "gray",
-      stroke: "salmon",
-      strokeWidth: 10,
-      dash: [20, 10],
-      strokeScaleEnabled: false,
-    });
-  }
-
-  private adjustSizes() {
-    this.backgroundRect.setAttrs({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
-
-    if (this.currentNode && this.originalKNodeTransformation) {
-      this.referenceRect.setAttrs(this.originalKNodeTransformation);
-
-      const originalSize = {
-        width:
-          this.originalKNodeTransformation.size.width *
-          this.originalKNodeTransformation.scale.x,
-        height:
-          this.originalKNodeTransformation.size.height *
-          this.originalKNodeTransformation.scale.y,
-      };
-      const maxWidth = window.innerWidth * 0.8;
-      const isolationResize = {
-        width: maxWidth,
-        height: (maxWidth / originalSize.width) * originalSize.height,
-      };
-      const maxHeight = window.innerHeight - 350;
-      if (isolationResize.height > maxHeight) {
-        isolationResize.height = maxHeight;
-        isolationResize.width =
-          (maxHeight / originalSize.height) * originalSize.width;
-      }
-      const isolationReposition = {
-        x: (window.innerWidth - isolationResize.width) / 2,
-        y: (maxHeight - isolationResize.height) / 2 + 100,
-      };
-      this.currentNode.kNode.setAttrs({
-        scale: { x: 1, y: 1 },
-        rotation: 0,
-        size: isolationResize,
-        position: isolationReposition,
-      });
-    }
-  }
-  public enterIsolation(node: MediaNode) {
-    // console.log("NodeIsolator > enterIsolation");
-    uiAccess.toolbarMain.disable();
-    this.currentNode = node;
-    this.adjustSizeFnRef = () => this.adjustSizes();
-    this.preserveKNodeTransformation(node.kNode);
-
-    this.currentNode.kNode.remove();
-    this.nodeIsolationLayerRef.add(this.backgroundRect);
-    this.nodeIsolationLayerRef.add(this.currentNode.kNode);
-    this.mediaLayerRef.add(this.referenceRect);
-    this.adjustSizeFnRef();
-
-    window.addEventListener("resize", this.adjustSizeFnRef);
-  }
-
-  public exitIsolation() {
-    // console.log("NodeIsolator > exitIsolation");
-    if (this.adjustSizeFnRef) {
-      window.removeEventListener("resize", this.adjustSizeFnRef);
-      this.adjustSizeFnRef = undefined;
-    }
-    if (!this.currentNode) {
-      console.error("NodeIsolator lost crrent node before isolation!!");
-      return;
-    }
-    this.currentNode.kNode.remove();
-    this.backgroundRect.remove();
-    this.referenceRect.remove();
-    this.mediaLayerRef.add(this.currentNode.kNode);
-    this.currentNode.kNode.setAttrs(this.originalKNodeTransformation);
-    this.currentNode = undefined;
-    this.originalKNodeTransformation = undefined;
-    uiAccess.toolbarMain.enable();
-  }
-  private preserveKNodeTransformation(kNode: Konva.Node) {
-    this.originalKNodeTransformation = {
-      position: kNode.position(),
-      size: kNode.size(),
-      rotation: kNode.rotation(),
-      scale: {
-        x: kNode.scaleX(),
-        y: kNode.scaleY(),
-      },
-      zIndex: kNode.zIndex(),
-    };
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodeTransformer.ts

@@ -1,61 +0,0 @@
-import Konva from "konva";
-import { MediaNode } from "../types";
-
-export class NodeTransformer {
-  private kTransformer: Konva.Transformer;
-
-  constructor() {
-    this.kTransformer = new Konva.Transformer({
-      padding: 0,
-      anchorStyleFunc: (anchor) => {
-        // anchor is Konva.Rect instance
-        // you manually change its styling
-        anchor.cornerRadius(10);
-        if (anchor.hasName("top-center") || anchor.hasName("bottom-center")) {
-          anchor.height(6);
-          anchor.offsetY(3);
-          anchor.width(30);
-          anchor.offsetX(15);
-        }
-        if (anchor.hasName("middle-left") || anchor.hasName("middle-right")) {
-          anchor.height(30);
-          anchor.offsetY(15);
-          anchor.width(6);
-          anchor.offsetX(3);
-        }
-        // if (anchor.hasName("rotater")) {
-        //   anchor.offsetY(-25);
-        // }
-        // you also can set other properties
-        // e.g. you can set fillPatternImage to set icon to the anchor
-      },
-    });
-  }
-  public getKonvaNode() {
-    return this.kTransformer;
-  }
-  public addNodes({ selectedNodes }: { selectedNodes: Set<MediaNode> }) {
-    const kNodesArray = Array.from(selectedNodes).reduce((acc, node) => {
-      acc.push(node.kNode);
-      return acc;
-    }, [] as Konva.Node[]);
-
-    //if there are more things in the ui layer, turn this on
-    // this.kTransformer.moveToTop();
-
-    this.kTransformer.nodes(kNodesArray);
-  }
-  public clear() {
-    this.kTransformer.nodes([]);
-  }
-  public enable() {
-    this.kTransformer.rotateEnabled(true);
-    this.kTransformer.resizeEnabled(true);
-    this.kTransformer.draggable(true);
-  }
-  public disable() {
-    this.kTransformer.rotateEnabled(false);
-    this.kTransformer.resizeEnabled(false);
-    this.kTransformer.draggable(false);
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodesManager.ts

@@ -1,63 +0,0 @@
-import { MediaNode } from "../types";
-
-export class NodesManager {
-  private allNodes: Set<MediaNode>;
-  private allZIndices: Map<MediaNode, number>;
-
-  constructor() {
-    this.allNodes = new Set();
-    this.allZIndices = new Map();
-  }
-  public getAllNodes() {
-    return this.allNodes;
-  }
-
-  public getAllZIndices() {
-    return this.allZIndices;
-  }
-  public getSortedZIndices() {
-    return Array.from(this.allZIndices).sort(
-      (nodeA, nodeB) => nodeA[1] - nodeB[1],
-    );
-  }
-  public updateAllZIndices() {
-    this.allNodes.forEach((node) => {
-      this.allZIndices.set(node, node.kNode.getZIndex());
-    });
-  }
-
-  public saveNode(node: MediaNode): void {
-    if (this.allNodes.has(node)) {
-      return;
-    }
-    this.allNodes.add(node);
-    this.updateAllZIndices();
-    // this.printNodesAndZIndices();
-  }
-
-  public removeNode(node: MediaNode): void {
-    if (this.allNodes.has(node)) {
-      this.allNodes.delete(node);
-      this.allZIndices.delete(node);
-      this.updateAllZIndices();
-    }
-    // this.printNodesAndZIndices();
-  }
-
-  public hasNode(node: MediaNode): boolean {
-    return this.allNodes.has(node);
-  }
-
-  /*************************
-   *  For Debugging use
-   */
-  public printNodesAndZIndices() {
-    console.log(this.allNodes);
-    console.log(this.allZIndices);
-    const trueZIndices = Array.from(this.allNodes).map((node) => ({
-      id: node.kNode._id,
-      z: node.kNode.getZIndex(),
-    }));
-    console.log("True ZIndces", trueZIndices);
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/SelectionManager.ts

@@ -1,384 +0,0 @@
-import Konva from "konva";
-import { NodeTransformer } from "./NodeTransformer";
-import { MediaNode, Position, Transformation } from "../types";
-import { uiAccess, uiEvents } from "../../signals";
-import { NetworkedNode } from "../Nodes/NetworkedNode";
-import { LoadingBarStatus } from "../../components/ui";
-import { ImageNode, ShapeNode, TextNode, PreviewCopyNode } from "../Nodes";
-import {
-  calculateContextualsPosition,
-  getImageNodeButtonStates,
-  getMultiSelectButtonStates, getPreviewCopyNodeButtonStates,
-  getShapeNodeButtonStates,
-  getTextNodeButtonStates,
-  getVideoNodeButtonStates,
-} from "./ToolbarNodeUtilities";
-
-export enum SelectionManagerEvents {
-  NODES_TRANSLATIONS = "nodestranslation",
-  NODES_TRANSFORMATION = "nodestransformation",
-}
-export interface NodesTranslationEventDetails {
-  nodes: Set<MediaNode>;
-  initialPositions: Map<MediaNode, Position>;
-  finalPositions: Map<MediaNode, Position>;
-}
-export interface NodeTransformationEventDetails {
-  nodes: Set<MediaNode>;
-  initialTransformations: Map<MediaNode, Transformation[]>;
-  finalTransformations: Map<MediaNode, Transformation[]>;
-}
-
-export class SelectionManager {
-  private selectedNodes: Set<MediaNode>;
-  private mediaLayerRef: Konva.Layer;
-  private nodeTransformerRef: NodeTransformer;
-  private initialPositions: Map<MediaNode, Position>;
-  private initialTransformations: Map<MediaNode, Transformation[]>;
-  public eventTarget: EventTarget;
-  private _isDragging: boolean = false;
-  private disabled: boolean = false;
-
-  public firstSelectedNode: MediaNode | undefined;
-
-  constructor({
-    mediaLayerRef,
-    nodeTransformerRef,
-  }: {
-    mediaLayerRef: Konva.Layer;
-    nodeTransformerRef: NodeTransformer;
-  }) {
-    this.firstSelectedNode = undefined;
-    this.selectedNodes = new Set();
-
-    this.initialPositions = new Map<MediaNode, Position>();
-    this.initialTransformations = new Map<MediaNode, Transformation[]>();
-    this.eventTarget = new EventTarget();
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodeTransformerRef = nodeTransformerRef;
-  }
-  // This lets us perfom operations on the selected node.
-  public getSelectedNodes(): Set<MediaNode> {
-    return this.selectedNodes;
-  }
-  public selectNodes(nodes: MediaNode[]) {
-    const unlockedNodes = nodes.filter((node) => {
-      return !node.isLocked();
-    });
-    unlockedNodes.forEach((node) => {
-      this.selectNode(node, true);
-    });
-    this.mediaLayerRef.batchDraw();
-  }
-  public disable() {
-    this.clearSelection();
-    this.disabled = true;
-  }
-  public enable() {
-    this.disabled = false;
-  }
-  public isDisabled() {
-    return this.disable;
-  }
-  public selectNode(node: MediaNode, doNotDraw?: boolean, contextMenu: {
-    show?: boolean,
-    at?: { x: number, y: number }
-  } = {
-      show: false,
-    }): boolean {
-    if (
-      this.disabled || // no-op when disabled
-      this.selectedNodes.has(node) || // if the node is already selected
-      (this.selectedNodes.size > 0 && node.isLocked()) ||
-      // if in multiselect but picked a locked item
-      (this.selectedNodes.size > 0 &&
-        this.selectedNodes.values().next().value?.isLocked())
-      // if the first node picked is a locked item
-    ) {
-      return false;
-    }
-
-    node.highlight();
-    if (this.selectedNodes.size === 0) {
-      node.setIsKEventRef(true);
-    }
-    this.selectedNodes.add(node);
-    this.updateNodeTransformer();
-    this.updateContextComponents();
-
-    console.log("SelectionManager > selectNode > showContextMenu", contextMenu.show);
-    if (contextMenu.show) {
-      this.showContextComponents(contextMenu.at);
-    }
-
-    if (!doNotDraw) {
-      this.mediaLayerRef.batchDraw();
-    }
-    return true;
-  }
-
-  public deselectNode(node: MediaNode, doNotDraw?: boolean): void {
-    if (this.disabled) {
-      // no-op when disabled
-      return;
-    }
-    node.unhighlight();
-    if (node.isKEventRef()) {
-      node.setIsKEventRef(false);
-    }
-    this.selectedNodes.delete(node);
-    this.updateNodeTransformer();
-    this.updateContextComponents();
-    this.showContextComponents();
-    if (!doNotDraw) {
-      this.mediaLayerRef.batchDraw();
-    }
-  }
-
-  public clearSelection(): void {
-    if (this.disabled) {
-      //no-op when disabled
-      return;
-    }
-    this.selectedNodes.forEach((node) => {
-      node.unhighlight();
-      if (node.isKEventRef()) {
-        node.setIsKEventRef(false);
-      }
-    });
-
-    this.selectedNodes.clear();
-    this.nodeTransformerRef.clear();
-    this.hideContextComponents();
-    this.mediaLayerRef.batchDraw();
-  }
-
-  public onToggleLock() {
-    this.updateContextComponents();
-  }
-  public isDragging() {
-    return this._isDragging;
-  }
-  public isNodeSelected(node: MediaNode): boolean {
-    return this.selectedNodes.has(node);
-  }
-
-  public dragStart() {
-    // track the dragging state for mouseevents in nodes
-    this._isDragging = true;
-    this.hideContextComponents();
-
-    // track all nodes initial position when dragstart
-    this.selectedNodes.forEach((selectedNode) => {
-      this.initialPositions.set(selectedNode, selectedNode.kNode.position());
-    });
-  }
-
-  public dragEnd() {
-    // release the dragging state for mouseevents in nodes
-    this._isDragging = false;
-    // track and map the final positions
-    const finalPositions = new Map<MediaNode, Position>();
-    this.selectedNodes.forEach((currNode) => {
-      finalPositions.set(currNode, currNode.kNode.position());
-    });
-    // dispatch the info for engine to manage un-redo stack
-    this.eventTarget.dispatchEvent(
-      new CustomEvent<NodesTranslationEventDetails>(
-        SelectionManagerEvents.NODES_TRANSLATIONS,
-        {
-          detail: {
-            nodes: this.selectedNodes,
-            initialPositions: new Map(this.initialPositions),
-            finalPositions: finalPositions,
-          },
-        },
-      ),
-    );
-    // done, clear data and show menu
-    this.initialPositions.clear();
-    this.updateContextComponents();
-  }
-
-  private getKNodeTransformation(kNode: Konva.Node) {
-    return {
-      kNodeId: kNode._id,
-      position: kNode.position(),
-      size: kNode.size(),
-      rotation: kNode.rotation(),
-      scale: {
-        x: kNode.scaleX(),
-        y: kNode.scaleY(),
-      },
-    };
-  }
-  public transformStart() {
-    // track all nodes initial transformation when transformStart
-    this.selectedNodes.forEach((selectedNode) => {
-      const transformations = [this.getKNodeTransformation(selectedNode.kNode)];
-      if (selectedNode.kNode instanceof Konva.Group) {
-        const childKNodes = selectedNode.kNode.getChildren();
-        childKNodes.forEach((childKNode: Konva.Node) => {
-          transformations.push(this.getKNodeTransformation(childKNode));
-        });
-      }
-      this.initialTransformations.set(selectedNode, transformations);
-    });
-    this.hideContextComponents();
-  }
-  public transformEnd() {
-    // track and map the final positions
-    const finalTransformations = new Map<MediaNode, Transformation[]>();
-    this.selectedNodes.forEach((selectedNode) => {
-      const transformations = [this.getKNodeTransformation(selectedNode.kNode)];
-      if (selectedNode.kNode instanceof Konva.Group) {
-        const childKNodes = selectedNode.kNode.getChildren();
-        childKNodes.forEach((childKNode: Konva.Node) => {
-          transformations.push(this.getKNodeTransformation(childKNode));
-        });
-      }
-      finalTransformations.set(selectedNode, transformations);
-    });
-    // dispatch the info for engine to manage un-redo stack
-    this.eventTarget.dispatchEvent(
-      new CustomEvent<NodeTransformationEventDetails>(
-        SelectionManagerEvents.NODES_TRANSFORMATION,
-        {
-          detail: {
-            nodes: this.selectedNodes,
-            initialTransformations: new Map(this.initialTransformations),
-            finalTransformations: finalTransformations,
-          },
-        },
-      ),
-    );
-  }
-
-  public updateNodeTransformer() {
-    const lockFlag = this.selectedNodes.values().next().value?.isLocked();
-    if (lockFlag) {
-      this.nodeTransformerRef.disable();
-    } else {
-      this.nodeTransformerRef.enable();
-    }
-    this.nodeTransformerRef.addNodes({ selectedNodes: this.selectedNodes });
-  }
-
-  public hideContextComponents() {
-    uiAccess.toolbarNode.hide();
-    uiAccess.loadingBar.hide();
-  }
-
-  public showContextComponents(at?: { x: number, y: number }) {
-    const showOrUpdate = uiAccess.toolbarNode.isShowing()
-      ? uiAccess.toolbarNode.update
-      : uiAccess.toolbarNode.show;
-
-    // If a position is received, set it
-    // Otherwise use the previous position
-    const position = at ? at : uiAccess.toolbarNode.signal.value.position;
-
-    const node = this.selectedNodes.values().next().value;
-    if (node === undefined) {
-      this.hideContextComponents();
-      return; // no node
-    }
-    if (this.selectedNodes.size === 1) {
-      if (node instanceof ImageNode) {
-        showOrUpdate({
-          knodeIds: [node.kNode.id()],
-          locked: node.isLocked(),
-          buttonStates: getImageNodeButtonStates({ locked: node.isLocked() }),
-          position: position
-        });
-      }
-      if (node instanceof PreviewCopyNode) {
-        showOrUpdate({
-          knodeIds: [node.kNode.id()],
-          locked: node.isLocked(),
-          buttonStates: getPreviewCopyNodeButtonStates({ locked: node.isLocked() }),
-          position: position
-        });
-      }
-      else if (node instanceof ShapeNode) {
-        showOrUpdate({
-          knodeIds: [node.kNode.id()],
-          locked: node.isLocked(),
-          buttonStates: getShapeNodeButtonStates({ locked: node.isLocked() }),
-          color: node.color,
-          position: position
-        });
-      }
-      else if (node instanceof TextNode) {
-        showOrUpdate({
-          knodeIds: [node.kNode.id()],
-          locked: node.isLocked(),
-          buttonStates: getTextNodeButtonStates({ locked: node.isLocked() }),
-          color: node.getNodeData({ x: 0, y: 0 })?.textNodeData?.color ?? "#000000",
-          position: position
-        });
-      }
-     
-
-      // show loading bar is the node is noding
-      if (node instanceof NetworkedNode) {
-        if (!node.didFinishLoading && !uiAccess.loadingBar.isShowing()) {
-          // console.log("show loading bar");
-          uiAccess.loadingBar.show();
-        }
-      }
-    } else {
-      if (node) {
-        showOrUpdate({
-          locked: node.isLocked(),
-          buttonStates: getMultiSelectButtonStates({ locked: node.isLocked() }),
-          position: position
-        });
-      }
-    }
-  }
-
-  public updateContextComponents() {
-    // use first node as reference
-    const node = this.selectedNodes.values().next().value;
-    if (node === undefined) {
-      this.hideContextComponents();
-      return; // no nodes
-    }
-
-    // console.log("SelectionManager > updateContextComponents for node:", node);
-    const coord = calculateContextualsPosition(
-      this.nodeTransformerRef.getKonvaNode(),
-    );
-
-    if (node.isLocked() !== uiAccess.toolbarNode.isLocked()) {
-      // console.log("setting lock");
-      uiAccess.toolbarNode.setLocked(node.isLocked());
-    }
-    console.debug("Setting context position to:", coord)
-    uiAccess.toolbarNode.setPosition({
-      x: coord.x,
-      y: coord.y,
-    });
-    if (node instanceof NetworkedNode) {
-      uiAccess.loadingBar.update({
-        position: coord,
-        progress: node.progress(),
-        status: node.isError()
-          ? LoadingBarStatus.ERROR
-          : LoadingBarStatus.LOADING,
-        message: node.progressMessage(),
-      });
-      uiEvents.toolbarNode.retry.onClick((e) => {
-        if (e) {
-          console.log("CONTEXTUAL LOADING BAR RETRY ONCLICK", e, node);
-          node.retry();
-        }
-      });
-      if (node.didFinishLoading) {
-        // console.log("node finished loading", node);
-        uiAccess.loadingBar.hide();
-      }
-    }
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/SelectorSquare.ts

@@ -1,176 +0,0 @@
-import Konva from "konva";
-import { NodesManager } from "./NodesManager";
-import { SelectionManager } from "./SelectionManager";
-import { MediaNode } from "../types";
-
-interface SqaureCoordinates {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-export class SelectorSquare {
-  private kSquare: Konva.Rect;
-  private selecting: boolean = false;
-  private sqaureCoordinates: SqaureCoordinates = {
-    x1: 0,
-    x2: 0,
-    y1: 0,
-    y2: 0,
-  };
-
-  // engine class references
-  private captureCanvasRef: Konva.Rect;
-  private mediaLayerRef: Konva.Layer;
-  private nodesManagerRef: NodesManager;
-  private selectionManagerRef: SelectionManager;
-  private stageRef: Konva.Stage;
-
-  constructor({
-    captureCanvasRef,
-    mediaLayerRef,
-    nodesManagerRef,
-    selectionManagerRef,
-    stageRef,
-  }: {
-    captureCanvasRef: Konva.Rect;
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-    selectionManagerRef: SelectionManager;
-    stageRef: Konva.Stage;
-  }) {
-    this.kSquare = new Konva.Rect({
-      fill: "rgba(45, 129, 255, 0.3)",
-      stroke: "#00a1ff",
-      strokeWidth: 1,
-      visible: false,
-      // disable events to not interrupt with events
-      listening: false,
-    });
-    this.captureCanvasRef = captureCanvasRef;
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-    this.selectionManagerRef = selectionManagerRef;
-    this.stageRef = stageRef;
-  }
-  public getKonvaNode() {
-    return this.kSquare;
-  }
-
-  public disable() {
-    this.stageRef.off("mousedown touchstart");
-    this.stageRef.off("mousemove touchmove");
-    this.stageRef.off("mouseup touchend");
-    this.stageRef.off("mouseleave");
-  }
-  public enable() {
-    // Remove any existing event handlers first to prevent duplicates
-    this.disable();
-
-    this.stageRef.on("mousedown touchstart", (e) => {
-      const stagePointerPos = this.stageRef.getPointerPosition();
-      if (
-        (e.target !== this.stageRef && e.target !== this.captureCanvasRef) || // do nothing if we mousedown on any shape
-        stagePointerPos === null || // do nothing if pointers not available
-        e.evt.shiftKey // do nothing so then multiselect is more forgiving in misclicks
-      ) {
-        return;
-      }
-
-      // start handle mousedown
-      e.evt.preventDefault();
-      if (e.target === this.stageRef || e.target === this.captureCanvasRef) {
-        //moused down on empty space, clear previous selection first
-        this.selectionManagerRef.clearSelection();
-      }
-
-      // this starts drawing the square
-      this.sqaureCoordinates = {
-        x1: stagePointerPos.x,
-        y1: stagePointerPos.y,
-        x2: stagePointerPos.x,
-        y2: stagePointerPos.y,
-      };
-      
-      this.kSquare.size({
-        width: 0,
-        height: 0,
-      });
-      this.selecting = true;
-    });
-
-    this.stageRef.on("mousemove touchmove", (e) => {
-      // do nothing if we didn't start selection
-      const stagePointerPos = this.stageRef.getPointerPosition();
-      if (!this.selecting || stagePointerPos === null) {
-        return;
-      }
-
-      // handle drawing square according to mouse move
-      e.evt.preventDefault();
-      this.sqaureCoordinates = {
-        ...this.sqaureCoordinates,
-        x2: stagePointerPos.x,
-        y2: stagePointerPos.y,
-      };
-      const { x1, y1, x2, y2 } = this.sqaureCoordinates;
-      this.kSquare.moveToTop();
-      this.kSquare.setAttrs({
-        visible: true,
-        x: Math.min(x1, x2),
-        y: Math.min(y1, y2),
-        width: Math.abs(x2 - x1),
-        height: Math.abs(y2 - y1),
-      });
-    });
-
-    this.stageRef.on("mouseup touchend", (e) => {
-      // do nothing if we didn't start selection
-      if (!this.selecting) {
-        return;
-      }
-
-      this.selecting = false;
-      if (!this.kSquare.visible()) {
-        return;
-      }
-      e.evt.preventDefault();
-      // update visibility
-      this.kSquare.visible(false);
-      // Find all the Nodes and feed them into Selectmanager
-      var shapes = this.mediaLayerRef.getChildren();
-      var box = this.kSquare.getClientRect();
-      var foundKNodes = shapes.filter((shape) =>
-        Konva.Util.haveIntersection(box, shape.getClientRect()),
-      );
-      if (foundKNodes.length > 0) {
-        const kNodeIds = foundKNodes.map((kNode) => kNode._id);
-        const foundNodes = Array.from(
-          this.nodesManagerRef.getAllNodes(),
-        ).reduce((accNodes, currNode) => {
-          if (kNodeIds.includes(currNode.kNode._id) && !currNode.isLocked()) {
-            accNodes.push(currNode);
-          }
-          return accNodes;
-        }, [] as MediaNode[]);
-        console.log("selector square found", foundNodes);
-        this.selectionManagerRef.selectNodes(foundNodes);
-      }
-    });
-
-    this.stageRef.on("mouseleave", (e) => {
-      if (!this.selecting) {
-        return;
-      }
-
-      this.selecting = false;
-      if (!this.kSquare.visible()) {
-        return;
-      }
-      e.evt.preventDefault();
-      // update visibility
-      this.kSquare.visible(false);
-      // and then do nothing, this is considered a cancel
-    });
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts

@@ -1,236 +0,0 @@
-import Konva from "konva";
-import { ToolbarNodeButtonNames } from "../../components/features/ToolbarNode";
-import { ContextualToolbarProps } from "../../signals/uiAccess/toolbarNode";
-export function calculateContextualsPosition(kNode: Konva.Transformer) {
-  const w = kNode.getSize().width * kNode.scaleX();
-  const h = kNode.getSize().height * kNode.scaleY();
-  const x0 = kNode.getPosition().x;
-  const y0 = kNode.getPosition().y;
-
-  const d = kNode.getAbsoluteRotation();
-  const r = d >= 0 ? (d * Math.PI) / 180 : ((360 + d) * Math.PI) / 180;
-
-  let px: number, py: number;
-  if (r < Math.PI / 2) {
-    //top right quadrants
-    px = x0 + (h * Math.sin(r) + w * Math.cos(r)) / 2 - h * Math.sin(r);
-    py = y0 + h * Math.cos(r) + w * Math.cos(Math.PI / 2 - r);
-  } else if (r < Math.PI) {
-    //lower right quadrants
-    px = x0 - (h * Math.sin(r) - w * Math.cos(r)) / 2;
-    py = y0 + w * Math.cos(Math.PI / 2 - r);
-  } else if (r < (Math.PI * 3) / 2) {
-    //lower left quadrants
-    px = x0 + h * Math.cos(r) - (h * Math.cos(r) + w * Math.sin(r)) / 2;
-    py = y0;
-  } else {
-    //top left quadrants
-    px = x0 + (-h * Math.sin(r) + w * Math.cos(r)) / 2;
-    py = y0 + h * Math.cos(r);
-  }
-  return { x: px, y: py };
-}
-
-export function getImageNodeButtonStates(
-  props: { locked?: boolean | "unknown" } = {},
-) {
-  const ButtonNames = ToolbarNodeButtonNames;
-  return Object.values(ButtonNames).reduce(
-    (buttonStates, buttonName) => {
-      switch (buttonName) {
-        case ButtonNames.AI_STYLIZE:
-        case ButtonNames.SEGMENTATION:
-        case ButtonNames.DOWNLOAD:
-        case ButtonNames.CHROMA:
-        case ButtonNames.COLOR:
-        case ButtonNames.TRANSFORM:
-          // hidden buttons
-          buttonStates[buttonName] = {
-            disabled: true,
-            hidden: true,
-            active: false,
-          };
-          return buttonStates;
-
-        default:
-          // all other buttons
-          buttonStates[buttonName] = {
-            disabled: false,
-            hidden: false,
-            active: false,
-          };
-          return buttonStates;
-      }
-    },
-    {} as ContextualToolbarProps["buttonStates"],
-  );
-}
-
-export function getPreviewCopyNodeButtonStates(
-    props: { locked?: boolean | "unknown" } = {},
-) {
-    const ButtonNames = ToolbarNodeButtonNames;
-    return Object.values(ButtonNames).reduce(
-        (buttonStates, buttonName) => {
-            switch (buttonName) {
-                case ButtonNames.AI_STYLIZE:
-                case ButtonNames.SEGMENTATION:
-                case ButtonNames.DOWNLOAD:
-                case ButtonNames.CHROMA:
-                case ButtonNames.COLOR:
-                case ButtonNames.TRANSFORM:
-                    // hidden buttons
-                    buttonStates[buttonName] = {
-                        disabled: true,
-                        hidden: true,
-                        active: false,
-                    };
-                    return buttonStates;
-
-                default:
-                    // all other buttons
-                    buttonStates[buttonName] = {
-                        disabled: false,
-                        hidden: false,
-                        active: false,
-                    };
-                    return buttonStates;
-            }
-        },
-        {} as ContextualToolbarProps["buttonStates"],
-    );
-}
-export function getTextNodeButtonStates(
-  props: { locked?: boolean | "unknown" } = {},
-) {
-  const ButtonNames = ToolbarNodeButtonNames;
-  return Object.values(ButtonNames).reduce(
-    (buttonStates, buttonName) => {
-      switch (buttonName) {
-        case ButtonNames.AI_STYLIZE:
-        case ButtonNames.SEGMENTATION:
-        case ButtonNames.DOWNLOAD:
-        case ButtonNames.CHROMA:
-        case ButtonNames.REMOVE_BACKGROUND:
-        case ButtonNames.TRANSFORM:
-          // hidden buttons
-          buttonStates[buttonName] = {
-            disabled: true,
-            hidden: true,
-            active: false,
-          };
-          return buttonStates;
-
-        default:
-          // all other buttons
-          buttonStates[buttonName] = {
-            disabled: false,
-            hidden: false,
-            active: false,
-          };
-          return buttonStates;
-      }
-    },
-    {} as ContextualToolbarProps["buttonStates"],
-  );
-}
-export function getVideoNodeButtonStates(
-  props: { locked?: boolean | "unknown" } = {},
-) {
-  const ButtonNames = ToolbarNodeButtonNames;
-  return Object.values(ButtonNames).reduce(
-    (buttonStates, buttonName) => {
-      switch (buttonName) {
-        case ButtonNames.AI_STYLIZE:
-        case ButtonNames.COLOR:
-        case ButtonNames.REMOVE_BACKGROUND:
-        case ButtonNames.TRANSFORM:
-          // soon to come feature is disabled
-          buttonStates[buttonName] = {
-              disabled: true,
-              hidden: true,
-              active: false,
-          };
-          return buttonStates;
-        default:
-          // all other buttons
-          buttonStates[buttonName] = {
-              disabled: false,
-              hidden: false,
-              active: false,
-          };
-          return buttonStates;
-      }
-    },
-    {} as ContextualToolbarProps["buttonStates"],
-  );
-}
-
-export function getShapeNodeButtonStates(
-  props: { locked?: boolean | "unknown" } = {},
-) {
-  const ButtonNames = ToolbarNodeButtonNames;
-  return Object.values(ButtonNames).reduce(
-    (buttonStates, buttonName) => {
-      switch (buttonName) {
-        case ButtonNames.AI_STYLIZE:
-        case ButtonNames.SEGMENTATION:
-        case ButtonNames.DOWNLOAD:
-        case ButtonNames.CHROMA:
-        case ButtonNames.REMOVE_BACKGROUND:
-        case ButtonNames.TRANSFORM:
-          // hidden buttons
-          buttonStates[buttonName] = {
-              disabled: true,
-              hidden: true,
-              active: false,
-          };
-          return buttonStates;
-        default:
-          // all other buttons
-          buttonStates[buttonName] = {
-              disabled: false,
-              hidden: false,
-              active: false,
-          };
-          return buttonStates;
-      }
-    },
-    {} as ContextualToolbarProps["buttonStates"],
-  );
-}
-
-export function getMultiSelectButtonStates(
-  props: { locked?: boolean | "unknown" } = {},
-) {
-  const ButtonNames = ToolbarNodeButtonNames;
-  return Object.values(ButtonNames).reduce(
-    (buttonStates, buttonName) => {
-      switch (buttonName) {
-        case ButtonNames.AI_STYLIZE:
-        case ButtonNames.SEGMENTATION:
-        case ButtonNames.DOWNLOAD:
-        case ButtonNames.CHROMA:
-        case ButtonNames.COLOR:
-        case ButtonNames.REMOVE_BACKGROUND:
-        case ButtonNames.TRANSFORM:
-          // hidden buttons
-          buttonStates[buttonName] = {
-              disabled: true,
-              hidden: true,
-              active: false,
-          };
-          return buttonStates;
-        default:
-          // all other buttons
-          buttonStates[buttonName] = {
-              disabled: false,
-              hidden: false,
-              active: false,
-          };
-          return buttonStates;
-      }
-    },
-    {} as ContextualToolbarProps["buttonStates"],
-  );
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/index.ts

@@ -1,10 +0,0 @@
-export { NodesManager } from "./NodesManager";
-export { NodeIsolator } from "./NodeIsolator";
-export { NodeTransformer } from "./NodeTransformer";
-export { SelectionManager, SelectionManagerEvents } from "./SelectionManager";
-export { SelectorSquare } from "./SelectorSquare";
-
-export type {
-  NodesTranslationEventDetails,
-  NodeTransformationEventDetails,
-} from "./SelectionManager";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/OffScreenSceneCanvas.ts

@@ -1,59 +0,0 @@
-//@ts-ignore
-// TODO: have to export and modify the code
-import { ICanvasConfig } from "konva/lib/Canvas";
-
-import { Canvas } from "konva/lib/Canvas";
-import { OffScreenSceneContext } from "./OffScreenSceneContext";
-
-export class OffScreenSceneCanvas extends Canvas {
-  constructor(
-    config: ICanvasConfig = { width: 0, height: 0, willReadFrequently: false },
-  ) {
-    super(config); // creates canvas then you have to replace it
-    //@ts-ignore
-    // replace here also kills the css but thats ok
-    this._canvas = new OffscreenCanvas(config.width, config.height);
-
-    this.context = new OffScreenSceneContext(this, {
-      willReadFrequently: config.willReadFrequently,
-    });
-    console.log("Created Offscreen Scene Canvas");
-    this.setSize(config.width, config.height);
-  }
-
-  setPixelRatio(pixelRatio: number) {
-    console.log("overriden setPixelRatio");
-    var previousRatio = this.pixelRatio;
-    this.pixelRatio = pixelRatio;
-    this.setSize(
-      this.getWidth() / previousRatio,
-      this.getHeight() / previousRatio,
-    );
-  }
-  public override setWidth(width: number) {
-    // take into account pixel ratio
-    // console.log("overriden setWidth");
-    this.width = this._canvas.width = width * this.pixelRatio;
-    var pixelRatio = this.pixelRatio,
-      _context = this.getContext()._context;
-    _context.scale(pixelRatio, pixelRatio);
-  }
-  public override setHeight(height: number) {
-    // take into account pixel ratio
-    // console.log("overriden setHeight");
-    this.height = this._canvas.height = height * this.pixelRatio;
-    var pixelRatio = this.pixelRatio,
-      _context = this.getContext()._context;
-    _context.scale(pixelRatio, pixelRatio);
-  }
-  getWidth() {
-    return this.width;
-  }
-  getHeight() {
-    return this.height;
-  }
-  setSize(width: number | undefined, height: number | undefined) {
-    this.setWidth(width || 0);
-    this.setHeight(height || 0);
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/OffScreenSceneContext.ts

@@ -1,11 +0,0 @@
-import { Context } from "konva/lib/Context";
-import { Canvas } from "konva/lib/Canvas";
-
-export class OffScreenSceneContext extends Context {
-  constructor(canvas: Canvas, { willReadFrequently = false } = {}) {
-    super(canvas);
-    this._context = canvas._canvas.getContext("2d", {
-      willReadFrequently,
-    }) as CanvasRenderingContext2D;
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -1,879 +0,0 @@
-import Konva from "konva";
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-
-import { FileUtilities } from "../../utilities/FileUtilities";
-import {
-  ImageNode,
-  TextNode,
-  ShapeNode,
-  PreviewCopyNode,
-  PaintNode,
-} from "../Nodes";
-import { MediaNode } from "../types";
-import { RenderTask } from "./RenderTask";
-
-import {
-  isLoadingVisible,
-  loadingProgress,
-} from "../../signals/uiEvents/loadingIndicator";
-
-import { EncodeImageBitmapToBase64 } from "../../utilities/EncodeImageBitmapToBase64";
-import { setCanvasRenderBitmap } from "../../signals/canvasRenderBitmap";
-
-interface ServerSettings {
-  model_path: string;
-  lora_path?: string;
-}
-
-export class RealTimeDrawEngine {
-  private imageNodes: (ImageNode | TextNode | ShapeNode | PaintNode)[];
-
-  public offScreenCanvas: OffscreenCanvas;
-  private outputBitmap: ImageBitmap | undefined;
-
-  // private frames: ImageBitmap[];
-  // capturing composite within window
-
-  public mediaLayerRef: Konva.Layer;
-  private drawingsLayer: Konva.Layer; // New Layer for Drawings
-
-  private height: number;
-  private width: number;
-  private positionX: number;
-  private positionY: number;
-  private positionPreviewX: number;
-  private positionPreviewY: number;
-
-  private port: MessagePort | undefined;
-  public captureCanvas: Konva.Rect;
-  public backgroundRasterRect: Konva.Image;
-
-  public fps: number = 24;
-
-  public currentPrompt: string;
-  public currentStrength: number;
-
-  public lastRenderedBitmap: ImageBitmap | undefined;
-
-  // Paint Color
-  // paint Brush Size
-  // has to exit out of paint mode when shape or image are used.
-  public paintColor: string = "#000000";
-  private brushSize: number = 5; // Default brush size
-
-  public onDrawCallback?: (
-    canvas: HTMLCanvasElement,
-    lineBounds: {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-    },
-  ) => void;
-  private offscreenRenderDiv: HTMLDivElement;
-
-  private client: WebSocketClient | null = null;
-  private isConnected: boolean = false;
-
-  public backgroundColor: string = "#d2d2d2"; // off white
-  constructor({
-    width,
-    height,
-    mediaLayerRef,
-    offScreenCanvas,
-    onDraw,
-    onPreviewCopy, // New Parameter
-  }: {
-    width: number;
-    height: number;
-    mediaLayerRef: Konva.Layer;
-    offScreenCanvas: OffscreenCanvas;
-    onDraw?: (
-      canvas: HTMLCanvasElement,
-      lineBounds: {
-        width: number;
-        height: number;
-        x: number;
-        y: number;
-      },
-    ) => void;
-    onPreviewCopyCallback?: (previewCopy: Konva.Image) => void; // New Parameter
-  }) {
-    this.imageNodes = [];
-    this.onDrawCallback = onDraw;
-
-    // TODO: Make this dynamic and update this on change of canvas.
-    this.width = width * 1.5;
-    this.height = height * 1;
-
-    this.positionX = window.innerWidth - this.width;
-    this.positionY = window.innerHeight - this.height;
-
-    this.offScreenCanvas = offScreenCanvas;
-    this.offScreenCanvas.width = this.width;
-    this.offScreenCanvas.height = this.height;
-
-    // this is the whole canvas
-    this.mediaLayerRef = mediaLayerRef;
-
-    // Create a separate layer for drawings
-    this.drawingsLayer = new Konva.Layer({
-      clearBeforeDraw: true, // Ensures transparent background
-    });
-
-    this.mediaLayerRef.getStage()?.add(this.drawingsLayer); // to od pass in stage
-
-    // Set background layer to red and media layer to green for visibility
-
-    this.port = undefined;
-
-    this.fps = 24;
-
-    this.currentPrompt = "";
-    this.currentStrength = 1;
-
-    // This is captures a subset of the medialayer ref
-    this.captureCanvas = new Konva.Rect({
-      name: "CaptureCanvas",
-      x: this.positionX,
-      y: this.positionY,
-      width: this.width,
-      height: this.height,
-      stroke: "blue",
-      strokeWidth: 1,
-      cornerRadius: 10,
-      draggable: false,
-    });
-
-    this.offscreenRenderDiv = document.createElement("div");
-
-    this.mediaLayerRef.add(this.captureCanvas);
-
-    this.captureCanvas.setZIndex(0);
-
-    this.listenToServerEvents();
-  }
-
-  public async listenToServerEvents() {
-    listen("notification", (event) => {
-      console.log(event);
-      // Handle model download events
-      const payload = event.payload as any;
-
-      // Model download started
-      if (payload.model_download_started) {
-        const modelInfo = payload.model_download_started;
-        console.log(
-          `Model download started: ${modelInfo.model_name} (${modelInfo.model_type})`,
-        );
-
-        // Set up loading indicator
-        isLoadingVisible.value = true;
-        loadingProgress.value = 0;
-
-        // Create fake progress updates
-        const downloadTimer = setInterval(() => {
-          loadingProgress.value += 2;
-          // Cap at 95% until we get the completed event
-          if (loadingProgress.value >= 95) {
-            loadingProgress.value = 95;
-            clearInterval(downloadTimer);
-          }
-        }, 500);
-      }
-
-      // Model download completed
-      if (payload.model_download_complete) {
-        const modelInfo = payload.model_download_complete;
-        console.log(
-          `Model download completed: ${modelInfo.model_name} (${modelInfo.model_type})`,
-        );
-
-        // Complete the loading progress
-        loadingProgress.value = 100;
-
-        // Hide loading indicator after a short delay
-        setTimeout(() => {
-          isLoadingVisible.value = false;
-        }, 1000);
-      }
-    });
-  }
-
-  private isEnabled: boolean = false;
-  private cleanupFunction: (() => void) | null = null;
-
-  // this starts the python server
-  public async startServer() {
-    try {
-      this.client = new WebSocketClient("ws://localhost:8765");
-
-      // Set up message handlers
-      this.client.onProgress((progress) => {
-        console.log(
-          `Progress: ${progress.message} (${progress.progress * 100}%)`,
-        );
-        if (progress.error) {
-          console.error("Error:", progress.error);
-        }
-      });
-
-      // Wait for connection to be established
-      await new Promise<void>((resolve, reject) => {
-        if (!this.client) return reject("Client not initialized");
-
-        this.client.ws.onopen = () => {
-          this.isConnected = true;
-          resolve();
-        };
-        this.client.ws.onerror = (error) => reject(error);
-      });
-
-      // Load initial model
-      await this.loadModel({
-        model_path: "C:/Users/Tensor/Downloads/animagineXL40_v4Opt.safetensors",
-        lora_path: "C:/Users/Tensor/Downloads/anyu_all.safetensors",
-      });
-    } catch (error) {
-      console.error("Failed to start server:", error);
-      this.isConnected = false;
-    }
-  }
-
-  private async loadModel(settings: ServerSettings) {
-    if (!this.client || !this.isConnected) {
-      throw new Error("Server not connected");
-    }
-    await this.client.loadModel(settings);
-  }
-
-  private updateCursor(stage: Konva.Stage) {
-    // Create cursor canvas
-    const cursorCanvas = document.createElement("canvas");
-    const size = this.brushSize * 5; // Match the brush size used in drawing
-    cursorCanvas.width = size * 2; // Double size for padding
-    cursorCanvas.height = size * 2;
-
-    const ctx = cursorCanvas.getContext("2d");
-    if (!ctx) return;
-
-    // Draw the outer circle with a light stroke
-    ctx.beginPath();
-    ctx.arc(size, size, size / 2, 0, Math.PI * 2);
-    ctx.strokeStyle = "white";
-    ctx.lineWidth = 3;
-    ctx.stroke();
-
-    // Draw the inner circle with a dark stroke
-    ctx.beginPath();
-    ctx.arc(size, size, size / 2 - 1, 0, Math.PI * 2);
-    ctx.strokeStyle = "black";
-    ctx.lineWidth = 1;
-    ctx.stroke();
-
-    // Convert to data URL
-    const cursorUrl = cursorCanvas.toDataURL();
-
-    // Apply custom cursor
-    stage.container().style.cursor = `url(${cursorUrl}) ${size} ${size}, auto`;
-  }
-
-  public paintMode() {
-    let isDrawing = false;
-    let currentLine: Konva.Line | null = null;
-
-    const stage = this.mediaLayerRef.getStage();
-    if (!stage) return;
-
-    // Initialize cursor
-    this.updateCursor(stage);
-
-    const startDrawing = (pos: { x: number; y: number }) => {
-      if (!this.isEnabled) return;
-      const stage = this.mediaLayerRef.getStage();
-      if (!stage) return;
-
-      // Convert pointer position to relative position within capture canvas
-      const captureBox = this.captureCanvas.getClientRect();
-      const relativeX = pos.x - captureBox.x;
-      const relativeY = pos.y - captureBox.y;
-
-      currentLine = new Konva.Line({
-        points: [relativeX, relativeY],
-        stroke: this.paintColor,
-        strokeWidth: this.brushSize * 5,
-        lineCap: "round",
-        lineJoin: "round",
-        x: this.captureCanvas.x(),
-        y: this.captureCanvas.y(),
-        draggable: false,
-      });
-      this.drawingsLayer.moveToTop();
-      this.drawingsLayer.add(currentLine); // Add to drawingsLayer
-      isDrawing = true;
-    };
-
-    const draw = (pos: { x: number; y: number }) => {
-      if (!this.isEnabled) return;
-      if (!isDrawing || !currentLine) return;
-
-      // Convert pointer position to relative position
-      const captureBox = this.captureCanvas.getClientRect();
-      const relativeX = pos.x - captureBox.x;
-      const relativeY = pos.y - captureBox.y;
-
-      const newPoints = currentLine.points().concat([relativeX, relativeY]);
-      currentLine.points(newPoints);
-      this.drawingsLayer.batchDraw();
-    };
-
-    const stopDrawing = () => {
-      if (!this.isEnabled) return;
-      if (!isDrawing || !currentLine) return;
-
-      // Store current line before resetting state
-      const lineToConvert = currentLine;
-
-      // Reset drawing state immediately so we can start a new stroke
-      isDrawing = false;
-      currentLine = null;
-
-      // Create a temporary layer to render the line
-      const tempLayer = new Konva.Layer({
-        clearBeforeDraw: true,
-      });
-      this.mediaLayerRef.getStage()?.add(tempLayer);
-      tempLayer.add(lineToConvert);
-
-      // Get the line canvas with transparent background
-      // Get the bounding box of the line
-      const lineBounds = lineToConvert.getClientRect();
-
-      // Create canvas with just enough size to contain the line
-      const lineCanvas = tempLayer.toCanvas({
-        x: lineBounds.x,
-        y: lineBounds.y,
-        width: lineBounds.width,
-        height: lineBounds.height,
-        pixelRatio: 1,
-      });
-
-      if (this.onDrawCallback) {
-        this.onDrawCallback(lineCanvas, lineBounds);
-      }
-
-      // Clean up
-      lineToConvert.destroy();
-      tempLayer.destroy();
-
-      this.drawingsLayer.batchDraw();
-    };
-
-    // Check if point is within capture canvas bounds
-    const isWithinCaptureCanvas = (pos: { x: number; y: number }) => {
-      const captureBox = this.captureCanvas.getClientRect();
-      return (
-        pos.x >= captureBox.x &&
-        pos.x <= captureBox.x + captureBox.width &&
-        pos.y >= captureBox.y &&
-        pos.y <= captureBox.y + captureBox.height
-      );
-    };
-
-    // Add event listeners
-    stage.on("mousedown touchstart", (e) => {
-      const pos = stage.getPointerPosition();
-      if (pos && isWithinCaptureCanvas(pos)) {
-        startDrawing(pos);
-      }
-    });
-
-    stage.on("mousemove touchmove", (e) => {
-      const pos = stage.getPointerPosition();
-      if (pos && isWithinCaptureCanvas(pos)) {
-        draw(pos);
-      }
-    });
-
-    stage.on("mouseup touchend", async () => {
-      stopDrawing();
-      //await this.render();
-    });
-
-    // Store cleanup function
-    this.cleanupFunction = () => {
-      stage.off("mousedown touchstart");
-      stage.off("mousemove touchmove");
-      stage.off("mouseup touchend");
-    };
-  }
-
-  public enablePaintMode() {
-    this.isEnabled = true;
-    this.disableDragging();
-    if (!this.cleanupFunction) {
-      this.paintMode();
-    }
-    // Update cursor when enabling paint mode
-    const stage = this.mediaLayerRef.getStage();
-    if (stage) {
-      this.updateCursor(stage);
-    }
-  }
-
-  public enableDragging() {
-    // Enable dragging for all nodes in media layer
-    this.imageNodes?.forEach((node) => {
-      console.log("Image Nodes Enable");
-      console.log(node);
-      node.kNode.draggable(true);
-      node.kNode.listening(true);
-    });
-
-    this.mediaLayerRef.batchDraw();
-  }
-
-  public disableDragging() {
-    // Disable dragging for all nodes in media layer
-    this.imageNodes?.forEach((node) => {
-      node.kNode.draggable(false);
-      node.kNode.listening(false);
-    });
-    this.mediaLayerRef.batchDraw();
-  }
-
-  public disablePaintMode() {
-    this.isEnabled = false;
-    this.enableDragging();
-    if (this.cleanupFunction) {
-      this.cleanupFunction();
-      this.cleanupFunction = null;
-    }
-    // Reset cursor when disabling paint mode
-    const stage = this.mediaLayerRef.getStage();
-    if (stage) {
-      stage.container().style.cursor = "default";
-    }
-  }
-
-  public findImageNodeById(
-    id: string,
-  ): ImageNode | TextNode | ShapeNode | PaintNode | undefined {
-    return this.imageNodes.find((node) => {
-      if (node.kNode) {
-        return node.kNode.id() === id;
-      }
-      return false;
-    });
-  }
-  async updateCaptureCanvas(
-    width: number | undefined,
-    height: number | undefined,
-  ) {
-    console.log("updateCaptureCanvas");
-    if (!this.captureCanvas) {
-      return;
-    }
-    const scaleFactor = 0.9;
-    // Store old values for calculating delta
-    const oldPositionX = this.positionX;
-    const oldPositionY = this.positionY;
-
-    const oldWidth = this.width;
-    const oldHeight = this.height;
-
-    // Original aspect ratio
-    const originalAspectRatio = oldWidth / oldHeight;
-
-    // Calculate new dimensions based on window size
-    let newWidth: number;
-    let newHeight: number;
-
-    if (width === undefined) {
-      newWidth = window.innerWidth * scaleFactor;
-    } else {
-      newWidth = width * scaleFactor;
-    }
-
-    if (height === undefined) {
-      newHeight = window.innerHeight * scaleFactor;
-    } else {
-      newHeight = height * scaleFactor;
-    }
-
-    // Preserve aspect ratio
-    const newAspectRatio = newWidth / newHeight;
-
-    if (newAspectRatio > originalAspectRatio) {
-      // Width is constraining factor
-      newWidth = newHeight * originalAspectRatio;
-    } else {
-      // Height is constraining factor
-      newHeight = newWidth / originalAspectRatio;
-    }
-
-    this.width = newWidth;
-    this.height = newHeight;
-
-    console.log("New dimensions:", this.width, this.height);
-
-    // Calculate new position to center the canvas in the window
-    this.positionX = (window.innerWidth - this.width) / 2;
-    const headerPadding = 56;
-    this.positionY = (window.innerHeight - headerPadding - this.height) / 2;
-
-    console.log("New centered position:", this.positionX, this.positionY);
-
-    // Update the canvas position and size
-    this.captureCanvas.setPosition({
-      x: this.positionX,
-      y: this.positionY,
-    });
-    this.captureCanvas.size({ width: this.width, height: this.height });
-
-    // Calculate scale factors to maintain proportions
-    const scaleX = this.width / oldWidth;
-    const scaleY = this.height / oldHeight;
-
-    // Use a uniform scale factor to preserve aspect ratio
-    const uniformScale = Math.min(scaleX, scaleY);
-
-    // Update all children except the capture canvas
-    var children = this.mediaLayerRef.getChildren();
-    for (let i = 0; i < children.length; i++) {
-      let node = children[i];
-
-      // skip the capture canvas and preview canvas update.
-      if (node.name() === "CaptureCanvas") {
-        continue;
-      }
-
-      const pos = node.getPosition();
-      const oldScale = node.scale();
-
-      // Apply both position shift and scaling to maintain relative positioning
-      node.setPosition({
-        x: (pos.x - oldPositionX) * uniformScale + this.positionX,
-        y: (pos.y - oldPositionY) * uniformScale + this.positionY,
-      });
-
-      // Update scale proportionally if the node has a scale property
-      if (
-        oldScale &&
-        typeof oldScale.x === "number" &&
-        typeof oldScale.y === "number"
-      ) {
-        node.scale({
-          x: oldScale.x * uniformScale,
-          y: oldScale.y * uniformScale,
-        });
-      }
-    }
-
-    this.mediaLayerRef.batchDraw();
-  }
-
-  debug() {
-    // DEBUG ONLY
-    const rectangle = new Konva.Rect({
-      x: this.positionX,
-      y: this.positionY,
-      width: 100,
-      height: 100,
-      fill: "green",
-      stroke: "black",
-      strokeWidth: 1,
-      draggable: false,
-    });
-    this.mediaLayerRef.add(rectangle);
-  }
-
-  async sendCanvasPayload(renderTask: RenderTask) {
-    if (!this.port) {
-      return console.log("Undefined Worker");
-    }
-    this.port.postMessage(renderTask);
-  }
-
-  public placeDebugRect(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    layer: Konva.Layer,
-  ): void {
-    const rect = new Konva.Rect({
-      x: x,
-      y: y,
-      width: width, // Default width
-      height: height, // Default height
-      fill: "green",
-      draggable: false,
-    });
-
-    layer.add(rect);
-    layer.draw();
-  }
-
-  // This function uses a portion of the video layer to capture just the capture canvas.
-  // capture everything after seeking each video node.
-  renderPortionOfLayer(
-    layer: Konva.Layer,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-  ): HTMLCanvasElement {
-    const canvas = layer.toCanvas({
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-    });
-    return canvas;
-  }
-
-  public isProcessing = false;
-  private handleNodeDragEnd = async () => {
-    // Clean up any existing state
-    //await this.render();
-  };
-
-  public async addNodes(node: MediaNode) {
-    if (
-      node instanceof ImageNode ||
-      node instanceof TextNode ||
-      node instanceof ShapeNode ||
-      node instanceof PaintNode ||
-      node instanceof PreviewCopyNode
-    ) {
-      console.debug("Adding node:", node);
-      this.imageNodes.push(node);
-      console.log(this.imageNodes);
-    }
-
-    // ensure the layer doesn't move if added while painting.
-    if (this.isEnabled) {
-      this.disableDragging();
-    }
-
-    //await this.render();
-  }
-
-  public removeNodes(node: MediaNode) {
-    if (
-      node instanceof ImageNode ||
-      node instanceof TextNode ||
-      node instanceof ShapeNode ||
-      node instanceof PaintNode ||
-      node instanceof PreviewCopyNode
-    ) {
-      const index = this.imageNodes.indexOf(node);
-      if (index > -1) {
-        node.kNode.off("dragend", this.handleNodeDragEnd);
-        this.imageNodes.splice(index, 1);
-      }
-    }
-  }
-
-  private cloneStageForRender(
-    stage: Konva.Stage,
-    layerOfInterest: Konva.Layer,
-  ): Konva.Stage {
-    const stageClone = new Konva.Stage({
-      width: stage.width(),
-      height: stage.height(),
-      container: this.offscreenRenderDiv,
-    });
-
-    const renderLayer = new Konva.Layer();
-
-    // Clone all the nodes then reset them to render right
-    layerOfInterest.getChildren().forEach((node) => {
-      const dupNode = node.clone();
-      dupNode.strokeWidth(0);
-      renderLayer.add(dupNode);
-    });
-
-    stageClone.add(renderLayer);
-
-    return stageClone;
-  }
-
-  private async imageBitmapToBase64(imageBitmap: ImageBitmap): Promise<string> {
-    // Create a temporary canvas
-    const canvas = document.createElement("canvas");
-    canvas.width = imageBitmap.width;
-    canvas.height = imageBitmap.height;
-
-    // Draw the ImageBitmap onto the canvas
-    const ctx = canvas.getContext("2d");
-    if (!ctx) throw new Error("Failed to get 2D context");
-
-    ctx.drawImage(imageBitmap, 0, 0);
-
-    // Convert to base64
-    const base64String = canvas.toDataURL("image/png");
-
-    // Clean up
-    canvas.remove();
-
-    // Remove the data:image/png;base64, prefix if you want just the base64 string
-    return base64String.split(",")[1];
-  }
-
-  public async saveOutput() {
-    if (!this.outputBitmap) {
-      console.error("No output bitmap available to save");
-      return;
-    }
-
-    const base64Bitmap = await EncodeImageBitmapToBase64(this.outputBitmap);
-
-    const saveResponse = await invoke("save_image", {
-      image: base64Bitmap,
-    });
-  }
-
-  public async generateImage() {
-    if (!this.lastRenderedBitmap) {
-      console.error("No rendered bitmap available to generate from");
-      return;
-    }
-
-    const base64Bitmap = await this.imageBitmapToBase64(
-      this.lastRenderedBitmap,
-    );
-
-    const generateResponse = await invoke("image_generation_command", {
-      image: base64Bitmap,
-      prompt: this.currentPrompt,
-    });
-  }
-
-  public async render() {
-    // only pick nodes that intersect wi th the canvas on screen bounds to freeze.
-    if (this.isProcessing) {
-      console.log("isProcessing Returning");
-      return;
-    }
-    console.log("Calling Render");
-    this.isProcessing = true;
-
-    this.mediaLayerRef.draw();
-    // Output all nodes in mediaLayerRef
-    const nodes = this.mediaLayerRef.getChildren();
-    console.log("All nodes in mediaLayer:", nodes);
-    console.log(
-      `context: x:${this.positionX} y:${this.positionY} ${this.width} x ${this.height}`,
-    );
-
-    const bitmap = (await this.renderFrame({
-      layerOfInterest: this.mediaLayerRef,
-      x: this.captureCanvas.x(),
-      y: this.captureCanvas.y(),
-      width: this.width,
-      height: this.height,
-      mimeType: "image/jpeg",
-      pixelRatio: 1,
-      quality: 1.0,
-      test: false,
-    })) as ImageBitmap;
-
-    this.lastRenderedBitmap = bitmap;
-
-    setCanvasRenderBitmap(bitmap);
-
-    try {
-    } catch (error) {
-      console.error("Error during image processing:", error);
-    } finally {
-      this.isProcessing = false;
-    }
-  }
-
-  // Add getter/setter for brush size
-  public set paintBrushSize(size: number) {
-    this.brushSize = size * 7.5;
-    const stage = this.mediaLayerRef.getStage();
-    if (stage && this.isEnabled) {
-      this.updateCursor(stage);
-    }
-  }
-
-  public get paintBrushSize(): number {
-    return this.brushSize;
-  }
-
-  // Add method to check connection status
-  public isServerConnected(): boolean {
-    return this.isConnected && this.client !== null;
-  }
-
-  // Add method to reconnect if needed
-  public async reconnect() {
-    if (this.client) {
-      this.client.ws.close();
-    }
-    await this.startServer();
-  }
-
-  private async renderFrame(config: {
-    layerOfInterest: Konva.Layer; // layer where the element that you want to clip lives.
-    // XY and height of a captureCanvas ( region of interest )
-    x?: number; // x position of the region of interest
-    y?: number; // y position of the region of interest
-    width?: number; // size of the region of interest
-    height?: number; // size of the region of interest
-    pixelRatio?: number; // higher means higher quality
-    mimeType?: string; // image/jpeg or image/png
-    quality?: number; // 1.0 is the best.
-    test: boolean; // true == blob else Image Bitmap
-  }): Promise<ImageBitmap | Blob> {
-    const box = config.layerOfInterest.getClientRect();
-    const stage = config.layerOfInterest.getStage();
-
-    const x = config.x !== undefined ? config.x : Math.floor(box.x);
-    const y = config.y !== undefined ? config.y : Math.floor(box.y);
-    const pixelRatio = config.pixelRatio || 1;
-
-    // Clone the required layer from the stage
-    // Set the right details (like removing highlight stroke)
-    // Then render the cloned stage to a bitmap
-    const stageClone = this.cloneStageForRender(stage, config.layerOfInterest);
-    const stageBlob = (await stageClone.toBlob({
-      x: x,
-      y: y,
-      width: config.width || Math.ceil(box.width),
-      height: config.height || Math.ceil(box.height),
-      pixelRatio: pixelRatio,
-    })) as Blob;
-
-    // if config.test is true, the result is downloaded to the local files
-    // config.test = true;
-    if (config.test) {
-      await FileUtilities.blobToFileJpeg(stageBlob, "1");
-    }
-
-    const result = await createImageBitmap(stageBlob);
-    return result;
-  }
-
-  // Add method to create or update background
-  public updateBackground(color: string) {
-    this.captureCanvas.fill(color);
-
-    const captureCanvasImage = this.captureCanvas.toDataURL();
-    const imageSource = new Image();
-    imageSource.src = captureCanvasImage;
-
-    imageSource.onload = () => {
-      this.backgroundRasterRect.fill(color);
-      this.backgroundRasterRect.image(imageSource);
-
-      this.mediaLayerRef.batchDraw();
-      //this.render();
-    };
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/RenderTask.ts

@@ -1,37 +0,0 @@
-import { bool } from "@techstark/opencv-js";
-
-export enum WorkerEvent {
-  START = "start",
-  PROGRESS = "progress",
-  COMPLETE = "complete",
-  DATA = "data",
-  ERROR = "error",
-}
-
-export interface RenderTaskPayload {
-  offscreenCanvas: OffscreenCanvas;
-  id: number;
-}
-
-// RenderSharedWorker.ts
-export interface RenderTask {
-  jobID: number;
-  isDone: bool;
-  event: WorkerEvent;
-  data: RenderTaskPayload | undefined;
-}
-
-export interface RenderTaskProgress {
-  isProcessing: boolean;
-  progress: number;
-  jobID: number;
-  event: WorkerEvent;
-}
-
-export interface RenderTaskResult {
-  event: Worker;
-  jobID: number;
-  data: {
-    mediaUrl: string;
-  };
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/note.txt

@@ -1,18 +0,0 @@
-   const dataURL = this.videoLayer.toDataURL({
-          x: this.captureCanvas.x(),
-          y: this.captureCanvas.y(),
-          width: this.captureCanvas.width(),
-          height: this.captureCanvas.height(),
-        });
-        
-
-        // Create an image element to display the captured area
-        const img = new Image();
-        img.src = dataURL;
-        document.body.appendChild(img); // Append the image to the body or any other container
-
-        // Optionally, you can download the captured image
-        const link = document.createElement("a");
-        link.href = dataURL;
-        link.download = "snapshot.png";
-        link.click();

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/CreateCommand.ts

@@ -1,77 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode } from "../types";
-import {
-  NodesManager,
-  NodeTransformer,
-  SelectionManager,
-} from "../NodesManagers";
-import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
-import { toolbarNode } from "../../signals/uiAccess/toolbarNode";
-
-export class CreateCommand implements ICommand {
-  private mediaLayerRef: Konva.Layer;
-  private nodes: Set<MediaNode>;
-  private zIndices: Map<MediaNode, number>;
-
-  private nodesManagerRef: NodesManager;
-  private nodeTransformerRef: NodeTransformer;
-  private selectionManagerRef: SelectionManager;
-
-  private renderEngineRef: RealTimeDrawEngine;
-
-  constructor({
-    nodes,
-    mediaLayerRef,
-    nodesManagerRef,
-    nodeTransformerRef,
-    renderEngineRef,
-    selectionManagerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-    nodeTransformerRef: NodeTransformer;
-    renderEngineRef: RealTimeDrawEngine;
-    selectionManagerRef: SelectionManager;
-  }) {
-    this.nodes = nodes;
-    this.zIndices = new Map(nodesManagerRef.getAllZIndices());
-
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-    this.nodeTransformerRef = nodeTransformerRef;
-    this.renderEngineRef = renderEngineRef;
-    this.selectionManagerRef = selectionManagerRef;
-  }
-
-  execute() {
-    this.nodes.forEach((node) => {
-      this.mediaLayerRef.add(node.kNode);
-      this.nodesManagerRef.saveNode(node);
-      this.renderEngineRef.addNodes(node);
-    });
-    this.mediaLayerRef.draw();
-
-  }
-
-  undo() {
-    this.nodes.forEach((node) => {
-      this.nodesManagerRef.removeNode(node);
-      this.renderEngineRef.removeNodes(node);
-      this.selectionManagerRef.deselectNode(node);
-      node.kNode.remove();
-      if (
-        this.zIndices.get(node) &&
-        node.kNode.getZIndex() !== this.zIndices.get(node)
-      ) {
-        node.kNode.setZIndex(this.zIndices.get(node));
-      }
-    });
-    this.nodeTransformerRef.clear();
-    toolbarNode.hide();
-    this.mediaLayerRef.draw();
-    this.renderEngineRef.render();
- 
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/DeleteCommand.ts

@@ -1,77 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode } from "../types";
-import {
-  NodesManager,
-  NodeTransformer,
-  SelectionManager,
-} from "../NodesManagers";
-import { RealTimeDrawEngine as RenderEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
-
-import { toolbarNode } from "../../signals/uiAccess/toolbarNode";
-
-export class DeleteCommand implements ICommand {
-  private mediaLayerRef: Konva.Layer;
-  private nodes: Set<MediaNode>;
-  private zIndices: Map<MediaNode, number> = new Map();
-
-  private nodesManagerRef: NodesManager;
-  private nodeTransformerRef: NodeTransformer;
-  private selectionManagerRef: SelectionManager;
-
-  private renderEngineRef: RenderEngine;
-
-  constructor({
-    nodes,
-    mediaLayerRef,
-    nodesManagerRef,
-    nodeTransformerRef,
-    renderEngineRef,
-    selectionManagerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-    nodeTransformerRef: NodeTransformer;
-    renderEngineRef: RenderEngine;
-    selectionManagerRef: SelectionManager;
-  }) {
-    this.nodes = new Set<MediaNode>(nodes);
-    this.zIndices = new Map(nodesManagerRef.getAllZIndices());
-
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-    this.nodeTransformerRef = nodeTransformerRef;
-    this.renderEngineRef = renderEngineRef;
-    this.selectionManagerRef = selectionManagerRef;
-  }
-
-  execute() {
-    this.nodes.forEach((node) => {
-      this.nodesManagerRef.removeNode(node);
-      this.renderEngineRef.removeNodes(node);
-      this.selectionManagerRef.deselectNode(node);
-      node.kNode.remove();
-    });
-    this.nodeTransformerRef.clear();
-    toolbarNode.hide();
-    this.mediaLayerRef.draw();
-  }
-
-  undo() {
-    this.nodes.forEach((node) => {
-      this.mediaLayerRef.add(node.kNode);
-      this.nodesManagerRef.saveNode(node);
-      this.renderEngineRef.addNodes(node);
-    });
-    this.nodesManagerRef.getAllNodes().forEach((node) => {
-      if (
-        this.zIndices.get(node) &&
-        node.kNode.getZIndex() !== this.zIndices.get(node)
-      ) {
-        node.kNode.setZIndex(this.zIndices.get(node));
-      }
-    });
-    this.mediaLayerRef.draw();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/ICommand.ts

@@ -1,4 +0,0 @@
-export interface ICommand {
-  execute(): void | boolean | Promise<boolean>;
-  undo(): void;
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/LockNodesCommand.ts

@@ -1,19 +0,0 @@
-import { MediaNode } from "../types";
-import { ICommand } from "./ICommand";
-
-export class LockNodesCommand implements ICommand {
-  private nodes: Set<MediaNode>;
-  constructor({ nodes }: { nodes: Set<MediaNode> }) {
-    this.nodes = new Set(nodes);
-  }
-  execute() {
-    this.nodes.forEach((node) => {
-      node.lock();
-    });
-  }
-  undo() {
-    this.nodes.forEach((node) => {
-      node.unlock();
-    });
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/MoveLayerDown.ts

@@ -1,64 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode } from "../types";
-import { NodesManager } from "../NodesManagers";
-
-export class MoveLayerDown implements ICommand {
-  private sortedMovingNodes: [MediaNode, number][];
-  private sortedAllNodesByZ: [MediaNode, number][];
-  private mediaLayerRef: Konva.Layer;
-  private nodesManagerRef: NodesManager;
-
-  constructor({
-    nodes,
-    mediaLayerRef,
-    nodesManagerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-  }) {
-    this.sortedMovingNodes = Array.from(nodes)
-      .reduce(
-        (accNodes, currNode) => {
-          accNodes.push([currNode, currNode.kNode.getZIndex()]);
-          return accNodes;
-        },
-        [] as [MediaNode, number][],
-      )
-      // this sort the remapped array in ascending order
-      .sort(([, zA], [, zB]) => zA - zB);
-
-    // set up references
-    this.sortedAllNodesByZ = nodesManagerRef.getSortedZIndices();
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-  }
-
-  execute() {
-    let hasMovedNode = false;
-    let currMinIndex = 0;
-    this.sortedMovingNodes.forEach(([movingNode, movingNodeZindex]) => {
-      if (movingNodeZindex === currMinIndex) {
-        currMinIndex = currMinIndex + 1;
-      } else {
-        movingNode.moveLayerDown();
-        hasMovedNode = true;
-      }
-    });
-    this.nodesManagerRef.updateAllZIndices();
-    this.mediaLayerRef.draw();
-    // if (import.meta.env.DEV && !hasMovedNode) {
-    //   console.log("No Node Moved-DOWN");
-    // }
-    return hasMovedNode;
-  }
-
-  undo() {
-    this.sortedAllNodesByZ.forEach(([node, zIndex]) => {
-      node.kNode.setZIndex(zIndex);
-    });
-    this.nodesManagerRef.updateAllZIndices();
-    this.mediaLayerRef.draw();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/MoveLayerUp.ts

@@ -1,64 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode } from "../types";
-import { NodesManager } from "../NodesManagers";
-
-export class MoveLayerUp implements ICommand {
-  private sortedMovingNodes: [MediaNode, number][];
-  private sortedAllNodesByZ: [MediaNode, number][];
-  private mediaLayerRef: Konva.Layer;
-  private nodesManagerRef: NodesManager;
-
-  constructor({
-    nodes,
-    mediaLayerRef,
-    nodesManagerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    mediaLayerRef: Konva.Layer;
-    nodesManagerRef: NodesManager;
-  }) {
-    this.sortedMovingNodes = Array.from(nodes)
-      .reduce(
-        (accNodes, currNode) => {
-          accNodes.push([currNode, currNode.kNode.getZIndex()]);
-          return accNodes;
-        },
-        [] as [MediaNode, number][],
-      )
-      // this sort the remapped array in descending order
-      .sort(([, zA], [, zB]) => zB - zA);
-
-    // set up references
-    this.sortedAllNodesByZ = nodesManagerRef.getSortedZIndices();
-    this.mediaLayerRef = mediaLayerRef;
-    this.nodesManagerRef = nodesManagerRef;
-  }
-
-  execute() {
-    let hasMovedNode = false;
-    let currMaxIndex = this.sortedAllNodesByZ.length;
-    this.sortedMovingNodes.forEach(([movingNode, movingNodeZindex]) => {
-      if (movingNodeZindex === currMaxIndex) {
-        currMaxIndex = currMaxIndex - 1;
-      } else {
-        movingNode.moveLayerUp();
-        hasMovedNode = true;
-      }
-    });
-    this.nodesManagerRef.updateAllZIndices();
-    this.mediaLayerRef.draw();
-    // if (import.meta.env.DEV && !hasMovedNode) {
-    //   console.log("No Node Moved-UP");
-    // }
-    return hasMovedNode;
-  }
-
-  undo() {
-    this.sortedAllNodesByZ.forEach(([node, zIndex]) => {
-      node.kNode.setZIndex(zIndex);
-    });
-    this.nodesManagerRef.updateAllZIndices();
-    this.mediaLayerRef.draw();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/TransformCommand.ts

@@ -1,82 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode, Transformation } from "../types";
-
-export class TransformCommand implements ICommand {
-  private nodes: Set<MediaNode>;
-  private initialTransformations: Map<MediaNode, Transformation[]>;
-  private finalTransformations: Map<MediaNode, Transformation[]>;
-  private layerRef: Konva.Layer;
-
-  constructor({
-    nodes,
-    initialTransformations,
-    finalTransformations,
-    layerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    initialTransformations: Map<MediaNode, Transformation[]>;
-    finalTransformations: Map<MediaNode, Transformation[]>;
-    layerRef: Konva.Layer;
-  }) {
-    this.nodes = new Set<MediaNode>(nodes);
-    this.initialTransformations = initialTransformations;
-    this.finalTransformations = finalTransformations;
-    this.layerRef = layerRef;
-    console.log("transform command", this);
-  }
-  private transformKNode(kNode: Konva.Node, transform: Transformation) {
-    kNode.setAttrs({
-      position: transform.position,
-      size: transform.size,
-      rotation: transform.rotation,
-      scale: transform.scale,
-    });
-  }
-  private findKNodeOfTransform = (
-    node: MediaNode,
-    transform: Transformation,
-  ) => {
-    const parentKNode = node.kNode;
-    if (parentKNode._id === transform.kNodeId) {
-      this.transformKNode(parentKNode, transform);
-      return;
-    }
-    if (parentKNode instanceof Konva.Group) {
-      const childKNode = parentKNode
-        .getChildren()
-        .find((currChild) => currChild._id === transform.kNodeId);
-      if (childKNode) {
-        this.transformKNode(childKNode, transform);
-        return;
-      }
-    }
-    if (import.meta.env.DEV) {
-      console.warn("Error in Transform", node, transform);
-    }
-  };
-
-  execute() {
-    this.nodes.forEach((node) => {
-      const finalTransformations = this.finalTransformations.get(node);
-      if (finalTransformations) {
-        finalTransformations.forEach((transform) =>
-          this.findKNodeOfTransform(node, transform),
-        );
-      }
-    });
-    this.layerRef.draw();
-  }
-
-  undo() {
-    this.nodes.forEach((node) => {
-      const initialTransformations = this.initialTransformations.get(node);
-      if (initialTransformations) {
-        initialTransformations.forEach((transform) =>
-          this.findKNodeOfTransform(node, transform),
-        );
-      }
-    });
-    this.layerRef.draw();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/TranslateCommand.ts

@@ -1,46 +0,0 @@
-import Konva from "konva";
-import { ICommand } from "./ICommand";
-import { MediaNode, Position } from "../types";
-
-export class TranslateCommand implements ICommand {
-  private nodes: Set<MediaNode>;
-  private initialPositions: Map<MediaNode, Position>;
-  private finalPositions: Map<MediaNode, Position>;
-  private layerRef: Konva.Layer;
-
-  constructor({
-    nodes,
-    initialPositions,
-    finalPositions,
-    layerRef,
-  }: {
-    nodes: Set<MediaNode>;
-    initialPositions: Map<MediaNode, Position>;
-    finalPositions: Map<MediaNode, Position>;
-    layerRef: Konva.Layer;
-  }) {
-    this.nodes = new Set<MediaNode>(nodes);
-    this.initialPositions = initialPositions;
-    this.finalPositions = finalPositions;
-    this.layerRef = layerRef;
-  }
-  execute() {
-    this.nodes.forEach((node) => {
-      const finalPosition = this.finalPositions.get(node);
-      if (finalPosition) {
-        node.kNode.position(finalPosition);
-      }
-    });
-    this.layerRef.draw();
-  }
-
-  undo() {
-    this.nodes.forEach((node) => {
-      const initialPosition = this.initialPositions.get(node);
-      if (initialPosition) {
-        node.kNode.position(initialPosition);
-      }
-    });
-    this.layerRef.draw();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/UndoRedoManager.ts

@@ -1,79 +0,0 @@
-import { ICommand } from "./ICommand";
-
-export class UndoStackManager {
-  private disabled: boolean = false;
-  private undoStack: ICommand[] = [];
-  private redoStack: ICommand[] = [];
-  private readonly STACK_LIMIT = 20;
-  private onCommandExecuted: () => void;
-
-  constructor(onCommandExecuted: () => void) {
-    this.onCommandExecuted = onCommandExecuted;
-  }
-
-  setDisabled(newState: boolean) {
-    this.disabled = newState;
-  }
-  isDisabled() {
-    return this.disabled;
-  }
-  async executeCommand(command: ICommand) {
-    const result = await command.execute();
-    if (result !== undefined && result === false) {
-      //command is not executed if it deliberatly returned false;
-      //in that case, no need to do anything
-      return;
-    }
-    this.pushCommand(command);
-  }
-  pushCommand(command: ICommand) {
-    this.undoStack.push(command);
-    this.redoStack = []; // Clear the redo stack
-
-    // Ensure the undo stack does not exceed the limit
-    if (this.undoStack.length > this.STACK_LIMIT) {
-      this.undoStack.shift(); // Remove the oldest command
-    }
-    console.log("command stack:", this.undoStack);
-  }
-  clear() {
-    this.undoStack = [];
-    this.redoStack = [];
-  }
-  undo() {
-    if (this.disabled) {
-      return;
-    }
-    const command = this.undoStack.pop();
-    if (command) {
-      command.undo();
-      this.redoStack.push(command);
-
-      // Ensure the redo stack does not exceed the limit
-      if (this.redoStack.length > this.STACK_LIMIT) {
-        this.redoStack.shift(); // Remove the oldest command
-      }
-      console.log("undo:", this.undoStack);
-    }
-    this.onCommandExecuted();
-  }
-
-  redo() {
-    if (this.disabled) {
-      return;
-    }
-    const command = this.redoStack.pop();
-    if (command) {
-      command.execute();
-      this.undoStack.push(command);
-
-      // Ensure the undo stack does not exceed the limit
-      if (this.undoStack.length > this.STACK_LIMIT) {
-        this.undoStack.shift(); // Remove the oldest command
-      }
-
-      console.log("Redo:", this.redoStack);
-    }
-    this.onCommandExecuted();
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/UnlockNodesCommand.ts

@@ -1,19 +0,0 @@
-import { MediaNode } from "../types";
-import { ICommand } from "./ICommand";
-
-export class UnlockNodesCommand implements ICommand {
-  private nodes: Set<MediaNode>;
-  constructor({ nodes }: { nodes: Set<MediaNode> }) {
-    this.nodes = new Set(nodes);
-  }
-  execute() {
-    this.nodes.forEach((node) => {
-      node.unlock();
-    });
-  }
-  undo() {
-    this.nodes.forEach((node) => {
-      node.lock();
-    });
-  }
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/index.ts

@@ -1,9 +0,0 @@
-export { UndoStackManager } from "./UndoRedoManager";
-export { CreateCommand } from "./CreateCommand";
-export { DeleteCommand } from "./DeleteCommand";
-export { LockNodesCommand } from "./LockNodesCommand";
-export { MoveLayerUp } from "./MoveLayerUp";
-export { MoveLayerDown } from "./MoveLayerDown";
-export { TransformCommand } from "./TransformCommand";
-export { TranslateCommand } from "./TranslateCommand";
-export { UnlockNodesCommand } from "./UnlockNodesCommand";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/constants.ts

@@ -1,25 +0,0 @@
-export enum AppModes {
-  INIT = "INIT",
-  PREVIEW = "PREVIEW",
-  SELECT = "SELECT",
-  PAINT = "PAINT",
-  ERASER = "ERASER",
-  RENDERING = "RENDERING",
-}
-
-export enum EditModes {
-  SELECT = "SELECT",
-  EDIT = "EDIT",
-}
-
-export const VideoResolutions = {
-  VERTICAL_720: { width: 720, height: 1280 },
-  LANDSCAPE_720: { width: 1280, height: 720 },
-  SQUARE_1024: { width: 1024, height: 1024 },
-};
-
-export const Colors = {
-  transparent: "rgba(0,0,0,0)",
-  translucentBlack: "rgba(0,0,0,0.3)",
-  primaryOrange: "rgba(45, 129, 255, 1)",
-};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/index.ts

@@ -1,9 +0,0 @@
-// to do fix https://codesandbox.io/p/sandbox/react-konva-infinite-grid-kkndq?file=%2Fsrc%2Findex.js the dotted background doesn't move when draggable.
-import { Engine } from "../Engine";
-import { EngineOptions } from "./types";
-export { Engine as EngineType };
-export const KonvaApp = (element: HTMLDivElement, options: EngineOptions) => {
-  const engine = new Engine(element, options);
-  engine.initializeStage(options.sceneToken);
-  return engine;
-};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/NodeData.ts

@@ -1,42 +0,0 @@
-import { NodeType, BaseNode, ImageNode, TextNode, ShapeNode } from "../Nodes";
-
-import { TransformationData } from "./Transformation";
-
-import { TextNodeData } from "./Text";
-import { PaintNode } from "../Nodes/PaintNode";
-
-export type MediaNode =
-  // | NetworkedNode
-  BaseNode  | ImageNode | TextNode | ShapeNode | PaintNode;
-
-export type ImageNodeData = {
-  mediaFileUrl: string;
-  mediaFileToken?: string;
-};
-export type VideoNodeData = {
-  mediaFileUrl: string;
-  mediaFileToken?: string;
-  videoWidth?: number;
-  videoHeight?: number;
-  isChroma: boolean;
-  chromaColor: {
-    red: number;
-    green: number;
-    blue: number;
-  };
-  extractionUrl?: string;
-};
-
-export type ShapeNodeData = {
-  shape: "triangle" | "square" | "circle";
-}
-
-export type NodeData = {
-  type: NodeType;
-  transform: TransformationData;
-
-  // Text Node Data
-  imageNodeData?: ImageNodeData;
-  textNodeData?: TextNodeData;
-  videoNodeData?: VideoNodeData;
-};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/Text.ts

@@ -1,32 +0,0 @@
-export enum FontWeight {
-  NORMAL = "normal",
-  BOLD = "bold",
-}
-export enum FontStyle {
-  NORMAL = "normal",
-  ITALIC = "italic",
-}
-export enum TextAlign {
-  LEFT = "left",
-  RIGHT = "right",
-  CENTER = "center",
-  // JUSTIFY = "justify",
-}
-export enum TextDecoration {
-  NONE = "none",
-  STRIKETHROUGH = "line-through",
-  UNDERLINE = "underline",
-}
-export type TextFormatData = {
-  color: string;
-  maxWidth: number;
-  fontFamily: string;
-  fontSize: number;
-  fontStyle: FontStyle;
-  fontWeight: FontWeight;
-  textAlign: TextAlign;
-  textDecoration: TextDecoration;
-};
-export type TextNodeData = {
-  text: string;
-} & TextFormatData;

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/Transformation.ts

@@ -1,16 +0,0 @@
-import { Position, Size, Scale } from "./basicValueTypes";
-
-// This is meant for the transformation command
-export interface Transformation {
-  kNodeId: number | string;
-  position: Position;
-  size: Size;
-  scale: Scale;
-  rotation: number;
-}
-
-// This is meant for saving transformation data
-// for scene saving and loading
-export interface TransformationData extends Omit<Transformation, "kNodeId"> {
-  zIndex: number;
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/basicValueTypes.ts

@@ -1,14 +0,0 @@
-import { Vector2d } from "konva/lib/types";
-
-export interface Position extends Vector2d {}
-export interface Scale extends Vector2d {}
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export interface RGBColor {
-  red: number;
-  green: number;
-  blue: number;
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/events.ts

@@ -1,22 +0,0 @@
-import { NetworkedNode } from "../Nodes/NetworkedNode";
-
-export interface ProgressEventDetails<S> {
-  progress: number;
-  message?: string;
-  status?: S;
-}
-export interface NodeProgressEventDetail<S> extends ProgressEventDetails<S> {
-  node: NetworkedNode;
-}
-
-export enum VideoExtractionEvents {
-  "SESSION_CREATING" = "SESSION_CREATING",
-  "SESSION_IDLE" = "SESSION_IDLE",
-  "EXTRACTION_POINT_REQUEST" = "EXTRACTION_POINT_REQUEST",
-  "SESSION_CLOSING" = "SESSION_CLOSING",
-  "SESSION_CLOSED" = "SESSION_CLOSED",
-}
-export interface VideoExtractionEventDetails
-  extends ProgressEventDetails<VideoExtractionEvents> {
-  status: VideoExtractionEvents;
-}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/types/index.ts

@@ -1,10 +0,0 @@
-import { NavigateFunction } from "react-router-dom";
-export interface EngineOptions {
-  navigate: NavigateFunction;
-  sceneToken?: string;
-}
-
-export * from "./basicValueTypes";
-export * from "./NodeData";
-export * from "./Text";
-export * from "./Transformation";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaCanvasContainer.tsx

@@ -1,16 +0,0 @@
-import { forwardRef, HTMLAttributes } from "react";
-import { twMerge } from "tailwind-merge";
-
-// import { useRenderCounter } from "~/hooks/useRenderCounter";
-
-export const KonvaCanvasContainer = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  // useRenderCounter("KonvaCanvasContainer");
-
-  const classes = twMerge("pegboard -z-10", "h-[calc(100vh-56px)]", className);
-  return <div ref={ref} className={classes} {...props} />;
-});
-
-KonvaCanvasContainer.displayName = "KonvaCanvasContainer";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaRootComponent.tsx

@@ -1,174 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-
-// Components
-import { KonvaCanvasContainer } from "./KonvaCanvasContainer";
-import { ContextualToolbarNode } from "./ContextualToolbarNode";
-// import { SignaledCanvasDragDropFiles } from "./SignaledCanvasDragDropFiles";
-// import { SignaledDialogs } from "./SignaledDialogs";
-import { SignaledToolbarMain } from "./SignaledToolbarMain";
-
-// The KonvaApp is the root of the Konva stage
-// and only entry point for anything in Konva JS
-import { EngineType } from "./KonvaApp";
-import { KonvaApp } from "./KonvaApp";
-
-// all the signal-contexts are wrapped in hooks
-import { useAppUiContext } from "./contextSignals/appUi";
-import { useLayoutContext } from "./contextSignals/layout";
-
-// common hooks
-import { useRenderCounter } from "./useRenderCounter";
-import { useNavigate } from "react-router-dom";
-import "./global.css";
-// TODO REFACTOR THIS INTO THE COMPONENT LIBRARY its used in 3d and 2d
-
-// These imports are required for the 2D prompt box component
-// Job context is currently missing
-import { PromptBox2D } from "@storyteller/ui-promptbox";
-import { UndoRedo } from "./components/reusable/UndoRedo/UndoRedo";
-import { getCanvasRenderBitmap } from "./signals/canvasRenderBitmap";
-import { EncodeImageBitmapToBase64 } from "./utilities/EncodeImageBitmapToBase64";
-import { uploadImage } from "../../components/reusable/UploadModalMedia/uploadImage";
-// import { getCanvasRenderBitmap } from "./signals/canvasRenderBitmap";
-// import { EncodeImageBitmapToBase64 } from "./utilities/EncodeImageBitmapToBase64";
-import { JobProvider, useJobContext } from "./JobContext";
-import { RealTimeDrawEngine } from "./KonvaApp/RenderingPrimitives/RealTimeDrawEngine";
-// import { VideoResolutions } from "./KonvaApp/constants";
-
-import {
-  DialogAddImage,
-  DialogEditText,
-  DialogError,
-} from "./components/features";
-import { dispatchUiEvents } from "./signals";
-import { useSignals } from "@preact/signals-react/runtime";
-import { dialogError } from "./signals/uiAccess/dialogError";
-
-export const KonvaRootComponent = ({
-  className,
-  sceneToken,
-}: {
-  className: string;
-  sceneToken?: string;
-}) => {
-  useSignals();
-  // This is a hook that will log the number of times the component has rerendered
-  // Let's make sure we only log once
-  useRenderCounter("KonvaRootComponent");
-  const navigate = useNavigate();
-  const appUiContext = useAppUiContext();
-  const layoutContext = useLayoutContext();
-
-  // Add state to track engine initialization
-  const [isEngineReady, setIsEngineReady] = useState(false);
-  const engineRef = useRef<EngineType | null>(null);
-  const renderEngineRef = useRef<RealTimeDrawEngine | null>(null);
-
-  const konvaContainerCallbackRef = useCallback(
-    (node: HTMLDivElement) => {
-      // Only initialize if we have a node and haven't initialized yet
-      if (node !== null && !isEngineReady && engineRef.current === null) {
-        try {
-          const options = {
-            navigate: navigate,
-            sceneToken: sceneToken,
-          };
-
-          engineRef.current = KonvaApp(node, options);
-          renderEngineRef.current = engineRef.current.realTimeDrawEngine;
-          // Only set ready if initialization succeeded
-          if (engineRef.current) {
-            setIsEngineReady(true);
-          }
-        } catch (error) {
-          console.error("Failed to initialize KonvaApp:", error);
-          engineRef.current = null;
-          setIsEngineReady(false);
-        }
-      }
-    },
-    [navigate, sceneToken, isEngineReady],
-  );
-
-  // Modal stuff
-  const props = dialogError.signal.value;
-  const { isShowing, title, message } = props;
-  const onClose = useCallback(() => {
-    dialogError.hide();
-  }, []);
-
-  return (
-    <>
-      {/* Always render the canvas container */}
-      <KonvaCanvasContainer
-        ref={konvaContainerCallbackRef}
-        className={className}
-      />
-
-      {/* Conditionally render the loading overlay */}
-      {!isEngineReady && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-gray-500">Initializing canvas...</div>
-        </div>
-      )}
-
-      {/* Conditionally render the UI components that need the engine */}
-      {isEngineReady && engineRef.current && (
-        <UndoRedo engine={engineRef.current}>
-          {/* <SignaledCanvasDragDropFiles
-            openAddImage={appUiContext.openAddImage}
-            openAddVideo={appUiContext.openAddVideo}
-          /> */}
-          <JobProvider>
-            <PromptBox2D
-              uploadImage={uploadImage}
-              getCanvasRenderBitmap={getCanvasRenderBitmap}
-              EncodeImageBitmapToBase64={EncodeImageBitmapToBase64}
-              useJobContext={useJobContext}
-              onEnqueuePressed={async () => {
-                // will set the snapshot of the canvas internally.
-                await renderEngineRef.current?.render();
-              }}
-            />{" "}
-          </JobProvider>
-
-          <SignaledToolbarMain
-            layoutSignal={layoutContext.signal}
-            appUiContext={appUiContext}
-          />
-          {/* <SignaledDialogs
-            appUiSignal={appUiContext.signal}
-            resetAll={appUiContext.resetAll}
-          /> */}
-          <ContextualToolbarNode />
-        </UndoRedo>
-      )}
-
-      {/* Modals */}
-
-      <DialogEditText
-        isOpen={appUiContext.signal.value.isEditTextOpen}
-        onDoneEditText={(data) => {
-          dispatchUiEvents.addTextToEngine(data);
-        }}
-        closeCallback={appUiContext.resetAll}
-      />
-
-      <DialogAddImage
-        isOpen={appUiContext.signal.value.isAddImageOpen}
-        stagedImage={appUiContext.signal.value.stagedImage}
-        closeCallback={appUiContext.resetAll}
-        onAddImage={(file) => {
-          dispatchUiEvents.addImageToEngine(file);
-        }}
-      />
-
-      <DialogError
-        isShowing={isShowing}
-        title={title}
-        message={message}
-        onClose={onClose}
-      />
-    </>
-  );
-};