@d3fc/d3fc-element - npm Package Compare versions

Comparing version 5.2.16 to 5.3.0

build/d3fc-element.js

@@ -388,3 +388,3 @@ (function (factory) {
 
-            applyMeasurements(node, {
+            applyMeasurements(this, node, {
               width: width,
@@ -425,5 +425,33 @@ height: height
 
-  var Canvas = element(function () {
+  var _default =
+  /*#__PURE__*/
+  function (_element) {
+    _inherits(_default, _element);
+
+    function _default() {
+      _classCallCheck(this, _default);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(_default).apply(this, arguments));
+    }
+
+    _createClass(_default, [{
+      key: "setWebglViewport",
+      get: function get() {
+        return this.hasAttribute('set-webgl-viewport') && this.getAttribute('set-webgl-viewport') !== 'false';
+      },
+      set: function set(setWebglViewport) {
+        if (setWebglViewport && !this.setWebglViewport) {
+          this.setAttribute('set-webgl-viewport', '');
+        } else if (!setWebglViewport && this.setWebglViewport) {
+          this.removeAttribute('set-webgl-viewport');
+        }
+
+        this.requestRedraw();
+      }
+    }]);
+
+    return _default;
+  }(element(function () {
     return document.createElement('canvas');
-  }, function (node, _ref) {
+  }, function (element, node, _ref) {
     var width = _ref.width,
@@ -433,4 +461,9 @@ height = _ref.height;
     node.setAttribute('height', height);
-  });
 
+    if (element.setWebglViewport) {
+      var context = node.getContext('webgl');
+      context.viewport(0, 0, width, height);
+    }
+  }));
+
   var updateAutoResize = function updateAutoResize(element) {
@@ -465,3 +498,3 @@ if (element.autoResize) {
 
-  var _default =
+  var _default$1 =
   /*#__PURE__*/
@@ -527,3 +560,3 @@ function (_HTMLElement) {
     return document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  }, function (node, _ref) {
+  }, function (element, node, _ref) {
     var width = _ref.width,
@@ -550,6 +583,6 @@ height = _ref.height;
 
-  customElements.define('d3fc-canvas', Canvas);
-  customElements.define('d3fc-group', _default);
+  customElements.define('d3fc-canvas', _default);
+  customElements.define('d3fc-group', _default$1);
   customElements.define('d3fc-svg', Svg);
 
 }));

build/d3fc-element.min.js

@@ -1,1 +0,1 @@
-(function(a){"function"==typeof define&&define.amd?define(a):a()})(function(){'use strict';function a(b){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},a(b)}function b(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function c(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function d(a,b,d){return b&&c(a.prototype,b),d&&c(a,d),a}function e(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&g(a,b)}function f(a){return f=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},f(a)}function g(a,b){return g=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},g(a,b)}function h(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(a){return!1}}function i(){return i=h()?Reflect.construct:function(b,c,d){var e=[null];e.push.apply(e,c);var a=Function.bind.apply(b,e),f=new a;return d&&g(f,d.prototype),f},i.apply(null,arguments)}function j(a){return-1!==Function.toString.call(a).indexOf("[native code]")}function k(a){var b="function"==typeof Map?new Map:void 0;return k=function(a){function c(){return i(a,arguments,f(this).constructor)}if(null===a||!j(a))return a;if("function"!=typeof a)throw new TypeError("Super expression must either be null or a function");if("undefined"!=typeof b){if(b.has(a))return b.get(a);b.set(a,c)}return c.prototype=Object.create(a.prototype,{constructor:{value:c,enumerable:!1,writable:!0,configurable:!0}}),g(c,a)},k(a)}function l(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function m(a,b){return b&&("object"==typeof b||"function"==typeof b)?b:l(a)}function n(a){return q(a)||r(a)||t()}function o(a){return p(a)||r(a)||s()}function p(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}}function q(a){if(Array.isArray(a))return a}function r(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function t(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}var u=function(a){return a["__d3fc-elements__"]||{}},v=function(a,b){a["__d3fc-elements__"]=b},w=function(a){return delete a["__d3fc-elements__"]},x=function(a){return"D3FC-GROUP"===a.tagName?[a].concat(o(a.querySelectorAll("d3fc-canvas, d3fc-group, d3fc-svg"))):[a]},y=function(a){var b=u(a),c=b.width,d=b.height,e=a.useDevicePixelRatio&&null!=global.devicePixelRatio?global.devicePixelRatio:1,f=a.clientWidth*e,g=a.clientHeight*e;v(a,{pixelRatio:e,width:f,height:g,resized:f!==c||g!==d})};if("function"!=typeof CustomEvent)throw new Error("d3fc-element depends on CustomEvent. Make sure that you load a polyfill in older browsers. See README.");var z=function(a){var b=u(a),c=new CustomEvent("measure",{detail:b});a.dispatchEvent(c)},A=function(a){var b=u(a),c=new CustomEvent("draw",{detail:b});a.dispatchEvent(c)},B=function(a){var b=a.map(x).reduce(function(c,a){return c.concat(a)});b.forEach(y),b.forEach(z),b.forEach(A)},C=function(a){return u(a.ownerDocument).queue||[]},D=function(a,b){var c=u(a.ownerDocument),d=c.requestId;null==d&&(d=requestAnimationFrame(function(){var b=C(a);B(b),E(a)})),v(a.ownerDocument,{queue:b,requestId:d})},E=function(a){return w(a.ownerDocument)},F=function(a,b){var c=a;do if(c.parentNode===b)return!0;while(c=c.parentNode);return!1},G=function(a){var b=C(a),c=-1<b.indexOf(a);if(!c){var d=b.some(function(b){return F(a,b)});if(!d){var e=b.filter(function(b){return!F(b,a)});e.push(a),D(a,e)}}};if("function"!=typeof HTMLElement)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");var H=function(a){null!=a.__measureListener__||(a.__measureListener__=function(b){return a.setMeasurements(b.detail)},a.addEventListener("measure",a.__measureListener__))},I=function(a){null==a.__measureListener__||(a.removeEventListener("measure",a.__measureListener__),a.__measureListener__=null)},J=function(a,c){return function(g){function h(){return b(this,h),m(this,f(h).apply(this,arguments))}return e(h,g),d(h,[{key:"attributeChangedCallback",value:function(a){"use-device-pixel-ratio"===a?this.requestRedraw():void 0}},{key:"connectedCallback",value:function(){0===this.childNodes.length&&this.appendChild(a()),H(this)}},{key:"disconnectedCallback",value:function(){I(this)}},{key:"setMeasurements",value:function(a){var b=a.width,d=a.height,e=n(this.childNodes),f=e[0],g=e.slice(1);if(0<g.length)throw new Error("A d3fc-svg/canvas element must only contain a single svg/canvas element.");c(f,{width:b,height:d})}},{key:"requestRedraw",value:function(){G(this)}},{key:"useDevicePixelRatio",get:function(){return this.hasAttribute("use-device-pixel-ratio")&&"false"!==this.getAttribute("use-device-pixel-ratio")},set:function(a){a&&!this.useDevicePixelRatio?this.setAttribute("use-device-pixel-ratio",""):!a&&this.useDevicePixelRatio&&this.removeAttribute("use-device-pixel-ratio"),this.requestRedraw()}}],[{key:"observedAttributes",get:function(){return["use-device-pixel-ratio"]}}]),h}(k(HTMLElement))},K=J(function(){return document.createElement("canvas")},function(a,b){var c=b.width,d=b.height;a.setAttribute("width",c),a.setAttribute("height",d)}),L=function(a){a.autoResize?M(a):N(a)},M=function(a){null!=a.__autoResizeListener__||(a.__autoResizeListener__=function(){return G(a)},addEventListener("resize",a.__autoResizeListener__))},N=function(a){null==a.__autoResizeListener__||(removeEventListener("resize",a.__autoResizeListener__),a.__autoResizeListener__=null)},O=function(a){function c(){return b(this,c),m(this,f(c).apply(this,arguments))}return e(c,a),d(c,[{key:"connectedCallback",value:function(){L(this)}},{key:"disconnectedCallback",value:function(){N(this)}},{key:"requestRedraw",value:function(){G(this)}},{key:"attributeChangedCallback",value:function(a){"auto-resize"===a?L(this):void 0}},{key:"autoResize",get:function(){return this.hasAttribute("auto-resize")&&"false"!==this.getAttribute("auto-resize")},set:function(a){a&&!this.autoResize?this.setAttribute("auto-resize",""):!a&&this.autoResize&&this.removeAttribute("auto-resize"),L(this)}}],[{key:"observedAttributes",get:function(){return["auto-resize"]}}]),c}(k(HTMLElement)),P=J(function(){return document.createElementNS("http://www.w3.org/2000/svg","svg")},function(a,b){var c=b.width,d=b.height;a.setAttribute("viewBox","0 0 ".concat(c," ").concat(d))}),Q="d3fc-canvas,d3fc-svg{position:relative;display:block}d3fc-canvas>canvas,d3fc-svg>svg{position:absolute;height:100%;width:100%}d3fc-svg>svg{overflow:visible}",R=document.createElement("style");if(R.setAttribute("type","text/css"),document.querySelector("head").appendChild(R),R.styleSheet?R.styleSheet.cssText+=Q:R.textContent+=Q,"object"!==("undefined"==typeof customElements?"undefined":a(customElements))||"function"!=typeof customElements.define)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");customElements.define("d3fc-canvas",K),customElements.define("d3fc-group",O),customElements.define("d3fc-svg",P)});
+(function(a){"function"==typeof define&&define.amd?define(a):a()})(function(){'use strict';function a(b){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},a(b)}function b(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function c(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function d(a,b,d){return b&&c(a.prototype,b),d&&c(a,d),a}function e(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&g(a,b)}function f(a){return f=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},f(a)}function g(a,b){return g=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},g(a,b)}function h(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(a){return!1}}function i(){return i=h()?Reflect.construct:function(b,c,d){var e=[null];e.push.apply(e,c);var a=Function.bind.apply(b,e),f=new a;return d&&g(f,d.prototype),f},i.apply(null,arguments)}function j(a){return-1!==Function.toString.call(a).indexOf("[native code]")}function k(a){var b="function"==typeof Map?new Map:void 0;return k=function(a){function c(){return i(a,arguments,f(this).constructor)}if(null===a||!j(a))return a;if("function"!=typeof a)throw new TypeError("Super expression must either be null or a function");if("undefined"!=typeof b){if(b.has(a))return b.get(a);b.set(a,c)}return c.prototype=Object.create(a.prototype,{constructor:{value:c,enumerable:!1,writable:!0,configurable:!0}}),g(c,a)},k(a)}function l(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function m(a,b){return b&&("object"==typeof b||"function"==typeof b)?b:l(a)}function n(a){return q(a)||r(a)||t()}function o(a){return p(a)||r(a)||s()}function p(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}}function q(a){if(Array.isArray(a))return a}function r(a){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a))return Array.from(a)}function s(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function t(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}var u=function(a){return a["__d3fc-elements__"]||{}},v=function(a,b){a["__d3fc-elements__"]=b},w=function(a){return delete a["__d3fc-elements__"]},x=function(a){return"D3FC-GROUP"===a.tagName?[a].concat(o(a.querySelectorAll("d3fc-canvas, d3fc-group, d3fc-svg"))):[a]},y=function(a){var b=u(a),c=b.width,d=b.height,e=a.useDevicePixelRatio&&null!=global.devicePixelRatio?global.devicePixelRatio:1,f=a.clientWidth*e,g=a.clientHeight*e;v(a,{pixelRatio:e,width:f,height:g,resized:f!==c||g!==d})};if("function"!=typeof CustomEvent)throw new Error("d3fc-element depends on CustomEvent. Make sure that you load a polyfill in older browsers. See README.");var z=function(a){var b=u(a),c=new CustomEvent("measure",{detail:b});a.dispatchEvent(c)},A=function(a){var b=u(a),c=new CustomEvent("draw",{detail:b});a.dispatchEvent(c)},B=function(a){var b=a.map(x).reduce(function(c,a){return c.concat(a)});b.forEach(y),b.forEach(z),b.forEach(A)},C=function(a){return u(a.ownerDocument).queue||[]},D=function(a,b){var c=u(a.ownerDocument),d=c.requestId;null==d&&(d=requestAnimationFrame(function(){var b=C(a);B(b),E(a)})),v(a.ownerDocument,{queue:b,requestId:d})},E=function(a){return w(a.ownerDocument)},F=function(a,b){var c=a;do if(c.parentNode===b)return!0;while(c=c.parentNode);return!1},G=function(a){var b=C(a),c=-1<b.indexOf(a);if(!c){var d=b.some(function(b){return F(a,b)});if(!d){var e=b.filter(function(b){return!F(b,a)});e.push(a),D(a,e)}}};if("function"!=typeof HTMLElement)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");var H=function(a){null!=a.__measureListener__||(a.__measureListener__=function(b){return a.setMeasurements(b.detail)},a.addEventListener("measure",a.__measureListener__))},I=function(a){null==a.__measureListener__||(a.removeEventListener("measure",a.__measureListener__),a.__measureListener__=null)},J=function(a,c){return function(g){function h(){return b(this,h),m(this,f(h).apply(this,arguments))}return e(h,g),d(h,[{key:"attributeChangedCallback",value:function(a){"use-device-pixel-ratio"===a?this.requestRedraw():void 0}},{key:"connectedCallback",value:function(){0===this.childNodes.length&&this.appendChild(a()),H(this)}},{key:"disconnectedCallback",value:function(){I(this)}},{key:"setMeasurements",value:function(a){var b=a.width,d=a.height,e=n(this.childNodes),f=e[0],g=e.slice(1);if(0<g.length)throw new Error("A d3fc-svg/canvas element must only contain a single svg/canvas element.");c(this,f,{width:b,height:d})}},{key:"requestRedraw",value:function(){G(this)}},{key:"useDevicePixelRatio",get:function(){return this.hasAttribute("use-device-pixel-ratio")&&"false"!==this.getAttribute("use-device-pixel-ratio")},set:function(a){a&&!this.useDevicePixelRatio?this.setAttribute("use-device-pixel-ratio",""):!a&&this.useDevicePixelRatio&&this.removeAttribute("use-device-pixel-ratio"),this.requestRedraw()}}],[{key:"observedAttributes",get:function(){return["use-device-pixel-ratio"]}}]),h}(k(HTMLElement))},K=function(a){function c(){return b(this,c),m(this,f(c).apply(this,arguments))}return e(c,a),d(c,[{key:"setWebglViewport",get:function(){return this.hasAttribute("set-webgl-viewport")&&"false"!==this.getAttribute("set-webgl-viewport")},set:function(a){a&&!this.setWebglViewport?this.setAttribute("set-webgl-viewport",""):!a&&this.setWebglViewport&&this.removeAttribute("set-webgl-viewport"),this.requestRedraw()}}]),c}(J(function(){return document.createElement("canvas")},function(a,b,c){var d=c.width,e=c.height;if(b.setAttribute("width",d),b.setAttribute("height",e),a.setWebglViewport){var f=b.getContext("webgl");f.viewport(0,0,d,e)}})),L=function(a){a.autoResize?M(a):N(a)},M=function(a){null!=a.__autoResizeListener__||(a.__autoResizeListener__=function(){return G(a)},addEventListener("resize",a.__autoResizeListener__))},N=function(a){null==a.__autoResizeListener__||(removeEventListener("resize",a.__autoResizeListener__),a.__autoResizeListener__=null)},O=function(a){function c(){return b(this,c),m(this,f(c).apply(this,arguments))}return e(c,a),d(c,[{key:"connectedCallback",value:function(){L(this)}},{key:"disconnectedCallback",value:function(){N(this)}},{key:"requestRedraw",value:function(){G(this)}},{key:"attributeChangedCallback",value:function(a){"auto-resize"===a?L(this):void 0}},{key:"autoResize",get:function(){return this.hasAttribute("auto-resize")&&"false"!==this.getAttribute("auto-resize")},set:function(a){a&&!this.autoResize?this.setAttribute("auto-resize",""):!a&&this.autoResize&&this.removeAttribute("auto-resize"),L(this)}}],[{key:"observedAttributes",get:function(){return["auto-resize"]}}]),c}(k(HTMLElement)),P=J(function(){return document.createElementNS("http://www.w3.org/2000/svg","svg")},function(a,b,c){var d=c.width,e=c.height;b.setAttribute("viewBox","0 0 ".concat(d," ").concat(e))}),Q="d3fc-canvas,d3fc-svg{position:relative;display:block}d3fc-canvas>canvas,d3fc-svg>svg{position:absolute;height:100%;width:100%}d3fc-svg>svg{overflow:visible}",R=document.createElement("style");if(R.setAttribute("type","text/css"),document.querySelector("head").appendChild(R),R.styleSheet?R.styleSheet.cssText+=Q:R.textContent+=Q,"object"!==("undefined"==typeof customElements?"undefined":a(customElements))||"function"!=typeof customElements.define)throw new Error("d3fc-element depends on Custom Elements (v1). Make sure that you load a polyfill in older browsers. See README.");customElements.define("d3fc-canvas",K),customElements.define("d3fc-group",O),customElements.define("d3fc-svg",P)});

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.3.0](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-element@5.2.16...@d3fc/d3fc-element@5.3.0) (2020-01-03)
+
+
+### Features
+
+* add set-webgl-viewport to d3fc-canvas ([6c870e4](https://github.com/d3fc/d3fc/commit/6c870e4))
+
+
+
+
+
 ## [5.2.16](https://github.com/d3fc/d3fc/compare/@d3fc/d3fc-element@5.2.15...@d3fc/d3fc-element@5.2.16) (2019-11-28)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@d3fc/d3fc-element",
-  "version": "5.2.16",
+  "version": "5.3.0",
   "description": "Custom HTML elements that make it easier to create responsive visualisations that integrate easily with other UI frameworks (e.g. React, Angular)",
@@ -26,3 +26,3 @@ "license": "MIT",
     "@d3fc/d3fc-extent": "^3.1.7",
-    "@d3fc/d3fc-series": "^4.1.1",
+    "@d3fc/d3fc-series": "^4.2.0",
     "d3": "^4.1.1",
@@ -34,3 +34,3 @@ "document-register-element": "^1.7.2"
   },
-  "gitHead": "de82a1a109ddce4b5721fc4e0d2039ddd497817d"
+  "gitHead": "e031afe3755ffe2fc98b9c17671ca2c1a8e29d05"
 }

README.md

@@ -80,2 +80,8 @@ # d3fc-element
 
+<a name="canvas_setWebGlViewport" href="#canvas_setWebGlViewport">#</a> *canvas*.**setWebGlViewport**()
+
+Note `d3fc-svg` does not support this property.
+
+Available as the property `setWebglViewport` or the attribute `set-webgl-viewport`. Controls whether the surface dimensions are additionally set on the WebGL context [viewport](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/viewport).
+
 ### &lt;d3fc-group&gt;
@@ -82,0 +88,0 @@

src/canvas.js

 import element from './element';
 
-export default element(
+export default class extends element(
     () => document.createElement('canvas'),
-    (node, { width, height }) => {
+    (element, node, { width, height }) => {
         node.setAttribute('width', width);
         node.setAttribute('height', height);
+        if (element.setWebglViewport) {
+            const context = node.getContext('webgl');
+            context.viewport(0, 0, width, height);
+        }
     }
-);
+) {
+    get setWebglViewport() {
+        return this.hasAttribute('set-webgl-viewport') && this.getAttribute('set-webgl-viewport') !== 'false';
+    }
+
+    set setWebglViewport(setWebglViewport) {
+        if (setWebglViewport && !this.setWebglViewport) {
+            this.setAttribute('set-webgl-viewport', '');
+        } else if (!setWebglViewport && this.setWebglViewport) {
+            this.removeAttribute('set-webgl-viewport');
+        }
+        this.requestRedraw();
+    }
+}

src/element.js

@@ -53,3 +53,3 @@ import requestRedraw from './requestRedraw';
         }
-        applyMeasurements(node, { width, height });
+        applyMeasurements(this, node, { width, height });
     }
@@ -56,0 +56,0 @@

src/svg.js

@@ -5,5 +5,5 @@ import element from './element';
     () => document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
-    (node, { width, height }) => {
+    (element, node, { width, height }) => {
         node.setAttribute('viewBox', `0 0 ${width} ${height}`);
     }
 );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64629

increased by4.52%

Lines of code

1072

increased by4.38%

Number of lines in readme file

127

increased by4.96%

No dependency changes