How to get tool bar height?

linzpeng

How to get the height of the red rectangular area in the picture?

kevgski

Why do you need the height?

let window = context.document.window()
let windowFrame = NSWindow.contentRectForFrameRect_styleMask(window.frame(),window.styleMask())
let toolbarHeight = NSHeight(windowFrame) - NSHeight(window.contentView().frame())

Generally, this isn't a good practice. You don't want to manually set things relative to the toolbar height. You should be using contraints to ping things to the top of the canvas view or document.

linzpeng

kevgski

Thank you!

I set a sidebar with this discussion.
https://sketchplugins.com/d/2221-sidebar-error-in-sketch-v70/9
But the difference is views owned by the stack view is not NSButton，is webview create by sketch-module-web-view

import Browser from 'sketch-module-web-view'
const stackView = NSStackView.alloc().init()
stackView.setSpacing(0)
stackView.setFlipped(true)
stackView.setOrientation(1)
stackView.setFrame(NSMakeRect(0, 0, SIDEBAR_WIDTH, 0))

const browserWindow = new Browser(options)
const webview = browserWindow.getNativeWebViewHandle()

stackView.addView_inGravity(webview, 1)

const controller = NSViewController.alloc().init()
controller.setView(stackView)

const splitViewItem = NSSplitViewItem.splitViewItemWithViewController(controller)
document.splitViewController().insertSplitViewItem_atIndex(splitViewItem, 2)

The problem is sidebar can't respond to the first click when the Sketch application non-active.
My solution is add windowDidBecomeKey delegate in current document.

const delegateClass = new MochaJSDelegate({
  'windowDidBecomeKey:': function (notification) {
    const object = notification.object()
    const className = object?.className()
    const event = object?.currentEvent()
    if (className == 'MSDocumentWindow' && event?.type() === NSEventTypeLeftMouseDown) {
      const webview = browserWindow.getNativeWebViewHandle()
      const sketchAppFrame = NSApplication.sharedApplication().mainWindow()?.frame()

      const screenPoint = NSEvent.mouseLocation()
      const screenFrame = NSScreen.mainScreen().frame()
      
      const screenHeight = NSHeight(screenFrame)
      const screenOriginY = screenFrame.origin.y
     
      const point = webview.convertPoint_fromView(screenPoint, null)

      point.x = point.x - ((sketchAppFrame?.origin?.x) ?? 0)
      point.y = point.y + ((sketchAppFrame?.origin?.y) ?? 0)

      webContents.executeJavaScript(`
        const el = document.elementFromPoint(point.x}, point.y)
        ...
        el.click()
        ...
      `)
    }
  }
})

But here is a new problem. When I got the y-axis coordinate transformed by the webview.convertPoint_fromView(screenPoint, null), there is always a superfluous height of the toolbar. So I’d like to remove the height of the toolbar.

I reckon I did not set the correct constraints.

abynim

This needs more testing but it seems to work:

const window = context.document.documentWindow()
const contentRect = window.contentRectForFrameRect(window.frame())
const layoutRect = window.contentLayoutRect()
const toolbarHeight = NSHeight(contentRect)-NSHeight(layoutRect)
log(toolbarHeight)

linzpeng

abynim Thank you!

kevgski

oof are you able to get the correct coordinates in the javascript context of the webview? Seems like a lot of work/is pretty brittle.

For what its worth, I'm not running into the first click issue when I just create a WKWebView and load up a site.

framework('WebKit')

let stackView = NSStackView.alloc().init()
stackView.setSpacing(0)
stackView.setFlipped(true)
stackView.setOrientation(1)
stackView.setFrame(NSMakeRect(0, 0, 400, 0))

let configuration = WKWebViewConfiguration.alloc().init()
let myWebView = WKWebView.alloc().initWithFrame_configuration(stackView.frame(), configuration)
myWebView.configuration().preferences().setValue_forKey(true, "developerExtrasEnabled")
    
let url = NSURL.alloc().initWithString("https://www.sketch.com")
let request = NSURLRequest.alloc().initWithURL(url)

stackView.addView_inGravity(myWebView,1)
myWebView.loadRequest(request)

let controller = NSViewController.alloc().init()
controller.setView(stackView)

let splitViewItem = NSSplitViewItem.splitViewItemWithViewController(controller)

let splitViewController = context.document.splitViewController()
let item = splitViewController.splitViewItems()[2]
splitViewController.removeSplitViewItem(item)
context.document.splitViewController().insertSplitViewItem_atIndex(splitViewItem, 2)

w312011343

kevgski I set a sidebar and I want to remove it. But I can not find which view is mine. The view's identifier() is null. any way to find my view?

abynim

It's always better to capture any kind of coordinates from within the WebView and send them to your plugin code using window.webkit.messageHandlers.

Also, you don't need a stack view if you're only adding one web view in your sidebar. You can directly set the web view as the controller's view.

framework('WebKit')

let configuration = WKWebViewConfiguration.alloc().init()
configuration.preferences().setValue_forKey(true, "developerExtrasEnabled")
let myWebView = WKWebView.alloc().initWithFrame_configuration(NSMakeRect(0, 0, 400, 0), configuration)

let controller = NSViewController.alloc().init()
controller.setView(myWebView)

let url = NSURL.alloc().initWithString("https://www.sketch.com")
let request = NSURLRequest.alloc().initWithURL(url)
myWebView.loadRequest(request)

let splitViewItem = NSSplitViewItem.splitViewItemWithViewController(controller)
context.document.splitViewController().insertSplitViewItem_atIndex(splitViewItem, 1)

kevgski

Yeah if you don’t have a reference in memory to the splitViewItem anymore you will need to find it. Could do something like this where you loop through all the splitViewItems and check if the viewController matches the identifier that is specified.

framework('WebKit')
let controllerID = "myID"

let splitViewController = context.document.splitViewController()
let items = splitViewController.splitViewItems()
let foundSplitView = false

// Find our inserted splitItem via the ID
for (let i=0;i<items.count();i++) {
  if (items[i].viewController().identifier() == controllerID) {
      splitViewController.removeSplitViewItem(items[i])
      foundSplitView = true
  }
  if ( (i==(items.count()-1)) && !foundSplitView) {
      setup()
  } 
}

function setup() {
  let configuration = WKWebViewConfiguration.alloc().init()
  configuration.preferences().setValue_forKey(true, "developerExtrasEnabled")
  let myWebView = WKWebView.alloc().initWithFrame_configuration(NSMakeRect(0, 0, 400, 0), configuration)

  let controller = NSViewController.alloc().init()
  controller.identifier = controllerID
  controller.setView(myWebView)

  let url = NSURL.alloc().initWithString("https://www.sketch.com")
  let request = NSURLRequest.alloc().initWithURL(url)
  myWebView.loadRequest(request)

  let splitViewItem = NSSplitViewItem.splitViewItemWithViewController(controller)

  context.document.splitViewController().insertSplitViewItem_atIndex(splitViewItem, 1)
}

w312011343

kevgski Thank you!
There is another question. I set the splitView width 40.(let myWebView = WKWebView.alloc().initWithFrame_configuration(NSMakeRect(0, 0, 40, 0), configuration)).
But the splitView's width sometimes is 40, sometimes is wider. Why? what should I do?

kevgski

Sounds like you have added more things into the viewController that is changing the width? I’ve ran it a bunch of times with just the web view and I always get 40.

w312011343

kevgski I use the same code with yours. It usually appears in the first time. When I open sketch and make the sidebar appears first time, the sidebar's width usually wider than 40. Back to normal the second time. It looks like sidebar's width changed when sketch's width changed.