如何将Javascript类转换为ScalaJS

我有以下简单的Javascript代码：

import Modeler from 'bpmn-js/lib/Modeler';

import diagramXML from './diagram.bpmn';

const modeler = new Modeler({
  container: '#canvas'
});

modeler.importXML(diagramXML);

这将在浏览器中打开时显示图表

我想用ScalaJS做这个，但是我错过了一些东西

这是我的密码：

@JSImport("resources/diagram.bpmn", JSImport.Default)
@js.native
object DiagramXML extends js.Object

object Main {

  @JSExportTopLevel("main")
  def main(): Unit = {
    val modeler = new Modeler(js.Object(
      "container" -> "#canvas"
    ))

   modeler.importXML(DiagramXML.toString)
 }
}

这是我为

Modeler

设计的外观：

@js.native
@JSImport（“bpmn-js/lib/Modeler”、“Modeler”）
类BpmnJS（选项：js.Object）扩展了js.Object{
def importXML（xml:String）：js.Promise[Any]=js.native
}

---

调试时，xml被正确加载。缺少的只是它在DOM中的正确呈现。

我可以在您的翻译中发现两个问题。第一个是

bpmnjs

的

import

。JS导入是

从“bpmn js/lib/Modeler”导入建模器；

应该翻译成什么

@JSImport（“bpmn js/lib/Modeler”，JSImport.Default）

根据

另一个问题更微妙。在调用

newmodeler

时

js.Object(
“容器”->“#画布”
)

它（也许很不幸）编译了，但没有做你认为它做的事情。它创建两个字符串的Scala元组，并将其传递给JavaScript函数

对象（…）

，该函数实际上会按原样返回它（因为Scala元组已经是一个对象）

您想要的是一个带有字段

容器的JavaScript对象，您可以将其编写为

newjs.Object{
val container=“#画布”
}

实现这一点的更好方法是在facade中静态键入options对象：

类BpmnJS（选项：BpmnJSOptions）扩展了js.Object{
..
}
trait BpmnJSOptions扩展了js.Object{
var容器：js.UndefOr[String]=js.undefined
}

这样，你就可以称之为

新的BpmnJS（新的BpmnJS选项{
container=“#canvas”
})

感谢这项工作-有趣的是，它只在使用您建议的

BpmnJSOptions

时起作用。