如何将 Javascript Class 翻译成 ScalaJS

Question

我有这个简单的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")
class BpmnJS(options: js.Object) extends js.Object {

  def importXML(xml: String): js.Promise[Any] = js.native

}

当我调试时，xml 被正确加载。所缺少的只是它在 DOM.

中正确呈现

Answer 1

我可以确定您的翻译存在两个问题。第一个是bpmn-js的import。 JS 导入是

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

应该翻译成

@JSImport("bpmn-js/lib/Modeler", JSImport.Default)

根据the documentation on translating import into @JSImport.

另一个问题比较微妙。在调用 new Modeler 时，您有

js.Object(
  "container" -> "#canvas"
)

它（也许很不幸）编译但没有按照您的想法进行。它创建了两个字符串的 Scala 元组，它被传递给 JavaScript 函数 Object(...) 实际上它将 return 它原样（因为 Scala 元组已经是一个对象）。

你想要的是一个带有字段 container 的 JavaScript 对象，你可以将其写为

new js.Object {
  val container = "#canvas"
}

一个更好的方法是在外观中静态输入选项对象：

class BpmnJS(options: BpmnJSOptions) extends js.Object {
  ..
}

trait BpmnJSOptions extends js.Object {
  var container: js.UndefOr[String] = js.undefined
}

这样，您就可以将其称为

new BpmnJS(new BpmnJSOptions {
  container = "#canvas"
})

如何将 Javascript Class 翻译成 ScalaJS

How to translate Javascript Class to ScalaJS

javascript

scala

scala.js