├── img ├── add.png ├── edit.png ├── male.png ├── delete.png ├── female.png └── invite.png ├── people ├── dina.jpg ├── inna.jpg ├── ivo.jpg ├── maks.jpg ├── oleg.jpg ├── antija.jpg ├── artur.jpg ├── bokta.jpg ├── dasha.jpg ├── elisej.jpg ├── julja.jpg ├── linda.jpg ├── nastja.jpg ├── pavel.jpg ├── plehs.jpg ├── silin.jpg ├── trafim.jpg ├── kochuga.jpg ├── kurchik.jpg ├── migunov.jpg ├── tarasik.jpg ├── vitalik.jpg └── aleksandra.jpg ├── style ├── img │ ├── arrow.png │ └── loader.gif ├── fonts │ ├── DejaVuSans.ttf │ ├── DejaVuSerif.ttf │ ├── DejaVuSansMono.ttf │ ├── DejaVuSans-Bold.ttf │ ├── DejaVuSerif-Bold.ttf │ ├── DejaVuSans-Oblique.ttf │ ├── DejaVuSansCondensed.ttf │ ├── DejaVuSansMono-Bold.ttf │ ├── DejaVuSerif-Italic.ttf │ ├── DejaVuSans-ExtraLight.ttf │ ├── DejaVuSerifCondensed.ttf │ ├── DejaVuSans-BoldOblique.ttf │ ├── DejaVuSansCondensed-Bold.ttf │ ├── DejaVuSansMono-Oblique.ttf │ ├── DejaVuSerif-BoldItalic.ttf │ ├── DejaVuSansMono-BoldOblique.ttf │ ├── DejaVuSerifCondensed-Bold.ttf │ ├── DejaVuSansCondensed-Oblique.ttf │ ├── DejaVuSerifCondensed-Italic.ttf │ ├── DejaVuSansCondensed-BoldOblique.ttf │ └── DejaVuSerifCondensed-BoldItalic.ttf ├── .sass-cache │ ├── 494beb6c04c81dce77689ef2365b1f1840dff9f2 │ │ └── fskytree.scssc │ ├── 67ea5eef83c20a3e455f760e03e531dfa1521739 │ │ └── fskytree.scssc │ ├── d7dbb3fa464cccd7ea48668644e6f77a1aaec454 │ │ └── fskytree.scssc │ └── ffd5020e99c36ac2e6bc041fc1b38a7dea00aace │ │ └── fskytree.scssc ├── css │ └── fskytree.css └── scss │ └── fskytree.scss ├── index.php ├── tree3.json ├── index.html ├── main.js ├── tree2.json ├── fskytree ├── component │ ├── geometry.js │ ├── builder.js │ ├── loader.js │ ├── scrolling.js │ ├── renderer.js │ └── calculator.js ├── plugin │ ├── overlay.js │ ├── history.js │ ├── actions.js │ └── camomile.js ├── tree.js └── view │ ├── family.js │ ├── node.js │ └── member.js ├── vendor ├── raphael.ext.js ├── scrollto.js ├── require.js └── kinetic.js └── tree.json /img/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/add.png -------------------------------------------------------------------------------- /img/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/edit.png -------------------------------------------------------------------------------- /img/male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/male.png -------------------------------------------------------------------------------- /img/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/delete.png -------------------------------------------------------------------------------- /img/female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/female.png -------------------------------------------------------------------------------- /img/invite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/img/invite.png -------------------------------------------------------------------------------- /people/dina.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/dina.jpg -------------------------------------------------------------------------------- /people/inna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/inna.jpg -------------------------------------------------------------------------------- /people/ivo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/ivo.jpg -------------------------------------------------------------------------------- /people/maks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/maks.jpg -------------------------------------------------------------------------------- /people/oleg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/oleg.jpg -------------------------------------------------------------------------------- /people/antija.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/antija.jpg -------------------------------------------------------------------------------- /people/artur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/artur.jpg -------------------------------------------------------------------------------- /people/bokta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/bokta.jpg -------------------------------------------------------------------------------- /people/dasha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/dasha.jpg -------------------------------------------------------------------------------- /people/elisej.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/elisej.jpg -------------------------------------------------------------------------------- /people/julja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/julja.jpg -------------------------------------------------------------------------------- /people/linda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/linda.jpg -------------------------------------------------------------------------------- /people/nastja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/nastja.jpg -------------------------------------------------------------------------------- /people/pavel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/pavel.jpg -------------------------------------------------------------------------------- /people/plehs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/plehs.jpg -------------------------------------------------------------------------------- /people/silin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/silin.jpg -------------------------------------------------------------------------------- /people/trafim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/trafim.jpg -------------------------------------------------------------------------------- /people/kochuga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/kochuga.jpg -------------------------------------------------------------------------------- /people/kurchik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/kurchik.jpg -------------------------------------------------------------------------------- /people/migunov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/migunov.jpg -------------------------------------------------------------------------------- /people/tarasik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/tarasik.jpg -------------------------------------------------------------------------------- /people/vitalik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/vitalik.jpg -------------------------------------------------------------------------------- /style/img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/img/arrow.png -------------------------------------------------------------------------------- /style/img/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/img/loader.gif -------------------------------------------------------------------------------- /people/aleksandra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/people/aleksandra.jpg -------------------------------------------------------------------------------- /style/fonts/DejaVuSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/fonts/DejaVuSans.ttf -------------------------------------------------------------------------------- /style/fonts/DejaVuSerif.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/fonts/DejaVuSerif.ttf -------------------------------------------------------------------------------- /style/fonts/DejaVuSansMono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/fonts/DejaVuSansMono.ttf -------------------------------------------------------------------------------- /style/fonts/DejaVuSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/fonts/DejaVuSans-Bold.ttf -------------------------------------------------------------------------------- /style/fonts/DejaVuSerif-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connected/familytree/master/style/fonts/DejaVuSerif-Bold.ttf -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Raphael 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Andrejs Silins

