Scala.js 외관

Question

내가 Scala.js 주위에 내 머리를 정리하려고하고이 멋진 라이브러리에 대한 아주 기본적인 외관을 작성하려합니다 : https://github.com/anvaka/VivaGraphJS

나는 작은 시작하고 내 방식을 작동하고 싶어 , 아아, 운이 없다.

는 기본적으로 나는 지금 Scala.js이를 구축하려는 : 내 메인 클래스에서

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 
} 

:이

이제 처음 외관을 잘 렌더링

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

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의 사업부는 내가 당신을 절약하는 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 
} 

렌더러가 여전히 잘못, 없어야합니다 : gnaaah :(...

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

그래서 "새로운",하지만 난 그것을 객체 할 수 없습니다

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 
} 

를하지만 자동 생성 된 코드는 물론 다음과 같습니다 : I는 다음과 같이, 그것을 물론 객체를 만들 수 있습니다

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

이 올바른지, Scala.js에서 우리는 다음과 같은 기본 클래스와 객체를 정의하는 것입니다.

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