--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/renderer/noderepr.js Mon May 05 17:43:37 2014 +0200
@@ -0,0 +1,424 @@
+/* paper-renderer.js */
+"use strict";
+
+define(['jquery', 'underscore', 'requtils', 'renderer/baserepresentation'], function ($, _, requtils, BaseRepresentation) {
+
+ var Utils = requtils.getUtils();
+
+ /* Rkns.Renderer.Node Class */
+
+ /* The representation for the node : A circle, with an image inside and a text label underneath.
+ * The circle and the image are drawn on canvas and managed by Paper.js.
+ * The text label is an HTML node, managed by jQuery. */
+
+ //var NodeRepr = Renderer.Node = Utils.inherit(Renderer._BaseRepresentation);
+ var NodeRepr = Utils.inherit(BaseRepresentation);
+
+ _(NodeRepr.prototype).extend({
+ _init: function() {
+ this.renderer.node_layer.activate();
+ this.type = "Node";
+ this.circle = new paper.Path.Circle([0, 0], 1);
+ this.circle.__representation = this;
+ if (this.options.show_node_circles) {
+ this.circle.strokeWidth = this.options.node_stroke_width;
+ this.h_ratio = 1;
+ } else {
+ this.h_ratio = 0;
+ }
+ this.title = $('<div class="Rk-Label">').appendTo(this.renderer.labels_$);
+ if (this.options.editor_mode) {
+ var Renderer = requtils.getRenderer();
+ this.normal_buttons = [
+ new Renderer.NodeEditButton(this.renderer, null),
+ new Renderer.NodeRemoveButton(this.renderer, null),
+ new Renderer.NodeLinkButton(this.renderer, null),
+ new Renderer.NodeEnlargeButton(this.renderer, null),
+ new Renderer.NodeShrinkButton(this.renderer, null)
+ ];
+ this.pending_delete_buttons = [
+ new Renderer.NodeRevertButton(this.renderer, null)
+ ];
+ this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
+ for (var i = 0; i < this.all_buttons.length; i++) {
+ this.all_buttons[i].source_representation = this;
+ }
+ this.active_buttons = [];
+ } else {
+ this.active_buttons = this.all_buttons = [];
+ }
+ this.last_circle_radius = 1;
+
+ if (this.renderer.minimap) {
+ this.renderer.minimap.node_layer.activate();
+ this.minimap_circle = new paper.Path.Circle([0, 0], 1);
+ this.minimap_circle.__representation = this.renderer.minimap.miniframe.__representation;
+ this.renderer.minimap.node_group.addChild(this.minimap_circle);
+ }
+ },
+ redraw: function(_dontRedrawEdges) {
+ var _model_coords = new paper.Point(this.model.get("position")),
+ _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Utils._NODE_SIZE_STEP);
+ if (!this.is_dragging || !this.paper_coords) {
+ this.paper_coords = this.renderer.toPaperCoords(_model_coords);
+ }
+ this.circle_radius = _baseRadius * this.renderer.scale;
+ if (this.last_circle_radius !== this.circle_radius) {
+ this.all_buttons.forEach(function(b) {
+ b.setSectorSize();
+ });
+ this.circle.scale(this.circle_radius / this.last_circle_radius);
+ if (this.node_image) {
+ this.node_image.scale(this.circle_radius / this.last_circle_radius);
+ }
+ }
+ this.circle.position = this.paper_coords;
+ if (this.node_image) {
+ this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));
+ }
+ this.last_circle_radius = this.circle_radius;
+
+ var old_act_btn = this.active_buttons;
+
+ var opacity = 1;
+ if (this.model.get("delete_scheduled")) {
+ opacity = .5;
+ this.active_buttons = this.pending_delete_buttons;
+ this.circle.dashArray = [2,2];
+ } else {
+ opacity = 1;
+ this.active_buttons = this.normal_buttons;
+ this.circle.dashArray = null;
+ }
+
+ if (this.selected && this.renderer.isEditable()) {
+ if (old_act_btn !== this.active_buttons) {
+ old_act_btn.forEach(function(b) {
+ b.hide();
+ });
+ }
+ this.active_buttons.forEach(function(b) {
+ b.show();
+ });
+ }
+
+ if (this.node_image) {
+ this.node_image.opacity = this.highlighted ? opacity * .5 : (opacity - .01);
+ }
+
+ this.circle.fillColor = this.highlighted ? this.options.highlighted_node_fill_color : this.options.node_fill_color;
+
+ this.circle.opacity = this.options.show_node_circles ? opacity : .01;
+
+ var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";
+ _text = Utils.shortenText(_text, this.options.node_label_max_length);
+
+ if (typeof this.highlighted === "object") {
+ this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));
+ } else {
+ this.title.text(_text);
+ }
+
+ this.title.css({
+ left: this.paper_coords.x,
+ top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,
+ opacity: opacity
+ });
+ var _color = this.model.get("color") || (this.model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color");
+ this.circle.strokeColor = _color;
+ var _pc = this.paper_coords;
+ this.all_buttons.forEach(function(b) {
+ b.moveTo(_pc);
+ });
+ var lastImage = this.img;
+ this.img = this.model.get("image");
+ if (this.img && this.img !== lastImage) {
+ this.showImage();
+ }
+ if (this.node_image && !this.img) {
+ this.node_image.remove();
+ delete this.node_image;
+ }
+
+ if (this.renderer.minimap) {
+ this.minimap_circle.fillColor = _color;
+ var minipos = this.renderer.toMinimapCoords(_model_coords),
+ miniradius = this.renderer.minimap.scale * _baseRadius,
+ minisize = new paper.Size([miniradius, miniradius]);
+ this.minimap_circle.fitBounds(minipos.subtract(minisize), minisize.multiply(2));
+ }
+
+ if (!_dontRedrawEdges) {
+ var _this = this;
+ _.each(
+ this.project.get("edges").filter(
+ function (ed) {
+ return ((ed.get("to") === _this.model) || (ed.get("from") === _this.model));
+ }
+ ),
+ function(edge, index, list) {
+ var repr = _this.renderer.getRepresentationByModel(edge);
+ if (repr && typeof repr.from_representation !== "undefined" && typeof repr.from_representation.paper_coords !== "undefined" && typeof repr.to_representation !== "undefined" && typeof repr.to_representation.paper_coords !== "undefined") {
+ repr.redraw();
+ }
+ }
+ );
+ }
+
+ },
+ showImage: function() {
+ var _image = null;
+ if (typeof this.renderer.image_cache[this.img] === "undefined") {
+ _image = new Image();
+ this.renderer.image_cache[this.img] = _image;
+ _image.src = this.img;
+ } else {
+ _image = this.renderer.image_cache[this.img];
+ }
+ if (_image.width) {
+ if (this.node_image) {
+ this.node_image.remove();
+ }
+ this.renderer.node_layer.activate();
+ var width = _image.width,
+ height = _image.height,
+ clipPath = this.model.get("clip_path"),
+ hasClipPath = (typeof clipPath !== "undefined" && clipPath),
+ _clip = null,
+ baseRadius = null,
+ centerPoint = null;
+
+ if (hasClipPath) {
+ _clip = new paper.Path();
+ var instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],
+ lastCoords = [0,0],
+ minX = Infinity,
+ minY = Infinity,
+ maxX = -Infinity,
+ maxY = -Infinity;
+
+ var transformCoords = function(tabc, relative) {
+ var newCoords = tabc.slice(1).map(function(v, k) {
+ var res = parseFloat(v),
+ isY = k % 2;
+ if (isY) {
+ res = ( res - .5 ) * height;
+ } else {
+ res = ( res - .5 ) * width;
+ }
+ if (relative) {
+ res += lastCoords[isY];
+ }
+ if (isY) {
+ minY = Math.min(minY, res);
+ maxY = Math.max(maxY, res);
+ } else {
+ minX = Math.min(minX, res);
+ maxX = Math.max(maxX, res);
+ }
+ return res;
+ });
+ lastCoords = newCoords.slice(-2);
+ return newCoords;
+ };
+
+ instructions.forEach(function(instr) {
+ var coords = instr.match(/([a-z]|[0-9.-]+)/ig) || [""];
+ switch(coords[0]) {
+ case "M":
+ _clip.moveTo(transformCoords(coords));
+ break;
+ case "m":
+ _clip.moveTo(transformCoords(coords, true));
+ break;
+ case "L":
+ _clip.lineTo(transformCoords(coords));
+ break;
+ case "l":
+ _clip.lineTo(transformCoords(coords, true));
+ break;
+ case "C":
+ _clip.cubicCurveTo(transformCoords(coords));
+ break;
+ case "c":
+ _clip.cubicCurveTo(transformCoords(coords, true));
+ break;
+ case "Q":
+ _clip.quadraticCurveTo(transformCoords(coords));
+ break;
+ case "q":
+ _clip.quadraticCurveTo(transformCoords(coords, true));
+ break;
+ }
+ });
+
+ baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](maxX - minX, maxY - minY) / 2;
+ centerPoint = new paper.Point((maxX + minX) / 2, (maxY + minY) / 2);
+ if (!this.options.show_node_circles) {
+ this.h_ratio = (maxY - minY) / (2 * baseRadius);
+ }
+ } else {
+ baseRadius = Math[this.options.node_images_fill_mode ? "min" : "max"](width, height) / 2;
+ centerPoint = new paper.Point(0,0);
+ if (!this.options.show_node_circles) {
+ this.h_ratio = height / (2 * baseRadius);
+ }
+ }
+ var _raster = new paper.Raster(_image);
+ _raster.locked = true; // Disable mouse events on icon
+ if (hasClipPath) {
+ _raster = new paper.Group(_clip, _raster);
+ _raster.opacity = .99;
+ /* This is a workaround to allow clipping at group level
+ * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
+ */
+ _raster.clipped = true;
+ _clip.__representation = this;
+ }
+ if (this.options.clip_node_images) {
+ var _circleClip = new paper.Path.Circle(centerPoint, baseRadius);
+ _raster = new paper.Group(_circleClip, _raster);
+ _raster.opacity = .99;
+ _raster.clipped = true;
+ _circleClip.__representation = this;
+ }
+ this.image_delta = centerPoint.divide(baseRadius);
+ this.node_image = _raster;
+ this.node_image.__representation = _this;
+ this.node_image.scale(this.circle_radius / baseRadius);
+ this.node_image.position = this.paper_coords.subtract(this.image_delta.multiply(this.circle_radius));
+ this.redraw();
+ this.renderer.throttledPaperDraw();
+ } else {
+ var _this = this;
+ $(_image).on("load", function() {
+ _this.showImage();
+ });
+ }
+ },
+ paperShift: function(_delta) {
+ if (this.options.editor_mode) {
+ if (!this.renkan.read_only) {
+ this.is_dragging = true;
+ this.paper_coords = this.paper_coords.add(_delta);
+ this.redraw();
+ }
+ } else {
+ this.renderer.paperShift(_delta);
+ }
+ },
+ openEditor: function() {
+ this.renderer.removeRepresentationsOfType("editor");
+ var _editor = this.renderer.addRepresentation("NodeEditor",null);
+ _editor.source_representation = this;
+ _editor.draw();
+ },
+ select: function() {
+ this.selected = true;
+ this.circle.strokeWidth = this.options.selected_node_stroke_width;
+ if (this.renderer.isEditable()) {
+ this.active_buttons.forEach(function(b) {
+ b.show();
+ });
+ }
+ var _uri = this.model.get("uri");
+ if (_uri) {
+ $('.Rk-Bin-Item').each(function() {
+ var _el = $(this);
+ if (_el.attr("data-uri") == _uri) {
+ _el.addClass("selected");
+ }
+ });
+ }
+ if (!this.options.editor_mode) {
+ this.openEditor();
+ }
+
+ if (this.renderer.minimap) {
+ this.minimap_circle.strokeWidth = this.options.minimap_highlight_weight;
+ this.minimap_circle.strokeColor = this.options.minimap_highlight_color;
+ }
+ this._super("select");
+ },
+ unselect: function(_newTarget) {
+ if (!_newTarget || _newTarget.source_representation !== this) {
+ this.selected = false;
+ this.all_buttons.forEach(function(b) {
+ b.hide();
+ });
+ this.circle.strokeWidth = this.options.node_stroke_width;
+ $('.Rk-Bin-Item').removeClass("selected");
+ if (this.renderer.minimap) {
+ this.minimap_circle.strokeColor = undefined;
+ }
+ this._super("unselect");
+ }
+ },
+ highlight: function(textToReplace) {
+ var hlvalue = textToReplace || true;
+ if (this.highlighted === hlvalue) {
+ return;
+ }
+ this.highlighted = hlvalue;
+ this.redraw();
+ this.renderer.throttledPaperDraw();
+ },
+ unhighlight: function() {
+ if (!this.highlighted) {
+ return;
+ }
+ this.highlighted = false;
+ this.redraw();
+ this.renderer.throttledPaperDraw();
+ },
+ saveCoords: function() {
+ var _coords = this.renderer.toModelCoords(this.paper_coords),
+ _data = {
+ position: {
+ x: _coords.x,
+ y: _coords.y
+ }
+ };
+ if (this.renderer.isEditable()) {
+ this.model.set(_data);
+ }
+ },
+ mousedown: function(_event, _isTouch) {
+ if (_isTouch) {
+ this.renderer.unselectAll();
+ this.select();
+ }
+ },
+ mouseup: function(_event, _isTouch) {
+ if (this.renderer.is_dragging && this.renderer.isEditable()) {
+ this.saveCoords();
+ } else {
+ if (!_isTouch && !this.model.get("delete_scheduled")) {
+ this.openEditor();
+ }
+ this.model.trigger("clicked");
+ }
+ this.renderer.click_target = null;
+ this.renderer.is_dragging = false;
+ this.is_dragging = false;
+ },
+ destroy: function(_event) {
+ this._super("destroy");
+ this.all_buttons.forEach(function(b) {
+ b.destroy();
+ });
+ this.circle.remove();
+ this.title.remove();
+ if (this.renderer.minimap) {
+ this.minimap_circle.remove();
+ }
+ if (this.node_image) {
+ this.node_image.remove();
+ }
+ }
+ });
+
+ return NodeRepr;
+
+});
+