19 | 20 |
21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | paths: { 3 | 'jquery': 'vendor/jquery', 4 | 'raphael': '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min' 5 | } 6 | }); 7 | 8 | 9 | require([ 10 | 'fskytree/tree', 11 | 'fskytree/plugin/actions', 12 | 'fskytree/plugin/overlay', 13 | 'fskytree/plugin/camomile', 14 | 'fskytree/plugin/history' 15 | ], function(FskyTree, Actions, Overlay, Camomile, History) { 16 | 17 | var fskyTree = new FskyTree(); 18 | 19 | fskyTree.plugin(Actions); 20 | fskyTree.plugin(Overlay); 21 | fskyTree.plugin(Camomile); 22 | fskyTree.plugin(History, {handlerUrl: 'tree2.json'}); 23 | 24 | fskyTree.load('tree.json'); 25 | 26 | $(fskyTree).on('tree/ready', function(){ 27 | this.render(); 28 | }); 29 | 30 | $(fskyTree).on('tree/error', function(e, error){ 31 | alert('Tree error!'); 32 | }); 33 | 34 | $(fskyTree).on('tree/member/add/son', function(e, member){ 35 | alert(member.lastname); 36 | }); 37 | 38 | }); 39 | -------------------------------------------------------------------------------- /tree2.json: -------------------------------------------------------------------------------- 1 | { 2 | "member": { 3 | "id": "6ej775223r3", 4 | "firstname": "Linda", 5 | "lastname": "Zaikovska", 6 | "sex": 2, 7 | "image": "people/linda.jpg" 8 | }, 9 | "children": [ 10 | { 11 | "member": { 12 | "id": "6ej774t23r3", 13 | "firstname": "Jūlija", 14 | "lastname": "Belova", 15 | "current": true, 16 | "sex": 2, 17 | "image": "people/julja.jpg" 18 | }, 19 | "partner": { 20 | "id": "sdf4fsh544", 21 | "firstname": "Oļegs", 22 | "lastname": "Jaroševičs", 23 | "sex": 1, 24 | "image": "people/oleg.jpg", 25 | "relatives": 4 26 | } 27 | }, 28 | { 29 | "member": { 30 | "id": "6ej774t23r3", 31 | "firstname": "Nataļja", 32 | "lastname": "Kočjuga", 33 | "sex": 2, 34 | "image": "people/kochuga.jpg" 35 | } 36 | }, 37 | { 38 | "member": { 39 | "id": "gg57h5623r3", 40 | "firstname": "Sergejs", 41 | "lastname": "Trofimovs", 42 | "sex": 1, 43 | "image": "people/trafim.jpg" 44 | } 45 | } 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /fskytree/component/geometry.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module){ 2 | 3 | var $ = require('jquery'); 4 | 5 | /** 6 | * @class Geometry 7 | * @version 1.0 8 | */ 9 | var Geometry = new function() 10 | { 11 | var _self; 12 | 13 | /** 14 | * Public API 15 | */ 16 | this.Point = Point; 17 | 18 | /** 19 | * Calculate sinus value for specified angle. 20 | * 21 | * @param {number} Angle value 22 | * @returns {Number} 23 | */ 24 | this.sin = function(angle) 25 | { 26 | return Math.sin(_self.degrad(angle)); 27 | }; 28 | 29 | /** 30 | * Calculate cosinus value for specified angle. 31 | * 32 | * @param {number} Angle value 33 | * @returns {Number} 34 | */ 35 | this.cos = function(angle) 36 | { 37 | return Math.cos(_self.degrad(angle)); 38 | }; 39 | 40 | /** 41 | * Calculate cirlce point position using radius and angle. 42 | * 43 | * @param {number} Angle value(usually from 0 to 360) 44 | * @param {number} Radius value 45 | * @param {Point} [offset] Center point 46 | * @returns {Point} 47 | */ 48 | this.circlePoint = function(angle, radius, offset) 49 | { 50 | if (typeof(offset) != 'object' || !offset instanceof Point) { 51 | offset = new Point(); 52 | } 53 | 54 | return new Point( 55 | (_self.cos(angle)) * radius + offset.x, 56 | (_self.sin(angle)) * radius + offset.y 57 | ); 58 | }; 59 | 60 | /** 61 | * Convert degrees to radians. 62 | * 63 | * @param {number} Angle value 64 | * @returns {Number} 65 | */ 66 | this.degrad = function(angle) 67 | { 68 | return -angle / 180 * Math.PI; 69 | }; 70 | 71 | /** 72 | * @class Point 73 | * @classdesc Class that represents 2D geometry point. 74 | */ 75 | function Point(x, y) 76 | { 77 | this.x = x || 0; 78 | this.y = y || 0; 79 | }; 80 | 81 | //Make self reference 82 | _self = this; 83 | }; 84 | 85 | return Geometry; 86 | 87 | }); 88 | -------------------------------------------------------------------------------- /fskytree/component/builder.js: -------------------------------------------------------------------------------- 1 | define(function(require, exports, module){ 2 | 3 | var $ = require('jquery'), 4 | Node = require('fskytree/view/node'); 5 | 6 | /** 7 | * @class Builder 8 | * @classdesc Tree builder "class" is responsible for parsing JSON tree data. 9 | */ 10 | var Builder = function(tree, options) 11 | { 12 | /** 13 | * @type {Builder} 14 | */ 15 | var _self; 16 | 17 | /** 18 | * @type {Object} Object containing component setting values 19 | */ 20 | this.settings = { 21 | 22 | }; 23 | 24 | /** 25 | * Constructor. 26 | * 27 | * @constructs Builder 28 | */ 29 | function construct(options) 30 | { 31 | //Extend loader settings with specified options 32 | $.extend(_self.settings, options); 33 | 34 | //Build tree root node after tree data is loaded 35 | $(tree).on('tree/load', _self.build); 36 | } 37 | 38 | /** 39 | * Build root node from JSON tree data. 40 | * 41 | * @param {jQuery.Event} Event instance 42 | * @param {Object} data JSON tree data 43 | * @return {Builder} Builder instance 44 | */ 45 | this.build = function(e, data) 46 | { 47 | tree.root = _self.walk(data); 48 | 49 | //Notify that root tree node structure has been built 50 | $(tree).trigger('tree/built', [tree.root]); 51 | 52 | return this; 53 | }; 54 | 55 | /** 56 | * Recursively walk JSON data. 57 | * 58 | * @param {Object} data JSON node data 59 | * @return {Node} Tree node instance 60 | */ 61 | this.walk = function(data) 62 | { 63 | var node = new Node(tree, data); 64 | 65 | if (data.children) { 66 | for (var i=0;i