Inserting a layer into a document with sketch UX

WCByrne

I feel I must be missing something, I have looked through all the actions and just can't seem to find the right functions. Can anyone point me in the right direction to insert a symbol instance (from master) into a document using the built in functionality. I'm trying to accomplish the same functionality as sketch runner's insert symbol, which is the same as sketch's 'insert symbol' action, where the symbol follows the cursor and is placed on click.

Thanks!

Ashung

http://sketchplugins.com/d/104-adding-symbol-to-artboard

WCByrne

Ashung That adds it to the document/layer but I'm looking to I'm looking to get the place functionality that the built in symbol menu uses like below, where the left one is where the one being added that follows the cursor until I click.

My guess would be hooking into to one of the built in actions but I can't find one that seems to do that.
image screen-shot-2017-05-08-at-91737-pmpng.png

hxgqh

From Sketch-Headers, I only found some hints in: MSInsertSymbolAction.h, MSInsertSymbolEventHander.h. But I DO NOT know how to perform insert symbol action.

Does context.document.actionsController().actionForID("MSInsertSymbolAction").doPerformAction(nil) work? Anyone can explain it?

hxgqh

From MSInsertSymbolEventHander.h, I guess that symbol is stored in pasteboard(function pasteboardContainsSymbolInfo)

hxgqh

After a whole day work, I finally find a way that craft drag component into the sketch. But the way craft act is not the same as Sketch Runner.

Craft way: Just clear NSDragPboard contents(which is initially image) and write symbol instance NSDragPboard. It WILL NOT create a new drag session.
Sketch Runner Way: Click on the symbol and create a new dragging session.

Core code is as follows:

/**
 * @desc Replace NSDragPboard
 * @param item
 */
function replaceNSDragPboard(symbolInstance){
  var dpb = NSPasteboard.pasteboardWithName(NSDragPboard);
  dpb.clearContents();
  try{
    let newPbLayers = MSPasteboardLayers.pasteboardLayersWithLayers([symbolInstance]);
    MSPasteboardManager.writePasteboardLayers_toPasteboard(newPbLayers, dpb);
    log(newPbLayers.layers())
  } catch (err){
    log(err.toString());
  }
}

Kuruza

hxgqh any updates on this? Doesn't work for me...there's no error, but layer is not inserted also.

abynim

Use MSInsertSymbolAction to replicate the default behavior

// for now let's assume you have a symbol master selected
var symbol = context.selection.firstObject();

try {
    var symbolRef = MSSymbolMasterReference.referenceForShareableObject(symbol);
    var insertAction = context.document.actionsController().actionForID("MSInsertSymbolAction");
    var tempMenuItem = NSMenuItem.alloc().init();

    tempMenuItem.setRepresentedObject([symbolRef]);
    
    // EDIT: doPerformAction() does not trigger InsertSymbol actions. 
    // insertAction.doPerformAction(tempMenuItem);

    // Use performAction() instead
    insertAction.performAction(tempMenuItem);

} catch(e) {
    log("Exception: " + e);
}

mqq

Thanks for the code snip abynim . I was able to get the symbol to appear with the mouse, however when I click it doesn't actually get added to the Artboard. Is there another action for the click to insert behaviour? Thanks so much.

ily1437

abynim
Hi, It is very useful for me.
The next thing for me is how to know the "MSInsertSymbolAction" finished,
I just want to get a callback way,
Could you help me?
Thanks~

medienJan

Hey there guys,
@abynim's answer worked for me, too. But instead of selecting the actual symbol and place it again, I would like to select any symbol directly from the library and place it with the mouse. So is there a way to get the "MSSymbolMaster" from the following?

var symbolReferences = library.getImportableSymbolReferencesForDocument(
  document
)

abynim

One way to figure this out is to add listeners for a combination of Actions.

In manifest.json:

{
     "script" : "script.js",
     "handlers" : {
         "actions" : {
             "InsertSymbol.finish" : "handleInsertSymbolAction",
             "SelectionChanged.finish" : "handleSelectionChangedAction"
        }
    }
}

In script.js:

var handleInsertSymbolAction = function(context) {
  NSUserDefaults.standardUserDefaults().setObject_forKey(true, "MyPluginInsertingSymbolFlag");
}

var handleSelectionChangedAction = function(context) {
  if(NSUserDefaults.standardUserDefaults().boolForKey("MyPluginInsertingSymbolFlag")) 
    {
        log("Did insert symbol instance " + context.actionContext.newSelection.firstObject());
    }
  NSUserDefaults.standardUserDefaults().setObject_forKey(false, "MyPluginInsertingSymbolFlag");
}

The InsertSymbol.finish action should probably be triggered when a symbol has been successfully inserted on the canvas. Currently it is triggered when a symbol is selected from the Symbols menu. Not sure if this was by design though /cc @ale

ale

abynim Not sure if this was by design

Not really. Many of the Actions on the API are actually hooks into internal actions, and sometimes they trigger at points that don't really make sense outside of our code.

Eventually we will rewrite the whole thing to make it more intentional and less brittle, but I guess that will take a while…

ily1437

abynim I tried this method to listen action "InsertSymbol.finish", but not worked. there is nothing logged in function handleInsertSymbolAction(). Is there anything I ignored ?ale Can I consider that functionality has not been finished yet in sketch ?

ale

ily1437 Can I consider that functionality has not been finished yet in sketch ?

That's one way to put it, yes 😅

abynim

ily1437 Hmm, you're right. The error is in the code for inserting symbols though.

Instead of doPerformAction it should be performAction.. like this:

try {
    var symbolRef = MSSymbolMasterReference.referenceForShareableObject(symbol);
    var insertAction = context.document.actionsController().actionForID("MSInsertSymbolAction");
    var tempMenuItem = NSMenuItem.alloc().init();

    tempMenuItem.setRepresentedObject([symbolRef]);
    // THIS IS WRONG: insertAction.doPerformAction(tempMenuItem);
    insertAction.performAction(tempMenuItem);

} catch(e) {
    log("Exception: " + e);
}

I'll edit my original reply for future reference 👍

ily1437

abynim
It worked for InsertSymbol.finish,
but there are some problems for it:

twice calling at handler: context.action = InsertSymbol.begin/ InsertSymbol.finish.
the callback handler is fired before inserting into document or ESC.
how to get insertedSymbol info from context at this time?
Still Yeah! 😀
-------------------------------
Another thing is:
Is there a way to insert a Group/Layer(MSSymbolInstance) like this ?
I mean using code to create a Group with many SymbolInstance, and use action to insert it into document,
Thanks~

abynim

ily1437
So that's the problem I mentioned earlier, that the InsertSymbol.finish action is triggered when you begin inserting a symbol rather than after a symbol has been successfully added. Will be nice if this could be fixed in Sketch itself.

As a workaround, in the InsertSymbol.finish handler we save a true/false flag in NSUserDefaults that a symbol instance is about to be added. When an instance is added, the SelectionChanged.finish handler gets triggered since Sketch will automatically select the symbol instance that has been added. Here we check the flag again to see if a symbol instance was being added, and take further action as required.

It's totally a hack so I would not recommend actually using this in a plugin that you might release publicly. Also, doing anything on SelectionChanged will slow down Sketch because it needs to initiate a new JS context every time.

Is there a way to insert a Group/Layer(MSSymbolInstance) like this ?
I mean using code to create a Group with many SymbolInstance, and use action to insert it into document

I recently added this functionality in Runner so it's definitely possible, but not with this method. I'm not sure how to make it work using JavaScript though.