Scala.js門面的NPM項目

我試圖總結我的周圍Scala.js頭，想編寫一個非常基本的外觀爲這個真棒庫：https://github.com/anvaka/VivaGraphJS Scala.js門面的NPM項目

我想開始小和工作我的方式，但唉，迄今爲止沒有運氣。

基本上我想在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() 
    } 
}

現在，你好的世界被調用了，所以我將所有東西都綁定到了正確的位置，但是沒有任何圖形會顯示出來。（該graphHolder DIV來自HTML本身，我饒了你）從編譯客戶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() 
});

現在我想知道，我究竟做錯了什麼？有人可以請指點我正確的方向嗎？編譯後的代碼看起來okayish

編輯（？！）：

鑑於該評論我走到這一步輸入：

生成的代碼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 
    });

所以沒有「新」的，但我不能讓一個對象... 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 
    });

來源

2017-01-11 Sorona

嗯。第一個問題是：var graph = Viva.Graph.graph（）;'正確的JavaScript？（也就是說，它不會說'new'？）我懷疑這是一個函數返回一個VivaGraph，而不是一個類的構造函數，所以'新的VivaGraph'沒有做你想做的。更普遍的調試這個東西，println（）是你的朋友 - 我推薦使用它來看看'新的VivaGraph'是否正在返回'undefined' ... –

@JustinduCoeur我想你是對的。但是如果我讓VivaGraph成爲一個對象並使用：'val graph = VivaGraph.graph'來代替，我怎樣才能將這個實例傳遞給渲染器？但我想不是這樣。我需要給渲染器一個'Ngraph'（'ngraph.graph'）來代替......不知道如何正確構建渲染器，雖然 – Sorona

@JustinduCoeur但回答你的問題，是的，.js代碼（不是生成的一個！）是有效的根據文檔和它的作品。 – Sorona

假設從這個問題初始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() 
}

來源

2017-01-14 18:39:59 sjrd

謝謝。只有你的代碼出錯是對象的一些定義缺少正文，例如'def graph（）：VivaGraph'必須是'def graph（）：VivaGraph = js.native'（同樣適用於'VivaGraphRendererOptions'） – Sorona

確實。感謝您的注意。 – sjrd

Scala.js門面的NPM項目

回答

相關問題