--- a/client/README.md Fri Mar 13 13:29:02 2015 +0100
+++ b/client/README.md Fri Mar 13 16:33:49 2015 +0100
@@ -1,7 +1,7 @@
# Renkan - Client configuration
-Renkan is a tool to simply build oriented graphs by creating nodes and drag'n'droping links,
-pictures and html elements from web pages. Each node can have title, description, uri/url, color,
+Renkan is a tool to simply build oriented graphs by creating nodes and drag'n'droping links,
+pictures and html elements from web pages. Each node can have title, description, uri/url, color,
image and specific size. Each node can have title, uri/url and color.
@@ -28,7 +28,7 @@
Your Renkan should be displayed. Now let's see more specifically the 2 displays possibilities : in body 100% or in a div with set width and height.
N.B. : renkan.js is the concatenation of those js files : header.js main.js models.js defaults.js i18n.js paper-renderer.js full-json.js ldtjson-bin.js list-bin.js wikipedia-bin.js.
-It is built with the script available in sbin/build/compil.sh.
+It is built with the script available in sbin/build/compil.sh.
### In body 100%
@@ -41,7 +41,7 @@
### In a div
-The renkan div has the css attributes position:absolute/top:0/left:0/bottom:0/right:0,
+The renkan div has the css attributes position:absolute/top:0/left:0/bottom:0/right:0,
so the parent div has to be in position:relative and define width and height. Here is a simple example including css and partial html :
<head>
@@ -98,7 +98,7 @@
### Simple mode : no bins on the left, just the canvas
-To embed a simple writable Renkan, just add this script tag. In the client folder, "data/simple-persist.php" makes a very simple persistent url.
+To embed a simple writable Renkan, just add this script tag. In the client folder, "data/simple-persist.php" makes a very simple persistent url.
The persistent url is supposed to give the json data on GET request at page load, and save datas at PUT request sent by the browser :
<script type="text/javascript">
@@ -118,7 +118,7 @@
On the right of your renkan interface, you can add some search engine and data bins.
-Search engine can be the current [IRI's Lignes de temps platform](http://ldt.iri.centrepompidou.fr/) and wikipedia in any available language.
+Search engine can be the current [IRI's Lignes de temps platform](http://ldt.iri.centrepompidou.fr/) and wikipedia in any available language.
Here is an example of configuration :
_renkan = new Rkns.Renkan({
@@ -288,7 +288,7 @@
You can override, partially or totally, the function that handle the drop event from an other web page.
The current function catches drops from google results page, tweets, links, images and other things like svg paths.
If you want to override totally the handler function, you can define a **drop\_handler** function that receives a \_data object
-and returns a node object. A node object has title, description, image and uri properties. The \_data object is received from the
+and returns a node object. A node object has title, description, image and uri properties. The \_data object is received from the
browser's drop event. Here is an example of drop\_handler function :
_renkan = new Rkns.Renkan({
@@ -302,7 +302,7 @@
});
-You can also define a **drop\_enhancer** function that receives the already formed node object and \_data object. This function has to
+You can also define a **drop\_enhancer** function that receives the already formed node object and \_data object. This function has to
return the overriden node object. Here is an example of drop\_enhancer function :
_renkan = new Rkns.Renkan({
@@ -324,4 +324,5 @@
For read only examples, it appears that for security reasons urls like file:///path/to/folder/test-readonly-\*.html only work on Firefox.
To see those examples with other browsers, you also need to run a localhost server and go to a url like http://localhost/renkan/test/test-readonly-\*.html.
-
+## Note
+There is currently a bug when hovering
--- a/client/bower.json Fri Mar 13 13:29:02 2015 +0100
+++ b/client/bower.json Fri Mar 13 16:33:49 2015 +0100
@@ -34,6 +34,6 @@
"requirejs": null
},
"devDependencies": {
- "jquery-ui": "~1.11.2"
+ "jquery-ui": "~1.11.4"
}
}
--- a/client/js/renderer/scene.js Fri Mar 13 13:29:02 2015 +0100
+++ b/client/js/renderer/scene.js Fri Mar 13 16:33:49 2015 +0100
@@ -554,31 +554,31 @@
},
drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) {
var _options = this.renkan.options,
- _startRads = _startAngle * Math.PI / 180,
- _endRads = _endAngle * Math.PI / 180,
- _img = this.icon_cache[_imgname],
- _startdx = - Math.sin(_startRads),
- _startdy = Math.cos(_startRads),
- _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
- _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
- _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
- _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,
- _enddx = - Math.sin(_endRads),
- _enddy = Math.cos(_endRads),
- _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,
- _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,
- _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,
- _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
- _centerR = (_inR + _outR) / 2,
- _centerRads = (_startRads + _endRads) / 2,
- _centerX = Math.cos(_centerRads) * _centerR,
- _centerY = Math.sin(_centerRads) * _centerR,
- _centerXIn = Math.cos(_centerRads) * _inR,
- _centerXOut = Math.cos(_centerRads) * _outR,
- _centerYIn = Math.sin(_centerRads) * _inR,
- _centerYOut = Math.sin(_centerRads) * _outR,
- _textX = Math.cos(_centerRads) * (_outR + 3),
- _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2;
+ _startRads = _startAngle * Math.PI / 180,
+ _endRads = _endAngle * Math.PI / 180,
+ _img = this.icon_cache[_imgname],
+ _startdx = - Math.sin(_startRads),
+ _startdy = Math.cos(_startRads),
+ _startXIn = Math.cos(_startRads) * _inR + _padding * _startdx,
+ _startYIn = Math.sin(_startRads) * _inR + _padding * _startdy,
+ _startXOut = Math.cos(_startRads) * _outR + _padding * _startdx,
+ _startYOut = Math.sin(_startRads) * _outR + _padding * _startdy,
+ _enddx = - Math.sin(_endRads),
+ _enddy = Math.cos(_endRads),
+ _endXIn = Math.cos(_endRads) * _inR - _padding * _enddx,
+ _endYIn = Math.sin(_endRads) * _inR - _padding * _enddy,
+ _endXOut = Math.cos(_endRads) * _outR - _padding * _enddx,
+ _endYOut = Math.sin(_endRads) * _outR - _padding * _enddy,
+ _centerR = (_inR + _outR) / 2,
+ _centerRads = (_startRads + _endRads) / 2,
+ _centerX = Math.cos(_centerRads) * _centerR,
+ _centerY = Math.sin(_centerRads) * _centerR,
+ _centerXIn = Math.cos(_centerRads) * _inR,
+ _centerXOut = Math.cos(_centerRads) * _outR,
+ _centerYIn = Math.sin(_centerRads) * _inR,
+ _centerYOut = Math.sin(_centerRads) * _outR,
+ _textX = Math.cos(_centerRads) * (_outR + 3),
+ _textY = Math.sin(_centerRads) * (_outR + _options.buttons_label_font_size) + _options.buttons_label_font_size / 2;
this.buttons_layer.activate();
var _path = new paper.Path();
_path.add([_startXIn, _startYIn]);
@@ -603,12 +603,15 @@
}
_text.visible = false;
var _visible = false,
- _restPos = new paper.Point(-200, -200),
- _grp = new paper.Group([_path, _text]),
- _delta = _grp.position,
- _imgdelta = new paper.Point([_centerX, _centerY]),
- _currentPos = new paper.Point(0,0);
+ _restPos = new paper.Point(-200, -200),
+ _grp = new paper.Group([_path, _text]),
+ //_grp = new paper.Group([_path]),
+ _delta = _grp.position,
+ _imgdelta = new paper.Point([_centerX, _centerY]),
+ _currentPos = new paper.Point(0,0);
_text.content = _caption;
+ // set group pivot to not depend on text visibility that changes the group bounding box.
+ _grp.pivot = _grp.bounds.center;
_grp.visible = false;
_grp.position = _restPos;
var _res = {