Better mouse handling

8 лет назад · 46df289aed
--- a/static/index.html
+++ b/static/index.html
@@ -10,6 +10,7 @@
  <script src="scripts/orbitcontrols.js"></script>
  <script src="scripts/tables.js"></script>
  <script src="scripts/anders_briegel.js"></script>
  <script src="scripts/mouse.js"></script>
  <script src="scripts/materials.js"></script>
  <script src="scripts/graph.js"></script>
  <script src="scripts/gui.js"></script>
@@ -19,7 +20,7 @@

 <body>
 <img id="ball" src="img/ball.png" style=display:none;>
 <div id=node_info class=hidden> </div>
 <div id=node_info class=hidden> nothing </div>
 <div id=message class=hidden> </div>

 <div id=pallette>
--- a/static/main.css
+++ b/static/main.css
@@ -1,5 +1,5 @@
 html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-family:  "courier new"; }
 #infoholder { 
 #node_info { 
    background: black; 
    color:white;
    padding: 5px;
--- a/static/scripts/.agignore
+++ b/static/scripts/.agignore
@@ -0,0 +1,2 @@
 three.js
 orbitcontrols.js
--- a/static/scripts/anders_briegel.js
+++ b/static/scripts/anders_briegel.js
@@ -1,4 +1,7 @@
 var abj = {};
 abj.vops = {};
 abj.ngbh = {};
 abj.meta = {};

 abj.add_node = function(node, m) {
    abj.ngbh[node] = {};
@@ -118,3 +121,13 @@ abj.log_graph_state = function() {
    console.log(JSON.stringify(abj.ngbh));
 };

 abj.update = function(newState) {
    abj.vops = newState.vops;
    abj.ngbh = newState.ngbh;
    abj.meta = newState.meta;
 };

 abj.order = function(){
    return Object.keys(abj.vops).length;
 };

--- a/static/scripts/graph.js
+++ b/static/scripts/graph.js
@@ -1,22 +1,16 @@
 var graph = {};
 graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];

 graph.hook = function() {
    materials.load();
 graph.prepare = function() {
    materials.prepare();
    websocket.connect(graph.update);
 };

 graph.update = function(json) {
    abj.vops = json.vops;
    abj.ngbh = json.ngbh;
    abj.meta = json.meta;
    graph.updateScene();
 };
 graph.update = function(newState) {
    if (newState){abj.update(newState);}

 graph.updateScene = function() {
    if (graph.object){gui.scene.remove(graph.object);}
    graph.object = null;
    console.log("update");

    var geometry = new THREE.Geometry();
    geometry.colors = [];
@@ -48,3 +42,8 @@ graph.updateScene = function() {
    gui.scene.add(graph.object);
    gui.render();
 };

 graph.add_node = function(x, y, z) {
    meta = {"position": new THREE.Vector3(x, y, z)};
    abj.add_node(abj.order(), meta);
 };
--- a/static/scripts/gui.js
+++ b/static/scripts/gui.js
@@ -1,5 +1,5 @@
 var gui = {};
 gui.construct = function() {
 gui.prepare = function() {
    gui.renderer = new THREE.WebGLRenderer({
        "antialias": true
    });
@@ -15,6 +15,7 @@ gui.construct = function() {
    gui.controls.addEventListener("change", gui.render);
    gui.controls.center.set(0, 0, 0);
    gui.controls.rotateSpeed = 0.2;
    gui.controls.userPanSpeed = 0.3;
    gui.camera.position.set(0, 0, 20);
 };

@@ -49,10 +50,20 @@ gui.serverMessage = function(msgtext) {
    message.className = "visible";
 };

 // Set the position of the info popup
 gui.setInfoPosition = function(position){
    w = node_info.offsetWidth; 
    h = node_info.offsetHeight;
    node_info.style.left = position.x -  w/2 + "px"; 
    node_info.style.top = position.y - h -10 + "px"; 
    node_info.className = "visible";
 };

 // The main loop
 gui.loop = function() {
    gui.controls.update();
    requestAnimationFrame(gui.loop);
 }
 };

 // Try to add a qubit at the current mouse position
 gui.addQubitAtMouse = function(event) {
@@ -63,6 +74,6 @@ gui.addQubitAtMouse = function(event) {
    abj.add_node(Object.keys(vops).length, {
        "position": intersection
    });
    graph.updateScene();
 }
    graph.update();
 };

--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,6 +1,13 @@
 function bootstrap(){
    graph.add_node(0, 0, 0);
    graph.update();
 }

 window.onload = function() {
    graph.hook();
    materials.load();
    gui.construct();
    graph.prepare();
    materials.prepare();
    gui.prepare();
    mouse.prepare();
    bootstrap();
    gui.loop();
 };
--- a/static/scripts/materials.js
+++ b/static/scripts/materials.js
@@ -5,7 +5,7 @@ var curveProperties = {
    curvature: 20
 };

 materials.load = function() {
 materials.prepare = function() {
    var sprite = new THREE.Texture(document.getElementById("ball"));
    sprite.needsUpdate = true;
    materials.edge = new THREE.LineBasicMaterial({
--- a/static/scripts/mouse.js
+++ b/static/scripts/mouse.js
@@ -0,0 +1,48 @@
 var mouse = {};
 mouse.wasClick = true;

 mouse.raycaster = new THREE.Raycaster();

 mouse.onFreeMove = function(){console.log("Free move");};
 mouse.onDrag = function(){console.log("Drag");};
 mouse.onClick = function(){console.log("Click");};
 mouse.onCtrlClick = function(){console.log("Ctrl-click");};
 mouse.onShiftClick = function(){console.log("Shift-click");};

 mouse.prepare = function(){
    var el = gui.renderer.domElement;
    el.addEventListener("mousedown", mouse.onDown);
    el.addEventListener("mouseup", mouse.onUp);
    el.addEventListener("mousemove", mouse.onMove);
 };

 mouse.onDown = function(event){
    mouse.wasClick = true;
    mouse.pressed = true;
 };

 mouse.onUp = function(event){
    if (!mouse.wasClick){return;}
    mouse.pressed = false;
    if (event.ctrlKey){mouse.onCtrlClick();}
    else if (event.shiftKey){mouse.onShiftClick();}
    else {
        mouse.onClick();
    }
 };

 mouse.onMove = function(event) {
    mouse.wasClick = false;
    mouse.position_absolute = {x: event.clientX, y:event.clientY};
    mouse.position_relative = {x: (event.clientX / window.innerWidth) * 2 - 1,
                  y: -(event.clientY / window.innerHeight) * 2 + 1};
    gui.setInfoPosition(mouse.position_absolute);
    mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera);
    mouse.ray = mouse.raycaster.ray;
    if (mouse.pressed){
        mouse.onDrag();
    } else {
        mouse.onFreeMove();
    }
 };