angular-mindmap
Version:
mind-map for typescript
317 lines (316 loc) • 11.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var config_1 = require("../config");
var util_1 = require("../util");
var mind_map_main_1 = require("../mind-map-main");
var mind_map_node_1 = require("../mind-map-node");
var jcanvas = util_1.customizeUtil.canvas;
var jdom = util_1.customizeUtil.dom;
var clear_selection = 'getSelection' in config_1.$win ? function () {
config_1.$win.getSelection().removeAllRanges();
} : function () {
config_1.$document.selection.empty();
};
var options = {
line_width: 5,
lookup_delay: 500,
lookup_interval: 80
};
var Draggable = (function () {
function Draggable(jm) {
this.jm = jm;
this.e_canvas = null;
this.canvas_ctx = null;
this.shadow = null;
this.shadow_w = 0;
this.shadow_h = 0;
this.active_node = null;
this.target_node = null;
this.target_direct = null;
this.client_w = 0;
this.client_h = 0;
this.offset_x = 0;
this.offset_y = 0;
this.hlookup_delay = 0;
this.hlookup_timer = 0;
this.capture = false;
this.moved = false;
}
Draggable.prototype.init = function () {
this._create_canvas();
this._create_shadow();
this._event_bind();
};
Draggable.prototype.resize = function () {
this.jm.view.eNodes.appendChild(this.shadow);
this.e_canvas.width = this.jm.view.size.w;
this.e_canvas.height = this.jm.view.size.h;
};
Draggable.prototype._create_canvas = function () {
var c = config_1.$document.createElement('canvas');
this.jm.view.ePanel.appendChild(c);
var ctx = c.getContext('2d');
this.e_canvas = c;
this.canvas_ctx = ctx;
};
Draggable.prototype._create_shadow = function () {
var s = config_1.$document.createElement('jmnode');
s.style.visibility = 'hidden';
s.style.zIndex = '3';
s.style.cursor = 'move';
s.style.opacity = '0.7';
this.shadow = s;
};
Draggable.prototype.reset_shadow = function (el) {
var s = this.shadow.style;
this.shadow.innerHTML = el.innerHTML;
s.left = el.style.left;
s.top = el.style.top;
s.width = el.style.width;
s.height = el.style.height;
s.backgroundImage = el.style.backgroundImage;
s.backgroundSize = el.style.backgroundSize;
s.transform = el.style.transform;
this.shadow_w = this.shadow.clientWidth;
this.shadow_h = this.shadow.clientHeight;
};
Draggable.prototype.show_shadow = function () {
if (!this.moved) {
this.shadow.style.visibility = 'visible';
}
};
Draggable.prototype.hide_shadow = function () {
this.shadow.style.visibility = 'hidden';
};
Draggable.prototype.clear_lines = function () {
jcanvas.clear(this.canvas_ctx, 0, 0, this.jm.view.size.w, this.jm.view.size.h);
};
Draggable.prototype._magnet_shadow = function (node) {
if (!!node) {
this.canvas_ctx.lineWidth = options.line_width;
this.canvas_ctx.strokeStyle = 'rgba(0,0,0,0.3)';
this.canvas_ctx.lineCap = 'round';
this.clear_lines();
jcanvas.lineto(this.canvas_ctx, node.sp.x, node.sp.y, node.np.x, node.np.y);
}
};
Draggable.prototype._lookup_close_node = function () {
var root = this.jm.getRoot();
var root_location = root.getLocation();
var root_size = root.getSize();
var root_x = root_location.x + root_size.w / 2;
var sw = this.shadow_w;
var sh = this.shadow_h;
var sx = this.shadow.offsetLeft;
var sy = this.shadow.offsetTop;
var ns, nl;
var direct = (sx + sw / 2) >= root_x ?
mind_map_main_1.MindMapMain.direction.right : mind_map_main_1.MindMapMain.direction.left;
var nodes = this.jm.mind.nodes;
var node = null;
var min_distance = Number.MAX_VALUE;
var distance = 0;
var closest_node = null;
var closest_p = null;
var shadow_p = null;
for (var nodeid in nodes) {
var np = void 0, sp = void 0;
node = nodes[nodeid];
if (node.isroot || node.direction == direct) {
if (node.id == this.active_node.id) {
continue;
}
ns = node.getSize();
nl = node.getLocation();
if (direct == mind_map_main_1.MindMapMain.direction.right) {
if (sx - nl.x - ns.w <= 0) {
continue;
}
distance = Math.abs(sx - nl.x - ns.w) + Math.abs(sy + sh / 2 - nl.y - ns.h / 2);
np = { x: nl.x + ns.w - options.line_width, y: nl.y + ns.h / 2 };
sp = { x: sx + options.line_width, y: sy + sh / 2 };
}
else {
if (nl.x - sx - sw <= 0) {
continue;
}
distance = Math.abs(sx + sw - nl.x) + Math.abs(sy + sh / 2 - nl.y - ns.h / 2);
np = { x: nl.x + options.line_width, y: nl.y + ns.h / 2 };
sp = { x: sx + sw - options.line_width, y: sy + sh / 2 };
}
if (distance < min_distance) {
closest_node = node;
closest_p = np;
shadow_p = sp;
min_distance = distance;
}
}
}
var result_node = null;
if (!!closest_node) {
result_node = {
node: closest_node,
direction: direct,
sp: shadow_p,
np: closest_p
};
}
return result_node;
};
Draggable.prototype.lookup_close_node = function () {
var node_data = this._lookup_close_node();
if (!!node_data) {
this._magnet_shadow(node_data);
this.target_node = node_data.node;
this.target_direct = node_data.direction;
}
};
Draggable.prototype._event_bind = function () {
var jd = this;
var container = this.jm.view.container;
jdom.addEvent(container, 'mousedown', function (e) {
var evt = e || event;
jd.dragstart.call(jd, evt);
});
jdom.addEvent(container, 'mousemove', function (e) {
var evt = e || event;
jd.drag.call(jd, evt);
});
jdom.addEvent(container, 'mouseup', function (e) {
var evt = e || event;
jd.dragend.call(jd, evt);
});
jdom.addEvent(container, 'touchstart', function (e) {
var evt = e || event;
jd.dragstart.call(jd, evt);
});
jdom.addEvent(container, 'touchmove', function (e) {
var evt = e || event;
jd.drag.call(jd, evt);
});
jdom.addEvent(container, 'touchend', function (e) {
var evt = e || event;
jd.dragend.call(jd, evt);
});
};
Draggable.prototype.dragstart = function (e) {
if (!this.jm.getEditable()) {
return;
}
if (this.capture) {
return;
}
this.active_node = null;
var jview = this.jm.view;
var el = e.target || event.srcElement;
if (el.tagName.toLowerCase() != 'jmnode') {
return;
}
var nodeid = jview.getBindedNodeId(el);
if (!!nodeid) {
var node = this.jm.getNode(nodeid);
if (!node.isroot) {
this.reset_shadow(el);
this.active_node = node;
this.offset_x = (e.clientX || e.touches[0].clientX) - el.offsetLeft;
this.offset_y = (e.clientY || e.touches[0].clientY) - el.offsetTop;
this.client_hw = Math.floor(el.clientWidth / 2);
this.client_hh = Math.floor(el.clientHeight / 2);
if (this.hlookup_delay != 0) {
config_1.$win.clearTimeout(this.hlookup_delay);
}
if (this.hlookup_timer != 0) {
config_1.$win.clearInterval(this.hlookup_timer);
}
var jd_1 = this;
this.hlookup_delay = config_1.$win.setTimeout(function () {
jd_1.hlookup_delay = 0;
jd_1.hlookup_timer = config_1.$win.setInterval(function () {
jd_1.lookup_close_node.call(jd_1);
}, options.lookup_interval);
}, options.lookup_delay);
this.capture = true;
}
}
};
Draggable.prototype.drag = function (e) {
if (!this.jm.getEditable()) {
return;
}
if (this.capture) {
e.preventDefault();
this.show_shadow();
this.moved = true;
clear_selection();
var px = (e.clientX || e.touches[0].clientX) - this.offset_x;
var py = (e.clientY || e.touches[0].clientY) - this.offset_y;
var cx = px + this.client_hw;
var cy = py + this.client_hh;
this.shadow.style.left = px + 'px';
this.shadow.style.top = py + 'px';
clear_selection();
}
};
Draggable.prototype.dragend = function (e) {
if (!this.jm.getEditable()) {
return;
}
if (this.capture) {
if (this.hlookup_delay != 0) {
config_1.$win.clearTimeout(this.hlookup_delay);
this.hlookup_delay = 0;
this.clear_lines();
}
if (this.hlookup_timer != 0) {
config_1.$win.clearInterval(this.hlookup_timer);
this.hlookup_timer = 0;
this.clear_lines();
}
if (this.moved) {
var src_node = this.active_node;
var target_node = this.target_node;
var target_direct = this.target_direct;
this.move_node(src_node, target_node, target_direct);
}
this.hide_shadow();
}
this.moved = false;
this.capture = false;
};
Draggable.prototype.move_node = function (src_node, target_node, target_direct) {
var shadow_h = this.shadow.offsetTop;
if (!!target_node && !!src_node && !mind_map_node_1.MindMapNode.inherited(src_node, target_node)) {
var sibling_nodes = target_node.children;
var sc = sibling_nodes.length;
var node = null;
var delta_y = Number.MAX_VALUE;
var node_before = null;
var beforeid = '_last_';
while (sc--) {
node = sibling_nodes[sc];
if (node.direction == target_direct && node.id != src_node.id) {
var dy = node.getLocation().y - shadow_h;
if (dy > 0 && dy < delta_y) {
delta_y = dy;
node_before = node;
beforeid = '_first_';
}
}
}
if (!!node_before) {
beforeid = node_before.id;
}
this.jm.moveNode(src_node.id, beforeid, target_node.id, target_direct);
}
this.active_node = null;
this.target_node = null;
this.target_direct = null;
};
Draggable.prototype.jm_event_handle = function (type, data) {
if (type === mind_map_main_1.MindMapMain.eventType.resize) {
this.resize();
}
};
return Draggable;
}());
exports.Draggable = Draggable;