Hello All,
I am currently working with the sketch-module-webview for the plugin I am building, and would like to know any information related to adding new panels in the Sketch UI, similar to how Craft (InVision) adds their panel into the UI.
Currently, I am able to load my web app inside of the UI in a webview to the left of the inspector panel but have been experiencing issues with placing it on the right.
If you are familiar with working with the Webview, Browser Window, and Web Contents API's, what I've currently accomplished can be achieved as follows:
const options = {
identifier: 'myId',
width: 240,
height: 180,
show: false
}
// Creating the browser window
const browserWindow = new BrowserWindow(options);
// web contents
const webContents = browserWindow.webContents;
webContents.on("did-finish-load", () => {
// Finding what i've seen called as the "content" view
const contentView = context.document.documentWindow().contentView();
// Finding what appears to be the canvas that includes the inspector panel in its subviews - I am calling the sketch shell
const sketchShell = contentView.subviews().objectAtIndex(0);
// Retrieving an array of the visible UI, including the inspector panel at the end of the array
const sketchShellSubviews = sketchShell.subviews();
let finalShellSubviews = [];
let webviewAdded = false;
sketchShellSubviews.forEach(subview => {
finalShellSubviews.push(subview);
// Injecting our browser windows webview into the array - note the underscore
if (!webviewAdded && subview.identifier() == 'view_canvas') {
finalShellSubviews.push(browserWindow._webview);
webviewAdded = true;
}
});
// Finally, update the subviews and refresh
sketchShell.subviews = finalShellSubviews;
sketchShell.adjustSubviews();
});
// load our url
browserWindow.loadURL("myURL");
This will inject the webview into the sketch UI to the left of the inspector panel, and seems to function the same as Craft does it. One thing to note is that you should never call
broswerWindow.show();
Otherwise it will open a floating panel without the rendered html.
What I'm really trying to do is get the webview to the right of the inspector panel. What I can do is add my webview to the end of the array of subviews and it will push it to the right. A simple way to do that is
sketchShell.addSubview(browserWindow._webview);
but with a few problems that I can't figure out.
First, immediately when I place it at the end of the subview array, the inspector panel will have nothing rendered inside of it. But if i start dragging the inspector panel (which previously isn't able to be resized), the UI in the panel comes back.
Second, it appears that my new view in the UI inherits the original styling of the inspector panel right when that next resize event happens. I'll inject my webview into the UI, the Inspector panel gets pushed to the left, it won't have any UI in it, but I'll start dragging the inspector panel to resize and the webview I added snaps to the original width of the inspector panel and is then unable to be resized.
From my understanding, I believe sketch is listening to resize events on all the UI panels, and then taking the last view in the array and applying those styles and constraints to it, but anything in the middle of the array can be resized.
If anyone has any ideas on how to deal with this it would be greatly appreciated
Thanks!