X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=portal%2Fstatic%2Funbound_reservation_static%2Fsrc%2Frenderers-vml.js;fp=portal%2Fstatic%2Funbound_reservation_static%2Fsrc%2Frenderers-vml.js;h=5a9d4145be33dbe2647feab3e5aa1db195d884ac;hb=729a9dbb380b51a217194ba2a4e5978186fe50b0;hp=0000000000000000000000000000000000000000;hpb=c4bd5da6e2630eddf1262aa8d808dbb48b097d53;p=myslice.git diff --git a/portal/static/unbound_reservation_static/src/renderers-vml.js b/portal/static/unbound_reservation_static/src/renderers-vml.js new file mode 100644 index 00000000..5a9d4145 --- /dev/null +++ b/portal/static/unbound_reservation_static/src/renderers-vml.js @@ -0,0 +1,529 @@ +/* + * jsPlumb + * + * Title:jsPlumb 1.5.5 + * + * 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 - 2013 Simon Porritt (http://jsplumb.org) + * + * http://jsplumb.org + * http://github.com/sporritt/jsplumb + * http://code.google.com/p/jsplumb + * + * Dual licensed under the MIT and GPL2 licenses. + */ + +;(function() { + + // http://ajaxian.com/archives/the-vml-changes-in-ie-8 + // http://www.nczonline.net/blog/2010/01/19/internet-explorer-8-document-and-browser-modes/ + // http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/ + + var vmlAttributeMap = { + "stroke-linejoin":"joinstyle", + "joinstyle":"joinstyle", + "endcap":"endcap", + "miterlimit":"miterlimit" + }, + jsPlumbStylesheet = null; + + if (document.createStyleSheet && document.namespaces) { + + var ruleClasses = [ + ".jsplumb_vml", "jsplumb\\:textbox", "jsplumb\\:oval", "jsplumb\\:rect", + "jsplumb\\:stroke", "jsplumb\\:shape", "jsplumb\\:group" + ], + rule = "behavior:url(#default#VML);position:absolute;"; + + jsPlumbStylesheet = document.createStyleSheet(); + + for (var i = 0; i < ruleClasses.length; i++) + jsPlumbStylesheet.addRule(ruleClasses[i], rule); + + // 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/ + // but someone commented saying they didn't need it, and it seems jsPlumb doesnt need it either. + // var iev = document.documentMode; + //if (!iev || iev < 8) + document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml"); + //else + // 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. + //jsPlumb.CurrentLibrary.getDOMElement(container).appendChild(g); + //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]); + + /*There is an additional problem when accessing VML elements by using get/setAttribute. The simple solution is following: + + if (document.documentMode==8) { + ele.opacity=1; + } else { + ele.setAttribute(‘opacity’,1); + } + */ + + o[i] = atts[i]; + } + }, + _node = function(name, d, atts, parent, _jsPlumb, deferToJsPlumbContainer) { + atts = atts || {}; + var o = document.createElement("jsplumb:" + name); + if (deferToJsPlumbContainer) + _jsPlumb.appendElement(o, parent); + else + jsPlumb.CurrentLibrary.appendElement(o, parent); + o.className = (atts["class"] ? atts["class"] + " " : "") + "jsplumb_vml"; + _pos(o, d); + _atts(o, atts); + return o; + }, + _pos = function(o,d, zIndex) { + o.style.left = d[0] + "px"; + o.style.top = d[1] + "px"; + o.style.width= d[2] + "px"; + o.style.height= d[3] + "px"; + o.style.position = "absolute"; + if (zIndex) + o.style.zIndex = zIndex; + }, + _conv = jsPlumb.vml.convertValue = function(v) { + return Math.floor(v * scale); + }, + // 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, _jsPlumb) { + var styleToWrite = {}; + if (style.strokeStyle) { + styleToWrite.stroked = "true"; + var strokeColor = jsPlumbUtil.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"; + var fillColor = jsPlumbUtil.convertStyle(style.fillStyle, true); + styleToWrite.fillcolor = fillColor; + _maybeSetOpacity(styleToWrite, fillColor, "fill", component); + } + else styleToWrite.filled = "false"; + + if(style.dashstyle) { + if (component.strokeNode == null) { + component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:style.dashstyle }, node, _jsPlumb); + } + else + component.strokeNode.dashstyle = style.dashstyle; + } + else if (style["stroke-dasharray"] && style.lineWidth) { + var sep = style["stroke-dasharray"].indexOf(",") == -1 ? " " : ",", + parts = style["stroke-dasharray"].split(sep), + styleToUse = ""; + for(var i = 0; i < parts.length; i++) { + styleToUse += (Math.floor(parts[i] / style.lineWidth) + sep); + } + if (component.strokeNode == null) { + component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:styleToUse }, node, _jsPlumb); + } + else + component.strokeNode.dashstyle = styleToUse; + } + + _atts(node, styleToWrite); + }, + /* + * Base class for Vml endpoints and connectors. Extends jsPlumbUIComponent. + */ + VmlComponent = function() { + var self = this, renderer = {}; + 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"}, vml, self._jsPlumb.instance); + self.opacityNodes.fill = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb.instance); + }; + 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); + }; + }; + jsPlumbUtil.extend(VmlComponent, jsPlumb.jsPlumbUIComponent, { + cleanup:function() { + if (this.bgCanvas) jsPlumbUtil.removeElement(this.bgCanvas); + jsPlumbUtil.removeElement(this.canvas); + } + }); + + /* + * Base class for Vml connectors. extends VmlComponent. + */ + var VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) { + this.strokeNode = null; + this.canvas = null; + VmlComponent.apply(this, arguments); + var clazz = this._jsPlumb.instance.connectorClass + (params.cssClass ? (" " + params.cssClass) : ""); + this.paint = function(style) { + if (style !== null) { + + // we need to be at least 1 pixel in each direction, because otherwise coordsize gets set to + // 0 and overlays cannot paint. + this.w = Math.max(this.w, 1); + this.h = Math.max(this.h, 1); + + var segments = this.getSegments(), p = { "path":"" }, + d = [this.x, this.y, this.w, this.h]; + + // create path from segments. + for (var i = 0; i < segments.length; i++) { + p.path += jsPlumb.Segments.vml.SegmentRenderer.getPath(segments[i]); + p.path += " "; + } + + //* + if (style.outlineColor) { + var outlineWidth = style.outlineWidth || 1, + outlineStrokeWidth = style.lineWidth + (2 * outlineWidth), + outlineStyle = { + strokeStyle : jsPlumbUtil.convertStyle(style.outlineColor), + lineWidth : outlineStrokeWidth + }; + for (var aa in vmlAttributeMap) outlineStyle[aa] = style[aa]; + + if (this.bgCanvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.bgCanvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); + _pos(this.bgCanvas, d); + this.appendDisplayElement(this.bgCanvas, true); + this.attachListeners(this.bgCanvas, this); + this.initOpacityNodes(this.bgCanvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.bgCanvas, d); + _atts(this.bgCanvas, p); + } + + _applyStyles(this.bgCanvas, outlineStyle, this); + } + //*/ + + if (this.canvas == null) { + p["class"] = clazz; + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + this.canvas = _node("shape", d, p, params.parent, this._jsPlumb.instance, true); + //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 + + this.appendDisplayElement(this.canvas, true); + this.attachListeners(this.canvas, this); + this.initOpacityNodes(this.canvas, ["stroke"]); + } + else { + p.coordsize = (d[2] * scale) + "," + (d[3] * scale); + _pos(this.canvas, d); + _atts(this.canvas, p); + } + + _applyStyles(this.canvas, style, this, this._jsPlumb.instance); + } + }; + + }; + jsPlumbUtil.extend(VmlConnector, VmlComponent, { + reattachListeners : function() { + if (this.canvas) this.reattachListenersForElement(this.canvas, this); + }, + setVisible:function(v) { + if (this.canvas) { + this.canvas.style.display = v ? "block" : "none"; + } + if (this.bgCanvas) { + this.bgCanvas.style.display = v ? "block" : "none"; + } + } + }); + + /* + * + * Base class for Vml Endpoints. extends VmlComponent. + * + */ + var VmlEndpoint = window.VmlEndpoint = function(params) { + VmlComponent.apply(this, arguments); + this._jsPlumb.vml = null;//, opacityStrokeNode = null, opacityFillNode = null; + this.canvas = document.createElement("div"); + this.canvas.style.position = "absolute"; + this._jsPlumb.clazz = this._jsPlumb.instance.endpointClass + (params.cssClass ? (" " + params.cssClass) : ""); + + // TODO vml endpoint adds class to VML at constructor time. but the addClass method adds VML + // to the enclosing DIV. what to do? seems like it would be better to just target the div. + // HOWEVER...vml connection has no containing div. why not? it feels like it should. + + //var group = _getGroup(params.parent); + //group.appendChild(self.canvas); + params._jsPlumb.appendElement(this.canvas, params.parent); + + this.paint = function(style, anchor) { + var p = { }, vml = this._jsPlumb.vml; + + jsPlumbUtil.sizeElement(this.canvas, this.x, this.y, this.w, this.h); + if (this._jsPlumb.vml == null) { + p["class"] = this._jsPlumb.clazz; + vml = this._jsPlumb.vml = this.getVml([0,0, this.w, this.h], p, anchor, this.canvas, this._jsPlumb.instance); + this.attachListeners(vml, this); + + this.appendDisplayElement(vml, true); + this.appendDisplayElement(this.canvas, true); + + this.initOpacityNodes(vml, ["fill"]); + } + else { + _pos(vml, [0,0, this.w, this.h]); + _atts(vml, p); + } + + _applyStyles(vml, style, this); + }; + }; + jsPlumbUtil.extend(VmlEndpoint, VmlComponent, { + reattachListeners : function() { + if (this._jsPlumb.vml) this.reattachListenersForElement(this._jsPlumb.vml, this); + } + }); + +// ******************************* vml segments ***************************************************** + + jsPlumb.Segments.vml = { + SegmentRenderer : { + getPath : function(segment) { + return ({ + "Straight":function(segment) { + var d = segment.params; + return "m" + _conv(d.x1) + "," + _conv(d.y1) + " l" + _conv(d.x2) + "," + _conv(d.y2) + " e"; + }, + "Bezier":function(segment) { + var d = segment.params; + return "m" + _conv(d.x1) + "," + _conv(d.y1) + + " c" + _conv(d.cp1x) + "," + _conv(d.cp1y) + "," + _conv(d.cp2x) + "," + _conv(d.cp2y) + "," + _conv(d.x2) + "," + _conv(d.y2) + " e"; + }, + "Arc":function(segment) { + var d = segment.params, + xmin = Math.min(d.x1, d.x2), + xmax = Math.max(d.x1, d.x2), + ymin = Math.min(d.y1, d.y2), + ymax = Math.max(d.y1, d.y2), + sf = segment.anticlockwise ? 1 : 0, + pathType = (segment.anticlockwise ? "at " : "wa "), + makePosString = function() { + if (d.loopback) + return "0,0," + _conv(2*d.r) + "," + _conv(2 * d.r); + + var xy = [ + null, + [ function() { return [xmin, ymin ];}, function() { return [xmin - d.r, ymin - d.r ];}], + [ function() { return [xmin - d.r, ymin ];}, function() { return [xmin, ymin - d.r ];}], + [ function() { return [xmin - d.r, ymin - d.r ];}, function() { return [xmin, ymin ];}], + [ function() { return [xmin, ymin - d.r ];}, function() { return [xmin - d.r, ymin ];}] + ][segment.segment][sf](); + + return _conv(xy[0]) + "," + _conv(xy[1]) + "," + _conv(xy[0] + (2*d.r)) + "," + _conv(xy[1] + (2*d.r)); + }; + + return pathType + " " + makePosString() + "," + _conv(d.x1) + "," + _conv(d.y1) + "," + _conv(d.x2) + "," + _conv(d.y2) + " e"; + } + + })[segment.type](segment); + } + } + }; + +// ******************************* /vml segments ***************************************************** + +// ******************************* vml endpoints ***************************************************** + + jsPlumb.Endpoints.vml.Dot = function() { + jsPlumb.Endpoints.Dot.apply(this, arguments); + VmlEndpoint.apply(this, arguments); + this.getVml = function(d, atts, anchor, parent, _jsPlumb) { return _node("oval", d, atts, parent, _jsPlumb); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Dot, VmlEndpoint); + + jsPlumb.Endpoints.vml.Rectangle = function() { + jsPlumb.Endpoints.Rectangle.apply(this, arguments); + VmlEndpoint.apply(this, arguments); + this.getVml = function(d, atts, anchor, parent, _jsPlumb) { return _node("rect", d, atts, parent, _jsPlumb); }; + }; + jsPlumbUtil.extend(jsPlumb.Endpoints.vml.Rectangle, VmlEndpoint); + + /* + * VML Image Endpoint is the same as the default image endpoint. + */ + jsPlumb.Endpoints.vml.Image = jsPlumb.Endpoints.Image; + + /** + * placeholder for Blank endpoint in vml renderer. + */ + jsPlumb.Endpoints.vml.Blank = jsPlumb.Endpoints.Blank; + +// ******************************* /vml endpoints ***************************************************** + +// ******************************* vml overlays ***************************************************** + + /** + * VML Label renderer. uses the default label renderer (which adds an element to the DOM) + */ + jsPlumb.Overlays.vml.Label = jsPlumb.Overlays.Label; + + /** + * VML Custom renderer. uses the default Custom renderer (which adds an element to the DOM) + */ + jsPlumb.Overlays.vml.Custom = jsPlumb.Overlays.Custom; + + /** + * Abstract VML arrow superclass + */ + var AbstractVmlArrowOverlay = function(superclass, originalArgs) { + superclass.apply(this, originalArgs); + VmlComponent.apply(this, originalArgs); + var self = this, path = null; + self.canvas = null; + self.isAppendedAtTopLevel = true; + var getPath = function(d) { + return "m " + _conv(d.hxy.x) + "," + _conv(d.hxy.y) + + " l " + _conv(d.tail[0].x) + "," + _conv(d.tail[0].y) + + " " + _conv(d.cxy.x) + "," + _conv(d.cxy.y) + + " " + _conv(d.tail[1].x) + "," + _conv(d.tail[1].y) + + " x e"; + }; + this.paint = function(params, containerExtents) { + // only draws for connectors, not endpoints. + if (params.component.canvas && containerExtents) { + var p = {}, d = params.d, connector = params.component; + if (params.strokeStyle) { + p.stroked = "true"; + p.strokecolor = jsPlumbUtil.convertStyle(params.strokeStyle, true); + } + if (params.lineWidth) p.strokeweight = params.lineWidth + "px"; + if (params.fillStyle) { + p.filled = "true"; + p.fillcolor = params.fillStyle; + } + + var xmin = Math.min(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x), + ymin = Math.min(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y), + xmax = Math.max(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x), + ymax = Math.max(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y), + w = Math.abs(xmax - xmin), + h = Math.abs(ymax - ymin), + dim = [xmin, ymin, w, h]; + + // for VML, we create overlays using shapes that have the same dimensions and + // coordsize as their connector - overlays calculate themselves relative to the + // connector (it's how it's been done since the original canvas implementation, because + // for canvas that makes sense). + p.path = getPath(d); + p.coordsize = (connector.w * scale) + "," + (connector.h * scale); + + dim[0] = connector.x; + dim[1] = connector.y; + dim[2] = connector.w; + dim[3] = connector.h; + + if (self.canvas == null) { + var overlayClass = connector._jsPlumb.overlayClass || ""; + var clazz = originalArgs && (originalArgs.length == 1) ? (originalArgs[0].cssClass || "") : ""; + p["class"] = clazz + " " + overlayClass; + self.canvas = _node("shape", dim, p, connector.canvas.parentNode, connector._jsPlumb.instance, true); + connector.appendDisplayElement(self.canvas, true); + self.attachListeners(self.canvas, connector); + self.attachListeners(self.canvas, self); + } + else { + _pos(self.canvas, dim); + _atts(self.canvas, p); + } + } + }; + + this.reattachListeners = function() { + if (self.canvas) self.reattachListenersForElement(self.canvas, self); + }; + + this.cleanup = function() { + if (self.canvas != null) jsPlumb.CurrentLibrary.removeElement(self.canvas); + }; + }; + jsPlumbUtil.extend(AbstractVmlArrowOverlay, [VmlComponent, jsPlumb.Overlays.AbstractOverlay], { + setVisible : function(state) { + this.canvas.style.display = state ? "block" : "none"; + } + }); + + jsPlumb.Overlays.vml.Arrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Arrow, [ jsPlumb.Overlays.Arrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.PlainArrow = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.PlainArrow, [ jsPlumb.Overlays.PlainArrow, AbstractVmlArrowOverlay ]); + + jsPlumb.Overlays.vml.Diamond = function() { + AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]); + }; + jsPlumbUtil.extend(jsPlumb.Overlays.vml.Diamond, [ jsPlumb.Overlays.Diamond, AbstractVmlArrowOverlay ]); + +// ******************************* /vml overlays ***************************************************** + +})(); \ No newline at end of file