diff --git a/src/Gargantext/Components/GraphExplorer/Sigmajs.js b/src/Gargantext/Components/GraphExplorer/Sigmajs.js index 47a04037c670905c6cc2e7a9bf89b59d2c1e8e31..8cecdd5a155ca47054d09c05bb9c8a5575b8b3f2 100644 --- a/src/Gargantext/Components/GraphExplorer/Sigmajs.js +++ b/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(); + } + }; +}; diff --git a/src/Gargantext/Components/GraphExplorer/Sigmajs.purs b/src/Gargantext/Components/GraphExplorer/Sigmajs.purs index 9f4f726520e8e68d4c0f9182511d467eb2bd4d4e..377979db392ed060a02b2ef91e1f17ebc2beee96 100644 --- a/src/Gargantext/Components/GraphExplorer/Sigmajs.purs +++ b/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" diff --git a/src/Gargantext/Pages/Corpus/Graph.purs b/src/Gargantext/Pages/Corpus/Graph.purs index c998011f60fd115d57ac1c9aaeff49628310cecf..e3f665d9e002bd73e5300705bced8d621de7b3ff 100644 --- a/src/Gargantext/Pages/Corpus/Graph.purs +++ b/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] $ [ ] <>