File > Import should allow the user to place the image(s) in the viewport

editor/src/messages/portfolio/portfolio_message.rs

@@ -102,6 +102,10 @@ pub enum PortfolioMessage {
 		mouse: Option<(f64, f64)>,
 		parent_and_insert_index: Option<(LayerNodeIdentifier, usize)>,
 	},
+	PreviewImage {
+		name: Option<String>,
+		svg: String,
+	},
 	PrevDocument,
 	SetActivePanel {
 		panel: PanelType,

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -356,6 +356,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 			// 	self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
 			// }
 			PortfolioMessage::Import => {
+				//this is where itheppend
 				// This portfolio message wraps the frontend message so it can be listed as an action, which isn't possible for frontend messages
 				responses.add(FrontendMessage::TriggerImport);
 			}
@@ -1080,6 +1081,12 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 					responses.add(FrontendMessage::TriggerDelayedZoomCanvasToFitAll);
 				}
 			}
+			PortfolioMessage::PreviewImage { name, svg } => {
+				debug!("PortfolioMessage Preview Image")
+				//TODO: draw a preview image following cursor
+
+				//TODO: get a preview
+			}
 			PortfolioMessage::PrevDocument => {
 				if let Some(active_document_id) = self.active_document_id {
 					let len = self.document_ids.len();

frontend/src/components/floating-menus/ImportImagePreview.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
+	export let pastedImage: ImageData | undefined = undefined;
+	export let x: number;
+	export let y: number;
+
+	//define fucntions here
+</script>
+
+<FloatingMenu open={true} class="import-image-paste-preview" type="Cursor" styles={{ left: x + "px", top: y + "px" }}>
+	<!-- <div class="image-preview">
+		<img classn/>
+	</div> -->
+	<img src="" />
+</FloatingMenu>
+
+<style lang="scss" global></style>

frontend/src/components/panels/Document.svelte

@@ -22,6 +22,7 @@
 	import { updateBoundsOfViewports } from "@graphite/utility-functions/viewports";
 
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
+	import ImportImagePreview from "@graphite/components/floating-menus/ImportImagePreview.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import Graph from "@graphite/components/views/Graph.svelte";

frontend/src/state-providers/portfolio.ts

@@ -72,7 +72,8 @@
 
 		if (data.type.includes("svg")) {
 			const svg = new TextDecoder().decode(data.content.data);
-			editor.handle.pasteSvg(data.filename, svg);
+			//editor.handle.pasteSvg(data.filename, svg); //calls to the backend for a immediate image paste
+			editor.handle.previewImage(data.filename, svg);
 			return;
 		}
 
@@ -83,6 +84,7 @@
 		}
 
 		const imageData = await extractPixelData(new Blob([data.content.data], { type: data.type }));
+		console.debug("editor paste Image ");
 		editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height);
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerDownloadTextFile, (triggerFileDownload) => {

frontend/wasm/src/editor_api.rs

@@ -659,6 +659,12 @@ impl EditorHandle {
 		};
 		self.dispatch(message);
 	}
+	#[wasm_bindgen(js_name=previewImage)]
+	pub fn preview_image(&self, name: Option<String>, svg: String) {
+		let message = PortfolioMessage::PreviewImage { name, svg };
+		debug!("editor api,preview image,dispatch message to PortfolioMessage PreviewMessage");
+		self.dispatch(message);
+	}
 
 	/// Toggle visibility of a layer or node given its node ID
 	#[wasm_bindgen(js_name = toggleNodeVisibilityLayerPanel)]