How to add custom panels to sketch like InVision craft or AutoLayout

Ariel

I found a way... inserting into the already splitter... don't know if that breaks anything... hope not!

matt_sven

I find most attempts to integrate UI into Sketch to be very brittle - there are no (yet) given Sketch APIs to do this. Invision is a little more stable than most though. Regardless, to answer the original question: if you want to see how Magic Mirror does it, you can download it, extract it and examine the source - you can see how they do it there.

julianburr

matt_sven I find most attempts to integrate UI into Sketch to be very brittle

So true. As a JS developer I found the easiest way is to create your interfaces using webviews, which you can then open as windows/modals or in form of a "panel" where you want in the sketch ui. E.g. with something like this:

const contentView = context.document.documentWindow().contentView();
if (!contentView) {
  return false;
}

const stageView = contentView.subviews().objectAtIndex(0);

// Inject our webview into the right spot in the subview list
const views = stageView.subviews();
let finalViews = [];
let pushedWebView = false;
for (let i = 0; i < views.count(); i++) {
  const view = views.objectAtIndex(i);
  finalViews.push(view);
  // Change the view identifier here if you want to add your panel anywhere else 
  if (!pushedWebView && view.identifier() == 'view_canvas') {
    finalViews.push(webView);
    pushedWebView = true;
  }
}
// If it hasn't been pushed yet, push our web view
// E.g. when inspector is not activated etc.
if (!pushedWebView) {
  finalViews.push(webView);
}
// Finally, update the subviews prop and refresh
stageView.subviews = finalViews;
stageView.adjustSubviews();

But that feels like quite a hacky way to achieve that ... I also guess it always depends on how complex your UI needs to be and what you actually want to do with it...

hxgqh

julianburr Actually, your code will not work like craft. Push to NSSplitView can only create craft bar view like appearance.

Ariel

Thanks! yes, I'm doing similar to that one now... but being very carefully about any possible change from Sketch. like for example I don't assume there are 3 columns always, etc... and I found that Panels from InVision crash Sketch when doing that, as it seems Panels is assuming the 3th column is the inspector one. I tried to contact InVision, but is there anyone from InVision in this forum that can help to make it work with that plugin installed too?

we really need a way to add panels supported by SketchApp... ?

also is there anyway to open sketch with all plugins disabled? if the SketchApp crashes many times, it should ask "do you want to disable all plugins?" also I found that if I select to don't open the last document, it opens it anyway...

Ariel

I'm talking with InVision already... can't believe no other plugin is adding a panel there already... or maybe they are and is crashing(?)

Ariel

just found that Magic Mirror crash if you have InVision one installed... for InVision I'm detecting it and doing a hack to make it work... Magic Mirror is not problem for me, but I just don't understand... no one is using both?

markh

There seems to be a variety of different ways people are adding their panels so it can be a struggle to get the different plugins to work together. It would be great if we could agree to some procedure so the plugins don't clobber each other.

smozely

Anyone had more joy with this? I've followed the MagicSketch stuff (big thanks for that) to get to the point where I've got an item in the inspector panel after the onSelection change, but I want it there all the time (like AutoLayout does).
Adding the same sort of action after OpenDocument seems to get ignored, as well as a couple of times where you edit other things in the inspector panel, it seems to get redrawn without my plugin again.

Really keen to know how AutoLayout is doing it

Lnsx

smozely Magic Sketch adds it to the Inspector scroll list, so there's moments where it does get removed. I believe AutoLayout adds it's view to the Inspector container itself.

Lnsx

smozely With a bit more tinkering around, I have a much more solid answer on adding views and such to the Sketch UI. The reason why onOpenDocument seems to be ignored is because when you get try to get the views from the MSDocument from context, it returns null. The reason is because while the action is indeed called onOpenDocument, the initialization actually finishes milliseconds after that Action finishes, and there isn't any Action for the next stage. For me, I got around that by starting asynchronously waiting for the document to not return null, and then starting initialization the moment document is not null.

When it comes to adding views, it's fairly simple process of getting the InspectorView, which contains the NSStackView that holds everything else. From there you just have to make sure you set the right layout constraints so it displays properly.

hxgqh

websiddu craft panel is document based. Actually it's much like a NSPanel. If you use NSPanel attached to NSApp, then it's shared by multiple documents. If you want to use NSPanel attached to document window, then the following codes is ok:

    let doc = context.document;
    let documentWindow = doc.documentWindow();
    let panel = createPanel();
    [documentWindow addChildWindow:panel ordered:NSWindowAbove];

hxgqh

hxgqh This code snippet DO NOT support multiple documents. If two panel added, sketch will crash.

hxgqh

websiddu What craft use is: https://github.com/sbooth/SFBPopovers. You can bring this framework to your plugin.

dbrody

At ContentSync (https://www.contentsync.io) we have used a combination of listening to the OpenDocument notification and appending a view into the SplitView of Sketch. By handling the way we insert the view properly we get our plugin to work well with Craft and others.

nikogu

@dbrody we do as same as you, but we listened to the sketch onOpenDocument action, there has a problem that is when the document open, the document.documentWindow().contentView() is not ready. so we add a setTimeout to do delay, but it will crashed and bring some bugs.

What did you do with that ?

Ariel

nikogu do you have Invision plugin installed? try disabling it... I needed to wait until Invision plugin installs it nsview, and then add mine (if not Invision plugin crash)

katyusha

I've been looking for a way to do this for quite some time (returning to this thread on multiple occasions looking for updates) and just wanted to share this blog post by James Tang describing how to do this with Xcode.

https://blog.magicsketch.io/sketch-plugin-xcode-template-c8236a6f7fff

It's a great post so definitely take a look if you're trying to understand how plugins like Anima might be doing this. It was easy to follow and I was able to get the plugin working and a custom panel added in 52.5 but that's about as far as I can get with my limited knowledge of the environment and obj-c.

Looking forward to a skpm solve (hopefully?) for custom panels.