renkan: client/js/renderer/viewrepr.js@dd526b1b283a (annotated)

Mercurial Mercurial > renkan / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/renderer/viewrepr.js

author	rougeronj
	Wed, 24 Jun 2015 17:15:22 +0200
changeset 508	dd526b1b283a
parent 506	460de050f800
child 510	a8f02d66bf02
permissions	-rw-r--r--

add shift and zoom functions to the viewRepr

506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	1	define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	2	'use strict';
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	3
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	4	var Utils = requtils.getUtils();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	5
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	6	/* Rkns.Renderer.View Class */
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	7
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	8	/* The representation for the view. */
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	9
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	10	var ViewRepr = Utils.inherit(BaseRepresentation);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	11
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	12	_(ViewRepr.prototype).extend({
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	13	_init: function() {
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	14	var _this = this;
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	15	this.$ = $(".Rk-Render");
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	16	this.type = "View";
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	17	this.hiddenNodes = [];
508 dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	18	this.scale = 1;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	19	this.initialScale = 1;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	20	this.offset = paper.view.center;
506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	21
508 dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	22	var bindClick = function(selector, fname) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	23	_this.$.find(selector).click(function(evt) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	24	_this[fname](evt);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	25	return false;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	26	});
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	27	};
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	28
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	29	bindClick(".Rk-ZoomOut", "zoomOut");
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	30	bindClick(".Rk-ZoomIn", "zoomIn");
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	31	bindClick(".Rk-ZoomFit", "autoScale");
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	32
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	33	this.$.find(".Rk-ZoomSave").click( function() {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	34	var offset = {};
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	35	offset.x = _this.offset.x;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	36	offset.y = _this.offset.y;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	37	_this.model.set( { zoom_level:_this.scale, offset:offset, hidden_nodes: _this.hiddenNodes.concat() } );
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	38	});
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	39
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	40	this.$.find(".Rk-ZoomSetSaved").click( function() {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	41	if(_this.model){
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	42	_this.setScale(_this.model.get("zoom_level"), new paper.Point(_this.model.get("offset")));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	43	_this.showNodes(false);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	44	if (_this.options.hide_nodes){
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	45	_this.hiddenNodes = (_this.model.get("hidden_nodes") \|\| []).concat();
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	46	_this.hideNodes();
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	47	}
506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	48	}
508 dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	49	});
506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	50
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	51	this.$.find(".Rk-ShowHiddenNodes").mouseenter( function() {
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	52	_this.showNodes(true);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	53	_this.$.find(".Rk-ShowHiddenNodes").mouseleave( function() {
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	54	_this.hideNodes();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	55	});
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	56	});
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	57	this.$.find(".Rk-ShowHiddenNodes").click( function() {
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	58	_this.showNodes(false);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	59	_this.$.find(".Rk-ShowHiddenNodes").off( "mouseleave" );
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	60	});
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	61	if(this.renkan.project.get("views").length > 0 && this.renkan.options.save_view){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	62	this.$.find(".Rk-ZoomSetSaved").show();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	63	}
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	64	},
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	65	redraw: function(options) {
508 dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	66	//console.log("redraw view repr");
506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	67	},
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	68	addHiddenNode: function(_model){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	69	this.hideNode(_model);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	70	this.hiddenNodes.push(_model.id);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	71	},
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	72	hideNode: function(_model){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	73	if (typeof this.renderer.getRepresentationByModel(_model) !== 'undefined'){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	74	this.renderer.getRepresentationByModel(_model).hide();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	75	}
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	76	},
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	77	hideNodes: function(){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	78	var _this = this;
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	79	this.hiddenNodes.forEach(function(_id, index){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	80	var node = _this.renkan.project.get("nodes").get(_id);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	81	if (typeof node !== 'undefined'){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	82	return _this.hideNode(_this.renkan.project.get("nodes").get(_id));
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	83	}else{
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	84	_this.hiddenNodes.splice(index, 1);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	85	}
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	86	});
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	87	paper.view.draw();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	88	},
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	89	showNodes: function(ghost){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	90	var _this = this;
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	91	this.hiddenNodes.forEach(function(_id){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	92	_this.renderer.getRepresentationByModel(_this.renkan.project.get("nodes").get(_id)).show(ghost);
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	93	});
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	94	if (!ghost){
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	95	this.hiddenNodes = [];
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	96	}
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	97	paper.view.draw();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	98	},
508 dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	99	setScale: function(_newScale, _offset) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	100	if ((_newScale/this.initialScale) > Utils._MIN_SCALE && (_newScale/this.initialScale) < Utils._MAX_SCALE) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	101	this.scale = _newScale;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	102	this.renderer.scale = _newScale;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	103	if (_offset) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	104	this.offset = _offset;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	105	this.renderer.offset = _offset;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	106	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	107	this.renderer.redraw();
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	108	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	109	},
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	110	zoomOut: function() {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	111	var _newScale = this.scale * Math.SQRT1_2,
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	112	_offset = new paper.Point([
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	113	this.renderer.canvas_$.width(),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	114	this.renderer.canvas_$.height()
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	115	]).multiply( 0.5 * ( 1 - Math.SQRT1_2 ) ).add(this.offset.multiply( Math.SQRT1_2 ));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	116	this.setScale( _newScale, _offset );
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	117	},
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	118	zoomIn: function() {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	119	var _newScale = this.scale * Math.SQRT2,
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	120	_offset = new paper.Point([
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	121	this.renderer.canvas_$.width(),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	122	this.renderer.canvas_$.height()
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	123	]).multiply( 0.5 * ( 1 - Math.SQRT2 ) ).add(this.offset.multiply( Math.SQRT2 ));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	124	this.setScale( _newScale, _offset );
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	125	},
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	126	resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	127	var _newScale = this.scale * _ratio,
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	128	_offset = new paper.Point([
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	129	(this.offset.x * _scaleWidth),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	130	(this.offset.y * _scaleHeight)
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	131	]);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	132	this.setScale( _newScale, _offset );
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	133	},
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	134	autoScale: function(force_view) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	135	var nodes = this.renkan.project.get("nodes");
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	136	if (nodes.length > 1) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	137	var _xx = nodes.map(function(_node) { return _node.get("position").x; }),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	138	_yy = nodes.map(function(_node) { return _node.get("position").y; }),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	139	_minx = Math.min.apply(Math, _xx),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	140	_miny = Math.min.apply(Math, _yy),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	141	_maxx = Math.max.apply(Math, _xx),
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	142	_maxy = Math.max.apply(Math, _yy);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	143	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));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	144	this.initialScale = _scale;
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	145	// Override calculated scale if asked
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	146	if((typeof force_view !== "undefined") && parseFloat(force_view.zoom_level)>0 && parseFloat(force_view.offset.x)>0 && parseFloat(force_view.offset.y)>0){
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	147	this.setScale(parseFloat(force_view.zoom_level), new paper.Point(parseFloat(force_view.offset.x), parseFloat(force_view.offset.y)));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	148	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	149	else{
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	150	this.setScale(_scale, paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(_scale)));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	151	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	152	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	153	if (nodes.length === 1) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	154	this.setScale(1, paper.view.center.subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y])));
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	155	}
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	156	},
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	157	paperShift: function(_delta) {
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	158	this.offset = this.offset.add(_delta);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	159	this.renderer.offset = this.renderer.offset.add(_delta);
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	160	this.renderer.redraw();
dd526b1b283a add shift and zoom functions to the viewRepr rougeronj parents: 506 diff changeset	161	},
506 460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	162	}).value();
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	163
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	164	return ViewRepr;
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	165
460de050f800 Create Viewrepr which handle the representation of the View. rougeronj parents: diff changeset	166	});

renkan