# HG changeset patch # User rougeronj # Date 1441804733 -7200 # Node ID d55176dc72cc3a5959442cb25df0a5e24dfbe4ec # Parent 480c1d2d6915d7322e517c92850e9ee8d830d1c4# Parent 08d121184a38a7bee1dd9de3cb171c6758d59310 Merge with 08d121184a38a7bee1dd9de3cb171c6758d59310 diff -r 08d121184a38 -r d55176dc72cc client/data/example-cinema-src.json --- a/client/data/example-cinema-src.json Wed Sep 09 14:06:02 2015 +0200 +++ b/client/data/example-cinema-src.json Wed Sep 09 15:18:53 2015 +0200 @@ -630,6 +630,13 @@ { "_id": "view-2014-02-18-628af15b-12ad-457a-8ac0-a28c8998cc3b-0001", "zoom_level": 0.8275032552816195, + "offset_x": 532.0104075533723, + "offset_y": 102.8917139487223, + "hidden_nodes":["node-2013-04-06-e1c743b12401d6ec-0002","node-2013-04-06-e1c743b12401d6ec-0006"] + }, + { + "_id": "view-2014-02-18-628af15b-12ad-457a-8ac0-a28c8998cc3b-0002", + "zoom_level": 0.8275032552816195, "offset_x": 832.0104075533723, "offset_y": 402.8917139487223 } diff -r 08d121184a38 -r d55176dc72cc client/js/defaults.js --- a/client/js/defaults.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/defaults.js Wed Sep 09 15:18:53 2015 +0200 @@ -50,6 +50,10 @@ default_view: false, /* Allows to load default view (zoom+offset) at start on read_only mode, instead of autoScale. the default_view will be the last */ + /* URL parsing */ + update_url:true, + /* update the url each time the paper shift or on zoom in/out, with the serialized view (offset and scale) */ + /* TOP BAR BUTTONS */ show_search_field: true, diff -r 08d121184a38 -r d55176dc72cc client/js/main-renderer.js --- a/client/js/main-renderer.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/main-renderer.js Wed Sep 09 15:18:53 2015 +0200 @@ -39,8 +39,9 @@ 'renderer/edgeremovebutton', 'renderer/edgerevertbutton', 'renderer/miniframe', - 'renderer/scene' - ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeHideButton, NodeShowButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene){ + 'renderer/scene', + 'renderer/viewrepr' + ], function(BaseRepresentation, BaseButton, NodeRepr, Edge, TempEdge, BaseEditor, NodeEditor, EdgeEditor, NodeButton, NodeEditButton, NodeRemoveButton, NodeHideButton, NodeShowButton, NodeRevertButton, NodeLinkButton, NodeEnlargeButton, NodeShrinkButton, EdgeEditButton, EdgeRemoveButton, EdgeRevertButton, MiniFrame, Scene, ViewRepr){ 'use strict'; @@ -55,6 +56,7 @@ Renderer._BaseButton = BaseButton; Renderer.Node = NodeRepr; Renderer.Edge = Edge; + Renderer.View = ViewRepr; Renderer.TempEdge = TempEdge; Renderer._BaseEditor = BaseEditor; Renderer.NodeEditor = NodeEditor; diff -r 08d121184a38 -r d55176dc72cc client/js/renderer/basebutton.js --- a/client/js/renderer/basebutton.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/renderer/basebutton.js Wed Sep 09 15:18:53 2015 +0200 @@ -18,7 +18,9 @@ this.sector.show(); }, hide: function() { - this.sector.hide(); + if (this.sector){ + this.sector.hide(); + } }, select: function() { this.sector.select(); diff -r 08d121184a38 -r d55176dc72cc client/js/renderer/nodehidebutton.js --- a/client/js/renderer/nodehidebutton.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/renderer/nodehidebutton.js Wed Sep 09 15:18:53 2015 +0200 @@ -23,7 +23,7 @@ this.renderer.is_dragging = false; this.renderer.removeRepresentationsOfType("editor"); if (this.renderer.isEditable()) { - this.renderer.addHiddenNode(this.source_representation.model); + this.renderer.view.addHiddenNode(this.source_representation.model); } } }).value(); diff -r 08d121184a38 -r d55176dc72cc client/js/renderer/noderepr.js --- a/client/js/renderer/noderepr.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/renderer/noderepr.js Wed Sep 09 15:18:53 2015 +0200 @@ -96,7 +96,7 @@ if (!this.is_dragging || !this.paper_coords) { this.paper_coords = this.renderer.toPaperCoords(_model_coords); } - this.circle_radius = _baseRadius * this.renderer.scale; + this.circle_radius = _baseRadius * this.renderer.view.scale; if (this.last_circle_radius !== this.circle_radius) { this.all_buttons.forEach(function(b) { b.setSectorSize(); @@ -347,7 +347,7 @@ this.redraw(); } } else { - this.renderer.paperShift(_delta); + this.renderer.view.paperShift(_delta); } }, openEditor: function() { @@ -455,6 +455,7 @@ this.title.css('opacity', this.options.ghost_opacity); this.minimap_circle.opacity = this.options.ghost_opacity; } else { + this.minimap_circle.opacity = 1; this.hidden = false; this.redraw(); } @@ -502,9 +503,9 @@ if (repr && repr.hidden) { repr.show(ghost); if (!ghost){ - var indexNode = _this.renderer.hiddenNodes.indexOf(repr.model.id); + var indexNode = _this.renderer.view.hiddenNodes.indexOf(repr.model.id); if (indexNode !== -1){ - _this.renderer.hiddenNodes.splice(indexNode, 1); + _this.renderer.view.hiddenNodes.splice(indexNode, 1); } } } @@ -551,9 +552,9 @@ this.saveCoords(); } else { if (this.hidden) { - var index = this.renderer.hiddenNodes.indexOf(this.model.id); + var index = this.renderer.view.hiddenNodes.indexOf(this.model.id); if (index !== -1){ - this.renderer.hiddenNodes.splice(index, 1); + this.renderer.view.hiddenNodes.splice(index, 1); } this.show(false); this.select(); diff -r 08d121184a38 -r d55176dc72cc client/js/renderer/scene.js --- a/client/js/renderer/scene.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/renderer/scene.js Wed Sep 09 15:18:53 2015 +0200 @@ -21,11 +21,7 @@ } this.notif_$ = this.$.find(".Rk-Notifications"); paper.setup(this.canvas_$[0]); - this.scale = 1; - this.initialScale = 1; - this.offset = paper.view.center; this.totalScroll = 0; - this.hiddenNodes = []; this.mouse_down = false; this.click_target = null; this.selected_target = null; @@ -128,7 +124,7 @@ _lastTap = new Date(); _lastTapX = _touches.pageX; _lastTapY = _touches.pageY; - _originalScale = _this.scale; + _originalScale = _this.view.scale; _zooming = false; _this.onMouseDown(_touches, true); } @@ -149,12 +145,12 @@ return; } var _newScale = _event.originalEvent.scale * _originalScale, - _scaleRatio = _newScale / _this.scale, + _scaleRatio = _newScale / _this.view.scale, _newOffset = new paper.Point([ _this.canvas_$.width(), _this.canvas_$.height() - ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.offset.multiply( _scaleRatio )); - _this.setScale(_newScale, _newOffset); + ]).multiply( 0.5 * ( 1 - _scaleRatio ) ).add(_this.view.offset.multiply( _scaleRatio )); + _this.view.setScale(_newScale, _newOffset); } }, touchend: function(_event) { @@ -234,34 +230,6 @@ }); }; - bindClick(".Rk-ZoomOut", "zoomOut"); - bindClick(".Rk-ZoomIn", "zoomIn"); - bindClick(".Rk-ZoomFit", "autoScale"); - this.$.find(".Rk-ZoomSave").click( function() { - // Save scale and offset point - _this.renkan.project.addView( { zoom_level:_this.scale, offset:_this.offset, hidden_nodes: _this.hiddenNodes } ); - }); - this.$.find(".Rk-ZoomSetSaved").click( function() { - var view = _this.renkan.project.get("views").last(); - if(view){ - _this.showNodes(false); - _this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset"))); - if (_this.renkan.options.hide_nodes){ - _this.hiddenNodes = (view.get("hidden_nodes") || []).concat(); - _this.hideNodes(); - } - } - }); - this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() { - _this.showNodes(true); - _this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() { - _this.hideNodes(); - }); - }); - this.$.find(".Rk-ShowHiddenNodes").click( function() { - _this.showNodes(false); - _this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" ); - }); if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){ this.$.find(".Rk-ZoomSetSaved").show(); } @@ -314,7 +282,7 @@ _ratio = ratioW; } - _this.resizeZoom(ratioW, ratioH, _ratio); + _this.view.resizeZoom(ratioW, ratioH, _ratio); _this.redraw(); @@ -323,7 +291,7 @@ var _thRedraw = _.throttle(function() { _this.redraw(); },50); - + this.addRepresentations("Node", this.renkan.project.get("nodes")); this.addRepresentations("Edge", this.renkan.project.get("edges")); this.renkan.project.on("change:title", function() { @@ -370,6 +338,7 @@ } else{ Backbone.history.start(); + _thRedraw(); } }); @@ -518,13 +487,12 @@ _(Scene.prototype).extend({ fixSize: function() { - if( this.renkan.options.default_view && this.renkan.project.get("views").length > 0) { - var view = this.renkan.project.get("views").last(); - this.setScale(view.get("zoom_level"), new paper.Point(view.get("offset"))); - } - else{ - this.autoScale(); - } +// if(typeothis.view) { +// this.view.setScale(view.get("zoom_level"), new paper.Point(view.get("offset"))); +// } +// else{ +// this.view.autoScale(); +// } }, drawSector: function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgname, _caption) { var _options = this.renkan.options, @@ -674,38 +642,6 @@ } this.redrawUsers(); }, - setScale: function(_newScale, _offset) { - if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) { - this.scale = _newScale; - if (_offset) { - this.offset = _offset; - } - this.redraw(); - } - }, - autoScale: function(force_view) { - var nodes = this.renkan.project.get("nodes"); - if (nodes.length > 1) { - var _xx = nodes.map(function(_node) { return _node.get("position").x; }), - _yy = nodes.map(function(_node) { return _node.get("position").y; }), - _minx = Math.min.apply(Math, _xx), - _miny = Math.min.apply(Math, _yy), - _maxx = Math.max.apply(Math, _xx), - _maxy = Math.max.apply(Math, _yy); - var _scale = Math.min( (paper.view.size.width - 2 * this.renkan.options.autoscale_padding) / (_maxx - _minx), (paper.view.size.height - 2 * this.renkan.options.autoscale_padding) / (_maxy - _miny)); - this.initialScale = _scale; - // Override calculated scale if asked - if((typeof force_view !== "undefined") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){ - this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y))); - } - else{ - this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale))); - } - } - if (nodes.length === 1) { - this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]))); - } - }, redrawMiniframe: function() { var topleft = this.toMinimapCoords(this.toModelCoords(new paper.Point([0,0]))), bottomright = this.toMinimapCoords(this.toModelCoords(paper.view.bounds.bottomRight)); @@ -721,8 +657,8 @@ _maxx = Math.max.apply(Math, _xx), _maxy = Math.max.apply(Math, _yy); var _scale = Math.min( - this.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width, - this.scale * 0.8 * this.renkan.options.minimap_height / paper.view.bounds.height, + this.view.scale * 0.8 * this.renkan.options.minimap_width / paper.view.bounds.width, + this.view.scale * 0.8 * this.renkan.options.minimap_height / paper.view.bounds.height, ( this.renkan.options.minimap_width - 2 * this.renkan.options.minimap_padding ) / (_maxx - _minx), ( this.renkan.options.minimap_height - 2 * this.renkan.options.minimap_padding ) / (_maxy - _miny) ); @@ -736,19 +672,19 @@ this.redraw(); }, toPaperCoords: function(_point) { - return _point.multiply(this.scale).add(this.offset); + return _point.multiply(this.view.scale).add(this.view.offset); }, toMinimapCoords: function(_point) { return _point.multiply(this.minimap.scale).add(this.minimap.offset).add(this.minimap.topleft); }, toModelCoords: function(_point) { - return _point.subtract(this.offset).divide(this.scale); + return _point.subtract(this.view.offset).divide(this.view.scale); }, addRepresentation: function(_type, _model) { var RendererType = requtils.getRenderer()[_type]; var _repr = new RendererType(this, _model); this.representations.push(_repr); - return _repr; + return _repr; }, addRepresentations: function(_type, _collection) { var _this = this; @@ -864,7 +800,7 @@ _.each(this.representations, function(_representation) { _representation.redraw({ dontRedrawEdges:true }); }); - if (this.minimap) { + if (this.minimap && typeof this.view !== 'undefined') { this.redrawMiniframe(); } paper.view.draw(); @@ -876,40 +812,6 @@ _tmpEdge.redraw(); this.click_target = _tmpEdge; }, - addHiddenNode: function(_model){ - this.hideNode(_model); - this.hiddenNodes.push(_model.id); - }, - hideNode: function(_model){ - var _this = this; - if (typeof _this.getRepresentationByModel(_model) !== 'undefined'){ - _this.getRepresentationByModel(_model).hide(); - } - }, - hideNodes: function(){ - var _this = this; - this.hiddenNodes.forEach(function(_id, index){ - var node = _this.renkan.project.get("nodes").get(_id); - if (typeof node !== 'undefined'){ - return _this.hideNode(_this.renkan.project.get("nodes").get(_id)); - }else{ - _this.hiddenNodes.splice(index, 1); - } - }); - paper.view.draw(); - }, - showNodes: function(ghost){ - var _this = this; - var i = 0; - this.hiddenNodes.forEach(function(_id){ - i++; - _this.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost); - }); - if (!ghost){ - this.hiddenNodes = []; - } - paper.view.draw(); - }, findTarget: function(_hitResult) { if (_hitResult && typeof _hitResult.item.__representation !== "undefined") { var _newTarget = _hitResult.item.__representation; @@ -927,10 +829,6 @@ this.selected_target = null; } }, - paperShift: function(_delta) { - this.offset = this.offset.add(_delta); - this.redraw(); - }, onMouseMove: function(_event) { var _off = this.canvas_$.offset(), _point = new paper.Point([ @@ -947,7 +845,7 @@ if (this.click_target && typeof this.click_target.paperShift === "function") { this.click_target.paperShift(_delta); } else { - this.paperShift(_delta); + this.view.paperShift(_delta); } } else { this.findTarget(_hitResult); @@ -1020,6 +918,7 @@ if (_isTouch) { this.unselectAll(); } + this.view.updateUrl(); } paper.view.draw(); }, @@ -1030,11 +929,11 @@ _delta = new paper.Point([ _event.pageX - _off.left, _event.pageY - _off.top - ]).subtract(this.offset).multiply( Math.SQRT2 - 1 ); + ]).subtract(this.view.offset).multiply( Math.SQRT2 - 1 ); if (this.totalScroll > 0) { - this.setScale( this.scale * Math.SQRT2, this.offset.subtract(_delta) ); + this.view.setScale( this.view.scale * Math.SQRT2, this.view.offset.subtract(_delta) ); } else { - this.setScale( this.scale * Math.SQRT1_2, this.offset.add(_delta.divide(Math.SQRT2))); + this.view.setScale( this.view.scale * Math.SQRT1_2, this.view.offset.add(_delta.divide(Math.SQRT2))); } this.totalScroll = 0; } @@ -1234,30 +1133,6 @@ this.redraw(); } }, - zoomOut: function() { - var _newScale = this.scale * Math.SQRT1_2, - _offset = new paper.Point([ - this.canvas_$.width(), - this.canvas_$.height() - ]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 )); - this.setScale( _newScale, _offset ); - }, - zoomIn: function() { - var _newScale = this.scale * Math.SQRT2, - _offset = new paper.Point([ - this.canvas_$.width(), - this.canvas_$.height() - ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 )); - this.setScale( _newScale, _offset ); - }, - resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) { - var _newScale = this.scale * _ratio, - _offset = new paper.Point([ - (this.offset.x * _scaleWidth), - (this.offset.y * _scaleHeight) - ]); - this.setScale( _newScale, _offset ); - }, addNodeBtn: function() { if (this.click_mode === Utils._CLICKMODE_ADDNODE) { this.click_mode = false; @@ -1325,9 +1200,42 @@ }, parameters: function(_params){ - if (typeof _params.idnode !== 'undefined'){ + if ($.isEmptyObject(_params)){ + this.view = this.addRepresentation("View", this.renkan.project.get("views").last()); + return; + } + if (typeof _params.view !== 'undefined'){ + var viewParams = _params.view.split(","); + if (viewParams.length >= 3){ + var params = { + "project": this.renkan.project, + "offset": { + "x": parseFloat(viewParams[0]), + "y": parseFloat(viewParams[1]) + }, + "zoom_level": parseFloat(viewParams[2]) + }; + for (var i = 3; i < viewParams.length; i++){ + params.hidden_nodes.push(viewParams[i]); + } + //var view = new Rkns.Models.View(params); + + if (this.view){ + this.view.showNodes(false); + this.removeRepresentation(this.view); + } + + this.view = this.addRepresentation("View", null); + this.view.params = params; + this.view.init(); + } else { + this.view = this.addRepresentation("View", this.renkan.project.get("views").last()); + } + } + //other parameters must go after because most of them depends on a view that must be initialize before + if (typeof _params.idNode !== 'undefined'){ this.unhighlightAll(); - this.highlightModel(this.renkan.project.get("nodes").get(_params.idnode)); + this.highlightModel(this.renkan.project.get("nodes").get(_params.iNnode)); } }, foldBins: function() { @@ -1357,7 +1265,7 @@ sizeAft = sizeBef+300; foldBinsButton.html("»"); } - _this.resizeZoom(1, 1, (sizeAft/sizeBef)); + _this.view.resizeZoom(1, 1, (sizeAft/sizeBef)); }, save: function() { }, open: function() { } diff -r 08d121184a38 -r d55176dc72cc client/js/renderer/viewrepr.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/js/renderer/viewrepr.js Wed Sep 09 15:18:53 2015 +0200 @@ -0,0 +1,211 @@ +define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) { + 'use strict'; + + var Utils = requtils.getUtils(); + + /* Rkns.Renderer.View Class */ + + /* The representation for the view. */ + + var ViewRepr = Utils.inherit(BaseRepresentation); + + _(ViewRepr.prototype).extend({ + _init: function() { + var _this = this; + this.$ = $(".Rk-Render"); + this.type = "View"; + this.hiddenNodes = []; + this.scale = 1; + this.initialScale = 1; + this.offset = paper.view.center; + this.params = {}; + + if (this.model){ + this.params = { + "zoom_level": _this.model.get("zoom_level"), + "offset": _this.model.get("offset"), + "hidden_nodes": _this.model.get("hidden_nodes") + }; + } + + this.init(); + + var bindClick = function(selector, fname) { + _this.$.find(selector).click(function(evt) { + _this[fname](evt); + return false; + }); + }; + + bindClick(".Rk-ZoomOut", "zoomOut"); + bindClick(".Rk-ZoomIn", "zoomIn"); + bindClick(".Rk-ZoomFit", "autoScale"); + + this.$.find(".Rk-ZoomSave").click( function() { + var offset = { + "x": _this.offset.x, + "y": _this.offset.y + }; + //TODO: make the if else the same function + if (_this.model){ + _this.model.set( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } ); + }else{ + _this.model = _this.renkan.project.addView( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } ); + } + _this.params = { + "zoom_level": _this.model.get("zoom_level"), + "offset": _this.model.get("offset"), + "hidden_nodes": _this.model.get("hidden_nodes") + }; + }); + + this.$.find(".Rk-ZoomSetSaved").click( function() { + _this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset)); + _this.showNodes(false); + if (_this.options.hide_nodes){ + _this.hiddenNodes = (_this.params.hidden_nodes || []).concat(); + _this.hideNodes(); + } + }); + + this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() { + _this.showNodes(true); + _this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() { + _this.hideNodes(); + }); + }); + this.$.find(".Rk-ShowHiddenNodes").click( function() { + _this.showNodes(false); + _this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" ); + }); + if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){ + this.$.find(".Rk-ZoomSetSaved").show(); + } + }, + redraw: function(options) { + //console.log("view : ", this.model.toJSON()); + }, + init: function(){ + var _this = this; + _this.setScale(_this.params.zoom_level, new paper.Point(_this.params.offset)); + _this.showNodes(false); + if (_this.options.hide_nodes){ + _this.hiddenNodes = (_this.params.hidden_nodes || []).concat(); + _this.hideNodes(); + } + }, + addHiddenNode: function(_model){ + this.hideNode(_model); + this.hiddenNodes.push(_model.id); + this.updateUrl(); + }, + hideNode: function(_model){ + if (typeof this.renderer.getRepresentationByModel(_model) !== 'undefined'){ + this.renderer.getRepresentationByModel(_model).hide(); + } + }, + hideNodes: function(){ + var _this = this; + this.hiddenNodes.forEach(function(_id, index){ + var node = _this.renkan.project.get("nodes").get(_id); + if (typeof node !== 'undefined'){ + return _this.hideNode(_this.renkan.project.get("nodes").get(_id)); + }else{ + _this.hiddenNodes.splice(index, 1); + } + }); + paper.view.draw(); + }, + showNodes: function(ghost){ + var _this = this; + this.hiddenNodes.forEach(function(_id){ + _this.renderer.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost); + }); + if (!ghost){ + this.hiddenNodes = []; + } + paper.view.draw(); + }, + setScale: function(_newScale, _offset) { + if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) { + this.scale = _newScale; + if (_offset) { + this.offset = _offset; + } + this.renderer.redraw(); + this.updateUrl(); + } + }, + zoomOut: function() { + var _newScale = this.scale * Math.SQRT1_2, + _offset = new paper.Point([ + this.renderer.canvas_$.width(), + this.renderer.canvas_$.height() + ]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 )); + this.setScale( _newScale, _offset ); + }, + zoomIn: function() { + var _newScale = this.scale * Math.SQRT2, + _offset = new paper.Point([ + this.renderer.canvas_$.width(), + this.renderer.canvas_$.height() + ]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 )); + this.setScale( _newScale, _offset ); + }, + resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) { + var _newScale = this.scale * _ratio, + _offset = new paper.Point([ + (this.offset.x * _scaleWidth), + (this.offset.y * _scaleHeight) + ]); + this.setScale( _newScale, _offset ); + }, + autoScale: function(force_view) { + var nodes = this.renkan.project.get("nodes"); + if (nodes.length > 1) { + var _xx = nodes.map(function(_node) { return _node.get("position").x; }), + _yy = nodes.map(function(_node) { return _node.get("position").y; }), + _minx = Math.min.apply(Math, _xx), + _miny = Math.min.apply(Math, _yy), + _maxx = Math.max.apply(Math, _xx), + _maxy = Math.max.apply(Math, _yy); + var _scale = Math.min( (paper.view.size.width - 2 * this.renkan.options.autoscale_padding) / (_maxx - _minx), (paper.view.size.height - 2 * this.renkan.options.autoscale_padding) / (_maxy - _miny)); + this.initialScale = _scale; + // Override calculated scale if asked + if((typeof force_view !== "undefined") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){ + this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y))); + } + else{ + this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale))); + } + } + if (nodes.length === 1) { + this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]))); + } + }, + paperShift: function(_delta) { + this.offset = this.offset.add(_delta); + this.renderer.redraw(); + }, + updateUrl: function(){ + if(this.options.update_url){ + var result = {}; + var parameters = Backbone.history.getFragment().split('?'); + if (parameters.length > 1){ + parameters[1].split("&").forEach(function(part) { + var item = part.split("="); + result[item[0]] = decodeURIComponent(item[1]); + }); + } + result.view = Math.round(this.offset.x*1000)/1000 + ',' + Math.round(this.offset.y*1000)/1000 + ',' + Math.round(this.scale*1000)/1000; +// if (this.hiddenNodes.length > 0){ +// result.hiddenNodes = this.hiddenNodes.join(); +// } + this.renkan.router.navigate("?" + decodeURIComponent($.param(result)), {trigger: false, replace: false}); + } + }, + }).value(); + + return ViewRepr; + +}); diff -r 08d121184a38 -r d55176dc72cc client/js/router.js --- a/client/js/router.js Wed Sep 09 14:06:02 2015 +0200 +++ b/client/js/router.js Wed Sep 09 15:18:53 2015 +0200 @@ -11,14 +11,13 @@ index: function (parameters) { var result = {}; - if (parameters === null){ - return; + if (parameters !== null){ + parameters.split("&").forEach(function(part) { + var item = part.split("="); + result[item[0]] = decodeURIComponent(item[1]); + }); } - parameters.split("&").forEach(function(part) { - var item = part.split("="); - result[item[0]] = decodeURIComponent(item[1]); - }); - this.trigger('router', result); + this.trigger('router', result); } }); diff -r 08d121184a38 -r d55176dc72cc server/php/basic/public_html/static/lib/renkan/js/templates.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/server/php/basic/public_html/static/lib/renkan/js/templates.js Wed Sep 09 15:18:53 2015 +0200 @@ -0,0 +1,819 @@ +this["renkanJST"] = this["renkanJST"] || {}; + +this["renkanJST"]["templates/colorpicker.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
  • '; + +} +return __p +}; + +this["renkanJST"]["templates/edgeeditor.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { +__p += '

    \n ×' + +__e(renkan.translate("Edit Edge")) + +'\n

    \n

    \n \n \n

    \n'; + if (options.show_edge_editor_uri) { ; +__p += '\n

    \n \n \n \n

    \n '; + if (options.properties.length) { ; +__p += '\n

    \n \n \n

    \n'; + } } ; +__p += '\n'; + if (options.show_edge_editor_style) { ; +__p += '\n
    \n '; + if (options.show_edge_editor_style_color) { ; +__p += '\n
    \n ' + +__e(renkan.translate("Edge color:")) + +'\n
    \n \n \n \n ' + +((__t = ( renkan.colorPicker )) == null ? '' : __t) + +'\n ' + +__e( renkan.translate("Choose color") ) + +'\n
    \n
    \n '; + } ; +__p += '\n '; + if (options.show_edge_editor_style_dash) { ; +__p += '\n
    \n ' + +__e(renkan.translate("Dash:")) + +'\n \n
    \n '; + } ; +__p += '\n '; + if (options.show_edge_editor_style_thickness) { ; +__p += '\n
    \n ' + +__e(renkan.translate("Thickness:")) + +'\n -\n ' + +__e( edge.thickness ) + +'\n +\n
    \n '; + } ; +__p += '\n '; + if (options.show_edge_editor_style_arrow) { ; +__p += '\n
    \n ' + +__e(renkan.translate("Arrow:")) + +'\n \n
    \n '; + } ; +__p += '\n
    \n'; + } ; +__p += '\n'; + if (options.show_edge_editor_direction) { ; +__p += '\n

    \n ' + +__e( renkan.translate("Change edge direction") ) + +'\n

    \n'; + } ; +__p += '\n'; + if (options.show_edge_editor_nodes) { ; +__p += '\n

    \n ' + +__e(renkan.translate("From:")) + +'\n \n ' + +__e( shortenText(edge.from_title, 25) ) + +'\n

    \n

    \n ' + +__e(renkan.translate("To:")) + +'\n \n ' + +__e( shortenText(edge.to_title, 25) ) + +'\n

    \n'; + } ; +__p += '\n'; + if (options.show_edge_editor_creator && edge.has_creator) { ; +__p += '\n

    \n ' + +__e(renkan.translate("Created by:")) + +'\n \n ' + +__e( shortenText(edge.created_by_title, 25) ) + +'\n

    \n'; + } ; +__p += '\n'; + +} +return __p +}; + +this["renkanJST"]["templates/edgeeditor_readonly.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { +__p += '

    \n ×\n '; + if (options.show_edge_tooltip_color) { ; +__p += '\n \n '; + } ; +__p += '\n \n '; + if (edge.uri) { ; +__p += '\n \n '; + } ; +__p += '\n ' + +__e(edge.title) + +'\n '; + if (edge.uri) { ; +__p += ' '; + } ; +__p += '\n \n

    \n'; + if (options.show_edge_tooltip_uri && edge.uri) { ; +__p += '\n

    \n ' + +__e( edge.short_uri ) + +'\n

    \n'; + } ; +__p += '\n

    ' + +((__t = (edge.description)) == null ? '' : __t) + +'

    \n'; + if (options.show_edge_tooltip_nodes) { ; +__p += '\n

    \n ' + +__e(renkan.translate("From:")) + +'\n \n ' + +__e( shortenText(edge.from_title, 25) ) + +'\n

    \n

    \n ' + +__e(renkan.translate("To:")) + +'\n \n ' + +__e( shortenText(edge.to_title, 25) ) + +'\n

    \n'; + } ; +__p += '\n'; + if (options.show_edge_tooltip_creator && edge.has_creator) { ; +__p += '\n

    \n ' + +__e(renkan.translate("Created by:")) + +'\n \n ' + +__e( shortenText(edge.created_by_title, 25) ) + +'\n

    \n'; + } ; +__p += '\n'; + +} +return __p +}; + +this["renkanJST"]["templates/ldtjson-bin/annotationtemplate.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
  • \n\n \n

    ' + +((__t = (htitle)) == null ? '' : __t) + +'

    \n

    ' + +((__t = (hdescription)) == null ? '' : __t) + +'

    \n

    Start: ' + +((__t = (start)) == null ? '' : __t) + +', End: ' + +((__t = (end)) == null ? '' : __t) + +', Duration: ' + +((__t = (duration)) == null ? '' : __t) + +'

    \n
    \n
    • \n'; + +} +return __p +}; + +this["renkanJST"]["templates/ldtjson-bin/segmenttemplate.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
  • \n\n \n

    ' + +((__t = (htitle)) == null ? '' : __t) + +'

    \n

    ' + +((__t = (hdescription)) == null ? '' : __t) + +'

    \n

    Start: ' + +((__t = (start)) == null ? '' : __t) + +', End: ' + +((__t = (end)) == null ? '' : __t) + +', Duration: ' + +((__t = (duration)) == null ? '' : __t) + +'

    \n
    \n
    • \n'; + +} +return __p +}; + +this["renkanJST"]["templates/ldtjson-bin/tagtemplate.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
  • \n\n \n

    ' + +((__t = (htitle)) == null ? '' : __t) + +'

    \n
    \n
    • \n'; + +} +return __p +}; + +this["renkanJST"]["templates/list-bin.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { +__p += '
  • \n'; + } ; +__p += '\n

    \n '; + if (url) { ; +__p += '\n \n '; + } ; +__p += '\n ' + +((__t = (htitle)) == null ? '' : __t) + +'\n '; + if (url) { ; +__p += ''; + } ; +__p += '\n

    \n '; + if (description) { ; +__p += '\n

    ' + +((__t = (hdescription)) == null ? '' : __t) + +'

    \n '; + } ; +__p += '\n '; + if (image) { ; +__p += '\n
    \n '; + } ; +__p += '\n
    • \n'; + +} +return __p +}; + +this["renkanJST"]["templates/main.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { + + if (options.show_bins) { ; +__p += '\n
    \n
    \n

    ' + +__e( translate("Select contents:")) + +'

    \n
    \n \n
    \n
    \n
      \n
      \n \n
      \n
      \n \n \n
      \n \n
      \n'; + } ; +__p += ' '; + if (options.show_editor) { ; +__p += '\n
      \n'; + } ; +__p += '\n'; + +} +return __p +}; + +this["renkanJST"]["templates/nodeeditor.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { + + //TODO: change class to id ; +__p += '\n

      \n ×' + +__e(renkan.translate("Edit Node")) + +'\n

      \n

      \n \n \n

      \n'; + if (options.show_node_editor_uri) { ; +__p += '\n

      \n \n \n \n

      \n'; + } ; +__p += ' '; + if (options.change_types) { ; +__p += '\n

      \n \n \n

      \n'; + } ; +__p += ' '; + if (options.show_node_editor_description) { ; +__p += '\n

      \n \n '; + if (options.show_node_editor_description_richtext) { ; +__p += '\n

      ' + +((__t = (node.description)) == null ? '' : __t) + +'
      \n '; + } else { ; +__p += '\n \n '; + } ; +__p += '\n

      \n'; + } ; +__p += ' '; + if (options.show_node_editor_size) { ; +__p += '\n

      \n ' + +__e(renkan.translate("Size:")) + +'\n -\n ' + +__e(node.size) + +'\n +\n

      \n'; + } ; +__p += ' '; + if (options.show_node_editor_style) { ; +__p += '\n
      \n '; + if (options.show_node_editor_style_color) { ; +__p += '\n
      \n \n ' + +__e(renkan.translate("Node color:")) + +'\n
      \n \n \n \n ' + +((__t = ( renkan.colorPicker )) == null ? '' : __t) + +'\n ' + +__e( renkan.translate("Choose color") ) + +'\n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_node_editor_style_dash) { ; +__p += '\n
      \n ' + +__e(renkan.translate("Dash:")) + +'\n \n
      \n '; + } ; +__p += '\n '; + if (options.show_node_editor_style_thickness) { ; +__p += '\n
      \n ' + +__e(renkan.translate("Thickness:")) + +'\n -\n ' + +__e(node.thickness) + +'\n +\n
      \n '; + } ; +__p += '\n
      \n'; + } ; +__p += ' '; + if (options.show_node_editor_image) { ; +__p += '\n
      \n
      \n \n '; + if (node.clip_path) { ; +__p += '\n \n \n \n '; + }; +__p += '\n
      \n
      \n

      \n \n

      \n \n \n
      \n

      \n'; + if (options.allow_image_upload) { ; +__p += '\n

      \n \n \n

      \n'; + }; + + } ; +__p += ' '; + if (options.show_node_editor_creator && node.has_creator) { ; +__p += '\n

      \n ' + +__e(renkan.translate("Created by:")) + +'\n \n ' + +__e( shortenText(node.created_by_title, 25) ) + +'\n

      \n'; + } ; +__p += ' '; + if (options.change_shapes) { ; +__p += '\n

      \n \n \n

      \n'; + } ; +__p += '\n'; + +} +return __p +}; + +this["renkanJST"]["templates/nodeeditor_readonly.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { +__p += '

      \n ×\n '; + if (options.show_node_tooltip_color) { ; +__p += '\n \n '; + } ; +__p += '\n \n '; + if (node.uri) { ; +__p += '\n \n '; + } ; +__p += '\n ' + +__e(node.title) + +'\n '; + if (node.uri) { ; +__p += ''; + } ; +__p += '\n \n

      \n'; + if (node.uri && options.show_node_tooltip_uri) { ; +__p += '\n

      \n ' + +__e(node.short_uri) + +'\n

      \n'; + } ; +__p += ' '; + if (options.show_node_tooltip_description) { ; +__p += '\n

      ' + +((__t = (node.description)) == null ? '' : __t) + +'

      \n'; + } ; +__p += ' '; + if (node.image && options.show_node_tooltip_image) { ; +__p += '\n \n'; + } ; +__p += ' '; + if (node.has_creator && options.show_node_tooltip_creator) { ; +__p += '\n

      \n ' + +__e(renkan.translate("Created by:")) + +'\n \n ' + +__e( shortenText(node.created_by_title, 25) ) + +'\n

      \n'; + } ; +__p += '\n ' + +__e(renkan.translate("Link to the node")) + +'\n'; + +} +return __p +}; + +this["renkanJST"]["templates/nodeeditor_video.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { +__p += '

      \n ×\n '; + if (options.show_node_tooltip_color) { ; +__p += '\n \n '; + } ; +__p += '\n \n '; + if (node.uri) { ; +__p += '\n \n '; + } ; +__p += '\n ' + +__e(node.title) + +'\n '; + if (node.uri) { ; +__p += ''; + } ; +__p += '\n \n

      \n'; + if (node.uri && options.show_node_tooltip_uri) { ; +__p += '\n \n'; + } ; +__p += '\n ' + +__e(renkan.translate("Link to the node")) + +'\n'; + +} +return __p +}; + +this["renkanJST"]["templates/scene.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape, __j = Array.prototype.join; +function print() { __p += __j.call(arguments, '') } +with (obj) { + + if (options.show_top_bar) { ; +__p += '\n
      \n
      \n '; + if (!options.editor_mode) { ; +__p += '\n

      \n ' + +__e( project.get("title") || translate("Untitled project")) + +'\n

      \n '; + } else { ; +__p += '\n \n '; + } ; +__p += '\n '; + if (options.show_user_list) { ; +__p += '\n
      \n
      \n '; + if (options.show_user_color) { ; +__p += '\n
      \n \n '; + if (options.user_color_editable) { ; +__p += '\n \n '; + } ; +__p += '\n \n '; + if (options.user_color_editable) { print(colorPicker) } ; +__p += '\n
      \n '; + } ; +__p += '\n <unknown user>\n
      \n \n
      \n '; + } ; +__p += '\n '; + if (options.home_button_url) {; +__p += '\n
      \n \n
      \n
      \n ' + +__e( translate(options.home_button_title) ) + +'\n
      \n
      \n       \n '; + } ; +__p += '\n '; + if (options.show_fullscreen_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Full Screen")) + +'\n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.editor_mode) { ; +__p += '\n '; + if (options.show_addnode_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Add Node")) + +'\n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_addedge_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Add Edge")) + +'\n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_export_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Download Project")) + +'\n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_save_button) { ; +__p += '\n
      \n
      \n
      \n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_open_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Open Project")) + +'\n
      \n
      \n
      \n '; + } ; +__p += '\n '; + if (options.show_bookmarklet) { ; +__p += '\n
      \n \n
      \n
      \n ' + +__e(translate("Renkan \'Drag-to-Add\' bookmarklet")) + +'\n
      \n
      \n       \n
      \n '; + } ; +__p += '\n '; + } else { ; +__p += '\n '; + if (options.show_export_button) { ; +__p += '\n
      \n
      \n
      \n
      \n ' + +__e(translate("Download Project")) + +'\n
      \n
      \n
      \n
      \n '; + } ; +__p += '\n '; + }; ; +__p += '\n '; + if (options.show_search_field) { ; +__p += '\n
      \n \n
      \n
      \n '; + } ; +__p += '\n
      \n'; + } ; +__p += '\n
      \n
      \n
      \n
      \n
      \n '; + if (options.editor_mode && options.save_view) { ; +__p += '\n
      \n '; + } ; +__p += '\n '; + if (options.save_view) { ; +__p += '\n
      \n '; + if (options.hide_nodes) { ; +__p += '\n \t
      \n '; + } ; +__p += ' \n '; + } ; +__p += '\n \n '; + } ; +__p += '\n \n\n'; + +} +return __p +}; + +this["renkanJST"]["templates/search.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
    • ' + +((__t = ( title )) == null ? '' : __t) + +'
      • '; + +} +return __p +}; + +this["renkanJST"]["templates/wikipedia-bin/resulttemplate.html"] = function(obj) { +obj || (obj = {}); +var __t, __p = '', __e = _.escape; +with (obj) { +__p += '
    • \n\n \n

      \n ' + +((__t = (htitle)) == null ? '' : __t) + +'\n

      \n

      ' + +((__t = (hdescription)) == null ? '' : __t) + +'

      \n
      • \n'; + +} +return __p +}; \ No newline at end of file