cytoscape-svg
Advanced tools
Comparing version 0.2.0 to 0.3.0
1473
cytoscape-svg.js
@@ -1,1472 +0,1 @@ | ||
(function webpackUniversalModuleDefinition(root, factory) { | ||
if(typeof exports === 'object' && typeof module === 'object') | ||
module.exports = factory(); | ||
else if(typeof define === 'function' && define.amd) | ||
define([], factory); | ||
else if(typeof exports === 'object') | ||
exports["cytoscapeSvg"] = factory(); | ||
else | ||
root["cytoscapeSvg"] = factory(); | ||
})(this, function() { | ||
return /******/ (function(modules) { // webpackBootstrap | ||
/******/ // The module cache | ||
/******/ var installedModules = {}; | ||
/******/ | ||
/******/ // The require function | ||
/******/ function __webpack_require__(moduleId) { | ||
/******/ | ||
/******/ // Check if module is in cache | ||
/******/ if(installedModules[moduleId]) { | ||
/******/ return installedModules[moduleId].exports; | ||
/******/ } | ||
/******/ // Create a new module (and put it into the cache) | ||
/******/ var module = installedModules[moduleId] = { | ||
/******/ i: moduleId, | ||
/******/ l: false, | ||
/******/ exports: {} | ||
/******/ }; | ||
/******/ | ||
/******/ // Execute the module function | ||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); | ||
/******/ | ||
/******/ // Flag the module as loaded | ||
/******/ module.l = true; | ||
/******/ | ||
/******/ // Return the exports of the module | ||
/******/ return module.exports; | ||
/******/ } | ||
/******/ | ||
/******/ | ||
/******/ // expose the modules object (__webpack_modules__) | ||
/******/ __webpack_require__.m = modules; | ||
/******/ | ||
/******/ // expose the module cache | ||
/******/ __webpack_require__.c = installedModules; | ||
/******/ | ||
/******/ // identity function for calling harmony imports with the correct context | ||
/******/ __webpack_require__.i = function(value) { return value; }; | ||
/******/ | ||
/******/ // define getter function for harmony exports | ||
/******/ __webpack_require__.d = function(exports, name, getter) { | ||
/******/ if(!__webpack_require__.o(exports, name)) { | ||
/******/ Object.defineProperty(exports, name, { | ||
/******/ configurable: false, | ||
/******/ enumerable: true, | ||
/******/ get: getter | ||
/******/ }); | ||
/******/ } | ||
/******/ }; | ||
/******/ | ||
/******/ // getDefaultExport function for compatibility with non-harmony modules | ||
/******/ __webpack_require__.n = function(module) { | ||
/******/ var getter = module && module.__esModule ? | ||
/******/ function getDefault() { return module['default']; } : | ||
/******/ function getModuleExports() { return module; }; | ||
/******/ __webpack_require__.d(getter, 'a', getter); | ||
/******/ return getter; | ||
/******/ }; | ||
/******/ | ||
/******/ // Object.prototype.hasOwnProperty.call | ||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; | ||
/******/ | ||
/******/ // __webpack_public_path__ | ||
/******/ __webpack_require__.p = ""; | ||
/******/ | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(__webpack_require__.s = 1); | ||
/******/ }) | ||
/************************************************************************/ | ||
/******/ ([ | ||
/* 0 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
/** | ||
* Most of the code is taken from https://github.com/iVis-at-Bilkent/cytoscape.js | ||
* and adapted | ||
*/ | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
var C2S = __webpack_require__(2); | ||
var CRp = {}; | ||
var is = {}; | ||
is.number = function (obj) { | ||
return obj != null && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === _typeof(1) && !isNaN(obj); | ||
}; | ||
CRp.bufferCanvasImage = function (options, cy) { | ||
//disable usePaths temporarily | ||
var usePaths = cy.renderer().usePaths; | ||
cy.renderer().usePaths = function () { | ||
return false; | ||
}; | ||
// flush path cache | ||
cy.elements().forEach(function (ele) { | ||
ele._private.rscratch.pathCacheKey = null; | ||
ele._private.rscratch.pathCache = null; | ||
}); | ||
var renderer = cy.renderer(); | ||
var eles = cy.mutableElements(); | ||
var bb = eles.boundingBox(); | ||
var ctrRect = renderer.findContainerClientCoords(); | ||
var width = options.full ? Math.ceil(bb.w) : ctrRect[2]; | ||
var height = options.full ? Math.ceil(bb.h) : ctrRect[3]; | ||
var specdMaxDims = is.number(options.maxWidth) || is.number(options.maxHeight); | ||
var pxRatio = renderer.getPixelRatio(); | ||
var scale = 1; | ||
if (options.scale !== undefined) { | ||
width *= options.scale; | ||
height *= options.scale; | ||
scale = options.scale; | ||
} else if (specdMaxDims) { | ||
var maxScaleW = Infinity; | ||
var maxScaleH = Infinity; | ||
if (is.number(options.maxWidth)) { | ||
maxScaleW = scale * options.maxWidth / width; | ||
} | ||
if (is.number(options.maxHeight)) { | ||
maxScaleH = scale * options.maxHeight / height; | ||
} | ||
scale = Math.min(maxScaleW, maxScaleH); | ||
width *= scale; | ||
height *= scale; | ||
} | ||
if (!specdMaxDims) { | ||
width *= pxRatio; | ||
height *= pxRatio; | ||
scale *= pxRatio; | ||
} | ||
var buffCxt = null; | ||
var buffCanvas = buffCxt = new C2S(width, height); | ||
// Rasterize the layers, but only if container has nonzero size | ||
if (width > 0 && height > 0) { | ||
buffCxt.clearRect(0, 0, width, height); | ||
buffCxt.globalCompositeOperation = 'source-over'; | ||
var zsortedEles = renderer.getCachedZSortedEles(); | ||
if (options.full) { | ||
// draw the full bounds of the graph | ||
buffCxt.translate(-bb.x1 * scale, -bb.y1 * scale); | ||
buffCxt.scale(scale, scale); | ||
renderer.drawElements(buffCxt, zsortedEles); | ||
buffCxt.scale(1 / scale, 1 / scale); | ||
buffCxt.translate(bb.x1 * scale, bb.y1 * scale); | ||
} else { | ||
// draw the current view | ||
var pan = cy.pan(); | ||
var translation = { | ||
x: pan.x * scale, | ||
y: pan.y * scale | ||
}; | ||
scale *= cy.zoom(); | ||
buffCxt.translate(translation.x, translation.y); | ||
buffCxt.scale(scale, scale); | ||
renderer.drawElements(buffCxt, zsortedEles); | ||
buffCxt.scale(1 / scale, 1 / scale); | ||
buffCxt.translate(-translation.x, -translation.y); | ||
} | ||
// need to fill bg at end like this in order to fill cleared transparent pixels in jpgs | ||
if (options.bg) { | ||
buffCxt.globalCompositeOperation = 'destination-over'; | ||
buffCxt.fillStyle = options.bg; | ||
buffCxt.rect(0, 0, width, height); | ||
buffCxt.fill(); | ||
} | ||
} | ||
// restore usePaths to default value | ||
cy.renderer().usePaths = usePaths; | ||
return buffCanvas; | ||
}; | ||
function output(canvas) { | ||
return canvas.getSerializedSvg(); | ||
} | ||
CRp.svg = function (options) { | ||
return output(CRp.bufferCanvasImage(options || {}, this)); | ||
}; | ||
module.exports = CRp; | ||
/***/ }), | ||
/* 1 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
var impl = __webpack_require__(0); | ||
// registers the extension on a cytoscape lib ref | ||
var register = function register(cytoscape) { | ||
if (!cytoscape) { | ||
return; | ||
} // can't register if cytoscape unspecified | ||
cytoscape('core', 'svg', impl.svg); // register with cytoscape.js | ||
}; | ||
if (typeof cytoscape !== 'undefined') { | ||
// expose to global cytoscape (i.e. window.cytoscape) | ||
register(cytoscape); | ||
} | ||
module.exports = register; | ||
/***/ }), | ||
/* 2 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
/*!! | ||
* Canvas 2 Svg v1.0.19 | ||
* A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document. | ||
* | ||
* Licensed under the MIT license: | ||
* http://www.opensource.org/licenses/mit-license.php | ||
* | ||
* Author: | ||
* Kerry Liu | ||
* | ||
* Copyright (c) 2014 Gliffy Inc. | ||
*/ | ||
;(function () { | ||
"use strict"; | ||
var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities; | ||
//helper function to format a string | ||
function format(str, args) { | ||
var keys = Object.keys(args), i; | ||
for (i=0; i<keys.length; i++) { | ||
str = str.replace(new RegExp("\\{" + keys[i] + "\\}", "gi"), args[keys[i]]); | ||
} | ||
return str; | ||
} | ||
//helper function that generates a random string | ||
function randomString(holder) { | ||
var chars, randomstring, i; | ||
if (!holder) { | ||
throw new Error("cannot create a random attribute name for an undefined object"); | ||
} | ||
chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; | ||
randomstring = ""; | ||
do { | ||
randomstring = ""; | ||
for (i = 0; i < 12; i++) { | ||
randomstring += chars[Math.floor(Math.random() * chars.length)]; | ||
} | ||
} while (holder[randomstring]); | ||
return randomstring; | ||
} | ||
//helper function to map named to numbered entities | ||
function createNamedToNumberedLookup(items, radix) { | ||
var i, entity, lookup = {}, base10, base16; | ||
items = items.split(','); | ||
radix = radix || 10; | ||
// Map from named to numbered entities. | ||
for (i = 0; i < items.length; i += 2) { | ||
entity = '&' + items[i + 1] + ';'; | ||
base10 = parseInt(items[i], radix); | ||
lookup[entity] = '&#'+base10+';'; | ||
} | ||
//FF and IE need to create a regex from hex values ie == \xa0 | ||
lookup["\\xa0"] = ' '; | ||
return lookup; | ||
} | ||
//helper function to map canvas-textAlign to svg-textAnchor | ||
function getTextAnchor(textAlign) { | ||
//TODO: support rtl languages | ||
var mapping = {"left":"start", "right":"end", "center":"middle", "start":"start", "end":"end"}; | ||
return mapping[textAlign] || mapping.start; | ||
} | ||
//helper function to map canvas-textBaseline to svg-dominantBaseline | ||
function getDominantBaseline(textBaseline) { | ||
//INFO: not supported in all browsers | ||
var mapping = {"alphabetic": "alphabetic", "hanging": "hanging", "top":"text-before-edge", "bottom":"text-after-edge", "middle":"central"}; | ||
return mapping[textBaseline] || mapping.alphabetic; | ||
} | ||
// Unpack entities lookup where the numbers are in radix 32 to reduce the size | ||
// entity mapping courtesy of tinymce | ||
namedEntities = createNamedToNumberedLookup( | ||
'50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' + | ||
'5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' + | ||
'5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' + | ||
'5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' + | ||
'68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' + | ||
'6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' + | ||
'6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' + | ||
'75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' + | ||
'7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' + | ||
'7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' + | ||
'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' + | ||
'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' + | ||
't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' + | ||
'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' + | ||
'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' + | ||
'81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' + | ||
'8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' + | ||
'8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' + | ||
'8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' + | ||
'8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' + | ||
'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' + | ||
'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' + | ||
'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' + | ||
'80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' + | ||
'811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32); | ||
//Some basic mappings for attributes and default values. | ||
STYLES = { | ||
"strokeStyle":{ | ||
svgAttr : "stroke", //corresponding svg attribute | ||
canvas : "#000000", //canvas default | ||
svg : "none", //svg default | ||
apply : "stroke" //apply on stroke() or fill() | ||
}, | ||
"fillStyle":{ | ||
svgAttr : "fill", | ||
canvas : "#000000", | ||
svg : null, //svg default is black, but we need to special case this to handle canvas stroke without fill | ||
apply : "fill" | ||
}, | ||
"lineCap":{ | ||
svgAttr : "stroke-linecap", | ||
canvas : "butt", | ||
svg : "butt", | ||
apply : "stroke" | ||
}, | ||
"lineJoin":{ | ||
svgAttr : "stroke-linejoin", | ||
canvas : "miter", | ||
svg : "miter", | ||
apply : "stroke" | ||
}, | ||
"miterLimit":{ | ||
svgAttr : "stroke-miterlimit", | ||
canvas : 10, | ||
svg : 4, | ||
apply : "stroke" | ||
}, | ||
"lineWidth":{ | ||
svgAttr : "stroke-width", | ||
canvas : 1, | ||
svg : 1, | ||
apply : "stroke" | ||
}, | ||
"globalAlpha": { | ||
svgAttr : "opacity", | ||
canvas : 1, | ||
svg : 1, | ||
apply : "fill stroke" | ||
}, | ||
"font":{ | ||
//font converts to multiple svg attributes, there is custom logic for this | ||
canvas : "10px sans-serif" | ||
}, | ||
"shadowColor":{ | ||
canvas : "#000000" | ||
}, | ||
"shadowOffsetX":{ | ||
canvas : 0 | ||
}, | ||
"shadowOffsetY":{ | ||
canvas : 0 | ||
}, | ||
"shadowBlur":{ | ||
canvas : 0 | ||
}, | ||
"textAlign":{ | ||
canvas : "start" | ||
}, | ||
"textBaseline":{ | ||
canvas : "alphabetic" | ||
}, | ||
"lineDash" : { | ||
svgAttr : "stroke-dasharray", | ||
canvas : [], | ||
svg : null, | ||
apply : "stroke" | ||
} | ||
}; | ||
/** | ||
* | ||
* @param gradientNode - reference to the gradient | ||
* @constructor | ||
*/ | ||
CanvasGradient = function (gradientNode, ctx) { | ||
this.__root = gradientNode; | ||
this.__ctx = ctx; | ||
}; | ||
/** | ||
* Adds a color stop to the gradient root | ||
*/ | ||
CanvasGradient.prototype.addColorStop = function (offset, color) { | ||
var stop = this.__ctx.__createElement("stop"), regex, matches; | ||
stop.setAttribute("offset", offset); | ||
if (color.indexOf("rgba") !== -1) { | ||
//separate alpha value, since webkit can't handle it | ||
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi; | ||
matches = regex.exec(color); | ||
stop.setAttribute("stop-color", format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]})); | ||
stop.setAttribute("stop-opacity", matches[4]); | ||
} else { | ||
stop.setAttribute("stop-color", color); | ||
} | ||
this.__root.appendChild(stop); | ||
}; | ||
CanvasPattern = function (pattern, ctx) { | ||
this.__root = pattern; | ||
this.__ctx = ctx; | ||
}; | ||
/** | ||
* The mock canvas context | ||
* @param o - options include: | ||
* ctx - existing Context2D to wrap around | ||
* width - width of your canvas (defaults to 500) | ||
* height - height of your canvas (defaults to 500) | ||
* enableMirroring - enables canvas mirroring (get image data) (defaults to false) | ||
* document - the document object (defaults to the current document) | ||
*/ | ||
ctx = function (o) { | ||
var defaultOptions = { width:500, height:500, enableMirroring : false}, options; | ||
//keep support for this way of calling C2S: new C2S(width,height) | ||
if (arguments.length > 1) { | ||
options = defaultOptions; | ||
options.width = arguments[0]; | ||
options.height = arguments[1]; | ||
} else if ( !o ) { | ||
options = defaultOptions; | ||
} else { | ||
options = o; | ||
} | ||
if (!(this instanceof ctx)) { | ||
//did someone call this without new? | ||
return new ctx(options); | ||
} | ||
//setup options | ||
this.width = options.width || defaultOptions.width; | ||
this.height = options.height || defaultOptions.height; | ||
this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring; | ||
this.canvas = this; ///point back to this instance! | ||
this.__document = options.document || document; | ||
// allow passing in an existing context to wrap around | ||
// if a context is passed in, we know a canvas already exist | ||
if (options.ctx) { | ||
this.__ctx = options.ctx; | ||
} else { | ||
this.__canvas = this.__document.createElement("canvas"); | ||
this.__ctx = this.__canvas.getContext("2d"); | ||
} | ||
this.__setDefaultStyles(); | ||
this.__stack = [this.__getStyleState()]; | ||
this.__groupStack = []; | ||
//the root svg element | ||
this.__root = this.__document.createElementNS("http://www.w3.org/2000/svg", "svg"); | ||
this.__root.setAttribute("version", 1.1); | ||
this.__root.setAttribute("xmlns", "http://www.w3.org/2000/svg"); | ||
this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); | ||
this.__root.setAttribute("width", this.width); | ||
this.__root.setAttribute("height", this.height); | ||
//make sure we don't generate the same ids in defs | ||
this.__ids = {}; | ||
//defs tag | ||
this.__defs = this.__document.createElementNS("http://www.w3.org/2000/svg", "defs"); | ||
this.__root.appendChild(this.__defs); | ||
//also add a group child. the svg element can't use the transform attribute | ||
this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g"); | ||
this.__root.appendChild(this.__currentElement); | ||
}; | ||
/** | ||
* Creates the specified svg element | ||
* @private | ||
*/ | ||
ctx.prototype.__createElement = function (elementName, properties, resetFill) { | ||
if (typeof properties === "undefined") { | ||
properties = {}; | ||
} | ||
var element = this.__document.createElementNS("http://www.w3.org/2000/svg", elementName), | ||
keys = Object.keys(properties), i, key; | ||
if (resetFill) { | ||
//if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black. | ||
element.setAttribute("fill", "none"); | ||
element.setAttribute("stroke", "none"); | ||
} | ||
for (i=0; i<keys.length; i++) { | ||
key = keys[i]; | ||
element.setAttribute(key, properties[key]); | ||
} | ||
return element; | ||
}; | ||
/** | ||
* Applies default canvas styles to the context | ||
* @private | ||
*/ | ||
ctx.prototype.__setDefaultStyles = function () { | ||
//default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/ | ||
var keys = Object.keys(STYLES), i, key; | ||
for (i=0; i<keys.length; i++) { | ||
key = keys[i]; | ||
this[key] = STYLES[key].canvas; | ||
} | ||
}; | ||
/** | ||
* Applies styles on restore | ||
* @param styleState | ||
* @private | ||
*/ | ||
ctx.prototype.__applyStyleState = function (styleState) { | ||
if(!styleState) | ||
return; | ||
var keys = Object.keys(styleState), i, key; | ||
for (i=0; i<keys.length; i++) { | ||
key = keys[i]; | ||
this[key] = styleState[key]; | ||
} | ||
}; | ||
/** | ||
* Gets the current style state | ||
* @return {Object} | ||
* @private | ||
*/ | ||
ctx.prototype.__getStyleState = function () { | ||
var i, styleState = {}, keys = Object.keys(STYLES), key; | ||
for (i=0; i<keys.length; i++) { | ||
key = keys[i]; | ||
styleState[key] = this[key]; | ||
} | ||
return styleState; | ||
}; | ||
/** | ||
* Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke" | ||
* @param type | ||
* @private | ||
*/ | ||
ctx.prototype.__applyStyleToCurrentElement = function (type) { | ||
var currentElement = this.__currentElement; | ||
var currentStyleGroup = this.__currentElementsToStyle; | ||
if (currentStyleGroup) { | ||
currentElement.setAttribute(type, ""); | ||
currentElement = currentStyleGroup.element; | ||
currentStyleGroup.children.forEach(function (node) { | ||
node.setAttribute(type, ""); | ||
}) | ||
} | ||
var keys = Object.keys(STYLES), i, style, value, id, regex, matches; | ||
for (i = 0; i < keys.length; i++) { | ||
style = STYLES[keys[i]]; | ||
value = this[keys[i]]; | ||
if (style.apply) { | ||
//is this a gradient or pattern? | ||
if (value instanceof CanvasPattern) { | ||
//pattern | ||
if (value.__ctx) { | ||
//copy over defs | ||
while(value.__ctx.__defs.childNodes.length) { | ||
id = value.__ctx.__defs.childNodes[0].getAttribute("id"); | ||
this.__ids[id] = id; | ||
this.__defs.appendChild(value.__ctx.__defs.childNodes[0]); | ||
} | ||
} | ||
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")})); | ||
} | ||
else if (value instanceof CanvasGradient) { | ||
//gradient | ||
currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")})); | ||
} else if (style.apply.indexOf(type)!==-1 && style.svg !== value) { | ||
if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) { | ||
//separate alpha value, since illustrator can't handle it | ||
regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi; | ||
matches = regex.exec(value); | ||
currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]})); | ||
//should take globalAlpha here | ||
var opacity = matches[4]; | ||
var globalAlpha = this.globalAlpha; | ||
if (globalAlpha != null) { | ||
opacity *= globalAlpha; | ||
} | ||
currentElement.setAttribute(style.svgAttr+"-opacity", opacity); | ||
} else { | ||
var attr = style.svgAttr; | ||
if (keys[i] === 'globalAlpha') { | ||
attr = type+'-'+style.svgAttr; | ||
if (currentElement.getAttribute(attr)) { | ||
//fill-opacity or stroke-opacity has already been set by stroke or fill. | ||
continue; | ||
} | ||
} | ||
//otherwise only update attribute if right type, and not svg default | ||
currentElement.setAttribute(attr, value); | ||
} | ||
} | ||
} | ||
} | ||
}; | ||
/** | ||
* Will return the closest group or svg node. May return the current element. | ||
* @private | ||
*/ | ||
ctx.prototype.__closestGroupOrSvg = function (node) { | ||
node = node || this.__currentElement; | ||
if (node.nodeName === "g" || node.nodeName === "svg") { | ||
return node; | ||
} else { | ||
return this.__closestGroupOrSvg(node.parentNode); | ||
} | ||
}; | ||
/** | ||
* Returns the serialized value of the svg so far | ||
* @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes. | ||
* If true, we attempt to find all named entities and encode it as a numeric entity. | ||
* @return serialized svg | ||
*/ | ||
ctx.prototype.getSerializedSvg = function (fixNamedEntities) { | ||
var serialized = new XMLSerializer().serializeToString(this.__root), | ||
keys, i, key, value, regexp, xmlns; | ||
//IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly | ||
xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi; | ||
if (xmlns.test(serialized)) { | ||
serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink'); | ||
} | ||
if (fixNamedEntities) { | ||
keys = Object.keys(namedEntities); | ||
//loop over each named entity and replace with the proper equivalent. | ||
for (i=0; i<keys.length; i++) { | ||
key = keys[i]; | ||
value = namedEntities[key]; | ||
regexp = new RegExp(key, "gi"); | ||
if (regexp.test(serialized)) { | ||
serialized = serialized.replace(regexp, value); | ||
} | ||
} | ||
} | ||
return serialized; | ||
}; | ||
/** | ||
* Returns the root svg | ||
* @return | ||
*/ | ||
ctx.prototype.getSvg = function () { | ||
return this.__root; | ||
}; | ||
/** | ||
* Will generate a group tag. | ||
*/ | ||
ctx.prototype.save = function () { | ||
var group = this.__createElement("g"); | ||
var parent = this.__closestGroupOrSvg(); | ||
this.__groupStack.push(parent); | ||
parent.appendChild(group); | ||
this.__currentElement = group; | ||
this.__stack.push(this.__getStyleState()); | ||
}; | ||
/** | ||
* Sets current element to parent, or just root if already root | ||
*/ | ||
ctx.prototype.restore = function () { | ||
this.__currentElement = this.__groupStack.pop(); | ||
this.__currentElementsToStyle = null; | ||
//Clearing canvas will make the poped group invalid, currentElement is set to the root group node. | ||
if (!this.__currentElement) { | ||
this.__currentElement = this.__root.childNodes[1]; | ||
} | ||
var state = this.__stack.pop(); | ||
this.__applyStyleState(state); | ||
}; | ||
/** | ||
* Helper method to add transform | ||
* @private | ||
*/ | ||
ctx.prototype.__addTransform = function (t) { | ||
//if the current element has siblings, add another group | ||
var parent = this.__closestGroupOrSvg(); | ||
if (parent.childNodes.length > 0) { | ||
if (this.__currentElement.nodeName === "path") { | ||
if (!this.__currentElementsToStyle) this.__currentElementsToStyle = {element: parent, children: []}; | ||
this.__currentElementsToStyle.children.push(this.__currentElement) | ||
this.__applyCurrentDefaultPath(); | ||
} | ||
var group = this.__createElement("g"); | ||
parent.appendChild(group); | ||
this.__currentElement = group; | ||
} | ||
var transform = this.__currentElement.getAttribute("transform"); | ||
if (transform) { | ||
transform += " "; | ||
} else { | ||
transform = ""; | ||
} | ||
transform += t; | ||
this.__currentElement.setAttribute("transform", transform); | ||
}; | ||
/** | ||
* scales the current element | ||
*/ | ||
ctx.prototype.scale = function (x, y) { | ||
if (y === undefined) { | ||
y = x; | ||
} | ||
this.__addTransform(format("scale({x},{y})", {x:x, y:y})); | ||
}; | ||
/** | ||
* rotates the current element | ||
*/ | ||
ctx.prototype.rotate = function (angle) { | ||
var degrees = (angle * 180 / Math.PI); | ||
this.__addTransform(format("rotate({angle},{cx},{cy})", {angle:degrees, cx:0, cy:0})); | ||
}; | ||
/** | ||
* translates the current element | ||
*/ | ||
ctx.prototype.translate = function (x, y) { | ||
this.__addTransform(format("translate({x},{y})", {x:x,y:y})); | ||
}; | ||
/** | ||
* applies a transform to the current element | ||
*/ | ||
ctx.prototype.transform = function (a, b, c, d, e, f) { | ||
this.__addTransform(format("matrix({a},{b},{c},{d},{e},{f})", {a:a, b:b, c:c, d:d, e:e, f:f})); | ||
}; | ||
/** | ||
* Create a new Path Element | ||
*/ | ||
ctx.prototype.beginPath = function () { | ||
var path, parent; | ||
// Note that there is only one current default path, it is not part of the drawing state. | ||
// See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path | ||
this.__currentDefaultPath = ""; | ||
this.__currentPosition = {}; | ||
path = this.__createElement("path", {}, true); | ||
parent = this.__closestGroupOrSvg(); | ||
parent.appendChild(path); | ||
this.__currentElement = path; | ||
}; | ||
/** | ||
* Helper function to apply currentDefaultPath to current path element | ||
* @private | ||
*/ | ||
ctx.prototype.__applyCurrentDefaultPath = function () { | ||
var currentElement = this.__currentElement; | ||
if (currentElement.nodeName === "path") { | ||
currentElement.setAttribute("d", this.__currentDefaultPath); | ||
} else { | ||
console.error("Attempted to apply path command to node", currentElement.nodeName); | ||
} | ||
}; | ||
/** | ||
* Helper function to add path command | ||
* @private | ||
*/ | ||
ctx.prototype.__addPathCommand = function (command) { | ||
this.__currentDefaultPath += " "; | ||
this.__currentDefaultPath += command; | ||
}; | ||
/** | ||
* Adds the move command to the current path element, | ||
* if the currentPathElement is not empty create a new path element | ||
*/ | ||
ctx.prototype.moveTo = function (x,y) { | ||
if (this.__currentElement.nodeName !== "path") { | ||
this.beginPath(); | ||
} | ||
// creates a new subpath with the given point | ||
this.__currentPosition = {x: x, y: y}; | ||
this.__addPathCommand(format("M {x} {y}", {x:x, y:y})); | ||
}; | ||
/** | ||
* Closes the current path | ||
*/ | ||
ctx.prototype.closePath = function () { | ||
if (this.__currentDefaultPath) { | ||
this.__addPathCommand("Z"); | ||
} | ||
}; | ||
/** | ||
* Adds a line to command | ||
*/ | ||
ctx.prototype.lineTo = function (x, y) { | ||
this.__currentPosition = {x: x, y: y}; | ||
if (this.__currentDefaultPath.indexOf('M') > -1) { | ||
this.__addPathCommand(format("L {x} {y}", {x:x, y:y})); | ||
} else { | ||
this.__addPathCommand(format("M {x} {y}", {x:x, y:y})); | ||
} | ||
}; | ||
/** | ||
* Add a bezier command | ||
*/ | ||
ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) { | ||
this.__currentPosition = {x: x, y: y}; | ||
this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}", | ||
{cp1x:cp1x, cp1y:cp1y, cp2x:cp2x, cp2y:cp2y, x:x, y:y})); | ||
}; | ||
/** | ||
* Adds a quadratic curve to command | ||
*/ | ||
ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) { | ||
this.__currentPosition = {x: x, y: y}; | ||
this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {cpx:cpx, cpy:cpy, x:x, y:y})); | ||
}; | ||
/** | ||
* Return a new normalized vector of given vector | ||
*/ | ||
var normalize = function (vector) { | ||
var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]); | ||
return [vector[0] / len, vector[1] / len]; | ||
}; | ||
/** | ||
* Adds the arcTo to the current path | ||
* | ||
* @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto | ||
*/ | ||
ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) { | ||
// Let the point (x0, y0) be the last point in the subpath. | ||
var x0 = this.__currentPosition && this.__currentPosition.x; | ||
var y0 = this.__currentPosition && this.__currentPosition.y; | ||
// First ensure there is a subpath for (x1, y1). | ||
if (typeof x0 == "undefined" || typeof y0 == "undefined") { | ||
return; | ||
} | ||
// Negative values for radius must cause the implementation to throw an IndexSizeError exception. | ||
if (radius < 0) { | ||
throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative."); | ||
} | ||
// If the point (x0, y0) is equal to the point (x1, y1), | ||
// or if the point (x1, y1) is equal to the point (x2, y2), | ||
// or if the radius radius is zero, | ||
// then the method must add the point (x1, y1) to the subpath, | ||
// and connect that point to the previous point (x0, y0) by a straight line. | ||
if (((x0 === x1) && (y0 === y1)) | ||
|| ((x1 === x2) && (y1 === y2)) | ||
|| (radius === 0)) { | ||
this.lineTo(x1, y1); | ||
return; | ||
} | ||
// Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line, | ||
// then the method must add the point (x1, y1) to the subpath, | ||
// and connect that point to the previous point (x0, y0) by a straight line. | ||
var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]); | ||
var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]); | ||
if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) { | ||
this.lineTo(x1, y1); | ||
return; | ||
} | ||
// Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius, | ||
// and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1), | ||
// and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2). | ||
// The points at which this circle touches these two lines are called the start and end tangent points respectively. | ||
// note that both vectors are unit vectors, so the length is 1 | ||
var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]); | ||
var theta = Math.acos(Math.abs(cos)); | ||
// Calculate origin | ||
var unit_vec_p1_origin = normalize([ | ||
unit_vec_p1_p0[0] + unit_vec_p1_p2[0], | ||
unit_vec_p1_p0[1] + unit_vec_p1_p2[1] | ||
]); | ||
var len_p1_origin = radius / Math.sin(theta / 2); | ||
var x = x1 + len_p1_origin * unit_vec_p1_origin[0]; | ||
var y = y1 + len_p1_origin * unit_vec_p1_origin[1]; | ||
// Calculate start angle and end angle | ||
// rotate 90deg clockwise (note that y axis points to its down) | ||
var unit_vec_origin_start_tangent = [ | ||
-unit_vec_p1_p0[1], | ||
unit_vec_p1_p0[0] | ||
]; | ||
// rotate 90deg counter clockwise (note that y axis points to its down) | ||
var unit_vec_origin_end_tangent = [ | ||
unit_vec_p1_p2[1], | ||
-unit_vec_p1_p2[0] | ||
]; | ||
var getAngle = function (vector) { | ||
// get angle (clockwise) between vector and (1, 0) | ||
var x = vector[0]; | ||
var y = vector[1]; | ||
if (y >= 0) { // note that y axis points to its down | ||
return Math.acos(x); | ||
} else { | ||
return -Math.acos(x); | ||
} | ||
}; | ||
var startAngle = getAngle(unit_vec_origin_start_tangent); | ||
var endAngle = getAngle(unit_vec_origin_end_tangent); | ||
// Connect the point (x0, y0) to the start tangent point by a straight line | ||
this.lineTo(x + unit_vec_origin_start_tangent[0] * radius, | ||
y + unit_vec_origin_start_tangent[1] * radius); | ||
// Connect the start tangent point to the end tangent point by arc | ||
// and adding the end tangent point to the subpath. | ||
this.arc(x, y, radius, startAngle, endAngle); | ||
}; | ||
/** | ||
* Sets the stroke property on the current element | ||
*/ | ||
ctx.prototype.stroke = function () { | ||
if (this.__currentElement.nodeName === "path") { | ||
this.__currentElement.setAttribute("paint-order", "fill stroke markers"); | ||
} | ||
this.__applyCurrentDefaultPath(); | ||
this.__applyStyleToCurrentElement("stroke"); | ||
}; | ||
/** | ||
* Sets fill properties on the current element | ||
*/ | ||
ctx.prototype.fill = function () { | ||
if (this.__currentElement.nodeName === "path") { | ||
this.__currentElement.setAttribute("paint-order", "stroke fill markers"); | ||
} | ||
this.__applyCurrentDefaultPath(); | ||
this.__applyStyleToCurrentElement("fill"); | ||
}; | ||
/** | ||
* Adds a rectangle to the path. | ||
*/ | ||
ctx.prototype.rect = function (x, y, width, height) { | ||
if (this.__currentElement.nodeName !== "path") { | ||
this.beginPath(); | ||
} | ||
this.moveTo(x, y); | ||
this.lineTo(x+width, y); | ||
this.lineTo(x+width, y+height); | ||
this.lineTo(x, y+height); | ||
this.lineTo(x, y); | ||
this.closePath(); | ||
}; | ||
/** | ||
* adds a rectangle element | ||
*/ | ||
ctx.prototype.fillRect = function (x, y, width, height) { | ||
var rect, parent; | ||
rect = this.__createElement("rect", { | ||
x : x, | ||
y : y, | ||
width : width, | ||
height : height | ||
}, true); | ||
parent = this.__closestGroupOrSvg(); | ||
parent.appendChild(rect); | ||
this.__currentElement = rect; | ||
this.__applyStyleToCurrentElement("fill"); | ||
}; | ||
/** | ||
* Draws a rectangle with no fill | ||
* @param x | ||
* @param y | ||
* @param width | ||
* @param height | ||
*/ | ||
ctx.prototype.strokeRect = function (x, y, width, height) { | ||
var rect, parent; | ||
rect = this.__createElement("rect", { | ||
x : x, | ||
y : y, | ||
width : width, | ||
height : height | ||
}, true); | ||
parent = this.__closestGroupOrSvg(); | ||
parent.appendChild(rect); | ||
this.__currentElement = rect; | ||
this.__applyStyleToCurrentElement("stroke"); | ||
}; | ||
/** | ||
* Clear entire canvas: | ||
* 1. save current transforms | ||
* 2. remove all the childNodes of the root g element | ||
*/ | ||
ctx.prototype.__clearCanvas = function () { | ||
var current = this.__closestGroupOrSvg(), | ||
transform = current.getAttribute("transform"); | ||
var rootGroup = this.__root.childNodes[1]; | ||
var childNodes = rootGroup.childNodes; | ||
for (var i = childNodes.length - 1; i >= 0; i--) { | ||
if (childNodes[i]) { | ||
rootGroup.removeChild(childNodes[i]); | ||
} | ||
} | ||
this.__currentElement = rootGroup; | ||
//reset __groupStack as all the child group nodes are all removed. | ||
this.__groupStack = []; | ||
if (transform) { | ||
this.__addTransform(transform); | ||
} | ||
}; | ||
/** | ||
* "Clears" a canvas by just drawing a white rectangle in the current group. | ||
*/ | ||
ctx.prototype.clearRect = function (x, y, width, height) { | ||
//clear entire canvas | ||
if (x === 0 && y === 0 && width === this.width && height === this.height) { | ||
this.__clearCanvas(); | ||
return; | ||
} | ||
var rect, parent = this.__closestGroupOrSvg(); | ||
rect = this.__createElement("rect", { | ||
x : x, | ||
y : y, | ||
width : width, | ||
height : height, | ||
fill : "#FFFFFF" | ||
}, true); | ||
parent.appendChild(rect); | ||
}; | ||
/** | ||
* Adds a linear gradient to a defs tag. | ||
* Returns a canvas gradient object that has a reference to it's parent def | ||
*/ | ||
ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) { | ||
var grad = this.__createElement("linearGradient", { | ||
id : randomString(this.__ids), | ||
x1 : x1+"px", | ||
x2 : x2+"px", | ||
y1 : y1+"px", | ||
y2 : y2+"px", | ||
"gradientUnits" : "userSpaceOnUse" | ||
}, false); | ||
this.__defs.appendChild(grad); | ||
return new CanvasGradient(grad, this); | ||
}; | ||
/** | ||
* Adds a radial gradient to a defs tag. | ||
* Returns a canvas gradient object that has a reference to it's parent def | ||
*/ | ||
ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) { | ||
var grad = this.__createElement("radialGradient", { | ||
id : randomString(this.__ids), | ||
cx : x1+"px", | ||
cy : y1+"px", | ||
r : r1+"px", | ||
fx : x0+"px", | ||
fy : y0+"px", | ||
"gradientUnits" : "userSpaceOnUse" | ||
}, false); | ||
this.__defs.appendChild(grad); | ||
return new CanvasGradient(grad, this); | ||
}; | ||
/** | ||
* Parses the font string and returns svg mapping | ||
* @private | ||
*/ | ||
ctx.prototype.__parseFont = function () { | ||
var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i; | ||
var fontPart = regex.exec( this.font ); | ||
var data = { | ||
style : fontPart[1] || 'normal', | ||
size : fontPart[4] || '10px', | ||
family : fontPart[6] || 'sans-serif', | ||
weight: fontPart[3] || 'normal', | ||
decoration : fontPart[2] || 'normal', | ||
href : null | ||
}; | ||
//canvas doesn't support underline natively, but we can pass this attribute | ||
if (this.__fontUnderline === "underline") { | ||
data.decoration = "underline"; | ||
} | ||
//canvas also doesn't support linking, but we can pass this as well | ||
if (this.__fontHref) { | ||
data.href = this.__fontHref; | ||
} | ||
return data; | ||
}; | ||
/** | ||
* Helper to link text fragments | ||
* @param font | ||
* @param element | ||
* @return {*} | ||
* @private | ||
*/ | ||
ctx.prototype.__wrapTextLink = function (font, element) { | ||
if (font.href) { | ||
var a = this.__createElement("a"); | ||
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href); | ||
a.appendChild(element); | ||
return a; | ||
} | ||
return element; | ||
}; | ||
/** | ||
* Fills or strokes text | ||
* @param text | ||
* @param x | ||
* @param y | ||
* @param action - stroke or fill | ||
* @private | ||
*/ | ||
ctx.prototype.__applyText = function (text, x, y, action) { | ||
var font = this.__parseFont(), | ||
parent = this.__closestGroupOrSvg(), | ||
textElement = this.__createElement("text", { | ||
"font-family" : font.family, | ||
"font-size" : font.size, | ||
"font-style" : font.style, | ||
"font-weight" : font.weight, | ||
"text-decoration" : font.decoration, | ||
"x" : x, | ||
"y" : y, | ||
"text-anchor": getTextAnchor(this.textAlign), | ||
"dominant-baseline": getDominantBaseline(this.textBaseline) | ||
}, true); | ||
textElement.appendChild(this.__document.createTextNode(text)); | ||
this.__currentElement = textElement; | ||
this.__applyStyleToCurrentElement(action); | ||
parent.appendChild(this.__wrapTextLink(font,textElement)); | ||
}; | ||
/** | ||
* Creates a text element | ||
* @param text | ||
* @param x | ||
* @param y | ||
*/ | ||
ctx.prototype.fillText = function (text, x, y) { | ||
this.__applyText(text, x, y, "fill"); | ||
}; | ||
/** | ||
* Strokes text | ||
* @param text | ||
* @param x | ||
* @param y | ||
*/ | ||
ctx.prototype.strokeText = function (text, x, y) { | ||
this.__applyText(text, x, y, "stroke"); | ||
}; | ||
/** | ||
* No need to implement this for svg. | ||
* @param text | ||
* @return {TextMetrics} | ||
*/ | ||
ctx.prototype.measureText = function (text) { | ||
this.__ctx.font = this.font; | ||
return this.__ctx.measureText(text); | ||
}; | ||
/** | ||
* Arc command! | ||
*/ | ||
ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) { | ||
// in canvas no circle is drawn if no angle is provided. | ||
if (startAngle === endAngle) { | ||
return; | ||
} | ||
startAngle = startAngle % (2*Math.PI); | ||
endAngle = endAngle % (2*Math.PI); | ||
if (startAngle === endAngle) { | ||
//circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle) | ||
endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI); | ||
} | ||
var endX = x+radius*Math.cos(endAngle), | ||
endY = y+radius*Math.sin(endAngle), | ||
startX = x+radius*Math.cos(startAngle), | ||
startY = y+radius*Math.sin(startAngle), | ||
sweepFlag = counterClockwise ? 0 : 1, | ||
largeArcFlag = 0, | ||
diff = endAngle - startAngle; | ||
// https://github.com/gliffy/canvas2svg/issues/4 | ||
if (diff < 0) { | ||
diff += 2*Math.PI; | ||
} | ||
if (counterClockwise) { | ||
largeArcFlag = diff > Math.PI ? 0 : 1; | ||
} else { | ||
largeArcFlag = diff > Math.PI ? 1 : 0; | ||
} | ||
this.lineTo(startX, startY); | ||
this.__addPathCommand(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}", | ||
{rx:radius, ry:radius, xAxisRotation:0, largeArcFlag:largeArcFlag, sweepFlag:sweepFlag, endX:endX, endY:endY})); | ||
this.__currentPosition = {x: endX, y: endY}; | ||
}; | ||
/** | ||
* Generates a ClipPath from the clip command. | ||
*/ | ||
ctx.prototype.clip = function () { | ||
var group = this.__closestGroupOrSvg(), | ||
clipPath = this.__createElement("clipPath"), | ||
id = randomString(this.__ids), | ||
newGroup = this.__createElement("g"); | ||
this.__applyCurrentDefaultPath(); | ||
group.removeChild(this.__currentElement); | ||
clipPath.setAttribute("id", id); | ||
clipPath.appendChild(this.__currentElement); | ||
this.__defs.appendChild(clipPath); | ||
//set the clip path to this group | ||
group.setAttribute("clip-path", format("url(#{id})", {id:id})); | ||
//clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations | ||
// to this path | ||
group.appendChild(newGroup); | ||
this.__currentElement = newGroup; | ||
}; | ||
/** | ||
* Draws a canvas, image or mock context to this canvas. | ||
* Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support. | ||
* http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage | ||
*/ | ||
ctx.prototype.drawImage = function () { | ||
//convert arguments to a real array | ||
var args = Array.prototype.slice.call(arguments), | ||
image=args[0], | ||
dx, dy, dw, dh, sx=0, sy=0, sw, sh, parent, svg, defs, group, | ||
currentElement, svgImage, canvas, context, id; | ||
if (args.length === 3) { | ||
dx = args[1]; | ||
dy = args[2]; | ||
sw = image.width; | ||
sh = image.height; | ||
dw = sw; | ||
dh = sh; | ||
} else if (args.length === 5) { | ||
dx = args[1]; | ||
dy = args[2]; | ||
dw = args[3]; | ||
dh = args[4]; | ||
sw = image.width; | ||
sh = image.height; | ||
} else if (args.length === 9) { | ||
sx = args[1]; | ||
sy = args[2]; | ||
sw = args[3]; | ||
sh = args[4]; | ||
dx = args[5]; | ||
dy = args[6]; | ||
dw = args[7]; | ||
dh = args[8]; | ||
} else { | ||
throw new Error("Inavlid number of arguments passed to drawImage: " + arguments.length); | ||
} | ||
parent = this.__closestGroupOrSvg(); | ||
currentElement = this.__currentElement; | ||
var translateDirective = "translate(" + dx + ", " + dy + ")"; | ||
if (image instanceof ctx) { | ||
//canvas2svg mock canvas context. In the future we may want to clone nodes instead. | ||
//also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context. | ||
svg = image.getSvg().cloneNode(true); | ||
if (svg.childNodes && svg.childNodes.length > 1) { | ||
defs = svg.childNodes[0]; | ||
while(defs.childNodes.length) { | ||
id = defs.childNodes[0].getAttribute("id"); | ||
this.__ids[id] = id; | ||
this.__defs.appendChild(defs.childNodes[0]); | ||
} | ||
group = svg.childNodes[1]; | ||
if (group) { | ||
//save original transform | ||
var originTransform = group.getAttribute("transform"); | ||
var transformDirective; | ||
if (originTransform) { | ||
transformDirective = originTransform+" "+translateDirective; | ||
} else { | ||
transformDirective = translateDirective; | ||
} | ||
group.setAttribute("transform", transformDirective); | ||
parent.appendChild(group); | ||
} | ||
} | ||
} else if (image.nodeName === "CANVAS" || image.nodeName === "IMG") { | ||
//canvas or image | ||
svgImage = this.__createElement("image"); | ||
svgImage.setAttribute("width", dw); | ||
svgImage.setAttribute("height", dh); | ||
svgImage.setAttribute("opacity", this.globalAlpha); | ||
svgImage.setAttribute("preserveAspectRatio", "none"); | ||
// force embed every images's base64 in SVG by using 'true' | ||
// makes SVG self-contained | ||
if (true) { | ||
//crop the image using a temporary canvas | ||
canvas = this.__document.createElement("canvas"); | ||
canvas.width = dw; | ||
canvas.height = dh; | ||
context = canvas.getContext("2d"); | ||
context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh); | ||
image = canvas; | ||
} | ||
svgImage.setAttribute("transform", translateDirective); | ||
svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", | ||
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src")); | ||
parent.appendChild(svgImage); | ||
} | ||
}; | ||
/** | ||
* Generates a pattern tag | ||
*/ | ||
ctx.prototype.createPattern = function (image, repetition) { | ||
var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids), | ||
img; | ||
pattern.setAttribute("id", id); | ||
pattern.setAttribute("width", image.width); | ||
pattern.setAttribute("height", image.height); | ||
if (image.nodeName === "CANVAS" || image.nodeName === "IMG") { | ||
img = this.__document.createElementNS("http://www.w3.org/2000/svg", "image"); | ||
img.setAttribute("width", image.width); | ||
img.setAttribute("height", image.height); | ||
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", | ||
image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src")); | ||
pattern.appendChild(img); | ||
this.__defs.appendChild(pattern); | ||
} else if (image instanceof ctx) { | ||
pattern.appendChild(image.__root.childNodes[1]); | ||
this.__defs.appendChild(pattern); | ||
} | ||
return new CanvasPattern(pattern, this); | ||
}; | ||
ctx.prototype.setLineDash = function (dashArray) { | ||
if (dashArray && dashArray.length > 0) { | ||
this.lineDash = dashArray.join(","); | ||
} else { | ||
this.lineDash = null; | ||
} | ||
}; | ||
/** | ||
* Not yet implemented | ||
*/ | ||
ctx.prototype.drawFocusRing = function () {}; | ||
ctx.prototype.createImageData = function () {}; | ||
ctx.prototype.getImageData = function () {}; | ||
ctx.prototype.putImageData = function () {}; | ||
ctx.prototype.globalCompositeOperation = function () {}; | ||
ctx.prototype.setTransform = function () {}; | ||
//add options for alternative namespace | ||
if (typeof window === "object") { | ||
window.C2S = ctx; | ||
} | ||
// CommonJS/Browserify | ||
if (typeof module === "object" && typeof module.exports === "object") { | ||
module.exports = ctx; | ||
} | ||
}()); | ||
/***/ }) | ||
/******/ ]); | ||
}); | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.cytoscapeSvg=e():t.cytoscapeSvg=e()}(window,(function(){return function(t){var e={};function r(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=e,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(i,n,function(e){return t[e]}.bind(null,n));return i},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){"use strict";var i=r(1),n=function(t){t&&t("core","svg",i.svg)};"undefined"!=typeof cytoscape&&n(cytoscape),t.exports=n},function(t,e,r){"use strict";var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=r(2),o={},s={};s.number=function(t){return null!=t&&(void 0===t?"undefined":i(t))===i(1)&&!isNaN(t)},o.bufferCanvasImage=function(t,e){var r=e.renderer().usePaths;e.renderer().usePaths=function(){return!1},e.elements().forEach((function(t){t._private.rscratch.pathCacheKey=null,t._private.rscratch.pathCache=null}));var i=e.renderer(),o=e.mutableElements().boundingBox(),a=i.findContainerClientCoords(),l=t.full?Math.ceil(o.w):a[2],h=t.full?Math.ceil(o.h):a[3],c=s.number(t.maxWidth)||s.number(t.maxHeight),u=i.getPixelRatio(),p=1;if(void 0!==t.scale)l*=t.scale,h*=t.scale,p=t.scale;else if(c){var _=1/0,d=1/0;s.number(t.maxWidth)&&(_=p*t.maxWidth/l),s.number(t.maxHeight)&&(d=p*t.maxHeight/h),l*=p=Math.min(_,d),h*=p}c||(l*=u,h*=u,p*=u);var f=null,g=f=new n(l,h);if(l>0&&h>0){f.clearRect(0,0,l,h),t.bg&&(f.globalCompositeOperation="destination-over",f.fillStyle=t.bg,f.fillRect(0,0,l,h)),f.globalCompositeOperation="source-over";var m=i.getCachedZSortedEles();if(t.full)f.translate(-o.x1*p,-o.y1*p),f.scale(p,p),i.drawElements(f,m),f.scale(1/p,1/p),f.translate(o.x1*p,o.y1*p);else{var y=e.pan(),v={x:y.x*p,y:y.y*p};p*=e.zoom(),f.translate(v.x,v.y),f.scale(p,p),i.drawElements(f,m),f.scale(1/p,1/p),f.translate(-v.x,-v.y)}}return e.renderer().usePaths=r,g},o.svg=function(t){return o.bufferCanvasImage(t||{},this).getSerializedSvg()},t.exports=o},function(t,e,r){!function(){"use strict";var e,r,i,n,o;function s(t,e){var r,i=Object.keys(e);for(r=0;r<i.length;r++)t=t.replace(new RegExp("\\{"+i[r]+"\\}","gi"),e[i[r]]);return t}function a(t){var e,r,i;if(!t)throw new Error("cannot create a random attribute name for an undefined object");e="ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz",r="";do{for(r="",i=0;i<12;i++)r+=e[Math.floor(Math.random()*e.length)]}while(t[r]);return r}function l(t){var e={alphabetic:"alphabetic",hanging:"hanging",top:"text-before-edge",bottom:"text-after-edge",middle:"central"};return e[t]||e.alphabetic}o=function(t,e){var r,i,n,o={};for(t=t.split(","),e=e||10,r=0;r<t.length;r+=2)i="&"+t[r+1]+";",n=parseInt(t[r],e),o[i]="&#"+n+";";return o["\\xa0"]=" ",o}("50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,t9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro",32),e={strokeStyle:{svgAttr:"stroke",canvas:"#000000",svg:"none",apply:"stroke"},fillStyle:{svgAttr:"fill",canvas:"#000000",svg:null,apply:"fill"},lineCap:{svgAttr:"stroke-linecap",canvas:"butt",svg:"butt",apply:"stroke"},lineJoin:{svgAttr:"stroke-linejoin",canvas:"miter",svg:"miter",apply:"stroke"},miterLimit:{svgAttr:"stroke-miterlimit",canvas:10,svg:4,apply:"stroke"},lineWidth:{svgAttr:"stroke-width",canvas:1,svg:1,apply:"stroke"},globalAlpha:{svgAttr:"opacity",canvas:1,svg:1,apply:"fill stroke"},font:{canvas:"10px sans-serif"},shadowColor:{canvas:"#000000"},shadowOffsetX:{canvas:0},shadowOffsetY:{canvas:0},shadowBlur:{canvas:0},textAlign:{canvas:"start"},textBaseline:{canvas:"alphabetic"},lineDash:{svgAttr:"stroke-dasharray",canvas:[],svg:null,apply:"stroke"}},(i=function(t,e){this.__root=t,this.__ctx=e}).prototype.addColorStop=function(t,e){var r,i=this.__ctx.__createElement("stop");i.setAttribute("offset",t),-1!==e.indexOf("rgba")?(r=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi.exec(e),i.setAttribute("stop-color",s("rgb({r},{g},{b})",{r:r[1],g:r[2],b:r[3]})),i.setAttribute("stop-opacity",r[4])):i.setAttribute("stop-color",e),this.__root.appendChild(i)},n=function(t,e){this.__root=t,this.__ctx=e},(r=function(t){var e,i={width:500,height:500,enableMirroring:!1};if(arguments.length>1?((e=i).width=arguments[0],e.height=arguments[1]):e=t||i,!(this instanceof r))return new r(e);this.width=e.width||i.width,this.height=e.height||i.height,this.enableMirroring=void 0!==e.enableMirroring?e.enableMirroring:i.enableMirroring,this.canvas=this,this.__document=e.document||document,e.ctx?this.__ctx=e.ctx:(this.__canvas=this.__document.createElement("canvas"),this.__ctx=this.__canvas.getContext("2d")),this.__setDefaultStyles(),this.__stack=[this.__getStyleState()],this.__groupStack=[],this.__root=this.__document.createElementNS("http://www.w3.org/2000/svg","svg"),this.__root.setAttribute("version",1.1),this.__root.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),this.__root.setAttribute("width",this.width),this.__root.setAttribute("height",this.height),this.__ids={},this.__defs=this.__document.createElementNS("http://www.w3.org/2000/svg","defs"),this.__root.appendChild(this.__defs),this.__currentElement=this.__document.createElementNS("http://www.w3.org/2000/svg","g"),this.__root.appendChild(this.__currentElement)}).prototype.__createElement=function(t,e,r){void 0===e&&(e={});var i,n,o=this.__document.createElementNS("http://www.w3.org/2000/svg",t),s=Object.keys(e);for(r&&(o.setAttribute("fill","none"),o.setAttribute("stroke","none")),i=0;i<s.length;i++)n=s[i],o.setAttribute(n,e[n]);return o},r.prototype.__setDefaultStyles=function(){var t,r,i=Object.keys(e);for(t=0;t<i.length;t++)this[r=i[t]]=e[r].canvas},r.prototype.__applyStyleState=function(t){if(t){var e,r,i=Object.keys(t);for(e=0;e<i.length;e++)this[r=i[e]]=t[r]}},r.prototype.__getStyleState=function(){var t,r,i={},n=Object.keys(e);for(t=0;t<n.length;t++)i[r=n[t]]=this[r];return i},r.prototype.__applyStyleToCurrentElement=function(t){var r=this.__currentElement,o=this.__currentElementsToStyle;o&&(r.setAttribute(t,""),r=o.element,o.children.forEach((function(e){e.setAttribute(t,"")})));var a,l,h,c,u,p=Object.keys(e);for(a=0;a<p.length;a++)if(l=e[p[a]],h=this[p[a]],l.apply)if(h instanceof n){if(h.__ctx)for(;h.__ctx.__defs.childNodes.length;)c=h.__ctx.__defs.childNodes[0].getAttribute("id"),this.__ids[c]=c,this.__defs.appendChild(h.__ctx.__defs.childNodes[0]);r.setAttribute(l.apply,s("url(#{id})",{id:h.__root.getAttribute("id")}))}else if(h instanceof i)r.setAttribute(l.apply,s("url(#{id})",{id:h.__root.getAttribute("id")}));else if(-1!==l.apply.indexOf(t)&&l.svg!==h)if("stroke"!==l.svgAttr&&"fill"!==l.svgAttr||-1===h.indexOf("rgba")){var _=l.svgAttr;if("globalAlpha"===p[a]&&(_=t+"-"+l.svgAttr,r.getAttribute(_)))continue;r.setAttribute(_,h)}else{u=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi.exec(h),r.setAttribute(l.svgAttr,s("rgb({r},{g},{b})",{r:u[1],g:u[2],b:u[3]}));var d=u[4],f=this.globalAlpha;null!=f&&(d*=f),r.setAttribute(l.svgAttr+"-opacity",d)}},r.prototype.__closestGroupOrSvg=function(t){return"g"===(t=t||this.__currentElement).nodeName||"svg"===t.nodeName?t:this.__closestGroupOrSvg(t.parentNode)},r.prototype.getSerializedSvg=function(t){var e,r,i,n,s,a=(new XMLSerializer).serializeToString(this.__root);if(/xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi.test(a)&&(a=a.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink')),t)for(e=Object.keys(o),r=0;r<e.length;r++)i=e[r],n=o[i],(s=new RegExp(i,"gi")).test(a)&&(a=a.replace(s,n));return a},r.prototype.getSvg=function(){return this.__root},r.prototype.save=function(){var t=this.__createElement("g"),e=this.__closestGroupOrSvg();this.__groupStack.push(e),e.appendChild(t),this.__currentElement=t,this.__stack.push(this.__getStyleState())},r.prototype.restore=function(){this.__currentElement=this.__groupStack.pop(),this.__currentElementsToStyle=null,this.__currentElement||(this.__currentElement=this.__root.childNodes[1]);var t=this.__stack.pop();this.__applyStyleState(t)},r.prototype.__addTransform=function(t){var e=this.__closestGroupOrSvg();if(e.childNodes.length>0){"path"===this.__currentElement.nodeName&&(this.__currentElementsToStyle||(this.__currentElementsToStyle={element:e,children:[]}),this.__currentElementsToStyle.children.push(this.__currentElement),this.__applyCurrentDefaultPath());var r=this.__createElement("g");e.appendChild(r),this.__currentElement=r}var i=this.__currentElement.getAttribute("transform");i?i+=" ":i="",i+=t,this.__currentElement.setAttribute("transform",i)},r.prototype.scale=function(t,e){void 0===e&&(e=t),this.__addTransform(s("scale({x},{y})",{x:t,y:e}))},r.prototype.rotate=function(t){var e=180*t/Math.PI;this.__addTransform(s("rotate({angle},{cx},{cy})",{angle:e,cx:0,cy:0}))},r.prototype.translate=function(t,e){this.__addTransform(s("translate({x},{y})",{x:t,y:e}))},r.prototype.transform=function(t,e,r,i,n,o){this.__addTransform(s("matrix({a},{b},{c},{d},{e},{f})",{a:t,b:e,c:r,d:i,e:n,f:o}))},r.prototype.beginPath=function(){var t;this.__currentDefaultPath="",this.__currentPosition={},t=this.__createElement("path",{},!0),this.__closestGroupOrSvg().appendChild(t),this.__currentElement=t},r.prototype.__applyCurrentDefaultPath=function(){var t=this.__currentElement;"path"===t.nodeName?t.setAttribute("d",this.__currentDefaultPath):console.error("Attempted to apply path command to node",t.nodeName)},r.prototype.__addPathCommand=function(t){this.__currentDefaultPath+=" ",this.__currentDefaultPath+=t},r.prototype.moveTo=function(t,e){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.__currentPosition={x:t,y:e},this.__addPathCommand(s("M {x} {y}",{x:t,y:e}))},r.prototype.closePath=function(){this.__currentDefaultPath&&this.__addPathCommand("Z")},r.prototype.lineTo=function(t,e){this.__currentPosition={x:t,y:e},this.__currentDefaultPath.indexOf("M")>-1?this.__addPathCommand(s("L {x} {y}",{x:t,y:e})):this.__addPathCommand(s("M {x} {y}",{x:t,y:e}))},r.prototype.bezierCurveTo=function(t,e,r,i,n,o){this.__currentPosition={x:n,y:o},this.__addPathCommand(s("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",{cp1x:t,cp1y:e,cp2x:r,cp2y:i,x:n,y:o}))},r.prototype.quadraticCurveTo=function(t,e,r,i){this.__currentPosition={x:r,y:i},this.__addPathCommand(s("Q {cpx} {cpy} {x} {y}",{cpx:t,cpy:e,x:r,y:i}))};var h=function(t){var e=Math.sqrt(t[0]*t[0]+t[1]*t[1]);return[t[0]/e,t[1]/e]};r.prototype.arcTo=function(t,e,r,i,n){var o=this.__currentPosition&&this.__currentPosition.x,s=this.__currentPosition&&this.__currentPosition.y;if(void 0!==o&&void 0!==s){if(n<0)throw new Error("IndexSizeError: The radius provided ("+n+") is negative.");if(o===t&&s===e||t===r&&e===i||0===n)this.lineTo(t,e);else{var a=h([o-t,s-e]),l=h([r-t,i-e]);if(a[0]*l[1]!=a[1]*l[0]){var c=a[0]*l[0]+a[1]*l[1],u=Math.acos(Math.abs(c)),p=h([a[0]+l[0],a[1]+l[1]]),_=n/Math.sin(u/2),d=t+_*p[0],f=e+_*p[1],g=[-a[1],a[0]],m=[l[1],-l[0]],y=function(t){var e=t[0];return t[1]>=0?Math.acos(e):-Math.acos(e)},v=y(g),b=y(m);this.lineTo(d+g[0]*n,f+g[1]*n),this.arc(d,f,n,v,b)}else this.lineTo(t,e)}}},r.prototype.stroke=function(){"path"===this.__currentElement.nodeName&&this.__currentElement.setAttribute("paint-order","fill stroke markers"),this.__applyCurrentDefaultPath(),this.__applyStyleToCurrentElement("stroke")},r.prototype.fill=function(){"path"===this.__currentElement.nodeName&&this.__currentElement.setAttribute("paint-order","stroke fill markers"),this.__applyCurrentDefaultPath(),this.__applyStyleToCurrentElement("fill")},r.prototype.rect=function(t,e,r,i){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.moveTo(t,e),this.lineTo(t+r,e),this.lineTo(t+r,e+i),this.lineTo(t,e+i),this.lineTo(t,e),this.closePath()},r.prototype.fillRect=function(t,e,r,i){var n;n=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(n),this.__currentElement=n,this.__applyStyleToCurrentElement("fill")},r.prototype.strokeRect=function(t,e,r,i){var n;n=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(n),this.__currentElement=n,this.__applyStyleToCurrentElement("stroke")},r.prototype.__clearCanvas=function(){for(var t=this.__closestGroupOrSvg().getAttribute("transform"),e=this.__root.childNodes[1],r=e.childNodes,i=r.length-1;i>=0;i--)r[i]&&e.removeChild(r[i]);this.__currentElement=e,this.__groupStack=[],t&&this.__addTransform(t)},r.prototype.clearRect=function(t,e,r,i){if(0!==t||0!==e||r!==this.width||i!==this.height){var n,o=this.__closestGroupOrSvg();n=this.__createElement("rect",{x:t,y:e,width:r,height:i,fill:"#FFFFFF"},!0),o.appendChild(n)}else this.__clearCanvas()},r.prototype.createLinearGradient=function(t,e,r,n){var o=this.__createElement("linearGradient",{id:a(this.__ids),x1:t+"px",x2:r+"px",y1:e+"px",y2:n+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(o),new i(o,this)},r.prototype.createRadialGradient=function(t,e,r,n,o,s){var l=this.__createElement("radialGradient",{id:a(this.__ids),cx:n+"px",cy:o+"px",r:s+"px",fx:t+"px",fy:e+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(l),new i(l,this)},r.prototype.__parseFont=function(){var t=/^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i.exec(this.font),e={style:t[1]||"normal",size:t[4]||"10px",family:t[6]||"sans-serif",weight:t[3]||"normal",decoration:t[2]||"normal",href:null};return"underline"===this.__fontUnderline&&(e.decoration="underline"),this.__fontHref&&(e.href=this.__fontHref),e},r.prototype.__wrapTextLink=function(t,e){if(t.href){var r=this.__createElement("a");return r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t.href),r.appendChild(e),r}return e},r.prototype.__applyText=function(t,e,r,i){var n,o,s=this.__parseFont(),a=this.__closestGroupOrSvg(),h=this.__createElement("text",{"font-family":s.family,"font-size":s.size,"font-style":s.style,"font-weight":s.weight,"text-decoration":s.decoration,x:e,y:r,"text-anchor":(n=this.textAlign,o={left:"start",right:"end",center:"middle",start:"start",end:"end"},o[n]||o.start),"dominant-baseline":l(this.textBaseline)},!0);h.appendChild(this.__document.createTextNode(t)),this.__currentElement=h,this.__applyStyleToCurrentElement(i),a.appendChild(this.__wrapTextLink(s,h))},r.prototype.fillText=function(t,e,r){this.__applyText(t,e,r,"fill")},r.prototype.strokeText=function(t,e,r){this.__applyText(t,e,r,"stroke")},r.prototype.measureText=function(t){return this.__ctx.font=this.font,this.__ctx.measureText(t)},r.prototype.arc=function(t,e,r,i,n,o){if(i!==n){(i%=2*Math.PI)===(n%=2*Math.PI)&&(n=(n+2*Math.PI-.001*(o?-1:1))%(2*Math.PI));var a=t+r*Math.cos(n),l=e+r*Math.sin(n),h=t+r*Math.cos(i),c=e+r*Math.sin(i),u=o?0:1,p=0,_=n-i;_<0&&(_+=2*Math.PI),p=o?_>Math.PI?0:1:_>Math.PI?1:0,this.lineTo(h,c),this.__addPathCommand(s("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",{rx:r,ry:r,xAxisRotation:0,largeArcFlag:p,sweepFlag:u,endX:a,endY:l})),this.__currentPosition={x:a,y:l}}},r.prototype.clip=function(){var t=this.__closestGroupOrSvg(),e=this.__createElement("clipPath"),r=a(this.__ids),i=this.__createElement("g");this.__applyCurrentDefaultPath(),t.removeChild(this.__currentElement),e.setAttribute("id",r),e.appendChild(this.__currentElement),this.__defs.appendChild(e),t.setAttribute("clip-path",s("url(#{id})",{id:r})),t.appendChild(i),this.__currentElement=i},r.prototype.drawImage=function(){var t,e,i,n,o,s,a,l,h,c,u,p,_,d=Array.prototype.slice.call(arguments),f=d[0],g=0,m=0;if(3===d.length)t=d[1],e=d[2],i=o=f.width,n=s=f.height;else if(5===d.length)t=d[1],e=d[2],i=d[3],n=d[4],o=f.width,s=f.height;else{if(9!==d.length)throw new Error("Inavlid number of arguments passed to drawImage: "+arguments.length);g=d[1],m=d[2],o=d[3],s=d[4],t=d[5],e=d[6],i=d[7],n=d[8]}a=this.__closestGroupOrSvg(),this.__currentElement;var y="translate("+t+", "+e+")";if(f instanceof r){if((l=f.getSvg().cloneNode(!0)).childNodes&&l.childNodes.length>1){for(h=l.childNodes[0];h.childNodes.length;)_=h.childNodes[0].getAttribute("id"),this.__ids[_]=_,this.__defs.appendChild(h.childNodes[0]);if(c=l.childNodes[1]){var v,b=c.getAttribute("transform");v=b?b+" "+y:y,c.setAttribute("transform",v),a.appendChild(c)}}}else"CANVAS"!==f.nodeName&&"IMG"!==f.nodeName||((u=this.__createElement("image")).setAttribute("width",i),u.setAttribute("height",n),u.setAttribute("opacity",this.globalAlpha),u.setAttribute("preserveAspectRatio","none"),(p=this.__document.createElement("canvas")).width=i,p.height=n,p.getContext("2d").drawImage(f,g,m,o,s,0,0,i,n),f=p,u.setAttribute("transform",y),u.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===f.nodeName?f.toDataURL():f.getAttribute("src")),a.appendChild(u))},r.prototype.createPattern=function(t,e){var i,o=this.__document.createElementNS("http://www.w3.org/2000/svg","pattern"),s=a(this.__ids);return o.setAttribute("id",s),o.setAttribute("width",t.width),o.setAttribute("height",t.height),"CANVAS"===t.nodeName||"IMG"===t.nodeName?((i=this.__document.createElementNS("http://www.w3.org/2000/svg","image")).setAttribute("width",t.width),i.setAttribute("height",t.height),i.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===t.nodeName?t.toDataURL():t.getAttribute("src")),o.appendChild(i),this.__defs.appendChild(o)):t instanceof r&&(o.appendChild(t.__root.childNodes[1]),this.__defs.appendChild(o)),new n(o,this)},r.prototype.setLineDash=function(t){t&&t.length>0?this.lineDash=t.join(","):this.lineDash=null},r.prototype.drawFocusRing=function(){},r.prototype.createImageData=function(){},r.prototype.getImageData=function(){},r.prototype.putImageData=function(){},r.prototype.globalCompositeOperation=function(){},r.prototype.setTransform=function(){},"object"==typeof window&&(window.C2S=r),"object"==typeof t.exports&&(t.exports=r)}()}])})); |
{ | ||
"name": "cytoscape-svg", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "Export the current graph view as a SVG.", | ||
@@ -5,0 +5,0 @@ "main": "cytoscape-svg.js", |
@@ -61,2 +61,3 @@ cytoscape-svg | ||
* **scale**: This value specifies a positive number that scales the size of the resultant image. | ||
* **bg**: The background color of the SVG (transparent by default). | ||
@@ -63,0 +64,0 @@ |
@@ -74,2 +74,10 @@ 'use strict'; | ||
// fill background | ||
if( options.bg ){ | ||
buffCxt.globalCompositeOperation = 'destination-over'; | ||
buffCxt.fillStyle = options.bg; | ||
buffCxt.fillRect( 0, 0, width, height ); | ||
} | ||
buffCxt.globalCompositeOperation = 'source-over'; | ||
@@ -106,10 +114,2 @@ | ||
// need to fill bg at end like this in order to fill cleared transparent pixels in jpgs | ||
if( options.bg ){ | ||
buffCxt.globalCompositeOperation = 'destination-over'; | ||
buffCxt.fillStyle = options.bg; | ||
buffCxt.rect( 0, 0, width, height ); | ||
buffCxt.fill(); | ||
} | ||
} | ||
@@ -116,0 +116,0 @@ |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
86
68456
162
1