[GraphExplorer,MouseSelector,WIP] Unfinished attempt at re-using part of Gargantext V3

src/Gargantext/Components/GraphExplorer/Sigmajs.js

@@ -66,3 +66,78 @@ exports.pauseForceAtlas2 = function() {
   }
 };
 
+exports.cursor_size = 10;
+
+// TODO
+exports.shift_key = false;
+
+exports.trackMouse = function() {
+    var partialGraph = window.sigmaGargInstance;
+    console.log('FUN t.minimap:trackMouse')
+    if(!exports.shift_key) {
+        // $.doTimeout(300,function (){
+            var ctx = partialGraph._core.domElements.mouse.getContext('2d');
+            ctx.globalCompositeOperation = "source-over";
+            ctx.clearRect(0, 0, partialGraph._core.domElements.nodes.width, partialGraph._core.domElements.nodes.height);
+
+            x = partialGraph._core.mousecaptor.mouseX;
+            y = partialGraph._core.mousecaptor.mouseY;
+
+            ctx.strokeStyle = '#000';
+            ctx.lineWidth = 1;
+            ctx.fillStyle = "#71C3FF";
+            ctx.globalAlpha = 0.5;
+            ctx.beginPath();
+
+            if(partialGraph._core.mousecaptor.ratio>showLabelsIfZoom){
+                for(var i in partialGraph._core.graph.nodesIndex){
+                        n=partialGraph._core.graph.nodesIndex[i];
+                        if(n.hidden==false){
+                            distance = Math.sqrt(
+                                Math.pow((x-parseInt(n.displayX)),2) +
+                                Math.pow((y-parseInt(n.displayY)),2)
+                                );
+                            if(parseInt(distance)<=exports.cursor_size) {
+                                partialGraph._core.graph.nodesIndex[i].forceLabel=true;
+                            } else {
+                                if(typeof(n.neighbour)!=="undefined") {
+                                    if(!n.neighbour) partialGraph._core.graph.nodesIndex[i].forceLabel=false;
+                                } else partialGraph._core.graph.nodesIndex[i].forceLabel=false;
+                            }
+                        }
+                }
+                if(partialGraph.forceatlas2 && partialGraph.forceatlas2.count<=1) {
+                    partialGraph.draw(2,2,2);
+                }
+            } else {
+                for(var i in partialGraph._core.graph.nodesIndex){
+                    n=partialGraph._core.graph.nodesIndex[i];
+                    if(!n.hidden){
+                        partialGraph._core.graph.nodesIndex[i].forceLabel=false;
+                        if(typeof(n.neighbour)!=="undefined") {
+                            if(!n.neighbour) partialGraph._core.graph.nodesIndex[i].forceLabel=false;
+                            else partialGraph._core.graph.nodesIndex[i].forceLabel=true;
+                        } else partialGraph._core.graph.nodesIndex[i].forceLabel=false;
+                    }
+                }
+                if(partialGraph.forceatlas2 && partialGraph.forceatlas2.count<=1) {
+                    partialGraph.draw(2,2,2);
+                }
+            }
+            ctx.arc(x, y, exports.cursor_size, 0, Math.PI * 2, true);
+            //ctx.arc(partialGraph._core.width/2, partialGraph._core.height/2, 4, 0, 2 * Math.PI, true);/*todel*/
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+        // });
+    }
+};
+
+exports.sigmaOnMouseMove = function(e) {
+    return function() {
+      console.log('sigmaOnMouseMove');
+      if(typeof(window.sigmaGargInstance) !== "undefined") {
+          if(exports.cursor_size>0) exports.trackMouse();
+      }
+    };
+};

src/Gargantext/Components/GraphExplorer/Sigmajs.purs

@@ -260,6 +260,7 @@ type SigmaInstance = { | SigmaInstance' }
 type CameraInstance = { | CameraInstance' }
 foreign import setSigmaRef :: EffectFn1 (Nullable ReactRef) Unit
 foreign import getSigmaRef :: Effect SigmaInstance
+foreign import sigmaOnMouseMove :: forall o. o -> Effect Unit
 cameras :: SigmaInstance -> Array CameraInstance
 cameras = unsafeGet "cameras"
 

src/Gargantext/Pages/Corpus/Graph.purs

@@ -27,7 +27,7 @@ import Effect.Aff.Class (liftAff)
 import Effect.Class (liftEffect)
 import Effect.Console (log)
 import Effect.Uncurried (runEffectFn1, runEffectFn2)
-import Gargantext.Components.GraphExplorer.Sigmajs (Color(Color), SigmaEasing, SigmaGraphData(SigmaGraphData), SigmaNode, SigmaSettings, canvas, edgeShape, edgeShapes, forceAtlas2, setSigmaRef, getSigmaRef, cameras, CameraProps, getCameraProps, goTo, pauseForceAtlas2, sStyle, sigma, sigmaEasing, sigmaEdge, sigmaEnableWebGL, sigmaNode, sigmaSettings)
+import Gargantext.Components.GraphExplorer.Sigmajs (Color(Color), SigmaEasing, SigmaGraphData(SigmaGraphData), SigmaNode, SigmaSettings, canvas, edgeShape, edgeShapes, forceAtlas2, setSigmaRef, getSigmaRef, cameras, CameraProps, getCameraProps, goTo, pauseForceAtlas2, sStyle, sigmaOnMouseMove, sigma, sigmaEasing, sigmaEdge, sigmaEnableWebGL, sigmaNode, sigmaSettings)
 import Gargantext.Components.GraphExplorer.Types (Cluster(..), MetaData(..), Edge(..), GraphData(..), Legend(..), Node(..), getLegendData)
 import Gargantext.Components.Login.Types (AuthData(..), TreeId)
 import Gargantext.Components.RandomText (words)
@@ -42,7 +42,7 @@ import Math (cos, sin)
 import Partial.Unsafe (unsafePartial)
 import React (ReactElement)
 import React.DOM (a, br', h2, button, div, form', input, li, li', menu, option, p, select, span, text, ul, ul')
-import React.DOM.Props (_id, _type, checked, className, defaultValue, href, max, min, name, onChange, onClick, placeholder, style, title, value)
+import React.DOM.Props (_id, _type, checked, className, defaultValue, href, max, min, name, onChange, onClick, placeholder, style, title, value, onMouseMove)
 import Thermite (PerformAction, Render, Spec, _render, cmapProps, createClass, defaultPerformAction, defaultRender, modifyState, modifyState_, noState, simpleSpec, withState)
 import Unsafe.Coerce (unsafeCoerce)
 import Web.HTML (window)
@@ -534,7 +534,8 @@ specOld = fold [treespec treeSpec, graphspec $ simpleSpec performAction render']
          ]
          , div [className "row"]
            [div [if (st.showSidePanel && st.showTree) then className "col-md-10" else if (st.showSidePanel || st.showTree) then className "col-md-10" else className "col-md-12"]
-             [ div [style {height: "90%"}] $
+             [ div [style {height: "90%"}
+                   ,onMouseMove sigmaOnMouseMove] $
                [
                ]
                <>