d3-canvas-transition/build/d3-canvas-transition.min.js

Animated transitions for D3 selections on svg and canvas

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection"),require("d3-collection"),require("d3-color"),require("d3-timer")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-collection","d3-color","d3-timer"],e):e(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3)}(this,function(t,e,n,i,r){"use strict";function o(t){var e=q[t.tagName];return e?e(t):{x:0,y:0,width:t.context.canvas.width,height:t.context.canvas.height}}function s(t,e,n){if("none"===e)return!1;if(e){if("string"==typeof e&&"url("===e.substring(0,4)){var r=e.substring(4,e.length-1),o=w(t.rootNode).select(r).node();return o?c(t,o,n):null}if(!n&&0!==n)return e;var s=i.color(e);if(s)return s.opacity=n,""+s}}function a(t){this.node=t}function c(t,e,n){var i=A[e.tagName];if(i)return i(t,e,n)}function u(){return new h}function h(){this._head=null,this._tail=null,this._length=0,Object.defineProperty(this,"length",{get:function(){return this._length}})}function f(t,e){var n=t.rootNode;n._touches||(n._touches=0),n._touches+=e,n._touches&&!n._scheduled&&(n._scheduled=r.timeout(d(n)))}function l(t,e){var n=t.countNodes,i=R.get(t.tagName),r=t.factor,o=t.attrs;if(!1!==i)if(t.attrs){var a,c,u=t.context;u.save(),void 0!==o.$opacity&&(u.globalAlpha=+o.$opacity),o["$stroke-linecap"]&&(u.lineCap=o["$stroke-linecap"]),o["$stroke-linejoin"]&&(u.lineJoin=o["$stroke-linejoin"]),o["$mix-blend-mode"]&&(u.globalCompositeOperation=o["$mix-blend-mode"]),I(t),"none"===(a=t.getValue("stroke"))?a=!1:((a=s(t,t.getValue("stroke"),t.getValue("stroke-opacity")))&&(u.strokeStyle=a),void 0!==o["$stroke-width"]&&(c=S(t.attrs["$stroke-width"]))&&(u.lineWidth=r*c),a=0!==c);var h=s(t,t.getValue("fill"),t.getValue("fill-opacity"));h&&(u.fillStyle=h),i&&i(t,a,h,e),n&&t.each(function(t){return l(t,e)}),u.restore()}else n&&t.each(function(t){return l(t,e)})}function d(t,e,n){return function(){if(t._scheduled||n){var i=t.context;return t._touches=0,i.beginPath(),i.closePath(),i.setTransform(1,0,0,1,0,0),i.clearRect(0,0,i.canvas.width,i.canvas.height),e&&(e.nodes=[]),l(t,e),t._scheduled=!1,f(t,0),e?e.nodes:null}}}function g(t){this.node=t,this.context=t.context,this.current=t}function v(t){var e=this.getContext("2d")._rootElement;e&&y(e,t)}function p(t){var e=this.getContext("2d"),n=e._rootElement;if(n){t.canvasPoint={x:n.factor*t.offsetX,y:n.factor*t.offsetY};var i=d(n,t.canvasPoint,!0)();("mousemove"===t.type?_:x)(e,i,t)}}function x(t,e,n){for(var i=e.length-1;i>=0&&!y(e[i],n);--i);}function _(t,e,n){var i,r,o=t._activeNodes,s=[],a=e.length?e[e.length-1]:null;if(o)for(r=0;r<o.length;++r)i=o[r],a&&i!==a&&i.parentNode===a.parentNode?y(i,n,"mouseleave"):e.indexOf(i)>-1?(s.push(i),y(i,n,"mousemove")):y(i,n,"mouseleave");t._activeNodes=o=s,-1===o.indexOf(a)&&(o.push(a),y(a,n,"mouseenter"))}function y(t,e,n){var i=t.events[n||e.type];if(i){for(var r=0;r<i.length;++r)i[r].call(t,e);return t}}function m(t,e){var n,i={},r="";Object.defineProperties(this,{context:{get:function(){return e}},deque:{get:function(){return n||(n=u()),n}},events:{get:function(){return i}},tagName:{get:function(){return t}},childNodes:{get:function(){return n?n.list():[]}},firstChild:{get:function(){return n?n._head:null}},lastChild:{get:function(){return n?n._tail:null}},parentNode:{get:function(){return this._parent}},previousSibling:{get:function(){return this._prev}},nextSibling:{get:function(){return this._next}},namespaceURI:{get:function(){return M}},textContent:{get:function(){return r},set:function(t){r=""+t,f(this,1)}},clientLeft:{get:function(){return e.canvas.clientLeft}},clientTop:{get:function(){return e.canvas.clientTop}},clientWidth:{get:function(){return e.canvas.clientWidth}},clientHeight:{get:function(){return e.canvas.clientHeight}},rootNode:{get:function(){return this.context._rootElement}},countNodes:{get:function(){return n?n._length:0}},factor:{get:function(){return this.context._factor}}})}function b(t,e,n){for(var i,r,o,s,a,c=t.split(" "),u=new g(e),h=u.next(),f=0;f<c.length;++f)"*"===(t=c[f])?t={}:(t.indexOf("#")>-1?(o=(r=t.split("#"))[0],s=r[1]):t.indexOf(".")>-1?(o=(r=t.split("."))[0],i=r.splice(1).join(" ")):o=t,t={tag:o,id:s,classes:i}),c[f]=t;for(;h;){for(var l=0;l<c.length;++l)if(!((a=c[l]).tag&&h.tagName!==a.tag||a.id&&h.id!==a.id||a.classes&&h.class!==a.classes)){if(n){n.push(h);break}return h}h=u.next()}return n}function P(t,e){return function(){t.apply(this,e)}}function w(t,n){var i=e.selection();return t?C(t)&&1===arguments.length?i.select(function(){return t}):"string"!=typeof t||(t=e.select(t).node())?(t.getContext&&(t=t.getContext("2d")),t._rootElement||(n||(n=z||B()),t._factor=n,t._rootElement=new m("canvas",t)),i.select(function(){return t._rootElement})):i:i}function C(t){return t instanceof m}function N(t,e){return 1===e?t:new O(t,e)}function O(t,e){this._context=t,this._factor=1,this._f=e}function k(t,e){var n,i,r,o,s,a,c,u,h=t.length,f=new Array(h);for(i=0;i<h;i++)r=i+1,(n=i-1)<0&&(n=h-1),r===h&&(r=0),o=t[n],s=t[i],a=t[r],c=T(o[0],o[1],s[0],s[1],e,!1),u=T(s[0],s[1],a[0],a[1],e,!0),f[i]=[c[0],c[1],s[0],s[1],u[0],u[1]];return f}function T(t,e,n,i,r,o){var s=Math.sqrt(Math.pow(n-t,2)+Math.pow(i-e,2)),a=o?r/s:(s-r)/s;return[t+a*(n-t),e+a*(i-e)]}function V(t,e){if(1===e)return t;var n,i=0,r="";for(t+="";n=U.exec(t);)r+=t.substring(i,n.index)+e*n[0],i=n.index+n[0].length;return r+t.substring(i)}function $(t){for(var e=[],n=0,i=void 0,r=void 0,o=void 0,s=0;s<X.length;++s)i=X[s],(r=t.getValue("font-"+i))&&("size"===i?r=(n=t.factor*S(r))+"px":"family"===i&&(o=r),e.push(r));return n&&(o||e.push("sans serif"),t.context.font=e.join(" ")),n}var S=function(t,e){if("string"==typeof t){if("px"===t.substring(t.length-2))return+t.substring(0,t.length-2);if("%"===t.substring(t.length-1))return.01*t.substring(0,t.length-1)*(e||1);if("em"===t.substring(t.length-2))return t.substring(0,t.length-2)*(e||1)}else if("number"==typeof t)return t},q={},A={linearGradient:function(t,e,n){var r,s=e.context,a=o(t),c=S(e.attrs.get("x1")||"0%",a.width),u=S(e.attrs.get("x2")||"100%",a.width),h=S(e.attrs.get("y1")||"0%",a.height),f=S(e.attrs.get("y2")||"0%",a.height),l=s.createLinearGradient(c,h,u,f);return e.each(function(t){r=i.color(t.attrs.get("stop-color")),(n||0===n)&&(r.opacity=n),l.addColorStop(S(t.attrs.get("offset")),""+r)}),l},radialGradient:function(t,e,n){var r,s=e.context,a=o(t),c=S(e.attrs.get("cx")||"50%",a.width),u=S(e.attrs.get("cy")||"50%",a.height),h=S(e.attrs.get("fx")||c,a.width),f=S(e.attrs.get("fy")||u,a.height),l=S(e.attrs.get("r")||"50%",Math.max(a.height,a.width)),d=s.createRadialGradient(a.x+h,a.y+f,0,a.x+c,a.y+u,l);return e.each(function(t){r=i.color(t.attrs.get("stop-color")),(n||0===n)&&(r.opacity=n),d.addColorStop(S(t.attrs.get("offset")),""+r)}),d}};a.prototype={getPropertyValue:function(t){var e=this.node.getValue(t);return void 0===e&&(e=window.getComputedStyle(this.node.context.canvas).getPropertyValue(t)),e}};var E=function(t,e,n){return t.attrs.get(e)!==n&&(t.attrs.set(e,n),!0)};h.prototype=u.prototype={prepend:function(t,e){this._length?e?(t._prev=e._prev,t._next=e,e._prev&&(e._prev._next=t),e._prev=t):(t._prev=this._tail,t._next=null,this._tail._next=t):(t._prev=null,t._next=null),t._prev||(this._head=t),t._next||(this._tail=t),this._length++},remove:function(t){t._prev&&(t._prev._next=t._next),t._next&&(t._next._prev=t._prev),this._head===t&&(this._head=t._next),this._tail===t&&(this._tail=t._prev),delete t._prev,delete t._next,this._length--},list:function(){for(var t=this._head,e=[];t;)e.push(t),t=t._next;return e},each:function(t){for(var e=this._head;e;)t(e),e=e._next}};var j=Math.PI/180,I=function(t){var e,n,i,r=+(t.attrs.get("x")||0),o=+(t.attrs.get("y")||0),s=t.attrs.get("transform"),a=t.context;if("string"==typeof s){var c,u,h,f=s.indexOf("translate(");f>-1&&(c=(u=s.substring(f+10)).indexOf(")"),r+=+(h=u.substring(0,c).split(","))[0],2===h.length&&(o+=+h[1])),(f=s.indexOf("rotate("))>-1&&(i=+(u=s.substring(f+7)).substring(0,u.indexOf(")"))),(f=s.indexOf("scale("))>-1&&(c=(u=s.substring(f+6)).indexOf(")"),e=+(h=u.substring(0,c).split(","))[0],2===h.length&&(n=+h[1]))}else s&&(r+=s.x,o+=s.y,e=s.k);e&&(n=n||e,a.scale(e,n)),(r||o)&&a.translate(a._factor*r,a._factor*o),i&&i===i&&a.rotate(j*i)},R=n.map();g.prototype={next:function(){var t=this.current;if(!t)return null;if(t.firstChild)t=t.firstChild;else for(;t;){if(t.nextSibling){t=t.nextSibling;break}(t=t.parentNode)===this.node&&(t=null)}return this.current=t,t}};var L={mouseenter:"mousemove",mouseleave:"mousemove"},M="canvas",G=["cursor"];m.prototype={querySelectorAll:function(t){return this.countNodes?b(t,this,[]):[]},querySelector:function(t){if(this.countNodes)return b(t,this)},createElementNS:function(t,e){return new m(e,this.context)},hasChildNodes:function(){return this.countNodes>0},contains:function(t){for(;t;){if(t._parent==this)return!0;t=t._parent}return!1},appendChild:function(t){return this.insertBefore(t)},insertBefore:function(t,e){if(t===this)throw Error("inserting self into children");if(!(t instanceof m))throw Error("Cannot insert a non canvas element into a canvas element");return t._parent&&t._parent.removeChild(t),this.deque.prepend(t,e),t._parent=this,f(this,1),t},removeChild:function(t){if(t._parent===this)return delete t._parent,this.deque.remove(t),f(this,1),t},setAttribute:function(t,e){"class"===t?this.class=e:"id"===t?this.id=e:(this.attrs||(this.attrs=n.map()),E(this,t,e)&&f(this,1))},removeAttribute:function(t){this.attrs&&(this.attrs.remove(t),f(this,1))},getAttribute:function(t){var e=this.attrs?this.attrs.get(t):void 0;return void 0!==e||this._parent||(e=this.context.canvas[t]),e},addEventListener:function(t,e){var n=this.context.canvas;this.rootNode===this?(arguments[1]=v,n.addEventListener.apply(n,arguments)):(arguments[0]=L[t]||t,arguments[1]=p,n.addEventListener.apply(n,arguments));var i=this.events[t];i||(this.events[t]=i=[]),-1===i.indexOf(e)&&i.push(e)},removeEventListener:function(t,e){var n=this.events[t];if(n){var i=n.indexOf(e);i>-1&&n.splice(i,1)}},getBoundingClientRect:function(){return this.context.canvas.getBoundingClientRect()},each:function(t){this.countNodes&&this.deque.each(t)},getValue:function(t){var e=this.getAttribute(t);return void 0===e&&this._parent?this._parent.getValue(t):e},removeProperty:function(t){this.removeAttribute(t)},setProperty:function(t,e){G.indexOf(t)>-1?this.context.canvas.style[t]=e:this.setAttribute(t,e)},getProperty:function(t){return this.getAttribute(t)},getPropertyValue:function(t){return this.getAttribute(t)},getComputedStyle:function(t){return new a(t)},get ownerDocument(){return this},get style(){return this},get defaultView(){return this},get document(){return this.rootNode}};var z,B=function(t){return t||window.devicePixelRatio||1},D=function(t){return function(){return P(t,arguments)}},W=e.selection.prototype.attr;e.selection.prototype.attr=function(t,e){if(arguments.length>1){var n,i=this._parents[0]||this.node();C(i)&&"function"==typeof e.context&&((n=e.pathObject)||(n=D(e),e.pathObject=n),e.context()||e.context(N(i.context,i.factor)),arguments[1]=n)}return W.apply(this,arguments)},e.selection.prototype.canvas=function(t){var e=this,n=e.node();if("CANVAS"!==n.tagName||C(n)||(n=(e=w(n)).node()),C(n)&&t){var i=n.context,r=n.factor,o=i.canvas.width,s=i.canvas.height;i.beginPath(),i.closePath(),i.setTransform(1,0,0,1,0,0),i.clearRect(0,0,o,s),r>1&&(i.canvas.style.width=o+"px",i.canvas.style.height=s+"px",i.canvas.width=o*r,i.canvas.height=s*r,i.scale(r,r))}return e},e.selection.prototype.canvasResolution=function(t){return 1===arguments.length?(z=t,this):this.factor},e.selection.prototype.draw=function(){var t=this.node();if(C(t)){var e=t.rootNode;e===t?d(t)():(e._scheduled&&(e._scheduled=null,e._touches=0),l(t))}return this},O.prototype={beginPath:function(){this._context.beginPath()},closePath:function(){this._context.closePath()},moveTo:function(t,e){this._context.moveTo(this._f*t,this._f*e)},lineTo:function(t,e){this._context.lineTo(this._f*t,this._f*e)},arc:function(){arguments[0]=this._f*arguments[0],arguments[1]=this._f*arguments[1],arguments[2]=this._f*arguments[2],this._context.arc.apply(this._context,arguments)},rect:function(t,e,n,i){this._context.rect(this._f*t,this._f*e,this._f*n,this._f*i)},quadraticCurveTo:function(t,e,n,i){this._context.quadraticCurveTo(this._f*t,this._f*e,this._f*n,this._f*i)},bezierCurveTo:function(t,e,n,i,r,o){this._context.bezierCurveTo(this._f*t,this._f*e,this._f*n,this._f*i,this._f*r,this._f*o)}};var H=function(t,e,n){n>0&&(e=k(e,n));var i,r,o=e.length;for(t.beginPath(),i=0;i<o;i++)r=e[i],0===i?t.moveTo(r[0],r[1]):t.lineTo(r[0],r[1]),n>0&&t.quadraticCurveTo(r[2],r[3],r[4],r[5]);t.closePath()},J=2*Math.PI;q.circle=function(t){var e=t.factor*(t.attrs.get("r")||0);return{x:t.factor*(t.attrs.get("cx")||0)-e,y:t.factor*(t.attrs.get("cy")||0)-e,width:2*e,height:2*e}};var U=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g;q.rect=function(t){var e=t.factor*(t.attrs.get("width")||0);return{x:0,y:0,height:e,width:e}};var X=["style","variant","weight","size","family"],Y={start:"start",middle:"center",end:"end"};R.set("circle",function(t,e,n,i){var r=t.attrs,o=t.context,s=t.factor;o.beginPath(),o.arc(s*(r.$cx||0),s*(r.$cy||0),s*(r.$r||0),0,J),o.closePath(),e&&o.stroke(),n&&o.fill(),i&&o.isPointInPath(i.x,i.y)&&i.nodes.push(t)}),R.set("line",function(t,e,n,i){var r=t.attrs,o=t.factor,s=t.context;s.beginPath(),s.moveTo(o*(r.$x1||0),o*(r.$y1||0)),s.lineTo(o*r.$x2,o*r.$y2),e&&s.stroke(),i&&s.isPointInPath(i.x,i.y)&&i.nodes.push(t)}),R.set("path",function(t,e,n,i){var r=t.attrs.get("d"),o=t.context;if(r)if("function"==typeof r)o.beginPath(),r(t),e&&o.stroke(),n&&o.fill(),i&&o.isPointInPath(i.x,i.y)&&i.nodes.push(t);else if(window.Path2D){var s=new(0,window.Path2D)(V(r,t.factor));e&&o.stroke(s),n&&o.fill(s),i&&o.isPointInPath(s,i.x,i.y)&&i.nodes.push(t)}}),R.set("rect",function(t,e,n,i){var r=t.attrs,o=t.context,s=o._factor,a=r.get("rx")||0,c=r.get("height")||0,u=r.get("width")||0;u&&c&&c!==u&&o.scale(1,c/u),a?H(o,[[0,0],[s*u,0],[s*u,s*u],[0,s*u]],s*a):(o.beginPath(),o.rect(0,0,s*u,s*u),o.closePath()),e&&o.stroke(),n&&o.fill(),i&&o.isPointInPath(i.x,i.y)&&i.nodes.push(t)}),R.set("text",function(t){var e=t.factor,n=$(t)/e,i=t.context;i.textAlign=Y[t.getValue("text-anchor")]||Y.middle,i.textBaseline=t.getValue("text-baseline")||"middle",i.fillText(t.textContent||"",e*S(t.attrs.get("dx")||0,n),e*(S(t.attrs.get("dy")||0,n)-2))}),R.set("linearGradient",!1),R.set("radialGradient",!1),t.selectCanvas=w,t.resolution=B,t.getSize=S,t.canvasPolygon=H,t.canvasVersion="0.3.7",Object.defineProperty(t,"__esModule",{value:!0})});