Improve loader widget position
This commit is contained in:
Ivan Danyliuk
parent
928a7dd3e8
commit
9d0ec2d0f1
91
main.go
91
main.go
|
|
@ -3,17 +3,11 @@ package main
|
|||
import (
|
||||
"bytes"
|
||||
"runtime"
|
||||
"time"
|
||||
|
||||
"github.com/divan/graphx/formats"
|
||||
"github.com/divan/graphx/layout"
|
||||
"github.com/gopherjs/gopherjs/js"
|
||||
"github.com/gopherjs/vecty"
|
||||
"github.com/gopherjs/vecty/elem"
|
||||
"github.com/gopherjs/vecty/event"
|
||||
"github.com/lngramos/three"
|
||||
"github.com/status-im/whispervis/widgets"
|
||||
"github.com/vecty/vthree"
|
||||
)
|
||||
|
||||
func main() {
|
||||
|
|
@ -26,8 +20,9 @@ func main() {
|
|||
l := layout.NewAuto(data)
|
||||
steps := 50
|
||||
page := &Page{
|
||||
layout: l,
|
||||
loader: widgets.NewLoader(steps),
|
||||
layout: l,
|
||||
loader: widgets.NewLoader(steps),
|
||||
forceEditor: widgets.NewForceEditor(),
|
||||
}
|
||||
|
||||
vecty.SetTitle("Whisper Simulation")
|
||||
|
|
@ -36,7 +31,6 @@ func main() {
|
|||
vecty.RenderBody(page)
|
||||
|
||||
go func() {
|
||||
time.Sleep(1 * time.Second)
|
||||
for i := 0; i < steps; i++ {
|
||||
l.UpdatePositions()
|
||||
page.loader.Inc()
|
||||
|
|
@ -46,82 +40,3 @@ func main() {
|
|||
vecty.Rerender(page)
|
||||
}()
|
||||
}
|
||||
|
||||
// Page is our main page component.
|
||||
type Page struct {
|
||||
vecty.Core
|
||||
|
||||
layout *layout.Layout
|
||||
|
||||
scene *three.Scene
|
||||
camera three.PerspectiveCamera
|
||||
renderer *three.WebGLRenderer
|
||||
graph *three.Group
|
||||
nodes *three.Group
|
||||
edges *three.Group
|
||||
controls TrackBallControl
|
||||
|
||||
autoRotate bool
|
||||
|
||||
loaded bool
|
||||
loader *widgets.Loader
|
||||
}
|
||||
|
||||
// Render implements the vecty.Component interface.
|
||||
func (p *Page) Render() vecty.ComponentOrHTML {
|
||||
return elem.Body(
|
||||
elem.Div(
|
||||
vecty.Markup(vecty.Class("pure-g")),
|
||||
|
||||
elem.Div(
|
||||
vecty.Markup(vecty.Class("pure-u-1-5")),
|
||||
elem.Heading1(vecty.Text("Whisper Message Propagation")),
|
||||
elem.Paragraph(vecty.Text("This visualization represents message propagation in the p2p network.")),
|
||||
),
|
||||
elem.Div(
|
||||
vecty.Markup(vecty.Class("pure-u-4-5")),
|
||||
vecty.If(p.loaded,
|
||||
vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||
Init: p.init,
|
||||
Shutdown: p.shutdown,
|
||||
}),
|
||||
),
|
||||
vecty.If(!p.loaded, p.loader),
|
||||
),
|
||||
),
|
||||
vecty.Markup(
|
||||
event.KeyDown(p.KeyListener),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func (p *Page) renderWebGLCanvas() vecty.Component {
|
||||
return vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||
Init: p.init,
|
||||
Shutdown: p.shutdown,
|
||||
})
|
||||
}
|
||||
|
||||
func (p *Page) init(renderer *three.WebGLRenderer) {
|
||||
windowWidth := js.Global.Get("innerWidth").Float()*80/100 - 20
|
||||
windowHeight := js.Global.Get("innerHeight").Float() - 20
|
||||
|
||||
p.renderer = renderer
|
||||
p.renderer.SetSize(windowWidth, windowHeight, true)
|
||||
|
||||
devicePixelRatio := js.Global.Get("devicePixelRatio").Float()
|
||||
p.renderer.SetPixelRatio(devicePixelRatio)
|
||||
|
||||
p.InitScene(windowWidth, windowHeight)
|
||||
|
||||
p.CreateObjects()
|
||||
|
||||
p.animate()
|
||||
}
|
||||
|
||||
func (p *Page) shutdown(renderer *three.WebGLRenderer) {
|
||||
p.scene = nil
|
||||
p.camera = three.PerspectiveCamera{}
|
||||
p.renderer = nil
|
||||
p.graph, p.nodes, p.edges = nil, nil, nil
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
package main
|
||||
|
||||
import (
|
||||
"github.com/divan/graphx/layout"
|
||||
"github.com/gopherjs/gopherjs/js"
|
||||
"github.com/gopherjs/vecty"
|
||||
"github.com/gopherjs/vecty/elem"
|
||||
"github.com/gopherjs/vecty/event"
|
||||
"github.com/lngramos/three"
|
||||
"github.com/status-im/whispervis/widgets"
|
||||
"github.com/vecty/vthree"
|
||||
)
|
||||
|
||||
// Page is our main page component.
|
||||
type Page struct {
|
||||
vecty.Core
|
||||
|
||||
layout *layout.Layout
|
||||
|
||||
scene *three.Scene
|
||||
camera three.PerspectiveCamera
|
||||
renderer *three.WebGLRenderer
|
||||
graph *three.Group
|
||||
nodes *three.Group
|
||||
edges *three.Group
|
||||
controls TrackBallControl
|
||||
|
||||
autoRotate bool
|
||||
|
||||
loaded bool
|
||||
loader *widgets.Loader
|
||||
forceEditor *widgets.ForceEditor
|
||||
}
|
||||
|
||||
// Render implements the vecty.Component interface.
|
||||
func (p *Page) Render() vecty.ComponentOrHTML {
|
||||
return elem.Body(
|
||||
elem.Div(
|
||||
vecty.Markup(
|
||||
vecty.Class("pure-g"),
|
||||
vecty.Style("height", "100%"),
|
||||
),
|
||||
elem.Div(
|
||||
vecty.Markup(vecty.Class("pure-u-1-5")),
|
||||
elem.Heading1(vecty.Text("Whisper Message Propagation")),
|
||||
elem.Paragraph(vecty.Text("This visualization represents message propagation in the p2p network.")),
|
||||
p.forceEditor,
|
||||
),
|
||||
elem.Div(
|
||||
vecty.Markup(vecty.Class("pure-u-4-5")),
|
||||
vecty.If(p.loaded,
|
||||
vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||
Init: p.init,
|
||||
Shutdown: p.shutdown,
|
||||
}),
|
||||
),
|
||||
vecty.If(!p.loaded, p.loader),
|
||||
),
|
||||
),
|
||||
vecty.Markup(
|
||||
event.KeyDown(p.KeyListener),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
func (p *Page) renderWebGLCanvas() vecty.Component {
|
||||
return vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||
Init: p.init,
|
||||
Shutdown: p.shutdown,
|
||||
})
|
||||
}
|
||||
|
||||
func (p *Page) init(renderer *three.WebGLRenderer) {
|
||||
windowWidth := js.Global.Get("innerWidth").Float()*80/100 - 20
|
||||
windowHeight := js.Global.Get("innerHeight").Float() - 20
|
||||
|
||||
p.renderer = renderer
|
||||
p.renderer.SetSize(windowWidth, windowHeight, true)
|
||||
|
||||
devicePixelRatio := js.Global.Get("devicePixelRatio").Float()
|
||||
p.renderer.SetPixelRatio(devicePixelRatio)
|
||||
|
||||
p.InitScene(windowWidth, windowHeight)
|
||||
|
||||
p.CreateObjects()
|
||||
|
||||
p.animate()
|
||||
}
|
||||
|
||||
func (p *Page) shutdown(renderer *three.WebGLRenderer) {
|
||||
p.scene = nil
|
||||
p.camera = three.PerspectiveCamera{}
|
||||
p.renderer = nil
|
||||
p.graph, p.nodes, p.edges = nil, nil, nil
|
||||
}
|
||||
|
|
@ -15,16 +15,16 @@ type Loader struct {
|
|||
}
|
||||
|
||||
func (l *Loader) Render() vecty.ComponentOrHTML {
|
||||
var text string
|
||||
progress := l.Progress()
|
||||
if progress > 99.9 {
|
||||
text = "Completed"
|
||||
} else {
|
||||
text = fmt.Sprintf("Loading %.1f%%...", progress)
|
||||
fmt.Println("Loader.Render()", text, progress)
|
||||
}
|
||||
text := l.text()
|
||||
return elem.Div(
|
||||
elem.Heading1(vecty.Text(text)),
|
||||
vecty.Markup(
|
||||
vecty.Style("text-align", "center"),
|
||||
vecty.Style("position", "relative"),
|
||||
vecty.Style("top", "50%"),
|
||||
),
|
||||
elem.Heading1(
|
||||
vecty.Text(text),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -44,3 +44,15 @@ func (l *Loader) Progress() float64 {
|
|||
fmt.Println("progress", 100*float64(l.current)/float64(l.steps))
|
||||
return 100 * float64(l.current) / float64(l.steps)
|
||||
}
|
||||
|
||||
// Text returns formatted string to display.
|
||||
func (l *Loader) text() string {
|
||||
var text string
|
||||
progress := l.Progress()
|
||||
if progress > 99.9 {
|
||||
text = "Completed"
|
||||
} else {
|
||||
text = fmt.Sprintf("Loading %.0f%%...", progress)
|
||||
}
|
||||
return text
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue