I was playing a little bit with KonvaJS and I am failing to use the filters.
Filters require the following javascript:
node.filters([Konva.Filters.Blur]);I was wondering in one hand about how to wrap Blur.
Maybe this:
import std/jsffi
type
Konva* {.importc.} = ref object of RootObj
Filters* {.importc.} = ref object of Konva
Blur* {.importc.} = ref object of Filters
type
Blur* {.importc:"Konva.Filters.Blur".} = ref object of FiltersAnd then how should I wrap filters? I was thinking on something like:
proc filters*(self:NodeObj; val: seq[typedesc[Filters]]) {.importcpp: "#.filters(#)".}but the following:
circle.filters(@[Blur])
Error: type mismatch
Expression: @[Blur]
[1] [Blur]: array[0..0, typedesc[Blur]]What am I doing wrong?
I think it should be something like this:
type Filter = proc(n: JsObject)
proc filters*(s: JsObject, filters: seq[Filter]) {.importjs: "#.filters(#)".}
proc blur*(n: JsObject) {.importjs: "Konva.Filters.Blur(#)".}The filters function is not properly typed. You should create a complete wrapper instead, because the way it is now, it may compile with incorrect code (since any JsObject can be used as the first argument).
# node.filters([Konva.Filters.Blur]);
import std/[jsffi]
var node {.importc,nodecl.}: JsObject
var Konva {.importc,nodecl.}: JsObject
proc filters(obj: JsObject, filters: openArray[JsObject]) {.importcpp.} # ensure 2nd param is `openArray`
when isMainModule:
node.filters([Konva.Filters.Blur])
# nim js -d:release -d:danger your_module_name.nim
# will output 'node.filters([Konva.Filters.Blur]);' in the js code.Thanks. You pointed me in the right direction.
I had to do this:
proc Blur*() {.importcpp: "Konva.Filters.Blur".}in order to get the following javascript:
circle_536870954.filters(([Konva.Filters.Blur]));If I do this:
proc Blur*(n: JsObject) {.importcpp: "Konva.Filters.Blur(#)".}I get this javascript:
circle_520093781.filters(([Konva.Filters.Blur(#)]));There are two approaches to create js bindings with Nim.
The first approach involves wrapping all of the classes, class methods, global variables, etc that you need.
It ensures better type safety and the code suggestions (if you're using VSCode or something) will appear as you type- reducing the need to refer to documentation, for example, to reference parameters for function calls. You can even go as far as providing documentation comments via double hashtags ## underneath your declarations to further help reduce referencing the official docs for that js library.
It's somewhat of a pain in the ass and it takes some time to do but when it's done it's done. I opt for this approach whenever I know I'll be referencing the library often (or I have the time to wrap it all), like I do with Three.js (a graphics library). You just have to really take your time, digest the API, and experiment until you get a nice workflow going for wrapping things in that library. I like to use CoPilot to help speed things up.
The second approach, what I really suggest here, is a rough and dirty wrapper where we use the JsObject type from the std/jsffi module EVERYWHERE.
It's exactly like how I wrapped your example above and it took me like two second. It's so much faster and you can always come back later to improve your wrapper. Way easier than wrapping a C library IMO.
Some things to keep in mind with this approach:
1.) study the jsffi module in the std lib. There are a few things you'll be using a lot.
The JsObject type acts like a "catch-all" for any javascript object / class. It also uses the experimental 'dot' operator where you can call any property or method of a class without even wrapping it. There are some 'gotchas' that I've found- one being like the example above where if you NEED an array as a function parameter you'll want to wrap the function and use openArray as the type. There are a couple more 'gotchas' you'll find as you go along but it'll be pretty simple to debug when you run your code and get that sweet sweet stacktrace.
There is a to function (https://nim-lang.org/docs/jsffi.html#to%2CJsObject%2Ctypedesc) where you'll be able to convert a JsObject into ANY type you'd like. This has been very helpful, for example when I run into problems chaining field accesses into method calls into field accesses, etc.
2.) use {.importc, nodecl.} pragma for global variables and simply set the type as JsObject (refer to example above).
3.) only wrap what you need. You should only NEED to wrap global variables, maybe class names (as JsObjects) and maybe a few of their class methods, and the standalone functions you want to use (which should take in JsObjects as parameters rather than wrapped class names).
Here is the https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html example done in less than a minute and you'll notice I only wrapped just a couple of things and made a liberal use of the to function for converting JsObjects to concrete types for the Nim compiler. I don't know if this actually run but no errors are thrown at compile time :)
import std/[dom, jsffi]
proc newStage(params: JsObject): JsObject {.importcpp: "new Konva.Stage(#)".}
proc newLayer(): JsObject {.importcpp: "new Konva.Layer".}
proc newCircle(params: JsObject): JsObject {.importcpp: "new Konva.Circle(#)".}
var
width = window.innerWidth
height = window.innerHeight
var stage = newStage(JsObject{
container: cstring "container",
width: width,
height: height
})
var layer = newLayer()
stage.add(layer)
var circle = newCircle(JsObject{
x: stage.width().to(int) / 2,
y: stage.height().to(int) / 2,
radius: 50,
fill: cstring "green"
})
layer.add(circle)
var scaleBy = 1.01
stage.on(cstring"wheel", proc(e: JsObject) =
# stop default scrolling
e.evt.preventDefault()
var
oldScale = stage.scaleX().to(float)
`pointer` = stage.getPointerPosition().to(JsObject)
var mousePointTo = JsObject{
x: (`pointer`.x.to(float) - stage.x().to(float)) / oldScale,
y: (`pointer`.y.to(float) - stage.y().to(float)) / oldScale
}
# how to scale? Zoom in? Or zoom out?
var direction = if e.evt.deltaY.to(int) > 0: 1 else: -1
# when we zoom on trackpad, e.evt.ctrlKey is true
# in that case lets revert direction
if e.evt.ctrlKey.to(bool):
direction = -direction
var newScale = if direction > 0: oldScale * scaleBy else: oldScale / scaleBy
stage.scale(JsObject{x: newScale, y: newScale})
var newPos = JsObject{
x: `pointer`.x.to(float) - mousePointTo.x.to(float) * newScale,
y: `pointer`.y.to(float) - mousePointTo.y.to(float) * newScale
}
stage.position(newPos)
)If you haven't seen this (https://github.com/nim-lang/Nim/wiki/Nim-for-TypeScript-Programmers) it's a great reference as well.
I'm probably missing something, it's late and I'm tired as hell, but I hope this helps.