add send image to parent interface

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2023-01-17 00:03:43 -03:00
parent 874e39de4b
commit 9064a006d5
5 changed files with 77 additions and 9 deletions

View file

@ -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>

View file

@ -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");

View file

@ -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",
}

View file

@ -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;
});

View file

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