Scala.js npm 项目的门面

Question

我正在努力思考 Scala.js 并想为这个很棒的库编写一个非常基本的外观：https://github.com/anvaka/VivaGraphJS

我想从小事做起，然后一步一步往上爬，可惜，到目前为止运气不好。

基本上我现在想在 Scala.js 中构建它：

function drawGraph() {
    var graph = Viva.Graph.graph();
    graph.addLink(1, 2);

    var graphics = Viva.Graph.View.webglGraphics();

    var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });
    renderer.run();
}

这渲染得很好

现在我的第一个门面：

package tld.awesomeproject.facades

import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@js.native
@JSName("Viva.Graph.graph")
class VivaGraph extends js.Object
{
  var graph: Ngraph = js.native
  var renderer: Renderer = js.native

  def addNode(id: String, data: js.Any): Unit = js.native
  def addLink(from: String, to: String): Unit = js.native
  def addLink(from: String, to: String, data: js.Any): Unit = js.native
}

@js.native
@JSName("ngraph.graph")
class Ngraph extends js.Object

@js.native
trait Graphics extends js.Object

@js.native
@JSName("Viva.Graph.View.webglGraphics")
class WebGlGraphics extends Graphics

@js.native
@JSName("Viva.Graph.View.renderer")
class Renderer(vivaGraph: VivaGraph) extends js.Object
{
  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

我的主要class:

    object Main extends JSApp
{
  import scalatags.JsDom.all._

  def main(): Unit =
  {
    // Add js script dynamically
    val s = script(
      "alert('Hell World')"
    )
    dom.document.getElementsByTagName("head")(0).appendChild(s.render)

    val testing = div(id := "testing")
    dom.document.body.appendChild(testing.render)

    dom.document.getElementById("testing").asInstanceOf[Div].style.background = "green"
    dom.document.getElementById("testing").asInstanceOf[Div].style.height = "1000px"

    val graph = new VivaGraph
    graph.addLink("1", "2")
    graph.addNode("blubb", "now")

    val renderer = new Renderer(graph)
    //renderer.container = dom.document.getElementById("testing").asInstanceOf[Div]
    renderer.graphics = new WebGlGraphics

    renderer.run()
  }
}

现在，hello world 被调用了，所以我正确地绑定了所有内容，但是没有图表会显示出来。（graphHolder div 来自 html 本身，我饶了你）

来自编译客户端的重要部分-fastop.js:

$c_LMain$.prototype.main__V = (function() {
  var this = $m_Lscalatags_JsDom$all$();
  var s = this.script__Lscalatags_JsDom$TypedTag().apply__sc_Seq__Lscalatags_JsDom$TypedTag(new $c_sjs_js_WrappedArray().init___sjs_js_Array([($m_Lscalatags_JsDom$all$(), new $c_Lscalatags_JsDom$StringFrag().init___T("alert('Hell Worldadaa')"))]));
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementsByTagName("head")[0].appendChild(s.render__Lorg_scalajs_dom_raw_Element());
  var jstesting = $m_Lscalacss_defaults_PlatformExports$StyleSheetInlineJsOps$();
  var s = $m_Lscalacss_internal_StringRenderer$().defaultPretty__Lscalacss_internal_Renderer();
  jstesting.addToDocument$extension__Lscalacss_internal_mutable_StyleSheet$Inline__Lscalacss_internal_Renderer__Lscalacss_internal_Env__V(s, new $c_Lscalacss_defaults_PlatformExports$StyleElementRenderer().init___Lscalacss_internal_Renderer(s), ($m_Lscalacss_package$Defaults$(), $m_Lscalacss_defaults_DefaultSettings$Dev$(), $m_Lscalacss_internal_Env$().empty));
  var this = $m_Lscalatags_JsDom$all$();
  var x = this.div__Lscalatags_JsDom$TypedTag().apply__sc_Seq__Lscalatags_JsDom$TypedTag(new $c_sjs_js_WrappedArray().init___sjs_js_Array([$m_Lscalatags_JsDom$all$().id__Lscalatags_generic_Attr().$$colon$eq__O__Lscalatags_generic_AttrValue__Lscalatags_generic_AttrPair("testing", $m_Lscalatags_JsDom$all$().stringAttr), $m_Lscalatags_JsDom$all$().cls__Lscalatags_generic_Attr().$$colon$eq__O__Lscalatags_generic_AttrValue__Lscalatags_generic_AttrPair($m_Ltld_awesomeproject_TestCss$().b.htmlClass, $m_Lscalatags_JsDom$all$().stringAttr)]));
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().body.appendChild(testing.render__Lorg_scalajs_dom_raw_Element());
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("graphHolder").style.background = "yellow";
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("graphHolder").style.height = "1000px";
  $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing").style.background = "blue";
  var graph = new $g.Viva.Graph.graph();
  graph.addLink("1", "2", null);
  var renderer = new $g.Viva.Graph.View.renderer(graph);
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = new $g.Viva.Graph.View.webglGraphics()
});

现在我想知道，我做错了什么？有人可以指出我正确的方向吗？编译后的代码看起来还不错 (?!)

编辑：

鉴于评论中的输入，我到目前为止：

生成代码js代码

