add send image to parent interface

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

index.html

@@ -345,7 +345,7 @@
 		</div>
 
 		<!-- Basics -->
-		<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
+		<script src="js/global.js?v=ac30d16" type="text/javascript"></script>
 
 		<!-- Base Libs -->
 		<script src="js/lib/util.js?v=49a78a6" type="text/javascript"></script>
@@ -388,7 +388,7 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=3c70aea"
+			src="js/ui/tool/select.js?v=f290e83"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=4a86ff8" type="text/javascript"></script>
 		<script
@@ -410,6 +410,6 @@
 			type="text/javascript"></script>
 
 		<!-- Deals with webui communication -->
-		<script src="js/webui.js?v=60a0a81" type="text/javascript"></script>
+		<script src="js/webui.js?v=8edac89" type="text/javascript"></script>
 	</body>
 </html>

js/global.js

@@ -53,6 +53,9 @@ const global = {
 
 	// HRFix compatibility shenanigans
 	isOldHRFix: false,
+
+	// WebUI object to communitate with parent window
+	webui: null,
 };
 
 global._firstRun = !localStorage.getItem("openoutpaint/host");

js/ui/tool/select.js

@@ -714,7 +714,7 @@ const selectTransformTool = () =>
 						createVisibleResourceButton.disabled = true;
 					};
 
-					// Disable buttons (if something is selected)
+					// Enable buttons (if something is selected)
 					state.ctxmenu.enableButtons = () => {
 						saveSelectionButton.disabled = "";
 						createResourceButton.disabled = "";
@@ -723,6 +723,21 @@ const selectTransformTool = () =>
 					};
 					state.ctxmenu.actionArray = actionArray;
 					state.ctxmenu.visibleActionArray = visibleActionArray;
+
+					// Send Selection to Destination
+					state.ctxmenu.sendSelected = document.createElement("select");
+					state.ctxmenu.sendSelected.style.width = "100%";
+					state.ctxmenu.sendSelected.addEventListener("change", (evn) => {
+						const v = evn.target.value;
+						if (state.selected && v !== "None")
+							global.webui && global.webui.sendTo(state.selected.canvas, v);
+						evn.target.value = "None";
+					});
+
+					let opt = document.createElement("option");
+					opt.textContent = "Send To...";
+					opt.value = "None";
+					state.ctxmenu.sendSelected.appendChild(opt);
 				}
 				const array = document.createElement("div");
 				array.classList.add("checkbox-array");
@@ -733,6 +748,23 @@ const selectTransformTool = () =>
 				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
 				menu.appendChild(state.ctxmenu.actionArray);
 				menu.appendChild(state.ctxmenu.visibleActionArray);
+				if (global.webui && global.webui.destinations) {
+					while (state.ctxmenu.sendSelected.lastChild.value !== "None") {
+						state.ctxmenu.sendSelected.removeChild(
+							state.ctxmenu.sendSelected.lastChild
+						);
+					}
+
+					global.webui.destinations.forEach((dst) => {
+						const opt = document.createElement("option");
+						opt.textContent = dst.name;
+						opt.value = dst.id;
+
+						state.ctxmenu.sendSelected.appendChild(opt);
+					});
+
+					menu.appendChild(state.ctxmenu.sendSelected);
+				}
 			},
 			shortcut: "S",
 		}

js/webui.js

@@ -2,6 +2,32 @@
  * This file should only be actually loaded if we are in a trusted environment.
  */
 (async () => {
+	let parentWindow = null;
+	const webui = {
+		/** @type {{name: string, id: string}[]} */
+		destinations: null,
+
+		/**
+		 * Sends a
+		 *
+		 * @param {HTMLCanvas} canvas Canvas to send the data of
+		 * @param {string} destination The ID of the destination
+		 */
+		sendTo(canvas, destination) {
+			if (!this.destinations.find((d) => d.id === destination))
+				throw new Error("[webui] Given destination is not available");
+
+			parentWindow &&
+				parentWindow.postMessage({
+					type: "openoutpaint/sendto",
+					message: {
+						image: canvas.toDataURL(),
+						destination,
+					},
+				});
+		},
+	};
+
 	// Check if key file exists
 	const response = await fetch("key.json");
 
@@ -48,8 +74,6 @@
 	}
 
 	if (data) {
-		let parentWindow = null;
-
 		if (!data.trusted) console.debug(`[webui] Loaded key`);
 
 		window.addEventListener("message", ({data, origin, source}) => {
@@ -65,6 +89,11 @@
 				console.warn(`[webui] Communication has not been initialized`);
 			}
 
+			if (global.debug) {
+				console.debug("[webui] Received message:");
+				console.debug(data);
+			}
+
 			try {
 				switch (data.type) {
 					case "openoutpaint/init":
@@ -77,6 +106,7 @@
 								data.host,
 								`Are you sure you want to modify the host?\nThis configuration was provided by the hosting page\n - ${parentWindow.document.title} (${origin})`
 							);
+						if (data.destinations) webui.destinations = data.destinations;
 
 						break;
 					case "openoutpaint/add-resource":
@@ -142,4 +172,7 @@
 			}
 		});
 	}
-})();
+	return webui;
+})().then((value) => {
+	global.webui = value;
+});

pages/embed.test.html

@@ -8,8 +8,8 @@
 		<iframe
 			id="openoutpaint"
 			style="width: 100%; height: 800px"
-			src="../index.html?v=daf18de"
+			src="../index.html?v=34d5675"
-			src="../index.html?v=daf18de"
+			src="../index.html?v=34d5675"
 			frameborder="0"></iframe>
 		<button id="add-res">Add Resource</button>
 		<script>