add send image to parent interface
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
parent
874e39de4b
commit
9064a006d5
5 changed files with 77 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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",
|
||||
}
|
||||
|
|
39
js/webui.js
39
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;
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue