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
}

在我的主要课程中：

    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本身，我饶了你）

来自编译的client-fastop.js的重要部分：

$c_LMain$.prototype.main__V = (function() {
  var this$1 = $m_Lscalatags_JsDom$all$();
  var s = this$1.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$1 = $m_Lscalacss_defaults_PlatformExports$StyleSheetInlineJsOps$();
  var s$2 = $m_Lscalacss_internal_StringRenderer$().defaultPretty__Lscalacss_internal_Renderer();
  jstesting$1.addToDocument$extension__Lscalacss_internal_mutable_StyleSheet$Inline__Lscalacss_internal_Renderer__Lscalacss_internal_Env__V(s$1, new $c_Lscalacss_defaults_PlatformExports$StyleElementRenderer().init___Lscalacss_internal_Renderer(s$2), ($m_Lscalacss_package$Defaults$(), $m_Lscalacss_defaults_DefaultSettings$Dev$(), $m_Lscalacss_internal_Env$().empty$1));
  var this$12 = $m_Lscalatags_JsDom$all$();
  var x = this$12.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$1), $m_Lscalatags_JsDom$all$().cls__Lscalatags_generic_Attr().$$colon$eq__O__Lscalatags_generic_AttrValue__Lscalatags_generic_AttrPair($m_Ltld_awesomeproject_TestCss$().b$3.htmlClass$1, $m_Lscalatags_JsDom$all$().stringAttr$1)]));
  $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
}

渲染器仍然是错误的，应该是：

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

所以没有＆＃34;新的＆＃34;，但我不能把它变成一个对象...... gnaaah :(

EDIT2：

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

  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()
}

npm项目的Scala.js门面

1 个答案: