mirror of
https://github.com/status-im/whispervis.git
synced 2025-02-12 21:16:27 +00:00
Initial commit
This commit is contained in:
Ivan Danyliuk
commit
7d860ad225
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
whispervis
|
||||||
|
node_modules/
|
||||||
|
network.json
|
||||||
|
data.json
|
||||||
|
propagation.json
|
||||||
45
main.go
Normal file
45
main.go
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"flag"
|
||||||
|
"log"
|
||||||
|
|
||||||
|
"github.com/divan/graph-experiments/graph"
|
||||||
|
"github.com/divan/graph-experiments/layout"
|
||||||
|
)
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
iterations := flag.Int("i", 600, "Graph layout iterations to run (0 = auto, buggy)")
|
||||||
|
flag.Parse()
|
||||||
|
|
||||||
|
data, err := graph.NewGraphFromJSON("network.json")
|
||||||
|
if err != nil {
|
||||||
|
log.Fatal(err)
|
||||||
|
}
|
||||||
|
log.Printf("Loaded graph: %d nodes, %d links\n", len(data.Nodes()), len(data.Links()))
|
||||||
|
|
||||||
|
plog, err := LoadPropagationData("propagation.json")
|
||||||
|
if err != nil {
|
||||||
|
log.Fatal(err)
|
||||||
|
}
|
||||||
|
log.Printf("Loaded propagation data: %d timestamps\n", len(plog.Timestamps))
|
||||||
|
|
||||||
|
log.Printf("Initializing layout...")
|
||||||
|
repelling := layout.NewGravityForce(-100.0, layout.BarneHutMethod)
|
||||||
|
springs := layout.NewSpringForce(0.01, 5.0, layout.ForEachLink)
|
||||||
|
drag := layout.NewDragForce(0.4, layout.ForEachNode)
|
||||||
|
layout3D := layout.New(data, repelling, springs, drag)
|
||||||
|
|
||||||
|
ws := NewWSServer(layout3D)
|
||||||
|
if *iterations == 0 {
|
||||||
|
ws.layout.Calculate()
|
||||||
|
} else {
|
||||||
|
ws.layout.CalculateN(*iterations)
|
||||||
|
}
|
||||||
|
ws.updateGraph(data)
|
||||||
|
ws.updatePropagationData(plog)
|
||||||
|
|
||||||
|
log.Printf("Starting web server...")
|
||||||
|
startWeb(ws)
|
||||||
|
select {}
|
||||||
|
}
|
||||||
30
propagation.go
Normal file
30
propagation.go
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"encoding/json"
|
||||||
|
"os"
|
||||||
|
)
|
||||||
|
|
||||||
|
// PropagationLog represnts log of p2p message propagation
|
||||||
|
// with relative timestamps (starting from T0).
|
||||||
|
type PropagationLog struct {
|
||||||
|
Timestamps []int // timestamps in milliseconds starting from T0
|
||||||
|
Indices [][]int // indices of links for each step, len should be equal to len of Timestamps field
|
||||||
|
Nodes [][]int // indices of nodes involved
|
||||||
|
}
|
||||||
|
|
||||||
|
func LoadPropagationData(filename string) (*PropagationLog, error) {
|
||||||
|
fd, err := os.Open(filename)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
defer fd.Close()
|
||||||
|
|
||||||
|
var plog PropagationLog
|
||||||
|
err = json.NewDecoder(fd).Decode(&plog)
|
||||||
|
if err != nil {
|
||||||
|
return nil, err
|
||||||
|
}
|
||||||
|
|
||||||
|
return &plog, nil
|
||||||
|
}
|
||||||
53
web.go
Normal file
53
web.go
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
//go:generate browserify web/index.js web/js/ws.js -o web/bundle.js
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"fmt"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
"os/exec"
|
||||||
|
"runtime"
|
||||||
|
)
|
||||||
|
|
||||||
|
func startWeb(ws *WSServer) {
|
||||||
|
port := ":20002"
|
||||||
|
go func() {
|
||||||
|
fs := http.FileServer(http.Dir("web"))
|
||||||
|
http.Handle("/", noCacheMiddleware(fs))
|
||||||
|
http.HandleFunc("/ws", ws.Handle)
|
||||||
|
log.Fatal(http.ListenAndServe(port, nil))
|
||||||
|
}()
|
||||||
|
url := "http://localhost" + port
|
||||||
|
fmt.Println("Please go to this url:", url)
|
||||||
|
/*
|
||||||
|
time.Sleep(1 * time.Second)
|
||||||
|
startBrowser(url)
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
// startBrowser tries to open the URL in a browser
|
||||||
|
// and reports whether it succeeds.
|
||||||
|
//
|
||||||
|
// Orig. code: golang.org/x/tools/cmd/cover/html.go
|
||||||
|
func startBrowser(url string) error {
|
||||||
|
// try to start the browser
|
||||||
|
var args []string
|
||||||
|
switch runtime.GOOS {
|
||||||
|
case "darwin":
|
||||||
|
args = []string{"open"}
|
||||||
|
case "windows":
|
||||||
|
args = []string{"cmd", "/c", "start"}
|
||||||
|
default:
|
||||||
|
args = []string{"xdg-open"}
|
||||||
|
}
|
||||||
|
cmd := exec.Command(args[0], append(args[1:], url)...)
|
||||||
|
fmt.Println("If browser window didn't appear, please go to this url:", url)
|
||||||
|
return cmd.Start()
|
||||||
|
}
|
||||||
|
|
||||||
|
func noCacheMiddleware(h http.Handler) http.Handler {
|
||||||
|
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Add("Cache-Control", "max-age=0, no-cache")
|
||||||
|
h.ServeHTTP(w, r)
|
||||||
|
})
|
||||||
|
}
|
||||||
5712
web/bundle.js
Normal file
5712
web/bundle.js
Normal file
File diff suppressed because one or more lines are too long
11
web/css/controls.css
Normal file
11
web/css/controls.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
body {
|
||||||
|
background: #c0c0c0 -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)) no-repeat;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
height: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: "Helvetica Neue";
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
11
web/css/pure-min.css
vendored
Normal file
11
web/css/pure-min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
19
web/data/data.js
Normal file
19
web/data/data.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
var graphData = {
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"id": "Foo",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "Bar",
|
||||||
|
"group": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"source": "Foo",
|
||||||
|
"target": "Bar",
|
||||||
|
"value": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
1
web/data/data/labels.json
Normal file
1
web/data/data/labels.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
["Foo","Bar"]
|
||||||
BIN
web/data/data/links.bin
Normal file
BIN
web/data/data/links.bin
Normal file
Binary file not shown.
1
web/data/data/meta.json
Normal file
1
web/data/data/meta.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"date":1512329825919,"nodeCount":2,"linkCount":1,"nodeFile":"data/labels.json","linkFile":"data/links.bin","version":"1.0.1"}
|
||||||
BIN
web/data/data/positions.bin
Normal file
BIN
web/data/data/positions.bin
Normal file
Binary file not shown.
299
web/data/data_orig.json
Normal file
299
web/data/data_orig.json
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"id": "\"Back()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Element\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Front()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Init()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Len()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"List\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"MoveAfter()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"MoveBefore()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"MoveToBack()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"MoveToFront()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"New()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Next()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Prev()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"PushBack()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"PushBackList()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"PushFront()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"PushFrontList()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"Remove\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"insert()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"insertValue()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"lazyInit()\"",
|
||||||
|
"group": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "\"remove()\"",
|
||||||
|
"group": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"source": "\"Element\"",
|
||||||
|
"target": "\"Element\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"Element\"",
|
||||||
|
"target": "\"Next()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"Element\"",
|
||||||
|
"target": "\"Prev()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Back()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Element\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Front()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Init()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Len()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"MoveAfter()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"MoveBefore()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"MoveToBack()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"MoveToFront()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"PushBack()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"PushBackList()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"PushFront()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"PushFrontList()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"List\"",
|
||||||
|
"target": "\"Remove\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveAfter()\"",
|
||||||
|
"target": "\"insert()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveAfter()\"",
|
||||||
|
"target": "\"remove()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveBefore()\"",
|
||||||
|
"target": "\"insert()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveBefore()\"",
|
||||||
|
"target": "\"remove()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveToBack()\"",
|
||||||
|
"target": "\"insert()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveToBack()\"",
|
||||||
|
"target": "\"remove()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveToFront()\"",
|
||||||
|
"target": "\"insert()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"MoveToFront()\"",
|
||||||
|
"target": "\"remove()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"New()\"",
|
||||||
|
"target": "\"Init()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBack()\"",
|
||||||
|
"target": "\"insertValue()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBack()\"",
|
||||||
|
"target": "\"lazyInit()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBackList()\"",
|
||||||
|
"target": "\"Front()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBackList()\"",
|
||||||
|
"target": "\"Len()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBackList()\"",
|
||||||
|
"target": "\"insertValue()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushBackList()\"",
|
||||||
|
"target": "\"lazyInit()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFront()\"",
|
||||||
|
"target": "\"insertValue()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFront()\"",
|
||||||
|
"target": "\"lazyInit()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFrontList()\"",
|
||||||
|
"target": "\"Back()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFrontList()\"",
|
||||||
|
"target": "\"Len()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFrontList()\"",
|
||||||
|
"target": "\"insertValue()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"PushFrontList()\"",
|
||||||
|
"target": "\"lazyInit()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"Remove\"",
|
||||||
|
"target": "\"remove()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"insertValue()\"",
|
||||||
|
"target": "\"insert()\"",
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "\"lazyInit()\"",
|
||||||
|
"target": "\"Init()\"",
|
||||||
|
"value": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
54
web/index.html
Normal file
54
web/index.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Status Whisper network graph</title>
|
||||||
|
<style>
|
||||||
|
body { margin: 0; }
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" href="css/controls.css" type="text/css">
|
||||||
|
<link rel="stylesheet" href="css/pure-min.css" type="text/css">
|
||||||
|
<style>
|
||||||
|
.button-large {
|
||||||
|
font-size: 100%;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-success {
|
||||||
|
background: rgb(28, 184, 65);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
color: white;
|
||||||
|
background: rgb(66, 184, 221);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-error {
|
||||||
|
background: rgb(202, 60, 60);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="pure-g">
|
||||||
|
<div class="pure-u-1-5">
|
||||||
|
<h1>Status Whisper Network Graph</h1>
|
||||||
|
<p>This graph represents Status cluster and connected peers, as
|
||||||
|
reported by instrumented nodes and Status app with metrics option
|
||||||
|
enabled.</p>
|
||||||
|
<div>
|
||||||
|
<button class="pure-button pure-button-primary" id="replayButton">Replay</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-4-5">
|
||||||
|
<canvas id="preview"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="node_modules/three/build/three.min.js"></script>
|
||||||
|
<script src="js/controls/TrackballControls.js"></script>
|
||||||
|
<script src="js/controls/FlyControls.js"></script>
|
||||||
|
|
||||||
|
<script src="bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
239
web/index.js
Normal file
239
web/index.js
Normal file
@ -0,0 +1,239 @@
|
|||||||
|
var { colorStr2Hex, autoColorNodes } = require('./js/colors.js');
|
||||||
|
require('./js/keys.js');
|
||||||
|
var accessorFn = require('./js/shitty_hacks.js');
|
||||||
|
var { animatePropagation, restoreTimeout, updateRestoreTimeout, delayFactor, updateDelayFactor } = require('./js/animation.js');
|
||||||
|
var { NewEthereumGeometry } = require('./js/ethereum.js');
|
||||||
|
|
||||||
|
var Stats = require('stats-js');
|
||||||
|
const dat = require('dat.gui');
|
||||||
|
|
||||||
|
|
||||||
|
// WebGL
|
||||||
|
let canvas = document.getElementById("preview");
|
||||||
|
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
|
||||||
|
|
||||||
|
var graphData, plog;
|
||||||
|
var positions = Array();
|
||||||
|
|
||||||
|
function setGraphData(data) {
|
||||||
|
graphData = data;
|
||||||
|
|
||||||
|
initGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPropagation(plogData) {
|
||||||
|
plog = plogData;
|
||||||
|
animatePropagation(nodesGroup, linksGroup, plogData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePositions(data) {
|
||||||
|
positions = data;
|
||||||
|
|
||||||
|
redrawGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { updatePositions, setGraphData, setPropagation };
|
||||||
|
|
||||||
|
// Setup scene
|
||||||
|
const scene = new THREE.Scene();
|
||||||
|
scene.background = new THREE.Color(0x000011);
|
||||||
|
|
||||||
|
// Add lights
|
||||||
|
scene.add(new THREE.AmbientLight(0xbbbbbb));
|
||||||
|
scene.add(new THREE.DirectionalLight(0xffffff, 0.6));
|
||||||
|
|
||||||
|
var linksGroup = new THREE.Group();
|
||||||
|
scene.add(linksGroup);
|
||||||
|
var nodesGroup = new THREE.Group();
|
||||||
|
scene.add(nodesGroup);
|
||||||
|
|
||||||
|
// Setup camera
|
||||||
|
var camera = new THREE.PerspectiveCamera();
|
||||||
|
camera.far = 20000;
|
||||||
|
|
||||||
|
var tbControls = new THREE.TrackballControls(camera, renderer.domElement);
|
||||||
|
var flyControls = new THREE.FlyControls(camera, renderer.domElement);
|
||||||
|
|
||||||
|
var animate = function () {
|
||||||
|
// frame cycle
|
||||||
|
tbControls.update();
|
||||||
|
flyControls.update(1);
|
||||||
|
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
stats.update();
|
||||||
|
requestAnimationFrame( animate );
|
||||||
|
};
|
||||||
|
|
||||||
|
var width = window.innerWidth * 80 / 100 - 20;
|
||||||
|
var height = window.innerHeight - 20;
|
||||||
|
var nodeRelSize = 1;
|
||||||
|
var nodeResolution = 8;
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
var stats = new Stats();
|
||||||
|
document.body.appendChild( stats.domElement );
|
||||||
|
stats.domElement.style.position = 'absolute';
|
||||||
|
stats.domElement.style.right = '15px';
|
||||||
|
stats.domElement.style.bottom = '20px';
|
||||||
|
|
||||||
|
// Dat GUI
|
||||||
|
const gui = new dat.GUI();
|
||||||
|
var f1 = gui.addFolder('Animation');
|
||||||
|
var restoreCtl = f1.add({ restoreTimeout: restoreTimeout }, 'restoreTimeout').name('Restore timeout');
|
||||||
|
restoreCtl.onFinishChange(function(value) {
|
||||||
|
updateRestoreTimeout(value);
|
||||||
|
});
|
||||||
|
var factorCtl = f1.add({ delayFactor: delayFactor }, 'delayFactor').name('Delay factor');
|
||||||
|
factorCtl.onFinishChange(function(value) {
|
||||||
|
updateDelayFactor(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
var initGraph = function () {
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
// parse links
|
||||||
|
graphData.links.forEach(link => {
|
||||||
|
link.source = link["source"];
|
||||||
|
link.target = link["target"];
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add WebGL objects
|
||||||
|
// Clear the place
|
||||||
|
while (nodesGroup.children.length) {
|
||||||
|
nodesGroup.remove(nodesGroup.children[0])
|
||||||
|
}
|
||||||
|
while (linksGroup.children.length) {
|
||||||
|
linksGroup.remove(linksGroup.children[0])
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render nodes
|
||||||
|
const nameAccessor = accessorFn("name");
|
||||||
|
const valAccessor = accessorFn("weight");
|
||||||
|
const colorAccessor = accessorFn("color");
|
||||||
|
let sphereGeometries = {}; // indexed by node value
|
||||||
|
let sphereMaterials = {}; // indexed by color
|
||||||
|
|
||||||
|
autoColorNodes(graphData.nodes);
|
||||||
|
graphData.nodes.forEach((node, idx) => {
|
||||||
|
let val = valAccessor(node) || 1;
|
||||||
|
if (!sphereGeometries.hasOwnProperty(val)) {
|
||||||
|
sphereGeometries[val] = NewEthereumGeometry(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
const color = colorAccessor(node);
|
||||||
|
if (!sphereMaterials.hasOwnProperty(color)) {
|
||||||
|
sphereMaterials[color] = new THREE.MeshStandardMaterial({
|
||||||
|
color: colorStr2Hex(color || '#00ff00'),
|
||||||
|
transparent: false,
|
||||||
|
opacity: 0.75
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const sphere = new THREE.Mesh(sphereGeometries[val], sphereMaterials[color]);
|
||||||
|
|
||||||
|
sphere.name = nameAccessor(node); // Add label
|
||||||
|
sphere.__data = node; // Attach node data
|
||||||
|
|
||||||
|
nodesGroup.add(node.__sphere = sphere);
|
||||||
|
if (positions[idx] !== undefined) {
|
||||||
|
sphere.position.set(positions[idx].x, positions[idx].y, positions[idx].z);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const linkColorAccessor = accessorFn("color");
|
||||||
|
let lineMaterials = {}; // indexed by color
|
||||||
|
console.log("Adding links", graphData.links.lengh);
|
||||||
|
graphData.links.forEach(link => {
|
||||||
|
const color = linkColorAccessor(link);
|
||||||
|
if (!lineMaterials.hasOwnProperty(color)) {
|
||||||
|
lineMaterials[color] = new THREE.LineBasicMaterial({
|
||||||
|
color: /*colorStr2Hex(color || '#f0f0f0')*/ '#f0f0f0',
|
||||||
|
transparent: true,
|
||||||
|
opacity: 0.4,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const geometry = new THREE.BufferGeometry();
|
||||||
|
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
|
||||||
|
const lineMaterial = lineMaterials[color];
|
||||||
|
const line = new THREE.Line(geometry, lineMaterial);
|
||||||
|
|
||||||
|
line.renderOrder = 10; // Prevent visual glitches of dark lines on top of spheres by rendering them last
|
||||||
|
|
||||||
|
linksGroup.add(link.__line = line);
|
||||||
|
});
|
||||||
|
|
||||||
|
// correct camera position
|
||||||
|
if (camera.position.x === 0 && camera.position.y === 0) {
|
||||||
|
// If camera still in default position (not user modified)
|
||||||
|
camera.lookAt(nodesGroup.position);
|
||||||
|
camera.position.z = Math.cbrt(graphData.nodes.length) * 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
if (width && height) {
|
||||||
|
renderer.setSize(width, height);
|
||||||
|
camera.aspect = width/height;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var redrawGraph = function () {
|
||||||
|
graphData.nodes.forEach((node, idx) => {
|
||||||
|
const sphere = node.__sphere;
|
||||||
|
if (!sphere) return;
|
||||||
|
|
||||||
|
sphere.position.x = positions[idx].x;
|
||||||
|
sphere.position.y = positions[idx].y || 0;
|
||||||
|
sphere.position.z = positions[idx].z || 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
graphData.links.forEach(link => {
|
||||||
|
const line = link.__line;
|
||||||
|
if (!line) return;
|
||||||
|
|
||||||
|
linePos = line.geometry.attributes.position;
|
||||||
|
|
||||||
|
// TODO: move this index into map/cache or even into original graph data
|
||||||
|
let start, end;
|
||||||
|
for (let i = 0; i < graphData.nodes.length; i++) {
|
||||||
|
if (graphData.nodes[i].id === link.source) {
|
||||||
|
start = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < graphData.nodes.length; i++) {
|
||||||
|
if (graphData.nodes[i].id === link["target"]) {
|
||||||
|
end = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
linePos.array[0] = positions[start].x;
|
||||||
|
linePos.array[1] = positions[start].y || 0;
|
||||||
|
linePos.array[2] = positions[start].z || 0;
|
||||||
|
linePos.array[3] = positions[end].x;
|
||||||
|
linePos.array[4] = positions[end].y || 0;
|
||||||
|
linePos.array[5] = positions[end].z || 0;
|
||||||
|
|
||||||
|
linePos.needsUpdate = true;
|
||||||
|
line.geometry.computeBoundingSphere();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// replay restarts propagation animation.
|
||||||
|
function replay() {
|
||||||
|
console.log(linksGroup, plog);
|
||||||
|
animatePropagation(nodesGroup, linksGroup, plog);
|
||||||
|
}
|
||||||
|
// js functions after browserify cannot be accessed from html,
|
||||||
|
// so instead of using onclick="replay()" we need to attach listener
|
||||||
|
// here.
|
||||||
|
// Did I already say that whole frontend ecosystem is a one giant
|
||||||
|
// museum of hacks for hacks on top of hacks?
|
||||||
|
var replayButton = document.getElementById('replayButton');
|
||||||
|
replayButton.addEventListener('click', replay);
|
||||||
|
|
||||||
|
animate();
|
||||||
79
web/js/animation.js
Normal file
79
web/js/animation.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
var gradient = require('d3-scale-chromatic').interpolateCool;
|
||||||
|
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
let mat = new THREE.LineBasicMaterial({
|
||||||
|
color: '#cc0000',
|
||||||
|
transparent: true,
|
||||||
|
opacity: 0.7
|
||||||
|
});
|
||||||
|
|
||||||
|
// Params
|
||||||
|
var restoreTimeout = 250; // ms
|
||||||
|
function updateRestoreTimeout(value) {
|
||||||
|
console.log("Updating restore timeout to ", value);
|
||||||
|
restoreTimeout = value;
|
||||||
|
}
|
||||||
|
var delayFactor = 3; // multiplication factor for blink timeout
|
||||||
|
function updateDelayFactor(value) {
|
||||||
|
delayFactor = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function blinkLink(links, indices) {
|
||||||
|
indices.forEach(idx => {
|
||||||
|
if (links.children[idx].material === mat) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let oldMat = links.children[idx].material;
|
||||||
|
links.children[idx].material = mat;
|
||||||
|
|
||||||
|
console.log("Blinking with restore timeout", restoreTimeout);
|
||||||
|
setTimeout(function() {
|
||||||
|
links.children[idx].material = oldMat;
|
||||||
|
}, restoreTimeout);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var nodeCounters = {};
|
||||||
|
var maxCounter = 0;
|
||||||
|
var nodeMaterials = {};
|
||||||
|
|
||||||
|
// blinkNodes updates nodes color increasing its temperature
|
||||||
|
// in a heatmap style
|
||||||
|
function blinkNodes(nodes, indices) {
|
||||||
|
indices.forEach(idx => {
|
||||||
|
nodeCounters[idx] = nodeCounters[idx] ? nodeCounters[idx]+1 : 1;
|
||||||
|
if (nodeCounters[idx] > maxCounter) {
|
||||||
|
maxCounter = nodeCounters[idx];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// TODO: FIXME: how to make simple map counter without this fucking bullshit?
|
||||||
|
Object.keys(nodeCounters).forEach(idx => {
|
||||||
|
let c = nodeCounters[idx];
|
||||||
|
let scale = c / maxCounter;
|
||||||
|
let color = gradient(scale);
|
||||||
|
if (nodeMaterials[color] === undefined) {
|
||||||
|
nodeMaterials[color] = new THREE.MeshStandardMaterial({color: new THREE.Color(color)});
|
||||||
|
}
|
||||||
|
nodes.children[idx].material = nodeMaterials[color];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function animatePropagation(nodes, links, plog) {
|
||||||
|
maxCounter = 0;
|
||||||
|
nodeCounters = {};
|
||||||
|
plog.Timestamps.forEach((ts, idx) => {
|
||||||
|
setTimeout(function() {
|
||||||
|
blinkLink(links, plog.Indices[idx]);
|
||||||
|
}, ts*delayFactor);
|
||||||
|
setTimeout(function() {
|
||||||
|
blinkNodes(nodes, plog.Nodes[idx]);
|
||||||
|
}, ts*delayFactor);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { animatePropagation,
|
||||||
|
restoreTimeout, updateRestoreTimeout,
|
||||||
|
delayFactor, updateDelayFactor }
|
||||||
20
web/js/colors.js
Normal file
20
web/js/colors.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
var schemePaired = require('d3-scale-chromatic').schemePaired;
|
||||||
|
var tinyColor = require('tinycolor2');
|
||||||
|
|
||||||
|
const colorStr2Hex = str => isNaN(str) ? parseInt(tinyColor(str).toHex(), 16) : str;
|
||||||
|
|
||||||
|
function autoColorNodes(nodes) {
|
||||||
|
const colors = schemePaired; // Paired color set from color brewer
|
||||||
|
|
||||||
|
const uncoloredNodes = nodes.filter(node => !node.color);
|
||||||
|
const nodeGroups = {};
|
||||||
|
|
||||||
|
uncoloredNodes.forEach(node => { nodeGroups[node["group"]] = null });
|
||||||
|
Object.keys(nodeGroups).forEach((group, idx) => { nodeGroups[group] = idx });
|
||||||
|
|
||||||
|
uncoloredNodes.forEach(node => {
|
||||||
|
node.color = colorStr2Hex(colors[nodeGroups[node["group"]] % colors.length]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { colorStr2Hex, autoColorNodes };
|
||||||
292
web/js/controls/FlyControls.js
Normal file
292
web/js/controls/FlyControls.js
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
/**
|
||||||
|
* @author James Baicoianu / http://www.baicoianu.com/
|
||||||
|
*/
|
||||||
|
|
||||||
|
THREE.FlyControls = function ( object, domElement ) {
|
||||||
|
|
||||||
|
this.object = object;
|
||||||
|
|
||||||
|
this.domElement = ( domElement !== undefined ) ? domElement : document;
|
||||||
|
if ( domElement ) this.domElement.setAttribute( 'tabindex', - 1 );
|
||||||
|
|
||||||
|
// API
|
||||||
|
|
||||||
|
this.movementSpeed = 1.0;
|
||||||
|
this.rollSpeed = 0.005;
|
||||||
|
|
||||||
|
this.dragToLook = false;
|
||||||
|
this.autoForward = false;
|
||||||
|
|
||||||
|
// disable default target object behavior
|
||||||
|
|
||||||
|
// internals
|
||||||
|
|
||||||
|
this.tmpQuaternion = new THREE.Quaternion();
|
||||||
|
|
||||||
|
this.mouseStatus = 0;
|
||||||
|
|
||||||
|
this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
|
||||||
|
this.moveVector = new THREE.Vector3( 0, 0, 0 );
|
||||||
|
this.rotationVector = new THREE.Vector3( 0, 0, 0 );
|
||||||
|
|
||||||
|
this.handleEvent = function ( event ) {
|
||||||
|
|
||||||
|
if ( typeof this[ event.type ] == 'function' ) {
|
||||||
|
|
||||||
|
this[ event.type ]( event );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.keydown = function( event ) {
|
||||||
|
|
||||||
|
if ( event.altKey ) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//event.preventDefault();
|
||||||
|
|
||||||
|
switch ( event.keyCode ) {
|
||||||
|
|
||||||
|
case 16: /* shift */ this.movementSpeedMultiplier = .1; break;
|
||||||
|
|
||||||
|
case 87: /*W*/ this.moveState.forward = 1; break;
|
||||||
|
case 83: /*S*/ this.moveState.back = 1; break;
|
||||||
|
|
||||||
|
case 65: /*A*/ this.moveState.left = 1; break;
|
||||||
|
case 68: /*D*/ this.moveState.right = 1; break;
|
||||||
|
|
||||||
|
case 82: /*R*/ this.moveState.up = 1; break;
|
||||||
|
case 70: /*F*/ this.moveState.down = 1; break;
|
||||||
|
|
||||||
|
case 38: /*up*/ this.moveState.pitchUp = 1; break;
|
||||||
|
case 40: /*down*/ this.moveState.pitchDown = 1; break;
|
||||||
|
|
||||||
|
case 37: /*left*/ this.moveState.yawLeft = 1; break;
|
||||||
|
case 39: /*right*/ this.moveState.yawRight = 1; break;
|
||||||
|
|
||||||
|
case 81: /*Q*/ this.moveState.rollLeft = 1; break;
|
||||||
|
case 69: /*E*/ this.moveState.rollRight = 1; break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMovementVector();
|
||||||
|
this.updateRotationVector();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.keyup = function( event ) {
|
||||||
|
|
||||||
|
switch ( event.keyCode ) {
|
||||||
|
|
||||||
|
case 16: /* shift */ this.movementSpeedMultiplier = 1; break;
|
||||||
|
|
||||||
|
case 87: /*W*/ this.moveState.forward = 0; break;
|
||||||
|
case 83: /*S*/ this.moveState.back = 0; break;
|
||||||
|
|
||||||
|
case 65: /*A*/ this.moveState.left = 0; break;
|
||||||
|
case 68: /*D*/ this.moveState.right = 0; break;
|
||||||
|
|
||||||
|
case 82: /*R*/ this.moveState.up = 0; break;
|
||||||
|
case 70: /*F*/ this.moveState.down = 0; break;
|
||||||
|
|
||||||
|
case 38: /*up*/ this.moveState.pitchUp = 0; break;
|
||||||
|
case 40: /*down*/ this.moveState.pitchDown = 0; break;
|
||||||
|
|
||||||
|
case 37: /*left*/ this.moveState.yawLeft = 0; break;
|
||||||
|
case 39: /*right*/ this.moveState.yawRight = 0; break;
|
||||||
|
|
||||||
|
case 81: /*Q*/ this.moveState.rollLeft = 0; break;
|
||||||
|
case 69: /*E*/ this.moveState.rollRight = 0; break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMovementVector();
|
||||||
|
this.updateRotationVector();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.mousedown = function( event ) {
|
||||||
|
|
||||||
|
if ( this.domElement !== document ) {
|
||||||
|
|
||||||
|
this.domElement.focus();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if ( this.dragToLook ) {
|
||||||
|
|
||||||
|
this.mouseStatus ++;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
switch ( event.button ) {
|
||||||
|
|
||||||
|
case 0: this.moveState.forward = 1; break;
|
||||||
|
case 2: this.moveState.back = 1; break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMovementVector();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.mousemove = function( event ) {
|
||||||
|
|
||||||
|
// (divan: disabled)
|
||||||
|
if (false && (! this.dragToLook || this.mouseStatus > 0)) {
|
||||||
|
var container = this.getContainerDimensions();
|
||||||
|
var halfWidth = container.size[ 0 ] / 2;
|
||||||
|
var halfHeight = container.size[ 1 ] / 2;
|
||||||
|
|
||||||
|
this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
|
||||||
|
this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
|
||||||
|
|
||||||
|
this.updateRotationVector();
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.mouseup = function( event ) {
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if ( this.dragToLook ) {
|
||||||
|
|
||||||
|
this.mouseStatus --;
|
||||||
|
|
||||||
|
this.moveState.yawLeft = this.moveState.pitchDown = 0;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
switch ( event.button ) {
|
||||||
|
|
||||||
|
case 0: this.moveState.forward = 0; break;
|
||||||
|
case 2: this.moveState.back = 0; break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMovementVector();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateRotationVector();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.update = function( delta ) {
|
||||||
|
|
||||||
|
var moveMult = delta * this.movementSpeed;
|
||||||
|
var rotMult = delta * this.rollSpeed;
|
||||||
|
|
||||||
|
this.object.translateX( this.moveVector.x * moveMult );
|
||||||
|
this.object.translateY( this.moveVector.y * moveMult );
|
||||||
|
this.object.translateZ( this.moveVector.z * moveMult );
|
||||||
|
|
||||||
|
this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
|
||||||
|
this.object.quaternion.multiply( this.tmpQuaternion );
|
||||||
|
|
||||||
|
// expose the rotation vector for convenience
|
||||||
|
this.object.rotation.setFromQuaternion( this.object.quaternion, this.object.rotation.order );
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateMovementVector = function() {
|
||||||
|
|
||||||
|
var forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0;
|
||||||
|
|
||||||
|
this.moveVector.x = ( - this.moveState.left + this.moveState.right );
|
||||||
|
this.moveVector.y = ( - this.moveState.down + this.moveState.up );
|
||||||
|
this.moveVector.z = ( - forward + this.moveState.back );
|
||||||
|
|
||||||
|
//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateRotationVector = function() {
|
||||||
|
|
||||||
|
this.rotationVector.x = ( - this.moveState.pitchDown + this.moveState.pitchUp );
|
||||||
|
this.rotationVector.y = ( - this.moveState.yawRight + this.moveState.yawLeft );
|
||||||
|
this.rotationVector.z = ( - this.moveState.rollRight + this.moveState.rollLeft );
|
||||||
|
|
||||||
|
//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.getContainerDimensions = function() {
|
||||||
|
|
||||||
|
if ( this.domElement != document ) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
size : [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
|
||||||
|
offset : [ this.domElement.offsetLeft, this.domElement.offsetTop ]
|
||||||
|
};
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
return {
|
||||||
|
size : [ window.innerWidth, window.innerHeight ],
|
||||||
|
offset : [ 0, 0 ]
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function bind( scope, fn ) {
|
||||||
|
|
||||||
|
return function () {
|
||||||
|
|
||||||
|
fn.apply( scope, arguments );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function contextmenu( event ) {
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dispose = function() {
|
||||||
|
|
||||||
|
//this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
|
||||||
|
//this.domElement.removeEventListener( 'mousedown', _mousedown, false );
|
||||||
|
//this.domElement.removeEventListener( 'mousemove', _mousemove, false );
|
||||||
|
//this.domElement.removeEventListener( 'mouseup', _mouseup, false );
|
||||||
|
|
||||||
|
window.removeEventListener( 'keydown', _keydown, false );
|
||||||
|
window.removeEventListener( 'keyup', _keyup, false );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
//var _mousemove = bind( this, this.mousemove );
|
||||||
|
var _mousedown = bind( this, this.mousedown );
|
||||||
|
var _mouseup = bind( this, this.mouseup );
|
||||||
|
var _keydown = bind( this, this.keydown );
|
||||||
|
var _keyup = bind( this, this.keyup );
|
||||||
|
|
||||||
|
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
|
||||||
|
|
||||||
|
//this.domElement.addEventListener( 'mousemove', _mousemove, false );
|
||||||
|
//this.domElement.addEventListener( 'mousedown', _mousedown, false );
|
||||||
|
//this.domElement.addEventListener( 'mouseup', _mouseup, false );
|
||||||
|
|
||||||
|
window.addEventListener( 'keydown', _keydown, false );
|
||||||
|
window.addEventListener( 'keyup', _keyup, false );
|
||||||
|
|
||||||
|
this.updateMovementVector();
|
||||||
|
this.updateRotationVector();
|
||||||
|
|
||||||
|
};
|
||||||
625
web/js/controls/TrackballControls.js
Normal file
625
web/js/controls/TrackballControls.js
Normal file
@ -0,0 +1,625 @@
|
|||||||
|
/**
|
||||||
|
* @author Eberhard Graether / http://egraether.com/
|
||||||
|
* @author Mark Lundin / http://mark-lundin.com
|
||||||
|
* @author Simone Manini / http://daron1337.github.io
|
||||||
|
* @author Luca Antiga / http://lantiga.github.io
|
||||||
|
*/
|
||||||
|
|
||||||
|
THREE.TrackballControls = function ( object, domElement ) {
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
|
||||||
|
|
||||||
|
this.object = object;
|
||||||
|
this.domElement = ( domElement !== undefined ) ? domElement : document;
|
||||||
|
|
||||||
|
// API
|
||||||
|
|
||||||
|
this.enabled = true;
|
||||||
|
|
||||||
|
this.screen = { left: 0, top: 0, width: 0, height: 0 };
|
||||||
|
|
||||||
|
this.rotateSpeed = 1.0;
|
||||||
|
this.zoomSpeed = 1.2;
|
||||||
|
this.panSpeed = 0.3;
|
||||||
|
|
||||||
|
this.noRotate = false;
|
||||||
|
this.noZoom = false;
|
||||||
|
this.noPan = false;
|
||||||
|
|
||||||
|
this.staticMoving = false;
|
||||||
|
this.dynamicDampingFactor = 0.2;
|
||||||
|
|
||||||
|
this.minDistance = 0;
|
||||||
|
this.maxDistance = Infinity;
|
||||||
|
|
||||||
|
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
|
||||||
|
|
||||||
|
// internals
|
||||||
|
|
||||||
|
this.target = new THREE.Vector3();
|
||||||
|
|
||||||
|
var EPS = 0.000001;
|
||||||
|
|
||||||
|
var lastPosition = new THREE.Vector3();
|
||||||
|
|
||||||
|
var _state = STATE.NONE,
|
||||||
|
_prevState = STATE.NONE,
|
||||||
|
|
||||||
|
_eye = new THREE.Vector3(),
|
||||||
|
|
||||||
|
_movePrev = new THREE.Vector2(),
|
||||||
|
_moveCurr = new THREE.Vector2(),
|
||||||
|
|
||||||
|
_lastAxis = new THREE.Vector3(),
|
||||||
|
_lastAngle = 0,
|
||||||
|
|
||||||
|
_zoomStart = new THREE.Vector2(),
|
||||||
|
_zoomEnd = new THREE.Vector2(),
|
||||||
|
|
||||||
|
_touchZoomDistanceStart = 0,
|
||||||
|
_touchZoomDistanceEnd = 0,
|
||||||
|
|
||||||
|
_panStart = new THREE.Vector2(),
|
||||||
|
_panEnd = new THREE.Vector2();
|
||||||
|
|
||||||
|
// for reset
|
||||||
|
|
||||||
|
this.target0 = this.target.clone();
|
||||||
|
this.position0 = this.object.position.clone();
|
||||||
|
this.up0 = this.object.up.clone();
|
||||||
|
|
||||||
|
// events
|
||||||
|
|
||||||
|
var changeEvent = { type: 'change' };
|
||||||
|
var startEvent = { type: 'start' };
|
||||||
|
var endEvent = { type: 'end' };
|
||||||
|
|
||||||
|
|
||||||
|
// methods
|
||||||
|
|
||||||
|
this.handleResize = function () {
|
||||||
|
|
||||||
|
if ( this.domElement === document ) {
|
||||||
|
|
||||||
|
this.screen.left = 0;
|
||||||
|
this.screen.top = 0;
|
||||||
|
this.screen.width = window.innerWidth;
|
||||||
|
this.screen.height = window.innerHeight;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
var box = this.domElement.getBoundingClientRect();
|
||||||
|
// adjustments come from similar code in the jquery offset() function
|
||||||
|
var d = this.domElement.ownerDocument.documentElement;
|
||||||
|
this.screen.left = box.left + window.pageXOffset - d.clientLeft;
|
||||||
|
this.screen.top = box.top + window.pageYOffset - d.clientTop;
|
||||||
|
this.screen.width = box.width;
|
||||||
|
this.screen.height = box.height;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.handleEvent = function ( event ) {
|
||||||
|
|
||||||
|
if ( typeof this[ event.type ] == 'function' ) {
|
||||||
|
|
||||||
|
this[ event.type ]( event );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var getMouseOnScreen = ( function () {
|
||||||
|
|
||||||
|
var vector = new THREE.Vector2();
|
||||||
|
|
||||||
|
return function getMouseOnScreen( pageX, pageY ) {
|
||||||
|
|
||||||
|
vector.set(
|
||||||
|
( pageX - _this.screen.left ) / _this.screen.width,
|
||||||
|
( pageY - _this.screen.top ) / _this.screen.height
|
||||||
|
);
|
||||||
|
|
||||||
|
return vector;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}() );
|
||||||
|
|
||||||
|
var getMouseOnCircle = ( function () {
|
||||||
|
|
||||||
|
var vector = new THREE.Vector2();
|
||||||
|
|
||||||
|
return function getMouseOnCircle( pageX, pageY ) {
|
||||||
|
|
||||||
|
vector.set(
|
||||||
|
( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
|
||||||
|
( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
|
||||||
|
);
|
||||||
|
|
||||||
|
return vector;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}() );
|
||||||
|
|
||||||
|
this.rotateCamera = ( function() {
|
||||||
|
|
||||||
|
var axis = new THREE.Vector3(),
|
||||||
|
quaternion = new THREE.Quaternion(),
|
||||||
|
eyeDirection = new THREE.Vector3(),
|
||||||
|
objectUpDirection = new THREE.Vector3(),
|
||||||
|
objectSidewaysDirection = new THREE.Vector3(),
|
||||||
|
moveDirection = new THREE.Vector3(),
|
||||||
|
angle;
|
||||||
|
|
||||||
|
return function rotateCamera() {
|
||||||
|
|
||||||
|
moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
|
||||||
|
angle = moveDirection.length();
|
||||||
|
|
||||||
|
if ( angle ) {
|
||||||
|
|
||||||
|
_eye.copy( _this.object.position ).sub( _this.target );
|
||||||
|
|
||||||
|
eyeDirection.copy( _eye ).normalize();
|
||||||
|
objectUpDirection.copy( _this.object.up ).normalize();
|
||||||
|
objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();
|
||||||
|
|
||||||
|
objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
|
||||||
|
objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );
|
||||||
|
|
||||||
|
moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );
|
||||||
|
|
||||||
|
axis.crossVectors( moveDirection, _eye ).normalize();
|
||||||
|
|
||||||
|
angle *= _this.rotateSpeed;
|
||||||
|
quaternion.setFromAxisAngle( axis, angle );
|
||||||
|
|
||||||
|
_eye.applyQuaternion( quaternion );
|
||||||
|
_this.object.up.applyQuaternion( quaternion );
|
||||||
|
|
||||||
|
_lastAxis.copy( axis );
|
||||||
|
_lastAngle = angle;
|
||||||
|
|
||||||
|
} else if ( ! _this.staticMoving && _lastAngle ) {
|
||||||
|
|
||||||
|
_lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
|
||||||
|
_eye.copy( _this.object.position ).sub( _this.target );
|
||||||
|
quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
|
||||||
|
_eye.applyQuaternion( quaternion );
|
||||||
|
_this.object.up.applyQuaternion( quaternion );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}() );
|
||||||
|
|
||||||
|
|
||||||
|
this.zoomCamera = function () {
|
||||||
|
|
||||||
|
var factor;
|
||||||
|
|
||||||
|
if ( _state === STATE.TOUCH_ZOOM_PAN ) {
|
||||||
|
|
||||||
|
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
|
||||||
|
_touchZoomDistanceStart = _touchZoomDistanceEnd;
|
||||||
|
_eye.multiplyScalar( factor );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
|
||||||
|
|
||||||
|
if ( factor !== 1.0 && factor > 0.0 ) {
|
||||||
|
|
||||||
|
_eye.multiplyScalar( factor );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( _this.staticMoving ) {
|
||||||
|
|
||||||
|
_zoomStart.copy( _zoomEnd );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.panCamera = ( function() {
|
||||||
|
|
||||||
|
var mouseChange = new THREE.Vector2(),
|
||||||
|
objectUp = new THREE.Vector3(),
|
||||||
|
pan = new THREE.Vector3();
|
||||||
|
|
||||||
|
return function panCamera() {
|
||||||
|
|
||||||
|
mouseChange.copy( _panEnd ).sub( _panStart );
|
||||||
|
|
||||||
|
if ( mouseChange.lengthSq() ) {
|
||||||
|
|
||||||
|
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
|
||||||
|
|
||||||
|
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
|
||||||
|
pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
|
||||||
|
|
||||||
|
_this.object.position.add( pan );
|
||||||
|
_this.target.add( pan );
|
||||||
|
|
||||||
|
if ( _this.staticMoving ) {
|
||||||
|
|
||||||
|
_panStart.copy( _panEnd );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}() );
|
||||||
|
|
||||||
|
this.checkDistances = function () {
|
||||||
|
|
||||||
|
if ( ! _this.noZoom || ! _this.noPan ) {
|
||||||
|
|
||||||
|
if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) {
|
||||||
|
|
||||||
|
_this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) );
|
||||||
|
_zoomStart.copy( _zoomEnd );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {
|
||||||
|
|
||||||
|
_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );
|
||||||
|
_zoomStart.copy( _zoomEnd );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.update = function () {
|
||||||
|
|
||||||
|
_eye.subVectors( _this.object.position, _this.target );
|
||||||
|
|
||||||
|
if ( ! _this.noRotate ) {
|
||||||
|
|
||||||
|
_this.rotateCamera();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! _this.noZoom ) {
|
||||||
|
|
||||||
|
_this.zoomCamera();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( ! _this.noPan ) {
|
||||||
|
|
||||||
|
_this.panCamera();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_this.object.position.addVectors( _this.target, _eye );
|
||||||
|
|
||||||
|
_this.checkDistances();
|
||||||
|
|
||||||
|
_this.object.lookAt( _this.target );
|
||||||
|
|
||||||
|
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
|
||||||
|
|
||||||
|
_this.dispatchEvent( changeEvent );
|
||||||
|
|
||||||
|
lastPosition.copy( _this.object.position );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.reset = function () {
|
||||||
|
|
||||||
|
_state = STATE.NONE;
|
||||||
|
_prevState = STATE.NONE;
|
||||||
|
|
||||||
|
_this.target.copy( _this.target0 );
|
||||||
|
_this.object.position.copy( _this.position0 );
|
||||||
|
_this.object.up.copy( _this.up0 );
|
||||||
|
|
||||||
|
_eye.subVectors( _this.object.position, _this.target );
|
||||||
|
|
||||||
|
_this.object.lookAt( _this.target );
|
||||||
|
|
||||||
|
_this.dispatchEvent( changeEvent );
|
||||||
|
|
||||||
|
lastPosition.copy( _this.object.position );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// listeners
|
||||||
|
|
||||||
|
function keydown( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
window.removeEventListener( 'keydown', keydown );
|
||||||
|
|
||||||
|
_prevState = _state;
|
||||||
|
|
||||||
|
if ( _state !== STATE.NONE ) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
|
||||||
|
|
||||||
|
_state = STATE.ROTATE;
|
||||||
|
|
||||||
|
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
|
||||||
|
|
||||||
|
_state = STATE.ZOOM;
|
||||||
|
|
||||||
|
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
|
||||||
|
|
||||||
|
_state = STATE.PAN;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyup( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
_state = _prevState;
|
||||||
|
|
||||||
|
window.addEventListener( 'keydown', keydown, false );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousedown( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if ( _state === STATE.NONE ) {
|
||||||
|
|
||||||
|
_state = event.button;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
|
||||||
|
|
||||||
|
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
|
||||||
|
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
|
||||||
|
|
||||||
|
_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||||
|
_zoomEnd.copy( _zoomStart );
|
||||||
|
|
||||||
|
} else if ( _state === STATE.PAN && ! _this.noPan ) {
|
||||||
|
|
||||||
|
_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||||
|
_panEnd.copy( _panStart );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener( 'mousemove', mousemove, false );
|
||||||
|
document.addEventListener( 'mouseup', mouseup, false );
|
||||||
|
|
||||||
|
_this.dispatchEvent( startEvent );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
|
||||||
|
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
|
||||||
|
|
||||||
|
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
|
||||||
|
|
||||||
|
_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||||
|
|
||||||
|
} else if ( _state === STATE.PAN && ! _this.noPan ) {
|
||||||
|
|
||||||
|
_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseup( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
_state = STATE.NONE;
|
||||||
|
|
||||||
|
document.removeEventListener( 'mousemove', mousemove );
|
||||||
|
document.removeEventListener( 'mouseup', mouseup );
|
||||||
|
_this.dispatchEvent( endEvent );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousewheel( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
switch ( event.deltaMode ) {
|
||||||
|
|
||||||
|
case 2:
|
||||||
|
// Zoom in pages
|
||||||
|
_zoomStart.y -= event.deltaY * 0.025;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
// Zoom in lines
|
||||||
|
_zoomStart.y -= event.deltaY * 0.01;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
// undefined, 0, assume pixels
|
||||||
|
_zoomStart.y -= event.deltaY * 0.00025;
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_this.dispatchEvent( startEvent );
|
||||||
|
_this.dispatchEvent( endEvent );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchstart( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
switch ( event.touches.length ) {
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
_state = STATE.TOUCH_ROTATE;
|
||||||
|
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
break;
|
||||||
|
|
||||||
|
default: // 2 or more
|
||||||
|
_state = STATE.TOUCH_ZOOM_PAN;
|
||||||
|
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
||||||
|
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
||||||
|
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
|
||||||
|
|
||||||
|
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
|
||||||
|
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
|
||||||
|
_panStart.copy( getMouseOnScreen( x, y ) );
|
||||||
|
_panEnd.copy( _panStart );
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_this.dispatchEvent( startEvent );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchmove( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
switch ( event.touches.length ) {
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||||
|
break;
|
||||||
|
|
||||||
|
default: // 2 or more
|
||||||
|
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
|
||||||
|
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
|
||||||
|
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
|
||||||
|
|
||||||
|
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
|
||||||
|
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
|
||||||
|
_panEnd.copy( getMouseOnScreen( x, y ) );
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchend( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
switch ( event.touches.length ) {
|
||||||
|
|
||||||
|
case 0:
|
||||||
|
_state = STATE.NONE;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
_state = STATE.TOUCH_ROTATE;
|
||||||
|
_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
|
||||||
|
_movePrev.copy( _moveCurr );
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
_this.dispatchEvent( endEvent );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function contextmenu( event ) {
|
||||||
|
|
||||||
|
if ( _this.enabled === false ) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dispose = function() {
|
||||||
|
|
||||||
|
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
|
||||||
|
this.domElement.removeEventListener( 'mousedown', mousedown, false );
|
||||||
|
this.domElement.removeEventListener( 'wheel', mousewheel, false );
|
||||||
|
|
||||||
|
this.domElement.removeEventListener( 'touchstart', touchstart, false );
|
||||||
|
this.domElement.removeEventListener( 'touchend', touchend, false );
|
||||||
|
this.domElement.removeEventListener( 'touchmove', touchmove, false );
|
||||||
|
|
||||||
|
document.removeEventListener( 'mousemove', mousemove, false );
|
||||||
|
document.removeEventListener( 'mouseup', mouseup, false );
|
||||||
|
|
||||||
|
window.removeEventListener( 'keydown', keydown, false );
|
||||||
|
window.removeEventListener( 'keyup', keyup, false );
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
|
||||||
|
this.domElement.addEventListener( 'mousedown', mousedown, false );
|
||||||
|
this.domElement.addEventListener( 'wheel', mousewheel, false );
|
||||||
|
|
||||||
|
this.domElement.addEventListener( 'touchstart', touchstart, false );
|
||||||
|
this.domElement.addEventListener( 'touchend', touchend, false );
|
||||||
|
this.domElement.addEventListener( 'touchmove', touchmove, false );
|
||||||
|
|
||||||
|
window.addEventListener( 'keydown', keydown, false );
|
||||||
|
window.addEventListener( 'keyup', keyup, false );
|
||||||
|
|
||||||
|
this.handleResize();
|
||||||
|
|
||||||
|
// force an update at start
|
||||||
|
this.update();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
|
||||||
|
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;
|
||||||
26
web/js/ethereum.js
Normal file
26
web/js/ethereum.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
function NewEthereumGeometry(scale) {
|
||||||
|
let geom = new THREE.Geometry();
|
||||||
|
geom.vertices.push(
|
||||||
|
new THREE.Vector3( scale*1, 0, 0 ),
|
||||||
|
new THREE.Vector3( -scale*1, 0, 0 ),
|
||||||
|
new THREE.Vector3( 0, scale*1.5, 0 ),
|
||||||
|
new THREE.Vector3( 0, scale*-1.5, 0 ),
|
||||||
|
new THREE.Vector3( 0, 0, scale*1 ),
|
||||||
|
new THREE.Vector3( 0, 0, -scale*1 )
|
||||||
|
);
|
||||||
|
geom.faces.push(
|
||||||
|
new THREE.Face3( 0, 2, 4 ),
|
||||||
|
new THREE.Face3( 0, 4, 3 ),
|
||||||
|
new THREE.Face3( 0, 3, 5 ),
|
||||||
|
new THREE.Face3( 0, 5, 2 ),
|
||||||
|
new THREE.Face3( 1, 2, 5 ),
|
||||||
|
new THREE.Face3( 1, 5, 3 ),
|
||||||
|
new THREE.Face3( 1, 3, 4 ),
|
||||||
|
new THREE.Face3( 1, 4, 2 )
|
||||||
|
);
|
||||||
|
geom.computeBoundingSphere();
|
||||||
|
geom.computeFaceNormals();
|
||||||
|
return geom;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { NewEthereumGeometry };
|
||||||
2
web/js/keys.js
Normal file
2
web/js/keys.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
document.addEventListener("keydown", function(event) {
|
||||||
|
});
|
||||||
18
web/js/shitty_hacks.js
Normal file
18
web/js/shitty_hacks.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
// accessorFn
|
||||||
|
function accessorFn(p) {
|
||||||
|
if (p instanceof Function) {
|
||||||
|
return p // fn
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof p === 'string') {
|
||||||
|
return function(obj) {
|
||||||
|
return obj[p]; // property name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return function (obj){
|
||||||
|
return p; // constant
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = accessorFn;
|
||||||
26
web/js/ws.js
Normal file
26
web/js/ws.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
var graph = require('../index.js');
|
||||||
|
|
||||||
|
var ws = new WebSocket('ws://' + window.location.host + '/ws');
|
||||||
|
|
||||||
|
// request graphData and initial positions from websocket connection
|
||||||
|
ws.onopen = function (event) {
|
||||||
|
ws.send('{"cmd": "init"}');
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onmessage = function (event) {
|
||||||
|
let msg = JSON.parse(event.data);
|
||||||
|
switch(msg.type) {
|
||||||
|
case "graph":
|
||||||
|
graph.setGraphData(msg.graph);
|
||||||
|
break;
|
||||||
|
case "propagation":
|
||||||
|
graph.setPropagation(msg.propagation);
|
||||||
|
break;
|
||||||
|
case "positions":
|
||||||
|
console.log("Updating positions...");
|
||||||
|
graph.updatePositions(msg.positions);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { ws };
|
||||||
50
web/package-lock.json
generated
Normal file
50
web/package-lock.json
generated
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "clean",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"lockfileVersion": 1,
|
||||||
|
"requires": true,
|
||||||
|
"dependencies": {
|
||||||
|
"d3-color": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
|
||||||
|
"integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
|
||||||
|
},
|
||||||
|
"d3-interpolate": {
|
||||||
|
"version": "1.1.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
|
||||||
|
"integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
|
||||||
|
"requires": {
|
||||||
|
"d3-color": "1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"d3-scale-chromatic": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-qQUhLi8fPe/F0b0M46C6eFUbms5IIMHuhJ5DKjjzBUvm1b6aPtygJzGbrMdMUD/ckLBq+NdWwHeN2cpMDp4Q5Q==",
|
||||||
|
"requires": {
|
||||||
|
"d3-color": "1.0.3",
|
||||||
|
"d3-interpolate": "1.1.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dat.gui": {
|
||||||
|
"version": "0.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.1.tgz",
|
||||||
|
"integrity": "sha512-fTv1JQqjwA1Rtjy/i0ThdLgUOSWA3hOJrvNEl3XrfaMvCcFdV0h01bo3aGXknLx3okJ7AO9qqgVz6TbuRHxYAw=="
|
||||||
|
},
|
||||||
|
"stats-js": {
|
||||||
|
"version": "1.0.0-alpha1",
|
||||||
|
"resolved": "https://registry.npmjs.org/stats-js/-/stats-js-1.0.0-alpha1.tgz",
|
||||||
|
"integrity": "sha1-RK6C5kIRI7q5l1DZXD9VJrjyV9s="
|
||||||
|
},
|
||||||
|
"three": {
|
||||||
|
"version": "0.88.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz",
|
||||||
|
"integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU="
|
||||||
|
},
|
||||||
|
"tinycolor2": {
|
||||||
|
"version": "1.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||||
|
"integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
web/package.json
Normal file
18
web/package.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "clean",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-scale-chromatic": "^1.2.0",
|
||||||
|
"dat.gui": "^0.7.1",
|
||||||
|
"stats-js": "^1.0.0-alpha1",
|
||||||
|
"three": "^0.88.0",
|
||||||
|
"tinycolor2": "^1.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
107
ws.go
Normal file
107
ws.go
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"encoding/json"
|
||||||
|
"log"
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/divan/graph-experiments/graph"
|
||||||
|
"github.com/divan/graph-experiments/layout"
|
||||||
|
"github.com/gorilla/websocket"
|
||||||
|
)
|
||||||
|
|
||||||
|
type WSServer struct {
|
||||||
|
upgrader websocket.Upgrader
|
||||||
|
hub []*websocket.Conn
|
||||||
|
|
||||||
|
Positions []*position
|
||||||
|
layout layout.Layout
|
||||||
|
graph *graph.Graph
|
||||||
|
propagation *PropagationLog
|
||||||
|
}
|
||||||
|
|
||||||
|
func NewWSServer(layout layout.Layout) *WSServer {
|
||||||
|
ws := &WSServer{
|
||||||
|
upgrader: websocket.Upgrader{},
|
||||||
|
layout: layout,
|
||||||
|
}
|
||||||
|
ws.updatePositions()
|
||||||
|
return ws
|
||||||
|
}
|
||||||
|
|
||||||
|
type WSResponse struct {
|
||||||
|
Type MsgType `json:"type"`
|
||||||
|
Positions []*position `json:"positions,omitempty"`
|
||||||
|
Graph json.RawMessage `json:"graph,omitempty"`
|
||||||
|
Propagation *PropagationLog `json:"propagation,omitempty"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type WSRequest struct {
|
||||||
|
Cmd WSCommand `json:"cmd"`
|
||||||
|
}
|
||||||
|
|
||||||
|
type MsgType string
|
||||||
|
type WSCommand string
|
||||||
|
|
||||||
|
// WebSocket response types
|
||||||
|
const (
|
||||||
|
RespPositions MsgType = "positions"
|
||||||
|
RespGraph MsgType = "graph"
|
||||||
|
RespPropagation MsgType = "propagation"
|
||||||
|
)
|
||||||
|
|
||||||
|
// WebSocket commands
|
||||||
|
const (
|
||||||
|
CmdInit WSCommand = "init"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (ws *WSServer) Handle(w http.ResponseWriter, r *http.Request) {
|
||||||
|
c, err := ws.upgrader.Upgrade(w, r, nil)
|
||||||
|
if err != nil {
|
||||||
|
log.Println(err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
defer c.Close()
|
||||||
|
|
||||||
|
ws.hub = append(ws.hub, c)
|
||||||
|
|
||||||
|
for {
|
||||||
|
mt, message, err := c.ReadMessage()
|
||||||
|
if err != nil {
|
||||||
|
log.Println("read:", mt, err)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
ws.processRequest(c, mt, message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) processRequest(c *websocket.Conn, mtype int, data []byte) {
|
||||||
|
var cmd WSRequest
|
||||||
|
err := json.Unmarshal(data, &cmd)
|
||||||
|
if err != nil {
|
||||||
|
log.Fatal("unmarshal command", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch cmd.Cmd {
|
||||||
|
case CmdInit:
|
||||||
|
ws.sendGraphData(c)
|
||||||
|
ws.updatePositions()
|
||||||
|
ws.sendPositions(c)
|
||||||
|
ws.sendPropagationData(c)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) sendMsg(c *websocket.Conn, msg *WSResponse) {
|
||||||
|
data, err := json.Marshal(msg)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("write:", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
err = c.WriteMessage(1, data)
|
||||||
|
if err != nil {
|
||||||
|
log.Println("write:", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
37
ws_graph.go
Normal file
37
ws_graph.go
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"bytes"
|
||||||
|
"encoding/json"
|
||||||
|
"log"
|
||||||
|
|
||||||
|
"github.com/divan/graph-experiments/export"
|
||||||
|
"github.com/divan/graph-experiments/graph"
|
||||||
|
"github.com/gorilla/websocket"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (ws *WSServer) sendGraphData(c *websocket.Conn) {
|
||||||
|
var buf bytes.Buffer
|
||||||
|
err := export.NewJSON(&buf, false).ExportGraph(ws.graph)
|
||||||
|
if err != nil {
|
||||||
|
log.Fatal("Can't marshal graph to JSON")
|
||||||
|
}
|
||||||
|
msg := &WSResponse{
|
||||||
|
Type: RespGraph,
|
||||||
|
Graph: json.RawMessage(buf.Bytes()),
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.sendMsg(c, msg)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) updateGraph(g *graph.Graph) {
|
||||||
|
ws.graph = g
|
||||||
|
|
||||||
|
ws.broadcastGraphData()
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) broadcastGraphData() {
|
||||||
|
for i := 0; i < len(ws.hub); i++ {
|
||||||
|
ws.sendGraphData(ws.hub[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
41
ws_positions.go
Normal file
41
ws_positions.go
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import "github.com/gorilla/websocket"
|
||||||
|
|
||||||
|
type position struct {
|
||||||
|
X int `json:"x"`
|
||||||
|
Y int `json:"y"`
|
||||||
|
Z int `json:"z"`
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) sendPositions(c *websocket.Conn) {
|
||||||
|
msg := &WSResponse{
|
||||||
|
Type: RespPositions,
|
||||||
|
Positions: ws.Positions,
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.sendMsg(c, msg)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) updatePositions() {
|
||||||
|
// positions
|
||||||
|
nodes := ws.layout.Nodes()
|
||||||
|
positions := []*position{}
|
||||||
|
for i := 0; i < len(nodes); i++ {
|
||||||
|
pos := &position{
|
||||||
|
X: nodes[i].X,
|
||||||
|
Y: nodes[i].Y,
|
||||||
|
Z: nodes[i].Z,
|
||||||
|
}
|
||||||
|
positions = append(positions, pos)
|
||||||
|
}
|
||||||
|
ws.Positions = positions
|
||||||
|
|
||||||
|
ws.broadcastPositions()
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) broadcastPositions() {
|
||||||
|
for i := 0; i < len(ws.hub); i++ {
|
||||||
|
ws.sendPositions(ws.hub[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
26
ws_propagation.go
Normal file
26
ws_propagation.go
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"github.com/gorilla/websocket"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (ws *WSServer) sendPropagationData(c *websocket.Conn) {
|
||||||
|
msg := &WSResponse{
|
||||||
|
Type: RespPropagation,
|
||||||
|
Propagation: ws.propagation,
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.sendMsg(c, msg)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) updatePropagationData(plog *PropagationLog) {
|
||||||
|
ws.propagation = plog
|
||||||
|
|
||||||
|
ws.broadcastPropagationData()
|
||||||
|
}
|
||||||
|
|
||||||
|
func (ws *WSServer) broadcastPropagationData() {
|
||||||
|
for i := 0; i < len(ws.hub); i++ {
|
||||||
|
ws.sendPropagationData(ws.hub[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user