From e993fb517b47996b0d8ea59fd1fdf9a088cddec7 Mon Sep 17 00:00:00 2001 From: Julio Montoya Date: Fri, 30 Mar 2012 18:13:40 +0200 Subject: [PATCH] Updating jsplumb to the latest version --- main/inc/lib/javascript/jquery.jsPlumb.all.js | 6049 ++++++++++++----- 1 file changed, 4394 insertions(+), 1655 deletions(-) diff --git a/main/inc/lib/javascript/jquery.jsPlumb.all.js b/main/inc/lib/javascript/jquery.jsPlumb.all.js index 0d52168dbc..0f46c0522f 100644 --- a/main/inc/lib/javascript/jquery.jsPlumb.all.js +++ b/main/inc/lib/javascript/jquery.jsPlumb.all.js @@ -1,19 +1,20 @@ /* * jsPlumb * - * Title:jsPlumb 1.3.3 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the jsPlumb core code. * - * Copyright (c) 2010 - 2011 Simon Porritt (simon.porritt@gmail.com) + * Copyright (c) 2010 - 2012 Simon Porritt (simon.porritt@gmail.com) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ ;(function() { @@ -24,75 +25,79 @@ * create and maintain Connections and Endpoints. */ - var canvasAvailable = !!document.createElement('canvas').getContext; - var svgAvailable = !!window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"); + var canvasAvailable = !!document.createElement('canvas').getContext, + svgAvailable = !!window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"), // TODO what is a good test for VML availability? aside from just assuming its there because nothing else is. - var vmlAvailable = !(canvasAvailable | svgAvailable); + vmlAvailable = !(canvasAvailable | svgAvailable); - var _findIndex = function(a, v, b, s) { - var _eq = function(o1, o2) { - if (o1 === o2) - return true; - else if (typeof o1 == "object" && typeof o2 == "object") { - var same = true; - for ( var propertyName in o1) { - if (!_eq(o1[propertyName], o2[propertyName])) { - same = false; - break; - } - } - for ( var propertyName in o2) { - if (!_eq(o2[propertyName], o1[propertyName])) { - same = false; - break; - } - } - return same; - } - }; - - for ( var i = +b || 0, l = a.length; i < l; i++) { - if (_eq(a[i], v)) - return i; - } + var _findWithFunction = function(a, f) { + if (a) + for (var i = 0; i < a.length; i++) if (f(a[i])) return i; return -1; + }, + _indexOf = function(l, v) { + return _findWithFunction(l, function(_v) { return _v == v; }); + }, + _removeWithFunction = function(a, f) { + var idx = _findWithFunction(a, f); + if (idx > -1) a.splice(idx, 1); + return idx != -1; + }, + _remove = function(l, v) { + var idx = _indexOf(l, v); + if (idx > -1) l.splice(idx, 1); + return idx != -1; + }, + // TODO support insert index + _addWithFunction = function(list, item, hashFunction) { + if (_findWithFunction(list, hashFunction) == -1) list.push(item); + }, + _addToList = function(map, key, value) { + var l = map[key]; + if (l == null) { + l = [], map[key] = l; + } + l.push(value); + return l; }; + // for those browsers that dont have it. they still don't have it! but at least they won't crash. + if (!window.console) + window.console = { time:function(){}, timeEnd:function(){}, group:function(){}, groupEnd:function(){}, log:function(){} }; + /** * helper method to add an item to a list, creating the list if it does * not yet exist. */ - var _addToList = function(map, key, value) { - var l = map[key]; - if (l == null) { - l = []; - map[key] = l; - } - l.push(value); - return l; - }; - - var _connectionBeingDragged = null; - - var _getAttribute = function(el, attName) { return jsPlumb.CurrentLibrary.getAttribute(_getElementObject(el), attName); }, + var _connectionBeingDragged = null, + _getAttribute = function(el, attName) { return jsPlumb.CurrentLibrary.getAttribute(_getElementObject(el), attName); }, _setAttribute = function(el, attName, attValue) { jsPlumb.CurrentLibrary.setAttribute(_getElementObject(el), attName, attValue); }, _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_getElementObject(el), clazz); }, _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_getElementObject(el), clazz); }, _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_getElementObject(el), clazz); }, _getElementObject = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, - _getOffset = function(el) { return jsPlumb.CurrentLibrary.getOffset(_getElementObject(el)); }, + _getOffset = function(el) { return jsPlumb.CurrentLibrary.getOffset(_getElementObject(el)); }, _getSize = function(el) { return jsPlumb.CurrentLibrary.getSize(_getElementObject(el)); }, - _log = function(jsp, msg) { - if (jsp.logEnabled && typeof console != "undefined") - console.log(msg); - }; - + _logEnabled = true, + _log = function() { + if (_logEnabled && typeof console != "undefined") { + try { + var msg = arguments[arguments.length - 1]; + console.log(msg); + } + catch (e) {} + } + }, + _group = function(g) { if (_logEnabled && typeof console != "undefined") console.group(g); }, + _groupEnd = function(g) { if (_logEnabled && typeof console != "undefined") console.groupEnd(g); }, + _time = function(t) { if (_logEnabled && typeof console != "undefined") console.time(t); }, + _timeEnd = function(t) { if (_logEnabled && typeof console != "undefined") console.timeEnd(t); }; /** * EventGenerator * Superclass for objects that generate events - jsPlumb extends this, as does jsPlumbUIComponent, which all the UI elements extend. */ - var EventGenerator = function() { + EventGenerator = function() { var _listeners = {}, self = this; // this is a list of events that should re-throw any errors that occur during their dispatch. as of 1.3.0 this is private to @@ -118,14 +123,15 @@ * Parameters: * event - event to fire * value - value to pass to the event listener(s). - * o riginalEvent - the original event from the browser + * originalEvent - the original event from the browser */ this.fire = function(event, value, originalEvent) { if (_listeners[event]) { for ( var i = 0; i < _listeners[event].length; i++) { // doing it this way rather than catching and then possibly re-throwing means that an error propagated by this // method will have the whole call stack available in the debugger. - if (_findIndex(eventsToDieOn, event) != -1) + //if (_findIndex(eventsToDieOn, event) != -1) + if (_findWithFunction(eventsToDieOn, function(e) { return e === event}) != -1) _listeners[event][i](value, originalEvent); else { // for events we don't want to die on, catch and log. @@ -145,24 +151,37 @@ * event - optional. constrains the clear to just listeners for this event. */ this.clearListeners = function(event) { - if (event) { + if (event) delete _listeners[event]; - } else { + else { delete _listeners; _listeners = {}; } }; - }; + this.getListener = function(forEvent) { + return _listeners[forEvent]; + }; + }, + + /** + * creates a timestamp, using milliseconds since 1970, but as a string. + */ + _timestamp = function() { return "" + (new Date()).getTime(); }, /* * Class:jsPlumbUIComponent * Abstract superclass for UI components Endpoint and Connection. Provides the abstraction of paintStyle/hoverPaintStyle, * and also extends EventGenerator to provide the bind and fire methods. */ - var jsPlumbUIComponent = function(params) { - var self = this, a = arguments, _hover = false; - self._jsPlumb = params["_jsPlumb"]; + jsPlumbUIComponent = function(params) { + var self = this, a = arguments, _hover = false, parameters = params.parameters || {}, idPrefix = self.idPrefix, + id = idPrefix + (new Date()).getTime(); + self._jsPlumb = params["_jsPlumb"]; + self.getId = function() { return id; }; + self.tooltip = params.tooltip; + self.hoverClass = params.hoverClass; + // all components can generate events EventGenerator.apply(this); // all components get this clone function. @@ -177,10 +196,42 @@ return o; }; + this.getParameter = function(name) { return parameters[name]; }, + this.getParameters = function() { return parameters; }, + this.setParameter = function(name, value) { parameters[name] = value; }, + this.setParameters = function(p) { parameters = p; }, this.overlayPlacements = [], this.paintStyle = null, this.hoverPaintStyle = null; + // user can supply a beforeDetach callback, which will be executed before a detach + // is performed; returning false prevents the detach. + var beforeDetach = params.beforeDetach; + this.isDetachAllowed = function(connection) { + var r = self._jsPlumb.checkCondition("beforeDetach", connection ); + if (beforeDetach) { + try { + r = beforeDetach(connection); + } + catch (e) { _log("jsPlumb: beforeDetach callback failed", e); } + } + return r; + }; + + // user can supply a beforeDrop callback, which will be executed before a dropped + // connection is confirmed. user can return false to reject connection. + var beforeDrop = params.beforeDrop; + this.isDropAllowed = function(sourceId, targetId, scope) { + var r = self._jsPlumb.checkCondition("beforeDrop", { sourceId:sourceId, targetId:targetId, scope:scope }); + if (beforeDrop) { + try { + r = beforeDrop({ sourceId:sourceId, targetId:targetId, scope:scope }); + } + catch (e) { _log("jsPlumb: beforeDrop callback failed", e); } + } + return r; + }; + // helper method to update the hover style whenever it, or paintStyle, changes. // we use paintStyle as the foundation and merge hoverPaintStyle over the // top. @@ -189,10 +240,10 @@ var mergedHoverStyle = {}; jsPlumb.extend(mergedHoverStyle, self.paintStyle); jsPlumb.extend(mergedHoverStyle, self.hoverPaintStyle); - delete self.hoverPaintStyle; + delete self["hoverPaintStyle"]; // we want the fillStyle of paintStyle to override a gradient, if possible. if (mergedHoverStyle.gradient && self.paintStyle.fillStyle) - delete mergedHoverStyle.gradient; + delete mergedHoverStyle["gradient"]; self.hoverPaintStyle = mergedHoverStyle; } }; @@ -233,46 +284,332 @@ * hover - hover state boolean * ignoreAttachedElements - if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops. */ - this.setHover = function(hover, ignoreAttachedElements) { - _hover = hover; - if (self.hoverPaintStyle != null) { - self.paintStyleInUse = hover ? self.hoverPaintStyle : self.paintStyle; - self.repaint(); - // get the list of other affected elements. for a connection, its the endpoints. for an endpoint, its the connections! surprise. - if (!ignoreAttachedElements) - _updateAttachedElements(hover); - } - }; + this.setHover = function(hover, ignoreAttachedElements, timestamp) { + // while dragging, we ignore these events. this keeps the UI from flashing and + // swishing and whatevering. + if (!self._jsPlumb.currentlyDragging && !self._jsPlumb.isHoverSuspended()) { - this.isHover = function() { - return _hover; + _hover = hover; + if (self.hoverClass != null && self.canvas != null) { + if (hover) + jpcl.addClass(self.canvas, self.hoverClass); + else + jpcl.removeClass(self.canvas, self.hoverClass); + } + if (self.hoverPaintStyle != null) { + self.paintStyleInUse = hover ? self.hoverPaintStyle : self.paintStyle; + timestamp = timestamp || _timestamp(); + self.repaint({timestamp:timestamp, recalc:false}); + } + // get the list of other affected elements, if supported by this component. + // for a connection, its the endpoints. for an endpoint, its the connections! surprise. + if (self.getAttachedElements && !ignoreAttachedElements) + _updateAttachedElements(hover, _timestamp(), self); + } }; - this.attachListeners = function(o, c) { - var jpcl = jsPlumb.CurrentLibrary, - events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup" ], + this.isHover = function() { return _hover; }; + + var jpcl = jsPlumb.CurrentLibrary, + events = [ "click", "dblclick", "mouseenter", "mouseout", "mousemove", "mousedown", "mouseup", "contextmenu" ], eventFilters = { "mouseout":"mouseexit" }, - bindOne = function(evt) { + bindOne = function(o, c, evt) { var filteredEvent = eventFilters[evt] || evt; jpcl.bind(o, evt, function(ee) { c.fire(filteredEvent, c, ee); }); + }, + unbindOne = function(o, evt) { + var filteredEvent = eventFilters[evt] || evt; + jpcl.unbind(o, evt); }; + + this.attachListeners = function(o, c) { for (var i = 0; i < events.length; i++) { - bindOne(events[i]); + bindOne(o, c, events[i]); } }; - var _updateAttachedElements = function(state) { + var _updateAttachedElements = function(state, timestamp, sourceElement) { var affectedElements = self.getAttachedElements(); // implemented in subclasses if (affectedElements) { for (var i = 0; i < affectedElements.length; i++) { - affectedElements[i].setHover(state, true); // tell the attached elements not to inform their own attached elements. + if (!sourceElement || sourceElement != affectedElements[i]) + affectedElements[i].setHover(state, true, timestamp); // tell the attached elements not to inform their own attached elements. } } }; - }; + + this.reattachListenersForElement = function(o) { + if (arguments.length > 1) { + for (var i = 0; i < events.length; i++) + unbindOne(o, events[i]); + for (var i = 1; i < arguments.length; i++) + self.attachListeners(o, arguments[i]); + } + }; + }, + + overlayCapableJsPlumbUIComponent = function(params) { + jsPlumbUIComponent.apply(this, arguments); + var self = this; + /* + * Property: overlays + * List of Overlays for this component. + */ + this.overlays = []; + + var processOverlay = function(o) { + var _newOverlay = null; + if (o.constructor == Array) { // this is for the shorthand ["Arrow", { width:50 }] syntax + // there's also a three arg version: + // ["Arrow", { width:50 }, {location:0.7}] + // which merges the 3rd arg into the 2nd. + var type = o[0], + // make a copy of the object so as not to mess up anyone else's reference... + p = jsPlumb.extend({component:self, _jsPlumb:self._jsPlumb}, o[1]); + if (o.length == 3) jsPlumb.extend(p, o[2]); + _newOverlay = new jsPlumb.Overlays[self._jsPlumb.getRenderMode()][type](p); + if (p.events) { + for (var evt in p.events) { + _newOverlay.bind(evt, p.events[evt]); + } + } + } else if (o.constructor == String) { + _newOverlay = new jsPlumb.Overlays[self._jsPlumb.getRenderMode()][o]({component:self, _jsPlumb:self._jsPlumb}); + } else { + _newOverlay = o; + } + + self.overlays.push(_newOverlay); + }, + calculateOverlaysToAdd = function(params) { + var defaultKeys = self.defaultOverlayKeys || [], + o = params.overlays, + checkKey = function(k) { + return self._jsPlumb.Defaults[k] || jsPlumb.Defaults[k] || []; + }; + + if (!o) o = []; + + for (var i = 0; i < defaultKeys.length; i++) + o.unshift.apply(o, checkKey(defaultKeys[i])); + + return o; + } + + var _overlays = calculateOverlaysToAdd(params);//params.overlays || self._jsPlumb.Defaults.Overlays; + if (_overlays) { + for (var i = 0; i < _overlays.length; i++) { + processOverlay(_overlays[i]); + } + } + + // overlay finder helper method + var _getOverlayIndex = function(id) { + var idx = -1; + for (var i = 0; i < self.overlays.length; i++) { + if (id === self.overlays[i].id) { + idx = i; + break; + } + } + return idx; + }; + + /* + * Function: addOverlay + * Adds an Overlay to the Connection. + * + * Parameters: + * overlay - Overlay to add. + */ + this.addOverlay = function(overlay) { + processOverlay(overlay); + self.repaint(); + }; + + /* + * Function: getOverlay + * Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter + * in to the Overlay's constructor arguments, and then use that to retrieve + * it via this method. + */ + this.getOverlay = function(id) { + var idx = _getOverlayIndex(id); + return idx >= 0 ? self.overlays[idx] : null; + }; + + /* + * Function:getOverlays + * Gets all the overlays for this component. + */ + this.getOverlays = function() { + return self.overlays; + }; + + /* + * Function: hideOverlay + * Hides the overlay specified by the given id. + */ + this.hideOverlay = function(id) { + var o = self.getOverlay(id); + if (o) o.hide(); + }; + + this.hideOverlays = function() { + for (var i = 0; i < self.overlays.length; i++) + self.overlays[i].hide(); + }; + + /* + * Function: showOverlay + * Shows the overlay specified by the given id. + */ + this.showOverlay = function(id) { + var o = self.getOverlay(id); + if (o) o.show(); + }; + + this.showOverlays = function() { + for (var i = 0; i < self.overlays.length; i++) + self.overlays[i].show(); + }; + + /** + * Function: removeAllOverlays + * Removes all overlays from the Connection, and then repaints. + */ + this.removeAllOverlays = function() { + self.overlays.splice(0, self.overlays.length); + self.repaint(); + }; + + /** + * Function:removeOverlay + * Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec. + * Parameters: + * overlayId - id of the overlay to remove. + */ + this.removeOverlay = function(overlayId) { + var idx = _getOverlayIndex(overlayId); + if (idx != -1) { + var o = self.overlays[idx]; + o.cleanup(); + self.overlays.splice(idx, 1); + } + }; + + /** + * Function:removeOverlays + * Removes a set of overlays by ID. Note: by ID. this is a string you set in the overlay spec. + * Parameters: + * overlayIds - this function takes an arbitrary number of arguments, each of which is a single overlay id. + */ + this.removeOverlays = function() { + for (var i = 0; i < arguments.length; i++) + self.removeOverlay(arguments[i]); + }; + + // this is a shortcut helper method to let people add a label as + // overlay. + var _internalLabelOverlayId = "__label", + _makeLabelOverlay = function(params) { + + var _params = { + cssClass:params.cssClass, + labelStyle : this.labelStyle, + id:_internalLabelOverlayId, + component:self, + _jsPlumb:self._jsPlumb + }, + mergedParams = jsPlumb.extend(_params, params); + + return new jsPlumb.Overlays[self._jsPlumb.getRenderMode()].Label( mergedParams ); + }; + if (params.label) { + var loc = params.labelLocation || self.defaultLabelLocation || 0.5, + labelStyle = params.labelStyle || self._jsPlumb.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; + this.overlays.push(_makeLabelOverlay({ + label:params.label, + location:loc, + labelStyle:labelStyle + })); + } + + /* + * Function: setLabel + * Sets the Connection's label. + * + * Parameters: + * l - label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" } + */ + this.setLabel = function(l) { + var lo = self.getOverlay(_internalLabelOverlayId); + if (!lo) { + var params = l.constructor == String || l.constructor == Function ? { label:l } : l; + lo = _makeLabelOverlay(params); + this.overlays.push(lo); + } + else { + if (l.constructor == String || l.constructor == Function) lo.setLabel(l); + else { + if (l.label) lo.setLabel(l.label); + if (l.location) lo.setLocation(l.location); + } + } + + self.repaint(); + }; + + /* + Function:getLabel + Returns the label text for this component (or a function if you are labelling with a function). + This does not return the overlay itself; this is a convenience method which is a pair with + setLabel; together they allow you to add and access a Label Overlay without having to create the + Overlay object itself. For access to the underlying label overlay that jsPlumb has created, + use getLabelOverlay. + */ + this.getLabel = function() { + var lo = self.getOverlay(_internalLabelOverlayId); + return lo != null ? lo.getLabel() : null; + }; + + /* + Function:getLabelOverlay + Returns the underlying internal label overlay, which will exist if you specified a label on + a connect or addEndpoint call, or have called setLabel at any stage. + */ + this.getLabelOverlay = function() { + return self.getOverlay(_internalLabelOverlayId); + } + }, + + _bindListeners = function(obj, _self, _hoverFunction) { + obj.bind("click", function(ep, e) { _self.fire("click", _self, e); }); + obj.bind("dblclick", function(ep, e) { _self.fire("dblclick", _self, e); }); + obj.bind("contextmenu", function(ep, e) { _self.fire("contextmenu", _self, e); }); + obj.bind("mouseenter", function(ep, e) { + if (!_self.isHover()) { + _hoverFunction(true); + _self.fire("mouseenter", _self, e); + } + }); + obj.bind("mouseexit", function(ep, e) { + if (_self.isHover()) { + _hoverFunction(false); + _self.fire("mouseexit", _self, e); + } + }); + }; + var _jsPlumbInstanceIndex = 0, + getInstanceIndex = function() { + var i = _jsPlumbInstanceIndex + 1; + _jsPlumbInstanceIndex++; + return i; + }; + var jsPlumbInstance = function(_defaults) { /* @@ -283,13 +620,16 @@ * by including a script somewhere after the jsPlumb include, but before you make any calls to jsPlumb. * * Properties: - * - *Anchor* The default anchor to use for all connections (both source and target). Default is "BottomCenter". - * - *Anchors* The default anchors to use ([source, target]) for all connections. Defaults are ["BottomCenter", "BottomCenter"]. + * - *Anchor* The default anchor to use for all connections (both source and target). Default is "BottomCenter". + * - *Anchors* The default anchors to use ([source, target]) for all connections. Defaults are ["BottomCenter", "BottomCenter"]. + * - *ConnectionsDetachable* Whether or not connections are detachable by default (using the mouse). Defults to true. + * - *ConnectionOverlays* The default overlay definitions for Connections. Defaults to an empty list. * - *Connector* The default connector definition to use for all connections. Default is "Bezier". - * - *Container* Optional selector or element id that instructs jsPlumb to append elements it creates to a specific element. + * - *Container* Optional selector or element id that instructs jsPlumb to append elements it creates to a specific element. * - *DragOptions* The default drag options to pass in to connect, makeTarget and addEndpoint calls. Default is empty. * - *DropOptions* The default drop options to pass in to connect, makeTarget and addEndpoint calls. Default is empty. * - *Endpoint* The default endpoint definition to use for all connections (both source and target). Default is "Dot". + * - *EndpointOverlays* The default overlay definitions for Endpoints. Defaults to an empty list. * - *Endpoints* The default endpoint definitions ([ source, target ]) to use for all connections. Defaults are ["Dot", "Dot"]. * - *EndpointStyle* The default style definition to use for all endpoints. Default is fillStyle:"#456". * - *EndpointStyles* The default style definitions ([ source, target ]) to use for all endpoints. Defaults are empty. @@ -298,21 +638,23 @@ * - *HoverPaintStyle* The default hover style definition to use for all connections. Defaults are null. * - *LabelStyle* The default style to use for label overlays on connections. * - *LogEnabled* Whether or not the jsPlumb log is enabled. defaults to false. - * - *Overlays* The default overlay definitions. Defaults to an empty list. - * - *MaxConnections* The default maximum number of connections for an Endpoint. Defaults to 1. - * - *MouseEventsEnabled* Whether or not mouse events are enabled when using the canvas renderer. Defaults to true. - * The idea of this is just to give people a way to prevent all the mouse listeners from activating if they know they won't need mouse events. + * - *Overlays* The default overlay definitions (for both Connections and Endpoint). Defaults to an empty list. + * - *MaxConnections* The default maximum number of connections for an Endpoint. Defaults to 1. * - *PaintStyle* The default paint style for a connection. Default is line width of 8 pixels, with color "#456". - * - *RenderMode* What mode to use to paint with. If you're on IE<9, you don't really get to choose this. You'll just get VML. Otherwise, the jsPlumb default is to use Canvas elements. + * - *RenderMode* What mode to use to paint with. If you're on IE<9, you don't really get to choose this. You'll just get VML. Otherwise, the jsPlumb default is to use SVG. * - *Scope* The default "scope" to use for connections. Scope lets you assign connections to different categories. */ this.Defaults = { Anchor : "BottomCenter", Anchors : [ null, null ], - Connector : "Bezier", + ConnectionsDetachable : true, + ConnectionOverlays : [ ], + Connector : "Bezier", + Container : null, DragOptions : { }, DropOptions : { }, Endpoint : "Dot", + EndpointOverlays : [ ], Endpoints : [ null, null ], EndpointStyle : { fillStyle : "#456" }, EndpointStyles : [ null, null ], @@ -322,24 +664,49 @@ LabelStyle : { color : "black" }, LogEnabled : false, Overlays : [ ], - MaxConnections : 1, - MouseEventsEnabled : true, + MaxConnections : 1, PaintStyle : { lineWidth : 8, strokeStyle : "#456" }, - RenderMode : "canvas", - Scope : "_jsPlumb_DefaultScope" + //Reattach:false, + RenderMode : "svg", + Scope : "jsPlumb_DefaultScope" }; if (_defaults) jsPlumb.extend(this.Defaults, _defaults); - this.logEnabled = this.Defaults.LogEnabled; + this.logEnabled = this.Defaults.LogEnabled; EventGenerator.apply(this); - var _bb = this.bind; - this.bind = function(event, fn) { + var _currentInstance = this, + _instanceIndex = getInstanceIndex(), + _bb = _currentInstance.bind, + _initialDefaults = {}; + + for (var i in this.Defaults) + _initialDefaults[i] = this.Defaults[i]; + + this.bind = function(event, fn) { if ("ready" === event && initialized) fn(); - else _bb(event, fn); + else _bb.apply(_currentInstance,[event, fn]); }; - var _currentInstance = this, - log = null, + + /* + Function: importDefaults + Imports all the given defaults into this instance of jsPlumb. + */ + _currentInstance.importDefaults = function(d) { + for (var i in d) { + _currentInstance.Defaults[i] = d[i]; + } + }; + + /* + Function:restoreDefaults + Restores the default settings to "factory" values. + */ + _currentInstance.restoreDefaults = function() { + _currentInstance.Defaults = jsPlumb.extend({}, _initialDefaults); + }; + + var log = null, repaintFunction = function() { jsPlumb.repaintEverything(); }, @@ -361,12 +728,10 @@ offsets = {}, offsetTimestamps = {}, floatingConnections = {}, - draggableStates = {}, - _mouseEventsEnabled = this.Defaults.MouseEventsEnabled, - _draggableByDefault = true, + draggableStates = {}, canvasList = [], sizes = [], - listeners = {}, // a map: keys are event types, values are lists of listeners. + //listeners = {}, // a map: keys are event types, values are lists of listeners. DEFAULT_SCOPE = this.Defaults.Scope, renderMode = null, // will be set in init() @@ -387,7 +752,7 @@ /** * appends an element to some other element, which is calculated as follows: * - * 1. if jsPlumb.Defaults.Container exists, use that element. + * 1. if _currentInstance.Defaults.Container exists, use that element. * 2. if the 'parent' parameter exists, use that. * 3. otherwise just use the document body. * @@ -401,10 +766,8 @@ jsPlumb.CurrentLibrary.appendElement(el, parent); }, - /** - * creates a timestamp, using milliseconds since 1970, but as a string. - */ - _timestamp = function() { return "" + (new Date()).getTime(); }, + _curIdStamp = 1, + _idstamp = function() { return "" + _curIdStamp++; }, /** * YUI, for some reason, put the result of a Y.all call into an object that contains @@ -415,41 +778,39 @@ return c._nodes ? c._nodes : c; }, + _suspendDrawing = false, + /* + sets whether or not to suspend drawing. you should use this if you need to connect a whole load of things in one go. + it will save you a lot of time. + */ + _setSuspendDrawing = function(val, repaintAfterwards) { + _suspendDrawing = val; + if (repaintAfterwards) _currentInstance.repaintEverything(); + }, + /** - * Draws an endpoint and its connections. + * Draws an endpoint and its connections. this is the main entry point into drawing connections as well + * as endpoints, since jsPlumb is endpoint-centric under the hood. * * @param element element to draw (of type library specific element object) * @param ui UI object from current library's event system. optional. * @param timestamp timestamp for this paint cycle. used to speed things up a little by cutting down the amount of offset calculations we do. */ _draw = function(element, ui, timestamp) { - var id = _getAttribute(element, "id"); - var endpoints = endpointsByElement[id]; - if (!timestamp) timestamp = _timestamp(); - if (endpoints) { - _updateOffset( { elId : id, offset : ui, recalc : false, timestamp : timestamp }); // timestamp is checked against last update cache; it is - // valid for one paint cycle. - var myOffset = offsets[id], myWH = sizes[id]; - for ( var i = 0; i < endpoints.length; i++) { - endpoints[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myWH }); - var l = endpoints[i].connections; - for ( var j = 0; j < l.length; j++) { - l[j].paint( { elId : id, ui : ui, recalc : false, timestamp : timestamp }); // ...paint each connection. - // then, check for dynamic endpoint; need to repaint it. - var oIdx = l[j].endpoints[0] == endpoints[i] ? 1 : 0, - otherEndpoint = l[j].endpoints[oIdx]; - if (otherEndpoint.anchor.isDynamic && !otherEndpoint.isFloating()) { - _updateOffset( { elId : otherEndpoint.elementId, timestamp : timestamp }); - otherEndpoint.paint({ elementWithPrecedence:id }); - // all the connections for the other endpoint now need to be repainted - for (var k = 0; k < otherEndpoint.connections.length; k++) { - if (otherEndpoint.connections[k] !== l) - otherEndpoint.connections[k].paint( { elId : id, ui : ui, recalc : false, timestamp : timestamp }); - } - } - } + if (!_suspendDrawing) { + var id = _getAttribute(element, "id"), + repaintEls = _currentInstance.dragManager.getElementsForDraggable(id); + + if (timestamp == null) timestamp = _timestamp(); + + _currentInstance.anchorManager.redraw(id, ui, timestamp); + + if (repaintEls) { + for (var i in repaintEls) { + _currentInstance.anchorManager.redraw(repaintEls[i].id, ui, timestamp, repaintEls[i].offset); + } } - } + } }, /** @@ -482,34 +843,117 @@ * inits a draggable if it's not already initialised. */ _initDraggableIfNecessary = function(element, isDraggable, dragOptions) { - var draggable = isDraggable == null ? _draggableByDefault : isDraggable; + var draggable = isDraggable == null ? false : isDraggable, + jpcl = jsPlumb.CurrentLibrary; if (draggable) { - if (jsPlumb.CurrentLibrary.isDragSupported(element) && !jsPlumb.CurrentLibrary.isAlreadyDraggable(element)) { + if (jpcl.isDragSupported(element) && !jpcl.isAlreadyDraggable(element)) { var options = dragOptions || _currentInstance.Defaults.DragOptions || jsPlumb.Defaults.DragOptions; options = jsPlumb.extend( {}, options); // make a copy. - var dragEvent = jsPlumb.CurrentLibrary.dragEvents['drag']; - var stopEvent = jsPlumb.CurrentLibrary.dragEvents['stop']; + var dragEvent = jpcl.dragEvents["drag"], + stopEvent = jpcl.dragEvents["stop"], + startEvent = jpcl.dragEvents["start"]; options[dragEvent] = _wrap(options[dragEvent], function() { - var ui = jsPlumb.CurrentLibrary.getUIPosition(arguments); + var ui = jpcl.getUIPosition(arguments); _draw(element, ui); _addClass(element, "jsPlumb_dragged"); }); options[stopEvent] = _wrap(options[stopEvent], function() { - var ui = jsPlumb.CurrentLibrary.getUIPosition(arguments); + var ui = jpcl.getUIPosition(arguments); _draw(element, ui); _removeClass(element, "jsPlumb_dragged"); }); + draggableStates[_getId(element)] = true; var draggable = draggableStates[_getId(element)]; options.disabled = draggable == null ? false : !draggable; - jsPlumb.CurrentLibrary.initDraggable(element, options); + jpcl.initDraggable(element, options, false); + _currentInstance.dragManager.register(element); + } + } + }, + + /* + * prepares a final params object that can be passed to _newConnection, taking into account defaults, events, etc. + */ + _prepareConnectionParams = function(params, referenceParams) { + var _p = jsPlumb.extend( {}, params); + if (referenceParams) jsPlumb.extend(_p, referenceParams); + + // hotwire endpoints passed as source or target to sourceEndpoint/targetEndpoint, respectively. + if (_p.source && _p.source.endpoint) _p.sourceEndpoint = _p.source; + if (_p.source && _p.target.endpoint) _p.targetEndpoint = _p.target; + + // test for endpoint uuids to connect + if (params.uuids) { + _p.sourceEndpoint = _getEndpoint(params.uuids[0]); + _p.targetEndpoint = _getEndpoint(params.uuids[1]); + } + + // now ensure that if we do have Endpoints already, they're not full. + // source: + if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { + _log(_currentInstance, "could not add connection; source endpoint is full"); + return; + } + + // target: + if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { + _log(_currentInstance, "could not add connection; target endpoint is full"); + return; + } + + // copy in any connectorOverlays that were specified on the source endpoint. + // it doesnt copy target endpoint overlays. i'm not sure if we want it to or not. + if (_p.sourceEndpoint && _p.sourceEndpoint.connectorOverlays) { + _p.overlays = _p.overlays || []; + for (var i = 0; i < _p.sourceEndpoint.connectorOverlays.length; i++) { + _p.overlays.push(_p.sourceEndpoint.connectorOverlays[i]); + } + } + + // tooltip. params.tooltip takes precedence, then sourceEndpoint.connectorTooltip. + _p.tooltip = params.tooltip; + if (!_p.tooltip && _p.sourceEndpoint && _p.sourceEndpoint.connectorTooltip) + _p.tooltip = _p.sourceEndpoint.connectorTooltip; + + // if there's a target specified (which of course there should be), and there is no + // target endpoint specified, and 'newConnection' was not set to true, then we check to + // see if a prior call to makeTarget has provided us with the specs for the target endpoint, and + // we use those if so. additionally, if the makeTarget call was specified with 'uniqueEndpoint' set + // to true, then if that target endpoint has already been created, we re-use it. + if (_p.target && !_p.target.endpoint && !_p.targetEndpoint && !_p.newConnection) { + var tid = _getId(_p.target), + tep =_targetEndpointDefinitions[tid], + existingUniqueEndpoint = _targetEndpoints[tid]; + + if (tep) { + + var newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.target, tep); + if (_targetEndpointsUnique[tid]) _targetEndpoints[tid] = newEndpoint; + _p.targetEndpoint = newEndpoint; + } + } + + // same thing, but for source. + if (_p.source && !_p.source.endpoint && !_p.sourceEndpoint && !_p.newConnection) { + var tid = _getId(_p.source), + tep = _sourceEndpointDefinitions[tid], + existingUniqueEndpoint = _sourceEndpoints[tid]; + + if (tep) { + + var newEndpoint = existingUniqueEndpoint != null ? existingUniqueEndpoint : _currentInstance.addEndpoint(_p.source, tep); + if (_sourceEndpointsUnique[tid]) _sourceEndpoints[tid] = newEndpoint; + _p.sourceEndpoint = newEndpoint; } } + + return _p; }, _newConnection = function(params) { - var connectionFunc = jsPlumb.Defaults.ConnectionType || Connection, - endpointFunc = jsPlumb.Defaults.EndpointType || Endpoint, - parent = jsPlumb.CurrentLibrary.getParent; + var connectionFunc = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + endpointFunc = _currentInstance.Defaults.EndpointType || Endpoint, + parent = jsPlumb.CurrentLibrary.getParent; if (params.container) params["parent"] = params.container; @@ -523,27 +967,77 @@ params["_jsPlumb"] = _currentInstance; var con = new connectionFunc(params); + con.id = "con_" + _idstamp(); _eventFireProxy("click", "click", con); _eventFireProxy("dblclick", "dblclick", con); + _eventFireProxy("contextmenu", "contextmenu", con); return con; }, + /** + * adds the connection to the backing model, fires an event if necessary and then redraws + */ + _finaliseConnection = function(jpc, params, originalEvent) { + params = params || {}; + // add to list of connections (by scope). + if (!jpc.suspendedEndpoint) + _addToList(connectionsByScope, jpc.scope, jpc); + // fire an event + if (!params.doNotFireConnectionEvent && params.fireEvent !== false) { + _currentInstance.fire("jsPlumbConnection", { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + }, originalEvent); + } + // always inform the anchor manager + // except that if jpc has a suspended endpoint it's not true to say the + // connection is new; it has just (possibly) moved. the question is whether + // to make that call here or in the anchor manager. i think perhaps here. + _currentInstance.anchorManager.newConnection(jpc); + // force a paint + _draw(jpc.source); + }, + _eventFireProxy = function(event, proxyEvent, obj) { obj.bind(event, function(originalObject, originalEvent) { _currentInstance.fire(proxyEvent, obj, originalEvent); }); }, - _newEndpoint = function(params) { - var endpointFunc = jsPlumb.Defaults.EndpointType || Endpoint; + /** + * for the given endpoint params, returns an appropriate parent element for the UI elements that will be added. + * this function is used by _newEndpoint (directly below), and also in the makeSource function in jsPlumb. + * + * the logic is to first look for a "container" member of params, and pass that back if found. otherwise we + * handoff to the 'getParent' function in the current library. + */ + _getParentFromParams = function(params) { if (params.container) - params.parent = params.container; - else - params["parent"] = jsPlumb.CurrentLibrary.getParent(params.source); - params["_jsPlumb"] = _currentInstance, - ep = new endpointFunc(params); + return params.container; + else { + var tag = jsPlumb.CurrentLibrary.getTagName(params.source), + p = jsPlumb.CurrentLibrary.getParent(params.source); + if (tag && tag.toLowerCase() === "td") + return jsPlumb.CurrentLibrary.getParent(p); + else return p; + } + }, + + /** + factory method to prepare a new endpoint. this should always be used instead of creating Endpoints + manually, since this method attaches event listeners and an id. + */ + _newEndpoint = function(params) { + var endpointFunc = _currentInstance.Defaults.EndpointType || Endpoint; + params.parent = _getParentFromParams(params); + params["_jsPlumb"] = _currentInstance; + var ep = new endpointFunc(params); + ep.id = "ep_" + _idstamp(); _eventFireProxy("click", "endpointClick", ep); _eventFireProxy("dblclick", "endpointDblClick", ep); + _eventFireProxy("contextmenu", "contextmenu", ep); return ep; }, @@ -592,23 +1086,6 @@ for ( var i = 0; i < elements.length; i++) _removeElement(elements[i], parent); }, - /** - * helper method to remove an item from a list. - */ - _removeFromList = function(map, key, value) { - if (key != null) { - var l = map[key]; - if (l != null) { - var i = _findIndex(l, value); - if (i >= 0) { - delete (l[i]); - l.splice(i, 1); - return true; - } - } - } - return false; - }, /** * Sets whether or not the given element(s) should be draggable, * regardless of what a particular plumb command may request. @@ -669,7 +1146,7 @@ */ _toggleDraggable = function(el) { return _elementProxy(el, function(el, elId) { - var state = draggableStates[elId] == null ? _draggableByDefault : draggableStates[elId]; + var state = draggableStates[elId] == null ? false : draggableStates[elId]; state = !state; draggableStates[elId] = state; jsPlumb.CurrentLibrary.setDraggable(el, state); @@ -710,7 +1187,7 @@ if (timestamp && timestamp === offsetTimestamps[elId]) return offsets[elId]; } - if (recalc || offset == null) { // if forced repaint or no offset + if (recalc || !offset) { // if forced repaint or no offset // available, we recalculate. // get the current size and offset, and store them var s = _getElementObject(elId); @@ -721,13 +1198,40 @@ } } else { offsets[elId] = offset; + if (sizes[elId] == null) { + var s = _getElementObject(elId); + if (s != null) + sizes[elId] = _getSize(s); + } + } + + if(offsets[elId] && !offsets[elId].right) { + offsets[elId].right = offsets[elId].left + sizes[elId][0]; + offsets[elId].bottom = offsets[elId].top + sizes[elId][1]; + offsets[elId].width = sizes[elId][0]; + offsets[elId].height = sizes[elId][1]; + offsets[elId].centerx = offsets[elId].left + (offsets[elId].width / 2); + offsets[elId].centery = offsets[elId].top + (offsets[elId].height / 2); } return offsets[elId]; }, -/** + // TODO comparison performance + _getCachedData = function(elId) { + var o = offsets[elId]; + if (!o) o = _updateOffset({elId:elId}); + return {o:o, s:sizes[elId]}; + }, + + /** * gets an id for the given element, creating and setting one if - * necessary. + * necessary. the id is of the form + * + * jsPlumb__ + * + * where "index in instance" is a monotonically increasing integer that starts at 0, + * for each instance. this method is used not only to assign ids to elements that do not + * have them but also to connections and endpoints. */ _getId = function(element, uuid) { var ele = _getElementObject(element); @@ -737,7 +1241,7 @@ if (arguments.length == 2 && arguments[1] != undefined) id = uuid; else - id = "jsPlumb_" + _timestamp(); + id = "jsPlumb_" + _instanceIndex + "_" + _idstamp(); _setAttribute(ele, "id", id); } return id; @@ -765,13 +1269,13 @@ try { r = newFunction.apply(this, arguments); } catch (e) { - _log(_currentInstance, 'jsPlumb function failed : ' + e); + _log(_currentInstance, "jsPlumb function failed : " + e); } if (returnOnThisValue == null || (r !== returnOnThisValue)) { try { wrappedFunction.apply(this, arguments); } catch (e) { - _log(_currentInstance, 'wrapped function failed : ' + e); + _log(_currentInstance, "wrapped function failed : " + e); } } return r; @@ -843,6 +1347,36 @@ // *************** END OF PLACEHOLDER DOC ENTRIES FOR NATURAL DOCS *********************************************************** + +// --------------------------- jsPLumbInstance public API --------------------------------------------------------- + + /* + Function: addClass + + Helper method to abstract out differences in setting css classes on the different renderer types. + */ + this.addClass = function(el, clazz) { + return jsPlumb.CurrentLibrary.addClass(el, clazz); + }; + + /* + Function: removeClass + + Helper method to abstract out differences in setting css classes on the different renderer types. + */ + this.removeClass = function(el, clazz) { + return jsPlumb.CurrentLibrary.removeClass(el, clazz); + }; + + /* + Function: hasClass + + Helper method to abstract out differences in testing for css classes on the different renderer types. + */ + this.hasClass = function(el, clazz) { + return jsPlumb.CurrentLibrary.hasClass(el, clazz); + }; + /* Function: addEndpoint @@ -868,8 +1402,7 @@ jsPlumb.extend(p, params); p.endpoint = p.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint; p.paintStyle = p.paintStyle || _currentInstance.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle; - - // YUI wrapper + // YUI wrapper el = _convertYUICollection(el); var results = [], inputs = el.length && el.constructor != String ? el : [ el ]; @@ -877,13 +1410,15 @@ for (var i = 0; i < inputs.length; i++) { var _el = _getElementObject(inputs[i]), id = _getId(_el); p.source = _el; - _updateOffset({ elId : id }); + _updateOffset({ elId : id }); var e = _newEndpoint(p); + if (p.parentAnchor) e.parentAnchor = p.parentAnchor; _addToList(endpointsByElement, id, e); var myOffset = offsets[id], myWH = sizes[id]; var anchorLoc = e.anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : e }); e.paint({ anchorLoc : anchorLoc }); results.push(e); + _currentInstance.dragManager.endpointAdded(_el); } return results.length == 1 ? results[0] : results; @@ -946,6 +1481,29 @@ jsPlumb.CurrentLibrary.animate(ele, properties, options); }; + + /** + * checks for a listener for the given condition, executing it if found, passing in the given value. + * condition listeners would have been attached using "bind" (which is, you could argue, now overloaded, since + * firing click events etc is a bit different to what this does). i thought about adding a "bindCondition" + * or something, but decided against it, for the sake of simplicity. jsPlumb will never fire one of these + * condition events anyway. + */ + this.checkCondition = function(conditionName, value) { + var l = _currentInstance.getListener(conditionName); + var r = true; + if (l && l.length > 0) { + try { + for (var i = 0 ; i < l.length; i++) { + r = r && l[i](value); + } + } + catch (e) { + _log(_currentInstance, "cannot check condition [" + conditionName + "]" + e); + } + } + return r; + }; /* Function: connect @@ -960,76 +1518,24 @@ The newly created . */ this.connect = function(params, referenceParams) { - var _p = jsPlumb.extend( {}, params); - if (referenceParams) jsPlumb.extend(_p, referenceParams); - - if (_p.source && _p.source.endpoint) _p.sourceEndpoint = _p.source; - if (_p.source && _p.target.endpoint) _p.targetEndpoint = _p.target; - - // test for endpoint uuids to connect - if (params.uuids) { - _p.sourceEndpoint = _getEndpoint(params.uuids[0]); - _p.targetEndpoint = _getEndpoint(params.uuids[1]); - } - - // now ensure that if we do have Endpoints already, they're not full. - if (_p.sourceEndpoint && _p.sourceEndpoint.isFull()) { - _log(_currentInstance, "could not add connection; source endpoint is full"); - return; - } - - if (_p.targetEndpoint && _p.targetEndpoint.isFull()) { - _log(_currentInstance, "could not add connection; target endpoint is full"); - return; - } - - if (_p.target && !_p.target.endpoint) { - var tid = _getId(_p.target), - tep =_targetEndpointDefinitions[tid]; - - var overrideOne = function(singlePropertyName, pluralPropertyName, tepProperty, tep) { - if (tep[tepProperty]) { - if (_p[pluralPropertyName]) _p[pluralPropertyName][1] = tep[tepProperty]; - else if (_p[singlePropertyName]) { - _p[pluralPropertyName] = [ _p[singlePropertyName], tep[tepProperty] ]; - _p[singlePropertyName] = null; - } - else _p[pluralPropertyName] = [ null, tep[tepProperty] ]; - } - }; - - if (tep) { - overrideOne("endpoint", "endpoints", "endpoint", tep); - overrideOne("endpointStyle", "endpointStyles", "paintStyle", tep); - overrideOne("endpointHoverStyle", "endpointHoverStyles", "hoverPaintStyle", tep); - } - } - - // dynamic anchors. backwards compatibility here: from 1.2.6 onwards you don't need to specify "dynamicAnchors". the fact that some anchor consists - // of multiple definitions is enough to tell jsPlumb you want it to be dynamic. - if (_p.dynamicAnchors) { - // these can either be an array of anchor coords, which we will use for both source and target, or an object with {source:[anchors], target:[anchors]}, in which - // case we will use a different set for each element. - var a = _p.dynamicAnchors.constructor == Array; - var sa = a ? new DynamicAnchor(jsPlumb.makeAnchors(_p.dynamicAnchors)) : new DynamicAnchor(jsPlumb.makeAnchors(_p.dynamicAnchors.source)); - var ta = a ? new DynamicAnchor(jsPlumb.makeAnchors(_p.dynamicAnchors)) : new DynamicAnchor(jsPlumb.makeAnchors(_p.dynamicAnchors.target)); - _p.anchors = [sa,ta]; + // prepare a final set of parameters to create connection with + var _p = _prepareConnectionParams(params, referenceParams); + // TODO probably a nicer return value if the connection was not made. _prepareConnectionParams + // will return null (and log something) if either endpoint was full. what would be nicer is to + // create a dedicated 'error' object. + if (_p) { + // a connect call will delete its created endpoints on detach, unless otherwise specified. + // this is because the endpoints belong to this connection only, and are no use to + // anyone else, so they hang around like a bad smell. + if (_p.deleteEndpointsOnDetach == null) + _p.deleteEndpointsOnDetach = true; + + // create the connection. it is not yet registered + var jpc = _newConnection(_p); + // now add it the model, fire an event, and redraw + _finaliseConnection(jpc, _p); + return jpc; } - - var jpc = _newConnection(_p); - // add to list of connections (by scope). - _addToList(connectionsByScope, jpc.scope, jpc); - // fire an event - _currentInstance.fire("jsPlumbConnection", { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - }); - // force a paint - _draw(jpc.source); - - return jpc; }; /* @@ -1044,12 +1550,12 @@ */ this.deleteEndpoint = function(object) { var endpoint = (typeof object == "string") ? endpointsByUUID[object] : object; - if (endpoint) { + if (endpoint) { var uuid = endpoint.getUuid(); if (uuid) endpointsByUUID[uuid] = null; endpoint.detachAll(); - _removeElement(endpoint.canvas, endpoint.parent); - // remove from endpointsbyElement + _removeElements(endpoint.endpoint.getDisplayElements()); + _currentInstance.anchorManager.deleteEndpoint(endpoint); for (var e in endpointsByElement) { var endpoints = endpointsByElement[e]; if (endpoints) { @@ -1060,7 +1566,7 @@ endpointsByElement[e] = newEndpoints; } } - delete endpoint; + _currentInstance.dragManager.endpointDeleted(endpoint); } }; @@ -1087,103 +1593,121 @@ between this method and jsPlumb.reset). endpointsByUUID = {}; }; - var fireDetachEvent = function(jpc) { - _currentInstance.fire("jsPlumbConnectionDetached", { - connection:jpc, - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] - }); + var fireDetachEvent = function(jpc, doFireEvent, originalEvent) { + // may have been given a connection, or in special cases, an object + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + argIsConnection = jpc.constructor == connType, + params = argIsConnection ? { + connection:jpc, + source : jpc.source, target : jpc.target, + sourceId : jpc.sourceId, targetId : jpc.targetId, + sourceEndpoint : jpc.endpoints[0], targetEndpoint : jpc.endpoints[1] + } : jpc; + + if (doFireEvent) _currentInstance.fire("jsPlumbConnectionDetached", params, originalEvent); + _currentInstance.anchorManager.connectionDetached(params); + }, + /** + fires an event to indicate an existing connection is being dragged. + */ + fireConnectionDraggingEvent = function(jpc) { + _currentInstance.fire("connectionDrag", jpc); + }, + fireConnectionDragStopEvent = function(jpc) { + _currentInstance.fire("connectionDragStop", jpc); }; + /* Function: detach - Detaches and then removes a . Takes either (source, target) (the old way, maintained for backwards compatibility), or a params - object with various possible values. + Detaches and then removes a . From 1.3.5 this method has been altered to remove support for + specifying Connections by various parameters; you can now pass in a Connection as the first argument and + an optional parameters object as a second argument. If you need the functionality this method provided + before 1.3.5 then you should use the getConnections method to get the list of Connections to detach, and + then iterate through them, calling this for each one. Parameters: - source - id or element object of the first element in the Connection. - target - id or element object of the second element in the Connection. - params - a JS object containing the same parameters as you pass to jsPlumb.connect. If this is present then neither source nor - target should be present; it should be the only argument to the method. See the docs for 's constructor for information -about the parameters allowed in the params object. + connection - the to detach + params - optional parameters to the detach call. valid values here are + fireEvent : defaults to false; indicates you want jsPlumb to fire a connection + detached event. The thinking behind this is that if you made a programmatic + call to detach an event, you probably don't need the callback. + forceDetach : defaults to false. allows you to override any beforeDetach listeners that may be registered. + Returns: true if successful, false if not. */ - this.detach = function(source, target) { - if (arguments.length == 2) { - var s = _getElementObject(source), sId = _getId(s); - var t = _getElementObject(target), tId = _getId(t); - _operation(sId, function(jpc) { - if ((jpc.sourceId == sId && jpc.targetId == tId) || (jpc.targetId == sId && jpc.sourceId == tId)) { - _removeElements(jpc.connector.getDisplayElements(), jpc.parent); - jpc.endpoints[0].removeConnection(jpc); - jpc.endpoints[1].removeConnection(jpc); - _removeFromList(connectionsByScope, jpc.scope, jpc); - } - }); - } - // this is the new version of the method, taking a JS object like - // the connect method does. - else if (arguments.length == 1) { - // TODO investigate whether or not this code still works when a user has supplied their own subclass of Connection. i suspect it may not. - if (arguments[0].constructor == Connection) { - arguments[0].endpoints[0].detachFrom(arguments[0].endpoints[1]); - } - else if (arguments[0].connection) { - arguments[0].connection.endpoints[0].detachFrom(arguments[0].connection.endpoints[1]); - } - else { - var _p = jsPlumb.extend( {}, source); // a backwards compatibility hack: source should be thought of as 'params' in this case. + this.detach = function() { + + if (arguments.length == 0) return; + var connType = _currentInstance.Defaults.ConnectionType || _currentInstance.getDefaultConnectionType(), + firstArgIsConnection = arguments[0].constructor == connType, + params = arguments.length == 2 ? firstArgIsConnection ? (arguments[1] || {}) : arguments[0] : arguments[0], + fireEvent = (params.fireEvent !== false), + forceDetach = params.forceDetach, + connection = firstArgIsConnection ? arguments[0] : params.connection; + + if (connection) { + if (forceDetach || (connection.isDetachAllowed(connection) + && connection.endpoints[0].isDetachAllowed(connection) + && connection.endpoints[1].isDetachAllowed(connection))) { + if (forceDetach || _currentInstance.checkCondition("beforeDetach", connection)) + connection.endpoints[0].detach(connection, false, true, fireEvent); // TODO check this param iscorrect for endpoint's detach method + } + } + else { + var _p = jsPlumb.extend( {}, params); // a backwards compatibility hack: source should be thought of as 'params' in this case. // test for endpoint uuids to detach if (_p.uuids) { - _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1])); + _getEndpoint(_p.uuids[0]).detachFrom(_getEndpoint(_p.uuids[1]), fireEvent); } else if (_p.sourceEndpoint && _p.targetEndpoint) { _p.sourceEndpoint.detachFrom(_p.targetEndpoint); } else { - var sourceId = _getId(_p.source); - var targetId = _getId(_p.target); + var sourceId = _getId(_p.source), + targetId = _getId(_p.target); _operation(sourceId, function(jpc) { - if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { - _removeElements(jpc.connector.getDisplayElements(), jpc.parent); - jpc.endpoints[0].removeConnection(jpc); - jpc.endpoints[1].removeConnection(jpc); - _removeFromList(connectionsByScope, jpc.scope, jpc); - } - }); + if ((jpc.sourceId == sourceId && jpc.targetId == targetId) || (jpc.targetId == sourceId && jpc.sourceId == targetId)) { + if (_currentInstance.checkCondition("beforeDetach", jpc)) { + jpc.endpoints[0].detach(jpc, false, true, fireEvent); + } + } + }); } } - } }; /* - Function: detachAll + Function: detachAllConnections Removes all an element's Connections. Parameters: el - either the id of the element, or a selector for the element. + params - optional parameters. alowed values: + fireEvent : defaults to true, whether or not to fire the detach event. Returns: void */ - this.detachAllConnections = function(el) { - var id = _getAttribute(el, "id"); - var endpoints = endpointsByElement[id]; + this.detachAllConnections = function(el, params) { + params = params || {}; + el = _getElementObject(el); + var id = _getAttribute(el, "id"), + endpoints = endpointsByElement[id]; if (endpoints && endpoints.length) { for ( var i = 0; i < endpoints.length; i++) { - endpoints[i].detachAll(); + endpoints[i].detachAll(params.fireEvent); } } }; - - /** - * @deprecated Use detachAllConnections instead. this will be removed in jsPlumb 1.3. - */ - this.detachAll = this.detachAllConnections; /* Function: detachEveryConnection Remove all Connections from all elements, but leaves Endpoints in place. + + Parameters: + params - optional params object containing: + fireEvent : whether or not to fire detach events. defaults to true. + Returns: void @@ -1191,27 +1715,26 @@ about the parameters allowed in the params object. See Also: */ - this.detachEveryConnection = function() { + this.detachEveryConnection = function(params) { + params = params || {}; for ( var id in endpointsByElement) { var endpoints = endpointsByElement[id]; if (endpoints && endpoints.length) { for ( var i = 0; i < endpoints.length; i++) { - endpoints[i].detachAll(); + endpoints[i].detachAll(params.fireEvent); } } } delete connectionsByScope; connectionsByScope = {}; }; - - /** - * @deprecated use detachEveryConnection instead. this will be removed in jsPlumb 1.3. - */ - this.detachEverything = this.detachEveryConnection; + /* Function: draggable - Initialises the draggability of some element or elements. You should use this instead of you library's draggable method so that jsPlumb can setup the appropriate callbacks. Your underlying library's drag method is always called from this method. + Initialises the draggability of some element or elements. You should use this instead of y + our library's draggable method so that jsPlumb can setup the appropriate callbacks. Your + underlying library's drag method is always called from this method. Parameters: el - either an element id, a list of element ids, or a selector. @@ -1220,6 +1743,7 @@ about the parameters allowed in the params object. Returns: void */ + // TODO it would be nice if this supported a selector string, instead of an id. this.draggable = function(el, options) { if (typeof el == 'object' && el.length) { for ( var i = 0; i < el.length; i++) { @@ -1281,6 +1805,31 @@ about the parameters allowed in the params object. return Connection; }; + // helpers for select/selectEndpoints + var _setOperation = function(list, func, args, selector) { + for (var i = 0; i < list.length; i++) { + list[i][func].apply(list[i], args); + } + return selector(list); + }, + _getOperation = function(list, func, args) { + var out = []; + for (var i = 0; i < list.length; i++) { + out.push([ list[i][func].apply(list[i], args), list[i] ]); + } + return out; + }, + setter = function(list, func, selector) { + return function() { + return _setOperation(list, func, arguments, selector); + }; + }, + getter = function(list, func) { + return function() { + return _getOperation(list, func, arguments); + }; + }; + /* * Function: getConnections * Gets all or a subset of connections currently managed by this jsPlumb instance. If only one scope is passed in to this method, @@ -1289,15 +1838,16 @@ about the parameters allowed in the params object. * * Parameters * scope - if the only argument to getConnections is a string, jsPlumb will treat that string as a scope filter, and return a list - * of connections that are in the given scope. + * of connections that are in the given scope. use '*' for all scopes. * options - if the argument is a JS object, you can specify a finer-grained filter: * * - *scope* may be a string specifying a single scope, or an array of strings, specifying multiple scopes. * - *source* either a string representing an element id, or a selector. constrains the result to connections having this source. * - *target* either a string representing an element id, or a selector. constrains the result to connections having this target. + * flat - return results in a flat array (don't return an object whose keys are scopes and whose values are lists per scope). * */ - this.getConnections = function(options) { + this.getConnections = function(options, flat) { if (!options) { options = {}; } else if (options.constructor == String) { @@ -1306,23 +1856,26 @@ about the parameters allowed in the params object. var prepareList = function(input) { var r = []; if (input) { - if (typeof input == 'string') + if (typeof input == 'string') { + if (input === "*") return input; r.push(input); + } else r = input; } return r; - }; - var scope = options.scope || jsPlumb.getDefaultScope(), + }, + scope = options.scope || _currentInstance.getDefaultScope(), scopes = prepareList(scope), sources = prepareList(options.source), targets = prepareList(options.target), filter = function(list, value) { - return list.length > 0 ? _findIndex(list, value) != -1 : true; + if (list === "*") return true; + return list.length > 0 ? _indexOf(list, value) != -1 : true; }, - results = scopes.length > 1 ? {} : [], + results = (!flat && scopes.length > 1) ? {} : [], _addOne = function(scope, obj) { - if (scopes.length > 1) { + if (!flat && scopes.length > 1) { var ss = results[scope]; if (ss == null) { ss = []; results[scope] = ss; @@ -1341,6 +1894,62 @@ about the parameters allowed in the params object. } return results; }; + + var _makeConnectionSelectHandler = function(list) { + //var + return { + // setters + setHover:setter(list, "setHover", _makeConnectionSelectHandler), + removeAllOverlays:setter(list, "removeAllOverlays", _makeConnectionSelectHandler), + setLabel:setter(list, "setLabel", _makeConnectionSelectHandler), + addOverlay:setter(list, "addOverlay", _makeConnectionSelectHandler), + removeOverlay:setter(list, "removeOverlay", _makeConnectionSelectHandler), + removeOverlays:setter(list, "removeOverlays", _makeConnectionSelectHandler), + showOverlay:setter(list, "showOverlay", _makeConnectionSelectHandler), + hideOverlay:setter(list, "hideOverlay", _makeConnectionSelectHandler), + showOverlays:setter(list, "showOverlays", _makeConnectionSelectHandler), + hideOverlays:setter(list, "hideOverlays", _makeConnectionSelectHandler), + setPaintStyle:setter(list, "setPaintStyle", _makeConnectionSelectHandler), + setHoverPaintStyle:setter(list, "setHoverPaintStyle", _makeConnectionSelectHandler), + setDetachable:setter(list, "setDetachable", _makeConnectionSelectHandler), + setConnector:setter(list, "setConnector", _makeConnectionSelectHandler), + setParameter:setter(list, "setParameter", _makeConnectionSelectHandler), + setParameters:setter(list, "setParameters", _makeConnectionSelectHandler), + + detach:function() { + for (var i = 0; i < list.length; i++) + _currentInstance.detach(list[i]); + }, + + // getters + getLabel:getter(list, "getLabel"), + getOverlay:getter(list, "getOverlay"), + isHover:getter(list, "isHover"), + isDetachable:getter(list, "isDetachable"), + getParameter:getter(list, "getParameter"), + getParameters:getter(list, "getParameters"), + + // util + length:list.length, + each:function(f) { + for (var i = 0; i < list.length; i++) { + f(list[i]); + } + return _makeConnectionSelectHandler(list); + }, + get:function(idx) { + return list[idx]; + } + + }; + }; + + this.select = function(params) { + params = params || {}; + params.scope = params.scope || "*"; + var c = _currentInstance.getConnections(params, true); + return _makeConnectionSelectHandler(c); + }; /* * Function: getAllConnections @@ -1374,7 +1983,7 @@ about the parameters allowed in the params object. Endpoint with the given UUID, null if nothing found. */ this.getEndpoint = _getEndpoint; - + /** * Function:getEndpoints * Gets the list of Endpoints for a given selector, or element id. @@ -1392,8 +2001,26 @@ about the parameters allowed in the params object. * a static call. i just don't want to expose it to the public API). */ this.getId = _getId; + this.getOffset = function(id) { + var o = offsets[id]; + return _updateOffset({elId:id}); + }; + + this.getSelector = function(spec) { + return jsPlumb.CurrentLibrary.getSelector(spec); + }; + + this.getSize = function(id) { + var s = sizes[id]; + if (!s) _updateOffset({elId:id}); + return sizes[id]; + }; this.appendElement = _appendElement; + + var _hoverSuspended = false; + this.isHoverSuspended = function() { return _hoverSuspended; }; + this.setHoverSuspended = function(s) { _hoverSuspended = s; }; /* Function: hide @@ -1410,6 +2037,9 @@ about the parameters allowed in the params object. _setVisible(el, "none", changeEndpoints); }; + // exposed for other objects to use to get a unique id. + this.idstamp = _idstamp; + /** * callback from the current library to tell us to prepare ourselves (attach * mouse listeners etc; can't do that until the library has provided a bind method) @@ -1419,121 +2049,95 @@ about the parameters allowed in the params object. if (!initialized) { _currentInstance.setRenderMode(_currentInstance.Defaults.RenderMode); // calling the method forces the capability logic to be run. - var _bind = function(event) { - jsPlumb.CurrentLibrary.bind(document, event, function(e) { - if (!_currentInstance.currentlyDragging && _mouseEventsEnabled && renderMode == jsPlumb.CANVAS) { - // try connections first - for (var scope in connectionsByScope) { - var c = connectionsByScope[scope]; - for (var i = 0; i < c.length; i++) { - var t = c[i].connector[event](e); - if (t) return; - } - } - for (var el in endpointsByElement) { - var ee = endpointsByElement[el]; - for (var i = 0; i < ee.length; i++) { - if (ee[i].endpoint[event](e)) return; + var bindOne = function(event) { + jsPlumb.CurrentLibrary.bind(document, event, function(e) { + if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) { + // try connections first + for (var scope in connectionsByScope) { + var c = connectionsByScope[scope]; + for (var i = 0; i < c.length; i++) { + var t = c[i].connector[event](e); + if (t) return; + } + } + for (var el in endpointsByElement) { + var ee = endpointsByElement[el]; + for (var i = 0; i < ee.length; i++) { + if (ee[i].endpoint[event](e)) return; + } } } - } - }); + }); }; - _bind("click"); - _bind("dblclick"); - _bind("mousemove"); - _bind("mousedown"); - _bind("mouseup"); - + bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu"); + initialized = true; _currentInstance.fire("ready"); } }; + this.log = log; this.jsPlumbUIComponent = jsPlumbUIComponent; this.EventGenerator = EventGenerator; /* * Creates an anchor with the given params. * - * You do not need to use this method. It is exposed because of the way jsPlumb is - * split into three scripts; this will change in the future. - * - * x - the x location of the anchor as a fraction of the - * total width. y - the y location of the anchor as a fraction of the - * total height. xOrientation - value indicating the general direction a - * connection from the anchor should go in, in the x direction. - * yOrientation - value indicating the general direction a connection - * from the anchor should go in, in the y direction. xOffset - a fixed - * offset that should be applied in the x direction that should be - * applied after the x position has been figured out. optional. defaults - * to 0. yOffset - a fixed offset that should be applied in the y - * direction that should be applied after the y position has been - * figured out. optional. defaults to 0. - * -- OR -- - * - * params - {x:..., y:..., xOrientation etc } - * -- OR FROM 1.2.4 --- - * - * name - the name of some Anchor in the _currentInstance.Anchors array. - * -- OR FROM 1.2.4 --- - * - * coords - a list of coords for the anchor, like you would pass to - * jsPlumb.makeAnchor (eg [0.5,0.5,0,-1] - an anchor in the center of - * some element, oriented towards the top of the screen) - * -- OR FROM 1.2.4 --- - * - * anchor - an existing anchor. just gets passed back. it's handy - * internally to have this functionality. * * Returns: The newly created Anchor. */ - this.makeAnchor = function(x, y, xOrientation, yOrientation, xOffset, yOffset) { - // backwards compatibility here. we used to require an object passed - // in but that makes the call very verbose. easier to use - // by just passing in four/six values. but for backwards - // compatibility if we are given only one value we assume it's a - // call in the old form. + this.makeAnchor = function() { if (arguments.length == 0) return null; - var params = {}; - if (arguments.length == 1) { - var specimen = arguments[0]; - // if it appears to be an anchor already... - if (specimen.compute && specimen.getOrientation) return specimen; - // is it the name of an anchor type? - else if (typeof specimen == "string") return _currentInstance.Anchors[arguments[0]](); - // is it an array of coordinates? - else if (specimen.constructor == Array) { - if (specimen[0].constructor == Array || specimen[0].constructor == String) - return new DynamicAnchor(specimen); + var specimen = arguments[0], elementId = arguments[1], jsPlumbInstance = arguments[2], newAnchor = null; + if (!jsPlumbInstance) + throw "NO JSPLUMB SET"; + // if it appears to be an anchor already... + if (specimen.compute && specimen.getOrientation) return specimen; //TODO hazy here about whether it should be added or is already added somehow. + // is it the name of an anchor type? + else if (typeof specimen == "string") { + newAnchor = jsPlumb.Anchors[arguments[0]]({elementId:elementId, jsPlumbInstance:_currentInstance}); + } + // is it an array? it will be one of: + // an array of [name, params] - this defines a single anchor + // an array of arrays - this defines some dynamic anchors + // an array of numbers - this defines a single anchor. + else if (specimen.constructor == Array) { + if (specimen[0].constructor == Array || specimen[0].constructor == String) { + if (specimen.length == 2 && specimen[0].constructor == String && specimen[1].constructor == Object) { + var pp = jsPlumb.extend({elementId:elementId, jsPlumbInstance:_currentInstance}, specimen[1]); + newAnchor = jsPlumb.Anchors[specimen[0]](pp); + } else - return jsPlumb.makeAnchor.apply(this, specimen); + newAnchor = new DynamicAnchor(specimen, null, elementId); + } + else { + var anchorParams = { + x:specimen[0], y:specimen[1], + orientation : (specimen.length >= 4) ? [ specimen[2], specimen[3] ] : [0,0], + offsets : (specimen.length == 6) ? [ specimen[4], specimen[5] ] : [ 0, 0 ], + elementId:elementId + }; + newAnchor = new Anchor(anchorParams); + newAnchor.clone = function() { return new Anchor(anchorParams); }; } - // last we try the backwards compatibility stuff. - else if (typeof arguments[0] == "object") jsPlumb.extend(params, x); - } else { - params = { x : x, y : y }; - if (arguments.length >= 4) params.orientation = [ arguments[2], arguments[3] ]; - if (arguments.length == 6) params.offsets = [ arguments[4], arguments[5] ]; } - var a = new Anchor(params); - a.clone = function() { - return new Anchor(params); - }; - return a; + + if (!newAnchor.id) newAnchor.id = "anchor_" + _idstamp(); + return newAnchor; }; /** * makes a list of anchors from the given list of types or coords, eg * ["TopCenter", "RightMiddle", "BottomCenter", [0, 1, -1, -1] ] */ - this.makeAnchors = function(types) { + this.makeAnchors = function(types, elementId, jsPlumbInstance) { var r = []; - for ( var i = 0; i < types.length; i++) + for ( var i = 0; i < types.length; i++) { if (typeof types[i] == "string") - r.push(_currentInstance.Anchors[types[i]]()); + r.push(jsPlumb.Anchors[types[i]]({elementId:elementId, jsPlumbInstance:jsPlumbInstance})); else if (types[i].constructor == Array) - r.push(jsPlumb.makeAnchor(types[i])); + r.push(_currentInstance.makeAnchor(types[i], elementId, jsPlumbInstance)); + } return r; }; @@ -1559,7 +2163,7 @@ about the parameters allowed in the params object. * endpoint optional. specification of an endpoint to create when a connection is created. * scope optional. scope for the drop zone. * dropOptions optional. same stuff as you would pass to dropOptions of an Endpoint definition. - * deleteEndpointsOnDetach optional, defaults to false. whether or not to delete + * deleteEndpointsOnDetach optional, defaults to true. whether or not to delete * any Endpoints created by a connection to this target if * the connection is subsequently detached. this will not * remove Endpoints that have had more Connections attached @@ -1567,56 +2171,366 @@ about the parameters allowed in the params object. * * */ - var _targetEndpointDefinitions = {}; + var _targetEndpointDefinitions = {}, + _targetEndpoints = {}, + _targetEndpointsUnique = {}, + _setEndpointPaintStylesAndAnchor = function(ep, epIndex) { + ep.paintStyle = ep.paintStyle || + _currentInstance.Defaults.EndpointStyles[epIndex] || + _currentInstance.Defaults.EndpointStyle || + jsPlumb.Defaults.EndpointStyles[epIndex] || + jsPlumb.Defaults.EndpointStyle; + ep.hoverPaintStyle = ep.hoverPaintStyle || + _currentInstance.Defaults.EndpointHoverStyles[epIndex] || + _currentInstance.Defaults.EndpointHoverStyle || + jsPlumb.Defaults.EndpointHoverStyles[epIndex] || + jsPlumb.Defaults.EndpointHoverStyle; + + ep.anchor = ep.anchor || + _currentInstance.Defaults.Anchors[epIndex] || + _currentInstance.Defaults.Anchor || + jsPlumb.Defaults.Anchors[epIndex] || + jsPlumb.Defaults.Anchor; + + ep.endpoint = ep.endpoint || + _currentInstance.Defaults.Endpoints[epIndex] || + _currentInstance.Defaults.Endpoint || + jsPlumb.Defaults.Endpoints[epIndex] || + jsPlumb.Defaults.Endpoint; + }; this.makeTarget = function(el, params, referenceParams) { - var p = jsPlumb.extend({}, referenceParams); + var p = jsPlumb.extend({_jsPlumb:_currentInstance}, referenceParams); jsPlumb.extend(p, params); + _setEndpointPaintStylesAndAnchor(p, 1); var jpcl = jsPlumb.CurrentLibrary, - scope = p.scope || _currentInstance.Defaults.Scope, - deleteEndpointsOnDetach = p.deleteEndpointsOnDetach || false, + targetScope = p.scope || _currentInstance.Defaults.Scope, + deleteEndpointsOnDetach = !(p.deleteEndpointsOnDetach === false), _doOne = function(_el) { // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, // and use the endpoint definition if found. var elid = _getId(_el); - _targetEndpointDefinitions[elid] = p.endpoint; + _targetEndpointDefinitions[elid] = p; + _targetEndpointsUnique[elid] = p.uniqueEndpoint, + proxyComponent = new jsPlumbUIComponent(p); - var dropOptions = jsPlumb.extend({}, p.dropOptions || {}); - var _drop = function() { + var dropOptions = jsPlumb.extend({}, p.dropOptions || {}), + _drop = function() { + + var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments); + + _currentInstance.currentlyDragging = false; var draggable = _getElementObject(jpcl.getDragObject(arguments)), - id = _getAttribute(draggable, "dragId"), - // restore the original scope if necessary (issue 57) - scope = _getAttribute(draggable, "originalScope"); + id = _getAttribute(draggable, "dragId"), + // restore the original scope if necessary (issue 57) + scope = _getAttribute(draggable, "originalScope"), + jpc = floatingConnections[id], + source = jpc.endpoints[0], + _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : {}; + + // unlock the source anchor to allow it to refresh its position if necessary + source.anchor.locked = false; - if (scope) jsPlumb.CurrentLibrary.setDragScope(draggable, scope); + if (scope) jpcl.setDragScope(draggable, scope); + + // check if drop is allowed here. + //var _continue = jpc.isDropAllowed(jpc.sourceId, _getId(_el), jpc.scope); + var _continue = proxyComponent.isDropAllowed(jpc.sourceId, _getId(_el), jpc.scope); + + // regardless of whether the connection is ok, reconfigure the existing connection to + // point at the current info. we need this to be correct for the detach event that will follow. + // clear the source endpoint from the list to detach. we will detach this connection at this + // point, but we want to keep the source endpoint. the target is a floating endpoint and should + // be removed. TODO need to figure out whether this code can result in endpoints kicking around + // when they shouldnt be. like is this a full detach of a connection? can it be? + if (jpc.endpointsToDeleteOnDetach) { + if (source === jpc.endpointsToDeleteOnDetach[0]) + jpc.endpointsToDeleteOnDetach[0] = null; + else if (source === jpc.endpointsToDeleteOnDetach[1]) + jpc.endpointsToDeleteOnDetach[1] = null; + } + // reinstate any suspended endpoint; this just puts the connection back into + // a state in which it will report sensible values if someone asks it about + // its target. we're going to throw this connection away shortly so it doesnt matter + // if we manipulate it a bit. + if (jpc.suspendedEndpoint) { + jpc.targetId = jpc.suspendedEndpoint.elementId; + jpc.target = jpcl.getElementObject(jpc.suspendedEndpoint.elementId); + jpc.endpoints[1] = jpc.suspendedEndpoint; + } + + if (_continue) { + + // detach this connection from the source. + source.detach(jpc, false, true, false);//source.endpointWillMoveAfterConnection); + + // make a new Endpoint for the target + //var newEndpoint = _currentInstance.addEndpoint(_el, _endpoint); + + var newEndpoint = _targetEndpoints[elid] || _currentInstance.addEndpoint(_el, p); + if (p.uniqueEndpoint) _targetEndpoints[elid] = newEndpoint; // may of course just store what it just pulled out. that's ok. + + // if the anchor has a 'positionFinder' set, then delegate to that function to find + // out where to locate the anchor. + if (newEndpoint.anchor.positionFinder != null) { + var dropPosition = jpcl.getUIPosition(arguments), + elPosition = jpcl.getOffset(_el), + elSize = jpcl.getSize(_el), + ap = newEndpoint.anchor.positionFinder(dropPosition, elPosition, elSize, newEndpoint.anchor.constructorParams); + newEndpoint.anchor.x = ap[0]; + newEndpoint.anchor.y = ap[1]; + // now figure an orientation for it..kind of hard to know what to do actually. probably the best thing i can do is to + // support specifying an orientation in the anchor's spec. if one is not supplied then i will make the orientation + // be what will cause the most natural link to the source: it will be pointing at the source, but it needs to be + // specified in one axis only, and so how to make that choice? i think i will use whichever axis is the one in which + // the target is furthest away from the source. + } + var c = _currentInstance.connect({ + source:source, + target:newEndpoint, + scope:scope, + previousConnection:jpc, + container:jpc.parent, + deleteEndpointsOnDetach:deleteEndpointsOnDetach, + // 'endpointWillMoveAfterConnection' is set by the makeSource function, and it indicates that the + // given endpoint will actually transfer from the element it is currently attached to to some other + // element after a connection has been established. in that case, we do not want to fire the + // connection event, since it will have the wrong data in it; makeSource will do it for us. + // this is controlled by the 'parent' parameter on a makeSource call. + doNotFireConnectionEvent:source.endpointWillMoveAfterConnection + }); + if (deleteEndpointsOnDetach) + c.endpointsToDeleteOnDetach = [ source, newEndpoint ]; + + c.repaint(); + } + // if not allowed to drop... + else { + // TODO this code is identical (pretty much) to what happens when a connection + // dragged from a normal endpoint is in this situation. refactor. + // is this an existing connection, and will we reattach? + if (jpc.suspendedEndpoint) { + if (source.isReattach) { + jpc.setHover(false); + jpc.floatingAnchorIndex = null; + jpc.suspendedEndpoint.addConnection(jpc); + _currentInstance.repaint(source.elementId); + } + else + source.detach(jpc, false, true, true, originalEvent); // otherwise, detach the connection and tell everyone about it. + } + + } + }; + + var dropEvent = jpcl.dragEvents['drop']; + dropOptions["scope"] = dropOptions["scope"] || targetScope; + dropOptions[dropEvent] = _wrap(dropOptions[dropEvent], _drop); + + jpcl.initDroppable(_el, dropOptions, true); + }; + + el = _convertYUICollection(el); + + var inputs = el.length && el.constructor != String ? el : [ el ]; + + for (var i = 0; i < inputs.length; i++) { + _doOne(_getElementObject(inputs[i])); + } + }; + + /** + * helper method to make a list of elements drop targets. + * @param els + * @param params + * @param referenceParams + * @return + */ + this.makeTargets = function(els, params, referenceParams) { + for ( var i = 0; i < els.length; i++) { + _currentInstance.makeTarget(els[i], params, referenceParams); + } + }; + + /** + * Function: makeSource + * Makes some DOM element a Connection source, allowing you to drag connections from it + * without having to register any Endpoints on it first. When a Connection is established, + * the endpoint spec that was passed in to this method is used to create a suitable + * Endpoint (the default will be used if you do not provide one). + * + * Parameters: + * el - string id or element selector for the element to make a source. + * params - JS object containing parameters: + * endpoint optional. specification of an endpoint to create when a connection is created. + * parent optional. the element to add Endpoints to when a Connection is established. if you omit this, + * Endpoints will be added to 'el'. + * scope optional. scope for the connections dragged from this element. + * dragOptions optional. same stuff as you would pass to dragOptions of an Endpoint definition. + * deleteEndpointsOnDetach optional, defaults to false. whether or not to delete + * any Endpoints created by a connection from this source if + * the connection is subsequently detached. this will not + * remove Endpoints that have had more Connections attached + * to them after they were created. + * + * + */ + var _sourceEndpointDefinitions = {}, + _sourceEndpoints = {}, + _sourceEndpointsUnique = {}; + + this.makeSource = function(el, params, referenceParams) { + var p = jsPlumb.extend({}, referenceParams); + jsPlumb.extend(p, params); + _setEndpointPaintStylesAndAnchor(p, 0); + var jpcl = jsPlumb.CurrentLibrary, + _doOne = function(_el) { + // get the element's id and store the endpoint definition for it. jsPlumb.connect calls will look for one of these, + // and use the endpoint definition if found. + var elid = _getId(_el), + parent = p.parent, + idToRegisterAgainst = parent != null ? _currentInstance.getId(jpcl.getElementObject(parent)) : elid; + + _sourceEndpointDefinitions[idToRegisterAgainst] = p; + _sourceEndpointsUnique[idToRegisterAgainst] = p.uniqueEndpoint; + + var stopEvent = jpcl.dragEvents["stop"], + dragEvent = jpcl.dragEvents["drag"], + dragOptions = jsPlumb.extend({ }, p.dragOptions || {}), + existingDrag = dragOptions.drag, + existingStop = dragOptions.stop, + ep = null, + endpointAddedButNoDragYet = false; + + // set scope if its not set in dragOptions but was passed in in params + dragOptions["scope"] = dragOptions["scope"] || p.scope; + + dragOptions[dragEvent] = _wrap(dragOptions[dragEvent], function() { + if (existingDrag) existingDrag.apply(this, arguments); + endpointAddedButNoDragYet = false; + }); + + dragOptions[stopEvent] = function() { + if (existingStop) existingStop.apply(this, arguments); + + //_currentlyDown = false; + _currentInstance.currentlyDragging = false; + + if (ep.connections.length == 0) + _currentInstance.deleteEndpoint(ep); + else { + + jpcl.unbind(ep.canvas, "mousedown"); + + // reset the anchor to the anchor that was initially provided. the one we were using to drag + // the connection was just a placeholder that was located at the place the user pressed the + // mouse button to initiate the drag. + var anchorDef = p.anchor || _currentInstance.Defaults.Anchor, + oldAnchor = ep.anchor; + + ep.anchor = _currentInstance.makeAnchor(anchorDef, elid, _currentInstance); + + + if (p.parent) { + var parent = jpcl.getElementObject(p.parent); + if (parent) { + var currentId = ep.elementId; + ep.setElement(parent); + ep.endpointWillMoveAfterConnection = false; + _currentInstance.anchorManager.rehomeEndpoint(currentId, parent); + ep.connections[0].previousConnection = null; + _currentInstance.anchorManager.connectionDetached({ + sourceId:ep.connections[0].sourceId, + targetId:ep.connections[0].targetId, + connection:ep.connections[0] + }); + _finaliseConnection(ep.connections[0]); + } + } + + ep.repaint(); + _currentInstance.repaint(ep.elementId); + _currentInstance.repaint(ep.connections[0].targetId); + + } + }; + // when the user presses the mouse, add an Endpoint + var mouseDownListener = function(e) { + // make sure we have the latest offset for this div + var myOffsetInfo = _updateOffset({elId:elid}); + + var x = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width, + y = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height, + parentX = x, + parentY = y; - // get the connection, to then get its endpoint - var jpc = floatingConnections[id], - source = jpc.endpoints[0], - _endpoint = p.endpoint ? jsPlumb.extend({}, p.endpoint) : null, - // make a new Endpoint - newEndpoint = jsPlumb.addEndpoint(_el, _endpoint); + + // if there is a parent, the endpoint will actually be added to it now, rather than the div + // that was the source. in that case, we have to adjust the anchor position so it refers to + // the parent. + if (p.parent) { + var pEl = jsPlumb.CurrentLibrary.getElementObject(p.parent), + pId = _getId(pEl); + myOffsetInfo = _updateOffset({elId:pId}); + parentX = ((e.pageX || e.page.x) - myOffsetInfo.left) / myOffsetInfo.width, + parentY = ((e.pageY || e.page.y) - myOffsetInfo.top) / myOffsetInfo.height; + } - var c = jsPlumb.connect({ - source:source, - target:newEndpoint, - scope:scope - }); - if (deleteEndpointsOnDetach) - c.endpointToDeleteOnDetach = newEndpoint; + // we need to override the anchor in here, and force 'isSource', but we don't want to mess with + // the params passed in, because after a connection is established we're going to reset the endpoint + // to have the anchor we were given. + var tempEndpointParams = {}; + jsPlumb.extend(tempEndpointParams, p); + tempEndpointParams.isSource = true; + tempEndpointParams.anchor = [x,y,0,0]; + tempEndpointParams.parentAnchor = [ parentX, parentY, 0, 0 ]; + tempEndpointParams.dragOptions = dragOptions; + // if a parent was given we need to turn that into a "container" argument. this is, by default, + // the parent of the element we will move to, so parent of p.parent in this case. however, if + // the user has specified a 'container' on the endpoint definition or on + // the defaults, we should use that. + if (p.parent) { + var potentialParent = tempEndpointParams.container || _currentInstance.Defaults.Container; + if (potentialParent) + tempEndpointParams.container = potentialParent; + else + tempEndpointParams.container = jsPlumb.CurrentLibrary.getParent(p.parent); + } + + ep = _currentInstance.addEndpoint(elid, tempEndpointParams); + + endpointAddedButNoDragYet = true; + // we set this to prevent connections from firing attach events before this function has had a chance + // to move the endpoint. + ep.endpointWillMoveAfterConnection = p.parent != null; + ep.endpointWillMoveTo = p.parent ? jpcl.getElementObject(p.parent) : null; + + var _delTempEndpoint = function() { + // this mouseup event is fired only if no dragging occurred, by jquery and yui, but for mootools + // it is fired even if dragging has occurred, in which case we would blow away a perfectly + // legitimate endpoint, were it not for this check. the flag is set after adding an + // endpoint and cleared in a drag listener we set in the dragOptions above. + if(endpointAddedButNoDragYet) { + _currentInstance.deleteEndpoint(ep); + } + }; + + _currentInstance.registerListener(ep.canvas, "mouseup", _delTempEndpoint); + _currentInstance.registerListener(_el, "mouseup", _delTempEndpoint); + + // and then trigger its mousedown event, which will kick off a drag, which will start dragging + // a new connection from this endpoint. + jpcl.trigger(ep.canvas, "mousedown", e); }; - - var dropEvent = jpcl.dragEvents['drop']; - dropOptions["scope"] = dropOptions["scope"] || scope; - dropOptions[dropEvent] = _wrap(dropOptions[dropEvent], _drop); - - jpcl.initDroppable(_el, dropOptions); + + // register this on jsPlumb so that it can be cleared by a reset. + _currentInstance.registerListener(_el, "mousedown", mouseDownListener); }; el = _convertYUICollection(el); - var results = [], inputs = el.length && el.constructor != String ? el : [ el ]; + var inputs = el.length && el.constructor != String ? el : [ el ]; for (var i = 0; i < inputs.length; i++) { _doOne(_getElementObject(inputs[i])); @@ -1624,15 +2538,15 @@ about the parameters allowed in the params object. }; /** - * helper method to make a list of elements drop targets. + * helper method to make a list of elements connection sources. * @param els * @param params * @param referenceParams * @return */ - this.makeTargets = function(els, params, referenceParams) { + this.makeSources = function(els, params, referenceParams) { for ( var i = 0; i < els.length; i++) { - _currentInstance.makeTarget(els[i], params, referenceParams); + _currentInstance.makeSource(els[i], params, referenceParams); } }; @@ -1697,10 +2611,12 @@ about the parameters allowed in the params object. */ this.removeAllEndpoints = function(el) { - var elId = _getAttribute(el, "id"); - var ebe = endpointsByElement[elId]; - for ( var i in ebe) - _currentInstance.deleteEndpoint(ebe[i]); + var elId = _getAttribute(el, "id"), + ebe = endpointsByElement[elId]; + if (ebe) { + for ( var i = 0; i < ebe.length; i++) + _currentInstance.deleteEndpoint(ebe[i]); + } endpointsByElement[elId] = []; }; @@ -1718,13 +2634,40 @@ about the parameters allowed in the params object. _currentInstance.deleteEndpoint(endpoint); }; + var _registeredListeners = {}, + _unbindRegisteredListeners = function() { + for (var i in _registeredListeners) { + for (var j = 0; j < _registeredListeners[i].length; j++) { + var info = _registeredListeners[i][j]; + jsPlumb.CurrentLibrary.unbind(info.el, info.event, info.listener); + } + } + _registeredListeners = {}; + }; + + // internal register listener method. gives us a hook to clean things up + // with if the user calls jsPlumb.reset. + this.registerListener = function(el, type, listener) { + jsPlumb.CurrentLibrary.bind(el, type, listener); + _addToList(_registeredListeners, type, {el:el, event:type, listener:listener}); + }; + /* Function:reset Removes all endpoints and connections and clears the listener list. To keep listeners call jsPlumb.deleteEveryEndpoint instead of this. */ - this.reset = function() { - this.deleteEveryEndpoint(); - this.clearListeners(); + this.reset = function() { + _currentInstance.deleteEveryEndpoint(); + _currentInstance.clearListeners(); + _targetEndpointDefinitions = {}; + _targetEndpoints = {}; + _targetEndpointsUnique = {}; + _sourceEndpointDefinitions = {}; + _sourceEndpoints = {}; + _sourceEndpointsUnique = {}; + _unbindRegisteredListeners(); + _currentInstance.anchorManager.reset(); + _currentInstance.dragManager.reset(); }; /* @@ -1735,10 +2678,10 @@ about the parameters allowed in the params object. value - whether or not to automatically repaint when the window is resized. Returns: void - */ + * this.setAutomaticRepaint = function(value) { automaticRepaint = value; - }; + };*/ /* * Function: setDefaultScope @@ -1770,17 +2713,57 @@ about the parameters allowed in the params object. this.setDraggable = _setDraggable; /* - * Function: setDraggableByDefault - * Sets whether or not elements are draggable by default. Default for this is true. - * - * Parameters: - * draggable - value to set - * - * Returns: - * void - */ - this.setDraggableByDefault = function(draggable) { - _draggableByDefault = draggable; + * Function: setId + * Changes the id of some element, adjusting all connections and endpoints + * + * Parameters: + * el - a selector, a DOM element, or a string. + * newId - string. + */ + this.setId = function(el, newId, doNotSetAttribute) { + + var id = el.constructor == String ? el : _currentInstance.getId(el), + sConns = _currentInstance.getConnections({source:id, scope:'*'}, true), + tConns = _currentInstance.getConnections({target:id, scope:'*'}, true); + + newId = "" + newId; + + if (!doNotSetAttribute) { + el = jsPlumb.CurrentLibrary.getElementObject(id); + jsPlumb.CurrentLibrary.setAttribute(el, "id", newId); + } + + el = jsPlumb.CurrentLibrary.getElementObject(newId); + + + endpointsByElement[newId] = endpointsByElement[id] || []; + for (var i = 0; i < endpointsByElement[newId].length; i++) { + endpointsByElement[newId][i].elementId = newId; + endpointsByElement[newId][i].element = el; + endpointsByElement[newId][i].anchor.elementId = newId; + } + delete endpointsByElement[id]; + + _currentInstance.anchorManager.changeId(id, newId); + + var _conns = function(list, epIdx, type) { + for (var i = 0; i < list.length; i++) { + list[i].endpoints[epIdx].elementId = newId; + list[i].endpoints[epIdx].element = el; + list[i][type + "Id"] = newId; + list[i][type] = el; + } + }; + _conns(sConns, 0, "source"); + _conns(tConns, 1, "target"); + }; + + /* + * Function: setIdChanged + * Notify jsPlumb that the element with oldId has had its id changed to newId. + */ + this.setIdChanged = function(oldId, newId) { + _currentInstance.setId(oldId, newId, true); }; this.setDebugLog = function(debugLog) { @@ -1798,21 +2781,14 @@ about the parameters allowed in the params object. */ this.setRepaintFunction = function(f) { repaintFunction = f; - }; - - /* - * Function: setMouseEventsEnabled - * Sets whether or not mouse events are enabled. Default is true. - * - * Parameters: - * enabled - whether or not mouse events should be enabled. - * - * Returns: - * void - */ - this.setMouseEventsEnabled = function(enabled) { - _mouseEventsEnabled = enabled; - }; + }; + + /* + * Function: setSuspendDrawing + * Suspends drawing operations. This can be used when you have a lot of connections to make or endpoints to register; + * it will save you a lot of time. + */ + this.setSuspendDrawing = _setSuspendDrawing; /* * Constant for use with the setRenderMode method @@ -1910,7 +2886,7 @@ about the parameters allowed in the params object. var c = connectionsByScope[scope]; return c ? c.length : 0; }, - findIndex : _findIndex, + //findIndex : _findIndex, getId : _getId, makeAnchor:self.makeAnchor, makeDynamicAnchor:self.makeDynamicAnchor @@ -1957,13 +2933,8 @@ about the parameters allowed in the params object. * void */ this.unload = function() { - delete endpointsByElement; - delete endpointsByUUID; - delete offsets; - delete sizes; - delete floatingConnections; - delete draggableStates; - delete canvasList; + // this used to do something, but it turns out that what it did was nothing. + // now it exists only for backwards compatibility. }; /* @@ -1975,6 +2946,34 @@ about the parameters allowed in the params object. */ this.wrap = _wrap; this.addListener = this.bind; + + var adjustForParentOffsetAndScroll = function(xy, el) { + + var offsetParent = null, result = xy; + if (el.tagName.toLowerCase() === "svg" && el.parentNode) { + offsetParent = el.parentNode; + } + else if (el.offsetParent) { + offsetParent = el.offsetParent; + } + if (offsetParent != null) { + var po = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(offsetParent), + so = offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : {left:offsetParent.scrollLeft, top:offsetParent.scrollTop}; + + + // i thought it might be cool to do this: + // lastReturnValue[0] = lastReturnValue[0] - offsetParent.offsetLeft + offsetParent.scrollLeft; + // lastReturnValue[1] = lastReturnValue[1] - offsetParent.offsetTop + offsetParent.scrollTop; + // but i think it ignores margins. my reasoning was that it's quicker to not hand off to some underlying + // library. + + result[0] = xy[0] - po.left + so.left; + result[1] = xy[1] - po.top + so.top; + } + + return result; + + }; /** * Anchors model a position on some element at which an Endpoint may be located. They began as a first class citizen of jsPlumb, ie. a user @@ -1986,28 +2985,27 @@ about the parameters allowed in the params object. var self = this; this.x = params.x || 0; this.y = params.y || 0; + this.elementId = params.elementId; var orientation = params.orientation || [ 0, 0 ]; var lastTimestamp = null, lastReturnValue = null; this.offsets = params.offsets || [ 0, 0 ]; self.timestamp = null; this.compute = function(params) { var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp; - if (timestamp && timestamp === self.timestamp) { + + if (timestamp && timestamp === self.timestamp) return lastReturnValue; - } + lastReturnValue = [ xy[0] + (self.x * wh[0]) + self.offsets[0], xy[1] + (self.y * wh[1]) + self.offsets[1] ]; + // adjust loc if there is an offsetParent - if (element.canvas && element.canvas.offsetParent) { - var po = element.canvas.offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(element.canvas.offsetParent); - lastReturnValue[0] = lastReturnValue[0] - po.left; - lastReturnValue[1] = lastReturnValue[1] - po.top; - } + lastReturnValue = adjustForParentOffsetAndScroll(lastReturnValue, element.canvas); self.timestamp = timestamp; return lastReturnValue; }; - this.getOrientation = function() { return orientation; }; + this.getOrientation = function(_endpoint) { return orientation; }; this.equals = function(anchor) { if (!anchor) return false; @@ -2033,41 +3031,44 @@ about the parameters allowed in the params object. // this is the anchor that this floating anchor is referenced to for // purposes of calculating the orientation. - var ref = params.reference; + var ref = params.reference, // the canvas this refers to. - var refCanvas = params.referenceCanvas; - var size = _getSize(_getElementObject(refCanvas)); + refCanvas = params.referenceCanvas, + size = _getSize(_getElementObject(refCanvas)), // these are used to store the current relative position of our // anchor wrt the reference anchor. they only indicate // direction, so have a value of 1 or -1 (or, very rarely, 0). these // values are written by the compute method, and read // by the getOrientation method. - var xDir = 0, yDir = 0; + xDir = 0, yDir = 0, // temporary member used to store an orientation when the floating // anchor is hovering over another anchor. - var orientation = null; - var _lastResult = null; + orientation = null, + _lastResult = null; + + // set these to 0 each; they are used by certain types of connectors in the loopback case, + // when the connector is trying to clear the element it is on. but for floating anchor it's not + // very important. + this.x = 0; this.y = 0; + + this.isFloating = true; this.compute = function(params) { - var xy = params.xy, element = params.element; - var result = [ xy[0] + (size[0] / 2), xy[1] + (size[1] / 2) ]; // return origin of the element. we may wish to improve this so that any object can be the drag proxy. + var xy = params.xy, element = params.element, + result = [ xy[0] + (size[0] / 2), xy[1] + (size[1] / 2) ]; // return origin of the element. we may wish to improve this so that any object can be the drag proxy. // adjust loc if there is an offsetParent - if (element.canvas && element.canvas.offsetParent) { - var po = element.canvas.offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(element.canvas.offsetParent); - result[0] = result[0] - po.left; - result[1] = result[1] - po.top; - } + result = adjustForParentOffsetAndScroll(result, element.canvas); _lastResult = result; return result; }; - this.getOrientation = function() { + this.getOrientation = function(_endpoint) { if (orientation) return orientation; else { - var o = ref.getOrientation(); + var o = ref.getOrientation(_endpoint); // here we take into account the orientation of the other // anchor: if it declares zero for some direction, we declare zero too. this might not be the most awesome. perhaps we can come // up with a better way. it's just so that the line we draw looks like it makes sense. maybe this wont make sense. @@ -2081,7 +3082,9 @@ about the parameters allowed in the params object. * over another anchor; we want to assume that anchor's orientation * for the duration of the hover. */ - this.over = function(anchor) { orientation = anchor.getOrientation(); }; + this.over = function(anchor) { + orientation = anchor.getOrientation(); + }; /** * notification the endpoint associated with this anchor is no @@ -2094,7 +3097,7 @@ about the parameters allowed in the params object. }; /* - * A DynamicAnchors is an Anchor that contains a list of other Anchors, which it cycles + * A DynamicAnchor is an Anchor that contains a list of other Anchors, which it cycles * through at compute time to find the one that is located closest to * the center of the target element, and returns that Anchor's compute * method result. this causes endpoints to follow each other with @@ -2102,24 +3105,27 @@ about the parameters allowed in the params object. * feature for some applications. * */ - var DynamicAnchor = function(anchors, anchorSelector) { + var DynamicAnchor = function(anchors, anchorSelector, elementId) { this.isSelective = true; this.isDynamic = true; - var _anchors = [], - _convert = function(anchor) { return anchor.constructor == Anchor ? anchor: jsPlumb.makeAnchor(anchor); }; - for (var i = 0; i < anchors.length; i++) _anchors[i] = _convert(anchors[i]); + var _anchors = [], self = this, + _convert = function(anchor) { + return anchor.constructor == Anchor ? anchor: _currentInstance.makeAnchor(anchor, elementId, _currentInstance); + }; + for (var i = 0; i < anchors.length; i++) + _anchors[i] = _convert(anchors[i]); this.addAnchor = function(anchor) { _anchors.push(_convert(anchor)); }; this.getAnchors = function() { return _anchors; }; this.locked = false; var _curAnchor = _anchors.length > 0 ? _anchors[0] : null, - _curIndex = _anchors.length > 0 ? 0 : -1, - self = this, + _curIndex = _anchors.length > 0 ? 0 : -1, + self = this, - // helper method to calculate the distance between the centers of the two elements. - _distance = function(anchor, cx, cy, xy, wh) { - var ax = xy[0] + (anchor.x * wh[0]), ay = xy[1] + (anchor.y * wh[1]); - return Math.sqrt(Math.pow(cx - ax, 2) + Math.pow(cy - ay, 2)); - }, + // helper method to calculate the distance between the centers of the two elements. + _distance = function(anchor, cx, cy, xy, wh) { + var ax = xy[0] + (anchor.x * wh[0]), ay = xy[1] + (anchor.y * wh[1]); + return Math.sqrt(Math.pow(cx - ax, 2) + Math.pow(cy - ay, 2)); + }, // default method uses distance between element centers. you can provide your own method in the dynamic anchor // constructor (and also to jsPlumb.makeDynamicAnchor). the arguments to it are four arrays: @@ -2147,25 +3153,570 @@ about the parameters allowed in the params object. // maintain our state. anchor will be locked // if it is the source of a drag and drop. if (self.locked || txy == null || twh == null) - return _curAnchor.compute(params); + return _curAnchor.compute(params); else params.timestamp = null; // otherwise clear this, i think. we want the anchor to compute. _curAnchor = _anchorSelector(xy, wh, txy, twh, _anchors); + self.x = _curAnchor.x; + self.y = _curAnchor.y; - var pos = _curAnchor.compute(params); - return pos; + return _curAnchor.compute(params); }; this.getCurrentLocation = function() { - var cl = _curAnchor != null ? _curAnchor.getCurrentLocation() : null; - return cl; + return _curAnchor != null ? _curAnchor.getCurrentLocation() : null; }; - this.getOrientation = function() { return _curAnchor != null ? _curAnchor.getOrientation() : [ 0, 0 ]; }; + this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; }; this.over = function(anchor) { if (_curAnchor != null) _curAnchor.over(anchor); }; this.out = function() { if (_curAnchor != null) _curAnchor.out(); }; }; + + /* + manages anchors for all elements. + */ + // "continuous" anchors: anchors that pick their location based on how many connections the given element has. + // this requires looking at a lot more elements than normal - anything that has had a Continuous anchor applied has + // to be recalculated. so this manager is used as a reference point. the first time, with a new timestamp, that + // a continuous anchor is asked to compute, it calls this guy. or maybe, even, this guy gets called somewhere else + // and compute only ever returns pre-computed values. either way, this is the central point, and we want it to + // be called as few times as possible. + var continuousAnchors = {}, + continuousAnchorLocations = {}, + continuousAnchorOrientations = {}, + Orientation = { HORIZONTAL : "horizontal", VERTICAL : "vertical", DIAGONAL : "diagonal", IDENTITY:"identity" }, + + // TODO this functions uses a crude method of determining orientation between two elements. + // 'diagonal' should be chosen when the angle of the line between the two centers is around + // one of 45, 135, 225 and 315 degrees. maybe +- 15 degrees. + calculateOrientation = function(sourceId, targetId, sd, td) { + + if (sourceId === targetId) return { + orientation:Orientation.IDENTITY, + a:["top", "top"] + }; + + var theta = Math.atan2((td.centery - sd.centery) , (td.centerx - sd.centerx)), + theta2 = Math.atan2((sd.centery - td.centery) , (sd.centerx - td.centerx)), + h = ((sd.left <= td.left && sd.right >= td.left) || (sd.left <= td.right && sd.right >= td.right) || + (sd.left <= td.left && sd.right >= td.right) || (td.left <= sd.left && td.right >= sd.right)), + v = ((sd.top <= td.top && sd.bottom >= td.top) || (sd.top <= td.bottom && sd.bottom >= td.bottom) || + (sd.top <= td.top && sd.bottom >= td.bottom) || (td.top <= sd.top && td.bottom >= sd.bottom)); + + if (! (h || v)) { + var a = null, rls = false, rrs = false, sortValue = null; + if (td.left > sd.left && td.top > sd.top) + a = ["right", "top"]; + else if (td.left > sd.left && sd.top > td.top) + a = [ "top", "left"]; + else if (td.left < sd.left && td.top < sd.top) + a = [ "top", "right"]; + else if (td.left < sd.left && td.top > sd.top) + a = ["left", "top" ]; + + return { orientation:Orientation.DIAGONAL, a:a, theta:theta, theta2:theta2 }; + } + else if (h) return { + orientation:Orientation.HORIZONTAL, + a:sd.top < td.top ? ["bottom", "top"] : ["top", "bottom"], + theta:theta, theta2:theta2 + } + else return { + orientation:Orientation.VERTICAL, + a:sd.left < td.left ? ["right", "left"] : ["left", "right"], + theta:theta, theta2:theta2 + } + }, + placeAnchorsOnLine = function(desc, elementDimensions, elementPosition, + connections, horizontal, otherMultiplier, reverse) { + var a = [], step = elementDimensions[horizontal ? 0 : 1] / (connections.length + 1); + + for (var i = 0; i < connections.length; i++) { + var val = (i + 1) * step, other = otherMultiplier * elementDimensions[horizontal ? 1 : 0]; + if (reverse) + val = elementDimensions[horizontal ? 0 : 1] - val; + + var dx = (horizontal ? val : other), x = elementPosition[0] + dx, xp = dx / elementDimensions[0], + dy = (horizontal ? other : val), y = elementPosition[1] + dy, yp = dy / elementDimensions[1]; + + a.push([ x, y, xp, yp, connections[i][1], connections[i][2] ]); + } + + return a; + }, + standardEdgeSort = function(a, b) { return a[0] > b[0] ? 1 : -1 }, + currySort = function(reverseAngles) { + return function(a,b) { + var r = true; + if (reverseAngles) { + if (a[0][0] < b[0][0]) + r = true; + else + r = a[0][1] > b[0][1]; + } + else { + if (a[0][0] > b[0][0]) + r= true; + else + r =a[0][1] > b[0][1]; + } + return r === false ? -1 : 1; + }; + }, + leftSort = function(a,b) { + // first get adjusted values + var p1 = a[0][0] < 0 ? -Math.PI - a[0][0] : Math.PI - a[0][0], + p2 = b[0][0] < 0 ? -Math.PI - b[0][0] : Math.PI - b[0][0]; + if (p1 > p2) return 1; + else return a[0][1] > b[0][1] ? 1 : -1; + }, + edgeSortFunctions = { + "top":standardEdgeSort, + "right":currySort(true), + "bottom":currySort(true), + "left":leftSort + }, + _sortHelper = function(_array, _fn) { + return _array.sort(_fn); + }, + placeAnchors = function(elementId, _anchorLists) { + var sS = sizes[elementId], sO = offsets[elementId], + placeSomeAnchors = function(desc, elementDimensions, elementPosition, unsortedConnections, isHorizontal, otherMultiplier, orientation) { + if (unsortedConnections.length > 0) { + var sc = _sortHelper(unsortedConnections, edgeSortFunctions[desc]), // puts them in order based on the target element's pos on screen + reverse = desc === "right" || desc === "top", + anchors = placeAnchorsOnLine(desc, elementDimensions, + elementPosition, sc, + isHorizontal, otherMultiplier, reverse ); + + // takes a computed anchor position and adjusts it for parent offset and scroll, then stores it. + var _setAnchorLocation = function(endpoint, anchorPos) { + var a = adjustForParentOffsetAndScroll([anchorPos[0], anchorPos[1]], endpoint.canvas); + continuousAnchorLocations[endpoint.id] = [ a[0], a[1], anchorPos[2], anchorPos[3] ]; + continuousAnchorOrientations[endpoint.id] = orientation; + }; + + for (var i = 0; i < anchors.length; i++) { + var c = anchors[i][4], weAreSource = c.endpoints[0].elementId === elementId, weAreTarget = c.endpoints[1].elementId === elementId; + if (weAreSource) + _setAnchorLocation(c.endpoints[0], anchors[i]); + else if (weAreTarget) + _setAnchorLocation(c.endpoints[1], anchors[i]); + } + } + }; + + placeSomeAnchors("bottom", sS, [sO.left,sO.top], _anchorLists.bottom, true, 1, [0,1]); + placeSomeAnchors("top", sS, [sO.left,sO.top], _anchorLists.top, true, 0, [0,-1]); + placeSomeAnchors("left", sS, [sO.left,sO.top], _anchorLists.left, false, 0, [-1,0]); + placeSomeAnchors("right", sS, [sO.left,sO.top], _anchorLists.right, false, 1, [1,0]); + }, + AnchorManager = function() { + var _amEndpoints = {}, + connectionsByElementId = {}, + self = this, + anchorLists = {}; + + this.reset = function() { + _amEndpoints = {}; + connectionsByElementId = {}; + anchorLists = {}; + }; + this.newConnection = function(conn) { + var sourceId = conn.sourceId, targetId = conn.targetId, + ep = conn.endpoints, + doRegisterTarget = true, + registerConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { + + if ((sourceId == targetId) && otherAnchor.isContinuous){ + // remove the target endpoint's canvas. we dont need it. + jsPlumb.CurrentLibrary.removeElement(ep[1].canvas); + doRegisterTarget = false; + } + _addToList(connectionsByElementId, elId, [c, otherEndpoint, otherAnchor.constructor == DynamicAnchor]); + }; + + registerConnection(0, ep[0], ep[0].anchor, targetId, conn); + if (doRegisterTarget) + registerConnection(1, ep[1], ep[1].anchor, sourceId, conn); + }; + this.connectionDetached = function(connInfo) { + var connection = connInfo.connection || connInfo; + var sourceId = connection.sourceId, + targetId = connection.targetId, + ep = connection.endpoints, + removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) { + if (otherAnchor.constructor == FloatingAnchor) { + // no-op + } + else { + _removeWithFunction(connectionsByElementId[elId], function(_c) { + return _c[0].id == c.id; + }); + } + }; + + removeConnection(1, ep[1], ep[1].anchor, sourceId, connection); + removeConnection(0, ep[0], ep[0].anchor, targetId, connection); + + // remove from anchorLists + var sEl = connection.sourceId, + tEl = connection.targetId, + sE = connection.endpoints[0].id, + tE = connection.endpoints[1].id, + _remove = function(list, eId) { + if (list) { // transient anchors dont get entries in this list. + var f = function(e) { return e[4] == eId; }; + _removeWithFunction(list["top"], f); + _removeWithFunction(list["left"], f); + _removeWithFunction(list["bottom"], f); + _removeWithFunction(list["right"], f); + } + }; + + _remove(anchorLists[sEl], sE); + _remove(anchorLists[tEl], tE); + self.redraw(sEl); + self.redraw(tEl); + }; + this.add = function(endpoint, elementId) { + _addToList(_amEndpoints, elementId, endpoint); + }; + this.changeId = function(oldId, newId) { + connectionsByElementId[newId] = connectionsByElementId[oldId]; + _amEndpoints[newId] = _amEndpoints[oldId]; + delete connectionsByElementId[oldId]; + delete _amEndpoints[oldId]; + }; + this.getConnectionsFor = function(elementId) { + return connectionsByElementId[elementId] || []; + }; + this.getEndpointsFor = function(elementId) { + return _amEndpoints[elementId] || []; + }; + this.deleteEndpoint = function(endpoint) { + _removeWithFunction(_amEndpoints[endpoint.elementId], function(e) { + return e.id == endpoint.id; + }); + }; + this.clearFor = function(elementId) { + delete _amEndpoints[elementId]; + _amEndpoints[elementId] = []; + }; + // updates the given anchor list by either updating an existing anchor's info, or adding it. this function + // also removes the anchor from its previous list, if the edge it is on has changed. + // all connections found along the way (those that are connected to one of the faces this function + // operates on) are added to the connsToPaint list, as are their endpoints. in this way we know to repaint + // them wthout having to calculate anything else about them. + var _updateAnchorList = function(lists, theta, order, conn, aBoolean, otherElId, idx, reverse, edgeId, elId, connsToPaint, endpointsToPaint) { + // first try to find the exact match, but keep track of the first index of a matching element id along the way.s + var exactIdx = -1, + firstMatchingElIdx = -1, + endpoint = conn.endpoints[idx], + endpointId = endpoint.id, + oIdx = [1,0][idx], + values = [ [ theta, order ], conn, aBoolean, otherElId, endpointId ], + listToAddTo = lists[edgeId], + listToRemoveFrom = endpoint._continuousAnchorEdge ? lists[endpoint._continuousAnchorEdge] : null; + + if (listToRemoveFrom) { + var rIdx = _findWithFunction(listToRemoveFrom, function(e) { return e[4] == endpointId }); + if (rIdx != -1) { + listToRemoveFrom.splice(rIdx, 1); + // get all connections from this list + for (var i = 0; i < listToRemoveFrom.length; i++) { + _addWithFunction(connsToPaint, listToRemoveFrom[i][1], function(c) { return c.id == listToRemoveFrom[i][1].id }); + _addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[idx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[idx].id }); + } + } + } + + for (var i = 0; i < listToAddTo.length; i++) { + if (idx == 1 && listToAddTo[i][3] === otherElId && firstMatchingElIdx == -1) + firstMatchingElIdx = i; + _addWithFunction(connsToPaint, listToAddTo[i][1], function(c) { return c.id == listToAddTo[i][1].id }); + _addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[idx], function(e) { return e.id == listToAddTo[i][1].endpoints[idx].id }); + } + if (exactIdx != -1) { + listToAddTo[exactIdx] = values; + } + else { + var insertIdx = reverse ? firstMatchingElIdx != -1 ? firstMatchingElIdx : 0 : listToAddTo.length; // of course we will get this from having looked through the array shortly. + listToAddTo.splice(insertIdx, 0, values); + } + + // store this for next time. + endpoint._continuousAnchorEdge = edgeId; + }; + this.redraw = function(elementId, ui, timestamp, offsetToUI) { + // get all the endpoints for this element + var ep = _amEndpoints[elementId] || [], + endpointConnections = connectionsByElementId[elementId] || [], + connectionsToPaint = [], + endpointsToPaint = [], + anchorsToUpdate = []; + + timestamp = timestamp || _timestamp(); + // offsetToUI are values that would have been calculated in the dragManager when registering + // an endpoint for an element that had a parent (somewhere in the hierarchy) that had been + // registered as draggable. + offsetToUI = offsetToUI || {left:0, top:0}; + if (ui) { + ui = { + left:ui.left + offsetToUI.left, + top:ui.top + offsetToUI.top + } + } + + _updateOffset( { elId : elementId, offset : ui, recalc : false, timestamp : timestamp }); + // valid for one paint cycle. + var myOffset = offsets[elementId], + myWH = sizes[elementId], + orientationCache = {}; + + // actually, first we should compute the orientation of this element to all other elements to which + // this element is connected with a continuous anchor (whether both ends of the connection have + // a continuous anchor or just one) + //for (var i = 0; i < continuousAnchorConnections.length; i++) { + for (var i = 0; i < endpointConnections.length; i++) { + var conn = endpointConnections[i][0], + sourceId = conn.sourceId, + targetId = conn.targetId, + sourceContinuous = conn.endpoints[0].anchor.isContinuous, + targetContinuous = conn.endpoints[1].anchor.isContinuous; + + if (sourceContinuous || targetContinuous) { + var oKey = sourceId + "_" + targetId, + oKey2 = targetId + "_" + sourceId, + o = orientationCache[oKey], + oIdx = conn.sourceId == elementId ? 1 : 0; + + if (sourceContinuous && !anchorLists[sourceId]) anchorLists[sourceId] = { top:[], right:[], bottom:[], left:[] }; + if (targetContinuous && !anchorLists[targetId]) anchorLists[targetId] = { top:[], right:[], bottom:[], left:[] }; + + if (elementId != targetId) _updateOffset( { elId : targetId, timestamp : timestamp }); + if (elementId != sourceId) _updateOffset( { elId : sourceId, timestamp : timestamp }); + + var td = _getCachedData(targetId), + sd = _getCachedData(sourceId); + + if (targetId == sourceId && (sourceContinuous || targetContinuous)) { + // here we may want to improve this by somehow determining the face we'd like + // to put the connector on. ideally, when drawing, the face should be calculated + // by determining which face is closest to the point at which the mouse button + // was released. for now, we're putting it on the top face. + _updateAnchorList(anchorLists[sourceId], -Math.PI / 2, 0, conn, false, targetId, 0, false, "top", sourceId, connectionsToPaint, endpointsToPaint) + } + else { + if (!o) { + o = calculateOrientation(sourceId, targetId, sd.o, td.o); + orientationCache[oKey] = o; + // this would be a performance enhancement, but the computed angles need to be clamped to + //the (-PI/2 -> PI/2) range in order for the sorting to work properly. + /* orientationCache[oKey2] = { + orientation:o.orientation, + a:[o.a[1], o.a[0]], + theta:o.theta + Math.PI, + theta2:o.theta2 + Math.PI + };*/ + } + if (sourceContinuous) _updateAnchorList(anchorLists[sourceId], o.theta, 0, conn, false, targetId, 0, false, o.a[0], sourceId, connectionsToPaint, endpointsToPaint); + if (targetContinuous) _updateAnchorList(anchorLists[targetId], o.theta2, -1, conn, true, sourceId, 1, true, o.a[1], targetId, connectionsToPaint, endpointsToPaint); + } + + if (sourceContinuous) _addWithFunction(anchorsToUpdate, sourceId, function(a) { return a === sourceId; }); + if (targetContinuous) _addWithFunction(anchorsToUpdate, targetId, function(a) { return a === targetId; }); + _addWithFunction(connectionsToPaint, conn, function(c) { return c.id == conn.id; }); + if ((sourceContinuous && oIdx == 0) || (targetContinuous && oIdx == 1)) + _addWithFunction(endpointsToPaint, conn.endpoints[oIdx], function(e) { return e.id == conn.endpoints[oIdx].id; }); + } + } + + // now place all the continuous anchors we need to; + for (var i = 0; i < anchorsToUpdate.length; i++) { + placeAnchors(anchorsToUpdate[i], anchorLists[anchorsToUpdate[i]]); + } + + // now that continuous anchors have been placed, paint all the endpoints for this element + // TODO performance: add the endpoint ids to a temp array, and then when iterating in the next + // loop, check that we didn't just paint that endpoint. we can probably shave off a few more milliseconds this way. + for (var i = 0; i < ep.length; i++) { + ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myWH }); + } + // ... and any other endpoints we came across as a result of the continuous anchors. + for (var i = 0; i < endpointsToPaint.length; i++) { + endpointsToPaint[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myWH }); + } + + // paint all the standard and "dynamic connections", which are connections whose other anchor is + // static and therefore does need to be recomputed; we make sure that happens only one time. + + // TODO we could have compiled a list of these in the first pass through connections; might save some time. + for (var i = 0; i < endpointConnections.length; i++) { + var otherEndpoint = endpointConnections[i][1]; + if (otherEndpoint.anchor.constructor == DynamicAnchor) { + otherEndpoint.paint({ elementWithPrecedence:elementId }); + _addWithFunction(connectionsToPaint, endpointConnections[i][0], function(c) { return c.id == endpointConnections[i][0].id; }); + // all the connections for the other endpoint now need to be repainted + for (var k = 0; k < otherEndpoint.connections.length; k++) { + if (otherEndpoint.connections[k] !== endpointConnections[i][0]) + _addWithFunction(connectionsToPaint, otherEndpoint.connections[k], function(c) { return c.id == otherEndpoint.connections[k].id; }); + } + } else if (otherEndpoint.anchor.constructor == Anchor) { + _addWithFunction(connectionsToPaint, endpointConnections[i][0], function(c) { return c.id == endpointConnections[i][0].id; }); + } + } + // paint current floating connection for this element, if there is one. + var fc = floatingConnections[elementId]; + if (fc) + fc.paint({timestamp:timestamp, recalc:false, elId:elementId}); + + // paint all the connections + for (var i = 0; i < connectionsToPaint.length; i++) { + connectionsToPaint[i].paint({elId:elementId, timestamp:timestamp, recalc:false}); + } + }; + this.rehomeEndpoint = function(currentId, element) { + var eps = _amEndpoints[currentId] || [], //, + elementId = _currentInstance.getId(element); + for (var i = 0; i < eps.length; i++) { + self.add(eps[i], elementId); + } + eps.splice(0, eps.length); + }; + }; + _currentInstance.anchorManager = new AnchorManager(); + _currentInstance.continuousAnchorFactory = { + get:function(params) { + var existing = continuousAnchors[params.elementId]; + if (!existing) { + existing = { + type:"Continuous", + compute : function(params) { + return continuousAnchorLocations[params.element.id] || [0,0]; + }, + getCurrentLocation : function(endpoint) { + return continuousAnchorLocations[endpoint.id] || [0,0]; + }, + getOrientation : function(endpoint) { + return continuousAnchorOrientations[endpoint.id] || [0,0]; + }, + isDynamic : true, + isContinuous : true + }; + continuousAnchors[params.elementId] = existing; + } + return existing; + } + }; + + /** + Manages dragging for some instance of jsPlumb. + + */ + var DragManager = function() { + + var _draggables = {}, _dlist = [], _delements = {}, _elementsWithEndpoints = {}; + + /** + register some element as draggable. right now the drag init stuff is done elsewhere, and it is + possible that will continue to be the case. + */ + this.register = function(el) { + el = jsPlumb.CurrentLibrary.getElementObject(el); + var id = _currentInstance.getId(el), + domEl = jsPlumb.CurrentLibrary.getDOMElement(el); + if (!_draggables[id]) { + _draggables[id] = el; + _dlist.push(el); + _delements[id] = {}; + } + + // look for child elements that have endpoints and register them against this draggable. + var _oneLevel = function(p) { + var pEl = jsPlumb.CurrentLibrary.getElementObject(p), + pOff = jsPlumb.CurrentLibrary.getOffset(pEl); + + for (var i = 0; i < p.childNodes.length; i++) { + if (p.childNodes[i].nodeType != 3) { + var cEl = jsPlumb.CurrentLibrary.getElementObject(p.childNodes[i]), + cid = _currentInstance.getId(cEl); + if (_elementsWithEndpoints[cid] && _elementsWithEndpoints[cid] > 0) { + var cOff = jsPlumb.CurrentLibrary.getOffset(cEl); + _delements[id][cid] = { + id:cid, + offset:{ + left:cOff.left - pOff.left, + top:cOff.top - pOff.top + } + }; + } + } + } + }; + + _oneLevel(domEl); + }; + + /** + notification that an endpoint was added to the given el. we go up from that el's parent + node, looking for a parent that has been registered as a draggable. if we find one, we add this + el to that parent's list of elements to update on drag (if it is not there already) + */ + this.endpointAdded = function(el) { + var jpcl = jsPlumb.CurrentLibrary, b = document.body, id = _currentInstance.getId(el), c = jpcl.getDOMElement(el), + p = c.parentNode, done = p == b; + + _elementsWithEndpoints[id] = _elementsWithEndpoints[id] ? _elementsWithEndpoints[id] + 1 : 1; + + while (p != b) { + var pid = _currentInstance.getId(p); + if (_draggables[pid]) { + var idx = -1, pEl = jpcl.getElementObject(p), pLoc = jsPlumb.CurrentLibrary.getOffset(pEl); + + if (_delements[pid][id] == null) { + var cLoc = jsPlumb.CurrentLibrary.getOffset(el); + _delements[pid][id] = { + id:id, + offset:{ + left:cLoc.left - pLoc.left, + top:cLoc.top - pLoc.top + } + }; + } + break; + } + p = p.parentNode; + } + }; + + this.endpointDeleted = function(endpoint) { + if (_elementsWithEndpoints[endpoint.elementId]) { + _elementsWithEndpoints[endpoint.elementId]--; + if (_elementsWithEndpoints[endpoint.elementId] <= 0) { + for (var i in _delements) { + delete _delements[i][endpoint.elementId]; + } + } + } + }; + + this.getElementsForDraggable = function(id) { + return _delements[id]; + }; + + this.reset = function() { + _draggables = {}; + _dlist = []; + _delements = {}; + _elementsWithEndpoints = {}; + }; + + }; + _currentInstance.dragManager = new DragManager(); + + /* * Class: Connection @@ -2190,11 +3741,14 @@ about the parameters allowed in the params object. * drawEndpoints - if false, instructs jsPlumb to not draw the endpoints for this Connection. Be careful with this: it only really works when you tell jsPlumb to attach elements to the document body. Read the documentation for a full discussion of this. */ var Connection = function(params) { - - jsPlumbUIComponent.apply(this, arguments); + var self = this, visible = true; + self.idPrefix = "_jsplumb_c_"; + self.defaultLabelLocation = 0.5; + self.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"]; + this.parent = params.parent; + overlayCapableJsPlumbUIComponent.apply(this, arguments); // ************** get the source and target and register the connection. ******************* - var self = this; - var visible = true; + /** Function:isVisible Returns whether or not the Connection is currently visible. @@ -2209,11 +3763,10 @@ about the parameters allowed in the params object. */ this.setVisible = function(v) { visible = v; + self[v ? "showOverlays" : "hideOverlays"](); if (self.connector && self.connector.canvas) self.connector.canvas.style.display = v ? "block" : "none"; }; - var id = new String('_jsplumb_c_' + (new Date()).getTime()); - this.getId = function() { return id; }; - this.parent = params.parent; + /** Property: source The source element for this Connection. @@ -2224,9 +3777,26 @@ about the parameters allowed in the params object. The target element for this Connection. */ this.target = _getElementObject(params.target); - // sourceEndpoint and targetEndpoint override source/target, if they are present. - if (params.sourceEndpoint) this.source = params.sourceEndpoint.getElement(); + // sourceEndpoint and targetEndpoint override source/target, if they are present. but + // source is not overridden if the Endpoint has declared it is not the final target of a connection; + // instead we use the source that the Endpoint declares will be the final source element. + if (params.sourceEndpoint) { + this.source = params.sourceEndpoint.endpointWillMoveTo || params.sourceEndpoint.getElement(); + } if (params.targetEndpoint) this.target = params.targetEndpoint.getElement(); + + // if a new connection is the result of moving some existing connection, params.previousConnection + // will have that Connection in it. listeners for the jsPlumbConnection event can look for that + // member and take action if they need to. + self.previousConnection = params.previousConnection; + + var _cost = params.cost; + self.getCost = function() { return _cost; }; + self.setCost = function(c) { _cost = c; }; + + var _bidirectional = params.bidirectional === false ? false : true; + self.isBidirectional = function() { return _bidirectional; }; + /* * Property: sourceId * Id of the source element in the connection. @@ -2237,7 +3807,6 @@ about the parameters allowed in the params object. * Id of the target element in the connection. */ this.targetId = _getAttribute(this.target, "id"); - this.endpointsOnTop = params.endpointsOnTop != null ? params.endpointsOnTop : true; /** * implementation of abstract method in EventGenerator @@ -2247,14 +3816,6 @@ about the parameters allowed in the params object. return self.endpoints; }; - /** - * implementation of abstract method in EventGenerator - */ - this.savePosition = function() { - srcWhenMouseDown = jsPlumb.CurrentLibrary.getOffset(jsPlumb.CurrentLibrary.getElementObject(self.source)); - targetWhenMouseDown = jsPlumb.CurrentLibrary.getOffset(jsPlumb.CurrentLibrary.getElementObject(self.target)); - }; - /* * Property: scope * Optional scope descriptor for the connection. @@ -2267,11 +3828,11 @@ about the parameters allowed in the params object. this.endpoints = []; this.endpointStyles = []; // wrapped the main function to return null if no input given. this lets us cascade defaults properly. - var _makeAnchor = function(anchorParams) { + var _makeAnchor = function(anchorParams, elementId) { if (anchorParams) - return jsPlumb.makeAnchor(anchorParams); - }; - var prepareEndpoint = function(existing, index, params, element, connectorPaintStyle, connectorHoverPaintStyle) { + return _currentInstance.makeAnchor(anchorParams, elementId, _currentInstance); + }, + prepareEndpoint = function(existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) { if (existing) { self.endpoints[index] = existing; existing.addConnection(self); @@ -2307,7 +3868,12 @@ about the parameters allowed in the params object. ehs.fillStyle = connectorHoverPaintStyle.strokeStyle; } } - var a = params.anchors ? params.anchors[index] : _makeAnchor(_currentInstance.Defaults.Anchors[index]) || _makeAnchor(jsPlumb.Defaults.Anchors[index]) || _makeAnchor(_currentInstance.Defaults.Anchor) || _makeAnchor(jsPlumb.Defaults.Anchor), + var a = params.anchors ? params.anchors[index] : + params.anchor ? params.anchor : + _makeAnchor(_currentInstance.Defaults.Anchors[index], elementId) || + _makeAnchor(jsPlumb.Defaults.Anchors[index], elementId) || + _makeAnchor(_currentInstance.Defaults.Anchor, elementId) || + _makeAnchor(jsPlumb.Defaults.Anchor, elementId), u = params.uuids ? params.uuids[index] : null, e = _newEndpoint({ paintStyle : es, @@ -2317,22 +3883,97 @@ about the parameters allowed in the params object. uuid : u, anchor : a, source : element, - container:params.container + scope : params.scope, + container:params.container, + reattach:params.reattach, + detachable:params.detachable }); self.endpoints[index] = e; + if (params.drawEndpoints === false) e.setVisible(false, true, true); return e; } - }; - - var eS = prepareEndpoint(params.sourceEndpoint, 0, params, self.source, params.paintStyle, params.hoverPaintStyle); + }; + + var eS = prepareEndpoint(params.sourceEndpoint, + 0, + params, + self.source, + self.sourceId, + params.paintStyle, + params.hoverPaintStyle); if (eS) _addToList(endpointsByElement, this.sourceId, eS); - var eT = prepareEndpoint(params.targetEndpoint, 1, params, self.target, params.paintStyle, params.hoverPaintStyle); + + // if there were no endpoints supplied and the source element is the target element, we will reuse the source + // endpoint that was just created. + var existingTargetEndpoint = ((self.sourceId == self.targetId) && params.targetEndpoint == null) ? eS : params.targetEndpoint, + eT = prepareEndpoint(existingTargetEndpoint, + 1, + params, + self.target, + self.targetId, + params.paintStyle, + params.hoverPaintStyle); if (eT) _addToList(endpointsByElement, this.targetId, eT); // if scope not set, set it to be the scope for the source endpoint. - if (!this.scope) this.scope = this.endpoints[0].scope; + if (!this.scope) this.scope = this.endpoints[0].scope; + + // if delete endpoints on detach, keep a record of just exactly which endpoints they are. + if (params.deleteEndpointsOnDetach) + self.endpointsToDeleteOnDetach = [eS, eT]; + + var _detachable = _currentInstance.Defaults.ConnectionsDetachable; + if (params.detachable === false) _detachable = false; + if(self.endpoints[0].connectionsDetachable === false) _detachable = false; + if(self.endpoints[1].connectionsDetachable === false) _detachable = false; + + // inherit connectin cost if it was set on source endpoint + if (_cost == null) _cost = self.endpoints[0].getConnectionCost(); + // inherit bidirectional flag if set no source endpoint + if (params.bidirectional == null) _bidirectional = self.endpoints[0].areConnectionsBidirectional(); + + /* + Function: isDetachable + Returns whether or not this connection can be detached from its target/source endpoint. by default this + is false; use it in conjunction with the 'reattach' parameter. + */ + this.isDetachable = function() { + return _detachable === true; + }; + + /* + Function: setDetachable + Sets whether or not this connection is detachable. + */ + this.setDetachable = function(detachable) { + _detachable = detachable === true; + }; + + // merge all the parameters objects into the connection. parameters set + // on the connection take precedence; then target endpoint params, then + // finally source endpoint params. + // TODO jsPlumb.extend could be made to take more than two args, and it would + // apply the second through nth args in order. + var _p = jsPlumb.extend({}, this.endpoints[0].getParameters()); + jsPlumb.extend(_p, this.endpoints[1].getParameters()); + jsPlumb.extend(_p, self.getParameters()); + self.setParameters(_p); + + // override setHover to pass it down to the underlying connector + var _sh = self.setHover; + + self.setHover = function() { + self.connector.setHover.apply(self.connector, arguments); + _sh.apply(self, arguments); + }; + + var _internalHover = function(state) { + if (_connectionBeingDragged == null) { + self.setHover(state, false); + } + }; /* * Function: setConnector @@ -2342,46 +3983,22 @@ about the parameters allowed in the params object. * Parameters: * connector - Connector definition */ - this.setConnector = function(connector, doNotRepaint) { - if (self.connector != null) _removeElements(self.connector.getDisplayElements(), self.parent); - var connectorArgs = { _jsPlumb:self._jsPlumb, parent:params.parent, cssClass:params.cssClass, container:params.container }; - if (connector.constructor == String) - this.connector = new jsPlumb.Connectors[renderMode][connector](connectorArgs); // lets you use a string as shorthand. - else if (connector.constructor == Array) - this.connector = new jsPlumb.Connectors[renderMode][connector[0]](jsPlumb.extend(connector[1], connectorArgs)); - this.canvas = this.connector.canvas; - // add mouse events - this.connector.bind("click", function(con, e) { - _mouseWasDown = false; - self.fire("click", self, e); - }); - this.connector.bind("dblclick", function(con, e) { _mouseWasDown = false;self.fire("dblclick", self, e); }); - this.connector.bind("mouseenter", function(con, e) { - if (!self.isHover()) { - if (_connectionBeingDragged == null) { - self.setHover(true); - } - self.fire("mouseenter", self, e); - } - }); - this.connector.bind("mouseexit", function(con, e) { - if (self.isHover()) { - if (_connectionBeingDragged == null) { - self.setHover(false); - } - self.fire("mouseexit", self, e); - } - }); - this.connector.bind("mousedown", function(con, e) { - _mouseDown = true; - _mouseDownAt = jsPlumb.CurrentLibrary.getPageXY(e); - self.savePosition(); - }); - this.connector.bind("mouseup", function(con, e) { - _mouseDown = false; - if (self.connector == _connectionBeingDragged) _connectionBeingDragged = null; - }); - + this.setConnector = function(connector, doNotRepaint) { + if (self.connector != null) _removeElements(self.connector.getDisplayElements(), self.parent); + var connectorArgs = { + _jsPlumb:self._jsPlumb, + parent:params.parent, + cssClass:params.cssClass, + container:params.container, + tooltip:self.tooltip + }; + if (connector.constructor == String) + this.connector = new jsPlumb.Connectors[renderMode][connector](connectorArgs); // lets you use a string as shorthand. + else if (connector.constructor == Array) + this.connector = new jsPlumb.Connectors[renderMode][connector[0]](jsPlumb.extend(connector[1], connectorArgs)); + self.canvas = self.connector.canvas; + // binds mouse listeners to the current connector. + _bindListeners(self.connector, self, _internalHover); if (!doNotRepaint) self.repaint(); }; /* @@ -2394,6 +4011,7 @@ about the parameters allowed in the params object. params.connector || _currentInstance.Defaults.Connector || jsPlumb.Defaults.Connector, true); + this.setPaintStyle(this.endpoints[0].connectorStyle || this.endpoints[1].connectorStyle || @@ -2408,40 +4026,28 @@ about the parameters allowed in the params object. jsPlumb.Defaults.HoverPaintStyle, true); this.paintStyleInUse = this.paintStyle; + - /* - * Property: overlays - * List of Overlays for this Connection. - */ - this.overlays = []; - var _overlays = params.overlays || _currentInstance.Defaults.Overlays; - if (_overlays) { - for (var i = 0; i < _overlays.length; i++) { - var o = _overlays[i], _newOverlay = null; - if (o.constructor == Array) { // this is for the shorthand ["Arrow", { width:50 }] syntax - // there's also a three arg version: - // ["Arrow", { width:50 }, {location:0.7}] - // which merges the 3rd arg into the 2nd. - var type = o[0]; - var p = jsPlumb.CurrentLibrary.extend({connection:self, _jsPlumb:_currentInstance}, o[1]); // make a copy of the object so as not to mess up anyone else's reference... - if (o.length == 3) jsPlumb.CurrentLibrary.extend(p, o[2]); - _newOverlay = new jsPlumb.Overlays[renderMode][type](p); - if (p.events) { - for (var evt in p.events) { - _newOverlay.bind(evt, p.events[evt]); - } - } - } else if (o.constructor == String) { - _newOverlay = new jsPlumb.Overlays[renderMode][o]({connection:self, _jsPlumb:_currentInstance}); - } else { - _newOverlay = o; - } - - - - this.overlays.push(_newOverlay); + this.moveParent = function(newParent) { + var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(self.connector.canvas); + jpcl.removeElement(self.connector.canvas, curParent); + jpcl.appendElement(self.connector.canvas, newParent); + if (self.connector.bgCanvas) { + jpcl.removeElement(self.connector.bgCanvas, curParent); + jpcl.appendElement(self.connector.bgCanvas, newParent); + } + // this only applies for DOMOverlays + for (var i = 0; i < self.overlays.length; i++) { + if (self.overlays[i].isAppendedAtTopLevel) { + jpcl.removeElement(self.overlays[i].canvas, curParent); + jpcl.appendElement(self.overlays[i].canvas, newParent); + if (self.overlays[i].reattachListeners) + self.overlays[i].reattachListeners(self.connector); + } } - } + if (self.connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners. + self.connector.reattachListeners(); // the Canvas implementation doesn't have to care about this + }; // ***************************** PLACEHOLDERS FOR NATURAL DOCS ************************************************* /* @@ -2487,133 +4093,31 @@ about the parameters allowed in the params object. * ignoreAttachedElements - if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops. */ -// ***************************** END OF PLACEHOLDERS FOR NATURAL DOCS ************************************************* - - // overlay finder helper method - var _getOverlayIndex = function(id) { - var idx = -1; - for (var i = 0; i < self.overlays.length; i++) { - if (id === self.overlays[i].id) { - idx = i; - break; - } - } - return idx; - }; - - /* - * Function: addOverlay - * Adds an Overlay to the Connection. - * - * Parameters: - * overlay - Overlay to add. - */ - this.addOverlay = function(overlay) { self.overlays.push(overlay); }; - - /* - * Function: getOverlay - * Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter - * in to the Overlay's constructor arguments, and then use that to retrieve - * it via this method. - */ - this.getOverlay = function(id) { - var idx = _getOverlayIndex(id); - return idx >= 0 ? self.overlays[idx] : null; - }; - - /* - * Function: hideOverlay - * Hides the overlay specified by the given id. - */ - this.hideOverlay = function(id) { - var o = self.getOverlay(id); - if (o) o.hide(); - }; - - /* - * Function: showOverlay - * Shows the overlay specified by the given id. - */ - this.showOverlay = function(id) { - var o = self.getOverlay(id); - if (o) o.show(); - }; - - /** - * Function: removeAllOverlays - * Removes all overlays from the Connection, and then repaints. - */ - this.removeAllOverlays = function() { - self.overlays.splice(0, self.overlays.length); - self.repaint(); - }; - - /** - * Function:removeOverlay - * Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec. - * Parameters: - * overlayId - id of the overlay to remove. - */ - this.removeOverlay = function(overlayId) { - var idx = _getOverlayIndex(overlayId); - if (idx != -1) self.overlays.splice(idx, 1); - }; - - /** - * Function:removeOverlays - * Removes a set of overlays by ID. Note: by ID. this is a string you set in the overlay spec. - * Parameters: - * overlayIds - this function takes an arbitrary number of arguments, each of which is a single overlay id. - */ - this.removeOverlays = function() { - for (var i = 0; i < arguments.length; i++) - self.removeOverlay(arguments[i]); - }; - - // this is a shortcut helper method to let people add a label as - // overlay. - this.labelStyle = params.labelStyle || _currentInstance.Defaults.LabelStyle || jsPlumb.Defaults.LabelStyle; - this.label = params.label; - if (this.label) { - this.overlays.push(new jsPlumb.Overlays[renderMode].Label( { - cssClass:params.cssClass, - labelStyle : this.labelStyle, - label : this.label, - connection:self, - _jsPlumb:_currentInstance - })); - } +// ***************************** END OF PLACEHOLDERS FOR NATURAL DOCS ************************************************* _updateOffset( { elId : this.sourceId }); _updateOffset( { elId : this.targetId }); - - /* - * Function: setLabel - * Sets the Connection's label. - * - * Parameters: - * l - label to set. May be a String or a Function that returns a String. - */ - this.setLabel = function(l) { - self.label = l; - _currentInstance.repaint(self.source); - }; - + // paint the endpoints - var myOffset = offsets[this.sourceId], myWH = sizes[this.sourceId]; - var otherOffset = offsets[this.targetId]; - var otherWH = sizes[this.targetId]; - var anchorLoc = this.endpoints[0].anchor.compute( { + var myOffset = offsets[this.sourceId], myWH = sizes[this.sourceId], + otherOffset = offsets[this.targetId], + otherWH = sizes[this.targetId], + initialTimestamp = _timestamp(), + anchorLoc = this.endpoints[0].anchor.compute( { xy : [ myOffset.left, myOffset.top ], wh : myWH, element : this.endpoints[0], - txy : [ otherOffset.left, otherOffset.top ], twh : otherWH, tElement : this.endpoints[1] + elementId:this.endpoints[0].elementId, + txy : [ otherOffset.left, otherOffset.top ], twh : otherWH, tElement : this.endpoints[1], + timestamp:initialTimestamp }); - this.endpoints[0].paint( { anchorLoc : anchorLoc }); + this.endpoints[0].paint( { anchorLoc : anchorLoc, timestamp:initialTimestamp }); anchorLoc = this.endpoints[1].anchor.compute( { xy : [ otherOffset.left, otherOffset.top ], wh : otherWH, element : this.endpoints[1], - txy : [ myOffset.left, myOffset.top ], twh : myWH, tElement : this.endpoints[0] + elementId:this.endpoints[1].elementId, + txy : [ myOffset.left, myOffset.top ], twh : myWH, tElement : this.endpoints[0], + timestamp:initialTimestamp }); - this.endpoints[1].paint({ anchorLoc : anchorLoc }); + this.endpoints[1].paint({ anchorLoc : anchorLoc, timestamp:initialTimestamp }); /* * Paints the Connection. Not exposed for public usage. @@ -2632,32 +4136,33 @@ about the parameters allowed in the params object. tId = swap ? this.sourceId : this.targetId, sId = swap ? this.targetId : this.sourceId, tIdx = swap ? 0 : 1, sIdx = swap ? 1 : 0; - _updateOffset( { elId : elId, offset : ui, recalc : recalc, timestamp : timestamp }); - _updateOffset( { elId : tId, timestamp : timestamp }); // update the target if this is a forced repaint. otherwise, only the source has been moved. - - var sAnchorP = this.endpoints[sIdx].anchor.getCurrentLocation(), - tAnchorP = this.endpoints[tIdx].anchor.getCurrentLocation(); + var sourceInfo = _updateOffset( { elId : elId, offset : ui, recalc : recalc, timestamp : timestamp }), + targetInfo = _updateOffset( { elId : tId, timestamp : timestamp }); // update the target if this is a forced repaint. otherwise, only the source has been moved. + var sE = this.endpoints[sIdx], tE = this.endpoints[tIdx], + sAnchorP = sE.anchor.getCurrentLocation(sE), + tAnchorP = tE.anchor.getCurrentLocation(tE); + /* paint overlays*/ var maxSize = 0; for ( var i = 0; i < self.overlays.length; i++) { var o = self.overlays[i]; - if (o.isVisible()) { - var s = o.computeMaxSize(self.connector); - if (s > maxSize) - maxSize = s; - } + if (o.isVisible()) maxSize = Math.max(maxSize, o.computeMaxSize(self.connector)); } - var dim = this.connector.compute(sAnchorP, tAnchorP, this.endpoints[sIdx].anchor, this.endpoints[tIdx].anchor, self.paintStyleInUse.lineWidth, maxSize); + var dim = this.connector.compute(sAnchorP, tAnchorP, + this.endpoints[sIdx], this.endpoints[tIdx], + this.endpoints[sIdx].anchor, this.endpoints[tIdx].anchor, + self.paintStyleInUse.lineWidth, maxSize, + sourceInfo, + targetInfo); self.connector.paint(dim, self.paintStyleInUse); /* paint overlays*/ for ( var i = 0; i < self.overlays.length; i++) { var o = self.overlays[i]; - if (o.isVisible) - self.overlayPlacements[i] = o.draw(self.connector, self.paintStyleInUse, dim); + if (o.isVisible) self.overlayPlacements[i] = o.draw(self.connector, self.paintStyleInUse, dim); } }; @@ -2665,23 +4170,60 @@ about the parameters allowed in the params object. * Function: repaint * Repaints the Connection. */ - this.repaint = function() { - this.paint({ elId : this.sourceId, recalc : true }); - }; + this.repaint = function(params) { + params = params || {}; + var recalc = !(params.recalc === false); + this.paint({ elId : this.sourceId, recalc : recalc, timestamp:params.timestamp }); + }; + + }; + +// ENDPOINT HELPER FUNCTIONS + var _makeConnectionDragHandler = function(placeholder) { + var stopped = false; + return { - _initDraggableIfNecessary(self.source, params.draggable, params.dragOptions); - _initDraggableIfNecessary(self.target, params.draggable, params.dragOptions); + drag : function() { + if (stopped) { + stopped = false; + return true; + } + var _ui = jsPlumb.CurrentLibrary.getUIPosition(arguments), + el = placeholder.element; + if (el) { + jsPlumb.CurrentLibrary.setOffset(el, _ui); + _draw(_getElementObject(el), _ui); + } + }, + stopDrag : function() { + stopped = true; + } + }; + }; + + var _makeFloatingEndpoint = function(paintStyle, referenceAnchor, endpoint, referenceCanvas, sourceElement) { + var floatingAnchor = new FloatingAnchor( { reference : referenceAnchor, referenceCanvas : referenceCanvas }); - // resizing (using the jquery.ba-resize plugin). todo: decide - // whether to include or not. - if (this.source.resize) { - this.source.resize(function(e) { - jsPlumb.repaint(self.sourceId); - }); - } - - // just to make sure the UI gets initialised fully on all browsers. - self.repaint(); + //setting the scope here should not be the way to fix that mootools issue. it should be fixed by not + // adding the floating endpoint as a droppable. that makes more sense anyway! + + return _newEndpoint({ paintStyle : paintStyle, endpoint : endpoint, anchor : floatingAnchor, source : sourceElement, scope:"__floating" }); + }; + + /** + * creates a placeholder div for dragging purposes, adds it to the DOM, and pre-computes its offset. then returns + * both the element id and a selector for the element. + */ + var _makeDraggablePlaceholder = function(placeholder, parent) { + var n = document.createElement("div"); + n.style.position = "absolute"; + var placeholderDragElement = _getElementObject(n); + _appendElement(n, parent); + var id = _getId(placeholderDragElement); + _updateOffset( { elId : id }); + // create and assign an id, and initialize the offset. + placeholder.id = id; + placeholder.element = placeholderDragElement; }; /* @@ -2704,6 +4246,7 @@ about the parameters allowed in the params object. * Parameters: * anchor - definition of the Anchor for the endpoint. You can include one or more Anchor definitions here; if you include more than one, jsPlumb creates a 'dynamic' Anchor, ie. an Anchor which changes position relative to the other elements in a Connection. Each Anchor definition can be either a string nominating one of the basic Anchors provided by jsPlumb (eg. "TopCenter"), or a four element array that designates the Anchor's location and orientation (eg, and this is equivalent to TopCenter, [ 0.5, 0, 0, -1 ]). To provide more than one Anchor definition just put them all in an array. You can mix string definitions with array definitions. * endpoint - optional Endpoint definition. This takes the form of either a string nominating one of the basic Endpoints provided by jsPlumb (eg. "Rectangle"), or an array containing [name,params] for those cases where you don't wish to use the default values, eg. [ "Rectangle", { width:5, height:10 } ]. + * enabled - optional, defaults to true. Indicates whether or not the Endpoint should be enabled for mouse events (drag/drop). * paintStyle - endpoint style, a js object. may be null. * hoverPaintStyle - style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null. * source - element the Endpoint is attached to, of type String (an element id) or element selector. Required. @@ -2722,9 +4265,14 @@ about the parameters allowed in the params object. * reattach - optional boolean that determines whether or not the Connections reattach after they have been dragged off an Endpoint and left floating. defaults to false: Connections dropped in this way will just be deleted. */ var Endpoint = function(params) { - jsPlumb.jsPlumbUIComponent.apply(this, arguments); - params = params || {}; var self = this; + self.idPrefix = "_jsplumb_e_"; + self.defaultLabelLocation = [ 0.5, 0.5 ]; + self.defaultOverlayKeys = ["Overlays", "EndpointOverlays"]; + this.parent = params.parent; + overlayCapableJsPlumbUIComponent.apply(this, arguments); + params = params || {}; + // ***************************** PLACEHOLDERS FOR NATURAL DOCS ************************************************* /* * Function: bind @@ -2771,7 +4319,7 @@ about the parameters allowed in the params object. // ***************************** END OF PLACEHOLDERS FOR NATURAL DOCS ************************************************* - var visible = true; + var visible = true, __enabled = !(params.enabled === false); /* Function: isVisible Returns whether or not the Endpoint is currently visible. @@ -2789,6 +4337,7 @@ about the parameters allowed in the params object. this.setVisible = function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) { visible = v; if (self.canvas) self.canvas.style.display = v ? "block" : "none"; + self[v ? "showOverlays" : "hideOverlays"](); if (!doNotChangeConnections) { for (var i = 0; i < self.connections.length; i++) { self.connections[i].setVisible(v); @@ -2799,51 +4348,90 @@ about the parameters allowed in the params object. } } } + }; + + /* + Function: isEnabled + Returns whether or not the Endpoint is enabled for drag/drop connections. + */ + this.isEnabled = function() { return __enabled; }; + + /* + Function: setEnabled + Sets whether or not the Endpoint is enabled for drag/drop connections. + */ + this.setEnabled = function(e) { __enabled = e; }; + + var _element = params.source, _uuid = params.uuid, floatingEndpoint = null, inPlaceCopy = null; + if (_uuid) endpointsByUUID[_uuid] = self; + var _elementId = _getAttribute(_element, "id"); + this.elementId = _elementId; + this.element = _element; + + var _connectionCost = params.connectionCost; + this.getConnectionCost = function() { return _connectionCost; }; + this.setConnectionCost = function(c) { + _connectionCost = c; }; - var id = new String('_jsplumb_e_' + (new Date()).getTime()); - this.getId = function() { return id; }; - if (params.dynamicAnchors) - self.anchor = new DynamicAnchor(jsPlumb.makeAnchors(params.dynamicAnchors)); - else - self.anchor = params.anchor ? jsPlumb.makeAnchor(params.anchor) : params.anchors ? jsPlumb.makeAnchor(params.anchors) : jsPlumb.makeAnchor("TopCenter"); + + var _connectionsBidirectional = params.connectionsBidirectional === false ? false : true; + this.areConnectionsBidirectional = function() { return _connectionsBidirectional; }; + this.setConnectionsBidirectional = function(b) { _connectionsBidirectional = b; }; + + self.anchor = params.anchor ? _currentInstance.makeAnchor(params.anchor, _elementId, _currentInstance) : params.anchors ? _currentInstance.makeAnchor(params.anchors, _elementId, _currentInstance) : _currentInstance.makeAnchor("TopCenter", _elementId, _currentInstance); + + // ANCHOR MANAGER + if (!params._transient) // in place copies, for example, are transient. they will never need to be retrieved during a paint cycle, because they dont move, and then they are deleted. + _currentInstance.anchorManager.add(self, _elementId); + var _endpoint = params.endpoint || _currentInstance.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot", - endpointArgs = { _jsPlumb:self._jsPlumb, parent:params.parent, container:params.container }; + endpointArgs = { + _jsPlumb:self._jsPlumb, + parent:params.parent, + container:params.container, + tooltip:params.tooltip, + connectorTooltip:params.connectorTooltip, + endpoint:self + }; if (_endpoint.constructor == String) _endpoint = new jsPlumb.Endpoints[renderMode][_endpoint](endpointArgs); else if (_endpoint.constructor == Array) { endpointArgs = jsPlumb.extend(_endpoint[1], endpointArgs); _endpoint = new jsPlumb.Endpoints[renderMode][_endpoint[0]](endpointArgs); } - else + else { _endpoint = _endpoint.clone(); - - // assign a clone function using our derived endpointArgs. this is used when a drag starts: the endpoint that was dragged is cloned, + } + + // assign a clone function using a copy of endpointArgs. this is used when a drag starts: the endpoint that was dragged is cloned, // and the clone is left in its place while the original one goes off on a magical journey. - this.clone = function() { + // the copy is to get around a closure problem, in which endpointArgs ends up getting shared by + // the whole world. + var argsForClone = jsPlumb.extend({}, endpointArgs); + _endpoint.clone = function() { var o = new Object(); - _endpoint.constructor.apply(o, [endpointArgs]); + _endpoint.constructor.apply(o, [argsForClone]); return o; }; self.endpoint = _endpoint; self.type = self.endpoint.type; + // override setHover to pass it down to the underlying endpoint + var _sh = self.setHover; + self.setHover = function() { + self.endpoint.setHover.apply(self.endpoint, arguments); + _sh.apply(self, arguments); + }; + // endpoint delegates to first connection for hover, if there is one. + var internalHover = function(state) { + if (self.connections.length > 0) + self.connections[0].setHover(state, false); + else + self.setHover(state); + }; - // TODO this event listener registration code is identical to what Connection does: it should be refactored. - this.endpoint.bind("click", function(e) { self.fire("click", self, e); }); - this.endpoint.bind("dblclick", function(e) { self.fire("dblclick", self, e); }); - this.endpoint.bind("mouseenter", function(con, e) { - if (!self.isHover()) { - self.setHover(true); - self.fire("mouseenter", self, e); - } - }); - this.endpoint.bind("mouseexit", function(con, e) { - if (self.isHover()) { - self.setHover(false); - self.fire("mouseexit", self, e); - } - }); - // TODO this event listener registration code above is identical to what Connection does: it should be refactored. + // bind listeners from endpoint to self, with the internal hover function defined above. + _bindListeners(self.endpoint, self, internalHover); this.setPaintStyle(params.paintStyle || params.style || @@ -2857,17 +4445,10 @@ about the parameters allowed in the params object. this.connectorHoverStyle = params.connectorHoverStyle; this.connectorOverlays = params.connectorOverlays; this.connector = params.connector; - this.parent = params.parent; + this.connectorTooltip = params.connectorTooltip; this.isSource = params.isSource || false; this.isTarget = params.isTarget || false; - var _element = params.source, - _uuid = params.uuid, - floatingEndpoint = null, - inPlaceCopy = null; - if (_uuid) endpointsByUUID[_uuid] = self; - var _elementId = _getAttribute(_element, "id"); - this.elementId = _elementId; - this.element = _element; + var _maxConnections = params.maxConnections || _currentInstance.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of. this.getAttachedElements = function() { @@ -2890,7 +4471,10 @@ about the parameters allowed in the params object. */ this.scope = params.scope || DEFAULT_SCOPE; this.timestamp = null; - var _reattach = params.reattach || false; + self.isReattach = params.reattach || false; + self.connectionsDetachable = _currentInstance.Defaults.ConnectionsDetachable; + if (params.connectionsDetachable === false || params.detachable === false) + self.connectionsDetachable = false; var dragAllowedWhenFull = params.dragAllowedWhenFull || true; this.computeAnchor = function(params) { @@ -2914,38 +4498,67 @@ about the parameters allowed in the params object. * connection - the Connection to detach. * ignoreTarget - optional; tells the Endpoint to not notify the Connection target that the Connection was detached. The default behaviour is to notify the target. */ - this.detach = function(connection, ignoreTarget) { - var idx = _findIndex(self.connections, connection); - if (idx >= 0) { - self.connections.splice(idx, 1); - - // this avoids a circular loop - if (!ignoreTarget) { + this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent) { + var idx = _findWithFunction(self.connections, function(c) { return c.id == connection.id}), + actuallyDetached = false; + fireEvent = (fireEvent !== false); + if (idx >= 0) { + // 1. does the connection have a before detach (note this also checks jsPlumb's bound + // detach handlers; but then Endpoint's check will, too, hmm.) + if (forceDetach || connection._forceDetach || connection.isDetachable() || connection.isDetachAllowed(connection)) { + // get the target endpoint var t = connection.endpoints[0] == self ? connection.endpoints[1] : connection.endpoints[0]; - t.detach(connection, true); - // check connection to see if we want to delete the other endpoint. - // if the user uses makeTarget to make some element a target for connections, - // it is possible that they will have set 'endpointToDeleteOnDetach': when - // you make a connection to an element that acts as a target (note: NOT an - // Endpoint; just some div as a target), Endpoints are created for that - // connection. so if you then delete that Connection, it is feasible you - // will want these auto-generated endpoints to be removed. - if (connection.endpointToDeleteOnDetach && connection.endpointToDeleteOnDetach.connections.length == 0) - jsPlumb.deleteEndpoint(connection.endpointToDeleteOnDetach); + // it would be nice to check with both endpoints that it is ok to detach. but + // for this we'll have to get a bit fancier: right now if you use the same beforeDetach + // interceptor for two endpoints (which is kind of common, because it's part of the + // endpoint definition), then it gets fired twice. so in fact we need to loop through + // each beforeDetach and see if it returns false, at which point we exit. but if it + // returns true, we have to check the next one. however we need to track which ones + // have already been run, and not run them again. + if (forceDetach || connection._forceDetach || (self.isDetachAllowed(connection) /*&& t.isDetachAllowed(connection)*/)) { + + self.connections.splice(idx, 1); + + // this avoids a circular loop + if (!ignoreTarget) { + + t.detach(connection, true, forceDetach); + // check connection to see if we want to delete the endpoints associated with it. + // we only detach those that have just this connection; this scenario is most + // likely if we got to this bit of code because it is set by the methods that + // create their own endpoints, like .connect or .makeTarget. the user is + // not likely to have interacted with those endpoints. + if (connection.endpointsToDeleteOnDetach){ + for (var i = 0; i < connection.endpointsToDeleteOnDetach.length; i++) { + var cde = connection.endpointsToDeleteOnDetach[i]; + if (cde && cde.connections.length == 0) + _currentInstance.deleteEndpoint(cde); + } + } + } + _removeElements(connection.connector.getDisplayElements(), connection.parent); + _removeWithFunction(connectionsByScope[connection.scope], function(c) { + return c.id == connection.id; + }); + actuallyDetached = true; + var doFireEvent = (!ignoreTarget && fireEvent) + fireDetachEvent(connection, doFireEvent, originalEvent); + } } - _removeElements(connection.connector.getDisplayElements(), connection.parent); - _removeFromList(connectionsByScope, connection.scope, connection); - if(!ignoreTarget) fireDetachEvent(connection); } + return actuallyDetached; }; /* * Function: detachAll * Detaches all Connections this Endpoint has. + * + * Parameters: + * fireEvent - whether or not to fire the detach event. defaults to false. */ - this.detachAll = function() { + this.detachAll = function(fireEvent, originalEvent) { while (self.connections.length > 0) { - self.detach(self.connections[0]); + self.detach(self.connections[0], false, true, fireEvent, originalEvent); } }; /* @@ -2953,9 +4566,10 @@ about the parameters allowed in the params object. * Removes any connections from this Endpoint that are connected to the given target endpoint. * * Parameters: - * targetEndpoint - Endpoint from which to detach all Connections from this Endpoint. + * targetEndpoint - Endpoint from which to detach all Connections from this Endpoint. + * fireEvent - whether or not to fire the detach event. defaults to false. */ - this.detachFrom = function(targetEndpoint) { + this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) { var c = []; for ( var i = 0; i < self.connections.length; i++) { if (self.connections[i].endpoints[1] == targetEndpoint @@ -2964,8 +4578,8 @@ about the parameters allowed in the params object. } } for ( var i = 0; i < c.length; i++) { - c[i].setHover(false); - self.detach(c[i]); + if (self.detach(c[i], false, true, fireEvent, originalEvent)) + c[i].setHover(false, false); } }; /* @@ -2976,7 +4590,7 @@ about the parameters allowed in the params object. * connection - Connection to detach from. */ this.detachFromConnection = function(connection) { - var idx = _findIndex(self.connections, connection); + var idx = _findWithFunction(self.connections, function(c) { return c.id == connection.id}); if (idx >= 0) { self.connections.splice(idx, 1); } @@ -2988,7 +4602,41 @@ about the parameters allowed in the params object. */ this.getElement = function() { return _element; - }; + }; + + /* + * Function: setElement + * Sets the DOM element this Endpoint is attached to. + */ + this.setElement = function(el) { + + // TODO possibly have this object take charge of moving the UI components into the appropriate + // parent. this is used only by makeSource right now, and that function takes care of + // moving the UI bits and pieces. however it would s + var parentId = _getId(el); + // remove the endpoint from the list for the current endpoint's element + _removeWithFunction(endpointsByElement[_elementId], function(e) { + return e.id == self.id; + }); + _element = _getElementObject(el); + _elementId = _getId(_element); + self.elementId = _elementId; + // need to get the new parent now + var newParentElement = _getParentFromParams({source:parentId}), + curParent = jpcl.getParent(self.canvas); + jpcl.removeElement(self.canvas, curParent); + jpcl.appendElement(self.canvas, newParentElement); + + // now move connection(s)...i would expect there to be only one but we will iterate. + for (var i = 0; i < self.connections.length; i++) { + self.connections[i].moveParent(newParentElement); + self.connections[i].sourceId = _elementId; + self.connections[i].source = _element; + } + _addToList(endpointsByElement, parentId, self); + //_currentInstance.repaint(parentId); + + }; /* * Function: getUuid @@ -3001,7 +4649,14 @@ about the parameters allowed in the params object. * private but must be exposed. */ this.makeInPlaceCopy = function() { - return _newEndpoint( { anchor : self.anchor, source : _element, paintStyle : this.paintStyle, endpoint : _endpoint }); + return _newEndpoint( { + anchor : self.anchor, + source : _element, + paintStyle : this.paintStyle, + endpoint : _endpoint, + _transient:true, + scope:self.scope + }); }; /* * Function: isConnectedTo @@ -3034,7 +4689,11 @@ about the parameters allowed in the params object. * returns a connection from the pool; used when dragging starts. just gets the head of the array if it can. */ this.connectorSelector = function() { - return (self.connections.length < _maxConnections) || _maxConnections == -1 ? null : self.connections[0]; + var candidate = self.connections[0]; + if (self.isTarget && candidate) return candidate; + else { + return (self.connections.length < _maxConnections) || _maxConnections == -1 ? null : candidate; + } }; /* @@ -3095,7 +4754,8 @@ about the parameters allowed in the params object. /* * Function: paint - * Paints the Endpoint, recalculating offset and anchor positions if necessary. + * Paints the Endpoint, recalculating offset and anchor positions if necessary. This does NOT paint + * any of the Endpoint's connections. * * Parameters: * timestamp - optional timestamp advising the Endpoint of the current paint time; if it has painted already once for this timestamp, it will not paint again. @@ -3103,43 +4763,49 @@ about the parameters allowed in the params object. * connectorPaintStyle - paint style of the Connector attached to this Endpoint. Used to get a fillStyle if nothing else was supplied. */ this.paint = function(params) { - params = params || {}; - var timestamp = params.timestamp; - if (!timestamp || self.timestamp !== timestamp) { - var ap = params.anchorPoint, canvas = params.canvas, connectorPaintStyle = params.connectorPaintStyle; - if (ap == null) { - var xy = params.offset || offsets[_elementId]; - var wh = params.dimensions || sizes[_elementId]; - if (xy == null || wh == null) { - _updateOffset( { elId : _elementId, timestamp : timestamp }); - xy = offsets[_elementId]; - wh = sizes[_elementId]; - } - var anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : self, timestamp : timestamp }; - if (self.anchor.isDynamic) { - if (self.connections.length > 0) { - //var c = self.connections[0]; - var c = findConnectionToUseForDynamicAnchor(params.elementWithPrecedence); - var oIdx = c.endpoints[0] == self ? 1 : 0; - var oId = oIdx == 0 ? c.sourceId : c.targetId; - var oOffset = offsets[oId], oWH = sizes[oId]; + var timestamp = params.timestamp, + recalc = !(params.recalc === false); + if (!timestamp || self.timestamp !== timestamp) { + _updateOffset({ elId:_elementId, timestamp:timestamp, recalc:recalc }); + var xy = params.offset || offsets[_elementId]; + if(xy) { + var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle; + if (ap == null) { + var wh = params.dimensions || sizes[_elementId]; + if (xy == null || wh == null) { + _updateOffset( { elId : _elementId, timestamp : timestamp }); + xy = offsets[_elementId]; + wh = sizes[_elementId]; + } + var anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : self, timestamp : timestamp }; + if (recalc && self.anchor.isDynamic && self.connections.length > 0) { + var c = findConnectionToUseForDynamicAnchor(params.elementWithPrecedence), + oIdx = c.endpoints[0] == self ? 1 : 0, + oId = oIdx == 0 ? c.sourceId : c.targetId, + oOffset = offsets[oId], oWH = sizes[oId]; anchorParams.txy = [ oOffset.left, oOffset.top ]; anchorParams.twh = oWH; anchorParams.tElement = c.endpoints[oIdx]; } + ap = self.anchor.compute(anchorParams); + } + + var d = _endpoint.compute(ap, self.anchor.getOrientation(_endpoint), self.paintStyleInUse, connectorPaintStyle || self.paintStyleInUse); + _endpoint.paint(d, self.paintStyleInUse, self.anchor); + self.timestamp = timestamp; + + + /* paint overlays*/ + for ( var i = 0; i < self.overlays.length; i++) { + var o = self.overlays[i]; + if (o.isVisible) self.overlayPlacements[i] = o.draw(self.endpoint, self.paintStyleInUse, d); } - ap = self.anchor.compute(anchorParams); } - - var d = _endpoint.compute(ap, self.anchor.getOrientation(), self.paintStyleInUse, connectorPaintStyle || self.paintStyleInUse); - _endpoint.paint(d, self.paintStyleInUse, self.anchor); - - self.timestamp = timestamp; } }; - - this.repaint = this.paint; + + this.repaint = this.paint; /** * @deprecated @@ -3148,131 +4814,157 @@ about the parameters allowed in the params object. // is this a connection source? we make it draggable and have the // drag listener maintain a connection with a floating endpoint. - if (params.isSource && jsPlumb.CurrentLibrary.isDragSupported(_element)) { - var n = null, id = null, jpc = null, existingJpc = false, existingJpcParams = null; - var start = function() { + if (jsPlumb.CurrentLibrary.isDragSupported(_element)) { + var placeholderInfo = { id:null, element:null }, + jpc = null, + existingJpc = false, + existingJpcParams = null, + _dragHandler = _makeConnectionDragHandler(placeholderInfo); + + var start = function() { + // drag might have started on an endpoint that is not actually a source, but which has + // one or more connections. jpc = self.connectorSelector(); - if (self.isFull() && !dragAllowedWhenFull) return false; + var _continue = true; + // if not enabled, return + if (!self.isEnabled()) _continue = false; + // if no connection and we're not a source, return. + if (jpc == null && !params.isSource) _continue = false; + // otherwise if we're full and not allowed to drag, also return false. + if (params.isSource && self.isFull() && !dragAllowedWhenFull) _continue = false; + // if the connection was setup as not detachable or one of its endpoints + // was setup as connectionsDetachable = false, or Defaults.ConnectionsDetachable + // is set to false... + if (jpc != null && !jpc.isDetachable()) _continue = false; + + if (_continue === false) { + // this is for mootools and yui. returning false from this causes jquery to stop drag. + // the events are wrapped in both mootools and yui anyway, but i don't think returning + // false from the start callback would stop a drag. + if (jsPlumb.CurrentLibrary.stopDrag) jsPlumb.CurrentLibrary.stopDrag(); + _dragHandler.stopDrag(); + return false; + } + + // if we're not full but there was a connection, make it null. we'll create a new one. + if (jpc && !self.isFull() && params.isSource) jpc = null; + _updateOffset( { elId : _elementId }); inPlaceCopy = self.makeInPlaceCopy(); inPlaceCopy.paint(); - n = document.createElement("div"); - n.style.position = "absolute"; - var nE = _getElementObject(n); - _appendElement(n, self.parent); - // create and assign an id, and initialize the offset. - var id = _getId(nE); + _makeDraggablePlaceholder(placeholderInfo, self.parent); // set the offset of this div to be where 'inPlaceCopy' is, to start with. + // TODO merge this code with the code in both Anchor and FloatingAnchor, because it + // does the same stuff. var ipcoel = _getElementObject(inPlaceCopy.canvas), - ipco = jsPlumb.CurrentLibrary.getOffset(ipcoel), - po = inPlaceCopy.canvas.offsetParent != null ? - inPlaceCopy.canvas.offsetParent.tagName.toLowerCase() === "body" ? {left:0,top:0} : _getOffset(inPlaceCopy.canvas.offsetParent) - : { left:0, top: 0}; - jsPlumb.CurrentLibrary.setOffset(n, {left:ipco.left - po.left, top:ipco.top-po.top}); - - _updateOffset( { elId : id }); + ipco = jsPlumb.CurrentLibrary.getOffset(ipcoel), + po = adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas); + jsPlumb.CurrentLibrary.setOffset(placeholderInfo.element, {left:po[0], top:po[1]}); + // when using makeSource and a parent, we first draw the source anchor on the source element, then + // move it to the parent. note that this happens after drawing the placeholder for the + // first time. + if (self.parentAnchor) self.anchor = _currentInstance.makeAnchor(self.parentAnchor, self.elementId, _currentInstance); + + // store the id of the dragging div and the source element. the drop function will pick these up. - _setAttribute(_getElementObject(self.canvas), "dragId", id); + _setAttribute(_getElementObject(self.canvas), "dragId", placeholderInfo.id); _setAttribute(_getElementObject(self.canvas), "elId", _elementId); // create a floating anchor - var floatingAnchor = new FloatingAnchor( { reference : self.anchor, referenceCanvas : self.canvas }); - floatingEndpoint = _newEndpoint({ paintStyle : self.paintStyle, endpoint : _endpoint, anchor : floatingAnchor, source : nE }); - + floatingEndpoint = _makeFloatingEndpoint(self.paintStyle, self.anchor, _endpoint, self.canvas, placeholderInfo.element); + if (jpc == null) { self.anchor.locked = true; - // create a connection. one end is this endpoint, the - // other is a floating endpoint. + self.setHover(false, false); + // TODO the hover call above does not reset any target endpoint's hover + // states. + // create a connection. one end is this endpoint, the other is a floating endpoint. jpc = _newConnection({ sourceEndpoint : self, targetEndpoint : floatingEndpoint, - source : _getElementObject(_element), - target : _getElementObject(n), - anchors : [ self.anchor, floatingAnchor ], + source : self.endpointWillMoveTo || _getElementObject(_element), // for makeSource with parent option. ensure source element is represented correctly. + target : placeholderInfo.element, + anchors : [ self.anchor, floatingEndpoint.anchor ], paintStyle : params.connectorStyle, // this can be null. Connection will use the default. hoverPaintStyle:params.connectorHoverStyle, connector : params.connector, // this can also be null. Connection will use the default. overlays : params.connectorOverlays }); - // TODO determine whether or not we wish to do de-select hover when dragging a connection. - // it may be the case that we actually want to set it, since it provides a good - // visual cue. - jpc.connector.setHover(false); + } else { existingJpc = true; - // TODO determine whether or not we wish to do de-select hover when dragging a connection. - // it may be the case that we actually want to set it, since it provides a good - // visual cue. - jpc.connector.setHover(false); + jpc.connector.setHover(false, false); // if existing connection, allow to be dropped back on the source endpoint (issue 51). - _initDropTarget(_getElementObject(inPlaceCopy.canvas)); - var anchorIdx = jpc.sourceId == _elementId ? 0 : 1; // are we the source or the target? - + _initDropTarget(_getElementObject(inPlaceCopy.canvas), false, true); + // new anchor idx + var anchorIdx = jpc.endpoints[0].id == self.id ? 0 : 1; jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index. self.detachFromConnection(jpc); // detach from the connection while dragging is occurring. // store the original scope (issue 57) - var c = _getElementObject(self.canvas); - var dragScope = jsPlumb.CurrentLibrary.getDragScope(c); + var c = _getElementObject(self.canvas), + dragScope = jsPlumb.CurrentLibrary.getDragScope(c); _setAttribute(c, "originalScope", dragScope); // now we want to get this endpoint's DROP scope, and set it for now: we can only be dropped on drop zones // that have our drop scope (issue 57). - var dropScope = jsPlumb.CurrentLibrary.getDropScope(c);//jpc.endpoints[anchorIdx == 0 ? 1 : 0].getDropScope(); + var dropScope = jsPlumb.CurrentLibrary.getDropScope(c); jsPlumb.CurrentLibrary.setDragScope(c, dropScope); // now we replace ourselves with the temporary div we created above: if (anchorIdx == 0) { existingJpcParams = [ jpc.source, jpc.sourceId, i, dragScope ]; - jpc.source = _getElementObject(n); - jpc.sourceId = id; + jpc.source = placeholderInfo.element; + jpc.sourceId = placeholderInfo.id; } else { existingJpcParams = [ jpc.target, jpc.targetId, i, dragScope ]; - jpc.target = _getElementObject(n); - jpc.targetId = id; + jpc.target = placeholderInfo.element; + jpc.targetId = placeholderInfo.id; } // lock the other endpoint; if it is dynamic it will not move while the drag is occurring. jpc.endpoints[anchorIdx == 0 ? 1 : 0].anchor.locked = true; // store the original endpoint and assign the new floating endpoint for the drag. jpc.suspendedEndpoint = jpc.endpoints[anchorIdx]; + jpc.suspendedEndpoint.setHover(false); jpc.endpoints[anchorIdx] = floatingEndpoint; - } + // fire an event that informs that a connection is being dragged + fireConnectionDraggingEvent(jpc); + + } // register it and register connection on it. - floatingConnections[id] = jpc; + floatingConnections[placeholderInfo.id] = jpc; floatingEndpoint.addConnection(jpc); - // only register for the target endpoint; we will not be dragging the source at any time // before this connection is either discarded or made into a permanent connection. - _addToList(endpointsByElement, id, floatingEndpoint); - + _addToList(endpointsByElement, placeholderInfo.id, floatingEndpoint); // tell jsplumb about it _currentInstance.currentlyDragging = true; }; var jpcl = jsPlumb.CurrentLibrary, - dragOptions = params.dragOptions || {}, - defaultOpts = jsPlumb.extend( {}, jpcl.defaultDragOptions), - startEvent = jpcl.dragEvents['start'], - stopEvent = jpcl.dragEvents['stop'], - dragEvent = jpcl.dragEvents['drag']; + dragOptions = params.dragOptions || {}, + defaultOpts = jsPlumb.extend( {}, jpcl.defaultDragOptions), + startEvent = jpcl.dragEvents["start"], + stopEvent = jpcl.dragEvents["stop"], + dragEvent = jpcl.dragEvents["drag"]; dragOptions = jsPlumb.extend(defaultOpts, dragOptions); dragOptions.scope = dragOptions.scope || self.scope; dragOptions[startEvent] = _wrap(dragOptions[startEvent], start); - dragOptions[dragEvent] = _wrap(dragOptions[dragEvent], - function() { - var _ui = jsPlumb.CurrentLibrary.getUIPosition(arguments); - jsPlumb.CurrentLibrary.setOffset(n, _ui); - _draw(_getElementObject(n), _ui); - }); + // extracted drag handler function so can be used by makeSource + dragOptions[dragEvent] = _wrap(dragOptions[dragEvent], _dragHandler.drag); dragOptions[stopEvent] = _wrap(dragOptions[stopEvent], - function() { - _removeFromList(endpointsByElement, id, floatingEndpoint); - _removeElements( [ n, floatingEndpoint.canvas ], _element); // TODO: clean up the connection canvas (if the user aborted) - _removeElement(inPlaceCopy.canvas, _element); + function() { + _currentInstance.currentlyDragging = false; + _removeWithFunction(endpointsByElement[placeholderInfo.id], function(e) { + return e.id == floatingEndpoint.id; + }); + _removeElements( [ placeholderInfo.element[0], floatingEndpoint.canvas ], _element); // TODO: clean up the connection canvas (if the user aborted) + _removeElement(inPlaceCopy.canvas, _element); + _currentInstance.anchorManager.clearFor(placeholderInfo.id); var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; jpc.endpoints[idx == 0 ? 1 : 0].anchor.locked = false; if (jpc.endpoints[idx] == floatingEndpoint) { @@ -3290,17 +4982,14 @@ about the parameters allowed in the params object. // restore the original scope (issue 57) jsPlumb.CurrentLibrary.setDragScope(existingJpcParams[2], existingJpcParams[3]); - jpc.endpoints[idx] = jpc.suspendedEndpoint; - if (_reattach) { - + if (self.isReattach || jpc._forceDetach || !jpc.endpoints[idx == 0 ? 1 : 0].detach(jpc)) { + jpc.setHover(false); jpc.floatingAnchorIndex = null; jpc.suspendedEndpoint.addConnection(jpc); - jsPlumb.repaint(existingJpcParams[1]); - } else { - jpc.endpoints[idx == 0 ? 1 : 0].detach(jpc); // the main endpoint will inform the floating endpoint - // to disconnect, and also post the detached event. + _currentInstance.repaint(existingJpcParams[1]); } + jpc._forceDetach = null; } else { // TODO this looks suspiciously kind of like an Endpoint.detach call too. // i wonder if this one should post an event though. maybe this is good like this. @@ -3309,121 +4998,175 @@ about the parameters allowed in the params object. } } self.anchor.locked = false; - self.paint(); - jpc.setHover(false); - jpc.repaint(); + self.paint({recalc:false}); + jpc.setHover(false, false); + + fireConnectionDragStopEvent(jpc); + jpc = null; - delete inPlaceCopy; + inPlaceCopy = null; delete endpointsByElement[floatingEndpoint.elementId]; - floatingEndpoint = null; - delete floatingEndpoint; - + floatingEndpoint.anchor = null; + floatingEndpoint = null; _currentInstance.currentlyDragging = false; + + }); var i = _getElementObject(self.canvas); - jsPlumb.CurrentLibrary.initDraggable(i, dragOptions); + jsPlumb.CurrentLibrary.initDraggable(i, dragOptions, true); } - // pulled this out into a function so we can reuse it for the inPlaceCopy canvas; you can now drop detached connections - // back onto the endpoint you detached it from. - var _initDropTarget = function(canvas) { - if (params.isTarget && jsPlumb.CurrentLibrary.isDropSupported(_element)) { - var dropOptions = params.dropOptions || _currentInstance.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; - dropOptions = jsPlumb.extend( {}, dropOptions); - dropOptions.scope = dropOptions.scope || self.scope; - var originalAnchor = null; - var dropEvent = jsPlumb.CurrentLibrary.dragEvents['drop']; - var overEvent = jsPlumb.CurrentLibrary.dragEvents['over']; - var outEvent = jsPlumb.CurrentLibrary.dragEvents['out']; - var drop = function() { - var draggable = _getElementObject(jsPlumb.CurrentLibrary.getDragObject(arguments)); - var id = _getAttribute(draggable, "dragId"); - var elId = _getAttribute(draggable, "elId"); - - // restore the original scope if necessary (issue 57) - var scope = _getAttribute(draggable, "originalScope"); - if (scope) jsPlumb.CurrentLibrary.setDragScope(draggable, scope); - - var jpc = floatingConnections[id]; - - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex, oidx = idx == 0 ? 1 : 0; - if (!self.isFull() && !(idx == 0 && !self.isSource) && !(idx == 1 && !self.isTarget)) { - if (idx == 0) { - jpc.source = _element; - jpc.sourceId = _elementId; - } else { - jpc.target = _element; - jpc.targetId = _elementId; - } - // todo test that the target is not full. - // remove this jpc from the current endpoint - jpc.endpoints[idx].detachFromConnection(jpc); - if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc); - jpc.endpoints[idx] = self; - self.addConnection(jpc); - if (!jpc.suspendedEndpoint) { - _addToList(connectionsByScope, jpc.scope, jpc); - _initDraggableIfNecessary(_element, params.draggable, {}); + // pulled this out into a function so we can reuse it for the inPlaceCopy canvas; you can now drop detached connections + // back onto the endpoint you detached it from. + var _initDropTarget = function(canvas, forceInit, isTransient, endpoint) { + if ((params.isTarget || forceInit) && jsPlumb.CurrentLibrary.isDropSupported(_element)) { + var dropOptions = params.dropOptions || _currentInstance.Defaults.DropOptions || jsPlumb.Defaults.DropOptions; + dropOptions = jsPlumb.extend( {}, dropOptions); + dropOptions.scope = dropOptions.scope || self.scope; + var dropEvent = jsPlumb.CurrentLibrary.dragEvents['drop'], + overEvent = jsPlumb.CurrentLibrary.dragEvents['over'], + outEvent = jsPlumb.CurrentLibrary.dragEvents['out'], + drop = function() { + + var originalEvent = jsPlumb.CurrentLibrary.getDropEvent(arguments); + + var draggable = _getElementObject(jsPlumb.CurrentLibrary.getDragObject(arguments)), + id = _getAttribute(draggable, "dragId"), + elId = _getAttribute(draggable, "elId"), + scope = _getAttribute(draggable, "originalScope"), + jpc = floatingConnections[id]; + + if (jpc != null) { + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex, oidx = idx == 0 ? 1 : 0; + + // restore the original scope if necessary (issue 57) + if (scope) jsPlumb.CurrentLibrary.setDragScope(draggable, scope); + + var endpointEnabled = endpoint != null ? endpoint.isEnabled() : true; + + if (!self.isFull() && !(idx == 0 && !self.isSource) && !(idx == 1 && !self.isTarget) && endpointEnabled) { + + var _doContinue = true; + + // the second check here is for the case that the user is dropping it back + // where it came from. + if (jpc.suspendedEndpoint && jpc.suspendedEndpoint.id != self.id) { + if (idx == 0) { + jpc.source = jpc.suspendedEndpoint.element; + jpc.sourceId = jpc.suspendedEndpoint.elementId; + } else { + jpc.target = jpc.suspendedEndpoint.element; + jpc.targetId = jpc.suspendedEndpoint.elementId; + } + + if (!jpc.isDetachAllowed(jpc) || !jpc.endpoints[idx].isDetachAllowed(jpc) || !jpc.suspendedEndpoint.isDetachAllowed(jpc) || !_currentInstance.checkCondition("beforeDetach", jpc)) + _doContinue = false; + } + + // these have to be set before testing for beforeDrop. + if (idx == 0) { + jpc.source = self.element; + jpc.sourceId = self.elementId; + } else { + jpc.target = self.element; + jpc.targetId = self.elementId; + } + + + // now check beforeDrop. this will be available only on Endpoints that are setup to + // have a beforeDrop condition (although, secretly, under the hood all Endpoints and + // the Connection have them, because they are on jsPlumbUIComponent. shhh!), because + // it only makes sense to have it on a target endpoint. + _doContinue = _doContinue && self.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope); + + if (_doContinue) { + // remove this jpc from the current endpoint + jpc.endpoints[idx].detachFromConnection(jpc); + if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc); + jpc.endpoints[idx] = self; + self.addConnection(jpc); + if (!jpc.suspendedEndpoint) { + //_addToList(connectionsByScope, jpc.scope, jpc); + _initDraggableIfNecessary(self.element, params.draggable, {}); + } + else { + var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId; + // fire a detach event + fireDetachEvent({ + source : idx == 0 ? suspendedElement : jpc.source, + target : idx == 1 ? suspendedElement : jpc.target, + sourceId : idx == 0 ? suspendedElementId : jpc.sourceId, + targetId : idx == 1 ? suspendedElementId : jpc.targetId, + sourceEndpoint : idx == 0 ? jpc.suspendedEndpoint : jpc.endpoints[0], + targetEndpoint : idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1], + connection : jpc + }, true, originalEvent); + } + + // finalise will inform the anchor manager and also add to + // connectionsByScope if necessary. + _finaliseConnection(jpc, null, originalEvent); + } + else { + // otherwise just put it back on the endpoint it was on before the drag. + if (jpc.suspendedEndpoint) { + // self.detachFrom(jpc); + jpc.endpoints[idx] = jpc.suspendedEndpoint; + jpc.setHover(false); + jpc._forceDetach = true; + if (idx == 0) { + jpc.source = jpc.suspendedEndpoint.element; + jpc.sourceId = jpc.suspendedEndpoint.elementId; + } else { + jpc.target = jpc.suspendedEndpoint.element; + jpc.targetId = jpc.suspendedEndpoint.elementId;; + } + jpc.suspendedEndpoint.addConnection(jpc); + + jpc.endpoints[0].repaint(); + jpc.repaint(); + _currentInstance.repaint(jpc.source.elementId); + jpc._forceDetach = false; + } + } + + jpc.floatingAnchorIndex = null; } - else { - var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId; - // fire a detach event - _currentInstance.fire("jsPlumbConnectionDetached", { - source : idx == 0 ? suspendedElement : jpc.source, - target : idx == 1 ? suspendedElement : jpc.target, - sourceId : idx == 0 ? suspendedElementId : jpc.sourceId, - targetId : idx == 1 ? suspendedElementId : jpc.targetId, - sourceEndpoint : idx == 0 ? jpc.suspendedEndpoint : jpc.endpoints[0], - targetEndpoint : idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1], - connection : jpc - }); - } - - jsPlumb.repaint(elId); - - _currentInstance.fire("jsPlumbConnection", { - source : jpc.source, target : jpc.target, - sourceId : jpc.sourceId, targetId : jpc.targetId, - sourceEndpoint : jpc.endpoints[0], - targetEndpoint : jpc.endpoints[1], - connection:jpc - }); + _currentInstance.currentlyDragging = false; + delete floatingConnections[id]; } - - _currentInstance.currentlyDragging = false; - delete floatingConnections[id]; }; dropOptions[dropEvent] = _wrap(dropOptions[dropEvent], drop); - dropOptions[overEvent] = _wrap(dropOptions[overEvent], - function() { - var draggable = jsPlumb.CurrentLibrary.getDragObject(arguments); - var id = _getAttribute( _getElementObject(draggable), "dragId"); - var jpc = floatingConnections[id]; - if (jpc != null) { - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; - jpc.endpoints[idx].anchor.over(self.anchor); - } - }); - - dropOptions[outEvent] = _wrap(dropOptions[outEvent], - function() { - var draggable = jsPlumb.CurrentLibrary.getDragObject(arguments), - id = _getAttribute(_getElementObject(draggable), "dragId"), + dropOptions[overEvent] = _wrap(dropOptions[overEvent], function() { + if (self.isTarget) { + var draggable = jsPlumb.CurrentLibrary.getDragObject(arguments), + id = _getAttribute( _getElementObject(draggable), "dragId"), jpc = floatingConnections[id]; - if (jpc != null) { - var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; - jpc.endpoints[idx].anchor.out(); - } - }); - - jsPlumb.CurrentLibrary.initDroppable(canvas, dropOptions); + if (jpc != null) { + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; + jpc.endpoints[idx].anchor.over(self.anchor); + } + } + }); + dropOptions[outEvent] = _wrap(dropOptions[outEvent], function() { + if (self.isTarget) { + var draggable = jsPlumb.CurrentLibrary.getDragObject(arguments), + id = _getAttribute( _getElementObject(draggable), "dragId"), + jpc = floatingConnections[id]; + if (jpc != null) { + var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex; + jpc.endpoints[idx].anchor.out(); + } + } + }); + jsPlumb.CurrentLibrary.initDroppable(canvas, dropOptions, true, isTransient); } }; // initialise the endpoint's canvas as a drop target. this will be ignored if the endpoint is not a target or drag is not supported. - _initDropTarget(_getElementObject(self.canvas)); + _initDropTarget(_getElementObject(self.canvas), true, !(params._transient || self.anchor.isFloating), self); return self; }; @@ -3435,45 +5178,159 @@ about the parameters allowed in the params object. j.init(); return j; }; + jsPlumb.util = { + convertStyle : function(s, ignoreAlpha) { + // TODO: jsPlumb should support a separate 'opacity' style member. + if ("transparent" === s) return s; + var o = s, + pad = function(n) { return n.length == 1 ? "0" + n : n; }, + hex = function(k) { return pad(Number(k).toString(16)); }, + pattern = /(rgb[a]?\()(.*)(\))/; + if (s.match(pattern)) { + var parts = s.match(pattern)[2].split(","); + o = "#" + hex(parts[0]) + hex(parts[1]) + hex(parts[2]); + if (!ignoreAlpha && parts.length == 4) + o = o + hex(parts[3]); + } + return o; + }, + gradient : function(p1, p2) { + p1 = p1.constructor == Array ? p1 : [p1.x, p1.y]; + p2 = p2.constructor == Array ? p2 : [p2.x, p2.y]; + return (p2[1] - p1[1]) / (p2[0] - p1[0]); + }, + normal : function(p1, p2) { + return -1 / jsPlumb.util.gradient(p1,p2); + }, + segment : function(p1, p2) { + p1 = p1.constructor == Array ? p1 : [p1.x, p1.y]; + p2 = p2.constructor == Array ? p2 : [p2.x, p2.y]; + if (p2[0] > p1[0]) { + return (p2[1] > p1[1]) ? 2 : 1; + } + else { + return (p2[1] > p1[1]) ? 3 : 4; + } + }, + intersects : function(r1, r2) { + var x1 = r1.x, x2 = r1.x + r1.w, y1 = r1.y, y2 = r1.y + r1.h, + a1 = r2.x, a2 = r2.x + r2.w, b1 = r2.y, b2 = r2.y + r2.h; + + return ( (x1 < a1 && a1 < x2) && (y1 < b1 && b1 < y2) ) || + ( (x1 < a2 && a2 < x2) && (y1 < b1 && b1 < y2) ) || + ( (x1 < a1 && a1 < x2) && (y1 < b2 && b2 < y2) ) || + ( (x1 < a2 && a1 < x2) && (y1 < b2 && b2 < y2) ) || + + ( (a1 < x1 && x1 < a2) && (b1 < y1 && y1 < b2) ) || + ( (a1 < x2 && x2 < a2) && (b1 < y1 && y1 < b2) ) || + ( (a1 < x1 && x1 < a2) && (b1 < y2 && y2 < b2) ) || + ( (a1 < x2 && x1 < a2) && (b1 < y2 && y2 < b2) ); + }, + segmentMultipliers : [null, [1, -1], [1, 1], [-1, 1], [-1, -1] ], + inverseSegmentMultipliers : [null, [-1, -1], [-1, 1], [1, 1], [1, -1] ], + pointOnLine : function(fromPoint, toPoint, distance) { + var m = jsPlumb.util.gradient(fromPoint, toPoint), + s = jsPlumb.util.segment(fromPoint, toPoint), + segmentMultiplier = distance > 0 ? jsPlumb.util.segmentMultipliers[s] : jsPlumb.util.inverseSegmentMultipliers[s], + theta = Math.atan(m), + y = Math.abs(distance * Math.sin(theta)) * segmentMultiplier[1], + x = Math.abs(distance * Math.cos(theta)) * segmentMultiplier[0]; + return { x:fromPoint.x + x, y:fromPoint.y + y }; + }, + /** + * calculates a perpendicular to the line fromPoint->toPoint, that passes through toPoint and is 'length' long. + * @param fromPoint + * @param toPoint + * @param length + */ + perpendicularLineTo : function(fromPoint, toPoint, length) { + var m = jsPlumb.util.gradient(fromPoint, toPoint), + theta2 = Math.atan(-1 / m), + y = length / 2 * Math.sin(theta2), + x = length / 2 * Math.cos(theta2); + return [{x:toPoint.x + x, y:toPoint.y + y}, {x:toPoint.x - x, y:toPoint.y - y}]; + } + }; - var _curryAnchor = function(x,y,ox,oy) { - return function() { - return jsPlumb.makeAnchor(x,y,ox,oy); + var _curryAnchor = function(x, y, ox, oy, type, fnInit) { + return function(params) { + params = params || {}; + //var a = jsPlumb.makeAnchor([ x, y, ox, oy, 0, 0 ], params.elementId, params.jsPlumbInstance); + var a = params.jsPlumbInstance.makeAnchor([ x, y, ox, oy, 0, 0 ], params.elementId, params.jsPlumbInstance); + a.type = type; + if (fnInit) fnInit(a, params); + return a; }; }; - jsPlumb.Anchors["TopCenter"] = _curryAnchor(0.5, 0, 0,-1); - jsPlumb.Anchors["BottomCenter"] = _curryAnchor(0.5, 1, 0, 1); - jsPlumb.Anchors["LeftMiddle"] = _curryAnchor(0, 0.5, -1, 0); - jsPlumb.Anchors["RightMiddle"] = _curryAnchor(1, 0.5, 1, 0); - jsPlumb.Anchors["Center"] = _curryAnchor(0.5, 0.5, 0, 0); - jsPlumb.Anchors["TopRight"] = _curryAnchor(1, 0, 0,-1); - jsPlumb.Anchors["BottomRight"] = _curryAnchor(1, 1, 0, 1); - jsPlumb.Anchors["TopLeft"] = _curryAnchor(0, 0, 0, -1); - jsPlumb.Anchors["BottomLeft"] = _curryAnchor(0, 1, 0, 1); - - jsPlumb.Defaults.DynamicAnchors = function() { - return jsPlumb.makeAnchors(["TopCenter", "RightMiddle", "BottomCenter", "LeftMiddle"]); + jsPlumb.Anchors["TopCenter"] = _curryAnchor(0.5, 0, 0,-1, "TopCenter"); + jsPlumb.Anchors["BottomCenter"] = _curryAnchor(0.5, 1, 0, 1, "BottomCenter"); + jsPlumb.Anchors["LeftMiddle"] = _curryAnchor(0, 0.5, -1, 0, "LeftMiddle"); + jsPlumb.Anchors["RightMiddle"] = _curryAnchor(1, 0.5, 1, 0, "RightMiddle"); + jsPlumb.Anchors["Center"] = _curryAnchor(0.5, 0.5, 0, 0, "Center"); + jsPlumb.Anchors["TopRight"] = _curryAnchor(1, 0, 0,-1, "TopRight"); + jsPlumb.Anchors["BottomRight"] = _curryAnchor(1, 1, 0, 1, "BottomRight"); + jsPlumb.Anchors["TopLeft"] = _curryAnchor(0, 0, 0, -1, "TopLeft"); + jsPlumb.Anchors["BottomLeft"] = _curryAnchor(0, 1, 0, 1, "BottomLeft"); + + // TODO test that this does not break with the current instance idea + jsPlumb.Defaults.DynamicAnchors = function(params) { + return params.jsPlumbInstance.makeAnchors(["TopCenter", "RightMiddle", "BottomCenter", "LeftMiddle"], params.elementId, params.jsPlumbInstance); + }; + jsPlumb.Anchors["AutoDefault"] = function(params) { + var a = params.jsPlumbInstance.makeDynamicAnchor(jsPlumb.Defaults.DynamicAnchors(params)); + a.type = "AutoDefault"; + return a; }; - jsPlumb.Anchors["AutoDefault"] = function() { return jsPlumb.makeDynamicAnchor(jsPlumb.Defaults.DynamicAnchors()); }; - + jsPlumb.Anchors["Assign"] = _curryAnchor(0,0,0,0,"Assign", function(anchor, params) { + // find what to use as the "position finder". the user may have supplied a String which represents + // the id of a position finder in jsPlumb.AnchorPositionFinders, or the user may have supplied the + // position finder as a function. we find out what to use and then set it on the anchor. + var pf = params.position || "Fixed"; + anchor.positionFinder = pf.constructor == String ? params.jsPlumbInstance.AnchorPositionFinders[pf] : pf; + // always set the constructor params; the position finder might need them later (the Grid one does, + // for example) + anchor.constructorParams = params; + }); + + // Continuous anchor is just curried through to the 'get' method of the continuous anchor + // factory. + jsPlumb.Anchors["Continuous"] = function(params) { + return params.jsPlumbInstance.continuousAnchorFactory.get(params); + }; + + // these are the default anchor positions finders, which are used by the makeTarget function. supply + // a position finder argument to that function allows you to specify where the resulting anchor will + // be located + jsPlumb.AnchorPositionFinders = { + "Fixed": function(dp, ep, es, params) { + return [ (dp.left - ep.left) / es[0], (dp.top - ep.top) / es[1] ]; + }, + "Grid":function(dp, ep, es, params) { + var dx = dp.left - ep.left, dy = dp.top - ep.top, + gx = es[0] / (params.grid[0]), gy = es[1] / (params.grid[1]), + mx = Math.floor(dx / gx), my = Math.floor(dy / gy); + return [ ((mx * gx) + (gx / 2)) / es[0], ((my * gy) + (gy / 2)) / es[1] ]; + } + }; })(); /* * jsPlumb * - * Title:jsPlumb 1.3.2 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the default Connectors, Endpoint and Overlay definitions. * - * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org) + * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ (function() { @@ -3501,33 +5358,18 @@ about the parameters allowed in the params object. */ jsPlumb.Connectors.Straight = function() { this.type = "Straight"; - var self = this; - var currentPoints = null; - var _m, _m2, _b, _dx, _dy, _theta, _theta2, _sx, _sy, _tx, _ty; + var self = this, + currentPoints = null, + _m, _m2, _b, _dx, _dy, _theta, _theta2, _sx, _sy, _tx, _ty, _segment, _length; /** - * Computes the new size and position of the canvas. - * @param sourceAnchor Absolute position on screen of the source object's anchor. - * @param targetAnchor Absolute position on screen of the target object's anchor. - * @param positionMatrix Indicates the relative positions of the left,top of the - * two plumbed objects. so [0,0] indicates that the source is to the left of, and - * above, the target. [1,0] means the source is to the right and above. [0,1] means - * the source is to the left and below. [1,1] means the source is to the right - * and below. this is used to figure out which direction to draw the connector in. - * @returns an array of positioning information. the first two values are - * the [left, top] absolute position the canvas should be placed on screen. the - * next two values are the [width,height] the canvas should be. after that each - * Connector can put whatever it likes into the array:it will be passed back in - * to the paint call. This particular function stores the origin and destination of - * the line it is going to draw. a more involved implementation, like a Bezier curve, - * would store the control point info in this array too. + * Computes the new size and position of the canvas. */ - this.compute = function(sourcePos, targetPos, sourceAnchor, targetAnchor, lineWidth, minWidth) { - var w = Math.abs(sourcePos[0] - targetPos[0]); - var h = Math.abs(sourcePos[1] - targetPos[1]); - var widthAdjusted = false, heightAdjusted = false; + this.compute = function(sourcePos, targetPos, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor, lineWidth, minWidth) { + var w = Math.abs(sourcePos[0] - targetPos[0]), + h = Math.abs(sourcePos[1] - targetPos[1]), // these are padding to ensure the whole connector line appears - var xo = 0.45 * w, yo = 0.45 * h; + xo = 0.45 * w, yo = 0.45 * h; // these are padding to ensure the whole connector line appears w *= 1.9; h *=1.9; @@ -3553,10 +5395,13 @@ about the parameters allowed in the params object. _tx = sourcePos[0] < targetPos[0] ? w-xo : xo; _ty = sourcePos[1] < targetPos[1] ? h-yo : yo; currentPoints = [ x, y, w, h, _sx, _sy, _tx, _ty ]; - _dx = _tx - _sx, _dy = (_ty - _sy); - _m = _dy / _dx, _m2 = -1 / _m; + _dx = _tx - _sx, _dy = _ty - _sy; + //_m = _dy / _dx, _m2 = -1 / _m; + _m = jsPlumb.util.gradient({x:_sx, y:_sy}, {x:_tx, y:_ty}), _m2 = -1 / _m; _b = -1 * ((_m * _sx) - _sy); _theta = Math.atan(_m); _theta2 = Math.atan(_m2); + //_segment = jsPlumb.util.segment({x:_sx, y:_sy}, {x:_tx, y:_ty}); + _length = Math.sqrt((_dx * _dx) + (_dy * _dy)); return currentPoints; }; @@ -3567,42 +5412,35 @@ about the parameters allowed in the params object. * 0 to 1 inclusive. for the straight line connector this is simple maths. for Bezier, not so much. */ this.pointOnPath = function(location) { - var xp = _sx + (location * _dx); - var yp = (_m == Infinity || _m == -Infinity) ? _sy + (location * (_ty - _sy)) : (_m * xp) + _b; - return {x:xp, y:yp}; + if (location == 0) + return { x:_sx, y:_sy }; + else if (location == 1) + return { x:_tx, y:_ty }; + else + return jsPlumb.util.pointOnLine({x:_sx, y:_sy}, {x:_tx, y:_ty}, location * _length); }; /** * returns the gradient of the connector at the given point - which for us is constant. */ - this.gradientAtPoint = function(location) { return _m; }; + this.gradientAtPoint = function(location) { + return _m; + }; /** * returns the point on the connector's path that is 'distance' along the length of the path from 'location', where * 'location' is a decimal from 0 to 1 inclusive, and 'distance' is a number of pixels. + * this hands off to jsPlumb.util to do the maths, supplying two points and the distance. */ - this.pointAlongPathFrom = function(location, distance) { - var p = self.pointOnPath(location); - var orientation = distance > 0 ? 1 : -1; - var y = Math.abs(distance * Math.sin(_theta)); - if (_sy > _ty) y = y * -1; - var x = Math.abs(distance * Math.cos(_theta)); - if (_sx > _tx) x = x * -1; - return {x:p.x + (orientation * x), y:p.y + (orientation * y)}; + this.pointAlongPathFrom = function(location, distance) { + var p = self.pointOnPath(location), + farAwayPoint = location == 1 ? { + x:_sx + ((_tx - _sx) * 10), + y:_sy + ((_sy - _ty) * 10) + } : {x:_tx, y:_ty }; + + return jsPlumb.util.pointOnLine(p, farAwayPoint, distance); }; - - /** - * calculates a line that is perpendicular to, and centered on, the path at 'distance' pixels from the given location. - * the line is 'length' pixels long. - */ - this.perpendicularToPathAt = function(location, length, distance) { - var p = self.pointAlongPathFrom(location, distance); - var m = self.gradientAtPoint(p.location); - var _theta2 = Math.atan(-1 / m); - var y = length / 2 * Math.sin(_theta2); - var x = length / 2 * Math.cos(_theta2); - return [{x:p.x + x, y:p.y + y}, {x:p.x - x, y:p.y - y}]; - }; }; @@ -3618,29 +5456,32 @@ about the parameters allowed in the params object. * curviness - How 'curvy' you want the curve to be! This is a directive for the placement of control points, not endpoints of the curve, so your curve does not * actually touch the given point, but it has the tendency to lean towards it. The larger this value, the greater the curve is pulled from a straight line. * Optional; defaults to 150. + * stub - optional value for a distance to travel from the connector's endpoint before beginning the Bezier curve. defaults to 0. * */ jsPlumb.Connectors.Bezier = function(params) { var self = this; params = params || {}; - this.majorAnchor = params.curviness || 150; + this.majorAnchor = params.curviness || 150; this.minorAnchor = 10; var currentPoints = null; this.type = "Bezier"; - this._findControlPoint = function(point, sourceAnchorPosition, targetAnchorPosition, sourceAnchor, targetAnchor) { + this._findControlPoint = function(point, sourceAnchorPosition, targetAnchorPosition, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor) { // determine if the two anchors are perpendicular to each other in their orientation. we swap the control // points around if so (code could be tightened up) - var soo = sourceAnchor.getOrientation(), too = targetAnchor.getOrientation(); - var perpendicular = soo[0] != too[0] || soo[1] == too[1]; - var p = []; - var ma = self.majorAnchor, mi = self.minorAnchor; + var soo = sourceAnchor.getOrientation(sourceEndpoint), + too = targetAnchor.getOrientation(targetEndpoint), + perpendicular = soo[0] != too[0] || soo[1] == too[1], + p = [], + ma = self.majorAnchor, mi = self.minorAnchor; + if (!perpendicular) { - if (soo[0] == 0) // X + if (soo[0] == 0) // X p.push(sourceAnchorPosition[0] < targetAnchorPosition[0] ? point[0] + mi : point[0] - mi); else p.push(point[0] - (ma * soo[0])); - if (soo[1] == 0) // Y + if (soo[1] == 0) // Y p.push(sourceAnchorPosition[1] < targetAnchorPosition[1] ? point[1] + mi : point[1] - mi); else p.push(point[1] + (ma * too[1])); } @@ -3655,11 +5496,11 @@ about the parameters allowed in the params object. } return p; - }; + }; - var _CP, _CP2, _sx, _tx, _ty, _sx, _sy, _canvasX, _canvasY, _w, _h; - this.compute = function(sourcePos, targetPos, sourceAnchor, targetAnchor, lineWidth, minWidth) - { + var _CP, _CP2, _sx, _tx, _ty, _sx, _sy, _canvasX, _canvasY, _w, _h, _sStubX, _sStubY, _tStubX, _tStubY; + + this.compute = function(sourcePos, targetPos, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor, lineWidth, minWidth) { lineWidth = lineWidth || 0; _w = Math.abs(sourcePos[0] - targetPos[0]) + lineWidth; _h = Math.abs(sourcePos[1] - targetPos[1]) + lineWidth; @@ -3669,23 +5510,25 @@ about the parameters allowed in the params object. _sy = sourcePos[1] < targetPos[1] ? _h - (lineWidth/2) : (lineWidth/2); _tx = sourcePos[0] < targetPos[0] ? (lineWidth/2) : _w - (lineWidth/2); _ty = sourcePos[1] < targetPos[1] ? (lineWidth/2) : _h - (lineWidth/2); - _CP = self._findControlPoint([_sx,_sy], sourcePos, targetPos, sourceAnchor, targetAnchor); - _CP2 = self._findControlPoint([_tx,_ty], targetPos, sourcePos, targetAnchor, sourceAnchor); - var minx1 = Math.min(_sx,_tx); var minx2 = Math.min(_CP[0], _CP2[0]); var minx = Math.min(minx1,minx2); - var maxx1 = Math.max(_sx,_tx); var maxx2 = Math.max(_CP[0], _CP2[0]); var maxx = Math.max(maxx1,maxx2); + + _CP = self._findControlPoint([_sx,_sy], sourcePos, targetPos, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor); + _CP2 = self._findControlPoint([_tx,_ty], targetPos, sourcePos, sourceEndpoint, targetEndpoint, targetAnchor, sourceAnchor); + var minx1 = Math.min(_sx,_tx), minx2 = Math.min(_CP[0], _CP2[0]), minx = Math.min(minx1,minx2), + maxx1 = Math.max(_sx,_tx), maxx2 = Math.max(_CP[0], _CP2[0]), maxx = Math.max(maxx1,maxx2); if (maxx > _w) _w = maxx; if (minx < 0) { _canvasX += minx; var ox = Math.abs(minx); - _w += ox; _CP[0] += ox; _sx += ox; _tx +=ox; _CP2[0] += ox; + _w += ox; _CP[0] += ox; _sx += ox; _tx +=ox; _CP2[0] += ox; } - var miny1 = Math.min(_sy,_ty); var miny2 = Math.min(_CP[1], _CP2[1]); var miny = Math.min(miny1,miny2); - var maxy1 = Math.max(_sy,_ty); var maxy2 = Math.max(_CP[1], _CP2[1]); var maxy = Math.max(maxy1,maxy2); + var miny1 = Math.min(_sy,_ty), miny2 = Math.min(_CP[1], _CP2[1]), miny = Math.min(miny1,miny2), + maxy1 = Math.max(_sy,_ty), maxy2 = Math.max(_CP[1], _CP2[1]), maxy = Math.max(maxy1,maxy2); + if (maxy > _h) _h = maxy; if (miny < 0) { _canvasY += miny; var oy = Math.abs(miny); - _h += oy; _CP[1] += oy; _sy += oy; _ty +=oy; _CP2[1] += oy; + _h += oy; _CP[1] += oy; _sy += oy; _ty +=oy; _CP2[1] += oy; } if (minWidth && _w < minWidth) { @@ -3700,7 +5543,10 @@ about the parameters allowed in the params object. _canvasY -= posAdjust; _sy = _sy + posAdjust ; _ty = _ty + posAdjust; _CP[1] = _CP[1] + posAdjust; _CP2[1] = _CP2[1] + posAdjust; } - currentPoints = [_canvasX, _canvasY, _w, _h, _sx, _sy, _tx, _ty, _CP[0], _CP[1], _CP2[0], _CP2[1] ]; + currentPoints = [_canvasX, _canvasY, _w, _h, + _sx, _sy, _tx, _ty, + _CP[0], _CP[1], _CP2[0], _CP2[1] ]; + return currentPoints; }; @@ -3717,16 +5563,16 @@ about the parameters allowed in the params object. * returns the point on the connector's path that is 'location' along the length of the path, where 'location' is a decimal from * 0 to 1 inclusive. for the straight line connector this is simple maths. for Bezier, not so much. */ - this.pointOnPath = function(location) { - return jsBezier.pointOnCurve(_makeCurve(), location); + this.pointOnPath = function(location) { + return jsBezier.pointOnCurve(_makeCurve(), location); }; /** * returns the gradient of the connector at the given point. */ this.gradientAtPoint = function(location) { - return jsBezier.gradientAtPoint(_makeCurve(), location); - }; + return jsBezier.gradientAtPoint(_makeCurve(), location); + }; /** * for Bezier curves this method is a little tricky, cos calculating path distance algebraically is notoriously difficult. @@ -3736,18 +5582,9 @@ about the parameters allowed in the params object. * than the desired distance, in which case the loop returns immediately and the arrow is mis-shapen. so a better strategy might be to * calculate the step as a function of distance/distance between endpoints. */ - this.pointAlongPathFrom = function(location, distance) { - return jsBezier.pointAlongCurveFrom(_makeCurve(), location, distance); - }; - - /** - * calculates a line that is perpendicular to, and centered on, the path at 'distance' pixels from the given location. - * the line is 'length' pixels long. - */ - this.perpendicularToPathAt = function(location, length, distance) { - return jsBezier.perpendicularToCurveAt(_makeCurve(), location, length, distance); - }; - + this.pointAlongPathFrom = function(location, distance) { + return jsBezier.pointAlongCurveFrom(_makeCurve(), location, distance); + }; }; @@ -3764,36 +5601,24 @@ about the parameters allowed in the params object. jsPlumb.Connectors.Flowchart = function(params) { this.type = "Flowchart"; params = params || {}; - var self = this, - minStubLength = params.stub || params.minStubLength /* bwds compat. */ || 30, - segments = [], - segmentGradients = [], - segmentProportions = [], - segmentLengths = [], - segmentProportionalLengths = [], - points = [], - swapX, - swapY, + var self = this, + minStubLength = params.stub || params.minStubLength /* bwds compat. */ || 30, + segments = [], + totalLength = 0, + segmentProportions = [], + segmentProportionalLengths = [], + points = [], + swapX, swapY, + maxX = 0, maxY = 0, /** - * recalculates the gradients of each segment, and the points at which the segments begin, proportional to the total length travelled - * by all the segments that constitute the connector. + * recalculates the points at which the segments begin and end, proportional to the total length travelled + * by all the segments that constitute the connector. we use this to help with pointOnPath calculations. */ - updateSegmentGradientsAndProportions = function(startX, startY, endX, endY) { - var total = 0; - for (var i = 0; i < segments.length; i++) { - var sx = i == 0 ? startX : segments[i][2], - sy = i == 0 ? startY : segments[i][3], - ex = segments[i][0], - ey = segments[i][1]; - - segmentGradients[i] = sx == ex ? Infinity : 0; - segmentLengths[i] = Math.abs(sx == ex ? ey - sy : ex - sx); - total += segmentLengths[i]; - } + updateSegmentProportions = function(startX, startY, endX, endY) { var curLoc = 0; for (var i = 0; i < segments.length; i++) { - segmentProportionalLengths[i] = segmentLengths[i] / total; - segmentProportions[i] = [curLoc, (curLoc += (segmentLengths[i] / total)) ]; + segmentProportionalLengths[i] = segments[i][5] / totalLength; + segmentProportions[i] = [curLoc, (curLoc += (segments[i][5] / totalLength)) ]; } }, appendSegmentsToPoints = function() { @@ -3807,9 +5632,15 @@ about the parameters allowed in the params object. * helper method to add a segment. */ addSegment = function(x, y, sx, sy, tx, ty) { - var lx = segments.length == 0 ? sx : segments[segments.length - 1][0]; - var ly = segments.length == 0 ? sy : segments[segments.length - 1][1]; - segments.push([x, y, lx, ly]); + var lx = segments.length == 0 ? sx : segments[segments.length - 1][0], + ly = segments.length == 0 ? sy : segments[segments.length - 1][1], + m = x == lx ? Infinity : 0, + l = Math.abs(x == lx ? y - ly : x - lx); + segments.push([x, y, lx, ly, m, l]); + totalLength += l; + + maxX = Math.max(maxX, x); + maxY = Math.max(maxY, y); }, /** * returns [segment, proportion of travel in segment, segment index] for the segment @@ -3819,103 +5650,213 @@ about the parameters allowed in the params object. * the total length. */ findSegmentForLocation = function(location) { - var idx = segmentProportions.length - 1, inSegmentProportion = 0; + var idx = segmentProportions.length - 1, inSegmentProportion = 1; for (var i = 0; i < segmentProportions.length; i++) { if (segmentProportions[i][1] >= location) { idx = i; - inSegmentProportion = (location - segmentProportions[i][0]) / segmentProportionalLengths[i]; + inSegmentProportion = (location - segmentProportions[i][0]) / segmentProportionalLengths[i]; break; } } return { segment:segments[idx], proportion:inSegmentProportion, index:idx }; }; - this.compute = function(sourcePos, targetPos, sourceAnchor, targetAnchor, lineWidth, minWidth) { - - segments = []; - segmentGradients = []; - segmentProportionalLengths = []; - segmentLengths = []; - segmentProportionals = []; - + this.compute = function(sourcePos, targetPos, sourceEndpoint, targetEndpoint, + sourceAnchor, targetAnchor, lineWidth, minWidth, sourceInfo, targetInfo) { + + segments = []; + totalLength = 0; + segmentProportionalLengths = []; + maxX = maxY = 0; + swapX = targetPos[0] < sourcePos[0]; swapY = targetPos[1] < sourcePos[1]; - - var lw = lineWidth || 1, - offx = (lw / 2) + (minStubLength * 2), - offy = (lw / 2) + (minStubLength * 2), - so = sourceAnchor.orientation || sourceAnchor.getOrientation(), - to = targetAnchor.orientation || targetAnchor.getOrientation(), - x = swapX ? targetPos[0] : sourcePos[0], - y = swapY ? targetPos[1] : sourcePos[1], - w = Math.abs(targetPos[0] - sourcePos[0]) + 2*offx, - h = Math.abs(targetPos[1] - sourcePos[1]) + 2*offy; + + var lw = lineWidth || 1, + offx = (lw / 2) + (minStubLength * 2), + offy = (lw / 2) + (minStubLength * 2), + so = sourceAnchor.orientation || sourceAnchor.getOrientation(sourceEndpoint), + to = targetAnchor.orientation || targetAnchor.getOrientation(targetEndpoint), + x = swapX ? targetPos[0] : sourcePos[0], + y = swapY ? targetPos[1] : sourcePos[1], + w = Math.abs(targetPos[0] - sourcePos[0]) + 2*offx, + h = Math.abs(targetPos[1] - sourcePos[1]) + 2*offy; + + // if either anchor does not have an orientation set, we derive one from their relative + // positions. we fix the axis to be the one in which the two elements are further apart, and + // point each anchor at the other element. this is also used when dragging a new connection. + if (so[0] == 0 && so[1] == 0 || to[0] == 0 && to[1] == 0) { + var index = w > h ? 0 : 1, oIndex = [1,0][index]; + so = []; to = []; + so[index] = sourcePos[index] > targetPos[index] ? -1 : 1; + to[index] = sourcePos[index] > targetPos[index] ? 1 : -1; + so[oIndex] = 0; + to[oIndex] = 0; + } + if (w < minWidth) { - offx += (minWidth - w) / 2; - w = minWidth; + offx += (minWidth - w) / 2; + w = minWidth; } - if (h < minWidth) { - offy += (minWidth - h) / 2; - h = minWidth; + if (h < minWidth) { + offy += (minWidth - h) / 2; + h = minWidth; } + var sx = swapX ? w-offx : offx, - sy = swapY ? h-offy : offy, - tx = swapX ? offx : w-offx , - ty = swapY ? offy : h-offy, - startStubX = sx + (so[0] * minStubLength), - startStubY = sy + (so[1] * minStubLength), - endStubX = tx + (to[0] * minStubLength), - endStubY = ty + (to[1] * minStubLength), - midx = startStubX + ((endStubX - startStubX) / 2), - midy = startStubY + ((endStubY - startStubY) / 2); + sy = swapY ? h-offy : offy, + tx = swapX ? offx : w-offx , + ty = swapY ? offy : h-offy, + startStubX = sx + (so[0] * minStubLength), + startStubY = sy + (so[1] * minStubLength), + endStubX = tx + (to[0] * minStubLength), + endStubY = ty + (to[1] * minStubLength), + isXGreaterThanStubTimes2 = Math.abs(sx - tx) > 2 * minStubLength, + isYGreaterThanStubTimes2 = Math.abs(sy - ty) > 2 * minStubLength, + midx = startStubX + ((endStubX - startStubX) / 2), + midy = startStubY + ((endStubY - startStubY) / 2), + oProduct = ((so[0] * to[0]) + (so[1] * to[1])), + opposite = oProduct == -1, + perpendicular = oProduct == 0, + orthogonal = oProduct == 1; x -= offx; y -= offy; - points = [x, y, w, h, sx, sy, tx, ty], extraPoints = []; + points = [x, y, w, h, sx, sy, tx, ty]; + var extraPoints = []; - addSegment(startStubX, startStubY, sx, sy, tx, ty); - - if (so[0] == 0) { - var startStubIsBeforeEndStub = startStubY < endStubY; - // when start point's stub is less than endpoint's stub - if (startStubIsBeforeEndStub) { - addSegment(startStubX, midy, sx, sy, tx, ty); - addSegment(midx, midy, sx, sy, tx, ty); - addSegment(endStubX, midy, sx, sy, tx, ty); - } else { - // when start point's stub is greater than endpoint's stub - addSegment(midx, startStubY, sx, sy, tx, ty); - addSegment(midx, endStubY, sx, sy, tx, ty); - } - } - else { - var startStubIsBeforeEndStub = startStubX < endStubX; - // when start point's stub is less than endpoint's stub - if (startStubIsBeforeEndStub) { - addSegment(midx, startStubY, sx, sy, tx, ty); - addSegment(midx, midy, sx, sy, tx, ty); - addSegment(midx, endStubY, sx, sy, tx, ty); - } else { - // when start point's stub is greater than endpoint's stub - addSegment(startStubX, midy, sx, sy, tx, ty); - addSegment(endStubX, midy, sx, sy, tx, ty); - } - } - + addSegment(startStubX, startStubY, sx, sy, tx, ty); + + var sourceAxis = so[0] == 0 ? "y" : "x", + anchorOrientation = opposite ? "opposite" : orthogonal ? "orthogonal" : "perpendicular", + segment = jsPlumb.util.segment([sx, sy], [tx, ty]), + flipSourceSegments = so[sourceAxis == "x" ? 0 : 1] == -1, + flipSegments = { + "x":[null, 4, 3, 2, 1], + "y":[null, 2, 1, 4, 3] + } + + if (flipSourceSegments) + segment = flipSegments[sourceAxis][segment]; + + var findClearedLine = function(start, mult, anchorPos, dimension) { + return start + (mult * (( 1 - anchorPos) * dimension) + minStubLength); + //mx = so[0] == 0 ? startStubX + ((1 - sourceAnchor.x) * sourceInfo.width) + minStubLength : startStubX, + }, + + lineCalculators = { + oppositex : function() { + if (sourceEndpoint.elementId == targetEndpoint.elementId) { + var _y = startStubY + ((1 - sourceAnchor.y) * sourceInfo.height) + minStubLength; + return [ [ startStubX, _y ], [ endStubX, _y ]]; + } + else if (isXGreaterThanStubTimes2 && (segment == 1 || segment == 2)) { + return [[ midx, sy ], [ midx, ty ]]; + } + else { + return [[ startStubX, midy ], [endStubX, midy ]]; + } + }, + orthogonalx : function() { + if (segment == 1 || segment == 2) { + return [ [ endStubX, startStubY ]]; + } + else { + return [ [ startStubX, endStubY ]]; + } + }, + perpendicularx : function() { + var my = (ty + sy) / 2; + if ((segment == 1 && to[1] == 1) || (segment == 2 && to[1] == -1)) { + if (Math.abs(tx - sx) > minStubLength) + return [ [endStubX, startStubY ]]; + else + return [ [startStubX, startStubY ], [ startStubX, my ], [ endStubX, my ]]; + } + else if ((segment == 3 && to[1] == -1) || (segment == 4 && to[1] == 1)) { + return [ [ startStubX, my ], [ endStubX, my ]]; + } + else if ((segment == 3 && to[1] == 1) || (segment == 4 && to[1] == -1)) { + return [ [ startStubX, endStubY ]]; + } + else if ((segment == 1 && to[1] == -1) || (segment == 2 && to[1] == 1)) { + if (Math.abs(tx - sx) > minStubLength) + return [ [ midx, startStubY ], [ midx, endStubY ]]; + else + return [ [ startStubX, endStubY ]]; + } + }, + oppositey : function() { + if (sourceEndpoint.elementId == targetEndpoint.elementId) { + var _x = startStubX + ((1 - sourceAnchor.x) * sourceInfo.width) + minStubLength; + return [ [ _x, startStubY ], [ _x, endStubY ]]; + } + else if (isYGreaterThanStubTimes2 && (segment == 2 || segment == 3)) { + return [[ sx, midy ], [ tx, midy ]]; + } + else { + return [[ midx, startStubY ], [midx, endStubY ]]; + } + }, + orthogonaly : function() { + if (segment == 2 || segment == 3) { + return [ [ startStubX, endStubY ]]; + } + else { + return [ [ endStubX, startStubY ]]; + } + }, + perpendiculary : function() { + var mx = (tx + sx) / 2; + if ((segment == 2 && to[0] == -1) || (segment == 3 && to[0] == 1)) { + if (Math.abs(tx - sx) > minStubLength) + return [ [startStubX, endStubY ]]; + else + return [ [startStubX, midy ], [ endStubX, midy ]]; + } + else if ((segment == 1 && to[0] == -1) || (segment == 4 && to[0] == 1)) { + var mx = (tx + sx) / 2; + return [ [ mx, startStubY ], [ mx, endStubY ]]; + } + else if ((segment == 1 && to[0] == 1) || (segment == 4 && to[0] == -1)) { + return [ [ endStubX, startStubY ]]; + } + else if ((segment == 2 && to[0] == 1) || (segment == 3 && to[0] == -1)) { + if (Math.abs(ty - sy) > minStubLength) + return [ [ startStubX, midy ], [ endStubX, midy ]]; + else + return [ [ endStubX, startStubY ]]; + } + } + }; + + var p = lineCalculators[anchorOrientation + sourceAxis](); + if (p) { + for (var i = 0; i < p.length; i++) { + addSegment(p[i][0], p[i][1], sx, sy, tx, ty); + } + } + + addSegment(endStubX, endStubY, sx, sy, tx, ty); addSegment(tx, ty, sx, sy, tx, ty); appendSegmentsToPoints(); - updateSegmentGradientsAndProportions(sx, sy, tx, ty); + updateSegmentProportions(sx, sy, tx, ty); - return points; - }; + // adjust the max values of the canvas if we have a value that is larger than what we previously set. + // + if (maxY > points[3]) points[3] = maxY + (lineWidth * 2); + if (maxX > points[2]) points[2] = maxX + (lineWidth * 2); + + return points; + }; /** * returns the point on the connector's path that is 'location' along the length of the path, where 'location' is a decimal from * 0 to 1 inclusive. for this connector we must first figure out which segment the given point lies in, and then compute the x,y position * from our knowledge of the segment's start and end points. */ - this.pointOnPath = function(location) { + this.pointOnPath = function(location) { return self.pointAlongPathFrom(location, 0); }; @@ -3924,7 +5865,7 @@ about the parameters allowed in the params object. * segment the point falls in. segment gradients are calculated in the compute method. */ this.gradientAtPoint = function(location) { - return segmentGradients[findSegmentForLocation(location)["index"]]; + return segments[findSegmentForLocation(location)["index"]][4]; }; /** @@ -3939,7 +5880,7 @@ about the parameters allowed in the params object. * advantage is, of course, that there's less computation involved doing it that way. */ this.pointAlongPathFrom = function(location, distance) { - var s = findSegmentForLocation(location), seg = s.segment, p = s.proportion, sl = segmentLengths[s.index], m = segmentGradients[s.index]; + var s = findSegmentForLocation(location), seg = s.segment, p = s.proportion, sl = segments[s.index][5], m = segments[s.index][4]; var e = { x : m == Infinity ? seg[2] : seg[2] > seg[0] ? seg[0] + ((1 - p) * sl) - distance : seg[2] + (p * sl) + distance, y : m == 0 ? seg[3] : seg[3] > seg[1] ? seg[1] + ((1 - p) * sl) - distance : seg[3] + (p * sl) + distance, @@ -3948,21 +5889,6 @@ about the parameters allowed in the params object. return e; }; - - /** - * calculates a line that is perpendicular to, and centered on, the path at 'distance' pixels from the given location. - * the line is 'length' pixels long. - */ - this.perpendicularToPathAt = function(location, length, distance) { - var p = self.pointAlongPathFrom(location, distance); - var m = segmentGradients[p.segmentInfo.index]; - var _theta2 = Math.atan(-1 / m); - var y = length / 2 * Math.sin(_theta2); - var x = length / 2 * Math.cos(_theta2); - return [{x:p.x + x, y:p.y + y}, {x:p.x - x, y:p.y - y}]; - - }; - }; // ********************************* END OF CONNECTOR TYPES ******************************************************************* @@ -3990,9 +5916,9 @@ about the parameters allowed in the params object. this.defaultInnerRadius = this.radius / 3; this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var r = endpointStyle.radius || self.radius; - var x = anchorPoint[0] - r; - var y = anchorPoint[1] - r; + var r = endpointStyle.radius || self.radius, + x = anchorPoint[0] - r, + y = anchorPoint[1] - r; return [ x, y, r * 2, r * 2, r ]; }; }; @@ -4017,14 +5943,28 @@ about the parameters allowed in the params object. this.height = params.height || 20; this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var width = endpointStyle.width || self.width; - var height = endpointStyle.height || self.height; - var x = anchorPoint[0] - (width/2); - var y = anchorPoint[1] - (height/2); + var width = endpointStyle.width || self.width, + height = endpointStyle.height || self.height, + x = anchorPoint[0] - (width/2), + y = anchorPoint[1] - (height/2); return [ x, y, width, height]; }; }; + + var DOMElementEndpoint = function(params) { + jsPlumb.DOMElementComponent.apply(this, arguments); + var self = this; + + var displayElements = [ ]; + this.getDisplayElements = function() { + return displayElements; + }; + + this.appendDisplayElement = function(el) { + displayElements.push(el); + }; + }; /** * Class: Endpoints.Image * Draws an image as the Endpoint. @@ -4039,18 +5979,39 @@ about the parameters allowed in the params object. jsPlumb.Endpoints.Image = function(params) { this.type = "Image"; - jsPlumb.DOMElementComponent.apply(this, arguments); + DOMElementEndpoint.apply(this, arguments); - var self = this, initialized = false; + var self = this, + initialized = false, + widthToUse = params.width, + heightToUse = params.height, + _onload = null, + _endpoint = params.endpoint; + this.img = new Image(); self.ready = false; + this.img.onload = function() { self.ready = true; + widthToUse = widthToUse || self.img.width; + heightToUse = heightToUse || self.img.height; + if (_onload) { + _onload(self); + } }; - this.img.src = params.src || params.url; + + _endpoint.setImage = function(img, onload) { + var s = img.constructor == String ? img : img.src; + _onload = onload; + self.img.src = img; + }; + + _endpoint.setImage(params.src || params.url, params.onload); + this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { self.anchorPoint = anchorPoint; - if (self.ready) return [anchorPoint[0] - self.img.width / 2, anchorPoint[1] - self.img.height/ 2, self.img.width, self.img.height]; + if (self.ready) return [anchorPoint[0] - widthToUse / 2, anchorPoint[1] - heightToUse / 2, + widthToUse, heightToUse]; else return [0,0,0,0]; }; @@ -4059,7 +6020,10 @@ about the parameters allowed in the params object. self.canvas.style["padding"] = 0; self.canvas.style["outline"] = 0; self.canvas.style["position"] = "absolute"; - self.canvas.className = jsPlumb.endpointClass; + var clazz = params.cssClass ? " " + params.cssClass : ""; + self.canvas.className = jsPlumb.endpointClass + clazz; + if (widthToUse) self.canvas.setAttribute("width", widthToUse); + if (heightToUse) self.canvas.setAttribute("height", heightToUse); jsPlumb.appendElement(self.canvas, params.parent); self.attachListeners(self.canvas, self); @@ -4068,11 +6032,9 @@ about the parameters allowed in the params object. self.canvas.setAttribute("src", self.img.src); initialized = true; } - var width = self.img.width, - height = self.img.height, - x = self.anchorPoint[0] - (width/2), - y = self.anchorPoint[1] - (height/2); - jsPlumb.sizeCanvas(self.canvas, x, y, width, height); + var x = self.anchorPoint[0] - (widthToUse / 2), + y = self.anchorPoint[1] - (heightToUse / 2); + jsPlumb.sizeCanvas(self.canvas, x, y, widthToUse, heightToUse); }; this.paint = function(d, style, anchor) { @@ -4089,14 +6051,14 @@ about the parameters allowed in the params object. /** * Class: Endpoints.Blank - * An Endpoint that paints nothing on the screen, and cannot be interacted with using the mouse. There are no constructor parameters for this Endpoint. + * An Endpoint that paints nothing (visible) on the screen. Supports cssClass and hoverClass parameters like all Endpoints. */ jsPlumb.Endpoints.Blank = function(params) { var self = this; this.type = "Blank"; - jsPlumb.DOMElementComponent.apply(this, arguments); - this.compute = function() { - return [0,0,10,0]; + DOMElementEndpoint.apply(this, arguments); + this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { + return [anchorPoint[0], anchorPoint[1],10,0]; }; self.canvas = document.createElement("div"); @@ -4105,9 +6067,12 @@ about the parameters allowed in the params object. self.canvas.style.height = "1px"; self.canvas.style.background = "transparent"; self.canvas.style.position = "absolute"; + self.canvas.className = self._jsPlumb.endpointClass; jsPlumb.appendElement(self.canvas, params.parent); - this.paint = function() { }; + this.paint = function(d, style, anchor) { + jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]); + }; }; /** @@ -4126,14 +6091,14 @@ about the parameters allowed in the params object. this.type = "Triangle"; params = params || { }; params.width = params.width || 55; - param.height = params.height || 55; + params.height = params.height || 55; this.width = params.width; this.height = params.height; this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) { - var width = endpointStyle.width || self.width; - var height = endpointStyle.height || self.height; - var x = anchorPoint[0] - (width/2); - var y = anchorPoint[1] - (height/2); + var width = endpointStyle.width || self.width, + height = endpointStyle.height || self.height, + x = anchorPoint[0] - (width/2), + y = anchorPoint[1] - (height/2); return [ x, y, width, height ]; }; }; @@ -4142,15 +6107,31 @@ about the parameters allowed in the params object. // ********************************* OVERLAY DEFINITIONS *********************************************************************** - var AbstractOverlay = function() { + var AbstractOverlay = function(params) { var visible = true, self = this; + this.isAppendedAtTopLevel = true; + this.component = params.component; + this.loc = params.location == null ? 0.5 : params.location; + this.endpointLoc = params.endpointLocation == null ? [ 0.5, 0.5] : params.endpointLocation; this.setVisible = function(val) { visible = val; - self.connection.repaint(); + self.component.repaint(); }; this.isVisible = function() { return visible; }; this.hide = function() { self.setVisible(false); }; this.show = function() { self.setVisible(true); }; + + this.incrementLocation = function(amount) { + self.loc += amount; + self.component.repaint(); + }; + this.setLocation = function(l) { + self.loc = l; + self.component.repaint(); + }; + this.getLocation = function() { + return self.loc; + }; }; @@ -4178,81 +6159,63 @@ about the parameters allowed in the params object. */ jsPlumb.Overlays.Arrow = function(params) { this.type = "Arrow"; - AbstractOverlay.apply(this); + AbstractOverlay.apply(this, arguments); + this.isAppendedAtTopLevel = false; params = params || {}; var self = this; this.length = params.length || 20; this.width = params.width || 20; this.id = params.id; - this.connection = params.connection; - var direction = (params.direction || 1) < 0 ? -1 : 1; - var paintStyle = params.paintStyle || { lineWidth:1 }; - this.loc = params.location == null ? 0.5 : params.location; - // how far along the arrow the lines folding back in come to. default is 62.3%. - var foldback = params.foldback || 0.623; - var _getFoldBackPoint = function(connector, loc) { - if (foldback == 0.5) return connector.pointOnPath(loc); - else { - var adj = 0.5 - foldback; // we calculate relative to the center - return connector.pointAlongPathFrom(loc, direction * self.length * adj); - } - }; + var direction = (params.direction || 1) < 0 ? -1 : 1, + paintStyle = params.paintStyle || { lineWidth:1 }, + // how far along the arrow the lines folding back in come to. default is 62.3%. + foldback = params.foldback || 0.623; + this.computeMaxSize = function() { return self.width * 1.5; }; + this.cleanup = function() { }; // nothing to clean up for Arrows + this.draw = function(connector, currentConnectionPaintStyle, connectorDimensions) { - - // this is the arrow head position - var hxy = connector.pointAlongPathFrom(self.loc, direction * (self.length / 2)); - // this is the center of the tail - var txy = connector.pointAlongPathFrom(self.loc, -1 * direction * (self.length / 2)), tx = txy.x, ty = txy.y; - // this is the tail vector - var tail = connector.perpendicularToPathAt(self.loc, self.width, -1 * direction * (self.length / 2)); - // this is the point the tail goes in to - var cxy = _getFoldBackPoint(connector, self.loc); - - // if loc = 1, then hxy should be flush with the element, or if direction == -1, the tail midpoint. - if (self.loc == 1) { - var lxy = connector.pointOnPath(self.loc); - // TODO determine why the 1.2.6 released version does not - // use 'direction' in the two equations below, yet both - // that and 1.3.0 still paint the arrows correctly. - var dx = (lxy.x - hxy.x) * direction, dy = (lxy.y - hxy.y) * direction; - cxy.x += dx; cxy.y += dy; - txy.x += dx; txy.y += dy; - tail[0].x += dx; tail[0].y += dy; - tail[1].x += dx; tail[1].y += dy; - hxy.x += dx; hxy.y += dy; - } - // if loc = 0, then tail midpoint should be flush with the element, or, if direction == -1, hxy should be. - if (self.loc == 0) { - var lxy = connector.pointOnPath(self.loc); - var tailMid = foldback > 1 ? cxy : { - x:tail[0].x + ((tail[1].x - tail[0].x) / 2), - y:tail[0].y + ((tail[1].y - tail[0].y) / 2) - }; - var dx = (lxy.x - tailMid.x) * direction, dy = (lxy.y - tailMid.y) * direction; - cxy.x += dx; cxy.y += dy; - txy.x += dx; txy.y += dy; - tail[0].x += dx; tail[0].y += dy; - tail[1].x += dx; tail[1].y += dy; - hxy.x += dx; hxy.y += dy; - } - - var minx = Math.min(hxy.x, tail[0].x, tail[1].x); - var maxx = Math.max(hxy.x, tail[0].x, tail[1].x); - var miny = Math.min(hxy.y, tail[0].y, tail[1].y); - var maxy = Math.max(hxy.y, tail[0].y, tail[1].y); - - var d = { hxy:hxy, tail:tail, cxy:cxy }, - strokeStyle = paintStyle.strokeStyle || currentConnectionPaintStyle.strokeStyle, - fillStyle = paintStyle.fillStyle || currentConnectionPaintStyle.strokeStyle, - lineWidth = paintStyle.lineWidth || currentConnectionPaintStyle.lineWidth; - - self.paint(connector, d, lineWidth, strokeStyle, fillStyle, connectorDimensions); + + var hxy, mid, txy, tail, cxy; + if (connector.pointAlongPathFrom) { + + if (self.loc == 1) { + hxy = connector.pointOnPath(self.loc); + mid = connector.pointAlongPathFrom(self.loc, -1); + txy = jsPlumb.util.pointOnLine(hxy, mid, self.length); + } + else if (self.loc == 0) { + txy = connector.pointOnPath(self.loc); + mid = connector.pointAlongPathFrom(self.loc, 1); + hxy = jsPlumb.util.pointOnLine(txy, mid, self.length); + } + else { + hxy = connector.pointAlongPathFrom(self.loc, direction * self.length / 2), + mid = connector.pointOnPath(self.loc), + txy = jsPlumb.util.pointOnLine(hxy, mid, self.length); + } + + tail = jsPlumb.util.perpendicularLineTo(hxy, txy, self.width); + cxy = jsPlumb.util.pointOnLine(hxy, txy, foldback * self.length); + + var minx = Math.min(hxy.x, tail[0].x, tail[1].x), + maxx = Math.max(hxy.x, tail[0].x, tail[1].x), + miny = Math.min(hxy.y, tail[0].y, tail[1].y), + maxy = Math.max(hxy.y, tail[0].y, tail[1].y); + + var d = { hxy:hxy, tail:tail, cxy:cxy }, + strokeStyle = paintStyle.strokeStyle || currentConnectionPaintStyle.strokeStyle, + fillStyle = paintStyle.fillStyle || currentConnectionPaintStyle.strokeStyle, + lineWidth = paintStyle.lineWidth || currentConnectionPaintStyle.lineWidth; + + self.paint(connector, d, lineWidth, strokeStyle, fillStyle, connectorDimensions); - return [ minx, maxx, miny, maxy]; + return [ minx, maxx, miny, maxy]; + } + else return [0,0,0,0]; }; }; @@ -4291,8 +6254,8 @@ about the parameters allowed in the params object. */ jsPlumb.Overlays.Diamond = function(params) { params = params || {}; - var l = params.length || 40; - var p = jsPlumb.extend(params, {length:l/2, foldback:2}); + var l = params.length || 40, + p = jsPlumb.extend(params, {length:l/2, foldback:2}); jsPlumb.Overlays.Arrow.call(this, p); this.type = "Diamond"; }; @@ -4315,46 +6278,32 @@ about the parameters allowed in the params object. * label - the label to paint. May be a string or a function that returns a string. Nothing will be painted if your label is null or your * label function returns null. empty strings _will_ be painted. * location - distance (as a decimal from 0 to 1 inclusive) marking where the label should sit on the connector. defaults to 0.5. - * labelStyle - (deprecated) js object containing style instructions for the label. defaults to jsPlumb.Defaults.LabelStyle. - * borderWidth - (deprecated) width of a border to paint. defaults to zero. - * borderStyle - (deprecated) strokeStyle to use when painting the border, if necessary. * */ jsPlumb.Overlays.Label = function(params) { this.type = "Label"; jsPlumb.DOMElementComponent.apply(this, arguments); - AbstractOverlay.apply(this); + AbstractOverlay.apply(this, arguments); this.labelStyle = params.labelStyle || jsPlumb.Defaults.LabelStyle; - this.labelStyle.font = this.labelStyle.font || "12px sans-serif"; - this.label = params.label || "banana"; - this.connection = params.connection; - this.id = params.id; - var self = this; - var labelWidth = null, labelHeight = null, labelText = null, labelPadding = null; - this.location = params.location || 0.5; - this.cachedDimensions = null; // setting on 'this' rather than using closures uses a lot less memory. just don't monkey with it! - var initialised = false, - labelText = null, - div = document.createElement("div"); - div.style["position"] = "absolute"; - div.style["font"] = self.labelStyle.font; - div.style["color"] = self.labelStyle.color || "black"; - if (self.labelStyle.fillStyle) div.style["background"] = self.labelStyle.fillStyle;//_convertStyle(self.labelStyle.fillStyle, true); - if (self.labelStyle.borderWidth > 0) { - var dStyle = self.labelStyle.borderStyle ? self.labelStyle.borderStyle/*_convertStyle(self.labelStyle.borderStyle, true)*/ : "black"; - div.style["border"] = self.labelStyle.borderWidth + "px solid " + dStyle; - } - if (self.labelStyle.padding) div.style["padding"] = self.labelStyle.padding; + this.id = params.id; + this.cachedDimensions = null; // setting on 'this' rather than using closures uses a lot less memory. just don't monkey with it! + var label = params.label || "", + self = this, + initialised = false, + div = document.createElement("div"), + labelText = null; + div.style["position"] = "absolute"; var clazz = params["_jsPlumb"].overlayClass + " " + (self.labelStyle.cssClass ? self.labelStyle.cssClass : params.cssClass ? params.cssClass : ""); - div.className = clazz; + div.className = clazz; - jsPlumb.appendElement(div, params.connection.parent); + jsPlumb.appendElement(div, params.component.parent); jsPlumb.getId(div); self.attachListeners(div, self); + self.canvas = div; //override setVisible var osv = self.setVisible; @@ -4363,71 +6312,584 @@ about the parameters allowed in the params object. div.style.display = state ? "block" : "none"; }; - this.paint = function(connector, d, connectorDimensions) { + this.getElement = function() { + return div; + }; + + this.cleanup = function() { + if (div != null) jsPlumb.CurrentLibrary.removeElement(div); + }; + + /* + * Function: setLabel + * sets the label's, um, label. you would think i'd call this function + * 'setText', but you can pass either a Function or a String to this, so + * it makes more sense as 'setLabel'. + */ + this.setLabel = function(l) { + label = l; + labelText = null; + self.component.repaint(); + }; + + this.getLabel = function() { + return label; + }; + + this.paint = function(component, d, componentDimensions) { if (!initialised) { - connector.appendDisplayElement(div); - self.attachListeners(div, connector); + component.appendDisplayElement(div); + self.attachListeners(div, component); initialised = true; } - div.style.left = (connectorDimensions[0] + d.minx) + "px"; - div.style.top = (connectorDimensions[1] + d.miny) + "px"; - }; - - this.getTextDimensions = function(connector) { - labelText = typeof self.label == 'function' ? self.label(self) : self.label; - div.innerHTML = labelText.replace(/\r\n/g, "
"); - var de = jsPlumb.CurrentLibrary.getElementObject(div), - s = jsPlumb.CurrentLibrary.getSize(de); - return {width:s[0], height:s[1]}; - }; - - this.computeMaxSize = function(connector) { - var td = self.getTextDimensions(connector); - return td.width ? Math.max(td.width, td.height) * 1.5 : 0; - }; - - this.draw = function(connector, currentConnectionPaintStyle, connectorDimensions) { - var td = self.getTextDimensions(connector); - if (td.width != null) { - var cxy = connector.pointOnPath(self.location); - - var minx = cxy.x - (td.width / 2); - var miny = cxy.y - (td.height / 2); - - self.paint(connector, { - minx:minx, - miny:miny, - td:td, - cxy:cxy - }, connectorDimensions); + div.style.left = (componentDimensions[0] + d.minx) + "px"; + div.style.top = (componentDimensions[1] + d.miny) + "px"; + }; + + this.getTextDimensions = function() { + if (typeof label == "function") { + var lt = label(self); + div.innerHTML = lt.replace(/\r\n/g, "
"); + } + else { + if (labelText == null) { + labelText = label; + div.innerHTML = labelText.replace(/\r\n/g, "
"); + } + } + var de = jsPlumb.CurrentLibrary.getElementObject(div), + s = jsPlumb.CurrentLibrary.getSize(de); + return {width:s[0], height:s[1]}; + }; + + this.computeMaxSize = function(connector) { + var td = self.getTextDimensions(connector); + return td.width ? Math.max(td.width, td.height) * 1.5 : 0; + }; + + this.draw = function(component, currentConnectionPaintStyle, componentDimensions) { + var td = self.getTextDimensions(component); + if (td.width != null) { + var cxy = {x:0,y:0}; + if (component.pointOnPath) + cxy = component.pointOnPath(self.loc); // a connection + else { + var locToUse = self.loc.constructor == Array ? self.loc : self.endpointLoc; + cxy = { x:locToUse[0] * componentDimensions[2], + y:locToUse[1] * componentDimensions[3] }; + } + + minx = cxy.x - (td.width / 2), + miny = cxy.y - (td.height / 2); + + self.paint(component, { + minx:minx, + miny:miny, + td:td, + cxy:cxy + }, componentDimensions); + + return [minx, minx+td.width, miny, miny+td.height]; + } + else return [0,0,0,0]; + }; + + this.reattachListeners = function(connector) { + if (div) { + self.reattachListenersForElement(div, self, connector); + } + }; + }; + + // this is really just a test overlay, so its undocumented and doesnt take any parameters. but i was loth to delete it. + jsPlumb.Overlays.GuideLines = function() { + var self = this; + self.length = 50; + self.lineWidth = 5; + this.type = "GuideLines"; + AbstractOverlay.apply(this, arguments); + jsPlumb.jsPlumbUIComponent.apply(this, arguments); + this.draw = function(connector, currentConnectionPaintStyle, connectorDimensions) { + + var head = connector.pointAlongPathFrom(self.loc, self.length / 2), + mid = connector.pointOnPath(self.loc), + tail = jsPlumb.util.pointOnLine(head, mid, self.length), + tailLine = jsPlumb.util.perpendicularLineTo(head, tail, 40), + headLine = jsPlumb.util.perpendicularLineTo(tail, head, 20); + + self.paint(connector, [head, tail, tailLine, headLine], self.lineWidth, "red", null, connectorDimensions); + + return [Math.min(head.x, tail.x), Math.min(head.y, tail.y), Math.max(head.x, tail.x), Math.max(head.y,tail.y)]; + }; + + this.computeMaxSize = function() { return 50; }; + + this.cleanup = function() { }; // nothing to clean up for GuideLines + }; + + // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** + + // ********************************* OVERLAY CANVAS RENDERERS*********************************************************************** + + // ********************************* END OF OVERLAY CANVAS RENDERERS *********************************************************************** +})();/* + * jsPlumb + * + * Title:jsPlumb 1.3.7 + * + * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas + * elements, or VML. + * + * This file contains the state machine connectors. + * + * Thanks to Brainstorm Mobile Solutions for supporting the development of these. + * + * Copyright (c) 2010 - 2012 Simon Porritt (simon.porritt@gmail.com) + * + * http://jsplumb.org + * http://github.com/sporritt/jsplumb + * http://code.google.com/p/jsplumb + * + * Dual licensed under the MIT and GPL2 licenses. + */ + +;(function() { + + var Line = function(x1, y1, x2, y2) { + + this.m = (y2 - y1) / (x2 - x1); + this.b = -1 * ((this.m * x1) - y1); + + this.rectIntersect = function(x,y,w,h) { + var results = []; + + // try top face + // the equation of the top face is y = (0 * x) + b; y = b. + var xInt = (y - this.b) / this.m; + // test that the X value is in the line's range. + if (xInt >= x && xInt <= (x + w)) results.push([ xInt, (this.m * xInt) + this.b ]); + + // try right face + var yInt = (this.m * (x + w)) + this.b; + if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); + + // bottom face + var xInt = ((y + h) - this.b) / this.m; + // test that the X value is in the line's range. + if (xInt >= x && xInt <= (x + w)) results.push([ xInt, (this.m * xInt) + this.b ]); + + // try left face + var yInt = (this.m * x) + this.b; + if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]); + + if (results.length == 2) { + var midx = (results[0][0] + results[1][0]) / 2, midy = (results[0][1] + results[1][1]) / 2; + results.push([ midx,midy ]); + // now calculate the segment inside the rectangle where the midpoint lies. + var xseg = midx <= x + (w / 2) ? -1 : 1, + yseg = midy <= y + (h / 2) ? -1 : 1; + results.push([xseg, yseg]); + return results; + } + + return null; + + }; + }, + _segment = function(x1, y1, x2, y2) { + if (x1 <= x2 && y2 <= y1) return 1; + else if (x1 <= x2 && y1 <= y2) return 2; + else if (x2 <= x1 && y2 >= y1) return 3; + return 4; + }, + + // the control point we will use depends on the faces to which each end of the connection is assigned, specifically whether or not the + // two faces are parallel or perpendicular. if they are parallel then the control point lies on the midpoint of the axis in which they + // are parellel and varies only in the other axis; this variation is proportional to the distance that the anchor points lie from the + // center of that face. if the two faces are perpendicular then the control point is at some distance from both the midpoints; the amount and + // direction are dependent on the orientation of the two elements. 'seg', passed in to this method, tells you which segment the target element + // lies in with respect to the source: 1 is top right, 2 is bottom right, 3 is bottom left, 4 is top left. + // + // sourcePos and targetPos are arrays of info about where on the source and target each anchor is located. their contents are: + // + // 0 - absolute x + // 1 - absolute y + // 2 - proportional x in element (0 is left edge, 1 is right edge) + // 3 - proportional y in element (0 is top edge, 1 is bottom edge) + // + _findControlPoint = function(midx, midy, segment, sourceEdge, targetEdge, dx, dy, distance, proximityLimit) { + + // TODO (maybe) + // - if anchor pos is 0.5, make the control point take into account the relative position of the elements. + if (distance <= proximityLimit) return [midx, midy]; + + if (segment == 1) { + if (sourceEdge[3] <= 0 && targetEdge[3] >= 1) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ]; + else if (sourceEdge[2] >= 1 && targetEdge[2] <= 0) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ]; + else return [ midx + (-1 * dx) , midy + (-1 * dy) ]; + } + else if (segment == 2) { + if (sourceEdge[3] >= 1 && targetEdge[3] <= 0) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ]; + else if (sourceEdge[2] >= 1 && targetEdge[2] <= 0) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ]; + else return [ midx + (1 * dx) , midy + (-1 * dy) ]; + } + else if (segment == 3) { + if (sourceEdge[3] >= 1 && targetEdge[3] <= 0) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ]; + else if (sourceEdge[2] <= 0 && targetEdge[2] >= 1) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ]; + else return [ midx + (-1 * dx) , midy + (-1 * dy) ]; + } + else if (segment == 4) { + if (sourceEdge[3] <= 0 && targetEdge[3] >= 1) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ]; + else if (sourceEdge[2] <= 0 && targetEdge[2] >= 1) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ]; + else return [ midx + (1 * dx) , midy + (-1 * dy) ]; + } + }; + + /* + Function: StateMachine constructor + + Allowed parameters: + curviness - measure of how "curvy" the connectors will be. this is translated as the distance that the + Bezier curve's control point is from the midpoint of the straight line connecting the two + endpoints, and does not mean that the connector is this wide. The Bezier curve never reaches + its control points; they act as gravitational masses. defaults to 10. + margin - distance from element to start and end connectors, in pixels. defaults to 5. + proximityLimit - sets the distance beneath which the elements are consider too close together to bother with fancy + curves. by default this is 80 pixels. + loopbackRadius - the radius of a loopback connector. optional; defaults to 25. + */ + jsPlumb.Connectors.StateMachine = function(params) { + var self = this, + currentPoints = null, + _sx, _sy, _tx, _ty, _controlPoint = [], + curviness = params.curviness || 10, + margin = params.margin || 5, + proximityLimit = params.proximityLimit || 80, + clockwise = params.orientation && params.orientation == "clockwise", + loopbackRadius = params.loopbackRadius || 25, + isLoopback = false; + + this.type = "StateMachine"; + params = params || {}; + + this.compute = function(sourcePos, targetPos, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor, lineWidth, minWidth) { + + var w = Math.abs(sourcePos[0] - targetPos[0]), + h = Math.abs(sourcePos[1] - targetPos[1]), + // these are padding to ensure the whole connector line appears + xo = 0.45 * w, yo = 0.45 * h; + // these are padding to ensure the whole connector line appears + w *= 1.9; h *= 1.9; + //ensure at least one pixel width + lineWidth = lineWidth || 1; + var x = Math.min(sourcePos[0], targetPos[0]) - xo, + y = Math.min(sourcePos[1], targetPos[1]) - yo; + + if (sourceEndpoint.elementId != targetEndpoint.elementId) { + + isLoopback = false; + + _sx = sourcePos[0] < targetPos[0] ? xo : w-xo; + _sy = sourcePos[1] < targetPos[1] ? yo:h-yo; + _tx = sourcePos[0] < targetPos[0] ? w-xo : xo; + _ty = sourcePos[1] < targetPos[1] ? h-yo : yo; + + // now adjust for the margin + if (sourcePos[2] == 0) _sx -= margin; + if (sourcePos[2] == 1) _sx += margin; + if (sourcePos[3] == 0) _sy -= margin; + if (sourcePos[3] == 1) _sy += margin; + if (targetPos[2] == 0) _tx -= margin; + if (targetPos[2] == 1) _tx += margin; + if (targetPos[3] == 0) _ty -= margin; + if (targetPos[3] == 1) _ty += margin; + + // + // these connectors are quadratic bezier curves, having a single control point. if both anchors + // are located at 0.5 on their respective faces, the control point is set to the midpoint and you + // get a straight line. this is also the case if the two anchors are within 'proximityLimit', since + // it seems to make good aesthetic sense to do that. outside of that, the control point is positioned + // at 'curviness' pixels away along the normal to the straight line connecting the two anchors. + // + // there may be two improvements to this. firstly, we might actually support the notion of avoiding nodes + // in the UI, or at least making a good effort at doing so. if a connection would pass underneath some node, + // for example, we might increase the distance the control point is away from the midpoint in a bid to + // steer it around that node. this will work within limits, but i think those limits would also be the likely + // limits for, once again, aesthetic good sense in the layout of a chart using these connectors. + // + // the second possible change is actually two possible changes: firstly, it is possible we should gradually + // decrease the 'curviness' as the distance between the anchors decreases; start tailing it off to 0 at some + // point (which should be configurable). secondly, we might slightly increase the 'curviness' for connectors + // with respect to how far their anchor is from the center of its respective face. this could either look cool, + // or stupid, and may indeed work only in a way that is so subtle as to have been a waste of time. + // + + var _midx = (_sx + _tx) / 2, _midy = (_sy + _ty) / 2, + m2 = (-1 * _midx) / _midy, theta2 = Math.atan(m2), + dy = (m2 == Infinity || m2 == -Infinity) ? 0 : Math.abs(curviness / 2 * Math.sin(theta2)), + dx = (m2 == Infinity || m2 == -Infinity) ? 0 : Math.abs(curviness / 2 * Math.cos(theta2)), + segment = _segment(_sx, _sy, _tx, _ty), + distance = Math.sqrt(Math.pow(_tx - _sx, 2) + Math.pow(_ty - _sy, 2)); + + // calculate the control point. this code will be where we'll put in a rudimentary element avoidance scheme; it + // will work by extending the control point to force the curve to be, um, curvier. + _controlPoint = _findControlPoint(_midx, + _midy, + segment, + sourcePos, + targetPos, + curviness, curviness, + distance, + proximityLimit); + + + var requiredWidth = Math.max(Math.abs(_controlPoint[0] - _sx) * 3, Math.abs(_controlPoint[0] - _tx) * 3, Math.abs(_tx-_sx), 2 * lineWidth, minWidth), + requiredHeight = Math.max(Math.abs(_controlPoint[1] - _sy) * 3, Math.abs(_controlPoint[1] - _ty) * 3, Math.abs(_ty-_sy), 2 * lineWidth, minWidth); + + if (w < requiredWidth) { + var dw = requiredWidth - w; + x -= (dw / 2); + _sx += (dw / 2); + _tx += (dw / 2); + w = requiredWidth; + _controlPoint[0] += (dw / 2); + } + + if (h < requiredHeight) { + var dh = requiredHeight - h; + y -= (dh / 2); + _sy += (dh / 2); + _ty += (dh / 2); + h = requiredHeight; + _controlPoint[1] += (dh / 2); + } + currentPoints = [ x, y, w, h, _sx, _sy, _tx, _ty, _controlPoint[0], _controlPoint[1] ]; + } + else { + isLoopback = true; + // a loopback connector. draw an arc from one anchor to the other. + // i guess we'll do this the same way as the others. just the control point will be a fair distance away. + var x1 = sourcePos[0], x2 = sourcePos[0], y1 = sourcePos[1] - margin, y2 = sourcePos[1] - margin, + cx = x1, cy = y1 - loopbackRadius; + + // canvas sizing stuff, to ensure the whole painted area is visible. + w = ((2 * lineWidth) + (4 * loopbackRadius)), h = ((2 * lineWidth) + (4 * loopbackRadius)); + x = cx - loopbackRadius - lineWidth - loopbackRadius, y = cy - loopbackRadius - lineWidth - loopbackRadius; + currentPoints = [ x, y, w, h, cx-x, cy-y, loopbackRadius, clockwise, x1-x, y1-y, x2-x, y2-y]; + } + + return currentPoints; + }; + + var _makeCurve = function() { + return [ + { x:_tx, y:_ty }, + { x:_controlPoint[0], y:_controlPoint[1] }, + { x:_controlPoint[0] + 1, y:_controlPoint[1] + 1}, + { x:_sx, y:_sy } + ]; + }; + + /** + * returns the point on the connector's path that is 'location' along the length of the path, where 'location' is a decimal from + * 0 to 1 inclusive. for the straight line connector this is simple maths. for Bezier, not so much. + */ + this.pointOnPath = function(location) { + if (isLoopback) { + + if (location > 0 && location < 1) location = 1- location; + +// current points are [ x, y, width, height, center x, center y, radius, clockwise, startx, starty, endx, endy ] + // so the path length is the circumference of the circle + //var len = 2 * Math.PI * currentPoints[6], + // map 'location' to an angle. 0 is PI/2 when the connector is on the top face; if we + // support other faces it will have to be calculated for each one. 1 is also PI/2. + // 0.5 is -PI/2. + var startAngle = (location * 2 * Math.PI) + (Math.PI / 2), + startX = currentPoints[4] + (currentPoints[6] * Math.cos(startAngle)), + startY = currentPoints[5] + (currentPoints[6] * Math.sin(startAngle)); + + return {x:startX, y:startY}; + + } + else return jsBezier.pointOnCurve(_makeCurve(), location); + }; + + /** + * returns the gradient of the connector at the given point. + */ + this.gradientAtPoint = function(location) { + if (isLoopback) + return Math.atan(location * 2 * Math.PI); + else + return jsBezier.gradientAtPoint(_makeCurve(), location); + }; + + /** + * for Bezier curves this method is a little tricky, cos calculating path distance algebraically is notoriously difficult. + * this method is iterative, jumping forward .05% of the path at a time and summing the distance between this point and the previous + * one, until the sum reaches 'distance'. the method may turn out to be computationally expensive; we'll see. + * another drawback of this method is that if the connector gets quite long, .05% of the length of it is not necessarily smaller + * than the desired distance, in which case the loop returns immediately and the arrow is mis-shapen. so a better strategy might be to + * calculate the step as a function of distance/distance between endpoints. + */ + this.pointAlongPathFrom = function(location, distance) { + if (isLoopback) { + + if (location > 0 && location < 1) location = 1- location; + + var circumference = 2 * Math.PI * currentPoints[6], + arcSpan = distance / circumference * 2 * Math.PI, + startAngle = (location * 2 * Math.PI) - arcSpan + (Math.PI / 2), + + startX = currentPoints[4] + (currentPoints[6] * Math.cos(startAngle)), + startY = currentPoints[5] + (currentPoints[6] * Math.sin(startAngle)); + + return {x:startX, y:startY}; + } + return jsBezier.pointAlongCurveFrom(_makeCurve(), location, distance); + }; + + }; + + /* + * Canvas state machine renderer. + */ + jsPlumb.Connectors.canvas.StateMachine = function(params) { + params = params || {}; + var self = this, drawGuideline = params.drawGuideline || true, avoidSelector = params.avoidSelector; + jsPlumb.Connectors.StateMachine.apply(this, arguments); + jsPlumb.CanvasConnector.apply(this, arguments); + + + this._paint = function(dimensions) { + + if (dimensions.length == 10) { + self.ctx.beginPath(); + self.ctx.moveTo(dimensions[4], dimensions[5]); + self.ctx.quadraticCurveTo(dimensions[8], dimensions[9], dimensions[6], dimensions[7]); + self.ctx.stroke(); - return [minx, minx+td.width, miny, miny+td.height]; - } - else return [0,0,0,0]; - }; + /*/ draw the guideline + if (drawGuideline) { + self.ctx.save(); + self.ctx.beginPath(); + self.ctx.strokeStyle = "silver"; + self.ctx.lineWidth = 1; + self.ctx.moveTo(dimensions[4], dimensions[5]); + self.ctx.lineTo(dimensions[6], dimensions[7]); + self.ctx.stroke(); + self.ctx.restore(); + } + //*/ + } + else { + // a loopback connector + self.ctx.save(); + self.ctx.beginPath(); + var startAngle = 0, // Starting point on circle + endAngle = 2 * Math.PI, // End point on circle + clockwise = dimensions[7]; // clockwise or anticlockwise + self.ctx.arc(dimensions[4],dimensions[5],dimensions[6],0, endAngle, clockwise); + self.ctx.stroke(); + self.ctx.closePath(); + self.ctx.restore(); + } + }; + + this.createGradient = function(dim, ctx) { + return ctx.createLinearGradient(dim[4], dim[5], dim[6], dim[7]); + }; }; - // ********************************* END OF OVERLAY DEFINITIONS *********************************************************************** - - // ********************************* OVERLAY CANVAS RENDERERS*********************************************************************** + /* + * SVG State Machine renderer + */ + jsPlumb.Connectors.svg.StateMachine = function() { + var self = this; + jsPlumb.Connectors.StateMachine.apply(this, arguments); + jsPlumb.SvgConnector.apply(this, arguments); + this.getPath = function(d) { + + if (d.length == 10) + return "M " + d[4] + " " + d[5] + " C " + d[8] + " " + d[9] + " " + d[8] + " " + d[9] + " " + d[6] + " " + d[7]; + else { + // loopback + return "M" + (d[8] + 4) + " " + d[9] + " A " + d[6] + " " + d[6] + " 0 1,0 " + (d[8]-4) + " " + d[9]; + } + }; + }; - // ********************************* END OF OVERLAY CANVAS RENDERERS *********************************************************************** -})();/* + /* + * VML state machine renderer + */ + jsPlumb.Connectors.vml.StateMachine = function() { + jsPlumb.Connectors.StateMachine.apply(this, arguments); + jsPlumb.VmlConnector.apply(this, arguments); + var _conv = jsPlumb.vml.convertValue; + this.getPath = function(d) { + if (d.length == 10) { + return "m" + _conv(d[4]) + "," + _conv(d[5]) + + " c" + _conv(d[8]) + "," + _conv(d[9]) + "," + _conv(d[8]) + "," + _conv(d[9]) + "," + _conv(d[6]) + "," + _conv(d[7]) + " e"; + } + else { + // loopback + var left = _conv(d[8] - d[6]), + top = _conv(d[9] - (2 * d[6])), + right = left + _conv(2 * d[6]), + bottom = top + _conv(2 * d[6]), + posString = left + "," + top + "," + right + "," + bottom; + + var o = "ar " + posString + "," + _conv(d[8]) + "," + + _conv(d[9]) + "," + _conv(d[8]) + "," + _conv(d[9]) + " e"; + + return o; + } + }; + }; + +})(); + +/* + // now for a rudimentary avoidance scheme. TODO: how to set this in a cross-library way? + // if (avoidSelector) { + // var testLine = new Line(sourcePos[0] + _sx,sourcePos[1] + _sy,sourcePos[0] + _tx,sourcePos[1] + _ty); + // var sel = jsPlumb.getSelector(avoidSelector); + // for (var i = 0; i < sel.length; i++) { + // var id = jsPlumb.getId(sel[i]); + // if (id != sourceEndpoint.elementId && id != targetEndpoint.elementId) { + // o = jsPlumb.getOffset(id), s = jsPlumb.getSize(id); +// +// if (o && s) { +// var collision = testLine.rectIntersect(o.left,o.top,s[0],s[1]); +// if (collision) { + // set the control point to be a certain distance from the midpoint of the two points that + // the line crosses on the rectangle. + // TODO where will this 75 number come from? + // _controlX = collision[2][0] + (75 * collision[3][0]); + // / _controlY = collision[2][1] + (75 * collision[3][1]); +// } +// } + // } + // } + //} + *//* * jsPlumb * - * Title:jsPlumb 1.3.2 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the VML renderers. * - * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org) + * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ ;(function() { @@ -4446,18 +6908,17 @@ about the parameters allowed in the params object. if (document.createStyleSheet) { // this is the style rule for IE7/6: it uses a CSS class, tidy. - document.createStyleSheet().addRule(".jsplumb_vml", "behavior:url(#default#VML);position:absolute;"); + document.createStyleSheet().addRule(".jsplumb_vml", "behavior:url(#default#VML);position:absolute;"); // these are for VML in IE8. you have to explicitly call out which elements // you're going to expect to support VML! - // - // try to avoid IE8. it is recommended you set X-UA-Compatible="IE=7" if you can. // document.createStyleSheet().addRule("jsplumb\\:textbox", "behavior:url(#default#VML);position:absolute;"); document.createStyleSheet().addRule("jsplumb\\:oval", "behavior:url(#default#VML);position:absolute;"); document.createStyleSheet().addRule("jsplumb\\:rect", "behavior:url(#default#VML);position:absolute;"); document.createStyleSheet().addRule("jsplumb\\:stroke", "behavior:url(#default#VML);position:absolute;"); document.createStyleSheet().addRule("jsplumb\\:shape", "behavior:url(#default#VML);position:absolute;"); + document.createStyleSheet().addRule("jsplumb\\:group", "behavior:url(#default#VML);position:absolute;"); // in this page it is also mentioned that IE requires the extra arg to the namespace // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/ @@ -4469,12 +6930,31 @@ about the parameters allowed in the params object. // document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml", "#default#VML"); } + jsPlumb.vml = {}; + var scale = 1000, + + _groupMap = {}, + _getGroup = function(container, connectorClass) { + var id = jsPlumb.getId(container), + g = _groupMap[id]; + if(!g) { + g = _node("group", [0,0,scale, scale], {"class":connectorClass}); + //g.style.position=absolute; + //g["coordsize"] = "1000,1000"; + g.style.backgroundColor="red"; + _groupMap[id] = g; + jsPlumb.appendElement(g, container); // todo if this gets reinstated, remember to use the current jsplumb instance. + //document.body.appendChild(g); + } + return g; + }, _atts = function(o, atts) { for (var i in atts) { // IE8 fix: setattribute does not work after an element has been added to the dom! // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/ //o.setAttribute(i, atts[i]); + o[i] = atts[i]; } }, @@ -4493,35 +6973,33 @@ about the parameters allowed in the params object. o.style.height= d[3] + "px"; o.style.position = "absolute"; }, - _conv = function(v) { + _conv = jsPlumb.vml.convertValue = function(v) { return Math.floor(v * scale); - }, - _convertStyle = function(s, ignoreAlpha) { - var o = s, - pad = function(n) { return n.length == 1 ? "0" + n : n; }, - hex = function(k) { return pad(Number(k).toString(16)); }, - pattern = /(rgb[a]?\()(.*)(\))/; - if (s.match(pattern)) { - var parts = s.match(pattern)[2].split(","); - o = "#" + hex(parts[0]) + hex(parts[1]) + hex(parts[2]); - if (!ignoreAlpha && parts.length == 4) - o = o + hex(parts[3]); - } - - return o; }, + // tests if the given style is "transparent" and then sets the appropriate opacity node to 0 if so, + // or 1 if not. TODO in the future, support variable opacity. + _maybeSetOpacity = function(styleToWrite, styleToCheck, type, component) { + if ("transparent" === styleToCheck) + component.setOpacity(type, "0.0"); + else + component.setOpacity(type, "1.0"); + }, _applyStyles = function(node, style, component) { var styleToWrite = {}; if (style.strokeStyle) { styleToWrite["stroked"] = "true"; - styleToWrite["strokecolor"] =_convertStyle(style.strokeStyle, true); + var strokeColor = jsPlumb.util.convertStyle(style.strokeStyle, true); + styleToWrite["strokecolor"] = strokeColor; + _maybeSetOpacity(styleToWrite, strokeColor, "stroke", component); styleToWrite["strokeweight"] = style.lineWidth + "px"; } else styleToWrite["stroked"] = "false"; if (style.fillStyle) { styleToWrite["filled"] = "true"; - styleToWrite["fillcolor"] = _convertStyle(style.fillStyle, true); + var fillColor = jsPlumb.util.convertStyle(style.fillStyle, true); + styleToWrite["fillcolor"] = fillColor; + _maybeSetOpacity(styleToWrite, fillColor, "fill", component); } else styleToWrite["filled"] = "false"; @@ -4554,36 +7032,62 @@ about the parameters allowed in the params object. * Base class for Vml endpoints and connectors. Extends jsPlumbUIComponent. */ VmlComponent = function() { + var self = this; jsPlumb.jsPlumbUIComponent.apply(this, arguments); + this.opacityNodes = { + "stroke":null, + "fill":null + }; + this.initOpacityNodes = function(vml) { + self.opacityNodes["stroke"] = _node("stroke", [0,0,1,1], {opacity:"0.0"}); + self.opacityNodes["fill"] = _node("fill", [0,0,1,1], {opacity:"0.0"}); + vml.appendChild(self.opacityNodes["stroke"]); + vml.appendChild(self.opacityNodes["fill"]); + }; + this.setOpacity = function(type, value) { + var node = self.opacityNodes[type]; + if (node) node["opacity"] = "" + value; + }; + var displayElements = [ ]; + this.getDisplayElements = function() { + return displayElements; + }; + + this.appendDisplayElement = function(el, doNotAppendToCanvas) { + if (!doNotAppendToCanvas) self.canvas.parentNode.appendChild(el); + displayElements.push(el); + }; }, /* * Base class for Vml connectors. extends VmlComponent. */ - VmlConnector = function(params) { + VmlConnector = jsPlumb.VmlConnector = function(params) { var self = this; self.strokeNode = null; self.canvas = null; VmlComponent.apply(this, arguments); - clazz = self._jsPlumb.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); + var clazz = self._jsPlumb.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); this.paint = function(d, style, anchor) { if (style != null) { var path = self.getPath(d), p = { "path":path }; - + + //* if (style.outlineColor) { var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), outlineStyle = { - strokeStyle:_convertStyle(style.outlineColor), - lineWidth:outlineStrokeWidth + strokeStyle : jsPlumb.util.convertStyle(style.outlineColor), + lineWidth : outlineStrokeWidth }; + for (var aa in vmlAttributeMap) outlineStyle[aa] = style[aa]; if (self.bgCanvas == null) { p["class"] = clazz; p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale); self.bgCanvas = _node("shape", d, p); - jsPlumb.appendElement(self.bgCanvas, params.parent); + params["_jsPlumb"].appendElement(self.bgCanvas, params.parent); _pos(self.bgCanvas, d); - displayElements.push(self.bgCanvas); + self.appendDisplayElement(self.bgCanvas, true); } else { p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale); @@ -4593,15 +7097,23 @@ about the parameters allowed in the params object. _applyStyles(self.bgCanvas, outlineStyle, self); } + //*/ if (self.canvas == null) { p["class"] = clazz; p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale); + if (self.tooltip) p["label"] = self.tooltip; self.canvas = _node("shape", d, p); - jsPlumb.appendElement(self.canvas, params.parent); - displayElements.push(self.canvas); + + //var group = _getGroup(params.parent); // test of append everything to a group + //group.appendChild(self.canvas); // sort of works but not exactly; + params["_jsPlumb"].appendElement(self.canvas, params.parent); //before introduction of groups + + self.appendDisplayElement(self.canvas, true); self.attachListeners(self.canvas, self); + + self.initOpacityNodes(self.canvas, ["stroke"]); } else { p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale); @@ -4613,14 +7125,10 @@ about the parameters allowed in the params object. } }; - var displayElements = [ self.canvas ]; - this.getDisplayElements = function() { - return displayElements; - }; + //self.appendDisplayElement(self.canvas); - this.appendDisplayElement = function(el) { - self.canvas.parentNode.appendChild(el); - displayElements.push(el); + this.reattachListeners = function() { + if (self.canvas) self.reattachListenersForElement(self.canvas, self); }; }, /* @@ -4630,10 +7138,15 @@ about the parameters allowed in the params object. */ VmlEndpoint = function(params) { VmlComponent.apply(this, arguments); - var vml = null, self = this; + var vml = null, self = this, opacityStrokeNode = null, opacityFillNode = null; self.canvas = document.createElement("div"); self.canvas.style["position"] = "absolute"; - jsPlumb.appendElement(self.canvas, params.parent); + + //var group = _getGroup(params.parent); + //group.appendChild(self.canvas); + params["_jsPlumb"].appendElement(self.canvas, params.parent); + + if (self.tooltip) self.canvas.setAttribute("label", self.tooltip); this.paint = function(d, style, anchor) { var p = { }; @@ -4644,6 +7157,11 @@ about the parameters allowed in the params object. vml = self.getVml([0,0, d[2], d[3]], p, anchor); self.canvas.appendChild(vml); self.attachListeners(vml, self); + + self.appendDisplayElement(vml, true); + self.appendDisplayElement(self.canvas, true); + + self.initOpacityNodes(vml, ["fill"]); } else { //p["coordsize"] = "1,1";//(d[2] * scale) + "," + (d[3] * scale); again, unsure. @@ -4651,7 +7169,11 @@ about the parameters allowed in the params object. _atts(vml, p); } - _applyStyles(vml, style); + _applyStyles(vml, style, self); + }; + + this.reattachListeners = function() { + if (vml) self.reattachListenersForElement(vml, self); }; }; @@ -4717,7 +7239,8 @@ about the parameters allowed in the params object. var AbstractVmlArrowOverlay = function(superclass, originalArgs) { superclass.apply(this, originalArgs); VmlComponent.apply(this, arguments); - var self = this, canvas = null, path =null; + var self = this, path = null; + self.canvas = null; var getPath = function(d, connectorDimensions) { return "m " + _conv(d.hxy.x) + "," + _conv(d.hxy.y) + " l " + _conv(d.tail[0].x) + "," + _conv(d.tail[0].y) + @@ -4729,7 +7252,7 @@ about the parameters allowed in the params object. var p = {}; if (strokeStyle) { p["stroked"] = "true"; - p["strokecolor"] =_convertStyle(strokeStyle, true); + p["strokecolor"] = jsPlumb.util.convertStyle(strokeStyle, true); } if (lineWidth) p["strokeweight"] = lineWidth + "px"; if (fillStyle) { @@ -4756,17 +7279,21 @@ about the parameters allowed in the params object. dim[2] = connectorDimensions[2]; dim[3] = connectorDimensions[3]; - if (canvas == null) { + if (self.canvas == null) { //p["class"] = jsPlumb.overlayClass; // TODO currentInstance? - canvas = _node("shape", dim, p); - connector.appendDisplayElement(canvas); - self.attachListeners(canvas, connector); + self.canvas = _node("shape", dim, p); + connector.appendDisplayElement(self.canvas); + self.attachListeners(self.canvas, connector); } else { - _pos(canvas, dim); - _atts(canvas, p); + _pos(self.canvas, dim); + _atts(self.canvas, p); } }; + + this.reattachListeners = function() { + if (self.canvas) self.reattachListenersForElement(self.canvas, self); + }; }; jsPlumb.Overlays.vml.Arrow = function() { @@ -4783,19 +7310,20 @@ about the parameters allowed in the params object. })();/* * jsPlumb * - * Title:jsPlumb 1.3.2 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the SVG renderers. * - * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org) + * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ /** @@ -4807,17 +7335,31 @@ about the parameters allowed in the params object. * css:http://tutorials.jenkov.com/svg/svg-and-css.html * text on a path: http://www.w3.org/TR/SVG/text.html#TextOnAPath * pointer events: https://developer.mozilla.org/en/css/pointer-events - * + * + * IE9 hover jquery: http://forum.jquery.com/topic/1-6-2-broke-svg-hover-events + * */ ;(function() { var svgAttributeMap = { - "stroke-linejoin":"stroke-linejoin", - "joinstyle":"stroke-linejoin", - "stroke-dashoffset":"stroke-dashoffset" - }; - - var ns = { + "joinstyle":"stroke-linejoin", + "stroke-linejoin":"stroke-linejoin", + "stroke-dashoffset":"stroke-dashoffset", + "stroke-linecap":"stroke-linecap" + }, + STROKE_DASHARRAY = "stroke-dasharray", + DASHSTYLE = "dashstyle", + LINEAR_GRADIENT = "linearGradient", + RADIAL_GRADIENT = "radialGradient", + FILL = "fill", + STOP = "stop", + STROKE = "stroke", + STROKE_WIDTH = "stroke-width", + STYLE = "style", + NONE = "none", + JSPLUMB_GRADIENT = "jsplumb_gradient_", + LINE_WIDTH = "lineWidth", + ns = { svg:"http://www.w3.org/2000/svg", xhtml:"http://www.w3.org/1999/xhtml" }, @@ -4829,33 +7371,19 @@ about the parameters allowed in the params object. var n = document.createElementNS(ns.svg, name); attributes = attributes || {}; attributes["version"] = "1.1"; - attributes["xmnls"] = ns.xhtml; + attributes["xmlns"] = ns.xhtml; _attr(n, attributes); return n; }, - _pos = function(d) { return "position:absolute;left:" + d[0] + "px;top:" + d[1] + "px"; }, - _convertStyle = function(s, ignoreAlpha) { - var o = s, - pad = function(n) { return n.length == 1 ? "0" + n : n; }, - hex = function(k) { return pad(Number(k).toString(16)); }, - pattern = /(rgb[a]?\()(.*)(\))/; - if (s.match(pattern)) { - var parts = s.match(pattern)[2].split(","); - o = "#" + hex(parts[0]) + hex(parts[1]) + hex(parts[2]); - if (!ignoreAlpha && parts.length == 4) - o = o + hex(parts[3]); - } - - return o; - }, + _pos = function(d) { return "position:absolute;left:" + d[0] + "px;top:" + d[1] + "px"; }, _clearGradient = function(parent) { for (var i = 0; i < parent.childNodes.length; i++) { - if (parent.childNodes[i].tagName == "linearGradient" || parent.childNodes[i].tagName == "radialGradient") + if (parent.childNodes[i].tagName == LINEAR_GRADIENT || parent.childNodes[i].tagName == RADIAL_GRADIENT) parent.removeChild(parent.childNodes[i]); } }, - _updateGradient = function(parent, node, style, dimensions) { - var id = "jsplumb_gradient_" + (new Date()).getTime(); + _updateGradient = function(parent, node, style, dimensions, uiComponent) { + var id = JSPLUMB_GRADIENT + uiComponent._jsPlumb.idstamp(); // first clear out any existing gradient _clearGradient(parent); // this checks for an 'offset' property in the gradient, and in the absence of it, assumes @@ -4864,11 +7392,11 @@ about the parameters allowed in the params object. // better. relying on 'offset' means that we can never have a radial gradient that uses // some default offset, for instance. if (!style.gradient.offset) { - var g = _node("linearGradient", {id:id}); + var g = _node(LINEAR_GRADIENT, {id:id}); parent.appendChild(g); } else { - var g = _node("radialGradient", { + var g = _node(RADIAL_GRADIENT, { id:id }); parent.appendChild(g); @@ -4886,28 +7414,28 @@ about the parameters allowed in the params object. styleToUse = dimensions[4] < dimensions[6] ? i: style.gradient.stops.length - 1 - i; else styleToUse = dimensions[4] < dimensions[6] ? style.gradient.stops.length - 1 - i : i; - var stopColor = _convertStyle(style.gradient.stops[styleToUse][1], true); - var s = _node("stop", {"offset":Math.floor(style.gradient.stops[i][0] * 100) + "%", "stop-color":stopColor}); + var stopColor = jsPlumb.util.convertStyle(style.gradient.stops[styleToUse][1], true); + var s = _node(STOP, {"offset":Math.floor(style.gradient.stops[i][0] * 100) + "%", "stop-color":stopColor}); g.appendChild(s); } - var applyGradientTo = style.strokeStyle ? "stroke" : "fill"; - node.setAttribute("style", applyGradientTo + ":url(#" + id + ")"); + var applyGradientTo = style.strokeStyle ? STROKE : FILL; + node.setAttribute(STYLE, applyGradientTo + ":url(#" + id + ")"); }, - _applyStyles = function(parent, node, style, dimensions) { + _applyStyles = function(parent, node, style, dimensions, uiComponent) { if (style.gradient) { - _updateGradient(parent, node, style, dimensions); + _updateGradient(parent, node, style, dimensions, uiComponent); } else { // make sure we clear any existing gradient _clearGradient(parent); - node.setAttribute("style", ""); + node.setAttribute(STYLE, ""); } - node.setAttribute("fill", style.fillStyle ? _convertStyle(style.fillStyle, true) : "none"); - node.setAttribute("stroke", style.strokeStyle ? _convertStyle(style.strokeStyle, true) : "none"); + node.setAttribute(FILL, style.fillStyle ? jsPlumb.util.convertStyle(style.fillStyle, true) : NONE); + node.setAttribute(STROKE, style.strokeStyle ? jsPlumb.util.convertStyle(style.strokeStyle, true) : NONE); if (style.lineWidth) { - node.setAttribute("stroke-width", style.lineWidth); + node.setAttribute(STROKE_WIDTH, style.lineWidth); } // in SVG there is a stroke-dasharray attribute we can set, and its syntax looks like @@ -4918,18 +7446,18 @@ about the parameters allowed in the params object. // VML, which will be the preferred method. the code below this converts a dashstyle // attribute given in terms of stroke width into a pixel representation, by using the // stroke's lineWidth. - if(style["stroke-dasharray"]) { - node.setAttribute("stroke-dasharray", style["stroke-dasharray"]); - } - if (style["dashstyle"] && style["lineWidth"]) { - var sep = style["dashstyle"].indexOf(",") == -1 ? " " : ",", - parts = style["dashstyle"].split(sep), + if (style[DASHSTYLE] && style[LINE_WIDTH] && !style[STROKE_DASHARRAY]) { + var sep = style[DASHSTYLE].indexOf(",") == -1 ? " " : ",", + parts = style[DASHSTYLE].split(sep), styleToUse = ""; parts.forEach(function(p) { styleToUse += (Math.floor(p * style.lineWidth) + sep); }); - node.setAttribute("stroke-dasharray", styleToUse); + node.setAttribute(STROKE_DASHARRAY, styleToUse); } + else if(style[STROKE_DASHARRAY]) { + node.setAttribute(STROKE_DASHARRAY, style[STROKE_DASHARRAY]); + } // extra attributes such as join type, dash offset. for (var i in svgAttributeMap) { @@ -4942,36 +7470,75 @@ about the parameters allowed in the params object. var r = /([0-9].)(p[xt])\s(.*)/; var bits = f.match(r); return {size:bits[1] + bits[2], font:bits[3]}; + }, + _classManip = function(el, add, clazz) { + var classesToAddOrRemove = clazz.split(" "), + className = el.className, + curClasses = className.baseVal.split(" "); + + for (var i = 0; i < classesToAddOrRemove.length; i++) { + if (add) { + if (curClasses.indexOf(classesToAddOrRemove[i]) == -1) + curClasses.push(classesToAddOrRemove[i]); + } + else { + var idx = curClasses.indexOf(classesToAddOrRemove[i]); + if (idx != -1) + curClasses.splice(idx, 1); + } + } + + el.className.baseVal = curClasses.join(" "); + }, + _addClass = function(el, clazz) { + _classManip(el, true, clazz); + }, + _removeClass = function(el, clazz) { + _classManip(el, false, clazz); + }; + + /** + utility methods for other objects to use. + */ + jsPlumb.util.svg = { + addClass:_addClass, + removeClass:_removeClass }; /* * Base class for SVG components. */ - var SvgComponent = function(cssClass, originalArgs, pointerEventsSpec) { - var self = this; - pointerEventsSpec = pointerEventsSpec || "all"; - jsPlumb.jsPlumbUIComponent.apply(this, originalArgs); + //var SvgComponent = function(cssClass, originalArgs, pointerEventsSpec) { + var SvgComponent = function(params) { + var self = this, + pointerEventsSpec = params.pointerEventsSpec || "all"; + jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs); self.canvas = null, self.path = null, self.svg = null; - this.setHover = function() { }; - - self.canvas = document.createElement("div"); - self.canvas.style["position"] = "absolute"; - jsPlumb.sizeCanvas(self.canvas,0,0,1,1); - - var clazz = cssClass + " " + (originalArgs[0].cssClass || ""); - self.canvas.className = clazz; - - self.svg = _node("svg", { - "style":"", - "width":0, - "height":0, - "pointer-events":pointerEventsSpec/*, - "class": clazz*/ - }); - - jsPlumb.appendElement(self.canvas, originalArgs[0]["parent"]); - self.canvas.appendChild(self.svg); + var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""), + svgParams = { + "style":"", + "width":0, + "height":0, + "pointer-events":pointerEventsSpec, + "position":"absolute" + }; + if (self.tooltip) svgParams["title"] = self.tooltip; + self.svg = _node("svg", svgParams); + if (params.useDivWrapper) { + self.canvas = document.createElement("div"); + self.canvas.style["position"] = "absolute"; + jsPlumb.sizeCanvas(self.canvas,0,0,1,1); + self.canvas.className = clazz; + if (self.tooltip) self.canvas.setAttribute("title", self.tooltip); + } + else { + _attr(self.svg, { "class":clazz }); + self.canvas = self.svg; + } + + params._jsPlumb.appendElement(self.canvas, params.originalArgs[0]["parent"]); + if (params.useDivWrapper) self.canvas.appendChild(self.svg); // TODO this displayElement stuff is common between all components, across all // renderers. would be best moved to jsPlumbUIComponent. @@ -4986,9 +7553,13 @@ about the parameters allowed in the params object. this.paint = function(d, style, anchor) { if (style != null) { - jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]); + var x = d[0], y = d[1]; + if (params.useDivWrapper) { + jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]); + x = 0, y = 0; + } _attr(self.svg, { - "style":_pos([0,0,d[2], d[3]]), + "style":_pos([x, y, d[2], d[3]]), "width": d[2], "height": d[3] }); @@ -5000,9 +7571,15 @@ about the parameters allowed in the params object. /* * Base class for SVG connectors. */ - var SvgConnector = function(params) { + var SvgConnector = jsPlumb.SvgConnector = function(params) { var self = this; - SvgComponent.apply(this, [ params["_jsPlumb"].connectorClass, arguments, "none" ]); + SvgComponent.apply(this, [ { + cssClass:params["_jsPlumb"].connectorClass, + originalArgs:arguments, + pointerEventsSpec:"none", + tooltip:params.tooltip, + _jsPlumb:params["_jsPlumb"] + } ]); this._paint = function(d, style) { var p = self.getPath(d), a = { "d":p }, outlineStyle = null; a["pointer-events"] = "all"; @@ -5010,11 +7587,10 @@ about the parameters allowed in the params object. // outline style. actually means drawing an svg object underneath the main one. if (style.outlineColor) { var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); - outlineStyle = { - strokeStyle:_convertStyle(style.outlineColor), - lineWidth:outlineStrokeWidth - }; + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = jsPlumb.CurrentLibrary.extend({}, style); + outlineStyle.strokeStyle = jsPlumb.util.convertStyle(style.outlineColor); + outlineStyle.lineWidth = outlineStrokeWidth; if (self.bgPath == null) { self.bgPath = _node("path", a); @@ -5025,21 +7601,42 @@ about the parameters allowed in the params object. _attr(self.bgPath, a); } - _applyStyles(self.svg, self.bgPath, outlineStyle, d); + _applyStyles(self.svg, self.bgPath, outlineStyle, d, self); } + // test - see below + // a["clip-path"]= "url(#testClip)"; + if (self.path == null) { self.path = _node("path", a); self.svg.appendChild(self.path); self.attachListeners(self.path, self); + + /* + this is a test of a clip path. i'm looking into using one of these to animate a jsplumb connection. + you could do this by walking along the line, stepping along a little at a time, and setting the clip + path to extend as far as that point. + + self.clip = _node("clipPath", {id:"testClip", clipPathUnits:"objectBoundingBox"}); + self.svg.appendChild(self.clip); + self.clip.appendChild(_node("rect", { + x:"0",y:"0",width:"0.5",height:"1" + })); + */ } else { _attr(self.path, a); } - _applyStyles(self.svg, self.path, style, d); + _applyStyles(self.svg, self.path, style, d, self); }; + + this.reattachListeners = function() { + if (self.bgPath) self.reattachListenersForElement(self.bgPath, self); + if (self.path) self.reattachListenersForElement(self.path, self); + }; + }; /* @@ -5048,7 +7645,11 @@ about the parameters allowed in the params object. jsPlumb.Connectors.svg.Bezier = function(params) { jsPlumb.Connectors.Bezier.apply(this, arguments); SvgConnector.apply(this, arguments); - this.getPath = function(d) { return "M " + d[4] + " " + d[5] + " C " + d[8] + " " + d[9] + " " + d[10] + " " + d[11] + " " + d[6] + " " + d[7]; }; + this.getPath = function(d) { + var _p = "M " + d[4] + " " + d[5]; + _p += (" C " + d[8] + " " + d[9] + " " + d[10] + " " + d[11] + " " + d[6] + " " + d[7]); + return _p; + }; }; /* @@ -5081,12 +7682,18 @@ about the parameters allowed in the params object. */ var SvgEndpoint = function(params) { var self = this; - SvgComponent.apply(this, [ params["_jsPlumb"].endpointClass, arguments, "all" ]); + SvgComponent.apply(this, [ { + cssClass:params["_jsPlumb"].endpointClass, + originalArgs:arguments, + pointerEventsSpec:"all", + useDivWrapper:true, + _jsPlumb:params["_jsPlumb"] + } ]); this._paint = function(d, style) { var s = jsPlumb.extend({}, style); if (s.outlineColor) { s.strokeWidth = s.outlineWidth; - s.strokeStyle = _convertStyle(s.outlineColor, true); + s.strokeStyle = jsPlumb.util.convertStyle(s.outlineColor, true); } if (self.node == null) { @@ -5094,9 +7701,13 @@ about the parameters allowed in the params object. self.svg.appendChild(self.node); self.attachListeners(self.node, self); } - _applyStyles(self.svg, self.node, s, d); + _applyStyles(self.svg, self.node, s, d, self); _pos(self.node, d); }; + + this.reattachListeners = function() { + if (self.node) self.reattachListenersForElement(self.node, self); + }; }; /* @@ -5140,11 +7751,11 @@ about the parameters allowed in the params object. * Label endpoint in svg renderer is the default Label endpoint. */ jsPlumb.Overlays.svg.Label = jsPlumb.Overlays.Label; - - + var AbstractSvgArrowOverlay = function(superclass, originalArgs) { superclass.apply(this, originalArgs); jsPlumb.jsPlumbUIComponent.apply(this, originalArgs); + this.isAppendedAtTopLevel = false; var self = this, path =null; this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle) { if (path == null) { @@ -5153,9 +7764,11 @@ about the parameters allowed in the params object. self.attachListeners(path, connector); self.attachListeners(path, self); } + var clazz = originalArgs && (originalArgs.length == 1) ? (originalArgs[0].cssClass || "") : ""; _attr(path, { "d" : makePath(d), + "class" : clazz, stroke : strokeStyle ? strokeStyle : null, fill : fillStyle ? fillStyle : null }); @@ -5167,6 +7780,9 @@ about the parameters allowed in the params object. " L" + d.tail[1].x + "," + d.tail[1].y + " L" + d.hxy.x + "," + d.hxy.y; }; + this.reattachListeners = function() { + if (path) self.reattachListenersForElement(path, self); + }; }; jsPlumb.Overlays.svg.Arrow = function() { @@ -5180,22 +7796,72 @@ about the parameters allowed in the params object. jsPlumb.Overlays.svg.Diamond = function() { AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); }; + + // a test + jsPlumb.Overlays.svg.GuideLines = function() { + var path = null, self = this, path2 = null, p1_1, p1_2; + jsPlumb.Overlays.GuideLines.apply(this, arguments); + this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle) { + if (path == null) { + path = _node("path"); + connector.svg.appendChild(path); + self.attachListeners(path, connector); + self.attachListeners(path, self); + + p1_1 = _node("path"); + connector.svg.appendChild(p1_1); + self.attachListeners(p1_1, connector); + self.attachListeners(p1_1, self); + + p1_2 = _node("path"); + connector.svg.appendChild(p1_2); + self.attachListeners(p1_2, connector); + self.attachListeners(p1_2, self); + + } + + _attr(path, { + "d" : makePath(d[0], d[1]), + stroke : "red", + fill : null + }); + + _attr(p1_1, { + "d" : makePath(d[2][0], d[2][1]), + stroke : "blue", + fill : null + }); + + _attr(p1_2, { + "d" : makePath(d[3][0], d[3][1]), + stroke : "green", + fill : null + }); + }; + + var makePath = function(d1, d2) { + return "M " + d1.x + "," + d1.y + + " L" + d2.x + "," + d2.y; + }; + + }; })();/* * jsPlumb * - * Title:jsPlumb 1.3.2 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the HTML5 canvas renderers. * - * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org) + * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ ;(function() { @@ -5204,17 +7870,11 @@ about the parameters allowed in the params object. // TODO refactor to renderer common script. put a ref to jsPlumb.sizeCanvas in there too. var _connectionBeingDragged = null, - _getAttribute = function(el, attName) { return jsPlumb.CurrentLibrary.getAttribute(_getElementObject(el), attName); }, - _setAttribute = function(el, attName, attValue) { jsPlumb.CurrentLibrary.setAttribute(_getElementObject(el), attName, attValue); }, - _addClass = function(el, clazz) { jsPlumb.CurrentLibrary.addClass(_getElementObject(el), clazz); }, - _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_getElementObject(el), clazz); }, - _removeClass = function(el, clazz) { jsPlumb.CurrentLibrary.removeClass(_getElementObject(el), clazz); }, - _getElementObject = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, - _getOffset = function(el) { return jsPlumb.CurrentLibrary.getOffset(_getElementObject(el)); }, - _getSize = function(el) { return jsPlumb.CurrentLibrary.getSize(_getElementObject(el)); }, - _pageXY = function(el) { return jsPlumb.CurrentLibrary.getPageXY(el); }, - _clientXY = function(el) { return jsPlumb.CurrentLibrary.getClientXY(el); }, - _setOffset = function(el, o) { jsPlumb.CurrentLibrary.setOffset(el, o); }; + _hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_getElementObject(el), clazz); }, + _getElementObject = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); }, + _getOffset = function(el) { return jsPlumb.CurrentLibrary.getOffset(_getElementObject(el)); }, + _pageXY = function(el) { return jsPlumb.CurrentLibrary.getPageXY(el); }, + _clientXY = function(el) { return jsPlumb.CurrentLibrary.getClientXY(el); }; /* * Class:CanvasMouseAdapter @@ -5247,9 +7907,8 @@ about the parameters allowed in the params object. return false; }; - var _mouseover = false; - var _mouseDown = false, _posWhenMouseDown = null, _mouseWasDown = false; - var _nullSafeHasClass = function(el, clazz) { + var _mouseover = false, _mouseDown = false, _posWhenMouseDown = null, _mouseWasDown = false, + _nullSafeHasClass = function(el, clazz) { return el != null && _hasClass(el, clazz); }; this.mousemove = function(e) { @@ -5272,7 +7931,7 @@ about the parameters allowed in the params object. self.fire("mousemove", self, e); }; - this.click = function(e) { + this.click = function(e) { if (_mouseover && self._over(e) && !_mouseWasDown) self.fire("click", self, e); _mouseWasDown = false; @@ -5287,29 +7946,43 @@ about the parameters allowed in the params object. this.mousedown = function(e) { if(self._over(e) && !_mouseDown) { _mouseDown = true; - _posWhenMouseDown = _getOffset(_getElementObject(self.canvas)); + _posWhenMouseDown = _getOffset(_getElementObject(self.canvas)); self.fire("mousedown", self, e); } }; this.mouseup = function(e) { - //if (self == _connectionBeingDragged) _connectionBeingDragged = null; _mouseDown = false; self.fire("mouseup", self, e); - }; + }; + + this.contextmenu = function(e) { + if (_mouseover && self._over(e) && !_mouseWasDown) + self.fire("contextmenu", self, e); + _mouseWasDown = false; + }; }; var _newCanvas = function(params) { var canvas = document.createElement("canvas"); - jsPlumb.appendElement(canvas, params.parent); + params["_jsPlumb"].appendElement(canvas, params.parent); canvas.style.position = "absolute"; if (params["class"]) canvas.className = params["class"]; // set an id. if no id on the element and if uuid was supplied it // will be used, otherwise we'll create one. params["_jsPlumb"].getId(canvas, params.uuid); + if (params.tooltip) canvas.setAttribute("title", params.tooltip); return canvas; }; + + var CanvasComponent = function(params) { + CanvasMouseAdapter.apply(this, arguments); + + var displayElements = [ ]; + this.getDisplayElements = function() { return displayElements; }; + this.appendDisplayElement = function(el) { displayElements.push(el); }; + } /** * Class:CanvasConnector @@ -5317,7 +7990,7 @@ about the parameters allowed in the params object. */ var CanvasConnector = jsPlumb.CanvasConnector = function(params) { - CanvasMouseAdapter.apply(this, arguments); + CanvasComponent.apply(this, arguments); var _paintOneStyle = function(dim, aStyle) { self.ctx.save(); @@ -5337,28 +8010,20 @@ about the parameters allowed in the params object. self.canvas = _newCanvas({ "class":clazz, _jsPlumb:self._jsPlumb, - parent:params.parent + parent:params.parent, + tooltip:params.tooltip }); self.ctx = self.canvas.getContext("2d"); - var displayElements = [ self.canvas ]; - this.getDisplayElements = function() { - return displayElements; - }; - - this.appendDisplayElement = function(el) { - displayElements.push(el); - }; + self.appendDisplayElement(self.canvas); self.paint = function(dim, style) { - if (style != null) { - - jsPlumb.sizeCanvas(self.canvas, dim[0], dim[1], dim[2], dim[3]); - + if (style != null) { + jsPlumb.sizeCanvas(self.canvas, dim[0], dim[1], dim[2], dim[3]); if (style.outlineColor != null) { var outlineWidth = style.outlineWidth || 1, - outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); - var outlineStyle = { + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = { strokeStyle:style.outlineColor, lineWidth:outlineStrokeWidth }; @@ -5375,18 +8040,21 @@ about the parameters allowed in the params object. */ var CanvasEndpoint = function(params) { var self = this; - CanvasMouseAdapter.apply(this, arguments); - var clazz = self._jsPlumb.endpointClass + " " + (params.cssClass || ""); - self.canvas = _newCanvas({ + CanvasComponent.apply(this, arguments); + var clazz = self._jsPlumb.endpointClass + " " + (params.cssClass || ""), + canvasParams = { "class":clazz, _jsPlumb:self._jsPlumb, - parent:params.parent - }); + parent:params.parent, + tooltip:self.tooltip + }; + self.canvas = _newCanvas(canvasParams); self.ctx = self.canvas.getContext("2d"); + + self.appendDisplayElement(self.canvas); this.paint = function(d, style, anchor) { - jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]); - + jsPlumb.sizeCanvas(self.canvas, d[0], d[1], d[2], d[3]); if (style.outlineColor != null) { var outlineWidth = style.outlineWidth || 1, outlineStrokeWidth = style.lineWidth + (2 * outlineWidth); @@ -5394,27 +8062,24 @@ about the parameters allowed in the params object. strokeStyle:style.outlineColor, lineWidth:outlineStrokeWidth }; - // _paintOneStyle(d, outlineStyle); } self._paint.apply(this, arguments); }; }; - jsPlumb.Endpoints.canvas.Dot = function(params) { - var self = this; + jsPlumb.Endpoints.canvas.Dot = function(params) { jsPlumb.Endpoints.Dot.apply(this, arguments); CanvasEndpoint.apply(this, arguments); - var parseValue = function(value) { - try { - return parseInt(value); - } + var self = this, + parseValue = function(value) { + try { return parseInt(value); } catch(e) { if (value.substring(value.length - 1) == '%') return parseInt(value.substring(0, value - 1)); } - }; - var calculateAdjustments = function(gradient) { + }, + calculateAdjustments = function(gradient) { var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius; gradient.offset && (offsetAdjustment = parseValue(gradient.offset)); gradient.innerRadius && (innerRadius = parseValue(gradient.innerRadius)); @@ -5422,7 +8087,7 @@ about the parameters allowed in the params object. }; this._paint = function(d, style, anchor) { if (style != null) { - var ctx = self.canvas.getContext('2d'), orientation = anchor.getOrientation(); + var ctx = self.canvas.getContext('2d'), orientation = anchor.getOrientation(self); jsPlumb.extend(ctx, style); if (style.gradient) { var adjustments = calculateAdjustments(style.gradient), @@ -5450,7 +8115,7 @@ about the parameters allowed in the params object. this._paint = function(d, style, anchor) { - var ctx = self.canvas.getContext("2d"), orientation = anchor.getOrientation(); + var ctx = self.canvas.getContext("2d"), orientation = anchor.getOrientation(self); jsPlumb.extend(ctx, style); /* canvas gradient */ @@ -5482,24 +8147,21 @@ about the parameters allowed in the params object. this._paint = function(d, style, anchor) { - var width = d[2], height = d[3], x = d[0], y = d[1]; + var width = d[2], height = d[3], x = d[0], y = d[1], + ctx = self.canvas.getContext('2d'), + offsetX = 0, offsetY = 0, angle = 0, + orientation = anchor.getOrientation(self); - var ctx = self.canvas.getContext('2d'); - var offsetX = 0, offsetY = 0, angle = 0; - - if( orientation[0] == 1 ) - { + if( orientation[0] == 1 ) { offsetX = width; offsetY = height; angle = 180; } - if( orientation[1] == -1 ) - { + if( orientation[1] == -1 ) { offsetX = width; angle = 90; } - if( orientation[1] == 1 ) - { + if( orientation[1] == 1 ) { offsetY = height; angle = -90; } @@ -5641,19 +8303,20 @@ about the parameters allowed in the params object. })();/* * jsPlumb * - * Title:jsPlumb 1.3.2 + * Title:jsPlumb 1.3.7 * * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas * elements, or VML. * * This file contains the jQuery adapter. * - * Copyright (c) 2010 - 2011 Simon Porritt (http://jsplumb.org) + * Copyright (c) 2010 - 2012 Simon Porritt (http://jsplumb.org) * * http://jsplumb.org + * http://github.com/sporritt/jsplumb * http://code.google.com/p/jsplumb * - * Triple licensed under the MIT, GPL2 and Beer licenses. + * Dual licensed under the MIT and GPL2 licenses. */ /* * the library specific functions, such as find offset, get id, get attribute, extend etc. @@ -5688,17 +8351,28 @@ about the parameters allowed in the params object. * setDraggable sets whether or not some element should be draggable. * setDragScope sets the drag scope for a given element. * setOffset sets the offset of some element. + * trigger triggers some event on an element. + * unbind unbinds some listener from some element. */ (function($) { //var getBoundingClientRectSupported = "getBoundingClientRect" in document.documentElement; - + jsPlumb.CurrentLibrary = { /** * adds the given class to the element object. */ addClass : function(el, clazz) { + el = jsPlumb.CurrentLibrary.getElementObject(el); + try { + if (el[0].className.constructor == SVGAnimatedString) { + jsPlumb.util.svg.addClass(el[0], clazz); + } + } + catch (e) { + // SVGAnimatedString not supported; no problem. + } el.addClass(clazz); }, @@ -5765,10 +8439,25 @@ about the parameters allowed in the params object. getDragScope : function(el) { return el.draggable("option", "scope"); }, + + getDropEvent : function(args) { + return args[0]; + }, getDropScope : function(el) { return el.droppable("option", "scope"); }, + + /** + * gets a DOM element from the given input, which might be a string (in which case we just do document.getElementById), + * a selector (in which case we return el[0]), or a DOM element already (we assume this if it's not either of the other + * two cases). this is the opposite of getElementObject below. + */ + getDOMElement : function(el) { + if (typeof(el) == "string") return document.getElementById(el); + else if (el.context) return el[0]; + else return el; + }, /** * gets an "element object" from the given input. this means an object that is used by the @@ -5778,7 +8467,7 @@ about the parameters allowed in the params object. * */ getElementObject : function(el) { - return typeof(el)=='string' ? $("#" + el) : $(el); + return typeof(el) == "string" ? $("#" + el) : $(el); }, /** @@ -5806,12 +8495,21 @@ about the parameters allowed in the params object. return el.scrollTop(); }, + getSelector : function(spec) { + return $(spec); + }, + /** * gets the size for the element object, in an array : [ width, height ]. */ getSize : function(el) { return [el.outerWidth(), el.outerHeight()]; }, + + getTagName : function(el) { + var e = jsPlumb.CurrentLibrary.getElementObject(el); + return e.length > 0 ? e[0].tagName : null; + }, /** * takes the args passed to an event function and returns you an object that gives the @@ -5827,14 +8525,19 @@ about the parameters allowed in the params object. // in the wrong offset if the element has a margin (it doesn't take the margin into account). the getBoundingClientRect // method, which is in pretty much all browsers now, reports the right numbers. but it introduces a noticeable lag, which // i don't like. - + /*if ( getBoundingClientRectSupported ) { var r = eventArgs[1].helper[0].getBoundingClientRect(); return { left : r.left, top: r.top }; } else {*/ + if (eventArgs.length == 1) { + ret = { left: eventArgs[0].pageX, top:eventArgs[0].pageY }; + } + else { var ui = eventArgs[1], _offset = ui.offset; - return _offset || ui.absolutePosition; - //} + ret = _offset || ui.absolutePosition; + } + return ret; }, hasClass : function(el, clazz) { @@ -5845,6 +8548,7 @@ about the parameters allowed in the params object. * initialises the given element to be draggable. */ initDraggable : function(el, options) { + options = options || {}; // remove helper directive if present. options.helper = null; options['scope'] = options['scope'] || jsPlumb.Defaults.Scope; @@ -5882,6 +8586,15 @@ about the parameters allowed in the params object. * removes the given class from the element object. */ removeClass : function(el, clazz) { + el = jsPlumb.CurrentLibrary.getElementObject(el); + try { + if (el[0].className.constructor == SVGAnimatedString) { + jsPlumb.util.svg.removeClass(el[0], clazz); + } + } + catch (e) { + // SVGAnimatedString not supported; no problem. + } el.removeClass(clazz); }, @@ -5914,16 +8627,42 @@ about the parameters allowed in the params object. setOffset : function(el, o) { jsPlumb.CurrentLibrary.getElementObject(el).offset(o); + }, + + /** + * note that jquery ignores the name of the event you wanted to trigger, and figures it out for itself. + * the other libraries do not. yui, in fact, cannot even pass an original event. we have to pull out stuff + * from the originalEvent to put in an options object for YUI. + * @param el + * @param event + * @param originalEvent + */ + trigger : function(el, event, originalEvent) { + //originalEvent.stopPropagation(); + //jsPlumb.CurrentLibrary.getElementObject(el).trigger(originalEvent); + var h = jQuery._data(jsPlumb.CurrentLibrary.getElementObject(el)[0], "handle"); + h(originalEvent); + //originalEvent.stopPropagation(); + }, + + /** + * event unbinding wrapper. it just so happens that jQuery uses 'unbind' also. yui3, for example, + * uses..something else. + */ + unbind : function(el, event, callback) { + el = jsPlumb.CurrentLibrary.getElementObject(el); + el.unbind(event, callback); } }; $(document).ready(jsPlumb.init); })(jQuery); -(function(){if(typeof Math.sgn=="undefined")Math.sgn=function(a){return a==0?0:a>0?1:-1};var p={subtract:function(a,b){return{x:a.x-b.x,y:a.y-b.y}},dotProduct:function(a,b){return a.x*b.x+a.y*b.y},square:function(a){return Math.sqrt(a.x*a.x+a.y*a.y)},scale:function(a,b){return{x:a.x*b,y:a.y*b}}},y=Math.pow(2,-65),u=function(a,b){for(var g=[],d=b.length-1,h=2*d-1,f=[],c=[],l=[],k=[],i=[[1,0.6,0.3,0.1],[0.4,0.6,0.6,0.4],[0.1,0.3,0.6,1]],e=0;e<=d;e++)f[e]=p.subtract(b[e],a);for(e=0;e<=d-1;e++){c[e]= -p.subtract(b[e+1],b[e]);c[e]=p.scale(c[e],3)}for(e=0;e<=d-1;e++)for(var m=0;m<=d;m++){l[e]||(l[e]=[]);l[e][m]=p.dotProduct(c[e],f[m])}for(e=0;e<=h;e++){k[e]||(k[e]=[]);k[e].y=0;k[e].x=parseFloat(e)/h}h=d-1;for(f=0;f<=d+h;f++){c=Math.min(f,d);for(e=Math.max(0,f-h);e<=c;e++){j=f-e;k[e+j].y+=l[j][e]*i[j][e]}}d=b.length-1;k=s(k,2*d-1,g,0);h=p.subtract(a,b[0]);l=p.square(h);for(e=i=0;e=64){g[0]=(a[0].x+a[b].x)/2;return 1}var n,o,q;k=a[0].y-a[b].y;i=a[b].x-a[0].x;e=a[0].x*a[b].y-a[b].x*a[0].y;m=max_distance_below=0;for(o=1;om)m=q;else if(q0?1:-1,c=null;hn?n=l:lb.location)b.location=0;return t(a,b.location)},nearestPointOnCurve:function(a,b){var f=u(a,b);return{point:r(b,b.length-1,f.location,null,null),location:f.location}},pointOnCurve:p,pointAlongCurveFrom:function(a,b,f){return s(a,b,f).point},perpendicularToCurveAt:function(a,b,f,d){b=s(a,b,null==d?0:d);a=t(a,b.location);d=Math.atan(-1/a);a=f/2*Math.sin(d);f=f/2*Math.cos(d);return[{x:b.point.x+f,y:b.point.y+a},{x:b.point.x-f,y:b.point.y-a}]}}})(); \ No newline at end of file