  var graph = $g.Viva.Graph.graph;
  graph.addLink("1", "2");
  graph.addNode("blubb", "now");
  var renderer = new $g.Viva.Graph.View.renderer(graph.graph);
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = $g.Viva.Graph.View.webglGraphics;
  renderer.run()

更新外观

package tld.awesomeproject.facades

import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@js.native
@JSName("Viva.Graph.graph")
object VivaGraph extends js.Object
{
  var graph: Ngraph = js.native
  var renderer: Renderer = js.native

  def addNode(id: String, data: js.Any): Unit = js.native
  def addLink(from: String, to: String): Unit = js.native
  def addLink(from: String, to: String, data: js.Any): Unit = js.native
}

@js.native
@JSName("ngraph.graph")
class Ngraph extends js.Object
{
  def addLink(from: String, to: String): Unit = js.native
  def addNode(id: String, data: js.Any): Unit = js.native
}

@js.native
trait Graphics extends js.Object

@js.native
@JSName("Viva.Graph.View.webglGraphics")
object WebGlGraphics extends Graphics

@js.native
@JSName("Viva.Graph.View.renderer")
class Renderer(ngraph: Ngraph) extends js.Object
{
  var graph: Ngraph = js.native

  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

renderer还是错误的，应该是：

var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });

所以没有 "new"，但我不能把它变成一个对象... gnaaah :(

编辑2：

我的意思是，我当然可以把它变成一个对象，像这样：

  var renderer: Renderer = js.native

@js.native
trait Renderer extends js.Object

@js.native
@JSName("Viva.Graph.View.renderer")
object SomeRenderer extends Renderer
{
  var graph: Ngraph = js.native

  var container: HTMLElement = js.native
  var graphics: Graphics = js.native

  def run(): Unit = js.native
}

但是自动生成的代码当然是这样的：

  graph.addLink("1", "2");
  graph.addNode("blubb", "now");
  var renderer = $g.Viva.Graph.View.renderer;
  renderer.graph = graph.graph;
  renderer.container = $m_Lorg_scalajs_dom_package$().document__Lorg_scalajs_dom_raw_HTMLDocument().getElementById("testing");
  renderer.graphics = $g.Viva.Graph.View.webglGraphics;
  renderer.run()

此渲染器不类似于：

var renderer = Viva.Graph.View.renderer(graph, {
        container: document.getElementById('graphHolder'),
        graphics: graphics
    });

Answer 1

假设问题的初始 JavaScript 代码是正确的，我们将在 Scala.js.

中定义本机类和对象如下

import scala.scalajs.js
import js.annotation._

import org.scalajs.dom

@js.native
@JSName("Viva.Graph")
object VivaGraph extends js.Object {
  def graph(): VivaGraph = js.native
}

@ScalaJSDefined
trait VivaGraph extends js.Object {
  def addLink(from: Int, to: Int): Unit
}

@js.native
@JSName("Viva.Graph.View")
object VivaGraphView extends js.Object {
  def webglGraphics(): VivaGraphics = js.native
  def renderer(graph: VivaGraph, options: VivaGraphRendererOptions): VivaRenderer = js.native
}

@ScalaJSDefined
trait VivaGraphics extends js.Object

@ScalaJSDefined
trait VivaGraphRendererOptions extends js.Object {
  var container: js.UndefOr[dom.Element] = js.undefined
  var graphics: js.UndefOr[VivaGraphics] = js.undefined
}

@ScalaJSDefined
trait VivaRenderer extends js.Object {
  def run(): Unit
}

然后我们可以将其用作：

def drawGraph(): Unit = {
  val graph = VivaGraph.graph()
  graph.addLink(1, 2)

  val g = VivaGraphView.webglGraphics()

  val renderer = VivaGraphView.renderer(graph, new VivaGraphRendererOptions {
    container = dom.document.getElementById("graphHolder")
    graphics = g
  })
  renderer.run()
}

Scala.js npm 项目的门面

Scala.js facade for npm project

javascript

scala

facade

scala.js